Merge version_1 into main #3
294
src/app/page.tsx
294
src/app/page.tsx
@@ -26,198 +26,120 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Shop", id: "products"},
|
||||
{
|
||||
name: "Our Story", id: "about"},
|
||||
{
|
||||
name: "Quality", id: "features"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="FLIPPER"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Shop", id: "products" },
|
||||
{ name: "Our Story", id: "about" },
|
||||
{ name: "Quality", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="FLIPPER"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
title="Unapologetically Premium."
|
||||
description="Flipper redefines modern streetwear. Elevated silhouettes meet uncompromising quality, crafted for those who value substance over spectacle."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Marcus V.", handle: "@mvstreet", testimonial: "The attention to detail on Flipper pieces is unmatched. Truly premium.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/well-dressed-young-male-model-posing-steps-with-gently-smile-indoor-photo-curious-african-guy-wears-hat_197531-22071.jpg", imageAlt: "luxury streetwear fashion editorial photography"},
|
||||
{
|
||||
name: "Elena K.", handle: "@elenastyle", testimonial: "My go-to brand for quality streetwear staples. Every piece feels custom-made.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brown-fabric_1122-375.jpg", imageAlt: "premium garment fabric detail close up"},
|
||||
{
|
||||
name: "Julian R.", handle: "@jules.mode", testimonial: "Flipper strikes the perfect balance between comfort and elevated aesthetics.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-haired-lady-white-suit-holding-coffee-phone-charming-woman-linen-pants-beige-blouse-chatting-cellphone-drinking-tea_197531-27474.jpg", imageAlt: "sustainable clothing manufacturing process modern"},
|
||||
{
|
||||
name: "Sophie L.", handle: "@sophie.art", testimonial: "Consistently impressive quality and timeless cuts.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/millennial-fashion-couple-white-studio_158595-5456.jpg", imageAlt: "minimalist streetwear clothing design concept"},
|
||||
{
|
||||
name: "David W.", handle: "@david.pics", testimonial: "The only streetwear brand that actually understands minimalism.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-travel-items-arrangement_23-2148666247.jpg", imageAlt: "premium hoodie streetwear minimalist fashion"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/well-dressed-young-male-model-posing-steps-with-gently-smile-indoor-photo-curious-african-guy-wears-hat_197531-22071.jpg"
|
||||
imageAlt="Premium Flipper streetwear fashion shoot"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing_344912-3118.jpg", alt: "Customer 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453468.jpg", alt: "Customer 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/person-using-eco-transport-new-york_23-2149219988.jpg", alt: "Customer 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/full-shot-woman-posing-chair_23-2149735251.jpg", alt: "Customer 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/redhead-casual-dressed-woman-looking-camera_23-2148321291.jpg", alt: "Customer 5"},
|
||||
],
|
||||
avatarText: "Loved by 10k+ creators", marqueeItems: [
|
||||
{
|
||||
type: "text", text: "LIMITED DROPS"},
|
||||
{
|
||||
type: "text-icon", text: "PREMIUM FABRIC", icon: Sparkles,
|
||||
},
|
||||
{
|
||||
type: "text", text: "WORLDWIDE SHIPPING"},
|
||||
{
|
||||
type: "text-icon", text: "DESIGN INTEGRITY", icon: Shield,
|
||||
},
|
||||
{
|
||||
type: "text", text: "ETHICAL PRODUCTION"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Unapologetically Premium."
|
||||
description="Flipper redefines modern streetwear. Elevated silhouettes meet uncompromising quality, crafted for those who value substance over spectacle."
|
||||
testimonials={[
|
||||
{ name: "Marcus V.", handle: "@mvstreet", testimonial: "The attention to detail on Flipper pieces is unmatched. Truly premium.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/well-dressed-young-male-model-posing-steps-with-gently-smile-indoor-photo-curious-african-guy-wears-hat_197531-22071.jpg", imageAlt: "luxury streetwear fashion editorial photography" },
|
||||
{ name: "Elena K.", handle: "@elenastyle", testimonial: "My go-to brand for quality streetwear staples. Every piece feels custom-made.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/brown-fabric_1122-375.jpg", imageAlt: "premium garment fabric detail close up" },
|
||||
{ name: "Julian R.", handle: "@jules.mode", testimonial: "Flipper strikes the perfect balance between comfort and elevated aesthetics.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/dark-haired-lady-white-suit-holding-coffee-phone-charming-woman-linen-pants-beige-blouse-chatting-cellphone-drinking-tea_197531-27474.jpg", imageAlt: "sustainable clothing manufacturing process modern" },
|
||||
{ name: "Sophie L.", handle: "@sophie.art", testimonial: "Consistently impressive quality and timeless cuts.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/millennial-fashion-couple-white-studio_158595-5456.jpg", imageAlt: "minimalist streetwear clothing design concept" },
|
||||
{ name: "David W.", handle: "@david.pics", testimonial: "The only streetwear brand that actually understands minimalism.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/top-view-travel-items-arrangement_23-2148666247.jpg", imageAlt: "premium hoodie streetwear minimalist fashion" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/well-dressed-young-male-model-posing-steps-with-gently-smile-indoor-photo-curious-african-guy-wears-hat_197531-22071.jpg"
|
||||
imageAlt="Premium Flipper streetwear fashion shoot"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing_344912-3118.jpg", alt: "Customer 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453468.jpg", alt: "Customer 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/person-using-eco-transport-new-york_23-2149219988.jpg", alt: "Customer 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/full-shot-woman-posing-chair_23-2149735251.jpg", alt: "Customer 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/redhead-casual-dressed-woman-looking-camera_23-2148321291.jpg", alt: "Customer 5" }
|
||||
]}
|
||||
avatarText="Loved by 10k+ creators"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "LIMITED DROPS" },
|
||||
{ type: "text-icon", text: "PREMIUM FABRIC", icon: Sparkles },
|
||||
{ type: "text", text: "WORLDWIDE SHIPPING" },
|
||||
{ type: "text-icon", text: "DESIGN INTEGRITY", icon: Shield },
|
||||
{ type: "text", text: "ETHICAL PRODUCTION" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Enduring Quality", description: "Materials sourced for longevity and comfort, tested for years of wear."},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Design Integrity", description: "Clean lines and timeless silhouettes that transcend passing trends."},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Conscious Craft", description: "Ethical production processes prioritizing people and the planet throughout."},
|
||||
]}
|
||||
title="The Flipper Standard"
|
||||
description="Craftsmanship is at our core. We obsess over the details so you don't have to."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Shield, title: "Enduring Quality", description: "Materials sourced for longevity and comfort, tested for years of wear." },
|
||||
{ icon: Zap, title: "Design Integrity", description: "Clean lines and timeless silhouettes that transcend passing trends." },
|
||||
{ icon: Award, title: "Conscious Craft", description: "Ethical production processes prioritizing people and the planet throughout." }
|
||||
]}
|
||||
title="The Flipper Standard"
|
||||
description="Craftsmanship is at our core. We obsess over the details so you don't have to."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1", brand: "Flipper", name: "Signature Hoodie", price: "$180", rating: 5,
|
||||
reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/top-view-travel-items-arrangement_23-2148666247.jpg"},
|
||||
{
|
||||
id: "p2", brand: "Flipper", name: "Essential Denim", price: "$220", rating: 5,
|
||||
reviewCount: "94", imageSrc: "http://img.b2bpic.net/free-photo/close-up-flannel-shirt-detail_23-2149575375.jpg"},
|
||||
{
|
||||
id: "p3", brand: "Flipper", name: "Graphic Tee", price: "$60", rating: 4,
|
||||
reviewCount: "210", imageSrc: "http://img.b2bpic.net/free-photo/close-up-stylish-girl-wearing-blank-t-shirt-looking-down_273609-13736.jpg"},
|
||||
{
|
||||
id: "p4", brand: "Flipper", name: "Technical Jacket", price: "$350", rating: 5,
|
||||
reviewCount: "72", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-model-leather-jacket-outside-street_1303-20502.jpg"},
|
||||
{
|
||||
id: "p5", brand: "Flipper", name: "Relaxed Trouser", price: "$150", rating: 4,
|
||||
reviewCount: "88", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-posing-white-hoodie-leggings-posing-against-white-background_89887-1084.jpg"},
|
||||
{
|
||||
id: "p6", brand: "Flipper", name: "Canvas Cap", price: "$45", rating: 5,
|
||||
reviewCount: "156", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-posing-with-black-outfit_23-2151044536.jpg"},
|
||||
]}
|
||||
title="The Core Collection"
|
||||
description="Essential pieces for a refined streetwear wardrobe."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", brand: "Flipper", name: "Signature Hoodie", price: "$180", rating: 5, reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/top-view-travel-items-arrangement_23-2148666247.jpg" },
|
||||
{ id: "p2", brand: "Flipper", name: "Essential Denim", price: "$220", rating: 5, reviewCount: "94", imageSrc: "http://img.b2bpic.net/free-photo/close-up-flannel-shirt-detail_23-2149575375.jpg" },
|
||||
{ id: "p3", brand: "Flipper", name: "Graphic Tee", price: "$60", rating: 4, reviewCount: "210", imageSrc: "http://img.b2bpic.net/free-photo/close-up-stylish-girl-wearing-blank-t-shirt-looking-down_273609-13736.jpg" },
|
||||
{ id: "p4", brand: "Flipper", name: "Technical Jacket", price: "$350", rating: 5, reviewCount: "72", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-model-leather-jacket-outside-street_1303-20502.jpg" },
|
||||
{ id: "p5", brand: "Flipper", name: "Relaxed Trouser", price: "$150", rating: 4, reviewCount: "88", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-posing-white-hoodie-leggings-posing-against-white-background_89887-1084.jpg" },
|
||||
{ id: "p6", brand: "Flipper", name: "Canvas Cap", price: "$45", rating: 5, reviewCount: "156", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-posing-with-black-outfit_23-2151044536.jpg" }
|
||||
]}
|
||||
title="The Core Collection"
|
||||
description="Essential pieces for a refined streetwear wardrobe."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", title: "Minimalist Perfection", quote: "Flipper is exactly what my wardrobe was missing.", name: "Marcus V.", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing_344912-3118.jpg"},
|
||||
{
|
||||
id: "t2", title: "Everyday Luxury", quote: "I wear these pieces daily. They handle the city lifestyle effortlessly.", name: "Elena K.", role: "Urban Stylist", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453468.jpg"},
|
||||
{
|
||||
id: "t3", title: "Quality Assured", quote: "You can tell the quality is miles ahead of standard retail.", name: "Julian R.", role: "Fashion Consultant", imageSrc: "http://img.b2bpic.net/free-photo/person-using-eco-transport-new-york_23-2149219988.jpg"},
|
||||
{
|
||||
id: "t4", title: "Style Reimagined", quote: "The fit and fabric quality are consistently impressive.", name: "Sophie L.", role: "Art Director", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-posing-chair_23-2149735251.jpg"},
|
||||
{
|
||||
id: "t5", title: "My Favorite Brand", quote: "Minimalist design meets extreme durability. Flipper has won me over.", name: "David W.", role: "Photographer", imageSrc: "http://img.b2bpic.net/free-photo/redhead-casual-dressed-woman-looking-camera_23-2148321291.jpg"},
|
||||
]}
|
||||
title="Voices of the Brand"
|
||||
description="See why style icons and enthusiasts choose Flipper."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", title: "Minimalist Perfection", quote: "Flipper is exactly what my wardrobe was missing.", name: "Marcus V.", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing_344912-3118.jpg" },
|
||||
{ id: "t2", title: "Everyday Luxury", quote: "I wear these pieces daily. They handle the city lifestyle effortlessly.", name: "Elena K.", role: "Urban Stylist", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453468.jpg" },
|
||||
{ id: "t3", title: "Quality Assured", quote: "You can tell the quality is miles ahead of standard retail.", name: "Julian R.", role: "Fashion Consultant", imageSrc: "http://img.b2bpic.net/free-photo/person-using-eco-transport-new-york_23-2149219988.jpg" },
|
||||
{ id: "t4", title: "Style Reimagined", quote: "The fit and fabric quality are consistently impressive.", name: "Sophie L.", role: "Art Director", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-posing-chair_23-2149735251.jpg" },
|
||||
{ id: "t5", title: "My Favorite Brand", quote: "Minimalist design meets extreme durability. Flipper has won me over.", name: "David W.", role: "Photographer", imageSrc: "http://img.b2bpic.net/free-photo/redhead-casual-dressed-woman-looking-camera_23-2148321291.jpg" }
|
||||
]}
|
||||
title="Voices of the Brand"
|
||||
description="See why style icons and enthusiasts choose Flipper."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
text="Join the Flipper circle for early access and collection updates."
|
||||
buttons={[
|
||||
{
|
||||
text: "Subscribe Now", href: "#"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Join the Flipper circle for early access and collection updates."
|
||||
buttons={[{ text: "Subscribe Now", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="FLIPPER"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{
|
||||
label: "New Arrivals", href: "#"},
|
||||
{
|
||||
label: "Bestsellers", href: "#"},
|
||||
{
|
||||
label: "Sale", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "Shipping", href: "#"},
|
||||
{
|
||||
label: "Returns", href: "#"},
|
||||
{
|
||||
label: "Contact", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Service", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="FLIPPER"
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "New Arrivals", href: "#" }, { label: "Bestsellers", href: "#" }, { label: "Sale", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Shipping", href: "#" }, { label: "Returns", href: "#" }, { label: "Contact", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user