Bento Grid Block

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