Magnified Bento

1"use client";
2import React from "react";
3import { HugeiconsIcon } from "@hugeicons/react";
4import {
5  Search01Icon,
6  UserGroupIcon,
7  HierarchyIcon,
8  UserIcon,
9  RotateLeftIcon,
10  Settings02Icon,
11  CpuIcon,
12  CodeIcon,
13  Chart01Icon,
14  FlashIcon,
15  Link01Icon,
16  SmartPhone01Icon,
17  CloudIcon,
18  DatabaseIcon,
19  LockIcon,
20} from "@hugeicons/core-free-icons";
21import { motion, useMotionValue, useMotionTemplate } from "motion/react";
22import { cn } from "@/lib/utils";
23 
24// change here
25const TAG_ROWS = [
26  [
27    { id: "discovery", icon: Search01Icon, label: "Discovery" },
28    { id: "client-review", icon: UserGroupIcon, label: "Client Review" },
29    { id: "system-design", icon: HierarchyIcon, label: "System Design" },
30    { id: "devops-integration", icon: UserIcon, label: "DevOps Integration" },
31    { id: "post-launch", icon: RotateLeftIcon, label: "Post-Launch Support" },
32  ],
33  [
34    { id: "qa-optimization", icon: Settings02Icon, label: "QA & Optimization" },
35    { id: "launch-deploy", icon: CpuIcon, label: "Launch & Deploy" },
36    { id: "full-stack", icon: CodeIcon, label: "Full-Stack Development" },
37    { id: "analytics", icon: Chart01Icon, label: "Analytics" },
38    { id: "mvp-engineering", icon: FlashIcon, label: "MVP Engineering" },
39  ],
40  [
41    { id: "api-backend", icon: Link01Icon, label: "API & Backend" },
42    { id: "mobile-dev", icon: SmartPhone01Icon, label: "Mobile Development" },
43    {
44      id: "cloud-infrastructure",
45      icon: CloudIcon,
46      label: "Cloud Infrastructure",
47    },
48    { id: "database-design", icon: DatabaseIcon, label: "Database Design" },
49    { id: "security", icon: LockIcon, label: "Security" },
50  ],
51];
52 
53// change here
54const CONFIG = {
55  title: "Intelligent Workflows",
56  description:
57    "Automatically categorize and search through your team's diverse skillsets and project phases with contextual awareness.",
58  containerHeight: "h-[200px] sm:h-[240px]",
59  lensSize: 92,
60};
61 
62const MagnifiedBento = () => {
63  const containerRef = React.useRef<HTMLDivElement>(null);
64  const lensX = useMotionValue(0);
65  const lensY = useMotionValue(0);
66 
67  const clipPath = useMotionTemplate`circle(30px at calc(50% + ${lensX}px - 10px) calc(50% + ${lensY}px - 10px))`;
68  const inverseMask = useMotionTemplate`radial-gradient(circle 30px at calc(50% + ${lensX}px - 10px) calc(50% + ${lensY}px - 10px), transparent 100%, black 100%)`;
69 
70  return (
71    <div className="flex items-center justify-center p-4 sm:p-6 w-full not-prose">
72// … truncated