398 lines
22 KiB
TypeScript
398 lines
22 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect } from "react";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import { Sparkles, Zap, Award, Star, HelpCircle, Mail } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
// Analytics tracking
|
|
useEffect(() => {
|
|
// Google Analytics
|
|
if (typeof window !== "undefined" && window.gtag) {
|
|
window.gtag("config", "GA_MEASUREMENT_ID");
|
|
window.gtag("event", "page_view", {
|
|
page_path: "/", page_title: "garraagarmzz - Home"});
|
|
}
|
|
|
|
// Track page load performance
|
|
if (typeof window !== "undefined" && window.performance) {
|
|
window.addEventListener("load", () => {
|
|
const perfData = window.performance.timing;
|
|
const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
|
|
if (window.gtag) {
|
|
window.gtag("event", "page_load_time", {
|
|
value: pageLoadTime,
|
|
event_category: "performance"});
|
|
}
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
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: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
// Newsletter signup handler with analytics
|
|
const handleNewsletterSubmit = (email: string) => {
|
|
if (typeof window !== "undefined" && window.gtag) {
|
|
window.gtag("event", "newsletter_signup", {
|
|
email_category: "newsletter", event_category: "engagement"});
|
|
}
|
|
// Send to backend or email service
|
|
console.log("Newsletter signup:", email);
|
|
};
|
|
|
|
// Product click tracking
|
|
const handleProductClick = (productId: string, productName: string) => {
|
|
if (typeof window !== "undefined" && window.gtag) {
|
|
window.gtag("event", "view_item", {
|
|
items: [
|
|
{
|
|
item_id: productId,
|
|
item_name: productName,
|
|
item_category: "products"},
|
|
],
|
|
});
|
|
}
|
|
};
|
|
|
|
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="hero-home" data-section="hero-home">
|
|
<HeroSplitDoubleCarousel
|
|
title="garraagarmzz"
|
|
description="Curated Fashion From The Best Brands. Discover premium streetwear, luxury apparel, and exclusive drops from the world's most coveted fashion labels."
|
|
tag="Premium Fashion Reseller"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-woman-dressed-white-dress-sitting-summer-open-air-theatre-chair-alone-spring-street-style-fashion-trend-accessories-traveling-with-backpack-skinny-legs-sandals_285396-4543.jpg?_wi=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"},
|
|
]}
|
|
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/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" },
|
|
{ text: "Browse Brands", href: "/shop" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
carouselPosition="right"
|
|
marqueeItems={[
|
|
{ type: "text-icon", text: "Nike", icon: Star },
|
|
{ type: "text-icon", text: "Adidas", icon: Star },
|
|
{ type: "text-icon", text: "Supreme", icon: Star },
|
|
{ type: "text-icon", text: "Stüssy", icon: Star },
|
|
{ type: "text-icon", text: "Carhartt", icon: Star },
|
|
{ type: "text-icon", text: "The North Face", icon: Star },
|
|
{ type: "text-icon", text: "Dickies", icon: Star },
|
|
{ type: "text-icon", text: "Balenciaga", icon: Star },
|
|
]}
|
|
marqueeSpeed={35}
|
|
showMarqueeCard={true}
|
|
ariaLabel="Hero section featuring garraagarmzz brand identity and featured products"
|
|
/>
|
|
</div>
|
|
|
|
<div id="featured-products-home" data-section="featured-products-home">
|
|
<ProductCardTwo
|
|
title="Featured Products"
|
|
description="Hand-picked selections from the world's most sought-after fashion brands."
|
|
tag="Curated Selection"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="bento-grid"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "prod-001", brand: "Nike", name: "Air Max 90 Classic", price: "$129.99", rating: 4.8,
|
|
reviewCount: "342", imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2", imageAlt: "Nike Air Max 90 sneaker in white and grey", isFavorited: false,
|
|
onProductClick: () => handleProductClick("prod-001", "Nike Air Max 90 Classic"),
|
|
},
|
|
{
|
|
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,
|
|
onProductClick: () => handleProductClick("prod-002", "Supreme Box Logo Hoodie"),
|
|
},
|
|
{
|
|
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,
|
|
onProductClick: () => handleProductClick("prod-003", "Carhartt WIP Detroit Jacket"),
|
|
},
|
|
{
|
|
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,
|
|
onProductClick: () => handleProductClick("prod-004", "Stüssy Classic T-Shirt"),
|
|
},
|
|
{
|
|
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,
|
|
onProductClick: () => handleProductClick("prod-005", "Adidas Ultra Boost 22"),
|
|
},
|
|
{
|
|
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,
|
|
onProductClick: () => handleProductClick("prod-006", "The North Face Nuptse Jacket"),
|
|
},
|
|
]}
|
|
buttons={[{ text: "View All", href: "/shop" }]}
|
|
buttonAnimation="slide-up"
|
|
carouselMode="buttons"
|
|
ariaLabel="Featured products carousel"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof-brands" data-section="social-proof-brands">
|
|
<SocialProofOne
|
|
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={true}
|
|
names={[
|
|
"Nike", "Adidas", "Supreme", "Stüssy", "Carhartt WIP", "The North Face", "Balenciaga", "Dickies", "Vans", "Converse"]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-vector/ballet-studio-logo-template-design_742173-17939.jpg", "http://img.b2bpic.net/free-vector/flat-design-outlet-stamp-collection_23-2149752880.jpg", "http://img.b2bpic.net/free-vector/flat-design-gratis-label-collection_23-2149889390.jpg", "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition_1284-52940.jpg", "http://img.b2bpic.net/free-vector/labor-day-badge-collection_23-2148094629.jpg", "http://img.b2bpic.net/free-vector/hand-drawn-adventure-badges-nature_23-2147543057.jpg", "http://img.b2bpic.net/free-vector/luxury-logo-design-template_23-2150881456.jpg", "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition-dark_1284-44291.jpg", "http://img.b2bpic.net/free-vector/set-drawings_1284-45834.jpg", "http://img.b2bpic.net/free-photo/view-skateboard-with-retro-memorabilia_23-2150583922.jpg"]}
|
|
buttons={[{ text: "Explore All Brands", href: "/shop" }]}
|
|
buttonAnimation="slide-up"
|
|
speed={40}
|
|
showCard={true}
|
|
ariaLabel="Partner brands marquee"
|
|
/>
|
|
</div>
|
|
|
|
<div id="new-arrivals-section" data-section="new-arrivals-section">
|
|
<ProductCardTwo
|
|
title="New Arrivals"
|
|
description="Latest drops and fresh releases added to our collection weekly."
|
|
tag="This Week"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="blur-reveal"
|
|
products={[
|
|
{
|
|
id: "prod-007", brand: "Nike", name: "Jordan 1 Low OG", price: "$99.99", rating: 4.7,
|
|
reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-legs-keds-going-down-stairs_176420-55081.jpg", imageAlt: "Jordan 1 Low OG sneaker", isFavorited: false,
|
|
onProductClick: () => handleProductClick("prod-007", "Jordan 1 Low OG"),
|
|
},
|
|
{
|
|
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,
|
|
onProductClick: () => handleProductClick("prod-008", "Supreme Arc Logo Cap"),
|
|
},
|
|
{
|
|
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,
|
|
onProductClick: () => handleProductClick("prod-009", "Stüssy Fleece Pullover"),
|
|
},
|
|
]}
|
|
buttons={[{ text: "See All New Items", href: "/shop" }]}
|
|
buttonAnimation="slide-up"
|
|
carouselMode="buttons"
|
|
ariaLabel="New arrivals section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="best-sellers-section" data-section="best-sellers-section">
|
|
<ProductCardTwo
|
|
title="Best Sellers"
|
|
description="Customer favorites and top-rated items from our collection."
|
|
tag="Most Popular"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="scale-rotate"
|
|
products={[
|
|
{
|
|
id: "prod-010", brand: "Adidas", name: "Stan Smith Classic", price: "$89.99", rating: 4.9,
|
|
reviewCount: "1,240", imageSrc: "http://img.b2bpic.net/free-photo/new-pair-white-sneakers-isolated-white_93675-130969.jpg?_wi=2", imageAlt: "Adidas Stan Smith white leather sneaker", isFavorited: false,
|
|
onProductClick: () => handleProductClick("prod-010", "Adidas Stan Smith Classic"),
|
|
},
|
|
{
|
|
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,
|
|
onProductClick: () => handleProductClick("prod-011", "The North Face Denali Fleece"),
|
|
},
|
|
{
|
|
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,
|
|
onProductClick: () => handleProductClick("prod-012", "Carhartt WIP Simple Pant"),
|
|
},
|
|
{
|
|
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,
|
|
onProductClick: () => handleProductClick("prod-013", "Vans Old Skool"),
|
|
},
|
|
]}
|
|
buttons={[{ text: "Shop Best Sellers", href: "/shop" }]}
|
|
buttonAnimation="slide-up"
|
|
carouselMode="buttons"
|
|
ariaLabel="Best sellers collection"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="garraagarmzz has the best selection of authentic streetwear. Every piece is carefully curated and the customer service is exceptional. Highly recommend!"
|
|
rating={5}
|
|
author="Jordan Mitchell"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Jordan Mitchell"},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Customer testimonial section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="newsletter-contact" data-section="newsletter-contact">
|
|
<ContactCenter
|
|
tag="Stay Connected"
|
|
title="Join Our Community"
|
|
description="Subscribe to our newsletter for exclusive drops, early access to new collections, and special offers."
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "animated-grid" }}
|
|
useInvertedBackground={true}
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Subscribe"
|
|
termsText="By subscribing, you agree to receive marketing emails. Unsubscribe at any time."
|
|
onSubmit={handleNewsletterSubmit}
|
|
ariaLabel="Newsletter signup section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq-section" data-section="faq-section">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our products, shipping, and returns."
|
|
tag="Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
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-002", title: "What is your return policy?", content: "We offer a 30-day return policy on all items. Products must be unworn, unwashed, and in original packaging with all tags attached. Returns are free within the US."},
|
|
{
|
|
id: "faq-003", title: "How long does shipping take?", content: "Standard shipping takes 5-7 business days. Express shipping (2-3 business days) and overnight shipping options are available at checkout. Orders are processed within 24 hours."},
|
|
{
|
|
id: "faq-004", title: "Do you ship internationally?", content: "Yes, we ship to most countries worldwide. International shipping rates and delivery times vary by location. Customs duties may apply depending on your country."},
|
|
{
|
|
id: "faq-005", title: "What payment methods do you accept?", content: "We accept all major credit cards, PayPal, Apple Pay, Google Pay, and Klarna. All payments are secured with SSL encryption."},
|
|
{
|
|
id: "faq-006", title: "Can I track my order?", content: "Yes, tracking information is sent to your email immediately after your order ships. You can also track your order in your account dashboard."},
|
|
]}
|
|
buttons={[{ text: "View Full Policy", href: "/shop" }]}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="FAQ section"
|
|
/>
|
|
</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>
|
|
);
|
|
}
|