92cf4aba3b
- Introduced RobotProductCard component for displaying robot details. - Added WhyUs component highlighting key reasons for choosing our robotics solutions. - Implemented CursorSpotlight for enhanced user interaction. - Created GlassPanel for a stylish UI element. - Developed MotionSection for animated section visibility. - Added PremiumButton for versatile button options. - Established data structures for industries and robots, including detailed specifications and use cases. - Included utility functions for retrieving robots by slug and category.
46 lines
2.3 KiB
Markdown
46 lines
2.3 KiB
Markdown
# 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.
|