Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,14 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import { Award, Gauge, Moon, ShoppingBag, Utensils, Zap } from "lucide-react";
 
@@ -21,30 +21,23 @@ export default function LandingPage() {
         borderRadius="soft"
         contentWidth="medium"
         sizing="medium"
-        background="circleGradient"
+        background="noiseDiagonalGradient"
-        cardStyle="glass-elevated"
+        cardStyle="gradient-bordered"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",          id: "hero"},
+        { name: "About", id: "about" },
-        {
+        { name: "Features", id: "features" },
-          name: "About",          id: "about"},
+        { name: "Metrics", id: "metrics" },
-        {
+        { name: "Sponsors", id: "socialProof" },
-          name: "Features",          id: "features"},
+        { name: "FAQ", id: "faq" },
-        {
+        { name: "Contact", id: "contact" },
-          name: "Metrics",          id: "metrics"},
-        {
-          name: "Sponsors",          id: "socialProof"},
-        {
-          name: "FAQ",          id: "faq"},
-        {
-          name: "Contact",          id: "contact"},
       ]}
       brandName="EMP"
     />
@@ -52,52 +45,24 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars"}}
       title="Edinburg Motorsports Park"
       description="The premier drag racing destination in Texas. Experience the speed, the sound, and the adrenaline of competitive racing in the heart of the valley."
       kpis={[
-        {
+        { value: "100%", label: "Texas Spirit" },
-          value: "100%",          label: "Texas Spirit"},
+        { value: "2024", label: "Track Champions" },
-        {
+        { value: "281", label: "Highway Location" },
-          value: "2024",          label: "Track Champions"},
-        {
-          value: "281",          label: "Highway Location"},
       ]}
       enableKpiAnimation={true}
-      buttons={[
+      buttons={[{ text: "Check Social Media", href: "https://facebook.com" }]}
-        {
-          text: "Check Social Media",          href: "https://facebook.com"},
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/mesmerizing-grayscale-shot-road-beautiful-landscape_181624-28638.jpg"
       imageAlt="Racing action at the track"
       mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/shot-small-stone-stadium-grass-yard_181624-9791.jpg",          alt: "Racing fan 1"},
-        {
-          src: "http://img.b2bpic.net/free-photo/line-shaped-neon-lights-background_23-2147815498.jpg",          alt: "Racing fan 2"},
-        {
-          src: "http://img.b2bpic.net/free-photo/top-view-road-construction-brcko-district-surrounded-by-fields-bosnia-herzegovina_181624-54550.jpg",          alt: "Racing fan 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/aerial-view-winding-road-surrounded-by-greens-trees_181624-38224.jpg",          alt: "Racing fan 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/empty-road-near-modern-building-exterior_1127-2842.jpg",          alt: "Racing fan 5"},
-      ]}
-      avatarText="Join our growing community of racers."
       marqueeItems={[
-        {
+        { type: "text", text: "High Performance" },
-          type: "text",          text: "High Performance"},
+        { type: "text-icon", text: "Speedway", icon: Zap },
-        {
+        { type: "text", text: "Drag Racing" },
-          type: "text-icon",          text: "Speedway",          icon: Zap,
+        { type: "text-icon", text: "Night Races", icon: Moon },
-        },
-        {
-          type: "text",          text: "Drag Racing"},
-        {
-          type: "text-icon",          text: "Night Races",          icon: Moon,
-        },
-        {
-          type: "text",          text: "Open Weekly"},
       ]}
     />
   </div>
