Compare commits
3 Commits
version_2_
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| a412583fff | |||
|
07a887f173 | ||
| 9b32435c8e |
@@ -1,286 +1,33 @@
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
|
||||
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
|
||||
import { ShieldCheck, Star, Zap } 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 AboutSection from './HomePage/sections/About';
|
||||
import GamesSection from './HomePage/sections/Games';
|
||||
import CategoriesSection from './HomePage/sections/Categories';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplitVerticalMarquee
|
||||
tag="Next-Gen Gaming Platform"
|
||||
title="300+ Games. Zero Install."
|
||||
description="Experience high-performance browser gaming built on WebGL. Instant play, no downloads required."
|
||||
primaryButton={{
|
||||
text: "Start Playing Now",
|
||||
href: "#games",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Join Community",
|
||||
href: "#contact",
|
||||
}}
|
||||
leftItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-techno-communications-background-with-plexus-design_1048-12648.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172434.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-tunnel-with-neon-lights-geometric-patterns_23-2151966347.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-science-fiction-tunnel-corridor-with-lines-neon-blue-red-lights_181624-26525.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machine_23-2151599395.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-finance-digital-market-graph-user-interface-with-diagram-technology-hud-graphic-concept_90220-1365.jpg",
|
||||
},
|
||||
]}
|
||||
rightItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-technology-background-with-low-poly-plexus-design_1048-13548.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-neon-futuristic-tunnel_23-2151966345.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-sci-fi-techno-lights-creating-cool-shapes_181624-23687.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/iguana-with-neon-lights_23-2151695303.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-cityscape-with-neon-lights_23-2151966351.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/team-looking-futuristic-digital-interface-office_23-2151966687.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="Our Philosophy"
|
||||
title="Built for Speed & Quality"
|
||||
description="Every game on Arcade-OS is crafted with pure WebGL. We prioritize optimized performance, modular code, and high-quality gameplay mechanics that bring classic fun back to your browser."
|
||||
items={[
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Ultra-Fast",
|
||||
description: "Optimized to run seamlessly on any device.",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Secure",
|
||||
description: "Safe, sandbox environment for all your games.",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
title: "Classic Fun",
|
||||
description: "Hand-crafted mechanics inspired by the classics.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/light-equipment-grey-technology-serious_1134-1423.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="games" data-section="games">
|
||||
<SectionErrorBoundary name="games">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Instant Play"
|
||||
title="Top Picks Today"
|
||||
description="Our curated library of top-performing titles across multiple genres."
|
||||
items={[
|
||||
{
|
||||
title: "Cyber Run",
|
||||
description: "Endless runner with neon obstacles.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/8-bit-graphics-pixels-scene-with-person-walking-dog-park_23-2151120973.jpg",
|
||||
},
|
||||
{
|
||||
title: "Turbo Drift",
|
||||
description: "High-speed arcade racing.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/batmobile-car-with-neon-lights_23-2151649924.jpg",
|
||||
},
|
||||
{
|
||||
title: "Hex Puzzle",
|
||||
description: "Space-themed geometric puzzle.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-view-puzzle-pieces_23-2150499253.jpg",
|
||||
},
|
||||
{
|
||||
title: "Star Hunter",
|
||||
description: "Arcade space shooter.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coloured-nebula-background_1048-1944.jpg",
|
||||
},
|
||||
{
|
||||
title: "Dark Dungeon",
|
||||
description: "Classic fantasy crawler.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mystical-samurai-glowing-forest_23-2151995181.jpg",
|
||||
},
|
||||
{
|
||||
title: "City Tactics",
|
||||
description: "Real-time strategy challenge.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-map-with-dices_23-2149352317.jpg",
|
||||
},
|
||||
{
|
||||
title: "Beat Stream",
|
||||
description: "Rhythm-based music challenge.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-character-djing-party_23-2151688571.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<GamesSection />
|
||||
|
||||
<div id="categories" data-section="categories">
|
||||
<SectionErrorBoundary name="categories">
|
||||
<FeaturesDetailedCards
|
||||
tag="Genres"
|
||||
title="Explore by Genre"
|
||||
description="Find your favorites, from casual puzzles to hardcore arcade action."
|
||||
items={[
|
||||
{
|
||||
title: "Action",
|
||||
description: "Fast-paced games for adrenaline.",
|
||||
tags: [
|
||||
"arcane",
|
||||
"speed",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/8-bit-graphics-pixels-scene-with-person-walking-dog-park_23-2151120933.jpg",
|
||||
},
|
||||
{
|
||||
title: "Logic",
|
||||
description: "Brain-teasing puzzles.",
|
||||
tags: [
|
||||
"puzzles",
|
||||
"logic",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-puzzle-background_23-2149289241.jpg",
|
||||
},
|
||||
{
|
||||
title: "Fantasy",
|
||||
description: "Explore magic worlds.",
|
||||
tags: [
|
||||
"rpg",
|
||||
"magic",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-werewolf-illustration_23-2149634690.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<CategoriesSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="Player Feedback"
|
||||
title="Loved by Gamers"
|
||||
description="See why thousands choose us for their daily game session."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah J.",
|
||||
role: "Pro Gamer",
|
||||
quote: "Arcade-OS is lightning fast. Best browser platform.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-keeps-hands-stereo-wireless-headphones-smiles-broadly-being-good-mood-dressed-formal-jacket-enjoys-spare-time_273609-51375.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark L.",
|
||||
role: "Casual",
|
||||
quote: "So many games to choose from, I never get bored.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-serious-brutal-male-casual-clothes-dark-background_613910-16043.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena R.",
|
||||
role: "Developer",
|
||||
quote: "Clean UI and great performance in every single title.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/excited-casual-young-woman-playing-video-games-having-fun-red_158595-4736.jpg",
|
||||
},
|
||||
{
|
||||
name: "Kyle T.",
|
||||
role: "Gamer",
|
||||
quote: "No downloads, just click and play. Perfect.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-hispanic-woman-streamer-stressed-using-computer-gaming-room_839833-34766.jpg",
|
||||
},
|
||||
{
|
||||
name: "Anna P.",
|
||||
role: "Fan",
|
||||
quote: "The rhythm games are my favorite, very smooth.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-playing-videogame_23-2149350006.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Support"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about Arcade-OS."
|
||||
items={[
|
||||
{
|
||||
question: "Are games free?",
|
||||
answer: "Yes, all games are free to play.",
|
||||
},
|
||||
{
|
||||
question: "Do I need to install anything?",
|
||||
answer: "No, everything runs in your browser.",
|
||||
},
|
||||
{
|
||||
question: "Is it mobile friendly?",
|
||||
answer: "Most of our games support touch input.",
|
||||
},
|
||||
{
|
||||
question: "How do I save progress?",
|
||||
answer: "Use your browser local storage.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Get in touch"
|
||||
text="Ready to showcase your own game on our platform?"
|
||||
primaryButton={{
|
||||
text: "Contact Support",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Developers Hub",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
39
src/pages/HomePage/sections/About.tsx
Normal file
39
src/pages/HomePage/sections/About.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 "about" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import { ShieldCheck, Star, Zap } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="Our Philosophy"
|
||||
title="Built for Speed & Quality"
|
||||
description="Every game on Arcade-OS is crafted with pure WebGL. We prioritize optimized performance, modular code, and high-quality gameplay mechanics that bring classic fun back to your browser."
|
||||
items={[
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Ultra-Fast",
|
||||
description: "Optimized to run seamlessly on any device.",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Secure",
|
||||
description: "Safe, sandbox environment for all your games.",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
title: "Classic Fun",
|
||||
description: "Hand-crafted mechanics inspired by the classics.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/light-equipment-grey-technology-serious_1134-1423.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
src/pages/HomePage/sections/Categories.tsx
Normal file
49
src/pages/HomePage/sections/Categories.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "categories" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function CategoriesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="categories" data-section="categories">
|
||||
<SectionErrorBoundary name="categories">
|
||||
<FeaturesDetailedCards
|
||||
tag="Genres"
|
||||
title="Explore by Genre"
|
||||
description="Find your favorites, from casual puzzles to hardcore arcade action."
|
||||
items={[
|
||||
{
|
||||
title: "Action",
|
||||
description: "Fast-paced games for adrenaline.",
|
||||
tags: [
|
||||
"arcane",
|
||||
"speed",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/8-bit-graphics-pixels-scene-with-person-walking-dog-park_23-2151120933.jpg",
|
||||
},
|
||||
{
|
||||
title: "Logic",
|
||||
description: "Brain-teasing puzzles.",
|
||||
tags: [
|
||||
"puzzles",
|
||||
"logic",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-puzzle-background_23-2149289241.jpg",
|
||||
},
|
||||
{
|
||||
title: "Fantasy",
|
||||
description: "Explore magic worlds.",
|
||||
tags: [
|
||||
"rpg",
|
||||
"magic",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-werewolf-illustration_23-2149634690.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
src/pages/HomePage/sections/Contact.tsx
Normal file
27
src/pages/HomePage/sections/Contact.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 "contact" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Get in touch"
|
||||
text="Ready to showcase your own game on our platform?"
|
||||
primaryButton={{
|
||||
text: "Contact Support",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Developers Hub",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/pages/HomePage/sections/Faq.tsx
Normal file
38
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
// 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 FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Support"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about Arcade-OS."
|
||||
items={[
|
||||
{
|
||||
question: "Are games free?",
|
||||
answer: "Yes, all games are free to play.",
|
||||
},
|
||||
{
|
||||
question: "Do I need to install anything?",
|
||||
answer: "No, everything runs in your browser.",
|
||||
},
|
||||
{
|
||||
question: "Is it mobile friendly?",
|
||||
answer: "Most of our games support touch input.",
|
||||
},
|
||||
{
|
||||
question: "How do I save progress?",
|
||||
answer: "Use your browser local storage.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
167
src/pages/HomePage/sections/Games.tsx
Normal file
167
src/pages/HomePage/sections/Games.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Cyber Run",
|
||||
description: "Endless runner with neon obstacles.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/8-bit-graphics-pixels-scene-with-person-walking-dog-park_23-2151120973.jpg"
|
||||
},
|
||||
{
|
||||
title: "Turbo Drift",
|
||||
description: "High-speed arcade racing.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/batmobile-car-with-neon-lights_23-2151649924.jpg"
|
||||
},
|
||||
{
|
||||
title: "Hex Puzzle",
|
||||
description: "Space-themed geometric puzzle.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-view-puzzle-pieces_23-2150499253.jpg"
|
||||
},
|
||||
{
|
||||
title: "Star Hunter",
|
||||
description: "Arcade space shooter.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coloured-nebula-background_1048-1944.jpg"
|
||||
},
|
||||
{
|
||||
title: "Dark Dungeon",
|
||||
description: "Classic fantasy crawler.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mystical-samurai-glowing-forest_23-2151995181.jpg"
|
||||
},
|
||||
{
|
||||
title: "City Tactics",
|
||||
description: "Real-time strategy challenge.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-map-with-dices_23-2149352317.jpg"
|
||||
},
|
||||
{
|
||||
title: "Beat Stream",
|
||||
description: "Rhythm-based music challenge.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-character-djing-party_23-2151688571.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
type FeatureItem = {
|
||||
title: string;
|
||||
description: string;
|
||||
href: string;
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
interface FeaturesRevealCardsBentoProps {
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
primaryButton?: { text: string; href: string };
|
||||
secondaryButton?: { text: string; href: string };
|
||||
items: [FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem];
|
||||
}
|
||||
|
||||
const GamesInline = () => {
|
||||
const gridClasses = [
|
||||
"md:col-span-2",
|
||||
"md:col-span-4",
|
||||
"md:col-span-3",
|
||||
"md:col-span-3",
|
||||
"md:col-span-2",
|
||||
"md:col-span-2",
|
||||
"md:col-span-2",
|
||||
];
|
||||
|
||||
const staggerDelays = [
|
||||
0,
|
||||
0.1,
|
||||
0,
|
||||
0.1,
|
||||
0,
|
||||
0.1,
|
||||
0.2,
|
||||
];
|
||||
|
||||
return (
|
||||
<section aria-label="Features reveal cards bento section" className="py-20">
|
||||
<div className="flex flex-col gap-8 md:gap-10">
|
||||
<div className="flex flex-col items-center w-content-width mx-auto gap-2">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"Instant Play"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Top Picks Today"}
|
||||
variant="slide-up"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={"Our curated library of top-performing titles across multiple genres."}
|
||||
variant="slide-up"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
|
||||
/>
|
||||
|
||||
{(undefined || undefined) && (
|
||||
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-6 gap-3">
|
||||
{items.map((item, index) => (
|
||||
<ScrollReveal key={item.title} variant="fade-blur" delay={staggerDelays[index]} className={cls("col-span-1 group", gridClasses[index])}>
|
||||
<a href={item.href} className="block relative overflow-hidden rounded">
|
||||
<div className="h-80 xl:h-100 2xl:h-120 overflow-hidden">
|
||||
<ImageOrVideo
|
||||
imageSrc={item.imageSrc}
|
||||
videoSrc={item.videoSrc}
|
||||
className="rounded group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute -inset-x-px -bottom-px h-2/5 backdrop-blur-xl mask-fade-top-overlay" aria-hidden="true" />
|
||||
<div className="absolute inset-x-3 bottom-3 2xl:inset-x-4 2xl:bottom-4 z-10">
|
||||
<div className="relative flex flex-col gap-1 md:gap-0 md:group-hover:gap-1 p-3 2xl:p-4 transition-all duration-400">
|
||||
<div className="absolute inset-0 -z-10 card rounded translate-y-0 opacity-100 md:translate-y-full md:opacity-0 transition-all duration-400 ease-out md:group-hover:translate-y-0 md:group-hover:opacity-100" />
|
||||
<h3 className="text-2xl font-semibold leading-snug text-foreground md:text-white transition-colors duration-400 md:group-hover:text-foreground">
|
||||
{item.title}
|
||||
</h3>
|
||||
<div className="grid grid-rows-[1fr] md:grid-rows-[0fr] transition-all duration-400 ease-out md:group-hover:grid-rows-[1fr]">
|
||||
<div className="overflow-hidden opacity-100 md:opacity-0 transition-opacity duration-400 md:group-hover:opacity-100">
|
||||
<p className="text-base leading-snug text-foreground">
|
||||
{item.description}
|
||||
</p>
|
||||
<p className="mt-2 text-sm font-semibold text-[var(--primary-cta)] flex items-center gap-1">
|
||||
Play Now <span aria-hidden="true">→</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function GamesSection() {
|
||||
return (
|
||||
<div data-webild-section="games" id="games">
|
||||
<GamesInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
68
src/pages/HomePage/sections/Hero.tsx
Normal file
68
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
// 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 HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplitVerticalMarquee
|
||||
tag="Next-Gen Gaming Platform"
|
||||
title="300+ Games. Zero Install."
|
||||
description="Experience high-performance browser gaming built on WebGL. Instant play, no downloads required."
|
||||
primaryButton={{
|
||||
text: "Start Playing Now",
|
||||
href: "#games",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Join Community",
|
||||
href: "#contact",
|
||||
}}
|
||||
leftItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-techno-communications-background-with-plexus-design_1048-12648.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172434.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-tunnel-with-neon-lights-geometric-patterns_23-2151966347.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-science-fiction-tunnel-corridor-with-lines-neon-blue-red-lights_181624-26525.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machine_23-2151599395.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-finance-digital-market-graph-user-interface-with-diagram-technology-hud-graphic-concept_90220-1365.jpg",
|
||||
},
|
||||
]}
|
||||
rightItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-technology-background-with-low-poly-plexus-design_1048-13548.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-neon-futuristic-tunnel_23-2151966345.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-sci-fi-techno-lights-creating-cool-shapes_181624-23687.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/iguana-with-neon-lights_23-2151695303.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-cityscape-with-neon-lights_23-2151966351.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/team-looking-futuristic-digital-interface-office_23-2151966687.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
57
src/pages/HomePage/sections/Testimonials.tsx
Normal file
57
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
// 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 TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="Player Feedback"
|
||||
title="Loved by Gamers"
|
||||
description="See why thousands choose us for their daily game session."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah J.",
|
||||
role: "Pro Gamer",
|
||||
quote: "Arcade-OS is lightning fast. Best browser platform.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-keeps-hands-stereo-wireless-headphones-smiles-broadly-being-good-mood-dressed-formal-jacket-enjoys-spare-time_273609-51375.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark L.",
|
||||
role: "Casual",
|
||||
quote: "So many games to choose from, I never get bored.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-serious-brutal-male-casual-clothes-dark-background_613910-16043.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena R.",
|
||||
role: "Developer",
|
||||
quote: "Clean UI and great performance in every single title.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/excited-casual-young-woman-playing-video-games-having-fun-red_158595-4736.jpg",
|
||||
},
|
||||
{
|
||||
name: "Kyle T.",
|
||||
role: "Gamer",
|
||||
quote: "No downloads, just click and play. Perfect.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-hispanic-woman-streamer-stressed-using-computer-gaming-room_839833-34766.jpg",
|
||||
},
|
||||
{
|
||||
name: "Anna P.",
|
||||
role: "Fan",
|
||||
quote: "The rhythm games are my favorite, very smooth.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-playing-videogame_23-2149350006.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user