```
### 6.2 Card Hover Border Accent
```jsx
// Add group class to parent and use:
className =
"group border border-[var(--border-light)] hover:border-[var(--btn-primary-bg)]/50 transition-colors";
```
### 6.3 Bullet/List Items
```jsx
// Gold dot bullet
{text}
// Gold triangle bullet
▶
{text}
```
### 6.4 Spec/Info Grid (2-column metadata)
```jsx
{/* Items */}
```
---
## 7. BUTTON PATTERNS
### 7.1 Primary Button (Gold fill)
```jsx
```
### 7.2 Secondary/Outline Button
```jsx
```
### 7.3 Danger/Remove Button
```jsx
```
### 7.4 Legacy `.main-button` (used by Button.jsx component)
- Defined in `src/components/button/Button.scss`
- Gold background, white text, rounded, hover lift effect
- For NEW code, prefer primary button pattern above
---
## 8. SVG ICON PATTERN
Use either approach consistently. For new code, prefer **inline SVG components** (portable, no external dependency).
### 8.1 Inline SVGs (Recommended for new code)
```jsx
const MyIcon = () => (
);
```
Usage: `
` — color inherits from `currentColor`.
### 8.2 FontAwesome (Used in SocialMedia, Contact, header)
- Import: `import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"`
- Brand icons: `import { faGithub, faLinkedin } from "@fortawesome/free-brands-svg-icons"`
- Solid icons: `import { faEnvelope } from "@fortawesome/free-solid-svg-icons"`
- Brand colors defined as SCSS variables in `variables.scss` (e.g., `$linkedin: #0e76a8`)
### 8.3 React Icons (Installed but unused — avoid if possible)
- The `react-icons` package is installed but not currently used in any component.
- Prefer inline SVGs or FontAwesome instead.
---
## 9. FORM BLUEPRINT (WhatsApp/Email Actions)
**Do NOT use `