feat: add landing page components including HeroSection and BentoGrid

- Implement HeroSection with animated text and buttons
- Create BentoGrid to showcase features with animations
- Develop LandingPage to integrate HeroSection and BentoGrid
- Add styles for landing page and corkboard features

Author: codeaashu

package-lock.json

@@ -21,6 +21,7 @@
     "@tanstack/react-virtual": "^3.13.23",
     "@vercel/analytics": "^2.0.1",
     "framer-motion": "^12.36.0",
+    "html2canvas": "^1.4.1",
     "immer": "^11.1.4",
     "jszip": "^3.10.1",
     "lucide-react": "^0.577.0",

package.json

@@ -0,0 +1,13 @@
+"use client";
+
+import TopNavbar from "@/components/TopNavbar";
+import { LandingPage } from "@/corkboard/features/landing/LandingPage";
+
+export default function CorkboardLandingClient() {
+  return (
+    <main className="min-h-screen bg-black text-white overflow-x-hidden">
+      <TopNavbar />
+      <LandingPage />
+    </main>
+  );
+}

src/app/corkboard/CorkboardLandingClient.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import CorkboardEditor from "@/corkboard/features/editor/CorkboardEditor";
+import "@/corkboard/styles.css";
+
+export default function CorkboardEditorClient() {
+  return <CorkboardEditor />;
+}

src/app/corkboard/editor/CorkboardEditorClient.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import CorkboardEditorClient from "./CorkboardEditorClient";
+
+export const metadata: Metadata = {
+  title: "Corkboard Editor | Enough Aashuu",
+  description: "Open the Corkboard editor — drag & drop photos, apply filters, and export a 4K wallpaper.",
+};
+
+export default function CorkboardEditorPage() {
+  return <CorkboardEditorClient />;
+}

src/app/corkboard/editor/page.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from "next";
+import CorkboardLandingClient from "./CorkboardLandingClient";
+import "@/corkboard/styles.css";
+
+export const metadata: Metadata = {
+  title: "Corkboard | Enough Aashuu",
+  description:
+    "A digital photo corkboard for organizing memories. Drag and drop photos, apply retro filters, add captions, pin your memories, and export high-resolution collages.",
+};
+
+export default function CorkboardPage() {
+  return <CorkboardLandingClient />;
+}

src/app/corkboard/page.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { motion } from "framer-motion";
-import { Image as ImageIcon, Video, Eraser, Brain, QrCode, Shapes } from "lucide-react";
+import { Image as ImageIcon, Video, Eraser, Brain, QrCode, Shapes, Pin } from "lucide-react";
 import TopNavbar from "@/components/TopNavbar";
 import Footer from "@/components/Footer";
 import Loader from "@/components/Loader";
@@ -23,6 +23,13 @@ const tools = [
     href: "/iconlogo",
     color: "from-orange-600 to-amber-500",
   },
+  {
+    name: "Corkboard",
+    description: "A digital photo corkboard for organizing memories. Drag and drop photos, apply retro filters, add captions, and export high-resolution collages.",
+    icon: Pin,
+    href: "/corkboard",
+    color: "from-amber-700 to-orange-500",
+  },
   {
     name: "QR Generator",
     description: "Create fully styled QR codes for links, Wi-Fi, contacts, events, SMS, and more.",

src/app/page.tsx

@@ -47,6 +47,18 @@ export default function sitemap(): MetadataRoute.Sitemap {
       changeFrequency: "weekly",
       priority: 0.9,
     },
+    {
+      url: `${baseUrl}/corkboard`,
+      lastModified,
+      changeFrequency: "weekly",
+      priority: 0.9,
+    },
+    {
+      url: `${baseUrl}/corkboard/editor`,
+      lastModified,
+      changeFrequency: "weekly",
+      priority: 0.85,
+    },
     {
       url: `${baseUrl}/about`,
       lastModified,

src/app/sitemap.ts

@@ -13,7 +13,7 @@ export default function VideoRemoverPage() {
 
       <section className="pt-44 md:pt-36 pb-20 px-6 relative">
         <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-3xl h-[400px] opacity-20 pointer-events-none">
-          <div className="absolute inset-0 bg-gradient-to-r from-fuchsia-500 to-blue-500 blur-[100px] rounded-full mix-blend-screen" />
+          <div className="absolute inset-0 bg-gradient-to-r from-orange-500 to-blue-500 blur-[100px] rounded-full mix-blend-screen" />
         </div>
 
         <div className="max-w-4xl mx-auto text-center relative z-10">

src/app/video-remover/page.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
-import { Image as ImageIcon, Video, Eraser, Github, Twitter, Brain, House, QrCode, Shapes } from "lucide-react";
+import { Image as ImageIcon, Video, Eraser, Github, Twitter, Brain, House, QrCode, Shapes, Pin } from "lucide-react";
 
 export default function TopNavbar() {
   const pathname = usePathname();
@@ -15,6 +15,7 @@ export default function TopNavbar() {
   const isAIDetectorPage = pathname === "/ai-image-detector";
   const isQrCodePage = pathname === "/qr-code-generator";
   const isIconLogoPage = pathname === "/iconlogo";
+  const isCorkboardPage = pathname?.startsWith("/corkboard");
 
   return (
     <nav
@@ -96,6 +97,19 @@ export default function TopNavbar() {
                 <span className="hidden lg:inline">IconLogo</span>
               </Link>
 
+              <Link
+                href="/corkboard"
+                aria-label="Corkboard"
+                aria-current={isCorkboardPage ? "page" : undefined}
+                className={`relative flex flex-1 min-w-0 items-center justify-center gap-0 md:gap-2 px-2 md:px-5 py-2.5 rounded-xl text-sm transition-all duration-300 whitespace-nowrap ${isCorkboardPage
+                    ? "text-white shadow-lg bg-gradient-to-r from-red-600 to-pink-600"
+                    : "text-gray-400 hover:text-gray-200 hover:bg-white/5"
+                  }`}
+              >
+                <Pin className="w-5 h-5" />
+                <span className="hidden lg:inline">Corkboard</span>
+              </Link>
+
               <Link
                 href="/qr-code-generator"
                 aria-label="QR Code Generator"