Update src/app/page.tsx

This commit is contained in:
2026-05-07 12:50:16 +00:00
parent 06a6100e1d
commit 2d889799c4

View File

@@ -1,342 +1,129 @@
"use client"; "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ContactText from '@/components/sections/contact/ContactText'; import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia'; import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve'; import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal'; import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial'; import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout'; import ContactText from "@/components/sections/contact/ContactText";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import PricingCardFive from '@/components/sections/pricing/PricingCardFive'; import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen'; import { BlurReveal } from "lucide-react";
export default function LandingPage() { const navItems = [{ name: "Home", id: "/" }];
export default function Page() {
return ( return (
<ThemeProvider <ThemeProvider background="circleGradient" borderRadius="rounded" contentWidth="medium">
defaultButtonVariant="text-stagger" <div id="nav" data-section="nav">
defaultTextAnimation="background-highlight" <NavbarLayoutFloatingOverlay navItems={navItems} brandName="Ruoooo's Birthday" />
borderRadius="pill" </div>
contentWidth="medium" <div id="hero" data-section="hero">
sizing="largeSizeMediumTitles" <HeroSplitTestimonial
background="grid" title="Welcome to Ruoooo's Birthday Journey"
cardStyle="inset" description="Enter the secret password to begin the surprise journey."
primaryButtonStyle="shadow" background={{ variant: "plain" }}
secondaryButtonStyle="layered" testimonials={[
headingFontWeight="light" { name: "Sara", handle: "@friend", testimonial: "Ruoooo is the sweetest friend ever!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-curly-haired-young-woman-isolated_273609-48290.jpg" },
> { name: "Amal", handle: "@family", testimonial: "Sending so much love to the birthday girl!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-pretty-woman-with-surf-zinc-cheeks_273609-44332.jpg" },
<ReactLenis root> { name: "Sara", handle: "@sis", testimonial: "Happy birthday, we love you!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-tourist-woman-smiling-happy-drinking-coffee-city_839833-25789.jpg" },
<div id="nav" data-section="nav"> { name: "Yarohyy", handle: "@best", testimonial: "You are my moon, happy birthday!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/green-eyed-woman-white-t-shirt-pink-jacket-with-snow-white-smile-looks-front-posing-street_197531-17040.jpg" },
<NavbarLayoutFloatingOverlay { name: "Mimi", handle: "@buddy", testimonial: "Celebrating you today and always!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-afro-haircut-wearing-yellow-sweater_273609-22989.jpg" }
navItems={[ ]}
{ imageSrc="http://img.b2bpic.net/free-photo/candy-canes-heart-shape-with-flowers-table_23-2148017894.jpg"
name: "Journey", mediaAnimation="blur-reveal"
id: "hero", avatars={[
}, { src: "http://img.b2bpic.net/free-photo/portrait-positive-adult-dark-skinned-man-smiling-broadly-while-sitting-park-listening-music-headphones-holding-them-with-hands-hear-better_176420-19808.jpg", alt: "Portrait of positive man" },
{ { src: "http://img.b2bpic.net/free-photo/happy-joyful-woman-laughs-happily-keeps-arms-folded-expresses-positive-emotions-grins-from-happiness-dressed-casual-jumper-isolated-blue-wall-has-fun-hears-funny-joke_273609-44695.jpg", alt: "Happy joyful woman" },
name: "Message", { src: "http://img.b2bpic.net/free-photo/young-woman-with-afro-haircut-wearing-orange-jumper_273609-21593.jpg", alt: "Young woman in orange" },
id: "about", { src: "http://img.b2bpic.net/free-photo/joyful-young-blonde-slavic-girl-stucking-her-tongue-gesturing-horns_141793-125402.jpg", alt: "Joyful blonde girl" },
}, { src: "http://img.b2bpic.net/free-photo/portrait-attractive-stylish-blond-smiling-woman-straw-red-hat-blouse-summer-fashion-outfit-talking-phone-positive-gesture-emotion_285396-8431.jpg", alt: "Stylish blond smiling woman" }
{ ]}
name: "Surprises", marqueeItems={[
id: "features", { type: "text", text: "Happy Birthday!" },
}, { type: "text", text: "Ruoooo's Special Day" },
]} { type: "text", text: "Joy & Love" },
brandName="Ruoooo's Day" { type: "text", text: "Best Day Ever" },
/> { type: "text", text: "Forever Young" }
</div> ]}
/>
<div id="hero" data-section="hero"> </div>
<HeroSplitTestimonial <div id="about" data-section="about">
useInvertedBackground={false} <InlineImageSplitTextAbout
background={{ heading={[
variant: "plain", { type: "text", content: "A Letter for You" },
}} { type: "image", src: "http://img.b2bpic.net/free-photo/flat-lay-still-life-school-supplies-assortment_23-2148981735.jpg", alt: "Envelope" }
title="Welcome to Ruoooo's Birthday Journey" ]}
description="Enter the secret password to begin the surprise journey." />
testimonials={[ </div>
{ <div id="features" data-section="features">
name: "Sara", <FeatureCardTwelve
handle: "@friend", animationType="slide-up"
testimonial: "Ruoooo is the sweetest friend ever!", textboxLayout="default"
rating: 5, title="Reasons I Love You"
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-curly-haired-young-woman-isolated_273609-48290.jpg", description="Just a few reasons why you are special."
}, features={[
{ { id: "1", label: "Cutest", title: "World's Cutest", items: ["You are the cutest girl in the world."] },
name: "Amal", { id: "2", label: "Strong", title: "Big Biceps", items: ["You have very big biceps."] },
handle: "@family", { id: "3", label: "Height", title: "156 cm Tall", items: ["You're exactly 156 cm tall."] },
testimonial: "Sending so much love to the birthday girl!", { id: "4", label: "Lovely", title: "So Lovely", items: ["Everything about you is lovely."] },
rating: 5, { id: "5", label: "Soul", title: "Positive Soul", items: ["You have such a positive soul."] }
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-pretty-woman-with-surf-zinc-cheeks_273609-44332.jpg", ]}
}, />
{ </div>
name: "Sara", <div id="pricing" data-section="pricing">
handle: "@sis", <PricingCardFive
testimonial: "Happy birthday, we love you!", animationType="scale-rotate"
rating: 5, textboxLayout="default"
imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-tourist-woman-smiling-happy-drinking-coffee-city_839833-25789.jpg", title="Surprise Status"
}, description="Birthday celebration progress."
{ plans={[
name: "Yarohyy", { id: "p1", tag: "Active", price: "Ruoooo", period: "Birthday", description: "Enjoy your day to the fullest!", button: { text: "Celebrate!" }, featuresTitle: "Wishlist", features: ["Happiness", "Joy", "Lots of love"] }
handle: "@best", ]}
testimonial: "You are my moon, happy birthday!", />
rating: 5, </div>
imageSrc: "http://img.b2bpic.net/free-photo/green-eyed-woman-white-t-shirt-pink-jacket-with-snow-white-smile-looks-front-posing-street_197531-17040.jpg", <div id="testimonials" data-section="testimonials">
}, <TestimonialCardTen
{ textboxLayout="default"
name: "Mimi", title="Love from Friends"
handle: "@buddy", description="Warm words from the people who love you."
testimonial: "Celebrating you today and always!", testimonials={[
rating: 5, { id: "t1", title: "Birthday Wish", quote: "Happy birthday girl!", name: "Sara", role: "Friend", imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-caucasian-smiling-woman_93675-135489.jpg" },
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-afro-haircut-wearing-yellow-sweater_273609-22989.jpg", { id: "t2", title: "Best Wishes", quote: "You are amazing!", name: "Amal", role: "Friend", imageSrc: "http://img.b2bpic.net/free-photo/young-happy-exited-stylish-woman-with-long-hair-big-eyes-wearing-green-sweater-posing-with-smile-red-wall_291650-770.jpg" },
}, { id: "t3", title: "Love", quote: "Stay cute forever!", name: "Sara", role: "Sister", imageSrc: "http://img.b2bpic.net/free-photo/sincere-happy-charismatic-redhead-girl-smiling-close-eyes-enjoy-warm-summer-sunbeams-laughing-cheerf_1258-135225.jpg" },
]} { id: "t4", title: "Friendship", quote: "Love you Ruoooo!", name: "Yarohyy", role: "Bestie", imageSrc: "http://img.b2bpic.net/free-photo/happy-wavy-haired-girl-smiling-camera-outdoors_1262-20568.jpg" },
imageSrc="http://img.b2bpic.net/free-photo/candy-canes-heart-shape-with-flowers-table_23-2148017894.jpg" { id: "t5", title: "Happy Day", quote: "Enjoy your special day!", name: "Mom", role: "Family", imageSrc: "http://img.b2bpic.net/free-photo/trendy-woman-casual-cute-pink-clothes_158538-10124.jpg" }
mediaAnimation="blur-reveal" ]}
avatars={[ />
{ </div>
src: "http://img.b2bpic.net/free-photo/portrait-positive-adult-dark-skinned-man-smiling-broadly-while-sitting-park-listening-music-headphones-holding-them-with-hands-hear-better_176420-19808.jpg", <div id="contact" data-section="contact">
alt: "Portrait of positive man", <ContactText
}, background={{ variant: "sparkles-gradient" }}
{ text="I hope you have the best day ever, ya katkott!"
src: "http://img.b2bpic.net/free-photo/happy-joyful-woman-laughs-happily-keeps-arms-folded-expresses-positive-emotions-grins-from-happiness-dressed-casual-jumper-isolated-blue-wall-has-fun-hears-funny-joke_273609-44695.jpg", />
alt: "Happy joyful woman", </div>
}, <div id="faq" data-section="faq">
{ <FaqSplitMedia
src: "http://img.b2bpic.net/free-photo/young-woman-with-afro-haircut-wearing-orange-jumper_273609-21593.jpg", textboxLayout="default"
alt: "Young woman in orange", title="Final Thoughts"
}, description="Just a little reminder of how special you are."
{ faqsAnimation="blur-reveal"
src: "http://img.b2bpic.net/free-photo/joyful-young-blonde-slavic-girl-stucking-her-tongue-gesturing-horns_141793-125402.jpg", faqs={[
alt: "Joyful blonde girl", { id: "q1", title: "Will I see you soon?", content: "I hope I get to see you very soon, Yarohyy." },
}, { id: "q2", title: "How much do I love you?", content: "I love you so so much." }
{ ]}
src: "http://img.b2bpic.net/free-photo/portrait-attractive-stylish-blond-smiling-woman-straw-red-hat-blouse-summer-fashion-outfit-talking-phone-positive-gesture-emotion_285396-8431.jpg", imageSrc="http://img.b2bpic.net/free-photo/set-ornament-paper-hearts-pocket-watch_23-2148031548.jpg"
alt: "Stylish blond smiling woman", />
}, </div>
]} <div id="footer" data-section="footer">
marqueeItems={[ <FooterLogoReveal
{ logoText="Ruoooo's Birthday"
type: "text", leftLink={{ text: "Back to start", href: "#hero" }}
text: "Happy Birthday!", rightLink={{ text: "Made with love", href: "#" }}
}, />
{ </div>
type: "text",
text: "Ruoooo's Special Day",
},
{
type: "text",
text: "Joy & Love",
},
{
type: "text",
text: "Best Day Ever",
},
{
type: "text",
text: "Forever Young",
},
]}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{
type: "text",
content: "A Letter for You",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/flat-lay-still-life-school-supplies-assortment_23-2148981735.jpg",
alt: "Envelope",
},
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwelve
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: "1",
label: "Cutest",
title: "World's Cutest",
items: [
"You are the cutest girl in the world.",
],
},
{
id: "2",
label: "Strong",
title: "Big Biceps",
items: [
"You have very big biceps.",
],
},
{
id: "3",
label: "Height",
title: "156 cm Tall",
items: [
"You're exactly 156 cm tall.",
],
},
{
id: "4",
label: "Lovely",
title: "So Lovely",
items: [
"Everything about you is lovely.",
],
},
{
id: "5",
label: "Soul",
title: "Positive Soul",
items: [
"You have such a positive soul.",
],
},
]}
title="Reasons I Love You"
description="Just a few reasons why you are special."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "p1",
tag: "Active",
price: "Ruoooo",
period: "Birthday",
description: "Enjoy your day to the fullest!",
button: {
text: "Celebrate!",
},
featuresTitle: "Wishlist",
features: [
"Happiness",
"Joy",
"Lots of love",
],
},
]}
title="Surprise Status"
description="Birthday celebration progress."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
title: "Birthday Wish",
quote: "Happy birthday girl!",
name: "Sara",
role: "Friend",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-caucasian-smiling-woman_93675-135489.jpg",
},
{
id: "t2",
title: "Best Wishes",
quote: "You are amazing!",
name: "Amal",
role: "Friend",
imageSrc: "http://img.b2bpic.net/free-photo/young-happy-exited-stylish-woman-with-long-hair-big-eyes-wearing-green-sweater-posing-with-smile-red-wall_291650-770.jpg",
},
{
id: "t3",
title: "Love",
quote: "Stay cute forever!",
name: "Sara",
role: "Sister",
imageSrc: "http://img.b2bpic.net/free-photo/sincere-happy-charismatic-redhead-girl-smiling-close-eyes-enjoy-warm-summer-sunbeams-laughing-cheerf_1258-135225.jpg",
},
{
id: "t4",
title: "Friendship",
quote: "Love you Ruoooo!",
name: "Yarohyy",
role: "Bestie",
imageSrc: "http://img.b2bpic.net/free-photo/happy-wavy-haired-girl-smiling-camera-outdoors_1262-20568.jpg",
},
{
id: "t5",
title: "Happy Day",
quote: "Enjoy your special day!",
name: "Mom",
role: "Family",
imageSrc: "http://img.b2bpic.net/free-photo/trendy-woman-casual-cute-pink-clothes_158538-10124.jpg",
},
]}
title="Love from Friends"
description="Warm words from the people who love you."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "Will I see you soon?",
content: "I hope I get to see you very soon, Yarohyy.",
},
{
id: "q2",
title: "How much do I love you?",
content: "I love you so so much.",
},
]}
title="Final Thoughts"
description="Just a little reminder of how special you are."
faqsAnimation="blur-reveal"
imageSrc="http://img.b2bpic.net/free-photo/set-ornament-paper-hearts-pocket-watch_23-2148031548.jpg"
mediaAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "sparkles-gradient",
}}
text="I hope you have the best day ever, ya katkott!"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Ruoooo's Birthday"
leftLink={{
text: "Back to start",
href: "#hero",
}}
rightLink={{
text: "Made with love",
href: "#",
}}
/>
</div>
</ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }