From bf6aa345362366e26c33a12b8fa9ecd209e842c1 Mon Sep 17 00:00:00 2001 From: ramvignesh-b Date: Sat, 2 May 2026 04:08:00 +0530 Subject: [PATCH] feat: add learn more about component --- frontend/bun.lock | 5 + frontend/package.json | 1 + frontend/src/App.tsx | 2 + frontend/src/config/routes.ts | 1 + frontend/src/index.css | 2 +- frontend/src/pages/About.tsx | 278 +++++++++++++++++++++++----------- 6 files changed, 202 insertions(+), 87 deletions(-) diff --git a/frontend/bun.lock b/frontend/bun.lock index 4c04d85..dba1cb0 100644 --- a/frontend/bun.lock +++ b/frontend/bun.lock @@ -21,6 +21,7 @@ "daisyui": "^5.5.19", "fabric": "^7.2.0", "idb": "^8.0.3", + "lenis": "^1.3.23", "motion": "^12.38.0", "react": "^19.2.4", "react-dom": "^19.2.4", @@ -491,6 +492,8 @@ "jsdom": ["jsdom@29.0.2", "", { "dependencies": { "@asamuzakjp/css-color": "^5.1.5", "@asamuzakjp/dom-selector": "^7.0.6", "@bramus/specificity": "^2.4.2", "@csstools/css-syntax-patches-for-csstree": "^1.1.1", "@exodus/bytes": "^1.15.0", "css-tree": "^3.2.1", "data-urls": "^7.0.0", "decimal.js": "^10.6.0", "html-encoding-sniffer": "^6.0.0", "is-potential-custom-element-name": "^1.0.1", "lru-cache": "^11.2.7", "parse5": "^8.0.0", "saxes": "^6.0.0", "symbol-tree": "^3.2.4", "tough-cookie": "^6.0.1", "undici": "^7.24.5", "w3c-xmlserializer": "^5.0.0", "webidl-conversions": "^8.0.1", "whatwg-mimetype": "^5.0.0", "whatwg-url": "^16.0.1", "xml-name-validator": "^5.0.0" }, "peerDependencies": { "canvas": "^3.0.0" }, "optionalPeers": ["canvas"] }, "sha512-9VnGEBosc/ZpwyOsJBCQ/3I5p7Q5ngOY14a9bf5btenAORmZfDse1ZEheMiWcJ3h81+Fv7HmJFdS0szo/waF2w=="], + "lenis": ["lenis@1.3.23", "", { "peerDependencies": { "@nuxt/kit": ">=3.0.0", "react": ">=17.0.0", "vue": ">=3.0.0" }, "optionalPeers": ["@nuxt/kit", "react", "vue"] }, "sha512-YxYq3TJqj9sJNv0V9SkyQHejt14xwyIwgDaaMK89Uf9SxQfIszu+gTQSSphh6BWlLTNVKvvXAGkg+Zf+oFIevg=="], + "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="], "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="], @@ -733,6 +736,8 @@ "until-async": ["until-async@3.0.2", "", {}, "sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw=="], + "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="], + "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="], "vite": ["vite@8.0.8", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.4", "postcss": "^8.5.8", "rolldown": "1.0.0-rc.15", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-dbU7/iLVa8KZALJyLOBOQ88nOXtNG8vxKuOT4I2mD+Ya70KPceF4IAmDsmU0h1Qsn5bPrvsY9HJstCRh3hG6Uw=="], diff --git a/frontend/package.json b/frontend/package.json index ba7b412..f2c0f19 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -35,6 +35,7 @@ "daisyui": "^5.5.19", "fabric": "^7.2.0", "idb": "^8.0.3", + "lenis": "^1.3.23", "motion": "^12.38.0", "react": "^19.2.4", "react-dom": "^19.2.4", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6aebeda..c54c4e9 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -13,6 +13,7 @@ const Login = lazy(() => import("./pages/Login")); const Reader = lazy(() => import("./pages/Reader")); const Register = lazy(() => import("./pages/Register")); const VerifyEmail = lazy(() => import("./pages/VerifyEmail")); +const About = lazy(() => import("./pages/About")); export default function App() { const { initialize, isInitializing } = useAuth(); @@ -85,6 +86,7 @@ export default function App() { } /> } /> + } /> } /> diff --git a/frontend/src/config/routes.ts b/frontend/src/config/routes.ts index 56f9d4f..f77204c 100644 --- a/frontend/src/config/routes.ts +++ b/frontend/src/config/routes.ts @@ -8,6 +8,7 @@ export const ROUTES = { DRAWER: "/drawer", WRITE: "/quill/:public_id?", READ: "/read/:public_id", + ABOUT: "/know-piku", }; // Dynamic path BUILDERS diff --git a/frontend/src/index.css b/frontend/src/index.css index ef572be..852b9ba 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -66,5 +66,5 @@ } .glass-card { - @apply bg-glass-bg backdrop-blur-xl border border-white/5 shadow-warm rounded-xl; + @apply bg-glass-bg backdrop-blur-xl border border-white/5 shadow-warm rounded-xl m-4; } diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx index f1e9d25..263fc3d 100644 --- a/frontend/src/pages/About.tsx +++ b/frontend/src/pages/About.tsx @@ -1,98 +1,204 @@ +import { + ArrowBendDownLeftIcon, + ArrowBendDownRightIcon, +} from "@phosphor-icons/react"; +import { ReactLenis } from "lenis/react"; +import { motion, useScroll, useTransform } from "motion/react"; +import { useRef } from "react"; +import Logo from "../components/Logo.tsx"; + import "@fontsource/kavivanar/index.css"; import "@fontsource/space-mono/index.css"; import "@fontsource/redacted-script/index.css"; import "@fontsource/architects-daughter/index.css"; -import { - ArrowBendDownLeftIcon, - ArrowBendDownRightIcon, - FlowerLotusIcon, -} from "@phosphor-icons/react"; -import { motion, useScroll, useSpring, useTransform } from "motion/react"; -import Logo from "../components/Logo.tsx"; - -export default function About() { - const { scrollYProgress } = useScroll(); - const smoothProgress = useSpring(scrollYProgress, { - stiffness: 30, - damping: 50, - restDelta: 0.001, +export default function App() { + const hSectionContainerRef = useRef(null); + const { scrollYProgress } = useScroll({ + target: hSectionContainerRef, }); return ( -
-
- -
-
-
- -
-
- பின் - - - குறிப்பு -
-
-
-
-
-
-
pin·ku·rip·pu
-
- -
-
-
/noun/
-
-
    -
      - postscript; a note written after the letter is signed. -
      -
      - "the most honest thing was always in the{" "} - பி. கு." -
      -
    -
      the thing you almost didn't say.
    -
