From 896ac3ffdea6512574ef15f3f13110cff698aa6b Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 13 Mar 2026 19:31:23 +0000 Subject: [PATCH 1/4] Add src/app/admin/page.tsx --- src/app/admin/page.tsx | 406 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 406 insertions(+) create mode 100644 src/app/admin/page.tsx diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx new file mode 100644 index 0000000..32d5430 --- /dev/null +++ b/src/app/admin/page.tsx @@ -0,0 +1,406 @@ +"use client"; + +import { useState } from "react"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline"; +import FooterBaseCard from "@/components/sections/footer/FooterBaseCard"; +import { Plus, Trash2, Edit2, Package, BarChart3, AlertCircle } from "lucide-react"; + +interface Product { + id: string; + brand: string; + name: string; + price: string; + stock: number; + imageSrc: string; + imageAlt: string; +} + +interface InventoryItem { + id: string; + productName: string; + sku: string; + quantity: number; + lowStockThreshold: number; + lastUpdated: string; +} + +export default function AdminDashboard() { + const [products, setProducts] = useState([ + { + id: "prod-001", brand: "Nike", name: "Air Max 90 Classic", price: "$129.99", stock: 45, + imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2", imageAlt: "Nike Air Max 90 sneaker"}, + ]); + + const [inventory, setInventory] = useState([ + { + id: "inv-001", productName: "Air Max 90 Classic", sku: "NIKE-AM90-001", quantity: 45, + lowStockThreshold: 10, + lastUpdated: "2025-01-17"}, + ]); + + const [showAddProduct, setShowAddProduct] = useState(false); + const [editingProduct, setEditingProduct] = useState(null); + const [newProduct, setNewProduct] = useState>({ + brand: "", name: "", price: "", stock: 0, + imageSrc: "", imageAlt: ""}); + + const navItems = [ + { name: "Dashboard", id: "dashboard" }, + { name: "Products", id: "products" }, + { name: "Inventory", id: "inventory" }, + { name: "Orders", id: "orders" }, + { name: "Analytics", id: "analytics" }, + ]; + + const footerColumns = [ + { + title: "Admin", items: [ + { label: "Dashboard", href: "/admin" }, + { label: "Products", href: "/admin" }, + { label: "Settings", href: "/admin" }, + ], + }, + { + title: "Support", items: [ + { label: "Documentation", href: "#" }, + { label: "Help Center", href: "#" }, + { label: "Contact", href: "#" }, + ], + }, + ]; + + const handleAddProduct = () => { + if (newProduct.brand && newProduct.name && newProduct.price && newProduct.stock !== undefined) { + const product: Product = { + id: `prod-${Date.now()}`, + brand: newProduct.brand || "", name: newProduct.name || "", price: newProduct.price || "", stock: newProduct.stock || 0, + imageSrc: newProduct.imageSrc || "", imageAlt: newProduct.imageAlt || ""}; + setProducts([...products, product]); + setNewProduct({ brand: "", name: "", price: "", stock: 0, imageSrc: "", imageAlt: "" }); + setShowAddProduct(false); + } + }; + + const handleDeleteProduct = (id: string) => { + setProducts(products.filter((p) => p.id !== id)); + }; + + const handleUpdateStock = (id: string, newStock: number) => { + setProducts(products.map((p) => (p.id === id ? { ...p, stock: newStock } : p))); + }; + + return ( + + + +
+
+ {/* Header Section */} +
+

Admin Dashboard

+

Manage products, inventory, and store operations

+
+ + {/* Stats Cards */} +
+
+
+
+

Total Products

+

{products.length}

+
+ +
+
+
+
+
+

Total Stock

+

+ {products.reduce((sum, p) => sum + p.stock, 0)} +

+
+ +
+
+
+
+
+

Low Stock Items

+

+ {inventory.filter((item) => item.quantity < item.lowStockThreshold).length} +

+
+ +
+
+
+
+
+

Revenue Ready

+

100%

+
+ +
+
+
+ + {/* Product Management Section */} +
+
+
+

Product Management

+

Add, edit, and manage your product catalog

+
+ +
+ + {/* Add Product Form */} + {showAddProduct && ( +
+

New Product

+
+ setNewProduct({ ...newProduct, brand: e.target.value })} + className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" + /> + setNewProduct({ ...newProduct, name: e.target.value })} + className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" + /> + setNewProduct({ ...newProduct, price: e.target.value })} + className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" + /> + setNewProduct({ ...newProduct, stock: parseInt(e.target.value) || 0 })} + className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" + /> + setNewProduct({ ...newProduct, imageSrc: e.target.value })} + className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 md:col-span-2" + /> +
+
+ + +
+
+ )} + + {/* Products Table */} +
+ + + + + + + + + + + + {products.map((product) => ( + + + + + + + + ))} + +
ProductBrandPriceStockActions
{product.name}{product.brand}{product.price} +
+ handleUpdateStock(product.id, parseInt(e.target.value) || 0)} + className="w-16 px-2 py-1 border border-slate-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" + /> + units +
+ 		+
+ + +
+
+
+ + {products.length === 0 && ( +
+ +

No products yet. Add your first product to get started.

+
+ )} +
+ + {/* Inventory Management Section */} +
+
+

