Merge version_3 into main

Merge version_3 into main

src/app/archives/page.tsx

@@ -4,46 +4,46 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
-
-const navItems = [
-  { name: "Home", id: "/" },
-  { name: "Archives", id: "/archives" },
-  { name: "Search", id: "/search" },
-  { name: "Top Scorers", id: "/top-scorers" },
-  { name: "About", id: "/#about" },
-  { name: "Matches", id: "/#matches" },
-  { name: "Stats", id: "/#stats" },
-  { name: "Fans Say", id: "/#testimonials" },
-  { name: "FAQ", id: "/#faq" },
-  { name: "Contact", id: "/#contact" },
-  { name: "Theme", id: "/theme" }
-];
-
-const footerColumns = [
-  {
-    title: "Navigate",    items: [
-      { label: "Home", href: "/" },
-      { label: "Matches", href: "/#matches" },
-      { label: "Stats", href: "/#stats" },
-      { label: "Archives", href: "/archives" },
-    ],
-  },
-  {
-    title: "Resources",    items: [
-      { label: "FAQ", href: "/#faq" },
-      { label: "About Us", href: "/#about" },
-      { label: "Contact", href: "/#contact" },
-    ],
-  },
-  {
-    title: "Legal",    items: [
-      { label: "Privacy Policy", href: "/privacy" },      { label: "Terms of Service", href: "/terms" },
-    ],
-  },
-];
 
 export default function ArchivesPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Search", id: "/search" },
