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:
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
27
src/pages/HomePage/sections/Cta.tsx
Normal file
27
src/pages/HomePage/sections/Cta.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
34
src/pages/HomePage/sections/Faq.tsx
Normal file
34
src/pages/HomePage/sections/Faq.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
37
src/pages/HomePage/sections/Features.tsx
Normal file
37
src/pages/HomePage/sections/Features.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
44
src/pages/HomePage/sections/Hero.tsx
Normal file
44
src/pages/HomePage/sections/Hero.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
39
src/pages/HomePage/sections/HowItWorks.tsx
Normal file
39
src/pages/HomePage/sections/HowItWorks.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
38
src/pages/HomePage/sections/ScrollFx.tsx
Normal file
38
src/pages/HomePage/sections/ScrollFx.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
64
src/pages/HomePage/sections/Showcase.tsx
Normal file
64
src/pages/HomePage/sections/Showcase.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
34
src/pages/HomePage/sections/Stats.tsx
Normal file
34
src/pages/HomePage/sections/Stats.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
52
src/pages/HomePage/sections/Testimonials.tsx
Normal file
52
src/pages/HomePage/sections/Testimonials.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user