Inventory Management

+

Track stock levels and manage inventory alerts

+
+ +
+ + + + + + + + + + + + + {inventory.map((item) => { + const isLowStock = item.quantity < item.lowStockThreshold; + return ( + + + + + + + + + ); + })} + +
ProductSKUQuantityLow Stock AlertStatusLast Updated
{item.productName}{item.sku}{item.quantity}{item.lowStockThreshold} + {isLowStock ? ( + + + Low Stock + + ) : ( + + In Stock + + )} + {item.lastUpdated}
+
+ + {inventory.length === 0 && ( +
+ +

No inventory items yet.

+
+ )} +
+ + {/* Content Sections Ready for Admin */} +
+

Content Management

+
+
+

Featured Products Section

+

Manage featured products display

+
+
+

New Arrivals Section

+

Update new arrivals content

+
+
+

Best Sellers Section

+

Configure best sellers display

+
+
+

Brands Section

+

Manage brand partners

+
+
+

Testimonials Section

+

Add customer testimonials

+
+
+

FAQ Section

+

Update frequently asked questions

+
+
+
+
+
+ + + + ); +} -- 2.49.1 From 0f2d3a683b5f3ba896628e061f0d1ab14aecf349 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 13 Mar 2026 19:31:23 +0000 Subject: [PATCH 2/4] Add src/app/checkout/page.tsx --- src/app/checkout/page.tsx | 330 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 330 insertions(+) create mode 100644 src/app/checkout/page.tsx diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx new file mode 100644 index 0000000..c0406b9 --- /dev/null +++ b/src/app/checkout/page.tsx @@ -0,0 +1,330 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline"; +import FooterBaseCard from "@/components/sections/footer/FooterBaseCard"; +import { ShoppingCart, Lock, Truck, RotateCcw } from "lucide-react"; +import { useState } from "react"; + +export default function CheckoutPage() { + const navItems = [ + { name: "Home", id: "home" }, + { name: "Shop", id: "shop" }, + { name: "Brands", id: "brands" }, + { name: "New Arrivals", id: "new-arrivals" }, + { name: "Best Sellers", id: "best-sellers" }, + { name: "About", id: "about" }, + { name: "Contact", id: "contact" }, + ]; + + const [paymentMethod, setPaymentMethod] = useState("card"); + const [orderPlaced, setOrderPlaced] = useState(false); + + const footerColumns = [ + { + title: "Shop", items: [ + { label: "All Products", href: "/shop" }, + { label: "New Arrivals", href: "/shop" }, + { label: "Best Sellers", href: "/shop" }, + { label: "Brands", href: "/shop" }, + ], + }, + { + title: "Company", items: [ + { label: "About Us", href: "/" }, + { label: "Contact", href: "/" }, + { label: "Blog", href: "/" }, + { label: "Careers", href: "#" }, + ], + }, + { + title: "Support", items: [ + { label: "Shipping & Returns", href: "/" }, + { label: "FAQ", href: "/" }, + { label: "Size Guide", href: "#" }, + { label: "Track Order", href: "#" }, + ], + }, + { + title: "Legal", items: [ + { label: "Privacy Policy", href: "#" }, + { label: "Terms & Conditions", href: "#" }, + { label: "Cookie Policy", href: "#" }, + { label: "Accessibility", href: "#" }, + ], + }, + ]; + + const cartItems = [ + { + id: "prod-001", name: "Air Max 90 Classic", variants: ["Size: 10", "Color: White/Grey"], + price: "$129.99", quantity: 1, + imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2", imageAlt: "Nike Air Max 90 sneaker"}, + { + id: "prod-010", name: "Stan Smith Classic", variants: ["Size: 9", "Color: White"], + price: "$89.99", quantity: 1, + imageSrc: "http://img.b2bpic.net/free-photo/new-pair-white-sneakers-isolated-white_93675-130969.jpg?_wi=2", imageAlt: "Adidas Stan Smith sneaker"}, + ]; + + const handlePaymentMethodChange = (method: string) => { + setPaymentMethod(method); + }; + + const handlePlaceOrder = () => { + setOrderPlaced(true); + setTimeout(() => { + window.location.href = "/"; + }, 3000); + }; + + return ( + + + +
+
+ {orderPlaced ? ( +
+
✓
+

Order Placed Successfully!

+

Thank you for your purchase. You will be redirected to the home page shortly.

+
+ Order confirmation sent to your email +
+
+ ) : ( +
+ {/* Main Checkout Form */} +
+
+

Checkout

+ + {/* Shipping Information */} +
+

+ + Shipping Information +

+
+
+ + +
+ + +
+ + + +
+
+
+ + {/* Payment Methods */} +
+

+ + Payment Method +

+
+ {[ + { id: "card", label: "Credit/Debit Card", description: "Visa, Mastercard, American Express" }, + { id: "apple-pay", label: "Apple Pay", description: "Fast and secure payment" }, + { id: "google-pay", label: "Google Pay", description: "Quick checkout with Google" }, + { id: "paypal", label: "PayPal", description: "Pay with your PayPal account" }, + { id: "stripe", label: "Stripe", description: "Secure payment processing" }, + { id: "klarna", label: "Klarna", description: "Buy now, pay later" }, + ].map((method) => ( + + ))} +
+
+ + {/* Card Payment Form (shown when card is selected) */} + {paymentMethod === "card" && ( +
+

Card Details

+
+ + +
+ + +
+
+
+ )} + + {/* Return Policy */} +
+
+ +
+

30-Day Return Policy

+

Not satisfied? Return items within 30 days in original condition for a full refund.

+
+
+
+
+
+ + {/* Order Summary Sidebar */} +
+
+

+ + Order Summary +

+ +
+ {cartItems.map((item) => ( +
+
+ {item.imageAlt} +
+
+

{item.name}

+

Qty: {item.quantity}

+ {item.variants.map((variant, idx) => ( +

{variant}

+ ))} +

{item.price}

+
+
+ ))} +
+ +
+
+ Subtotal: + $219.98 +
+
+ Shipping: + $10.00 +
+
+ Tax: + $18.40 +
+
+ +
+ Total: + $248.38 +
+ + + + +
+
+
+ )} +
+
+ + + + ); +} \ No newline at end of file -- 2.49.1 From ee437ddd0b7a357d21f847fd4fb813d8102cd2b1 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 13 Mar 2026 19:31:24 +0000 Subject: [PATCH 3/4] Update src/app/page.tsx --- src/app/page.tsx | 233 +++++++++-------------------------------------- 1 file changed, 44 insertions(+), 189 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index cf55060..2071ccd 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -25,8 +25,7 @@ export default function HomePage() { const footerColumns = [ { - title: "Shop", - items: [ + title: "Shop", items: [ { label: "All Products", href: "/shop" }, { label: "New Arrivals", href: "/shop" }, { label: "Best Sellers", href: "/shop" }, @@ -34,8 +33,7 @@ export default function HomePage() { ], }, { - title: "Company", - items: [ + title: "Company", items: [ { label: "About Us", href: "/" }, { label: "Contact", href: "/" }, { label: "Blog", href: "/" }, @@ -43,8 +41,7 @@ export default function HomePage() { ], }, { - title: "Support", - items: [ + title: "Support", items: [ { label: "Shipping & Returns", href: "/" }, { label: "FAQ", href: "/" }, { label: "Size Guide", href: "#" }, @@ -52,8 +49,7 @@ export default function HomePage() { ], }, { - title: "Legal", - items: [ + title: "Legal", items: [ { label: "Privacy Policy", href: "#" }, { label: "Terms & Conditions", href: "#" }, { label: "Cookie Policy", href: "#" }, @@ -80,9 +76,7 @@ export default function HomePage() { navItems={navItems} brandName="garraagarmzz" button={{ - text: "Shop Now", - href: "/shop", - }} + text: "Shop Now", href: "/shop"}} animateOnLoad={true} className="bg-opacity-95" navItemClassName="text-sm font-medium" @@ -101,23 +95,15 @@ export default function HomePage() { background={{ variant: "plain" }} leftCarouselItems={[ { - imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-woman-dressed-white-dress-sitting-summer-open-air-theatre-chair-alone-spring-street-style-fashion-trend-accessories-traveling-with-backpack-skinny-legs-sandals_285396-4543.jpg?_wi=2", - imageAlt: "luxury premium sneakers white grey leather", - }, + imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-woman-dressed-white-dress-sitting-summer-open-air-theatre-chair-alone-spring-street-style-fashion-trend-accessories-traveling-with-backpack-skinny-legs-sandals_285396-4543.jpg?_wi=2", imageAlt: "luxury premium sneakers white grey leather"}, { - imageSrc: "http://img.b2bpic.net/free-photo/top-view-accessoires-travel-with-man-clothing-concept-shirt-jean-mobile-phone-wooden-background-watch-sunglasses-shoes-wood-table_1921-79.jpg?_wi=2", - imageAlt: "luxury fashion accessories collection display", - }, + imageSrc: "http://img.b2bpic.net/free-photo/top-view-accessoires-travel-with-man-clothing-concept-shirt-jean-mobile-phone-wooden-background-watch-sunglasses-shoes-wood-table_1921-79.jpg?_wi=2", imageAlt: "luxury fashion accessories collection display"}, ]} rightCarouselItems={[ { - imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432326.jpg?_wi=2", - imageAlt: "streetwear clothing collection hoodies jackets", - }, + imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432326.jpg?_wi=2", imageAlt: "streetwear clothing collection hoodies jackets"}, { - imageSrc: "http://img.b2bpic.net/free-photo/pleased-well-dressed-male-model-sitting-stairs-fashionable-african-guy-enjoying-photoshoot-steps_197531-22070.jpg?_wi=2", - imageAlt: "designer clothing collection luxury brands", - }, + imageSrc: "http://img.b2bpic.net/free-photo/pleased-well-dressed-male-model-sitting-stairs-fashionable-african-guy-enjoying-photoshoot-steps_197531-22070.jpg?_wi=2", imageAlt: "designer clothing collection luxury brands"}, ]} buttons={[ { text: "Start Shopping", href: "/shop" }, @@ -154,70 +140,28 @@ export default function HomePage() { animationType="slide-up" products={[ { - id: "prod-001", - brand: "Nike", - name: "Air Max 90 Classic", - price: "$129.99", - rating: 4.8, - reviewCount: "342", - imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2", - imageAlt: "Nike Air Max 90 sneaker in white and grey", - isFavorited: false, + id: "prod-001", brand: "Nike", name: "Air Max 90 Classic", price: "$129.99", rating: 4.8, + reviewCount: "342", imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2", imageAlt: "Nike Air Max 90 sneaker in white and grey", isFavorited: false, }, { - id: "prod-002", - brand: "Supreme", - name: "Box Logo Hoodie", - price: "$345.00", - rating: 4.9, - reviewCount: "521", - imageSrc: "http://img.b2bpic.net/free-photo/afro-hair-style-doing-okay-gesture_140725-36572.jpg?_wi=2", - imageAlt: "Supreme black box logo hoodie", - isFavorited: false, + id: "prod-002", brand: "Supreme", name: "Box Logo Hoodie", price: "$345.00", rating: 4.9, + reviewCount: "521", imageSrc: "http://img.b2bpic.net/free-photo/afro-hair-style-doing-okay-gesture_140725-36572.jpg?_wi=2", imageAlt: "Supreme black box logo hoodie", isFavorited: false, }, { - id: "prod-003", - brand: "Carhartt WIP", - name: "Detroit Jacket", - price: "$159.99", - rating: 4.7, - reviewCount: "189", - imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1617.jpg?_wi=2", - imageAlt: "Carhartt WIP brown Detroit work jacket", - isFavorited: false, + id: "prod-003", brand: "Carhartt WIP", name: "Detroit Jacket", price: "$159.99", rating: 4.7, + reviewCount: "189", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1617.jpg?_wi=2", imageAlt: "Carhartt WIP brown Detroit work jacket", isFavorited: false, }, { - id: "prod-004", - brand: "Stüssy", - name: "Classic T-Shirt", - price: "$48.00", - rating: 4.6, - reviewCount: "276", - imageSrc: "http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572721.jpg?_wi=2", - imageAlt: "Stüssy white classic logo t-shirt", - isFavorited: false, + id: "prod-004", brand: "Stüssy", name: "Classic T-Shirt", price: "$48.00", rating: 4.6, + reviewCount: "276", imageSrc: "http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572721.jpg?_wi=2", imageAlt: "Stüssy white classic logo t-shirt", isFavorited: false, }, { - id: "prod-005", - brand: "Adidas", - name: "Ultra Boost 22", - price: "$189.99", - rating: 4.8, - reviewCount: "437", - imageSrc: "http://img.b2bpic.net/free-photo/side-view-sports-shoes_23-2147618070.jpg", - imageAlt: "Adidas Ultra Boost 22 in black", - isFavorited: false, + id: "prod-005", brand: "Adidas", name: "Ultra Boost 22", price: "$189.99", rating: 4.8, + reviewCount: "437", imageSrc: "http://img.b2bpic.net/free-photo/side-view-sports-shoes_23-2147618070.jpg", imageAlt: "Adidas Ultra Boost 22 in black", isFavorited: false, }, { - id: "prod-006", - brand: "The North Face", - name: "Nuptse Jacket", - price: "$229.99", - rating: 4.9, - reviewCount: "654", - imageSrc: "http://img.b2bpic.net/free-photo/young-man-listening-music-headphones-close-up_23-2148381737.jpg?_wi=2", - imageAlt: "The North Face Nuptse puffer jacket in black", - isFavorited: false, + id: "prod-006", brand: "The North Face", name: "Nuptse Jacket", price: "$229.99", rating: 4.9, + reviewCount: "654", imageSrc: "http://img.b2bpic.net/free-photo/young-man-listening-music-headphones-close-up_23-2148381737.jpg?_wi=2", imageAlt: "The North Face Nuptse puffer jacket in black", isFavorited: false, }, ]} buttons={[{ text: "View All", href: "/shop" }]} @@ -237,29 +181,9 @@ export default function HomePage() { textboxLayout="default" useInvertedBackground={true} names={[ - "Nike", - "Adidas", - "Supreme", - "Stüssy", - "Carhartt WIP", - "The North Face", - "Balenciaga", - "Dickies", - "Vans", - "Converse", - ]} + "Nike", "Adidas", "Supreme", "Stüssy", "Carhartt WIP", "The North Face", "Balenciaga", "Dickies", "Vans", "Converse"]} logos={[ - "http://img.b2bpic.net/free-vector/ballet-studio-logo-template-design_742173-17939.jpg", - "http://img.b2bpic.net/free-vector/flat-design-outlet-stamp-collection_23-2149752880.jpg", - "http://img.b2bpic.net/free-vector/flat-design-gratis-label-collection_23-2149889390.jpg", - "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition_1284-52940.jpg", - "http://img.b2bpic.net/free-vector/labor-day-badge-collection_23-2148094629.jpg", - "http://img.b2bpic.net/free-vector/hand-drawn-adventure-badges-nature_23-2147543057.jpg", - "http://img.b2bpic.net/free-vector/luxury-logo-design-template_23-2150881456.jpg", - "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition-dark_1284-44291.jpg", - "http://img.b2bpic.net/free-vector/set-drawings_1284-45834.jpg", - "http://img.b2bpic.net/free-photo/view-skateboard-with-retro-memorabilia_23-2150583922.jpg", - ]} + "http://img.b2bpic.net/free-vector/ballet-studio-logo-template-design_742173-17939.jpg", "http://img.b2bpic.net/free-vector/flat-design-outlet-stamp-collection_23-2149752880.jpg", "http://img.b2bpic.net/free-vector/flat-design-gratis-label-collection_23-2149889390.jpg", "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition_1284-52940.jpg", "http://img.b2bpic.net/free-vector/labor-day-badge-collection_23-2148094629.jpg", "http://img.b2bpic.net/free-vector/hand-drawn-adventure-badges-nature_23-2147543057.jpg", "http://img.b2bpic.net/free-vector/luxury-logo-design-template_23-2150881456.jpg", "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition-dark_1284-44291.jpg", "http://img.b2bpic.net/free-vector/set-drawings_1284-45834.jpg", "http://img.b2bpic.net/free-photo/view-skateboard-with-retro-memorabilia_23-2150583922.jpg"]} buttons={[{ text: "Explore All Brands", href: "/shop" }]} buttonAnimation="slide-up" speed={40} @@ -281,37 +205,16 @@ export default function HomePage() { animationType="blur-reveal" products={[ { - id: "prod-007", - brand: "Nike", - name: "Jordan 1 Low OG", - price: "$99.99", - rating: 4.7, - reviewCount: "128", - imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-legs-keds-going-down-stairs_176420-55081.jpg", - imageAlt: "Jordan 1 Low OG sneaker", - isFavorited: false, + id: "prod-007", brand: "Nike", name: "Jordan 1 Low OG", price: "$99.99", rating: 4.7, + reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-legs-keds-going-down-stairs_176420-55081.jpg", imageAlt: "Jordan 1 Low OG sneaker", isFavorited: false, }, { - id: "prod-008", - brand: "Supreme", - name: "Arc Logo Cap", - price: "$68.00", - rating: 4.5, - reviewCount: "95", - imageSrc: "http://img.b2bpic.net/free-photo/young-man-putting-hand-cap-white-t-shirt-jacket-gray-cap-looking-serious-front-view_176474-84297.jpg", - imageAlt: "Supreme arc logo baseball cap", - isFavorited: false, + id: "prod-008", brand: "Supreme", name: "Arc Logo Cap", price: "$68.00", rating: 4.5, + reviewCount: "95", imageSrc: "http://img.b2bpic.net/free-photo/young-man-putting-hand-cap-white-t-shirt-jacket-gray-cap-looking-serious-front-view_176474-84297.jpg", imageAlt: "Supreme arc logo baseball cap", isFavorited: false, }, { - id: "prod-009", - brand: "Stüssy", - name: "Fleece Pullover", - price: "$98.00", - rating: 4.8, - reviewCount: "203", - imageSrc: "http://img.b2bpic.net/free-photo/beautiful-smiling-woman-stands-by-tree_8353-9397.jpg", - imageAlt: "Stüssy fleece pullover in grey", - isFavorited: false, + id: "prod-009", brand: "Stüssy", name: "Fleece Pullover", price: "$98.00", rating: 4.8, + reviewCount: "203", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-smiling-woman-stands-by-tree_8353-9397.jpg", imageAlt: "Stüssy fleece pullover in grey", isFavorited: false, }, ]} buttons={[{ text: "See All New Items", href: "/shop" }]} @@ -334,48 +237,20 @@ export default function HomePage() { animationType="scale-rotate" products={[ { - id: "prod-010", - brand: "Adidas", - name: "Stan Smith Classic", - price: "$89.99", - rating: 4.9, - reviewCount: "1,240", - imageSrc: "http://img.b2bpic.net/free-photo/new-pair-white-sneakers-isolated-white_93675-130969.jpg?_wi=2", - imageAlt: "Adidas Stan Smith white leather sneaker", - isFavorited: false, + id: "prod-010", brand: "Adidas", name: "Stan Smith Classic", price: "$89.99", rating: 4.9, + reviewCount: "1,240", imageSrc: "http://img.b2bpic.net/free-photo/new-pair-white-sneakers-isolated-white_93675-130969.jpg?_wi=2", imageAlt: "Adidas Stan Smith white leather sneaker", isFavorited: false, }, { - id: "prod-011", - brand: "The North Face", - name: "Denali Fleece", - price: "$99.99", - rating: 4.8, - reviewCount: "856", - imageSrc: "http://img.b2bpic.net/free-photo/young-hipster-man-hiking-mountains-winter-vacation-traveling_285396-1955.jpg", - imageAlt: "The North Face Denali fleece jacket", - isFavorited: false, + id: "prod-011", brand: "The North Face", name: "Denali Fleece", price: "$99.99", rating: 4.8, + reviewCount: "856", imageSrc: "http://img.b2bpic.net/free-photo/young-hipster-man-hiking-mountains-winter-vacation-traveling_285396-1955.jpg", imageAlt: "The North Face Denali fleece jacket", isFavorited: false, }, { - id: "prod-012", - brand: "Carhartt WIP", - name: "Simple Pant", - price: "$54.99", - rating: 4.7, - reviewCount: "742", - imageSrc: "http://img.b2bpic.net/free-photo/cropped-stock-photo-unrecognizable-woman-white-shirt-formal-black-straight-trousers-black-leather-heels-standing-street-fashion-model-dresscode-concept_132075-9150.jpg", - imageAlt: "Carhartt WIP simple pant in black", - isFavorited: false, + id: "prod-012", brand: "Carhartt WIP", name: "Simple Pant", price: "$54.99", rating: 4.7, + reviewCount: "742", imageSrc: "http://img.b2bpic.net/free-photo/cropped-stock-photo-unrecognizable-woman-white-shirt-formal-black-straight-trousers-black-leather-heels-standing-street-fashion-model-dresscode-concept_132075-9150.jpg", imageAlt: "Carhartt WIP simple pant in black", isFavorited: false, }, { - id: "prod-013", - brand: "Vans", - name: "Old Skool", - price: "$65.00", - rating: 4.9, - reviewCount: "1,567", - imageSrc: "http://img.b2bpic.net/free-photo/people-80s-aesthetic-summer-clothing_23-2151016254.jpg", - imageAlt: "Vans Old Skool classic skateboard shoe", - isFavorited: false, + id: "prod-013", brand: "Vans", name: "Old Skool", price: "$65.00", rating: 4.9, + reviewCount: "1,567", imageSrc: "http://img.b2bpic.net/free-photo/people-80s-aesthetic-summer-clothing_23-2151016254.jpg", imageAlt: "Vans Old Skool classic skateboard shoe", isFavorited: false, }, ]} buttons={[{ text: "Shop Best Sellers", href: "/shop" }]} @@ -392,9 +267,7 @@ export default function HomePage() { author="Jordan Mitchell" avatars={[ { - src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", - alt: "Jordan Mitchell", - }, + src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Jordan Mitchell"}, ]} ratingAnimation="slide-up" avatarsAnimation="slide-up" @@ -431,35 +304,17 @@ export default function HomePage() { faqsAnimation="slide-up" faqs={[ { - id: "faq-001", - title: "Are all products authentic?", - content: "Yes, we guarantee 100% authenticity for all items sold on garraagarmzz. We source directly from authorized retailers and brand partnerships. Each item undergoes quality verification before being listed.", - }, + id: "faq-001", title: "Are all products authentic?", content: "Yes, we guarantee 100% authenticity for all items sold on garraagarmzz. We source directly from authorized retailers and brand partnerships. Each item undergoes quality verification before being listed."}, { - id: "faq-002", - title: "What is your return policy?", - content: "We offer a 30-day return policy on all items. Products must be unworn, unwashed, and in original packaging with all tags attached. Returns are free within the US.", - }, + id: "faq-002", title: "What is your return policy?", content: "We offer a 30-day return policy on all items. Products must be unworn, unwashed, and in original packaging with all tags attached. Returns are free within the US."}, { - id: "faq-003", - title: "How long does shipping take?", - content: "Standard shipping takes 5-7 business days. Express shipping (2-3 business days) and overnight shipping options are available at checkout. Orders are processed within 24 hours.", - }, + id: "faq-003", title: "How long does shipping take?", content: "Standard shipping takes 5-7 business days. Express shipping (2-3 business days) and overnight shipping options are available at checkout. Orders are processed within 24 hours."}, { - id: "faq-004", - title: "Do you ship internationally?", - content: "Yes, we ship to most countries worldwide. International shipping rates and delivery times vary by location. Customs duties may apply depending on your country.", - }, + id: "faq-004", title: "Do you ship internationally?", content: "Yes, we ship to most countries worldwide. International shipping rates and delivery times vary by location. Customs duties may apply depending on your country."}, { - id: "faq-005", - title: "What payment methods do you accept?", - content: "We accept all major credit cards, PayPal, Apple Pay, Google Pay, and Klarna. All payments are secured with SSL encryption.", - }, + id: "faq-005", title: "What payment methods do you accept?", content: "We accept all major credit cards, PayPal, Apple Pay, Google Pay, and Klarna. All payments are secured with SSL encryption. We also support Stripe for additional payment processing options."}, { - id: "faq-006", - title: "Can I track my order?", - content: "Yes, tracking information is sent to your email immediately after your order ships. You can also track your order in your account dashboard.", - }, + id: "faq-006", title: "Can I track my order?", content: "Yes, tracking information is sent to your email immediately after your order ships. You can also track your order in your account dashboard."}, ]} buttons={[{ text: "View Full Policy", href: "/shop" }]} buttonAnimation="slide-up" -- 2.49.1 From 5ec3ef0a6a62712dac394bc3d926f0eb10bbbd11 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 13 Mar 2026 19:31:24 +0000 Subject: [PATCH 4/4] Update src/app/shop/page.tsx --- src/app/shop/page.tsx | 458 +++++++++++++++++++++++++----------------- 1 file changed, 279 insertions(+), 179 deletions(-) diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx index 36dd70a..eef00f5 100644 --- a/src/app/shop/page.tsx +++ b/src/app/shop/page.tsx @@ -1,12 +1,10 @@ "use client"; -import Link from "next/link"; +import { useState } from "react"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline"; -import ProductCardTwo from "@/components/sections/product/ProductCardTwo"; -import ContactCenter from "@/components/sections/contact/ContactCenter"; import FooterBaseCard from "@/components/sections/footer/FooterBaseCard"; -import { Star, Mail } from "lucide-react"; +import { ChevronDown, Search, X } from "lucide-react"; export default function ShopPage() { const navItems = [ @@ -21,8 +19,7 @@ export default function ShopPage() { const footerColumns = [ { - title: "Shop", - items: [ + title: "Shop", items: [ { label: "All Products", href: "/shop" }, { label: "New Arrivals", href: "/shop" }, { label: "Best Sellers", href: "/shop" }, @@ -30,8 +27,7 @@ export default function ShopPage() { ], }, { - title: "Company", - items: [ + title: "Company", items: [ { label: "About Us", href: "/" }, { label: "Contact", href: "/" }, { label: "Blog", href: "/" }, @@ -39,8 +35,7 @@ export default function ShopPage() { ], }, { - title: "Support", - items: [ + title: "Support", items: [ { label: "Shipping & Returns", href: "/" }, { label: "FAQ", href: "/" }, { label: "Size Guide", href: "#" }, @@ -48,8 +43,7 @@ export default function ShopPage() { ], }, { - title: "Legal", - items: [ + title: "Legal", items: [ { label: "Privacy Policy", href: "#" }, { label: "Terms & Conditions", href: "#" }, { label: "Cookie Policy", href: "#" }, @@ -58,6 +52,24 @@ export default function ShopPage() { }, ]; + // State for filters + const [selectedBrand, setSelectedBrand] = useState(null); + const [selectedCategory, setSelectedCategory] = useState(null); + const [selectedSize, setSelectedSize] = useState(null); + const [priceRange, setPriceRange] = useState<[number, number]>([0, 500]); + const [searchQuery, setSearchQuery] = useState(""); + const [expandedFilter, setExpandedFilter] = useState("brand"); + + // Filter options + const brands = ["Nike", "Adidas", "Supreme", "Stüssy", "Carhartt WIP", "The North Face", "Vans", "Balenciaga"]; + const categories = ["Shoes", "Clothing", "Accessories", "Outerwear", "Sportswear"]; + const sizes = ["XS", "S", "M", "L", "XL", "XXL", "One Size"]; + + // Filter toggle + const toggleFilter = (filterName: string) => { + setExpandedFilter(expandedFilter === filterName ? null : filterName); + }; + return ( -
- +
+
+

Shop Collection

+

Explore our curated selection of premium fashion

+
-
- +
+
+
+ {/* Filters Sidebar */} +
+
+

Filters

+ + {/* Search */} +
+
+ + setSearchQuery(e.target.value)} + className="w-full pl-10 pr-4 py-2 bg-background border border-accent rounded-lg text-sm text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta" + /> +
+
+ + {/* Brand Filter */} +
+ + {expandedFilter === "brand" && ( +
+ {brands.map((brand) => ( + + ))} +
+ )} +
+ + {/* Category Filter */} +
+ + {expandedFilter === "category" && ( +
+ {categories.map((category) => ( + + ))} +
+ )} +
+ + {/* Size Filter */} +
+ + {expandedFilter === "size" && ( +
+ {sizes.map((size) => ( + + ))} +
+ )} +
+ + {/* Price Filter */} +
+ + {expandedFilter === "price" && ( +
+
+
+ + setPriceRange([parseInt(e.target.value), priceRange[1]])} + className="w-full h-2 bg-accent rounded-lg appearance-none cursor-pointer" + /> +
+
+ + setPriceRange([priceRange[0], parseInt(e.target.value)])} + className="w-full h-2 bg-accent rounded-lg appearance-none cursor-pointer" + /> +
+
+
+ )} +
+ + {/* Clear Filters */} + {(selectedBrand || selectedCategory || selectedSize || searchQuery) && ( + + )} +
+
+ + {/* Products Grid */} +
+ {/* Empty State */} +
+
+
+ 📦 +
+
+

No Products Yet

+

+ Our shop is currently being set up with amazing products. Check back soon for exclusive items from your favorite brands! +

+ +
+ + {/* Active Filters Display */} + {(selectedBrand || selectedCategory || selectedSize || searchQuery) && ( +
+

Active filters:

+
+ {searchQuery && ( + + Search: {searchQuery} + + + )} + {selectedBrand && ( + + Brand: {selectedBrand} + + + )} + {selectedCategory && ( + + Category: {selectedCategory} + + + )} + {selectedSize && ( + + Size: {selectedSize} + + + )} +
+
+ )} +
+
+
); -} \ No newline at end of file +} -- 2.49.1