+    { name: "Archives", id: "/archives" },
+    { name: "About", id: "/#about" },
+    { name: "Matches", id: "/#matches" },
+    { name: "Stats", id: "/#stats" },
+    { name: "Fans Say", id: "/#testimonials" },
+    { name: "FAQ", id: "/#faq" },
+    { name: "Contact", id: "/#contact" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Navigate",      items: [
+        { label: "Home", href: "/" },
+        { label: "Search", href: "/search" },
+        { label: "Archives", href: "/archives" },
+        { label: "Matches", href: "/#matches" },
+        { label: "Stats", href: "/#stats" }
+      ],
+    },
+    {
+      title: "Resources",      items: [
+        { label: "FAQ", href: "/#faq" },
+        { label: "About Us", href: "/#about" },
+        { label: "Contact", href: "/#contact" },
+      ],
+    },
+    {
+      title: "Legal",      items: [
+        { label: "Privacy Policy", href: "/privacy" },
+        { label: "Terms of Service", href: "/terms" },
+      ],
+    },
+  ];
+
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -67,14 +67,23 @@ export default function ArchivesPage() {
           />
         </div>
 
-        <div id="hero-archives" data-section="hero-archives">
+        <div id="archives-section" data-section="archives-section">
-          <HeroBillboardCarousel
+          <MetricCardSeven
-            background={{ variant: "radial-gradient" }}
+            animationType="slide-up"
-            title="World Cup Archives"
+            textboxLayout="default"
-            description="Explore the rich history of the FIFA World Cup. Relive every tournament, match, and iconic moment."
+            useInvertedBackground={true}
-            mediaItems={[
+            metrics={[
-              { imageSrc: "http://img.b2bpic.net/free-photo/soccer-fans-cheering-their-team-stadium_23-2151536119.jpg?_wi=2", imageAlt: "Football stadium with cheering crowd" },
+              { id: "2022", value: "2022", title: "Qatar", items: ["Argentina wins", "Historic tournament", "Middle East debut"] },
+              { id: "2018", value: "2018", title: "Russia", items: ["France lifts trophy", "VAR introduced", "Host nation excels"] },
+              { id: "2014", value: "2014", title: "Brazil", items: ["Germany triumphs", "Brazil's home setback", "Goal-filled tournament"] },
+              { id: "2010", value: "2010", title: "South Africa", items: ["Spain's first title", "Vuvuzelas debut", "African continent hosts"] },
+              { id: "2006", value: "2006", title: "Germany", items: ["Italy takes cup", "Zidane's headbutt", "Tense final"] },
+              { id: "2002", value: "2002", title: "Korea/Japan", items: ["Brazil's fifth star", "First Asian hosts", "Ronaldo's redemption"] },
+              { id: "1998", value: "1998", title: "France", items: ["France wins at home", "Zidane's masterclass", "New format debut"] },
+              { id: "1994", value: "1994", title: "USA", items: ["Brazil wins thriller", "First penalty shootout final", "High attendance"] }
             ]}
+            title="World Cup Archives by Year"
+            description="Explore historical FIFA World Cup tournaments, year by year. Dive into the past and relive the glory of each iconic event and its champions."
           />
         </div>
 

src/app/matches/[id]/page.tsx

@@ -1,220 +0,0 @@
-"use client";
-
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { useParams, useRouter } from 'next/navigation';
-import React from 'react';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-
-interface GoalScorer {
-  name: string;
-  minute: number;
-}
-
-interface Match {
-  id: string;
-  homeTeam: string;
-  awayTeam: string;
-  homeScore: number;
-  awayScore: number;
-  date: string;
-  venue: string;
-  tournamentStage: string;
-  goalScorers: GoalScorer[];
-  imageSrc: string;
-  imageAlt: string;
-}
-
-const dummyMatchData: Record<string, Match> = {
-  "match-1": {
-    id: "match-1",    homeTeam: "Argentina",    awayTeam: "France",    homeScore: 3,
-    awayScore: 3,
-    date: "December 18, 2022",    venue: "Lusail Stadium, Qatar",    tournamentStage: "2022 Final",    goalScorers: [
-      { name: "Lionel Messi (ARG)", minute: 23 },
-      { name: "Ángel Di María (ARG)", minute: 36 },
-      { name: "Kylian Mbappé (FRA)", minute: 80 },
-      { name: "Kylian Mbappé (FRA)", minute: 81 },
-      { name: "Lionel Messi (ARG)", minute: 108 },
-      { name: "Kylian Mbappé (FRA)", minute: 118 },
-    ],
-    imageSrc: "http://img.b2bpic.net/free-photo/spain-vs-switzerland_187299-31172.jpg?_wi=2",    imageAlt: "Argentina vs France World Cup Final 2022"
-  },
-  "match-2": {
-    id: "match-2",    homeTeam: "Brazil",    awayTeam: "Germany",    homeScore: 1,
-    awayScore: 7,
-    date: "July 8, 2014",    venue: "Estádio Mineirão, Brazil",    tournamentStage: "2014 Semi-final",    goalScorers: [
-      { name: "Thomas Müller (GER)", minute: 11 },
-      { name: "Miroslav Klose (GER)", minute: 23 },
-      { name: "Toni Kroos (GER)", minute: 24 },
-      { name: "Toni Kroos (GER)", minute: 26 },
-      { name: "Sami Khedira (GER)", minute: 29 },
-      { name: "André Schürrle (GER)", minute: 69 },
-      { name: "André Schürrle (GER)", minute: 79 },
-      { name: "Oscar (BRA)", minute: 90 },
-    ],
-    imageSrc: "http://img.b2bpic.net/free-photo/ghana-vs-croatia-football_187299-32095.jpg?_wi=2",    imageAlt: "Brazil vs Germany World Cup Semi-final 2014"
-  },
-  "match-3": {
-    id: "match-3",    homeTeam: "Italy",    awayTeam: "Brazil",    homeScore: 0,
-    awayScore: 0,
-    date: "July 17, 1994",    venue: "Rose Bowl, USA",    tournamentStage: "1994 Final",    goalScorers: [], // No goals in regular/extra time
-    imageSrc: "http://img.b2bpic.net/free-photo/soccer-fans-cheering-their-team-stadium_23-2151536180.jpg?_wi=2",    imageAlt: "Italy vs Brazil World Cup Final 1994"
-  },
-  "match-4": {
-    id: "match-4",    homeTeam: "England",    awayTeam: "Germany",    homeScore: 1,
-    awayScore: 4,
-    date: "June 27, 2010",    venue: "Free State Stadium, South Africa",    tournamentStage: "2010 Round of 16",    goalScorers: [
-      { name: "Miroslav Klose (GER)", minute: 20 },
-      { name: "Lukas Podolski (GER)", minute: 32 },
-      { name: "Matthew Upson (ENG)", minute: 37 },
-      { name: "Thomas Müller (GER)", minute: 67 },
-      { name: "Thomas Müller (GER)", minute: 70 },
-    ],
-    imageSrc: "http://img.b2bpic.net/free-photo/men-playing-rugby-field_23-2150062039.jpg?_wi=2",    imageAlt: "England vs Germany World Cup 2010"
-  },
-  "match-5": {
-    id: "match-5",    homeTeam: "Spain",    awayTeam: "Netherlands",    homeScore: 1,
-    awayScore: 0,
-    date: "July 11, 2010",    venue: "Soccer City, South Africa",    tournamentStage: "2010 Final",    goalScorers: [
-      { name: "Andrés Iniesta (ESP)", minute: 116 },
-    ],
-    imageSrc: "http://img.b2bpic.net/free-photo/soccer-game-concept_23-2151043781.jpg?_wi=2",    imageAlt: "Spain vs Netherlands World Cup Final 2010"
-  },
-  "match-6": {
-    id: "match-6",    homeTeam: "USA",    awayTeam: "Mexico",    homeScore: 2,
-    awayScore: 0,
-    date: "June 17, 2002",    venue: "Jeonju World Cup Stadium, South Korea",    tournamentStage: "2002 Round of 16",    goalScorers: [
-      { name: "Brian McBride (USA)", minute: 8 },
-      { name: "Landon Donovan (USA)", minute: 65 },
-    ],
-    imageSrc: "http://img.b2bpic.net/free-photo/morocco-vs-united-states-football_187299-32225.jpg?_wi=2",    imageAlt: "USA vs Mexico World Cup 2002"
-  },
-};
-
-export default function MatchDetailPage() {
-  const params = useParams();
-  const matchId = params.id as string;
-  const match = dummyMatchData[matchId];
-
-  if (!match) {
-    return (
-      <ThemeProvider
-        defaultButtonVariant="elastic-effect"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="rounded"
-        contentWidth="small"
-        sizing="largeSizeMediumTitles"
-        background="none"
-        cardStyle="outline"
-        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="solid"
-        headingFontWeight="extrabold"
-      >
-        <NavbarLayoutFloatingOverlay
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Matches", id: "/" }, // Link back to home page's matches section
-            { name: "About", id: "#about" },
-            { name: "Stats", id: "#stats" },
-            { name: "Fans Say", id: "#testimonials" },
-            { name: "FAQ", id: "#faq" },
-            { name: "Contact", id: "#contact" },
-          ]}
-          logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-football-soccer-club-logo_23-2149313711.jpg"
-          logoAlt="World Cup Hub Logo"
-          brandName="World Cup Hub"
-        />
-        <div className="flex flex-col items-center justify-center min-h-screen text-center p-8">
-          <h1 className="text-4xl font-bold mb-4">Match Not Found</h1>
-          <p className="text-lg">The match you are looking for does not exist.</p>
-        </div>
-        <FooterBaseReveal
-          logoText="World Cup Hub"
-          columns={[
-            { title: "Navigate", items: [{ label: "Home", href: "/" }, { label: "Matches", href: "/" }, { label: "Stats", href: "#stats" }, { label: "Archives", href: "#archives" }] },
-            { title: "Resources", items: [{ label: "FAQ", href: "#faq" }, { label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] },
-            { title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }] },
-          ]}
-          copyrightText="© 2024 World Cup Hub. All rights reserved."
-        />
-      </ThemeProvider>
-    );
-  }
-
-  return (
-    <ThemeProvider
-      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
-      contentWidth="small"
-      sizing="largeSizeMediumTitles"
-      background="none"
-      cardStyle="outline"
-      primaryButtonStyle="diagonal-gradient"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
-    >
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Matches", id: "/" }, // Link back to home page's matches section
-          { name: "About", id: "#about" },
-          { name: "Stats", id: "#stats" },
-          { name: "Fans Say", id: "#testimonials" },
-          { name: "FAQ", id: "#faq" },
-          { name: "Contact", id: "#contact" },
-        ]}
-        logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-football-soccer-club-logo_23-2149313711.jpg"
-        logoAlt="World Cup Hub Logo"
-        brandName="World Cup Hub"
-      />
-      <div className="min-h-screen pt-24 pb-12 flex flex-col items-center justify-center bg-background text-foreground">
-        <div className="container max-w-4xl mx-auto px-4">
-          <h1 className="text-5xl font-extrabold text-center mb-8 leading-tight">
-            <span className="text-primary-cta">Match Details:</span> {match.homeTeam} vs {match.awayTeam}
-          </h1>
-          <img src={match.imageSrc} alt={match.imageAlt} className="w-full h-80 object-cover rounded-xl shadow-lg mb-8" />
-
-          <div className="bg-card p-8 rounded-xl shadow-md text-center mb-8 border border-border">
-            <p className="text-xl font-semibold mb-2">{match.tournamentStage}</p>
-            <p className="text-lg mb-4">{match.date} at {match.venue}</p>
-            <div className="flex items-center justify-center space-x-4">
-              <span className="text-4xl font-bold">{match.homeTeam}</span>
-              <span className="text-6xl font-extrabold text-primary-cta">{match.homeScore} - {match.awayScore}</span>
-              <span className="text-4xl font-bold">{match.awayTeam}</span>
-            </div>
-          </div>
-
-          {match.goalScorers.length > 0 && (
-            <div className="bg-card p-8 rounded-xl shadow-md border border-border">
-              <h2 className="text-3xl font-bold mb-6 text-center">Goal Scorers</h2>
-              <ul className="space-y-4">
-                {match.goalScorers.map((scorer, index) => (
-                  <li key={index} className="flex items-center justify-between bg-background-accent p-4 rounded-lg shadow-sm">
-                    <span className="text-lg font-medium">{scorer.name}</span>
-                    <span className="text-primary-cta font-semibold">{scorer.minute}'</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-          {match.goalScorers.length === 0 && (
-            <div className="bg-card p-8 rounded-xl shadow-md border border-border text-center">
-              <h2 className="text-2xl font-bold mb-4">No Goals Scored in Regular Time</h2>
-              <p className="text-lg">This match was decided by other means (e.g., penalty shootout).</p>
-            </div>
-          )}
-        </div>
-      </div>
-      <FooterBaseReveal
-        logoText="World Cup Hub"
-        columns={[
-          { title: "Navigate", items: [{ label: "Home", href: "/" }, { label: "Matches", href: "/" }, { label: "Stats", href: "#stats" }, { label: "Archives", href: "#archives" }] },
-          { title: "Resources", items: [{ label: "FAQ", href: "#faq" }, { label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] },
-          { title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }] },
-        ]}
-        copyrightText="© 2024 World Cup Hub. All rights reserved."
-      />
-    </ThemeProvider>
-  );
-}

