67 lines
2.1 KiB
Markdown
67 lines
2.1 KiB
Markdown
# Clavitor Landing Page — MISSING COMPONENTS REPORT
|
||
|
||
## Status
|
||
Landing page created at `index.html` using ONLY `styleguide.css` classes.
|
||
|
||
## Missing from Design System (need inline styles or new components)
|
||
|
||
### 1. Navigation Components
|
||
- `.nav` — no navigation container
|
||
- `.nav-link` — for text links in nav
|
||
- `.nav-spacer` or `.ml-auto` — for pushing items right (currently using `style="margin-left: auto;"`)
|
||
|
||
### 2. Layout Utilities
|
||
- `.text-center` — text-align center
|
||
- `.mx-auto` — margin-left/right auto for centering
|
||
- `.mt-4`, `.mt-6`, `.mt-8` — margin-top utilities (4=16px, 6=24px, 8=32px)
|
||
- `.mb-4` — margin-bottom utilities
|
||
|
||
### 3. Feature Card Icon Size
|
||
- `.black-square-sm` — 48×48px variant for feature icons (currently inline styled)
|
||
|
||
### 4. Footer Components
|
||
- `.footer` — with border-top treatment
|
||
- `.footer-link` — specific footer text styling
|
||
- `.justify-between` — justify-content: space-between
|
||
|
||
### 5. Typography Variants
|
||
- `.lead` or `.text-lg` — 18px subheading for hero (currently inline styled)
|
||
|
||
### 6. Responsive Classes
|
||
- Mobile breakpoints for grid layouts
|
||
- Stack behavior for `.grid-2-equal` on small screens
|
||
|
||
## What's IN the CSS (working)
|
||
|
||
✓ Logo lockup (exact final spec)
|
||
✓ Section patterns (vault1984 style)
|
||
✓ Buttons (all variants + sizes)
|
||
✓ Feature cards (light + dark)
|
||
✓ Stats grid
|
||
✓ Pills/pill rows
|
||
✓ Typography scale
|
||
✓ Color tokens
|
||
✓ Container/max-width
|
||
|
||
## Recommendation
|
||
|
||
Add these utility classes to `styleguide.css`:
|
||
|
||
```css
|
||
/* Utilities */
|
||
.text-center { text-align: center; }
|
||
.mx-auto { margin-left: auto; margin-right: auto; }
|
||
.ml-auto { margin-left: auto; }
|
||
.justify-between { justify-content: space-between; }
|
||
.mt-4 { margin-top: 16px; }
|
||
.mt-6 { margin-top: 24px; }
|
||
.mt-8 { margin-top: 32px; }
|
||
.mb-4 { margin-bottom: 16px; }
|
||
.text-lg { font-size: 18px; }
|
||
|
||
/* Component variants */
|
||
.black-square-sm { width: 48px; height: 48px; }
|
||
.nav-link { font-size: 14px; color: var(--text-secondary); text-decoration: none; }
|
||
.footer { border-top: 1px solid var(--border-default); padding: 48px 0; }
|
||
```
|