Master

src/app/components/page.jsx

@@ -69,6 +69,8 @@ import ALertManager from "./alert/ALertManager";
 import Loader from "./loaders/Loader";
 // form Input
 
+
+
 import { DatePicker } from "./FormInput/DatePicker";
 import { FileUpload } from "./FormInput/FileUpload";
 import { FormValidation } from "./FormInput/FormValidation";
@@ -739,6 +741,25 @@ export default function Page() {
             </div>
           </section>
         )}
+{/* Racing Section */}
+<div className="relative w-full py-16 px-6 flex flex-col items-center justify-center 
+  bg-gradient-to-r from-purple-500 via-pink-500 to-orange-400
+  rounded-3xl shadow-2xl overflow-hidden my-16">
+
+  {/* Glassy overlay */}
+  <div className="absolute inset-0 bg-white/10 backdrop-blur-lg rounded-3xl border border-white/20"></div>
+
+  {/* Content */}
+  <div className="relative z-10 w-full max-w-5xl mx-auto text-center space-y-8">
+    <h2 className="text-4xl font-extrabold text-white drop-shadow-lg">
+      🏁 Game Section
+    </h2>
+
+    <section className="max-w-5xl mx-auto px-4">
+      {/* <Test /> */}
+    </section>
+  </div>
+</div>
 
         {/* Cards Section */}
         {filteredComponents.cards && (

src/app/game/Racing.jsx

@@ -0,0 +1,105 @@
+"use client";
+import { useEffect, useState } from "react";
+
+export default function Racing() {
+  const [car1, setCar1] = useState(0);
+  const [car2, setCar2] = useState(0);
+  const [winner, setWinner] = useState("");
+  const [running, setRunning] = useState(false);
+
+  const trackLengthDesktop = 600; // px for desktop
+  const trackLengthMobile = 300; // px for small screens
+
+  const [trackLength, setTrackLength] = useState(trackLengthDesktop);
+
+  // Update track length on resize
+  useEffect(() => {
+    const updateTrackLength = () => {
+      if (window.innerWidth < 768) setTrackLength(trackLengthMobile);
+      else setTrackLength(trackLengthDesktop);
+    };
+    updateTrackLength();
+    window.addEventListener("resize", updateTrackLength);
+    return () => window.removeEventListener("resize", updateTrackLength);
+  }, []);
+
+  // Race movement
+  useEffect(() => {
+    if (!running) return;
+
+    const race = setInterval(() => {
+      setCar1((prev) => Math.min(prev + Math.random() * 15, trackLength));
+      setCar2((prev) => Math.min(prev + Math.random() * 15, trackLength));
+    }, 100);
+
+    return () => clearInterval(race);
+  }, [running, trackLength]);
+
+  // Check winner
+  useEffect(() => {
+    if (car1 >= trackLength || car2 >= trackLength) {
+      setRunning(false);
+      if (car1 > car2) setWinner("🚗 Car 1 Wins!");
+      else if (car2 > car1) setWinner("🏎️ Car 2 Wins!");
+      else setWinner("🤝 It’s a Tie!");
+    }
+  }, [car1, car2, trackLength]);
+
+  const startRace = () => {
+    setCar1(0);
+    setCar2(0);
+    setWinner("");
+    setRunning(true);
+  };
+
+  return (
+    <div className="bg-gradient-to-br from-gray-50 dark:from-gray-900 via-gray-100 dark:via-gray-800 to-gray-200 dark:to-black py-10 md:py-12 rounded-3xl shadow-2xl text-center text-gray-900 dark:text-white space-y-8 md:space-y-10 backdrop-blur-xl transition-all">
+      <h2 className="text-3xl md:text-4xl font-extrabold">🏁 Racing Track</h2>
+
+      {/* Track */}
+      <div className="relative w-full max-w-[700px] h-48 md:h-56 bg-gradient-to-r from-gray-200 dark:from-gray-700 to-gray-400 dark:to-gray-900 rounded-2xl border border-gray-400 dark:border-gray-600 overflow-hidden mx-auto">
+        {/* Road markings */}
+        <div className="absolute top-1/2 left-0 w-full h-[4px] bg-white/50 dark:bg-white/30 rounded-full"></div>
+
+        {/* Finish Line */}
+        <div className="absolute left-[2%] md:left-[20px] top-0 h-full w-[12px] bg-[repeating-linear-gradient(45deg,white,white_10px,black_10px,black_20px)] rounded-sm"></div>
+
+        {/* Car 1 */}
+        <div
+          className="absolute top-10 md:top-12 text-5xl md:text-6xl transition-left duration-100 ease-linear"
+          style={{ left: `${trackLength - car1}px` }}
+        >
+          🚗
+        </div>
+
+        {/* Car 2 */}
+        <div
+          className="absolute top-28 md:top-32 text-5xl md:text-6xl transition-left duration-100 ease-linear"
+          style={{ left: `${trackLength - car2}px` }}
+        >
+          🏎️
+        </div>
+      </div>
+
+      {/* Winner Display */}
+      {winner && <p className="text-xl md:text-2xl font-bold animate-bounce">{winner}</p>}
+
+      {/* Start Button */}
+      <button
+        onClick={startRace}
+        disabled={running}
+        className={`bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-semibold px-6 md:px-8 py-2 md:py-3 rounded-xl shadow-md transition-all hover:scale-105 ${
+          running ? "opacity-50 cursor-not-allowed" : ""
+        }`}
+      >
+        {running ? "🏎️ Racing..." : "Start Race"}
+      </button>
+
+      <style jsx>{`
+        .transition-left {
+          transition: left 0.1s linear;
+        }
+      `}</style>
+    </div>
+  );
+}

src/app/game/page.jsx

@@ -0,0 +1,50 @@
+"use client";
+import { useState } from "react";
+import Racing from "./Racing"; // Import the Racing component
+
+export default function Page() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filterType, setFilterType] = useState("all");
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-800 transition-colors duration-500 font-sans">
+
+      {/* Hero Section */}
+      <section className="relative max-w-5xl mx-auto px-4 mt-12 mb-16">
+        <div className="backdrop-blur-md  dark:bg-gray-900/40 rounded-3xl shadow-2xl py-14 px-10 flex flex-col items-center gap-6 border border-gray-100 dark:border-gray-700 transition-all">
+          <h1 className="text-4xl md:text-5xl font-extrabold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
+            React UI Playground
+          </h1>
+          <p className="text-lg md:text-xl text-gray-700 dark:text-gray-300 text-center max-w-3xl">
+            Beautiful, modern & responsive component demo – interact with components and explore smooth animations.
+          </p>
+          <button className="mt-4 bg-gradient-to-r from-purple-500 to-indigo-500 text-white px-6 py-3 rounded-xl shadow-lg hover:scale-105 transition-transform duration-300">
+            Explore Now
+          </button>
+        </div>
+      </section>
+
+      {/* Racing Game Section */}
+      <section className="max-w-5xl mx-auto px-4 mb-20">
+        <div className="bg-gradient-to-br from-indigo-200 via-purple-300 to-pink-400 dark:from-indigo-900 dark:via-purple-800 dark:to-black rounded-3xl shadow-2xl p-8 backdrop-blur-xl border border-white/20 dark:border-gray-700 transition-all">
+          <h2 className="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">
+            🏁 Racing Game
+          </h2>
+          <Racing />
+        </div>
+      </section>
+
+      {/* Placeholder Section */}
+      <section className="max-w-5xl mx-auto px-4 mb-16">
+        <div className="bg-white/40 dark:bg-gray-900/40 backdrop-blur-xl rounded-2xl p-8 shadow-lg border border-gray-100 dark:border-gray-700 transition-all">
+          <h2 className="text-3xl font-bold mb-4 text-gray-900 dark:text-white">
+            More Components Coming Soon...
+          </h2>
+          <p className="text-gray-700 dark:text-gray-300">
+            Stay tuned for more interactive UI components, demos, and fun features.
+          </p>
+        </div>
+      </section>
+    </div>
+  );
+}

src/app/pages/Navbar.jsx

@@ -12,8 +12,10 @@ const navLinks = [
   { href: "/contact", label: "Contact" },
   { href: "/components", label: "Components" },
   { href: "/playground", label: "🎮 Playground" },
+  { href: "/game", label: "🎮 Game" },
   { href: "/analytics", label: "Analytics" },
   { href: "/feedback", label: "Feedback" },
+  {href: "/racing", label: "🏁 Racing Game" },
 ];
 
 const Navbar = () => {