Merge version_1 into main #1
269
src/app/page.tsx
269
src/app/page.tsx
@@ -13,193 +13,102 @@ import { Smile, Sparkles } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About Donald",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Performances",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
]}
|
||||
brandName="Donald's Circus"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About Donald", id: "about" },
|
||||
{ name: "Performances", id: "features" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
]}
|
||||
brandName="Donald's Circus"
|
||||
button={{ text: "Get Tickets", href: "#footer" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Welcome to Donald's Circus!"
|
||||
description="Meet Donald, the most talented orange monkey in the world. Join us for a spectacle of acrobatics, comedy, and wonder!"
|
||||
buttons={[
|
||||
{
|
||||
text: "See Showtimes",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/ge70e097d93afc22abf1086f9ae45054870028d4d8fc2074d14abdd6d6b2e8f2fff0fb60993fac7fa37b3b355f235ff8d1f7baf838f57936d66086c3b67a7937f_1280.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
title="Welcome to Donald's Circus!"
|
||||
description="Meet Donald, the most talented orange monkey in the world. Join us for a spectacle of acrobatics, comedy, and wonder!"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="https://pixabay.com/get/ge70e097d93afc22abf1086f9ae45054870028d4d8fc2074d14abdd6d6b2e8f2fff0fb60993fac7fa37b3b355f235ff8d1f7baf838f57936d66086c3b67a7937f_1280.jpg"
|
||||
buttons={[{ text: "See Showtimes", href: "#features" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="About Donald the Monkey"
|
||||
description="Donald isn't just any monkey. He's the ring-leading, banana-juggling star of the show. Born in the vibrant jungle, he brought his unique talents to our big top to put smiles on faces everywhere."
|
||||
metrics={[
|
||||
{
|
||||
value: "10+",
|
||||
title: "Years Performing",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
title: "Shows Performed",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
title: "Fun Guaranteed",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/g7d36553b24fb4ea79bdc71cf91ab7c237ff28f25076f7a2281c8f9572e47bfbd3a249c93e1a778f2e0944f5fbab8439a73127797a9f80f7a2c89ecdf0844e6f9_1280.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
title="About Donald the Monkey"
|
||||
description="Donald isn't just any monkey. He's the ring-leading, banana-juggling star of the show. Born in the vibrant jungle, he brought his unique talents to our big top to put smiles on faces everywhere."
|
||||
metrics={[
|
||||
{ value: "10+", title: "Years Performing" },
|
||||
{ value: "500+", title: "Shows Performed" },
|
||||
{ value: "100%", title: "Fun Guaranteed" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://pixabay.com/get/g7d36553b24fb4ea79bdc71cf91ab7c237ff28f25076f7a2281c8f9572e47bfbd3a249c93e1a778f2e0944f5fbab8439a73127797a9f80f7a2c89ecdf0844e6f9_1280.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Acrobatic Wonders",
|
||||
description: "Watch our aerialists perform breathtaking stunts above the ring.",
|
||||
bentoComponent: "media-stack",
|
||||
items: [
|
||||
{
|
||||
imageSrc: "https://pixabay.com/get/g0404862beda7a4a0ad8bcd2d81a8551272219b8bd5cda7a6c8abb42d0ddb4387791819c3f6a80affa1ef69f0a22d481070e733762cc4ed22bf7ff3a6afd020ac_1280.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://pixabay.com/get/g4bbd4a1c780494741fe4034049e53f6e01fdf7b2cea0904e849cef49bd126bf742417f8f0b03b8dd1ff3ec50ff0179b8fa7a0852b0b5bf3bac8dc87532249ec0_1280.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://pixabay.com/get/g2a910260a451c49fd6b2bdef3d3b2e3371b1cb4b00810b951fcf61aff0c2cfc779facd6bf6cb96ad5a9f83744c8fcf8f6a85f1277af2289f48c6487e0fadb076_1280.jpg",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Comedy Hour",
|
||||
description: "Join Donald for an hour of pure monkey business and comedy.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Smile,
|
||||
},
|
||||
{
|
||||
title: "Magic Shows",
|
||||
description: "Witness illusions that will leave you absolutely spellbound.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Sparkles,
|
||||
},
|
||||
]}
|
||||
title="What to Expect"
|
||||
description="Prepare for a show filled with magic, laughter, and high-flying stunts."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
title="What to Expect"
|
||||
description="Prepare for a show filled with magic, laughter, and high-flying stunts."
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
features={[
|
||||
{
|
||||
title: "Acrobatic Wonders", description: "Watch our aerialists perform breathtaking stunts above the ring.", bentoComponent: "media-stack", items: [
|
||||
{ imageSrc: "https://pixabay.com/get/g0404862beda7a4a0ad8bcd2d81a8551272219b8bd5cda7a6c8abb42d0ddb4387791819c3f6a80affa1ef69f0a22d481070e733762cc4ed22bf7ff3a6afd020ac_1280.jpg" },
|
||||
{ imageSrc: "https://pixabay.com/get/g4bbd4a1c780494741fe4034049e53f6e01fdf7b2cea0904e849cef49bd126bf742417f8f0b03b8dd1ff3ec50ff0179b8fa7a0852b0b5bf3bac8dc87532249ec0_1280.jpg" },
|
||||
{ imageSrc: "https://pixabay.com/get/g2a910260a451c49fd6b2bdef3d3b2e3371b1cb4b00810b951fcf61aff0c2cfc779facd6bf6cb96ad5a9f83744c8fcf8f6a85f1277af2289f48c6487e0fadb076_1280.jpg" }
|
||||
]
|
||||
},
|
||||
{ title: "Comedy Hour", description: "Join Donald for an hour of pure monkey business and comedy.", bentoComponent: "reveal-icon", icon: Smile },
|
||||
{ title: "Magic Shows", description: "Witness illusions that will leave you absolutely spellbound.", bentoComponent: "reveal-icon", icon: Sparkles }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Amazing Show!",
|
||||
quote: "Donald is the funniest monkey I've ever seen. The kids loved every second.",
|
||||
name: "Sarah Miller",
|
||||
role: "Parent",
|
||||
imageSrc: "https://pixabay.com/get/g6f8395b06870be9abb9f533264d4461f90f09df1104bb7092f978e1212d3b31993e253e440f00c01586695e08dac069da8fa971070ae3902e674c1f3933337df_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Pure Magic",
|
||||
quote: "We haven't laughed this much in years. A must-see circus performance!",
|
||||
name: "Tom Baker",
|
||||
role: "Circus Fan",
|
||||
imageSrc: "https://pixabay.com/get/gad80b21fdcc1a715c677f268aa824a26be9008b74922b944cef37fab6972e4211678ca1455e1d72d88890159c43745ec464e2277fc881cb2c892fe3d7b8ce6aa_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Incredible Talent",
|
||||
quote: "The acrobatics were flawless and Donald was simply the star of the night.",
|
||||
name: "Elena Rossi",
|
||||
role: "Attendee",
|
||||
imageSrc: "https://pixabay.com/get/gabf7ba5ed62fba65d156b346ae3cd05d31e6e0866226e58a3296fda63de62958fdb59b98ecaa6eca3b82fe075491ed7197f3a1488132767f7bcde7a821a7f20f_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Fantastic Experience",
|
||||
quote: "We can't wait to come back. Donald's show is truly special.",
|
||||
name: "Mark Wilson",
|
||||
role: "Happy Customer",
|
||||
imageSrc: "https://pixabay.com/get/g8c8801d47bc511285583c4fb8bd1e79e05e6d4b4df0f027083b12857c68fca8268815e77ffb01ac9c5ea8ce2f89e60eff597332ea5e7b548c4a1c59c9a83e290_1280.jpg",
|
||||
},
|
||||
]}
|
||||
title="Audience Smiles"
|
||||
description="Don't just take our word for it—see what our happy audience has to say!"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="Audience Smiles"
|
||||
description="Don't just take our word for it—see what our happy audience has to say!"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Amazing Show!", quote: "Donald is the funniest monkey I've ever seen. The kids loved every second.", name: "Sarah Miller", role: "Parent", imageSrc: "https://pixabay.com/get/g6f8395b06870be9abb9f533264d4461f90f09df1104bb7092f978e1212d3b31993e253e440f00c01586695e08dac069da8fa971070ae3902e674c1f3933337df_1280.jpg" },
|
||||
{ id: "2", title: "Pure Magic", quote: "We haven't laughed this much in years. A must-see circus performance!", name: "Tom Baker", role: "Circus Fan", imageSrc: "https://pixabay.com/get/gad80b21fdcc1a715c677f268aa824a26be9008b74922b944cef37fab6972e4211678ca1455e1d72d88890159c43745ec464e2277fc881cb2c892fe3d7b8ce6aa_1280.jpg" },
|
||||
{ id: "3", title: "Incredible Talent", quote: "The acrobatics were flawless and Donald was simply the star of the night.", name: "Elena Rossi", role: "Attendee", imageSrc: "https://pixabay.com/get/gabf7ba5ed62fba65d156b346ae3cd05d31e6e0866226e58a3296fda63de62958fdb59b98ecaa6eca3b82fe075491ed7197f3a1488132767f7bcde7a821a7f20f_1280.jpg" },
|
||||
{ id: "4", title: "Fantastic Experience", quote: "We can't wait to come back. Donald's show is truly special.", name: "Mark Wilson", role: "Happy Customer", imageSrc: "https://pixabay.com/get/g8c8801d47bc511285583c4fb8bd1e79e05e6d4b4df0f027083b12857c68fca8268815e77ffb01ac9c5ea8ce2f89e60eff597332ea5e7b548c4a1c59c9a83e290_1280.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Shows",
|
||||
items: [
|
||||
{
|
||||
label: "Showtimes",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Tickets",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 Donald's Circus. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Contact", href: "#" }] },
|
||||
{ title: "Shows", items: [{ label: "Showtimes", href: "#" }, { label: "Tickets", href: "#" }] }
|
||||
]}
|
||||
copyrightText="© 2024 Donald's Circus. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user