Product Feature Hero

1"use client";
2 
3import * as React from "react";
4import { motion } from "motion/react";
5import { cn } from "@/lib/utils";
6import {
7  ChevronRight,
8  Search,
9  FileText,
10  ArrowUpRight,
11  GitPullRequest,
12} from "lucide-react";
13 
14const S = { type: "spring" as const, stiffness: 300, damping: 28 };
15const S_SOFT = { type: "spring" as const, stiffness: 260, damping: 24 };
16 
17export interface ProductFeatureHeroProps {
18  title?: string;
19  description?: string;
20  secondaryText?: React.ReactNode;
21  ctaText?: string;
22  ctaHref?: string;
23  features?: {
24    title: string;
25    description: string;
26  }[];
27  className?: string;
28}
29 
30const COMMANDS = [
31  { label: "Open command bar", shortcut: "⌘K" },
32  { label: "Quick open file", shortcut: "⌘P" },
33];
34 
35const RECENT_FILES = ["dashboard.tsx", "api/auth.ts", "lib/utils.ts"];
36 
37const ACTIONS = [
38  { icon: ArrowUpRight, label: "Deploy to production" },
39  { icon: GitPullRequest, label: "Create pull request" },
40];
41 
42const DEFAULT_FEATURES = [
43  {
44    title: "Instant",
45    description: "Sub-50ms completions, zero spinners.",
46  },
47  {
48    title: "Context-aware",
49    description: "Reads your full codebase, not just open files.",
50  },
51  {
52    title: "Private",
53    description: "Code stays on your machine. Always.",
54  },
55  {
56    title: "Extensible",
57    description: "Every language, every framework.",
58  },
59];
60 
61export function ProductFeatureHero({
62  title = "Built for how you think",
63  description = "An intelligent editor that understands your intent. Completions, refactors, and explanations surface exactly when you need them.",
64  secondaryText,
65  ctaText = "Get started",
66  ctaHref = "#",
67  features = DEFAULT_FEATURES,
68  className,
69}: ProductFeatureHeroProps) {
70  return (
71    <section className={cn("", className)}>
72      <div className="mx-auto w-full max-w-5xl p-6">
73        <div className="grid items-center gap-12 pb-14 md:grid-cols-2">
74          {/* ── Left ─────────────────────────────────────── */}
75          <motion.div
76            initial={{ opacity: 0, y: 20 }}
77            animate={{ opacity: 1, y: 0 }}
78            transition={{ ...S, delay: 0 }}
79          >
80            <div className="max-w-md">
81              <h2 className="text-balance text-4xl font-semibold text-foreground">
82                {title}
83              </h2>
84              <p className="my-6 text-balance text-lg">{description}</p>
85              {secondaryText ?? (
86// … truncated