Merge version_1 into main #5
@@ -12,7 +12,7 @@ import { Fredoka_One, Quicksand } from "next/font/google";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Happy Birthday Ruoooo!',
|
||||
description: 'A very special birthday celebration for Ruoooo.',
|
||||
description: 'A surprise celebration for a very special person.',
|
||||
};
|
||||
|
||||
const fredokaOne = Fredoka_One({ variable: "--font-fredoka", subsets: ["latin"], weight: ["400"] });
|
||||
|
||||
230
src/app/page.tsx
230
src/app/page.tsx
@@ -1,138 +1,112 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
||||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import { Heart, Briefcase, Maximize, Star, Sun } from "lucide-react";
|
||||
import { Heart, Briefcase, Maximize, Star, Sun } from 'lucide-react';
|
||||
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" }
|
||||
];
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="For Ruoooo"
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Ready", id: "ready" },
|
||||
{ name: "Reasons", id: "reasons" },
|
||||
{ name: "Secret", id: "password" },
|
||||
{ name: "Final", id: "final" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayTestimonial
|
||||
title="Welcome, Ruoooo! 💕"
|
||||
description="A very special journey for a very special person."
|
||||
testimonials={[
|
||||
{ name: "The Sun", handle: "@shining", testimonial: "Your smile lights up the whole room, Ruoooo! Happy birthday!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/roses-by-small-bowl-red-popcorn-marble-table_114579-56540.jpg" },
|
||||
{ name: "The Moon", handle: "@glowing", testimonial: "You deserve the most beautiful, sparkling birthday ever.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/floral-ornaments_23-2148134120.jpg" },
|
||||
{ name: "The Stars", handle: "@twinkling", testimonial: "Sending you all the birthday magic in the galaxy today.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/glass-bowl-popcorn-candy-resting-top-piece-pink-fabric-marble-table_114579-56527.jpg" },
|
||||
{ name: "The Breeze", handle: "@whispering", testimonial: "May your year be as sweet as you are. Enjoy every moment!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-beautiful-valentine-s-day-concept_23-2148717890.jpg" },
|
||||
{ name: "The Flowers", handle: "@blooming", testimonial: "Wishing the cutest girl a day filled with laughter and love.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/festive-frame-with-one-rose-pink-wall-top-view-flat-lay-copy-space_127032-2189.jpg" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/festive-frame-with-one-rose-pink-wall-top-view-flat-lay-copy-space_127032-2189.jpg"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/festive-frame-with-one-rose-pink-wall-top-view-flat-lay-copy-space_127032-2189.jpg", alt: "Avatar 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/roses-by-small-bowl-red-popcorn-marble-table_114579-56540.jpg", alt: "Avatar 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/floral-ornaments_23-2148134120.jpg", alt: "Avatar 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/glass-bowl-popcorn-candy-resting-top-piece-pink-fabric-marble-table_114579-56527.jpg", alt: "Avatar 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/flat-lay-beautiful-valentine-s-day-concept_23-2148717890.jpg", alt: "Avatar 5" }
|
||||
]}
|
||||
avatarText="Loved by everyone!"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="ready" data-section="ready">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Are you ready yaa ruoooo! 💕"
|
||||
description="Click the button below to start your surprise."
|
||||
metrics={[
|
||||
{ value: "100%", title: "Celebration Level" },
|
||||
{ value: "∞", title: "Happiness Factor" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/glass-bowl-popcorn-candy-resting-top-piece-pink-fabric-marble-table_114579-56527.jpg"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="message" data-section="message">
|
||||
<FaqSplitMedia
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "1", title: "Why today?", content: "Because the world became a much brighter place the day you were born." },
|
||||
{ id: "2", title: "My wish for you", content: "That you always feel as cherished, celebrated, and loved as you are right now." }
|
||||
]}
|
||||
title="Message for you"
|
||||
description="Read this letter with all my heart."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/floral-ornaments_23-2148134120.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reasons" data-section="reasons">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Heart, title: "Cutest girl in the world", description: "Simply the best." },
|
||||
{ icon: Briefcase, title: "Big biceps", description: "Super strong!" },
|
||||
{ icon: Maximize, title: "156 cm tall", description: "Perfect height." },
|
||||
{ icon: Star, title: "Lovely soul", description: "Truly unique." },
|
||||
{ icon: Sun, title: "Positive soul", description: "Always shining." }
|
||||
]}
|
||||
title="You thought it was over!!!!"
|
||||
description="We've only just begun! Here are reasons I love you."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="password" data-section="password">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Secret"
|
||||
title="ENTER THE SECRET PASSWORD"
|
||||
description="Only for the birthday girl."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-beautiful-valentine-s-day-concept_23-2148134120.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="final" data-section="final">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Final Surprise"
|
||||
title="happy birthday day yaa ruoooo 🎂❤️"
|
||||
description="I hope you love it wish you all the best ya katkott enjoy your day"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/roses-by-small-bowl-red-popcorn-marble-table_114579-56540.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
<ThemeProvider>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Ruoooo" />
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayTestimonial
|
||||
title="Welcome, Ruoooo! 💕"
|
||||
description="A very special journey for a very special person."
|
||||
testimonials={[
|
||||
{ name: "The Sun", handle: "@shining", testimonial: "Your smile lights up the whole room, Ruoooo! Happy birthday!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/roses-by-small-bowl-red-popcorn-marble-table_114579-56540.jpg" },
|
||||
{ name: "The Moon", handle: "@glowing", testimonial: "You deserve the most beautiful, sparkling birthday ever.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/floral-ornaments_23-2148134120.jpg" },
|
||||
{ name: "The Stars", handle: "@twinkling", testimonial: "Sending you all the birthday magic in the galaxy today.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/glass-bowl-popcorn-candy-resting-top-piece-pink-fabric-marble-table_114579-56527.jpg" },
|
||||
{ name: "The Breeze", handle: "@whispering", testimonial: "May your year be as sweet as you are. Enjoy every moment!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-beautiful-valentine-s-day-concept_23-2148717890.jpg" },
|
||||
{ name: "The Flowers", handle: "@blooming", testimonial: "Wishing the cutest girl a day filled with laughter and love.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/festive-frame-with-one-rose-pink-wall-top-view-flat-lay-copy-space_127032-2189.jpg" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/festive-frame-with-one-rose-pink-wall-top-view-flat-lay-copy-space_127032-2189.jpg"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/festive-frame-with-one-rose-pink-wall-top-view-flat-lay-copy-space_127032-2189.jpg", alt: "Avatar 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/roses-by-small-bowl-red-popcorn-marble-table_114579-56540.jpg", alt: "Avatar 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/floral-ornaments_23-2148134120.jpg", alt: "Avatar 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/glass-bowl-popcorn-candy-resting-top-piece-pink-fabric-marble-table_114579-56527.jpg", alt: "Avatar 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/flat-lay-beautiful-valentine-s-day-concept_23-2148717890.jpg", alt: "Avatar 5" }
|
||||
]}
|
||||
avatarText="Loved by everyone!"
|
||||
/>
|
||||
</div>
|
||||
<div id="password" data-section="password">
|
||||
<ContactSplit
|
||||
tag="Secret"
|
||||
title="ENTER THE SECRET PASSWORD"
|
||||
description="Only for the birthday girl."
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-beautiful-valentine-s-day-concept_23-2148717890.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="ready" data-section="ready">
|
||||
<MetricSplitMediaAbout
|
||||
title="Are you ready yaa ruoooo! 💕"
|
||||
description="Click the button below to start your surprise."
|
||||
metrics={[
|
||||
{ value: "100%", title: "Celebration Level" },
|
||||
{ value: "∞", title: "Happiness Factor" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/glass-bowl-popcorn-candy-resting-top-piece-pink-fabric-marble-table_114579-56527.jpg"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="message" data-section="message">
|
||||
<FaqSplitMedia
|
||||
title="Message for you"
|
||||
description="Read this letter with all my heart."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "1", title: "Why today?", content: "Because the world became a much brighter place the day you were born." },
|
||||
{ id: "2", title: "My wish for you", content: "That you always feel as cherished, celebrated, and loved as you are right now." }
|
||||
]}
|
||||
faqsAnimation="blur-reveal"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/floral-ornaments_23-2148134120.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="reasons" data-section="reasons">
|
||||
<FeatureBorderGlow
|
||||
title="You thought it was over!!!!"
|
||||
description="We've only just begun! Here are reasons I love you."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Heart, title: "Cutest girl in the world", description: "Simply the best." },
|
||||
{ icon: Briefcase, title: "Big biceps", description: "Super strong!" },
|
||||
{ icon: Maximize, title: "156 cm tall", description: "Perfect height." },
|
||||
{ icon: Star, title: "Lovely soul", description: "Truly unique." },
|
||||
{ icon: Sun, title: "Positive soul", description: "Always shining." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="final" data-section="final">
|
||||
<ContactSplit
|
||||
tag="Final Surprise"
|
||||
title="happy birthday day yaa ruoooo 🎂❤️"
|
||||
description="I hope you love it wish you all the best ya katkott enjoy your day"
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/roses-by-small-bowl-red-popcorn-marble-table_114579-56540.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user