moreminimore-astroreal/PLAN.md

# Plan: MoreminiMore Homepage Rebuild

_Locked via grill — by Codex + Kunthawat_

## Goal

Rebuild the MoreminiMore company website from a clean slate, starting with the homepage only. The homepage must make SME owners feel that MoreminiMore is a friendly growth partner who understands real business problems, uses real data before recommending work, and can deliver modern, trustworthy websites and systems. The visual experience should feel modern and a little wow through restrained liquid-glass UI, layered parallax, and polished UX, but never become an effect demo or a tech showcase.

## Core Positioning

Priority of trust:

1. MoreminiMore understands SME businesses and their real problems.
2. MoreminiMore can help clients choose work that is more efficient, worthwhile, and suitable for their business.
3. MoreminiMore writes modern code in the UX sense: smooth, beautiful, easy to use, and subtly impressive.

Target customer priority:

1. Businesses that already have a website, ads, or tools, but feel the result is not worth the money or effort.
2. Businesses that do not yet have a good website or system and want to start correctly.
3. Businesses growing into AI/automation/workflow needs.

Brand role:

1. Growth partner for SMEs.
2. Business diagnosis partner.
3. Team that can implement real working solutions.

Tone:

- Friendly-first.
- Thai-first copy.
- English only for service names and necessary terms.
- No consultant-speak, no overly technical language, no fake metrics.

## Homepage Strategy

Hero strategy:

- Belief-led headline.
- Pain-led subheadline.
- Promise-led CTA/context.

Current hero copy direction:

> ธุรกิจไม่ควรเสียเงินกับสิ่งที่ยังไม่รู้ว่าคุ้มไหม
>
> เราช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำ อย่างมีประสิทธิภาพ และเหมาะสมกับลูกค้า

The final copy can be polished, especially the phrase "เหมาะสมกับลูกค้า", but the idea should stay intact.

Primary conversion priority:

1. ส่งโจทย์ธุรกิจให้เราดูก่อน
2. ดูเคส/ผลงานก่อน แล้วค่อยติดต่อ
3. ปรึกษาฟรี

Do not use "30 นาที" in CTA copy. Use "ปรึกษาฟรี" only.

Homepage v1 must not include a blog section. Blog content can stay preserved for later, but the homepage should focus on trust, diagnosis, proof, service clarity, portfolio quality, and conversion.

## Homepage Sections

Recommended homepage order:

1. Hero
   - Belief-led headline.
   - Friendly explanation.
   - CTA to open problem form.
   - Light abstract business-map background with subtle liquid glass.

2. Problem framing
   - Explain that customers do not need to know which service they need.
   - MoreminiMore will map the problem to the suitable service.
   - CTA opens the same slide-over form.

3. Dataroot diagnosis story
   - Dark diagnosis stage.
   - Split case layout.
   - Left side: narrative diagnosis.
   - Right side: metric cards and relevant visual/screenshot.
   - Use only real Dataroot metrics:
     - +373% impression
     - +114.2% click
     - -28.3% ad spend

4. Outcome-first service cards
   - Service name is still visible in English.
   - Card headline should sell the outcome/problem solved, not the service label first.
   - Desktop hover reveals "เหมาะกับปัญหาแบบไหน".
   - Mobile shows essential information directly.

5. Portfolio preview
   - Dark gallery stage.
   - Featured + grid layout.
   - Featured 1 should be Jet Industries for credibility.
   - Featured 2 should be selected from the most visually strong portfolio screenshot after inspecting assets.
   - Dataroot does not need to be the main portfolio feature because it has the diagnosis story.
   - Portfolio role is mainly visual website quality, because most clients are website clients.

6. Mini process
   - Short 4-step process:
     1. เข้าใจธุรกิจ
     2. ดูข้อมูล
     3. เลือกทางที่คุ้ม
     4. ลงมือและวัดผล

7. Final CTA
   - Friendly, low-friction.
   - Reopen form panel.
   - Reinforce "ส่งโจทย์ให้เราดูก่อน".

## Problem Form

The primary CTA opens a form, not a separate contact page.

Placement and behavior:

- Desktop: glass slide-over panel from the right.
- Mobile: bottom sheet.
- Floating/sticky CTA appears after the hero, not immediately on first paint.
- Navigation also has a CTA.

Problem chips:

1. เว็บมีอยู่แล้ว แต่ไม่ค่อยมีลูกค้าทัก
2. ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม
3. มีคนทักมา แต่ไม่ใช่ลูกค้าที่ใช่
4. ทีมงานทำงานเดิม ๆ แต่ทำงานช้า หรือผิดพลาดบ่อย
5. อยากใช้ AI แต่ไม่รู้เริ่มตรงไหน
6. ยังไม่แน่ใจว่าควรแก้อะไรก่อน

Textarea:

- Must include a very short example because customers are assumed to be lazy and may not want to type.
- Example direction:
  - "ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม อยากรู้ว่าควรแก้อะไรก่อน"
  - "มีเว็บแล้ว แต่ลูกค้าไม่ค่อยทัก อยากรู้ว่าควรแก้เว็บหรือยิงแอดก่อน"

Contact fields:

- Name.
- Phone.
- Email.
- Phone or email must be provided, but both are not required.
- Labels must be explicit because non-technical customers may be confused by a single generic "contact channel" field.

Submission backend:

- Use Google Apps Script first because lead volume is expected to be low.
- Send notification email to Gmail/Google Workspace.
- Ideally also store leads in Google Sheet.
- Sender should be MoreminiMore-owned; customer contact should be used as reply-to where possible.
- Keep message clean to reduce spam risk.
- Provide the Google Apps Script as a copy-ready file because the user has not done this setup before.
- Current script artifact: `google-apps-script/lead-form.gs`.
- Current setup guide: `google-apps-script/SETUP.md`.

Post-submit UX:

- Stay in the panel.
- Show success message plus light diagnosis preview.
- Do not pretend to generate a complete diagnosis.
- Example direction: "จากปัญหาที่เลือก เราน่าจะเริ่มจากการดูเว็บ/แอด/ขั้นตอนทำงานก่อน แล้วจะติดต่อกลับทางเบอร์หรืออีเมลที่ให้ไว้"

## Navigation

This is a company website, not a one-page landing page.

Navigation should include:

- หน้าแรก
- บริการ
- ผลงาน
- เกี่ยวกับ
- FAQ and/or บทความ
- ติดต่อ / ส่งโจทย์ให้เราดู

Services submenu:

- Compact mega menu.
- Use English service names:
  - Website Development
  - Marketing Consult
  - Automation Workflow
  - AI Consult
- Include a short Thai explanation under each service name.
- Desktop supports hover, click, and keyboard.
- Mobile uses an accordion/list.

Nav visual behavior:

- Hybrid glass sticky nav.
- On hero: transparent/light glass.
- After scroll: compact stronger glass/solid for readability.

## Visual System

Overall mode:

- Hybrid light/dark.
- Light glass for friendly SME trust.
- Dark/premium stages for Dataroot diagnosis and portfolio.

Section atmosphere:

- Light hero.
- Dark Dataroot diagnosis.
- Light service/process/form context.
- Dark portfolio gallery.

Brand assets:

- Use existing logo.
- Use `#fed400` as accent only, not as a full-page wash.
- Use red `#d4553a` sparingly if useful.
- Avoid recreating the old yellow-heavy design.

Liquid glass:

- Subtle macOS-inspired.
- Use in key moments only:
  - Navigation.
  - CTA/form slide-over.
  - Hero card/form/selected elements.
  - Dataroot diagnosis cards.
  - Possibly light service cards, but not every surface.
- Must preserve readability before effect.

Background and parallax:

- Main background concept: abstract business map.
- Use lines, nodes, soft grids, flow paths, and layered decision-map visuals.
- Hero should not rely on stock imagery.
- Portfolio sections can use real portfolio screenshots as the main visual material.

Motion:

- Desktop:
  - Hero mouse parallax should be noticeable enough to feel dimensional.
  - Scroll-driven scene changes are allowed.
  - Use exactly 3 main background scenes:
    1. Hero / light business map.
    2. Dataroot / dark diagnosis stage.
    3. Portfolio / dark gallery stage.
- Mobile:
  - No mouse interaction.
  - Use scroll parallax/reveal only.
  - Keep performance conservative.

## Portfolio Rules

Portfolio role:

- Show website visual quality and execution.
- Most clients are website clients, not consulting clients.
- Consulting-heavy proof is mainly Dataroot.
- Dealplustech must be included in the website portfolio.
  - URL: `https://www.dealplustech.co.th`
  - Capture a homepage screenshot and use it as a portfolio image, matching the treatment of other portfolio clients.
  - Dealplustech is both website work and consulting-adjacent, but should still appear as a website portfolio item.

Client context:

- Largest client: Jet Industries.
- Second largest: Dataroot.
- Most other clients are smaller.

Sorting priority:

1. Visual quality / modern feel.
2. Professional credibility.
3. SME relatability.

Featured portfolio:

- Featured 1: Jet Industries.
- Featured 2: choose visually strongest work after inspecting assets.
- Other projects in grid.

## Technical Approach

Stack:

- Astro static, rebuilt from scratch.
- Vanilla JS first.
- CSS first for liquid glass and layout.
- Use small vanilla scripts for:
  - Mouse parallax.
  - Scroll scene transitions.
  - Slide-over/bottom sheet form.
  - Form validation and submission.
- Do not use React by default.
- Add React only if a specific interaction becomes too complex for readable vanilla JS.

Implementation scope:

- Homepage-first.
- Do not build full route details in v1.
- Navigation may reference future routes, but implementation focus is homepage.
- Preserve extracted inputs in `redesign-input/`.
- Old code remains archived in `_archive/pre-redesign-2026-06-21/`.

Suggested initial implementation files after plan approval:

1. Recreate minimal Astro project files at root:
   - `package.json`
   - `astro.config.mjs`
   - `tsconfig.json`
   - `src/pages/index.astro`
   - `src/styles/global.css`
   - `src/scripts/home.js`
2. Copy required assets from `redesign-input/assets/` into `public/`.
3. Build homepage components either inline first or split only when repeated:
   - Navigation
   - Hero
   - Problem CTA panel
   - Dataroot case
   - Service cards
   - Portfolio preview
   - Process
   - Footer
4. Add Google Apps Script endpoint configuration as an environment/runtime variable if possible.

## Key Decisions & Tradeoffs

- Problem-first homepage, but service cards still exist because this is a company website.
- Friendly-first copy, but visual system must remain premium enough for Jet/Dataroot credibility.
- Use English service names in nav for professionalism, but Thai copy everywhere else for clarity.
- Use Google Apps Script before heavier transactional email infrastructure because lead volume is expected to be low.
- Use Astro static + vanilla JS to keep the site light and maintainable.
- Use effects only in high-impact places to avoid repeating the previous failure mode of design overwhelming the business message.

## Risks / Open Questions

- The exact visual quality of portfolio assets must be inspected before choosing Featured 2.
- Dealplustech needs a homepage screenshot before implementation can finalize portfolio assets.
- Google Apps Script deliverability depends on the Google account/domain setup. SPF/DKIM/DMARC should be checked before production.
- Navigation points to company-site routes, but homepage is the first implementation scope. Decide whether future routes should be placeholders, omitted, or added later.
- Need final decision on exact final hero copy during implementation polish.

## Out Of Scope For Homepage V1

- Full services pages.
- Full portfolio detail pages.
- Blog section on homepage.
- Full blog redesign.
- Heavy WebGL/canvas animation.
- Full React app or SPA rewrite.
- Invented metrics or testimonials.
- Reusing old design or old code structure as the main foundation.