Initial commit
This commit is contained in:
Nikolay Pecheniev
262
src/app/page.tsx
Normal file
262
src/app/page.tsx
Normal file
@@ -0,0 +1,262 @@
|
||||
"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, Dress, Facebook, Heart, Home, Instagram, Jacket, 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: "aurora" }}
|
||||
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="invertDefault"
|
||||
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="invertDefault"
|
||||
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="invertDefault"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", icon: Shirt,
|
||||
title: "Casual Wear", value: "180+"
|
||||
},
|
||||
{
|
||||
id: "2", icon: Dress,
|
||||
title: "Formal Wear", value: "95+"
|
||||
},
|
||||
{
|
||||
id: "3", icon: Jacket,
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user