src/app/gym-3d/page.tsx

@@ -0,0 +1,320 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Mail, Send } from 'lucide-react';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      canvas: React.CanvasHTMLAttributes<HTMLCanvasElement>;
+    }
+  }
+}
+
+export default function Gym3D() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [formData, setFormData] = useState({ name: "", email: "", message: "" });
+  const [submitted, setSubmitted] = useState(false);
+
+  useEffect(() => {
+    const loadThree = async () => {
+      const THREE = (await import("three")).default;
+      const { GLTFLoader } = await import("three/examples/jsm/loaders/GLTFLoader.js");
+      const { OrbitControls } = await import("three/examples/jsm/controls/OrbitControls.js");
+
+      if (!canvasRef.current) return;
+
+      const scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x0a0a0a);
+      scene.fog = new THREE.Fog(0x0a0a0a, 50, 200);
+
+      const camera = new THREE.PerspectiveCamera(
+        75,
+        canvasRef.current.clientWidth / canvasRef.current.clientHeight,
+        0.1,
+        1000
+      );
+      camera.position.set(20, 15, 20);
+
+      const renderer = new THREE.WebGLRenderer({ antialias: true });
+      renderer.setSize(canvasRef.current.clientWidth, canvasRef.current.clientHeight);
+      renderer.shadowMap.enabled = true;
+      canvasRef.current.appendChild(renderer.domElement);
+
+      // Lighting
+      const ambientLight = new THREE.AmbientLight(0xffff00, 0.6);
+      scene.add(ambientLight);
+
+      const directionalLight = new THREE.DirectionalLight(0xffff00, 0.8);
+      directionalLight.position.set(30, 30, 20);
+      directionalLight.castShadow = true;
+      directionalLight.shadow.mapSize.width = 2048;
+      directionalLight.shadow.mapSize.height = 2048;
+      scene.add(directionalLight);
+
+      // Floor
+      const floorGeometry = new THREE.PlaneGeometry(50, 50);
+      const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x1a1a1a });
+      const floor = new THREE.Mesh(floorGeometry, floorMaterial);
+      floor.rotation.x = -Math.PI / 2;
+      floor.receiveShadow = true;
+      scene.add(floor);
+
+      // Gym Equipment - Barbells
+      const barlbellGeometry = new THREE.CylinderGeometry(0.2, 0.2, 2, 16);
+      const barMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00, metalness: 0.8, roughness: 0.2 });
+      const barbell1 = new THREE.Mesh(barlbellGeometry, barMaterial);
+      barbell1.position.set(-10, 1, 0);
+      barbell1.rotation.z = Math.PI / 2;
+      barbell1.castShadow = true;
+      scene.add(barbell1);
+
+      const barbell2 = new THREE.Mesh(barlbellGeometry, barMaterial);
+      barbell2.position.set(-5, 1, 0);
+      barbell2.rotation.z = Math.PI / 2;
+      barbell2.castShadow = true;
+      scene.add(barbell2);
+
+      const barbell3 = new THREE.Mesh(barlbellGeometry, barMaterial);
+      barbell3.position.set(0, 1, 0);
+      barbell3.rotation.z = Math.PI / 2;
+      barbell3.castShadow = true;
+      scene.add(barbell3);
+
+      // Dumbbells
+      const dumbellBallGeometry = new THREE.SphereGeometry(0.3, 16, 16);
+      const dumbellMaterial = new THREE.MeshStandardMaterial({ color: 0x1a1a1a, metalness: 0.6 });
+      for (let i = 0; i < 6; i++) {
+        const dumbbell1 = new THREE.Mesh(dumbellBallGeometry, dumbellMaterial);
+        dumbbell1.position.set(-15 + i * 3, 0.5, -5);
+        dumbbell1.castShadow = true;
+        scene.add(dumbbell1);
+
+        const dumbbell2 = new THREE.Mesh(dumbellBallGeometry, dumbellMaterial);
+        dumbbell2.position.set(-15 + i * 3, 0.5, 5);
+        dumbbell2.castShadow = true;
+        scene.add(dumbbell2);
+      }
+
+      // Pull-up Bar / Rig
+      const rigFrameGeometry = new THREE.BoxGeometry(15, 0.3, 0.3);
+      const rigMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00, metalness: 0.7 });
+      const rigBar = new THREE.Mesh(rigFrameGeometry, rigMaterial);
+      rigBar.position.set(0, 10, -8);
+      rigBar.castShadow = true;
+      scene.add(rigBar);
+
+      // Supports for rig
+      const supportGeometry = new THREE.CylinderGeometry(0.2, 0.2, 10, 16);
+      const support1 = new THREE.Mesh(supportGeometry, rigMaterial);
+      support1.position.set(-7, 5, -8);
+      support1.castShadow = true;
+      scene.add(support1);
+
+      const support2 = new THREE.Mesh(supportGeometry, rigMaterial);
+      support2.position.set(7, 5, -8);
+      support2.castShadow = true;
+      scene.add(support2);
+
+      // Rowing Machine
+      const rowingBaseGeometry = new THREE.BoxGeometry(2, 0.5, 1);
+      const rowingMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
+      const rowingBase = new THREE.Mesh(rowingBaseGeometry, rowingMaterial);
+      rowingBase.position.set(10, 0.25, 0);
+      rowingBase.castShadow = true;
+      scene.add(rowingBase);
+
+      const rowingSeatGeometry = new THREE.BoxGeometry(0.5, 1, 0.8);
+      const rowingSeat = new THREE.Mesh(rowingSeatGeometry, rowingMaterial);
+      rowingSeat.position.set(10, 1.3, 0);
+      rowingSeat.castShadow = true;
+      scene.add(rowingSeat);
+
+      // Gym Walls
+      const wallGeometry = new THREE.BoxGeometry(50, 15, 0.5);
+      const wallMaterial = new THREE.MeshStandardMaterial({ color: 0x2a2a2a });
+
+      const backWall = new THREE.Mesh(wallGeometry, wallMaterial);
+      backWall.position.set(0, 7.5, -25);
+      scene.add(backWall);
+
+      const sideWall = new THREE.Mesh(
+        new THREE.BoxGeometry(0.5, 15, 50),
+        wallMaterial
+      );
+      sideWall.position.set(-25, 7.5, 0);
+      scene.add(sideWall);
+
+      // Controls
+      const controls = new OrbitControls(camera, renderer.domElement);
+      controls.enableDamping = true;
+      controls.dampingFactor = 0.05;
+      controls.autoRotate = true;
+      controls.autoRotateSpeed = 2;
+
+      const animate = () => {
+        requestAnimationFrame(animate);
+        controls.update();
+        renderer.render(scene, camera);
+      };
+      animate();
+
+      // Handle resize
+      const handleResize = () => {
+        if (!canvasRef.current) return;
+        const width = canvasRef.current.clientWidth;
+        const height = canvasRef.current.clientHeight;
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+        renderer.setSize(width, height);
+      };
+      window.addEventListener("resize", handleResize);
+
+      return () => {
+        window.removeEventListener("resize", handleResize);
+        canvasRef.current?.removeChild(renderer.domElement);
+      };
+    };
+
+    loadThree();
+  }, []);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitted(true);
+    setFormData({ name: "", email: "", message: "" });
+    setTimeout(() => setSubmitted(false), 3000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="largeSmallSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Iron Pulse"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "WOD", id: "wod" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Gallery", id: "gallery" },
+            { name: "Testimonials", id: "testimonials" }
+          ]}
+          button={{ text: "Start Your Trial", href: "contact" }}
+        />
+      </div>
+
+      <div className="min-h-screen bg-black py-12 px-4">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-12">
+            <h1 className="text-5xl md:text-6xl font-bold text-yellow-400 mb-4">Tour Our 3D Gym</h1>
+            <p className="text-xl text-gray-300">Explore Iron Pulse's state-of-the-art facility from every angle</p>
+          </div>
+
+          <div className="bg-gradient-to-br from-gray-900 to-black rounded-xl overflow-hidden shadow-2xl mb-12">
+            <canvas
+              ref={canvasRef}
+              className="w-full"
+              style={{ height: "600px" }}
+              aria-label="3D Gym Tour"
+            />
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8 items-start">
+            <div className="bg-gradient-to-br from-yellow-400/10 to-yellow-400/5 border border-yellow-400/30 rounded-xl p-8">
+              <h2 className="text-3xl font-bold text-yellow-400 mb-6">Gym Features</h2>
+              <ul className="space-y-4 text-gray-300">
+                <li className="flex items-start gap-3">
+                  <span className="text-yellow-400 font-bold">✓</span>
+                  <span>Olympic Barbells & Competition Platforms</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-yellow-400 font-bold">✓</span>
+                  <span>Complete Gymnastics Rig with Rings & Pull-up Bars</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-yellow-400 font-bold">✓</span>
+                  <span>Full Set of Competition Dumbbells (5 lbs to 150 lbs)</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-yellow-400 font-bold">✓</span>
+                  <span>Cardio Equipment: Rowing Machines & Bikes</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-yellow-400 font-bold">✓</span>
+                  <span>Strength Training: Power Racks & Benches</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-yellow-400 font-bold">✓</span>
+                  <span>Climate Controlled & Fully Equipped Locker Rooms</span>
+                </li>
+              </ul>
+            </div>
+
+            <div className="bg-gradient-to-br from-yellow-400/10 to-yellow-400/5 border border-yellow-400/30 rounded-xl p-8">
+              <h2 className="text-3xl font-bold text-yellow-400 mb-6 flex items-center gap-2">
+                <Mail className="w-8 h-8" />
+                Contact Us
+              </h2>
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-300 mb-2">Name</label>
+                  <input
+                    type="text"
+                    value={formData.name}
+                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                    className="w-full bg-black/50 border border-yellow-400/30 rounded px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:border-yellow-400 transition"
+                    placeholder="Your name"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-300 mb-2">Email</label>
+                  <input
+                    type="email"
+                    value={formData.email}
+                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                    className="w-full bg-black/50 border border-yellow-400/30 rounded px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:border-yellow-400 transition"
+                    placeholder="your@email.com"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-300 mb-2">Message</label>
+                  <textarea
+                    value={formData.message}
+                    onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+                    className="w-full bg-black/50 border border-yellow-400/30 rounded px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:border-yellow-400 transition resize-none h-24"
+                    placeholder="Tell us how we can help you..."
+                    required
+                  />
+                </div>
+                <button
+                  type="submit"
+                  className="w-full bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-3 px-4 rounded transition flex items-center justify-center gap-2"
+                >
+                  <Send className="w-5 h-5" />
+                  Send Message
+                </button>
+                {submitted && (
+                  <p className="text-center text-green-400 font-semibold">Message sent successfully! We'll be in touch soon.</p>
+                )}
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,54 +1,22 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
-import { Manrope } from "next/font/google";
-import { DM_Sans } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
+import "./styles/variables.css";
+import "./styles/base.css";
 
