Files
e258c2bf-d34b-41d8-8b2e-0c5…/src/app/pricing/page.tsx

123 lines
5.8 KiB
TypeScript

"use client";
import Link from 'next/link';
import { Sparkles } from 'lucide-react';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
export default function PricingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="mediumLarge"
background="aurora"
cardStyle="solid"
primaryButtonStyle="double-inset"
secondaryButtonStyle="layered"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="My Trade"
navItems={[
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Pricing", id: "/pricing" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Start Trading", href: "/pricing"
}}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
title="Simple, Transparent Pricing"
description="Choose the perfect plan for your trading needs"
tag="Flexible Plans"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
plans={[
{
id: "starter", price: "$29/month", name: "Starter Plan", buttons: [
{ text: "Get Started", href: "#" }
],
features: [
"Real-time price tracking", "Basic portfolio management", "5 saved watchlists", "Email support", "Mobile app access"
]
},
{
id: "professional", badge: "Most Popular", badgeIcon: Sparkles,
price: "$79/month", name: "Professional Plan", buttons: [
{ text: "Start Free Trial", href: "#" }
],
features: [
"Advanced analytics & charting", "Unlimited watchlists", "Performance metrics & reporting", "API access (up to 100 calls/min)", "Priority email & chat support", "Custom alerts & notifications"
]
},
{
id: "enterprise", price: "Custom", name: "Enterprise Plan", buttons: [
{ text: "Contact Sales", href: "#contact" }
],
features: [
"Full API access", "Dedicated account manager", "Custom integrations", "White-label solutions", "Advanced security features", "SLA & uptime guarantees"
]
}
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Frequently Asked Questions"
sideDescription="Everything you need to know about My Trade"
textPosition="left"
useInvertedBackground={false}
faqsAnimation="slide-up"
faqs={[
{
id: "1", title: "How real-time are your market statistics?", content: "Our market data updates in real-time with less than 100ms latency. We pull data from multiple exchanges simultaneously to ensure accuracy and prevent arbitrage opportunities from being missed."
},
{
id: "2", title: "Can I connect my existing exchange accounts?", content: "Yes, My Trade supports integrations with major exchanges like Binance, Coinbase, Kraken, and more. We use secure API connections and never store your exchange credentials—they're encrypted and only used for data retrieval."
},
{
id: "3", title: "Is my trading data secure?", content: "Absolutely. We use military-grade encryption (AES-256), two-factor authentication, and comply with international security standards including SOC 2 Type II. Your data is never shared with third parties."
},
{
id: "4", title: "What payment methods do you accept?", content: "We accept all major credit cards, bank transfers, and cryptocurrency payments (Bitcoin, Ethereum). All payments are processed through secure payment gateways with fraud protection."
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Get Started"
title="Ready to Start Trading Smarter?"
description="Join thousands of traders who trust My Trade for their cryptocurrency analytics and trading insights. Start your free trial today."
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email to get started"
buttonText="Start Free Trial"
termsText="By signing up, you agree to our Terms of Service and Privacy Policy. Cancel anytime."
/>
</div>
<FooterLogoReveal
logoText="My Trade"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</ThemeProvider>
);
}