bender/f0bf6081-ed5a-4a10-a565-690f657b8a3c
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-08 16:15:27 +00:00
parent 6bef712c80
commit ee715fd791
1 changed files with 44 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

432
src/app/page.tsx
View File

@@ -1,396 +1,52 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FeatureCardTwentyEight from "@/components/sections/feature/FeatureCardTwentyEight";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Calendar, Clock, Heart } from "lucide-react";
import Link from "next/link";
export default function Home() {
const navItems = [
{ name: "Home", id: "/" }
];
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="compact"
sizing="medium"
background="aurora"
cardStyle="glass-depth"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="radial-glow"
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Start",
id: "hero",
},
{
name: "Message",
id: "message",
},
{
name: "Love",
id: "reasons",
},
{
name: "Final",
id: "surprise",
},
]}
brandName="Ruoooo"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{
variant: "sparkles-gradient",
}}
title="Welcome, Ruoooo! 💕"
description="A very special journey for the cutest birthday girl."
carouselItems={[
{
id: "1",
imageSrc: "http://img.b2bpic.net/free-photo/light-background-pastel-pink_53876-120097.jpg?_wi=1",
},
{
id: "2",
imageSrc: "http://img.b2bpic.net/free-photo/image-concept-happy-mothers-day_185193-109574.jpg",
},
{
id: "3",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-gift-holiday-box-pink-background_169016-3743.jpg",
},
{
id: "4",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-pink-gold-fluid-art-texture_23-2152014430.jpg",
},
{
id: "5",
imageSrc: "http://img.b2bpic.net/free-photo/paper-sheet-near-hearts-cute-gift_23-2148015418.jpg",
},
{
id: "6",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-pink-watercolor-textured-phone-background_53876-147948.jpg",
},
]}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
title="Message for you"
description="On this very day, the cutest girl I’ve ever met was born. From the first moment I saw you on that trip, I thought to myself, 'Who is this moon? She is so incredibly cute.' I really wish we could have spent more time together; those six hours flew by!"
bulletPoints={[
{
title: "Memory",
description: "The arm wrestling matches I definitely won.",
},
{
title: "Cuteness",
description: "Trying not to hit your head on swing chains.",
},
{
title: "Friendship",
description: "26 days since our first year of friendship.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/decorative-paper-confetti-near-envelope-with-tag-with-words_23-2148077962.jpg?_wi=1"
mediaAnimation="slide-up"
/>
</div>
<div id="reasons" data-section="reasons">
<FeatureCardTwentyEight
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: "1",
title: "Cutest",
subtitle: "Cutest girl in the world",
category: "Soul",
value: "1",
},
{
id: "2",
title: "Strength",
subtitle: "Very big biceps",
category: "Power",
value: "2",
},
{
id: "3",
title: "Height",
subtitle: "156 cm tall",
category: "Cute",
value: "3",
},
{
id: "4",
title: "Lovely",
subtitle: "Everything is lovely",
category: "Vibe",
value: "4",
},
{
id: "5",
title: "Soul",
subtitle: "Such a positive soul",
category: "Spirit",
value: "5",
},
]}
title="Reasons I Love You 💕"
description="Everything about you is lovely, Ruoooo."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Mom",
role: "Supporter",
company: "Family",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/girl-by-window-winter_23-2152026828.jpg",
imageAlt: "cute girl illustration",
},
{
id: "2",
name: "Sara",
role: "Friend",
company: "Bestie",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/light-background-pastel-pink_53876-120097.jpg?_wi=2",
imageAlt: "cute girl illustration",
},
{
id: "3",
name: "Amal",
role: "Friend",
company: "Friend",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/decorative-paper-confetti-near-envelope-with-tag-with-words_23-2148077962.jpg?_wi=2",
imageAlt: "cute girl illustration",
},
{
id: "4",
name: "Little Sister",
role: "Family",
company: "Family",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/dumbells-still-life-studio_23-2151747255.jpg",
imageAlt: "cute girl illustration",
},
{
id: "5",
name: "Yarohyy",
role: "Admiring friend",
company: "Friend",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-builder-woman-uniform-stretching-out-tape-measure-isolated-olive-green-wall_141793-119644.jpg",
imageAlt: "cute girl illustration",
},
]}
kpiItems={[
{
value: "100%",
label: "Love",
},
{
value: "Birthday",
label: "Special Day",
},
{
value: "Cutest",
label: "Ruoooo",
},
]}
title="Sweet Wishes"
description="Everyone wishing you the happiest birthday!"
/>
</div>
<div id="blog" data-section="blog">
<BlogCardTwo
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
title="Birthday Moments"
description="Capture the magic of today."
blogs={[
{
id: "1",
category: "Joy",
title: "Celebrating you",
excerpt: "The day you were born is the best.",
imageSrc: "http://img.b2bpic.net/free-photo/pastel-pink-watercolour-background_1048-6837.jpg",
authorName: "Yarohyy",
authorAvatar: "http://img.b2bpic.net/free-photo/symbol-heart-paper-confetti-near-envelope_23-2148077956.jpg",
date: "Birthday",
},
{
id: "2",
category: "Fun",
title: "Swing fun",
excerpt: "Be careful with those swing chains!",
imageSrc: "http://img.b2bpic.net/free-photo/light-pink-abstract-watercolor-background_23-2147835836.jpg",
authorName: "Yarohyy",
authorAvatar: "http://img.b2bpic.net/free-photo/anime-stylecelebrating-valentines-day_23-2151258007.jpg",
date: "Birthday",
},
{
id: "3",
category: "Love",
title: "Biceps check",
excerpt: "Those gains are legendary.",
imageSrc: "http://img.b2bpic.net/free-photo/watercolor-paper-texture-composition_23-2149033906.jpg",
authorName: "Yarohyy",
authorAvatar: "http://img.b2bpic.net/free-photo/happy-mothers-day-inscription-with-envelope-paint-brushes_23-2148073652.jpg",
date: "Birthday",
},
]}
/>
</div>
<div id="product" data-section="product">
<ProductCardThree
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "1",
name: "Pink Cake",
price: "Gift",
imageSrc: "http://img.b2bpic.net/free-photo/set-various-handmade-hearts_23-2148015413.jpg",
},
{
id: "2",
name: "Flowers",
price: "Gift",
imageSrc: "http://img.b2bpic.net/free-photo/heart-shaped-cookies-valentines-day_23-2148389636.jpg",
},
{
id: "3",
name: "Balloons",
price: "Gift",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-soft-pastel-colorful-background_306501-873.jpg",
},
{
id: "4",
name: "Teddy Bear",
price: "Gift",
imageSrc: "http://img.b2bpic.net/free-photo/space-love_1388-3.jpg",
},
{
id: "5",
name: "Candles",
price: "Gift",
imageSrc: "http://img.b2bpic.net/free-photo/metallic-heart-confetti-pink-wallpaper_53876-94515.jpg",
},
{
id: "6",
name: "Surprise",
price: "Gift",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-pink-watercolor-background-illustration-high-resolution-free-photo_1340-21122.jpg",
},
]}
title="Gifts for Ruoooo"
description="Special items for a very special person."
/>
</div>
<div id="metric" data-section="metric">
<MetricCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{
id: "1",
value: "1",
title: "Friendship Year",
description: "Completed our first amazing year.",
icon: Calendar,
},
{
id: "2",
value: "26",
title: "Days Ago",
description: "Since we celebrated year one.",
icon: Clock,
},
{
id: "3",
value: "156",
title: "Height (cm)",
description: "Perfect in every way.",
icon: Heart,
},
]}
title="Celebrating You"
description="Your year in moments."
/>
</div>
<div id="surprise" data-section="surprise">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/table-arrangement-birthday-event-with-cake-candles_23-2149312285.jpg"
logoText="Happy Birthday Ruoooo! 🎂❤️"
columns={[
{
title: "Journey",
items: [
{
label: "Start",
href: "#hero",
},
{
label: "Message",
href: "#message",
},
],
},
{
title: "Surprise",
items: [
{
label: "Love Reasons",
href: "#reasons",
},
{
label: "Final Gift",
href: "#surprise",
},
],
},
]}
/>
</div>
</ReactLenis>
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
<div id="nav" data-section="nav">
<NavbarStyleApple brandName="Ruoooo" navItems={navItems} />
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel background={{ variant: "sparkles-gradient" }} title="Welcome, Ruoooo! 💕" description="A very special journey for the cutest birthday girl." carouselItems={[{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/light-background-pastel-pink_53876-120097.jpg" }, { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/image-concept-happy-mothers-day_185193-109574.jpg" }, { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-gift-holiday-box-pink-background_169016-3743.jpg" }, { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/abstract-pink-gold-fluid-art-texture_23-2152014430.jpg" }, { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/paper-sheet-near-hearts-cute-gift_23-2148015418.jpg" }, { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/abstract-pink-watercolor-textured-phone-background_53876-147948.jpg" }]} />
</div>
<div id="about" data-section="about">
<SplitAbout textboxLayout="split" useInvertedBackground={false} title="Message for you" description="On this very day, the cutest girl I’ve ever met was born. From the first moment I saw you on that trip, I thought to myself, 'Who is this moon? She is so incredibly cute.' I really wish we could have spent more time together; those six hours flew by!" bulletPoints={[{ title: "Memory", description: "The arm wrestling matches I definitely won." }, { title: "Cuteness", description: "Trying not to hit your head on swing chains." }, { title: "Friendship", description: "26 days since our first year of friendship." }]} imageSrc="http://img.b2bpic.net/free-photo/decorative-paper-confetti-near-envelope-with-tag-with-words_23-2148077962.jpg" mediaAnimation="slide-up" />
</div>
<div id="reasons" data-section="reasons">
<FeatureCardTwentyEight animationType="slide-up" textboxLayout="default" useInvertedBackground={false} features={[{ id: "1", title: "Cutest", subtitle: "Cutest girl in the world", category: "Soul", value: "1" }, { id: "2", title: "Strength", subtitle: "Very big biceps", category: "Power", value: "2" }, { id: "3", title: "Height", subtitle: "156 cm tall", category: "Cute", value: "3" }, { id: "4", title: "Lovely", subtitle: "Everything is lovely", category: "Vibe", value: "4" }, { id: "5", title: "Soul", subtitle: "Such a positive soul", category: "Spirit", value: "5" }]} title="Reasons I Love You 💕" description="Everything about you is lovely, Ruoooo." />
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen animationType="slide-up" textboxLayout="split" useInvertedBackground={false} testimonials={[{ id: "1", name: "Mom", role: "Supporter", company: "Family", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/girl-by-window-winter_23-2152026828.jpg" }, { id: "2", name: "Sara", role: "Friend", company: "Bestie", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/light-background-pastel-pink_53876-120097.jpg" }, { id: "3", name: "Amal", role: "Friend", company: "Friend", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/decorative-paper-confetti-near-envelope-with-tag-with-words_23-2148077962.jpg" }, { id: "4", name: "Little Sister", role: "Family", company: "Family", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/dumbells-still-life-studio_23-2151747255.jpg" }, { id: "5", name: "Yarohyy", role: "Admiring friend", company: "Friend", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-builder-woman-uniform-stretching-out-tape-measure-isolated-olive-green-wall_141793-119644.jpg" }]} kpiItems={[{ value: "100%", label: "Love" }, { value: "Birthday", label: "Special Day" }, { value: "Cutest", label: "Ruoooo" }]} title="Sweet Wishes" description="Everyone wishing you the happiest birthday!" />
</div>
<div id="blog" data-section="blog">
<BlogCardTwo animationType="slide-up" textboxLayout="split" useInvertedBackground={false} title="Birthday Moments" description="Capture the magic of today." blogs={[{ id: "1", category: "Joy", title: "Celebrating you", excerpt: "The day you were born is the best.", imageSrc: "http://img.b2bpic.net/free-photo/pastel-pink-watercolour-background_1048-6837.jpg", authorName: "Yarohyy", authorAvatar: "http://img.b2bpic.net/free-photo/symbol-heart-paper-confetti-near-envelope_23-2148077956.jpg", date: "Birthday" }, { id: "2", category: "Fun", title: "Swing fun", excerpt: "Be careful with those swing chains!", imageSrc: "http://img.b2bpic.net/free-photo/light-pink-abstract-watercolor-background_23-2147835836.jpg", authorName: "Yarohyy", authorAvatar: "http://img.b2bpic.net/free-photo/anime-stylecelebrating-valentines-day_23-2151258007.jpg", date: "Birthday" }, { id: "3", category: "Love", title: "Biceps check", excerpt: "Those gains are legendary.", imageSrc: "http://img.b2bpic.net/free-photo/watercolor-paper-texture-composition_23-2149033906.jpg", authorName: "Yarohyy", authorAvatar: "http://img.b2bpic.net/free-photo/happy-mothers-day-inscription-with-envelope-paint-brushes_23-2148073652.jpg", date: "Birthday" }]} />
</div>
<div id="product" data-section="product">
<ProductCardThree animationType="slide-up" textboxLayout="split" gridVariant="three-columns-all-equal-width" useInvertedBackground={false} title="Gifts for Ruoooo" description="Special items for a very special person." products={[{ id: "1", name: "Pink Cake", price: "Gift", imageSrc: "http://img.b2bpic.net/free-photo/set-various-handmade-hearts_23-2148015413.jpg" }, { id: "2", name: "Flowers", price: "Gift", imageSrc: "http://img.b2bpic.net/free-photo/heart-shaped-cookies-valentines-day_23-2148389636.jpg" }, { id: "3", name: "Balloons", price: "Gift", imageSrc: "http://img.b2bpic.net/free-photo/abstract-soft-pastel-colorful-background_306501-873.jpg" }, { id: "4", name: "Teddy Bear", price: "Gift", imageSrc: "http://img.b2bpic.net/free-photo/space-love_1388-3.jpg" }, { id: "5", name: "Candles", price: "Gift", imageSrc: "http://img.b2bpic.net/free-photo/metallic-heart-confetti-pink-wallpaper_53876-94515.jpg" }, { id: "6", name: "Surprise", price: "Gift", imageSrc: "http://img.b2bpic.net/free-photo/abstract-pink-watercolor-background-illustration-high-resolution-free-photo_1340-21122.jpg" }]} />
</div>
<div id="metric" data-section="metric">
<MetricCardOne animationType="slide-up" textboxLayout="split" gridVariant="uniform-all-items-equal" useInvertedBackground={false} title="Celebrating You" description="Your year in moments." metrics={[{ id: "1", value: "1", title: "Friendship Year", description: "Completed our first amazing year.", icon: Calendar }, { id: "2", value: "26", title: "Days Ago", description: "Since we celebrated year one.", icon: Clock }, { id: "3", value: "156", title: "Height (cm)", description: "Perfect in every way.", icon: Heart }]} />
</div>
<div id="surprise" data-section="surprise">
<FooterMedia imageSrc="http://img.b2bpic.net/free-photo/table-arrangement-birthday-event-with-cake-candles_23-2149312285.jpg" logoText="Happy Birthday Ruoooo! 🎂❤️" columns={[{ title: "Journey", items: [{ label: "Start", href: "#hero" }, { label: "Message", href: "#message" }] }, { title: "Surprise", items: [{ label: "Love Reasons", href: "#reasons" }, { label: "Final Gift", href: "#surprise" }] }]} />
</div>
</ThemeProvider>
);
}
}