Glassmorphism Logo Showcase

1"use client";
2 
3import { Button } from "@base-ui/react/button";
4import { motion, type Variants } from "framer-motion";
5import { Infinity } from "lucide-react";
6 
7const partnerLogos = [
8  { name: "Next.js", logo: "/logos/nextjs.svg" },
9  { name: "Shadcn", logo: "/logos/shadcn.svg" },
10  { name: "Tailwind CSS", logo: "/logos/tailwindcss.svg" },
11  { name: "TanStack", logo: "/logos/tanstack.svg" },
12];
13 
14const PartnerVariants: Variants = {
15  hidden: { opacity: 0, y: 20, scale: 0.9 },
16  visible: {
17    opacity: 1,
18    y: 0,
19    scale: 1,
20    transition: { duration: 0.5, ease: "easeOut" },
21  },
22};
23 
24export function GlassmorphismLogoShowcaseBlockBaseui() {
25  return (
26    <section className="relative overflow-hidden px-6 py-24 lg:py-32">
27      <div className="mx-auto grid">
28        <motion.div
29          initial={{ opacity: 0, y: 32 }}
30          whileInView={{ opacity: 1, y: 0 }}
31          viewport={{ once: true, amount: 0.3 }}
32          transition={{ duration: 0.6, ease: "easeOut" }}
33          className="relative overflow-hidden rounded-3xl border border-border/50 bg-background/45 p-10 backdrop-blur-2xl"
34        >
35          <div className="absolute inset-0 bg-gradient-to-br from-foreground/[0.05] via-transparent to-transparent" />
36          <div className="relative space-y-8">
37            <span className="inline-flex items-center gap-2 rounded-full border border-border/50 bg-background/55 px-4 py-1.5 text-xs uppercase tracking-[0.2em] text-foreground/70 backdrop-blur">
38              <Infinity className="h-3.5 w-3.5" />
39              partners trustline
40            </span>
41            <h2 className="text-4xl font-semibold tracking-tight text-foreground md:text-5xl">
42              The lightweight showcase that makes every partner feel spotlighted
43            </h2>
44            <p className="max-w-xl text-base leading-relaxed text-foreground/70 md:text-lg">
45              A floating glass canvas beautifully arranges your most trusted
46              brands. The subtle drift animation gives the lineup life without
47              stealing the focus.
48            </p>
49            <motion.div
50              variants={PartnerVariants}
51              initial="hidden"
52              whileInView="visible"
53              viewport={{ once: true }}
54              className="grid grid-cols-2 gap-10 md:grid-cols-3 lg:grid-cols-6 justify-center items-center"
55            >
56              {partnerLogos.map((partner) => (
57                <motion.div key={partner.name} variants={PartnerVariants}>
58// … truncated