Blog Typography

1"use client";
2 
3import { motion, type Variants } from "framer-motion";
4import { Code, ExternalLink, Quote } from "lucide-react";
5import Image from "next/image";
6import type React from "react";
7 
8// ============================================================================
9// TYPES & INTERFACES
10// ============================================================================
11 
12interface LinkProps {
13  href: string;
14  children: React.ReactNode;
15  external?: boolean;
16}
17 
18interface ImageCardProps {
19  src: string;
20  alt: string;
21  caption?: string;
22}
23 
24interface CalloutProps {
25  children: React.ReactNode;
26  type?: "info" | "warning" | "success";
27}
28 
29// ============================================================================
30// ANIMATION VARIANTS
31// ============================================================================
32 
33const containerVariants: Variants = {
34  hidden: { opacity: 0 },
35  visible: {
36    opacity: 1,
37    transition: {
38      staggerChildren: 0.1,
39      delayChildren: 0.1,
40    },
41  },
42};
43 
44const itemVariants: Variants = {
45  hidden: { opacity: 0, y: 20 },
46  visible: {
47    opacity: 1,
48    y: 0,
49    transition: { duration: 0.5 },
50  },
51};
52 
53// ============================================================================
54// SUB-COMPONENTS
55// ============================================================================
56 
57// Animated Link Component
58function AnimatedLink({ href, children, external = false }: LinkProps) {
59  return (
60    <motion.a
61      href={href}
62      target={external ? "_blank" : undefined}
63      rel={external ? "noopener noreferrer" : undefined}
64      className="group relative inline-flex items-center gap-1 text-primary font-medium transition-colors hover:text-primary/80"
65      whileHover={{ x: 2 }}
66      transition={{ duration: 0.2 }}
67      aria-label={
68        external ? `${children} (opens in new tab)` : `Navigate to ${children}`
69      }
70    >
71      <span className="relative">
72        {children}
73        <span className="absolute bottom-0 left-0 h-[1px] w-0 bg-primary transition-all duration-300 group-hover:w-full" />
74      </span>
75      {external && (
76        <ExternalLink className="h-3 w-3 opacity-70" aria-hidden="true" />
77      )}
78    </motion.a>
79  );
80}
81 
82// Image Card Component
83function ImageCard({ src, alt, caption }: ImageCardProps) {
84  return (
85    <motion.figure
86      variants={itemVariants}
87// … truncated