feat: added frontpage layout

4 files changed, 305 insertions, 0 deletions

diff --git a/frontend/src/app/favicon.ico b/frontend/src/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
--- /dev/null
+++ b/frontend/src/app/favicon.ico
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
new file mode 100644
index 0000000..92fb855
--- /dev/null
+++ b/frontend/src/app/globals.css
@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
new file mode 100644
index 0000000..50bb899
--- /dev/null
+++ b/frontend/src/app/layout.tsx
@@ -0,0 +1,29 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { Toaster } from "@/components/ui/sonner";
+
+export const metadata: Metadata = {
+  title: "blcklst - Modern Fashion Brand",
+  description: "not everyone gets blcklsted - discover carefully curated fashion pieces that define modern elegance.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <head>
+        <link 
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" 
+          rel="stylesheet" 
+        />
+      </head>
+      <body className="font-sans antialiased">
+        {children}
+        <Toaster />
+      </body>
+    </html>
+  );
+}
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
new file mode 100644
index 0000000..7a9bea6
--- /dev/null
+++ b/frontend/src/app/page.tsx
@@ -0,0 +1,154 @@
+import { Header } from "@/components/header";
+import { HeroSection } from "@/components/hero-section";
+import { ProductCard } from "@/components/product-card";
+import { Footer } from "@/components/footer";
+
+export default function Home() {
+  // Sample product data for demonstration
+  const featuredProducts = [
+    {
+      id: "1",
+      name: "Premium Cotton T-Shirt",
+      price: 29.99,
+      originalPrice: 39.99,
+      image: "/api/placeholder/400/500",
+      rating: 4.8,
+      reviewCount: 124,
+      isNew: true,
+      isSale: true,
+      category: "Men's Clothing",
+      colors: ["#000000", "#FFFFFF", "#808080", "#000080"],
+      sizes: ["S", "M", "L", "XL"],
+    },
+    {
+      id: "2",
+      name: "Elegant Summer Dress",
+      price: 89.99,
+      originalPrice: 119.99,
+      image: "/api/placeholder/400/500",
+      rating: 4.9,
+      reviewCount: 89,
+      isSale: true,
+      category: "Women's Clothing",
+      colors: ["#FF69B4", "#000000", "#800080"],
+      sizes: ["XS", "S", "M", "L"],
+    },
+    {
+      id: "3",
+      name: "Classic Denim Jacket",
+      price: 79.99,
+      image: "/api/placeholder/400/500",
+      rating: 4.7,
+      reviewCount: 156,
+      isNew: true,
+      category: "Outerwear",
+      colors: ["#4169E1", "#000000", "#708090"],
+      sizes: ["S", "M", "L", "XL", "XXL"],
+    },
+    {
+      id: "4",
+      name: "Comfortable Sneakers",
+      price: 99.99,
+      originalPrice: 129.99,
+      image: "/api/placeholder/400/500",
+      rating: 4.6,
+      reviewCount: 203,
+      isSale: true,
+      category: "Footwear",
+      colors: ["#FFFFFF", "#000000", "#FF0000"],
+      sizes: ["7", "8", "9", "10", "11", "12"],
+    },
+    {
+      id: "5",
+      name: "Cozy Winter Sweater",
+      price: 69.99,
+      image: "/api/placeholder/400/500",
+      rating: 4.8,
+      reviewCount: 78,
+      isNew: true,
+      category: "Knitwear",
+      colors: ["#8B4513", "#000000", "#008000", "#800080"],
+      sizes: ["S", "M", "L", "XL"],
+    },
+    {
+      id: "6",
+      name: "Stylish Crossbody Bag",
+      price: 45.99,
+      originalPrice: 59.99,
+      image: "/api/placeholder/400/500",
+      rating: 4.5,
+      reviewCount: 92,
+      isSale: true,
+      category: "Accessories",
+      colors: ["#000000", "#8B4513", "#800080"],
+      sizes: ["One Size"],
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      
+      <main>
+        <HeroSection />
+        
+        {/* Featured Products Section */}
+        <section className="py-16 bg-white">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl font-bold mb-4">Featured Products</h2>
+              <p className="text-muted-foreground max-w-2xl mx-auto">
+                Discover our handpicked selection of trending items that our customers love most.
+              </p>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+              {featuredProducts.map((product) => (
+                <ProductCard key={product.id} {...product} />
+              ))}
+            </div>
+            
+            <div className="text-center mt-12">
+              <button className="bg-primary text-primary-foreground px-8 py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors">
+                View All Products
+              </button>
+            </div>
+          </div>
+        </section>
+
+        {/* Categories Section */}
+        <section className="py-16 bg-neutral-50">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl font-bold mb-4">Shop by Category</h2>
+              <p className="text-muted-foreground">
+                Explore our diverse range of fashion categories
+              </p>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {[
+                { name: "Women", image: "/api/placeholder/600/400", count: "2,345+ items" },
+                { name: "Men", image: "/api/placeholder/600/400", count: "1,892+ items" },
+                { name: "Kids", image: "/api/placeholder/600/400", count: "756+ items" },
+              ].map((category) => (
+                <div
+                  key={category.name}
+                  className="relative group cursor-pointer overflow-hidden rounded-lg bg-gradient-to-br from-neutral-200 to-neutral-300 aspect-[4/3]"
+                >
+                  <div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-colors" />
+                  <div className="absolute inset-0 flex flex-col justify-end p-6 text-white">
+                    <h3 className="text-2xl font-bold mb-1">{category.name}</h3>
+                    <p className="text-sm opacity-90">{category.count}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      </main>
+      
+      <Footer />
+    </div>
+  );
+}