bender/84980096-e3da-4533-bfcd-9ba971b71eaf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-15 08:39:38 +00:00
parent 993b88071b
commit 4b5cfab310
1 changed files with 108 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

408
src/app/page.tsx
View File

@@ -27,313 +27,121 @@ export default function LandingPage() {
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "#hero",
},
{
name: "Collection",
id: "#collections",
},
{
name: "Why Icon",
id: "#why",
},
{
name: "Contact",
id: "#contact",
},
]}
brandName="ICON’s PERFUME"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "#hero" },
{ name: "Collection", id: "#collections" },
{ name: "Why Icon", id: "#why" },
{ name: "Contact", id: "#contact" },
]}
brandName="ICON’s PERFUME"
button={{ text: "Shop Now", href: "#collections" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{
variant: "glowing-orb",
}}
title="Be The Icon"
description="Crafted for those who dare to leave a mark."
tag="Signature Fragrance"
buttons={[
{
text: "Explore Collection",
href: "#collections",
},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337702.jpg",
imageAlt: "Icon Perfume Bottle",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-expensive-perfume-as-present-dark-table_140725-141883.jpg",
imageAlt: "Icon Perfume Bottle Cinematic",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307222.jpg",
imageAlt: "Monochrome beauty product for skincare",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shaving-brush-perfume_53876-32090.jpg",
imageAlt: "Closeup of shaving brush and perfume",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669103.jpg",
imageAlt: "Ecofriendly beauty product",
},
]}
mediaAnimation="opacity"
rating={5}
ratingText="Luxury Choice"
tagIcon={Sparkles}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{ variant: "glowing-orb" }}
title="Be The Icon"
description="Crafted for those who dare to leave a mark."
tag="Signature Fragrance"
buttons={[{ text: "Explore Collection", href: "#collections" }]}
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337702.jpg", imageAlt: "Icon Perfume Bottle" },
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-expensive-perfume-as-present-dark-table_140725-141883.jpg", imageAlt: "Icon Perfume Bottle Cinematic" }
]}
mediaAnimation="opacity"
rating={5}
ratingText="Luxury Choice"
tagIcon={Sparkles}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Our Identity"
metrics={[
{
icon: Sparkles,
label: "Rare Extracts",
value: "100%",
},
{
icon: Star,
label: "Exclusivity",
value: "Limitless",
},
{
icon: Crown,
label: "Legacy",
value: "Iconic",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Our Identity"
metrics={[
{ icon: Sparkles, label: "Rare Extracts", value: "100%" },
{ icon: Star, label: "Exclusivity", value: "Limitless" },
{ icon: Crown, label: "Legacy", value: "Iconic" },
]}
metricsAnimation="slide-up"
/>
</div>
<div id="collections" data-section="collections">
<ProductCardTwo
animationType="slide-up"
textboxLayout="split-description"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{
id: "p1",
brand: "ICON",
name: "Velvet Night",
price: "$295",
rating: 5,
reviewCount: "1.2k",
imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669155.jpg",
},
{
id: "p2",
brand: "ICON",
name: "Golden Oud",
price: "$345",
rating: 5,
reviewCount: "890",
imageSrc: "http://img.b2bpic.net/free-photo/trendy-color-swatches-with-different-elements_23-2150169885.jpg",
},
{
id: "p3",
brand: "ICON",
name: "Ivory Rose",
price: "$275",
rating: 4,
reviewCount: "560",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-parfume-gold-colored-designed-beautiful-formed-light-wall_140725-11655.jpg",
},
{
id: "p4",
brand: "ICON",
name: "Royal Musk",
price: "$310",
rating: 5,
reviewCount: "430",
imageSrc: "http://img.b2bpic.net/free-photo/decorative-arrangement-with-dried-fruits-flowers_23-2151367226.jpg",
},
{
id: "p5",
brand: "ICON",
name: "Midnight Incense",
price: "$280",
rating: 5,
reviewCount: "320",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-perfume-bottle-with-blue-paper-flower_140725-13876.jpg",
},
{
id: "p6",
brand: "ICON",
name: "Celestial Amber",
price: "$360",
rating: 5,
reviewCount: "210",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-beauty-products-based-regenerative-agriculture_23-2150721383.jpg",
},
]}
title="The Icon Collection"
description="Exquisite scents curated for the bold."
/>
</div>
<div id="collections" data-section="collections">
<ProductCardTwo
animationType="slide-up"
textboxLayout="split-description"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{ id: "p1", brand: "ICON", name: "Velvet Night", price: "$295", rating: 5, reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669155.jpg" },
{ id: "p2", brand: "ICON", name: "Golden Oud", price: "$345", rating: 5, reviewCount: "890", imageSrc: "http://img.b2bpic.net/free-photo/trendy-color-swatches-with-different-elements_23-2150169885.jpg" },
{ id: "p3", brand: "ICON", name: "Ivory Rose", price: "$275", rating: 4, reviewCount: "560", imageSrc: "http://img.b2bpic.net/free-photo/front-view-parfume-gold-colored-designed-beautiful-formed-light-wall_140725-11655.jpg" },
{ id: "p4", brand: "ICON", name: "Royal Musk", price: "$310", rating: 5, reviewCount: "430", imageSrc: "http://img.b2bpic.net/free-photo/decorative-arrangement-with-dried-fruits-flowers_23-2151367226.jpg" }
]}
title="The Icon Collection"
description="Exquisite scents curated for the bold."
/>
</div>
<div id="why" data-section="why">
<FeatureCardTwentyEight
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
id: "f1",
title: "Premium Ingredients",
subtitle: "Sourced globally for unmatched quality.",
category: "Quality",
value: "Excellence",
},
{
id: "f2",
title: "Exceptional Longevity",
subtitle: "Designed to last throughout your day.",
category: "Durability",
value: "Persistent",
},
{
id: "f3",
title: "Signature Packaging",
subtitle: "Luxury unboxing experience every time.",
category: "Design",
value: "Aesthetic",
},
]}
title="Why ICON’s"
description="Crafting scent that defines you."
/>
</div>
<div id="why" data-section="why">
<FeatureCardTwentyEight
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{ id: "f1", title: "Premium Ingredients", subtitle: "Sourced globally for unmatched quality.", category: "Quality", value: "Excellence" },
{ id: "f2", title: "Exceptional Longevity", subtitle: "Designed to last throughout your day.", category: "Durability", value: "Persistent" },
{ id: "f3", title: "Signature Packaging", subtitle: "Luxury unboxing experience every time.", category: "Design", value: "Aesthetic" },
]}
title="Why ICON’s"
description="Crafting scent that defines you."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="split-description"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah Ahmed",
role: "Fashion Editor",
testimonial: "The scent is pure magic. Truly leaves a mark wherever I go.",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-female-office-worker-black-strict-jacket-just-posing-pink-wall_140725-58749.jpg",
},
{
id: "t2",
name: "Omar Khaled",
role: "CEO",
testimonial: "Icon’s Perfume is the definition of sophisticated masculine fragrance.",
imageSrc: "http://img.b2bpic.net/free-photo/professional-young-woman-checking-her-phone_23-2148452656.jpg",
},
{
id: "t3",
name: "Layla Mansour",
role: "Architect",
testimonial: "I’ve never had more compliments on my scent than with Golden Oud.",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-bride-before-wedding_23-2149860779.jpg",
},
{
id: "t4",
name: "Zaid Fayed",
role: "Entrepreneur",
testimonial: "The quality and longevity are unmatched in the market today.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-fashion-male-model-man-dressed-elegant-suit-black-studio-lights-background_158538-9659.jpg",
},
{
id: "t5",
name: "Nadia Ibrahim",
role: "Artist",
testimonial: "Packaging and scent quality are both absolute perfection.",
imageSrc: "http://img.b2bpic.net/free-photo/portait-charming-caucasian-lady-poses-camera-picture-isolated-dark-blur-background_132075-9598.jpg",
},
]}
title="Our Icons"
description="Voices of the discerning."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="split-description"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Sarah Ahmed", role: "Fashion Editor", testimonial: "The scent is pure magic. Truly leaves a mark wherever I go.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-female-office-worker-black-strict-jacket-just-posing-pink-wall_140725-58749.jpg" },
{ id: "t2", name: "Omar Khaled", role: "CEO", testimonial: "Icon’s Perfume is the definition of sophisticated masculine fragrance.", imageSrc: "http://img.b2bpic.net/free-photo/professional-young-woman-checking-her-phone_23-2148452656.jpg" }
]}
title="Our Icons"
description="Voices of the discerning."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Experience Icon"
description="Have questions or want to learn more about our scents?"
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
},
{
name: "email",
type: "email",
placeholder: "Your Email",
},
]}
textarea={{
name: "message",
placeholder: "Write to us...",
}}
imageSrc="http://img.b2bpic.net/free-photo/blonde-business-woman-work_23-2149100301.jpg"
buttonText="Send Message"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Experience Icon"
description="Have questions or want to learn more about our scents?"
inputs={[
{ name: "name", type: "text", placeholder: "Your Name" },
{ name: "email", type: "email", placeholder: "Your Email" },
]}
textarea={{ name: "message", placeholder: "Write to us..." }}
imageSrc="http://img.b2bpic.net/free-photo/blonde-business-woman-work_23-2149100301.jpg"
buttonText="Send Message"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Navigate",
items: [
{
label: "Explore",
href: "#collections",
},
{
label: "Why Us",
href: "#why",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Connect",
items: [
{
label: "WhatsApp",
href: "https://wa.me/123456789",
},
{
label: "Instagram",
href: "#",
},
{
label: "Email",
href: "mailto:hello@iconsperfume.com",
},
],
},
]}
logoText="ICON’s PERFUME"
copyrightText="© 2025 ICON’s PERFUME — All Rights Reserved"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{ title: "Navigate", items: [{ label: "Explore", href: "#collections" }, { label: "Why Us", href: "#why" }, { label: "Contact", href: "#contact" }] },
{ title: "Connect", items: [{ label: "WhatsApp", href: "https://wa.me/123456789" }, { label: "Instagram", href: "#" }, { label: "Email", href: "mailto:hello@iconsperfume.com" }] },
]}
logoText="ICON’s PERFUME"
copyrightText="© 2025 ICON’s PERFUME — All Rights Reserved"
/>
</div>
</ReactLenis>
</ThemeProvider>
);