Update src/app/page.tsx
This commit is contained in:
315
src/app/page.tsx
315
src/app/page.tsx
@@ -34,109 +34,68 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#home",
|
||||
},
|
||||
name: "Home", id: "#home"},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
name: "Features", id: "#features"},
|
||||
{
|
||||
name: "Metrics",
|
||||
id: "#metrics",
|
||||
},
|
||||
name: "Metrics", id: "#metrics"},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
name: "Pricing", id: "#pricing"},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
name: "Testimonials", id: "#testimonials"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
name: "FAQ", id: "#faq"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/digital-connectivity-technology-icon-neon-gradient-background_53876-119515.jpg"
|
||||
logoAlt="CryptoSphere Logo"
|
||||
brandName="CryptoSphere"
|
||||
button={{
|
||||
text: "Sign Up",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Sign Up", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "downward-rays-animated-grid",
|
||||
}}
|
||||
variant: "downward-rays-animated-grid"}}
|
||||
title="Unlock the Future of Finance with CryptoSphere"
|
||||
description="Trade, invest, and manage your digital assets securely on our cutting-edge decentralized platform. Experience unparalleled speed, transparency, and control."
|
||||
tag="Decentralized. Secure. Transparent."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#features",
|
||||
},
|
||||
text: "Get Started", href: "#features"},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
},
|
||||
text: "Learn More", href: "#about"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-interior-forex-market-exchange-company-office-with-financial-data-growth-charts-multiple-displays-workspace-equipped-with-workstation-having-finance-statistics-real-time-graph_482257-44513.jpg"
|
||||
imageAlt="Futuristic crypto trading interface"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/warehouse-manager-does-quality-assurance_482257-75334.jpg",
|
||||
alt: "Satisfied User 1",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/warehouse-manager-does-quality-assurance_482257-75334.jpg", alt: "Satisfied User 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-businesswoman-standing-airport_107420-63594.jpg",
|
||||
alt: "Satisfied User 2",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-businesswoman-standing-airport_107420-63594.jpg", alt: "Satisfied User 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-wearing-glasses_23-2149104431.jpg",
|
||||
alt: "Satisfied User 3",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-wearing-glasses_23-2149104431.jpg", alt: "Satisfied User 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-smiley-guy-looking-someone_23-2148311252.jpg",
|
||||
alt: "Satisfied User 4",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-smiley-guy-looking-someone_23-2148311252.jpg", alt: "Satisfied User 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/executive-with-glasses-suit_1098-529.jpg",
|
||||
alt: "Satisfied User 5",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/executive-with-glasses-suit_1098-529.jpg", alt: "Satisfied User 5"},
|
||||
]}
|
||||
avatarText="Join over 1M+ active traders"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Real-time trading",
|
||||
},
|
||||
type: "text", text: "Real-time trading"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Secure transactions",
|
||||
},
|
||||
type: "text", text: "Secure transactions"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Global access",
|
||||
},
|
||||
type: "text", text: "Global access"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Decentralized future",
|
||||
},
|
||||
type: "text", text: "Decentralized future"},
|
||||
{
|
||||
type: "text",
|
||||
text: "24/7 Support",
|
||||
},
|
||||
type: "text", text: "24/7 Support"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -149,17 +108,11 @@ export default function LandingPage() {
|
||||
description="CryptoSphere is built on a foundation of innovative blockchain technology, designed to offer a robust and secure environment for all your cryptocurrency needs. We prioritize user control, data privacy, and a seamless experience, empowering you to navigate the digital economy with confidence."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Advanced Security",
|
||||
description: "Multi-layered encryption and cold storage for your assets.",
|
||||
},
|
||||
title: "Advanced Security", description: "Multi-layered encryption and cold storage for your assets."},
|
||||
{
|
||||
title: "Decentralized Control",
|
||||
description: "Empowering users with full ownership and transparent transactions.",
|
||||
},
|
||||
title: "Decentralized Control", description: "Empowering users with full ownership and transparent transactions."},
|
||||
{
|
||||
title: "Blazing Fast Transactions",
|
||||
description: "Leveraging state-of-the-art tech for instant confirmations.",
|
||||
},
|
||||
title: "Blazing Fast Transactions", description: "Leveraging state-of-the-art tech for instant confirmations."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-blockchain-technology_23-2151480182.jpg"
|
||||
imageAlt="Secure blockchain network infrastructure"
|
||||
@@ -174,33 +127,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Real-time Analytics",
|
||||
subtitle: "Monitor market trends with advanced charting tools.",
|
||||
category: "Trading",
|
||||
value: "Insightful",
|
||||
},
|
||||
id: "f1", title: "Real-time Analytics", subtitle: "Monitor market trends with advanced charting tools.", category: "Trading", value: "Insightful"},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Multi-Asset Wallet",
|
||||
subtitle: "Securely store a diverse portfolio of cryptocurrencies.",
|
||||
category: "Management",
|
||||
value: "Versatile",
|
||||
},
|
||||
id: "f2", title: "Multi-Asset Wallet", subtitle: "Securely store a diverse portfolio of cryptocurrencies.", category: "Management", value: "Versatile"},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Instant Swaps",
|
||||
subtitle: "Exchange assets seamlessly with minimal fees.",
|
||||
category: "Exchange",
|
||||
value: "Efficient",
|
||||
},
|
||||
id: "f3", title: "Instant Swaps", subtitle: "Exchange assets seamlessly with minimal fees.", category: "Exchange", value: "Efficient"},
|
||||
{
|
||||
id: "f4",
|
||||
title: "Staking & Yield Farming",
|
||||
subtitle: "Earn passive income on your holdings.",
|
||||
category: "Earning",
|
||||
value: "Profitable",
|
||||
},
|
||||
id: "f4", title: "Staking & Yield Farming", subtitle: "Earn passive income on your holdings.", category: "Earning", value: "Profitable"},
|
||||
]}
|
||||
title="Key Features of CryptoSphere"
|
||||
description="Explore the powerful tools and functionalities that make CryptoSphere the leading choice for managing your digital wealth."
|
||||
@@ -215,32 +148,16 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1M+",
|
||||
title: "Active Users",
|
||||
description: "Globally connected.",
|
||||
icon: Users,
|
||||
id: "m1", value: "1M+", title: "Active Users", description: "Globally connected.", icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "$500M+",
|
||||
title: "Traded Volume",
|
||||
description: "Daily transactions.",
|
||||
icon: LineChart,
|
||||
id: "m2", value: "$500M+", title: "Traded Volume", description: "Daily transactions.", icon: LineChart,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "99.9%",
|
||||
title: "Uptime",
|
||||
description: "Always available.",
|
||||
icon: Zap,
|
||||
id: "m3", value: "99.9%", title: "Uptime", description: "Always available.", icon: Zap,
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "24/7",
|
||||
title: "Support",
|
||||
description: "Dedicated assistance.",
|
||||
icon: Headphones,
|
||||
id: "m4", value: "24/7", title: "Support", description: "Dedicated assistance.", icon: Headphones,
|
||||
},
|
||||
]}
|
||||
title="Our Impact in Numbers"
|
||||
@@ -255,60 +172,31 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "starter",
|
||||
badge: "Free",
|
||||
badgeIcon: Gift,
|
||||
price: "$0",
|
||||
name: "Starter",
|
||||
buttons: [
|
||||
id: "starter", badge: "Free", badgeIcon: Gift,
|
||||
price: "$0", name: "Starter", buttons: [
|
||||
{
|
||||
text: "Start Free",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Start Free", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Basic Trading Access",
|
||||
"Limited Wallet Holdings",
|
||||
"Standard Support",
|
||||
],
|
||||
"Basic Trading Access", "Limited Wallet Holdings", "Standard Support"],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Most Popular",
|
||||
badgeIcon: Star,
|
||||
price: "$29",
|
||||
name: "Pro Trader",
|
||||
buttons: [
|
||||
id: "pro", badge: "Most Popular", badgeIcon: Star,
|
||||
price: "$29", name: "Pro Trader", buttons: [
|
||||
{
|
||||
text: "Go Pro",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Go Pro", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Advanced Trading Tools",
|
||||
"Unlimited Wallet Holdings",
|
||||
"Priority Support",
|
||||
"Exclusive Market Insights",
|
||||
],
|
||||
"Advanced Trading Tools", "Unlimited Wallet Holdings", "Priority Support", "Exclusive Market Insights"],
|
||||
},
|
||||
{
|
||||
id: "enterprise",
|
||||
badge: "Custom",
|
||||
badgeIcon: Briefcase,
|
||||
price: "Custom",
|
||||
name: "Enterprise",
|
||||
buttons: [
|
||||
id: "enterprise", badge: "Custom", badgeIcon: Briefcase,
|
||||
price: "Custom", name: "Enterprise", buttons: [
|
||||
{
|
||||
text: "Contact Sales",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Contact Sales", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Tailored Solutions",
|
||||
"Dedicated Account Manager",
|
||||
"API Access & Integration",
|
||||
"Institutional Support",
|
||||
],
|
||||
"Tailored Solutions", "Dedicated Account Manager", "API Access & Integration", "Institutional Support"],
|
||||
},
|
||||
]}
|
||||
title="Flexible Plans for Every Trader"
|
||||
@@ -324,25 +212,15 @@ export default function LandingPage() {
|
||||
author="Alex M., Crypto Investor"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/business-professional_1098-14759.jpg",
|
||||
alt: "Alex M.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/business-professional_1098-14759.jpg", alt: "Alex M."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/pov-businessman-attending-videocall-meeting-office-using-online-videoconference-talk-consultant-about-financial-strategy-company-employee-chatting-remote-teleconference-close-up_482257-40929.jpg",
|
||||
alt: "Sarah J.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/pov-businessman-attending-videocall-meeting-office-using-online-videoconference-talk-consultant-about-financial-strategy-company-employee-chatting-remote-teleconference-close-up_482257-40929.jpg", alt: "Sarah J."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg",
|
||||
alt: "David C.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg", alt: "David C."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg",
|
||||
alt: "Emily R.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg", alt: "Emily R."},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-electrician-hard-hat-watches-control-panel-night-technician-profile_169016-70992.jpg",
|
||||
alt: "Mark T.",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/woman-electrician-hard-hat-watches-control-panel-night-technician-profile_169016-70992.jpg", alt: "Mark T."},
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="slide-up"
|
||||
@@ -354,14 +232,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"BlockGuard Security",
|
||||
"Quantum Analytics",
|
||||
"DeFi Innovations",
|
||||
"Crypto Ventures Group",
|
||||
"Ledger Core Solutions",
|
||||
"NovaChain Infrastructure",
|
||||
"VaultGuard Wallets",
|
||||
]}
|
||||
"BlockGuard Security", "Quantum Analytics", "DeFi Innovations", "Crypto Ventures Group", "Ledger Core Solutions", "NovaChain Infrastructure", "VaultGuard Wallets"]}
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Our partnerships with top-tier firms ensure the highest standards of security and innovation."
|
||||
speed={40}
|
||||
@@ -373,20 +244,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "What is CryptoSphere?",
|
||||
content: "CryptoSphere is a decentralized cryptocurrency trading platform that allows users to securely buy, sell, and manage a wide range of digital assets.",
|
||||
},
|
||||
id: "q1", title: "What is CryptoSphere?", content: "CryptoSphere is a decentralized cryptocurrency trading platform that allows users to securely buy, sell, and manage a wide range of digital assets."},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Is my data secure?",
|
||||
content: "Yes, we employ advanced encryption, multi-factor authentication, and cold storage solutions to ensure the highest level of security for your data and assets.",
|
||||
},
|
||||
id: "q2", title: "Is my data secure?", content: "Yes, we employ advanced encryption, multi-factor authentication, and cold storage solutions to ensure the highest level of security for your data and assets."},
|
||||
{
|
||||
id: "q3",
|
||||
title: "How do I get started?",
|
||||
content: "Simply sign up, complete our quick verification process, and fund your wallet to begin trading instantly.",
|
||||
},
|
||||
id: "q3", title: "How do I get started?", content: "Simply sign up, complete our quick verification process, and fund your wallet to begin trading instantly."},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Find quick answers to the most common questions about CryptoSphere and our services."
|
||||
@@ -399,18 +261,13 @@ export default function LandingPage() {
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
variant: "rotated-rays-animated"}}
|
||||
text="Ready to step into the future of finance? Join CryptoSphere today and take control of your digital assets."
|
||||
buttons={[
|
||||
{
|
||||
text: "Join CryptoSphere",
|
||||
href: "#",
|
||||
},
|
||||
text: "Join CryptoSphere", href: "#"},
|
||||
{
|
||||
text: "Contact Support",
|
||||
href: "#",
|
||||
},
|
||||
text: "Contact Support", href: "#"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -419,71 +276,43 @@ export default function LandingPage() {
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
title: "Platform", items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
label: "Features", href: "#features"},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
label: "Pricing", href: "#pricing"},
|
||||
{
|
||||
label: "How It Works",
|
||||
href: "#about",
|
||||
},
|
||||
label: "How It Works", href: "#about"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About Us", href: "#about"},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
label: "Careers", href: "#"},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
label: "Blog", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
label: "FAQ", href: "#faq"},
|
||||
{
|
||||
label: "Help Center",
|
||||
href: "#",
|
||||
},
|
||||
label: "Help Center", href: "#"},
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Contact Us", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
label: "Terms of Service", href: "#"},
|
||||
{
|
||||
label: "Disclaimer",
|
||||
href: "#",
|
||||
},
|
||||
label: "Disclaimer", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user