Atomic Design en la práctica: Un portfolio con más de 45 componentes Astro

src/components/molecules/
├── Breadcrumbs.astro        # Navegacion de ruta + Schema.org
├── Card.astro               # Tarjeta universal: Heading + Text + Button
├── ContactInfo.astro        # Bloque de direccion/telefono/email
├── FormField.astro          # Label + Input + mensaje de error
├── LanguageSwitcher.astro   # Selector de idioma DE/EN/ES
├── NavLink.astro            # Enlace de navegacion con estado activo
├── Pagination.astro         # Navegacion de paginas con prev/next
├── ProjectCard.astro        # Tarjeta de portfolio con tags
├── SearchBar.astro          # Input + Button + logica de busqueda
├── SocialLinks.astro        # Enlaces con iconos a redes sociales
├── TestimonialCard.astro    # Testimonio de cliente con avatar
├── TimelineItem.astro       # Entrada individual de linea temporal
├── TrustBadge.astro         # Indicadores de confianza
└── blog/
    ├── CalloutBox.astro     # Caja CTA dentro de articulos
    ├── InfoBox.astro        # Caja de nota/advertencia/consejo
    ├── QuoteBlock.astro     # Cita con atribucion
    └── StatCard.astro       # Metrica con etiqueta

src/components/organisms/
├── About.astro              # Seccion sobre mi
├── Contact.astro            # Formulario de contacto completo
├── FaqSection.astro         # FAQ con acordeon
├── Footer.astro             # Footer completo
├── Header.astro             # Header con navegacion
├── Hero.astro               # Seccion hero con variantes
├── Navigation.astro         # Navegacion principal (escritorio/movil)
├── Portfolio.astro          # Galeria de proyectos
├── Pricing.astro            # Vista general de precios
├── Services.astro           # Vista general de servicios
├── Testimonials.astro       # Carrusel de testimonios
├── TimelineSection.astro    # Linea temporal de experiencia
└── blog/
    ├── CodeTabs.astro       # Tabs de codigo para MDX
    ├── ComparisonTable.astro # Tabla comparativa
    ├── FaqAccordion.astro   # FAQ dentro de articulos del blog
    └── ...                  # Organismos de blog adicionales

src/layouts/
├── BaseLayout.astro         # Base: Head + Header + Main + Footer
├── BlogLayout.astro         # Especifico del blog: TOC + Author + Related
└── PortfolioLayout.astro    # Detalle portfolio: Galeria + Stack tecnico

src/pages/
├── index.astro              # Pagina principal (Hero + Services + Portfolio + ...)
├── about.astro              # Sobre mi
├── contact.astro            # Contacto
├── pricing.astro            # Precios
├── blog/
│   ├── index.astro          # Vista general del blog
│   ├── [slug].astro         # Post individual
│   ├── page/[page].astro    # Paginacion
│   ├── tags.astro           # Vista general de tags
│   ├── tag/[tag].astro      # Posts por tag
│   ├── categories.astro     # Vista general de categorias
│   ├── kategorie/[cat].astro # Posts por categoria
│   └── search.astro         # Busqueda del blog
└── portfolio/
    ├── index.astro          # Vista general del portfolio
    └── [slug].astro         # Detalle del portfolio

---
/* Molecula NavLink: Usa el atomo Icon para icono opcional */
import Icon from '../atoms/Icon.astro';
import Link from '../atoms/Link.astro';

interface Props {
  href: string;
  icon?: IconName;
  isActive?: boolean;
  locale?: 'de' | 'en' | 'es';
}
---

<Link
  href={href}
  class:list={['nav-link', { 'nav-link--active': isActive }]}
>
  {icon && <Icon name={icon} size={18} />}
  <slot />
</Link>

---
/* Molecula Breadcrumbs: Enlaces con markup Schema.org */
import Link from '../atoms/Link.astro';
import Icon from '../atoms/Icon.astro';

interface Props {
  items: BreadcrumbItem[];
}

const { items } = Astro.props;
---

<nav aria-label="Ruta de navegacion" class="breadcrumbs">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    {items.map((item, index) => (
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        {item.href ? (
          <Link href={item.href} itemprop="item">
            <span itemprop="name">{item.label}</span>
          </Link>
        ) : (
          <span itemprop="name" aria-current="page">
            {item.label}
          </span>
        )}
        <meta itemprop="position" content={String(index + 1)} />
        {index < items.length - 1 && (
          <Icon name="chevron-right" size={14} />
        )}
      </li>
    ))}
  </ol>
</nav>

