Merge version_2 into main

Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
2026-06-07 17:24:57 +00:00
2 changed files with 262 additions and 306 deletions

204
src/app/home/page.tsx Normal file
View File

@@ -0,0 +1,204 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Heart } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="medium"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home", id: "/home"},
{
name: "Our Story", id: "#our-story"},
{
name: "Details", id: "#details"},
{
name: "Wedding Party", id: "#wedding-party"},
{
name: "RSVP", id: "#rsvp"},
]}
brandName="Our Wedding"
/>
</div>
<div id="home" data-section="home">
<HeroLogo
logoText="You're Invited"
description="Join us as we say 'I do'"
buttons={[
{
text: "Open Invitation", href: "#our-story"},
{
text: "Our Story", href: "#our-story"},
]}
imageSrc="http://img.b2bpic.net/free-photo/high-angle-wedding-paper-envelope-with-seal-ribbon_23-2149374605.jpg"
imageAlt="Realistic wedding invitation envelope with a wax seal"
showDimOverlay={false}
/>
</div>
<div id="our-story" data-section="our-story">
<TestimonialAboutCard
useInvertedBackground={false}
tag="Our Journey"
title="Two Hearts, One Journey"
description="From our first meeting to this joyous day, our love story has unfolded beautifully. We can't wait to start our next chapter with you by our side, surrounded by our dearest friends and family."
subdescription="We are thrilled to invite you to celebrate our union and witness the beginning of our forever."
icon={Heart}
imageSrc="http://img.b2bpic.net/free-photo/caring-family-walking-beach-sunset-man-woman-casual-clothes-strolling-near-water-dusk-love-family-nature-concept_74855-22809.jpg"
imageAlt="A romantic couple holding hands"
mediaAnimation="slide-up"
/>
</div>
<div id="details" data-section="details">
<FeatureCardMedia
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: "ceremony", title: "The Ceremony", description: "Join us as we exchange vows and begin our married life together. A heartfelt celebration of love and commitment.", tag: "4:00 PM | October 26, 2024", imageSrc: "http://img.b2bpic.net/free-photo/table-prepared-with-champagne-glasses_1157-335.jpg", imageAlt: "Elegant wedding ceremony setup"},
{
id: "reception", title: "The Reception", description: "Celebrate with us at an evening of dining, dancing, and joyous festivities. Enjoy delicious food and great company.", tag: "6:00 PM | October 26, 2024", imageSrc: "http://img.b2bpic.net/free-photo/wedding-cake-cakestand-decorated-with-white-flower-bouquet_23-2147975459.jpg", imageAlt: "Beautiful multi-tiered wedding cake"},
{
id: "gifts", title: "Gifts & Well Wishes", description: "Your presence is our greatest gift. Should you wish to honor us with a gift, a contribution towards our future would be warmly appreciated.", tag: "Registry & Donations", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-golden-wedding-rings-attached-brown-heart-shaped-textile_181624-33810.jpg", imageAlt: "Diamond wedding rings"},
]}
title="Key Event Details"
description="Everything you need to know about our special day."
/>
</div>
<div id="wedding-party" data-section="wedding-party">
<TeamCardFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
team={[
{
id: "moh", name: "Sarah Smith", role: "Maid of Honor", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-female-dentist-standing-dental-office_651396-3401.jpg", imageAlt: "Maid of Honor"},
{
id: "bm", name: "David Johnson", role: "Best Man", imageSrc: "http://img.b2bpic.net/free-photo/three-men-suits-posing-garden_1153-2773.jpg", imageAlt: "Best Man"},
{
id: "bm1", name: "Emily White", role: "Bridesmaid", imageSrc: "http://img.b2bpic.net/free-photo/carefree-joyful-charming-cheeky-blond-woman-party-all-night-long-have-fun-smiling-happily-enjoying-awesome-evening-nightclub-dancing-silver-stylish-dress-winking-sassy-camera-red-background_1258-308174.jpg", imageAlt: "Bridesmaid Emily White"},
{
id: "gm1", name: "Michael Brown", role: "Groomsman", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-bearded-male-dressed-blue-shirt-white-jacket-bow-tie-grey-background_613910-179.jpg", imageAlt: "Groomsman Michael Brown"},
]}
title="Our Beloved Wedding Party"
description="Meet the wonderful people supporting us on our big day, our closest friends and family."
/>
</div>
<div id="love-wisdom" data-section="love-wisdom">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
testimonials={[
{
id: "t1", name: "Eleanor & Richard Vance", role: "Grandparents", company: "Family", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-senior-couple_23-2149071648.jpg", imageAlt: "Elderly couple smiling"},
{
id: "t2", name: "Jessica & Mark Chen", role: "Friends", company: "Couple Friends", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-people-having-fun_23-2149832975.jpg", imageAlt: "Young couple hugging"},
{
id: "t3", name: "The Miller Family", role: "Neighbors", company: "Community", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/afroamerican-man-hugging-friends-front-view_23-2148422460.jpg", imageAlt: "Diverse group of friends"},
{
id: "t4", name: "Uncle John & Aunt Mary", role: "Family", company: "Family", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/mother-with-daughter-playing-summer-field_1157-38723.jpg", imageAlt: "Happy family embracing"},
{
id: "t5", name: "Sophia Rodriguez", role: "Colleague", company: "Work", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/prenatal-yoga-cobbler-pose_1163-1479.jpg", imageAlt: "Woman reading a book"},
]}
title="Words of Love & Wisdom"
description="Inspiring thoughts and heartfelt wishes from those who know the true meaning of love."
/>
</div>
<div id="special-thanks" data-section="special-thanks">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"Capturing Memories Photography", "Gourmet Catering Co.", "The Grand Ballroom Venue", "Elegant Events Planner", "Bloom & Petal Florists", "Melody Makers DJ", "Dream Dress Boutique", "Sweet Delights Bakery"]}
title="Special Thanks"
description="Our heartfelt gratitude to those helping make our day perfect and memorable."
speed={35}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "faq1", title: "What is the dress code?", content: "The dress code is formal attire. We kindly request that guests avoid wearing white or ivory to ensure the bride stands out."},
{
id: "faq2", title: "Is there parking available at the venue?", content: "Yes, ample parking is available at the venue. Valet service will also be provided for your convenience."},
{
id: "faq3", title: "Can I bring a plus-one?", content: "We have reserved a seat for you and kindly request that you adhere to the invitation's specified guest count. If you have any questions, please contact us directly."},
{
id: "faq4", title: "What about accommodations?", content: "We have reserved a block of rooms at the Grand Hotel with a special rate. Please check our website's 'Details' section for more information and booking instructions."},
]}
sideTitle="Your Questions, Answered"
sideDescription="Find answers to common inquiries about our wedding day, attire, and more."
faqsAnimation="slide-up"
/>
</div>
<div id="rsvp" data-section="rsvp">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "radial-gradient"}}
tag="We Can't Wait!"
title="RSVP to Our Celebration"
description="Kindly let us know if you can join us by September 26, 2024, so we can finalize our arrangements. Your presence means the world to us."
buttons={[
{
text: "RSVP Now", href: "#"},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Forever & Always"
leftLink={{
text: "Privacy Policy", href: "#"}}
rightLink={{
text: "Terms of Service", href: "#"}}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

View File

@@ -1,313 +1,65 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Heart } from "lucide-react";
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
export default function LoginPage() {
const [isEnvelopeMoving, setIsEnvelopeMoving] = useState(false);
const [showWhiteLight, setShowWhiteLight] = useState(false);
const router = useRouter();
const handleOpenEnvelope = () => {
if (!isEnvelopeMoving) { // Prevent multiple clicks
setIsEnvelopeMoving(true);
// Envelope slides up
// After envelope starts moving, begin white light fade
setTimeout(() => {
setShowWhiteLight(true);
// After white light transition, navigate
setTimeout(() => {
router.push('/home');
}, 1500); // Duration of white light transition
}, 1000); // Start white light after 1s of envelope moving
}
};
// Preload image for envelope
useEffect(() => {
const img = new Image();
img.src = "http://img.b2bpic.net/free-photo/high-angle-wedding-paper-envelope-with-seal-ribbon_23-2149374605.jpg";
}, []);
const envelopeImage = "http://img.b2bpic.net/free-photo/high-angle-wedding-paper-envelope-with-seal-ribbon_23-2149374605.jpg";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="medium"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "#home",
},
{
name: "Our Story",
id: "#our-story",
},
{
name: "Details",
id: "#details",
},
{
name: "Wedding Party",
id: "#wedding-party",
},
{
name: "RSVP",
id: "#rsvp",
},
]}
brandName="Our Wedding"
/>
</div>
<div className="relative w-screen h-screen flex items-center justify-center overflow-hidden">
{/* Envelope background */}
<div
className={`absolute inset-0 bg-cover bg-center
transform transition-[transform,opacity] duration-[2000ms,1000ms] ease-in-out
${isEnvelopeMoving ? 'translate-y-[-100%] opacity-0' : 'translate-y-0 opacity-100'}`}
style={{ backgroundImage: `url('${envelopeImage}')` }}
>
{/* Wax Seal Button - positioned relative to the envelope content */}
<button
onClick={handleOpenEnvelope}
className={`absolute top-[55%] left-1/2 -translate-x-1/2 -translate-y-1/2
w-40 h-40 bg-transparent rounded-full flex items-center justify-center
cursor-pointer z-20
${isEnvelopeMoving ? 'opacity-0 pointer-events-none' : 'opacity-100'}`}
aria-label="Click to open envelope"
disabled={isEnvelopeMoving}
>
{/* Optional: Add a subtle visual for the clickable area if desired, or rely on cursor */}
</button>
</div>
<div id="home" data-section="home">
<HeroLogo
logoText="You're Invited"
description="Join us as we say 'I do'"
buttons={[
{
text: "Open Invitation",
href: "#our-story",
},
{
text: "Our Story",
href: "#our-story",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/high-angle-wedding-paper-envelope-with-seal-ribbon_23-2149374605.jpg"
imageAlt="Realistic wedding invitation envelope with a wax seal"
showDimOverlay={false}
/>
</div>
<div id="our-story" data-section="our-story">
<TestimonialAboutCard
useInvertedBackground={false}
tag="Our Journey"
title="Two Hearts, One Journey"
description="From our first meeting to this joyous day, our love story has unfolded beautifully. We can't wait to start our next chapter with you by our side, surrounded by our dearest friends and family."
subdescription="We are thrilled to invite you to celebrate our union and witness the beginning of our forever."
icon={Heart}
imageSrc="http://img.b2bpic.net/free-photo/caring-family-walking-beach-sunset-man-woman-casual-clothes-strolling-near-water-dusk-love-family-nature-concept_74855-22809.jpg"
imageAlt="A romantic couple holding hands"
mediaAnimation="slide-up"
/>
</div>
<div id="details" data-section="details">
<FeatureCardMedia
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: "ceremony",
title: "The Ceremony",
description: "Join us as we exchange vows and begin our married life together. A heartfelt celebration of love and commitment.",
tag: "4:00 PM | October 26, 2024",
imageSrc: "http://img.b2bpic.net/free-photo/table-prepared-with-champagne-glasses_1157-335.jpg",
imageAlt: "Elegant wedding ceremony setup",
},
{
id: "reception",
title: "The Reception",
description: "Celebrate with us at an evening of dining, dancing, and joyous festivities. Enjoy delicious food and great company.",
tag: "6:00 PM | October 26, 2024",
imageSrc: "http://img.b2bpic.net/free-photo/wedding-cake-cakestand-decorated-with-white-flower-bouquet_23-2147975459.jpg",
imageAlt: "Beautiful multi-tiered wedding cake",
},
{
id: "gifts",
title: "Gifts & Well Wishes",
description: "Your presence is our greatest gift. Should you wish to honor us with a gift, a contribution towards our future would be warmly appreciated.",
tag: "Registry & Donations",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-golden-wedding-rings-attached-brown-heart-shaped-textile_181624-33810.jpg",
imageAlt: "Diamond wedding rings",
},
]}
title="Key Event Details"
description="Everything you need to know about our special day."
/>
</div>
<div id="wedding-party" data-section="wedding-party">
<TeamCardFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
team={[
{
id: "moh",
name: "Sarah Smith",
role: "Maid of Honor",
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-female-dentist-standing-dental-office_651396-3401.jpg",
imageAlt: "Maid of Honor",
},
{
id: "bm",
name: "David Johnson",
role: "Best Man",
imageSrc: "http://img.b2bpic.net/free-photo/three-men-suits-posing-garden_1153-2773.jpg",
imageAlt: "Best Man",
},
{
id: "bm1",
name: "Emily White",
role: "Bridesmaid",
imageSrc: "http://img.b2bpic.net/free-photo/carefree-joyful-charming-cheeky-blond-woman-party-all-night-long-have-fun-smiling-happily-enjoying-awesome-evening-nightclub-dancing-silver-stylish-dress-winking-sassy-camera-red-background_1258-308174.jpg",
imageAlt: "Bridesmaid Emily White",
},
{
id: "gm1",
name: "Michael Brown",
role: "Groomsman",
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-bearded-male-dressed-blue-shirt-white-jacket-bow-tie-grey-background_613910-179.jpg",
imageAlt: "Groomsman Michael Brown",
},
]}
title="Our Beloved Wedding Party"
description="Meet the wonderful people supporting us on our big day, our closest friends and family."
/>
</div>
<div id="love-wisdom" data-section="love-wisdom">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Eleanor & Richard Vance",
role: "Grandparents",
company: "Family",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-senior-couple_23-2149071648.jpg",
imageAlt: "Elderly couple smiling",
},
{
id: "t2",
name: "Jessica & Mark Chen",
role: "Friends",
company: "Couple Friends",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-people-having-fun_23-2149832975.jpg",
imageAlt: "Young couple hugging",
},
{
id: "t3",
name: "The Miller Family",
role: "Neighbors",
company: "Community",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/afroamerican-man-hugging-friends-front-view_23-2148422460.jpg",
imageAlt: "Diverse group of friends",
},
{
id: "t4",
name: "Uncle John & Aunt Mary",
role: "Family",
company: "Family",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/mother-with-daughter-playing-summer-field_1157-38723.jpg",
imageAlt: "Happy family embracing",
},
{
id: "t5",
name: "Sophia Rodriguez",
role: "Colleague",
company: "Work",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/prenatal-yoga-cobbler-pose_1163-1479.jpg",
imageAlt: "Woman reading a book",
},
]}
title="Words of Love & Wisdom"
description="Inspiring thoughts and heartfelt wishes from those who know the true meaning of love."
/>
</div>
<div id="special-thanks" data-section="special-thanks">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"Capturing Memories Photography",
"Gourmet Catering Co.",
"The Grand Ballroom Venue",
"Elegant Events Planner",
"Bloom & Petal Florists",
"Melody Makers DJ",
"Dream Dress Boutique",
"Sweet Delights Bakery",
]}
title="Special Thanks"
description="Our heartfelt gratitude to those helping make our day perfect and memorable."
speed={35}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "faq1",
title: "What is the dress code?",
content: "The dress code is formal attire. We kindly request that guests avoid wearing white or ivory to ensure the bride stands out.",
},
{
id: "faq2",
title: "Is there parking available at the venue?",
content: "Yes, ample parking is available at the venue. Valet service will also be provided for your convenience.",
},
{
id: "faq3",
title: "Can I bring a plus-one?",
content: "We have reserved a seat for you and kindly request that you adhere to the invitation's specified guest count. If you have any questions, please contact us directly.",
},
{
id: "faq4",
title: "What about accommodations?",
content: "We have reserved a block of rooms at the Grand Hotel with a special rate. Please check our website's 'Details' section for more information and booking instructions.",
},
]}
sideTitle="Your Questions, Answered"
sideDescription="Find answers to common inquiries about our wedding day, attire, and more."
faqsAnimation="slide-up"
/>
</div>
<div id="rsvp" data-section="rsvp">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "radial-gradient",
}}
tag="We Can't Wait!"
title="RSVP to Our Celebration"
description="Kindly let us know if you can join us by September 26, 2024, so we can finalize our arrangements. Your presence means the world to us."
buttons={[
{
text: "RSVP Now",
href: "#",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Forever & Always"
leftLink={{
text: "Privacy Policy",
href: "#",
}}
rightLink={{
text: "Terms of Service",
href: "#",
}}
/>
</div>
</ReactLenis>
</ThemeProvider>
{/* White light transition overlay */}
<div
className={`absolute inset-0 bg-white z-30 transition-opacity duration-1500 ease-in-out
${showWhiteLight ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
/>
</div>
);
}