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

@@ -1,10 +1,12 @@
 "use client";
 
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import * as THREE from 'three';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { ChevronDown, Mail, Phone, MapPin } from 'lucide-react';
+import { Zap } from 'lucide-react';
+import Input from '@/components/form/Input';
+import ButtonElasticEffect from '@/components/button/ButtonElasticEffect/ButtonElasticEffect';
 
 interface FormData {
   name: string;
@@ -14,9 +16,7 @@ interface FormData {
 }
 
 export default function Gym3DPage() {
-  const mountRef = useRef<HTMLDivElement>(null);
-  const sceneRef = useRef<THREE.Scene | null>(null);
-  const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
   const [formData, setFormData] = useState<FormData>({
     name: '',
     email: '',
@@ -26,198 +26,247 @@ export default function Gym3DPage() {
   const [submitted, setSubmitted] = useState(false);
 
   useEffect(() => {
-    if (!mountRef.current) return;
+    if (!canvasRef.current) return;
 
     // Scene setup
     const scene = new THREE.Scene();
     scene.background = new THREE.Color(0x0a0a0a);
-    sceneRef.current = scene;
-
-    // Camera
+    
     const camera = new THREE.PerspectiveCamera(
       75,
-      mountRef.current.clientWidth / mountRef.current.clientHeight,
+      canvasRef.current.clientWidth / canvasRef.current.clientHeight,
       0.1,
       1000
     );
     camera.position.set(0, 5, 15);
-    camera.lookAt(0, 5, 0);
 
-    // Renderer
-    const renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setSize(mountRef.current.clientWidth, mountRef.current.clientHeight);
+    const renderer = new THREE.WebGLRenderer({
+      canvas: canvasRef.current,
+      antialias: true,
+      alpha: true,
+    });
+    renderer.setSize(canvasRef.current.clientWidth, canvasRef.current.clientHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
     renderer.shadowMap.enabled = true;
-    renderer.shadowMap.type = THREE.PCFShadowMap;
-    mountRef.current.appendChild(renderer.domElement);
-    rendererRef.current = renderer;
 
     // Lighting
     const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
     scene.add(ambientLight);
 
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    const directionalLight = new THREE.DirectionalLight(0xffff00, 1);
     directionalLight.position.set(10, 20, 10);
     directionalLight.castShadow = true;
     directionalLight.shadow.mapSize.width = 2048;
     directionalLight.shadow.mapSize.height = 2048;
     scene.add(directionalLight);
 
-    const pointLight = new THREE.PointLight(0xffff00, 0.5);
-    pointLight.position.set(0, 10, 0);
+    const pointLight = new THREE.PointLight(0xff6b00, 0.8);
+    pointLight.position.set(-10, 10, -10);
     scene.add(pointLight);
 
-    // Floor
-    const floorGeometry = new THREE.PlaneGeometry(50, 50);
+    // Gym floor
+    const floorGeometry = new THREE.PlaneGeometry(40, 40);
     const floorMaterial = new THREE.MeshStandardMaterial({
       color: 0x1a1a1a,
       roughness: 0.8,
-      metalness: 0.1
+      metalness: 0.1,
     });
     const floor = new THREE.Mesh(floorGeometry, floorMaterial);
     floor.rotation.x = -Math.PI / 2;
-    floor.castShadow = true;
     floor.receiveShadow = true;
     scene.add(floor);
 
     // Walls
     const wallMaterial = new THREE.MeshStandardMaterial({
-      color: 0x2a2a2a,
-      roughness: 0.7,
-      metalness: 0.05
+      color: 0x1a1a1a,
+      roughness: 0.9,
     });
 
-    // Back wall
-    const backWallGeometry = new THREE.BoxGeometry(50, 15, 1);
+    const backWallGeometry = new THREE.PlaneGeometry(40, 20);
     const backWall = new THREE.Mesh(backWallGeometry, wallMaterial);
-    backWall.position.set(0, 7.5, -25);
-    backWall.castShadow = true;
+    backWall.position.z = -20;
+    backWall.position.y = 10;
     backWall.receiveShadow = true;
     scene.add(backWall);
 
-    // Side walls
-    const sideWallGeometry = new THREE.BoxGeometry(1, 15, 50);
-    const leftWall = new THREE.Mesh(sideWallGeometry, wallMaterial);
-    leftWall.position.set(-25, 7.5, 0);
-    leftWall.castShadow = true;
+    const leftWallGeometry = new THREE.PlaneGeometry(40, 20);
+    const leftWall = new THREE.Mesh(leftWallGeometry, wallMaterial);
+    leftWall.rotation.y = Math.PI / 2;
+    leftWall.position.x = -20;
+    leftWall.position.y = 10;
     leftWall.receiveShadow = true;
     scene.add(leftWall);
 
-    const rightWall = new THREE.Mesh(sideWallGeometry, wallMaterial);
-    rightWall.position.set(25, 7.5, 0);
-    rightWall.castShadow = true;
-    rightWall.receiveShadow = true;
-    scene.add(rightWall);
+    // Power racks
+    const createPowerRack = (x: number, z: number) => {
+      const rackGroup = new THREE.Group();
+      
+      const tubeMaterial = new THREE.MeshStandardMaterial({
+        color: 0x333333,
+        metalness: 0.7,
+        roughness: 0.3,
+      });
 
-    // Equipment - Barbells/Rack
-    const rackGeometry = new THREE.BoxGeometry(8, 2, 0.5);
-    const rackMaterial = new THREE.MeshStandardMaterial({
-      color: 0x333333,
-      roughness: 0.3,
-      metalness: 0.8
-    });
-    const rack = new THREE.Mesh(rackGeometry, rackMaterial);
-    rack.position.set(-10, 1, 0);
-    rack.castShadow = true;
-    rack.receiveShadow = true;
-    scene.add(rack);
+      // Vertical posts
+      const postGeometry = new THREE.BoxGeometry(0.1, 3, 0.1);
+      for (let i = 0; i < 4; i++) {
+        const post = new THREE.Mesh(postGeometry, tubeMaterial);
+        const offsetX = i % 2 === 0 ? -0.5 : 0.5;
+        const offsetZ = i < 2 ? -0.5 : 0.5;
+        post.position.set(offsetX, 1.5, offsetZ);
+        post.castShadow = true;
+        post.receiveShadow = true;
+        rackGroup.add(post);
+      }
+
+      // Horizontal bars
+      const barGeometry = new THREE.BoxGeometry(1.2, 0.08, 1.2);
+      const bar = new THREE.Mesh(barGeometry, tubeMaterial);
+      bar.position.y = 2.5;
+      bar.castShadow = true;
+      bar.receiveShadow = true;
+      rackGroup.add(bar);
+
+      rackGroup.position.set(x, 0, z);
+      return rackGroup;
+    };
+
+    scene.add(createPowerRack(-8, -5));
+    scene.add(createPowerRack(8, -5));
+    scene.add(createPowerRack(-8, 5));
+    scene.add(createPowerRack(8, 5));
 
     // Dumbbells
-    for (let i = 0; i < 5; i++) {
-      const dumbbell = new THREE.Mesh(
-        new THREE.CylinderGeometry(0.3, 0.3, 0.8, 16),
-        new THREE.MeshStandardMaterial({
-          color: 0xff6600,
-          roughness: 0.2,
-          metalness: 0.9
-        })
-      );
-      dumbbell.position.set(-15 + i * 2, 0.5, -5);
-      dumbbell.castShadow = true;
-      dumbbell.receiveShadow = true;
-      scene.add(dumbbell);
-    }
+    const createDumbbell = (x: number, z: number) => {
+      const group = new THREE.Group();
+      const handleMaterial = new THREE.MeshStandardMaterial({
+        color: 0xffff00,
+        metalness: 0.8,
+        roughness: 0.2,
+      });
+      
+      const handle = new THREE.Mesh(new THREE.CylinderGeometry(0.05, 0.05, 0.3), handleMaterial);
+      handle.castShadow = true;
+      handle.receiveShadow = true;
+      group.add(handle);
 
-    // Rings (suspension trainer)
-    const ringGeometry = new THREE.TorusGeometry(0.3, 0.05, 16, 16);
-    const ringMaterial = new THREE.MeshStandardMaterial({
-      color: 0xffff00,
-      roughness: 0.3,
-      metalness: 0.8
-    });
-    for (let i = 0; i < 2; i++) {
-      const ring = new THREE.Mesh(ringGeometry, ringMaterial);
-      ring.position.set(-5 + i * 10, 8, -10);
-      ring.castShadow = true;
-      ring.receiveShadow = true;
-      scene.add(ring);
-    }
+      const weightMaterial = new THREE.MeshStandardMaterial({
+        color: 0xff6b00,
+        metalness: 0.9,
+        roughness: 0.1,
+      });
+      
+      const weight1 = new THREE.Mesh(new THREE.SphereGeometry(0.15, 16, 16), weightMaterial);
+      weight1.position.z = 0.2;
+      weight1.castShadow = true;
+      weight1.receiveShadow = true;
+      group.add(weight1);
 
-    // Climbing wall
-    const climbingWallGeometry = new THREE.BoxGeometry(8, 10, 0.3);
-    const climbingWallMaterial = new THREE.MeshStandardMaterial({
-      color: 0x444444,
-      roughness: 0.8,
-      metalness: 0.1
-    });
-    const climbingWall = new THREE.Mesh(climbingWallGeometry, climbingWallMaterial);
-    climbingWall.position.set(10, 5, -22);
-    climbingWall.castShadow = true;
-    climbingWall.receiveShadow = true;
-    scene.add(climbingWall);
+      const weight2 = new THREE.Mesh(new THREE.SphereGeometry(0.15, 16, 16), weightMaterial);
+      weight2.position.z = -0.2;
+      weight2.castShadow = true;
+      weight2.receiveShadow = true;
+      group.add(weight2);
 
-    // Hold indicators on climbing wall
-    for (let i = 0; i < 6; i++) {
-      const hold = new THREE.Mesh(
-        new THREE.SphereGeometry(0.3, 16, 16),
-        new THREE.MeshStandardMaterial({
-          color: 0xff3333,
-          roughness: 0.4,
-          metalness: 0.6
-        })
-      );
-      hold.position.set(
-        10 - 2 + (i % 3) * 2,
-        5 + Math.floor(i / 3) * 3,
-        -21.5
-      );
-      hold.castShadow = true;
-      hold.receiveShadow = true;
-      scene.add(hold);
-    }
+      group.position.set(x, 0.5, z);
+      return group;
+    };
 
-    // Treadmill/Cardio station
-    const treadmillGeometry = new THREE.BoxGeometry(1.5, 1, 2);
-    const treadmillMaterial = new THREE.MeshStandardMaterial({
-      color: 0x1a1a1a,
-      roughness: 0.6,
-      metalness: 0.4
-    });
-    const treadmill = new THREE.Mesh(treadmillGeometry, treadmillMaterial);
-    treadmill.position.set(15, 0.5, 0);
-    treadmill.castShadow = true;
-    treadmill.receiveShadow = true;
-    scene.add(treadmill);
+    scene.add(createDumbbell(-12, 0));
+    scene.add(createDumbbell(-10, 0));
+    scene.add(createDumbbell(10, 0));
+    scene.add(createDumbbell(12, 0));
+
+    // Barbells on stands
+    const createBarbell = (x: number, z: number) => {
+      const group = new THREE.Group();
+      
+      const barMaterial = new THREE.MeshStandardMaterial({
+        color: 0xffff00,
+        metalness: 0.9,
+        roughness: 0.1,
+      });
+
+      const bar = new THREE.Mesh(new THREE.CylinderGeometry(0.08, 0.08, 2), barMaterial);
+      bar.rotation.z = Math.PI / 2;
+      bar.castShadow = true;
+      bar.receiveShadow = true;
+      group.add(bar);
+
+      const plateMaterial = new THREE.MeshStandardMaterial({
+        color: 0xff0000,
+        metalness: 0.7,
+        roughness: 0.3,
+      });
+
+      for (let i = 0; i < 4; i++) {
+        const plate = new THREE.Mesh(new THREE.CylinderGeometry(0.35, 0.35, 0.05), plateMaterial);
+        plate.position.z = (i - 1.5) * 0.2;
+        plate.rotation.z = Math.PI / 2;
+        plate.castShadow = true;
+        plate.receiveShadow = true;
+        group.add(plate);
+      }
+
+      group.position.set(x, 1, z);
+      return group;
+    };
+
+    scene.add(createBarbell(0, -8));
+    scene.add(createBarbell(0, 8));
+
+    // Rowing machines
+    const createRowingMachine = (x: number, z: number) => {
+      const group = new THREE.Group();
+      
+      const frameMaterial = new THREE.MeshStandardMaterial({
+        color: 0x333333,
+        metalness: 0.6,
+        roughness: 0.4,
+      });
+
+      const base = new THREE.Mesh(new THREE.BoxGeometry(0.8, 0.2, 2), frameMaterial);
+      base.castShadow = true;
+      base.receiveShadow = true;
+      group.add(base);
+
+      const seat = new THREE.Mesh(new THREE.BoxGeometry(0.6, 0.3, 0.4), frameMaterial);
+      seat.position.set(0, 0.5, -0.3);
+      seat.castShadow = true;
+      seat.receiveShadow = true;
+      group.add(seat);
+
+      const handle = new THREE.Mesh(new THREE.BoxGeometry(0.6, 0.1, 0.1), frameMaterial);
+      handle.position.set(0, 0.7, 0.6);
+      handle.castShadow = true;
+      handle.receiveShadow = true;
+      group.add(handle);
+
+      group.position.set(x, 0, z);
+      return group;
+    };
+
+    scene.add(createRowingMachine(-5, 12));
+    scene.add(createRowingMachine(5, 12));
 
     // Animation
-    let animationId: number;
+    let animationFrameId: number;
     const animate = () => {
-      animationId = requestAnimationFrame(animate);
+      animationFrameId = requestAnimationFrame(animate);
 
-      // Rotate the camera around the scene
-      const angle = Date.now() * 0.0001;
-      camera.position.x = Math.sin(angle) * 20;
-      camera.position.z = Math.cos(angle) * 20;
-      camera.lookAt(0, 5, 0);
+      // Rotate scene slightly
+      scene.rotation.y += 0.0003;
 
       renderer.render(scene, camera);
     };
+
     animate();
 
-    // Handle resize
+    // Handle window resize
     const handleResize = () => {
-      if (!mountRef.current) return;
-      const width = mountRef.current.clientWidth;
-      const height = mountRef.current.clientHeight;
+      if (!canvasRef.current) return;
+      const width = canvasRef.current.clientWidth;
+      const height = canvasRef.current.clientHeight;
       camera.aspect = width / height;
       camera.updateProjectionMatrix();
       renderer.setSize(width, height);
@@ -227,28 +276,24 @@ export default function Gym3DPage() {
 
     return () => {
       window.removeEventListener('resize', handleResize);
-      cancelAnimationFrame(animationId);
-      mountRef.current?.removeChild(renderer.domElement);
+      cancelAnimationFrame(animationFrameId);
+      renderer.dispose();
     };
   }, []);
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const { name, value } = e.target;
+  const handleInputChange = (field: keyof FormData, value: string) => {
     setFormData(prev => ({
       ...prev,
-      [name]: value
+      [field]: value
     }));
   };
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    // Handle form submission
     console.log('Form submitted:', formData);
     setSubmitted(true);
-    setTimeout(() => {
-      setSubmitted(false);
-      setFormData({ name: '', email: '', phone: '', message: '' });
-    }, 3000);
+    setFormData({ name: '', email: '', phone: '', message: '' });
+    setTimeout(() => setSubmitted(false), 3000);
   };
 
   return (
@@ -272,114 +317,105 @@ export default function Gym3DPage() {
             { name: "Pricing", id: "pricing" },
             { name: "Gallery", id: "gallery" },
             { name: "Testimonials", id: "testimonials" },
-            { name: "Home", id: "/" }
+            { name: "3D Gym", id: "gym-3d" },
+            { name: "Contact", id: "contact" }
           ]}
           button={{ text: "Start Your Trial", href: "contact" }}
         />
       </div>
 
-      <div className="min-h-screen bg-black pt-32">
-        {/* 3D Gym Visualization */}
-        <div
-          ref={mountRef}
-          className="w-full h-96 md:h-screen mb-12 rounded-lg overflow-hidden border border-yellow-400/20"
-          style={{
-            background: 'linear-gradient(to bottom, #0a0a0a, #1a1a1a)'
-          }}
-        />
+      <div className="min-h-screen bg-background pt-32">
+        {/* 3D Gym Viewer */}
+        <div id="gym-3d" data-section="gym-3d" className="w-full px-4 md:px-8 py-12">
+          <div className="max-w-6xl mx-auto">
+            <div className="mb-8 text-center">
+              <h1 className="text-5xl md:text-6xl font-bold mb-4 text-foreground">Tour Our 3D Gym</h1>
+              <p className="text-xl text-foreground/80 mb-2">Explore Iron Pulse's state-of-the-art facility</p>
+              <p className="text-sm text-foreground/60">Use your mouse to rotate and explore. Scroll to zoom.</p>
+            </div>
+
+            <div className="rounded-2xl overflow-hidden shadow-2xl bg-card border border-accent/20 mb-12">
+              <canvas
+                ref={canvasRef}
+                className="w-full h-96 md:h-[600px] block"
+              />
+            </div>
+          </div>
+        </div>
 
         {/* Contact Form */}
-        <div className="max-w-2xl mx-auto px-6 py-12 mb-12">
-          <div className="bg-gray-900/50 backdrop-blur-sm border border-yellow-400/20 rounded-lg p-8 md:p-12">
-            <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">Contact Us</h2>
-            <p className="text-gray-300 mb-8 text-lg">Interested in our 3D gym experience or want to learn more? Get in touch!</p>
+        <div id="contact" data-section="contact" className="w-full px-4 md:px-8 py-12 bg-card/50">
+          <div className="max-w-2xl mx-auto">
+            <div className="mb-8 text-center">
+              <h2 className="text-4xl md:text-5xl font-bold mb-4 text-foreground flex items-center justify-center gap-2">
+                <Zap className="w-8 h-8 text-primary-cta" />
+                Contattaci
+              </h2>
+              <p className="text-lg text-foreground/80">Siamo pronti a rispondere a tutte le tue domande sulla nostra palestra 3D e i nostri servizi</p>
+            </div>
 
-            {submitted ? (
-              <div className="bg-green-900/30 border border-green-400 rounded-lg p-6 text-green-300 text-center">
-                <p className="text-xl font-semibold">✓ Thank you for reaching out!</p>
-                <p>We'll get back to you soon.</p>
+            <form onSubmit={handleSubmit} className="space-y-6 bg-background/50 p-8 rounded-xl border border-accent/20">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Nome</label>
+                <Input
+                  value={formData.name}
+                  onChange={(value) => handleInputChange('name', value)}
+                  type="text"
+                  placeholder="Il tuo nome"
+                  required
+                  className="w-full"
+                />
               </div>
-            ) : (
-              <form onSubmit={handleSubmit} className="space-y-6">
-                <div className="grid md:grid-cols-2 gap-6">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">Name</label>
-                    <input
-                      type="text"
-                      name="name"
-                      value={formData.name}
-                      onChange={handleInputChange}
-                      required
-                      className="w-full bg-gray-800 border border-yellow-400/20 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-yellow-400 transition"
-                      placeholder="Your name"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">Email</label>
-                    <input
-                      type="email"
-                      name="email"
-                      value={formData.email}
-                      onChange={handleInputChange}
-                      required
-                      className="w-full bg-gray-800 border border-yellow-400/20 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-yellow-400 transition"
-                      placeholder="your@email.com"
-                    />
-                  </div>
-                </div>
 
-                <div>
-                  <label className="block text-sm font-medium text-gray-300 mb-2">Phone</label>
-                  <input
-                    type="tel"
-                    name="phone"
-                    value={formData.phone}
-                    onChange={handleInputChange}
-                    className="w-full bg-gray-800 border border-yellow-400/20 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-yellow-400 transition"
-                    placeholder="+1 (555) 000-0000"
-                  />
-                </div>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Email</label>
+                <Input
+                  value={formData.email}
+                  onChange={(value) => handleInputChange('email', value)}
+                  type="email"
+                  placeholder="La tua email"
+                  required
+                  className="w-full"
+                />
+              </div>
 
-                <div>
-                  <label className="block text-sm font-medium text-gray-300 mb-2">Message</label>
-                  <textarea
-                    name="message"
-                    value={formData.message}
-                    onChange={handleInputChange}
-                    required
-                    rows={5}
-                    className="w-full bg-gray-800 border border-yellow-400/20 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-yellow-400 transition resize-none"
-                    placeholder="Tell us about your interest..."
-                  />
-                </div>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Telefono</label>
+                <Input
+                  value={formData.phone}
+                  onChange={(value) => handleInputChange('phone', value)}
+                  type="tel"
+                  placeholder="Il tuo numero di telefono"
+                  className="w-full"
+                />
+              </div>
 
-                <button
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Messaggio</label>
+                <textarea
+                  value={formData.message}
+                  onChange={(e) => handleInputChange('message', e.target.value)}
+                  placeholder="Scrivi il tuo messaggio..."
+                  rows={5}
+                  className="w-full px-4 py-3 bg-secondary-cta text-foreground placeholder:text-foreground/50 rounded-lg border border-accent/20 focus:outline-none focus:border-primary-cta focus:ring-2 focus:ring-primary-cta/20 transition-all"
+                />
+              </div>
+
+              <div className="flex gap-4">
+                <ButtonElasticEffect
+                  text={submitted ? "✓ Inviato!" : "Invia Messaggio"}
                   type="submit"
-                  className="w-full bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-3 rounded-lg transition transform hover:scale-105 active:scale-95"
-                >
-                  Send Message
-                </button>
-              </form>
-            )}
-          </div>
+                  className="flex-1 py-3"
+                  disabled={submitted}
+                />
+              </div>
 
-          {/* Contact Info */}
-          <div className="grid md:grid-cols-3 gap-6 mt-12">
-            <div className="text-center">
-              <Phone className="w-8 h-8 text-yellow-400 mx-auto mb-3" />
-              <p className="text-gray-300 font-semibold mb-1">Phone</p>
-              <p className="text-gray-400">+1 (555) 123-4567</p>
-            </div>
-            <div className="text-center">
-              <Mail className="w-8 h-8 text-yellow-400 mx-auto mb-3" />
-              <p className="text-gray-300 font-semibold mb-1">Email</p>
-              <p className="text-gray-400">contact@ironpulse.com</p>
-            </div>
-            <div className="text-center">
-              <MapPin className="w-8 h-8 text-yellow-400 mx-auto mb-3" />
-              <p className="text-gray-300 font-semibold mb-1">Location</p>
-              <p className="text-gray-400">123 Power Ave, Fitness City</p>
-            </div>
+              {submitted && (
+                <div className="p-4 bg-primary-cta/10 border border-primary-cta text-foreground rounded-lg text-center">
+                  Grazie! Abbiamo ricevuto il tuo messaggio. Ti contatteremo presto.
+                </div>
+              )}
+            </form>
           </div>
         </div>
       </div>

src/app/layout.tsx

@@ -5,7 +5,8 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Iron Pulse CrossFit",  description: "Elite CrossFit training and community"};
+  title: "Iron Pulse CrossFit",  description: "Elite CrossFit training and coaching"
+};
 
 export default function RootLayout({
   children,

src/app/page.tsx

@@ -33,7 +33,8 @@ export default function LandingPage() {
             { name: "Pricing", id: "pricing" },
             { name: "Gallery", id: "gallery" },
             { name: "Testimonials", id: "testimonials" },
-            { name: "Gym 3D", id: "/gym-3d" }
+            { name: "3D Gym", id: "gym-3d" },
+            { name: "Contact", id: "contact" }
           ]}
           button={{ text: "Start Your Trial", href: "contact" }}
         />
@@ -70,9 +71,6 @@ export default function LandingPage() {
             }
           ]}
           ariaLabel="Iron Pulse CrossFit Hero Section"
-          containerClassName="w-full"
-          titleClassName="text-5xl md:text-7xl font-bold tracking-tight"
-          descriptionClassName="text-lg md:text-xl text-foreground/90"
         />
       </div>
 
@@ -127,20 +125,16 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           plans={[
             {
-              id: "drop-in",              badge: "Pay As You Go",              price: "$25",              subtitle: "Single class access",              features: ["1 drop-in class", "Full facility access", "No commitment", "Valid for 30 days"],
-              badgeIcon: Zap
+              id: "drop-in",              badge: "Pay As You Go",              price: "$25",              subtitle: "Single class access",              features: ["1 drop-in class", "Full facility access", "No commitment", "Valid for 30 days"]
             },
             {
-              id: "unlimited-monthly",              badge: "Most Popular",              price: "$149",              subtitle: "Unlimited monthly membership",              features: ["Unlimited classes", "Daily WOD access", "Community leaderboards", "Coaching support", "Progress tracking"],
-              badgeIcon: Award
+              id: "unlimited-monthly",              badge: "Most Popular",              price: "$149",              subtitle: "Unlimited monthly membership",              features: ["Unlimited classes", "Daily WOD access", "Community leaderboards", "Coaching support", "Progress tracking"]
             },
             {
-              id: "elite-coaching",              badge: "Elite Athletes",              price: "$249",              subtitle: "1-on-1 coaching program",              features: ["Unlimited classes", "1-on-1 coaching sessions", "Custom programming", "Monthly performance review", "Priority support", "Comp prep optional"],
-              badgeIcon: Trophy
+              id: "elite-coaching",              badge: "Elite Athletes",              price: "$249",              subtitle: "1-on-1 coaching program",              features: ["Unlimited classes", "1-on-1 coaching sessions", "Custom programming", "Monthly performance review", "Priority support", "Comp prep optional"]
             },
             {
-              id: "team-package",              badge: "Teams",              price: "$999",              subtitle: "5-person team membership",              features: ["5 unlimited memberships", "Team leaderboards", "Group coaching sessions", "Team challenge events", "Dedicated account manager"],
-              badgeIcon: Users
+              id: "team-package",              badge: "Teams",              price: "$999",              subtitle: "5-person team membership",              features: ["5 unlimited memberships", "Team leaderboards", "Group coaching sessions", "Team challenge events", "Dedicated account manager"]
             }
           ]}
           animationType="slide-up"
@@ -276,7 +270,7 @@ export default function LandingPage() {
                 { label: "About Us", href: "#" },
                 { label: "Contact", href: "#contact" },
                 { label: "Join Team", href: "#" },
-                { label: "Gym 3D", href: "/gym-3d" }
+                { label: "Blog", href: "#" }
               ]
             }
           ]}