diff options
Diffstat (limited to 'frontend/src/app/page.tsx')
| -rw-r--r-- | frontend/src/app/page.tsx | 117 |
1 files changed, 60 insertions, 57 deletions
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 7d6b7a2..dce3b54 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -2,6 +2,7 @@ import { Header } from "@/components/header"; import { HeroSection } from "@/components/hero-section"; import { ProductCard } from "@/components/product-card"; import { Footer } from "@/components/footer"; +import { PageWrapper } from "@/components/loading"; export default function Home() { // Sample product data for demonstration @@ -86,67 +87,69 @@ export default function Home() { ]; return ( - <div className="min-h-screen bg-background"> - <Header /> - - <main> - <HeroSection /> + <PageWrapper> + <div className="min-h-screen bg-background" suppressHydrationWarning> + <Header /> - {/* Featured Products Section */} - <section className="py-16 bg-white dark:bg-neutral-950"> - <div className="container mx-auto px-4"> - <div className="text-center mb-12"> - <h2 className="text-3xl font-bold mb-4 text-foreground">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> + <main> + <HeroSection /> + + {/* Featured Products Section */} + <section className="py-16 bg-white dark:bg-neutral-950"> + <div className="container mx-auto px-4"> + <div className="text-center mb-12"> + <h2 className="text-3xl font-bold mb-4 text-foreground">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> - - <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> + </section> - {/* Categories Section */} - <section className="py-16 bg-neutral-50 dark:bg-neutral-900"> - <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: "956+ items" }, - ].map((category) => ( - <div key={category.name} className="group relative overflow-hidden rounded-2xl bg-neutral-100 dark:bg-neutral-800 aspect-[4/3]"> - <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" /> - <div className="absolute bottom-6 left-6 text-white"> - <h3 className="text-2xl font-bold mb-1">{category.name}</h3> - <p className="text-neutral-200">{category.count}</p> + {/* Categories Section */} + <section className="py-16 bg-neutral-50 dark:bg-neutral-900"> + <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: "956+ items" }, + ].map((category) => ( + <div key={category.name} className="group relative overflow-hidden rounded-2xl bg-neutral-100 dark:bg-neutral-800 aspect-[4/3]"> + <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" /> + <div className="absolute bottom-6 left-6 text-white"> + <h3 className="text-2xl font-bold mb-1">{category.name}</h3> + <p className="text-neutral-200">{category.count}</p> + </div> + <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" /> </div> - <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" /> - </div> - ))} + ))} + </div> </div> - </div> - </section> - </main> - - <Footer /> - </div> + </section> + </main> + + <Footer /> + </div> + </PageWrapper> ); } |