Product Card Hero

1"use client";
2 
3import * as React from "react";
4import { motion } from "motion/react";
5import { cn } from "@/lib/utils";
6import {
7  ChevronRight,
8  Plus,
9  Settings2,
10  CircleHelp,
11  MessageCircle,
12  User,
13  Settings,
14  LogOut,
15} from "lucide-react";
16 
17const S = { type: "spring" as const, stiffness: 300, damping: 28 };
18const S_SOFT = { type: "spring" as const, stiffness: 260, damping: 24 };
19 
20export interface ProductCardHeroProps {
21  title?: string;
22  description?: string;
23  ctaText?: string;
24  ctaHref?: string;
25  features?: {
26    title: string;
27    description: string;
28  }[];
29  className?: string;
30}
31 
32const TICKER_ROW_1 = [
33  { name: "Oxymor NS", price: "$39" },
34  { name: "Vertex AI", price: "$59" },
35  { name: "Nova Pro", price: "$29" },
36  { name: "Lumina", price: "$49" },
37  { name: "Prism X", price: "$19" },
38  { name: "Helix ML", price: "$35" },
39];
40 
41const TICKER_ROW_2 = [
42  { name: "Arc Studio", price: "$45" },
43  { name: "Cipher", price: "$25" },
44  { name: "Nebula", price: "$55" },
45  { name: "Flux API", price: "$15" },
46  { name: "Zenith", price: "$42" },
47  { name: "Pulse", price: "$33" },
48];
49 
50function TickerRow({
51  items,
52  duration = 40,
53  reverse = false,
54}: {
55  items: { name: string; price: string }[];
56  duration?: number;
57  reverse?: boolean;
58}) {
59  const doubled = [...items, ...items];
60  return (
61    <div className="flex overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_15%,black_85%,transparent)]">
62      <motion.div
63        initial={{ x: reverse ? "-50%" : "0%" }}
64        animate={{ x: reverse ? "0%" : "-50%" }}
65        transition={{
66          repeat: Infinity,
67          repeatType: "loop",
68          duration,
69          ease: "linear",
70        }}
71        className="flex shrink-0"
72      >
73        {doubled.map((item, i) => (
74          <div
75            key={i}
76            className="flex shrink-0 items-center gap-1.5 px-4 py-0.5"
77          >
78            <span className="whitespace-nowrap text-[11px] text-foreground/20">
79              {item.name}
80            </span>
81            <span className="whitespace-nowrap text-[11px] font-medium text-foreground/30">
82              {item.price}
83            </span>
84          </div>
85        ))}
86      </motion.div>
87    </div>
88  );
89}
90 
91const ACCOUNTS = [
92  { name: "Méschac Irung", initials: "M" },
93  { name: "Bernard Ng", initials: "B" },
94  { name: "Theo Ng", initials: "T" },
95  { name: "Glodie Ng", initials: "G" },
96];
97 
98const MENU_GROUPS = [
99  [{ icon: Plus, label: "Add new account" }],
100// … truncated