Crafting High-Performance Digital Experiences.

"use client"; import Image from "next/image";import { motion, useReducedMotion, useScroll, useTransform } from "framer-motion";import { Button } from "@/components/ui/Button";import { StatusPill } from "@/components/ui/StatusPill";import { trackEvent } from "@/lib/analytics";import portrait from "@/public/header-image.jpg"; const ROLES = ["Design + AI Creator", "Product Designer"] as const;const PARALLAX = { range: [0, 800], depth: 240 } as const; export function Hero({ status }: { status: string }) {  const reduce = useReducedMotion();  const { scrollY } = useScroll();  const y = useTransform(scrollY, PARALLAX.range, [0, reduce ? 0 : PARALLAX.depth]);   return (    <section className="relative isolate min-h-svh overflow-hidden">      <motion.div style={{ y }} className="absolute inset-0 -z-10">        <Image src={portrait} alt="" fill priority placeholder="blur" />      </motion.div>      <div className="ml-auto max-w-2xl text-right">        <p className="eyebrow">{ROLES.join(" | ")}</p>        <h1 className="tracking-tightest">          Crafting <em className="text-accent-ink">High-Performance</em> Digital Experiences.        </h1>        <StatusPill pulse>{status}</StatusPill>        <Button href="/contact" onClick={() => trackEvent("cta_click", { cta: "hire_me" })}>          Hire Me        </Button>      </div>    </section>  );}