Bento Grid Block

1"use client";
2 
3import { Button } from "@base-ui/react/button";
4import { motion, type Variants } from "framer-motion";
5import { ArrowUpRight, PlayCircle, Sparkles } from "lucide-react";
6 
7interface AvatarProfile {
8  src: string;
9  alt: string;
10}
11 
12interface Metric {
13  label: string;
14  value: string;
15  caption: string;
16}
17 
18interface ProcessStep {
19  label: string;
20  progress: number;
21}
22 
23interface GalleryImage {
24  src: string;
25  alt: string;
26}
27 
28interface ReelStat {
29  label: string;
30}
31 
32const avatarProfiles: AvatarProfile[] = [
33  {
34    src: "https://images.unsplash.com/photo-1544723795-3fb6469f5b39?w=200&h=200&fit=crop&q=80",
35    alt: "Portrait of a motion designer smiling at the camera",
36  },
37  {
38    src: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=200&h=200&fit=crop&q=80",
39    alt: "Portrait of a product strategist in a studio",
40  },
41  {
42    src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=200&h=200&fit=crop&q=80",
43    alt: "Portrait of a UX researcher wearing headphones",
44  },
45];
46 
47const keyMetrics: Metric[] = [
48  {
49    label: "Project satisfaction",
50    value: "98%",
51    caption: "Last quarter",
52  },
53  {
54    label: "Delivery cadence",
55    value: "2.4x",
56    caption: "Faster",
57  },
58  {
59    label: "Retention rate",
60    value: "92%",
61    caption: "After 6 months",
62  },
63];
64 
65const motionProcess: ProcessStep[] = [
66  {
67    label: "Ideate & storyboard",
68    progress: 82,
69  },
70  {
71    label: "Motion exploration",
72    progress: 64,
73  },
74  {
75    label: "Polish & delivery",
76    progress: 91,
77  },
78];
79 
80const inspirationGallery: GalleryImage[] = [
81  {
82    src: "https://images.unsplash.com/photo-1545239351-1141bd82e8a6?w=400&h=320&fit=crop&q=80",
83    alt: "Collage of lighting references for motion design",
84  },
85  {
86    src: "https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=400&h=320&fit=crop&q=80",
87    alt: "Creative workspace with monitors and sketchbook",
88  },
89  {
90    src: "https://images.unsplash.com/photo-1515169067865-5387ec356754?w=400&h=320&fit=crop&q=80",
91    alt: "Colorful motion design storyboard pinned to a wall",
92  },
93  {
94    src: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=400&h=320&fit=crop&q=80",
95    alt: "Designer adjusting camera lighting in a studio",
96  },
97];
98 
99const reelStats: ReelStat[] = [
100  { label: "3:42 min" },
101  { label: "4.2K views" },
102  { label: "Dynamic timing curves" },
103];
104 
105const sectionVariants: Variants = {
106  hidden: { opacity: 0, y: 32 },
107  visible: {
108    opacity: 1,
109// … truncated