Update src/app/page.tsx
This commit is contained in:
364
src/app/page.tsx
364
src/app/page.tsx
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user