Update src/app/page.tsx

src/app/page.tsx

@@ -10,7 +10,7 @@ import TestimonialCardFifteen from "@/components/sections/testimonial/Testimonia
 import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 import ContactCenter from "@/components/sections/contact/ContactCenter";
-import { Zap, BowlingBall, Utensils, Star, Phone, MapPin, CalendarDays, Users } from "lucide-react";
+import { Zap, Circle, Utensils, Star, Phone, MapPin, CalendarDays, Users } from "lucide-react";
 
 export default function Page() {
     const navItems = [
@@ -46,88 +46,104 @@ export default function Page() {
     return (
         <ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="primary-glow" secondaryButtonStyle="layered" headingFontWeight="medium">
             <ReactLenis root>
-                <NavbarLayoutFloatingInline
+                <div id="nav" data-section="nav">
-                    navItems={navItems}
+                  <NavbarLayoutFloatingInline
-                    brandName="PinBowl Alley"
+                      navItems={navItems}
-                    button={{ text: "Call Now", href: "tel:+15550000000" }}
+                      brandName="PinBowl Alley"
-                />
+                      button={{ text: "Call Now", href: "tel:+15550000000" }}
-                <HeroCentered
+                  />
-                    background={{ variant: "rotated-rays-animated-grid" }}
+                </div>
-                    avatars={avatars}
+                <div id="hero" data-section="hero">
-                    avatarText="4.8 rating from 78+ customers"
+                  <HeroCentered
-                    title="Limon’s Favorite Bowling, Pinball & Dining Experience"
+                      background={{ variant: "rotated-rays-animated-grid" }}
-                    description="Family-friendly fun, great food, and retro vibes all in one place. Discover the hidden gem of Limon today."
+                      avatars={avatars}
-                    buttons={[
+                      avatarText="4.8 rating from 78+ customers"
-                        { text: "Call Now", href: "tel:+15550000000" },
+                      title="Limon’s Favorite Bowling, Pinball & Dining Experience"
-                        { text: "Book a Lane", href: "#parties" },
+                      description="Discover the ultimate local hangout! Packed with high-energy pinball, nostalgic bowling lanes, and delicious bites, our spot is designed for spontaneous, convenient, and non-stop fun right in your neighborhood."
-                    ]}
+                      buttons={[
-                />
+                          { text: "Call Now", href: "tel:+15550000000" },
-                <FeatureBento
+                          { text: "Book a Lane", href: "#parties" },
-                    features={features}
+                      ]}
-                    animationType="none"
+                  />
-                    tag="What We Offer"
+                </div>
-                    title="More Than Just Bowling"
+                <div id="activities" data-section="activities">
-                    description="A full experience for families, groups, and casual hangouts."
+                  <FeatureBento
-                    textboxLayout="default"
+                      features={features}
-                    useInvertedBackground={false}
+                      animationType="none"
-                />
+                      tag="What We Offer"
-                <FeatureBorderGlow
+                      title="More Than Just Bowling"
-                    tag="Why Choose Us"
+                      description="A full experience for families, groups, and casual hangouts."
-                    tagIcon={Users}
+                      textboxLayout="default"
-                    title="The PinBowl Promise"
+                      useInvertedBackground={false}
-                    description="We are a family-owned destination committed to local fun and quality time."
+                  />
-                    animationType="slide-up"
+                </div>
-                    textboxLayout="default"
+                <div id="why-us" data-section="why-us">
-                    useInvertedBackground={false}
+                  <FeatureBorderGlow
-                    features={[
+                      tag="Why Choose Us"
-                        { icon: Users, title: "Family-Owned", description: "Experience the warmth of a family-operated business." },
+                      tagIcon={Users}
-                        { icon: Star, title: "Unique Retro Vibe", description: "Authentic lanes and games you won't find anywhere else." },
+                      title="The PinBowl Promise"
-                        { icon: Utensils, title: "Made-to-Order Food", description: "High-quality burgers, pizza, and weekly specials." },
+                      description="We are a family-owned destination committed to local fun and quality time."
-                        { icon: Phone, title: "Friendly Staff", description: "We are here to make your visit unforgettable." },
+                      animationType="slide-up"
-                    ]}
+                      textboxLayout="default"
-                />
+                      useInvertedBackground={false}
-                <TestimonialCardFifteen
+                      features={[
-                    testimonial="Best burgers I've had in a long time! A total hidden gem in Limon for families."
+                          { icon: Users, title: "Family-Owned", description: "Experience the warmth of a family-operated business." },
-                    rating={5}
+                          { icon: Star, title: "Unique Retro Vibe", description: "Authentic lanes and games you won't find anywhere else." },
-                    author="Local Resident"
+                          { icon: Utensils, title: "Made-to-Order Food", description: "High-quality burgers, pizza, and weekly specials." },
-                    avatars={avatars.slice(0, 1)}
+                          { icon: Phone, title: "Friendly Staff", description: "We are here to make your visit unforgettable." },
-                    ratingAnimation="slide-up"
+                      ]}
-                    avatarsAnimation="slide-up"
+                  />
-                    useInvertedBackground={false}
+                </div>
-                />
+                <div id="reviews" data-section="reviews">
-                <PricingCardEight
+                  <TestimonialCardFifteen
-                    tag="Plan Your Visit"
+                      testimonial="Best burgers I've had in a long time! A total hidden gem in Limon for families."
-                    tagIcon={CalendarDays}
+                      rating={5}
-                    title="Ready for some fun?"
+                      author="Local Resident"
-                    description="Check our current availability and book your group today."
+                      avatars={avatars.slice(0, 1)}
-                    animationType="opacity"
+                      ratingAnimation="slide-up"
-                    textboxLayout="default"
+                      avatarsAnimation="slide-up"
-                    useInvertedBackground={false}
+                      useInvertedBackground={false}
-                    plans={[
+                  />
-                        { id: "call", badge: "Quick Info", price: "Call Us", subtitle: "Immediate booking", buttons: [{ text: "Call Now", href: "tel:+15550000000" }], features: ["Check lane availability", "Book a party", "Large group rates"] },
+                </div>
-                        { id: "map", badge: "Location", price: "Visit Us", subtitle: "Find our location", buttons: [{ text: "Get Directions", href: "https://maps.google.com" }], features: ["Open daily", "Ample parking", "Centrally located"] },
+                <div id="menu" data-section="menu">
-                    ]}
+                  <PricingCardEight
-                />
+                      tag="Plan Your Visit"
-                <ContactCenter
+                      tagIcon={CalendarDays}
-                    tag="Contact Us"
+                      title="Ready for some fun?"
-                    tagIcon={Phone}
+                      description="Check our current availability and book your group today."
-                    title="Plan Your Visit Today"
+                      animationType="opacity"
-                    description="Get in touch for event bookings, questions, or just to say hi!"
+                      textboxLayout="default"
-                    background={{ variant: "animated-grid" }}
+                      useInvertedBackground={false}
-                    useInvertedBackground={false}
+                      plans={[
-                    inputPlaceholder="Enter your email"
+                          { id: "call", badge: "Quick Info", price: "Call Us", subtitle: "Immediate booking", buttons: [{ text: "Call Now", href: "tel:+15550000000" }], features: ["Check lane availability", "Book a party", "Large group rates"] },
-                    buttonText="Get Updates"
+                          { id: "map", badge: "Location", price: "Visit Us", subtitle: "Find our location", buttons: [{ text: "Get Directions", href: "https://maps.google.com" }], features: ["Open daily", "Ample parking", "Centrally located"] },
-                />
+                      ]}
-                <FooterBaseReveal
+                  />
-                    logoText="PinBowl"
+                </div>
-                    columns={[
+                <div id="contact" data-section="contact">
-                        { title: "Visit", items: [{ label: "Bowling", href: "#" }, { label: "Arcade", href: "#" }, { label: "Restaurant", href: "#" }] },
+                  <ContactCenter
-                        { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Reviews", href: "#" }, { label: "Contact", href: "#contact" }] },
+                      tag="Contact Us"
-                        { title: "Bookings", items: [{ label: "Parties", href: "#" }, { label: "Events", href: "#" }, { label: "Group Rates", href: "#" }] },
+                      tagIcon={Phone}
-                        { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+                      title="Plan Your Visit Today"
-                    ]}
+                      description="Get in touch for event bookings, questions, or just to say hi!"
-                    copyrightText="© 2024 PinBowl Alley. All rights reserved."
+                      background={{ variant: "animated-grid" }}
-                />
+                      useInvertedBackground={false}
+                      inputPlaceholder="Enter your email"
+                      buttonText="Get Updates"
+                  />
+                </div>
+                <div id="footer" data-section="footer">
+                  <FooterBaseReveal
+                      logoText="PinBowl"
+                      columns={[
+                          { title: "Visit", items: [{ label: "Bowling", href: "#" }, { label: "Arcade", href: "#" }, { label: "Restaurant", href: "#" }] },
+                          { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Reviews", href: "#" }, { label: "Contact", href: "#contact" }] },
+                          { title: "Bookings", items: [{ label: "Parties", href: "#" }, { label: "Events", href: "#" }, { label: "Group Rates", href: "#" }] },
+                          { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+                      ]}
+                      copyrightText="© 2024 PinBowl Alley. All rights reserved."
+                  />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );