Commit Graph

15 Commits

Author SHA1 Message Date
Kunthawat Greethong
f827afb33f feat: liquid glass UI, blob background, redesign home/portfolio/about pages
- Liquid glass effect on navbar/cards with backdrop-filter invert
- Animated blob gradient background (SVG-based)
- Portfolio section: scene-dark invert, show 5 items on home
- How Work section: step flow with numbers + connecting lines
- Hero: Decision snapshot replacing problem selector
- About page: inverted background with contrast fixes
- Fix parallax JS bundling via Astro
- Fix navbar fixed positioning after liquid glass CSS
- Submenu hover fix
- Clean up removed legacy files/assets
2026-06-23 11:40:37 +07:00
Kunthawat Greethong
ceffb2a3f3 refactor(legacy): apply v6 design to all inner pages (delete bento components)
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.
2026-06-14 21:22:58 +07:00
Kunthawat Greethong
b586464b5c feat(footer+layout): v6-footer + mount UtilityBar/Marquee/Nav/Footer in Base.astro
- Footer.astro (v6-footer): REPLACED legacy 439-line version. 4-col sitemap
  bound to site settings (phone, email, line, facebook, linkedin) +
  servicesDropdown + company links. Logo uses /images/logo-long-black.png
  (local, was hardcoded to dataroot CDN in v7-5).
- Base.astro: mount <UtilityBar /> + <Marquee /> + <Navigation /> + <Footer />
  around <slot />. Nav receives currentPath for active link highlight.
  Animation init now runs BOTH initAnimations (legacy bento) and fxInit (v7-5).
- SWEEP: removed duplicate <Navigation /> / <Footer /> + their imports
  from 11 page files. Idempotent script via execute_code.

Verified: all 9 pages return 200, header/footer render exactly once each.

Refs: .hermes/plans/2026-06-13_124000-moreminimore-v7-5-migration.md Task 3.1-3.2
2026-06-13 17:50:10 +07:00
Kunthawat Greethong
b54657f58a chore(services): sync existing [slug].astro updates from staging 2026-06-13 17:43:35 +07:00
Kunthawat Greethong
c334b8b650 fix(services/[slug]): handle missing bullets/items fields in legacy data
ai-consult service has data.services[i].items (not .bullets), so .map(bullets) crashed during build. Use s.bullets || s.items || [] fallback. Also data-surface defaults to 'white' when missing.
2026-06-11 08:52:42 +07:00
Kunthawat Greethong
dcd1d73f56 refactor(services/webdev): 5 different layout patterns (no more BentoGrid)
Before: all 5 sections used BentoGrid + BentoTile — repetitive look

After: 5 distinct layouts:
  1. Hero: 2-column grid (text + 4 why-us cards stacked)
  2. Services: vertical card stack (4 items, icon+num+bullets)
  3. Tech options: 2-column comparison table (Astro vs WordPress)
  3b. Portfolio: 2x2 card grid (4 real client sites, hover effect)
  4. Pricing: 3-tier card layout (Landing/Astro/WP) + extras list
  5. FAQ: accordion (native details/summary) + MDX content card

New CSS classes added:
- .service-stack-item, .service-stack-num, .service-stack-bullets
- .tech-comparison, .tech-col, .tech-col-header
- .portfolio-grid-2x2, .portfolio-card-grid
- .pricing-tiers, .pricing-tier, .pricing-tier-recommended
- .faq-accordion, .faq-item, .faq-summary, .faq-icon

Imports fixed: added Icon from Icon.astro (was missing → Astro error)
2026-06-10 19:36:43 +07:00
Kunthawat Greethong
84e245a7bb refactor(services/webdev): restructure from 11 sections to 5 + add real content
Major restructuring of /services/webdev:

Before: 11 sections (Hero, Features, Targets, Included, Tech, Pricing, AI, WhyUs, MDX, FAQ, CTA) — content sparse, many empty cards

After: 5 main sections + inline MDX:
  1. Hero (with 4 why-us cards in right column)
  2. บริการที่คุณได้รับ — 4 service tiles with 3 bullets each
  3. เลือกระบบ + ผลงานจริง (4 real client sites with CTA links)
  4. ราคา (with 'bestFor' context for each price)
  5. FAQ (8 questions with longer answers) + MDX content card

New content (webdev only — other services unchanged):
- 4 why-us tiles (ทำเสร็จไว, แก้เองได้, ติด Google+AI, Server ฟรีปีแรก)
- 4 service tiles with 3 bullets each (แก้ไขเอง, AI, SEO+GEO, Server+SSL)
- 4 real portfolio entries (Dataroot, Baofuling, Lungfinler, ทวนทอง 99)
- 5 pricing entries with bestFor context
- 8 FAQ entries (was 6) with longer answers
- Removed old 'included', 'features', 'targets' from data

CSS additions:
- .hero-trust-grid (right column 4 cards)
- .service-bullets (✓ bullets in service tiles)
- .tile-cta-link (dark pill CTA in portfolio tiles)
- .mdx-content-card (white card for MDX content)
2026-06-10 14:31:02 +07:00
Kunthawat Greethong
b5be45bcd6 feat(pages): Bento Grid redesign across all pages
Apply Bento Grid + decorative parallax orb system from about.astro
to all remaining pages (home, services, portfolio, faq, contact,
terms, privacy, blog list, blog detail, services detail).

