{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-typography-shadcnui",
  "type": "registry:component",
  "title": "Blog Typography",
  "description": "Beautiful blog post typography with text, links, images, blockquotes, and code examples",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/blog/blog-typography.tsx",
      "content": "\"use client\";\n\nimport { motion, type Variants } from \"framer-motion\";\nimport { Code, ExternalLink, Quote } from \"lucide-react\";\nimport Image from \"next/image\";\nimport type React from \"react\";\n\n// ============================================================================\n// TYPES & INTERFACES\n// ============================================================================\n\ninterface LinkProps {\n  href: string;\n  children: React.ReactNode;\n  external?: boolean;\n}\n\ninterface ImageCardProps {\n  src: string;\n  alt: string;\n  caption?: string;\n}\n\ninterface CalloutProps {\n  children: React.ReactNode;\n  type?: \"info\" | \"warning\" | \"success\";\n}\n\n// ============================================================================\n// ANIMATION VARIANTS\n// ============================================================================\n\nconst containerVariants: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      staggerChildren: 0.1,\n      delayChildren: 0.1,\n    },\n  },\n};\n\nconst itemVariants: Variants = {\n  hidden: { opacity: 0, y: 20 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { duration: 0.5 },\n  },\n};\n\n// ============================================================================\n// SUB-COMPONENTS\n// ============================================================================\n\n// Animated Link Component\nfunction AnimatedLink({ href, children, external = false }: LinkProps) {\n  return (\n    <motion.a\n      href={href}\n      target={external ? \"_blank\" : undefined}\n      rel={external ? \"noopener noreferrer\" : undefined}\n      className=\"group relative inline-flex items-center gap-1 text-primary font-medium transition-colors hover:text-primary/80\"\n      whileHover={{ x: 2 }}\n      transition={{ duration: 0.2 }}\n      aria-label={\n        external ? `${children} (opens in new tab)` : `Navigate to ${children}`\n      }\n    >\n      <span className=\"relative\">\n        {children}\n        <span className=\"absolute bottom-0 left-0 h-[1px] w-0 bg-primary transition-all duration-300 group-hover:w-full\" />\n      </span>\n      {external && (\n        <ExternalLink className=\"h-3 w-3 opacity-70\" aria-hidden=\"true\" />\n      )}\n    </motion.a>\n  );\n}\n\n// Image Card Component\nfunction ImageCard({ src, alt, caption }: ImageCardProps) {\n  return (\n    <motion.figure\n      variants={itemVariants}\n      className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg\"\n      whileHover={{ y: -4 }}\n      transition={{ duration: 0.2 }}\n      role=\"figure\"\n      aria-label={caption || alt}\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\n      <div className=\"relative aspect-video overflow-hidden bg-muted\">\n        <Image src={src} alt={alt} fill className=\"object-cover\" />\n      </div>\n\n      {caption && (\n        <figcaption className=\"p-4 text-sm text-foreground/70 border-t border-border/20\">\n          {caption}\n        </figcaption>\n      )}\n    </motion.figure>\n  );\n}\n\n// Callout Box Component\nfunction Callout({ children, type = \"info\" }: CalloutProps) {\n  const colors = {\n    info: \"bg-primary/10 border-primary/30 text-foreground\",\n    warning: \"bg-amber-500/10 border-amber-500/30 text-foreground\",\n    success: \"bg-emerald-500/10 border-emerald-500/30 text-foreground\",\n  };\n\n  return (\n    <motion.aside\n      variants={itemVariants}\n      className={`rounded-xl border p-6 backdrop-blur ${colors[type]}`}\n      role=\"note\"\n      aria-label={`${type} callout`}\n    >\n      <div className=\"text-sm leading-relaxed\">{children}</div>\n    </motion.aside>\n  );\n}\n\n// ============================================================================\n// MAIN COMPONENT\n// ============================================================================\n\nexport function BlogTypography() {\n  return (\n    <main className=\"relative min-h-screen overflow-hidden bg-background\">\n      {/* Glassmorphism background blobs */}\n      <div className=\"absolute inset-0 -z-10 pointer-events-none\">\n        <div className=\"absolute left-1/2 top-0 h-[520px] w-[520px] -translate-x-1/2 rounded-full bg-foreground/[0.035] blur-[140px]\" />\n        <div className=\"absolute bottom-0 right-0 h-[360px] w-[360px] rounded-full bg-foreground/[0.025] blur-[120px]\" />\n        <div className=\"absolute top-1/2 left-1/4 h-[400px] w-[400px] rounded-full bg-primary/[0.02] blur-[150px]\" />\n      </div>\n\n      {/* Main Content */}\n      <div className=\"relative px-6 py-12 lg:py-16\">\n        <motion.article\n          variants={containerVariants}\n          initial=\"hidden\"\n          animate=\"visible\"\n          className=\"mx-auto max-w-3xl space-y-8\"\n          role=\"article\"\n          aria-label=\"Blog post demonstrating typography styles\"\n        >\n          {/* Article Header */}\n          <motion.header variants={itemVariants} className=\"space-y-4\">\n            <div 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              <span\n                className=\"h-2 w-2 rounded-full bg-primary\"\n                aria-hidden=\"true\"\n              />\n              Design System\n            </div>\n\n            <h1 className=\"text-balance text-4xl font-semibold tracking-tight text-foreground md:text-5xl lg:text-6xl\">\n              <span className=\"bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 bg-clip-text text-transparent\">\n                The Art of Beautiful Typography\n              </span>\n            </h1>\n\n            <p className=\"text-lg text-foreground/70\">\n              Exploring the nuances of type design, hierarchy, and readability\n              in modern web interfaces\n            </p>\n\n            <div className=\"flex items-center gap-4 text-sm text-foreground/60\">\n              <time dateTime=\"2025-11-28\">November 28, 2025</time>\n              <span aria-hidden=\"true\">•</span>\n              <span>8 min read</span>\n            </div>\n          </motion.header>\n\n          {/* Introduction */}\n          <motion.section variants={itemVariants} className=\"space-y-4\">\n            <p className=\"text-lg leading-relaxed text-foreground/80\">\n              Typography is the foundation of good design. It&apos;s not just\n              about choosing beautiful fonts-it&apos;s about creating hierarchy,\n              establishing rhythm, and guiding the reader through your content\n              with intention and care.\n            </p>\n\n            <p className=\"text-base leading-relaxed text-foreground/70\">\n              In this article, we&apos;ll explore the fundamental principles\n              that make typography work, from the basics of font pairing to the\n              subtle art of whitespace. Whether you&apos;re designing a website,\n              an app, or a printed publication, these principles will help you\n              create more readable, accessible, and beautiful designs.\n            </p>\n          </motion.section>\n\n          {/* Image Example */}\n          <ImageCard\n            src=\"https://images.unsplash.com/photo-1764017884266-b53a65cf0044?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n            alt=\"Example of beautiful typography hierarchy\"\n            caption=\"Figure 1: A well-structured typographic hierarchy guides the reader's eye through the content\"\n          />\n\n          {/* Section 1 */}\n          <motion.section variants={itemVariants} className=\"space-y-4\">\n            <h2 className=\"text-2xl font-semibold tracking-tight text-foreground md:text-3xl\">\n              The Fundamentals of Type Hierarchy\n            </h2>\n\n            <p className=\"leading-relaxed text-foreground/70\">\n              Type hierarchy is about creating visual distinction between\n              different levels of information. Your readers should be able to\n              scan your content and instantly understand what&apos;s important.\n              This is achieved through careful manipulation of:\n            </p>\n\n            <ul className=\"space-y-3 pl-6\" role=\"list\">\n              <li className=\"relative leading-relaxed text-foreground/70 before:absolute before:-left-4 before:content-['•'] before:text-primary\">\n                <strong className=\"font-semibold text-foreground\">Size</strong>{\" \"}\n                - Larger text naturally draws more attention\n              </li>\n              <li className=\"relative leading-relaxed text-foreground/70 before:absolute before:-left-4 before:content-['•'] before:text-primary\">\n                <strong className=\"font-semibold text-foreground\">\n                  Weight\n                </strong>{\" \"}\n                - Bold text stands out from regular weight\n              </li>\n              <li className=\"relative leading-relaxed text-foreground/70 before:absolute before:-left-4 before:content-['•'] before:text-primary\">\n                <strong className=\"font-semibold text-foreground\">\n                  Spacing\n                </strong>{\" \"}\n                - Generous whitespace creates breathing room\n              </li>\n              <li className=\"relative leading-relaxed text-foreground/70 before:absolute before:-left-4 before:content-['•'] before:text-primary\">\n                <strong className=\"font-semibold text-foreground\">Color</strong>{\" \"}\n                - Contrast and opacity guide attention\n              </li>\n            </ul>\n          </motion.section>\n\n          {/* Callout Example */}\n          <Callout type=\"info\">\n            <strong className=\"font-semibold\">Pro Tip:</strong> Maintain a\n            consistent scale for your typography. A modular scale (like 1.25 or\n            1.333) helps create harmonious relationships between different text\n            sizes.\n          </Callout>\n\n          {/* Section 2 with Blockquote */}\n          <motion.section variants={itemVariants} className=\"space-y-4\">\n            <h2 className=\"text-2xl font-semibold tracking-tight text-foreground md:text-3xl\">\n              Choosing the Right Typeface\n            </h2>\n\n            <p className=\"leading-relaxed text-foreground/70\">\n              The typeface you choose sets the tone for your entire design.\n              Serif fonts like Georgia and Times convey tradition and authority,\n              while sans-serif fonts like{\" \"}\n              <AnimatedLink href=\"https://vercel.com/font\" external>\n                Geist\n              </AnimatedLink>{\" \"}\n              and Inter feel modern and clean.\n            </p>\n\n            <motion.blockquote\n              variants={itemVariants}\n              className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-8 backdrop-blur transition-all hover:border-border/60\"\n              role=\"blockquote\"\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\n              <Quote\n                className=\"h-8 w-8 text-primary/40 mb-4\"\n                aria-hidden=\"true\"\n              />\n\n              <p className=\"text-xl leading-relaxed text-foreground/90 italic mb-4\">\n                \"Typography is what language looks like. It&apos;s the visual\n                form of the spoken word, and it has the power to enhance or\n                diminish the message.\"\n              </p>\n\n              <footer className=\"text-sm text-foreground/60\">\n                - Ellen Lupton, <cite>Thinking with Type</cite>\n              </footer>\n            </motion.blockquote>\n          </motion.section>\n\n          {/* Section 3 with Code */}\n          <motion.section variants={itemVariants} className=\"space-y-4\">\n            <h3 className=\"text-xl font-semibold tracking-tight text-foreground md:text-2xl\">\n              Implementing Typography in Code\n            </h3>\n\n            <p className=\"leading-relaxed text-foreground/70\">\n              When implementing typography in your design system, consistency is\n              key. Here&apos;s an example of how you might define your type\n              scale using CSS custom properties:\n            </p>\n\n            <motion.pre\n              variants={itemVariants}\n              className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-6 backdrop-blur transition-all hover:border-border/60\"\n              whileHover={{ y: -2 }}\n              transition={{ duration: 0.2 }}\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\n              <div className=\"flex items-center gap-2 mb-4 text-xs uppercase tracking-[0.15em] text-foreground/60\">\n                <Code className=\"h-3 w-3\" aria-hidden=\"true\" />\n                CSS\n              </div>\n\n              <code className=\"text-sm text-foreground/90 font-mono\">\n                <span className=\"text-primary/70\">:root</span> {\"{\"}\n                <br />\n                {\"  \"}--font-size-xs: 0.75rem;\n                <br />\n                {\"  \"}--font-size-sm: 0.875rem;\n                <br />\n                {\"  \"}--font-size-base: 1rem;\n                <br />\n                {\"  \"}--font-size-lg: 1.125rem;\n                <br />\n                {\"  \"}--font-size-xl: 1.25rem;\n                <br />\n                {\"  \"}--font-size-2xl: 1.5rem;\n                <br />\n                {\"}\"}\n              </code>\n            </motion.pre>\n          </motion.section>\n\n          {/* Ordered List Example */}\n          <motion.section variants={itemVariants} className=\"space-y-4\">\n            <h3 className=\"text-xl font-semibold tracking-tight text-foreground md:text-2xl\">\n              Best Practices for Web Typography\n            </h3>\n\n            <ol\n              className=\"space-y-4 pl-6 list-decimal list-outside\"\n              role=\"list\"\n            >\n              <li className=\"leading-relaxed text-foreground/70 pl-2\">\n                <strong className=\"font-semibold text-foreground\">\n                  Limit line length\n                </strong>{\" \"}\n                - Keep your text between 50-75 characters per line for optimal\n                readability\n              </li>\n              <li className=\"leading-relaxed text-foreground/70 pl-2\">\n                <strong className=\"font-semibold text-foreground\">\n                  Use adequate line height\n                </strong>{\" \"}\n                - A line height of 1.5-1.8 prevents text from feeling cramped\n              </li>\n              <li className=\"leading-relaxed text-foreground/70 pl-2\">\n                <strong className=\"font-semibold text-foreground\">\n                  Consider contrast\n                </strong>{\" \"}\n                - Ensure sufficient color contrast (minimum 4.5:1 for body text)\n              </li>\n              <li className=\"leading-relaxed text-foreground/70 pl-2\">\n                <strong className=\"font-semibold text-foreground\">\n                  Test at different sizes\n                </strong>{\" \"}\n                - Your typography should work on both mobile and desktop screens\n              </li>\n            </ol>\n          </motion.section>\n\n          {/* Another Image */}\n          <ImageCard\n            src=\"https://images.unsplash.com/photo-1764017884266-b53a65cf0044?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n            alt=\"Visual comparison of different contrast ratios\"\n            caption=\"Figure 2: Proper contrast ratios ensure accessibility for all users\"\n          />\n\n          {/* Warning Callout */}\n          <Callout type=\"warning\">\n            <strong className=\"font-semibold\">Accessibility Note:</strong>{\" \"}\n            Always test your typography with actual users, including those using\n            screen readers or other assistive technologies. What looks beautiful\n            isn't always what works best.\n          </Callout>\n\n          {/* Conclusion */}\n          <motion.section variants={itemVariants} className=\"space-y-4\">\n            <h2 className=\"text-2xl font-semibold tracking-tight text-foreground md:text-3xl\">\n              Conclusion\n            </h2>\n\n            <p className=\"leading-relaxed text-foreground/70\">\n              Great typography is invisible-it doesn&apos;t call attention to\n              itself, but rather creates a seamless reading experience. By\n              understanding the fundamentals of hierarchy, choosing appropriate\n              typefaces, and following best practices, you can create designs\n              that are both beautiful and functional.\n            </p>\n\n            <p className=\"leading-relaxed text-foreground/70\">\n              Remember, typography is an art that takes time to master.\n              Experiment, iterate, and always prioritize readability and\n              accessibility over purely aesthetic concerns. Your readers will\n              thank you.\n            </p>\n          </motion.section>\n\n          {/* Footer with Links */}\n          <motion.footer\n            variants={itemVariants}\n            className=\"border-t border-border/40 pt-8 mt-12\"\n          >\n            <h3 className=\"text-sm font-semibold uppercase tracking-[0.15em] text-foreground mb-4\">\n              Further Reading\n            </h3>\n\n            <nav className=\"flex flex-col gap-3\" aria-label=\"Related resources\">\n              <AnimatedLink href=\"https://x.com/moumensoliman\" external>\n                Google Fonts\n              </AnimatedLink>\n              <AnimatedLink href=\"https://x.com/moumensoliman\" external>\n                Typewolf - Typography Inspiration\n              </AnimatedLink>\n              <AnimatedLink href=\"https://x.com/moumensoliman\" external>\n                Smashing Magazine Typography Articles\n              </AnimatedLink>\n            </nav>\n          </motion.footer>\n        </motion.article>\n      </div>\n    </main>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/blog-typography-shadcnui.tsx"
    }
  ]
}