import {
  ClaudeAI,
  Cursor,
  Gemini,
  Github,
  Google,
  Grok,
  OpenAI,
  Replicate,
} from "@aliimam/logos"

import { EmptyAvatarGroup } from "@/components/empty-avatar"
import { FieldHear } from "@/components/hear"
import { BentoGrid, BentoGridItem } from "@/registry/aliimam/components/bento"
import { DotPattern } from "@/registry/aliimam/components/dot-pattern"
import { Marquee } from "@/registry/aliimam/components/marquee"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"

export function BentoExample() {
  return (
    <div className="container py-4 md:py-10">
      <BentoGrid
        cols={{ base: 2, md: 3, lg: 4 }}
        rowHeight={{ base: "180px", md: "200px", lg: "220px" }}
      >
        <BentoGridItem className="p-0" colSpan={2} rowSpan={2}>
          <div className="relative flex h-full flex-col items-center justify-center p-6">
            <DotPattern />
            <h1 className="px-14 text-center text-3xl font-semibold tracking-tight md:text-5xl lg:text-7xl">
              DESIGN <br /> WITHOUT LIMITS
            </h1>
            <div className="flex items-center justify-center gap-1 pt-3">
              <span className="relative flex h-3 w-3 items-center justify-center">
                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
                <span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
              </span>
              <p className="text-xs text-green-500">Available Now</p>
            </div>
            <div className="relative z-10 flex justify-center gap-2 pt-10">
              <Button className="cursor-pointer" variant="default" size="lg">
                Start Project
              </Button>
              <Button className="cursor-pointer" variant="outline" size="lg">
                Book a call
              </Button>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem>
          <div className="flex h-full flex-col justify-between">
            <h1 className="text-muted-foreground text-sm">Design Systems</h1>
            <div>
              <h1 className="w-full pt-4 text-sm font-semibold tracking-tight lg:text-2xl">
                Consistency at scale.
              </h1>
              <h1 className="text-muted-foreground w-full text-sm font-medium tracking-tight lg:text-xl">
                Designs, grids, components, and patterns.
              </h1>
            </div>
            <p className="text-muted-foreground">
              The Foundation for your Design System
            </p>
          </div>
        </BentoGridItem>

        <BentoGridItem className="flex h-full flex-col items-center justify-center">
          <h1 className="text-primary text-7xl font-bold tracking-tight">Aa</h1>
          <p className="text-muted-foreground mt-2 text-sm">Typography</p>
        </BentoGridItem>

        <BentoGridItem
          colSpan={2}
          className="flex h-full justify-between gap-3"
        >
          <div className="bg-primary/20 flex flex-col justify-between gap-3 rounded-md border p-4">
            <p className="mb-2 text-sm font-semibold">Brand Identity</p>
            <p className="text-muted-foreground text-xs leading-relaxed">
              Logo systems, color palettes, scalable visual language, and
              cohesive brand storytelling across digital platforms.
            </p>
            <p className="text-lg font-bold tracking-tight lg:text-3xl">
              shadcn/ui Components.
            </p>
          </div>

          <Calendar
            mode="single"
            className="w-full overflow-hidden rounded-lg border"
          />
        </BentoGridItem>

        <BentoGridItem className="flex h-full flex-col items-center justify-center md:px-8">
          <FieldHear />
        </BentoGridItem>

        <BentoGridItem className="flex h-full flex-col items-center justify-center">
          <EmptyAvatarGroup />
        </BentoGridItem>

        <BentoGridItem
          className="flex h-full flex-col items-center justify-center overflow-hidden p-0"
          colSpan={2}
        >
          <div className="flex flex-col items-center justify-center py-10">
            <h1 className="text-muted-foreground mb-4 px-20 text-center text-sm font-medium">
              Trusted by the world’s most creative companies.
            </h1>
            <div className="mx-auto flex h-full w-full max-w-3xl items-center justify-center overflow-hidden px-6">
              <div>
                <Marquee gap={"70px"}>
                  <OpenAI type="wordmark" size={100} />
                  <ClaudeAI type="wordmark" size={100} />
                  <Replicate type="wordmark" size={100} />
                  <Cursor type="wordmark" size={100} />
                  <Gemini type="wordmark" size={90} />
                  <Github type="wordmark" size={90} />
                  <Grok type="wordmark" size={100} />
                  <Google className="mr-16" type="wordmark" size={100} />
                </Marquee>
              </div>
            </div>
          </div>
        </BentoGridItem>
      </BentoGrid>
    </div>
  )
}

