Merge version_4 into main #9
236
src/app/page.tsx
236
src/app/page.tsx
@@ -9,32 +9,28 @@ import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||||
import { Zap, Target } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Zap, Target, CalendarDays, BarChart3, HelpCircle, Mail } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
const SplashScreen = ({ onComplete }: { onComplete: () => void }) => (
|
||||
<motion.div
|
||||
initial={{ opacity: 1 }}
|
||||
animate={{ opacity: 0 }}
|
||||
transition={{ delay: 2, duration: 0.8 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ delay: 1.5, duration: 0.6 }}
|
||||
onAnimationComplete={onComplete}
|
||||
className="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-background"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ type: "spring", stiffness: 200, damping: 20 }}
|
||||
className="flex flex-col items-center gap-4"
|
||||
className="flex flex-col items-center gap-6"
|
||||
>
|
||||
<motion.img
|
||||
animate={{ scale: [1, 1.05, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
|
||||
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DhE9kloAj7sgphsljU3n3hBaXI/uploaded-1778727825823-mzx0gsmw.png"
|
||||
alt="Lanova Arena Logo"
|
||||
className="w-32 h-32 object-contain"
|
||||
/>
|
||||
<motion.h1 className="text-2xl font-bold text-foreground">Lanova Arena</motion.h1>
|
||||
<div className="w-24 h-24 rounded-full bg-primary-cta flex items-center justify-center">
|
||||
<Zap className="text-white w-12 h-12" />
|
||||
</div>
|
||||
<h1 className="text-4xl font-extrabold tracking-tighter">LANOVA ARENA</h1>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
@@ -46,128 +42,118 @@ export default function LandingPage() {
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="fluid"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
background="noise"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<AnimatePresence>
|
||||
{loading && <SplashScreen onComplete={() => setLoading(false)} />}
|
||||
</AnimatePresence>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Courts", id: "facilities" },
|
||||
{ name: "Booking", id: "booking" },
|
||||
{ name: "Stats", id: "stats" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="Lanova Arena"
|
||||
button={{ text: "Book Now", href: "#booking" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Arena", id: "hero" },
|
||||
{ name: "Booking", id: "booking" },
|
||||
{ name: "Pulse", id: "facilities" },
|
||||
{ name: "Stats", id: "stats" },
|
||||
]}
|
||||
brandName="LANOVA"
|
||||
button={{ text: "Book Now", href: "#booking" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="*Elevated* Arena Performance"
|
||||
description="Premium Padel and electric football turf meets the city's most vibrant lounge."
|
||||
kpis={[
|
||||
{ value: "6", label: "Elite Padel" },
|
||||
{ value: "1", label: "Pro Turf" },
|
||||
{ value: "24/7", label: "Hype Lounge" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "Explore Courts", href: "#facilities" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-empty-paddle-tennis-field_23-2149458993.jpg?_wi=1"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Peak Performance. Zero Compromise."
|
||||
description="Step into the future of sports. Lanova Arena is the ultimate sanctuary for elite Padel and high-intensity turf training."
|
||||
kpis={[
|
||||
{ value: "6", label: "Elite Courts" },
|
||||
{ value: "24/7", label: "Pulse Access" },
|
||||
{ value: "99%", label: "Hype Index" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "Join The Arena", href: "#booking" }, { text: "Pulse Facilities", href: "#facilities" }]}
|
||||
imageSrc="https://images.unsplash.com/photo-1554068865-4a3cd735d3ce?q=80&w=2000"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="booking" data-section="booking">
|
||||
<PricingCardTwo
|
||||
title="*Gamified* Booking Engine"
|
||||
description="Book your court, pick your slot, and secure your win."
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split-actions"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "p1", badge: "Padel", price: "$45", subtitle: "Panoramic Court", features: ["Glass Walls", "Premium Turf", "Pro Net"],
|
||||
buttons: [{ text: "Book Padel" }]
|
||||
},
|
||||
{
|
||||
id: "p2", badge: "Football", price: "$90", subtitle: "Electric Turf", features: ["FIFA Standards", "Floodlights", "Match Ready"],
|
||||
buttons: [{ text: "Book Field" }]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="booking" data-section="booking">
|
||||
<PricingCardTwo
|
||||
title="Gamified Booking Engine"
|
||||
description="Secure your court. Select your slot. Lock in your session."
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split-actions"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "p1", badge: "Pro Padel", badgeIcon: Target, price: "$55", subtitle: "Panoramic Glass Courts", features: ["Climate Controlled", "Premium Turf", "Pro-Shop Access"],
|
||||
buttons: [{ text: "Claim Your Slot" }]
|
||||
},
|
||||
{
|
||||
id: "p2", badge: "Electric Football", badgeIcon: Zap, price: "$110", subtitle: "Arena-Grade Pitch", features: ["FIFA Quality", "Smart Lighting", "Locker Access"],
|
||||
buttons: [{ text: "Claim Your Slot" }]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="facilities" data-section="facilities">
|
||||
<FeatureCardTwentyFive
|
||||
title="*Arena* Pulse Facilities"
|
||||
description="Where passion meets high-performance engineering."
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Panoramic Padel", description: "State-of-the-art courts designed for professional-grade rallies.", icon: Target,
|
||||
mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/side-view-young-woman-playing-paddle-tennis_23-2149443577.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/side-view-empty-paddle-tennis-field_23-2149458993.jpg?_wi=2" }]
|
||||
},
|
||||
{
|
||||
title: "Electric Football", description: "High-intensity synthetic turf engineered for explosive speed.", icon: Zap,
|
||||
mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/american-football-american-football-player-professional-sport-stadium_654080-230.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/closeup-coloured-lawn-field-sunlight-daytime_181624-20417.jpg" }]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="facilities" data-section="facilities">
|
||||
<FeatureCardTwentyFive
|
||||
title="The Arena Pulse"
|
||||
description="A state-of-the-art ecosystem designed for maximum output."
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Smart-Grid Padel",
|
||||
description: "Precision-engineered glass courts with integrated performance tracking sensors.",
|
||||
icon: Target,
|
||||
mediaItems: [{ imageSrc: "https://images.unsplash.com/photo-1628172906564-9040375f4d1e?q=80&w=1000" }, { imageSrc: "https://images.unsplash.com/photo-1590486803833-9c3dbb60412e?q=80&w=1000" }]
|
||||
},
|
||||
{
|
||||
title: "Velocity Football",
|
||||
description: "High-intensity synthetic turf system, fully floodlit for round-the-clock competition.",
|
||||
icon: Zap,
|
||||
mediaItems: [{ imageSrc: "https://images.unsplash.com/photo-1518091043644-c1d4457512c6?q=80&w=1000" }, { imageSrc: "https://images.unsplash.com/photo-1431323487602-b228004696d1?q=80&w=1000" }]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="stats" data-section="stats">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
title="*Street-Style* Operational Stats"
|
||||
description="Detailed performance analytics for our facilities."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "s1", value: "98%", title: "User Satisfaction", description: "High-tempo feedback", imageSrc: "http://img.b2bpic.net/free-photo/viewpoint-toaca-peak-carpathians-romania-nature-sunset_1268-19791.jpg" },
|
||||
{ id: "s2", value: "1.2k", title: "Active Players", description: "Lanova community", imageSrc: "http://img.b2bpic.net/free-photo/modern-building-illuminated-night_1150-18357.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="stats" data-section="stats">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
title="Operational Velocity"
|
||||
description="Real-time data for high-tempo athletes."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "s1", value: "482", title: "Monthly Sessions", description: "High frequency output", imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1000" },
|
||||
{ id: "s2", value: "98%", title: "Match Satisfaction", description: "Community benchmark", imageSrc: "https://images.unsplash.com/photo-1543326727-cf6dc395f83c?q=80&w=1000" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
title="*Quick* Answers"
|
||||
description="Everything about the Lanova life."
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Booking?", content: "Instantly book through our site." },
|
||||
{ id: "q2", title: "Lounge Access?", content: "Included with all VIP passes." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<FooterMedia
|
||||
logoText="Lanova Arena"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/white-gray-building-interior_250224-79.jpg"
|
||||
columns={[
|
||||
{ title: "Arena", items: [{ label: "Courts", href: "#facilities" }, { label: "Booking", href: "#booking" }] },
|
||||
{ title: "Club", items: [{ label: "Lounge", href: "#" }, { label: "Careers", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<FooterMedia
|
||||
logoText="LANOVA ARENA"
|
||||
imageSrc="https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2000"
|
||||
columns={[
|
||||
{ title: "Arena", items: [{ label: "Padel Courts", href: "#facilities" }, { label: "Football Pitch", href: "#facilities" }] },
|
||||
{ title: "Support", items: [{ label: "Booking Help", href: "#" }, { label: "Arena Pulse", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user