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
This commit is contained in:
Kunthawat Greethong
351
PLAN.md
Normal file
351
PLAN.md
Normal file
@@ -0,0 +1,351 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user