Compare commits
6 Commits
f827afb33f
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
689a8924e6 | ||
|
|
2a3062357f | ||
|
|
1d893e1bcb | ||
|
|
61c2bd6924 | ||
|
|
fdb03f6117 | ||
|
|
0f244424c0 |
@@ -1,21 +1,22 @@
|
||||
# Plan Review Log: MoreminiMore Homepage Rebuild
|
||||
# Plan Review Log: Footer Component + Remove Yellow Lines from Process Section
|
||||
Act 1 (grill) complete — plan locked with the user. MAX_ROUNDS=5.
|
||||
|
||||
Act 1 grill complete — plan locked with user.
|
||||
## Round 1 — Codex
|
||||
พบ 10 issues (3 critical, 3 significant, 4 minor):
|
||||
1. 🔴 PageShell layout ignored — ควรแก้ผ่าน PageShell
|
||||
2. 🔴 Privacy/Terms pages ไม่มี — dead links
|
||||
3. 🔴 Liquid glass markup pattern ไม่ระบุ
|
||||
4. 🟡 service-proof-grid yellow accent missed
|
||||
5. 🟡 Mobile layout spec ambiguous
|
||||
6. 🟡 Step-flow visual cue removed without alternative
|
||||
7. 🟡 Missing semantic `<footer>` element
|
||||
8. 🟠 LINE URL unspecified
|
||||
9. 🟠 Logo dimensions omitted
|
||||
10. 🟠 z-index risk unresolved
|
||||
|
||||
MAX_ROUNDS=5
|
||||
### Claude's response
|
||||
แก้ทั้ง 10 ข้อใน PLAN.md revision
|
||||
|
||||
## Act 1 Summary
|
||||
|
||||
- User clarified credibility priority: SME understanding > measurable business value > modern UX/coding impression.
|
||||
- User clarified homepage must be company-site quality, not a one-page landing page.
|
||||
- User clarified visual direction: subtle macOS-inspired liquid glass, hybrid light/dark rhythm, abstract business-map parallax, restrained motion.
|
||||
- User clarified implementation preference: Astro static + vanilla JS first, Google Apps Script for low-volume lead handling.
|
||||
- User clarified CTA wording: use "ปรึกษาฟรี" only, not "ปรึกษาฟรี 30 นาที".
|
||||
- User clarified Dealplustech must be included in portfolio using a homepage screenshot.
|
||||
- User requested a copy-ready Google Apps Script file plus detailed setup instructions.
|
||||
|
||||
## Act 2 Status
|
||||
|
||||
Not started.
|
||||
|
||||
No implementation has been done from this plan yet.
|
||||
## Round 2 — Codex
|
||||
All 10 findings addressed. Minor note: footer ควรวางระหว่าง `</main>` กับ floating-cta (ไม่ใช่ inside `<main>`).
|
||||
VERDICT: APPROVED (2 rounds)
|
||||
|
||||
418
PLAN.md
418
PLAN.md
@@ -1,351 +1,71 @@
|
||||
# Plan: MoreminiMore Homepage Rebuild
|
||||
|
||||
_Locked via grill — by Codex + Kunthawat_
|
||||
# Plan: Footer Component + Remove Yellow Lines from Process Section
|
||||
_Locked via grill — by Claude + Kunthawat — Revised Round 1_
|
||||
|
||||
## 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.
|
||||
สร้าง Footer component ใหม่ด้วย liquid glass style และลบเส้นสีเหลืองออกจาก How we work section
|
||||
|
||||
## Approach
|
||||
### 1. ลบเส้นสีเหลืองจาก Process Section (`src/styles/global.css`)
|
||||
- ลบ `.process-grid::before` (เส้นแนวนอนสีเหลือง) → `display: none`
|
||||
- ลบ `.process-grid article::after` (วงกลม ">" สีเหลืองระหว่าง step) → `display: none`
|
||||
- `.process-grid .step-number`: เปลี่ยน `background: var(--yellow)` → `background: rgb(255 255 255 / .5)` + ลบ yellow box-shadow
|
||||
- `.service-proof-grid .process-grid .step-number`: override สีเหลืองเหมือนกัน (scope เพิ่ม)
|
||||
- **หมายเหตุ:** step numbers (01, 02, 03, 04) ยังคงแสดง sequential flow อยู่แล้ว ไม่ต้องเพิ่ม connector แทน
|
||||
|
||||
### 2. สร้าง Footer Component (`src/components/Footer.astro`)
|
||||
- ใช้ `<footer>` semantic element
|
||||
- ใช้ liquid glass style (ต้องมี 3 child divs):
|
||||
```html
|
||||
<footer class="site-footer liquid-glass liquidGlass-wrapper">
|
||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
<!-- content -->
|
||||
</footer>
|
||||
```
|
||||
- `position: relative; z-index: auto` (ไม่ทับ lead-panel z-index: 110)
|
||||
|
||||
### 3. เนื้อหา Footer
|
||||
**ซ้าย:**
|
||||
- โลโก้: `/images/logos/logo-long-black.png` (width="205" height="36")
|
||||
- คำอธิบาย: "ที่ปรึกษาเว็บไซต์ การตลาด และ AI สำหรับ SME"
|
||||
|
||||
**กลาง:**
|
||||
- ลิงก์: หน้าแรก / บริการ / ผลงาน / บล็อก / ติดต่อ / นโยบายความเป็นส่วนตัว / เงื่อนไขการใช้งาน
|
||||
|
||||
**ขวา:**
|
||||
- LINE: @moreminimore (link: https://line.me/ti/p/@moreminimore)
|
||||
- Email: contact@moreminimore.com
|
||||
|
||||
**ล่าง:**
|
||||
- Copyright: © {new Date().getFullYear()} MoreminiMore
|
||||
|
||||
### 4. Responsive
|
||||
- Desktop (>768px): 3 columns (grid-template-columns: 1fr 1fr 1fr)
|
||||
- Mobile (≤768px): vertical stack (flex-direction: column) — เรียง: โลโก้ → ลิงก์ → ติดต่อ → copyright
|
||||
|
||||
### 5. Integration Strategy
|
||||
- **PageShell pages** (about, services, blog, blog/[slug], contact, faq, portfolio, services/[slug]):
|
||||
เพิ่ม `<Footer />` import + render ใน `src/components/PageShell.astro` ก่อน `</main>` หรือก่อน `</body>`
|
||||
- **index.astro** (standalone, ไม่ใช้ PageShell):
|
||||
เพิ่ม `<Footer />` import + render ก่อน `</body>` โดยตรง
|
||||
|
||||
### 6. สร้าง Placeholder Pages
|
||||
- สร้าง `src/pages/privacy.astro` (placeholder — "นโยบายความเป็นส่วนตัว กำลังอัพเดท")
|
||||
- สร้าง `src/pages/terms.astro` (placeholder — "เงื่อนไขการใช้งาน กำลังอัพเดท")
|
||||
- ใช้ PageShell layout เหมือนหน้าอื่น
|
||||
|
||||
## Key decisions & tradeoffs
|
||||
- ใช้ liquid glass style เดียวกับ navbar เพื่อความ cohesive
|
||||
- ลบเส้นเหลืองทั้งหมด — step numbers ยังบ่งบอกลำดับอยู่
|
||||
- ใช้ dynamic year (`new Date().getFullYear()`) ใน copyright (Astro SSG → build-time inlined)
|
||||
- Footer ใน PageShell = แก้จุดเดียว ครอบคลุม 8 หน้า
|
||||
- z-index: auto (ไม่ทับ lead-panel)
|
||||
|
||||
## Risks / open questions
|
||||
- Privacy/Terms pages เป็น placeholder — ต้องเพิ่ม content ทีหลัง
|
||||
- Logo อาจต้องเปลี่ยนเป็นสีขาวเมื่ออยู่บนพื้นเข้ม (invert)
|
||||
|
||||
## Out of scope
|
||||
- ไม่แก้ไขหน้า Privacy/Terms content จริง
|
||||
- ไม่เพิ่ม social media icons (Facebook/X/LinkedIn)
|
||||
|
||||
97
src/components/Footer.astro
Normal file
97
src/components/Footer.astro
Normal file
@@ -0,0 +1,97 @@
|
||||
---
|
||||
const currentYear = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer class="site-footer liquid-glass liquidGlass-wrapper">
|
||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
|
||||
<div class="footer-row">
|
||||
<a class="footer-brand" href="/" aria-label="MoreminiMore">
|
||||
<img src="/images/logos/logo-long-black.png" width="160" height="28" alt="MoreminiMore" />
|
||||
</a>
|
||||
|
||||
<a class="footer-link" href="https://line.me/ti/p/@moreminimore" target="_blank" rel="noopener">LINE @moreminimore</a>
|
||||
<a class="footer-link" href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
|
||||
<span class="footer-copy">© {currentYear} MoreminiMore</span>
|
||||
</div>
|
||||
|
||||
<div class="footer-legal">
|
||||
<a href="/privacy/">ความเป็นส่วนตัว</a>
|
||||
<span aria-hidden="true">·</span>
|
||||
<a href="/terms/">เงื่อนไขการใช้งาน</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.site-footer {
|
||||
position: relative;
|
||||
z-index: auto;
|
||||
margin-top: 80px;
|
||||
padding: 18px 24px 14px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.footer-row {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.footer-brand img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
transition: opacity .2s var(--ease);
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.footer-legal {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.footer-legal a {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
transition: opacity .2s var(--ease);
|
||||
}
|
||||
|
||||
.footer-legal a:hover {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.footer-row {
|
||||
gap: 12px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.footer-brand img {
|
||||
width: 130px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
import '../styles/global.css';
|
||||
import Footer from './Footer.astro';
|
||||
import { formEndpoint, problems, services } from '../data/site.js';
|
||||
|
||||
const {
|
||||
@@ -111,6 +112,8 @@ const {
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
<button class="floating-cta" type="button" data-floating-cta data-open-lead>ส่งโจทย์ให้เราดู</button>
|
||||
<div class="panel-backdrop" data-panel-backdrop data-close-lead></div>
|
||||
<aside class="lead-panel liquid-glass liquidGlass-wrapper" aria-labelledby="lead-title" aria-hidden="true" data-lead-panel data-endpoint={formEndpoint}>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
import '../styles/global.css';
|
||||
import Footer from '../components/Footer.astro';
|
||||
|
||||
const formEndpoint = '';
|
||||
|
||||
@@ -219,29 +220,47 @@ const process = [
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-panel glass-panel liquid-glass liquidGlass-wrapper" data-depth-card>
|
||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
<p class="panel-kicker">Decision snapshot</p>
|
||||
<h2>หลังคุยกัน คุณจะเห็นภาพว่าอะไรควรทำก่อน</h2>
|
||||
<div class="decision-preview" aria-label="ตัวอย่างสรุปหลังดูโจทย์">
|
||||
<article>
|
||||
<span>Do first</span>
|
||||
<strong>แก้จุดที่ทำให้ลูกค้าไม่ทัก</strong>
|
||||
</article>
|
||||
<article>
|
||||
<span>Hold</span>
|
||||
<strong>ชะลอสิ่งที่ยังวัดผลไม่ได้</strong>
|
||||
</article>
|
||||
<article>
|
||||
<span>Measure</span>
|
||||
<strong>ตั้งสัญญาณว่าควรไปต่อหรือหยุด</strong>
|
||||
</article>
|
||||
<div class="hero-neural" data-depth-card>
|
||||
<canvas class="neural-canvas" aria-hidden="true"></canvas>
|
||||
<div class="neural-scene">
|
||||
<!-- Center node: กำไร -->
|
||||
<div class="neural-node node-center liquid-glass liquidGlass-wrapper" data-node="center">
|
||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
<span class="node-label">กำไร</span>
|
||||
<span class="node-sub">เป้าหมายของทุกธุรกิจ</span>
|
||||
</div>
|
||||
|
||||
<!-- Outer node: Marketing -->
|
||||
<div class="neural-node neural-card node-marketing liquid-glass liquidGlass-wrapper" data-node="marketing">
|
||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
<span class="card-tag">Marketing</span>
|
||||
<span class="card-desc">เพิ่มรายได้</span>
|
||||
</div>
|
||||
|
||||
<!-- Outer node: AI -->
|
||||
<div class="neural-node neural-card node-ai liquid-glass liquidGlass-wrapper" data-node="ai">
|
||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
<span class="card-tag">AI</span>
|
||||
<span class="card-desc">ลดต้นทุนและเวลา</span>
|
||||
</div>
|
||||
|
||||
<!-- Outer node: Business Knowledge -->
|
||||
<div class="neural-node neural-card node-biz liquid-glass liquidGlass-wrapper" data-node="biz">
|
||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
<span class="card-tag">Business Knowledge</span>
|
||||
<span class="card-desc">ลดความเสี่ยง</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="text-link" type="button" data-open-lead>ขอให้ช่วยดูโจทย์</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="problem-strip">
|
||||
@@ -249,9 +268,16 @@ const process = [
|
||||
<p class="eyebrow">Problem first</p>
|
||||
<h2>คุณเล่าปัญหา เราช่วยหา service ที่เหมาะสม</h2>
|
||||
</div>
|
||||
<p>
|
||||
เว็บนี้ไม่เริ่มจากแพ็กเกจ เพราะธุรกิจแต่ละเจอปัญหาไม่เหมือนกัน ส่งโจทย์สั้น ๆ มาได้เลย แล้วเราจะช่วยดูว่าควรเริ่มจากเว็บ แอด ระบบทำงาน หรือ AI
|
||||
</p>
|
||||
<div class="problem-strip-content">
|
||||
<p>
|
||||
เว็บนี้ไม่เริ่มจากแพ็กเกจ เพราะธุรกิจแต่ละเจอปัญหาไม่เหมือนกัน ส่งโจทย์สั้น ๆ มาได้เลย แล้วเราจะช่วยดูว่าควรเริ่มจากเว็บ แอด ระบบทำงาน หรือ AI
|
||||
</p>
|
||||
<ul class="problem-list">
|
||||
<li>เว็บมีอยู่แล้ว แต่ไม่ค่อยมีลูกค้าทัก</li>
|
||||
<li>ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม</li>
|
||||
<li>ทีมงานทำงานช้า หรือผิดพลาดบ่อย</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="dataroot" class="case-section scene scene-dark" data-scene="dark">
|
||||
@@ -324,7 +350,6 @@ const process = [
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">Portfolio</p>
|
||||
<h2>งานเว็บที่ต้องดูน่าเชื่อถือก่อน แล้วค่อยสวยแบบมีเหตุผล</h2>
|
||||
<a class="section-link" href="/portfolio/">ดูผลงานทั้งหมด</a>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-grid">
|
||||
@@ -340,7 +365,7 @@ const process = [
|
||||
))}
|
||||
</div>
|
||||
<div class="portfolio-more">
|
||||
<a class="button button-secondary" href="/portfolio/">ไปหน้า ผลงาน</a>
|
||||
<a class="button button-primary" href="/portfolio/">ไปหน้า ผลงาน</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -351,7 +376,10 @@ const process = [
|
||||
</div>
|
||||
<div class="process-grid">
|
||||
{process.map(([title, copy], index) => (
|
||||
<article>
|
||||
<article class="liquid-glass liquidGlass-wrapper">
|
||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
<span class="step-number">{String(index + 1).padStart(2, '0')}</span>
|
||||
<h3>{title}</h3>
|
||||
<p>{copy}</p>
|
||||
@@ -372,6 +400,8 @@ const process = [
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
<button class="floating-cta" type="button" data-floating-cta data-open-lead>ส่งโจทย์ให้เราดู</button>
|
||||
|
||||
<div class="panel-backdrop" data-panel-backdrop></div>
|
||||
|
||||
25
src/pages/privacy.astro
Normal file
25
src/pages/privacy.astro
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
import PageShell from '../components/PageShell.astro';
|
||||
---
|
||||
|
||||
<PageShell
|
||||
title="นโยบายความเป็นส่วนตัว | MoreminiMore"
|
||||
description="นโยบายความเป็นส่วนตัวของ MoreminiMore"
|
||||
>
|
||||
<section class="page-hero scene scene-light" data-scene="light">
|
||||
<div class="page-hero-grid">
|
||||
<div>
|
||||
<h1>นโยบายความเป็นส่วนตัว</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="page-section">
|
||||
<div class="glass-panel liquid-glass liquidGlass-wrapper">
|
||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
<p>หน้านี้กำลังอัพเดท กรุณาติดต่อเราหากมีคำถามเกี่ยวกับนโยบายความเป็นส่วนตัว</p>
|
||||
</div>
|
||||
</section>
|
||||
</PageShell>
|
||||
25
src/pages/terms.astro
Normal file
25
src/pages/terms.astro
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
import PageShell from '../components/PageShell.astro';
|
||||
---
|
||||
|
||||
<PageShell
|
||||
title="เงื่อนไขการใช้งาน | MoreminiMore"
|
||||
description="เงื่อนไขการใช้งานของ MoreminiMore"
|
||||
>
|
||||
<section class="page-hero scene scene-light" data-scene="light">
|
||||
<div class="page-hero-grid">
|
||||
<div>
|
||||
<h1>เงื่อนไขการใช้งาน</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="page-section">
|
||||
<div class="glass-panel liquid-glass liquidGlass-wrapper">
|
||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
<p>หน้านี้กำลังอัพเดท กรุณาติดต่อเราหากมีคำถามเกี่ยวกับเงื่อนไขการใช้งาน</p>
|
||||
</div>
|
||||
</section>
|
||||
</PageShell>
|
||||
@@ -179,3 +179,139 @@ form?.addEventListener('submit', async (event) => {
|
||||
setStatus('ส่งไม่สำเร็จ กรุณาลองใหม่อีกครั้ง', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
// Neural Network Hero - True 3D with Dynamic Lines
|
||||
const heroNeural = document.querySelector('.hero-neural');
|
||||
const neuralScene = document.querySelector('.neural-scene');
|
||||
const canvas = document.querySelector('.neural-canvas');
|
||||
const ctx = canvas?.getContext('2d');
|
||||
const nodes = document.querySelectorAll('.neural-node');
|
||||
|
||||
if (heroNeural && neuralScene && canvas && ctx && nodes.length > 0) {
|
||||
// 3D rotation state
|
||||
let targetRotateX = 0;
|
||||
let targetRotateY = 0;
|
||||
let currentRotateX = 0;
|
||||
let currentRotateY = 0;
|
||||
|
||||
// Canvas setup
|
||||
function resizeCanvas() {
|
||||
const rect = heroNeural.getBoundingClientRect();
|
||||
canvas.width = rect.width * window.devicePixelRatio;
|
||||
canvas.height = rect.height * window.devicePixelRatio;
|
||||
canvas.style.width = rect.width + 'px';
|
||||
canvas.style.height = rect.height + 'px';
|
||||
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
|
||||
// Find intersection point on node border
|
||||
function findBorderPoint(nodeRect, targetX, targetY) {
|
||||
const cx = nodeRect.left + nodeRect.width / 2;
|
||||
const cy = nodeRect.top + nodeRect.height / 2;
|
||||
const hw = nodeRect.width / 2;
|
||||
const hh = nodeRect.height / 2;
|
||||
|
||||
const dx = targetX - cx;
|
||||
const dy = targetY - cy;
|
||||
|
||||
if (dx === 0 && dy === 0) return { x: cx, y: cy };
|
||||
|
||||
const absDx = Math.abs(dx);
|
||||
const absDy = Math.abs(dy);
|
||||
|
||||
let scale;
|
||||
if (absDx * hh > absDy * hw) {
|
||||
scale = hw / absDx;
|
||||
} else {
|
||||
scale = hh / absDy;
|
||||
}
|
||||
|
||||
return {
|
||||
x: cx + dx * scale,
|
||||
y: cy + dy * scale
|
||||
};
|
||||
}
|
||||
|
||||
// Draw connections
|
||||
function drawConnections() {
|
||||
const rect = heroNeural.getBoundingClientRect();
|
||||
ctx.clearRect(0, 0, rect.width, rect.height);
|
||||
|
||||
const centerNode = document.querySelector('[data-node="center"]');
|
||||
const outerNodes = document.querySelectorAll('.neural-card');
|
||||
|
||||
if (!centerNode) return;
|
||||
|
||||
const centerRect = centerNode.getBoundingClientRect();
|
||||
const centerX = centerRect.left + centerRect.width / 2 - rect.left;
|
||||
const centerY = centerRect.top + centerRect.height / 2 - rect.top;
|
||||
|
||||
outerNodes.forEach(node => {
|
||||
const nodeRect = node.getBoundingClientRect();
|
||||
const nodeX = nodeRect.left + nodeRect.width / 2 - rect.left;
|
||||
const nodeY = nodeRect.top + nodeRect.height / 2 - rect.top;
|
||||
|
||||
const startPt = findBorderPoint(
|
||||
{ left: centerRect.left - rect.left, top: centerRect.top - rect.top,
|
||||
width: centerRect.width, height: centerRect.height },
|
||||
nodeX, nodeY
|
||||
);
|
||||
|
||||
const endPt = findBorderPoint(
|
||||
{ left: nodeRect.left - rect.left, top: nodeRect.top - rect.top,
|
||||
width: nodeRect.width, height: nodeRect.height },
|
||||
centerX, centerY
|
||||
);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(startPt.x, startPt.y);
|
||||
ctx.lineTo(endPt.x, endPt.y);
|
||||
ctx.strokeStyle = 'rgba(254, 212, 0, 0.5)';
|
||||
ctx.lineWidth = 3;
|
||||
ctx.lineCap = 'round';
|
||||
ctx.stroke();
|
||||
});
|
||||
}
|
||||
|
||||
// Mouse move handler - track entire page
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
const x = e.clientX / window.innerWidth;
|
||||
const y = e.clientY / window.innerHeight;
|
||||
|
||||
targetRotateY = (x - 0.5) * 10;
|
||||
targetRotateX = (y - 0.5) * -10;
|
||||
});
|
||||
|
||||
document.addEventListener('mouseleave', () => {
|
||||
targetRotateX = 0;
|
||||
targetRotateY = 0;
|
||||
});
|
||||
|
||||
// Animation loop
|
||||
function animate() {
|
||||
currentRotateX += (targetRotateX - currentRotateX) * 0.08;
|
||||
currentRotateY += (targetRotateY - currentRotateY) * 0.08;
|
||||
|
||||
neuralScene.style.transform =
|
||||
`rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg)`;
|
||||
|
||||
drawConnections();
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
// Mobile: Device orientation
|
||||
if (window.DeviceOrientationEvent && 'ontouchstart' in window) {
|
||||
window.addEventListener('deviceorientation', (e) => {
|
||||
if (e.gamma !== null && e.beta !== null) {
|
||||
targetRotateY = e.gamma * 0.3;
|
||||
targetRotateX = (e.beta - 45) * 0.3;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -344,11 +344,15 @@ box-shadow: inset 1px 1px 0 rgb(255 255 255 / .72);
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.hero.scene {
|
||||
overflow: visible;
|
||||
isolation: auto;
|
||||
}
|
||||
|
||||
.hero {
|
||||
min-height: 100svh;
|
||||
padding: 150px 0 88px;
|
||||
overflow: clip;
|
||||
contain: paint;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.hero-grid,
|
||||
@@ -362,6 +366,10 @@ contain: paint;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.mobile-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
min-height: calc(100svh - 238px);
|
||||
display: grid;
|
||||
@@ -448,6 +456,28 @@ background: rgb(255 255 255 / .10);
|
||||
color: rgb(255 255 255 / .72);
|
||||
}
|
||||
|
||||
/* Links inside inverted page sections */
|
||||
.page-section a,
|
||||
.page-section-tight a,
|
||||
.page-section button,
|
||||
.page-section-tight button,
|
||||
.page-section .text-link,
|
||||
.page-section-tight .text-link {
|
||||
color: white;
|
||||
}
|
||||
.page-section a:hover,
|
||||
.page-section-tight a:hover,
|
||||
.page-section button:hover,
|
||||
.page-section-tight button:hover,
|
||||
.page-section .text-link:hover,
|
||||
.page-section-tight .text-link:hover {
|
||||
color: var(--yellow);
|
||||
}
|
||||
.page-section li,
|
||||
.page-section-tight li {
|
||||
color: rgb(255 255 255 / .72);
|
||||
}
|
||||
|
||||
.service-detail-grid,
|
||||
.about-grid,
|
||||
.contact-layout,
|
||||
@@ -508,6 +538,37 @@ margin-top: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Override muted colors inside inverted sections */
|
||||
.page-section .detail-card p,
|
||||
.page-section .about-grid p,
|
||||
.page-section .contact-info p,
|
||||
.page-section .faq-item p,
|
||||
.page-section .blog-card p,
|
||||
.page-section-tight .detail-card p,
|
||||
.page-section-tight .about-grid p,
|
||||
.page-section-tight .faq-item p,
|
||||
.page-section-tight .blog-card p,
|
||||
.page-section .related-service-card p,
|
||||
.page-section-tight .related-service-card p {
|
||||
color: rgb(255 255 255 / .72);
|
||||
}
|
||||
|
||||
.page-section .detail-card span,
|
||||
.page-section .faq-item span,
|
||||
.page-section .blog-card span,
|
||||
.page-section .related-service-card span,
|
||||
.page-section-tight .detail-card span,
|
||||
.page-section-tight .faq-item span,
|
||||
.page-section-tight .blog-card span,
|
||||
.page-section-tight .related-service-card span {
|
||||
color: rgb(255 255 255 / .60);
|
||||
}
|
||||
|
||||
.page-section .detail-objective,
|
||||
.page-section-tight .detail-objective {
|
||||
color: rgb(255 255 255 / .72);
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -554,6 +615,12 @@ font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Override for dark sections */
|
||||
.page-section .contact-problem-list span,
|
||||
.page-section-tight .contact-problem-list span {
|
||||
color: rgb(255 255 255 / .72);
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
padding: clamp(12px, 3vw, 28px);
|
||||
}
|
||||
@@ -565,12 +632,13 @@ margin: 24px 0;
|
||||
}
|
||||
|
||||
.contact-info dt {
|
||||
color: var(--muted);
|
||||
color: rgb(255 255 255 / .60);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.contact-info dd {
|
||||
color: white;
|
||||
margin: 4px 0 0;
|
||||
font-size: clamp(1.3rem, 2.4vw, 2rem);
|
||||
font-weight: 900;
|
||||
@@ -596,6 +664,12 @@ font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* Override for dark sections */
|
||||
.page-section .service-story-grid h3,
|
||||
.page-section-tight .service-story-grid h3 {
|
||||
color: rgb(255 255 255 / .60);
|
||||
}
|
||||
|
||||
.service-hero-panel p {
|
||||
margin: 12px 0 24px;
|
||||
color: var(--muted);
|
||||
@@ -648,7 +722,7 @@ grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.related-service-card {
|
||||
color: var(--ink);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.related-service-card h3 {
|
||||
@@ -665,6 +739,146 @@ color: var(--muted);
|
||||
max-width: 760px;
|
||||
min-width: 0;
|
||||
}
|
||||
/* Neural Network Hero - True 3D Layout */
|
||||
.hero-neural {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 520px;
|
||||
margin-inline: auto;
|
||||
perspective: 1200px;
|
||||
}
|
||||
|
||||
.neural-canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.neural-scene {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.15s ease-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.neural-node {
|
||||
position: absolute;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.node-center:hover {
|
||||
box-shadow: 0 30px 80px rgb(254 212 0 / .25);
|
||||
}
|
||||
|
||||
.node-center {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) translateZ(0px);
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
padding: 32px;
|
||||
border: 3px solid var(--yellow);
|
||||
box-shadow:
|
||||
0 0 0 10px rgb(254 212 0 / .12),
|
||||
0 30px 80px rgb(254 212 0 / .20),
|
||||
0 10px 30px rgb(0 0 0 / .12);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.node-center:hover {
|
||||
transform: translate(-50%, -50%) translateZ(20px) scale(1.05);
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-size: clamp(2.6rem, 5vw, 3.4rem);
|
||||
font-weight: 900;
|
||||
color: var(--ink);
|
||||
line-height: 1;
|
||||
letter-spacing: -.02em;
|
||||
}
|
||||
|
||||
.node-sub {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.neural-card {
|
||||
width: 220px;
|
||||
padding: 30px 26px;
|
||||
min-height: 130px;
|
||||
}
|
||||
|
||||
/* Marketing: top-left, clearly separated */
|
||||
.node-marketing {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) translate3d(-280px, -170px, -100px);
|
||||
animation: float-1 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* AI: right side, below center */
|
||||
.node-ai {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) translate3d(280px, -40px, -80px);
|
||||
animation: float-2 7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Business: bottom-left */
|
||||
.node-biz {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) translate3d(-100px, 190px, -130px);
|
||||
animation: float-3 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.card-tag {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
color: var(--ink);
|
||||
letter-spacing: .02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@keyframes float-1 {
|
||||
0%, 100% { transform: translate(-50%, -50%) translate3d(-280px, -170px, -100px); }
|
||||
50% { transform: translate(-50%, -50%) translate3d(-310px, -200px, -150px); }
|
||||
}
|
||||
|
||||
@keyframes float-2 {
|
||||
0%, 100% { transform: translate(-50%, -50%) translate3d(280px, -40px, -80px); }
|
||||
50% { transform: translate(-50%, -50%) translate3d(310px, -70px, -120px); }
|
||||
}
|
||||
|
||||
@keyframes float-3 {
|
||||
0%, 100% { transform: translate(-50%, -50%) translate3d(-100px, 190px, -130px); }
|
||||
50% { transform: translate(-50%, -50%) translate3d(-140px, 220px, -200px); }
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
@@ -682,7 +896,7 @@ color: var(--muted);
|
||||
|
||||
.hero h1 {
|
||||
max-width: 15ch;
|
||||
font-size: clamp(3rem, 5.4vw, 5.45rem);
|
||||
font-size: clamp(2.55rem, 4.6vw, 4.63rem);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -698,6 +912,30 @@ color: var(--muted);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-result-metrics {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.hero-metric {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-metric strong {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 900;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.hero-metric span {
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
max-width: 62ch;
|
||||
margin-top: 24px;
|
||||
@@ -741,6 +979,21 @@ transition: all .4s cubic-bezier(.175, .885, .32, 2.2);
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Override liquid-glass on neural nodes to preserve 3D rendering */
|
||||
.neural-node.liquid-glass,
|
||||
.neural-node.liquidGlass-wrapper {
|
||||
position: absolute !important;
|
||||
overflow: visible;
|
||||
isolation: auto;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* Restore process-grid arrows (override liquid-glass ::after) */
|
||||
.process-grid.liquid-glass article::after,
|
||||
.process-grid article.liquid-glass::after {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.liquidGlass-effect,
|
||||
.liquidGlass-tint,
|
||||
.liquidGlass-shine {
|
||||
@@ -829,6 +1082,124 @@ inset -1px -1px 1px 1px var(--nav-shine-b);
|
||||
font-size: clamp(1.7rem, 3vw, 2.8rem);
|
||||
}
|
||||
|
||||
/* ── Hero Profit Cluster ── */
|
||||
.hero-profit-cluster {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
aspect-ratio: 1;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* Center card spans the middle */
|
||||
.profit-center {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
border: 2px solid var(--yellow);
|
||||
box-shadow:
|
||||
0 0 0 6px rgb(254 212 0 / .12),
|
||||
0 20px 60px rgb(254 212 0 / .18),
|
||||
0 4px 16px rgb(0 0 0 / .06);
|
||||
}
|
||||
|
||||
.profit-label {
|
||||
font-size: clamp(2rem, 4vw, 2.8rem);
|
||||
font-weight: 900;
|
||||
color: var(--ink);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.profit-sub {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Outer cards */
|
||||
.profit-card {
|
||||
border-radius: 20px;
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
|
||||
}
|
||||
|
||||
.profit-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 16px 40px rgb(0 0 0 / .10);
|
||||
}
|
||||
|
||||
.profit-tag {
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
color: var(--ink);
|
||||
letter-spacing: .02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.profit-desc {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* Position outer cards in the grid */
|
||||
.profit-marketing {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1;
|
||||
justify-self: center;
|
||||
width: 160px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.profit-ai {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
justify-self: end;
|
||||
width: 150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.profit-biz {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
justify-self: start;
|
||||
width: 150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Connector SVG */
|
||||
.profit-connectors {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.problem-preview,
|
||||
.decision-preview {
|
||||
display: grid;
|
||||
@@ -908,6 +1279,36 @@ line-height: 1.32;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.problem-strip-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.problem-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.problem-list li {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
font-size: 0.95rem;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.problem-list li::before {
|
||||
content: "→";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--yellow);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.case-section,
|
||||
.portfolio-section {
|
||||
width: 100%;
|
||||
@@ -935,6 +1336,26 @@ position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
/* White text on inverted dark backgrounds */
|
||||
.scene-dark h2,
|
||||
.scene-dark h3 {
|
||||
color: white;
|
||||
}
|
||||
.scene-dark p {
|
||||
color: rgb(255 255 255 / .72);
|
||||
}
|
||||
/* Links inside dark scenes */
|
||||
.scene-dark a,
|
||||
.scene-dark button,
|
||||
.scene-dark .text-link {
|
||||
color: white;
|
||||
}
|
||||
.scene-dark a:hover,
|
||||
.scene-dark button:hover,
|
||||
.scene-dark .text-link:hover {
|
||||
color: var(--yellow);
|
||||
}
|
||||
.case-section .eyebrow,
|
||||
.portfolio-section .eyebrow {
|
||||
border-color: var(--dark-line);
|
||||
@@ -1167,6 +1588,11 @@ justify-content: center;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.portfolio-more .button:hover {
|
||||
transform: none;
|
||||
box-shadow: 0 14px 34px rgb(254 212 0 / .30), inset 1px 1px 0 rgb(255 255 255 / .48);
|
||||
}
|
||||
|
||||
.process-grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
@@ -1175,14 +1601,7 @@ margin-top: 28px;
|
||||
}
|
||||
|
||||
.process-grid::before {
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
right: 10%;
|
||||
left: 10%;
|
||||
height: 2px;
|
||||
z-index: 0;
|
||||
content: "";
|
||||
background: linear-gradient(90deg, rgb(254 212 0 / .08), rgb(254 212 0 / .62), rgb(254 212 0 / .08));
|
||||
display: none;
|
||||
}
|
||||
|
||||
.process-grid article {
|
||||
@@ -1191,17 +1610,14 @@ background: linear-gradient(90deg, rgb(254 212 0 / .08), rgb(254 212 0 / .62), r
|
||||
min-height: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgb(19 18 13 / .12);
|
||||
border-radius: 24px;
|
||||
background: rgb(255 255 255 / .32);
|
||||
box-shadow: 0 22px 60px rgb(42 36 18 / .10), inset 1px 1px 0 rgb(255 255 255 / .68);
|
||||
padding: 18px;
|
||||
overflow: visible;
|
||||
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
|
||||
}
|
||||
|
||||
.process-grid article:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 30px 76px rgb(42 36 18 / .16), inset 1px 1px 0 rgb(255 255 255 / .78);
|
||||
}
|
||||
|
||||
.process-grid article::after {
|
||||
@@ -1232,9 +1648,9 @@ display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid rgb(19 18 13 / .12);
|
||||
border-radius: 22px;
|
||||
background: var(--yellow);
|
||||
background: rgb(255 255 255 / .5);
|
||||
color: var(--ink);
|
||||
box-shadow: 0 16px 38px rgb(254 212 0 / .28);
|
||||
box-shadow: 0 16px 38px rgb(42 36 18 / .10);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
@@ -1636,6 +2052,31 @@ max-width: calc(100% - 32px);
|
||||
max-width: 9ch;
|
||||
}
|
||||
|
||||
/* Profit cluster mobile */
|
||||
.hero-profit-cluster {
|
||||
max-width: 340px;
|
||||
gap: 10px;
|
||||
}
|
||||
.profit-center {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
.profit-label {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.profit-marketing,
|
||||
.profit-ai,
|
||||
.profit-biz {
|
||||
width: 130px;
|
||||
padding: 14px;
|
||||
}
|
||||
.profit-tag {
|
||||
font-size: 12px;
|
||||
}
|
||||
.profit-desc {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.problem-strip h2,
|
||||
.section-heading h2,
|
||||
.final-cta h2,
|
||||
@@ -1702,6 +2143,49 @@ border-radius: 18px;
|
||||
right: 16px;
|
||||
bottom: 14px;
|
||||
}
|
||||
|
||||
/* Neural network mobile */
|
||||
.hero {
|
||||
overflow: clip;
|
||||
contain: paint;
|
||||
}
|
||||
.hero-neural {
|
||||
height: auto;
|
||||
max-width: 320px;
|
||||
perspective: none;
|
||||
}
|
||||
.neural-canvas {
|
||||
display: none;
|
||||
}
|
||||
.neural-scene {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
transform: none !important;
|
||||
}
|
||||
.neural-node {
|
||||
position: relative;
|
||||
left: auto !important;
|
||||
top: auto !important;
|
||||
transform: none !important;
|
||||
min-width: 200px;
|
||||
}
|
||||
.node-center {
|
||||
min-width: 180px;
|
||||
}
|
||||
.neural-card {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
min-height: auto;
|
||||
}
|
||||
@keyframes float-1,
|
||||
@keyframes float-2,
|
||||
@keyframes float-3 {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.blog-card .text-link {
|
||||
@@ -1800,4 +2284,5 @@ animation-play-state: paused !important;
|
||||
.liquid-glass::before {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user