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:18:11 +00:00
parent ee715fd791
commit 2a742dbf70
1 changed files with 105 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/app/page.tsx
View File

@@ -11,7 +11,6 @@ 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 = [
@@ -24,28 +23,125 @@ export default function Home() {
<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" }]} />
<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" />
<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." />
<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!" />
<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" }]} />
<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" }]} />
<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 }]} />
<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" }] }]} />
<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>
);