Merge version_1 into main #2
341
src/app/page.tsx
341
src/app/page.tsx
@@ -26,252 +26,113 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Details",
|
||||
id: "details",
|
||||
},
|
||||
{
|
||||
name: "Schedule",
|
||||
id: "schedule",
|
||||
},
|
||||
{
|
||||
name: "RSVP",
|
||||
id: "rsvp",
|
||||
},
|
||||
]}
|
||||
brandName="M & B"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Details", id: "details" },
|
||||
{ name: "Schedule", id: "schedule" },
|
||||
{ name: "RSVP", id: "rsvp" },
|
||||
]}
|
||||
brandName="M & B"
|
||||
button={{ text: "RSVP Now", href: "#rsvp" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Mansoor & Basira"
|
||||
description="We are thrilled to invite you to our wedding day. Please join us in celebrating our union on May 1st, 2026."
|
||||
buttons={[
|
||||
{
|
||||
text: "Open Invitation",
|
||||
href: "#details",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CFZRX2wTfGxjsjDQ8gifMsGTER/uploaded-1775983571961-shyz0r89.png?_wi=1"
|
||||
imageAlt="Wedding Envelope"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/floral-ornament-wedding-card_23-2148468565.jpg",
|
||||
alt: "Guest avatar 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/wedding-ornament-card_23-2148468527.jpg",
|
||||
alt: "Guest avatar 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/dried-pink-white-roses-with-window-shadow_53876-101431.jpg",
|
||||
alt: "Guest avatar 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/wedding-rings-inside-peony-flower_8353-9814.jpg",
|
||||
alt: "Guest avatar 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-bride-keeps-wedding-bouquet-standing-near-building_8353-7554.jpg",
|
||||
alt: "Guest avatar 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 200+ guests"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "May 1st, 2026",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Istanbul",
|
||||
icon: MapPin,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Romantic Wedding",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Black Tie",
|
||||
icon: Sparkles,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Save The Date",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Mansoor & Basira"
|
||||
description="We are thrilled to invite you to our wedding day. Please join us in celebrating our union on May 1st, 2026."
|
||||
buttons={[{ text: "Open Invitation", href: "#details" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CFZRX2wTfGxjsjDQ8gifMsGTER/uploaded-1775983571961-shyz0r89.png"
|
||||
imageAlt="Wedding Envelope"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/floral-ornament-wedding-card_23-2148468565.jpg", alt: "Guest avatar 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/wedding-ornament-card_23-2148468527.jpg", alt: "Guest avatar 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/dried-pink-white-roses-with-window-shadow_53876-101431.jpg", alt: "Guest avatar 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/wedding-rings-inside-peony-flower_8353-9814.jpg", alt: "Guest avatar 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-bride-keeps-wedding-bouquet-standing-near-building_8353-7554.jpg", alt: "Guest avatar 5" },
|
||||
]}
|
||||
avatarText="Join 200+ guests"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "May 1st, 2026" },
|
||||
{ type: "text-icon", text: "Istanbul", icon: MapPin },
|
||||
{ type: "text", text: "Romantic Wedding" },
|
||||
{ type: "text-icon", text: "Black Tie", icon: Sparkles },
|
||||
{ type: "text", text: "Save The Date" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="details" data-section="details">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Wedding Details"
|
||||
description="The celebration will take place at Piri Reis, Esenyurt, Istanbul. A day of love, laughter, and joy awaits."
|
||||
metrics={[
|
||||
{
|
||||
value: "01",
|
||||
title: "May 2026",
|
||||
},
|
||||
{
|
||||
value: "10A",
|
||||
title: "Piri Reis Venue",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/bride-groom-posing-verandah-somewhere-nature_1153-5989.jpg?_wi=1"
|
||||
imageAlt="Venue Map Location"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="details" data-section="details">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Wedding Details"
|
||||
description="The celebration will take place at Piri Reis, Esenyurt, Istanbul. A day of love, laughter, and joy awaits."
|
||||
metrics={[
|
||||
{ value: "01", title: "May 2026" },
|
||||
{ value: "10A", title: "Piri Reis Venue" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/bride-groom-posing-verandah-somewhere-nature_1153-5989.jpg"
|
||||
imageAlt="Venue Map Location"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="schedule" data-section="schedule">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "Ceremony Begins",
|
||||
descriptions: [
|
||||
"3:00 PM - Welcome and Ceremony",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/floral-ornament-wedding-card_23-2148468565.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
title: "Reception",
|
||||
descriptions: [
|
||||
"5:00 PM - Dinner and Dancing",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wedding-ornament-card_23-2148468527.jpg",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
title: "Evening Party",
|
||||
descriptions: [
|
||||
"8:00 PM - Celebration",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dried-pink-white-roses-with-window-shadow_53876-101431.jpg",
|
||||
},
|
||||
]}
|
||||
title="Wedding Schedule"
|
||||
description="A timeline of the day's events."
|
||||
/>
|
||||
</div>
|
||||
<div id="schedule" data-section="schedule">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "s1", title: "Ceremony Begins", descriptions: ["3:00 PM - Welcome and Ceremony"], imageSrc: "http://img.b2bpic.net/free-photo/floral-ornament-wedding-card_23-2148468565.jpg" },
|
||||
{ id: "s2", title: "Reception", descriptions: ["5:00 PM - Dinner and Dancing"], imageSrc: "http://img.b2bpic.net/free-photo/wedding-ornament-card_23-2148468527.jpg" },
|
||||
{ id: "s3", title: "Evening Party", descriptions: ["8:00 PM - Celebration"], imageSrc: "http://img.b2bpic.net/free-photo/dried-pink-white-roses-with-window-shadow_53876-101431.jpg" },
|
||||
]}
|
||||
title="Wedding Schedule"
|
||||
description="A timeline of the day's events."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Kind Words"
|
||||
description="Messages from our loved ones."
|
||||
tag="Testimonials"
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah J.",
|
||||
date: "Jan 2026",
|
||||
title: "Lovely Couple",
|
||||
quote: "Can't wait to celebrate!",
|
||||
tag: "Friend",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/wedding-rings-inside-peony-flower_8353-9814.jpg",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CFZRX2wTfGxjsjDQ8gifMsGTER/uploaded-1775983571961-shyz0r89.png?_wi=2",
|
||||
imageAlt: "Wedding rings inside a peony flower",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mike D.",
|
||||
date: "Jan 2026",
|
||||
title: "Best Wishes",
|
||||
quote: "Beautiful invitation.",
|
||||
tag: "Family",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-keeps-wedding-bouquet-standing-near-building_8353-7554.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fresh-flower-twig-near-white-textile_23-2148069307.jpg",
|
||||
imageAlt: "Wedding rings inside a peony flower",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena R.",
|
||||
date: "Feb 2026",
|
||||
title: "So excited!",
|
||||
quote: "The wedding will be magical.",
|
||||
tag: "Friend",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/groom-bride-kissing-tree_1153-540.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bride-groom-posing-verandah-somewhere-nature_1153-5989.jpg?_wi=2",
|
||||
imageAlt: "Wedding rings inside a peony flower",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Tom B.",
|
||||
date: "Feb 2026",
|
||||
title: "Counting down",
|
||||
quote: "See you in Istanbul!",
|
||||
tag: "Colleague",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/rustic-lovely-decoration-garden_329181-1581.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/floral-ornament-wedding-card_23-2148468565.jpg?_wi=2",
|
||||
imageAlt: "Wedding rings inside a peony flower",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Kind Words"
|
||||
description="Messages from our loved ones."
|
||||
tag="Testimonials"
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah J.", date: "Jan 2026", title: "Lovely Couple", quote: "Can't wait to celebrate!", tag: "Friend", avatarSrc: "http://img.b2bpic.net/free-photo/wedding-rings-inside-peony-flower_8353-9814.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CFZRX2wTfGxjsjDQ8gifMsGTER/uploaded-1775983571961-shyz0r89.png", imageAlt: "Wedding rings inside a peony flower" },
|
||||
{ id: "t2", name: "Mike D.", date: "Jan 2026", title: "Best Wishes", quote: "Beautiful invitation.", tag: "Family", avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-keeps-wedding-bouquet-standing-near-building_8353-7554.jpg", imageSrc: "http://img.b2bpic.net/free-photo/fresh-flower-twig-near-white-textile_23-2148069307.jpg", imageAlt: "Wedding rings inside a peony flower" },
|
||||
{ id: "t3", name: "Elena R.", date: "Feb 2026", title: "So excited!", quote: "The wedding will be magical.", tag: "Friend", avatarSrc: "http://img.b2bpic.net/free-photo/groom-bride-kissing-tree_1153-540.jpg", imageSrc: "http://img.b2bpic.net/free-photo/bride-groom-posing-verandah-somewhere-nature_1153-5989.jpg", imageAlt: "Wedding rings inside a peony flower" },
|
||||
{ id: "t4", name: "Tom B.", date: "Feb 2026", title: "Counting down", quote: "See you in Istanbul!", tag: "Colleague", avatarSrc: "http://img.b2bpic.net/free-photo/rustic-lovely-decoration-garden_329181-1581.jpg", imageSrc: "http://img.b2bpic.net/free-photo/floral-ornament-wedding-card_23-2148468565.jpg", imageAlt: "Wedding rings inside a peony flower" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="rsvp" data-section="rsvp">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="RSVP"
|
||||
title="Will You Attend?"
|
||||
description="Please confirm your presence by filling out the form below."
|
||||
buttonText="Send RSVP"
|
||||
/>
|
||||
</div>
|
||||
<div id="rsvp" data-section="rsvp">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="RSVP"
|
||||
title="Will You Attend?"
|
||||
description="Please confirm your presence by filling out the form below."
|
||||
buttonText="Send RSVP"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="M & B"
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links",
|
||||
items: [
|
||||
{
|
||||
label: "Top",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "RSVP",
|
||||
href: "#rsvp",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Location",
|
||||
items: [
|
||||
{
|
||||
label: "View Map",
|
||||
href: "https://maps.google.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="M & B"
|
||||
columns={[
|
||||
{ title: "Quick Links", items: [{ label: "Top", href: "#hero" }, { label: "RSVP", href: "#rsvp" }] },
|
||||
{ title: "Location", items: [{ label: "View Map", href: "https://maps.google.com" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user