Compare commits
17 Commits
version_15
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| c10230d2c4 | |||
| 66456a4aae | |||
| ad65e17ecf | |||
| 96b257cde5 | |||
| 81b46dee43 | |||
| 63d1c62b61 | |||
| ddd733ce86 | |||
| 327faef190 | |||
| fbe36be90e | |||
| 10e4d143ee | |||
| be10f4c0ce | |||
| b00e8b4169 | |||
| c2cd412dd9 | |||
| 5ce0c8191e | |||
| f0edd58f06 | |||
| 001de9af28 | |||
| 131a828249 |
289
src/app/page.tsx
289
src/app/page.tsx
@@ -2,181 +2,154 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
||||
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Sparkles, BarChart3, ShieldCheck, Zap } from "lucide-react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Marketplace", id: "catalog" },
|
||||
{ name: "Earn", id: "pricing" },
|
||||
{ name: "Support", id: "faq" },
|
||||
]}
|
||||
brandName="CardTrader"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="CardTrader"
|
||||
navItems={[
|
||||
{ name: "Marketplace", id: "catalog" },
|
||||
{ name: "Ownership", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
button={{ text: "Sign Up" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Fair Marketplace & Autonomous TCG Ecosystem"
|
||||
description="Earn recurring passive income from your collection. Our platform empowers you to purchase, trade, and build a sustainable yield-generating portfolio in a transparent ecosystem."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022647.jpg", alt: "User 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-beautiful-redhead-lady_23-2148339146.jpg", alt: "User 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/joyful-young-brunette-caucasian-girl-isolated-olive-green-wall-with-copy-space_141793-118993.jpg", alt: "User 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", alt: "User 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-happy_1298-197.jpg", alt: "User 5" }
|
||||
]}
|
||||
avatarText="Trusted by 10,000+ collectors"
|
||||
buttons={[
|
||||
{ text: "Browse Marketplace", href: "#catalog" },
|
||||
{ text: "Start Earning", href: "#pricing" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Fair Pack Unpacking" },
|
||||
{ type: "text", text: "Collection Profit Share" },
|
||||
{ type: "text", text: "Transparent Ownership" },
|
||||
{ type: "text", text: "Community Driven Yields" },
|
||||
{ type: "text", text: "Safe Asset Exchange" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="The Future of TCG Ownership"
|
||||
description="Build a sustainable revenue-generating collection with our automated trading platform. Own, trade, and earn perpetual royalties."
|
||||
background={{ variant: "plain" }}
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022647.jpg" },
|
||||
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-redhead-lady_23-2148339146.jpg" },
|
||||
{ id: "3", imageSrc: "http://img.b2bpic.net/joyful-young-brunette-caucasian-girl-isolated-olive-green-wall-with-copy-space_141793-118993.jpg" },
|
||||
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg" },
|
||||
{ id: "5", imageSrc: "http://img.b2bpic.net/young-man-wearing-blue-outfit-looking-happy_1298-197.jpg" },
|
||||
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-businessman-looking-camera_23-2147839978.jpg" }
|
||||
]}
|
||||
buttons={[{ text: "Explore Market" }, { text: "Learn How" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyNine
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Fair Marketplace", description: "Buy and sell packs with complete ownership rights.", imageSrc: "", titleImageSrc: "", buttonText: "Learn More" },
|
||||
{ title: "Unpack & Earn", description: "Unpack digital packs for rare finds and trade them instantly.", imageSrc: "", titleImageSrc: "", buttonText: "Unpack Now" },
|
||||
{ title: "Percentage Earnings", description: "Owners earn a recurring percentage on all pack secondary market volume.", imageSrc: "", titleImageSrc: "", buttonText: "View Analytics" }
|
||||
]}
|
||||
title="Core Marketplace Mechanics"
|
||||
description="Designed to ensure fair distribution and sustainable earnings for all collectors."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySeven
|
||||
title="Marketplace Mechanics"
|
||||
description="Engineered for transparency and sustained liquidity."
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "1", title: "Fair Distribution", descriptions: ["On-chain verification for every pack."], imageSrc: "http://img.b2bpic.net/free-photo/anime-casino-illustration_23-2151726801.jpg?_wi=1" },
|
||||
{ id: "2", title: "Perpetual Yield", descriptions: ["5% royalties on all secondary sales."], imageSrc: "http://img.b2bpic.net/free-photo/lord-thorns-fire-illustration_23-2152031271.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="catalog" data-section="catalog">
|
||||
<ProductCatalog
|
||||
layout="section"
|
||||
products={[
|
||||
{ id: "p1", name: "Dragon Pack", price: "$49.99", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/five-clubs-pink-background_23-2148952307.jpg" },
|
||||
{ id: "p2", name: "Wizard Pack", price: "$39.99", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/anime-casino-illustration_23-2151726817.jpg" },
|
||||
{ id: "p3", name: "Mythic Starter", price: "$19.99", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/mexican-traditional-cards-game_23-2150558636.jpg" },
|
||||
{ id: "p4", name: "Electric Pack", price: "$29.99", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/anime-casino-illustration_23-2151726801.jpg" },
|
||||
{ id: "p5", name: "Inferno Pack", price: "$59.99", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/lord-thorns-fire-illustration_23-2152031271.jpg" },
|
||||
{ id: "p6", name: "Chaos Pack", price: "$89.99", rating: 4, imageSrc: "http://img.b2b-pic.net/free-vector/hand-drawn-playing-card-back-design-illustration_23-2151080553.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="catalog" data-section="catalog">
|
||||
<ProductCardTwo
|
||||
title="Live Catalog"
|
||||
description="Explore current pack offerings from top tiers."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", brand: "Pokemon", name: "Booster Pack", price: "$49", rating: 5, reviewCount: "200", imageSrc: "https://upload.wikimedia.org/wikipedia/commons/9/98/International_Pok%C3%A9mon_logo.svg?_wi=2" },
|
||||
{ id: "p2", brand: "Yu-Gi-Oh", name: "Legendary Deck", price: "$39", rating: 4, reviewCount: "150", imageSrc: "https://upload.wikimedia.org/wikipedia/commons/1/11/Yu-Gi-Oh%21_Logo.svg?_wi=2" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "collector", badge: "Collector", price: "Free", subtitle: "Access to buy & sell", features: ["Standard marketplace access", "Trading fees included"] },
|
||||
{ id: "owner", badge: "Owner", price: "$99", subtitle: "One-time $99 to earn on all pack volume", features: ["5% Secondary market revenue", "Priority Unpacking", "Governance access"] }
|
||||
]}
|
||||
title="Ownership Tier"
|
||||
description="Join the owner network to earn perpetual percentages on pack sales."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
title="Ownership Tiers"
|
||||
description="Unlock the true potential of your collection."
|
||||
textboxLayout="split"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "tier1", tag: "Standard", price: "Free", period: "/ mo", description: "Casual collectors.", button: { text: "Join" }, featuresTitle: "Core Features", features: ["Access Marketplace", "Standard Trading"] },
|
||||
{ id: "tier2", tag: "Pro", price: "$99", period: "/ yr", description: "Professional traders.", button: { text: "Upgrade" }, featuresTitle: "Pro Features", features: ["5% Royalties", "Priority Unpacking"] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "100%", title: "Fair Distribution", items: ["Blockchain verified", "No supply manipulation"] },
|
||||
{ id: "m2", value: "5%", title: "Owner Royalties", items: ["Perpetual earnings", "Automated payouts"] },
|
||||
{ id: "m3", value: "Instant", title: "Liquid Exchange", items: ["Real-time settlement", "Safe trading"] }
|
||||
]}
|
||||
title="Market Health"
|
||||
description="Transparency on our marketplace sustainability."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
title="Market Health"
|
||||
description="Real-time data on protocol performance."
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: ShieldCheck, title: "Verified", value: "100%" },
|
||||
{ id: "m2", icon: BarChart3, title: "Yields", value: "5%" },
|
||||
{ id: "m3", icon: Zap, title: "Speed", value: "Instant" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", title: "Amazing Earnings", quote: "I started as a collector, now as an owner I earn commissions on every pack sold.", name: "Alex R.", role: "Market Owner", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-businessman-looking-camera_23-2147839978.jpg" },
|
||||
{ id: "t2", title: "Transparent Fair Play", quote: "The transparency here makes trading feel genuinely secure and fair.", name: "Sarah J.", role: "Verified Collector", imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg" },
|
||||
{ id: "t3", title: "Consistent Yields", quote: "Ownership is where it's at. Perpetual passive income from pack volume is real.", name: "Mike B.", role: "Collector", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-taking-selfie-photo-winking_1262-18343.jpg" }
|
||||
]}
|
||||
title="Collector Stories"
|
||||
description="Join a growing community of fair-trade advocates."
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Get quick answers about our protocol."
|
||||
faqs={[
|
||||
{ id: "q1", title: "How do royalties work?", content: "Royalties are triggered automatically by smart contracts on every trade." },
|
||||
{ id: "q2", title: "Is it safe?", content: "Yes, all trades are settled on-chain with full transparency." }
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How is pack unpacking fairness ensured?", content: "Our unpacking algorithm is verifiable on-chain to guarantee truly random outcomes for every pack purchased." },
|
||||
{ id: "q2", title: "How do I earn owner royalties?", content: "By purchasing an Owner membership, your wallet is automatically added to the protocol treasury to receive a % split of all pack purchase volume." },
|
||||
{ id: "q3", title: "Are my collection assets mine?", content: "Absolutely. Every card you pull or purchase is backed by your wallet and can be traded or liquidated on any supported platform." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/pleased-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-showing-empty-hand-pointing-it-isolated-white-background_141793-84116.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about trading fairly."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Join Us"
|
||||
title="Ready to Start Trading?"
|
||||
description="Sign up today to join our elite network of collectors and earn while you collect."
|
||||
buttons={[{ text: "Get Started" }]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
tag="Contact Us"
|
||||
title="Start Your Collection Today"
|
||||
description="Sign up for the marketplace to access exclusive packs and owner opportunities. We respond to all inquiries within 24 hours."
|
||||
buttonText="Sign Up Now"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="CardTrader"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
logoText="CardTrader"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/anime-casino-illustration_23-2151726801.jpg?_wi=2"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Help", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user