177 lines
11 KiB
TypeScript
177 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import { Globe, TrendingUp, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="fluid"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="CashPilot"
|
|
button={{ text: "Get Started", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlayTestimonial
|
|
title="Convert Currencies at Pilot Speed"
|
|
description="CashPilot combines precision financial data with a sleek, high-tech interface, making international currency conversion feel like flying a jet."
|
|
testimonials={[
|
|
{ name: "Alex Rivier", handle: "@alexr", testimonial: "The fastest conversion app I have ever used. Stunning design.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-hacker_23-2148165939.jpg?_wi=1" },
|
|
{ name: "Sarah Chen", handle: "@schen", testimonial: "Finally, a converter that actually looks beautiful on my screen.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cheerful-attractive-businesswoman-crossing-arms_1262-4724.jpg?_wi=1" },
|
|
{ name: "Marcus Thorne", handle: "@mthorne", testimonial: "Precise data, seamless UI. A must-have for traders.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-grey-turtleneck-eyeglasses_273609-13191.jpg?_wi=1" },
|
|
{ name: "Elena Rossi", handle: "@erossi", testimonial: "I travel across 10 countries a year. This is a lifesaver.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1" },
|
|
{ name: "David Park", handle: "@dpark", testimonial: "Professional-grade tools for everyday finance.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/office-worker-using-finance-graphs_23-2150408700.jpg?_wi=1" }
|
|
]}
|
|
buttons={[{ text: "Get Started", href: "#contact" }]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-investor-working-computer-with-real-time-stock-charts-following-trade-market-sales-trend-financial-analyst-using-forex-exchange-statistics-plan-data-analysis-index-profit-close-up_482257-42062.jpg"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/contemplating-young-caucasian-man-holding-dairy-thinking_23-2148187202.jpg", alt: "User 1" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-young-smiling-handsome-man-holding-tablet-computer-looking-straight-front_342744-405.jpg", alt: "User 2" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-festive-plump-male-eyeglasses-bow-tie-dark-grey-background_613910-13747.jpg", alt: "User 3" },
|
|
{ src: "http://img.b2bpic.net/free-photo/smiling-businesswoman-touching-her-face_1098-3321.jpg", alt: "User 4" },
|
|
{ src: "http://img.b2bpic.net/free-photo/blond-female-dressed-white-shirt-eyeglasses-holds-tablet-pc-grey-background_613910-14708.jpg", alt: "User 5" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
title="Financial Data, Engineered for You"
|
|
description="CashPilot integrates directly with the Central Bank and global markets to bring you the most accurate real-time rates. Whether you are traveling or managing international trade, our smart interface ensures total clarity."
|
|
imageSrc="http://img.b2bpic.net/free-photo/business-proposal-purchase-hands-holding-money_53876-127124.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureHoverPattern
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{ icon: Zap, title: "Real-Time Conversion", description: "Instant calculations using up-to-the-minute global market rates." },
|
|
{ icon: Globe, title: "Global Reach", description: "Support for over 150 currencies, including UZS, USD, EUR, and more." },
|
|
{ icon: TrendingUp, title: "Historical Trends", description: "Visualize currency performance over time to make smarter decisions." }
|
|
]}
|
|
title="Smart Features for Global Finance"
|
|
description="Engineered for speed, precision, and an intuitive user experience."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ id: "m1", value: "150+", title: "Supported Currencies", items: ["Live updates", "Global API support"] },
|
|
{ id: "m2", value: "99.9%", title: "Data Accuracy", items: ["Direct banking feeds", "Real-time sync"] },
|
|
{ id: "m3", value: "<1ms", title: "Response Time", items: ["Optimized conversion engine", "Low latency global servers"] }
|
|
]}
|
|
title="Precision Metrics"
|
|
description="Tracking high-frequency financial data for optimal accuracy."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{ id: "1", name: "John Doe", role: "Travel Blogger", testimonial: "Indispensable tool for my international trips.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-hacker_23-2148165939.jpg?_wi=2" },
|
|
{ id: "2", name: "Jane Smith", role: "Global CFO", testimonial: "The interface clarity is unmatched.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-attractive-businesswoman-crossing-arms_1262-4724.jpg?_wi=2" },
|
|
{ id: "3", name: "Mark Evans", role: "Trader", testimonial: "Fast, reliable, and looks great.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-grey-turtleneck-eyeglasses_273609-13191.jpg?_wi=2" },
|
|
{ id: "4", name: "Lisa Wong", role: "Student", testimonial: "Easy currency conversions on the go.", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=2" },
|
|
{ id: "5", name: "Paul Rudd", role: "Engineer", testimonial: "The dark mode aesthetic is fantastic.", imageSrc: "http://img.b2bpic.net/free-photo/office-worker-using-finance-graphs_23-2150408700.jpg?_wi=2" }
|
|
]}
|
|
title="Loved by Global Travelers"
|
|
description="Join thousands of users who depend on CashPilot daily."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardFive
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{ id: "basic", tag: "Free", price: "$0", period: "/mo", description: "Essential conversion tools.", button: { text: "Get Started" }, featuresTitle: "Includes:", features: ["150+ Currencies", "Real-time rates", "Mobile access"] },
|
|
{ id: "pro", tag: "Pro", price: "$9", period: "/mo", description: "For high-frequency users.", button: { text: "Go Pro" }, featuresTitle: "Includes:", features: ["Historical charts", "Offline caching", "Ad-free experience"] }
|
|
]}
|
|
title="Choose Your Plan"
|
|
description="Upgrade to unlock advanced features for power users."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
animationType="smooth"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{ id: "q1", title: "Is it offline?", content: "Yes, CashPilot caches your last seen rates for offline use." },
|
|
{ id: "q2", title: "How accurate is the data?", content: "We connect to top global and Central Bank financial APIs." },
|
|
{ id: "q3", title: "Can I use UZS?", content: "Absolutely, UZS is fully supported alongside 150+ currencies." }
|
|
]}
|
|
title="Common Questions"
|
|
description="Here is what you need to know about CashPilot."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{ variant: "radial-gradient" }}
|
|
tag="Join"
|
|
title="Sign Up for Early Access"
|
|
description="Be the first to experience the CashPilot mobile app."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="CashPilot"
|
|
columns={[
|
|
{ title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
|
|
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#contact" }] }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |