Compare commits
42 Commits
version_2
...
version_20
| Author | SHA1 | Date | |
|---|---|---|---|
| 66456a4aae | |||
| 96b257cde5 | |||
| 63d1c62b61 | |||
| ddd733ce86 | |||
| 327faef190 | |||
| fbe36be90e | |||
| 10e4d143ee | |||
| be10f4c0ce | |||
| b00e8b4169 | |||
| c2cd412dd9 | |||
| 5ce0c8191e | |||
| f0edd58f06 | |||
| 001de9af28 | |||
| 131a828249 | |||
| e19cb53262 | |||
| 9da606acf5 | |||
| 68445afb1c | |||
| ccf84dec20 | |||
| d7e55e31b7 | |||
| 92026d7d56 | |||
| 0b931a0b18 | |||
| a7cb173c45 | |||
| 73dc589616 | |||
| 34d8751100 | |||
| 8e4a748fdf | |||
| 038b34e3c0 | |||
| 440dba8653 | |||
| bdec6220fe | |||
| cb0c76737b | |||
| 498ae21c4a | |||
| 575193e3cd | |||
| 70d36d0022 | |||
| 9ed5535397 | |||
| 26ebf1507d | |||
| 74fc6e2f69 | |||
| 3cb46b43c9 | |||
| b1add87fd6 | |||
| ae46f5d1f8 | |||
| 9e518ae2a7 | |||
| 318f5ab821 | |||
| 570cb7f08a | |||
| 9e454c4873 |
@@ -4,7 +4,6 @@ import { Inter } from "next/font/google";
|
|||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import "@/lib/gsap-setup";
|
import "@/lib/gsap-setup";
|
||||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||||
import Tag from "@/tag/Tag";
|
|
||||||
import { getVisualEditScript } from "@/utils/visual-edit-script";
|
import { getVisualEditScript } from "@/utils/visual-edit-script";
|
||||||
import { Raleway } from "next/font/google";
|
import { Raleway } from "next/font/google";
|
||||||
|
|
||||||
@@ -34,7 +33,7 @@ export default function RootLayout({
|
|||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en" suppressHydrationWarning>
|
||||||
<ServiceWrapper>
|
<ServiceWrapper>
|
||||||
<body className={`${raleway.variable} antialiased`}>
|
<body className={`${raleway.variable} antialiased`}>
|
||||||
<Tag />
|
|
||||||
{children}
|
{children}
|
||||||
<script
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
|
|||||||
301
src/app/page.tsx
301
src/app/page.tsx
@@ -2,194 +2,153 @@
|
|||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import ReactLenis from "lenis/react";
|
import ReactLenis from "lenis/react";
|
||||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
import { Sparkles, BarChart3, ShieldCheck, Zap } from "lucide-react";
|
||||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||||
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||||
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="hover-bubble"
|
defaultButtonVariant="hover-magnetic"
|
||||||
defaultTextAnimation="reveal-blur"
|
defaultTextAnimation="reveal-blur"
|
||||||
borderRadius="rounded"
|
borderRadius="pill"
|
||||||
contentWidth="medium"
|
contentWidth="mediumLarge"
|
||||||
sizing="medium"
|
sizing="largeSizeMediumTitles"
|
||||||
background="circleGradient"
|
background="noise"
|
||||||
cardStyle="glass-elevated"
|
cardStyle="glass-elevated"
|
||||||
primaryButtonStyle="gradient"
|
primaryButtonStyle="primary-glow"
|
||||||
secondaryButtonStyle="glass"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="normal"
|
headingFontWeight="bold"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleCentered
|
<NavbarLayoutFloatingInline
|
||||||
navItems={[
|
brandName="CardTrader"
|
||||||
{ name: "Home", id: "hero" },
|
navItems={[
|
||||||
{ name: "Products", id: "catalog" },
|
{ name: "Marketplace", id: "catalog" },
|
||||||
{ name: "Pricing", id: "pricing" },
|
{ name: "Ownership", id: "pricing" },
|
||||||
{ name: "Support", id: "faq" },
|
{ name: "FAQ", id: "faq" },
|
||||||
]}
|
]}
|
||||||
brandName="CardTrader"
|
button={{ text: "Sign Up" }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroCentered
|
<HeroBillboardRotatedCarousel
|
||||||
background={{ variant: "gradient-bars" }}
|
title="The Future of TCG Ownership"
|
||||||
title="The Automated Marketplace for TCG Enthusiasts"
|
description="Build a sustainable revenue-generating collection with our automated trading platform. Own, trade, and earn perpetual royalties."
|
||||||
description="Buy, sell, and manage your card game collection with fully automated pricing, secure transactions, and instant settlement."
|
background={{ variant: "plain" }}
|
||||||
avatars={[
|
carouselItems={[
|
||||||
{ src: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022647.jpg", alt: "User 1" },
|
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022647.jpg" },
|
||||||
{ src: "http://img.b2bpic.net/free-photo/portrait-beautiful-redhead-lady_23-2148339146.jpg", alt: "User 2" },
|
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-redhead-lady_23-2148339146.jpg" },
|
||||||
{ 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" },
|
{ id: "3", imageSrc: "http://img.b2bpic.net/joyful-young-brunette-caucasian-girl-isolated-olive-green-wall-with-copy-space_141793-118993.jpg" },
|
||||||
{ src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", alt: "User 4" },
|
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg" },
|
||||||
{ src: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-happy_1298-197.jpg", alt: "User 5" }
|
{ 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" }
|
||||||
avatarText="Trusted by 10,000+ traders"
|
]}
|
||||||
buttons={[
|
buttons={[{ text: "Explore Market" }, { text: "Learn How" }]}
|
||||||
{ text: "Start Trading", href: "#catalog" },
|
/>
|
||||||
{ text: "Learn More", href: "#features" }
|
</div>
|
||||||
]}
|
|
||||||
buttonAnimation="slide-up"
|
|
||||||
marqueeItems={[
|
|
||||||
{ type: "text", text: "Instant Market Data" },
|
|
||||||
{ type: "text", text: "Secure Escrow" },
|
|
||||||
{ type: "text", text: "Global Logistics" },
|
|
||||||
{ type: "text", text: "24/7 Trading" },
|
|
||||||
{ type: "text", text: "Community Driven" }
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="features" data-section="features">
|
<div id="features" data-section="features">
|
||||||
<FeatureCardTwentyEight
|
<FeatureCardTwentySeven
|
||||||
animationType="slide-up"
|
title="Marketplace Mechanics"
|
||||||
textboxLayout="split"
|
description="Engineered for transparency and sustained liquidity."
|
||||||
useInvertedBackground={false}
|
animationType="slide-up"
|
||||||
features={[
|
textboxLayout="split"
|
||||||
{ id: "f1", title: "Automated Pricing", subtitle: "Maximize your profits with instant market updates", category: "Technology", value: "99.9%" },
|
useInvertedBackground={false}
|
||||||
{ id: "f2", title: "Secure Escrow", subtitle: "Protect your assets with safety for every trade", category: "Security", value: "100%" },
|
features={[
|
||||||
{ id: "f3", title: "Fast Fulfillment", subtitle: "Scale your reach with global shipping integrated", category: "Operations", value: "24h" }
|
{ 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" }
|
||||||
title="Why CardTrader?"
|
]}
|
||||||
description="Our platform simplifies your trading journey with advanced automation."
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="catalog" data-section="catalog">
|
<div id="catalog" data-section="catalog">
|
||||||
<ProductCatalog
|
<ProductCardTwo
|
||||||
layout="section"
|
title="Live Catalog"
|
||||||
products={[
|
description="Explore current pack offerings from top tiers."
|
||||||
{ id: "p1", name: "Charizard Holo", price: "$120.00", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/five-clubs-pink-background_23-2148952307.jpg" },
|
animationType="slide-up"
|
||||||
{ id: "p2", name: "Dark Magician", price: "$85.00", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/anime-casino-illustration_23-2151726817.jpg" },
|
textboxLayout="default"
|
||||||
{ id: "p3", name: "Blue-Eyes White Dragon", price: "$95.00", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/mexican-traditional-cards-game_23-2150558636.jpg" },
|
gridVariant="bento-grid"
|
||||||
{ id: "p4", name: "Pikachu Rare", price: "$45.00", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/anime-casino-illustration_23-2151726801.jpg" },
|
useInvertedBackground={false}
|
||||||
{ id: "p5", name: "Red-Eyes B. Dragon", price: "$70.00", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/lord-thorns-fire-illustration_23-2152031271.jpg" },
|
products={[
|
||||||
{ id: "p6", name: "Magician of Black Chaos", price: "$110.00", rating: 4, imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-playing-card-back-design-illustration_23-2151080553.jpg" }
|
{ 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>
|
||||||
|
|
||||||
<div id="pricing" data-section="pricing">
|
<div id="pricing" data-section="pricing">
|
||||||
<PricingCardEight
|
<PricingCardFive
|
||||||
animationType="slide-up"
|
title="Ownership Tiers"
|
||||||
textboxLayout="split"
|
description="Unlock the true potential of your collection."
|
||||||
useInvertedBackground={false}
|
textboxLayout="split"
|
||||||
plans={[
|
animationType="slide-up"
|
||||||
{ id: "starter", badge: "Basic", price: "$0/mo", subtitle: "Get started for free", buttons: [{ text: "Join Free" }], features: ["Market Analytics", "Up to 5 listings"] },
|
useInvertedBackground={false}
|
||||||
{ id: "pro", badge: "Pro", price: "$29/mo", subtitle: "Best for collectors", buttons: [{ text: "Get Pro" }], features: ["Unlimited Listings", "Advanced Price Alerts", "VIP Support"] }
|
plans={[
|
||||||
]}
|
{ id: "tier1", tag: "Standard", price: "Free", period: "/ mo", description: "Casual collectors.", button: { text: "Join" }, featuresTitle: "Core Features", features: ["Access Marketplace", "Standard Trading"] },
|
||||||
title="Membership Plans"
|
{ id: "tier2", tag: "Pro", price: "$99", period: "/ yr", description: "Professional traders.", button: { text: "Upgrade" }, featuresTitle: "Pro Features", features: ["5% Royalties", "Priority Unpacking"] }
|
||||||
description="Choose the best plan for your trading strategy."
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="metrics" data-section="metrics">
|
<div id="metrics" data-section="metrics">
|
||||||
<MetricCardSeven
|
<MetricCardThree
|
||||||
animationType="slide-up"
|
title="Market Health"
|
||||||
textboxLayout="split"
|
description="Real-time data on protocol performance."
|
||||||
useInvertedBackground={false}
|
animationType="slide-up"
|
||||||
metrics={[
|
textboxLayout="split"
|
||||||
{ id: "m1", value: "50K+", title: "Active Traders", items: ["Global community", "100+ countries"] },
|
useInvertedBackground={false}
|
||||||
{ id: "m2", value: "$5M+", title: "Trades Processed", items: ["Trusted security", "Instant settlement"] },
|
metrics={[
|
||||||
{ id: "m3", value: "98%", title: "Satisfaction Rate", items: ["Dedicated support", "User focused"] }
|
{ id: "m1", icon: ShieldCheck, title: "Verified", value: "100%" },
|
||||||
]}
|
{ id: "m2", icon: BarChart3, title: "Yields", value: "5%" },
|
||||||
title="Platform Impact"
|
{ id: "m3", icon: Zap, title: "Speed", value: "Instant" }
|
||||||
description="Evidence of a growing, active trading community."
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="faq" data-section="faq">
|
||||||
<TestimonialCardTen
|
<FaqSplitText
|
||||||
textboxLayout="split"
|
sideTitle="Frequently Asked Questions"
|
||||||
useInvertedBackground={false}
|
sideDescription="Get quick answers about our protocol."
|
||||||
testimonials={[
|
faqs={[
|
||||||
{ id: "t1", title: "Excellent Service", quote: "The automation here is incredible.", name: "Alex R.", role: "Collector", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-businessman-looking-camera_23-2147839978.jpg" },
|
{ id: "q1", title: "How do royalties work?", content: "Royalties are triggered automatically by smart contracts on every trade." },
|
||||||
{ id: "t2", title: "Safe Transactions", quote: "I feel very safe trading high value items.", name: "Sarah J.", role: "Trader", imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg" },
|
{ id: "q2", title: "Is it safe?", content: "Yes, all trades are settled on-chain with full transparency." }
|
||||||
{ id: "t3", title: "Market Insights", quote: "The pricing data is always spot on.", name: "Mike B.", role: "Investor", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-taking-selfie-photo-winking_1262-18343.jpg" },
|
]}
|
||||||
{ id: "t4", title: "Easy to Use", quote: "Setting up my store took five minutes.", name: "David W.", role: "Seller", imageSrc: "http://img.b2bpic.net/free-photo/head-shot-happy-beautiful-young-woman-posing-indoors-looking-camera-smiling_74855-10218.jpg" },
|
faqsAnimation="slide-up"
|
||||||
{ id: "t5", title: "Community Focus", quote: "Best support team I've ever encountered.", name: "Emily K.", role: "Collector", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-talking-phone_23-2148230757.jpg" }
|
useInvertedBackground={false}
|
||||||
]}
|
/>
|
||||||
title="Trader Success Stories"
|
</div>
|
||||||
description="See why our community loves CardTrader."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="faq" data-section="faq">
|
<div id="contact" data-section="contact">
|
||||||
<FaqSplitMedia
|
<ContactCTA
|
||||||
textboxLayout="split"
|
tag="Join Us"
|
||||||
useInvertedBackground={false}
|
title="Ready to Start Trading?"
|
||||||
faqs={[
|
description="Sign up today to join our elite network of collectors and earn while you collect."
|
||||||
{ id: "q1", title: "Is selling automated?", content: "Yes, our system handles price listing and security checks automatically." },
|
buttons={[{ text: "Get Started" }]}
|
||||||
{ id: "q2", title: "Are trades secure?", content: "Every trade is secured by our smart escrow system." },
|
background={{ variant: "plain" }}
|
||||||
{ id: "q3", title: "Can I buy cards globally?", content: "Yes, we ship to over 100 countries worldwide." }
|
useInvertedBackground={false}
|
||||||
]}
|
/>
|
||||||
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"
|
</div>
|
||||||
mediaAnimation="slide-up"
|
|
||||||
title="Frequently Asked Questions"
|
|
||||||
description="Find answers to common questions about CardTrader."
|
|
||||||
faqsAnimation="slide-up"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="footer" data-section="footer">
|
||||||
<ContactSplit
|
<FooterMedia
|
||||||
useInvertedBackground={false}
|
logoText="CardTrader"
|
||||||
background={{ variant: "plain" }}
|
imageSrc="http://img.b2bpic.net/free-photo/anime-casino-illustration_23-2151726801.jpg?_wi=2"
|
||||||
tag="Contact Us"
|
columns={[
|
||||||
title="Join the Revolution"
|
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
|
||||||
description="Register today to start trading your favorite cards."
|
{ title: "Support", items: [{ label: "Help", href: "#" }, { label: "Terms", href: "#" }] }
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/corporate-data-management_53876-89018.jpg"
|
]}
|
||||||
mediaAnimation="slide-up"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
|
||||||
<FooterBase
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
title: "Platform", items: [
|
|
||||||
{ label: "Features", href: "#features" },
|
|
||||||
{ label: "Pricing", href: "#pricing" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Company", items: [
|
|
||||||
{ label: "About", href: "#" },
|
|
||||||
{ label: "Support", href: "#faq" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
logoText="CardTrader"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user