# Component Snippets

Overview of the reusable TSX snippets in `snippets/`. Each is a copy-paste base for a new project adapt brand tokens + content via your own `lib/content.ts`.

| File | Purpose | Depends on |
|---|---|---|
| `PremiumButton.tsx` | Gold-gradient primary + outline + ghost variants, optional magnetic wrapper | `lib/cn`, lucide ArrowUpRight |
| `SectionHeading.tsx` | Premium section heading w/ eyebrow + serif h2 + sub paragraph | `lib/cn`, framer Reveal |
| `GlassCard.tsx` | Dark glass card w/ hover lift, amber glow, gold underline sweep | lucide LucideIcon |
| `Footer.tsx` | 4-column footer w/ no duplication, watermark, agency credit | brand contact data |
| `AppBadges.tsx` | Official App Store + Google Play badge anchors (plain `<img>`) | `/public/images/*-badge.svg` |
| `WhatsAppLink.tsx` | Refined gold WhatsApp icon button + label variant | inline SVG (no lucide glyph) |
| `ClientLogoMarquee.tsx` | Auto-scroll logo marquee w/ hover pause + reduced-motion grid fallback | logos array, marquee keyframe in globals.css |
| `CertificateGallery.tsx` | 4-image bento gallery linking to PDFs in new tab | `next/image`, certs array |

## How to use

1. Copy the file you need into your project's `src/components/` (or wherever your component layer lives).
2. Update import paths (`@/lib/cn`, `@/components/ui/...`) to match your project alias.
3. Wire data: the snippets accept props or read from a `lib/content.ts` you control.
4. Confirm Tailwind v4 `@theme` tokens (`obsidian`, `gold`, `bone`, `mist`, etc.) exist see `DESIGN_SYSTEM.md`.
5. Confirm Framer Motion + lucide-react installed:
   ```bash
   npm i framer-motion lucide-react
   ```

## Adapt patterns

The snippets show the **shape**. Your brand may need:
- Different palette (warm copper instead of gold? `--color-gold` → your token, keep the same usage rules).
- Different copy hierarchy (more / fewer columns in footer).
- Different surfaces (e.g., add a Resources column).

Keep the **interaction grammar** consistent:
- Hover lift `-translate-y-1`.
- Amber/gold glow bottom-right.
- Underline sweep on cards.
- 1.4 strokeWidth on icons.
- Serif on h1/h2 only.

That's what makes any palette feel "Luxam-class" premium.

## Don't fork without reason

If a snippet does 95% of what you need, **wrap** it with project-specific props rather than forking. Forks drift.