Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| bce14ed4af | |||
| 1307e1badf | |||
| 1cab13dadf | |||
| 3f47c367e1 | |||
| b9fc7f7110 | |||
| 3686c55b08 | |||
| c2b4f55880 | |||
| 0c7327af1c |
@@ -1,406 +0,0 @@
|
||||
"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<Product[]>([
|
||||
{
|
||||
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<InventoryItem[]>([
|
||||
{
|
||||
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<string | null>(null);
|
||||
const [newProduct, setNewProduct] = useState<Partial<Product>>({
|
||||
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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="Admin Dashboard"
|
||||
button={{
|
||||
text: "Logout", href: "/"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
buttonClassName="bg-red-500 hover:bg-red-600"
|
||||
buttonTextClassName="text-white font-semibold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-12 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header Section */}
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl font-bold text-slate-900 mb-4">Admin Dashboard</h1>
|
||||
<p className="text-lg text-slate-600">Manage products, inventory, and store operations</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-slate-600 text-sm font-medium">Total Products</p>
|
||||
<p className="text-3xl font-bold text-slate-900 mt-2">{products.length}</p>
|
||||
</div>
|
||||
<Package className="w-12 h-12 text-blue-500 opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-slate-600 text-sm font-medium">Total Stock</p>
|
||||
<p className="text-3xl font-bold text-slate-900 mt-2">
|
||||
{products.reduce((sum, p) => sum + p.stock, 0)}
|
||||
</p>
|
||||
</div>
|
||||
<BarChart3 className="w-12 h-12 text-green-500 opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-slate-600 text-sm font-medium">Low Stock Items</p>
|
||||
<p className="text-3xl font-bold text-slate-900 mt-2">
|
||||
{inventory.filter((item) => item.quantity < item.lowStockThreshold).length}
|
||||
</p>
|
||||
</div>
|
||||
<AlertCircle className="w-12 h-12 text-orange-500 opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-slate-600 text-sm font-medium">Revenue Ready</p>
|
||||
<p className="text-3xl font-bold text-slate-900 mt-2">100%</p>
|
||||
</div>
|
||||
<BarChart3 className="w-12 h-12 text-purple-500 opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Management Section */}
|
||||
<div id="product-management" data-section="product-management" className="bg-white rounded-lg shadow-lg p-8 mb-12">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900">Product Management</h2>
|
||||
<p className="text-slate-600 mt-1">Add, edit, and manage your product catalog</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowAddProduct(!showAddProduct)}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-colors"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Product
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Add Product Form */}
|
||||
{showAddProduct && (
|
||||
<div className="bg-slate-50 border border-slate-200 rounded-lg p-6 mb-8">
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-4">New Product</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Brand"
|
||||
value={newProduct.brand || ""}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Product Name"
|
||||
value={newProduct.name || ""}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Price"
|
||||
value={newProduct.price || ""}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Stock Quantity"
|
||||
value={newProduct.stock || 0}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Image URL"
|
||||
value={newProduct.imageSrc || ""}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3 mt-4">
|
||||
<button
|
||||
onClick={handleAddProduct}
|
||||
className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
Save Product
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowAddProduct(false)}
|
||||
className="bg-slate-300 hover:bg-slate-400 text-slate-900 px-4 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Products Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 bg-slate-50">
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Product</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Brand</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Price</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Stock</th>
|
||||
<th className="px-6 py-3 text-center text-sm font-semibold text-slate-900">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{products.map((product) => (
|
||||
<tr key={product.id} className="border-b border-slate-200 hover:bg-slate-50 transition-colors">
|
||||
<td className="px-6 py-4 text-sm text-slate-900 font-medium">{product.name}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{product.brand}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-900 font-medium">{product.price}</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
value={product.stock}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
<span className="text-xs text-slate-500">units</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex justify-center gap-2">
|
||||
<button
|
||||
onClick={() => setEditingProduct(product.id)}
|
||||
className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
||||
title="Edit product"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteProduct(product.id)}
|
||||
className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="Delete product"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{products.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<Package className="w-16 h-16 mx-auto text-slate-300 mb-4" />
|
||||
<p className="text-slate-600 text-lg">No products yet. Add your first product to get started.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Inventory Management Section */}
|
||||
<div id="inventory-management" data-section="inventory-management" className="bg-white rounded-lg shadow-lg p-8 mb-12">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900">Inventory Management</h2>
|
||||
<p className="text-slate-600 mt-1">Track stock levels and manage inventory alerts</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 bg-slate-50">
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Product</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">SKU</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Quantity</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Low Stock Alert</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Last Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{inventory.map((item) => {
|
||||
const isLowStock = item.quantity < item.lowStockThreshold;
|
||||
return (
|
||||
<tr key={item.id} className="border-b border-slate-200 hover:bg-slate-50 transition-colors">
|
||||
<td className="px-6 py-4 text-sm text-slate-900 font-medium">{item.productName}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{item.sku}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-900 font-medium">{item.quantity}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{item.lowStockThreshold}</td>
|
||||
<td className="px-6 py-4">
|
||||
{isLowStock ? (
|
||||
<span className="inline-flex items-center gap-1 px-3 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium">
|
||||
<AlertCircle className="w-3 h-3" />
|
||||
Low Stock
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">
|
||||
In Stock
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{item.lastUpdated}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{inventory.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<Package className="w-16 h-16 mx-auto text-slate-300 mb-4" />
|
||||
<p className="text-slate-600 text-lg">No inventory items yet.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content Sections Ready for Admin */}
|
||||
<div id="content-sections" data-section="content-sections" className="bg-white rounded-lg shadow-lg p-8 mb-12">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-8">Content Management</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-colors cursor-pointer">
|
||||
<p className="text-slate-600 font-medium">Featured Products Section</p>
|
||||
<p className="text-sm text-slate-500 mt-2">Manage featured products display</p>
|
||||
</div>
|
||||
<div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-colors cursor-pointer">
|
||||
<p className="text-slate-600 font-medium">New Arrivals Section</p>
|
||||
<p className="text-sm text-slate-500 mt-2">Update new arrivals content</p>
|
||||
</div>
|
||||
<div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-colors cursor-pointer">
|
||||
<p className="text-slate-600 font-medium">Best Sellers Section</p>
|
||||
<p className="text-sm text-slate-500 mt-2">Configure best sellers display</p>
|
||||
</div>
|
||||
<div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-colors cursor-pointer">
|
||||
<p className="text-slate-600 font-medium">Brands Section</p>
|
||||
<p className="text-sm text-slate-500 mt-2">Manage brand partners</p>
|
||||
</div>
|
||||
<div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-colors cursor-pointer">
|
||||
<p className="text-slate-600 font-medium">Testimonials Section</p>
|
||||
<p className="text-sm text-slate-500 mt-2">Add customer testimonials</p>
|
||||
</div>
|
||||
<div className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-colors cursor-pointer">
|
||||
<p className="text-slate-600 font-medium">FAQ Section</p>
|
||||
<p className="text-sm text-slate-500 mt-2">Update frequently asked questions</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Admin Panel"
|
||||
copyrightText="© 2025 Admin Dashboard. All rights reserved."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Admin footer with navigation"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,330 +0,0 @@
|
||||
"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<string>("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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="garraagarmzz"
|
||||
button={{
|
||||
text: "Back to Shop", href: "/shop"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
buttonClassName="bg-blue-500 hover:bg-blue-600"
|
||||
buttonTextClassName="text-white font-semibold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-b from-transparent via-transparent to-transparent py-16">
|
||||
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
|
||||
{orderPlaced ? (
|
||||
<div className="text-center py-16">
|
||||
<div className="mb-4 text-6xl">✓</div>
|
||||
<h1 className="text-4xl font-bold mb-4">Order Placed Successfully!</h1>
|
||||
<p className="text-xl text-gray-600 mb-8">Thank you for your purchase. You will be redirected to the home page shortly.</p>
|
||||
<div className="inline-block bg-green-100 text-green-800 px-6 py-3 rounded-lg">
|
||||
Order confirmation sent to your email
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Main Checkout Form */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="bg-card border border-gray-200 rounded-lg p-8">
|
||||
<h1 className="text-3xl font-bold mb-8">Checkout</h1>
|
||||
|
||||
{/* Shipping Information */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
|
||||
<Truck className="w-5 h-5" />
|
||||
Shipping Information
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="First Name"
|
||||
className="border border-gray-300 rounded px-4 py-2 w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Last Name"
|
||||
className="border border-gray-300 rounded px-4 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
className="border border-gray-300 rounded px-4 py-2 w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Street Address"
|
||||
className="border border-gray-300 rounded px-4 py-2 w-full"
|
||||
/>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="City"
|
||||
className="border border-gray-300 rounded px-4 py-2 w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="State"
|
||||
className="border border-gray-300 rounded px-4 py-2 w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="ZIP Code"
|
||||
className="border border-gray-300 rounded px-4 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Methods */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
|
||||
<Lock className="w-5 h-5" />
|
||||
Payment Method
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ 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) => (
|
||||
<label key={method.id} className="flex items-start p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
|
||||
<input
|
||||
type="radio"
|
||||
name="payment"
|
||||
value={method.id}
|
||||
checked={paymentMethod === method.id}
|
||||
onChange={(e) => handlePaymentMethodChange(e.target.value)}
|
||||
className="mt-1 mr-4"
|
||||
/>
|
||||
<div>
|
||||
<p className="font-semibold text-sm">{method.label}</p>
|
||||
<p className="text-gray-600 text-xs">{method.description}</p>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Payment Form (shown when card is selected) */}
|
||||
{paymentMethod === "card" && (
|
||||
<div className="mb-8 p-4 bg-gray-50 rounded-lg">
|
||||
<h3 className="font-semibold mb-4">Card Details</h3>
|
||||
<div className="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Card Number"
|
||||
maxLength={19}
|
||||
className="border border-gray-300 rounded px-4 py-2 w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Cardholder Name"
|
||||
className="border border-gray-300 rounded px-4 py-2 w-full"
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="MM/YY"
|
||||
className="border border-gray-300 rounded px-4 py-2 w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="CVV"
|
||||
maxLength={4}
|
||||
className="border border-gray-300 rounded px-4 py-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Return Policy */}
|
||||
<div className="mb-8 p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<div className="flex gap-3">
|
||||
<RotateCcw className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="font-semibold text-sm mb-1">30-Day Return Policy</p>
|
||||
<p className="text-xs text-gray-700">Not satisfied? Return items within 30 days in original condition for a full refund.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Order Summary Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-card border border-gray-200 rounded-lg p-6 sticky top-20">
|
||||
<h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
|
||||
<ShoppingCart className="w-5 h-5" />
|
||||
Order Summary
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4 mb-6">
|
||||
{cartItems.map((item) => (
|
||||
<div key={item.id} className="flex gap-4 pb-4 border-b border-gray-200">
|
||||
<div className="w-16 h-16 bg-gray-100 rounded overflow-hidden flex-shrink-0">
|
||||
<img
|
||||
src={item.imageSrc}
|
||||
alt={item.imageAlt}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 text-sm">
|
||||
<p className="font-semibold">{item.name}</p>
|
||||
<p className="text-gray-600 text-xs mb-1">Qty: {item.quantity}</p>
|
||||
{item.variants.map((variant, idx) => (
|
||||
<p key={idx} className="text-gray-600 text-xs">{variant}</p>
|
||||
))}
|
||||
<p className="font-semibold text-primary-cta mt-1">{item.price}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 mb-4 pt-4 border-t border-gray-200">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Subtotal:</span>
|
||||
<span>$219.98</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Shipping:</span>
|
||||
<span>$10.00</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>Tax:</span>
|
||||
<span>$18.40</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between text-lg font-bold mb-6 pt-4 border-t border-gray-200">
|
||||
<span>Total:</span>
|
||||
<span>$248.38</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handlePlaceOrder}
|
||||
className="w-full bg-primary-cta hover:opacity-90 text-white font-semibold py-3 rounded-lg transition"
|
||||
>
|
||||
Place Order
|
||||
</button>
|
||||
|
||||
<button className="w-full mt-2 border border-gray-300 text-gray-700 font-semibold py-3 rounded-lg hover:bg-gray-50 transition">
|
||||
Continue Shopping
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="garraagarmzz"
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -279,8 +279,8 @@ export default function HomePage() {
|
||||
<div id="newsletter-contact" data-section="newsletter-contact">
|
||||
<ContactCenter
|
||||
tag="Stay Connected"
|
||||
title="Join Our Community"
|
||||
description="Subscribe to our newsletter for exclusive drops, early access to new collections, and special offers."
|
||||
title="Get 10% Off + VIP Access"
|
||||
description="Unlock 10% off your first order, early access to drops, and insider pricing—available only to subscribers."
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "animated-grid" }}
|
||||
@@ -332,4 +332,4 @@ export default function HomePage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
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 { ChevronDown, Search, X } from "lucide-react";
|
||||
import { Star, Mail } from "lucide-react";
|
||||
|
||||
export default function ShopPage() {
|
||||
const navItems = [
|
||||
@@ -19,7 +21,8 @@ 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" },
|
||||
@@ -27,7 +30,8 @@ export default function ShopPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
@@ -35,7 +39,8 @@ export default function ShopPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
title: "Support",
|
||||
items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
@@ -43,7 +48,8 @@ export default function ShopPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
@@ -52,24 +58,6 @@ export default function ShopPage() {
|
||||
},
|
||||
];
|
||||
|
||||
// State for filters
|
||||
const [selectedBrand, setSelectedBrand] = useState<string | null>(null);
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
const [selectedSize, setSelectedSize] = useState<string | null>(null);
|
||||
const [priceRange, setPriceRange] = useState<[number, number]>([0, 500]);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [expandedFilter, setExpandedFilter] = useState<string | null>("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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
@@ -88,7 +76,9 @@ export default function ShopPage() {
|
||||
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"
|
||||
@@ -97,261 +87,171 @@ export default function ShopPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shop-hero" data-section="shop-hero" className="py-12 md:py-16 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-2">Shop Collection</h1>
|
||||
<p className="text-lg text-foreground/70">Explore our curated selection of premium fashion</p>
|
||||
</div>
|
||||
<div id="all-products" data-section="all-products">
|
||||
<ProductCardTwo
|
||||
title="All Products"
|
||||
description="Browse our complete collection of premium streetwear and designer fashion from the world's most sought-after brands."
|
||||
tag="Complete Catalog"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="bento-grid"
|
||||
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-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-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?_wi=2",
|
||||
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-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?_wi=2",
|
||||
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?_wi=2",
|
||||
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?_wi=2",
|
||||
imageAlt: "Stüssy fleece pullover in grey",
|
||||
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?_wi=2",
|
||||
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?_wi=2",
|
||||
imageAlt: "Carhartt WIP simple pant in black",
|
||||
isFavorited: false,
|
||||
},
|
||||
]}
|
||||
buttons={[]}
|
||||
carouselMode="buttons"
|
||||
ariaLabel="Complete product catalog"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shop-content" data-section="shop-content" className="py-8 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
{/* Filters Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-card rounded-lg p-6 sticky top-24">
|
||||
<h2 className="text-xl font-bold text-foreground mb-6">Filters</h2>
|
||||
|
||||
{/* Search */}
|
||||
<div className="mb-6">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-3 w-4 h-4 text-foreground/50" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search products"
|
||||
value={searchQuery}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Brand Filter */}
|
||||
<div className="mb-6 border-b border-accent pb-6">
|
||||
<button
|
||||
onClick={() => toggleFilter("brand")}
|
||||
className="flex items-center justify-between w-full text-foreground font-semibold hover:text-primary-cta transition-colors"
|
||||
>
|
||||
Brand
|
||||
<ChevronDown
|
||||
className={`w-4 h-4 transition-transform ${
|
||||
expandedFilter === "brand" ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
{expandedFilter === "brand" && (
|
||||
<div className="mt-4 space-y-3">
|
||||
{brands.map((brand) => (
|
||||
<label key={brand} className="flex items-center cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedBrand === brand}
|
||||
onChange={() => setSelectedBrand(selectedBrand === brand ? null : brand)}
|
||||
className="w-4 h-4 rounded border-accent bg-background cursor-pointer"
|
||||
/>
|
||||
<span className="ml-3 text-sm text-foreground group-hover:text-primary-cta transition-colors">
|
||||
{brand}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="mb-6 border-b border-accent pb-6">
|
||||
<button
|
||||
onClick={() => toggleFilter("category")}
|
||||
className="flex items-center justify-between w-full text-foreground font-semibold hover:text-primary-cta transition-colors"
|
||||
>
|
||||
Category
|
||||
<ChevronDown
|
||||
className={`w-4 h-4 transition-transform ${
|
||||
expandedFilter === "category" ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
{expandedFilter === "category" && (
|
||||
<div className="mt-4 space-y-3">
|
||||
{categories.map((category) => (
|
||||
<label key={category} className="flex items-center cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedCategory === category}
|
||||
onChange={() => setSelectedCategory(selectedCategory === category ? null : category)}
|
||||
className="w-4 h-4 rounded border-accent bg-background cursor-pointer"
|
||||
/>
|
||||
<span className="ml-3 text-sm text-foreground group-hover:text-primary-cta transition-colors">
|
||||
{category}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Size Filter */}
|
||||
<div className="mb-6 border-b border-accent pb-6">
|
||||
<button
|
||||
onClick={() => toggleFilter("size")}
|
||||
className="flex items-center justify-between w-full text-foreground font-semibold hover:text-primary-cta transition-colors"
|
||||
>
|
||||
Size
|
||||
<ChevronDown
|
||||
className={`w-4 h-4 transition-transform ${
|
||||
expandedFilter === "size" ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
{expandedFilter === "size" && (
|
||||
<div className="mt-4 space-y-3">
|
||||
{sizes.map((size) => (
|
||||
<label key={size} className="flex items-center cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedSize === size}
|
||||
onChange={() => setSelectedSize(selectedSize === size ? null : size)}
|
||||
className="w-4 h-4 rounded border-accent bg-background cursor-pointer"
|
||||
/>
|
||||
<span className="ml-3 text-sm text-foreground group-hover:text-primary-cta transition-colors">
|
||||
{size}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Price Filter */}
|
||||
<div className="border-b border-accent pb-6">
|
||||
<button
|
||||
onClick={() => toggleFilter("price")}
|
||||
className="flex items-center justify-between w-full text-foreground font-semibold hover:text-primary-cta transition-colors"
|
||||
>
|
||||
Price
|
||||
<ChevronDown
|
||||
className={`w-4 h-4 transition-transform ${
|
||||
expandedFilter === "price" ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
{expandedFilter === "price" && (
|
||||
<div className="mt-4">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-sm text-foreground/70">Min Price: ${priceRange[0]}</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="500"
|
||||
value={priceRange[0]}
|
||||
onChange={(e) => setPriceRange([parseInt(e.target.value), priceRange[1]])}
|
||||
className="w-full h-2 bg-accent rounded-lg appearance-none cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-foreground/70">Max Price: ${priceRange[1]}</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="500"
|
||||
value={priceRange[1]}
|
||||
onChange={(e) => setPriceRange([priceRange[0], parseInt(e.target.value)])}
|
||||
className="w-full h-2 bg-accent rounded-lg appearance-none cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Clear Filters */}
|
||||
{(selectedBrand || selectedCategory || selectedSize || searchQuery) && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedBrand(null);
|
||||
setSelectedCategory(null);
|
||||
setSelectedSize(null);
|
||||
setSearchQuery("");
|
||||
}}
|
||||
className="w-full mt-6 px-4 py-2 bg-primary-cta text-primary-cta-text rounded-lg font-medium hover:opacity-90 transition-opacity flex items-center justify-center gap-2"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
Clear Filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products Grid */}
|
||||
<div className="lg:col-span-3">
|
||||
{/* Empty State */}
|
||||
<div className="bg-card rounded-lg p-12 text-center min-h-96 flex flex-col items-center justify-center">
|
||||
<div className="mb-4">
|
||||
<div className="w-16 h-16 bg-background rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-3xl">📦</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-foreground mb-2">No Products Yet</h3>
|
||||
<p className="text-foreground/70 max-w-md">
|
||||
Our shop is currently being set up with amazing products. Check back soon for exclusive items from your favorite brands!
|
||||
</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedBrand(null);
|
||||
setSelectedCategory(null);
|
||||
setSelectedSize(null);
|
||||
setSearchQuery("");
|
||||
}}
|
||||
className="mt-6 px-6 py-2 bg-primary-cta text-primary-cta-text rounded-lg font-medium hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Browse All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Active Filters Display */}
|
||||
{(selectedBrand || selectedCategory || selectedSize || searchQuery) && (
|
||||
<div className="mb-6 p-4 bg-background rounded-lg border border-accent">
|
||||
<p className="text-sm text-foreground/70 mb-3">Active filters:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{searchQuery && (
|
||||
<span className="inline-flex items-center gap-2 px-3 py-1 bg-primary-cta text-primary-cta-text rounded-full text-sm">
|
||||
Search: {searchQuery}
|
||||
<button onClick={() => setSearchQuery("")} className="hover:opacity-70">
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
{selectedBrand && (
|
||||
<span className="inline-flex items-center gap-2 px-3 py-1 bg-primary-cta text-primary-cta-text rounded-full text-sm">
|
||||
Brand: {selectedBrand}
|
||||
<button onClick={() => setSelectedBrand(null)} className="hover:opacity-70">
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
{selectedCategory && (
|
||||
<span className="inline-flex items-center gap-2 px-3 py-1 bg-primary-cta text-primary-cta-text rounded-full text-sm">
|
||||
Category: {selectedCategory}
|
||||
<button onClick={() => setSelectedCategory(null)} className="hover:opacity-70">
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
{selectedSize && (
|
||||
<span className="inline-flex items-center gap-2 px-3 py-1 bg-primary-cta text-primary-cta-text rounded-full text-sm">
|
||||
Size: {selectedSize}
|
||||
<button onClick={() => setSelectedSize(null)} className="hover:opacity-70">
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="shop-newsletter" data-section="shop-newsletter">
|
||||
<ContactCenter
|
||||
tag="Stay Connected"
|
||||
title="Don't Miss Out on New Releases"
|
||||
description="Subscribe to get notified about the latest drops, exclusive collections, and special promotions from your favorite brands."
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "animated-grid" }}
|
||||
useInvertedBackground={true}
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Subscribe"
|
||||
termsText="By subscribing, you agree to receive marketing emails from garraagarmzz. Unsubscribe anytime."
|
||||
ariaLabel="Newsletter signup on shop page"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
@@ -364,4 +264,4 @@ export default function ShopPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user