feat: motion-fx-01

app/about/page.tsx

@@ -1,6 +1,8 @@
 import { GitPullRequestArrowIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
+import { logout } from "@/actions/auth";
+import { DockNav } from "@/components/dock-nav";
 import { Footer } from "@/components/footer";
 import { Navbar } from "@/components/navbar";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -11,9 +13,10 @@ export const metadata: Metadata = {
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex flex-col justify-between">
+    <div className="min-h-screen flex flex-col justify-between pb-16">
       <section>
         <Navbar />
+        <DockNav logout={logout} />
 
         <div className="space-y-12">
           <Alert className="mt-4">

app/forum/components/logout-button.tsx

@@ -13,9 +13,9 @@ export function LogoutButton() {
       className="grid place-items-center"
     >
       {pending ? (
-        <Loader2Icon className="size-5 animate-spin text-muted-foreground" />
+        <Loader2Icon className="size-4 animate-spin text-muted-foreground" />
       ) : (
-        <LogOutIcon className="size-5" />
+        <LogOutIcon className="size-4" />
       )}
     </button>
   );

app/forum/layout.tsx

@@ -1,18 +1,9 @@
-import {
-  HomeIcon,
-  InfoIcon,
-  MessageCirclePlusIcon,
-  SquareCodeIcon,
-} from "lucide-react";
 import type { Metadata } from "next";
-import Link from "next/link";
 import { redirect } from "next/navigation";
-
 import { logout } from "@/actions/auth";
-import { Button } from "@/components/ui/button";
+import { DockNav } from "@/components/dock-nav";
 import { getSession } from "@/lib/auth";
 import { ForumNavbar } from "./components/forum-navbar";
-import { LogoutButton } from "./components/logout-button";
 
 export const metadata: Metadata = {
   title: "Umedu — Private Forum",
@@ -37,7 +28,8 @@ export default async function ForumLayout({
       <ForumNavbar forumId={session.forumId} />
 
       {children}
-
+      <DockNav logout={logout} />
+      {/* 
       <section className="rounded-t-4xl bg-secondary w-full p-4 max-w-xl mx-auto flex items-center justify-evenly fixed bottom-0 right-0 left-0">
         <Link href="/">
           <HomeIcon className="size-5" />
@@ -56,7 +48,7 @@ export default async function ForumLayout({
         <form action={logout}>
           <LogoutButton />
         </form>
-      </section>
+      </section> */}
     </section>
   );
 }

app/globals.css

@@ -135,4 +135,32 @@
   [role="button"]:not(:disabled) {
     cursor: pointer;
   }
+
+  .shiny-text {
+    display: inline-block;
+    background-image: linear-gradient(
+      120deg,
+      rgba(255, 255, 255, 0) 40%,
+      rgba(255, 255, 255, 0.8) 50%,
+      rgba(255, 255, 255, 0) 60%
+    );
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent; /* ensure text shows the background gradient */
+    color: transparent;
+  }
+
+  .animate-shine {
+    animation: shine var(--shine-duration, 5s) linear infinite;
+  }
+
+  @keyframes shine {
+    0% {
+      background-position: 100%;
+    }
+    100% {
+      background-position: -100%;
+    }
+  }
 }

app/page.tsx

@@ -1,26 +1,50 @@
 import { MessageSquareTextIcon } from "lucide-react";
 import Link from "next/link";
+import DecryptedText from "@/components/DecryptedText";
+import { FlatMap } from "@/components/flat-map";
 import { Footer } from "@/components/footer";
 import { HighlightText } from "@/components/highlight-text";
+import LightRays from "@/components/LightRays";
 import { Navbar } from "@/components/navbar";
+import ShinyText from "@/components/ShinyText";
 import { Button } from "@/components/ui/button";
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex flex-col justify-between">
+    <div className="h-screen flex flex-col justify-between">
+      <LightRays
+        raysOrigin="top-center"
+        raysColor="#ffffff"
+        raysSpeed={1}
+        lightSpread={0.5}
+        fadeDistance={1}
+        rayLength={5}
+        followMouse={true}
+        mouseInfluence={0.1}
+        noiseAmount={0.1}
+        distortion={0}
+        className="custom-rays absolute inset-0 -z-10 opacity-40"
+      />
       <section>
         <Navbar />
         <div className="flex items-center flex-col">
           <h1 className="font-extrabold tracking-tighter text-8xl">
             um<i>edu</i>
           </h1>
           <p className="text-muted-foreground font-medium text-center">
-            open-source, anonymous, encrypted, private <i>edu</i> forums
+            open-source, anonymous,
+            <DecryptedText
+              text=" encrypted"
+              animateOn="both"
+              className="cursor-crosshair"
+            />
+            , private <i>edu</i> forums
           </p>
 
           <Button asChild className="mt-4" variant="outline">
             <Link href="/login">
-              Access your private forum <MessageSquareTextIcon />
+              <ShinyText text="✨ Access your private forum" duration={3} />
+              <MessageSquareTextIcon className="text-muted-foreground/50" />
             </Link>
           </Button>
 
@@ -49,13 +73,22 @@ export default function Home() {
             </HighlightText>
             email. No personal information is stored, ensuring your privacy is
             protected.{" "}
-            <Link href="/about" className="text-white">
-              Learn more &rarr;
+            <Link
+              href="/about"
+              className="text-white  gap-1 group inline-flex hover:text-muted-foreground transition-all"
+            >
+              Learn more{" "}
+              <span className="group-hover:translate-x-1.5 m transition-transform">
+                {" "}
+                &rarr;
+              </span>
             </Link>
           </div>
         </div>
       </section>
-
+      <div className="w-1/2 absolute left-0 right-0 mx-auto bottom-20 -z-10">
+        <FlatMap />
+      </div>
       <Footer />
     </div>
   );

components.json

@@ -10,12 +10,15 @@
     "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "iconLibrary": "lucide"
+  "registries": {
+    "@magicui": "https://magicui.design/r/{name}.json"
+  }
 }