bender/3f2ead6d-8a2b-46e6-ba7c-e630f117126a
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #16

Merged
bender merged 3 commits from version_2 into main 2026-03-04 19:28:16 +00:00
Conversation 0 Commits 3 Files Changed 3 +198 -347
3 changed files with 198 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

520
src/app/gym-3d/page.tsx
View File

@@ -1,301 +1,208 @@
"use client";
import React, { useEffect, useRef, useState } from 'react';
import * as THREE from 'three';
import { useEffect, useRef, useState } from "react";
import * as THREE from "three";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Zap } from 'lucide-react';
import Input from '@/components/form/Input';
import ButtonElasticEffect from '@/components/button/ButtonElasticEffect/ButtonElasticEffect';
interface FormData {
name: string;
email: string;
phone: string;
message: string;
}
import { Phone } from "lucide-react";
export default function Gym3DPage() {
const canvasRef = useRef<HTMLCanvasElement>(null);
const [formData, setFormData] = useState<FormData>({
name: '',
email: '',
phone: '',
message: ''
});
const [submitted, setSubmitted] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
const sceneRef = useRef<THREE.Scene | null>(null);
const cameraRef = useRef<THREE.PerspectiveCamera | null>(null);
const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (!canvasRef.current) return;
if (!containerRef.current) return;
// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0a0a);
sceneRef.current = scene;
// Camera setup
const camera = new THREE.PerspectiveCamera(
75,
canvasRef.current.clientWidth / canvasRef.current.clientHeight,
containerRef.current.clientWidth / containerRef.current.clientHeight,
0.1,
1000
);
camera.position.set(0, 5, 15);
camera.position.set(0, 10, 20);
camera.lookAt(0, 5, 0);
cameraRef.current = camera;
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 setup
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(containerRef.current.clientWidth, containerRef.current.clientHeight);
renderer.shadowMap.enabled = true;
containerRef.current.appendChild(renderer.domElement);
rendererRef.current = renderer;
// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffff00, 1);
directionalLight.position.set(10, 20, 10);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(10, 15, 10);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
scene.add(directionalLight);
const pointLight = new THREE.PointLight(0xff6b00, 0.8);
pointLight.position.set(-10, 10, -10);
scene.add(pointLight);
// Ground/Floor
const groundGeometry = new THREE.PlaneGeometry(40, 40);
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x1a1a1a });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
scene.add(ground);
// Gym floor
const floorGeometry = new THREE.PlaneGeometry(40, 40);
const floorMaterial = new THREE.MeshStandardMaterial({
color: 0x1a1a1a,
roughness: 0.8,
metalness: 0.1,
// Gym Equipment - Power Rack
const rackGeometry = new THREE.BoxGeometry(2, 3, 1.5);
const rackMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, metalness: 0.8 });
const rack = new THREE.Mesh(rackGeometry, rackMaterial);
rack.position.set(-8, 1.5, 0);
rack.castShadow = true;
scene.add(rack);
// Barbell
const barbellGeometry = new THREE.CylinderGeometry(0.02, 0.02, 2.2, 16);
const barbellMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00, metalness: 1 });
const barbell = new THREE.Mesh(barbellGeometry, barbellMaterial);
barbell.position.set(-8, 1.8, 0);
barbell.rotation.z = Math.PI / 2;
barbell.castShadow = true;
scene.add(barbell);
// Weight plates on barbell
for (let i = 0; i < 4; i++) {
const plateGeometry = new THREE.CylinderGeometry(0.5, 0.5, 0.05, 32);
const plateMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, metalness: 0.6 });
const plate = new THREE.Mesh(plateGeometry, plateMaterial);
plate.position.set(-8 + (i - 1.5) * 0.6, 1.8, 0);
plate.castShadow = true;
scene.add(plate);
}
// Dumbbells rack
for (let i = 0; i < 5; i++) {
const dumbellGeometry = new THREE.CylinderGeometry(0.15, 0.15, 0.5, 16);
const dumbellMaterial = new THREE.MeshStandardMaterial({ color: 0xffaa00, metalness: 0.7 });
const dumbell = new THREE.Mesh(dumbellGeometry, dumbellMaterial);
dumbell.position.set(0 + i * 1.5, 0.5, -10);
dumbell.castShadow = true;
scene.add(dumbell);
}
// Gymnastics Rig
const rigGeometry = new THREE.BoxGeometry(0.1, 0.1, 5);
const rigMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, metalness: 0.8 });
const rig = new THREE.Mesh(rigGeometry, rigMaterial);
rig.position.set(0, 8, 0);
rig.castShadow = true;
scene.add(rig);
// Olympic Rings
const ringRadius = 0.3;
const ringPositions = [-1.2, -0.4, 0.4, 1.2];
ringPositions.forEach((x) => {
const torusGeometry = new THREE.TorusGeometry(ringRadius, 0.08, 16, 100);
const torusMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, metalness: 0.9 });
const ring = new THREE.Mesh(torusGeometry, torusMaterial);
ring.position.set(x, 7, 0);
ring.rotation.x = Math.PI / 5;
ring.castShadow = true;
scene.add(ring);
});
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.receiveShadow = true;
scene.add(floor);
// Rowing Machine
const rowingGeometry = new THREE.BoxGeometry(0.8, 1, 2.5);
const rowingMaterial = new THREE.MeshStandardMaterial({ color: 0x222222, metalness: 0.6 });
const rowingMachine = new THREE.Mesh(rowingGeometry, rowingMaterial);
rowingMachine.position.set(8, 0.8, -5);
rowingMachine.castShadow = true;
scene.add(rowingMachine);
// Treadmill
const treadmillGeometry = new THREE.BoxGeometry(1, 1.2, 2);
const treadmillMaterial = new THREE.MeshStandardMaterial({ color: 0x1a1a1a, metalness: 0.5 });
const treadmill = new THREE.Mesh(treadmillGeometry, treadmillMaterial);
treadmill.position.set(8, 0.8, 0);
treadmill.castShadow = true;
scene.add(treadmill);
// Kettlebells
for (let i = 0; i < 3; i++) {
const kettlebellGeometry = new THREE.SphereGeometry(0.4, 16, 16);
const kettlebellMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, metalness: 0.7 });
const kettlebell = new THREE.Mesh(kettlebellGeometry, kettlebellMaterial);
kettlebell.position.set(-10, 0.6, -5 + i * 2);
kettlebell.castShadow = true;
scene.add(kettlebell);
}
// Battle Ropes anchor
const ropeAnchorGeometry = new THREE.BoxGeometry(0.2, 3, 0.2);
const ropeAnchorMaterial = new THREE.MeshStandardMaterial({ color: 0x444444, metalness: 0.8 });
const ropeAnchor = new THREE.Mesh(ropeAnchorGeometry, ropeAnchorMaterial);
ropeAnchor.position.set(0, 2, 10);
ropeAnchor.castShadow = true;
scene.add(ropeAnchor);
// Walls
const wallMaterial = new THREE.MeshStandardMaterial({
color: 0x1a1a1a,
roughness: 0.9,
});
const wallGeometry = new THREE.BoxGeometry(40, 5, 0.5);
const wallMaterial = new THREE.MeshStandardMaterial({ color: 0x0f0f0f });
const wallBack = new THREE.Mesh(wallGeometry, wallMaterial);
wallBack.position.set(0, 2.5, -20);
wallBack.receiveShadow = true;
scene.add(wallBack);
const backWallGeometry = new THREE.PlaneGeometry(40, 20);
const backWall = new THREE.Mesh(backWallGeometry, wallMaterial);
backWall.position.z = -20;
backWall.position.y = 10;
backWall.receiveShadow = true;
scene.add(backWall);
// Loading complete
setIsLoading(false);
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);
// 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,
});
// 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
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);
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);
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);
group.position.set(x, 0.5, z);
return group;
};
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 animationFrameId: number;
// Animation loop
const animate = () => {
animationFrameId = requestAnimationFrame(animate);
requestAnimationFrame(animate);
// Rotate scene slightly
scene.rotation.y += 0.0003;
// Rotate dumbbells slightly
scene.children.forEach((child) => {
if (child instanceof THREE.Mesh && child.geometry instanceof THREE.CylinderGeometry) {
if (child.position.z === -10) {
child.rotation.x += 0.01;
}
}
});
// Rotate camera slightly
const time = Date.now() * 0.0005;
camera.position.x = Math.sin(time) * 25;
camera.position.z = Math.cos(time) * 25;
camera.lookAt(0, 5, 0);
renderer.render(scene, camera);
};
animate();
// Handle window resize
const handleResize = () => {
if (!canvasRef.current) return;
const width = canvasRef.current.clientWidth;
const height = canvasRef.current.clientHeight;
if (!containerRef.current) return;
const width = containerRef.current.clientWidth;
const height = containerRef.current.clientHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
};
window.addEventListener('resize', handleResize);
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener('resize', handleResize);
cancelAnimationFrame(animationFrameId);
renderer.dispose();
window.removeEventListener("resize", handleResize);
containerRef.current?.removeChild(renderer.domElement);
};
}, []);
const handleInputChange = (field: keyof FormData, value: string) => {
setFormData(prev => ({
...prev,
[field]: value
}));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log('Form submitted:', formData);
setSubmitted(true);
setFormData({ name: '', email: '', phone: '', message: '' });
setTimeout(() => setSubmitted(false), 3000);
};
return (
<ThemeProvider
defaultButtonVariant="text-shift"
@@ -317,107 +224,44 @@ export default function Gym3DPage() {
{ name: "Pricing", id: "pricing" },
{ name: "Gallery", id: "gallery" },
{ name: "Testimonials", id: "testimonials" },
{ name: "3D Gym", id: "gym-3d" },
{ name: "Contact", id: "contact" }
{ name: "Home", id: "/" }
]}
button={{ text: "Start Your Trial", href: "contact" }}
/>
</div>
<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 className="w-full h-screen bg-background" ref={containerRef}>
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm">
<div className="text-center">
<div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-primary-cta"></div>
<p className="text-foreground mt-4">Loading 3D Gym Tour...</p>
</div>
</div>
</div>
)}
</div>
{/* Contact Form */}
<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>
<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>
<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-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>
<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="flex-1 py-3"
disabled={submitted}
/>
</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 id="contact-form" data-section="contact" className="py-20">
<ContactSplitForm
title="Get in Touch"
description="Interested in joining Iron Pulse? Fill out the form below and our coaching team will reach out within 24 hours to schedule your trial session."
inputs={[
{ name: "name", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true }
]}
textarea={{
name: "message", placeholder: "Tell us about your fitness goals and experience level...", rows: 5,
required: false
}}
useInvertedBackground={false}
mediaAnimation="slide-up"
buttonText="Schedule Trial"
onSubmit={(data) => {
console.log("Form submitted:", data);
alert("Thank you for reaching out! We'll contact you soon.");
}}
ariaLabel="Contact form section"
/>
</div>
</ThemeProvider>
);

