Apple-Grade Product Page React Component

You are given a task to integrate an existing React component in the codebase The codebase should support: - shadcn project structure - Tailwind CSS - Typescript If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript. Determine the default path for components and styles. If default path for components is not /components/ui, provide instructions on why it's important to create this folder Copy-paste this component to /components/ui folder: ```tsx mac-book-neo-hero.tsx "use client"; import * as React from "react"; import { useEffect, useRef, useState } from "react"; export type FrameSequenceStep = { from: number; to: number; color: string; num: string; total: string; icon?: React.ReactNode; title: string; description: string; label: string; }; export type FrameSequenceHeroProps = { frameCount: number; framePath: (i: number) => string; eagerCount?: number; scrollHeight?: string; brand?: React.ReactNode; navLinks?: { label: string; href: string }[]; ctaLabel?: string; ctaHref?: string; title: React.ReactNode; subtitle?: string; steps: FrameSequenceStep[]; className?: string; }; const cx = (...c: (string | false | null | undefined)[]) => c.filter(Boolean).join(" "); export function FrameSequenceHero({ frameCount, framePath, eagerCount = 140, scrollHeight = "600vh", brand, navLinks = [], ctaLabel, ctaHref = "#", title, subtitle, steps, className, }: FrameSequenceHeroProps) { const spacerRef = useRef(null); const cacheRef = useRef(new Array(frameCount)); const loadedRef = useRef(0); const targetFrameRef = useRef(0); const displayFrameRef = useRef(0); const lastShownRef = useRef(-1); const rafActiveRef = useRef(false); const [loadPct, setLoadPct] = useState(0); const [loaderDone, setLoaderDone] = useState(false); const [navScrolled, setNavScrolled] = useState(false); const [subHidden, setSubHidden] = useState(false); const [activeIdx, setActiveIdx] = useState(-1); const [progress, setProgress] = useState(0); const [stepLocal, setStepLocal] = useState(0); const [currentSrc, setCurrentSrc] = useState(() => framePath(1)); const showFrame = (i: number) => { if (i === lastShownRef.current) return; setCurrentSrc(framePath(i + 1)); lastShownRef.current = i; }; const loop = () => { if (rafActiveRef.current) return; rafActiveRef.current = true; const tick = () => { const diff = targetFrameRef.current - displayFrameRef.current; if (Math.abs(diff) { const eager = Math.min(eagerCount, frameCount); const loadOne = (i: number) => { const img = new Image(); img.decoding = "async"; img.src = framePath(i + 1); const onSettle = () => { loadedRef.current += 1; const pct = Math.round((loadedRef.current / frameCount) * 100); setLoadPct(pct); if (loadedRef.current === eager) { setLoaderDone(true); for (let j = eager; j { const spacer = spacerRef.current; if (!spacer) return; const total = spacer.offsetHeight - window.innerHeight; const p = Math.max(0, Math.min(1, window.scrollY / Math.max(1, total))); targetFrameRef.current = p * (frameCount - 1); loop(); setProgress(p); setNavScrolled(window.scrollY > 4); setSubHidden(window.scrollY > 8); let idx = -1; let local = 0; for (let i = 0; i = s.from && p { window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); onScroll(); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [steps, frameCount]); return ( {loadPct {brand} {navLinks.length > 0 && ( {https://t.co/tSkQpsSthN((l) => ( {l.label} ))} )}