Glassmorphism Logo Showcase

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