188 lines
8.1 KiB
TypeScript
188 lines
8.1 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmall"
|
|
background="fluid"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Features", id: "features"},
|
|
{
|
|
name: "Pricing", id: "pricing"},
|
|
{
|
|
name: "Testimonials", id: "testimonials"},
|
|
{
|
|
name: "FAQ", id: "faq"},
|
|
]}
|
|
brandName="The Calm Budget"
|
|
button={{
|
|
text: "Get Started", href: "/pricing"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Stop stressing. Start knowing."
|
|
description="Financial calm is not a spreadsheet. It's a system. The Calm Budget gives you the clarity you need to master your money without the anxiety."
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CDqigD97eNw2NLDaX3RYmmvsuo/a-minimalist-premium-financial-dashboard-1775931402904-5ef6d241.png?_wi=1", imageAlt: "Dashboard 1"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CDqigD97eNw2NLDaX3RYmmvsuo/a-minimalist-premium-financial-dashboard-1775931504034-18c770f9.png", imageAlt: "Dashboard 2"},
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
videoSrc: "https://www.youtube.com/embed/dQw4w9WgXcQ", videoAriaLabel: "Demo video of the financial tool"},
|
|
]}
|
|
tag="Your Financial Sanity"
|
|
buttons={[
|
|
{
|
|
text: "Get Started", href: "/pricing"},
|
|
]}
|
|
avatarText="Join 10,000+ finding their calm"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={true}
|
|
title="Budgeting, Reimagined"
|
|
description="We stripped away the complexity of traditional finance. No more clunky spreadsheets or confusing jargon. Just a clear, intuitive path to knowing exactly where your money goes every month."
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CDqigD97eNw2NLDaX3RYmmvsuo/a-serene-uncluttered-workspace-with-a-no-1775931412775-dedfe15a.png?_wi=1"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNineteen
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
tag: "Dashboard", title: "Real-time Clarity", subtitle: "Always know your status", description: "See your net worth and spending power in one glance.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CDqigD97eNw2NLDaX3RYmmvsuo/close-up-of-a-simple-beautiful-interface-1775931421121-6c01e224.png?_wi=1"},
|
|
{
|
|
tag: "Analysis", title: "Smart Insights", subtitle: "Understand your habits", description: "Automated breakdowns of every expense without the manual entry.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CDqigD97eNw2NLDaX3RYmmvsuo/a-minimalist-interface-illustration-repr-1775931429678-9437fc0a.png"},
|
|
]}
|
|
title="Everything You Need for Financial Clarity"
|
|
description="Powerful features designed to reduce financial stress and help you build lasting habits."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "starter", title: "Starter", price: "$19", period: "/mo", features: [
|
|
"Monthly tracking", "Cash flow overview", "Basic spending power formula"],
|
|
button: {
|
|
text: "Start Today", href: "/checkout"},
|
|
},
|
|
{
|
|
id: "pro", title: "Pro", price: "$49", period: "/mo", features: [
|
|
"All Starter features", "Scenario modeling", "Priority support", "Net worth tracking"],
|
|
button: {
|
|
text: "Get Pro", href: "/checkout"},
|
|
},
|
|
]}
|
|
title="Pick Your Calm"
|
|
description="Choose the path to financial peace that fits you best."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "Alice Miller", handle: "@alice", testimonial: "Finally, I don't feel guilty about spending. This system just works.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CDqigD97eNw2NLDaX3RYmmvsuo/portrait-of-a-relaxed-smiling-young-prof-1775931450170-3fba3e9d.png"},
|
|
{
|
|
id: "t2", name: "Bob Smith", handle: "@bob", testimonial: "The weekly reset feature changed everything for my family.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CDqigD97eNw2NLDaX3RYmmvsuo/portrait-of-a-confident-peaceful-man-rea-1775931460948-8131cc50.png"},
|
|
]}
|
|
showRating={true}
|
|
title="Join Thousands Finding Their Calm"
|
|
description="See how users are transforming their relationship with money."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "f1", title: "Is this a spreadsheet?", content: "No, it is a fully integrated digital application."},
|
|
{
|
|
id: "f2", title: "How is my data secured?", content: "We use bank-level encryption to ensure your financial data is completely safe."},
|
|
]}
|
|
title="Common Questions"
|
|
description="Everything you need to know about The Calm Budget."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Start your journey"
|
|
title="Ready for financial calm?"
|
|
description="Sign up for early access or reach out if you have questions."
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CDqigD97eNw2NLDaX3RYmmvsuo/a-calm-beautiful-abstract-representation-1775931491599-5d73768f.png"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Legal", items: [
|
|
{
|
|
label: "Privacy", href: "#"},
|
|
{
|
|
label: "Terms", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="The Calm Budget"
|
|
copyrightText="© 2025 | The Calm Budget"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |