Refactor code structure for improved readability and maintainability; removed redundant code blocks and optimized function calls.

.claude/skills/premium-frontend-designer/COMPONENT_RULES.md

@@ -19,14 +19,14 @@ Per-element rules. Apply when designing or reviewing the corresponding component
 - Same shape as primary.
 
 **Ghost**
-- `text-bone hover:text-gold-light` — no border, no fill.
+- `text-bone hover:text-gold-light` no border, no fill.
 
 **Forbidden**
 - Bright red CTA buttons (unless brand color is red).
 - Square corners on action buttons.
 - Solid `#000` or `#fff` backgrounds.
-- Loading text inside button that breaks layout — use a spinner icon + word swap with fixed min-width.
-- Success/error message **inside** button — render outside as a banner.
+- Loading text inside button that breaks layout use a spinner icon + word swap with fixed min-width.
+- Success/error message **inside** button render outside as a banner.
 
 ---
 
@@ -82,7 +82,7 @@ Per-element rules. Apply when designing or reviewing the corresponding component
 - Always `text-balance` on h2 for clean wrapping.
 - `text-pretty` on subtitle.
 - Use SectionLabel with sequential index per page (01, 02, 03…). No mono font.
-- One gold-accent phrase max per heading — overdoing gold cheapens it.
+- One gold-accent phrase max per heading overdoing gold cheapens it.
 
 ---
 
@@ -99,7 +99,7 @@ Per-element rules. Apply when designing or reviewing the corresponding component
 
 ## Footer
 
-**Layout — 4 columns, no duplication**
+**Layout 4 columns, no duplication**
 
 | Column 1 | Column 2 | Column 3 | Column 4 |
 |---|---|---|---|
@@ -109,7 +109,7 @@ Per-element rules. Apply when designing or reviewing the corresponding component
 **Rules**
 - No page link appears in two columns.
 - Privacy Policy lives only under Legal.
-- App badges only in Legal & App column (footer) — official SVGs at 132 px width, 8 px gap.
+- App badges only in Legal & App column (footer) official SVGs at 132 px width, 8 px gap.
 - External links open in new tab with rel attrs.
 - Background: `bg-obsidian` with subtle "LUXAM"-style watermark behind content (translate-y-[18%], opacity 0.025).
 - Bottom row: `© YYYY {brand}. All rights reserved.` + tagline + agency credit (subtle, gold-underlined on hover).
@@ -128,7 +128,7 @@ Per-element rules. Apply when designing or reviewing the corresponding component
   focus:shadow-[0_0_0_3px_rgba(212,164,55,0.18)]
   aria-[invalid=true]:border-[#a3261c]/60
   ```
-- Honeypot field: hidden `<input name="website">` — silently succeed if filled.
+- Honeypot field: hidden `<input name="website">` silently succeed if filled.
 - Validation: server-side via `submitContact()` action; client gets `state.fieldErrors` + `state.message`.
 - Submission states: `useActionState` + `useFormStatus`. Spinner inside button, success/error banner **outside** button.
 
@@ -142,9 +142,9 @@ Per-element rules. Apply when designing or reviewing the corresponding component
 - Wrapper for emphasis: `glass-gold size-11 grid place-items-center rounded-full`.
 - **Forbidden**: oversized icons (>32 px) standalone, multi-color icon sets, cartoonish flat icons.
 
-**No lucide WhatsApp glyph** — use custom inline SVG from `snippets/WhatsAppLink.tsx`.
+**No lucide WhatsApp glyph** use custom inline SVG from `snippets/WhatsAppLink.tsx`.
 
-**No lucide Instagram glyph in v1.16** — use custom inline SVG (see footer).
+**No lucide Instagram glyph in v1.16** use custom inline SVG (see footer).
 
 ---
 
@@ -229,8 +229,8 @@ Per-element rules. Apply when designing or reviewing the corresponding component
 ## Don't
 
 - Don't add hover effects without `transition-*` for smoothness.
-- Don't use `transform-origin` defaults on rotated icon discs — keep them small (8-12°).
-- Don't use `whileHover={{ scale: 1.1 }}` on cards — too theatrical. Use `-translate-y-1` instead.
+- Don't use `transform-origin` defaults on rotated icon discs keep them small (8-12°).
+- Don't use `whileHover={{ scale: 1.1 }}` on cards too theatrical. Use `-translate-y-1` instead.
 - Don't add box-shadows with multiple layers and bright colors. One subtle amber glow max.
-- Don't introduce a new font family per page — stick to display + sans.
+- Don't introduce a new font family per page stick to display + sans.
 - Don't render placeholder images (`via.placeholder.com`, gray boxes) in production code. Always use real assets the user provided.