src/app/page.tsx

@@ -14,43 +14,6 @@ import SplitAbout from '@/components/sections/about/SplitAbout';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 import { Flag, History, Trophy } from "lucide-react";
 
-const navItems = [
-  { name: "Home", id: "/" },
-  { name: "Archives", id: "/archives" },
-  { name: "Search", id: "/search" },  { name: "Top Scorers", id: "/top-scorers" },
-  { name: "About", id: "/#about" },
-  { name: "Matches", id: "/#matches" },
-  { name: "Stats", id: "/#stats" },
-  { name: "Fans Say", id: "/#testimonials" },
-  { name: "FAQ", id: "/#faq" },
-  { name: "Contact", id: "/#contact" },
-  { name: "Theme", id: "/theme" }
-];
-
-const footerColumns = [
-  {
-    title: "Navigate",    items: [
-      { label: "Home", href: "/" },
-      { label: "Matches", href: "/#matches" },
-      { label: "Stats", href: "/#stats" },
-      { label: "Archives", href: "/archives" },
-    ],
-  },
-  {
-    title: "Resources",    items: [
-      { label: "FAQ", href: "/#faq" },
-      { label: "About Us", href: "/#about" },
-      { label: "Contact", href: "/#contact" },
-    ],
-  },
-  {
-    title: "Legal",    items: [
-      { label: "Privacy Policy", href: "/privacy" },
-      { label: "Terms of Service", href: "/terms" },
-    ],
-  },
-];
-
 export default function LandingPage() {
   return (
     <ThemeProvider
@@ -60,7 +23,7 @@ export default function LandingPage() {
         contentWidth="small"
         sizing="largeSizeMediumTitles"
         background="none"
-        cardStyle="outline"
+        cardStyle="solid"
         primaryButtonStyle="diagonal-gradient"
         secondaryButtonStyle="solid"
         headingFontWeight="extrabold"
@@ -68,7 +31,22 @@ export default function LandingPage() {
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
-      navItems={navItems}
+      navItems={[
+        {
+          name: "Home",          id: "#home"},
+        {
+          name: "About",          id: "#about"},
+        {
+          name: "Matches",          id: "#matches"},
+        {
+          name: "Stats",          id: "#stats"},
+        {
+          name: "Fans Say",          id: "#testimonials"},
+        {
+          name: "FAQ",          id: "#faq"},
+        {
+          name: "Contact",          id: "#contact"},
+      ]}
       logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-football-soccer-club-logo_23-2149313711.jpg"
       logoAlt="World Cup Hub Logo"
       brandName="World Cup Hub"
@@ -83,13 +61,13 @@ export default function LandingPage() {
       description="Your ultimate destination for match results, detailed stats, and historical archives of the greatest football tournament."
       buttons={[
         {
-          text: "Explore Matches",          href: "/#matches"},
+          text: "Explore Matches",          href: "#matches"},
         {
-          text: "View Stats",          href: "/#stats"},
+          text: "View Stats",          href: "#stats"},
       ]}
       mediaItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/soccer-fans-cheering-their-team-stadium_23-2151536119.jpg?_wi=1",          imageAlt: "Football stadium with cheering crowd and lights"},
+          imageSrc: "http://img.b2bpic.net/free-photo/soccer-fans-cheering-their-team-stadium_23-2151536119.jpg",          imageAlt: "Football stadium with cheering crowd and lights"},
         {
           imageSrc: "http://img.b2bpic.net/free-photo/american-football-player-neon-style_23-2151827409.jpg",          imageAlt: "Soccer player celebrating a goal in a stadium"},
         {
@@ -158,17 +136,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "match-1",          name: "Argentina 3 - 3 France (4-2 PSO)",          price: "2022 Final",          imageSrc: "http://img.b2bpic.net/free-photo/spain-vs-switzerland_187299-31172.jpg?_wi=1",          imageAlt: "Argentina vs France World Cup Final 2022"},
+          id: "match-1",          name: "Argentina 3 - 3 France (4-2 PSO)",          price: "2022 Final",          imageSrc: "http://img.b2bpic.net/free-photo/spain-vs-switzerland_187299-31172.jpg",          imageAlt: "Argentina vs France World Cup Final 2022"},
         {
-          id: "match-2",          name: "Brazil 1 - 7 Germany",          price: "2014 Semi-final",          imageSrc: "http://img.b2bpic.net/free-photo/ghana-vs-croatia-football_187299-32095.jpg?_wi=1",          imageAlt: "Brazil vs Germany World Cup Semi-final 2014"},
+          id: "match-2",          name: "Brazil 1 - 7 Germany",          price: "2014 Semi-final",          imageSrc: "http://img.b2bpic.net/free-photo/ghana-vs-croatia-football_187299-32095.jpg",          imageAlt: "Brazil vs Germany World Cup Semi-final 2014"},
         {
-          id: "match-3",          name: "Italy 0 - 0 Brazil (2-3 PSO)",          price: "1994 Final",          imageSrc: "http://img.b2bpic.net/free-photo/soccer-fans-cheering-their-team-stadium_23-2151536180.jpg?_wi=1",          imageAlt: "Italy vs Brazil World Cup Final 1994"},
+          id: "match-3",          name: "Italy 0 - 0 Brazil (2-3 PSO)",          price: "1994 Final",          imageSrc: "http://img.b2bpic.net/free-photo/soccer-fans-cheering-their-team-stadium_23-2151536180.jpg",          imageAlt: "Italy vs Brazil World Cup Final 1994"},
         {
-          id: "match-4",          name: "England 2 - 4 Germany",          price: "2010 Round of 16",          imageSrc: "http://img.b2bpic.net/free-photo/men-playing-rugby-field_23-2150062039.jpg?_wi=1",          imageAlt: "England vs Germany World Cup 2010"},
+          id: "match-4",          name: "England 2 - 4 Germany",          price: "2010 Round of 16",          imageSrc: "http://img.b2bpic.net/free-photo/men-playing-rugby-field_23-2150062039.jpg",          imageAlt: "England vs Germany World Cup 2010"},
         {
-          id: "match-5",          name: "Spain 1 - 0 Netherlands",          price: "2010 Final",          imageSrc: "http://img.b2bpic.net/free-photo/soccer-game-concept_23-2151043781.jpg?_wi=1",          imageAlt: "Spain vs Netherlands World Cup Final 2010"},
+          id: "match-5",          name: "Spain 1 - 0 Netherlands",          price: "2010 Final",          imageSrc: "http://img.b2bpic.net/free-photo/soccer-game-concept_23-2151043781.jpg",          imageAlt: "Spain vs Netherlands World Cup Final 2010"},
         {
-          id: "match-6",          name: "USA 2 - 0 Mexico",          price: "2002 Round of 16",          imageSrc: "http://img.b2bpic.net/free-photo/morocco-vs-united-states-football_187299-32225.jpg?_wi=1",          imageAlt: "USA vs Mexico World Cup 2002"},
+          id: "match-6",          name: "USA 2 - 0 Mexico",          price: "2002 Round of 16",          imageSrc: "http://img.b2bpic.net/free-photo/morocco-vs-united-states-football_187299-32225.jpg",          imageAlt: "USA vs Mexico World Cup 2002"},
       ]}
       title="Recent & Upcoming Matches"
       description="Stay up-to-date with the latest World Cup results and upcoming fixtures. Click any match for full details including goal scorers and more."
