feat: add learn more about component

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=="],

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",

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() {
               }
             />
             <Route path={ROUTES.READ} element={<Reader />} />
+            <Route path={ROUTES.ABOUT} element={<About />} />
             <Route path="*" element={<Navigate to={ROUTES.HOME} replace />} />
           </Routes>
         </Suspense>

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

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;
 }

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 (
-    <section className="w-screen min-h-[400vh] bg-paper/20 relative flex p-16">
-      <div className="fixed w-screen h-full inset-0 z-0 bg-radial from-accent to-transparent mix-blend-multiply opacity-70" />
-      <motion.div
-        className={"fixed gap-4 top-0 flex"}
-        style={{
-          x: useTransform(smoothProgress, [0, 1], [0, -1000]),
-          scale: useTransform(
-            smoothProgress,
-            [0.05, 0.2, 0.8, 1],
-            [0.5, 1, 1, 0.5],
-          ),
-          y: useTransform(
-            smoothProgress,
-            [0.05, 0.1, 0.8, 1],
-            [400, 200, 200, -300],
-          ),
-        }}
-      >
-        <div className={"max-w-screen max-h-screen p-16"}>
-          <div className="flex flex-col w-full items-start">
-            <div className={"translate-x-24"}>
-              <Logo />
-            </div>
-            <div className={"text-3xl font-tamil flex"}>
-              <span className={"ml-6"}>பின்</span>
-              <ArrowBendDownLeftIcon size={32} />
-              <ArrowBendDownRightIcon size={32} className={"ml-8"} />
-              <span>குறிப்பு</span>
-            </div>
-          </div>
-          <div className="hover-3d my-12 mx-2 cursor-pointer">
-            <div className="card w-96 bg-base-200 text-white bg-[radial-gradient(circle_at_bottom_left,#ffffff04_35%,transparent_36%),radial-gradient(circle_at_top_right,#ffffff04_35%,transparent_36%)] bg-size-[4.95em_4.95em]">
-              <div className="card-body">
-                <div className="flex justify-between mb-3">
-                  <div className="font-bold">pin·ku·rip·pu</div>
-                  <div className="text-5xl opacity-10">
-                    <FlowerLotusIcon />
-                  </div>
-                </div>
-                <div className="text-lg mb-4 opacity-40">/noun/</div>
-                <div className="flex justify-between">
-                  <ul className={"list gap-4"}>
-                    <ol className={"list-item"}>
-                      postscript; a note written after the letter is signed.
-                      <br />
-                      <blockquote className={"text-primary italic"}>
-                        "the most honest thing was always in the{" "}
-                        <span className={"font-tamil"}>பி. கு.</span>"
-                      </blockquote>
-                    </ol>
-                    <ol>the thing you almost didn't say.</ol>
-                  </ul>
-                </div>
-              </div>
-            </div>
+    <ReactLenis root options={{ lerp: 0.1, duration: 1.5, smoothWheel: true }}>
+      <div className={"flex flex-col"}>
+        <section className="flex w-screen h-screen items-center text-5xl"></section>
 
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
+        <section ref={hSectionContainerRef} className="relative h-[400dvh]">
+          <div className="sticky top-0 flex h-screen w-screen items-center overflow-x-hidden">
+            <motion.div
+              style={{
+                x: useTransform(scrollYProgress, [0, 1], ["0%", "-75%"]),
+              }}
+              className="flex w-[400vw] items-center justify-center"
+            >
+              <StorySection />
+
+              <div className="flex h-screen w-screen items-center justify-center bg-neutral-700 text-6xl">
+                <ForWhoSection />
+              </div>
+
+              <div className="flex h-screen w-screen items-center justify-center bg-neutral-600 text-6xl">
+                {/*  zero knowledge  */}
+              </div>
+
+              <div className="flex h-screen w-screen items-center justify-center bg-neutral-500 text-6xl">
+                {/*  OSS - code source, contributions, attribution  */}
+              </div>
+            </motion.div>
           </div>
-        </div>
-        <div className={"w-100 h-100 bg-green-500"}></div>
-        <div className={"w-100 h-100 bg-green-500"}></div>
-        <div className={"w-100 h-100 bg-green-500"}></div>
-        <div className={"w-100 h-100 bg-green-500"}></div>
-        <div className={"w-100 h-100 bg-green-500"}></div>
-        <div className={"w-100 h-100 bg-green-500"}></div>
-      </motion.div>
-    </section>
+        </section>
+
+        <section className="flex h-screen items-center justify-center bg-neutral-900 text-5xl">
+          {/*    Start Writing */}
+        </section>
+      </div>
+    </ReactLenis>
+  );
+}
+
+function StorySection() {
+  return (
+    <div className="flex flex-col min-h-dvh w-screen items-center md:py-18 overscroll-contain">
+      <h1
+        className={
+          "relative tracking-tighter text-5xl md:text-8xl text-neutral-content/80 font-extrabold italic font-serif"
+        }
+      >
+        The Story
+      </h1>
+      <div className="flex flex-col items-center shrink-0">
+        <div className="translate-x-2">
+          <Logo />
+        </div>
+        <div className="flex ml-10 font-tamil text-2xl md:text-3xl group">
+          <div className={"flex flex-col flex-wrap"}>
+            பின்
+            <span
+              className={
+                "font-sans transition-all duration-1000 opacity-0 group-hover:opacity-100 text-xxs tracking-widester uppercase text-neutral-content/90 mt-2"
+              }
+            >
+              after
+            </span>
+          </div>
+          <ArrowBendDownLeftIcon className={"text-primary"} />
+          <ArrowBendDownRightIcon className="ml-8 text-primary" />
+          <div className={"flex flex-col flex-wrap group"}>
+            குறிப்பு
+            <span
+              className={
+                "font-sans transition-all duration-1000 opacity-0 group-hover:opacity-100 text-xxs tracking-widest uppercase text-neutral-content/90 mt-2"
+              }
+            >
+              note. remark.
+            </span>
+          </div>
+        </div>
+        {/* Dict Card */}
+        <div className="hover-3d -my-8 md:m-4 scale-75 md:scale-100 md:my-12 cursor-pointer">
+          <div className="card w-96 bg-base-200 bg-[radial-gradient(circle_at_bottom_left,#ffffff04_35%,transparent_36%),radial-gradient(circle_at_top_right,#ffffff04_35%,transparent_36%)] bg-size-[1.95em_1.95em]">
+            <div className="card-body">
+              <div className="mb-3 flex justify-between">
+                <div className="text-lg">pin·ku·rip·pu</div>
+              </div>
+              <div className="mb-4 text-lg opacity-40">
+                /noun/ <span className={"tracking-widest text-sm"}>tamil</span>
+              </div>
+
+              <ol className="flex flex-col gap-4 list-decimal list-inside p-0 m-0">
+                <li>
+                  postscript; a note written after the letter is signed.
+                  <br />
+                  <blockquote className="text-primary/50 italic mt-2 ml-2 border-l-primary/20 leading-none border-l">
+                    "the most honest thing was always in the{" "}
+                    <span className="font-tamil">பி. கு.</span>"
+                  </blockquote>
+                </li>
+                <li>the thing you almost didn't say.</li>
+              </ol>
+            </div>
+          </div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+        <div
+          className={
+            "max-w-200 md:text-xl p-6 flex flex-col gap-4 md:gap-8 text-base-content/70 leading-relaxed"
+          }
+        >
+          <p className={"hidden md:inline"}>
+            <span className={"text-accent font-serif italic"}>pi. ku.</span> is
+            an abbreviated transliteration of the Tamil word for{" "}
+            <span className={"group italic text-primary font-serif inline"}>
+              P
+              <span className={"text-neutral hidden group-hover:inline"}>
+                ost
+              </span>
+              . S
+              <span className={"text-neutral hidden group-hover:inline"}>
+                cript
+              </span>
+              .
+            </span>{" "}
+            — the thing you add after you've already signed your name, what you
+            write when you thought you were finished, but weren't.
+          </p>
+          <p>
+            <span className={"font-medium text-primary"}>
+              Most of what we actually mean to say never gets said.
+            </span>
+            <br />
+            It sits in drafts , in half-written notes, in the pause before we
+            change the subject. <br />
+            Those words{" "}
+            <span
+              className={"blur-sm hover:blur-none transition-all duration-500"}
+            >
+              don't just disappear. They
+            </span>{" "}
+            stay <span className={"text-primary font-hand"}>unsaid</span> — a
+            quiet weight difficult to bear.
+          </p>
+          <p className={"italic text-primary"}>And that's okay...</p>
+          <p>
+            <span className={"text-accent font-serif italic"}>pi. ku.</span>{" "}
+            <span className={"text-primary"}>
+              was built for putting that weight down.
+            </span>
+            <br />A space for the letters you meant to send, the afterthoughts
+            that deserved more than silence.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ForWhoSection() {
+  return (
+    <div className="flex flex-col h-screen w-screen items-center py-18">
+      <h1
+        className={
+          "relative tracking-tighter text-6xl md:text-8xl text-neutral-content/80 font-extrabold italic font-serif"
+        }
+      >
+        For Who
+      </h1>
+      <div className="flex flex-col items-center shrink-0">
+        <div
+          className={
+            "max-w-200 text-xl p-6 flex flex-col gap-8 text-base-content/70 leading-relaxed"
+          }
+        >
+          <p></p>
+        </div>
+      </div>
+    </div>
   );
 }