260 lines
15 KiB
TypeScript
260 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { Mail, Package, Sparkles, Star, HelpCircle } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="aurora"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="HANGOVER"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Shop", id: "products" },
|
|
{ name: "Categories", id: "categories" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Cart", href: "#cart" }}
|
|
className="fixed top-4 left-4 right-4 z-50"
|
|
buttonClassName="bg-[var(--primary-cta)] text-[var(--primary-cta-text)] px-4 py-2 rounded-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="HANGOVER"
|
|
description="Bold streetwear designed for those who live fearlessly. Premium quality, authentic style."
|
|
buttons={[
|
|
{ text: "Shop Now", href: "#products" },
|
|
{ text: "Explore Collections", href: "#categories" }
|
|
]}
|
|
background={{ variant: "aurora" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/shallow-focus-two-black-men-standing-against-red-wall_181624-56204.jpg?_wi=1"
|
|
imageAlt="HANGOVER Streetwear Collection"
|
|
mediaAnimation="slide-up"
|
|
frameStyle="card"
|
|
className="relative w-full"
|
|
logoContainerClassName="mb-8"
|
|
logoClassName="text-black font-bold tracking-wider"
|
|
descriptionClassName="text-lg text-center md:text-right"
|
|
buttonContainerClassName="flex flex-col md:flex-row gap-4 mt-8 justify-center md:justify-end"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
title="Featured Products"
|
|
description="Curated selection of our most popular pieces. Limited quantities available."
|
|
tag="New Arrivals"
|
|
tagIcon={Sparkles}
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1", name: "Classic Black Denim", price: "2,500 MAD", variant: "Black • 3 Sizes", imageSrc: "http://img.b2bpic.net/free-photo/streetwear-fashion-man-with-skateboard_53876-98125.jpg", imageAlt: "Classic Black Denim Jeans", isFavorited: false
|
|
},
|
|
{
|
|
id: "2", name: "Premium Hoodie", price: "1,800 MAD", variant: "Charcoal • 4 Colors", imageSrc: "http://img.b2bpic.net/free-photo/shallow-focus-two-black-men-standing-against-red-wall_181624-56204.jpg?_wi=2", imageAlt: "Premium Streetwear Hoodie", isFavorited: false
|
|
},
|
|
{
|
|
id: "3", name: "Graphic T-Shirt", price: "800 MAD", variant: "White • 5 Designs", imageSrc: "http://img.b2bpic.net/free-photo/portrait-funny-crazy-glamor-stylish-smiling-beautiful-young-woman-model-bright-hipster-summer-casual-clothes-posing-street-iron-grating-blue-sky_158538-1923.jpg", imageAlt: "Graphic Streetwear T-Shirt", isFavorited: false
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "View All Products", href: "#all-products" }
|
|
]}
|
|
carouselMode="buttons"
|
|
className="py-20"
|
|
/>
|
|
</div>
|
|
|
|
<div id="categories" data-section="categories">
|
|
<ProductCardFour
|
|
title="Shop by Category"
|
|
description="Browse our complete collection organized by product type."
|
|
tag="All Collections"
|
|
tagIcon={Package}
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "cat-1", name: "Jeans", price: "From 2,000 MAD", variant: "10+ Styles Available", imageSrc: "http://img.b2bpic.net/free-photo/wide-assortment-jeans-hanging-store_627829-6053.jpg", imageAlt: "Jeans Collection"
|
|
},
|
|
{
|
|
id: "cat-2", name: "Hoodies", price: "From 1,500 MAD", variant: "8+ Colors", imageSrc: "http://img.b2bpic.net/free-photo/shallow-focus-two-black-men-standing-against-red-wall_181624-56204.jpg?_wi=3", imageAlt: "Hoodies Collection"
|
|
},
|
|
{
|
|
id: "cat-3", name: "T-Shirts", price: "From 700 MAD", variant: "15+ Designs", imageSrc: "http://img.b2bpic.net/free-photo/young-african-american-woman-with-dark-curly-hair-sunglasses-tshirt-pretty-woman-with-blond-hair-shirt-dreamily-looking-camera-while-spending-time-together_574295-5031.jpg", imageAlt: "T-Shirts Collection"
|
|
},
|
|
{
|
|
id: "cat-4", name: "Accessories", price: "From 500 MAD", variant: "Caps, Bags & More", imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-pink-hairs-going-from-shopping_114579-19327.jpg", imageAlt: "Accessories Collection"
|
|
}
|
|
]}
|
|
className="py-20"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="What Our Customers Say"
|
|
description="Real reviews from HANGOVER community members."
|
|
tag="Reviews"
|
|
tagIcon={Star}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
speed={40}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Ahmed Mohamed", handle: "@ahmedstyle", testimonial: "HANGOVER changed my entire wardrobe. The quality is insane and the COD option is so convenient. Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg?_wi=1", imageAlt: "Ahmed Mohamed"
|
|
},
|
|
{
|
|
id: "2", name: "Fatima Hassan", handle: "@fashionista_fh", testimonial: "Finally a streetwear brand that understands Morocco. Love the bold designs and reliable delivery.", imageSrc: "http://img.b2bpic.net/free-photo/head-shot-happy-beautiful-young-woman-posing-indoors-looking-camera-smiling_74855-10218.jpg?_wi=1", imageAlt: "Fatima Hassan"
|
|
},
|
|
{
|
|
id: "3", name: "Karim Benzema", handle: "@karim_kb", testimonial: "Been wearing HANGOVER for 3 months now. Best investment in my style. The customer service is amazing too.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-smiling-boy-cafe_23-2148436234.jpg", imageAlt: "Karim Benzema"
|
|
},
|
|
{
|
|
id: "4", name: "Nadia Saïdi", handle: "@nadiax_style", testimonial: "The fit, the comfort, the style - everything is perfect. Cash on delivery makes it so easy to shop.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-friendly-woman-holding-shopping-bags_1098-1574.jpg", imageAlt: "Nadia Saïdi"
|
|
},
|
|
{
|
|
id: "5", name: "Youssef Tarik", handle: "@youssefstyle", testimonial: "HANGOVER is the real deal. Premium quality without the premium price tag. Def a repeat customer.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg?_wi=2", imageAlt: "Youssef Tarik"
|
|
},
|
|
{
|
|
id: "6", name: "Leila Osman", handle: "@leila_fashion", testimonial: "Obsessed with my HANGOVER collection. The designs are original and the material feels expensive but affordable.", imageSrc: "http://img.b2bpic.net/free-photo/head-shot-happy-beautiful-young-woman-posing-indoors-looking-camera-smiling_74855-10218.jpg?_wi=2", imageAlt: "Leila Osman"
|
|
}
|
|
]}
|
|
className="py-20"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about HANGOVER."
|
|
tag="Help & Support"
|
|
tagIcon={HelpCircle}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How does Cash on Delivery work?", content: "When you place an order, you'll fill out a quick form with your name, city, and phone number. Our team will call to confirm. You pay when the package arrives at your doorstep. Simple and secure."
|
|
},
|
|
{
|
|
id: "2", title: "What cities do you deliver to in Morocco?", content: "We deliver to all major cities across Morocco including Casablanca, Rabat, Fes, Marrakech, Tangier, Agadir, and many more. Delivery typically takes 2-5 business days depending on location."
|
|
},
|
|
{
|
|
id: "3", title: "What's your return policy?", content: "We offer a 30-day money-back guarantee. If the item doesn't fit or you're not satisfied, contact us within 30 days for a full refund or exchange. No questions asked."
|
|
},
|
|
{
|
|
id: "4", title: "Do you offer international shipping?", content: "Currently, we ship within Morocco only. We're planning to expand internationally soon. Follow us on social media for announcements!"
|
|
},
|
|
{
|
|
id: "5", title: "How can I track my order?", content: "After placing your order, you'll receive a confirmation email with tracking details. You can also check your order status on our website or call our customer service team."
|
|
},
|
|
{
|
|
id: "6", title: "What payment methods do you accept?", content: "We only accept Cash on Delivery (COD) payments. You pay when you receive your package. No need for credit cards or online payments."
|
|
}
|
|
]}
|
|
className="py-20"
|
|
/>
|
|
</div>
|
|
|
|
<div id="newsletter" data-section="newsletter">
|
|
<ContactFaq
|
|
ctaTitle="Stay Connected"
|
|
ctaDescription="Subscribe to our newsletter for exclusive drops, promotions, and streetwear tips delivered to your inbox."
|
|
ctaButton={{ text: "Subscribe", href: "#newsletter" }}
|
|
ctaIcon={Mail}
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How often will I receive emails?", content: "We send newsletters 1-2 times per week with new drops, sales, and exclusive content. Unsubscribe anytime."
|
|
},
|
|
{
|
|
id: "2", title: "What kind of offers will I get?", content: "Subscribers get early access to new collections, exclusive discounts, and special event notifications."
|
|
},
|
|
{
|
|
id: "3", title: "Is my email safe?", content: "Yes! We never share your email with third parties. Your privacy is our priority."
|
|
}
|
|
]}
|
|
className="py-20"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Shop", items: [
|
|
{ label: "All Products", href: "#products" },
|
|
{ label: "Jeans", href: "#categories" },
|
|
{ label: "Hoodies", href: "#categories" },
|
|
{ label: "T-Shirts", href: "#categories" },
|
|
{ label: "Accessories", href: "#categories" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Blog", href: "#blog" },
|
|
{ label: "Careers", href: "#careers" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#privacy" },
|
|
{ label: "Refund Policy", href: "#refund" },
|
|
{ label: "Shipping Policy", href: "#shipping" },
|
|
{ label: "Terms & Conditions", href: "#terms" }
|
|
]
|
|
},
|
|
{
|
|
title: "Follow Us", items: [
|
|
{ label: "Instagram", href: "https://instagram.com/hangover" },
|
|
{ label: "Facebook", href: "https://facebook.com/hangover" },
|
|
{ label: "TikTok", href: "https://tiktok.com/@hangover" },
|
|
{ label: "Twitter", href: "https://twitter.com/hangover" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 HANGOVER. All rights reserved."
|
|
bottomRightText="Made for Streetwear Lovers."
|
|
className="bg-black text-white"
|
|
columnTitleClassName="font-bold text-lg mb-4"
|
|
columnItemClassName="text-sm hover:opacity-70 transition"
|
|
bottomContainerClassName="flex justify-between mt-8 pt-8 border-t border-gray-700"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|