feat: add learn more about component

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