{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glassmorphism-logo-showcase-block-baseui",
  "type": "registry:block",
  "title": "Glassmorphism Logo Showcase",
  "description": "Glassmorphism partner grid with floating motion, brand hints, and collaborative call-to-action (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/sections/glassmorphism-logo-showcase-block-baseui.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@base-ui/react/button\";\nimport { motion, type Variants } from \"framer-motion\";\nimport { Infinity } from \"lucide-react\";\n\nconst partnerLogos = [\n  { name: \"Next.js\", logo: \"/logos/nextjs.svg\" },\n  { name: \"Shadcn\", logo: \"/logos/shadcn.svg\" },\n  { name: \"Tailwind CSS\", logo: \"/logos/tailwindcss.svg\" },\n  { name: \"TanStack\", logo: \"/logos/tanstack.svg\" },\n];\n\nconst PartnerVariants: Variants = {\n  hidden: { opacity: 0, y: 20, scale: 0.9 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    scale: 1,\n    transition: { duration: 0.5, ease: \"easeOut\" },\n  },\n};\n\nexport function GlassmorphismLogoShowcaseBlockBaseui() {\n  return (\n    <section className=\"relative overflow-hidden px-6 py-24 lg:py-32\">\n      <div className=\"mx-auto grid\">\n        <motion.div\n          initial={{ opacity: 0, y: 32 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true, amount: 0.3 }}\n          transition={{ duration: 0.6, ease: \"easeOut\" }}\n          className=\"relative overflow-hidden rounded-3xl border border-border/50 bg-background/45 p-10 backdrop-blur-2xl\"\n        >\n          <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.05] via-transparent to-transparent\" />\n          <div className=\"relative space-y-8\">\n            <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\">\n              <Infinity className=\"h-3.5 w-3.5\" />\n              partners trustline\n            </span>\n            <h2 className=\"text-4xl font-semibold tracking-tight text-foreground md:text-5xl\">\n              The lightweight showcase that makes every partner feel spotlighted\n            </h2>\n            <p className=\"max-w-xl text-base leading-relaxed text-foreground/70 md:text-lg\">\n              A floating glass canvas beautifully arranges your most trusted\n              brands. The subtle drift animation gives the lineup life without\n              stealing the focus.\n            </p>\n            <motion.div\n              variants={PartnerVariants}\n              initial=\"hidden\"\n              whileInView=\"visible\"\n              viewport={{ once: true }}\n              className=\"grid grid-cols-2 gap-10 md:grid-cols-3 lg:grid-cols-6 justify-center items-center\"\n            >\n              {partnerLogos.map((partner) => (\n                <motion.div key={partner.name} variants={PartnerVariants}>\n                  <div className=\"relative flex h-21 w-21 items-center justify-center \">\n                    <img\n                      src={partner.logo}\n                      alt={partner.name}\n                      className=\"object-contain opacity-60 transition-opacity group-hover:opacity-100\"\n                    />\n                  </div>\n                </motion.div>\n              ))}\n            </motion.div>\n            <div className=\"flex flex-col gap-4 pt-4 sm:flex-row\">\n              <Button className=\"inline-flex h-12 items-center justify-center rounded-full bg-primary px-7 text-sm font-medium uppercase tracking-[0.2em] text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\">\n                Add your brand\n              </Button>\n              <Button className=\"inline-flex h-12 items-center justify-center rounded-full border border-input bg-background px-7 text-sm font-medium uppercase tracking-[0.2em] text-foreground/80 ring-offset-background transition-colors hover:bg-foreground/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\">\n                Download kit\n              </Button>\n            </div>\n          </div>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/glassmorphism-logo-showcase-block-baseui.tsx"
    }
  ]
}