Layout changes (consistent across all pages):
- Main content sections use <BentoGrid> + <BentoTile>
- 2-3 <DecoOrb> per page for decorative parallax (no parallax blobs
  behind text — orbs are pure decoration, z-index: 0, pointer-events: none)
- Surface variants: white, soft, yellow, purple-soft, teal, mint, dark
  (rotated across pages for visual variety)
- Asymmetric span strategy (8+4, 7+5, 6+6) instead of flat grids
- Process sections use clean 4x1 grid
- Pull quote + yellow CTA kept as-is (standalone sections)

Content rules preserved:
- All Thai content kept verbatim
- No fabricated statistics
- No emoji icons (use text numerals 01 02 03 04)
- All design tokens from global.css (no hardcoded hex)
- Existing global classes (.container, .section, .btn, .section-badge,
  .section-title, .cta-section, etc.) reused — no design system break

Build verified: 22 pages built in 1.80s, no errors.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-06-08 23:30:48 +07:00
Macky
6701c462ee fix: Thai line-height + add Kanit font variables
- Add --font-display, --font-body, --font-mono CSS variables in :root
  (they were referenced everywhere but never defined; Kanit wasn't loading)
- Remove Noto Sans Thai import (Kanit handles Latin + Thai natively)
- Fix hero/PageHero line-height: 1/1.1 → 1.3 to prevent Thai vowel clipping
  (was caused by overflow:hidden on .word-wrapper combined with line-height:1)
- Replace .word-wrapper overflow:hidden with padding so Thai descenders
  stay visible during kinetic-title animation
- Bump word translateY from 100% → 110% so word slides up cleanly
- Bump global h1-h6 line-height from 1.1 → 1.25

Build: 18 pages, 0 errors
2026-06-04 09:20:28 +07:00
Macky
0855e3d77b feat: light theme page templates + integration with new content collections
- All 11 page templates rewritten for light theme
- index.astro: 8 sections (hero, stats yellow band, problem cards,
  services mega-grid, black pull-quote, blog preview, yellow CTA)
- about.astro: story + values (4 dark-icon cards) + process 4-step
- contact.astro: 4 channel picker cards + 8-field form (added budget field)
  + 3-step 'what happens next' + pre-submit FAQ + yellow final CTA
- faq.astro: dynamic category rendering from content/faq collection
  (5 categories, 20 Q&A) + tag cloud + 3 channel cards
- portfolio.astro: industry filter bar (sticky) + 9 items with new
  schema (industry, what_we_did, result fields) + 'ดีลที่เราเลือก' section
- services/index.astro: decision table (6 rows, scannable in 30s)
  + 3 pricing tiers (Starter/Business/Enterprise) + add-on chips
- services/[slug].astro: 4 service types with light hero + pricing +
  tech options + AI features + 6-FAQ per service
- blog/index.astro: featured + 4-card grid from content collection
- blog/[slug].astro: 2-column with sidebar (about, contact, related)
- privacy.astro + terms.astro: legal content, light theme
- All form posts go to setTimeout success (placeholder for backend wire)
2026-06-03 14:15:33 +07:00
Kunthawat Greethong
b7787cc403 Add animated background to all hero sections
- Homepage: 3 animated orbs, 8 floating particles, 3 moving lines
- Service pages: 2 animated orbs, 4 particles, 2 moving lines
- About page: 2 animated orbs, 3 particles, 2 moving lines
- Portfolio page: 2 animated orbs, 4 particles, 2 moving lines
- Blog page: 2 animated orbs, 4 particles, 2 moving lines

All animations use yellow (#fed400) glow effects on dark background
2026-05-22 12:40:57 +07:00
Kunthawat Greethong
985421cb6a Verify all pages have dark hero, white content 2026-05-21 16:21:05 +07:00
Kunthawat Greethong
0096812bb0 Phase 2: Service pages with magazine layout and old site content
- All 4 service pages (webdev, marketing, automation, ai-consult) redesigned
- Magazine-style hero with decorative elements and features card
- Service-specific content from old site:
  - WebDev: features, included items, tech options, pricing, FAQs
  - Marketing: channels, AI features, targets, FAQs
  - Automation: capabilities, targets, FAQs
  - Tech Consult: services, why us, FAQs
- Consistent magazine styling across all service pages
2026-05-21 15:23:11 +07:00
Kunthawat Greethong
996b50f371 Phase 2: Enhanced service pages with rich content
- Updated [slug].astro with new sections: Hero, Why, Target, FAQ
- Enhanced all service MDX files with hero, why, target, and FAQ data
- WebDev: Added hero content about AI-powered editable websites
- Automation: Added hero content about data integration and AI
- Marketing: Added hero content about multi-channel automation
- AI Consult: Added hero content about AI strategy and implementation
2026-05-21 14:32:48 +07:00
Kunthawat Greethong
b9cd01a55f Phase 1: Homepage seamless design - add gradient transitions
- Added gradient transitions between sections in global.css
- Portfolio section now has gradient-top (dark to white fade)
- Blog section now has gradient-bottom (white fade from dark)
- Reduced portfolio overlay opacity from 0.85 to 0.65
- Added border to blog cards for white-on-white visibility
- Blog cards now have primary color accent on hover
2026-05-21 14:29:31 +07:00