Files
fe7bfad3-c054-46b2-a2da-56c…/src/app/page.tsx
2026-03-28 08:15:01 +00:00

210 lines
8.9 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TextAbout from '@/components/sections/about/TextAbout';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="smallMedium"
sizing="largeSmallSizeLargeTitles"
background="aurora"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home", id: "hero"},
{
name: "Games", id: "games"},
{
name: "Pricing", id: "pricing"},
{
name: "Offers", id: "offers"},
{
name: "Book Now", id: "contact"},
]}
brandName="JAMMIN ZONE"
button={{
text: "Reserve", href: "#contact"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroCarouselLogo
logoText="JAMMIN GAME ZONE"
description="Enter the Future of Gaming"
buttons={[
{
text: "Book Now", href: "#contact"},
{
text: "Call to Reserve", href: "tel:+919999999999"},
]}
slides={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ98sSPnc9Ektaac944RDOytPD/futuristic-gaming-zone-entrance-with-neo-1774685667841-e5a03dec.png", imageAlt: "Futuristic gaming environment"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ98sSPnc9Ektaac944RDOytPD/futuristic-gaming-zone-entrance-with-neo-1774685667841-e5a03dec.png", imageAlt: "Neon glowing gaming setup"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ98sSPnc9Ektaac944RDOytPD/futuristic-gaming-zone-entrance-with-neo-1774685667841-e5a03dec.png", imageAlt: "Holographic grid gaming"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ98sSPnc9Ektaac944RDOytPD/futuristic-gaming-zone-entrance-with-neo-1774685667841-e5a03dec.png", imageAlt: "Cyberpunk arena overview"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ98sSPnc9Ektaac944RDOytPD/futuristic-gaming-zone-entrance-with-neo-1774685667841-e5a03dec.png", imageAlt: "High tech gaming zone"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ98sSPnc9Ektaac944RDOytPD/futuristic-gaming-zone-entrance-with-neo-1774685667841-e5a03dec.png", imageAlt: "Jammin Zone entrance"},
]}
/>
</div>
<div id="games" data-section="games">
<ProductCardOne
textboxLayout="split-description"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
useInvertedBackground={false}
products={[
{
id: "1", name: "Blur", price: "High Octane", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ98sSPnc9Ektaac944RDOytPD/action-gaming-scene-high-octane-cyberpun-1774685665687-5820bff5.png"},
{
id: "2", name: "GTA V", price: "Open World", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ98sSPnc9Ektaac944RDOytPD/grand-theft-auto-style-urban-city-at-nig-1774685667198-dc4ed61d.png"},
{
id: "3", name: "FIFA", price: "Pro Sports", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ98sSPnc9Ektaac944RDOytPD/soccer-game-stadium-futuristic-glow-spor-1774685667088-18537070.png"},
{
id: "4", name: "Tekken 8", price: "Combat", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ98sSPnc9Ektaac944RDOytPD/fighting-game-character-glow-effect-aggr-1774685666231-0b5039da.png"},
{
id: "5", name: "VR Experience", price: "Immersive", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ98sSPnc9Ektaac944RDOytPD/virtual-reality-headset-in-a-high-tech-g-1774685663520-ab99f2ba.png"},
]}
title="Popular Titles"
description="Dominate the leaderboards in our high-end gaming stations."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardOne
animationType="depth-3d"
textboxLayout="split"
useInvertedBackground={true}
plans={[
{
id: "normal", badge: "Gaming", price: "₹250", subtitle: "Normal Gaming Station", features: [
"1 Hour Session", "Ultra HD Screen", "Premium Peripherals"],
},
{
id: "vr", badge: "Immersive", price: "₹400", subtitle: "VR Gaming Experience", features: [
"1 Hour Session", "Latest VR Headsets", "360 Spatial Audio"],
},
{
id: "pro", badge: "Elite", price: "₹200", subtitle: "Half Hour Quick Session", features: [
"30 Minutes", "High Performance", "Priority Access"],
},
]}
title="Neon Pricing Plans"
description="Choose your path to glory."
/>
</div>
<div id="driving-sim" data-section="driving-sim">
<TextAbout
useInvertedBackground={false}
tag="Simulator Feature"
title="Experience Real Driving"
buttons={[
{
text: "Book Driving Seat", href: "#contact"},
]}
/>
</div>
<div id="offers" data-section="offers">
<PricingCardOne
animationType="depth-3d"
textboxLayout="split-description"
useInvertedBackground={true}
plans={[
{
id: "day", badge: "Daily", price: "₹900", subtitle: "Unlimited One Day", features: [
"Single Player", "All Games Access", "Full Day Pass"],
},
{
id: "multi", badge: "Pro", price: "₹1500", subtitle: "Multiplayer Unlimited", features: [
"Multiplayer Support", "Tournament Entry", "Priority Queue"],
},
{
id: "gold", badge: "Gold", price: "₹9000", subtitle: "Monthly Elite Card", features: [
"100 Hours / 60 Days", "10 Hours Free", "10 Drinks Included"],
},
{
id: "plat", badge: "Platinum", price: "₹15000", subtitle: "Monthly Legend Card", features: [
"100 Hours / 50 Days", "15 Hours Free", "15 Drinks + Chips"],
},
]}
title="VIP & Unlimited Passes"
description="Unlock unlimited potential with our exclusive membership cards."
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "sparkles-gradient"}}
tag="Booking"
title="Reserve Your Gaming Slot"
description="Call us to book your station and step into the future of gaming."
buttonText="Call Now"
onSubmit={(email) => console.log('Booked')}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="JAMMIN ZONE"
columns={[
{
title: "Gaming Zone", items: [
{
label: "About Us", href: "#hero"},
{
label: "Games", href: "#games"},
],
},
{
title: "Memberships", items: [
{
label: "Offers", href: "#offers"},
{
label: "Book Now", href: "#contact"},
],
},
{
title: "Legal", items: [
{
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service", href: "#"},
],
},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}