// Hero.jsx — Nav + Hero section with coach intro video
function Logo({ theme }) {
return (
ROCcoaching
);
}
function Nav({ theme, onToggle }) {
const bg = theme === 'light' ? '#FFFFFF' : '#0D0D0D';
const border = theme === 'light' ? '#E0E0E0' : '#1A1A1A';
const fg = theme === 'light' ? '#0D0D0D' : '#FFFFFF';
return (
);
}
// Coach intro video. Local file so it works on any domain — swap to a
// YouTube/Vimeo embed URL here if it ever moves to a hosted player.
const COACH_VIDEO = 'assets/video/meet-ronan.mp4';
const COACH_POSTER = 'assets/video/meet-ronan-poster.jpg';
function CoachVideo({ theme }) {
const cardBg = theme === 'light' ? '#F2F2F2' : '#111';
const border = theme === 'light' ? '#E0E0E0' : '#2A2A2A';
const muted = theme === 'light' ? '#666' : '#888';
const isEmbed = COACH_VIDEO && !/\.(mp4|webm|mov)$/i.test(COACH_VIDEO);
// Hold the poster until the user asks to play — nothing is downloaded on
// page load. Kept at 720p/~7MB: a 34MB build blew the 10-minute GitHub
// Pages deploy timeout, so don't raise this without re-testing the deploy.
const [playing, setPlaying] = React.useState(false);
const videoRef = React.useRef(null);
React.useEffect(() => {
if (playing && videoRef.current) videoRef.current.play().catch(() => {});
}, [playing]);
const frame = {
background: cardBg, border: `1px solid ${border}`,
borderRadius: 16, aspectRatio: '16/9', overflow: 'hidden',
position: 'relative',
};
if (!COACH_VIDEO) {
return (
Video coming soon
);
}
if (isEmbed) {
return (
);
}
return (
{playing ? (
) : (
)}
);
}
// Compact proof strip. Shows a CLIENT result rather than Ronan's own — the
// selling point is what he gets other people, not his own physique. Links
// down to the full Before & After section rather than duplicating it.
function HeroProof({ theme }) {
const cardBg = theme === 'light' ? '#FFFFFF' : '#141414';
const border = theme === 'light' ? '#E0E0E0' : '#2A2A2A';
const fg = theme === 'light' ? '#0D0D0D' : '#FFFFFF';
const muted = theme === 'light' ? '#666' : '#888';
const shot = (src, label) => (
);
}
function Hero({ theme }) {
const bg = theme === 'light' ? '#F2F2F2' : '#0D0D0D';
const fg = theme === 'light' ? '#0D0D0D' : '#FFFFFF';
const muted = theme === 'light' ? '#555' : '#888';
const WHATSAPP = WA_LINK;
return (
{/* Phones stack copy -> video -> CTA so the video is reachable without
scrolling; from 900px the CTA rejoins the copy column on the left
and the media sits alongside. */}
Online Transformation Coaching
Build the body you’re proud of
Keep it for life
Personalised nutrition & training coaching built around your life — real results, no fad diets.