aboutsummaryrefslogtreecommitdiffstats
path: root/frontend/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/app')
-rw-r--r--frontend/src/app/favicon.icobin0 -> 25931 bytes
-rw-r--r--frontend/src/app/globals.css122
-rw-r--r--frontend/src/app/layout.tsx29
-rw-r--r--frontend/src/app/page.tsx154
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
Binary files differ
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>
+ );
+}
generated by cgit v1.2.3-59-g8ed1b (git 2.39.0) at 2025-06-16 05:22:40 +0000