hazem/yslootahrobotics
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
yslootahrobotics/.claude/skills/premium-frontend-designer/COMPONENT_SNIPPETS.md
Najjar\NajjarV02 729ab71c2c
Some checks are pending
CI/CD / test-and-build (push) Waiting to run
Details
CI/CD / deploy (push) Blocked by required conditions
Details
Refactor code structure for improved readability and maintainability; removed redundant code blocks and optimized function calls.
2026-05-20 18:03:42 +04:00

2.3 KiB
Raw Blame History

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: 
    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.