7
src/app/layout.tsx
View File

@@ -5,8 +5,7 @@ import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Iron Pulse CrossFit", description: "Elite CrossFit training and coaching"
};
title: "Iron Pulse - CrossFit Gym", description: "Elite CrossFit training and coaching"};
export default function RootLayout({
children,
@@ -15,7 +14,9 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className={inter.className}>{children}
<body className={inter.className}>
{children}
<script
dangerouslySetInnerHTML={{
__html: `

18
src/app/page.tsx
View File

@@ -33,8 +33,7 @@ export default function LandingPage() {
{ name: "Pricing", id: "pricing" },
{ name: "Gallery", id: "gallery" },
{ name: "Testimonials", id: "testimonials" },
{ name: "3D Gym", id: "gym-3d" },
{ name: "Contact", id: "contact" }
{ name: "3D Gym", id: "/gym-3d" }
]}
button={{ text: "Start Your Trial", href: "contact" }}
/>
@@ -71,6 +70,9 @@ 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>
@@ -125,16 +127,20 @@ 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"]
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: "unlimited-monthly", badge: "Most Popular", price: "$149", subtitle: "Unlimited monthly membership", features: ["Unlimited classes", "Daily WOD access", "Community leaderboards", "Coaching support", "Progress tracking"]
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: "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: "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"]
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"