<!-- Schema.org BreadcrumbList JSON-LD se genera automaticamente -->

---
/* Molecula FormField: Label + Input + mensaje de error como unidad */
import Input from '../atoms/Input.astro';
import Text from '../atoms/Text.astro';

interface Props {
  label: string;
  name: string;
  type?: 'text' | 'email' | 'tel';
  required?: boolean;
  error?: string;
  helpText?: string;
}

const { label, name, type = 'text', required, error, helpText } = Astro.props;
const inputId = `field-${name}`;
---

<div class:list={['form-field', { 'form-field--error': error }]}>
  <label for={inputId} class="form-field__label">
    {label}
    {required && <span aria-hidden="true">*</span>}
  </label>
  <Input
    type={type}
    name={name}
    id={inputId}
    required={required}
    aria-describedby={error ? `${inputId}-error` : helpText ? `${inputId}-help` : undefined}
    aria-invalid={!!error}
  />
  {error && (
    <Text id={`${inputId}-error`} size="sm" class="form-field__error" role="alert">
      {error}
    </Text>
  )}
  {helpText && !error && (
    <Text id={`${inputId}-help`} size="sm" muted>
      {helpText}
    </Text>
  )}
</div>

---
/* Organismo Footer: Compuesto de Heading, Text, SocialLinks */
import Heading from '../atoms/Heading.astro';
import Text from '../atoms/Text.astro';
import Link from '../atoms/Link.astro';
import SocialLinks from '../molecules/SocialLinks.astro';

interface Props {
  locale?: 'de' | 'en' | 'es';
}

const { locale = 'de' } = Astro.props;
const currentYear = new Date().getFullYear();

/* Enlaces del footer especificos por idioma */
const footerNav = SITE.footerNavigation[locale];
---

<footer class="footer" id="footer">
  <div class="footer__inner">
    <div class="footer__brand">
      <Heading level={2} size="md">Arnold Wender</Heading>
      <Text muted>Desarrollador Web & Creador Digital</Text>
      <SocialLinks />
    </div>

    <nav class="footer__nav" aria-label="Navegacion del footer">
      {footerNav.columns.map((column) => (
        <div class="footer__column">
          <Heading level={3} size="sm">{column.title}</Heading>
          <ul>
            {column.links.map((link) => (
              <li>
                <Link href={link.href}>{link.label}</Link>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </nav>

    <div class="footer__bottom">
      <Text size="sm" muted>
        &copy; {currentYear} Arnold Wender. Todos los derechos reservados.
      </Text>
    </div>
  </div>
</footer>

---
/* Organismo Hero: Hero flexible con variantes centrada/izquierda */
import Heading from '../atoms/Heading.astro';
import Text from '../atoms/Text.astro';
import Button from '../atoms/Button.astro';
import Badge from '../atoms/Badge.astro';

interface Props {
  title: string;
  subtitle?: string;
  badge?: string;
  variant?: 'centered' | 'left';
  primaryCta?: { text: string; href: string };
  secondaryCta?: { text: string; href: string };
}

const {
  title,
  subtitle,
  badge,
  variant = 'centered',
  primaryCta,
  secondaryCta,
} = Astro.props;
---

<section class:list={['hero', `hero--${variant}`]} id="hero">
  <div class="hero__content">
    {badge && <Badge variant="accent">{badge}</Badge>}
    <Heading level={1} size="2xl">{title}</Heading>
    {subtitle && <Text size="lg" class="hero__subtitle">{subtitle}</Text>}
    <div class="hero__actions">
      {primaryCta && (
        <Button variant="primary" size="lg" href={primaryCta.href}>
          {primaryCta.text}
        </Button>
      )}
      {secondaryCta && (
        <Button variant="secondary" size="lg" href={secondaryCta.href}>
          {secondaryCta.text}
        </Button>
      )}
    </div>
  </div>
  <slot />  {/* Para contenido visual opcional */}
</section>

/* Button.astro <style> — Atomo usa token */
.btn--primary {
  background-color: var(--color-btn-primary-bg);
  color: var(--color-text-on-primary);
}

.btn--primary:hover {
  background-color: var(--color-btn-primary-hover);
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Card.astro <style> — Molecula usa los mismos tokens */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.card:hover {
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-md);
}

/* Hero.astro <style> — Organismo usa los mismos tokens */
.hero {
  padding: var(--space-section-lg) var(--space-4);
  background: var(--color-bg);
}

.hero__subtitle {
  color: var(--color-text-secondary);
  max-width: 60ch;
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
}