import React, { useEffect, useRef, useState } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ChevronRight, Target, Brain, Users, Calendar, CheckCircle } from 'lucide-react';
gsap.registerPlugin(ScrollTrigger);
// --- DESIGN TOKENS (Preset B: Midnight Luxe) ---
const THEME = {
primary: '#0D0D12',
accent: '#C9A84C',
background: '#FAF8F5',
text: '#2A2A35',
};
export default function RobMouwenAcademy() {
const container = useRef(null);
useEffect(() => {
const ctx = gsap.context(() => {
// Entrance animations
const tl = gsap.timeline();
tl.fromTo('.hero-text', { y: 60, opacity: 0 }, { y: 0, opacity: 1, duration: 1, stagger: 0.15, ease: 'power3.out' });
// Magnetic Hover effect
const buttons = document.querySelectorAll('.magnetic');
buttons.forEach(btn => {
btn.addEventListener('mousemove', (e) => {
const { left, top, width, height } = btn.getBoundingClientRect();
gsap.to(btn, { x: (e.clientX - left - width/2) * 0.2, y: (e.clientY - top - height/2) * 0.2, duration: 0.3 });
});
btn.addEventListener('mouseleave', () => gsap.to(btn, { x: 0, y: 0, duration: 0.3 }));
});
}, container);
return () => ctx.revert();
}, []);
return (
{/* Navbar */}
{/* Hero Section */}
Putting Precision meets
Mastery.
{/* Features - Functional Artifacts */}
{ title: "Precision Fitting", icon: Target, desc: "Scotty Cameron technical analysis." },
{ title: "Advanced Coaching", icon: Brain, desc: "Data-driven stroke methodology." },
{ title: "Masterclass", icon: Users, desc: "Immersive group performance." }
].map((feat, i) => (
{feat.title}
{feat.desc}
))}
{/* Philosophy */}
"Most pros focus on the shot.
We focus on the system."
{/* Footer */}
);
}