@@ -116,120 +81,86 @@ export default function LandingPage() {
   </div>
 
   <div id="features" data-section="features">
-      <FeatureBorderGlow
+      <FeatureBento
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
-      features={[
-        {
-          icon: ShoppingBag,
-          title: "Cool Station",          description: "Get your EMP merch, souvenirs, race gear, and your required Tech Card."},
-        {
-          icon: Gauge,
-          title: "Fuel Station",          description: "Several types of high-performance racing fuel available for all your vehicle needs."},
-        {
-          icon: Utensils,
-          title: "Pit Stop Grill",          description: "Track-side food and beverages to keep you fueled throughout your racing day."},
-      ]}
       title="Facility Highlights"
       description="Everything you need for a successful day at the track."
+      features={[
+        { title: "Cool Station", description: "Get your EMP merch, souvenirs, race gear, and required Tech Card.", bentoComponent: "reveal-icon", icon: ShoppingBag },
+        { title: "Fuel Station", description: "High-performance racing fuel for your vehicle needs.", bentoComponent: "reveal-icon", icon: Gauge },
+        { title: "Pit Stop Grill", description: "Track-side food and drinks to keep you fueled.", bentoComponent: "reveal-icon", icon: Utensils }
+      ]}
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardSeven
+      <MetricCardTwo
       animationType="slide-up"
-      textboxLayout="default"
+      textboxLayout="split"
-      useInvertedBackground={true}
+      gridVariant="bento-grid"
-      metrics={[
-        {
-          id: "m1",          value: "Friday",          title: "Prime Race Time",          items: [
-            "7PM - 11PM (Winter)",            "7PM - 2AM (Every Week)"],
-        },
-        {
-          id: "m2",          value: "Saturday",          title: "Weekend Action",          items: [
-            "4PM - 12AM",            "Every other Week"],
-        },
-        {
-          id: "m3",          value: "Wednesday",          title: "Mid-Week",          items: [
-            "8PM - 11PM",            "Every other Week"],
-        },
-      ]}
       title="Race Schedule"
       description="Plan your visit to Edinburg Motorsports Park."
+      useInvertedBackground={false}
+      metrics={[
+        { id: "f", value: "Friday", description: "7PM - 11PM (Winter) | 7PM - 2AM (Every Week)" },
+        { id: "s", value: "Saturday", description: "4PM - 12AM | Every other Week" },
+        { id: "w", value: "Wednesday", description: "8PM - 11PM | Every other Week" },
+      ]}
     />
   </div>
 
   <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
+      <TestimonialCardTwelve
-      textboxLayout="default"
+      cardAnimation="slide-up"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
-      names={[
+      cardTitle="Our Proud Sponsors"
-        "Speed Tech Performance",        "Valley Fuel Solutions",        "Drag Racing Gear Inc.",        "Track Masters Safety",        "Performance Lube Pros",        "Race Way Tires",        "Automotive Accessory Specialists"]}
+      cardTag="Partners"
-      title="Our Proud Sponsors"
+      testimonials={[
-      description="We are supported by industry leaders who help keep racing alive."
+        { id: "1", name: "Speed Tech Performance", imageSrc: "http://img.b2bpic.net/free-photo/shot-small-stone-stadium-grass-yard_181624-9791.jpg" },
+        { id: "2", name: "Valley Fuel Solutions", imageSrc: "http://img.b2bpic.net/free-photo/line-shaped-neon-lights-background_23-2147815498.jpg?_wi=1" },
+        { id: "3", name: "Drag Racing Gear Inc.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-road-construction-brcko-district-surrounded-by-fields-bosnia-herzegovina_181624-54550.jpg" }
+      ]}
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
+      <FaqSplitMedia
-      useInvertedBackground={true}
       faqs={[
-        {
+        { id: "1", title: "Where do I get my Tech Card?", content: "Visit our Cool Station to pick up your Tech Card before hitting the track." },
-          id: "faq1",          title: "Where do I get my Tech Card?",          content: "Visit our Cool Station to pick up your Tech Card before hitting the track."},
+        { id: "2", title: "Are there food options available?", content: "Yes, visit our Pit Stop Grill for all your trackside food and beverage needs." },
-        {
-          id: "faq2",          title: "Are there food options available?",          content: "Yes, visit our Pit Stop Grill for all your trackside food and beverage needs."},
-        {
-          id: "faq3",          title: "How can I see if you are open on Thursday or Saturday?",          content: "Please check our official Facebook page for the latest updates on Thursday and Saturday status."},
       ]}
-      sideTitle="Common Questions"
+      title="Common Questions"
-      faqsAnimation="blur-reveal"
+      description="Answers to frequently asked questions about our facility."
+      faqsAnimation="slide-up"
+      imageSrc="http://img.b2bpic.net/free-photo/aerial-view-winding-road-surrounded-by-greens-trees_181624-38224.jpg"
+      textboxLayout="split"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
+      <ContactSplitForm
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient"}}
-      tag="Contact Us"
       title="Get In Touch"
       description="Have questions about events or becoming a sponsor? Reach out to us today."
-      buttons={[
+      useInvertedBackground={false}
-        {
+      inputs={[
-          text: "Call 956-587-1349",          href: "tel:9565871349"},
+          { name: "name", type: "text", placeholder: "Name" },
-        {
+          { name: "email", type: "email", placeholder: "Email" }
-          text: "Email info@emp956.com",          href: "mailto:info@emp956.com"},
       ]}
+      imageSrc="http://img.b2bpic.net/free-photo/empty-road-near-modern-building-exterior_1127-2842.jpg"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterSimple
+      <FooterMedia
+      logoText="EMP"
+      imageSrc="http://img.b2bpic.net/free-photo/line-shaped-neon-lights-background_23-2147815498.jpg?_wi=2"
       columns={[
-        {
+        { title: "Information", items: [{ label: "About", href: "#about" }, { label: "Features", href: "#features" }] },
-          title: "Information",          items: [
+        { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
-            {
-              label: "About EMP",              href: "#about"},
-            {
-              label: "Social Media",              href: "https://facebook.com"},
-            {
-              label: "Fuel & Services",              href: "#features"},
-          ],
-        },
-        {
-          title: "Contact",          items: [
-            {
-              label: "956-587-1349",              href: "tel:9565871349"},
-            {
-              label: "info@emp956.com",              href: "mailto:info@emp956.com"},
-            {
-              label: "15920 N. HIGHWAY 281, EDINBURG, TX",              href: "#"},
-          ],
-        },
       ]}
-      bottomLeftText="Copyright © Edinburg Motorsports Park"
-      bottomRightText="Powered by ES Designs"
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
+  --background: #0a0a0a;
-  --card: #ffffff;
+  --card: #1a1a1a;
-  --foreground: #1c1c1c;
+  --foreground: #ffffff;
-  --primary-cta: #1f514c;
+  --primary-cta: #ff0000;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #1c1c1c;
-  --accent: #159c49;
+  --accent: #991b1b;
-  --background-accent: #a8e8ba;
+  --background-accent: #7f1d1d;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);