Files
5d858326-e12e-4088-95bf-c81…/src/app/page.tsx
2026-03-05 18:24:38 +00:00

292 lines
13 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterBase from "@/components/sections/footer/FooterBase";
import Link from "next/link";
import { Zap, Shield, Sparkles, TrendingUp, Mail, Users } from "lucide-react";
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumSmall"
sizing="largeSmall"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="CryptoAI News"
navItems={[
{ name: "Home", id: "/" },
{ name: "Features", id: "features" },
{ name: "How It Works", id: "process" },
{ name: "Pricing", id: "/pricing" },
{ name: "Contact", id: "contact" },
]}
/>
</div>
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroSplit
title="Crypto news, categorized and posted automatically"
description="Your AI agent monitors top crypto sources 24/7, organizes stories by category, and posts the best updates to X so you stay ahead without the noise."
tag="AI-Powered Aggregation"
tagIcon={Zap}
tagAnimation="slide-up"
background={{ variant: "glowing-orb" }}
buttons={[
{ text: "Start aggregating now", href: "/pricing" },
{ text: "View Demo", href: "#features" },
]}
buttonAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/a-modern-sleek-cryptocurrency-news-aggre-1772735010771-9aa7e9d1.png?_wi=1"
imageAlt="CryptoAI Dashboard showing news aggregation interface"
mediaAnimation="slide-up"
imagePosition="right"
fixedMediaHeight={true}
ariaLabel="Hero section with AI crypto news aggregation platform overview"
/>
</div>
{/* About Section */}
<div id="about" data-section="about">
<TextAbout
tag="Why Choose Us"
tagIcon={Shield}
tagAnimation="slide-up"
title="Stop spending hours searching crypto news across multiple platforms. Our AI agent works 24/7 to curate, categorize, and share the most relevant market-moving updates directly to your X audience."
useInvertedBackground={true}
buttons={[
{ text: "Learn More", href: "#features" },
{ text: "Try Free Trial", href: "/pricing" },
]}
buttonAnimation="slide-up"
ariaLabel="About CryptoAI News platform benefits"
/>
</div>
{/* Features Section */}
<div id="features" data-section="features">
<FeatureCardSix
title="How It Works"
description="Our intelligent pipeline transforms raw crypto news into organized, shareable content"
tag="Process"
tagIcon={Sparkles}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: 1,
title: "Multi-Source Monitoring",
description: "Our AI monitors 50+ top crypto news sources including CoinDesk, The Block, Cointelegraph, Reddit, Discord, and Twitter in real-time.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/an-abstract-visualization-of-ai-monitori-1772735009555-b2f0f5ac.png?_wi=1",
imageAlt: "AI monitoring multiple news sources",
},
{
id: 2,
title: "Smart Categorization",
description: "Automatically sorts news by category: Market Movements, Regulatory Updates, Protocol Developments, Security Alerts, and Community Events.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/visual-representation-of-intelligent-new-1772735010311-2d8eda55.png?_wi=1",
imageAlt: "News categorization visualization",
},
{
id: 3,
title: "AI-Powered Curation",
description: "Our algorithms filter noise and prioritize stories based on relevance, sentiment, and potential market impact for your specific interests.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/illustration-of-ai-powered-content-filte-1772735010323-4db3ea66.png?_wi=1",
imageAlt: "Content filtering and prioritization",
},
{
id: 4,
title: "One-Click X Posting",
description: "Pre-formatted posts ready to share on X (Twitter) with built-in thread capabilities. Schedule or post immediately with custom messaging.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/screenshot-of-a-social-media-post-compos-1772735010352-fa37f043.png",
imageAlt: "Social media post composer interface",
},
]}
ariaLabel="Feature timeline showing how CryptoAI News processes and shares crypto news"
/>
</div>
{/* Metrics Section */}
<div id="process" data-section="process">
<MetricCardEleven
title="Proven Results"
description="Join thousands of crypto professionals leveraging AI for competitive advantage"
tag="Impact"
tagIcon={TrendingUp}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
animationType="slide-up"
metrics={[
{
id: "1",
value: "50+",
title: "News Sources",
description: "Monitored 24/7 for breaking crypto updates",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/abstract-visualization-of-50-interconnec-1772735009517-c41ff10c.png",
imageAlt: "Network of news sources",
},
{
id: "2",
value: "2.5M",
title: "Users Reached",
description: "Monthly impressions across shared content",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/visualization-of-social-media-reach-and--1772735009576-672daba4.png",
imageAlt: "Social media reach metrics",
},
{
id: "3",
value: "87%",
title: "Time Saved",
description: "Reduction in manual research and posting",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/illustration-of-time-saving-and-automati-1772735009985-53fd031e.png",
imageAlt: "Time-saving efficiency visualization",
},
]}
ariaLabel="Metrics showing CryptoAI News platform impact"
/>
</div>
{/* Testimonials Section */}
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
title="Trusted by Crypto Leaders"
description="See why traders, creators, and institutions choose CryptoAI News"
tag="Testimonials"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
testimonials={[
{
id: "1",
name: "Marcus Chen",
role: "Crypto Trader",
company: "TradeLabs",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/professional-headshot-of-a-confident-mal-1772735009187-6bf17ef0.png",
imageAlt: "Marcus Chen headshot",
},
{
id: "2",
name: "Sofia Rodriguez",
role: "Content Creator",
company: "CryptoVoice",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/professional-headshot-of-a-female-conten-1772735008839-b9e44c19.png",
imageAlt: "Sofia Rodriguez headshot",
},
{
id: "3",
name: "James Thompson",
role: "Portfolio Manager",
company: "BlockWealth",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/professional-headshot-of-a-male-portfoli-1772735009457-9187804f.png",
imageAlt: "James Thompson headshot",
},
{
id: "4",
name: "Amelia Park",
role: "Research Lead",
company: "CryptoIntel",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/professional-headshot-of-a-female-resear-1772735008225-dd1defd6.png",
imageAlt: "Amelia Park headshot",
},
]}
kpiItems={[
{ value: "10K+", label: "Active Users" },
{ value: "500K+", label: "Posts Shared" },
{ value: "98%", label: "Uptime" },
]}
ariaLabel="Testimonials from satisfied CryptoAI News users"
/>
</div>
{/* Social Proof Section */}
<div id="social-proof" data-section="social-proof">
<SocialProofOne
title="Trusted by Industry Leaders"
description="The platforms and communities that rely on CryptoAI News"
tag="Partners"
tagIcon={Users}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
logos={[
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/coindesk-logo-a-professional-cryptocurre-1772735011534-40dd805e.png",
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/the-block-logo-professional-blockchain-a-1772735008996-1cb7d040.png",
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/cointelegraph-logo-leading-cryptocurrenc-1772735011609-e43d8ba1.png",
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/messari-logo-cryptocurrency-research-and-1772735010299-ec83a496.png",
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/glassnode-logo-on-chain-analytics-platfo-1772735009502-ab2a3767.png",
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/nansen-logo-blockchain-analytics-and-int-1772735009921-f33eaa01.png",
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/dune-analytics-logo-blockchain-data-and--1772735008775-2ff037c7.png",
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXLVRar70i4AvqEaryPfgOOY5A/defi-pulse-logo-defi-analytics-and-monit-1772735008800-74e50dc9.png",
]}
names={["CoinDesk", "The Block", "Cointelegraph", "Messari", "Glassnode", "Nansen", "Dune Analytics", "DeFi Pulse"]}
speed={40}
showCard={true}
ariaLabel="Partner logos and integration partners"
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterBase
logoText="CryptoAI News"
copyrightText="© 2025 CryptoAI News. All rights reserved."
columns={[
{
title: "Product",
items: [
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "/pricing" },
{ label: "Dashboard", href: "#" },
{ label: "API Docs", href: "#" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "#about" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Contact", href: "#contact" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Security", href: "#" },
],
},
]}
ariaLabel="Site footer"
/>
</div>
</ThemeProvider>
);
}