323 lines
16 KiB
TypeScript
323 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Crown, Sparkles, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="large"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "home"},
|
|
{
|
|
name: "About", id: "about"},
|
|
{
|
|
name: "Features", id: "features"},
|
|
{
|
|
name: "Pricing", id: "pricing"},
|
|
{
|
|
name: "FAQ", id: "faq"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-vector/20-cryptocurrency-blue-color-icon-presentation-vector-icons-illustration_1142-15830.jpg"
|
|
logoAlt="CryptoVault Logo"
|
|
brandName="CryptoVault"
|
|
bottomLeftText="Global Community"
|
|
bottomRightText="hello@cryptovault.com"
|
|
button={{
|
|
text: "Sign Up", href: "#contact"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroCarouselLogo
|
|
logoText="CryptoVault"
|
|
description="Secure your digital future with CryptoVault. The leading platform for managing and growing your cryptocurrency assets with unparalleled security and ease."
|
|
buttons={[
|
|
{
|
|
text: "Get Started", href: "#contact"},
|
|
{
|
|
text: "Explore Features", href: "#features"},
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-background-with-design-extruding-cubes_1048-12334.jpg", imageAlt: "Abstract blockchain network with glowing blue lines"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/street-statistics-debt-loss-globe_1150-1721.jpg", imageAlt: "Holographic cryptocurrency chart with upward trends"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-shot-lock-around-dollar-bill-black-laptop_181624-9123.jpg", imageAlt: "Secure digital vault icon with blue light"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/golden-coins-include-dollar-yen-yuan-euro-ruble-won-pound-sterling-with-mobile-phone-frame-currency-exchange-forex-trading-concept-by-3d-render-illustration_616485-119.jpg", imageAlt: "Quantum computing processing crypto transactions"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-technology-hologram_23-2151917430.jpg", imageAlt: "Hand interacting with transparent touchscreen showing crypto wallet"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-tech-view-futuristic-earth_23-2151100331.jpg", imageAlt: "Global network of interconnected digital currencies"},
|
|
]}
|
|
autoplayDelay={3000}
|
|
showDimOverlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="About CryptoVault"
|
|
description={[
|
|
"CryptoVault provides a comprehensive suite of tools for institutional and individual investors to navigate the complex world of digital assets. Our platform is built on cutting-edge blockchain technology, offering transparent, secure, and efficient solutions for trading, staking, and portfolio management.", "We are committed to empowering our users with advanced analytics, real-time market data, and expert insights, ensuring they make informed decisions and achieve their financial goals in the rapidly evolving crypto landscape."]}
|
|
showBorder={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "real-time-data", title: "Real-Time Market Data", descriptions: [
|
|
"Access live prices, trends, and in-depth analytics across thousands of cryptocurrencies. Stay ahead of the market with instant updates and comprehensive charts."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-person-looking-finance-graphs_23-2150461311.jpg", imageAlt: "Real-time crypto portfolio dashboard"},
|
|
{
|
|
id: "smart-contracts", title: "Smart Contract Integration", descriptions: [
|
|
"Seamlessly interact with decentralized applications (DApps) and execute trustless agreements. Secure and automated transactions powered by advanced smart contract technology."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-low-poly-background-with-connecting-dots-lines_1048-5910.jpg", imageAlt: "Smart contracts code illustration"},
|
|
{
|
|
id: "high-speed-trading", title: "High-Speed Trading Engine", descriptions: [
|
|
"Execute trades with ultra-low latency and robust infrastructure. Our powerful engine ensures your orders are filled quickly and efficiently, even during peak volatility."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-blockchain-technology_23-2151480181.jpg", imageAlt: "High-speed transaction processing"},
|
|
{
|
|
id: "ai-analytics", title: "AI-Driven Market Analytics", descriptions: [
|
|
"Leverage artificial intelligence to uncover hidden market patterns and predictive insights. Make smarter investment decisions with data-driven forecasts."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-analyzing-stock-market-charts-financial-data-electronic-board_169016-14901.jpg", imageAlt: "AI-driven crypto analytics"},
|
|
{
|
|
id: "cold-storage", title: "Secure Cold Storage", descriptions: [
|
|
"Protect your assets with industry-leading cold storage solutions. Your funds are kept offline, safe from cyber threats, with multi-signature authorization."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/access-connection-internet-technology-concept_53876-122485.jpg", imageAlt: "Secure cold storage hardware wallet"},
|
|
]}
|
|
title="Core Features"
|
|
description="Experience the power of a truly integrated crypto platform designed for performance and reliability."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardFourteen
|
|
useInvertedBackground={false}
|
|
title="Unmatched Performance"
|
|
tag="Our Achievements"
|
|
metrics={[
|
|
{
|
|
id: "metric-1", value: "$500B+", description: "Assets Under Management"},
|
|
{
|
|
id: "metric-2", value: "24/7", description: "Global Support"},
|
|
{
|
|
id: "metric-3", value: "99.9%", description: "Uptime Reliability"},
|
|
{
|
|
id: "metric-4", value: "10M+", description: "Active Users"},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Blockchain Titans", "Quantum Ledger", "Future Finance Group", "Decentralized Innovations", "Global Crypto Solutions", "Apex Digital Assets", "Nexus Block"]}
|
|
title="Trusted by Industry Leaders"
|
|
description="Our innovative solutions are backed by the best in the blockchain ecosystem, ensuring unparalleled security and reliability."
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "basic", badge: "Standard", badgeIcon: Sparkles,
|
|
price: "$0/mo", name: "Foundation", buttons: [
|
|
{
|
|
text: "Get Started", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Core trading functionalities", "Real-time market insights", "Standard security protocols", "Community forum access"],
|
|
},
|
|
{
|
|
id: "pro", badge: "Growth", badgeIcon: Zap,
|
|
price: "$99/mo", name: "Advanced", buttons: [
|
|
{
|
|
text: "Choose Pro", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Advanced trading suite", "AI-powered predictive analytics", "Dedicated account support", "Customizable smart contract templates", "Enhanced security measures"],
|
|
},
|
|
{
|
|
id: "enterprise", badge: "Enterprise Elite", badgeIcon: Crown,
|
|
price: "Custom", name: "Institutional", buttons: [
|
|
{
|
|
text: "Request Demo", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Full-suite institutional platform", "Bespoke API integrations & solutions", "Multi-jurisdictional compliance", "24/7 premium enterprise support", "Advanced cold storage & custody", "Regulatory advisory services"],
|
|
},
|
|
]}
|
|
title="Tailored Crypto Solutions for Your Enterprise"
|
|
description="Unlock the full potential of digital assets with our flexible, scalable plans designed for institutional needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
faqsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
sideTitle="Your B2B Crypto Questions, Answered"
|
|
sideDescription="Navigate the complexities of enterprise crypto solutions with our expert insights."
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "What are CryptoVault's core B2B solutions?", content: "CryptoVault offers a comprehensive suite of B2B crypto solutions, including institutional trading platforms, secure custody services, smart contract development, and bespoke blockchain integration for enterprises."},
|
|
{
|
|
id: "faq-2", title: "How does CryptoVault ensure enterprise-grade security?", content: "We implement multi-factor authentication, advanced encryption, isolated cold storage solutions, and regular security audits. Our infrastructure is designed to meet stringent institutional security and compliance standards."},
|
|
{
|
|
id: "faq-3", title: "What digital assets are supported for B2B operations?", content: "CryptoVault supports a wide range of major cryptocurrencies and stablecoins, as well as enabling custom token integration and asset management tailored for specific enterprise requirements."},
|
|
{
|
|
id: "faq-4", title: "What kind of support can B2B clients expect?", content: "Enterprise clients benefit from a dedicated account manager, 24/7 priority support channels, and access to our team of blockchain experts for technical assistance and strategic guidance."},
|
|
{
|
|
id: "faq-5", title: "Does CryptoVault offer custom blockchain development?", content: "Yes, we provide bespoke blockchain development services, including private blockchain implementations, DApp creation, and smart contract auditing, tailored to your business needs."},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="CryptoVault has revolutionized how I manage my digital assets. The security features are top-notch, and the user interface is incredibly intuitive. A truly premium experience that I recommend to all serious investors!"
|
|
rating={5}
|
|
author="Alex R., Institutional Investor"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/bearded-stock-market-trader-looking-camera-with-hands-crossed_482257-30734.jpg", alt: "Alex R."},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-male-graphic-designer-with-arms-crossed_1170-1023.jpg", alt: "Sarah J."},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-elegant-mature-male-browsing-tablet_23-2148673427.jpg", alt: "Michael C."},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-pretty-young-woman-look-professional-cross-hands-chest-smiling-confident-camera-wear-glasses-standing-near-reception-office-hall-discuss-business_197531-22165.jpg", alt: "Emily W."},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/business-man-working-late-office_23-2148991380.jpg", alt: "David S."},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Partner with CryptoVault"
|
|
description="Discover how CryptoVault can empower your enterprise with cutting-edge crypto solutions. Fill out the form below to connect with our B2B specialists."
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "company", type: "text", placeholder: "Company Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email", required: true,
|
|
},
|
|
{
|
|
name: "subject", type: "text", placeholder: "Inquiry Type", required: false,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Please describe your enterprise's needs and how we can assist.", rows: 4,
|
|
required: true,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/abstract-background-connecting-lines-dots_1048-7940.jpg"
|
|
imageAlt="Digital communication network"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Platform", items: [
|
|
{
|
|
label: "Features", href: "#features"},
|
|
{
|
|
label: "Pricing", href: "#pricing"},
|
|
{
|
|
label: "Security", href: "#about"},
|
|
{
|
|
label: "API", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{
|
|
label: "Blog", href: "#"},
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Support", href: "#contact"},
|
|
{
|
|
label: "Glossary", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Careers", href: "#"},
|
|
{
|
|
label: "Partnerships", href: "#social-proof"},
|
|
{
|
|
label: "Press", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="CryptoVault"
|
|
copyrightText="© 2025 CryptoVault. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |