{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glassmorphism-portfolio-block-shadcnui",
  "type": "registry:block",
  "title": "Glassmorphism Portfolio",
  "description": "Personal portfolio spotlight with profile portrait, narrative highlights, and animated social links",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/glassmorphism-portfolio-block.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { motion, Variants } from \"framer-motion\";\nimport type { LucideIcon } from \"lucide-react\";\nimport {\n  ArrowUpRight,\n  Dribbble,\n  Github,\n  Linkedin,\n  Twitter,\n} from \"lucide-react\";\n\ntype Highlight = {\n  title: string;\n  description: string;\n};\n\ntype SocialLink = {\n  label: string;\n  handle: string;\n  href: string;\n  icon: LucideIcon;\n};\n\nconst highlights: Highlight[] = [\n  {\n    title: \"Collaborations\",\n    description:\n      \"Linear, Framer, Gamma, Clearbit, and early-stage founders crafting premium launches.\",\n  },\n  {\n    title: \"Latest drop\",\n    description:\n      \"Aurora OS motion system · 47 reusable blueprints, adaptive tokens, and launch storyboard.\",\n  },\n  {\n    title: \"Availability\",\n    description:\n      \"2 advisory spots for Q1 · Remote friendly across EU & US time zones.\",\n  },\n];\n\nconst socialLinks: SocialLink[] = [\n  {\n    label: \"Twitter\",\n    handle: \"@caspermotions\",\n    href: \"https://x.com/caspermotions\",\n    icon: Twitter,\n  },\n  {\n    label: \"LinkedIn\",\n    handle: \"Casper Lightman\",\n    href: \"https://linkedin.com/in/casperlightman\",\n    icon: Linkedin,\n  },\n  {\n    label: \"Dribbble\",\n    handle: \"caspermotion\",\n    href: \"https://dribbble.com/caspermotion\",\n    icon: Dribbble,\n  },\n  {\n    label: \"GitHub\",\n    handle: \"casper-studio\",\n    href: \"https://github.com/casper-studio\",\n    icon: Github,\n  },\n];\n\nconst listVariants: Variants = {\n  hidden: { opacity: 0, y: 16 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: {\n      duration: 0.4,\n      staggerChildren: 0.08,\n    },\n  },\n};\n\nconst itemVariants: Variants = {\n  hidden: { opacity: 0, y: 12 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: {\n      duration: 0.35,\n    },\n  },\n};\n\nexport function GlassmorphismPortfolioBlock() {\n  return (\n    <section className=\"relative min-h-screen overflow-hidden px-6 py-24 lg:py-32\">\n      <div className=\"mx-auto max-w-6xl\">\n        <motion.div\n          initial={{ opacity: 0, y: 40 }}\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-8 backdrop-blur-2xl md:p-12\"\n        >\n          {/* Glass gradient overlay */}\n          <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.05] via-transparent to-transparent pointer-events-none\" />\n\n          <div className=\"relative grid gap-12 lg:grid-cols-2\">\n            {/* Left column - Main content */}\n            <div className=\"space-y-8\">\n              <Badge\n                variant=\"outline\"\n                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.3em] text-foreground/70 backdrop-blur transition-colors hover:bg-background/70\"\n              >\n                Portfolio Insight\n              </Badge>\n\n              <div className=\"space-y-4\">\n                <motion.h2\n                  initial={{ opacity: 0, y: 20 }}\n                  whileInView={{ opacity: 1, y: 0 }}\n                  viewport={{ once: true }}\n                  transition={{ duration: 0.5, delay: 0.1 }}\n                  className=\"text-2xl font-semibold tracking-tight text-foreground md:text-3xl\"\n                >\n                  Casper Lightman, Product Designer & Motion Director\n                </motion.h2>\n                <motion.p\n                  initial={{ opacity: 0, y: 20 }}\n                  whileInView={{ opacity: 1, y: 0 }}\n                  viewport={{ once: true }}\n                  transition={{ duration: 0.5, delay: 0.2 }}\n                  className=\"max-w-xl text-base leading-relaxed text-foreground/70 md:text-md\"\n                >\n                  Principal product designer pairing narrative motion with\n                  premium SaaS brands. Casper leads founders and product teams\n                  through expressive design systems that convert curiosity into\n                  momentum.\n                </motion.p>\n              </div>\n\n              {/* Highlights grid */}\n              <div className=\"grid gap-4 sm:grid-cols-1\">\n                {highlights.map((item, index) => (\n                  <motion.div\n                    key={item.title}\n                    initial={{ opacity: 0, y: 20 }}\n                    whileInView={{ opacity: 1, y: 0 }}\n                    viewport={{ once: true }}\n                    transition={{ duration: 0.4, delay: 0.1 * index }}\n                    whileHover={{ y: -4 }}\n                    className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-5 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg\"\n                  >\n                    <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\" />\n                    <div className=\"relative space-y-2\">\n                      <p className=\"text-xs font-semibold uppercase tracking-[0.25em] text-foreground/40\">\n                        {item.title}\n                      </p>\n                      <p className=\"text-sm leading-relaxed text-foreground/70\">\n                        {item.description}\n                      </p>\n                    </div>\n                  </motion.div>\n                ))}\n              </div>\n\n              {/* CTA Buttons */}\n              <motion.div\n                initial={{ opacity: 0, y: 20 }}\n                whileInView={{ opacity: 1, y: 0 }}\n                viewport={{ once: true }}\n                transition={{ duration: 0.5, delay: 0.3 }}\n                className=\"grid grid-cols-1 gap-4\"\n              >\n                <Button\n                  size=\"lg\"\n                  onClick={() =>\n                    window.open(\"https://casper.studio/case-studies\", \"_blank\")\n                  }\n                  className=\"h-12 w-full gap-2 rounded-full px-8 text-sm uppercase tracking-[0.25em] transition-all hover:shadow-lg sm:w-auto\"\n                >\n                  View case studies\n                  <ArrowUpRight className=\"h-4 w-4\" />\n                </Button>\n              </motion.div>\n            </div>\n\n            {/* Right column - Profile card */}\n            <div className=\"relative\">\n              <div className=\"absolute inset-0 rounded-[32px] bg-gradient-to-b from-primary/15 via-transparent to-transparent blur-3xl\" />\n              <div className=\"relative flex h-full flex-col justify-between overflow-hidden rounded-[28px] border border-border/50 bg-background/60 p-8 backdrop-blur-xl\">\n                <div className=\"flex flex-col items-center text-center\">\n                  {/* Avatar with glow */}\n                  <motion.div\n                    initial={{ opacity: 0, scale: 0.8 }}\n                    whileInView={{ opacity: 1, scale: 1 }}\n                    viewport={{ once: true }}\n                    transition={{ duration: 0.5 }}\n                    className=\"relative mb-6\"\n                  >\n                    <div className=\"absolute left-1/2 top-1/2 h-32 w-32 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/20 blur-2xl\" />\n                    <img\n                      src=\"https://images.unsplash.com/photo-1544723795-3fb6469f5b39?w=640&q=80\"\n                      alt=\"Casper Lightman\"\n                      className=\"relative h-32 w-32 rounded-full border border-border/40 object-cover shadow-[0_25px_60px_rgba(15,23,42,0.3)] dark:shadow-[0_25px_60px_rgba(0,0,0,0.6)]\"\n                    />\n                  </motion.div>\n\n                  <motion.div\n                    initial={{ opacity: 0, y: 10 }}\n                    whileInView={{ opacity: 1, y: 0 }}\n                    viewport={{ once: true }}\n                    transition={{ duration: 0.5, delay: 0.2 }}\n                    className=\"space-y-1\"\n                  >\n                    <h3 className=\"text-2xl font-semibold tracking-tight text-foreground\">\n                      Casper Lightman\n                    </h3>\n                    <p className=\"text-xs font-semibold uppercase tracking-[0.35em] text-foreground/45\">\n                      Product Designer · Motion Director\n                    </p>\n                  </motion.div>\n\n                  <motion.p\n                    initial={{ opacity: 0, y: 10 }}\n                    whileInView={{ opacity: 1, y: 0 }}\n                    viewport={{ once: true }}\n                    transition={{ duration: 0.5, delay: 0.3 }}\n                    className=\"mt-4 max-w-sm text-sm leading-relaxed text-foreground/70\"\n                  >\n                    Partnering with future-facing teams to choreograph\n                    interfaces that feel cinematic yet effortless.\n                  </motion.p>\n                </div>\n\n                {/* Social links */}\n                <motion.div\n                  variants={listVariants}\n                  initial=\"hidden\"\n                  whileInView=\"visible\"\n                  viewport={{ once: true, margin: \"-80px\" }}\n                  className=\"mt-8 flex flex-col gap-3\"\n                >\n                  {socialLinks.map((social) => {\n                    const Icon = social.icon;\n                    return (\n                      <motion.a\n                        key={social.label}\n                        variants={itemVariants}\n                        href={social.href}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"group flex items-center justify-between rounded-2xl border border-border/40 bg-background/70 px-4 py-3 text-left transition-all hover:-translate-y-0.5 hover:border-border/60 hover:bg-background/80 hover:shadow-md\"\n                        whileHover={{ scale: 1.01 }}\n                        whileTap={{ scale: 0.985 }}\n                      >\n                        <div className=\"flex items-center gap-3\">\n                          <span className=\"flex h-10 w-10 items-center justify-center rounded-full border border-border/40 bg-background/70 text-foreground/80 shadow-[0_10px_30px_rgba(15,23,42,0.2)] transition-all group-hover:shadow-[0_10px_30px_rgba(15,23,42,0.3)] dark:shadow-[0_10px_30px_rgba(0,0,0,0.4)] dark:group-hover:shadow-[0_10px_30px_rgba(0,0,0,0.5)]\">\n                            <Icon className=\"h-4 w-4\" />\n                          </span>\n                          <div>\n                            <p className=\"text-sm font-semibold text-foreground\">\n                              {social.label}\n                            </p>\n                            <p className=\"text-xs text-foreground/60\">\n                              {social.handle}\n                            </p>\n                          </div>\n                        </div>\n                        <ArrowUpRight className=\"h-4 w-4 text-foreground/40 transition-all group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-foreground/70\" />\n                      </motion.a>\n                    );\n                  })}\n                </motion.div>\n              </div>\n            </div>\n          </div>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/glassmorphism-portfolio-block-shadcnui.tsx"
    }
  ]
}