src/app/contact/page.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+
+export default function ContactPage() {
+  const navItems = [
+    { name: "Home", id: "/#hero" },
+    { name: "About", id: "/#about" },
+    { name: "How It Works", id: "/#features" },
+    { name: "Leaderboard", id: "/#products" },
+    { name: "Player Reviews", id: "/#testimonials" },
+    { name: "FAQ", id: "/#faq" },
+    { name: "Contact", id: "/contact" }
+  ];
+
+  const navbarButton = {
+    text: "Start Predicting",    href: "/contact"
+  };
+
+  const footerColumns = [
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/#about" },
+        { label: "Contact Us", href: "/contact" },
+        { label: "Privacy Policy", href: "#" }
+      ]
+    },
+    {
+      title: "Game",      items: [
+        { label: "How It Works", href: "/#features" },
+        { label: "Leaderboard", href: "/#products" },
+        { label: "Rules", href: "/#features" }
+      ]
+    },
+    {
+      title: "Support",      items: [
+        { label: "FAQ", href: "/#faq" },
+        { label: "Support", href: "/contact" },
+        { label: "Terms of Service", href: "#" }
+      ]
+    }
+  ];
+
+  const testimonialsData = [
+    {
+      id: "t1",      name: "Ahmed Khan",      role: "Avid Fan",      company: "Football Enthusiast",      rating: 5,
+      imageSrc: "https://img.b2bpic.net/free-photo/young-dark-haired-man-smiling-posing_1407314.jpg?_wi=1"
+    },
+    {
+      id: "t2",      name: "Maria Silva",      role: "Casual Player",      company: "Prediction Rookie",      rating: 5,
+      imageSrc: "https://img.b2bpic.net/free-photo/young-happy-brunette-girl-denim-jacket_1407315.jpg?_wi=1"
+    },
+    {
+      id: "t3",      name: "Chris Lee",      role: "Stats Guru",      company: "Analyst by Heart",      rating: 5,
+      imageSrc: "https://img.b2bpic.net/free-photo/young-african-american-man-isolated-blue-background_1407316.jpg?_wi=1"
+    },
+    {
+      id: "t4",      name: "Sophie Dubois",      role: "Friendly Competitor",      company: "Team Captain",      rating: 4,
+      imageSrc: "https://img.b2bpic.net/free-photo/cheerful-brunette-female-isolated_1407317.jpg?_wi=1"
+    },
+    {
+      id: "t5",      name: "Leo Messi",      role: "Legendary Player",      company: "Argentina National Team",      rating: 5,
+      imageSrc: "https://img.b2bpic.net/free-photo/messi-ball_1407318.jpg?_wi=1",      imageAlt: "Leo Messi testimonial"
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="largeSmallSizeMediumTitles"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={navItems}
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qumeee"
+            logoAlt="World Cup Predictor Logo"
+            brandName="World Cup Predictor"
+            button={navbarButton}
+          />
+        </div>
+
+        <div id="contact-details" data-section="contact-details">
+          <ContactCenter
+            useInvertedBackground={true}
+            background={{ variant: "plain" }}
+            tag="Contact & Bookings"
+            title="Book Your Consultation or Reach Out"
+            description="For appointments and inquiries, please call us at 0312 3999509. You can also send us a message through the form below, and we'll get back to you promptly."
+            inputPlaceholder="Your Email"
+            buttonText="Send Inquiry"
+            termsText="By sending an inquiry you're confirming that you agree with our Terms and Conditions."
+          />
+        </div>
+        
+        <div id="customer-reviews" data-section="customer-reviews">
+          <TestimonialCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="uniform-all-items-equal"
+            useInvertedBackground={true}
+            testimonials={testimonialsData}
+            title="What Our Clients Say"
+            description="Hear from our satisfied customers about their experience."
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            videoSrc="https://img.b2bpic.net/free-photo/soccer-ball-football-stadium-grass_1407254.jpg?_wi=1"
+            videoAriaLabel="Abstract football stadium background video"
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg"
+            logoAlt="World Cup Predictor Logo"
+            logoText="World Cup Predictor"
+            columns={footerColumns}
+            copyrightText="© 2024 World Cup Predictor | All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -12,7 +12,10 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 import TextAbout from '@/components/sections/about/TextAbout';
-import { Trophy, Users, ShieldCheck } from "lucide-react";
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
+import { Trophy, Users, ShieldCheck, Wifi, Car, Cloud, Coffee } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -38,6 +41,15 @@ export default function LandingPage() {
           name: "About",          id: "#about"},
         {
           name: "How It Works",          id: "#features"},
+        {
+          name: "Rooms & Rates", id: "#rooms-rates"
+        },
+        {
+          name: "Gallery", id: "#gallery"
+        },
+        {
+          name: "Amenities", id: "#amenities"
+        },
         {
           name: "Leaderboard",          id: "#products"},
         {
@@ -106,6 +118,86 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="rooms-rates" data-section="rooms-rates">
+      <PricingCardNine
+      animationType="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={true}
+      title="Rooms & Rates"
+      description="Explore our luxurious rooms and competitive rates designed for every traveler."
+      plans={[
+        {
+          id: "room1",          title: "Standard Room",          price: "$120",          period: "/night",          features: ["Free Wi-Fi", "Comfortable Bed", "En-suite Bathroom", "City View"],
+          button: { text: "Book Now", href: "#contact" },
+          imageSrc: "https://img.b2bpic.net/free-photo/bed-with-white-sheets-light-room_1406830.jpg?_wi=1",          imageAlt: "Standard room"
+        },
+        {
+          id: "room2",          title: "Deluxe Suite",          price: "$250",          period: "/night",          features: ["Free Wi-Fi", "King-size Bed", "Spacious Living Area", "Balcony Access", "Complimentary Breakfast"],
+          button: { text: "Book Now", href: "#contact" },
+          imageSrc: "https://img.b2bpic.net/free-photo/spacious-hotel-room-with-bed-white-walls_1407335.jpg?_wi=1",          imageAlt: "Deluxe suite"
+        },
+        {
+          id: "room3",          title: "Executive Penthouse",          price: "$500",          period: "/night",          features: ["Free Wi-Fi", "Premium Amenities", "Private Jacuzzi", "Panoramic Views", "Personal Butler Service", "Gourmet Breakfast"],
+          button: { text: "Book Now", href: "#contact" },
+          imageSrc: "https://img.b2bpic.net/free-photo/hotel-room-with-luxurious-bed-table_1407336.jpg?_wi=1",          imageAlt: "Executive penthouse"
+        }
+      ]}
+    />
+  </div>
+
+  <div id="gallery" data-section="gallery">
+      <ProductCardFour
+      animationType="slide-up"
+      textboxLayout="default"
+      gridVariant="uniform-all-items-equal"
+      useInvertedBackground={false}
+      title="Our Gallery"
+      description="A visual journey through our beautiful hotel and its surroundings."
+      products={[
+        {
+          id: "g1",          name: "Hotel Lobby",          price: "",          variant: "",          imageSrc: "https://img.b2bpic.net/free-photo/modern-hotel-lobby-interior-with-reception-desk_1407337.jpg?_wi=1",          imageAlt: "Hotel lobby"
+        },
+        {
+          id: "g2",          name: "Swimming Pool",          price: "",          variant: "",          imageSrc: "https://img.b2bpic.net/free-photo/swimming-pool_1407338.jpg?_wi=1",          imageAlt: "Swimming pool"
+        },
+        {
+          id: "g3",          name: "Restaurant",          price: "",          variant: "",          imageSrc: "https://img.b2bpic.net/free-photo/empty-restaurant-interior_1407339.jpg?_wi=1",          imageAlt: "Hotel restaurant"
+        },
+        {
+          id: "g4",          name: "Fitness Center",          price: "",          variant: "",          imageSrc: "https://img.b2bpic.net/free-photo/hotel-gym-fitness-center-equipment-room-with-treadmills-weight-benches-and-ellipticals-empty_1407340.jpg?_wi=1",          imageAlt: "Fitness center"
+        }
+      ]}
+    />
+  </div>
+
+  <div id="amenities" data-section="amenities">
+      <FeatureBorderGlow
+      animationType="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={true}
+      title="Our Premium Amenities"
+      description="Experience unparalleled comfort and convenience with our top-tier services."
+      features={[
+        {
+          icon: Wifi,
+          title: "Complimentary Wi-Fi",          description: "Stay connected with high-speed internet access throughout your stay."
+        },
+        {
+          icon: Car,
+          title: "Free Parking",          description: "Enjoy hassle-free parking options for all our guests."
+        },
+        {
+          icon: Cloud,
+          title: "Air Conditioning",          description: "Individual climate control in every room for your comfort."
+        },
+        {
+          icon: Coffee,
+          title: "Delicious Breakfast",          description: "Start your day with a complimentary, freshly prepared breakfast."
+        }
+      ]}
+    />
+  </div>
+
   <div id="products" data-section="products">
       <ProductCardTwo
       animationType="slide-up"

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
+  --background: #f5f4f0;
+  --card: #ffffff;
+  --foreground: #1a1a1a;
+  --primary-cta: #2c2c2c;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #f5f4f0;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --accent: #8a8a8a;
+  --background-accent: #e8e6e1;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);