Skip to content

Commit de45b39

Browse files
committed
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
1 parent 148a509 commit de45b39

File tree

15 files changed

+1297
-801
lines changed

15 files changed

+1297
-801
lines changed

package-lock.json

Lines changed: 61 additions & 798 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@tanstack/react-virtual": "^3.13.23",
2222
"@vercel/analytics": "^2.0.1",
2323
"framer-motion": "^12.36.0",
24+
"html2canvas": "^1.4.1",
2425
"immer": "^11.1.4",
2526
"jszip": "^3.10.1",
2627
"lucide-react": "^0.577.0",
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
"use client";
2+
3+
import TopNavbar from "@/components/TopNavbar";
4+
import { LandingPage } from "@/corkboard/features/landing/LandingPage";
5+
6+
export default function CorkboardLandingClient() {
7+
return (
8+
<main className="min-h-screen bg-black text-white overflow-x-hidden">
9+
<TopNavbar />
10+
<LandingPage />
11+
</main>
12+
);
13+
}
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
"use client";
2+
3+
import CorkboardEditor from "@/corkboard/features/editor/CorkboardEditor";
4+
import "@/corkboard/styles.css";
5+
6+
export default function CorkboardEditorClient() {
7+
return <CorkboardEditor />;
8+
}

src/app/corkboard/editor/page.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import type { Metadata } from "next";
2+
import CorkboardEditorClient from "./CorkboardEditorClient";
3+
4+
export const metadata: Metadata = {
5+
title: "Corkboard Editor | Enough Aashuu",
6+
description: "Open the Corkboard editor — drag & drop photos, apply filters, and export a 4K wallpaper.",
7+
};
8+
9+
export default function CorkboardEditorPage() {
10+
return <CorkboardEditorClient />;
11+
}

src/app/corkboard/page.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { Metadata } from "next";
2+
import CorkboardLandingClient from "./CorkboardLandingClient";
3+
import "@/corkboard/styles.css";
4+
5+
export const metadata: Metadata = {
6+
title: "Corkboard | Enough Aashuu",
7+
description:
8+
"A digital photo corkboard for organizing memories. Drag and drop photos, apply retro filters, add captions, pin your memories, and export high-resolution collages.",
9+
};
10+
11+
export default function CorkboardPage() {
12+
return <CorkboardLandingClient />;
13+
}

src/app/page.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

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

src/app/sitemap.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,18 @@ export default function sitemap(): MetadataRoute.Sitemap {
4747
changeFrequency: "weekly",
4848
priority: 0.9,
4949
},
50+
{
51+
url: `${baseUrl}/corkboard`,
52+
lastModified,
53+
changeFrequency: "weekly",
54+
priority: 0.9,
55+
},
56+
{
57+
url: `${baseUrl}/corkboard/editor`,
58+
lastModified,
59+
changeFrequency: "weekly",
60+
priority: 0.85,
61+
},
5062
{
5163
url: `${baseUrl}/about`,
5264
lastModified,

src/app/video-remover/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function VideoRemoverPage() {
1313

1414
<section className="pt-44 md:pt-36 pb-20 px-6 relative">
1515
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-3xl h-[400px] opacity-20 pointer-events-none">
16-
<div className="absolute inset-0 bg-gradient-to-r from-fuchsia-500 to-blue-500 blur-[100px] rounded-full mix-blend-screen" />
16+
<div className="absolute inset-0 bg-gradient-to-r from-orange-500 to-blue-500 blur-[100px] rounded-full mix-blend-screen" />
1717
</div>
1818

1919
<div className="max-w-4xl mx-auto text-center relative z-10">

src/components/TopNavbar.tsx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import Link from "next/link";
44
import Image from "next/image";
55
import { usePathname } from "next/navigation";
6-
import { Image as ImageIcon, Video, Eraser, Github, Twitter, Brain, House, QrCode, Shapes } from "lucide-react";
6+
import { Image as ImageIcon, Video, Eraser, Github, Twitter, Brain, House, QrCode, Shapes, Pin } from "lucide-react";
77

88
export default function TopNavbar() {
99
const pathname = usePathname();
@@ -15,6 +15,7 @@ export default function TopNavbar() {
1515
const isAIDetectorPage = pathname === "/ai-image-detector";
1616
const isQrCodePage = pathname === "/qr-code-generator";
1717
const isIconLogoPage = pathname === "/iconlogo";
18+
const isCorkboardPage = pathname?.startsWith("/corkboard");
1819

1920
return (
2021
<nav
@@ -96,6 +97,19 @@ export default function TopNavbar() {
9697
<span className="hidden lg:inline">IconLogo</span>
9798
</Link>
9899

100+
<Link
101+
href="/corkboard"
102+
aria-label="Corkboard"
103+
aria-current={isCorkboardPage ? "page" : undefined}
104+
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
105+
? "text-white shadow-lg bg-gradient-to-r from-red-600 to-pink-600"
106+
: "text-gray-400 hover:text-gray-200 hover:bg-white/5"
107+
}`}
108+
>
109+
<Pin className="w-5 h-5" />
110+
<span className="hidden lg:inline">Corkboard</span>
111+
</Link>
112+
99113
<Link
100114
href="/qr-code-generator"
101115
aria-label="QR Code Generator"

0 commit comments

Comments
 (0)