Update src/app/page.tsx
This commit is contained in:
210
src/app/page.tsx
210
src/app/page.tsx
@@ -10,46 +10,39 @@ import TestimonialCardFifteen from "@/components/sections/testimonial/Testimonia
|
||||
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import { Zap, Shield, Rocket, Target, Sparkles, Crown, Mail, Users, Layers, Code } from "lucide-react";
|
||||
import { Zap, Shield, Rocket, Target, Sparkles, Crown, Mail, Users, Layers, Code, CreditCard, Smartphone, ShieldCheck, ArrowRightLeft, DollarSign, Wallet, Gem, Building, MessageCircle } from "lucide-react";
|
||||
|
||||
export default function SaasTemplatePage() {
|
||||
const navItems = [
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Plans", id: "pricing" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
];
|
||||
|
||||
const avatars = [
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/testimonial/testimonial1.webp", alt: "User 1" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif", alt: "User 1" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif", alt: "User 1" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image8.avif", alt: "User 1" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image8.avif", alt: "User 1" }
|
||||
];
|
||||
|
||||
const features: FeatureCard[] = [
|
||||
{
|
||||
bentoComponent: "globe",
|
||||
title: "Global Reach",
|
||||
description: "Connect with users worldwide through our distributed infrastructure",
|
||||
bentoComponent: "globe", title: "Global Payments", description: "Send and receive money across borders with competitive rates and instant transfers."
|
||||
},
|
||||
{
|
||||
bentoComponent: "marquee",
|
||||
variant: "text",
|
||||
centerIcon: Zap,
|
||||
texts: ["Fast", "Reliable", "Secure", "Scalable", "Modern"],
|
||||
title: "Built for Speed",
|
||||
description: "Lightning fast performance with optimized delivery",
|
||||
bentoComponent: "marquee", variant: "text", centerIcon: Zap,
|
||||
texts: ["Instant", "Secure", "Global", "Easy", "Smart"],
|
||||
title: "Lightning-Fast Services", description: "Enjoy immediate transactions for bills, airtime, and data."
|
||||
},
|
||||
{
|
||||
bentoComponent: "3d-stack-cards",
|
||||
items: [
|
||||
bentoComponent: "3d-stack-cards", items: [
|
||||
{ icon: Shield, title: "Security", subtitle: "Enterprise-grade", detail: "Bank-level encryption" },
|
||||
{ icon: Rocket, title: "Performance", subtitle: "99.9% uptime", detail: "Always available" },
|
||||
{ icon: Target, title: "Accuracy", subtitle: "100% reliable", detail: "Data you can trust" },
|
||||
{ icon: Target, title: "Accuracy", subtitle: "100% reliable", detail: "Data you can trust" }
|
||||
],
|
||||
title: "Built for Scale",
|
||||
description: "Deploy to any region with automatic failover support",
|
||||
title: "Secure & Compliant", description: "Industry-leading security protocols protect your transactions and data."
|
||||
}
|
||||
];
|
||||
|
||||
@@ -58,196 +51,163 @@ export default function SaasTemplatePage() {
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="SaasApp"
|
||||
brandName="CipherPay"
|
||||
button={{ text: "Get Started", href: "#" }}
|
||||
/>
|
||||
<HeroCentered
|
||||
background={{ variant: "rotated-rays-animated-grid" }}
|
||||
avatars={avatars}
|
||||
avatarText="Trusted by 1000+ users"
|
||||
title="Build Modern Web Experiences-Out of the world california apple"
|
||||
description="Create stunning, responsive websites with our comprehensive component library designed"
|
||||
avatarText="Trusted by 50,000+ users worldwide"
|
||||
title="Unlock Seamless Fintech for Everyone with CipherPay"
|
||||
description="Manage bills, airtime, data, gift cards, and social boosts with ease. CipherPay is your all-in-one financial super app."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
onClick: () => console.log("Get Started clicked"),
|
||||
text: "Start Free Now", onClick: () => console.log("Get Started clicked")
|
||||
},
|
||||
{
|
||||
text: "Learn More",
|
||||
onClick: () => console.log("Learn More clicked"),
|
||||
},
|
||||
text: "Explore Features", onClick: () => console.log("Learn More clicked")
|
||||
}
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "text-icon", text: "Lightning Fast", icon: Zap },
|
||||
{ type: "text-icon", text: "Enterprise Security", icon: Shield },
|
||||
{ type: "text-icon", text: "99.9% Uptime", icon: Rocket },
|
||||
{ type: "text-icon", text: "Precision Targeting", icon: Target },
|
||||
{ type: "text-icon", text: "AI Powered", icon: Sparkles },
|
||||
{ type: "text-icon", text: "Instant Payments", icon: Zap },
|
||||
{ type: "text-icon", text: "Secure Transactions", icon: Shield },
|
||||
{ type: "text-icon", text: "Always Available", icon: Rocket },
|
||||
{ type: "text-icon", text: "Global Reach", icon: Target },
|
||||
{ type: "text-icon", text: "Smart Financials", icon: Sparkles }
|
||||
]}
|
||||
/>
|
||||
<FeatureBento
|
||||
features={features}
|
||||
animationType="none"
|
||||
tag="Features"
|
||||
title="Powerful Features"
|
||||
description="Everything you need to build and scale your product"
|
||||
tag="Our Services"
|
||||
title="Experience Comprehensive Fintech"
|
||||
description="From bills to airtime, data, and gift cards, CipherPay simplifies your financial life."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<FeatureBorderGlow
|
||||
tag="Why Choose Us"
|
||||
tagIcon={Users}
|
||||
title="Built by developers, for developers"
|
||||
description="We understand the challenges of modern software development because we face them every day."
|
||||
tag="Why CipherPay?"
|
||||
tagIcon={Sparkles}
|
||||
title="Your Trusted Partner for Digital Finance"
|
||||
description="CipherPay offers a seamless, secure, and smart way to manage all your essential payments."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Layers,
|
||||
title: "Modular Architecture",
|
||||
description: "Build with composable components that scale with your needs",
|
||||
icon: CreditCard,
|
||||
title: "Unified Wallet", description: "Manage all your payment methods and services in one easy-to-use digital wallet."
|
||||
},
|
||||
{
|
||||
icon: Code,
|
||||
title: "Developer Experience",
|
||||
description: "Clean APIs and comprehensive documentation for faster development",
|
||||
icon: Smartphone,
|
||||
title: "Intuitive Mobile App", description: "Access all features on-the-go with our beautifully designed and user-friendly mobile application."
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Enterprise Security",
|
||||
description: "Bank-level encryption and compliance with industry standards",
|
||||
icon: ShieldCheck,
|
||||
title: "Advanced Security", description: "Your funds and data are protected with state-of-the-art encryption and fraud detection."
|
||||
},
|
||||
{
|
||||
icon: Rocket,
|
||||
title: "Lightning Fast",
|
||||
description: "Optimized for performance with sub-second response times",
|
||||
},
|
||||
icon: ArrowRightLeft,
|
||||
title: "Rapid Transactions", description: "Experience instant processing for all your bills, airtime, and data purchases."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<TestimonialCardFifteen
|
||||
testimonial="This platform has completely transformed how we build products. The developer experience is unmatched."
|
||||
testimonial="CipherPay has simplified my financial life. Paying bills, buying data, and sending gift cards has never been this easy and fast!"
|
||||
rating={5}
|
||||
author="Sarah Chen, CTO at TechFlow"
|
||||
author="Aisha Khan, Small Business Owner"
|
||||
avatars={avatars}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<PricingCardEight
|
||||
tag="Pricing"
|
||||
tagIcon={Sparkles}
|
||||
title="Simple, transparent pricing"
|
||||
description="Choose the plan that works best for you. All plans include a 14-day free trial."
|
||||
tag="Our Plans"
|
||||
tagIcon={DollarSign}
|
||||
title="Flexible Plans for Every User"
|
||||
description="Enjoy premium features with transparent pricing. All plans come with essential fintech services."
|
||||
animationType="opacity"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "starter",
|
||||
badge: "Starter",
|
||||
badgeIcon: Zap,
|
||||
price: "$19/mo",
|
||||
subtitle: "Perfect for individuals",
|
||||
buttons: [
|
||||
{ text: "Get Started", onClick: () => console.log("Starter clicked") },
|
||||
id: "starter", badge: "Basic", badgeIcon: Wallet,
|
||||
price: "$0/month", subtitle: "Ideal for everyday transactions", buttons: [
|
||||
{ text: "Get Started", onClick: () => console.log("Starter clicked") }
|
||||
],
|
||||
features: [
|
||||
"Up to 5 projects",
|
||||
"Basic analytics",
|
||||
"24/7 email support",
|
||||
"API access",
|
||||
],
|
||||
"Unlimited Bills Payment", "Airtime & Data Top-ups", "Access to Gift Cards", "Standard Customer Support"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Pro",
|
||||
badgeIcon: Rocket,
|
||||
price: "$49/mo",
|
||||
subtitle: "For growing teams",
|
||||
buttons: [
|
||||
{ text: "Get Started", onClick: () => console.log("Pro clicked") },
|
||||
id: "pro", badge: "Premium", badgeIcon: Gem,
|
||||
price: "$9.99/month", subtitle: "Enhance your financial experience", buttons: [
|
||||
{ text: "Get Started", onClick: () => console.log("Pro clicked") }
|
||||
],
|
||||
features: [
|
||||
"Unlimited projects",
|
||||
"Advanced analytics",
|
||||
"Priority support",
|
||||
"Custom integrations",
|
||||
"Team collaboration",
|
||||
],
|
||||
"Everything in Basic", "Social Media Boosts", "Priority Customer Support", "Advanced Spending Analytics", "Exclusive Discounts"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "enterprise",
|
||||
badge: "Enterprise",
|
||||
badgeIcon: Crown,
|
||||
price: "$99/mo",
|
||||
subtitle: "For large organizations",
|
||||
buttons: [
|
||||
{ text: "Contact Sales", onClick: () => console.log("Enterprise clicked") },
|
||||
id: "enterprise", badge: "Business", badgeIcon: Building,
|
||||
price: "Custom", subtitle: "Tailored for businesses", buttons: [
|
||||
{ text: "Contact Sales", onClick: () => console.log("Enterprise clicked") }
|
||||
],
|
||||
features: [
|
||||
"Everything in Pro",
|
||||
"Dedicated account manager",
|
||||
"Custom SLA",
|
||||
"On-premise deployment",
|
||||
"Advanced security",
|
||||
],
|
||||
},
|
||||
"Everything in Premium", "Dedicated Account Manager", "Customizable Features", "Bulk Payment Solutions", "Fraud Prevention Suite"
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<ContactCenter
|
||||
tag="Contact"
|
||||
tagIcon={Mail}
|
||||
title="Ready to get started?"
|
||||
description="Join thousands of developers building better products with our platform."
|
||||
tag="Get Started"
|
||||
tagIcon={MessageCircle}
|
||||
title="Join the CipherPay Revolution"
|
||||
description="Sign up today and experience the future of digital payments."
|
||||
background={{ variant: "animated-grid" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Get Early Access"
|
||||
buttonText="Download the App"
|
||||
onSubmit={(email) => console.log("Email submitted:", email)}
|
||||
/>
|
||||
<FooterBaseReveal
|
||||
logoText="SaaSify"
|
||||
logoText="CipherPay"
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
title: "Product", items: [
|
||||
{ label: "Services", href: "#features" },
|
||||
{ label: "Plans", href: "#pricing" },
|
||||
{ label: "Integrations", href: "#" },
|
||||
{ label: "Changelog", href: "#" },
|
||||
],
|
||||
{ label: "Changelog", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Help Center", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Status", href: "#" },
|
||||
],
|
||||
{ label: "Status", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
{ label: "Security", href: "#" },
|
||||
],
|
||||
},
|
||||
{ label: "Security", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="2024 SaasApp. All rights reserved."
|
||||
copyrightText="2024 CipherPay. All rights reserved."
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user