Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6abd5b6df6 | |||
| 706b70a3ad | |||
| 707bf7de70 | |||
| 8339a6856e | |||
| 73637e5dea | |||
| 0e145a6571 | |||
| bce14ed4af | |||
| 1307e1badf | |||
| 1cab13dadf | |||
| 3f47c367e1 | |||
| b9fc7f7110 | |||
| 3686c55b08 | |||
| c2b4f55880 | |||
| 0c7327af1c |
@@ -1,93 +1,112 @@
|
||||
"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";
|
||||
import TextBox from "@/components/Textbox";
|
||||
import { BarChart3, TrendingUp, Package, DollarSign, Percent, AlertCircle } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
interface Product {
|
||||
interface Order {
|
||||
id: string;
|
||||
brand: string;
|
||||
name: string;
|
||||
price: string;
|
||||
stock: number;
|
||||
imageSrc: string;
|
||||
imageAlt: string;
|
||||
orderNumber: string;
|
||||
customer: string;
|
||||
date: string;
|
||||
total: number;
|
||||
status: "pending" | "shipped" | "delivered" | "cancelled";
|
||||
items: number;
|
||||
}
|
||||
|
||||
interface InventoryItem {
|
||||
interface Discount {
|
||||
id: string;
|
||||
productName: string;
|
||||
sku: string;
|
||||
quantity: number;
|
||||
lowStockThreshold: number;
|
||||
lastUpdated: string;
|
||||
code: string;
|
||||
description: string;
|
||||
discountPercentage: number;
|
||||
expiryDate: string;
|
||||
active: boolean;
|
||||
usageCount: number;
|
||||
}
|
||||
|
||||
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" },
|
||||
{ name: "Revenue", id: "revenue" },
|
||||
{ name: "Discounts", id: "discounts" },
|
||||
{ name: "Products", id: "products" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
const [orders, setOrders] = useState<Order[]>([
|
||||
{
|
||||
title: "Admin", items: [
|
||||
{ label: "Dashboard", href: "/admin" },
|
||||
{ label: "Products", href: "/admin" },
|
||||
{ label: "Settings", href: "/admin" },
|
||||
],
|
||||
id: "1", orderNumber: "ORD-001", customer: "John Doe", date: "2025-01-15", total: 249.99,
|
||||
status: "delivered", items: 3,
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Help Center", href: "#" },
|
||||
{ label: "Contact", href: "#" },
|
||||
],
|
||||
id: "2", orderNumber: "ORD-002", customer: "Jane Smith", date: "2025-01-14", total: 179.50,
|
||||
status: "shipped", items: 2,
|
||||
},
|
||||
];
|
||||
{
|
||||
id: "3", orderNumber: "ORD-003", customer: "Mike Johnson", date: "2025-01-13", total: 89.99,
|
||||
status: "pending", items: 1,
|
||||
},
|
||||
{
|
||||
id: "4", orderNumber: "ORD-004", customer: "Sarah Williams", date: "2025-01-12", total: 599.99,
|
||||
status: "delivered", items: 5,
|
||||
},
|
||||
{
|
||||
id: "5", orderNumber: "ORD-005", customer: "Alex Brown", date: "2025-01-11", total: 129.99,
|
||||
status: "cancelled", items: 1,
|
||||
},
|
||||
]);
|
||||
|
||||
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 [discounts, setDiscounts] = useState<Discount[]>([
|
||||
{
|
||||
id: "1", code: "WELCOME10", description: "10% off first purchase", discountPercentage: 10,
|
||||
expiryDate: "2025-12-31", active: true,
|
||||
usageCount: 245,
|
||||
},
|
||||
{
|
||||
id: "2", code: "SUMMER20", description: "20% off summer collection", discountPercentage: 20,
|
||||
expiryDate: "2025-08-31", active: true,
|
||||
usageCount: 128,
|
||||
},
|
||||
{
|
||||
id: "3", code: "FLASH15", description: "15% flash sale", discountPercentage: 15,
|
||||
expiryDate: "2025-01-20", active: true,
|
||||
usageCount: 567,
|
||||
},
|
||||
{
|
||||
id: "4", code: "OLDCODE5", description: "Expired promotional code", discountPercentage: 5,
|
||||
expiryDate: "2024-12-31", active: false,
|
||||
usageCount: 89,
|
||||
},
|
||||
]);
|
||||
|
||||
const totalRevenue = orders.reduce((sum, order) => sum + order.total, 0);
|
||||
const totalOrders = orders.length;
|
||||
const deliveredOrders = orders.filter((o) => o.status === "delivered").length;
|
||||
const pendingOrders = orders.filter((o) => o.status === "pending").length;
|
||||
const totalDiscountUsage = discounts.reduce((sum, d) => sum + d.usageCount, 0);
|
||||
const activeDiscounts = discounts.filter((d) => d.active).length;
|
||||
|
||||
const getStatusColor = (status: Order["status"]): string => {
|
||||
switch (status) {
|
||||
case "delivered":
|
||||
return "bg-green-100 text-green-800";
|
||||
case "shipped":
|
||||
return "bg-blue-100 text-blue-800";
|
||||
case "pending":
|
||||
return "bg-yellow-100 text-yellow-800";
|
||||
case "cancelled":
|
||||
return "bg-red-100 text-red-800";
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800";
|
||||
}
|
||||
};
|
||||
|
||||
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)));
|
||||
const handleToggleDiscount = (id: string) => {
|
||||
setDiscounts(
|
||||
discounts.map((d) => (d.id === id ? { ...d, active: !d.active } : d))
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -117,290 +136,227 @@ export default function AdminDashboard() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-12 px-4">
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-8">
|
||||
<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>
|
||||
{/* Dashboard Header */}
|
||||
<div id="dashboard" data-section="dashboard" className="mb-12">
|
||||
<TextBox
|
||||
title="Admin Dashboard"
|
||||
description="Track orders, monitor revenue, and manage promotional discounts"
|
||||
type="entrance-slide"
|
||||
textboxLayout="default"
|
||||
center={false}
|
||||
/>
|
||||
</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">
|
||||
{/* KPI Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||||
<div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-blue-500">
|
||||
<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 className="text-sm text-gray-600 font-medium">Total Orders</p>
|
||||
<p className="text-3xl font-bold text-gray-900 mt-2">
|
||||
{totalOrders}
|
||||
</p>
|
||||
</div>
|
||||
<BarChart3 className="w-12 h-12 text-green-500 opacity-20" />
|
||||
<Package className="h-8 w-8 text-blue-500" />
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-4">
|
||||
{deliveredOrders} delivered, {pendingOrders} pending
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
|
||||
<div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-green-500">
|
||||
<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 className="text-sm text-gray-600 font-medium">Total Revenue</p>
|
||||
<p className="text-3xl font-bold text-gray-900 mt-2">
|
||||
${totalRevenue.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<AlertCircle className="w-12 h-12 text-orange-500 opacity-20" />
|
||||
<DollarSign className="h-8 w-8 text-green-500" />
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-4">From {totalOrders} orders</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
|
||||
<div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-purple-500">
|
||||
<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>
|
||||
<p className="text-sm text-gray-600 font-medium">Active Discounts</p>
|
||||
<p className="text-3xl font-bold text-gray-900 mt-2">
|
||||
{activeDiscounts}
|
||||
</p>
|
||||
</div>
|
||||
<BarChart3 className="w-12 h-12 text-purple-500 opacity-20" />
|
||||
<Percent className="h-8 w-8 text-purple-500" />
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-4">
|
||||
{totalDiscountUsage} total uses
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-orange-500">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 font-medium">Avg Order Value</p>
|
||||
<p className="text-3xl font-bold text-gray-900 mt-2">
|
||||
${(totalRevenue / totalOrders).toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<TrendingUp className="h-8 w-8 text-orange-500" />
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-4">Per transaction</p>
|
||||
</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>
|
||||
{/* Orders Section */}
|
||||
<div id="orders" data-section="orders" className="mb-12">
|
||||
<div className="bg-white rounded-lg shadow-md p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<BarChart3 className="h-6 w-6 text-blue-500" />
|
||||
Recent Orders
|
||||
</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="text-left py-3 px-4 font-semibold text-gray-700">
|
||||
Order #
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 font-semibold text-gray-700">
|
||||
Customer
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 font-semibold text-gray-700">
|
||||
Date
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 font-semibold text-gray-700">
|
||||
Items
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 font-semibold text-gray-700">
|
||||
Total
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 font-semibold text-gray-700">
|
||||
Status
|
||||
</th>
|
||||
</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>
|
||||
)}
|
||||
</thead>
|
||||
<tbody>
|
||||
{orders.map((order) => (
|
||||
<tr key={order.id} className="border-b border-gray-100 hover:bg-gray-50">
|
||||
<td className="py-4 px-4 font-medium text-gray-900">
|
||||
{order.orderNumber}
|
||||
</td>
|
||||
<td className="py-4 px-4 text-gray-700">{order.customer}</td>
|
||||
<td className="py-4 px-4 text-gray-700">{order.date}</td>
|
||||
<td className="py-4 px-4 text-gray-700">{order.items}</td>
|
||||
<td className="py-4 px-4 font-semibold text-gray-900">
|
||||
${order.total.toFixed(2)}
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<span
|
||||
className={`inline-block px-3 py-1 rounded-full text-xs font-medium capitalize ${
|
||||
getStatusColor(order.status)
|
||||
}`}
|
||||
>
|
||||
{order.status}
|
||||
</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>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
{/* Revenue Section */}
|
||||
<div id="revenue" data-section="revenue" className="mb-12">
|
||||
<div className="bg-white rounded-lg shadow-md p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<DollarSign className="h-6 w-6 text-green-500" />
|
||||
Revenue Summary
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-6">
|
||||
<p className="text-sm text-gray-600 font-medium">Total Revenue</p>
|
||||
<p className="text-2xl font-bold text-green-600 mt-2">
|
||||
${totalRevenue.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-6">
|
||||
<p className="text-sm text-gray-600 font-medium">Delivered Orders</p>
|
||||
<p className="text-2xl font-bold text-blue-600 mt-2">
|
||||
${orders
|
||||
.filter((o) => o.status === "delivered")
|
||||
.reduce((sum, o) => sum + o.total, 0)
|
||||
.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-lg p-6">
|
||||
<p className="text-sm text-gray-600 font-medium">Pending Orders</p>
|
||||
<p className="text-2xl font-bold text-yellow-600 mt-2">
|
||||
${orders
|
||||
.filter((o) => o.status === "pending")
|
||||
.reduce((sum, o) => sum + o.total, 0)
|
||||
.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{/* Discounts Section */}
|
||||
<div id="discounts" data-section="discounts">
|
||||
<div className="bg-white rounded-lg shadow-md p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Percent className="h-6 w-6 text-purple-500" />
|
||||
Promotional Discounts
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{discounts.map((discount) => (
|
||||
<div
|
||||
key={discount.id}
|
||||
className="border border-gray-200 rounded-lg p-6 flex items-center justify-between hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-lg font-bold text-gray-900">
|
||||
{discount.code}
|
||||
</h3>
|
||||
<span
|
||||
className={`inline-block px-2 py-1 rounded text-xs font-medium ${
|
||||
discount.active
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-red-100 text-red-800"
|
||||
}`}
|
||||
>
|
||||
{discount.active ? "Active" : "Inactive"}
|
||||
</span>
|
||||
{!discount.active && <AlertCircle className="h-4 w-4 text-red-500" />}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mb-2">{discount.description}</p>
|
||||
<div className="flex gap-6 text-sm text-gray-500">
|
||||
<span>Discount: {discount.discountPercentage}%</span>
|
||||
<span>Expires: {discount.expiryDate}</span>
|
||||
<span>Used: {discount.usageCount} times</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleToggleDiscount(discount.id)}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
discount.active
|
||||
? "bg-red-100 text-red-700 hover:bg-red-200"
|
||||
: "bg-green-100 text-green-700 hover:bg-green-200"
|
||||
}`}
|
||||
>
|
||||
{discount.active ? "Deactivate" : "Activate"}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
382
src/app/page.tsx
382
src/app/page.tsx
@@ -10,9 +10,24 @@ import TestimonialCardFifteen from "@/components/sections/testimonial/Testimonia
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Sparkles, Zap, Award, Star, HelpCircle, Mail } from "lucide-react";
|
||||
import { Sparkles, Zap, Award, Star, HelpCircle, Mail, Heart } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function HomePage() {
|
||||
const [wishlist, setWishlist] = useState<Set<string>>(new Set());
|
||||
|
||||
const toggleWishlist = (productId: string) => {
|
||||
setWishlist((prev) => {
|
||||
const updated = new Set(prev);
|
||||
if (updated.has(productId)) {
|
||||
updated.delete(productId);
|
||||
} else {
|
||||
updated.add(productId);
|
||||
}
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
@@ -58,6 +73,80 @@ export default function HomePage() {
|
||||
},
|
||||
];
|
||||
|
||||
const featuredProducts = [
|
||||
{
|
||||
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: wishlist.has("prod-001"),
|
||||
onFavorite: () => toggleWishlist("prod-001"),
|
||||
},
|
||||
{
|
||||
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: wishlist.has("prod-002"),
|
||||
onFavorite: () => toggleWishlist("prod-002"),
|
||||
},
|
||||
{
|
||||
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: wishlist.has("prod-003"),
|
||||
onFavorite: () => toggleWishlist("prod-003"),
|
||||
},
|
||||
{
|
||||
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: wishlist.has("prod-004"),
|
||||
onFavorite: () => toggleWishlist("prod-004"),
|
||||
},
|
||||
{
|
||||
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: wishlist.has("prod-005"),
|
||||
onFavorite: () => toggleWishlist("prod-005"),
|
||||
},
|
||||
{
|
||||
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: wishlist.has("prod-006"),
|
||||
onFavorite: () => toggleWishlist("prod-006"),
|
||||
},
|
||||
];
|
||||
|
||||
const newArrivalsProducts = [
|
||||
{
|
||||
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: wishlist.has("prod-007"),
|
||||
onFavorite: () => toggleWishlist("prod-007"),
|
||||
},
|
||||
{
|
||||
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: wishlist.has("prod-008"),
|
||||
onFavorite: () => toggleWishlist("prod-008"),
|
||||
},
|
||||
{
|
||||
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: wishlist.has("prod-009"),
|
||||
onFavorite: () => toggleWishlist("prod-009"),
|
||||
},
|
||||
];
|
||||
|
||||
const bestSellersProducts = [
|
||||
{
|
||||
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: wishlist.has("prod-010"),
|
||||
onFavorite: () => toggleWishlist("prod-010"),
|
||||
},
|
||||
{
|
||||
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: wishlist.has("prod-011"),
|
||||
onFavorite: () => toggleWishlist("prod-011"),
|
||||
},
|
||||
{
|
||||
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: wishlist.has("prod-012"),
|
||||
onFavorite: () => toggleWishlist("prod-012"),
|
||||
},
|
||||
{
|
||||
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: wishlist.has("prod-013"),
|
||||
onFavorite: () => toggleWishlist("prod-013"),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
@@ -71,16 +160,178 @@ export default function HomePage() {
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<style>{`
|
||||
/* Micro-interactions & smooth transitions */
|
||||
* {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Button hover effects */
|
||||
button, a[role="button"] {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button:hover, a[role="button"]:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
button:active, a[role="button"]:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Product card hover effects */
|
||||
[data-product-card] {
|
||||
position: relative;
|
||||
border-radius: inherit;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-product-card]:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
[data-product-image] {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-product-image] img {
|
||||
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
[data-product-card]:hover [data-product-image] img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
/* Wishlist button animation */
|
||||
[data-wishlist-button] {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
[data-wishlist-button]:hover {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
[data-wishlist-button] svg {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
[data-wishlist-button].favorited svg {
|
||||
fill: currentColor;
|
||||
color: #ff1744;
|
||||
animation: heartPulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes heartPulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.2); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* Mobile-first wishlist styles */
|
||||
@media (max-width: 768px) {
|
||||
[data-wishlist-button] {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
[data-product-card]:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth link transitions */
|
||||
a {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Navbar smooth transitions */
|
||||
nav {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
nav a {
|
||||
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: var(--primary-cta, #3b82f6);
|
||||
}
|
||||
|
||||
/* Form input focus states */
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
textarea {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="email"]:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-cta, #3b82f6);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Accordion smooth transitions */
|
||||
[data-accordion-button] {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
[data-accordion-button]:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
[data-accordion-content] {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
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"
|
||||
buttonClassName="bg-blue-500 hover:bg-blue-600"
|
||||
className="bg-opacity-95 transition-all duration-300 hover:bg-opacity-100"
|
||||
navItemClassName="text-sm font-medium transition-colors duration-300 hover:text-blue-500"
|
||||
buttonClassName="bg-blue-500 hover:bg-blue-600 transition-all duration-300 transform hover:-translate-y-0.5 hover:shadow-lg"
|
||||
buttonTextClassName="text-white font-semibold"
|
||||
/>
|
||||
</div>
|
||||
@@ -95,15 +346,19 @@ 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" },
|
||||
@@ -124,6 +379,7 @@ export default function HomePage() {
|
||||
marqueeSpeed={35}
|
||||
showMarqueeCard={true}
|
||||
ariaLabel="Hero section featuring garraagarmzz brand identity and featured products"
|
||||
className="transition-all duration-500 hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -138,36 +394,13 @@ export default function HomePage() {
|
||||
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", 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,
|
||||
},
|
||||
]}
|
||||
products={featuredProducts}
|
||||
buttons={[{ text: "View All", href: "/shop" }]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselMode="buttons"
|
||||
ariaLabel="Featured products carousel"
|
||||
cardClassName="transition-all duration-300 hover:shadow-xl hover:-translate-y-2"
|
||||
imageClassName="transition-transform duration-500 hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -181,14 +414,17 @@ 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}
|
||||
showCard={true}
|
||||
ariaLabel="Partner brands marquee"
|
||||
logoItemClassName="transition-all duration-300 hover:scale-110 hover:shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -203,24 +439,13 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
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-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,
|
||||
},
|
||||
]}
|
||||
products={newArrivalsProducts}
|
||||
buttons={[{ text: "See All New Items", href: "/shop" }]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselMode="buttons"
|
||||
ariaLabel="New arrivals section"
|
||||
cardClassName="transition-all duration-300 hover:shadow-xl hover:-translate-y-2"
|
||||
imageClassName="transition-transform duration-500 hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -235,28 +460,13 @@ export default function HomePage() {
|
||||
useInvertedBackground={true}
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
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-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-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,
|
||||
},
|
||||
]}
|
||||
products={bestSellersProducts}
|
||||
buttons={[{ text: "Shop Best Sellers", href: "/shop" }]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselMode="buttons"
|
||||
ariaLabel="Best sellers collection"
|
||||
cardClassName="transition-all duration-300 hover:shadow-xl hover:-translate-y-2"
|
||||
imageClassName="transition-transform duration-500 hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -267,20 +477,22 @@ 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"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="Customer testimonial section"
|
||||
className="transition-all duration-500 hover:shadow-xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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" }}
|
||||
@@ -289,6 +501,9 @@ export default function HomePage() {
|
||||
buttonText="Subscribe"
|
||||
termsText="By subscribing, you agree to receive marketing emails. Unsubscribe at any time."
|
||||
ariaLabel="Newsletter signup section"
|
||||
formClassName="transition-all duration-300"
|
||||
inputClassName="transition-all duration-300 focus:shadow-lg focus:scale-105"
|
||||
buttonClassName="transition-all duration-300 hover:shadow-lg hover:-translate-y-1 active:translate-y-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -304,21 +519,28 @@ 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. We also support Stripe for additional payment processing options."},
|
||||
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"
|
||||
ariaLabel="FAQ section"
|
||||
accordionClassName="transition-all duration-300 hover:bg-opacity-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -328,8 +550,10 @@ export default function HomePage() {
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
className="transition-all duration-300"
|
||||
columnItemClassName="transition-colors duration-300 hover:text-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
313
src/app/products/page.tsx
Normal file
313
src/app/products/page.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Sparkles, Search, Filter, X, Eye, Heart, ShoppingCart } from "lucide-react";
|
||||
|
||||
export default function ProductsPage() {
|
||||
const [selectedProduct, setSelectedProduct] = useState<string | null>(null);
|
||||
const [isMobileFilterOpen, setIsMobileFilterOpen] = useState(false);
|
||||
|
||||
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 footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/products" },
|
||||
{ label: "Best Sellers", href: "/products" },
|
||||
{ label: "Brands", href: "/products" },
|
||||
],
|
||||
},
|
||||
{
|
||||
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 allProducts = [
|
||||
{
|
||||
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", 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", 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-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-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-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,
|
||||
},
|
||||
];
|
||||
|
||||
const selectedProductData = selectedProduct
|
||||
? allProducts.find((p) => p.id === selectedProduct)
|
||||
: null;
|
||||
|
||||
const renderStars = (rating: number) => {
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<svg
|
||||
key={i}
|
||||
className={`w-4 h-4 ${
|
||||
i < Math.floor(rating)
|
||||
? "fill-yellow-400 text-yellow-400"
|
||||
: "fill-gray-300 text-gray-300"
|
||||
}`}
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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: "Cart", href: "/products"}}
|
||||
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>
|
||||
|
||||
{/* Mobile Filter Toggle */}
|
||||
<div className="md:hidden sticky top-20 z-40 bg-opacity-95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800">
|
||||
<div className="flex gap-2 p-4 justify-center">
|
||||
<button
|
||||
onClick={() => setIsMobileFilterOpen(!isMobileFilterOpen)}
|
||||
className="flex-1 flex items-center justify-center gap-2 py-2 px-4 rounded-lg bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<Filter className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">Filter</span>
|
||||
</button>
|
||||
<button className="flex-1 flex items-center justify-center gap-2 py-2 px-4 rounded-lg bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors">
|
||||
<Search className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Product Grid Section */}
|
||||
<div id="products-grid" data-section="products-grid" className="w-full">
|
||||
<ProductCardTwo
|
||||
title="All Products"
|
||||
description="Browse our complete collection of premium fashion items. Use filters to refine your search."
|
||||
tag="Complete Collection"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
products={allProducts}
|
||||
buttons={[]}
|
||||
carouselMode="buttons"
|
||||
ariaLabel="Complete products catalog with mobile-first design"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Quick View Popup Modal */}
|
||||
{selectedProductData && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm p-4"
|
||||
onClick={() => setSelectedProduct(null)}
|
||||
>
|
||||
<div
|
||||
className="bg-white dark:bg-gray-900 rounded-lg shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={() => setSelectedProduct(null)}
|
||||
className="sticky top-0 right-0 z-10 p-4 float-right bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors"
|
||||
aria-label="Close quick view"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6">
|
||||
{/* Product Image */}
|
||||
<div className="flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg min-h-80 md:min-h-96">
|
||||
<img
|
||||
src={selectedProductData.imageSrc}
|
||||
alt={selectedProductData.imageAlt}
|
||||
className="w-full h-full object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Product Details */}
|
||||
<div className="flex flex-col justify-between py-2">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-blue-600 dark:text-blue-400 mb-1">
|
||||
{selectedProductData.brand}
|
||||
</p>
|
||||
<h2 className="text-2xl md:text-3xl font-bold mb-2">
|
||||
{selectedProductData.name}
|
||||
</h2>
|
||||
|
||||
{/* Rating */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
{renderStars(selectedProductData.rating)}
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{selectedProductData.rating} ({selectedProductData.reviewCount} reviews)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<div className="mb-6">
|
||||
<p className="text-4xl font-bold text-gray-900 dark:text-white">
|
||||
{selectedProductData.price}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Placeholder for Image Upload Section */}
|
||||
<div className="mb-6 p-4 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg text-center">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
📷 Additional product images
|
||||
</p>
|
||||
<div className="flex gap-2 justify-center">
|
||||
<div className="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-lg flex items-center justify-center">
|
||||
<span className="text-gray-400 text-xs">Click to add</span>
|
||||
</div>
|
||||
<div className="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-lg flex items-center justify-center">
|
||||
<span className="text-gray-400 text-xs">Click to add</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors">
|
||||
<ShoppingCart className="w-5 h-5" />
|
||||
Add to Cart
|
||||
</button>
|
||||
<button className="w-full border-2 border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 font-semibold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors">
|
||||
<Heart className="w-5 h-5" />
|
||||
Save for Later
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Product Card Click Handler - Overlay for Quick View Trigger */}
|
||||
<div className="hidden" id="quick-view-trigger">
|
||||
{allProducts.map((product) => (
|
||||
<button
|
||||
key={product.id}
|
||||
onClick={() => setSelectedProduct(product.id)}
|
||||
className="quick-view-btn"
|
||||
data-product-id={product.id}
|
||||
aria-label={`Quick view ${product.name}`}
|
||||
>
|
||||
<Eye className="w-5 h-5" />
|
||||
</button>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f0f8ffe6;
|
||||
--primary-cta: #cee7ff;
|
||||
--background: #000000;
|
||||
--card: #0c0c0c;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #106EFB;
|
||||
--primary-cta-text: #0a0a0a;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta: #000000;
|
||||
--secondary-cta-text: #f0f8ffe6;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
--accent: #535353;
|
||||
--background-accent: #106EFB;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user