Merge version_2 into main #10
@@ -1,181 +1,254 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import * as THREE from 'three';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { Mail, Send } from 'lucide-react';
|
||||
import * as THREE from "three";
|
||||
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
|
||||
import { ChevronDown, Mail, Phone, MapPin } from 'lucide-react';
|
||||
|
||||
export default function Gym3D() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const [formData, setFormData] = useState({ name: "", email: "", message: "" });
|
||||
interface FormData {
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export default function Gym3DPage() {
|
||||
const mountRef = useRef<HTMLDivElement>(null);
|
||||
const sceneRef = useRef<THREE.Scene | null>(null);
|
||||
const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: ''
|
||||
});
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const loadThree = async () => {
|
||||
if (!canvasRef.current) return;
|
||||
if (!mountRef.current) return;
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x0a0a0a);
|
||||
scene.fog = new THREE.Fog(0x0a0a0a, 50, 200);
|
||||
// Scene setup
|
||||
const scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x0a0a0a);
|
||||
sceneRef.current = scene;
|
||||
|
||||
const camera = new THREE.PerspectiveCamera(
|
||||
75,
|
||||
canvasRef.current.clientWidth / canvasRef.current.clientHeight,
|
||||
0.1,
|
||||
1000
|
||||
// Camera
|
||||
const camera = new THREE.PerspectiveCamera(
|
||||
75,
|
||||
mountRef.current.clientWidth / mountRef.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);
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFShadowShadowMap;
|
||||
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);
|
||||
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);
|
||||
scene.add(pointLight);
|
||||
|
||||
// Floor
|
||||
const floorGeometry = new THREE.PlaneGeometry(50, 50);
|
||||
const floorMaterial = new THREE.MeshStandardMaterial({
|
||||
color: 0x1a1a1a,
|
||||
roughness: 0.8,
|
||||
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
|
||||
});
|
||||
|
||||
// Back wall
|
||||
const backWallGeometry = new THREE.BoxGeometry(50, 15, 1);
|
||||
const backWall = new THREE.Mesh(backWallGeometry, wallMaterial);
|
||||
backWall.position.set(0, 7.5, -25);
|
||||
backWall.castShadow = true;
|
||||
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;
|
||||
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);
|
||||
|
||||
// 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);
|
||||
|
||||
// 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
|
||||
})
|
||||
);
|
||||
camera.position.set(20, 15, 20);
|
||||
dumbbell.position.set(-15 + i * 2, 0.5, -5);
|
||||
dumbbell.castShadow = true;
|
||||
dumbbell.receiveShadow = true;
|
||||
scene.add(dumbbell);
|
||||
}
|
||||
|
||||
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(canvasRef.current.clientWidth, canvasRef.current.clientHeight);
|
||||
renderer.shadowMap.enabled = true;
|
||||
canvasRef.current.appendChild(renderer.domElement);
|
||||
// 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);
|
||||
}
|
||||
|
||||
// Lighting
|
||||
const ambientLight = new THREE.AmbientLight(0xffff00, 0.6);
|
||||
scene.add(ambientLight);
|
||||
// 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 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
|
||||
// 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
|
||||
})
|
||||
);
|
||||
sideWall.position.set(-25, 7.5, 0);
|
||||
scene.add(sideWall);
|
||||
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);
|
||||
}
|
||||
|
||||
// Controls
|
||||
const controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.05;
|
||||
controls.autoRotate = true;
|
||||
controls.autoRotateSpeed = 2;
|
||||
// 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);
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
controls.update();
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
animate();
|
||||
// Animation
|
||||
let animationId: number;
|
||||
const animate = () => {
|
||||
animationId = requestAnimationFrame(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);
|
||||
// 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);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
canvasRef.current?.removeChild(renderer.domElement);
|
||||
};
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
animate();
|
||||
|
||||
// Handle resize
|
||||
const handleResize = () => {
|
||||
if (!mountRef.current) return;
|
||||
const width = mountRef.current.clientWidth;
|
||||
const height = mountRef.current.clientHeight;
|
||||
camera.aspect = width / height;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(width, height);
|
||||
};
|
||||
|
||||
loadThree();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
cancelAnimationFrame(animationId);
|
||||
mountRef.current?.removeChild(renderer.domElement);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Handle form submission
|
||||
console.log('Form submitted:', formData);
|
||||
setSubmitted(true);
|
||||
setFormData({ name: "", email: "", message: "" });
|
||||
setTimeout(() => setSubmitted(false), 3000);
|
||||
setTimeout(() => {
|
||||
setSubmitted(false);
|
||||
setFormData({ name: '', email: '', phone: '', message: '' });
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -195,112 +268,117 @@ export default function Gym3D() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Iron Pulse"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "WOD", id: "wod" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Testimonials", id: "testimonials" }
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Home", id: "/" }
|
||||
]}
|
||||
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="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="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>
|
||||
{/* 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 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>
|
||||
{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>
|
||||
</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 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>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Phone</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
|
||||
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-gray-300 mb-2">Message</label>
|
||||
<textarea
|
||||
name="message"
|
||||
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..."
|
||||
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>
|
||||
|
||||
<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"
|
||||
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 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>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import "./styles/variables.css";
|
||||
import "./styles/base.css";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Iron Pulse CrossFit", description: "Elite CrossFit training and coaching"};
|
||||
title: "Iron Pulse CrossFit", description: "Elite CrossFit training and community"};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
|
||||
246
src/app/page.tsx
246
src/app/page.tsx
@@ -1,6 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
||||
@@ -9,143 +8,238 @@ import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import Link from 'next/link';
|
||||
import { Zap, Package, Trophy, Users } from 'lucide-react';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { Award, Camera, DollarSign, Flame, Quote, Target, Trophy, TrendingUp, Users, Zap } from 'lucide-react';
|
||||
|
||||
export default function Home() {
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
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" },
|
||||
{ name: "3D Tour", id: "/gym-3d" }
|
||||
{ name: "Gym 3D", id: "/gym-3d" }
|
||||
]}
|
||||
button={{ text: "Start Your Trial", href: "testimonials" }}
|
||||
button={{ text: "Start Your Trial", href: "contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="Welcome to Iron Pulse"
|
||||
description="Experience elite CrossFit training with state-of-the-art equipment and expert coaching"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Peak Performance"
|
||||
title="Forge Your Strength"
|
||||
description="High-intensity CrossFit training built for athletes who refuse to quit. See today's WOD and claim your spot in our community"
|
||||
tag="Elite Coaching"
|
||||
tagIcon={Zap}
|
||||
buttons={[{ text: "Start Your Trial", href: "/gym-3d" }, { text: "Learn More", href: "wod" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Gym facility" },
|
||||
{ imageSrc: "/placeholders/placeholder2.webp", imageAlt: "CrossFit training" },
|
||||
{ imageSrc: "/placeholders/placeholder3.webp", imageAlt: "Athlete performance" }
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[
|
||||
{ text: "Start Your Trial", href: "contact" },
|
||||
{ text: "View Today's WOD", href: "wod" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-muscular-build-man-doing-deadlift-while-exercising-with-barbell-gym_637285-2489.jpg?_wi=1", imageAlt: "CrossFit WOD Challenge"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-sportswoman-doing-sled-push-exercise-shouting-sports-training-gym-while-her-friend-is-watching-her_637285-917.jpg", imageAlt: "Iron Pulse Gym Interior"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-powerful-sportsman-training-with-barbell-black-background_176420-55840.jpg", imageAlt: "Athlete in Action"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fitness-woman-working-out-with-battle-ropes-gym_342744-4.jpg", imageAlt: "Rope Climbing Challenge"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-doing-push-up-exercise-with-dumbbell-crossfit-gym_639032-2657.jpg", imageAlt: "Kettlebell Power Movement"
|
||||
}
|
||||
]}
|
||||
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>
|
||||
|
||||
<div id="wod" data-section="wod">
|
||||
<FeatureBorderGlow
|
||||
title="Workout of the Day"
|
||||
description="Daily programming designed to build strength, power, and endurance"
|
||||
title="Today's WOD"
|
||||
description="Intense, scalable programming designed for all levels. Push your limits and track your performance"
|
||||
tag="Daily Challenge"
|
||||
tagIcon={Flame}
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{ icon: Trophy, title: "Strength & Power", description: "Olympic lifting and gymnastics movements" },
|
||||
{ icon: Zap, title: "Metabolic Conditioning", description: "High-intensity interval training" },
|
||||
{ icon: Users, title: "Community Support", description: "Train alongside passionate athletes" },
|
||||
{ icon: Package, title: "Personalized Plans", description: "Customized coaching for your goals" }
|
||||
{
|
||||
icon: Flame,
|
||||
title: "Benchmark Workouts", description: "Proven exercises tested by elite athletes worldwide. Compare your scores and push harder each time"
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Scalable Programming", description: "Every workout scales for beginners to competitive athletes. No one left behind, everyone challenged"
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: "Real-Time Tracking", description: "Log your lifts, times, and progress instantly. Watch your improvements week after week"
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Community Leaderboards", description: "Compete with your crew. Daily scores keep the energy high and motivation flowing"
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: "Performance Metrics", description: "Detailed analytics show your strengths and areas for growth. Data-driven coaching"
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Monthly Challenges", description: "Special competitions with prizes. Push beyond limits and earn recognition"
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tag="Training Programs"
|
||||
tagIcon={Zap}
|
||||
buttons={[{ text: "View Full Schedule", href: "#" }]}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Daily WOD Features Section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
title="Choose Your Plan"
|
||||
description="Flexible membership options for every athlete"
|
||||
title="Membership Plans"
|
||||
description="Choose your commitment level. All plans include full access to classes, programming, and community"
|
||||
tag="Transparent Pricing"
|
||||
tagIcon={Camera}
|
||||
tagAnimation="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "1", badge: "Starter", price: "$99/mo", subtitle: "Perfect for beginners", features: [
|
||||
"Unlimited classes", "Community access", "Member locker", "Monthly assessment"
|
||||
]
|
||||
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: "2", badge: "Most Popular", badgeIcon: Trophy,
|
||||
price: "$149/mo", subtitle: "Best for serious athletes", features: [
|
||||
"Unlimited classes", "Personal coaching", "Nutrition guidance", "Performance tracking", "Priority booking"
|
||||
]
|
||||
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: "3", badge: "Elite", price: "$199/mo", subtitle: "For competitive athletes", features: [
|
||||
"Everything in Pro", "1-on-1 coaching", "Competition prep", "Exclusive events", "VIP support"
|
||||
]
|
||||
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: "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
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "Get Started", href: "contact" }]}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Membership Pricing Section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardOne
|
||||
title="Equipment Gallery"
|
||||
description="Explore our premium facility and equipment"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
title="Athlete & Equipment Gallery"
|
||||
description="Meet our community. See the strength, technique, and intensity that defines Iron Pulse"
|
||||
tag="Our People"
|
||||
tagIcon={Camera}
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "athlete-1", name: "Sarah Chen - Competitor", price: "4x Regional Champion", imageSrc: "http://img.b2bpic.net/free-photo/crossfit-exercise-performed-by-strong-woman-with-rope_1098-18892.jpg?_wi=1", imageAlt: "Sarah Chen CrossFit Athlete"
|
||||
},
|
||||
{
|
||||
id: "athlete-2", name: "Marcus Rodriguez - Elite", price: "2x Games Qualifier", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-muscular-build-man-doing-deadlift-while-exercising-with-barbell-gym_637285-2489.jpg?_wi=2", imageAlt: "Marcus Rodriguez CrossFit Athlete"
|
||||
},
|
||||
{
|
||||
id: "athlete-3", name: "Community Group", price: "50+ Active Members", imageSrc: "http://img.b2bpic.net/free-photo/front-view-people-training-together-gym_23-2150289964.jpg?_wi=1", imageAlt: "Iron Pulse Community Training"
|
||||
},
|
||||
{
|
||||
id: "equipment-1", name: "Competition Barbells", price: "Rogue & Eleiko", imageSrc: "http://img.b2bpic.net/free-photo/exercise-weights-iron-dumbbell-with-extra-plates_1423-222.jpg?_wi=1", imageAlt: "Competition Grade Barbells"
|
||||
},
|
||||
{
|
||||
id: "equipment-2", name: "Gymnastics Rig", price: "Full Olympic Rings", imageSrc: "http://img.b2bpic.net/free-photo/sports-suspension-straps-foreground-two-fitness-girls-talking-background-modern-gym_613910-20354.jpg", imageAlt: "Gymnastics Training Rig"
|
||||
},
|
||||
{
|
||||
id: "equipment-3", name: "Strength Station", price: "Power Racks & Dumbbells", imageSrc: "http://img.b2bpic.net/free-photo/sports-equipment-dumbbells-gym_169016-61685.jpg", imageAlt: "Strength Training Equipment"
|
||||
}
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Olympic Barbells", price: "Competition Grade", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Olympic barbells" },
|
||||
{ id: "2", name: "Gymnastics Rig", price: "Full Equipment", imageSrc: "/placeholders/placeholder2.webp", imageAlt: "Gymnastics rig" },
|
||||
{ id: "3", name: "Dumbbells Set", price: "5-150 lbs", imageSrc: "/placeholders/placeholder3.webp", imageAlt: "Dumbbell set" }
|
||||
]}
|
||||
ariaLabel="Athlete and Equipment Gallery Section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
title="What Our Members Say"
|
||||
description="Real stories from athletes who transformed their fitness journey"
|
||||
title="What Our Athletes Say"
|
||||
description="Real stories from real people. This is why Iron Pulse is more than a gym—it's a family"
|
||||
tag="Testimonials"
|
||||
tagIcon={Quote}
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah Johnson", date: "January 2025", title: "Competitive Athlete", quote: "Iron Pulse changed my entire approach to training. The coaching is exceptional and the community is incredibly supportive.", tag: "Athlete", avatarSrc: "/placeholders/placeholder1.webp", imageSrc: "/placeholders/placeholder2.webp"
|
||||
id: "1", name: "Jessica Miller, Marketing Executive", date: "Date: 15 November 2024", title: "Transformed My Life", quote: "I walked in terrified of being the weakest in the room. The coaches met me where I was and pushed me to places I never thought possible. Six months later, I'm doing handstand walks and feel stronger than ever.", tag: "Beginner to Strong", avatarSrc: "http://img.b2bpic.net/free-photo/masculanity-strength-power-concept-picture-handsome-fit-young-afro-american-bodybuilder-with-bald-head-smoothly-shaven-face-looking-camera-with-confident-serious-facial-expression_343059-336.jpg", avatarAlt: "Jessica Miller", imageSrc: "http://img.b2bpic.net/free-photo/crossfit-exercise-performed-by-strong-woman-with-rope_1098-18892.jpg?_wi=2", imageAlt: "Jessica Training"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Mike Chen", date: "December 2024", title: "Fitness Coach", quote: "Best gym facility I've trained at. The equipment quality and programming are top-notch.", tag: "Coach", avatarSrc: "/placeholders/placeholder2.webp", imageSrc: "/placeholders/placeholder3.webp"
|
||||
id: "2", name: "David Thompson, Software Engineer", date: "Date: 20 October 2024", title: "Elite Coaching Changed Everything", quote: "I was plateauing in my training. The 1-on-1 coaching program identified my weaknesses and built a custom program. I'm now hitting PRs I didn't think were possible.", tag: "Elite Athlete", avatarSrc: "http://img.b2bpic.net/free-photo/masculanity-strength-power-concept-picture-handsome-fit-young-afro-american-bodybuilder-with-bald-head-smoothly-shaven-face-looking-camera-with-confident-serious-facial-expression_343059-336.jpg", avatarAlt: "David Thompson", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-muscular-build-man-doing-deadlift-while-exercising-with-barbell-gym_637285-2489.jpg?_wi=3", imageAlt: "David Lifting"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Emma Rodriguez", date: "November 2024", title: "CrossFit Enthusiast", quote: "Found my fitness family at Iron Pulse. The welcoming atmosphere makes every workout motivating.", tag: "Member", avatarSrc: "/placeholders/placeholder3.webp", imageSrc: "/placeholders/placeholder1.webp"
|
||||
id: "3", name: "Amanda Reyes, Teacher", date: "Date: 8 November 2024", title: "Community Is Everything", quote: "The energy at Iron Pulse is unmatched. Yes, the workouts are brutal, but the people pushing you and celebrating with you make it worth every rep. I've made genuine friends here.", tag: "Community", avatarSrc: "http://img.b2bpic.net/free-photo/masculanity-strength-power-concept-picture-handsome-fit-young-afro-american-bodybuilder-with-bald-head-smoothly-shaven-face-looking-camera-with-confident-serious-facial-expression_343059-336.jpg", avatarAlt: "Amanda Reyes", imageSrc: "http://img.b2bpic.net/free-photo/front-view-people-training-together-gym_23-2150289964.jpg?_wi=2", imageAlt: "Amanda with Community"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Chris Walker, Finance", date: "Date: 25 October 2024", title: "Results Speak Louder", quote: "I got serious about my fitness and Iron Pulse delivered. The programming is smart, the coaching is exceptional, and my body composition changed in weeks. This is the real deal.", tag: "Transformation", avatarSrc: "http://img.b2bpic.net/free-photo/masculanity-strength-power-concept-picture-handsome-fit-young-afro-american-bodybuilder-with-bald-head-smoothly-shaven-face-looking-camera-with-confident-serious-facial-expression_343059-336.jpg", avatarAlt: "Chris Walker", imageSrc: "http://img.b2bpic.net/free-photo/exercise-weights-iron-dumbbell-with-extra-plates_1423-222.jpg?_wi=2", imageAlt: "Chris Training Hard"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Lauren Kim, Athlete", date: "Date: 12 November 2024", title: "Competitive Edge", quote: "I came to Iron Pulse to prep for regionals. The competitive environment and knowledgeable coaches pushed me to my limits. I qualified and placed top 10 at the regional.", tag: "Competitive", avatarSrc: "http://img.b2bpic.net/free-photo/masculanity-strength-power-concept-picture-handsome-fit-young-afro-american-bodybuilder-with-bald-head-smoothly-shaven-face-looking-camera-with-confident-serious-facial-expression_343059-336.jpg", avatarAlt: "Lauren Kim", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-muscular-build-man-doing-deadlift-while-exercising-with-barbell-gym_637285-2489.jpg?_wi=4", imageAlt: "Lauren Competing"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Mike Torres, Sales Director", date: "Date: 3 November 2024", title: "Worth Every Dollar", quote: "Investment in yourself always pays dividends. The elite coaching membership turned my fitness around completely. Best money I've spent.", tag: "Investment", avatarSrc: "http://img.b2bpic.net/free-photo/masculanity-strength-power-concept-picture-handsome-fit-young-afro-american-bodybuilder-with-bald-head-smoothly-shaven-face-looking-camera-with-confident-serious-facial-expression_343059-336.jpg", avatarAlt: "Mike Torres", imageSrc: "http://img.b2bpic.net/free-photo/front-view-people-training-together-gym_23-2150289964.jpg?_wi=3", imageAlt: "Mike Training"
|
||||
}
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="Testimonials Section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
title="Trusted by Top Athletes"
|
||||
description="Join thousands of athletes who have transformed their fitness"
|
||||
names={["CrossFit Affiliates", "Olympic Athletes", "Fitness Coaches", "Health Professionals", "Sports Teams"]}
|
||||
title="Trusted by Elite Athletes"
|
||||
description="Partnered with top fitness brands and featured in major competition circuits"
|
||||
tag="Featured In"
|
||||
tagIcon={Trophy}
|
||||
tagAnimation="slide-up"
|
||||
names={[
|
||||
"CrossFit Games Official Box", "USA Weightlifting Certified", "NASM Coaching Partner", "Regional Competition Host", "Elite Training Network", "Fitness Equipment Sponsor", "Athlete Development Program", "Competition Prep Certified"
|
||||
]}
|
||||
logos={[
|
||||
"http://img.b2bpic.net/free-vector/typography-logo-template_23-2150529526.jpg", "http://img.b2bpic.net/free-vector/flat-logos-collection-pickleball_23-2150220607.jpg", "http://img.b2bpic.net/free-vector/future-leaders-marketing-school-template_742173-33274.jpg", "http://img.b2bpic.net/free-vector/athletes-logo-design_742173-20650.jpg", "http://img.b2bpic.net/free-vector/abstract-silhouette-sport-logo-flat-design_23-2148220451.jpg", "http://img.b2bpic.net/free-vector/green-gym-insignias_23-2147519756.jpg", "http://img.b2bpic.net/free-vector/typography-logo-template_23-2150529526.jpg", "http://img.b2bpic.net/free-vector/typography-logo-template_23-2150529526.jpg"
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Social Proof Section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -154,28 +248,40 @@ export default function Home() {
|
||||
logoText="Iron Pulse"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform", items: [
|
||||
{ label: "Classes", href: "wod" },
|
||||
{ label: "Pricing", href: "pricing" },
|
||||
{ label: "3D Tour", href: "/gym-3d" }
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Today's WOD", href: "#wod" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "Gallery", href: "#gallery" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Community", items: [
|
||||
{ label: "Members", href: "testimonials" },
|
||||
{ label: "Events", href: "testimonials" },
|
||||
{ label: "Blog", href: "testimonials" }
|
||||
{ label: "Testimonials", href: "#testimonials" },
|
||||
{ label: "Athletes", href: "#gallery" },
|
||||
{ label: "Events", href: "#" },
|
||||
{ label: "Leaderboards", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Training", items: [
|
||||
{ label: "Programming", href: "#wod" },
|
||||
{ label: "Coaching", href: "#pricing" },
|
||||
{ label: "Class Schedule", href: "#" },
|
||||
{ label: "Facility Tour", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "/" },
|
||||
{ label: "Contact", href: "testimonials" },
|
||||
{ label: "Careers", href: "/" }
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "Join Team", href: "#" },
|
||||
{ label: "Gym 3D", href: "/gym-3d" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Iron Pulse. All rights reserved."
|
||||
copyrightText="© 2025 Iron Pulse CrossFit. All rights reserved. Forged in intensity. Built by community."
|
||||
ariaLabel="Site Footer"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user