303 lines
16 KiB
TypeScript
303 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
|
|
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
|
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
|
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import { Activity, Award, BarChart3, Brain, Globe, Layers, Star, TrendingUp, Zap } from "lucide-react";
|
|
|
|
export default function CryptoFlowPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="mediumLarge"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="CryptoFlow"
|
|
navItems={[
|
|
{ name: "Analysis", id: "features" },
|
|
{ name: "Insights", id: "metrics" },
|
|
{ name: "Dashboard", id: "dashboard" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
bottomLeftText="Real-Time Crypto Markets"
|
|
bottomRightText="support@cryptoflow.io"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="Analyze Where the Market is Going"
|
|
description="Leverage advanced AI-powered analysis and real-time data visualization to predict cryptocurrency market movements. Make informed trading decisions with CryptoFlow's intelligent market insights and trend analysis."
|
|
background={{ variant: "gradient-bars" }}
|
|
tag="Next-Gen Trading"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Start Analyzing", href: "#dashboard" },
|
|
{ text: "Learn More", href: "#features" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGKTU0dBcLQnQsDWAzAG4BSALE/a-sleek-cryptocurrency-market-analysis-d-1774110092399-c0db1613.png", imageAlt: "Crypto market analysis dashboard"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGKTU0dBcLQnQsDWAzAG4BSALE/bitcoin-price-prediction-chart-with-ai-p-1774110092381-70c0d7e5.png", imageAlt: "Bitcoin price prediction chart"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGKTU0dBcLQnQsDWAzAG4BSALE/trading-signals-visualization-dashboard--1774110093342-393fb82f.png", imageAlt: "Trading signals visualization"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGKTU0dBcLQnQsDWAzAG4BSALE/market-correlation-heatmap-showing-relat-1774110092202-51c38139.png", imageAlt: "Market correlation heatmap"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGKTU0dBcLQnQsDWAzAG4BSALE/portfolio-performance-metrics-dashboard--1774110093226-a74101a1.png", imageAlt: "Portfolio performance metrics"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGKTU0dBcLQnQsDWAzAG4BSALE/risk-assessment-indicators-and-volatilit-1774110096944-d72528aa.png", imageAlt: "Risk assessment indicators"
|
|
}
|
|
]}
|
|
ariaLabel="Hero section for cryptocurrency market analyzer"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
title="Powerful Market Analysis Features"
|
|
description="Unlock advanced cryptocurrency market analysis tools designed for traders who need to understand market trends and predict price movements with accuracy."
|
|
tag="Core Features"
|
|
tagIcon={Zap}
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
carouselMode="buttons"
|
|
features={[
|
|
{
|
|
title: "Real-Time Price Tracking", description: "Monitor Bitcoin, Ethereum, and 500+ cryptocurrencies with live price updates and instant alerts.", bentoComponent: "line-chart"
|
|
},
|
|
{
|
|
title: "AI-Powered Predictions", description: "Get machine learning-based market predictions to anticipate trend changes before they happen.", bentoComponent: "animated-bar-chart"
|
|
},
|
|
{
|
|
title: "Technical Indicators", description: "Access RSI, MACD, Bollinger Bands, and 20+ technical analysis tools in one place.", bentoComponent: "icon-info-cards", items: [
|
|
{ icon: Activity, label: "RSI", value: "Fast Analysis" },
|
|
{ icon: BarChart3, label: "MACD", value: "Trend Detection" },
|
|
{ icon: Zap, label: "Volume", value: "Real-Time Data" }
|
|
]
|
|
},
|
|
{
|
|
title: "Multi-Exchange Support", description: "Compare prices across Binance, Coinbase, Kraken, and other major exchanges simultaneously.", bentoComponent: "icon-info-cards", items: [
|
|
{ icon: Globe, label: "Global", value: "24/7 Markets" },
|
|
{ icon: Layers, label: "Multi-Chain", value: "All Blockchains" },
|
|
{ icon: Zap, label: "Instant", value: "Live Synced" }
|
|
]
|
|
}
|
|
]}
|
|
buttons={[{ text: "Start Free Trial", href: "#contact" }]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
title="Market Intelligence by Numbers"
|
|
description="Join thousands of traders using CryptoFlow to analyze market trends and optimize their trading strategies."
|
|
tag="Trust & Reliability"
|
|
tagIcon={Award}
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
animationType="depth-3d"
|
|
carouselMode="buttons"
|
|
metrics={[
|
|
{
|
|
id: "users", value: "50,000+", title: "Active Traders", items: ["Analyzing daily", "Real-time updates", "Global community"]
|
|
},
|
|
{
|
|
id: "accuracy", value: "89.3%", title: "Prediction Accuracy", items: ["ML-powered analysis", "Historical backtesting", "Continuous learning"]
|
|
},
|
|
{
|
|
id: "signals", value: "1.2M+", title: "Signals Generated", items: ["Daily alerts", "Instant notifications", "Actionable insights"]
|
|
},
|
|
{
|
|
id: "markets", value: "500+", title: "Cryptocurrencies", items: ["All major coins", "Alt coins", "DeFi tokens"]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="dashboard" data-section="dashboard">
|
|
<TextAbout
|
|
tag="Live Analysis"
|
|
tagIcon={BarChart3}
|
|
tagAnimation="slide-up"
|
|
title="Advanced Market Dashboard"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Explore Dashboard", href: "#" },
|
|
{ text: "Request Demo", href: "#" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="predictions" data-section="predictions">
|
|
<ProductCardOne
|
|
title="Market Prediction Models"
|
|
description="Our AI models analyze historical data and market sentiment to predict future price movements with industry-leading accuracy."
|
|
tag="Advanced Analytics"
|
|
tagIcon={Brain}
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
animationType="scale-rotate"
|
|
gridVariant="three-columns-all-equal-width"
|
|
carouselMode="buttons"
|
|
products={[
|
|
{
|
|
id: "short-term", name: "Short-Term Predictor", price: "4-Hour Forecasts", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGKTU0dBcLQnQsDWAzAG4BSALE/short-term-cryptocurrency-price-predicti-1774110092821-b0d0f8f8.png", imageAlt: "Short-term market prediction model"
|
|
},
|
|
{
|
|
id: "mid-term", name: "Mid-Term Analyzer", price: "24-Hour Trends", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGKTU0dBcLQnQsDWAzAG4BSALE/mid-term-cryptocurrency-trend-analysis-s-1774110092918-07cb70c2.png", imageAlt: "Mid-term trend analysis"
|
|
},
|
|
{
|
|
id: "long-term", name: "Long-Term Forecaster", price: "Weekly Insights", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGKTU0dBcLQnQsDWAzAG4BSALE/long-term-cryptocurrency-market-forecast-1774110098347-904d0096.png", imageAlt: "Long-term market forecasting"
|
|
}
|
|
]}
|
|
buttons={[{ text: "View All Models", href: "#" }]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="Trusted by Crypto Traders"
|
|
description="See how CryptoFlow has transformed trading strategies for thousands of cryptocurrency investors worldwide."
|
|
tag="User Reviews"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="blur-reveal"
|
|
carouselMode="buttons"
|
|
kpiItems={[
|
|
{ value: "4.9/5", label: "Average Rating" },
|
|
{ value: "98%", label: "User Retention" },
|
|
{ value: "24/7", label: "Support Available" }
|
|
]}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Alex Chen", role: "Day Trader", company: "Independent", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGKTU0dBcLQnQsDWAzAG4BSALE/professional-headshot-of-an-asian-male-c-1774110091176-0b663c84.png", imageAlt: "Alex Chen professional headshot"
|
|
},
|
|
{
|
|
id: "2", name: "Sarah Williams", role: "Portfolio Manager", company: "Prime Capital", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGKTU0dBcLQnQsDWAzAG4BSALE/professional-headshot-of-a-female-portfo-1774110091377-facb796f.png", imageAlt: "Sarah Williams professional headshot"
|
|
},
|
|
{
|
|
id: "3", name: "Marcus Johnson", role: "Crypto Analyst", company: "BlockChain Ventures", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGKTU0dBcLQnQsDWAzAG4BSALE/professional-headshot-of-a-male-crypto-a-1774110091691-baad116f.png", imageAlt: "Marcus Johnson professional headshot"
|
|
},
|
|
{
|
|
id: "4", name: "Emma Rodriguez", role: "Trading Bot Developer", company: "AutoTrade Labs", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BGKTU0dBcLQnQsDWAzAG4BSALE/professional-headshot-of-a-female-softwa-1774110096649-604e2787.png", imageAlt: "Emma Rodriguez professional headshot"
|
|
}
|
|
]}
|
|
buttons={[{ text: "Join Our Community", href: "#" }]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Get answers to common questions about market analysis, prediction models, and trading features."
|
|
textPosition="left"
|
|
useInvertedBackground={true}
|
|
faqsAnimation="blur-reveal"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How accurate are your market predictions?", content: "Our AI models achieve 89.3% accuracy in predicting short-term market movements (4-24 hours). Accuracy varies by cryptocurrency volatility and market conditions. We continuously update our models using historical data and real-time market analysis."
|
|
},
|
|
{
|
|
id: "2", title: "What cryptocurrencies can I analyze?", content: "CryptoFlow supports analysis for 500+ cryptocurrencies including Bitcoin, Ethereum, and all major altcoins. We cover assets across multiple blockchains including DeFi tokens and emerging cryptocurrencies."
|
|
},
|
|
{
|
|
id: "3", title: "Can I connect to my trading exchange?", content: "Yes! CryptoFlow integrates with Binance, Coinbase, Kraken, FTX, and 15+ other major exchanges. You can sync your portfolio and execute trades directly from our platform."
|
|
},
|
|
{
|
|
id: "4", title: "Is there a free trial available?", content: "Absolutely! New users get 14 days of free access to all premium features. No credit card required. After the trial, choose from our flexible subscription plans starting at $29/month."
|
|
},
|
|
{
|
|
id: "5", title: "How real-time are the price updates?", content: "All price data updates in real-time with <100ms latency. We aggregate data from multiple exchanges to provide the most accurate market prices and prevent flash crash detection issues."
|
|
},
|
|
{
|
|
id: "6", title: "What makes your analysis different?", content: "We combine machine learning models, technical indicators, on-chain analysis, and sentiment analysis to provide comprehensive market insights. Our algorithms learn continuously from market outcomes to improve accuracy over time."
|
|
}
|
|
]}
|
|
buttons={[{ text: "Contact Support", href: "#" }]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="CryptoFlow"
|
|
copyrightText="© 2025 CryptoFlow. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Dashboard", href: "#dashboard" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "Security", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "API Reference", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Community", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Contact", href: "#" },
|
|
{ label: "Press", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "Disclaimer", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |