Features 2

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { motion, useReducedMotion } from "motion/react";
5 
6const SPRING = {
7  bounce: 0.1,
8  duration: 0.25,
9  type: "spring" as const,
10};
11 
12const features = [
13  {
14    accent: true,
15    description:
16      "Real-time analytics dashboard with customizable metrics and beautiful visualizations.",
17    span: "col-span-2 row-span-2",
18    title: "Smart Analytics",
19    // The lead cell of a bento is two columns by two rows. Without something to
20    // look at, that is a quarter of the section spent on two lines of text.
21    visual: "analytics" as const,
22  },
23  {
24    description:
25      "Work together in real-time with built-in commenting and sharing.",
26    span: "col-span-1",
27    title: "Team Collaboration",
28  },
29  {
30    description: "RESTful API with comprehensive documentation and SDKs.",
31    span: "col-span-1",
32    title: "API First",
33  },
34  {
35    description: "Lightning-fast delivery from edge locations worldwide.",
36    span: "col-span-1",
37    title: "Global CDN",
38  },
39  {
40    description:
41      "Enterprise-grade security with SOC 2 compliance and encryption.",
42    span: "col-span-1",
43    title: "Security",
44  },
45];
46 
47/** Bars of a plausible-looking week. Fixed, so the panel never reflows. */
48const SERIES = [
49  { id: "w1", value: 38 },
50  { id: "w2", value: 52 },
51  { id: "w3", value: 44 },
52  { id: "w4", value: 66 },
53  { id: "w5", value: 58 },
54  { id: "w6", value: 74 },
55  { id: "w7", value: 62 },
56  { id: "w8", value: 88 },
57  { id: "w9", value: 71 },
58  { id: "w10", value: 96 },
59  { id: "w11", value: 84 },
60  { id: "w12", value: 100 },
61];
62const PEAK_ID = "w12";
63const BAR_STAGGER = 0.03;
64 
65/**
66 * A small analytics panel for the bento's lead cell.
67 *
68 * Every element is real markup on the page's own tokens, so it follows the
69 * theme into dark mode and stays sharp at any pixel density — and the bars can
70 * grow on entry, which is the point of the library it ships with.
71 */
72const AnalyticsPanel = () => {
73  const shouldReduceMotion = useReducedMotion();
74 
75  return (
76    <div className="flex h-full flex-col gap-4 rounded-xl border bg-background p-5">
77      <div className="flex items-baseline justify-between gap-3">
78        <div>
79          <p className="text-foreground/60 text-xs">Revenue this month</p>
80          <p className="font-semibold text-2xl text-foreground tabular-nums">
81            $48,219
82          </p>
83        </div>
84// … truncated