8409fe09-da0f-4f88-9a9f-03646a00da21/src/App.tsx

import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
import FaqSimple from '@/components/sections/faq/FaqSimple';
import FeaturesAlternatingSplit from '@/components/sections/features/FeaturesAlternatingSplit';
import FooterSimpleCard from '@/components/sections/footer/FooterSimpleCard';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
import NavbarCentered from '@/components/ui/NavbarCentered';
import TeamMinimalCards from '@/components/sections/team/TeamMinimalCards';
import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';

export default function App() {
  return (
    <>
      <div id="nav" data-section="nav">
        <NavbarCentered
          logo="ApexDev"
          navItems={[
            { name: "About", href: "#about" },
            { name: "Features", href: "#features" },
            { name: "Team", href: "#team" },
            { name: "FAQ", href: "#faq" },
          ]}
          ctaButton={{
            text: "Contact Us",            href: "#contact"}}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          tag="Next Gen Gaming"
          title="We Build Worlds That Move You"
          description="ApexDev crafts immersive gaming experiences, blending art, technology, and pure player passion to redefine the interactive frontier."
          primaryButton={{ text: "Our Games", href: "#features" }}
          secondaryButton={{ text: "Contact Us", href: "#contact" }}
          items={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/a-stunning-futuristic-cyber-cityscape-in-1776437391046-3bbece4f.png" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/close-up-of-a-high-tech-gaming-interface-1776437403076-1b24529d.png" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/cinematic-shot-of-a-character-looking-ov-1776437414314-3690beef.png" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/action-packed-combat-sequence-in-a-space-1776437424664-e0eee8ca.png" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/abstract-futuristic-geometry-representin-1776437433599-28648732.png" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/detailed-character-concept-model-in-a-pr-1776437443008-1fae5ef6.png" },
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <AboutTextSplit
          title="Building Dreams into Reality"
          descriptions={[
            "Founded in 2024, our studio pushes the boundaries of engine technology and storytelling. We focus on player agency, rich environmental lore, and technical excellence.",            "Our team consists of industry veterans and bold newcomers, all united by a mission to create titles that stay with players long after the credits roll."]}
          primaryButton={{ text: "View Projects", href: "#features" }}
        />
      </div>

      <div id="features" data-section="features">
        <FeaturesAlternatingSplit
          tag="Our Core Tech"
          title="Advanced Development Stack"
          description="We utilize cutting-edge tools to deliver seamless, performance-heavy gaming."
          items={[
            { title: "Neural Rendering", description: "Our proprietary AI-driven lighting system simulates real-world photon behavior.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/conceptual-visualization-of-neural-rende-1776437454746-91277628.png" },
            { title: "Fluid World Simulation", description: "Dynamic landscapes that react to player choices in real-time, creating unique paths.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/dynamic-terrain-simulation-showing-reali-1776437466475-045e9f38.png" },
            { title: "Cross-Platform Optimization", description: "Engineered for 120FPS+ across all current and next-gen gaming hardware.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/technical-representation-of-performance--1776437476112-d1f0d62e.png" },
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricsSimpleCards
          tag="Our Reach"
          title="Impact by the Numbers"
          description="Data-driven development leads to record-breaking player engagement."
          metrics={[
            { value: "1.2M", description: "Active Monthly Players" },
            { value: "15+", description: "Titles Released Globally" },
            { value: "4.9/5", description: "Average Community Rating" },
            { value: "200+", description: "Talented Global Team" },
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamMinimalCards
          tag="The Architects"
          title="Leadership Team"
          members={[
            { name: "Elena Vance", role: "Creative Lead", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/professional-team-portrait-shot-in-a-mod-1776437489693-833b69c0.png" },
            { name: "Marcus Thorne", role: "Engine Architect", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/professional-team-portrait-shot-in-a-mod-1776437498807-bea8c1d8.png" },
            { name: "Sarah J. Miller", role: "Lead Narrative", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/professional-team-portrait-shot-in-a-mod-1776437509913-00152cdd.png" },
            { name: "David Zhou", role: "Systems Engineer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/professional-team-portrait-shot-in-a-mod-1776437520935-37a933f6.png" },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialMarqueeCards
          tag="Player Voices"
          title="What They Say"
          description="Our community is the heart and soul of everything we create."
          testimonials={[
            { name: "Alex P.", role: "Gamer", quote: "ApexDev makes games that truly respect your time and intelligence.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/portrait-of-a-diverse-young-professional-1776437530222-b33be6f0.png" },
            { name: "Jordan R.", role: "Reviewer", quote: "The most technically impressive title I have played in years.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/portrait-of-a-diverse-young-professional-1776437539489-37fc76b5.png" },
            { name: "Sam L.", role: "Developer", quote: "Their engine tech sets a new industry benchmark for graphics.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/portrait-of-a-diverse-young-professional-1776437550960-c77b11bd.png" },
            { name: "Taylor W.", role: "Streamer", quote: "Community engagement is their top priority.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/portrait-of-a-diverse-young-professional-1776437560697-2d5dc430.png" },
            { name: "Casey H.", role: "Pro Player", quote: "Incredibly responsive controls and satisfying mechanics.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/portrait-of-a-diverse-young-professional-1776437569577-c631360b.png" },
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSimple
          tag="Support"
          title="Frequently Asked Questions"
          description="Have questions? We have answers regarding our games and dev studio."
          items={[
            { question: "Are you hiring?", answer: "Yes, we are always looking for passionate talent to join our team." },
            { question: "Can I request features?", answer: "Community feedback is essential; you can suggest features via our Discord channel." },
            { question: "What engines do you support?", answer: "We focus on a mix of Unreal and custom proprietary technology." },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitEmail
          tag="Let's Talk"
          title="Build With Us"
          description="Join our newsletter or get in touch for media inquiries."
          inputPlaceholder="Enter your professional email"
          buttonText="Subscribe"
          imageSrc={{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CLm1Rx5tfShIpqMHDGEn2l1IEn/cozy-creative-office-desk-environment-wi-1776437581532-84ca9410.png" }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimpleCard
          brand="ApexDev Studios"
          columns={[
            { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Team", href: "#team" }] },
            { title: "Resources", items: [{ label: "Community", href: "#" }, { label: "Support", href: "#" }] },
          ]}
          copyright="© 2024 ApexDev Studios. All rights reserved."
          links={[{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }]}
        />
      </div>
    </>
  );
}