// Shared components used across the three directions.
// Each direction restyles them via inline style props or wrapper classes.
// ─────────────────────────────────────────────────────────────
// useScrollReveal — fades + slides element in once it enters its scroll
// container (the artboard's .twj-page). Uses IntersectionObserver scoped
// to the closest scroll ancestor.
function useScrollReveal({ delay = 0, y = 24 } = {}) {
const ref = React.useRef(null);
const [shown, setShown] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
let root = el.parentElement;
while (root && root !== document.body) {
const oy = getComputedStyle(root).overflowY;
if (oy === 'auto' || oy === 'scroll') break;
root = root.parentElement;
}
const io = new IntersectionObserver(
(entries) => entries.forEach((e) => { if (e.isIntersecting) setShown(true); }),
{ root: root && root !== document.body ? root : null, threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
);
io.observe(el);
return () => io.disconnect();
}, []);
const style = {
transition: `opacity .8s cubic-bezier(.2,.7,.3,1) ${delay}ms, transform .9s cubic-bezier(.2,.7,.3,1) ${delay}ms`,
opacity: shown ? 1 : 0,
transform: shown ? 'translateY(0)' : `translateY(${y}px)`,
};
return [ref, style];
}
function Reveal({ children, delay = 0, y = 24, as = 'div', style: extra, ...rest }) {
const [ref, rs] = useScrollReveal({ delay, y });
const Tag = as;
return {children};
}
// ─────────────────────────────────────────────────────────────
// Image slot — wraps the web component with sensible defaults
function Img({ id, w, h, label, shape = 'rect', radius = 0, style, className }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// Before/After slider with draggable handle
function BeforeAfter({ height = 360, beforeLabel = 'Before', afterLabel = 'After', accent = '#C66E47', radius = 0, ink = '#1F1410' }) {
const [pct, setPct] = React.useState(50);
const wrapRef = React.useRef(null);
const dragging = React.useRef(false);
const setFromX = (clientX) => {
const r = wrapRef.current?.getBoundingClientRect();
if (!r) return;
const x = Math.max(0, Math.min(r.width, clientX - r.left));
setPct((x / r.width) * 100);
};
const onDown = (e) => { dragging.current = true; setFromX(e.clientX ?? e.touches?.[0].clientX); e.preventDefault(); };
React.useEffect(() => {
const move = (e) => { if (!dragging.current) return; setFromX(e.clientX ?? e.touches?.[0].clientX); };
const up = () => { dragging.current = false; };
window.addEventListener('pointermove', move);
window.addEventListener('pointerup', up);
return () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); };
}, []);
return (
{/* AFTER (full underlay) */}
{afterLabel}
{/* BEFORE (clipped) */}
{beforeLabel}
{/* Handle */}
);
}
function ribbonStyle(_, side, bg, fg) {
return {
position: 'absolute', top: 16, [side]: 16,
background: bg, color: fg, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
padding: '6px 10px', borderRadius: 999, fontWeight: 600,
};
}
// ─────────────────────────────────────────────────────────────
// Auto-rotating testimonial carousel
const TESTIMONIALS = [
{ name: 'Linda · 62', from: 'Tucson, AZ', text: 'I started Train With Joan a year ago and I have never felt this strong. The workouts meet me where I am, and the meal plan finally clicked for me.', stat: '34 lbs · 12 months' },
{ name: 'Maria · 58', from: 'Madrid, ES', text: 'After menopause I thought my body was just done. Joan and Michelle proved me wrong. I am the strongest I have ever been at any age.', stat: 'Off blood pressure meds' },
{ name: 'Patricia · 71', from: 'Portland, OR', text: 'I can play with my grandchildren on the floor and get back up. That was my goal. The community keeps me showing up every single day.', stat: '8 months strong' },
{ name: 'Cheryl · 55', from: 'Toronto, ON', text: 'The mobility track was the gateway. I could barely do a squat. Now I deadlift 95 lbs and walk pain-free. I cried the first time.', stat: 'Pain-free knees' },
];
function TestimonialRotator({ accent = '#C66E47', ink = '#1F1410', cream = '#F4ECE1', interval = 5000 }) {
const [i, setI] = React.useState(0);
const [paused, setPaused] = React.useState(false);
React.useEffect(() => {
if (paused) return;
const t = setInterval(() => setI((x) => (x + 1) % TESTIMONIALS.length), interval);
return () => clearInterval(t);
}, [paused, interval]);
const t = TESTIMONIALS[i];
return (
);
}
// ─────────────────────────────────────────────────────────────
// FAQ accordion
const FAQS = [
{ q: 'Do I need a gym or special equipment?', a: 'No gym needed. You can do every workout at home with a set of dumbbells and resistance bands. We also have a limited-mobility track that requires no equipment at all.' },
{ q: "I'm in my 60s — is this really for me?", a: 'Yes. Joan started at 70 and the app was built around women in their 50s, 60s, and 70s. Workouts scale to where you are today, and there is a modified track for limited mobility.' },
{ q: 'How long are the workouts?', a: 'Most workouts run 30 to 45 minutes, three to five days a week. They are fully guided so you press play and follow along — no planning, no guessing.' },
{ q: 'What does the meal plan look like?', a: 'Real food, generous portions, no extreme restrictions. You get weekly menus, swappable recipes, and grocery lists. Everything is built to be sustainable for life.' },
{ q: 'Can I cancel anytime?', a: "Yes. The free trial is genuinely free, and you can cancel your monthly or annual subscription anytime from your account settings." },
{ q: 'Is there real support if I get stuck?', a: 'Yes. The in-app community is active every day, with Joan, Michelle, and certified coaches answering questions, demoing form, and cheering you on.' },
];
function FAQAccordion({ accent = '#C66E47', ink = '#1F1410', divider = 'rgba(31,20,16,0.12)' }) {
const [open, setOpen] = React.useState(0);
return (
Before
After