ceffb2a3f3
Per user: 'เราไม่ต้องการ legacy design น่ะ เพราะมีดีไชน์ใหม่แล้วไง'
- New v6 design must apply to EVERY page, not just index
PHASE A — Add CSS compatibility aliases (~600 lines)
==================================================
fx-system.css grew from 0.05MB → 0.12MB with 3 new alias blocks
for legacy class names that pages still use:
1. LEGACY → v6 ALIASES
.section, .section-bento, .section-soft, .section-yellow
.section-header, .section-badge, .section-title, .section-desc
.reveal, .hero-content, .hero-badge, .hero-grid
.service-stack + .service-stack-{item,num,icon,body,title,bullets}
.portfolio-card-{grid,top,badge,arrow,name,industry,highlight}
.contact-form, .form-{group,label,input,row,success}, .btn, .btn-{primary,outline-dark}
.filter-section, .filter-bar, .filter-btn
.info-icon, .checklist
All styled with v6 design tokens (--ink, --paper, --coral,
--brand-yellow, --line-2, --paper-2, etc.)
2. BENTO COMPONENT ALIASES
.bento-grid, .bento-tile, .span-{3,4,5,6,7,8,12}, .rows-{2,3}
.surface-{white,soft,yellow,purple,purple-soft,teal,teal-soft,mint,dark,coral}
.tile-{eyebrow,title,body,link}, .mega-cta
All render via CSS Grid 12-col + v6 surface treatments
Children (.tile-eyebrow, .tile-title, .tile-body) get v6
typography (Kanit 800 for titles, JetBrains Mono 700 for
eyebrows, Itim for em accents).
3. DARK MODE OVERRIDES
html.dark .section-soft/.filter-section: var(--paper-2)
html.dark .section-badge/.filter-btn.active: yellow
html.dark .contact-form .form-input: dark inputs
html.dark .bento-tile.surface-{soft,purple-soft,yellow}: dark variants
PHASE B — Replace legacy components with inline divs
==================================================
Deleted components (no longer imported by anyone):
- src/components/BentoGrid.astro
- src/components/BentoTile.astro
- src/components/DecoOrb.astro
- src/components/PageHero.astro
Replaced in 7 pages (mechanical regex sweep):
- services/[slug].astro
- contact.astro
- faq.astro
- blog/index.astro
- blog/[slug].astro
- privacy.astro
- terms.astro
JSX transforms:
- <BentoGrid>...</BentoGrid> → <div class='bento-grid'>...</div>
- <BentoTile span={6} surface='yellow' /> → <div class='bento-tile span-6 surface-yellow' />
- <DecoOrb .../> → (deleted, was decorative empty)
- Removed unused BentoGrid/BentoTile/DecoOrb imports
Cleaned orphan comments referencing deleted components:
- // use data-parallax-speed from DecoOrb
- <!-- mail, line, hours as separate BentoTiles -->
- /* FAQ inside BentoTile */
FINAL AUDIT
===========
- 0 legacy component refs in src/
- Build: 22 pages, 1.98s, 0 errors
- All 11 pages have v6 styling (via direct fx-* or via aliases)
Result: every page now uses the v6 design system consistently.
No more yellow DecorativeOrbs, no more BentoTile grid overlap,
no more PageHero/KineticHero mixing. Visual continuity across
all 11 pages.
Astro Starter Kit: Minimal
npm create astro@latest -- --template minimal
🧑🚀 Seasoned astronaut? Delete this file. Have fun!
🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
/
├── public/
├── src/
│ └── pages/
│ └── index.astro
└── package.json
Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.
There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the public/ directory.
🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro -- --help |
Get help using the Astro CLI |
👀 Want to learn more?
Feel free to check our documentation or jump into our Discord server.