-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
-
-const manrope = Manrope({
-  variable: "--font-manrope",  subsets: ["latin"],
-});
-
-const dmSans = DM_Sans({
-  variable: "--font-dm-sans",  subsets: ["latin"],
-});
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Iron Pulse CrossFit | Elite Coaching & High-Intensity Training",  description: "Transform your strength at Iron Pulse CrossFit. Elite coaching, daily WODs, and a community of athletes pushing limits. Start your trial today.",  keywords: "CrossFit gym, high-intensity training, coaching, fitness community, WOD, elite athletes",  openGraph: {
-    title: "Iron Pulse CrossFit | Elite Coaching & High-Intensity Training",    description: "Transform your strength at Iron Pulse CrossFit. Elite coaching, daily WODs, and a community of athletes pushing limits.",    type: "website",    siteName: "Iron Pulse"},
-  twitter: {
-    card: "summary_large_image",    title: "Iron Pulse CrossFit | Elite Coaching & High-Intensity Training",    description: "Transform your strength at Iron Pulse CrossFit. Elite coaching, daily WODs, and a community of athletes pushing limits."},
-  robots: {
-    index: true,
-    follow: true,
-  },
-};
+  title: "Iron Pulse CrossFit",  description: "Elite CrossFit training and coaching"};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${manrope.variable} ${dmSans.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body className={inter.className}>{children}
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1416,7 +1384,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }

src/app/page.tsx

@@ -33,7 +33,7 @@ export default function LandingPage() {
             { name: "Pricing", id: "pricing" },
             { name: "Gallery", id: "gallery" },
             { name: "Testimonials", id: "testimonials" },
-            { name: "Contact", id: "contact" }
+            { name: "3D Gym", id: "gym-3d" }
           ]}
           button={{ text: "Start Your Trial", href: "contact" }}
         />
@@ -268,7 +268,7 @@ export default function LandingPage() {
                 { label: "Programming", href: "#wod" },
                 { label: "Coaching", href: "#pricing" },
                 { label: "Class Schedule", href: "#" },
-                { label: "Facility Tour", href: "#" }
+                { label: "Facility Tour", href: "/gym-3d" }
               ]
             },
             {