349 lines
20 KiB
TypeScript
349 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
|
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
|
|
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
|
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
|
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
import Link from "next/link";
|
|
import { Sparkles, CheckCircle, Zap, TrendingUp, HelpCircle, Star, Award } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="SmartSave"
|
|
navItems={[
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Features", id: "#features" },
|
|
{ name: "Pricing", id: "#pricing" },
|
|
{ name: "About", id: "#about" },
|
|
]}
|
|
button={{
|
|
text: "Sign In", href: "/login"}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
title="Take Control of Your Financial Future"
|
|
description="SmartSave makes money management effortless. Track income, expenses, and savings goals in one beautiful dashboard. Join thousands of users who've transformed their financial habits."
|
|
tag="Financial Freedom Starts Here"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{
|
|
text: "Start Tracking Today", href: "/dashboard"},
|
|
{
|
|
text: "Watch Demo", href: "#"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
carouselItems={[
|
|
{
|
|
id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-modern-fintech-dashboard-interface-sho-1773380665608-8747a75f.png", imageAlt: "SmartSave Dashboard Interface"},
|
|
{
|
|
id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-sleek-mobile-app-interface-showing-exp-1773380665497-77efa16b.png", imageAlt: "Expense Tracking Feature"},
|
|
{
|
|
id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-financial-goals-visualization-showing--1773380666418-7563d017.png", imageAlt: "Savings Goals Tracker"},
|
|
{
|
|
id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-comprehensive-financial-insights-dashb-1773380666169-cdfbe2e5.png", imageAlt: "Financial Insights Analytics"},
|
|
{
|
|
id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-modern-fintech-dashboard-interface-sho-1773380665608-8747a75f.png", imageAlt: "Dashboard Summary View"},
|
|
{
|
|
id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-sleek-mobile-app-interface-showing-exp-1773380665497-77efa16b.png", imageAlt: "Mobile Expense Interface"},
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={4000}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Why SmartSave"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="blur-reveal"
|
|
title="We believe financial wellness should be accessible to everyone. SmartSave combines cutting-edge technology with intuitive design to help you understand, manage, and grow your money with confidence and ease."
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{
|
|
text: "Learn Our Story", href: "#"},
|
|
{
|
|
text: "Join Community", href: "#"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyThree
|
|
title="Powerful Features for Complete Control"
|
|
description="Everything you need to manage your finances effectively, from real-time tracking to intelligent insights."
|
|
tag="Designed for You"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
id: "1", title: "Smart Expense Tracking", tags: ["Real-time", "Categorized"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-sleek-mobile-app-interface-showing-exp-1773380665497-77efa16b.png", imageAlt: "Smart expense tracking interface"},
|
|
{
|
|
id: "2", title: "Savings Goals", tags: ["Motivating", "Progress Tracking"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-financial-goals-visualization-showing--1773380666418-7563d017.png", imageAlt: "Savings goals visualization"},
|
|
{
|
|
id: "3", title: "Financial Insights", tags: ["Analytics", "Reports"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-comprehensive-financial-insights-dashb-1773380666169-cdfbe2e5.png", imageAlt: "Financial insights dashboard"},
|
|
{
|
|
id: "4", title: "Income Management", tags: ["Multi-source", "Tracking"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-sleek-mobile-app-interface-showing-exp-1773380665497-77efa16b.png", imageAlt: "Income management interface"},
|
|
{
|
|
id: "5", title: "Secure Dashboard", tags: ["Protected", "Private"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-modern-fintech-dashboard-interface-sho-1773380665608-8747a75f.png", imageAlt: "Secure dashboard overview"},
|
|
{
|
|
id: "6", title: "Smart Notifications", tags: ["Timely", "Customizable"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-sleek-mobile-app-interface-showing-exp-1773380665497-77efa16b.png", imageAlt: "Notification preferences"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
title="Trusted by Thousands"
|
|
description="SmartSave is helping people worldwide achieve their financial goals."
|
|
tag="By The Numbers"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "50K+", description: "Active Users"},
|
|
{
|
|
id: "2", value: "$2.5B", description: "Tracked Transactions"},
|
|
{
|
|
id: "3", value: "4.8★", description: "User Rating"},
|
|
{
|
|
id: "4", value: "98%", description: "Data Security"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardTwo
|
|
title="Simple, Transparent Pricing"
|
|
description="Choose the plan that works best for you. All plans include core money management features."
|
|
tag="Pricing Plans"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "Compare Features", href: "#"},
|
|
]}
|
|
plans={[
|
|
{
|
|
id: "free", badge: "Essential", badgeIcon: Zap,
|
|
price: "Free", subtitle: "Perfect for getting started", buttons: [
|
|
{
|
|
text: "Get Started", href: "#"},
|
|
{
|
|
text: "Learn More", href: "#"},
|
|
],
|
|
features: [
|
|
"Basic expense tracking", "Income management", "Monthly reports", "3 savings goals", "Email support"],
|
|
},
|
|
{
|
|
id: "pro", badge: "Professional", badgeIcon: Sparkles,
|
|
price: "$9.99/mo", subtitle: "For serious savers", buttons: [
|
|
{
|
|
text: "Start Free Trial", href: "#"},
|
|
{
|
|
text: "Chat Support", href: "#"},
|
|
],
|
|
features: [
|
|
"Unlimited expense tracking", "Advanced analytics", "Unlimited savings goals", "Custom categories", "Budget alerts", "Priority support", "Data export"],
|
|
},
|
|
{
|
|
id: "premium", badge: "Premium", badgeIcon: Sparkles,
|
|
price: "$19.99/mo", subtitle: "Complete financial control", buttons: [
|
|
{
|
|
text: "Upgrade Now", href: "#"},
|
|
{
|
|
text: "Enterprise", href: "#"},
|
|
],
|
|
features: [
|
|
"Everything in Professional", "Investment tracking", "Tax report generation", "Multi-account management", "Financial advisor consultation", "Advanced forecasting", "24/7 VIP support", "API access"],
|
|
},
|
|
{
|
|
id: "business", badge: "Business", badgeIcon: Award,
|
|
price: "Custom", subtitle: "For teams and enterprises", buttons: [
|
|
{
|
|
text: "Contact Sales", href: "#"},
|
|
{
|
|
text: "Schedule Demo", href: "#"},
|
|
],
|
|
features: [
|
|
"Unlimited everything", "Team management", "Advanced security", "Custom integrations", "Dedicated account manager", "SLA guarantee", "Custom reporting", "White-label options"],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about SmartSave and how to get the most out of your financial management."
|
|
tag="FAQ"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Is my financial data secure?", content: "Yes, absolutely. SmartSave uses bank-level encryption (256-bit SSL) and complies with GDPR and PCI DSS standards. Your data is stored on secure servers with automatic backups. We never sell or share your financial information with third parties."},
|
|
{
|
|
id: "2", title: "Can I sync my bank accounts?", content: "Yes. SmartSave integrates with major banks and financial institutions for automatic transaction syncing. You can also manually add transactions. All connections are encrypted and secured through industry-standard APIs."},
|
|
{
|
|
id: "3", title: "What's included in the free plan?", content: "The free plan includes basic expense and income tracking, monthly financial reports, up to 3 savings goals, and access to our mobile app. It's perfect for getting started with personal finance management."},
|
|
{
|
|
id: "4", title: "Can I export my financial data?", content: "Yes. With Pro and Premium plans, you can export your data as CSV, PDF, or integrate with other financial tools through our API. This ensures you always have access to your information."},
|
|
{
|
|
id: "5", title: "How accurate are the analytics?", content: "Our analytics engine processes transactions in real-time with 99.9% accuracy. We use advanced algorithms to categorize expenses automatically and provide precise insights into your spending patterns."},
|
|
{
|
|
id: "6", title: "What if I need help?", content: "SmartSave offers 24/7 support through email, chat, and phone for Premium customers. Free users have access to our knowledge base and community forums. We typically respond within 2 hours to all support requests."},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Loved by Real Users"
|
|
description="See what our community says about SmartSave and how it's helped them take control of their finances."
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Finally understand where my money goes", quote: "SmartSave has completely transformed how I manage my finances. The dashboard is intuitive, and I can now see exactly where every dollar goes. I've already cut my unnecessary spending by 30%!", name: "Sarah Johnson", role: "Marketing Professional", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-professional-headshot-portrait-of-a-sa-1773380664744-51de8529.png", imageAlt: "Sarah Johnson"},
|
|
{
|
|
id: "2", title: "Achieved my savings goals faster than ever", quote: "The savings goals feature is amazing. Being able to track my progress toward multiple goals simultaneously kept me motivated. I reached my emergency fund target 6 months earlier than planned.", name: "Michael Chen", role: "Software Engineer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-professional-headshot-of-a-confident-b-1773380664654-1abffd43.png", imageAlt: "Michael Chen"},
|
|
{
|
|
id: "3", title: "Best investment for my financial health", quote: "The analytics and insights are eye-opening. I discovered spending patterns I never knew I had. Now I make smarter financial decisions daily. SmartSave pays for itself many times over.", name: "Emily Rodriguez", role: "Entrepreneur", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-professional-headshot-of-a-young-woman-1773380664529-62cc97d9.png", imageAlt: "Emily Rodriguez"},
|
|
{
|
|
id: "4", title: "The support team is incredibly helpful", quote: "What impressed me most is the customer support. They answered all my questions promptly and helped me set up everything perfectly. This level of care is rare in fintech apps.", name: "David Kim", role: "Financial Analyst", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-professional-headshot-of-a-mature-busi-1773380664330-75f557f3.png", imageAlt: "David Kim"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Get in Touch"
|
|
description="Have questions about SmartSave? We'd love to hear from you. Reach out to our team and we'll get back to you within 24 hours."
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AsU5d8eXURDJpdSzOWRYw3KBgu/a-professional-illustration-of-a-person--1773380665799-1e07f6a8.png"
|
|
imageAlt="Financial management illustration"
|
|
buttonText="Send Message"
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "your@email.com", required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us how we can help...", rows: 5,
|
|
required: true,
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="SmartSave"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "Home", href: "/"},
|
|
{
|
|
label: "Features", href: "#features"},
|
|
{
|
|
label: "Pricing", href: "#pricing"},
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "About Us", href: "/about"},
|
|
{
|
|
label: "Blog", href: "/blog"},
|
|
{
|
|
label: "Careers", href: "/careers"},
|
|
{
|
|
label: "Contact", href: "/contact"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Privacy Policy", href: "/privacy"},
|
|
{
|
|
label: "Terms of Service", href: "/terms"},
|
|
{
|
|
label: "Security", href: "/security"},
|
|
{
|
|
label: "Compliance", href: "/compliance"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Twitter", href: "https://twitter.com"},
|
|
{
|
|
label: "LinkedIn", href: "https://linkedin.com"},
|
|
{
|
|
label: "Facebook", href: "https://facebook.com"},
|
|
{
|
|
label: "Instagram", href: "https://instagram.com"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |