diff --git a/app/shop/page.tsx b/app/shop/page.tsx new file mode 100644 index 0000000..c03f0cd --- /dev/null +++ b/app/shop/page.tsx @@ -0,0 +1,89 @@ +"use client"; +import { Container } from "@/components/container"; +import { Heading } from "@/components/heading"; +import { Subheading } from "@/components/subheading"; +import { Footer } from "@/components/footer"; +import { ProductCard, Product } from "@/components/product-card"; +import { Button } from "@/components/ui/button"; +import { useState } from "react"; + +const allProducts: Product[] = [ + { + id: "1", + name: "Classic Oxford Leather", + price: 189, + category: "Formal", + image: "https://images.unsplash.com/photo-1653868250450-b83e6263d427?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwzfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080", + isNew: true + }, + { + id: "2", + name: "Urban Runner Pro", + price: 129, + category: "Sneakers", + image: "https://images.unsplash.com/photo-1600202280810-e0b3f6f1933e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080" + }, + { + id: "3", + name: "Elegance Stiletto", + price: 249, + category: "Women", + image: "https://images.unsplash.com/photo-1618274158630-bc47a614b3a5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwyfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080", + isSale: true + }, + { + id: "4", + name: "Heritage Brogue", + price: 210, + category: "Formal", + image: "https://images.unsplash.com/photo-1664505504065-31f8937d2261?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHw0fHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080" + }, + { + id: "5", + name: "Casual Loafer", + price: 145, + category: "Casual", + image: "https://images.unsplash.com/photo-1646139498425-5bceb422ba6a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHw1fHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080" + } +]; + +const categories = ["All", "Formal", "Sneakers", "Women", "Casual"]; + +export default function ShopPage() { + const [activeCategory, setActiveCategory] = useState("All"); + + const filteredProducts = activeCategory === "All" + ? allProducts + : allProducts.filter(p => p.category === activeCategory); + + return ( +
+ +
+ Shop Collection + Explore our full range of premium footwear. +
+ +
+ {categories.map((cat) => ( + + ))} +
+ +
+ {filteredProducts.map((product) => ( + + ))} +
+
+
+ ); +}