"use client"; import Image from "next/image"; import { ArrowRight, ChevronDown, MessageCircle, } from "lucide-react"; import { CSSProperties, useEffect, useRef, useState, } from "react"; import AppleFrameSequence from "./AppleFrameSequence"; type Chapter = { start: number; end: number; eyebrow: string; title: string; body: string; alignment: "left" | "right" | "center"; dark?: boolean; }; const chapters: Chapter[] = [ { start: 0, end: 0.16, eyebrow: "Lark Shine", title: "Cleaning, reimagined.", body: "Professional care for spaces that deserve more attention.", alignment: "center", }, { start: 0.16, end: 0.34, eyebrow: "Precision", title: "Every surface. Considered.", body: "The appropriate tools, products and methods for every area.", alignment: "left", }, { start: 0.34, end: 0.53, eyebrow: "Deep cleaning", title: "Go beyond what is visible.", body: "Detailed care for overlooked corners, surfaces and finishes.", alignment: "right", dark: true, }, { start: 0.53, end: 0.72, eyebrow: "Floor and glass care", title: "Clarity in every detail.", body: "Specialized care designed to improve the final appearance.", alignment: "left", dark: true, }, { start: 0.72, end: 0.88, eyebrow: "Professional service", title: "One team. Complete care.", body: "Residential and commercial cleaning managed from start to finish.", alignment: "right", }, { start: 0.88, end: 1, eyebrow: "Lark Shine", title: "Your cleaner space starts here.", body: "Tell us about your property and the service you need.", alignment: "center", }, ]; function clamp(value: number) { return Math.min(1, Math.max(0, value)); } function visibility( progress: number, start: number, end: number, ) { const fade = 0.035; if (progress < start - fade || progress > end + fade) { return 0; } if (progress < start + fade) { return clamp( (progress - start + fade) / (fade * 2), ); } if (progress > end - fade) { return clamp( (end + fade - progress) / (fade * 2), ); } return 1; } export default function HeroStory() { const sectionRef = useRef(null); const progressRef = useRef(0); const [progress, setProgress] = useState(0); const [framesReady, setFramesReady] = useState(false); useEffect(() => { let animationFrame = 0; const update = () => { cancelAnimationFrame(animationFrame); animationFrame = requestAnimationFrame(() => { const section = sectionRef.current; if (!section) return; const rect = section.getBoundingClientRect(); const available = section.offsetHeight - window.innerHeight; const next = clamp( available > 0 ? -rect.top / available : 0, ); progressRef.current = next; setProgress(next); }); }; update(); window.addEventListener("scroll", update, { passive: true, }); window.addEventListener("resize", update); return () => { cancelAnimationFrame(animationFrame); window.removeEventListener("scroll", update); window.removeEventListener("resize", update); }; }, []); return (
setFramesReady(true)} />
{chapters.map((chapter, index) => { const opacity = visibility( progress, chapter.start, chapter.end, ); const center = chapter.start + (chapter.end - chapter.start) / 2; const offset = (progress - center) * -85; return ( ); })}
Scroll to explore
); }