@@ -263,11 +241,42 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterBaseReveal
       logoText="World Cup Hub"
-      columns={footerColumns}
+      columns={[
+        {
+          title: "Navigate",          items: [
+            {
+              label: "Home",              href: "#home"},
+            {
+              label: "Matches",              href: "#matches"},
+            {
+              label: "Stats",              href: "#stats"},
+            {
+              label: "Archives",              href: "#archives"},
+          ],
+        },
+        {
+          title: "Resources",          items: [
+            {
+              label: "FAQ",              href: "#faq"},
+            {
+              label: "About Us",              href: "#about"},
+            {
+              label: "Contact",              href: "#contact"},
+          ],
+        },
+        {
+          title: "Legal",          items: [
+            {
+              label: "Privacy Policy",              href: "/privacy"},
+            {
+              label: "Terms of Service",              href: "/terms"},
+          ],
+        },
+      ]}
       copyrightText="© 2024 World Cup Hub. All rights reserved."
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/search/page.tsx

@@ -4,47 +4,46 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-
-const navItems = [
-  { name: "Home", id: "/" },
-  { name: "Archives", id: "/archives" },
-  { name: "Search", id: "/search" },
-  { name: "Top Scorers", id: "/top-scorers" },
-  { name: "About", id: "/#about" },
-  { name: "Matches", id: "/#matches" },
-  { name: "Stats", id: "/#stats" },
-  { name: "Fans Say", id: "/#testimonials" },
-  { name: "FAQ", id: "/#faq" },
-  { name: "Contact", id: "/#contact" },
-  { name: "Theme", id: "/theme" }
-];
-
-const footerColumns = [
-  {
-    title: "Navigate",    items: [
-      { label: "Home", href: "/" },
-      { label: "Matches", href: "/#matches" },
-      { label: "Stats", href: "/#stats" },
-      { label: "Archives", href: "/archives" },
-    ],
-  },
-  {
-    title: "Resources",    items: [
-      { label: "FAQ", href: "/#faq" },
-      { label: "About Us", href: "/#about" },
-      { label: "Contact", href: "/#contact" },
-    ],
-  },
-  {
-    title: "Legal",    items: [
-      { label: "Privacy Policy", href: "/privacy" },
-      { label: "Terms of Service", href: "/terms" },
-    ],
-  },
-];
 
 export default function SearchPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Search", id: "/search" },
