Update src/app/page.tsx
This commit is contained in:
457
src/app/page.tsx
457
src/app/page.tsx
@@ -1,342 +1,129 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
|
||||
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
||||
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
|
||||
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
|
||||
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { BlurReveal } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const navItems = [{ name: "Home", id: "/" }];
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="grid"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Journey",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Message",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Surprises",
|
||||
id: "features",
|
||||
},
|
||||
]}
|
||||
brandName="Ruoooo's Day"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Welcome to Ruoooo's Birthday Journey"
|
||||
description="Enter the secret password to begin the surprise journey."
|
||||
testimonials={[
|
||||
{
|
||||
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",
|
||||
},
|
||||
{
|
||||
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",
|
||||
},
|
||||
{
|
||||
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",
|
||||
},
|
||||
{
|
||||
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",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/candy-canes-heart-shape-with-flowers-table_23-2148017894.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
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",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-woman-with-afro-haircut-wearing-orange-jumper_273609-21593.jpg",
|
||||
alt: "Young woman in orange",
|
||||
},
|
||||
{
|
||||
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",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Happy Birthday!",
|
||||
},
|
||||
{
|
||||
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 background="circleGradient" borderRadius="rounded" contentWidth="medium">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay navItems={navItems} brandName="Ruoooo's Birthday" />
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
title="Welcome to Ruoooo's Birthday Journey"
|
||||
description="Enter the secret password to begin the surprise journey."
|
||||
background={{ variant: "plain" }}
|
||||
testimonials={[
|
||||
{ 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" },
|
||||
{ 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" },
|
||||
{ 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" },
|
||||
{ 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" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/candy-canes-heart-shape-with-flowers-table_23-2148017894.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
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" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-woman-with-afro-haircut-wearing-orange-jumper_273609-21593.jpg", alt: "Young woman in orange" },
|
||||
{ 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" }
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Happy Birthday!" },
|
||||
{ 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
|
||||
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"
|
||||
title="Reasons I Love You"
|
||||
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."] },
|
||||
{ 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."] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
title="Surprise Status"
|
||||
description="Birthday celebration progress."
|
||||
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"] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
title="Love from Friends"
|
||||
description="Warm words from the people who love you."
|
||||
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" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="I hope you have the best day ever, ya katkott!"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
title="Final Thoughts"
|
||||
description="Just a little reminder of how special you are."
|
||||
faqsAnimation="blur-reveal"
|
||||
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." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/set-ornament-paper-hearts-pocket-watch_23-2148031548.jpg"
|
||||
/>
|
||||
</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>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user