Compare commits
46 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 3015685a10 | |||
| cea1c78d59 | |||
| 9895850f09 | |||
| 9c2b440ce6 | |||
| ae90ee5682 | |||
| 0cdbea6d9d | |||
| bd447f413b | |||
| 193257916f | |||
| 24e3cd19a9 | |||
| c1ddc3c59a | |||
| f4c3e6b939 | |||
| 1c750edc61 | |||
| 8e51fcacbc | |||
| bc5e564603 | |||
| fb205a06a0 | |||
| 12f68a7f80 | |||
| 593a213a6d | |||
| 1ee83646d5 | |||
| f3a198a76d | |||
| d65e580040 | |||
| d473ce04cc | |||
| 99406b1b68 | |||
| abdad4161f | |||
| 8d96e9662b | |||
| 1a943e9759 | |||
| d7d38bb9cb | |||
| f76e9f6bf9 | |||
| a0e793e684 | |||
| 49d734a974 | |||
| 197483813f | |||
| 175fe1a9ab | |||
| aa6a1c15b9 | |||
| bf774c9aa4 | |||
| 0e145a6571 | |||
| bce14ed4af | |||
| 1307e1badf | |||
| 1cab13dadf | |||
| 3f47c367e1 | |||
| b9fc7f7110 | |||
| 3686c55b08 | |||
| c2b4f55880 | |||
| 0c7327af1c | |||
| 5ec3ef0a6a | |||
| ee437ddd0b | |||
| 0f2d3a683b | |||
| 896ac3ffde |
@@ -2,21 +2,17 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import SplitAbout from "@/components/sections/about/SplitAbout";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import TextAbout from "@/components/sections/about/TextAbout";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Sparkles, Award, Mail, Heart, Zap } from "lucide-react";
|
||||
import { Award } from "lucide-react";
|
||||
|
||||
export default function AboutPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Home", id: "/" },
|
||||
{ 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: "FAQ", id: "/faq" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
@@ -25,7 +21,7 @@ export default function AboutPage() {
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "Best Sellers", href: "/shop" },
|
||||
{ label: "Brands", href: "/brands" },
|
||||
{ label: "Brands", href: "/shop" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -39,7 +35,7 @@ export default function AboutPage() {
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
@@ -81,68 +77,16 @@ export default function AboutPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about-hero" data-section="about-hero">
|
||||
<SplitAbout
|
||||
title="About garraagarmzz"
|
||||
description="We're passionate about connecting fashion enthusiasts with the most coveted brands and curated collections from around the world. Since our founding, we've been dedicated to authenticity, quality, and exceptional customer service."
|
||||
<div id="about-section" data-section="about-section">
|
||||
<TextAbout
|
||||
tag="Our Story"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="slide-up"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "100% Authentic", description: "Every item is verified for authenticity through our rigorous quality control process.", icon: Award,
|
||||
},
|
||||
{
|
||||
title: "Curated Selection", description: "Hand-picked products from over 50+ premium fashion brands worldwide.", icon: Sparkles,
|
||||
},
|
||||
{
|
||||
title: "Fast Shipping", description: "Standard 5-7 business days with express options available for urgent orders.", icon: Zap,
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au4xEqHY25puXwRvhmCQoNVTvJ/uploaded-1773430165306-v6fvqpuq.png"
|
||||
imageAlt="garraagarmzz about section image"
|
||||
mediaAnimation="slide-up"
|
||||
imagePosition="right"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "Shop Now", href: "/shop" }]}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="About garraagarmzz section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about-brands" data-section="about-brands">
|
||||
<SocialProofOne
|
||||
title="Trusted by Fashion Enthusiasts"
|
||||
description="Join thousands of customers who trust garraagarmzz for authentic, curated fashion."
|
||||
tag="Community"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
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"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
ariaLabel="Trusted brands section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about-contact" data-section="about-contact">
|
||||
<ContactCenter
|
||||
tag="Get in Touch"
|
||||
title="Have Questions?"
|
||||
description="We'd love to hear from you. Reach out with any questions about our products, shipping, or anything else."
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "animated-grid" }}
|
||||
title="About Garrag4rmzz"
|
||||
buttons={[{ text: "Shop Now", href: "/shop" }]}
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Contact Us"
|
||||
termsText="We'll get back to you within 24 hours."
|
||||
ariaLabel="Contact section on about page"
|
||||
ariaLabel="About us section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -156,4 +100,4 @@ export default function AboutPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,42 +2,45 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Award, Sparkles, Mail } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Sparkles, Star } from "lucide-react";
|
||||
|
||||
export default function BrandsPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "Brands", id: "/brands" },
|
||||
{ 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: "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" },
|
||||
title: "Shop",
|
||||
items: [
|
||||
{ label: "All Products", href: "/" },
|
||||
{ label: "New Arrivals", href: "/new-arrivals" },
|
||||
{ label: "Best Sellers", href: "/" },
|
||||
{ label: "Brands", href: "/brands" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
title: "Support",
|
||||
items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
@@ -45,9 +48,10 @@ export default function BrandsPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms & Conditions", href: "/" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
@@ -69,10 +73,12 @@ export default function BrandsPage() {
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="garraagarmzz"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Shop Now", href: "/shop"}}
|
||||
text: "Shop Now",
|
||||
href: "/",
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
@@ -81,88 +87,144 @@ export default function BrandsPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="brands-hero" data-section="brands-hero">
|
||||
<div id="shop-by-brand-featured" data-section="shop-by-brand-featured" className="mx-auto px-4 md:px-6 py-16">
|
||||
<SocialProofOne
|
||||
title="Explore Our Premium Brands"
|
||||
description="Discover exclusive collections from over 50+ premium fashion brands worldwide. From streetwear legends to luxury designers, find everything you love."
|
||||
title="Shop by Brand"
|
||||
description="Discover exclusive collections from over 50+ premium fashion brands worldwide."
|
||||
tag="Brand Partners"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
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"]}
|
||||
buttons={[{ text: "Shop All Brands", href: "/shop" }]}
|
||||
"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: "/brands",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
speed={40}
|
||||
showCard={true}
|
||||
ariaLabel="Featured brands section"
|
||||
ariaLabel="Partner brands marquee"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="brands-featured" data-section="brands-featured">
|
||||
<div id="brand-products-showcase" data-section="brand-products-showcase" className="mx-auto px-4 md:px-6 py-16">
|
||||
<ProductCardTwo
|
||||
title="Featured Brand Collections"
|
||||
description="Curated selections from our most popular brand partners."
|
||||
tag="Best Collections"
|
||||
description="Hand-picked selections showcasing the best from each premium brand."
|
||||
tag="Curated Selection"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
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: "brand-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=1",
|
||||
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: "brand-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=1",
|
||||
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: "brand-prod-003",
|
||||
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=1",
|
||||
imageAlt: "Adidas Stan Smith white leather sneaker",
|
||||
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: "brand-prod-004",
|
||||
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=1",
|
||||
imageAlt: "The North Face Nuptse puffer jacket in black",
|
||||
isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-005", brand: "Adidas", name: "Ultra Boost 22", price: "$189.99", rating: 4.8,
|
||||
reviewCount: "437", imageSrc: "http://img.b2bpic.net/free-photo/side-view-sports-shoes_23-2147618070.jpg", imageAlt: "Adidas Ultra Boost 22 in black", isFavorited: false,
|
||||
id: "brand-prod-005",
|
||||
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=1",
|
||||
imageAlt: "Carhartt WIP brown Detroit work jacket",
|
||||
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: "brand-prod-006",
|
||||
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=1",
|
||||
imageAlt: "Stüssy white classic logo t-shirt",
|
||||
isFavorited: false,
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "View All Brands",
|
||||
href: "/brands",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "View All", href: "/shop" }]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselMode="buttons"
|
||||
ariaLabel="Featured brand collections"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="brands-cta" data-section="brands-cta">
|
||||
<ContactCenter
|
||||
tag="Interested in Partnership?"
|
||||
title="Become a Partner Brand"
|
||||
description="Are you a brand looking to reach fashion enthusiasts? We're always looking for authentic, high-quality brands to partner with. Let's talk!"
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "animated-grid" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your brand email"
|
||||
buttonText="Get in Touch"
|
||||
termsText="We'll review your inquiry and get back to you within 48 hours."
|
||||
ariaLabel="Brand partnership inquiry section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<div id="footer" data-section="footer" className="mx-auto px-4 md:px-6">
|
||||
<FooterBaseCard
|
||||
logoText="garraagarmzz"
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
|
||||
@@ -172,4 +234,6 @@ export default function BrandsPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
import { Award } from "lucide-react";
|
||||
@@ -1,458 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { CreditCard, Apple, Zap, HelpCircle } from "lucide-react";
|
||||
|
||||
export default function CheckoutPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "Brands", id: "brands" },
|
||||
{ name: "New Arrivals", id: "new-arrivals" },
|
||||
{ name: "Best Sellers", id: "best-sellers" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const [paymentMethod, setPaymentMethod] = useState("card");
|
||||
const [formData, setFormData] = useState({
|
||||
email: "", firstName: "", lastName: "", address: "", city: "", state: "", zipCode: "", country: "", cardNumber: "", expiryDate: "", cvv: ""});
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "Best Sellers", href: "/shop" },
|
||||
{ label: "Brands", href: "/shop" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Processing payment with method:", paymentMethod);
|
||||
console.log("Form data:", formData);
|
||||
// Payment processing logic would go here
|
||||
};
|
||||
|
||||
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: "Continue Shopping", 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-900 to-slate-800 py-12 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Page Title */}
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-white mb-2">Secure Checkout</h1>
|
||||
<p className="text-slate-300">Complete your purchase with our secure payment options</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Main Checkout Form */}
|
||||
<div className="lg:col-span-2">
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
{/* Shipping Information */}
|
||||
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700">
|
||||
<h2 className="text-2xl font-bold text-white mb-6 flex items-center">
|
||||
<span className="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center mr-3 text-sm">1</span>
|
||||
Shipping Information
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
placeholder="your@email.com"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={handleInputChange}
|
||||
placeholder="John"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Doe"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">Address</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
value={formData.address}
|
||||
onChange={handleInputChange}
|
||||
placeholder="123 Main Street"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">City</label>
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
value={formData.city}
|
||||
onChange={handleInputChange}
|
||||
placeholder="New York"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">State/Province</label>
|
||||
<input
|
||||
type="text"
|
||||
name="state"
|
||||
value={formData.state}
|
||||
onChange={handleInputChange}
|
||||
placeholder="NY"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">ZIP/Postal Code</label>
|
||||
<input
|
||||
type="text"
|
||||
name="zipCode"
|
||||
value={formData.zipCode}
|
||||
onChange={handleInputChange}
|
||||
placeholder="10001"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">Country</label>
|
||||
<select
|
||||
name="country"
|
||||
value={formData.country}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
>
|
||||
<option value="">Select Country</option>
|
||||
<option value="US">United States</option>
|
||||
<option value="CA">Canada</option>
|
||||
<option value="UK">United Kingdom</option>
|
||||
<option value="AU">Australia</option>
|
||||
<option value="DE">Germany</option>
|
||||
<option value="FR">France</option>
|
||||
<option value="JP">Japan</option>
|
||||
<option value="CN">China</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Method Selection */}
|
||||
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700">
|
||||
<h2 className="text-2xl font-bold text-white mb-6 flex items-center">
|
||||
<span className="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center mr-3 text-sm">2</span>
|
||||
Payment Method
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{/* Credit Card */}
|
||||
<label className="flex items-center p-4 bg-slate-700 border border-slate-600 rounded-lg cursor-pointer hover:border-blue-500 transition">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="card"
|
||||
checked={paymentMethod === "card"}
|
||||
onChange={() => setPaymentMethod("card")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<CreditCard className="w-5 h-5 ml-3 text-blue-400" />
|
||||
<span className="ml-3 text-white font-medium">Credit or Debit Card</span>
|
||||
<span className="ml-auto text-xs text-slate-400">Visa, Mastercard, Amex</span>
|
||||
</label>
|
||||
|
||||
{/* Apple Pay */}
|
||||
<label className="flex items-center p-4 bg-slate-700 border border-slate-600 rounded-lg cursor-pointer hover:border-blue-500 transition">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="apple"
|
||||
checked={paymentMethod === "apple"}
|
||||
onChange={() => setPaymentMethod("apple")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<Apple className="w-5 h-5 ml-3 text-slate-300" />
|
||||
<span className="ml-3 text-white font-medium">Apple Pay</span>
|
||||
<span className="ml-auto text-xs text-slate-400">Fast & Secure</span>
|
||||
</label>
|
||||
|
||||
{/* Google Pay */}
|
||||
<label className="flex items-center p-4 bg-slate-700 border border-slate-600 rounded-lg cursor-pointer hover:border-blue-500 transition">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="google"
|
||||
checked={paymentMethod === "google"}
|
||||
onChange={() => setPaymentMethod("google")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="ml-3 text-white font-medium">Google Pay</span>
|
||||
<span className="ml-auto text-xs text-slate-400">Fast & Secure</span>
|
||||
</label>
|
||||
|
||||
{/* PayPal */}
|
||||
<label className="flex items-center p-4 bg-slate-700 border border-slate-600 rounded-lg cursor-pointer hover:border-blue-500 transition">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="paypal"
|
||||
checked={paymentMethod === "paypal"}
|
||||
onChange={() => setPaymentMethod("paypal")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="ml-3 text-white font-medium">PayPal</span>
|
||||
<span className="ml-auto text-xs text-slate-400">Secure Payment</span>
|
||||
</label>
|
||||
|
||||
{/* Stripe */}
|
||||
<label className="flex items-center p-4 bg-slate-700 border border-slate-600 rounded-lg cursor-pointer hover:border-blue-500 transition">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="stripe"
|
||||
checked={paymentMethod === "stripe"}
|
||||
onChange={() => setPaymentMethod("stripe")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="ml-3 text-white font-medium">Stripe</span>
|
||||
<span className="ml-auto text-xs text-slate-400">Multiple Methods</span>
|
||||
</label>
|
||||
|
||||
{/* Klarna (Buy Now Pay Later) */}
|
||||
<label className="flex items-center p-4 bg-slate-700 border border-slate-600 rounded-lg cursor-pointer hover:border-blue-500 transition">
|
||||
<input
|
||||
type="radio"
|
||||
name="paymentMethod"
|
||||
value="klarna"
|
||||
checked={paymentMethod === "klarna"}
|
||||
onChange={() => setPaymentMethod("klarna")}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<Zap className="w-5 h-5 ml-3 text-yellow-400" />
|
||||
<span className="ml-3 text-white font-medium">Klarna</span>
|
||||
<span className="ml-auto text-xs text-slate-400">Buy Now, Pay Later</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Details (shown only for card payment) */}
|
||||
{paymentMethod === "card" && (
|
||||
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700">
|
||||
<h3 className="text-lg font-bold text-white mb-4">Card Information</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">Card Number</label>
|
||||
<input
|
||||
type="text"
|
||||
name="cardNumber"
|
||||
value={formData.cardNumber}
|
||||
onChange={handleInputChange}
|
||||
placeholder="1234 5678 9012 3456"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">Expiry Date</label>
|
||||
<input
|
||||
type="text"
|
||||
name="expiryDate"
|
||||
value={formData.expiryDate}
|
||||
onChange={handleInputChange}
|
||||
placeholder="MM/YY"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-slate-300 mb-2 font-medium">CVV</label>
|
||||
<input
|
||||
type="text"
|
||||
name="cvv"
|
||||
value={formData.cvv}
|
||||
onChange={handleInputChange}
|
||||
placeholder="123"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Security Notice */}
|
||||
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700 flex items-start">
|
||||
<div className="w-12 h-12 rounded-full bg-green-900 flex items-center justify-center flex-shrink-0 mr-4">
|
||||
<svg className="w-6 h-6 text-green-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white font-bold mb-1">Secure Payment</h3>
|
||||
<p className="text-slate-300 text-sm">Your payment information is encrypted and secured with industry-standard SSL technology. We never store full card details on our servers.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-bold py-4 px-6 rounded-lg transition duration-300 transform hover:scale-105"
|
||||
>
|
||||
Complete Purchase
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Order Summary Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700 sticky top-20">
|
||||
<h2 className="text-xl font-bold text-white mb-6">Order Summary</h2>
|
||||
<div className="space-y-4 mb-6 pb-6 border-b border-slate-700">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-300">Supreme Box Logo Hoodie</span>
|
||||
<span className="text-white font-semibold">$345.00</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-300">Nike Air Max 90</span>
|
||||
<span className="text-white font-semibold">$129.99</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-300">Carhartt WIP Jacket</span>
|
||||
<span className="text-white font-semibold">$159.99</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-6 pb-6 border-b border-slate-700">
|
||||
<div className="flex justify-between text-slate-300">
|
||||
<span>Subtotal</span>
|
||||
<span>$634.98</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-slate-300">
|
||||
<span>Shipping</span>
|
||||
<span>$9.99</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-slate-300">
|
||||
<span>Tax</span>
|
||||
<span>$51.49</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between text-white font-bold text-lg mb-6">
|
||||
<span>Total</span>
|
||||
<span>$696.46</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-900 bg-opacity-30 border border-blue-700 rounded-lg p-4 mb-4">
|
||||
<p className="text-blue-300 text-sm">✓ Free returns within 30 days</p>
|
||||
</div>
|
||||
|
||||
<a href="/shop" className="block text-center text-blue-400 hover:text-blue-300 text-sm font-medium">
|
||||
Continue Shopping
|
||||
</a>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -2,20 +2,16 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Mail, Award, Phone, MapPin } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Home", id: "/" },
|
||||
{ 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: "FAQ", id: "/faq" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
@@ -24,7 +20,7 @@ export default function ContactPage() {
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "Best Sellers", href: "/shop" },
|
||||
{ label: "Brands", href: "/brands" },
|
||||
{ label: "Brands", href: "/shop" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -38,7 +34,7 @@ export default function ContactPage() {
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
@@ -80,43 +76,26 @@ export default function ContactPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactSplit
|
||||
tag="Get in Touch"
|
||||
title="Contact Us"
|
||||
description="Have questions about our products or services? We're here to help. Reach out to our customer support team and we'll get back to you within 24 hours."
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "animated-grid" }}
|
||||
<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}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Au4xEqHY25puXwRvhmCQoNVTvJ/uploaded-1773430165306-v6fvqpuq.png"
|
||||
imageAlt="Contact us image"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Send Message"
|
||||
termsText="We'll respond to your inquiry within 24 business hours."
|
||||
ariaLabel="Contact form section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-info" data-section="contact-info">
|
||||
<SocialProofOne
|
||||
title="Contact Information"
|
||||
description="Multiple ways to reach our customer support team."
|
||||
tag="Support Channels"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"📧 Email Support", "📞 Phone Support", "💬 Live Chat", "🏢 Headquarters", "📍 Shipping Hub", "🌐 Social Media", "⏰ Hours: Mon-Fri 9AM-6PM", "🎯 Track Orders"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
ariaLabel="Contact information section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="garraagarmzz"
|
||||
@@ -127,4 +106,4 @@ export default function ContactPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,19 +6,13 @@ 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: "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: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "FAQ", id: "/faq" },
|
||||
{ name: "Shipping & Returns", id: "/shipping-and-returns" },
|
||||
{ name: "Privacy Policy", id: "/privacy-policy" },
|
||||
{ name: "Terms & Conditions", id: "/terms-and-conditions" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
@@ -32,15 +26,15 @@ export default function FaqPage() {
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/shipping-and-returns" },
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
@@ -48,8 +42,8 @@ export default function FaqPage() {
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy-policy" },
|
||||
{ label: "Terms & Conditions", href: "/terms-and-conditions" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
@@ -107,9 +101,9 @@ export default function FaqPage() {
|
||||
{
|
||||
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: "/" }]}
|
||||
buttons={[{ text: "Contact Support", href: "/contact" }]}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="FAQ page"
|
||||
ariaLabel="FAQ section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -123,4 +117,4 @@ export default function FaqPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
383
src/app/page.tsx
383
src/app/page.tsx
@@ -10,24 +10,95 @@ import TestimonialCardFifteen from "@/components/sections/testimonial/Testimonia
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Sparkles, Zap, Award, Star, HelpCircle, Mail, BarChart3, Zap as ZapIcon } from "lucide-react";
|
||||
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";
|
||||
|
||||
export default function HomePage() {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [mobileOptimized, setMobileOptimized] = useState(false);
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
};
|
||||
|
||||
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: "Analytics", id: "analytics" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Analytics", id: "analytics" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "Best Sellers", href: "/shop" },
|
||||
@@ -35,8 +106,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
@@ -44,8 +114,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
@@ -53,8 +122,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
@@ -63,6 +131,17 @@ export default function HomePage() {
|
||||
},
|
||||
];
|
||||
|
||||
const analyticsMetrics = [
|
||||
{
|
||||
id: "metric-001", title: "Total Sales", subtitle: "Last 30 days", category: "Revenue", value: "$245,680"},
|
||||
{
|
||||
id: "metric-002", title: "Conversion Rate", subtitle: "All traffic", category: "Performance", value: "3.24%"},
|
||||
{
|
||||
id: "metric-003", title: "Avg Order Value", subtitle: "Last 30 days", category: "Revenue", value: "$184.50"},
|
||||
{
|
||||
id: "metric-004", title: "Customer Satisfaction", subtitle: "Net Promoter Score", category: "Satisfaction", value: "72"},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
@@ -81,9 +160,7 @@ export default function HomePage() {
|
||||
navItems={navItems}
|
||||
brandName="garraagarmzz"
|
||||
button={{
|
||||
text: "Shop Now",
|
||||
href: "/shop",
|
||||
}}
|
||||
text: "Shop Now", href: "/shop"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
@@ -102,23 +179,15 @@ export default function HomePage() {
|
||||
background={{ variant: "plain" }}
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-woman-dressed-white-dress-sitting-summer-open-air-theatre-chair-alone-spring-street-style-fashion-trend-accessories-traveling-with-backpack-skinny-legs-sandals_285396-4543.jpg?_wi=2",
|
||||
imageAlt: "luxury premium sneakers white grey leather",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-woman-dressed-white-dress-sitting-summer-open-air-theatre-chair-alone-spring-street-style-fashion-trend-accessories-traveling-with-backpack-skinny-legs-sandals_285396-4543.jpg?_wi=2", imageAlt: "luxury premium sneakers white grey leather"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-accessoires-travel-with-man-clothing-concept-shirt-jean-mobile-phone-wooden-background-watch-sunglasses-shoes-wood-table_1921-79.jpg?_wi=2",
|
||||
imageAlt: "luxury fashion accessories collection display",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-accessoires-travel-with-man-clothing-concept-shirt-jean-mobile-phone-wooden-background-watch-sunglasses-shoes-wood-table_1921-79.jpg?_wi=2", imageAlt: "luxury fashion accessories collection display"},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432326.jpg?_wi=2",
|
||||
imageAlt: "streetwear clothing collection hoodies jackets",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432326.jpg?_wi=2", imageAlt: "streetwear clothing collection hoodies jackets"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-well-dressed-male-model-sitting-stairs-fashionable-african-guy-enjoying-photoshoot-steps_197531-22070.jpg?_wi=2",
|
||||
imageAlt: "designer clothing collection luxury brands",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-well-dressed-male-model-sitting-stairs-fashionable-african-guy-enjoying-photoshoot-steps_197531-22070.jpg?_wi=2", imageAlt: "designer clothing collection luxury brands"},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Start Shopping", href: "/shop" },
|
||||
@@ -155,70 +224,28 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "prod-001",
|
||||
brand: "Nike",
|
||||
name: "Air Max 90 Classic",
|
||||
price: "$129.99",
|
||||
rating: 4.8,
|
||||
reviewCount: "342",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2",
|
||||
imageAlt: "Nike Air Max 90 sneaker in white and grey",
|
||||
isFavorited: false,
|
||||
id: "prod-001", brand: "Nike", name: "Air Max 90 Classic", price: "$129.99", rating: 4.8,
|
||||
reviewCount: "342", imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2", imageAlt: "Nike Air Max 90 sneaker in white and grey", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-002",
|
||||
brand: "Supreme",
|
||||
name: "Box Logo Hoodie",
|
||||
price: "$345.00",
|
||||
rating: 4.9,
|
||||
reviewCount: "521",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/afro-hair-style-doing-okay-gesture_140725-36572.jpg?_wi=2",
|
||||
imageAlt: "Supreme black box logo hoodie",
|
||||
isFavorited: false,
|
||||
id: "prod-002", brand: "Supreme", name: "Box Logo Hoodie", price: "$345.00", rating: 4.9,
|
||||
reviewCount: "521", imageSrc: "http://img.b2bpic.net/free-photo/afro-hair-style-doing-okay-gesture_140725-36572.jpg?_wi=2", imageAlt: "Supreme black box logo hoodie", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-003",
|
||||
brand: "Carhartt WIP",
|
||||
name: "Detroit Jacket",
|
||||
price: "$159.99",
|
||||
rating: 4.7,
|
||||
reviewCount: "189",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1617.jpg?_wi=2",
|
||||
imageAlt: "Carhartt WIP brown Detroit work jacket",
|
||||
isFavorited: false,
|
||||
id: "prod-003", brand: "Carhartt WIP", name: "Detroit Jacket", price: "$159.99", rating: 4.7,
|
||||
reviewCount: "189", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1617.jpg?_wi=2", imageAlt: "Carhartt WIP brown Detroit work jacket", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-004",
|
||||
brand: "Stüssy",
|
||||
name: "Classic T-Shirt",
|
||||
price: "$48.00",
|
||||
rating: 4.6,
|
||||
reviewCount: "276",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572721.jpg?_wi=2",
|
||||
imageAlt: "Stüssy white classic logo t-shirt",
|
||||
isFavorited: false,
|
||||
id: "prod-004", brand: "Stüssy", name: "Classic T-Shirt", price: "$48.00", rating: 4.6,
|
||||
reviewCount: "276", imageSrc: "http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572721.jpg?_wi=2", imageAlt: "Stüssy white classic logo t-shirt", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-005",
|
||||
brand: "Adidas",
|
||||
name: "Ultra Boost 22",
|
||||
price: "$189.99",
|
||||
rating: 4.8,
|
||||
reviewCount: "437",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-sports-shoes_23-2147618070.jpg",
|
||||
imageAlt: "Adidas Ultra Boost 22 in black",
|
||||
isFavorited: false,
|
||||
id: "prod-005", brand: "Adidas", name: "Ultra Boost 22", price: "$189.99", rating: 4.8,
|
||||
reviewCount: "437", imageSrc: "http://img.b2bpic.net/free-photo/side-view-sports-shoes_23-2147618070.jpg", imageAlt: "Adidas Ultra Boost 22 in black", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-006",
|
||||
brand: "The North Face",
|
||||
name: "Nuptse Jacket",
|
||||
price: "$229.99",
|
||||
rating: 4.9,
|
||||
reviewCount: "654",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-listening-music-headphones-close-up_23-2148381737.jpg?_wi=2",
|
||||
imageAlt: "The North Face Nuptse puffer jacket in black",
|
||||
isFavorited: false,
|
||||
id: "prod-006", brand: "The North Face", name: "Nuptse Jacket", price: "$229.99", rating: 4.9,
|
||||
reviewCount: "654", imageSrc: "http://img.b2bpic.net/free-photo/young-man-listening-music-headphones-close-up_23-2148381737.jpg?_wi=2", imageAlt: "The North Face Nuptse puffer jacket in black", isFavorited: false,
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "View All", href: "/shop" }]}
|
||||
@@ -238,29 +265,9 @@ export default function HomePage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Nike",
|
||||
"Adidas",
|
||||
"Supreme",
|
||||
"Stüssy",
|
||||
"Carhartt WIP",
|
||||
"The North Face",
|
||||
"Balenciaga",
|
||||
"Dickies",
|
||||
"Vans",
|
||||
"Converse",
|
||||
]}
|
||||
"Nike", "Adidas", "Supreme", "Stüssy", "Carhartt WIP", "The North Face", "Balenciaga", "Dickies", "Vans", "Converse"]}
|
||||
logos={[
|
||||
"http://img.b2bpic.net/free-vector/ballet-studio-logo-template-design_742173-17939.jpg",
|
||||
"http://img.b2bpic.net/free-vector/flat-design-outlet-stamp-collection_23-2149752880.jpg",
|
||||
"http://img.b2bpic.net/free-vector/flat-design-gratis-label-collection_23-2149889390.jpg",
|
||||
"http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition_1284-52940.jpg",
|
||||
"http://img.b2bpic.net/free-vector/labor-day-badge-collection_23-2148094629.jpg",
|
||||
"http://img.b2bpic.net/free-vector/hand-drawn-adventure-badges-nature_23-2147543057.jpg",
|
||||
"http://img.b2bpic.net/free-vector/luxury-logo-design-template_23-2150881456.jpg",
|
||||
"http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition-dark_1284-44291.jpg",
|
||||
"http://img.b2bpic.net/free-vector/set-drawings_1284-45834.jpg",
|
||||
"http://img.b2bpic.net/free-photo/view-skateboard-with-retro-memorabilia_23-2150583922.jpg",
|
||||
]}
|
||||
"http://img.b2bpic.net/free-vector/ballet-studio-logo-template-design_742173-17939.jpg", "http://img.b2bpic.net/free-vector/flat-design-outlet-stamp-collection_23-2149752880.jpg", "http://img.b2bpic.net/free-vector/flat-design-gratis-label-collection_23-2149889390.jpg", "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition_1284-52940.jpg", "http://img.b2bpic.net/free-vector/labor-day-badge-collection_23-2148094629.jpg", "http://img.b2bpic.net/free-vector/hand-drawn-adventure-badges-nature_23-2147543057.jpg", "http://img.b2bpic.net/free-vector/luxury-logo-design-template_23-2150881456.jpg", "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition-dark_1284-44291.jpg", "http://img.b2bpic.net/free-vector/set-drawings_1284-45834.jpg", "http://img.b2bpic.net/free-photo/view-skateboard-with-retro-memorabilia_23-2150583922.jpg"]}
|
||||
buttons={[{ text: "Explore All Brands", href: "/shop" }]}
|
||||
buttonAnimation="slide-up"
|
||||
speed={40}
|
||||
@@ -282,37 +289,16 @@ export default function HomePage() {
|
||||
animationType="blur-reveal"
|
||||
products={[
|
||||
{
|
||||
id: "prod-007",
|
||||
brand: "Nike",
|
||||
name: "Jordan 1 Low OG",
|
||||
price: "$99.99",
|
||||
rating: 4.7,
|
||||
reviewCount: "128",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-legs-keds-going-down-stairs_176420-55081.jpg",
|
||||
imageAlt: "Jordan 1 Low OG sneaker",
|
||||
isFavorited: false,
|
||||
id: "prod-007", brand: "Nike", name: "Jordan 1 Low OG", price: "$99.99", rating: 4.7,
|
||||
reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-legs-keds-going-down-stairs_176420-55081.jpg", imageAlt: "Jordan 1 Low OG sneaker", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-008",
|
||||
brand: "Supreme",
|
||||
name: "Arc Logo Cap",
|
||||
price: "$68.00",
|
||||
rating: 4.5,
|
||||
reviewCount: "95",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-putting-hand-cap-white-t-shirt-jacket-gray-cap-looking-serious-front-view_176474-84297.jpg",
|
||||
imageAlt: "Supreme arc logo baseball cap",
|
||||
isFavorited: false,
|
||||
id: "prod-008", brand: "Supreme", name: "Arc Logo Cap", price: "$68.00", rating: 4.5,
|
||||
reviewCount: "95", imageSrc: "http://img.b2bpic.net/free-photo/young-man-putting-hand-cap-white-t-shirt-jacket-gray-cap-looking-serious-front-view_176474-84297.jpg", imageAlt: "Supreme arc logo baseball cap", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-009",
|
||||
brand: "Stüssy",
|
||||
name: "Fleece Pullover",
|
||||
price: "$98.00",
|
||||
rating: 4.8,
|
||||
reviewCount: "203",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-smiling-woman-stands-by-tree_8353-9397.jpg",
|
||||
imageAlt: "Stüssy fleece pullover in grey",
|
||||
isFavorited: false,
|
||||
id: "prod-009", brand: "Stüssy", name: "Fleece Pullover", price: "$98.00", rating: 4.8,
|
||||
reviewCount: "203", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-smiling-woman-stands-by-tree_8353-9397.jpg", imageAlt: "Stüssy fleece pullover in grey", isFavorited: false,
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "See All New Items", href: "/shop" }]}
|
||||
@@ -335,48 +321,20 @@ export default function HomePage() {
|
||||
animationType="scale-rotate"
|
||||
products={[
|
||||
{
|
||||
id: "prod-010",
|
||||
brand: "Adidas",
|
||||
name: "Stan Smith Classic",
|
||||
price: "$89.99",
|
||||
rating: 4.9,
|
||||
reviewCount: "1,240",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/new-pair-white-sneakers-isolated-white_93675-130969.jpg?_wi=2",
|
||||
imageAlt: "Adidas Stan Smith white leather sneaker",
|
||||
isFavorited: false,
|
||||
id: "prod-010", brand: "Adidas", name: "Stan Smith Classic", price: "$89.99", rating: 4.9,
|
||||
reviewCount: "1,240", imageSrc: "http://img.b2bpic.net/free-photo/new-pair-white-sneakers-isolated-white_93675-130969.jpg?_wi=2", imageAlt: "Adidas Stan Smith white leather sneaker", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-011",
|
||||
brand: "The North Face",
|
||||
name: "Denali Fleece",
|
||||
price: "$99.99",
|
||||
rating: 4.8,
|
||||
reviewCount: "856",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-hipster-man-hiking-mountains-winter-vacation-traveling_285396-1955.jpg",
|
||||
imageAlt: "The North Face Denali fleece jacket",
|
||||
isFavorited: false,
|
||||
id: "prod-011", brand: "The North Face", name: "Denali Fleece", price: "$99.99", rating: 4.8,
|
||||
reviewCount: "856", imageSrc: "http://img.b2bpic.net/free-photo/young-hipster-man-hiking-mountains-winter-vacation-traveling_285396-1955.jpg", imageAlt: "The North Face Denali fleece jacket", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-012",
|
||||
brand: "Carhartt WIP",
|
||||
name: "Simple Pant",
|
||||
price: "$54.99",
|
||||
rating: 4.7,
|
||||
reviewCount: "742",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cropped-stock-photo-unrecognizable-woman-white-shirt-formal-black-straight-trousers-black-leather-heels-standing-street-fashion-model-dresscode-concept_132075-9150.jpg",
|
||||
imageAlt: "Carhartt WIP simple pant in black",
|
||||
isFavorited: false,
|
||||
id: "prod-012", brand: "Carhartt WIP", name: "Simple Pant", price: "$54.99", rating: 4.7,
|
||||
reviewCount: "742", imageSrc: "http://img.b2bpic.net/free-photo/cropped-stock-photo-unrecognizable-woman-white-shirt-formal-black-straight-trousers-black-leather-heels-standing-street-fashion-model-dresscode-concept_132075-9150.jpg", imageAlt: "Carhartt WIP simple pant in black", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-013",
|
||||
brand: "Vans",
|
||||
name: "Old Skool",
|
||||
price: "$65.00",
|
||||
rating: 4.9,
|
||||
reviewCount: "1,567",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-80s-aesthetic-summer-clothing_23-2151016254.jpg",
|
||||
imageAlt: "Vans Old Skool classic skateboard shoe",
|
||||
isFavorited: false,
|
||||
id: "prod-013", brand: "Vans", name: "Old Skool", price: "$65.00", rating: 4.9,
|
||||
reviewCount: "1,567", imageSrc: "http://img.b2bpic.net/free-photo/people-80s-aesthetic-summer-clothing_23-2151016254.jpg", imageAlt: "Vans Old Skool classic skateboard shoe", isFavorited: false,
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Shop Best Sellers", href: "/shop" }]}
|
||||
@@ -387,40 +345,21 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
<div id="analytics" data-section="analytics">
|
||||
<div className="py-16 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="mb-12 text-center">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-4">Performance Metrics</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-300">Track our growth and customer satisfaction in real-time</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900 dark:to-blue-800 p-8 rounded-lg border border-blue-200 dark:border-blue-700">
|
||||
<BarChart3 className="w-8 h-8 text-blue-600 dark:text-blue-400 mb-4" />
|
||||
<h3 className="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">Page Load Time</h3>
|
||||
<p className="text-3xl font-bold text-blue-600 dark:text-blue-400">1.2s</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-2">Average load time</p>
|
||||
</div>
|
||||
<div className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900 dark:to-green-800 p-8 rounded-lg border border-green-200 dark:border-green-700">
|
||||
<Star className="w-8 h-8 text-green-600 dark:text-green-400 mb-4" />
|
||||
<h3 className="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">Customer Rating</h3>
|
||||
<p className="text-3xl font-bold text-green-600 dark:text-green-400">4.8/5</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-2">Average satisfaction</p>
|
||||
</div>
|
||||
<div className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900 dark:to-purple-800 p-8 rounded-lg border border-purple-200 dark:border-purple-700">
|
||||
<ZapIcon className="w-8 h-8 text-purple-600 dark:text-purple-400 mb-4" />
|
||||
<h3 className="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">Site Speed</h3>
|
||||
<p className="text-3xl font-bold text-purple-600 dark:text-purple-400">98/100</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-2">Lighthouse score</p>
|
||||
</div>
|
||||
<div className="bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900 dark:to-orange-800 p-8 rounded-lg border border-orange-200 dark:border-orange-700">
|
||||
<Award className="w-8 h-8 text-orange-600 dark:text-orange-400 mb-4" />
|
||||
<h3 className="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">SEO Performance</h3>
|
||||
<p className="text-3xl font-bold text-orange-600 dark:text-orange-400">A+</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-2">Core web vitals</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
@@ -430,9 +369,7 @@ export default function HomePage() {
|
||||
author="Jordan Mitchell"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
|
||||
alt: "Jordan Mitchell",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Jordan Mitchell"},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
@@ -452,18 +389,8 @@ export default function HomePage() {
|
||||
useInvertedBackground={true}
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Subscribe"
|
||||
termsText="By subscribing, you agree to receive marketing emails and updates about new arrivals. Unsubscribe at any time. See our Privacy Policy for details."
|
||||
termsText="By subscribing, you agree to receive marketing emails. Unsubscribe at any time."
|
||||
ariaLabel="Newsletter signup section"
|
||||
onSubmit={(email) => {
|
||||
if (email) {
|
||||
console.log('Newsletter signup:', email);
|
||||
fetch('/api/newsletter', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email })
|
||||
}).catch(err => console.error('Newsletter error:', err));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -479,35 +406,17 @@ export default function HomePage() {
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-001",
|
||||
title: "Are all products authentic?",
|
||||
content: "Yes, we guarantee 100% authenticity for all items sold on garraagarmzz. We source directly from authorized retailers and brand partnerships. Each item undergoes quality verification before being listed.",
|
||||
},
|
||||
id: "faq-001", title: "Are all products authentic?", content: "Yes, we guarantee 100% authenticity for all items sold on garraagarmzz. We source directly from authorized retailers and brand partnerships. Each item undergoes quality verification before being listed."},
|
||||
{
|
||||
id: "faq-002",
|
||||
title: "What is your return policy?",
|
||||
content: "We offer a 30-day return policy on all items. Products must be unworn, unwashed, and in original packaging with all tags attached. Returns are free within the US.",
|
||||
},
|
||||
id: "faq-002", title: "What is your return policy?", content: "We offer a 30-day return policy on all items. Products must be unworn, unwashed, and in original packaging with all tags attached. Returns are free within the US."},
|
||||
{
|
||||
id: "faq-003",
|
||||
title: "How long does shipping take?",
|
||||
content: "Standard shipping takes 5-7 business days. Express shipping (2-3 business days) and overnight shipping options are available at checkout. Orders are processed within 24 hours.",
|
||||
},
|
||||
id: "faq-003", title: "How long does shipping take?", content: "Standard shipping takes 5-7 business days. Express shipping (2-3 business days) and overnight shipping options are available at checkout. Orders are processed within 24 hours."},
|
||||
{
|
||||
id: "faq-004",
|
||||
title: "Do you ship internationally?",
|
||||
content: "Yes, we ship to most countries worldwide. International shipping rates and delivery times vary by location. Customs duties may apply depending on your country.",
|
||||
},
|
||||
id: "faq-004", title: "Do you ship internationally?", content: "Yes, we ship to most countries worldwide. International shipping rates and delivery times vary by location. Customs duties may apply depending on your country."},
|
||||
{
|
||||
id: "faq-005",
|
||||
title: "What payment methods do you accept?",
|
||||
content: "We accept all major credit cards, PayPal, Apple Pay, Google Pay, and Klarna. All payments are secured with SSL encryption.",
|
||||
},
|
||||
id: "faq-005", title: "What payment methods do you accept?", content: "We accept all major credit cards, PayPal, Apple Pay, Google Pay, and Klarna. All payments are secured with SSL encryption."},
|
||||
{
|
||||
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"
|
||||
@@ -525,4 +434,4 @@ export default function HomePage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,17 +7,16 @@ import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
|
||||
export default function PrivacyPolicyPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ 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: "FAQ", id: "/faq" },
|
||||
{ name: "Shipping & Returns", id: "/shipping-and-returns" },
|
||||
{ name: "Shipping & Returns", id: "/shipping-returns" },
|
||||
{ name: "Privacy Policy", id: "/privacy-policy" },
|
||||
{ name: "Terms & Conditions", id: "/terms-and-conditions" },
|
||||
{ name: "Terms & Conditions", id: "/terms-conditions" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
@@ -39,8 +38,8 @@ export default function PrivacyPolicyPage() {
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/shipping-and-returns" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Shipping & Returns", href: "/shipping-returns" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
@@ -48,13 +47,121 @@ export default function PrivacyPolicyPage() {
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy-policy" },
|
||||
{ label: "Terms & Conditions", href: "/terms-and-conditions" },
|
||||
{ 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"
|
||||
@@ -82,85 +189,12 @@ export default function PrivacyPolicyPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="privacy-policy-section" data-section="privacy-policy-section">
|
||||
<div id="privacy-policy" data-section="privacy-policy">
|
||||
<LegalSection
|
||||
layout="page"
|
||||
title="Privacy Policy"
|
||||
subtitle="How we collect, use, and protect your personal information"
|
||||
sections={[
|
||||
{
|
||||
heading: "Introduction", content: [
|
||||
{
|
||||
type: "paragraph", text: "At garraagarmzz, we are committed to protecting your privacy and ensuring you have a positive experience on our website and when using our services. This Privacy Policy outlines how we collect, use, disclose, and safeguard your personal information."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Information We Collect", content: [
|
||||
{
|
||||
type: "paragraph", text: "We collect information you voluntarily provide to us, as well as information collected automatically when you interact with our platform:"},
|
||||
{
|
||||
type: "list", items: [
|
||||
"Personal Information: Name, email address, phone number, shipping address, billing address", "Account Information: Username, password, account preferences", "Payment Information: Credit card details processed securely through third-party providers", "Usage Data: Pages visited, time spent, device type, browser information, IP address", "Cookies: Small data files stored on your device to enhance user experience"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "How We Use Your Information", content: [
|
||||
{
|
||||
type: "list", items: [
|
||||
"Processing orders and payments", "Providing customer service and support", "Sending promotional emails and marketing communications (with your consent)", "Improving our website and services", "Personalizing your experience", "Preventing fraud and unauthorized access", "Complying with legal obligations"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Data Security", content: [
|
||||
{
|
||||
type: "paragraph", text: "We implement industry-standard security measures to protect your personal information from unauthorized access, alteration, or destruction. Our website uses SSL encryption to secure data transmission."},
|
||||
{
|
||||
type: "paragraph", text: "However, no method of transmission over the internet is 100% secure. We cannot guarantee absolute security of your information."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Third-Party Sharing", content: [
|
||||
{
|
||||
type: "paragraph", text: "We do not sell, trade, or rent your personal information to third parties. We may share information with:"},
|
||||
{
|
||||
type: "list", items: [
|
||||
"Service providers who assist in operating our website and conducting business", "Payment processors for transaction processing", "Shipping carriers for delivery purposes", "Legal authorities when required by law"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Your Rights", content: [
|
||||
{
|
||||
type: "paragraph", text: "You have the right to:"},
|
||||
{
|
||||
type: "list", items: [
|
||||
"Access your personal information", "Correct inaccurate information", "Request deletion of your data (subject to certain exceptions)", "Opt-out of marketing communications", "Data portability"],
|
||||
},
|
||||
{
|
||||
type: "paragraph", text: "To exercise these rights, please contact us at privacy@garraagarmzz.com."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Cookies", content: [
|
||||
{
|
||||
type: "paragraph", text: "We use cookies to enhance your browsing experience. You can manage cookie preferences through your browser settings. Disabling cookies may affect certain website functionality."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Changes to This Policy", content: [
|
||||
{
|
||||
type: "paragraph", text: "We reserve the right to update this Privacy Policy at any time. Changes will be posted on this page with an updated effective date. Your continued use of our website constitutes acceptance of the updated policy."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Contact Us", content: [
|
||||
{
|
||||
type: "paragraph", text: "If you have questions about this Privacy Policy or our privacy practices, please contact us at privacy@garraagarmzz.com or mail your request to: garraagarmzz Privacy Team, 123 Fashion Street, New York, NY 10001."},
|
||||
],
|
||||
},
|
||||
]}
|
||||
subtitle="Your privacy is important to us"
|
||||
sections={privacySections as any}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,352 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Heart, Share2, ChevronLeft, Check } from "lucide-react";
|
||||
|
||||
export default function ProductPage() {
|
||||
const params = useParams();
|
||||
const productId = params.id as string;
|
||||
|
||||
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: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const allProducts = [
|
||||
{
|
||||
id: "prod-001", brand: "Nike", name: "Air Max 90 Classic", price: "$129.99", rating: 4.8,
|
||||
reviewCount: "342", imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2", imageAlt: "Nike Air Max 90 sneaker in white and grey", category: "Shoes", size: ["6", "7", "8", "9", "10", "11", "12"],
|
||||
stock: 45,
|
||||
description: "Experience timeless style with the Nike Air Max 90 Classic. Featuring the iconic Air Max sole unit and premium leather construction, these sneakers deliver exceptional comfort and durability. Perfect for everyday wear or making a statement with classic sneaker culture."},
|
||||
{
|
||||
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", category: "Tops", size: ["XS", "S", "M", "L", "XL", "XXL"],
|
||||
stock: 12,
|
||||
description: "The Supreme Box Logo Hoodie is an iconic piece of streetwear history. Crafted with premium materials and featuring the legendary box logo, this hoodie represents supreme quality and style. Perfect for collectors and enthusiasts alike."},
|
||||
{
|
||||
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", category: "Jackets", size: ["XS", "S", "M", "L", "XL"],
|
||||
stock: 28,
|
||||
description: "The Carhartt WIP Detroit Jacket blends timeless workwear heritage with modern streetwear aesthetics. Featuring durable canvas construction and signature Carhartt craftsmanship, this jacket is built to last and designed to impress."},
|
||||
{
|
||||
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", category: "Tops", size: ["XS", "S", "M", "L", "XL", "XXL"],
|
||||
stock: 156,
|
||||
description: "The Stüssy Classic T-Shirt is a wardrobe staple featuring the iconic Stüssy logo. Made from premium cotton, this tee offers exceptional comfort and quality. A versatile piece that pairs well with any outfit."},
|
||||
{
|
||||
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", category: "Shoes", size: ["6", "7", "8", "9", "10", "11", "12", "13"],
|
||||
stock: 34,
|
||||
description: "Step into the future with the Adidas Ultra Boost 22. Featuring Boost technology and responsive cushioning, these shoes provide ultimate comfort for performance and lifestyle wear. Engineered for excellence."},
|
||||
];
|
||||
|
||||
const product = allProducts.find((p) => p.id === productId);
|
||||
|
||||
const [selectedSize, setSelectedSize] = useState<string | null>(null);
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [isFavorited, setIsFavorited] = useState(false);
|
||||
const [addedToCart, setAddedToCart] = useState(false);
|
||||
|
||||
if (!product) {
|
||||
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>
|
||||
<main className="min-h-screen flex items-center justify-center pt-24">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl font-bold mb-4">Product not found</h1>
|
||||
<Link href="/shop" className="text-blue-600 hover:underline">
|
||||
Back to Shop
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
const handleAddToCart = () => {
|
||||
if (selectedSize) {
|
||||
setAddedToCart(true);
|
||||
setTimeout(() => setAddedToCart(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
<main className="min-h-screen pt-24 pb-20">
|
||||
<div className="max-w-7xl mx-auto px-4 md:px-6">
|
||||
{/* Breadcrumb */}
|
||||
<Link href="/shop" className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 mb-8">
|
||||
<ChevronLeft size={16} />
|
||||
Back to Shop
|
||||
</Link>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
|
||||
{/* Product Image */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
|
||||
<img
|
||||
src={product.imageSrc}
|
||||
alt={product.imageAlt}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="aspect-square bg-gray-200 rounded-lg">
|
||||
<img
|
||||
src={product.imageSrc}
|
||||
alt={`Product view ${i}`}
|
||||
className="w-full h-full object-cover cursor-pointer hover:opacity-75"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Details */}
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Brand and Title */}
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-2">{product.brand}</p>
|
||||
<h1 className="text-3xl md:text-4xl font-bold mb-2">{product.name}</h1>
|
||||
|
||||
{/* Rating */}
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="flex gap-1">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<span key={i} className={i < Math.floor(product.rating) ? "text-yellow-400" : "text-gray-300"}>
|
||||
★
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-sm text-gray-600">({product.reviewCount} reviews)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price and Stock */}
|
||||
<div className="border-t border-b py-4">
|
||||
<p className="text-3xl font-bold mb-2">{product.price}</p>
|
||||
<p className={`text-sm font-medium ${
|
||||
product.stock > 10 ? "text-green-600" : product.stock > 0 ? "text-orange-600" : "text-red-600"
|
||||
}`}>
|
||||
{product.stock > 0 ? (
|
||||
<>
|
||||
<span className="inline-block w-2 h-2 bg-current rounded-full mr-2"></span>
|
||||
{product.stock} in stock
|
||||
</>
|
||||
) : (
|
||||
"Out of stock"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-3">Product Description</h2>
|
||||
<p className="text-gray-700 leading-relaxed">{product.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Size Selection */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-3">Select Size</h2>
|
||||
<div className="grid grid-cols-4 gap-2 mb-4">
|
||||
{product.size.map((size) => (
|
||||
<button
|
||||
key={size}
|
||||
onClick={() => setSelectedSize(size)}
|
||||
className={`py-3 px-2 rounded-lg border-2 text-center font-medium transition ${
|
||||
selectedSize === size
|
||||
? "border-blue-600 bg-blue-50 text-blue-600"
|
||||
: "border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
{size}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quantity and Actions */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center border rounded-lg">
|
||||
<button
|
||||
onClick={() => setQuantity(Math.max(1, quantity - 1))}
|
||||
className="px-4 py-2 hover:bg-gray-100"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<span className="px-4 py-2 font-medium">{quantity}</span>
|
||||
<button
|
||||
onClick={() => setQuantity(quantity + 1)}
|
||||
className="px-4 py-2 hover:bg-gray-100"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add to Cart Button */}
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
disabled={product.stock === 0 || !selectedSize}
|
||||
className={`py-4 px-6 rounded-lg font-semibold text-white text-lg transition flex items-center justify-center gap-2 ${
|
||||
addedToCart
|
||||
? "bg-green-600 hover:bg-green-700"
|
||||
: product.stock === 0 || !selectedSize
|
||||
? "bg-gray-400 cursor-not-allowed"
|
||||
: "bg-blue-600 hover:bg-blue-700"
|
||||
}`}
|
||||
>
|
||||
{addedToCart ? (
|
||||
<>
|
||||
<Check size={20} />
|
||||
Added to Cart
|
||||
</>
|
||||
) : (
|
||||
"Add to Cart"
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Wishlist and Share */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setIsFavorited(!isFavorited)}
|
||||
className={`flex-1 py-3 px-4 border-2 rounded-lg font-semibold transition ${
|
||||
isFavorited
|
||||
? "border-red-600 bg-red-50 text-red-600"
|
||||
: "border-gray-300 hover:border-gray-400"
|
||||
}`}
|
||||
>
|
||||
<Heart size={20} className="inline mr-2" fill={isFavorited ? "currentColor" : "none"} />
|
||||
{isFavorited ? "Saved" : "Save"}
|
||||
</button>
|
||||
<button className="flex-1 py-3 px-4 border-2 border-gray-300 rounded-lg font-semibold hover:border-gray-400 transition">
|
||||
<Share2 size={20} className="inline mr-2" />
|
||||
Share
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Additional Info */}
|
||||
<div className="bg-gray-50 rounded-lg p-4 space-y-2 text-sm">
|
||||
<p>✓ 100% Authentic Guarantee</p>
|
||||
<p>✓ Free Shipping on orders over $100</p>
|
||||
<p>✓ 30-Day Return Policy</p>
|
||||
<p>✓ Secure Checkout</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
325
src/app/products/[id]/page.tsx
Normal file
325
src/app/products/[id]/page.tsx
Normal file
@@ -0,0 +1,325 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
313
src/app/products/page.tsx
Normal file
313
src/app/products/page.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Sparkles, Search, Filter, X, Eye, Heart, ShoppingCart } from "lucide-react";
|
||||
|
||||
export default function ProductsPage() {
|
||||
const [selectedProduct, setSelectedProduct] = useState<string | null>(null);
|
||||
const [isMobileFilterOpen, setIsMobileFilterOpen] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "Brands", id: "brands" },
|
||||
{ name: "New Arrivals", id: "new-arrivals" },
|
||||
{ name: "Best Sellers", id: "best-sellers" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/products" },
|
||||
{ label: "Best Sellers", href: "/products" },
|
||||
{ label: "Brands", href: "/products" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const allProducts = [
|
||||
{
|
||||
id: "prod-001", brand: "Nike", name: "Air Max 90 Classic", price: "$129.99", rating: 4.8,
|
||||
reviewCount: "342", imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2", imageAlt: "Nike Air Max 90 sneaker in white and grey", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-002", brand: "Supreme", name: "Box Logo Hoodie", price: "$345.00", rating: 4.9,
|
||||
reviewCount: "521", imageSrc: "http://img.b2bpic.net/free-photo/afro-hair-style-doing-okay-gesture_140725-36572.jpg?_wi=2", imageAlt: "Supreme black box logo hoodie", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-003", brand: "Carhartt WIP", name: "Detroit Jacket", price: "$159.99", rating: 4.7,
|
||||
reviewCount: "189", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1617.jpg?_wi=2", imageAlt: "Carhartt WIP brown Detroit work jacket", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-004", brand: "Stüssy", name: "Classic T-Shirt", price: "$48.00", rating: 4.6,
|
||||
reviewCount: "276", imageSrc: "http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572721.jpg?_wi=2", imageAlt: "Stüssy white classic logo t-shirt", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-005", brand: "Adidas", name: "Ultra Boost 22", price: "$189.99", rating: 4.8,
|
||||
reviewCount: "437", imageSrc: "http://img.b2bpic.net/free-photo/side-view-sports-shoes_23-2147618070.jpg", imageAlt: "Adidas Ultra Boost 22 in black", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-006", brand: "The North Face", name: "Nuptse Jacket", price: "$229.99", rating: 4.9,
|
||||
reviewCount: "654", imageSrc: "http://img.b2bpic.net/free-photo/young-man-listening-music-headphones-close-up_23-2148381737.jpg?_wi=2", imageAlt: "The North Face Nuptse puffer jacket in black", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-007", brand: "Nike", name: "Jordan 1 Low OG", price: "$99.99", rating: 4.7,
|
||||
reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-legs-keds-going-down-stairs_176420-55081.jpg", imageAlt: "Jordan 1 Low OG sneaker", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-008", brand: "Supreme", name: "Arc Logo Cap", price: "$68.00", rating: 4.5,
|
||||
reviewCount: "95", imageSrc: "http://img.b2bpic.net/free-photo/young-man-putting-hand-cap-white-t-shirt-jacket-gray-cap-looking-serious-front-view_176474-84297.jpg", imageAlt: "Supreme arc logo baseball cap", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-009", brand: "Stüssy", name: "Fleece Pullover", price: "$98.00", rating: 4.8,
|
||||
reviewCount: "203", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-smiling-woman-stands-by-tree_8353-9397.jpg", imageAlt: "Stüssy fleece pullover in grey", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-010", brand: "Adidas", name: "Stan Smith Classic", price: "$89.99", rating: 4.9,
|
||||
reviewCount: "1,240", imageSrc: "http://img.b2bpic.net/free-photo/new-pair-white-sneakers-isolated-white_93675-130969.jpg?_wi=2", imageAlt: "Adidas Stan Smith white leather sneaker", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-011", brand: "The North Face", name: "Denali Fleece", price: "$99.99", rating: 4.8,
|
||||
reviewCount: "856", imageSrc: "http://img.b2bpic.net/free-photo/young-hipster-man-hiking-mountains-winter-vacation-traveling_285396-1955.jpg", imageAlt: "The North Face Denali fleece jacket", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-012", brand: "Carhartt WIP", name: "Simple Pant", price: "$54.99", rating: 4.7,
|
||||
reviewCount: "742", imageSrc: "http://img.b2bpic.net/free-photo/cropped-stock-photo-unrecognizable-woman-white-shirt-formal-black-straight-trousers-black-leather-heels-standing-street-fashion-model-dresscode-concept_132075-9150.jpg", imageAlt: "Carhartt WIP simple pant in black", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "prod-013", brand: "Vans", name: "Old Skool", price: "$65.00", rating: 4.9,
|
||||
reviewCount: "1,567", imageSrc: "http://img.b2bpic.net/free-photo/people-80s-aesthetic-summer-clothing_23-2151016254.jpg", imageAlt: "Vans Old Skool classic skateboard shoe", isFavorited: false,
|
||||
},
|
||||
];
|
||||
|
||||
const selectedProductData = selectedProduct
|
||||
? allProducts.find((p) => p.id === selectedProduct)
|
||||
: null;
|
||||
|
||||
const renderStars = (rating: number) => {
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<svg
|
||||
key={i}
|
||||
className={`w-4 h-4 ${
|
||||
i < Math.floor(rating)
|
||||
? "fill-yellow-400 text-yellow-400"
|
||||
: "fill-gray-300 text-gray-300"
|
||||
}`}
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="garraagarmzz"
|
||||
button={{
|
||||
text: "Cart", href: "/products"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
buttonClassName="bg-blue-500 hover:bg-blue-600"
|
||||
buttonTextClassName="text-white font-semibold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Mobile Filter Toggle */}
|
||||
<div className="md:hidden sticky top-20 z-40 bg-opacity-95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800">
|
||||
<div className="flex gap-2 p-4 justify-center">
|
||||
<button
|
||||
onClick={() => setIsMobileFilterOpen(!isMobileFilterOpen)}
|
||||
className="flex-1 flex items-center justify-center gap-2 py-2 px-4 rounded-lg bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<Filter className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">Filter</span>
|
||||
</button>
|
||||
<button className="flex-1 flex items-center justify-center gap-2 py-2 px-4 rounded-lg bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors">
|
||||
<Search className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Product Grid Section */}
|
||||
<div id="products-grid" data-section="products-grid" className="w-full">
|
||||
<ProductCardTwo
|
||||
title="All Products"
|
||||
description="Browse our complete collection of premium fashion items. Use filters to refine your search."
|
||||
tag="Complete Collection"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
products={allProducts}
|
||||
buttons={[]}
|
||||
carouselMode="buttons"
|
||||
ariaLabel="Complete products catalog with mobile-first design"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Quick View Popup Modal */}
|
||||
{selectedProductData && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm p-4"
|
||||
onClick={() => setSelectedProduct(null)}
|
||||
>
|
||||
<div
|
||||
className="bg-white dark:bg-gray-900 rounded-lg shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={() => setSelectedProduct(null)}
|
||||
className="sticky top-0 right-0 z-10 p-4 float-right bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors"
|
||||
aria-label="Close quick view"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6">
|
||||
{/* Product Image */}
|
||||
<div className="flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg min-h-80 md:min-h-96">
|
||||
<img
|
||||
src={selectedProductData.imageSrc}
|
||||
alt={selectedProductData.imageAlt}
|
||||
className="w-full h-full object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Product Details */}
|
||||
<div className="flex flex-col justify-between py-2">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-blue-600 dark:text-blue-400 mb-1">
|
||||
{selectedProductData.brand}
|
||||
</p>
|
||||
<h2 className="text-2xl md:text-3xl font-bold mb-2">
|
||||
{selectedProductData.name}
|
||||
</h2>
|
||||
|
||||
{/* Rating */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
{renderStars(selectedProductData.rating)}
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{selectedProductData.rating} ({selectedProductData.reviewCount} reviews)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<div className="mb-6">
|
||||
<p className="text-4xl font-bold text-gray-900 dark:text-white">
|
||||
{selectedProductData.price}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Placeholder for Image Upload Section */}
|
||||
<div className="mb-6 p-4 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg text-center">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
📷 Additional product images
|
||||
</p>
|
||||
<div className="flex gap-2 justify-center">
|
||||
<div className="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-lg flex items-center justify-center">
|
||||
<span className="text-gray-400 text-xs">Click to add</span>
|
||||
</div>
|
||||
<div className="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-lg flex items-center justify-center">
|
||||
<span className="text-gray-400 text-xs">Click to add</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors">
|
||||
<ShoppingCart className="w-5 h-5" />
|
||||
Add to Cart
|
||||
</button>
|
||||
<button className="w-full border-2 border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 font-semibold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors">
|
||||
<Heart className="w-5 h-5" />
|
||||
Save for Later
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Product Card Click Handler - Overlay for Quick View Trigger */}
|
||||
<div className="hidden" id="quick-view-trigger">
|
||||
{allProducts.map((product) => (
|
||||
<button
|
||||
key={product.id}
|
||||
onClick={() => setSelectedProduct(product.id)}
|
||||
className="quick-view-btn"
|
||||
data-product-id={product.id}
|
||||
aria-label={`Quick view ${product.name}`}
|
||||
>
|
||||
<Eye className="w-5 h-5" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="garraagarmzz"
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,157 +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 ShippingAndReturnsPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ 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: "FAQ", id: "/faq" },
|
||||
{ name: "Shipping & Returns", id: "/shipping-and-returns" },
|
||||
{ name: "Privacy Policy", id: "/privacy-policy" },
|
||||
{ name: "Terms & Conditions", id: "/terms-and-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-and-returns" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy-policy" },
|
||||
{ label: "Terms & Conditions", href: "/terms-and-conditions" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
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-section" data-section="shipping-returns-section">
|
||||
<LegalSection
|
||||
layout="page"
|
||||
title="Shipping & Returns Policy"
|
||||
subtitle="Learn about our shipping options and return procedures"
|
||||
sections={[
|
||||
{
|
||||
heading: "Shipping Information", content: [
|
||||
{
|
||||
type: "paragraph", text: "At garraagarmzz, we offer fast and reliable shipping to ensure your orders arrive safely and on time. We provide multiple shipping options to meet your needs."},
|
||||
{
|
||||
type: "numbered-list", items: [
|
||||
"Standard Shipping: 5-7 business days (Free for orders over $50)", "Express Shipping: 2-3 business days ($15.99)", "Overnight Shipping: 1 business day ($29.99)", "International Shipping: 10-21 business days (rates vary by location)"],
|
||||
},
|
||||
{
|
||||
type: "paragraph", text: "All orders are processed within 24 hours of placement. You will receive a tracking number via email once your order has shipped."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Return Policy", content: [
|
||||
{
|
||||
type: "paragraph", text: "We want you to be completely satisfied with your purchase. If for any reason you are not satisfied, we offer a hassle-free 30-day return policy."},
|
||||
{
|
||||
type: "heading-list", items: [
|
||||
"Return Eligibility: Items must be unworn, unwashed, and in original condition with all tags attached", "Return Window: Returns must be initiated within 30 days of purchase", "Domestic Returns: Free shipping labels are provided for US customers", "International Returns: Return shipping costs are the responsibility of the customer"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Return Process", content: [
|
||||
{
|
||||
type: "paragraph", text: "Follow these simple steps to initiate a return:"},
|
||||
{
|
||||
type: "numbered-list", items: [
|
||||
"Log into your account and select 'Return Item'", "Choose the items you wish to return and provide a reason", "Print the shipping label or arrange pickup", "Pack the items securely in their original packaging", "Ship the package back to us", "Once received and inspected, your refund will be processed within 5-7 business days"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Refunds", content: [
|
||||
{
|
||||
type: "paragraph", text: "Refunds are processed to the original payment method. The time it takes for the refund to appear in your account depends on your financial institution and may take up to 5-10 business days."},
|
||||
{
|
||||
type: "paragraph", text: "Shipping fees are non-refundable unless the return is due to our error or a defective product."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Defective or Damaged Items", content: [
|
||||
{
|
||||
type: "paragraph", text: "If you receive a defective or damaged item, please contact our customer service team immediately. We will arrange a replacement or full refund at no cost to you. Please provide photos of the damage for our records."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Contact Support", content: [
|
||||
{
|
||||
type: "paragraph", text: "For questions about shipping, returns, or to initiate a return, please contact our customer service team at support@garraagarmzz.com or call 1-800-GARRAAG."},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -14,6 +14,9 @@ export default function ShippingReturnsPage() {
|
||||
{ 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 = [
|
||||
@@ -36,7 +39,7 @@ export default function ShippingReturnsPage() {
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/shipping-returns" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
@@ -51,6 +54,90 @@ export default function ShippingReturnsPage() {
|
||||
},
|
||||
];
|
||||
|
||||
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"
|
||||
@@ -78,79 +165,12 @@ export default function ShippingReturnsPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shipping-returns-section" data-section="shipping-returns-section">
|
||||
<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={[
|
||||
{
|
||||
heading: "Shipping Information", content: [
|
||||
{
|
||||
type: "paragraph", text: "garraagarmzz is committed to delivering your order quickly and safely. We offer multiple shipping options to meet your needs."},
|
||||
{
|
||||
type: "numbered-list", items: [
|
||||
"Standard Shipping: 5-7 business days - FREE for orders over $100", "Express Shipping: 2-3 business days - $15.99", "Overnight Shipping: 1 business day - $29.99", "International Shipping: 7-14 business days - Rates vary by location"],
|
||||
},
|
||||
{
|
||||
type: "paragraph", text: "Orders are processed within 24 hours of placement. You will receive a tracking number via email as soon as your order ships."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Return Policy", content: [
|
||||
{
|
||||
type: "paragraph", text: "We want you to be completely satisfied with your purchase. If you're not happy with an item, we offer hassle-free returns within 30 days of delivery."},
|
||||
{
|
||||
type: "numbered-list", items: [
|
||||
"Return window: 30 days from delivery date", "Items must be unworn, unwashed, and in original condition", "All original tags and packaging must be intact", "Return shipping is FREE within the United States", "International returns may incur shipping costs", "Refunds are processed within 5-7 business days of receipt"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "How to Initiate a Return", content: [
|
||||
{
|
||||
type: "numbered-list", items: [
|
||||
"Contact our customer service team at support@garraagarmzz.com with your order number", "Receive your return authorization (RA) number and return shipping label", "Pack your item securely in its original packaging", "Print and attach the provided shipping label", "Drop off at any authorized shipping location", "Your refund will be issued once we receive and inspect the item"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Exchanges", content: [
|
||||
{
|
||||
type: "paragraph", text: "Need a different size or color? We offer free exchanges within 30 days of purchase."},
|
||||
{
|
||||
type: "numbered-list", items: [
|
||||
"Email us at support@garraagarmzz.com with your order number and desired size/color", "We'll send you a prepaid return label", "Return your original item and we'll ship your exchange at no additional cost", "Processing time for exchanges is 5-7 business days"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Damaged or Defective Items", content: [
|
||||
{
|
||||
type: "paragraph", text: "If you receive a damaged or defective item, please contact us immediately with photos of the damage."},
|
||||
{
|
||||
type: "paragraph", text: "We will provide a full refund or replacement at no cost, including return shipping. Our team will respond within 24 hours to resolve the issue."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Non-Returnable Items", content: [
|
||||
{
|
||||
type: "paragraph", text: "The following items cannot be returned:"},
|
||||
{
|
||||
type: "list", items: [
|
||||
"Items that show signs of wear or use", "Items without original tags or packaging", "Items purchased on final sale or clearance", "Customized or personalized items", "Items purchased more than 30 days ago"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Contact Us", content: [
|
||||
{
|
||||
type: "paragraph", text: "Have questions about shipping or returns? Our customer service team is here to help."},
|
||||
{
|
||||
type: "paragraph", text: "Email: support@garraagarmzz.com | Phone: 1-800-GARRAAG | Hours: Mon-Fri, 9 AM - 5 PM EST"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
sections={shippingReturnsSections as any}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -164,4 +184,4 @@ export default function ShippingReturnsPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,376 +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 { ChevronLeft, Heart, ShoppingCart, Check } from "lucide-react";
|
||||
|
||||
interface Product {
|
||||
id: string;
|
||||
name: string;
|
||||
brand: string;
|
||||
price: number;
|
||||
category: string;
|
||||
sizes: string[];
|
||||
stock: number;
|
||||
image: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
// Mock product data - in production this would come from a database or API
|
||||
const PRODUCTS_MAP: Record<string, Product> = {
|
||||
"prod-001": {
|
||||
id: "prod-001", name: "Air Max 90 Classic", brand: "Nike", price: 129.99,
|
||||
category: "Sneakers", sizes: ["6", "7", "8", "9", "10", "11", "12", "13"],
|
||||
stock: 15,
|
||||
image: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2", description: "Classic Nike Air Max 90 in white and grey leather."},
|
||||
"prod-002": {
|
||||
id: "prod-002", name: "Box Logo Hoodie", brand: "Supreme", price: 345.0,
|
||||
category: "Hoodies", sizes: ["XS", "S", "M", "L", "XL", "XXL"],
|
||||
stock: 8,
|
||||
image: "http://img.b2bpic.net/free-photo/afro-hair-style-doing-okay-gesture_140725-36572.jpg?_wi=2", description: "Supreme box logo hoodie in black."},
|
||||
"prod-003": {
|
||||
id: "prod-003", name: "Detroit Jacket", brand: "Carhartt WIP", price: 159.99,
|
||||
category: "Jackets", sizes: ["XS", "S", "M", "L", "XL"],
|
||||
stock: 12,
|
||||
image: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1617.jpg?_wi=2", description: "Carhartt WIP brown Detroit work jacket."},
|
||||
"prod-004": {
|
||||
id: "prod-004", name: "Classic T-Shirt", brand: "Stüssy", price: 48.0,
|
||||
category: "T-Shirts", sizes: ["XS", "S", "M", "L", "XL", "XXL"],
|
||||
stock: 24,
|
||||
image: "http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572721.jpg?_wi=2", description: "Stüssy white classic logo t-shirt."},
|
||||
"prod-005": {
|
||||
id: "prod-005", name: "Ultra Boost 22", brand: "Adidas", price: 189.99,
|
||||
category: "Sneakers", sizes: ["6", "7", "8", "9", "10", "11", "12"],
|
||||
stock: 10,
|
||||
image: "http://img.b2bpic.net/free-photo/side-view-sports-shoes_23-2147618070.jpg", description: "Adidas Ultra Boost 22 in black."},
|
||||
};
|
||||
|
||||
export default function ProductDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: { productId: string };
|
||||
}) {
|
||||
const product = PRODUCTS_MAP[params.productId];
|
||||
const [selectedSize, setSelectedSize] = useState<string | null>(null);
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [isFavorited, setIsFavorited] = useState(false);
|
||||
const [addedToCart, setAddedToCart] = 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: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
if (!product) {
|
||||
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 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold mb-4">Product Not Found</h1>
|
||||
<Link
|
||||
href="/shop"
|
||||
className="text-primary-cta hover:underline font-semibold"
|
||||
>
|
||||
Back to Shop
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="garraagarmzz"
|
||||
copyrightText="© 2025 garraagarmzz. All rights reserved."
|
||||
columns={footerColumns}
|
||||
ariaLabel="Site footer with navigation and company information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const handleAddToCart = () => {
|
||||
setAddedToCart(true);
|
||||
setTimeout(() => setAddedToCart(false), 2000);
|
||||
};
|
||||
|
||||
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-background to-card">
|
||||
<div className="max-w-7xl mx-auto px-4 py-8">
|
||||
{/* Breadcrumb */}
|
||||
<Link
|
||||
href="/shop"
|
||||
className="inline-flex items-center gap-2 text-primary-cta hover:text-primary-cta/80 transition mb-8"
|
||||
>
|
||||
<ChevronLeft size={20} />
|
||||
Back to Shop
|
||||
</Link>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Product Image */}
|
||||
<div className="flex items-start">
|
||||
<div className="w-full bg-card border border-accent/20 rounded-lg overflow-hidden">
|
||||
<img
|
||||
src={product.image}
|
||||
alt={product.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Details */}
|
||||
<div className="flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<p className="text-sm text-primary-cta font-semibold uppercase mb-2">
|
||||
{product.category}
|
||||
</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-2">
|
||||
{product.name}
|
||||
</h1>
|
||||
<p className="text-xl text-foreground/70 mb-4">{product.brand}</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-4xl font-bold text-foreground">
|
||||
${product.price.toFixed(2)}
|
||||
</span>
|
||||
{product.stock > 0 ? (
|
||||
<span className="text-green-600 font-semibold">In Stock</span>
|
||||
) : (
|
||||
<span className="text-red-600 font-semibold">Out of Stock</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="mb-8 pb-8 border-b border-accent/20">
|
||||
<p className="text-foreground/80 leading-relaxed">
|
||||
{product.description}
|
||||
</p>
|
||||
<div className="mt-4 text-sm text-foreground/60">
|
||||
<p>• 100% Authentic Product</p>
|
||||
<p>• Free shipping on orders over $100</p>
|
||||
<p>• 30-day money-back guarantee</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Size Selection */}
|
||||
<div className="mb-8">
|
||||
<label className="block text-sm font-semibold text-foreground mb-4">
|
||||
Select Size
|
||||
</label>
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
{product.sizes.map((size) => (
|
||||
<button
|
||||
key={size}
|
||||
onClick={() => setSelectedSize(size)}
|
||||
className={`py-3 px-2 rounded-lg border-2 transition font-semibold text-sm ${
|
||||
selectedSize === size
|
||||
? "border-primary-cta bg-primary-cta text-white"
|
||||
: "border-accent/20 bg-card hover:border-primary-cta/50 text-foreground"
|
||||
}`}
|
||||
>
|
||||
{size}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quantity Selection */}
|
||||
<div className="mb-8">
|
||||
<label className="block text-sm font-semibold text-foreground mb-4">
|
||||
Quantity
|
||||
</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setQuantity(Math.max(1, quantity - 1))}
|
||||
className="px-4 py-2 bg-card border border-accent/20 rounded-lg hover:border-primary-cta/50 transition"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<span className="w-12 text-center font-semibold text-foreground">
|
||||
{quantity}
|
||||
</span>
|
||||
<button
|
||||
onClick={() =>
|
||||
setQuantity(Math.min(product.stock, quantity + 1))
|
||||
}
|
||||
className="px-4 py-2 bg-card border border-accent/20 rounded-lg hover:border-primary-cta/50 transition"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
disabled={!selectedSize || product.stock === 0 || addedToCart}
|
||||
className={`w-full py-4 rounded-lg font-semibold flex items-center justify-center gap-2 transition ${
|
||||
addedToCart
|
||||
? "bg-green-600 text-white"
|
||||
: product.stock === 0
|
||||
? "bg-foreground/30 text-foreground/50 cursor-not-allowed"
|
||||
: "bg-primary-cta text-white hover:bg-primary-cta/90"
|
||||
}`}
|
||||
>
|
||||
{addedToCart ? (
|
||||
<>
|
||||
<Check size={20} />
|
||||
Added to Cart
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ShoppingCart size={20} />
|
||||
Add to Cart
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsFavorited(!isFavorited)}
|
||||
className={`w-full py-4 rounded-lg font-semibold flex items-center justify-center gap-2 transition ${
|
||||
isFavorited
|
||||
? "bg-red-600/20 text-red-600 border border-red-600/50"
|
||||
: "bg-card border border-accent/20 text-foreground hover:border-primary-cta/50"
|
||||
}`}
|
||||
>
|
||||
<Heart size={20} fill={isFavorited ? "currentColor" : "none"} />
|
||||
{isFavorited ? "Remove from Favorites" : "Add to Favorites"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!selectedSize && product.stock > 0 && (
|
||||
<p className="text-sm text-amber-600 mt-4">Please select a size</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Admin Placeholder Section */}
|
||||
<div className="mt-16 pt-12 border-t border-accent/20">
|
||||
<div className="bg-background/50 border border-accent/20 rounded-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">Admin Panel - Product Management</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-foreground/70">
|
||||
<div className="bg-card p-4 rounded border border-accent/20">
|
||||
<p className="font-semibold text-foreground mb-2">Product Image Upload</p>
|
||||
<p className="text-xs">Admin can upload/replace product images here</p>
|
||||
</div>
|
||||
<div className="bg-card p-4 rounded border border-accent/20">
|
||||
<p className="font-semibold text-foreground mb-2">Title & Description</p>
|
||||
<p className="text-xs">Admin can edit product title and description</p>
|
||||
</div>
|
||||
<div className="bg-card p-4 rounded border border-accent/20">
|
||||
<p className="font-semibold text-foreground mb-2">Size Options</p>
|
||||
<p className="text-xs">Admin can add/remove/manage available sizes</p>
|
||||
</div>
|
||||
<div className="bg-card p-4 rounded border border-accent/20">
|
||||
<p className="font-semibold text-foreground mb-2">Stock & Pricing</p>
|
||||
<p className="text-xs">Admin can update stock levels and prices</p>
|
||||
</div>
|
||||
</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,12 +1,11 @@
|
||||
"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 FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import ProductCatalogItem from "@/components/ecommerce/productCatalog/ProductCatalogItem";
|
||||
import { ChevronDown, X } from "lucide-react";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
export default function ShopPage() {
|
||||
const navItems = [
|
||||
@@ -54,117 +53,123 @@ export default function ShopPage() {
|
||||
},
|
||||
];
|
||||
|
||||
// Product data
|
||||
const allProducts = [
|
||||
{
|
||||
id: "prod-001", brand: "Nike", name: "Air Max 90 Classic", price: "$129.99", rating: 4.8,
|
||||
reviewCount: "342", imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2", imageAlt: "Nike Air Max 90 sneaker in white and grey", category: "Shoes", size: ["6", "7", "8", "9", "10", "11", "12"],
|
||||
stock: 45,
|
||||
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", 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", category: "Tops", size: ["XS", "S", "M", "L", "XL", "XXL"],
|
||||
stock: 12,
|
||||
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", 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", category: "Jackets", size: ["XS", "S", "M", "L", "XL"],
|
||||
stock: 28,
|
||||
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", 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", category: "Tops", size: ["XS", "S", "M", "L", "XL", "XXL"],
|
||||
stock: 156,
|
||||
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", 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", category: "Shoes", size: ["6", "7", "8", "9", "10", "11", "12", "13"],
|
||||
stock: 34,
|
||||
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", 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", category: "Jackets", size: ["XS", "S", "M", "L", "XL", "XXL"],
|
||||
stock: 19,
|
||||
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", 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", category: "Shoes", size: ["6", "7", "8", "9", "10", "11"],
|
||||
stock: 67,
|
||||
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", 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", category: "Accessories", size: ["One Size"],
|
||||
stock: 89,
|
||||
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", 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", category: "Tops", size: ["XS", "S", "M", "L", "XL"],
|
||||
stock: 41,
|
||||
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", 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", category: "Shoes", size: ["5", "6", "7", "8", "9", "10", "11", "12"],
|
||||
stock: 123,
|
||||
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", 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", category: "Jackets", size: ["S", "M", "L", "XL", "XXL"],
|
||||
stock: 54,
|
||||
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", 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", category: "Bottoms", size: ["28", "30", "32", "34", "36", "38"],
|
||||
stock: 76,
|
||||
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", 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", category: "Shoes", size: ["5", "6", "7", "8", "9", "10", "11", "12"],
|
||||
stock: 92,
|
||||
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,
|
||||
},
|
||||
];
|
||||
|
||||
const categories = ["All", "Shoes", "Tops", "Jackets", "Bottoms", "Accessories"];
|
||||
// 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: "Under $50", min: 0, max: 50 },
|
||||
{ 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 },
|
||||
];
|
||||
|
||||
const [selectedCategory, setSelectedCategory] = useState("All");
|
||||
const [selectedPriceRange, setSelectedPriceRange] = useState(null);
|
||||
const [selectedSizes, setSelectedSizes] = useState([]);
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
// Parse price helper
|
||||
const parsePrice = (priceStr: string): number => {
|
||||
return parseFloat(priceStr.replace(/[$]/g, ""));
|
||||
};
|
||||
|
||||
// Filter products
|
||||
const filteredProducts = useMemo(() => {
|
||||
return allProducts.filter((product) => {
|
||||
const categoryMatch = selectedCategory === "All" || product.category === selectedCategory;
|
||||
|
||||
let priceMatch = true;
|
||||
if (selectedPriceRange !== null) {
|
||||
const priceNum = parseFloat(product.price.replace("$", ""));
|
||||
priceMatch = priceNum >= selectedPriceRange.min && priceNum <= selectedPriceRange.max;
|
||||
}
|
||||
|
||||
let sizeMatch = true;
|
||||
if (selectedSizes.length > 0) {
|
||||
sizeMatch = selectedSizes.some((size) => product.size.includes(size));
|
||||
}
|
||||
|
||||
return categoryMatch && priceMatch && sizeMatch;
|
||||
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;
|
||||
});
|
||||
}, [selectedCategory, selectedPriceRange, selectedSizes]);
|
||||
}, [searchValue, selectedCategory, selectedSize, priceRange]);
|
||||
|
||||
const toggleSize = (size) => {
|
||||
setSelectedSizes((prev) =>
|
||||
prev.includes(size) ? prev.filter((s) => s !== size) : [...prev, size]
|
||||
);
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
setSelectedCategory("All");
|
||||
setSelectedPriceRange(null);
|
||||
setSelectedSizes([]);
|
||||
};
|
||||
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
|
||||
@@ -193,153 +198,24 @@ export default function ShopPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="pt-24 pb-20">
|
||||
<div className="max-w-7xl mx-auto px-4 md:px-6">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-2">Shop All Products</h1>
|
||||
<p className="text-lg text-gray-600">Browse our curated collection of premium fashion items</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-6">
|
||||
{/* Sidebar Filters */}
|
||||
<aside className={`w-full md:w-64 flex-shrink-0 ${
|
||||
showFilters ? "block" : "hidden md:block"
|
||||
}`}>
|
||||
<div className="bg-white rounded-lg p-6 sticky top-24 max-h-[calc(100vh-120px)] overflow-y-auto">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-xl font-bold">Filters</h2>
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="text-sm text-blue-600 hover:text-blue-700 underline"
|
||||
>
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="mb-8">
|
||||
<h3 className="font-semibold mb-3 text-sm uppercase tracking-wide">Category</h3>
|
||||
<div className="space-y-2">
|
||||
{categories.map((category) => (
|
||||
<label key={category} className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="category"
|
||||
value={category}
|
||||
checked={selectedCategory === category}
|
||||
onChange={() => setSelectedCategory(category)}
|
||||
className="w-4 h-4 mr-3"
|
||||
/>
|
||||
<span className="text-sm">{category}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price Filter */}
|
||||
<div className="mb-8">
|
||||
<h3 className="font-semibold mb-3 text-sm uppercase tracking-wide">Price Range</h3>
|
||||
<div className="space-y-2">
|
||||
{priceRanges.map((range, idx) => (
|
||||
<label key={idx} className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="price"
|
||||
checked={selectedPriceRange === range}
|
||||
onChange={() => setSelectedPriceRange(range)}
|
||||
className="w-4 h-4 mr-3"
|
||||
/>
|
||||
<span className="text-sm">{range.label}</span>
|
||||
</label>
|
||||
))}
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="price"
|
||||
checked={selectedPriceRange === null}
|
||||
onChange={() => setSelectedPriceRange(null)}
|
||||
className="w-4 h-4 mr-3"
|
||||
/>
|
||||
<span className="text-sm">All Prices</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Size Filter */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-3 text-sm uppercase tracking-wide">Size</h3>
|
||||
<div className="space-y-2">
|
||||
{["XS", "S", "M", "L", "XL", "XXL", "One Size", "5", "6", "7", "8", "9", "10", "11", "12"].map((size) => (
|
||||
<label key={size} className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedSizes.includes(size)}
|
||||
onChange={() => toggleSize(size)}
|
||||
className="w-4 h-4 mr-3"
|
||||
/>
|
||||
<span className="text-sm">{size}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Products Grid */}
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between items-center mb-6 md:hidden">
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className="flex items-center gap-2 px-4 py-2 border rounded-lg"
|
||||
>
|
||||
<ChevronDown size={20} />
|
||||
Filters
|
||||
</button>
|
||||
<span className="text-sm text-gray-600">{filteredProducts.length} products</span>
|
||||
</div>
|
||||
<div className="hidden md:block mb-6">
|
||||
<span className="text-sm text-gray-600">{filteredProducts.length} products found</span>
|
||||
</div>
|
||||
|
||||
{filteredProducts.length > 0 ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredProducts.map((product) => (
|
||||
<Link
|
||||
key={product.id}
|
||||
href={`/product/${product.id}`}
|
||||
className="group"
|
||||
>
|
||||
<ProductCatalogItem
|
||||
product={{
|
||||
id: product.id,
|
||||
category: product.category,
|
||||
name: product.name,
|
||||
price: product.price,
|
||||
rating: product.rating,
|
||||
reviewCount: product.reviewCount,
|
||||
imageSrc: product.imageSrc,
|
||||
imageAlt: product.imageAlt,
|
||||
}}
|
||||
className="h-full"
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-lg text-gray-600">No products found matching your filters.</p>
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<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>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
@@ -351,4 +227,4 @@ export default function ShopPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,191 +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 TermsAndConditionsPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ 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: "FAQ", id: "/faq" },
|
||||
{ name: "Shipping & Returns", id: "/shipping-and-returns" },
|
||||
{ name: "Privacy Policy", id: "/privacy-policy" },
|
||||
{ name: "Terms & Conditions", id: "/terms-and-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-and-returns" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy-policy" },
|
||||
{ label: "Terms & Conditions", href: "/terms-and-conditions" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
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-section" data-section="terms-conditions-section">
|
||||
<LegalSection
|
||||
layout="page"
|
||||
title="Terms & Conditions"
|
||||
subtitle="Please read these terms carefully before using our website"
|
||||
sections={[
|
||||
{
|
||||
heading: "1. Acceptance of Terms", content: [
|
||||
{
|
||||
type: "paragraph", text: "By accessing and using the garraagarmzz website and services, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "2. Use License", content: [
|
||||
{
|
||||
type: "paragraph", text: "Permission is granted to temporarily download one copy of the materials (information or software) on the garraagarmzz website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, and under this license you may not:"},
|
||||
{
|
||||
type: "list", items: [
|
||||
"Modify or copy the materials", "Use the materials for any commercial purpose or for any public display", "Attempt to reverse engineer, decompile, or disassemble any software contained on the website", "Remove any copyright or other proprietary notations from the materials", "Transfer the materials to another person or 'mirror' the materials on any other server", "Use the materials as part of any scheme to compete with garraagarmzz"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "3. Disclaimer of Warranties", content: [
|
||||
{
|
||||
type: "paragraph", text: "The materials on garraagarmzz are provided on an 'as is' basis. garraagarmzz makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "4. Limitations of Liability", content: [
|
||||
{
|
||||
type: "paragraph", text: "In no event shall garraagarmzz or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on the garraagarmzz website, even if garraagarmzz or an authorized representative has been notified orally or in writing of the possibility of such damage."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "5. Accuracy of Materials", content: [
|
||||
{
|
||||
type: "paragraph", text: "The materials appearing on the garraagarmzz website could include technical, typographical, or photographic errors. garraagarmzz does not warrant that any of the materials on the website are accurate, complete, or current. garraagarmzz may make changes to the materials contained on the website at any time without notice."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "6. Materials and Copyright", content: [
|
||||
{
|
||||
type: "paragraph", text: "The materials appearing on the garraagarmzz website are copyrighted. No copying or reproduction of the text or images is permitted without prior written consent from garraagarmzz. Unauthorized use of any content may violate copyright, trademark, and other intellectual property laws."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "7. Links to Third-Party Websites", content: [
|
||||
{
|
||||
type: "paragraph", text: "garraagarmzz has not reviewed all of the sites linked to its website and is not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement by garraagarmzz of the site. Use of any such linked website is at the user's own risk."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "8. Modifications to Terms", content: [
|
||||
{
|
||||
type: "paragraph", text: "garraagarmzz may revise these terms and conditions for the website at any time without notice. By using this website, you are agreeing to be bound by the then current version of these terms and conditions."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "9. Product Information", content: [
|
||||
{
|
||||
type: "paragraph", text: "All product descriptions, prices, and availability information is subject to change without notice. We strive for accuracy but do not guarantee that all product information is complete or error-free. Images are for illustrative purposes and may not represent exact product appearance."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "10. Account Registration", content: [
|
||||
{
|
||||
type: "paragraph", text: "If you create an account on our website, you agree to provide accurate, current, and complete information. 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."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "11. User Conduct", content: [
|
||||
{
|
||||
type: "paragraph", text: "You agree not to use the website in any way that:"},
|
||||
{
|
||||
type: "list", items: [
|
||||
"Is unlawful or fraudulent", "Violates any intellectual property rights", "Is abusive, offensive, or contains profanity", "Attempts to gain unauthorized access to our systems", "Disrupts the normal operation of the website", "Spreads malware or malicious code"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "12. Governing Law", content: [
|
||||
{
|
||||
type: "paragraph", text: "These terms and conditions are governed by and construed in accordance with the laws of the United States of America, and you irrevocably submit to the exclusive jurisdiction of the courts located in New York, USA."},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Contact Information", content: [
|
||||
{
|
||||
type: "paragraph", text: "If you have questions about these Terms & Conditions, please contact us at legal@garraagarmzz.com or mail your request to: garraagarmzz Legal Team, 123 Fashion Street, New York, NY 10001."},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</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,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
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() {
|
||||
@@ -14,15 +14,18 @@ export default function TermsConditionsPage() {
|
||||
{ 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: "/" },
|
||||
{ label: "New Arrivals", href: "/" },
|
||||
{ label: "Best Sellers", href: "/" },
|
||||
{ label: "Brands", href: "/" },
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "New Arrivals", href: "/shop" },
|
||||
{ label: "Best Sellers", href: "/shop" },
|
||||
{ label: "Brands", href: "/shop" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -35,7 +38,7 @@ export default function TermsConditionsPage() {
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping & Returns", href: "/" },
|
||||
{ label: "Shipping & Returns", href: "/shipping-returns" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Size Guide", href: "#" },
|
||||
{ label: "Track Order", href: "#" },
|
||||
@@ -43,7 +46,7 @@ export default function TermsConditionsPage() {
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Privacy Policy", href: "/privacy-policy" },
|
||||
{ label: "Terms & Conditions", href: "/terms-conditions" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
@@ -51,6 +54,140 @@ export default function TermsConditionsPage() {
|
||||
},
|
||||
];
|
||||
|
||||
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"
|
||||
@@ -66,9 +203,10 @@ export default function TermsConditionsPage() {
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="garraagarmzz"
|
||||
navItems={navItems}
|
||||
button={{ text: "Shop Now", href: "/" }}
|
||||
brandName="garraagarmzz"
|
||||
button={{
|
||||
text: "Shop Now", href: "/shop"}}
|
||||
animateOnLoad={true}
|
||||
className="bg-opacity-95"
|
||||
navItemClassName="text-sm font-medium"
|
||||
@@ -77,121 +215,13 @@ export default function TermsConditionsPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="terms-content" data-section="terms-content">
|
||||
<div className="mx-auto px-4 md:px-6 py-16 md:py-24 max-w-3xl">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-8 text-foreground">
|
||||
Terms & Conditions
|
||||
</h1>
|
||||
<p className="text-lg text-foreground/80 mb-8">
|
||||
Last updated: January 2025
|
||||
</p>
|
||||
|
||||
<div className="space-y-8 text-foreground/80">
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">1. Agreement to Terms</h2>
|
||||
<p>
|
||||
These Terms and Conditions constitute a legally binding agreement made between you, whether personally or on behalf of an entity ("you") and garraagarmzz ("we," "us," "our," or "Company"), concerning your access to and use of the garraagarmzz website. You agree that by accessing the Site, you have read, understood, and agree to be bound by all of these Terms and Conditions.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">2. User Representations</h2>
|
||||
<p className="mb-4">By using the Site, you represent and warrant that:</p>
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li>All registration information you submit is true, accurate, current, and complete.</li>
|
||||
<li>You will maintain the accuracy of such information and promptly update such registration information as necessary.</li>
|
||||
<li>You have the legal capacity and you agree to comply with these Terms and Conditions.</li>
|
||||
<li>You are not under the age of 18.</li>
|
||||
<li>You are not a competitor or anyone acting on behalf of a competitor.</li>
|
||||
<li>You will not access the Site for any reason other than lawful purposes.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">3. User Registration</h2>
|
||||
<p>
|
||||
If the Site offers user registration, you may be required to register with the Site. You agree to keep your password confidential and will be responsible for all use of your account and password. We reserve the right to remove, reclaim, or change a username you select if we determine, in our sole discretion, that such username is inappropriate, obscene, or otherwise objectionable.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">4. Prohibited Activities</h2>
|
||||
<p className="mb-4">You may not access or use the Site for any purpose other than that for which we make the Site available. The Site may not be used in connection with any commercial endeavors except those specifically endorsed or approved by us.</p>
|
||||
<p className="mb-4">Prohibited behavior includes:</p>
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li>Harassing or causing distress or inconvenience to any person.</li>
|
||||
<li>Disrupting the normal flow of dialogue within our Site.</li>
|
||||
<li>Attempting to gain unauthorized access to our systems.</li>
|
||||
<li>Making improper use of our support services or submitting false reports of abuse or misconduct.</li>
|
||||
<li>Unauthorized caching of content.</li>
|
||||
<li>Unauthorized data mining of content from the Site.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">5. User-Generated Contributions</h2>
|
||||
<p>
|
||||
The Site may invite you to chat, contribute to, or participate in blogs, message boards, online forums, and other functionality, and may provide you with the opportunity to create, submit, post, display, transmit, perform, publish, distribute, or broadcast content and materials to us or on the Site, including but not limited to text, writings, video, audio, photographs, graphics, comments, suggestions, or personal information or other material (collectively, "Contributions").
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">6. Product Information</h2>
|
||||
<p className="mb-4">
|
||||
We make every effort to display as accurately as possible the colors, features, specifications, and details of the products available on the Site. However, we do not warrant that any product description, pricing, or other content of any product sold on is accurate, complete, reliable, current, or error-free.
|
||||
</p>
|
||||
<p>
|
||||
We reserve the right to correct or update product information at any time without prior notice. Product information is subject to change, and we are under no obligation to update, maintain, or revise such information on the Site.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">7. Pricing and Availability</h2>
|
||||
<p>
|
||||
All products are subject to availability. We reserve the right to discontinue any product at any time, for any reason. Prices for all products are subject to change at our sole discretion, without notice. We shall have no liability or responsibility for any change in price or discontinuance of any product.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">8. Return Policy</h2>
|
||||
<p>
|
||||
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. For more information about our return process, please contact our customer service team.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">9. Limitation of Liability</h2>
|
||||
<p>
|
||||
IN NO EVENT SHALL GARRAAGARMZZ OR ITS SUPPLIERS BE LIABLE FOR ANY DAMAGES (INCLUDING, WITHOUT LIMITATION, DAMAGES FOR LOSS OF DATA OR PROFIT, OR DUE TO BUSINESS INTERRUPTION) ARISING OUT OF THE USE OR INABILITY TO USE THE MATERIALS ON GARRAAGARMZZ.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">10. Modifications and Interruptions</h2>
|
||||
<p>
|
||||
We reserve the right to modify or discontinue, temporarily or permanently, the Site (or any part thereof) with or without notice. You agree that we shall not be liable to you or to any third party for any modification, suspension, or discontinuance of the Site.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">11. Contact Information</h2>
|
||||
<p>
|
||||
If you have any questions about these Terms and Conditions, please contact us at:
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
garraagarmzz<br />
|
||||
Email: legal@garraagarmzz.com<br />
|
||||
Phone: 1-800-GARRAAGARMZZ
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 pt-8 border-t border-accent/20">
|
||||
<Link href="/" className="text-primary-cta hover:text-primary-cta/80 font-semibold">
|
||||
← Back to Home
|
||||
</Link>
|
||||
</div>
|
||||
</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">
|
||||
|
||||
Reference in New Issue
Block a user