-
-
-
+ +
+
-
-
-
-
-
-
-
-
+
+
+ + + +
+ +
+ +
+ {/* zero knowledge */} +
+ +
+ {/* OSS - code source, contributions, attribution */} +
+
-
-
-
-
-
-
-
- -
+ + +
+ {/* Start Writing */} +
+ + + ); +} + +function StorySection() { + return ( +
+

+ The Story +

+
+
+ +
+
+
+ பின் + + after + +
+ + +
+ குறிப்பு + + note. remark. + +
+
+ {/* Dict Card */} +
+
+
+
+
pin·ku·rip·pu
+
+
+ /noun/ tamil +
+ +
    +
  1. + postscript; a note written after the letter is signed. +
    +
    + "the most honest thing was always in the{" "} + பி. கு." +
    +
    2. +
  2. the thing you almost didn't say.
    3. +
+
+
+
+
+
+
+
+
+
+
+
+
+

+ pi. ku. is + an abbreviated transliteration of the Tamil word for{" "} + + P + + . S + + . + {" "} + — the thing you add after you've already signed your name, what you + write when you thought you were finished, but weren't. +

+

+ + Most of what we actually mean to say never gets said. + +
+ It sits in drafts , in half-written notes, in the pause before we + change the subject.
+ Those words{" "} + + don't just disappear. They + {" "} + stay unsaid — a + quiet weight difficult to bear. +

+

And that's okay...

+

+ pi. ku.{" "} + + was built for putting that weight down. + +
A space for the letters you meant to send, the afterthoughts + that deserved more than silence. +

+
+
+
+ ); +} + +function ForWhoSection() { + return ( +
+

+ For Who +

+
+
+

+
+
+
); }