development/87357d5c-d95d-409d-b834-249ec7e52b8f
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2025-12-29 13:42:42 +02:00
commit c605a9b51d
308 changed files with 62546 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

512
src/app/globals.css Normal file
View File

@@ -0,0 +1,512 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
--background: #ffffff;;
--card: #fcfcfc;;
--foreground: #080015e6;;
--primary-cta: #7c3aed;;
--secondary-cta: #ffffff;;
--accent: #e2e2e2;;
--background-accent: #c4c4c4;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-secondary-cta: var(--secondary-cta);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-noto-sans), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-noto-sans), sans-serif;
}

1280
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

326
src/app/page.tsx Normal file
View File

@@ -0,0 +1,326 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogoCarousel from '@/components/sections/hero/HeroLogoCarousel';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Crown, Sparkles, Twitter, Youtube, Instagram } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight"
borderRadius="sharp"
contentWidth="medium"
sizing="mediumLargeSizeLargeTitles"
background="fluid"
cardStyle="neon-glow"
primaryButtonStyle="gradient"
secondaryButtonStyle="minimal"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Shop", id: "products" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "testimonials" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" }
]}
brandName="GamingGear"
bottomLeftText="Your Gaming Partner"
bottomRightText="support@gaminggear.com"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoCarousel
logoText="GamingGear"
description="Discover top-rated accessories that bring out the best in your game—fast shipping and guaranteed quality"
mediaItems={[
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766162985210-1ppue3uz.jpg", imageAlt: "Premium mechanical gaming keyboard with RGB lighting" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008465759-83vlk2nd.jpg", imageAlt: "High-precision gaming mouse for competitive play" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008467028-12cax78m.jpg", imageAlt: "Surround sound gaming headset for immersive experience" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766162986247-k8pnj4cd.jpg", imageAlt: "High refresh rate gaming monitor for smooth gameplay" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008467896-k3rs2mds.jpg", imageAlt: "Smooth gaming mousepad for precision control" }
]
logoLineHeight={1.1}
/>
</div>
<div id="products" data-section="products">
<ProductCardTwo
title="Shop Premium Gaming Accessories"
description="Browse our carefully curated collection of high-quality gaming gear trusted by competitive and casual players alike"
products={[
{
id: "1",
brand: "TechPro",
name: "Mechanical Gaming Keyboard RGB",
price: "$149.99",
rating: 5,
reviewCount: "4.2k",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008468748-8wuzqkxb.jpg",
imageAlt: "TechPro mechanical keyboard with RGB backlighting"
},
{
id: "2",
brand: "CursorMax",
name: "Ultra-Responsive Gaming Mouse",
price: "$79.99",
rating: 5,
reviewCount: "3.8k",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008469530-p1soz5c7.jpg",
imageAlt: "CursorMax wireless gaming mouse with 16000 DPI"
},
{
id: "3",
brand: "ComfortGaming",
name: "Pro Ergonomic Gaming Chair",
price: "$299.99",
rating: 4,
reviewCount: "2.9k",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008470344-vf2a7s8x.jpg",
imageAlt: "ComfortGaming premium ergonomic gaming chair"
}
]
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
gridVariant="three-columns-all-equal-width"
/>
</div>
<div id="features" data-section="features">
<FeatureCardEighteen
title="Why Choose GamingGear"
description="Experience the difference between average setups and pro-level gaming equipment"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
negativeCard={{
title: "Settling for Less",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766158631222-b4add55v.jpg",
items: [
"Low-quality unresponsive peripherals",
"Slow shipping and poor support",
"Unreliable performance under pressure",
"Limited product selection"
]
}}
positiveCard={{
title: "Level Up with GamingGear",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008471140-vcogrrbp.jpg",
items: [
"Premium, tournament-grade equipment",
"Fast shipping with guaranteed delivery",
"Professional-grade performance",
"Thousands of quality products"
]
}}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
title="What Our Players Say"
description="Join thousands of satisfied gamers who trust GamingGear for their setup"
testimonials={[
{
id: "1",
name: "Marcus Chen, Esports Pro",
date: "Date: 15 November 2024",
title: "Changed my competitive game completely",
quote: "The responsiveness and build quality are unmatched. I've won three tournaments since switching to GamingGear equipment. The support team is incredibly helpful with setup questions.",
tag: "Competitive Player",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008472257-1keubkjd.jpg",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008472257-1keubkjd.jpg"
},
{
id: "2",
name: "Sarah Rodriguez, Content Creator",
date: "Date: 22 October 2024",
title: "Professional gear at fair prices",
quote: "I stream 40 hours a week and need reliable equipment. GamingGear delivers premium quality without breaking the bank. My viewers love my setup and audio quality.",
tag: "Streamer",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008473151-ztq3ugqq.jpg",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008473151-ztq3ugqq.jpg"
},
{
id: "3",
name: "James Wilson, Casual Gamer",
date: "Date: 10 October 2024",
title: "Amazing value and delivery",
quote: "First time ordering gaming peripherals and I'm blown away. The keyboard feels incredible and arrived in two days. Customer service was fantastic when I had questions.",
tag: "New Customer",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008473920-m5gkh2as.jpg",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008473920-m5gkh2as.jpg"
},
{
id: "4",
name: "Alex Kim, Console Gamer",
date: "Date: 28 September 2024",
title: "Works perfectly with my setup",
quote: "Compatibility was my biggest concern, but GamingGear has clear documentation. Their mouse and headset work flawlessly with my PlayStation and PC. Highly recommend.",
tag: "Multi-Platform",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008474904-03ppuk1k.jpg",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008474904-03ppuk1k.jpg"
},
{
id: "5",
name: "David Thompson, PC Builder",
date: "Date: 15 September 2024",
title: "Perfect for custom builds",
quote: "Built my first gaming PC and needed quality peripherals. GamingGear's product descriptions are detailed and honest. Everything integrates seamlessly with my custom rig.",
tag: "Custom Builder",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766158635120-y4gwwb01.jpg",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766158635120-y4gwwb01.jpg"
},
{
id: "6",
name: "Elena Martinez, Gaming Community Manager",
date: "Date: 5 September 2024",
title: "Our team's go-to gaming store",
quote: "We've outfitted our entire gaming club with GamingGear products. Bulk ordering is smooth, delivery is reliable, and we get consistent quality across every order.",
tag: "Team Manager",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008475695-0i2q7722.jpg",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008475695-0i2q7722.jpg"
}
]
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardOne
title="Choose Your Gaming Setup"
description="Flexible options for every budget and gaming style, from casual to competitive"
plans={[
{
id: "starter",
badge: "Getting Started",
price: "$79-149",
subtitle: "Essential gear for casual gaming",
features: [
"Quality gaming mouse or keyboard",
"Basic RGB lighting",
"Standard 1-year warranty",
"Free standard shipping"
]
},
{
id: "pro",
badge: "Most Popular",
badgeIcon: Sparkles,
price: "$200-499",
subtitle: "Professional-grade equipment setup",
features: [
"Complete peripheral combo",
"Advanced RGB customization",
"Premium 2-year warranty",
"Priority support & fast shipping"
]
},
{
id: "elite",
badge: "Tournament Ready",
badgeIcon: Crown,
price: "$500+",
subtitle: "Championship-grade full setup",
features: [
"Top-tier peripherals with custom configs",
"Advanced features and settings",
"Lifetime premium support",
"Free upgrades and exclusive access"
]
}
]
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked Questions"
description="Find answers about our products, compatibility, shipping, and support"
faqs={[
{
id: "1",
title: "What systems are your peripherals compatible with?",
content: "Our gaming accessories work with PC, PlayStation, Xbox, and Nintendo Switch. Each product page clearly lists compatible systems. Most USB peripherals are plug-and-play, though some advanced features may require driver installation."
},
{
id: "2",
title: "How long does shipping take?",
content: "Standard shipping takes 5-7 business days. We offer Express shipping (2-3 days) and Overnight shipping options at checkout. All orders include tracking information and arrive with our GamingGear protection guarantee."
},
{
id: "3",
title: "What's your return policy?",
content: "We offer a 30-day money-back guarantee on all products. If you're not completely satisfied, simply initiate a return through your account. We cover return shipping for defective items."
},
{
id: "4",
title: "Do you offer bulk ordering for teams or events?",
content: "Yes! Contact our bulk sales team at bulk@gaminggear.com for team packages and custom quotes. We provide competitive pricing and dedicated support for large orders."
},
{
id: "5",
title: "Are your products covered by warranty?",
content: "All products come with at least a 1-year manufacturer's warranty. Pro and Elite packages include extended 2-year and lifetime warranties. Warranty covers manufacturing defects and hardware failures."
},
{
id: "6",
title: "How do I set up RGB lighting and customization?",
content: "Each product includes detailed setup guides and video tutorials on our website. RGB customization software is free to download, and our support team can help via live chat if you need assistance."
}
]
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008477647-xju4354s.jpg"
imageAlt="Gaming setup with technical support"
mediaPosition="right"
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="smooth"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Stay Connected"
title="Get Exclusive Deals & Product Launches"
description="Subscribe to our newsletter for early access to new gaming gear, special promotions, and expert setup tips"
useInvertedBackground="noInvert"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008476711-jolrx2aa.jpg"
imageAlt="Gaming community and support"
mediaPosition="right"
inputPlaceholder="Enter your email"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe anytime from your account settings."
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="GamingGear"
copyrightText="© 2025 GamingGear | Level Up Your Setup"
socialLinks={[
{ icon: Twitter, href: "https://twitter.com/gaminggear", ariaLabel: "Follow GamingGear on Twitter" },
{ icon: Youtube, href: "https://youtube.com/gaminggear", ariaLabel: "Watch GamingGear on YouTube" },
{ icon: Instagram, href: "https://instagram.com/gaminggear", ariaLabel: "Follow GamingGear on Instagram" }
]}
/>
</div>
</ThemeProvider>
);
}