+    { name: "Archives", id: "/archives" },
+    { name: "About", id: "/#about" },
+    { name: "Matches", id: "/#matches" },
+    { name: "Stats", id: "/#stats" },
+    { name: "Fans Say", id: "/#testimonials" },
+    { name: "FAQ", id: "/#faq" },
+    { name: "Contact", id: "/#contact" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Navigate",      items: [
+        { label: "Home", href: "/" },
+        { label: "Search", href: "/search" },
+        { label: "Archives", href: "/archives" },
+        { label: "Matches", href: "/#matches" },
+        { label: "Stats", href: "/#stats" }
+      ],
+    },
+    {
+      title: "Resources",      items: [
+        { label: "FAQ", href: "/#faq" },
+        { label: "About Us", href: "/#about" },
+        { label: "Contact", href: "/#contact" },
+      ],
+    },
+    {
+      title: "Legal",      items: [
+        { label: "Privacy Policy", href: "/privacy" },
+        { label: "Terms of Service", href: "/terms" },
+      ],
+    },
+  ];
+
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -68,14 +67,16 @@ export default function SearchPage() {
           />
         </div>
 
-        <div id="hero-search" data-section="hero-search">
+        <div id="search-section" data-section="search-section">
-          <HeroBillboardCarousel
+          <ContactCenter
+            useInvertedBackground={false}
             background={{ variant: "radial-gradient" }}
+            tag="Find Anything"
             title="Search World Cup Data"
-            description="Quickly find matches, teams, players, or tournaments with our powerful search tools."
+            description="Enter keywords to find matches, teams, players, or historical tournaments instantly."
-            mediaItems={[
+            inputPlaceholder="Search for teams, players, matches, or years..."
-              { imageSrc: "http://img.b2bpic.net/free-photo/soccer-game-concept_23-2151043781.jpg?_wi=3", imageAlt: "Football players on a field" },
+            buttonText="Search"
-            ]}
+            onSubmit={() => console.log('Search initiated')}
           />
         </div>
 

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
+  --background: #020617;
-  --card: #0c0c0c;
+  --card: #0f172a;
-  --foreground: #ffffff;
+  --foreground: #e2e8f0;
-  --primary-cta: #106EFB;
+  --primary-cta: #c4d8f9;
-  --primary-cta-text: #0a0a0a;
+  --primary-cta-text: #020617;
-  --secondary-cta: #000000;
+  --secondary-cta: #041633;
-  --secondary-cta-text: #ffffff;
+  --secondary-cta-text: #e2e8f0;
-  --accent: #535353;
+  --accent: #2d30f3;
-  --background-accent: #106EFB;
+  --background-accent: #1d4ed8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);