"use client"; import * as React from "react"; import { motion, useScroll, useTransform } from "motion/react"; import { AreaChart, Sparkline } from "./charts"; import { Badge } from "./badge"; import { Button } from "./button"; import { BorderBeam } from "./border-beam"; import { ArrowRightIcon, ChartIcon, HomeIcon, SettingsIcon, UsersIcon } from "@kineticui/icons"; const data = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((d, i) => ({ day: d, visitors: Math.round(1200 + Math.sin(i * 1.3) * 400 + i * 260) })); /** Headline above a large app screenshot in a browser frame that tilts flat as you scroll. */ export function HeroProductShot({ title = "Analytics your whole team will actually open", description = "Beautiful dashboards, instant answers, zero SQL. Plug in your data and share a link.", }: { title?: string; description?: string; }) { const ref = React.useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "center center"] }); const rotateX = useTransform(scrollYProgress, [0, 1], [24, 0]); const scale = useTransform(scrollYProgress, [0, 1], [0.92, 1]); return (

Analytics · v4

{title}

{description}

app.pulse.io

{[ [, "Home"], [, "Reports"], [, "Audiences"], [, "Settings"], ].map(([icon, label], i) => ( {icon} {label} ))}

{[["Visitors", "18.4k", [3, 5, 4, 7, 6, 9]], ["Signups", "1,204", [2, 3, 5, 4, 6, 8]], ["Revenue", "$9.8k", [4, 4, 6, 5, 8, 9]]].map(([l, v, s]) => (

{l as string}

{v as string}

))}

); }

Hero — Product Shot

Installation