Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #4.
This commit is contained in:
320
src/app/gym-3d/page.tsx
Normal file
320
src/app/gym-3d/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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" }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user