import {
  Briefcase,
  Sparkles,
  TrendingDown,
  TrendingUp,
  User,
} from "@aliimam/icons"
import { Abstract131, Abstract135 } from "@aliimam/logos"

import { ChartArea } from "@/components/chart-area"
import { CheckboxInTable } from "@/components/checkbox-table"
import { BentoGrid, BentoGridItem } from "@/registry/aliimam/components/bento"
import { Device } from "@/registry/aliimam/components/device"
import { GradientBars } from "@/registry/aliimam/components/gradient-bars"
import { Badge } from "@/components/ui/badge"
import {
  Card,
  CardAction,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export function MinimalBento() {
  return (
    <div className="container py-6 md:py-12">
      <BentoGrid cols={{ base: 2, md: 3, lg: 4 }} rowHeight="200px">
        <BentoGridItem className="p-0" colSpan={{ base: 2, md: 3, lg: 1 }}>
          <div className="flex h-full w-full flex-col justify-center">
            <Card className="border-0 bg-transparent shadow-none">
              <CardHeader>
                <CardDescription>New Customers</CardDescription>
                <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
                  1,234
                </CardTitle>
                <CardAction>
                  <Badge variant="outline">
                    <TrendingDown />
                    -20%
                  </Badge>
                </CardAction>
              </CardHeader>
              <CardFooter className="flex-col items-start gap-1.5 text-sm">
                <div className="line-clamp-1 flex gap-2 font-medium">
                  Down 20% this period <TrendingDown className="size-4" />
                </div>
                <div className="text-muted-foreground">
                  Acquisition needs attention
                </div>
              </CardFooter>
            </Card>
          </div>
        </BentoGridItem>

        <BentoGridItem className="p-0" colSpan={{ base: 2, md: 3, lg: 2 }}>
          <div className="flex flex-col justify-center">
            <ChartArea />
          </div>
        </BentoGridItem>

        <BentoGridItem
          colSpan={{ base: 2, md: 1, lg: 1 }}
          className="flex flex-col items-center justify-center p-0"
        >
          <div className="flex h-full w-full flex-col justify-center">
            <Card className="border-0 bg-transparent shadow-none">
              <CardHeader>
                <CardDescription>Growth Rate</CardDescription>
                <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
                  4.5%
                </CardTitle>
                <CardAction>
                  <Badge variant="outline">
                    <TrendingUp />
                    +4.5%
                  </Badge>
                </CardAction>
              </CardHeader>
              <CardFooter className="flex-col items-start gap-1.5 text-sm">
                <div className="line-clamp-1 flex gap-2 font-medium">
                  Steady performance increase <TrendingUp className="size-4" />
                </div>
                <div className="text-muted-foreground">
                  Meets growth projections
                </div>
              </CardFooter>
            </Card>
          </div>
        </BentoGridItem>

        <BentoGridItem
          colSpan={{ base: 2, md: 2, lg: 1 }}
          rowSpan={{ base: 1, md: 1, lg: 2 }}
        >
          <div className="flex h-full flex-col justify-between space-y-4">
            <div className="text-muted-foreground flex items-center gap-2 text-lg">
              <User size={18} />
              About
            </div>

            <p className="text-lg leading-tight font-medium md:text-3xl">
              Independent product designer building scalable brand systems and
              modern interfaces.
            </p>

            <p className="text-muted-foreground text-sm">
              Focused on clarity, usability, and long-term design
              infrastructure.
            </p>
          </div>
        </BentoGridItem>

        <BentoGridItem
          className="relative flex h-full flex-col items-center justify-center overflow-hidden"
          colSpan={{ base: 2, md: 2, lg: 2 }}
          rowSpan={2}
        >
          <Device
            variant="imac"
            className="z-20"
            width={400}
            src="/images/device/display.jpg"
          />
          <GradientBars colors={["#fff200", "transparent"]} />
        </BentoGridItem>

        <BentoGridItem
          rowSpan={{ base: 1, md: 2, lg: 2 }}
          colSpan={{ base: 2, md: 1, lg: 1 }}
        >
          <div className="flex h-full flex-col justify-between space-y-3 md:space-y-6">
            <div className="text-muted-foreground flex items-center gap-2 text-lg">
              <Briefcase size={18} />
              Services
            </div>
            <Abstract135 className="text-primary h-24 w-24" />

            <ul className="space-y-4 text-lg leading-tight font-medium md:text-2xl">
              <li>
                Brand Strategy
                <p className="text-muted-foreground mt-1 text-xs">
                  Positioning, identity systems, visual direction.
                </p>
              </li>

              <li>
                Product UI/UX
                <p className="text-muted-foreground mt-1 text-xs">
                  Research-led interface design.
                </p>
              </li>

              <li>
                Design Systems
                <p className="text-muted-foreground mt-1 text-xs">
                  Tokens, components, scalable foundations.
                </p>
              </li>
            </ul>
          </div>
        </BentoGridItem>

        <BentoGridItem colSpan={{ base: 2, md: 1, lg: 2 }}>
          <div className="flex h-full flex-col justify-between">
            <div className="flex justify-between">
              <p className="text-muted-foreground mt-2 text-sm">
                Fintech · SaaS · Creative Agencies · Startups
              </p>
              <Abstract131 className="text-primary h-12 w-12" />
            </div>

            <div className="space-y-3">
              <p className="text-muted-foreground flex items-center gap-2 text-sm">
                <Sparkles size={14} />
                Selected Collaborations
              </p>

              <h2 className="text-lg font-semibold tracking-tight lg:text-3xl">
                Building Products That Matter
              </h2>

              <p className="text-muted-foreground text-sm">
                From early-stage startups to growth-stage SaaS platforms.
              </p>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem
          colSpan={{ base: 2, md: 2, lg: 2 }}
          className="flex items-center justify-center"
        >
          <CheckboxInTable />
        </BentoGridItem>
      </BentoGrid>
    </div>
  )
}

import { BentoGrid, BentoGridItem } from "@/registry/aliimam/components/bento"
import { GridPattern } from "@/registry/aliimam/components/grid-pattern"
import { Button } from "@/components/ui/button"

export function StudioBentoExample() {
  return (
    <div className="container py-6 md:py-12">
      <BentoGrid
        cols={{ base: 2, md: 3, lg: 4 }}
        rowHeight={{ base: "180px", md: "220px", lg: "240px" }}
        gap={0}
        className="rounded-none border"
      >
        <BentoGridItem colSpan={2} rowSpan={2} className="rounded-none p-0">
          <div className="relative flex h-full flex-col justify-between p-8">
            <GridPattern
              width={80}
              height={80}
              squares={[
                [6, 2],
                [2, 3],
                [4, 4],
              ]}
            />
            <div>
              <h1 className="text-3xl font-semibold tracking-tight md:text-5xl lg:text-6xl">
                We Build <br /> Digital Experiences.
              </h1>
              <p className="text-muted-foreground mt-4 max-w-md text-sm md:text-base">
                Strategy, branding, and interface design crafted to move
                businesses forward.
              </p>
            </div>

            <div className="relative z-10 flex gap-3">
              <Button size="lg">View Work</Button>
              <Button variant="outline" size="lg">
                Contact Us
              </Button>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem className="rounded-none">
          <div className="flex h-full flex-col justify-between">
            <span className="text-muted-foreground text-sm">Services</span>
            <div className="space-y-2 text-sm font-medium">
              <p>Brand Identity</p>
              <p>UI/UX Design</p>
              <p>Web Design</p>
              <p>Design Systems</p>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem className="rounded-none">
          <div className="flex h-full flex-col justify-between">
            <span className="text-muted-foreground text-sm">Process</span>
            <p className="text-sm font-medium">
              Discover → Define → Design → Deliver
            </p>
            <p className="text-muted-foreground text-xs">
              Clear strategy. Thoughtful execution.
            </p>
          </div>
        </BentoGridItem>

        <BentoGridItem colSpan={2} className="rounded-none">
          <div className="flex h-full flex-col justify-between">
            <span className="text-muted-foreground text-sm">
              Featured Project
            </span>
            <div>
              <h2 className="text-2xl font-semibold tracking-tight">
                Fintech Dashboard Redesign
              </h2>
              <p className="text-muted-foreground mt-2 text-sm">
                Increased engagement by 42% with a simplified, data-first
                interface.
              </p>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem className="rounded-none">
          <div className="flex h-full flex-col justify-between">
            <span className="text-muted-foreground text-sm">Testimonial</span>
            <p className="text-sm italic">
              “Ali transformed our product experience completely.”
            </p>
            <p className="text-muted-foreground text-xs">
              — Product Lead, SaaS Startup
            </p>
          </div>
        </BentoGridItem>

        <BentoGridItem className="flex items-center justify-center rounded-none">
          <div className="text-center">
            <h2 className="text-5xl font-bold tracking-tight">120+</h2>
            <p className="text-muted-foreground text-sm">Projects Delivered</p>
          </div>
        </BentoGridItem>

        <BentoGridItem colSpan={2} className="rounded-none">
          <div className="flex h-full flex-col justify-between">
            <span className="text-muted-foreground text-sm">Tools We Use</span>
            <p className="text-sm font-medium">
              Figma · Framer · Webflow · React · Tailwind
            </p>
            <p className="text-muted-foreground text-xs">
              Built with performance and scalability in mind.
            </p>
          </div>
        </BentoGridItem>
      </BentoGrid>
    </div>
  )
}

import {
  ArrowRight,
  Award,
  Code,
  Eye,
  Globe,
  Layers,
  Palette,
  Sparkles,
  Star,
  Zap,
} from "@aliimam/icons"
import { Instagram, LinkedIn, Twitter } from "@aliimam/logos"

import { BentoGrid, BentoGridItem } from "@/registry/aliimam/components/bento"
import { Button } from "@/components/ui/button"

export function LuxuryStudioBento() {
  return (
    <div className="container py-4 md:py-10">
      <BentoGrid
        cols={{ base: 2, md: 4, lg: 6 }}
        rowHeight={{ base: "160px", md: "190px", lg: "200px" }}
        className="mx-auto max-w-[1400px] gap-3"
      >
        <BentoGridItem
          colSpan={{ base: 2, lg: 4 }}
          rowSpan={2}
          className="relative overflow-hidden border"
        >
          <div className="relative z-10 flex h-full flex-col justify-between p-10">
            <div className="flex items-start justify-between">
              <div className="bg-primary/10 inline-flex items-center gap-2 rounded-full border px-4 py-1.5">
                <Sparkles className="h-3.5 w-3.5" />
                <span className="text-[10px] tracking-widest uppercase">
                  Est. 2014 · Brand Studio
                </span>
              </div>
              <div className="flex gap-3">
                <Instagram className="hover:text-primary h-4 w-4 cursor-pointer transition-colors" />
                <Twitter className="hover:text-primary h-4 w-4 cursor-pointer transition-colors" />
                <LinkedIn className="hover:text-primary h-4 w-4 cursor-pointer transition-colors" />
              </div>
            </div>

            <div>
              <h1 className="text-5xl leading-[0.95] font-light tracking-[-0.02em] md:text-7xl">
                We build brands
                <br />
                <span className="text-primary italic">that endure.</span>
              </h1>
              <div className="mt-6 flex items-center gap-4">
                <Button>
                  View Our Work <ArrowRight className="h-4 w-4" />
                </Button>
                <span className="text-xs tracking-widest uppercase">
                  Scroll to explore
                </span>
              </div>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem colSpan={2} className="">
          <div className="flex h-full items-center justify-around p-6">
            {[
              { num: "10+", label: "Years" },
              { num: "80+", label: "Clients" },
              { num: "3", label: "Studios" },
            ].map((s) => (
              <div key={s.label} className="text-center">
                <p className="text-primary text-3xl font-light">{s.num}</p>
                <p className="mt-1 text-[10px] tracking-widest uppercase">
                  {s.label}
                </p>
              </div>
            ))}
          </div>
        </BentoGridItem>

        <BentoGridItem colSpan={2} className="">
          <div className="flex h-full flex-col justify-between p-6">
            <Palette className="text-primary h-5 w-5" />
            <div>
              <p className="mb-2 text-2xl tracking-widest uppercase">
                Philosophy
              </p>
              <p className="text-base leading-snug font-light italic">
                Simplicity is the ultimate
                <br />
                sophistication.
              </p>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem colSpan={2} className="relative overflow-hidden">
          <div className="relative z-10 flex h-full flex-col justify-between p-6">
            <div className="flex items-center justify-between">
              <p className="text-primary/70 text-[10px] tracking-widest uppercase">
                Featured Work
              </p>
              <Award className="text-primary h-6 w-6" />
            </div>
            <div>
              <h3 className="text-2xl font-light">Maison Aurelia</h3>
              <p className="mt-1 text-xs">Paris Couture · Identity System</p>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem className="">
          <div className="flex h-full flex-col justify-between p-5">
            <Layers className="text-primary h-5 w-5" />
            <div>
              <p className="text-primary mb-1 text-[10px] tracking-widest uppercase">
                Services
              </p>
              <p className="text-sm font-light">Brand Identity</p>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem className="">
          <div className="flex h-full flex-col justify-between p-5">
            <Code className="text-primary h-5 w-5" />
            <div>
              <p className="text-primary mb-1 text-[10px] tracking-widest uppercase">
                Services
              </p>
              <p className="text-sm font-light">Digital Design</p>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem colSpan={2} className="">
          <div className="flex h-full flex-col justify-between p-6">
            <Globe className="text-primary h-5 w-5" />
            <div>
              <p className="text-primary mb-3 text-[10px] tracking-widest uppercase">
                Sectors
              </p>
              <div className="flex flex-wrap gap-2">
                {["Luxury", "Fashion", "Hospitality", "Lifestyle", "Art"].map(
                  (tag) => (
                    <span
                      key={tag}
                      className="rounded-full border px-3 py-1 text-[10px]"
                    >
                      {tag}
                    </span>
                  )
                )}
              </div>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem colSpan={2} rowSpan={2} className="">
          <div className="flex h-full flex-col justify-between p-7">
            <div>
              <p className="text-primary mb-5 text-[10px] tracking-widest uppercase">
                Our Process
              </p>
              <div className="space-y-5">
                {[
                  {
                    n: "01",
                    title: "Discovery",
                    desc: "Deep dive into your world, vision, and audience.",
                  },
                  {
                    n: "02",
                    title: "Strategy",
                    desc: "Positioning and brand architecture.",
                  },
                  {
                    n: "03",
                    title: "Design",
                    desc: "Visual language crafted with intention.",
                  },
                  {
                    n: "04",
                    title: "Launch",
                    desc: "Rollout with precision and care.",
                  },
                ].map((step) => (
                  <div key={step.n} className="flex items-start gap-4">
                    <span className="mt-0.5 w-5 shrink-0 text-[10px]">
                      {step.n}
                    </span>
                    <div>
                      <p className="text-sm font-medium">{step.title}</p>
                      <p className="mt-0.5 text-[11px] leading-relaxed">
                        {step.desc}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem colSpan={2} className="">
          <div className="flex h-full flex-col justify-between p-6">
            <div className="flex gap-0.5">
              {[...Array(5)].map((_, i) => (
                <Star key={i} className="fill-primary text-primary h-3 w-3" />
              ))}
            </div>
            <div>
              <p className="text-sm leading-relaxed font-light italic">
                They transformed our vision into reality with precision and
                elegance — truly world class.
              </p>
              <p className="text-primary mt-3 text-[10px] tracking-wider uppercase">
                — Céline Morel, Maison Aurelia
              </p>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem colSpan={2} className="">
          <div className="flex h-full flex-col justify-between p-6">
            <div className="flex gap-0.5">
              {[...Array(5)].map((_, i) => (
                <Star key={i} className="fill-primary text-primary h-3 w-3" />
              ))}
            </div>
            <div>
              <p className="text-sm leading-relaxed font-light italic">
                The studio redefined our brand DNA. Results exceeded every
                expectation.
              </p>
              <p className="text-primary mt-3 text-[10px] tracking-wider uppercase">
                — Haruki Tanaka, Obori Tokyo
              </p>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem colSpan={2} className="relative overflow-hidden">
          <div className="relative z-10 flex h-full flex-col justify-between p-6">
            <div className="flex items-center justify-between">
              <p className="text-[10px] tracking-widest uppercase">
                Featured Work
              </p>
              <Award className="h-4 w-4" />
            </div>
            <div>
              <h3 className="*: text-xl font-light">Verde Natura</h3>
              <p className="mt-1 text-xs">Milan · Sustainable Luxury Brand</p>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem className="">
          <div className="flex h-full flex-col justify-between p-5">
            <Eye className="text-primary h-5 w-5" />
            <div>
              <p className="text-primary mb-1 text-[10px] tracking-widest uppercase">
                Services
              </p>
              <p className="text-sm font-light">Art Direction</p>
            </div>
          </div>
        </BentoGridItem>

        <BentoGridItem className="">
          <div className="flex h-full flex-col justify-between p-5">
            <Zap className="text-primary h-5 w-5" />
            <div>
              <p className="text-primary mb-1 text-[10px] tracking-widest uppercase">
                Services
              </p>
              <p className="text-sm font-light">Motion & Film</p>
            </div>
          </div>
        </BentoGridItem>
      </BentoGrid>
    </div>
  )
}

import { AnalyticsCard } from "@/components/analytics"
import { BarVisualizerDemo } from "@/components/bar-visual"
import { Contributors } from "@/components/contributers"
import { ToggleGroupFontWeight } from "@/components/font-weight"
import { Messages } from "@/components/message"
import { BentoGrid, BentoGridItem } from "@/registry/aliimam/components/bento"
import { Orb } from "@/components/ui/orb"

export function StudioBentoV2() {
  return (
    <div className="container py-4 md:py-10">
      <BentoGrid cols={{ base: 2, md: 3, lg: 4 }} rowHeight="200px">
        <BentoGridItem
          colSpan={2}
          rowSpan={2}
          className="flex h-full flex-col items-center justify-center"
        >
          <BarVisualizerDemo />
        </BentoGridItem>
        <BentoGridItem className="flex h-full flex-col items-center justify-center">
          <div className="bg-muted relative aspect-square h-full rounded-full p-1 shadow-[inset_0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_2px_8px_rgba(0,0,0,0.5)]">
            <div className="bg-background aspect-square h-full overflow-hidden rounded-full shadow-[inset_0_0_12px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_0_12px_rgba(0,0,0,0.3)]">
              <Orb />
            </div>
          </div>
        </BentoGridItem>
        <BentoGridItem className="p-0">
          <Contributors />
        </BentoGridItem>
        <BentoGridItem rowSpan={2} colSpan={2}>
          <Messages />
        </BentoGridItem>
        <BentoGridItem className="overflow-hidden p-0">
          <AnalyticsCard />
        </BentoGridItem>
        <BentoGridItem>
          <ToggleGroupFontWeight />
        </BentoGridItem>
      </BentoGrid>
    </div>
  )
}