262 lines
12 KiB
TypeScript
262 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { ArrowLeftRight, Award, CheckCircle, CircleDollarSign, Facebook, Heart, Home, Instagram, Package, Palette, Send, Shirt, ShoppingBag, ShoppingCart, Sparkles, Star, Truck, Twitter, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="large"
|
|
background="aurora"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Mango"
|
|
navItems={[
|
|
{ name: "Shop", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Collections", id: "collections" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Shop Now", href: "products" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardDashboard
|
|
background={{ variant: "radial-gradient" }}
|
|
tag="Summer Collection"
|
|
tagIcon={Sparkles}
|
|
title="Discover Your Style with Mango"
|
|
description="Explore our curated collection of premium fashion pieces designed for the modern lifestyle. From casual wear to elegant statements, find everything you need to express yourself."
|
|
buttons={[
|
|
{ text: "Shop Collection", href: "products" },
|
|
{ text: "Learn More", href: "about" }
|
|
]}
|
|
dashboard={{
|
|
title: "Fashion Trends Dashboard", logoIcon: ShoppingBag,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/inspired-woman-enjoying-sunlight-with-closed-eyes_197531-19712.jpg", searchPlaceholder: "Search collections...", buttons: [
|
|
{ text: "Trending", href: "#" },
|
|
{ text: "New Arrivals", href: "#" }
|
|
],
|
|
sidebarItems: [
|
|
{ icon: Home, active: true },
|
|
{ icon: Heart, active: false },
|
|
{ icon: ShoppingCart, active: false }
|
|
],
|
|
stats: [
|
|
{
|
|
title: "Collections", values: [45, 52, 68],
|
|
description: "Active collections"
|
|
},
|
|
{
|
|
title: "Items", values: [1200, 1450, 1680],
|
|
description: "Premium pieces"
|
|
},
|
|
{
|
|
title: "Customers", values: [8500, 12300, 15200],
|
|
description: "Happy shoppers"
|
|
}
|
|
],
|
|
chartTitle: "Monthly Sales", chartData: [
|
|
{ value: 65 },
|
|
{ value: 45 },
|
|
{ value: 80 },
|
|
{ value: 55 },
|
|
{ value: 90 }
|
|
],
|
|
listTitle: "Latest Orders", listItems: [
|
|
{
|
|
icon: Package,
|
|
title: "Summer Dress Collection", status: "Shipped"
|
|
},
|
|
{
|
|
icon: Truck,
|
|
title: "Casual Wear Set", status: "In Transit"
|
|
},
|
|
{
|
|
icon: CheckCircle,
|
|
title: "Accessory Bundle", status: "Delivered"
|
|
}
|
|
]
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
title="Featured Products"
|
|
description="Discover our handpicked selection of premium pieces that define modern fashion."
|
|
tag="New Arrivals"
|
|
tagIcon={Star}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
gridVariant="uniform-all-items-equal"
|
|
products={[
|
|
{
|
|
id: "1", name: "Mango Premium Summer Dress", price: "$89.99", variant: "Light Blue • 4 Colors", imageSrc: "https://img.b2bpic.net/free-photo/woman-happy-dress-beach_1303-9441.jpg", imageAlt: "Summer dress in light blue", isFavorited: false
|
|
},
|
|
{
|
|
id: "2", name: "Classic Casual Button-Up Shirt", price: "$64.99", variant: "White • 6 Colors", imageSrc: "https://img.b2bpic.net/free-photo/sensual-young-woman-posing-street_291049-15.jpg", imageAlt: "Casual button-up shirt", isFavorited: false
|
|
},
|
|
{
|
|
id: "3", name: "Modern Lightweight Jacket", price: "$124.99", variant: "Charcoal • 3 Colors", imageSrc: "https://img.b2bpic.net/free-photo/stylish-beautiful-woman-red-hat-posing-blue-wall-printed-outfit-summer-style-fashion-trend-top-skirt-skinny-straw-handbag-sunglasses-accessories-smiling-happy-tropical-vacation_285396-4260.jpg", imageAlt: "Modern lightweight jacket", isFavorited: false
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="Our Story"
|
|
tagIcon={Heart}
|
|
title="Mango: Where Fashion Meets Quality"
|
|
description="Founded in 2015"
|
|
subdescription="Crafting Timeless Style"
|
|
icon={Zap}
|
|
imageSrc="https://img.b2bpic.net/free-photo/medium-shot-colleagues-discussing-project_23-2149721918.jpg"
|
|
imageAlt="Mango fashion team"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSixteen
|
|
title="Why Choose Mango"
|
|
description="Experience the difference with our commitment to quality and customer satisfaction"
|
|
tag="Premium Benefits"
|
|
tagIcon={Award}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
negativeCard={{
|
|
items: [
|
|
"Generic mass-produced clothing", "Poor quality materials", "Inconsistent sizing", "Limited style options", "No customer support"
|
|
]
|
|
}}
|
|
positiveCard={{
|
|
items: [
|
|
"Curated premium collections", "High-quality fabrics and craftsmanship", "True-to-size guarantee", "Diverse and trendy styles", "Dedicated customer service"
|
|
]
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
title="What Our Customers Say"
|
|
description="Real feedback from fashion enthusiasts who love Mango"
|
|
tag="Customer Reviews"
|
|
tagIcon={Star}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
showRating={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", handle: "@sarahstyle", testimonial: "Mango's collection is absolutely stunning! The quality is incredible and the prices are fair. I've become a regular customer.", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/caucasion-woman-casual-confident-concept_53876-137678.jpg", imageAlt: "Sarah Johnson"
|
|
},
|
|
{
|
|
id: "2", name: "Emma Davis", handle: "@emmasfashion", testimonial: "Finally found a clothing brand that gets my style! Every piece fits perfectly and arrives so quickly.", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/headshot-charismatic-pleasant-friendly-european-woman-short-chestnut-haircut-smiling-positive-feeling-happy-upbeat-enjoying-lifes-casually-talking-friends-amused-cheerful-standing-white-background_176420-34680.jpg", imageAlt: "Emma Davis"
|
|
},
|
|
{
|
|
id: "3", name: "Michael Chen", handle: "@mikesstyle", testimonial: "The customer service team at Mango is outstanding. They helped me find the perfect fit and answered all my questions.", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/smiling-blonde-woman-white_181624-25676.jpg", imageAlt: "Michael Chen"
|
|
},
|
|
{
|
|
id: "4", name: "Jessica Martinez", handle: "@jessicafashion", testimonial: "I love how Mango combines affordability with quality. This is my go-to store for all my wardrobe needs.", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/smiling-blonde-woman-white_181624-33452.jpg", imageAlt: "Jessica Martinez"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="collections" data-section="collections">
|
|
<MetricCardThree
|
|
title="Our Collections Showcase"
|
|
description="Explore the diverse range of fashion categories we offer"
|
|
tag="Collection Highlights"
|
|
tagIcon={Palette}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
metrics={[
|
|
{
|
|
id: "1", icon: Shirt,
|
|
title: "Casual Wear", value: "180+"
|
|
},
|
|
{
|
|
id: "2", icon: ShoppingBag,
|
|
title: "Formal Wear", value: "95+"
|
|
},
|
|
{
|
|
id: "3", icon: Package,
|
|
title: "Outerwear", value: "120+"
|
|
},
|
|
{
|
|
id: "4", icon: Sparkles,
|
|
title: "Accessories", value: "250+"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Shop"
|
|
tagIcon={ShoppingBag}
|
|
title="Find Your Perfect Outfit Today"
|
|
description="Browse our full collection and discover pieces that reflect your unique style. Free shipping on orders over $100!"
|
|
buttons={[
|
|
{ text: "Start Shopping", href: "products" },
|
|
{ text: "View Lookbooks", href: "#" }
|
|
]}
|
|
background={{ variant: "gradient-bars" }}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Mango"
|
|
copyrightText="© 2025 Mango Clothing Shop. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com/mangofashion", ariaLabel: "Instagram"
|
|
},
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com/mangofashion", ariaLabel: "Facebook"
|
|
},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com/mangofashion", ariaLabel: "Twitter"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |