Merge version_2 into main #1
339
src/app/page.tsx
339
src/app/page.tsx
@@ -2,15 +2,15 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { Zap, ShieldCheck, TrendingUp, HelpCircle } from "lucide-react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -30,22 +30,9 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "How it works",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Stats",
|
||||
id: "metrics",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
{ name: "Benefits", id: "features" },
|
||||
{ name: "Tasks", id: "metrics" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="DropChain"
|
||||
/>
|
||||
@@ -53,324 +40,74 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Participate in the Next Big Airdrop"
|
||||
description="Secure, transparent, and instant token distribution directly to your wallet. Join thousands of users worldwide."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cryptocurrency-hologram-design_23-2149250222.jpg",
|
||||
imageAlt: "digital crypto background",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/finger-pressing-button-air_1134-102.jpg",
|
||||
imageAlt: "digital crypto background",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-futuristic-with-low-poly-design-with-connecting-lines-dots_1048-12728.jpg",
|
||||
imageAlt: "digital crypto background",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-dark-room-modern-futuristic-sci-fi-background-3d-illustration_35913-2402.jpg",
|
||||
imageAlt: "digital crypto background",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/extreme-close-up-computer-circuit-board_23-2147922289.jpg",
|
||||
imageAlt: "digital crypto background",
|
||||
},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-with-cryptocurrency_23-2149102123.jpg",
|
||||
imageAlt: "digital crypto background",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sever-farm-workplace-employees-interacting-with-augmented-reality-tech_482257-116242.jpg",
|
||||
imageAlt: "digital crypto background",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572173.jpg",
|
||||
imageAlt: "digital crypto background",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038909.jpg",
|
||||
imageAlt: "digital crypto background",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-bitcoin-illustration_23-2151611189.jpg",
|
||||
imageAlt: "digital crypto background",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Claim Airdrop",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-abstract-plexus-technology-design-network-communications_1048-15871.jpg",
|
||||
alt: "user profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cryptocurrency-concept-with-coin_23-2149153412.jpg",
|
||||
alt: "user profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-render-abstract-techno-background-with-flowing-cyber-particles_1048-14188.jpg",
|
||||
alt: "user profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-abstract-cyber-particles-background-with-flowing-dots_1048-12410.jpg",
|
||||
alt: "user profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/futuristic-presentation-by-businesswoman-white-shirt_53876-97048.jpg",
|
||||
alt: "user profile",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 10,000+ early adopters"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/vr-headset-some-cords-rough-rustic-wooden-table-white-wall_346278-1285.jpg",
|
||||
alt: "brand-1",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/doctor-pressing-virtual-application_1134-640.jpg",
|
||||
alt: "brand-2",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038902.jpg",
|
||||
alt: "brand-3",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/bitcoin-coin-closeup-circuit-board-finance-concept_169016-60432.jpg",
|
||||
alt: "brand-4",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/cryptocurrency-non-fungible-tokens-financial-technology-background_53876-104210.jpg",
|
||||
alt: "brand-5",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Built for Community Distribution"
|
||||
description="We simplify the complexity of airdrops. Our decentralized protocol ensures fairness, security, and speed for every participant."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Instant Claim",
|
||||
description: "Tokens arrive in seconds.",
|
||||
},
|
||||
{
|
||||
title: "High Security",
|
||||
description: "Audited smart contracts.",
|
||||
},
|
||||
{
|
||||
title: "Global Access",
|
||||
description: "Open to everyone, everywhere.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-assortment-with-cryptocurrency_23-2149102070.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
buttons={[{ text: "Claim Now", href: "#cta" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
<FeatureCardTwentyFive
|
||||
title="Unlock Your Benefits"
|
||||
description="Experience the next generation of decentralized rewards."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Safety First",
|
||||
description: "Zero gas fee manipulation.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendered-illustration-human-face-design_460848-8147.jpg",
|
||||
},
|
||||
{
|
||||
title: "Scalable",
|
||||
description: "Handles millions of users.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-supply-chain-representation_23-2149827235.jpg",
|
||||
},
|
||||
{
|
||||
title: "Transparent",
|
||||
description: "Fully verifiable on-chain.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-blockchain-technology_23-2151480182.jpg",
|
||||
},
|
||||
{ title: "Instant Access", description: "Claim your rewards immediately without friction.", icon: Zap, mediaItems: [{ imageSrc: "https://img.b2bpic.net/free-photo/3d-abstract-plexus-technology-design-network-communications_1048-15871.jpg" }, { imageSrc: "https://img.b2bpic.net/free-photo/3d-abstract-plexus-technology-design-network-communications_1048-15871.jpg" }] },
|
||||
{ title: "Total Security", description: "Audited protocols keeping your assets safe.", icon: ShieldCheck, mediaItems: [{ imageSrc: "https://img.b2bpic.net/free-photo/lock-front-side-with-white-background_187299-39892.jpg" }, { imageSrc: "https://img.b2bpic.net/free-photo/lock-front-side-with-white-background_187299-39892.jpg" }] }
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="The most robust airdrop platform on the blockchain."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
<MetricCardFourteen
|
||||
title="Gamified Milestones"
|
||||
tag="Rewards"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1.2M+",
|
||||
title: "Active Users",
|
||||
description: "Global reach",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lock-front-side-with-white-background_187299-39892.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "$50M",
|
||||
title: "Volume",
|
||||
description: "Distributed daily",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design-smartphone_23-2150165972.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "99.9%",
|
||||
title: "Uptime",
|
||||
description: "Always online",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/data-network-with-glowing-core_23-2152004043.jpg",
|
||||
},
|
||||
{ id: "1", value: "Task 1", description: "Complete social verification" },
|
||||
{ id: "2", value: "Task 2", description: "Join the community pool" },
|
||||
{ id: "3", value: "Task 3", description: "Claim your distribution" }
|
||||
]}
|
||||
title="Global Impact"
|
||||
description="Numbers speak for our growing community."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah",
|
||||
role: "Investor",
|
||||
testimonial: "Best airdrop experience ever.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-lady-holding-digital-tablet_197531-16750.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mark",
|
||||
role: "User",
|
||||
testimonial: "Smooth, fast, and secure.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-wearing-headband-standing-outside_23-2147654964.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Leo",
|
||||
role: "Trader",
|
||||
testimonial: "Very high token delivery rate.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-analyzing-stock-market-charts_23-2151966703.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Anna",
|
||||
role: "Student",
|
||||
testimonial: "Helped my portfolio grow.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beauty-businesswoman-leaning-against-brick-wall_613910-773.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jane",
|
||||
role: "CEO",
|
||||
testimonial: "Outstanding project ethics.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-eyeglasses-holding-tablet-computer-looking-away_171337-13019.jpg",
|
||||
},
|
||||
]}
|
||||
title="Trusted by Millions"
|
||||
description="See why our community loves DropChain."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Is it free?",
|
||||
content: "Yes, always free to participate.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "How to start?",
|
||||
content: "Connect your wallet and claim.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Is it safe?",
|
||||
content: "Yes, audited and secure.",
|
||||
},
|
||||
{ id: "f1", title: "How do I participate?", content: "Connect your wallet and follow the steps in our gamified portal." },
|
||||
{ id: "f2", title: "What if I need help?", content: "Our support team is available 24/7 on our official Discord." }
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
sideTitle="Frequently Asked Questions"
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Support"
|
||||
title="Need Help?"
|
||||
description="Join our support channel or contact our dev team."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Support",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
tag="Final Step"
|
||||
title="Ready to Claim?"
|
||||
description="Secure your tokens before the distribution window closes."
|
||||
buttons={[{ text: "Start Claiming Now", href: "#" }]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
<FooterBase
|
||||
logoText="DropChain"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Security",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Navigation", items: [{ label: "Home", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Terms", href: "#" }] }
|
||||
]}
|
||||
copyrightText="© 2025 DropChain | Financial Disclaimer: Crypto assets are volatile. Participate at your own risk."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,8 +10,8 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #000000;
|
||||
--card: #0c0c0c;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #106EFB;
|
||||
--primary-cta-text: #ffffff;
|
||||
|
||||
Reference in New Issue
Block a user