Merge version_2_1781370411909 into main

Merge version_2_1781370411909 into main
This commit was merged in pull request #2.
This commit is contained in:
2026-06-13 17:08:39 +00:00
10 changed files with 395 additions and 253 deletions

View File

@@ -1,265 +1,38 @@
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
import ContactCta from '@/components/sections/contact/ContactCta';
import FaqSimple from '@/components/sections/faq/FaqSimple';
import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
import { ArrowRight, ShieldCheck, Star, Target, UserPlus } from "lucide-react";
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
// AUTO-GENERATED shell by per-section-migrate.
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
// files directly. Non-block content (wrappers, non-inlinable sections) is
// preserved inline; extracted section blocks become <XSection/> refs.
export default function HomePage() {
import React from 'react';
import HeroSection from './HomePage/sections/Hero';
import FeaturesSection from './HomePage/sections/Features';
import HowItWorksSection from './HomePage/sections/HowItWorks';
import ShowcaseSection from './HomePage/sections/Showcase';
import StatsSection from './HomePage/sections/Stats';
import TestimonialsSection from './HomePage/sections/Testimonials';
import FaqSection from './HomePage/sections/Faq';
import CtaSection from './HomePage/sections/Cta';
import ScrollFxSection from './HomePage/sections/ScrollFx';export default function HomePage(): React.JSX.Element {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroOverlayMarquee
tag="Powered by AI Matchmaking"
title="Find Your Perfect Gaming Duo"
description="Swipe, Match and Play with teammates who match your skill level."
primaryButton={{
text: "Download App",
href: "#",
}}
secondaryButton={{
text: "See How",
href: "#how-it-works",
}}
items={[
{
text: "League of Legends",
icon: Star,
},
{
text: "Valorant",
icon: Target,
},
{
text: "CS2",
icon: ShieldCheck,
},
]}
imageSrc="http://img.b2bpic.net/free-photo/bermuda-triangle-mystery-event_23-2151625845.jpg"
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesRevealCards
tag="Core Features"
title="Built for High Performance"
description="Unlock seamless competitive play with our precision-engineered tools."
items={[
{
title: "Precision Matchmaking",
description: "AI-driven skill analysis ensures your teammates are actually good.",
imageSrc: "http://img.b2bpic.net/free-vector/futuristic-technology-infographic_52683-34984.jpg",
},
{
title: "Social Discovery",
description: "Find lifelong gaming buddies beyond just the win/loss record.",
imageSrc: "http://img.b2bpic.net/free-photo/hashtag-sign-alphabet-light-illustration_181624-56491.jpg",
},
{
title: "Rank Verification",
description: "Verify your true competitive potential with real-time stat tracking.",
imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151205011.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<FeaturesSection />
<div id="how-it-works" data-section="how-it-works">
<SectionErrorBoundary name="how-it-works">
<AboutFeaturesSplit
tag="Simplified Workflow"
title="Three Steps to Glory"
description="Stop grinding solo queues. Join the movement."
items={[
{
icon: UserPlus,
title: "Create Profile",
description: "Sync your game account to see your real stats.",
},
{
icon: ArrowRight,
title: "Find Duo",
description: "Swipe through profiles designed to fit your unique playstyle.",
},
{
icon: Star,
title: "Get Gaming",
description: "Hop into a lobby and crush the competition together.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671596.jpg"
/>
</SectionErrorBoundary>
</div>
<HowItWorksSection />
<div id="showcase" data-section="showcase">
<SectionErrorBoundary name="showcase">
<FeaturesRevealCardsBento
tag="Platform UI"
title="Beautifully Engineered"
description="A dark-mode interface designed for high-focus gameplay."
items={[
{
title: "Stats Hub",
description: "Deep data at a glance.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-vector/professional-infographic-futuristic-design_23-2148459160.jpg",
},
{
title: "Match History",
description: "Learn from every match.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/view-human-hands-showing-gestures_52683-104985.jpg",
},
{
title: "Team Voice",
description: "Clear comms, better play.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/view-city-night-with-neon-lights_23-2150840805.jpg",
},
{
title: "Duo Finder",
description: "Match in seconds.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-vector/futuristic-inforgraphic-element-collection_52683-26044.jpg",
},
{
title: "Reward Store",
description: "Earn while you climb.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/network-concept-with-colorful-dots_23-2148999202.jpg",
},
{
title: "Global Rankings",
description: "See where you stand.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-vector/modern-infographic-element-collection_52683-1778.jpg",
},
{
title: "Settings",
description: "Custom control.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-sale_23-2152027241.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<ShowcaseSection />
<div id="stats" data-section="stats">
<SectionErrorBoundary name="stats">
<MetricsSimpleCards
tag="Impact"
title="Gamers Trust Us"
description="Join 500,000+ players already finding their perfect match."
metrics={[
{
value: "500K+",
description: "Active Registered Gamers",
},
{
value: "2M+",
description: "Matches Completed",
},
{
value: "94%",
description: "Duo Satisfaction Rate",
},
]}
/>
</SectionErrorBoundary>
</div>
<StatsSection />
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialMarqueeCards
tag="Testimonials"
title="Don't Just Take Our Word"
description="Hear from players who found their perfect squad."
testimonials={[
{
name: "Alex R.",
role: "Pro Player",
quote: "I finally found teammates who don't just int in my ranked games.",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-winning-videogame_23-2149349988.jpg",
},
{
name: "Jamie P.",
role: "Casual Gamer",
quote: "The swipe system is incredibly fast. I'm playing twice as much.",
imageSrc: "http://img.b2bpic.net/free-photo/black-remote-worker-enjoying-flexibility-comfort-while-browsing-online_482257-118982.jpg",
},
{
name: "Sarah K.",
role: "Competitive",
quote: "Clean UI and great matchmaking speed. A must-have for Valorant.",
imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419465.jpg",
},
{
name: "Marcus L.",
role: "Hardcore",
quote: "The stats integration is perfect. Exactly what I needed.",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-viewer-changing-channels-television-set-with-remote-control_482257-92306.jpg",
},
{
name: "Emily D.",
role: "Squad Lead",
quote: "Our whole squad met here. Incredible platform.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-earphones-dark-haired-man-casual-clothes-looking-camera-portrait-concept_74855-24635.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<TestimonialsSection />
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqSimple
tag="Help"
title="Frequently Asked Questions"
description="Everything you need to know about the platform."
items={[
{
question: "Is Duom Cepte free?",
answer: "Yes, it is free to find your duos.",
},
{
question: "Which games are supported?",
answer: "We support League of Legends, Valorant, CS2, and Apex Legends.",
},
{
question: "How do you verify skills?",
answer: "We integrate directly with official game APIs.",
},
]}
/>
</SectionErrorBoundary>
</div>
<FaqSection />
<div id="cta" data-section="cta">
<SectionErrorBoundary name="cta">
<ContactCta
tag="Final Step"
text="Ready to climb the ladder with the perfect partner?"
primaryButton={{
text: "Download for Free",
href: "#",
}}
secondaryButton={{
text: "Join Discord",
href: "#",
}}
/>
</SectionErrorBoundary>
</div>
<CtaSection />
<ScrollFxSection />
</>
);
}

View File

@@ -0,0 +1,27 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "cta" section.
import React from 'react';
import ContactCta from '@/components/sections/contact/ContactCta';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function CtaSection(): React.JSX.Element {
return (
<div id="cta" data-section="cta">
<SectionErrorBoundary name="cta">
<ContactCta
tag="Final Step"
text="Ready to climb the ladder with the perfect partner?"
primaryButton={{
text: "Download for Free",
href: "#",
}}
secondaryButton={{
text: "Join Discord",
href: "#",
}}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,34 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "faq" section.
import React from 'react';
import FaqSimple from '@/components/sections/faq/FaqSimple';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FaqSection(): React.JSX.Element {
return (
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqSimple
tag="Help"
title="Frequently Asked Questions"
description="Everything you need to know about the platform."
items={[
{
question: "Is Duom Cepte free?",
answer: "Yes, it is free to find your duos.",
},
{
question: "Which games are supported?",
answer: "We support League of Legends, Valorant, CS2, and Apex Legends.",
},
{
question: "How do you verify skills?",
answer: "We integrate directly with official game APIs.",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,37 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "features" section.
import React from 'react';
import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FeaturesSection(): React.JSX.Element {
return (
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesRevealCards
tag="Core Features"
title="Built for High Performance"
description="Unlock seamless competitive play with our precision-engineered tools."
items={[
{
title: "Precision Matchmaking",
description: "AI-driven skill analysis ensures your teammates are actually good.",
imageSrc: "http://img.b2bpic.net/free-vector/futuristic-technology-infographic_52683-34984.jpg",
},
{
title: "Social Discovery",
description: "Find lifelong gaming buddies beyond just the win/loss record.",
imageSrc: "http://img.b2bpic.net/free-photo/hashtag-sign-alphabet-light-illustration_181624-56491.jpg",
},
{
title: "Rank Verification",
description: "Verify your true competitive potential with real-time stat tracking.",
imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151205011.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,44 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "hero" section.
import React from 'react';
import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
import { ArrowRight, ShieldCheck, Star, Target, UserPlus } from "lucide-react";
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HeroSection(): React.JSX.Element {
return (
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroOverlayMarquee
tag="Powered by AI Matchmaking"
title="Find Your Perfect Gaming Duo"
description="Swipe, Match and Play with teammates who match your skill level."
primaryButton={{
text: "Download App",
href: "#",
}}
secondaryButton={{
text: "See How",
href: "#how-it-works",
}}
items={[
{
text: "League of Legends",
icon: Star,
},
{
text: "Valorant",
icon: Target,
},
{
text: "CS2",
icon: ShieldCheck,
},
]}
imageSrc="http://img.b2bpic.net/free-photo/bermuda-triangle-mystery-event_23-2151625845.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,39 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "how-it-works" section.
import React from 'react';
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
import { ArrowRight, ShieldCheck, Star, Target, UserPlus } from "lucide-react";
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HowItWorksSection(): React.JSX.Element {
return (
<div id="how-it-works" data-section="how-it-works">
<SectionErrorBoundary name="how-it-works">
<AboutFeaturesSplit
tag="Simplified Workflow"
title="Three Steps to Glory"
description="Stop grinding solo queues. Join the movement."
items={[
{
icon: UserPlus,
title: "Create Profile",
description: "Sync your game account to see your real stats.",
},
{
icon: ArrowRight,
title: "Find Duo",
description: "Swipe through profiles designed to fit your unique playstyle.",
},
{
icon: Star,
title: "Get Gaming",
description: "Hop into a lobby and crush the competition together.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671596.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,38 @@
import { motion, useScroll, useTransform, useSpring } from "motion/react";
export default function ScrollFx() {
const { scrollYProgress } = useScroll();
const smoothProgress = useSpring(scrollYProgress, { damping: 20, stiffness: 100 });
// Flashes
const flash1 = useTransform(smoothProgress, [0.05, 0.1, 0.15], [0, 0.8, 0]);
const flash2 = useTransform(smoothProgress, [0.25, 0.3, 0.35], [0, 0.8, 0]);
const flash3 = useTransform(smoothProgress, [0.45, 0.5, 0.55], [0, 0.8, 0]);
const flash4 = useTransform(smoothProgress, [0.65, 0.7, 0.75], [0, 0.8, 0]);
const flash5 = useTransform(smoothProgress, [0.85, 0.9, 0.95], [0, 0.8, 0]);
// Projectiles (falling down)
const p1 = useTransform(smoothProgress, [0.05, 0.15], ["-20%", "120%"]);
const p2 = useTransform(smoothProgress, [0.25, 0.35], ["-20%", "120%"]);
const p3 = useTransform(smoothProgress, [0.45, 0.55], ["-20%", "120%"]);
const p4 = useTransform(smoothProgress, [0.65, 0.75], ["-20%", "120%"]);
const p5 = useTransform(smoothProgress, [0.85, 0.95], ["-20%", "120%"]);
return (
<div data-webild-section="scroll-fx" className="fixed inset-0 pointer-events-none z-[100] overflow-hidden">
{/* Flashes */}
<motion.div style={{ opacity: flash1 }} className="absolute top-[10%] left-[15%] w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-primary-cta rounded-full blur-[120px] mix-blend-screen" />
<motion.div style={{ opacity: flash2 }} className="absolute top-[30%] right-[10%] w-[50vw] h-[50vw] max-w-[600px] max-h-[600px] bg-accent rounded-full blur-[150px] mix-blend-screen" />
<motion.div style={{ opacity: flash3 }} className="absolute top-[50%] left-[20%] w-[35vw] h-[35vw] max-w-[400px] max-h-[400px] bg-primary-cta rounded-full blur-[100px] mix-blend-screen" />
<motion.div style={{ opacity: flash4 }} className="absolute top-[70%] right-[25%] w-[45vw] h-[45vw] max-w-[550px] max-h-[550px] bg-accent rounded-full blur-[130px] mix-blend-screen" />
<motion.div style={{ opacity: flash5 }} className="absolute top-[90%] left-[10%] w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-primary-cta rounded-full blur-[120px] mix-blend-screen" />
{/* Projectiles */}
<motion.div style={{ top: p1 }} className="absolute left-[15%] w-[2px] h-[20vh] bg-gradient-to-b from-transparent via-white to-white shadow-[0_0_15px_3px_rgba(255,255,255,0.8)]" />
<motion.div style={{ top: p2 }} className="absolute right-[10%] w-[3px] h-[25vh] bg-gradient-to-b from-transparent via-white to-white shadow-[0_0_20px_4px_rgba(200,155,255,0.8)]" />
<motion.div style={{ top: p3 }} className="absolute left-[20%] w-[2px] h-[15vh] bg-gradient-to-b from-transparent via-white to-white shadow-[0_0_15px_3px_rgba(255,255,255,0.8)]" />
<motion.div style={{ top: p4 }} className="absolute right-[25%] w-[4px] h-[30vh] bg-gradient-to-b from-transparent via-white to-white shadow-[0_0_25px_5px_rgba(200,155,255,0.9)]" />
<motion.div style={{ top: p5 }} className="absolute left-[10%] w-[2px] h-[20vh] bg-gradient-to-b from-transparent via-white to-white shadow-[0_0_15px_3px_rgba(255,255,255,0.8)]" />
</div>
);
}

View File

@@ -0,0 +1,64 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "showcase" section.
import React from 'react';
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ShowcaseSection(): React.JSX.Element {
return (
<div id="showcase" data-section="showcase">
<SectionErrorBoundary name="showcase">
<FeaturesRevealCardsBento
tag="Platform UI"
title="Beautifully Engineered"
description="A dark-mode interface designed for high-focus gameplay."
items={[
{
title: "Stats Hub",
description: "Deep data at a glance.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-vector/professional-infographic-futuristic-design_23-2148459160.jpg",
},
{
title: "Match History",
description: "Learn from every match.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/view-human-hands-showing-gestures_52683-104985.jpg",
},
{
title: "Team Voice",
description: "Clear comms, better play.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/view-city-night-with-neon-lights_23-2150840805.jpg",
},
{
title: "Duo Finder",
description: "Match in seconds.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-vector/futuristic-inforgraphic-element-collection_52683-26044.jpg",
},
{
title: "Reward Store",
description: "Earn while you climb.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/network-concept-with-colorful-dots_23-2148999202.jpg",
},
{
title: "Global Rankings",
description: "See where you stand.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-vector/modern-infographic-element-collection_52683-1778.jpg",
},
{
title: "Settings",
description: "Custom control.",
href: "#",
imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-sale_23-2152027241.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,34 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "stats" section.
import React from 'react';
import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function StatsSection(): React.JSX.Element {
return (
<div id="stats" data-section="stats">
<SectionErrorBoundary name="stats">
<MetricsSimpleCards
tag="Impact"
title="Gamers Trust Us"
description="Join 500,000+ players already finding their perfect match."
metrics={[
{
value: "500K+",
description: "Active Registered Gamers",
},
{
value: "2M+",
description: "Matches Completed",
},
{
value: "94%",
description: "Duo Satisfaction Rate",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,52 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "testimonials" section.
import React from 'react';
import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TestimonialsSection(): React.JSX.Element {
return (
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialMarqueeCards
tag="Testimonials"
title="Don't Just Take Our Word"
description="Hear from players who found their perfect squad."
testimonials={[
{
name: "Alex R.",
role: "Pro Player",
quote: "I finally found teammates who don't just int in my ranked games.",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-winning-videogame_23-2149349988.jpg",
},
{
name: "Jamie P.",
role: "Casual Gamer",
quote: "The swipe system is incredibly fast. I'm playing twice as much.",
imageSrc: "http://img.b2bpic.net/free-photo/black-remote-worker-enjoying-flexibility-comfort-while-browsing-online_482257-118982.jpg",
},
{
name: "Sarah K.",
role: "Competitive",
quote: "Clean UI and great matchmaking speed. A must-have for Valorant.",
imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419465.jpg",
},
{
name: "Marcus L.",
role: "Hardcore",
quote: "The stats integration is perfect. Exactly what I needed.",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-viewer-changing-channels-television-set-with-remote-control_482257-92306.jpg",
},
{
name: "Emily D.",
role: "Squad Lead",
quote: "Our whole squad met here. Incredible platform.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-earphones-dark-haired-man-casual-clothes-looking-camera-portrait-concept_74855-24635.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}