Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6abd5b6df6 | |||
| 706b70a3ad | |||
| 707bf7de70 | |||
| 8339a6856e | |||
| 73637e5dea |
@@ -1,47 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import TextAbout from "@/components/sections/about/TextAbout";
|
||||
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Award } from "lucide-react";
|
||||
import { Sparkles, Award, Mail } from "lucide-react";
|
||||
|
||||
export default function AboutPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "FAQ", id: "/faq" },
|
||||
{ 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: "/shop" },
|
||||
{ label: "Best Sellers", href: "/shop" },
|
||||
{ label: "Brands", href: "/shop" },
|
||||
title: "Shop",
|
||||
items: [
|
||||
{ label: "All Products", href: "/" },
|
||||
{ label: "New Arrivals", href: "/" },
|
||||
{ label: "Best Sellers", href: "/best-sellers" },
|
||||
{ label: "Brands", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
title: "Support",
|
||||
items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
@@ -65,10 +74,9 @@ export default function AboutPage() {
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="garraagarmzz"
|
||||
button={{
|
||||
text: "Shop Now", href: "/shop"}}
|
||||
navItems={navItems}
|
||||
button={{ text: "Shop Now", href: "/" }}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
@@ -77,16 +85,98 @@ export default function AboutPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about-section" data-section="about-section">
|
||||
<TextAbout
|
||||
tag="Our Story"
|
||||
<div id="about-hero" data-section="about-hero" className="mx-auto px-4 md:px-6">
|
||||
<HeroSplitDoubleCarousel
|
||||
title="Our Story"
|
||||
description="garraagarmzz was founded with a mission to make premium streetwear and designer fashion accessible to everyone. We curate the best collections from the world's most coveted brands."
|
||||
tag="Since 2020"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
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=1",
|
||||
imageAlt: "Premium sneakers 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=1",
|
||||
imageAlt: "Fashion accessories collection",
|
||||
},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432326.jpg?_wi=1",
|
||||
imageAlt: "Streetwear collection showcase",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-well-dressed-male-model-sitting-stairs-fashionable-african-guy-enjoying-photoshoot-steps_197531-22070.jpg?_wi=1",
|
||||
imageAlt: "Designer clothing lineup",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Shop Our Collections", href: "/" },
|
||||
{ text: "Learn More", href: "/about" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselPosition="right"
|
||||
ariaLabel="About page hero section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof-brands" data-section="social-proof-brands" className="mx-auto px-4 md:px-6">
|
||||
<SocialProofOne
|
||||
title="Our Brand Partners"
|
||||
description="We partner with over 50+ premium fashion brands to bring you the most exclusive and authentic collections."
|
||||
tag="Brand Partners"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
title="About Garrag4rmzz"
|
||||
buttons={[{ text: "Shop Now", href: "/shop" }]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"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",
|
||||
]}
|
||||
buttons={[{ text: "Explore All Brands", href: "/" }]}
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="About us section"
|
||||
speed={40}
|
||||
showCard={true}
|
||||
ariaLabel="Partner brands marquee"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="newsletter-contact" data-section="newsletter-contact" className="mx-auto px-4 md:px-6">
|
||||
<ContactCenter
|
||||
tag="Stay Connected"
|
||||
title="Join Our Community"
|
||||
description="Subscribe to our newsletter for exclusive drops, early access to new collections, and special offers."
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "animated-grid" }}
|
||||
useInvertedBackground={true}
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Subscribe"
|
||||
termsText="By subscribing, you agree to receive marketing emails. Unsubscribe at any time."
|
||||
ariaLabel="Newsletter signup section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -100,4 +190,4 @@ export default function AboutPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -2,151 +2,111 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import TextBox from "@/components/Textbox";
|
||||
import { BarChart3, TrendingUp, Package, DollarSign, Percent, AlertCircle } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Star,
|
||||
CreditCard,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
Download,
|
||||
Filter,
|
||||
Search,
|
||||
Plus,
|
||||
Trash2,
|
||||
Edit2,
|
||||
Eye,
|
||||
EyeOff,
|
||||
} from "lucide-react";
|
||||
|
||||
interface Order {
|
||||
id: string;
|
||||
orderNumber: string;
|
||||
customer: string;
|
||||
date: string;
|
||||
total: number;
|
||||
status: "pending" | "shipped" | "delivered" | "cancelled";
|
||||
items: number;
|
||||
}
|
||||
|
||||
interface Discount {
|
||||
id: string;
|
||||
code: string;
|
||||
description: string;
|
||||
discountPercentage: number;
|
||||
expiryDate: string;
|
||||
active: boolean;
|
||||
usageCount: number;
|
||||
}
|
||||
|
||||
export default function AdminDashboard() {
|
||||
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" },
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
{ name: "Orders", id: "orders" },
|
||||
{ name: "Revenue", id: "revenue" },
|
||||
{ name: "Discounts", id: "discounts" },
|
||||
{ name: "Products", id: "products" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
const [orders, setOrders] = useState<Order[]>([
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "Best Sellers", href: "/shop" },
|
||||
{ label: "Brands", href: "/shop" },
|
||||
],
|
||||
id: "1", orderNumber: "ORD-001", customer: "John Doe", date: "2025-01-15", total: 249.99,
|
||||
status: "delivered", items: 3,
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
id: "2", orderNumber: "ORD-002", customer: "Jane Smith", date: "2025-01-14", total: 179.50,
|
||||
status: "shipped", items: 2,
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
id: "3", orderNumber: "ORD-003", customer: "Mike Johnson", date: "2025-01-13", total: 89.99,
|
||||
status: "pending", items: 1,
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// Review Management State
|
||||
const [reviews, setReviews] = useState([
|
||||
{
|
||||
id: "rev-001", product: "Air Max 90 Classic", author: "Sarah Chen", rating: 5,
|
||||
text: "Absolutely fantastic! Authentic and arrived quickly.", status: "approved", date: "2025-01-15", verified: true,
|
||||
id: "4", orderNumber: "ORD-004", customer: "Sarah Williams", date: "2025-01-12", total: 599.99,
|
||||
status: "delivered", items: 5,
|
||||
},
|
||||
{
|
||||
id: "rev-002", product: "Box Logo Hoodie", author: "Michael Torres", rating: 4,
|
||||
text: "Great quality but sizing ran small. Overall satisfied.", status: "pending", date: "2025-01-14", verified: true,
|
||||
},
|
||||
{
|
||||
id: "rev-003", product: "Detroit Jacket", author: "Emma Wilson", rating: 3,
|
||||
text: "Good but not as described in the listing.", status: "pending", date: "2025-01-13", verified: false,
|
||||
id: "5", orderNumber: "ORD-005", customer: "Alex Brown", date: "2025-01-11", total: 129.99,
|
||||
status: "cancelled", items: 1,
|
||||
},
|
||||
]);
|
||||
|
||||
// Checkout/Payment State
|
||||
const [orders, setOrders] = useState([
|
||||
const [discounts, setDiscounts] = useState<Discount[]>([
|
||||
{
|
||||
id: "ord-001", customer: "Alex Johnson", amount: "$129.99", status: "completed", method: "stripe", date: "2025-01-15", items: 2,
|
||||
id: "1", code: "WELCOME10", description: "10% off first purchase", discountPercentage: 10,
|
||||
expiryDate: "2025-12-31", active: true,
|
||||
usageCount: 245,
|
||||
},
|
||||
{
|
||||
id: "ord-002", customer: "Patricia Lee", amount: "$345.00", status: "processing", method: "paypal", date: "2025-01-14", items: 1,
|
||||
id: "2", code: "SUMMER20", description: "20% off summer collection", discountPercentage: 20,
|
||||
expiryDate: "2025-08-31", active: true,
|
||||
usageCount: 128,
|
||||
},
|
||||
{
|
||||
id: "ord-003", customer: "James Mitchell", amount: "$567.50", status: "pending", method: "apple-pay", date: "2025-01-14", items: 3,
|
||||
id: "3", code: "FLASH15", description: "15% flash sale", discountPercentage: 15,
|
||||
expiryDate: "2025-01-20", active: true,
|
||||
usageCount: 567,
|
||||
},
|
||||
{
|
||||
id: "ord-004", customer: "Lisa Rodriguez", amount: "$234.75", status: "completed", method: "google-pay", date: "2025-01-13", items: 1,
|
||||
id: "4", code: "OLDCODE5", description: "Expired promotional code", discountPercentage: 5,
|
||||
expiryDate: "2024-12-31", active: false,
|
||||
usageCount: 89,
|
||||
},
|
||||
]);
|
||||
|
||||
const [activeTab, setActiveTab] = useState<"reviews" | "checkout">("reviews");
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
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;
|
||||
|
||||
// Review Management Functions
|
||||
const approveReview = (id: string) => {
|
||||
setReviews(
|
||||
reviews.map((r) =>
|
||||
r.id === id ? { ...r, status: "approved" } : r
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const rejectReview = (id: string) => {
|
||||
setReviews(reviews.filter((r) => r.id !== id));
|
||||
};
|
||||
|
||||
const deleteReview = (id: string) => {
|
||||
setReviews(reviews.filter((r) => r.id !== id));
|
||||
};
|
||||
|
||||
const filteredReviews = reviews.filter(
|
||||
(review) =>
|
||||
review.product.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
review.author.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
const filteredOrders = orders.filter(
|
||||
(order) =>
|
||||
order.customer.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
order.id.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
const getStatusColor = (status: Order["status"]): string => {
|
||||
switch (status) {
|
||||
case "approved":
|
||||
case "completed":
|
||||
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 "processing":
|
||||
return "bg-blue-100 text-blue-800";
|
||||
case "cancelled":
|
||||
return "bg-red-100 text-red-800";
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800";
|
||||
}
|
||||
};
|
||||
|
||||
const getPaymentMethodIcon = (method: string) => {
|
||||
const icons: { [key: string]: string } = {
|
||||
stripe: "💳", paypal: "🅿️", "apple-pay": "🍎", "google-pay": "🔵", "credit-debit": "💰", bnpl: "📅"};
|
||||
return icons[method] || "💳";
|
||||
const handleToggleDiscount = (id: string) => {
|
||||
setDiscounts(
|
||||
discounts.map((d) => (d.id === id ? { ...d, active: !d.active } : d))
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -165,391 +125,238 @@ export default function AdminDashboard() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="garraagarmzz Admin"
|
||||
brandName="Admin Dashboard"
|
||||
button={{
|
||||
text: "Back to Shop", href: "/"}}
|
||||
text: "Logout", href: "/"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
buttonClassName="bg-blue-500 hover:bg-blue-600"
|
||||
buttonClassName="bg-red-500 hover:bg-red-600"
|
||||
buttonTextClassName="text-white font-semibold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-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 */}
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-2">
|
||||
Admin Dashboard
|
||||
</h1>
|
||||
<p className="text-gray-600">
|
||||
Manage reviews and checkout processes
|
||||
</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>
|
||||
|
||||
{/* Tab Navigation */}
|
||||
<div className="flex gap-4 mb-8 border-b border-gray-200">
|
||||
<button
|
||||
onClick={() => setActiveTab("reviews")}
|
||||
className={`px-6 py-3 font-semibold transition-all ${
|
||||
activeTab === "reviews"
|
||||
? "text-blue-600 border-b-2 border-blue-600"
|
||||
: "text-gray-600 hover:text-gray-900"
|
||||
}`}
|
||||
>
|
||||
Review Management
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("checkout")}
|
||||
className={`px-6 py-3 font-semibold transition-all ${
|
||||
activeTab === "checkout"
|
||||
? "text-blue-600 border-b-2 border-blue-600"
|
||||
: "text-gray-600 hover:text-gray-900"
|
||||
}`}
|
||||
>
|
||||
Checkout & Payments
|
||||
</button>
|
||||
</div>
|
||||
{/* 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-sm text-gray-600 font-medium">Total Orders</p>
|
||||
<p className="text-3xl font-bold text-gray-900 mt-2">
|
||||
{totalOrders}
|
||||
</p>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="mb-8">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-3 text-gray-400" size={20} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={activeTab === "reviews" ? "Search by product or author..." : "Search by customer or order ID..."}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<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-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>
|
||||
<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 border-l-4 border-purple-500">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* Review Management Tab */}
|
||||
{activeTab === "reviews" && (
|
||||
<div className="space-y-6">
|
||||
{/* Review Statistics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-600 text-sm">Total Reviews</p>
|
||||
<p className="text-3xl font-bold text-gray-900">
|
||||
{reviews.length}
|
||||
</p>
|
||||
</div>
|
||||
<Star className="text-yellow-500" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-600 text-sm">Approved</p>
|
||||
<p className="text-3xl font-bold text-green-600">
|
||||
{reviews.filter((r) => r.status === "approved").length}
|
||||
</p>
|
||||
</div>
|
||||
<CheckCircle className="text-green-500" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-600 text-sm">Pending</p>
|
||||
<p className="text-3xl font-bold text-yellow-600">
|
||||
{reviews.filter((r) => r.status === "pending").length}
|
||||
</p>
|
||||
</div>
|
||||
<AlertCircle className="text-yellow-500" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-600 text-sm">Avg Rating</p>
|
||||
<p className="text-3xl font-bold text-blue-600">
|
||||
{(
|
||||
reviews.reduce((sum, r) => sum + r.rating, 0) /
|
||||
reviews.length
|
||||
).toFixed(1)}
|
||||
</p>
|
||||
</div>
|
||||
<Star className="text-blue-500" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reviews Table */}
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">
|
||||
Product
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">
|
||||
Author
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">
|
||||
Rating
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">
|
||||
Date
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-sm font-semibold text-gray-900">
|
||||
Actions
|
||||
</th>
|
||||
{/* 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>
|
||||
</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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{filteredReviews.map((review) => (
|
||||
<tr key={review.id} className="hover:bg-gray-50 transition">
|
||||
<td className="px-6 py-4 text-sm text-gray-900">
|
||||
{review.product}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600">
|
||||
{review.author}
|
||||
{review.verified && (
|
||||
<span className="ml-2 text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
|
||||
Verified
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(review.rating)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
size={16}
|
||||
className="fill-yellow-400 text-yellow-400"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span
|
||||
className={`inline-flex px-3 py-1 rounded-full text-xs font-semibold ${
|
||||
getStatusColor(review.status)
|
||||
}`}
|
||||
>
|
||||
{review.status.charAt(0).toUpperCase() +
|
||||
review.status.slice(1)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600">
|
||||
{new Date(review.date).toLocaleDateString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
{review.status === "pending" && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => approveReview(review.id)}
|
||||
className="p-2 hover:bg-green-100 text-green-600 rounded transition"
|
||||
title="Approve"
|
||||
>
|
||||
<CheckCircle size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => rejectReview(review.id)}
|
||||
className="p-2 hover:bg-red-100 text-red-600 rounded transition"
|
||||
title="Reject"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{review.status === "approved" && (
|
||||
<button
|
||||
onClick={() => deleteReview(review.id)}
|
||||
className="p-2 hover:bg-red-100 text-red-600 rounded transition"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Checkout & Payments Tab */}
|
||||
{activeTab === "checkout" && (
|
||||
<div className="space-y-6">
|
||||
{/* Payment Statistics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-600 text-sm">Total Orders</p>
|
||||
<p className="text-3xl font-bold text-gray-900">
|
||||
{orders.length}
|
||||
</p>
|
||||
{/* 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>
|
||||
<CreditCard className="text-blue-500" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-600 text-sm">Completed</p>
|
||||
<p className="text-3xl font-bold text-green-600">
|
||||
{orders.filter((o) => o.status === "completed").length}
|
||||
</p>
|
||||
</div>
|
||||
<CheckCircle className="text-green-500" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-600 text-sm">Processing</p>
|
||||
<p className="text-3xl font-bold text-blue-600">
|
||||
{orders.filter((o) => o.status === "processing").length}
|
||||
</p>
|
||||
</div>
|
||||
<AlertCircle className="text-blue-500" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-600 text-sm">Total Revenue</p>
|
||||
<p className="text-3xl font-bold text-green-600">
|
||||
$
|
||||
{orders
|
||||
.reduce(
|
||||
(sum, o) =>
|
||||
sum + parseFloat(o.amount.replace(/[^0-9.-]+/g, "")),
|
||||
0
|
||||
)
|
||||
.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<Download className="text-green-500" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Methods Overview */}
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
Supported Payment Methods
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
{[
|
||||
{ name: "Stripe", icon: "💳" },
|
||||
{ name: "PayPal", icon: "🅿️" },
|
||||
{ name: "Apple Pay", icon: "🍎" },
|
||||
{ name: "Google Pay", icon: "🔵" },
|
||||
{ name: "Credit/Debit", icon: "💰" },
|
||||
{ name: "Buy Now Pay Later", icon: "📅" },
|
||||
].map((method) => (
|
||||
<div
|
||||
key={method.name}
|
||||
className="flex flex-col items-center p-4 bg-gray-50 rounded-lg border border-gray-200"
|
||||
<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"
|
||||
}`}
|
||||
>
|
||||
<div className="text-3xl mb-2">{method.icon}</div>
|
||||
<p className="text-sm font-semibold text-gray-900 text-center">
|
||||
{method.name}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Orders Table */}
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">
|
||||
Order ID
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">
|
||||
Customer
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">
|
||||
Amount
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">
|
||||
Payment Method
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">
|
||||
Items
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">
|
||||
Date
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{filteredOrders.map((order) => (
|
||||
<tr key={order.id} className="hover:bg-gray-50 transition">
|
||||
<td className="px-6 py-4 text-sm font-semibold text-gray-900">
|
||||
{order.id}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600">
|
||||
{order.customer}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm font-semibold text-gray-900">
|
||||
{order.amount}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="text-xl">
|
||||
{getPaymentMethodIcon(order.method)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span
|
||||
className={`inline-flex px-3 py-1 rounded-full text-xs font-semibold ${
|
||||
getStatusColor(order.status)
|
||||
}`}
|
||||
>
|
||||
{order.status.charAt(0).toUpperCase() +
|
||||
order.status.slice(1)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600">
|
||||
{order.items}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600">
|
||||
{new Date(order.date).toLocaleDateString()}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{discount.active ? "Deactivate" : "Activate"}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="garraagarmzz"
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved. Admin Dashboard."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,48 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Mail, HelpCircle } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "FAQ", id: "/faq" },
|
||||
{ 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: [
|
||||
title: "Shop",
|
||||
items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "Best Sellers", href: "/shop" },
|
||||
{ label: "Brands", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/new-arrivals" },
|
||||
{ label: "Best Sellers", href: "/best-sellers" },
|
||||
{ label: "Brands", href: "/brands" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
title: "Support",
|
||||
items: [
|
||||
{ label: "Shipping & Returns", href: "/faq" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms & Conditions", href: "/terms" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
@@ -67,7 +75,9 @@ export default function ContactPage() {
|
||||
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"
|
||||
@@ -76,34 +86,70 @@ export default function ContactPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-section" data-section="contact-section">
|
||||
<ContactSplitForm
|
||||
title="Get In Touch"
|
||||
description="We'd love to hear from you. Send us a message and we'll respond as soon as possible."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Your Message", rows: 5,
|
||||
required: true,
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
<div id="contact-section" data-section="contact-section" className="py-20">
|
||||
<ContactCenter
|
||||
tag="Get In Touch"
|
||||
title="Contact garraagarmzz"
|
||||
description="Have questions about our products, shipping, or need assistance? We're here to help. Reach out to our support team and we'll get back to you as soon as possible."
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "animated-grid" }}
|
||||
useInvertedBackground={true}
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Send Message"
|
||||
termsText="By contacting us, you agree to our privacy policy and terms of service."
|
||||
ariaLabel="Contact form section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-faq" data-section="contact-faq" className="py-16 px-4 md:px-6">
|
||||
<div className="mx-auto px-4 md:px-6 max-w-4xl">
|
||||
<div className="mb-12 text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">Quick Answers</h2>
|
||||
<p className="text-lg text-neutral-400">
|
||||
Find quick answers to common questions about ordering and shipping.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<details className="border border-neutral-700 rounded-lg p-4 hover:border-neutral-600 transition-colors cursor-pointer group">
|
||||
<summary className="flex items-center justify-between font-semibold text-lg">
|
||||
<span>What are your business hours?</span>
|
||||
<HelpCircle className="w-5 h-5 group-open:rotate-180 transition-transform" />
|
||||
</summary>
|
||||
<p className="mt-4 text-neutral-400">
|
||||
We operate Monday through Friday, 9 AM to 6 PM EST. Our support team responds to inquiries within 24 hours during business days.
|
||||
</p>
|
||||
</details>
|
||||
<details className="border border-neutral-700 rounded-lg p-4 hover:border-neutral-600 transition-colors cursor-pointer group">
|
||||
<summary className="flex items-center justify-between font-semibold text-lg">
|
||||
<span>How can I track my order?</span>
|
||||
<HelpCircle className="w-5 h-5 group-open:rotate-180 transition-transform" />
|
||||
</summary>
|
||||
<p className="mt-4 text-neutral-400">
|
||||
Once your order ships, you'll receive a tracking number via email. You can also track your order in your account dashboard at any time.
|
||||
</p>
|
||||
</details>
|
||||
<details className="border border-neutral-700 rounded-lg p-4 hover:border-neutral-600 transition-colors cursor-pointer group">
|
||||
<summary className="flex items-center justify-between font-semibold text-lg">
|
||||
<span>Do you offer customer support by phone?</span>
|
||||
<HelpCircle className="w-5 h-5 group-open:rotate-180 transition-transform" />
|
||||
</summary>
|
||||
<p className="mt-4 text-neutral-400">
|
||||
Currently, we provide support via email and our contact form. For urgent matters, please email us directly and mark your inquiry as urgent.
|
||||
</p>
|
||||
</details>
|
||||
</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}
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,55 +1,95 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { HelpCircle } from "lucide-react";
|
||||
|
||||
export default function FAQPage() {
|
||||
export default function FaqPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "FAQ", id: "/faq" },
|
||||
{ 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: [
|
||||
title: "Shop",
|
||||
items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "Best Sellers", href: "/shop" },
|
||||
{ label: "Brands", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/new-arrivals" },
|
||||
{ label: "Best Sellers", href: "/best-sellers" },
|
||||
{ label: "Brands", href: "/brands" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
title: "Support",
|
||||
items: [
|
||||
{ label: "Shipping & Returns", href: "/faq" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms & Conditions", href: "/terms" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const 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-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-004",
|
||||
title: "Do you ship internationally?",
|
||||
content: "Yes, we ship to most countries worldwide. International shipping rates and delivery times vary by location. Customs duties may apply depending on your country.",
|
||||
},
|
||||
{
|
||||
id: "faq-005",
|
||||
title: "What payment methods do you accept?",
|
||||
content: "We accept all major credit cards, PayPal, Apple Pay, Google Pay, and Klarna. All payments are secured with SSL encryption.",
|
||||
},
|
||||
{
|
||||
id: "faq-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.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
@@ -68,7 +108,9 @@ export default function FAQPage() {
|
||||
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"
|
||||
@@ -77,44 +119,81 @@ export default function FAQPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq-section" data-section="faq-section">
|
||||
<div id="faq-hero" data-section="faq-hero" className="py-16 md:py-24 px-4 md:px-6">
|
||||
<div className="mx-auto px-4 md:px-6 max-w-3xl text-center">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-neutral-900/50 border border-neutral-800 mb-6">
|
||||
<HelpCircle className="w-4 h-4 text-blue-400" />
|
||||
<span className="text-sm font-medium text-neutral-400">Help Center</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">Frequently Asked Questions</h1>
|
||||
<p className="text-xl text-neutral-400">
|
||||
Find answers to common questions about our products, shipping, returns, and more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="faq-section" data-section="faq-section" className="py-12">
|
||||
<FaqDouble
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our products, shipping, and returns."
|
||||
faqs={faqs}
|
||||
title="Shipping & Returns"
|
||||
description="Learn about our shipping policies, return process, and delivery options."
|
||||
tag="Support"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
buttons={[
|
||||
{
|
||||
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-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-005", title: "What payment methods do you accept?", content: "We accept all major credit cards, PayPal, Apple Pay, Google Pay, and Klarna. All payments are secured with SSL encryption."},
|
||||
{
|
||||
id: "faq-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."},
|
||||
text: "Contact Support",
|
||||
href: "/contact",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Contact Support", href: "/contact" }]}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="FAQ section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq-additional" data-section="faq-additional" className="py-16 px-4 md:px-6 bg-neutral-900/30">
|
||||
<div className="mx-auto px-4 md:px-6 max-w-3xl">
|
||||
<h2 className="text-3xl font-bold mb-8 text-center">Still have questions?</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="border border-neutral-700 rounded-lg p-6 hover:border-neutral-600 transition-colors">
|
||||
<h3 className="text-lg font-semibold mb-3">Authenticity Guarantee</h3>
|
||||
<p className="text-neutral-400">
|
||||
Every product on garraagarmzz is authenticated by our expert team and sourced directly from authorized retailers. We stand behind every purchase.
|
||||
</p>
|
||||
</div>
|
||||
<div className="border border-neutral-700 rounded-lg p-6 hover:border-neutral-600 transition-colors">
|
||||
<h3 className="text-lg font-semibold mb-3">Secure Shopping</h3>
|
||||
<p className="text-neutral-400">
|
||||
Your transactions are protected with industry-standard SSL encryption. We never store your full credit card details on our servers.
|
||||
</p>
|
||||
</div>
|
||||
<div className="border border-neutral-700 rounded-lg p-6 hover:border-neutral-600 transition-colors">
|
||||
<h3 className="text-lg font-semibold mb-3">Fast Processing</h3>
|
||||
<p className="text-neutral-400">
|
||||
Orders are processed within 24 hours and shipped with tracking. Standard shipping to the US takes 5-7 business days.
|
||||
</p>
|
||||
</div>
|
||||
<div className="border border-neutral-700 rounded-lg p-6 hover:border-neutral-600 transition-colors">
|
||||
<h3 className="text-lg font-semibold mb-3">Customer Support</h3>
|
||||
<p className="text-neutral-400">
|
||||
Our support team is available via email. We respond to all inquiries within 24 business hours. Your satisfaction is our priority.
|
||||
</p>
|
||||
</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}
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
462
src/app/page.tsx
462
src/app/page.tsx
@@ -10,79 +10,22 @@ 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 MetricCardTen from "@/components/sections/metrics/MetricCardTen";
|
||||
import { Sparkles, Zap, Award, Star, HelpCircle, Mail, TrendingUp, Zap as Analytics } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Sparkles, Zap, Award, Star, HelpCircle, Mail, Heart } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function HomePage() {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [mobileOptimized, setMobileOptimized] = useState(false);
|
||||
const [wishlist, setWishlist] = useState<Set<string>>(new Set());
|
||||
|
||||
useEffect(() => {
|
||||
// Track page load and performance metrics
|
||||
const perfObserver = new PerformanceObserver((list) => {
|
||||
list.getEntries().forEach((entry) => {
|
||||
if (window.gtag) {
|
||||
window.gtag('event', 'page_view', {
|
||||
'page_path': window.location.pathname,
|
||||
'page_title': document.title,
|
||||
'load_time': Math.round(entry.duration),
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if ('PerformanceObserver' in window) {
|
||||
try {
|
||||
perfObserver.observe({ entryTypes: ['navigation', 'resource'] });
|
||||
} catch (e) {
|
||||
console.log('PerformanceObserver not fully supported');
|
||||
const toggleWishlist = (productId: string) => {
|
||||
setWishlist((prev) => {
|
||||
const updated = new Set(prev);
|
||||
if (updated.has(productId)) {
|
||||
updated.delete(productId);
|
||||
} else {
|
||||
updated.add(productId);
|
||||
}
|
||||
}
|
||||
|
||||
// Optimize mobile responsiveness
|
||||
const handleResize = () => {
|
||||
setMobileOptimized(window.innerWidth <= 768);
|
||||
};
|
||||
|
||||
handleResize();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// Lazy load images for faster initial load
|
||||
const images = document.querySelectorAll('img');
|
||||
if ('IntersectionObserver' in window) {
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target as HTMLImageElement;
|
||||
if (img.dataset.src) {
|
||||
img.src = img.dataset.src;
|
||||
}
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
});
|
||||
images.forEach((img) => imageObserver.observe(img));
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
perfObserver.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Track newsletter subscriptions
|
||||
const handleNewsletterSubmit = (email: string) => {
|
||||
// Send to analytics
|
||||
if (window.gtag) {
|
||||
window.gtag('event', 'newsletter_signup', {
|
||||
'email_domain': email.split('@')[1],
|
||||
});
|
||||
}
|
||||
// Track in custom analytics
|
||||
console.log('Newsletter signup:', email);
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
@@ -93,7 +36,6 @@ export default function HomePage() {
|
||||
{ name: "Best Sellers", id: "best-sellers" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Analytics", id: "analytics" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
@@ -131,15 +73,78 @@ export default function HomePage() {
|
||||
},
|
||||
];
|
||||
|
||||
const analyticsMetrics = [
|
||||
const featuredProducts = [
|
||||
{
|
||||
id: "metric-001", title: "Total Sales", subtitle: "Last 30 days", category: "Revenue", value: "$245,680"},
|
||||
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: "metric-002", title: "Conversion Rate", subtitle: "All traffic", category: "Performance", value: "3.24%"},
|
||||
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: "metric-003", title: "Avg Order Value", subtitle: "Last 30 days", category: "Revenue", value: "$184.50"},
|
||||
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: "metric-004", title: "Customer Satisfaction", subtitle: "Net Promoter Score", category: "Satisfaction", value: "72"},
|
||||
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 (
|
||||
@@ -155,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>
|
||||
@@ -179,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" },
|
||||
@@ -208,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>
|
||||
|
||||
@@ -222,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>
|
||||
|
||||
@@ -265,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>
|
||||
|
||||
@@ -287,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>
|
||||
|
||||
@@ -319,46 +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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="analytics" data-section="analytics">
|
||||
<MetricCardTen
|
||||
title="Analytics Dashboard"
|
||||
description="Track your store performance and customer metrics in real-time."
|
||||
tag="Performance Metrics"
|
||||
tagIcon={TrendingUp}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="centered"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
metrics={analyticsMetrics}
|
||||
buttons={[{ text: "View Full Analytics", href: "#" }]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselMode="buttons"
|
||||
ariaLabel="Analytics and performance metrics dashboard"
|
||||
cardClassName="transition-all duration-300 hover:shadow-xl hover:-translate-y-2"
|
||||
imageClassName="transition-transform duration-500 hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -369,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" }}
|
||||
@@ -391,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>
|
||||
|
||||
@@ -406,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."},
|
||||
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>
|
||||
|
||||
@@ -430,6 +550,8 @@ 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>
|
||||
|
||||
@@ -1,211 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import LegalSection from "@/components/legal/LegalSection";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
|
||||
export default function PrivacyPolicyPage() {
|
||||
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" },
|
||||
{ name: "Shipping & Returns", id: "/shipping-returns" },
|
||||
{ name: "Privacy Policy", id: "/privacy-policy" },
|
||||
{ name: "Terms & Conditions", id: "/terms-conditions" },
|
||||
];
|
||||
|
||||
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: "/shipping-returns" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy-policy" },
|
||||
{ label: "Terms & Conditions", href: "/terms-conditions" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const privacySections = [
|
||||
{
|
||||
heading: "Introduction", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "At garraagarmzz (\"we\" or \"us\" or \"our\"), we are committed to protecting your privacy. This Privacy Policy explains how we collect, use, disclose, and otherwise handle your information when you visit our website and purchase our products."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Information We Collect", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "We collect information in the following ways:"},
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"Personal Information: Name, email address, phone number, shipping address, billing address, payment information", "Account Information: Username, password, preferences, order history", "Device Information: Browser type, IP address, device identifiers, operating system", "Usage Information: Pages visited, time spent on site, links clicked, searches performed", "Cookies and Tracking: We use cookies and similar tracking technologies to enhance your experience"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "How We Use Your Information", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "We use your information for the following purposes:"},
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"Processing and fulfilling your orders", "Providing customer service and support", "Sending transactional emails (order confirmations, shipping updates)", "Marketing and promotional communications (with your consent)", "Improving our website and services", "Personalizing your shopping experience", "Preventing fraud and ensuring security", "Complying with legal obligations"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Information Sharing", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "We do not sell, rent, or trade your personal information to third parties. However, we may share your information with:"},
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"Service Providers: Payment processors, shipping companies, email services", "Business Partners: Strategic partners who assist in providing services", "Legal Authorities: When required by law or to protect our rights", "Acquisition or Merger: If our company is acquired, your information may be transferred as part of that transaction"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Data Security", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "We implement industry-standard security measures to protect your information, including SSL encryption for payment processing. However, no method of transmission over the Internet is 100% secure. While we strive to protect your personal information, we cannot guarantee its absolute security."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Cookies and Tracking Technologies", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "We use cookies and similar tracking technologies to:"},
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"Remember your preferences and login information", "Understand how you use our site", "Deliver personalized content and advertisements", "Analyze site performance and user behavior"],
|
||||
},
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "You can control cookies through your browser settings. Most browsers allow you to refuse cookies or alert you when cookies are being sent."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Your Rights", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "Depending on your location, you may have the following rights:"},
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"Access: You can request access to your personal information", "Correction: You can request correction of inaccurate information", "Deletion: You can request deletion of your information (subject to legal obligations)", "Opt-Out: You can opt-out of marketing communications at any time", "Data Portability: You can request a copy of your data in a portable format"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Third-Party Links", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "Our website may contain links to third-party websites. We are not responsible for the privacy practices of these external sites. Please review their privacy policies before providing any personal information."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Children's Privacy", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "Our website is not intended for children under the age of 13. We do not knowingly collect personal information from children under 13. If we become aware that a child has provided us with information, we will delete such information immediately."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Changes to This Privacy Policy", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "We reserve the right to update this Privacy Policy at any time. Changes will be effective immediately upon posting to the website. Your continued use of our site constitutes acceptance of the updated Privacy Policy."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Contact Us", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "If you have questions about this Privacy Policy or our privacy practices, please contact us at support@garraagarmzz.com."},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
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: "Shop Now", 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 id="privacy-policy" data-section="privacy-policy">
|
||||
<LegalSection
|
||||
layout="page"
|
||||
title="Privacy Policy"
|
||||
subtitle="Your privacy is important to us"
|
||||
sections={privacySections as any}
|
||||
/>
|
||||
</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,325 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Sparkles, Heart, ShoppingCart, Minus, Plus, Star } from "lucide-react";
|
||||
|
||||
interface ProductDetailPageProps {
|
||||
params: {
|
||||
id: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default function ProductDetailPage({ params }: ProductDetailPageProps) {
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [selectedSize, setSelectedSize] = useState("");
|
||||
const [isFavorited, setIsFavorited] = 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: "/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: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// Placeholder product data - admin can update via CMS
|
||||
const product = {
|
||||
id: params.id,
|
||||
brand: "Premium Brand", name: "Product Name", price: "$129.99", rating: 4.8,
|
||||
reviewCount: 342,
|
||||
description:
|
||||
"Add detailed product description here. Include material composition, care instructions, and key features.", images: [
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au4xEqHY25puXwRvhmCQoNVTvJ/uploaded-1773430165306-v6fvqpuq.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au4xEqHY25puXwRvhmCQoNVTvJ/uploaded-1773430165306-v6fvqpuq.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au4xEqHY25puXwRvhmCQoNVTvJ/uploaded-1773430165306-v6fvqpuq.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au4xEqHY25puXwRvhmCQoNVTvJ/uploaded-1773430165306-v6fvqpuq.png"],
|
||||
sizes: ["XS", "S", "M", "L", "XL", "XXL"],
|
||||
stock: {
|
||||
XS: 5,
|
||||
S: 12,
|
||||
M: 8,
|
||||
L: 15,
|
||||
XL: 10,
|
||||
XXL: 3,
|
||||
},
|
||||
features: [
|
||||
"Premium material", "Authentic brand", "Free shipping on orders over $50", "30-day return policy"],
|
||||
};
|
||||
|
||||
const [mainImage, setMainImage] = useState(product.images[0]);
|
||||
|
||||
const handleQuantityChange = (value: number) => {
|
||||
if (value > 0) {
|
||||
setQuantity(value);
|
||||
}
|
||||
};
|
||||
|
||||
const availableStock = selectedSize ? product.stock[selectedSize as keyof typeof product.stock] : 0;
|
||||
const canAddToCart = selectedSize && quantity <= availableStock;
|
||||
|
||||
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: "Shop Now", 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-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900 pt-24 pb-12">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Breadcrumb */}
|
||||
<nav className="flex items-center space-x-2 text-sm mb-8">
|
||||
<Link href="/" className="text-blue-600 hover:text-blue-700 font-medium">
|
||||
Home
|
||||
</Link>
|
||||
<span className="text-slate-400">/</span>
|
||||
<Link href="/shop" className="text-blue-600 hover:text-blue-700 font-medium">
|
||||
Shop
|
||||
</Link>
|
||||
<span className="text-slate-400">/</span>
|
||||
<span className="text-slate-600 dark:text-slate-400">{product.name}</span>
|
||||
</nav>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
|
||||
{/* Image Gallery */}
|
||||
<div className="flex flex-col-reverse md:flex-col">
|
||||
<div className="flex gap-2 mt-4 md:mt-0 md:mb-4 overflow-x-auto pb-2 md:pb-0">
|
||||
{product.images.map((img, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setMainImage(img)}
|
||||
className={`flex-shrink-0 w-20 h-20 rounded-lg border-2 overflow-hidden transition-all ${
|
||||
mainImage === img
|
||||
? "border-blue-600 shadow-lg"
|
||||
: "border-slate-200 dark:border-slate-700 hover:border-slate-300"
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={img}
|
||||
alt={`Product thumbnail ${idx + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative bg-white dark:bg-slate-900 rounded-xl overflow-hidden shadow-lg aspect-square md:aspect-auto md:min-h-96">
|
||||
<img
|
||||
src={mainImage}
|
||||
alt={product.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-semibold">
|
||||
New
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Details */}
|
||||
<div className="flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-sm font-semibold text-blue-600 bg-blue-50 dark:bg-blue-950 dark:text-blue-400 px-3 py-1 rounded-full">
|
||||
{product.brand}
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white mb-4">
|
||||
{product.name}
|
||||
</h1>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
size={18}
|
||||
className={i < Math.floor(product.rating) ? "fill-yellow-400 text-yellow-400" : "text-slate-300"}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm text-slate-600 dark:text-slate-400">
|
||||
{product.rating} · {product.reviewCount} reviews
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-white">{product.price}</p>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-slate-600 dark:text-slate-400 mb-6 leading-relaxed">
|
||||
{product.description}
|
||||
</p>
|
||||
|
||||
{/* Size Selection */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-semibold text-slate-900 dark:text-white mb-3">
|
||||
Size <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grid grid-cols-3 sm:grid-cols-6 gap-2">
|
||||
{product.sizes.map((size) => (
|
||||
<button
|
||||
key={size}
|
||||
onClick={() => setSelectedSize(size)}
|
||||
disabled={product.stock[size as keyof typeof product.stock] === 0}
|
||||
className={`py-2 px-3 rounded-lg border-2 font-semibold transition-all ${
|
||||
selectedSize === size
|
||||
? "border-blue-600 bg-blue-600 text-white"
|
||||
: product.stock[size as keyof typeof product.stock] === 0
|
||||
? "border-slate-300 bg-slate-100 text-slate-400 cursor-not-allowed dark:border-slate-600 dark:bg-slate-800 dark:text-slate-600"
|
||||
: "border-slate-300 text-slate-900 hover:border-blue-400 dark:border-slate-600 dark:text-white dark:hover:border-blue-400"
|
||||
}`}
|
||||
>
|
||||
{size}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{selectedSize && (
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-2">
|
||||
Stock: {availableStock} available
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Quantity Selection */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-semibold text-slate-900 dark:text-white mb-3">
|
||||
Quantity
|
||||
</label>
|
||||
<div className="flex items-center gap-2 bg-slate-100 dark:bg-slate-800 rounded-lg w-fit">
|
||||
<button
|
||||
onClick={() => handleQuantityChange(quantity - 1)}
|
||||
disabled={quantity <= 1}
|
||||
className="p-2 text-slate-600 hover:text-slate-900 disabled:text-slate-300 dark:text-slate-400 dark:hover:text-slate-200 dark:disabled:text-slate-600"
|
||||
>
|
||||
<Minus size={18} />
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max={availableStock}
|
||||
value={quantity}
|
||||
onChange={(e) => handleQuantityChange(Math.max(1, parseInt(e.target.value) || 1))}
|
||||
className="w-12 text-center bg-transparent font-semibold text-slate-900 dark:text-white"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleQuantityChange(quantity + 1)}
|
||||
disabled={quantity >= availableStock}
|
||||
className="p-2 text-slate-600 hover:text-slate-900 disabled:text-slate-300 dark:text-slate-400 dark:hover:text-slate-200 dark:disabled:text-slate-600"
|
||||
>
|
||||
<Plus size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-3 mb-6">
|
||||
<button
|
||||
disabled={!canAddToCart}
|
||||
className={`flex-1 py-3 px-4 rounded-lg font-semibold flex items-center justify-center gap-2 transition-all ${
|
||||
canAddToCart
|
||||
? "bg-blue-600 text-white hover:bg-blue-700 active:scale-95"
|
||||
: "bg-slate-200 text-slate-500 cursor-not-allowed dark:bg-slate-800 dark:text-slate-600"
|
||||
}`}
|
||||
>
|
||||
<ShoppingCart size={20} />
|
||||
Add to Cart
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsFavorited(!isFavorited)}
|
||||
className={`py-3 px-4 rounded-lg border-2 font-semibold transition-all ${
|
||||
isFavorited
|
||||
? "border-red-500 bg-red-50 text-red-600 dark:bg-red-950 dark:border-red-500"
|
||||
: "border-slate-300 text-slate-600 hover:border-red-300 dark:border-slate-600 dark:text-slate-400"
|
||||
}`}
|
||||
>
|
||||
<Heart size={20} className={isFavorited ? "fill-current" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="space-y-2 pt-6 border-t border-slate-200 dark:border-slate-700">
|
||||
{product.features.map((feature, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
|
||||
<Sparkles size={16} className="text-blue-600" />
|
||||
<span>{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Additional Info */}
|
||||
<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-950 rounded-lg">
|
||||
<p className="text-sm text-blue-800 dark:text-blue-200">
|
||||
<strong>Secure checkout:</strong> 100% authentic guarantee with hassle-free returns.
|
||||
</p>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -1,187 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import LegalSection from "@/components/legal/LegalSection";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
|
||||
export default function ShippingReturnsPage() {
|
||||
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" },
|
||||
{ name: "Shipping & Returns", id: "/shipping-returns" },
|
||||
{ name: "Privacy Policy", id: "/privacy-policy" },
|
||||
{ name: "Terms & Conditions", id: "/terms-conditions" },
|
||||
];
|
||||
|
||||
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: "/shipping-returns" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy-policy" },
|
||||
{ label: "Terms & Conditions", href: "/terms-conditions" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const shippingReturnsSections = [
|
||||
{
|
||||
heading: "Shipping Policy", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "At garraagarmzz, we are committed to getting your orders to you as quickly and safely as possible. We offer multiple shipping options to meet your needs."},
|
||||
{
|
||||
type: "heading" as any,
|
||||
text: "Domestic Shipping (US)"},
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"Standard Shipping: 5-7 business days - Free on orders over $100", "Express Shipping: 2-3 business days - $15", "Overnight Shipping: Next business day - $35", "All orders are processed within 24 hours of purchase"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "International Shipping", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "We ship to most countries worldwide. International shipping rates and delivery times vary based on destination. Customers are responsible for any customs duties, taxes, or import fees."},
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"International Standard: 10-21 business days", "International Express: 5-10 business days", "Tracking information provided for all international shipments", "Package insurance available at checkout"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Return Policy", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "We stand behind the quality of our products. If you're not completely satisfied with your purchase, we offer a hassle-free 30-day return policy."},
|
||||
{
|
||||
type: "heading" as any,
|
||||
text: "Return Eligibility"},
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"Items must be returned within 30 days of purchase", "Products must be unworn, unwashed, and in original condition", "All original tags must be attached", "Original packaging and receipt must be included", "Final sale items are not eligible for return"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "How to Return an Item", content: [
|
||||
{
|
||||
type: "numbered-list" as const,
|
||||
items: [
|
||||
"Contact our customer service team at support@garraagarmzz.com with your order number", "Receive your return authorization number (RMA) and prepaid shipping label", "Pack your item securely in original packaging", "Attach the prepaid shipping label and drop off at any shipping location", "Track your return and receive a refund within 5-7 business days of delivery"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Return Shipping", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "We provide prepaid return shipping labels for all eligible returns within the continental US. International return shipping costs are the responsibility of the customer unless the return is due to our error or a defective product."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Refunds", content: [
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"Refunds are processed within 5-7 business days of receiving your return", "Full refund of purchase price (excluding original shipping)", "Refunds are issued to the original payment method", "Please allow 3-5 business days for refund to appear in your account"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Damaged or Defective Items", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "If you receive a damaged or defective item, please contact us immediately with photos of the damage. We will provide a replacement at no cost or process a full refund, including return shipping."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Order Tracking", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "Once your order ships, you'll receive a tracking number via email. You can track your package in real-time through your account dashboard or by clicking the tracking link in your confirmation email."},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
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: "Shop Now", 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 id="shipping-returns" data-section="shipping-returns">
|
||||
<LegalSection
|
||||
layout="page"
|
||||
title="Shipping & Returns Policy"
|
||||
subtitle="Learn about our shipping options and return process"
|
||||
sections={shippingReturnsSections as any}
|
||||
/>
|
||||
</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,11 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { Star, Mail } from "lucide-react";
|
||||
|
||||
export default function ShopPage() {
|
||||
const navItems = [
|
||||
@@ -20,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" },
|
||||
@@ -28,7 +30,8 @@ export default function ShopPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
@@ -36,7 +39,8 @@ export default function ShopPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
title: "Support",
|
||||
items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
@@ -44,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: "#" },
|
||||
@@ -53,124 +58,6 @@ export default function ShopPage() {
|
||||
},
|
||||
];
|
||||
|
||||
// Product data
|
||||
const allProducts = [
|
||||
{
|
||||
id: "prod-001", category: "Footwear", 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", category: "Apparel", 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", category: "Outerwear", 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", category: "Apparel", 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", category: "Footwear", 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", category: "Outerwear", 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", category: "Footwear", 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", category: "Accessories", 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", category: "Apparel", 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", category: "Footwear", 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", category: "Outerwear", 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", category: "Apparel", 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", category: "Footwear", 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,
|
||||
},
|
||||
];
|
||||
|
||||
// Filter state
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const [selectedCategory, setSelectedCategory] = useState("All");
|
||||
const [selectedSize, setSelectedSize] = useState("All");
|
||||
const [priceRange, setPriceRange] = useState("All");
|
||||
|
||||
// Extract unique categories and sizes
|
||||
const categories = ["All", "Footwear", "Apparel", "Outerwear", "Accessories"];
|
||||
const sizes = ["All", "XS", "S", "M", "L", "XL", "XXL", "6", "7", "8", "9", "10", "11", "12", "13"];
|
||||
const priceRanges = [
|
||||
{ label: "All", min: 0, max: Infinity },
|
||||
{ label: "$0 - $50", min: 0, max: 50 },
|
||||
{ label: "$50 - $100", min: 50, max: 100 },
|
||||
{ label: "$100 - $200", min: 100, max: 200 },
|
||||
{ label: "$200+", min: 200, max: Infinity },
|
||||
];
|
||||
|
||||
// Parse price helper
|
||||
const parsePrice = (priceStr: string): number => {
|
||||
return parseFloat(priceStr.replace(/[$]/g, ""));
|
||||
};
|
||||
|
||||
// Filter products
|
||||
const filteredProducts = useMemo(() => {
|
||||
return allProducts.filter((product) => {
|
||||
const matchesSearch =
|
||||
product.name.toLowerCase().includes(searchValue.toLowerCase()) ||
|
||||
product.category.toLowerCase().includes(searchValue.toLowerCase());
|
||||
|
||||
const matchesCategory =
|
||||
selectedCategory === "All" || product.category === selectedCategory;
|
||||
|
||||
const priceRangeObj = priceRanges.find((r) => r.label === priceRange) || { min: 0, max: Infinity };
|
||||
const productPrice = parsePrice(product.price);
|
||||
const matchesPrice =
|
||||
productPrice >= priceRangeObj.min && productPrice <= priceRangeObj.max;
|
||||
|
||||
// Size filter is a placeholder (would need size data in product)
|
||||
const matchesSize = selectedSize === "All";
|
||||
|
||||
return matchesSearch && matchesCategory && matchesPrice && matchesSize;
|
||||
});
|
||||
}, [searchValue, selectedCategory, selectedSize, priceRange]);
|
||||
|
||||
const filters = [
|
||||
{
|
||||
label: "Category", options: categories,
|
||||
selected: selectedCategory,
|
||||
onChange: setSelectedCategory,
|
||||
},
|
||||
{
|
||||
label: "Size", options: sizes,
|
||||
selected: selectedSize,
|
||||
onChange: setSelectedSize,
|
||||
},
|
||||
{
|
||||
label: "Price Range", options: priceRanges.map((r) => r.label),
|
||||
selected: priceRange,
|
||||
onChange: setPriceRange,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
@@ -189,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"
|
||||
@@ -198,22 +87,170 @@ export default function ShopPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shop-catalog" data-section="shop-catalog" className="min-h-screen pt-24 pb-16">
|
||||
<ProductCatalog
|
||||
layout="page"
|
||||
products={filteredProducts}
|
||||
searchValue={searchValue}
|
||||
onSearchChange={setSearchValue}
|
||||
searchPlaceholder="Search products..."
|
||||
filters={filters}
|
||||
emptyMessage="No products found. Try adjusting your filters."
|
||||
className="w-full"
|
||||
gridClassName="gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
||||
cardClassName="rounded-lg overflow-hidden"
|
||||
imageClassName="w-full h-64 object-cover"
|
||||
toolbarClassName="flex flex-col gap-4 mb-8"
|
||||
searchClassName="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600"
|
||||
filterClassName="flex flex-wrap gap-3"
|
||||
<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-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>
|
||||
|
||||
@@ -227,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);
|
||||
|
||||
@@ -1,237 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import LegalSection from "@/components/legal/LegalSection";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
|
||||
export default function TermsConditionsPage() {
|
||||
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" },
|
||||
{ name: "Shipping & Returns", id: "/shipping-returns" },
|
||||
{ name: "Privacy Policy", id: "/privacy-policy" },
|
||||
{ name: "Terms & Conditions", id: "/terms-conditions" },
|
||||
];
|
||||
|
||||
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: "/shipping-returns" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy-policy" },
|
||||
{ label: "Terms & Conditions", href: "/terms-conditions" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const termsSections = [
|
||||
{
|
||||
heading: "Agreement to Terms", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "By accessing and using the garraagarmzz website (the \"Site\"), you accept and agree to be bound by and comply with these Terms and Conditions. If you do not agree to abide by the above, please do not use this service."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Intellectual Property Rights", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "The Site and all of its contents, including but not limited to text, graphics, logos, images, audio clips, digital downloads, and data compilations, are the property of garraagarmzz or its content suppliers and are protected by international copyright laws."},
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"You may not reproduce, republish, transmit, or distribute any content without permission", "Unauthorized use may violate copyright, trademark, and other applicable laws", "All rights reserved for all content and materials on this Site"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Product Information and Availability", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "We strive to provide accurate product descriptions and pricing. However, we do not warrant that product descriptions, pricing, or other content on the Site is accurate, complete, or error-free."},
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"Products are subject to availability", "We reserve the right to limit quantities per order", "We reserve the right to refuse or cancel any order", "Prices are subject to change without notice", "We reserve the right to correct pricing errors"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "User Accounts", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "If you create an account on our Site, you are responsible for maintaining the confidentiality of your account information and password. You agree to accept responsibility for all activities that occur under your account."},
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"You must be at least 18 years old to create an account", "You agree to provide accurate and complete information", "You are responsible for keeping your password secure", "You agree to notify us immediately of any unauthorized access", "We reserve the right to suspend or terminate accounts"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Payment Terms", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "By placing an order, you authorize us to charge your payment method for the order amount plus applicable taxes and shipping fees."},
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"We accept all major credit cards, PayPal, and digital payment methods", "Payment must be received before order processing", "We may decline payment at our discretion", "All sales are final except as provided in our Return Policy"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Shipping and Delivery", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "We will make reasonable efforts to ship your order according to the selected shipping method. However, we do not guarantee delivery dates."},
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"Risk of loss passes to you upon delivery to the carrier", "You are responsible for tracking your shipment", "We are not responsible for packages lost after delivery to carrier", "See our Shipping & Returns Policy for complete details"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Limitation of Liability", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "To the fullest extent permitted by law, garraagarmzz shall not be liable for any indirect, incidental, special, consequential, or punitive damages resulting from your use of the Site or products."},
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "Our total liability shall not exceed the amount paid by you for any product or service."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Disclaimer of Warranties", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "The Site and all products are provided \"as is\" and \"as available.\" We disclaim all warranties, express or implied, including but not limited to implied warranties of merchantability and fitness for a particular purpose."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Prohibited Conduct", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "You agree not to engage in any of the following prohibited activities:"},
|
||||
{
|
||||
type: "list" as const,
|
||||
items: [
|
||||
"Violating any applicable law or regulation", "Infringing on intellectual property rights", "Harassing, threatening, or intimidating others", "Transmitting viruses or harmful code", "Engaging in fraudulent or deceptive practices", "Unauthorized access or use of our systems", "Reselling products without authorization"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Third-Party Links", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "Our Site may contain links to third-party websites. We are not responsible for the content, accuracy, or practices of these external sites. Your use of third-party websites is at your own risk and subject to their terms and conditions."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Termination", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "We may terminate or suspend your access to the Site at any time, without notice, for violation of these Terms and Conditions or for any other reason at our sole discretion."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Governing Law", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "These Terms and Conditions are governed by and construed in accordance with the laws of the jurisdiction where garraagarmzz is located, without regard to its conflict of law provisions."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Changes to Terms", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "We reserve the right to modify these Terms and Conditions at any time. Changes will be effective immediately upon posting. Your continued use of the Site constitutes acceptance of the modified terms."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Contact Information", content: [
|
||||
{
|
||||
type: "paragraph" as const,
|
||||
text: "If you have questions about these Terms and Conditions, please contact us at support@garraagarmzz.com."},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
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: "Shop Now", 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 id="terms-conditions" data-section="terms-conditions">
|
||||
<LegalSection
|
||||
layout="page"
|
||||
title="Terms & Conditions"
|
||||
subtitle="Please read these terms carefully before using our website"
|
||||
sections={termsSections as any}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user