Compare commits
9 Commits
f827afb33f
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
bb1b1ba568 | ||
|
|
9ebbc91e5b | ||
|
|
f114a34a62 | ||
|
|
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
|
## Round 2 — Codex
|
||||||
|
All 10 findings addressed. Minor note: footer ควรวางระหว่าง `</main>` กับ floating-cta (ไม่ใช่ inside `<main>`).
|
||||||
- User clarified credibility priority: SME understanding > measurable business value > modern UX/coding impression.
|
VERDICT: APPROVED (2 rounds)
|
||||||
- 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.
|
|
||||||
|
|||||||
418
PLAN.md
418
PLAN.md
@@ -1,351 +1,71 @@
|
|||||||
# Plan: MoreminiMore Homepage Rebuild
|
# Plan: Footer Component + Remove Yellow Lines from Process Section
|
||||||
|
_Locked via grill — by Claude + Kunthawat — Revised Round 1_
|
||||||
_Locked via grill — by Codex + Kunthawat_
|
|
||||||
|
|
||||||
## Goal
|
## Goal
|
||||||
|
สร้าง Footer component ใหม่ด้วย liquid glass style และลบเส้นสีเหลืองออกจาก How we work section
|
||||||
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.
|
|
||||||
|
## Approach
|
||||||
## Core Positioning
|
### 1. ลบเส้นสีเหลืองจาก Process Section (`src/styles/global.css`)
|
||||||
|
- ลบ `.process-grid::before` (เส้นแนวนอนสีเหลือง) → `display: none`
|
||||||
Priority of trust:
|
- ลบ `.process-grid article::after` (วงกลม ">" สีเหลืองระหว่าง step) → `display: none`
|
||||||
|
- `.process-grid .step-number`: เปลี่ยน `background: var(--yellow)` → `background: rgb(255 255 255 / .5)` + ลบ yellow box-shadow
|
||||||
1. MoreminiMore understands SME businesses and their real problems.
|
- `.service-proof-grid .process-grid .step-number`: override สีเหลืองเหมือนกัน (scope เพิ่ม)
|
||||||
2. MoreminiMore can help clients choose work that is more efficient, worthwhile, and suitable for their business.
|
- **หมายเหตุ:** step numbers (01, 02, 03, 04) ยังคงแสดง sequential flow อยู่แล้ว ไม่ต้องเพิ่ม connector แทน
|
||||||
3. MoreminiMore writes modern code in the UX sense: smooth, beautiful, easy to use, and subtly impressive.
|
|
||||||
|
### 2. สร้าง Footer Component (`src/components/Footer.astro`)
|
||||||
Target customer priority:
|
- ใช้ `<footer>` semantic element
|
||||||
|
- ใช้ liquid glass style (ต้องมี 3 child divs):
|
||||||
1. Businesses that already have a website, ads, or tools, but feel the result is not worth the money or effort.
|
```html
|
||||||
2. Businesses that do not yet have a good website or system and want to start correctly.
|
<footer class="site-footer liquid-glass liquidGlass-wrapper">
|
||||||
3. Businesses growing into AI/automation/workflow needs.
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||||
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||||
Brand role:
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||||
|
<!-- content -->
|
||||||
1. Growth partner for SMEs.
|
</footer>
|
||||||
2. Business diagnosis partner.
|
```
|
||||||
3. Team that can implement real working solutions.
|
- `position: relative; z-index: auto` (ไม่ทับ lead-panel z-index: 110)
|
||||||
|
|
||||||
Tone:
|
### 3. เนื้อหา Footer
|
||||||
|
**ซ้าย:**
|
||||||
- Friendly-first.
|
- โลโก้: `/images/logos/logo-long-black.png` (width="205" height="36")
|
||||||
- Thai-first copy.
|
- คำอธิบาย: "ที่ปรึกษาเว็บไซต์ การตลาด และ AI สำหรับ SME"
|
||||||
- English only for service names and necessary terms.
|
|
||||||
- No consultant-speak, no overly technical language, no fake metrics.
|
**กลาง:**
|
||||||
|
- ลิงก์: หน้าแรก / บริการ / ผลงาน / บล็อก / ติดต่อ / นโยบายความเป็นส่วนตัว / เงื่อนไขการใช้งาน
|
||||||
## Homepage Strategy
|
|
||||||
|
**ขวา:**
|
||||||
Hero strategy:
|
- LINE: @moreminimore (link: https://line.me/ti/p/@moreminimore)
|
||||||
|
- Email: contact@moreminimore.com
|
||||||
- Belief-led headline.
|
|
||||||
- Pain-led subheadline.
|
**ล่าง:**
|
||||||
- Promise-led CTA/context.
|
- Copyright: © {new Date().getFullYear()} MoreminiMore
|
||||||
|
|
||||||
Current hero copy direction:
|
### 4. Responsive
|
||||||
|
- Desktop (>768px): 3 columns (grid-template-columns: 1fr 1fr 1fr)
|
||||||
> ธุรกิจไม่ควรเสียเงินกับสิ่งที่ยังไม่รู้ว่าคุ้มไหม
|
- Mobile (≤768px): vertical stack (flex-direction: column) — เรียง: โลโก้ → ลิงก์ → ติดต่อ → copyright
|
||||||
>
|
|
||||||
> เราช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำ อย่างมีประสิทธิภาพ และเหมาะสมกับลูกค้า
|
### 5. Integration Strategy
|
||||||
|
- **PageShell pages** (about, services, blog, blog/[slug], contact, faq, portfolio, services/[slug]):
|
||||||
The final copy can be polished, especially the phrase "เหมาะสมกับลูกค้า", but the idea should stay intact.
|
เพิ่ม `<Footer />` import + render ใน `src/components/PageShell.astro` ก่อน `</main>` หรือก่อน `</body>`
|
||||||
|
- **index.astro** (standalone, ไม่ใช้ PageShell):
|
||||||
Primary conversion priority:
|
เพิ่ม `<Footer />` import + render ก่อน `</body>` โดยตรง
|
||||||
|
|
||||||
1. ส่งโจทย์ธุรกิจให้เราดูก่อน
|
### 6. สร้าง Placeholder Pages
|
||||||
2. ดูเคส/ผลงานก่อน แล้วค่อยติดต่อ
|
- สร้าง `src/pages/privacy.astro` (placeholder — "นโยบายความเป็นส่วนตัว กำลังอัพเดท")
|
||||||
3. ปรึกษาฟรี
|
- สร้าง `src/pages/terms.astro` (placeholder — "เงื่อนไขการใช้งาน กำลังอัพเดท")
|
||||||
|
- ใช้ PageShell layout เหมือนหน้าอื่น
|
||||||
Do not use "30 นาที" in CTA copy. Use "ปรึกษาฟรี" only.
|
|
||||||
|
## Key decisions & tradeoffs
|
||||||
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.
|
- ใช้ liquid glass style เดียวกับ navbar เพื่อความ cohesive
|
||||||
|
- ลบเส้นเหลืองทั้งหมด — step numbers ยังบ่งบอกลำดับอยู่
|
||||||
## Homepage Sections
|
- ใช้ dynamic year (`new Date().getFullYear()`) ใน copyright (Astro SSG → build-time inlined)
|
||||||
|
- Footer ใน PageShell = แก้จุดเดียว ครอบคลุม 8 หน้า
|
||||||
Recommended homepage order:
|
- z-index: auto (ไม่ทับ lead-panel)
|
||||||
|
|
||||||
1. Hero
|
## Risks / open questions
|
||||||
- Belief-led headline.
|
- Privacy/Terms pages เป็น placeholder — ต้องเพิ่ม content ทีหลัง
|
||||||
- Friendly explanation.
|
- Logo อาจต้องเปลี่ยนเป็นสีขาวเมื่ออยู่บนพื้นเข้ม (invert)
|
||||||
- CTA to open problem form.
|
|
||||||
- Light abstract business-map background with subtle liquid glass.
|
## Out of scope
|
||||||
|
- ไม่แก้ไขหน้า Privacy/Terms content จริง
|
||||||
2. Problem framing
|
- ไม่เพิ่ม social media icons (Facebook/X/LinkedIn)
|
||||||
- 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.
|
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
site: 'https://moreminimore.com',
|
||||||
output: 'static',
|
output: 'static',
|
||||||
image: { layout: 'constrained', responsiveStyles: true },
|
image: { layout: 'constrained', responsiveStyles: true },
|
||||||
devToolbar: { enabled: false },
|
devToolbar: { enabled: false },
|
||||||
|
|||||||
182
public/demos/a-orbital.html
Normal file
182
public/demos/a-orbital.html
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="th">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>A: Orbital — ระบบดาวเคราะห์</title>
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body {
|
||||||
|
font-family: 'Kanit', system-ui, sans-serif;
|
||||||
|
background: #0a0f1a;
|
||||||
|
color: #fff;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
min-height: 100vh; overflow: hidden;
|
||||||
|
}
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;800;900&display=swap');
|
||||||
|
|
||||||
|
.demo { position: relative; width: 650px; height: 580px; }
|
||||||
|
|
||||||
|
/* Canvas for orbital rings */
|
||||||
|
canvas#orbitalCanvas {
|
||||||
|
position: absolute; inset: 0; pointer-events: none; z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene {
|
||||||
|
position: relative; width: 100%; height: 100%;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transition: transform 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node {
|
||||||
|
position: absolute; border-radius: 50%;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
align-items: center; justify-content: center;
|
||||||
|
text-align: center; backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Center Sun */
|
||||||
|
.sun {
|
||||||
|
left: 50%; top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 170px; height: 170px;
|
||||||
|
background: radial-gradient(circle at 40% 35%, #fff7cc, #fed400 40%, #d4a000 100%);
|
||||||
|
box-shadow: 0 0 60px rgba(254,212,0,0.6), 0 0 120px rgba(254,212,0,0.3), 0 0 200px rgba(254,180,0,0.15);
|
||||||
|
z-index: 10; animation: sunPulse 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes sunPulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 60px rgba(254,212,0,0.6), 0 0 120px rgba(254,212,0,0.3), 0 0 200px rgba(254,180,0,0.15); }
|
||||||
|
50% { box-shadow: 0 0 80px rgba(254,212,0,0.8), 0 0 150px rgba(254,212,0,0.4), 0 0 230px rgba(254,180,0,0.2); }
|
||||||
|
}
|
||||||
|
.sun .label { font-size: 2.8rem; font-weight: 900; color: #3a2e00; }
|
||||||
|
.sun .sub { font-size: 0.75rem; color: #6b5500; margin-top: 4px; font-weight: 600; }
|
||||||
|
|
||||||
|
/* Orbiting planets */
|
||||||
|
.planet {
|
||||||
|
width: 110px; height: 110px;
|
||||||
|
background: rgba(255,255,255,0.06);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1.5px solid rgba(255,255,255,0.2);
|
||||||
|
box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
|
||||||
|
left: 50%; top: 50%;
|
||||||
|
animation: orbit var(--orbit-dur) linear infinite;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
.planet:nth-child(2) { --orbit-dur: 12s; --radius: 230px; --angle: 0deg; --z: -40px; }
|
||||||
|
.planet:nth-child(3) { --orbit-dur: 15s; --radius: 280px; --angle: 120deg; --z: -70px; }
|
||||||
|
.planet:nth-child(4) { --orbit-dur: 18s; --radius: 330px; --angle: 240deg; --z: -100px; }
|
||||||
|
|
||||||
|
@keyframes orbit {
|
||||||
|
0% { transform: translate(-50%, -50%) rotate(0deg) translateX(var(--radius)) rotate(0deg); }
|
||||||
|
100% { transform: translate(-50%, -50%) rotate(360deg) translateX(var(--radius)) rotate(-360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.planet .tag { font-size: 1rem; font-weight: 800; color: #fff; text-transform: uppercase; }
|
||||||
|
.planet .desc { font-size: 0.7rem; color: rgba(255,255,255,0.6); margin-top: 4px; }
|
||||||
|
|
||||||
|
/* Connecting lines (drawn on canvas) */
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
|
||||||
|
font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em;
|
||||||
|
color: rgba(255,255,255,0.4); z-index: 100;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<span class="title">A. Orbital — ระบบดาวเคราะห์โคจร</span>
|
||||||
|
<div class="demo">
|
||||||
|
<canvas id="orbitalCanvas"></canvas>
|
||||||
|
<div class="scene" id="scene">
|
||||||
|
<div class="node sun" data-node="center">
|
||||||
|
<span class="label">กำไร</span>
|
||||||
|
<span class="sub">เป้าหมายของทุกธุรกิจ</span>
|
||||||
|
</div>
|
||||||
|
<div class="node planet" data-node="mkt">
|
||||||
|
<span class="tag">Marketing</span>
|
||||||
|
<span class="desc">เพิ่มรายได้</span>
|
||||||
|
</div>
|
||||||
|
<div class="node planet" data-node="ai">
|
||||||
|
<span class="tag">AI</span>
|
||||||
|
<span class="desc">ลดต้นทุนและเวลา</span>
|
||||||
|
</div>
|
||||||
|
<div class="node planet" data-node="biz">
|
||||||
|
<span class="tag">Business<br>Knowledge</span>
|
||||||
|
<span class="desc">ลดความเสี่ยง</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const canvas = document.getElementById('orbitalCanvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const scene = document.getElementById('scene');
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
const rect = canvas.parentElement.getBoundingClientRect();
|
||||||
|
canvas.width = rect.width;
|
||||||
|
canvas.height = rect.height;
|
||||||
|
}
|
||||||
|
resize();
|
||||||
|
window.addEventListener('resize', resize);
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
const rect = canvas.parentElement.getBoundingClientRect();
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
const sun = document.querySelector('[data-node="center"]');
|
||||||
|
const planets = document.querySelectorAll('.planet');
|
||||||
|
if (!sun) return;
|
||||||
|
|
||||||
|
const sunRect = sun.getBoundingClientRect();
|
||||||
|
const sx = sunRect.left + sunRect.width/2 - rect.left;
|
||||||
|
const sy = sunRect.top + sunRect.height/2 - rect.top;
|
||||||
|
|
||||||
|
// Draw orbital rings
|
||||||
|
const sr = 85; // sun radius
|
||||||
|
const radii = [230, 280, 330];
|
||||||
|
radii.forEach((r, i) => {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.ellipse(sx, sy, r, r * 0.45, 0, 0, Math.PI * 2);
|
||||||
|
ctx.strokeStyle = `rgba(254,212,0,${0.15 - i * 0.03})`;
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.setLineDash([8, 14]);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.setLineDash([]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Draw connection lines
|
||||||
|
planets.forEach(p => {
|
||||||
|
const pRect = p.getBoundingClientRect();
|
||||||
|
const px = pRect.left + pRect.width/2 - rect.left;
|
||||||
|
const py = pRect.top + pRect.height/2 - rect.top;
|
||||||
|
|
||||||
|
const dx = px - sx, dy = py - sy;
|
||||||
|
const dist = Math.sqrt(dx*dx + dy*dy);
|
||||||
|
const r = 85;
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(sx + (dx/dist)*r, sy + (dy/dist)*r);
|
||||||
|
ctx.lineTo(px - (dx/dist)*55, py - (dy/dist)*55);
|
||||||
|
const grad = ctx.createLinearGradient(sx, sy, px, py);
|
||||||
|
grad.addColorStop(0, 'rgba(254,212,0,0.7)');
|
||||||
|
grad.addColorStop(1, 'rgba(254,212,0,0.15)');
|
||||||
|
ctx.strokeStyle = grad;
|
||||||
|
ctx.lineWidth = 1.5;
|
||||||
|
ctx.stroke();
|
||||||
|
});
|
||||||
|
|
||||||
|
requestAnimationFrame(draw);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mouse parallax
|
||||||
|
document.addEventListener('mousemove', e => {
|
||||||
|
const x = (e.clientX / window.innerWidth - 0.5) * 8;
|
||||||
|
const y = (e.clientY / window.innerHeight - 0.5) * -8;
|
||||||
|
scene.style.transform = `rotateX(${y}deg) rotateY(${x}deg)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
draw();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
180
public/demos/b-energyflow.html
Normal file
180
public/demos/b-energyflow.html
Normal file
@@ -0,0 +1,180 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="th">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>B: Energy Flow — กระแสพลังงาน</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;800;900&display=swap');
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body {
|
||||||
|
font-family: 'Kanit', system-ui, sans-serif;
|
||||||
|
background: #080d14;
|
||||||
|
color: #fff; overflow: hidden;
|
||||||
|
display: flex; align-items: center; justify-content: center; min-height: 100vh;
|
||||||
|
}
|
||||||
|
.demo { position: relative; width: 650px; height: 580px; }
|
||||||
|
canvas#flowCanvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
|
||||||
|
.scene {
|
||||||
|
position: relative; width: 100%; height: 100%;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transition: transform 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node {
|
||||||
|
position: absolute;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
align-items: center; justify-content: center; text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Core */
|
||||||
|
.core {
|
||||||
|
left: 50%; top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 160px; height: 160px; border-radius: 50%;
|
||||||
|
background: radial-gradient(circle at 35% 30%, #2a1a00, #100800);
|
||||||
|
border: 2px solid rgba(254,212,0,0.8);
|
||||||
|
box-shadow: 0 0 40px rgba(254,212,0,0.3), 0 0 80px rgba(254,180,0,0.1), inset 0 0 40px rgba(254,212,0,0.08);
|
||||||
|
z-index: 10;
|
||||||
|
animation: coreBeat 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes coreBeat {
|
||||||
|
0%, 100% { box-shadow: 0 0 40px rgba(254,212,0,0.3), 0 0 80px rgba(254,180,0,0.1), inset 0 0 40px rgba(254,212,0,0.08); }
|
||||||
|
50% { box-shadow: 0 0 60px rgba(254,212,0,0.5), 0 0 100px rgba(254,180,0,0.2), inset 0 0 50px rgba(254,212,0,0.12); }
|
||||||
|
}
|
||||||
|
.core .label { font-size: 2.6rem; font-weight: 900; color: #fed400; }
|
||||||
|
.core .sub { font-size: 0.7rem; color: rgba(254,212,0,0.5); margin-top: 4px; font-weight: 600; }
|
||||||
|
|
||||||
|
/* Satellites */
|
||||||
|
.satellite {
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255,255,255,0.04);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(254,212,0,0.25);
|
||||||
|
width: 120px; height: 120px;
|
||||||
|
z-index: 5;
|
||||||
|
left: 50%; top: 50%;
|
||||||
|
}
|
||||||
|
.satellite:nth-child(2) { transform: translate(-50%, -50%) translateY(-230px); animation: float1 4s ease-in-out infinite; }
|
||||||
|
.satellite:nth-child(3) { transform: translate(-50%, -50%) translateX(220px) translateY(10px); animation: float2 4.5s ease-in-out infinite; }
|
||||||
|
.satellite:nth-child(4) { transform: translate(-50%, -50%) translateX(-160px) translateY(190px); animation: float3 5s ease-in-out infinite; }
|
||||||
|
@keyframes float1 { 0%,100%{ transform: translate(-50%,-50%) translateY(-230px); } 50%{ transform: translate(-50%,-50%) translateY(-245px); } }
|
||||||
|
@keyframes float2 { 0%,100%{ transform: translate(-50%,-50%) translateX(220px) translateY(10px); } 50%{ transform: translate(-50%,-50%) translateX(235px) translateY(0px); } }
|
||||||
|
@keyframes float3 { 0%,100%{ transform: translate(-50%,-50%) translateX(-160px) translateY(190px); } 50%{ transform: translate(-50%,-50%) translateX(-175px) translateY(205px); } }
|
||||||
|
|
||||||
|
.satellite .tag { font-size: 0.9rem; font-weight: 800; color: #fff; }
|
||||||
|
.satellite .desc { font-size: 0.65rem; color: rgba(255,255,255,0.5); margin-top: 3px; }
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
|
||||||
|
font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em;
|
||||||
|
color: rgba(255,255,255,0.4); z-index: 100;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<span class="title">B. Energy Flow — กระแสพลังงาน พร้อม particles</span>
|
||||||
|
<div class="demo">
|
||||||
|
<canvas id="flowCanvas"></canvas>
|
||||||
|
<div class="scene" id="scene">
|
||||||
|
<div class="node core" data-node="center">
|
||||||
|
<span class="label">กำไร</span>
|
||||||
|
<span class="sub">เป้าหมายของทุกธุรกิจ</span>
|
||||||
|
</div>
|
||||||
|
<div class="node satellite" data-node="mkt">
|
||||||
|
<span class="tag">Marketing</span>
|
||||||
|
<span class="desc">เพิ่มรายได้</span>
|
||||||
|
</div>
|
||||||
|
<div class="node satellite" data-node="ai">
|
||||||
|
<span class="tag">AI</span>
|
||||||
|
<span class="desc">ลดต้นทุนและเวลา</span>
|
||||||
|
</div>
|
||||||
|
<div class="node satellite" data-node="biz">
|
||||||
|
<span class="tag">Business<br>Knowledge</span>
|
||||||
|
<span class="desc">ลดความเสี่ยง</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const canvas = document.getElementById('flowCanvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const scene = document.getElementById('scene');
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
const rect = canvas.parentElement.getBoundingClientRect();
|
||||||
|
canvas.width = rect.width;
|
||||||
|
canvas.height = rect.height;
|
||||||
|
}
|
||||||
|
resize();
|
||||||
|
window.addEventListener('resize', resize);
|
||||||
|
|
||||||
|
// Particle system per connection
|
||||||
|
const connections = [];
|
||||||
|
let t = 0;
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
t++;
|
||||||
|
const rect = canvas.parentElement.getBoundingClientRect();
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
const sun = document.querySelector('[data-node="center"]');
|
||||||
|
const sats = document.querySelectorAll('.satellite');
|
||||||
|
if (!sun) { requestAnimationFrame(draw); return; }
|
||||||
|
|
||||||
|
const sr = sun.getBoundingClientRect();
|
||||||
|
const sx = sr.left + sr.width/2 - rect.left;
|
||||||
|
const sy = sr.top + sr.height/2 - rect.top;
|
||||||
|
|
||||||
|
sats.forEach((sat, i) => {
|
||||||
|
const pr = sat.getBoundingClientRect();
|
||||||
|
const px = pr.left + pr.width/2 - rect.left;
|
||||||
|
const py = pr.top + pr.height/2 - rect.top;
|
||||||
|
|
||||||
|
const dx = px - sx, dy = py - sy;
|
||||||
|
const dist = Math.sqrt(dx*dx + dy*dy);
|
||||||
|
|
||||||
|
// Draw stream line
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(sx + (dx/dist)*80, sy + (dy/dist)*80);
|
||||||
|
ctx.lineTo(px - (dx/dist)*60, py - (dy/dist)*60);
|
||||||
|
const grad = ctx.createLinearGradient(sx, sy, px, py);
|
||||||
|
grad.addColorStop(0, 'rgba(254,212,0,0.6)');
|
||||||
|
grad.addColorStop(0.5, 'rgba(254,212,0,0.3)');
|
||||||
|
grad.addColorStop(1, 'rgba(254,212,0,0.1)');
|
||||||
|
ctx.strokeStyle = grad;
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// Animated particles along the line
|
||||||
|
const count = 12;
|
||||||
|
for (let j = 0; j < count; j++) {
|
||||||
|
const phase = (t * 0.03 + j / count + i * 0.33) % 1;
|
||||||
|
const pp = phase < 0.5 ? phase * 2 : 2 - phase * 2;
|
||||||
|
const x = sx + (dx/dist)*80 + dx * (1 - 80/dist - 60/dist) * phase;
|
||||||
|
const y = sy + (dy/dist)*80 + dy * (1 - 80/dist - 60/dist) * phase;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, 2.5, 0, Math.PI*2);
|
||||||
|
ctx.fillStyle = `rgba(254,230,100,${0.8 * pp})`;
|
||||||
|
ctx.fill();
|
||||||
|
// Glow
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, 5, 0, Math.PI*2);
|
||||||
|
ctx.fillStyle = `rgba(254,212,0,${0.25 * pp})`;
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
requestAnimationFrame(draw);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', e => {
|
||||||
|
const x = (e.clientX / window.innerWidth - 0.5) * 6;
|
||||||
|
const y = (e.clientY / window.innerHeight - 0.5) * -6;
|
||||||
|
scene.style.transform = `rotateX(${y}deg) rotateY(${x}deg)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
draw();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
179
public/demos/c-holographic.html
Normal file
179
public/demos/c-holographic.html
Normal file
@@ -0,0 +1,179 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="th">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>C: Holographic 3D — Hologram Sci-Fi</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;800;900&display=swap');
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body {
|
||||||
|
font-family: 'Kanit', system-ui, sans-serif;
|
||||||
|
background: #020810;
|
||||||
|
color: #fff; overflow: hidden;
|
||||||
|
display: flex; align-items: center; justify-content: center; min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo { position: relative; width: 700px; height: 600px; }
|
||||||
|
canvas#holoCanvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
|
||||||
|
.scene {
|
||||||
|
position: relative; width: 100%; height: 100%;
|
||||||
|
transform-style: preserve-3d; perspective: 1200px;
|
||||||
|
transition: transform 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node {
|
||||||
|
position: absolute;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
align-items: center; justify-content: center; text-align: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Center hologram */
|
||||||
|
.holo-core {
|
||||||
|
left: 50%; top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 170px; height: 170px;
|
||||||
|
background: radial-gradient(circle at 40% 35%, rgba(0,255,255,0.15), rgba(0,200,255,0.05));
|
||||||
|
border: 2px solid rgba(0,255,255,0.5);
|
||||||
|
box-shadow: 0 0 50px rgba(0,255,255,0.2), 0 0 100px rgba(0,200,255,0.08), inset 0 0 30px rgba(0,255,255,0.05);
|
||||||
|
z-index: 10;
|
||||||
|
animation: holoPulse 2.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes holoPulse {
|
||||||
|
0%, 100% { border-color: rgba(0,255,255,0.5); box-shadow: 0 0 50px rgba(0,255,255,0.2), 0 0 100px rgba(0,200,255,0.08); }
|
||||||
|
50% { border-color: rgba(0,255,255,0.8); box-shadow: 0 0 70px rgba(0,255,255,0.35), 0 0 120px rgba(0,200,255,0.15); }
|
||||||
|
}
|
||||||
|
.holo-core .label { font-size: 2.8rem; font-weight: 900; color: #0ff; text-shadow: 0 0 20px rgba(0,255,255,0.5); }
|
||||||
|
.holo-core .sub { font-size: 0.7rem; color: rgba(0,255,255,0.5); margin-top: 4px; font-weight: 600; }
|
||||||
|
|
||||||
|
/* Scanline effect */
|
||||||
|
.holo-core::after {
|
||||||
|
content: ''; position: absolute; inset: 0; border-radius: 50%;
|
||||||
|
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,255,0.03) 2px, rgba(0,255,255,0.03) 4px);
|
||||||
|
pointer-events: none; z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Satellites - holographic */
|
||||||
|
.holo-sat {
|
||||||
|
width: 115px; height: 115px;
|
||||||
|
background: rgba(0,255,255,0.04);
|
||||||
|
border: 1.5px solid rgba(0,255,255,0.35);
|
||||||
|
box-shadow: 0 0 25px rgba(0,255,255,0.1), inset 0 0 20px rgba(0,255,255,0.04);
|
||||||
|
z-index: 5;
|
||||||
|
left: 50%; top: 50%;
|
||||||
|
}
|
||||||
|
.holo-sat::after {
|
||||||
|
content: ''; position: absolute; inset: 0; border-radius: 50%;
|
||||||
|
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,255,0.02) 2px, rgba(0,255,255,0.02) 4px);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.holo-sat:nth-child(2) { transform: translate(-50%,-50%) translate3d(-220px,-140px,-80px); animation: hfloat1 5s ease-in-out infinite; }
|
||||||
|
.holo-sat:nth-child(3) { transform: translate(-50%,-50%) translate3d(180px,-20px,-30px); animation: hfloat2 6s ease-in-out infinite; }
|
||||||
|
.holo-sat:nth-child(4) { transform: translate(-50%,-50%) translate3d(-100px,210px,-100px); animation: hfloat3 5.5s ease-in-out infinite; }
|
||||||
|
@keyframes hfloat1 { 0%,100%{transform:translate(-50%,-50%) translate3d(-220px,-140px,-80px)} 50%{transform:translate(-50%,-50%) translate3d(-230px,-155px,-100px)} }
|
||||||
|
@keyframes hfloat2 { 0%,100%{transform:translate(-50%,-50%) translate3d(180px,-20px,-30px)} 50%{transform:translate(-50%,-50%) translate3d(195px,-35px,-55px)} }
|
||||||
|
@keyframes hfloat3 { 0%,100%{transform:translate(-50%,-50%) translate3d(-100px,210px,-100px)} 50%{transform:translate(-50%,-50%) translate3d(-115px,225px,-130px)} }
|
||||||
|
|
||||||
|
.holo-sat .tag { font-size: 0.9rem; font-weight: 800; color: #0ff; text-shadow: 0 0 10px rgba(0,255,255,0.4); }
|
||||||
|
.holo-sat .desc { font-size: 0.65rem; color: rgba(0,255,255,0.5); margin-top: 3px; }
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
|
||||||
|
font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em;
|
||||||
|
color: rgba(0,255,255,0.4); z-index: 100;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<span class="title">C. Holographic 3D — Hologram Sci-Fi</span>
|
||||||
|
<div class="demo">
|
||||||
|
<canvas id="holoCanvas"></canvas>
|
||||||
|
<div class="scene" id="scene">
|
||||||
|
<div class="node holo-core" data-node="center">
|
||||||
|
<span class="label">กำไร</span>
|
||||||
|
<span class="sub">เป้าหมายของทุกธุรกิจ</span>
|
||||||
|
</div>
|
||||||
|
<div class="node holo-sat" data-node="mkt">
|
||||||
|
<span class="tag">Marketing</span>
|
||||||
|
<span class="desc">เพิ่มรายได้</span>
|
||||||
|
</div>
|
||||||
|
<div class="node holo-sat" data-node="ai">
|
||||||
|
<span class="tag">AI</span>
|
||||||
|
<span class="desc">ลดต้นทุนและเวลา</span>
|
||||||
|
</div>
|
||||||
|
<div class="node holo-sat" data-node="biz">
|
||||||
|
<span class="tag">Business<br>Knowledge</span>
|
||||||
|
<span class="desc">ลดความเสี่ยง</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const canvas = document.getElementById('holoCanvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const scene = document.getElementById('scene');
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
const rect = canvas.parentElement.getBoundingClientRect();
|
||||||
|
canvas.width = rect.width;
|
||||||
|
canvas.height = rect.height;
|
||||||
|
}
|
||||||
|
resize(); window.addEventListener('resize', resize);
|
||||||
|
|
||||||
|
let t = 0;
|
||||||
|
function draw() {
|
||||||
|
t++;
|
||||||
|
const rect = canvas.parentElement.getBoundingClientRect();
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
const center = document.querySelector('[data-node="center"]');
|
||||||
|
const sats = document.querySelectorAll('.holo-sat');
|
||||||
|
if (!center) { requestAnimationFrame(draw); return; }
|
||||||
|
|
||||||
|
const cr = center.getBoundingClientRect();
|
||||||
|
const cx = cr.left + cr.width/2 - rect.left;
|
||||||
|
const cy = cr.top + cr.height/2 - rect.top;
|
||||||
|
|
||||||
|
sats.forEach((sat, i) => {
|
||||||
|
const pr = sat.getBoundingClientRect();
|
||||||
|
const px = pr.left + pr.width/2 - rect.left;
|
||||||
|
const py = pr.top + pr.height/2 - rect.top;
|
||||||
|
const dx = px - cx, dy = py - cy;
|
||||||
|
const dist = Math.sqrt(dx*dx + dy*dy);
|
||||||
|
|
||||||
|
// Hologram beam line (dotted)
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.setLineDash([4, 8]);
|
||||||
|
ctx.lineDashOffset = -t * 2;
|
||||||
|
ctx.moveTo(cx + (dx/dist)*85, cy + (dy/dist)*85);
|
||||||
|
ctx.lineTo(px - (dx/dist)*58, py - (dy/dist)*58);
|
||||||
|
ctx.strokeStyle = 'rgba(0,255,255,0.3)';
|
||||||
|
ctx.lineWidth = 1.5;
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.setLineDash([]);
|
||||||
|
|
||||||
|
// Glow nodes at intervals
|
||||||
|
for (let j = 0; j < 5; j++) {
|
||||||
|
const phase = ((t * 0.02 + j/5 + i*0.33) % 1);
|
||||||
|
const x = cx + (dx/dist)*85 + dx * (1 - 85/dist - 58/dist) * phase;
|
||||||
|
const y = cy + (dy/dist)*85 + dy * (1 - 85/dist - 58/dist) * phase;
|
||||||
|
const alpha = Math.sin(phase * Math.PI);
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, 2, 0, Math.PI*2);
|
||||||
|
ctx.fillStyle = `rgba(0,255,255,${0.6 * alpha})`;
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
requestAnimationFrame(draw);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', e => {
|
||||||
|
scene.style.transform = `rotateX(${(e.clientY/window.innerHeight-0.5)*-8}deg) rotateY(${(e.clientX/window.innerWidth-0.5)*8}deg)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
draw();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
208
public/demos/d-constellation.html
Normal file
208
public/demos/d-constellation.html
Normal file
@@ -0,0 +1,208 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="th">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>D: Constellation — แผนที่ดาว</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;800;900&display=swap');
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body {
|
||||||
|
font-family: 'Kanit', system-ui, sans-serif;
|
||||||
|
background: radial-gradient(ellipse at center, #0d1520 0%, #040810 100%);
|
||||||
|
color: #fff; overflow: hidden;
|
||||||
|
display: flex; align-items: center; justify-content: center; min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Starfield background */
|
||||||
|
.stars {
|
||||||
|
position: fixed; inset: 0; z-index: 0; pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo { position: relative; width: 700px; height: 600px; z-index: 1; }
|
||||||
|
canvas#constCanvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
|
||||||
|
.scene {
|
||||||
|
position: relative; width: 100%; height: 100%;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transition: transform 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node {
|
||||||
|
position: absolute;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
align-items: center; justify-content: center; text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Polaris - main star */
|
||||||
|
.star-main {
|
||||||
|
left: 50%; top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 150px; height: 150px; border-radius: 50%;
|
||||||
|
background: radial-gradient(circle at 38% 35%, rgba(255,255,255,0.25), rgba(254,212,0,0.15) 50%, transparent 100%);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.star-main .glow {
|
||||||
|
position: absolute; inset: -30px; border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, rgba(254,212,0,0.08), transparent 70%);
|
||||||
|
animation: starGlow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes starGlow {
|
||||||
|
0%, 100% { transform: scale(1); opacity: 0.5; }
|
||||||
|
50% { transform: scale(1.15); opacity: 0.8; }
|
||||||
|
}
|
||||||
|
.star-main .label { font-size: 2.6rem; font-weight: 900; color: #fed400; text-shadow: 0 0 30px rgba(254,212,0,0.6); position: relative; z-index: 1; }
|
||||||
|
.star-main .sub { font-size: 0.7rem; color: rgba(254,212,0,0.5); margin-top: 4px; font-weight: 600; position: relative; z-index: 1; }
|
||||||
|
|
||||||
|
/* Constellation stars */
|
||||||
|
.c-star {
|
||||||
|
width: 70px; height: 70px; border-radius: 50%;
|
||||||
|
background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.15), transparent);
|
||||||
|
z-index: 5;
|
||||||
|
left: 50%; top: 50%;
|
||||||
|
}
|
||||||
|
/* Star twinkle */
|
||||||
|
.c-star::before {
|
||||||
|
content: ''; position: absolute; inset: -15px; border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, rgba(254,240,200,0.1), transparent 70%);
|
||||||
|
animation: twinkle 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes twinkle {
|
||||||
|
0%, 100% { opacity: 0.3; transform: scale(0.8); }
|
||||||
|
50% { opacity: 0.7; transform: scale(1.15); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-star:nth-child(2)::before { animation-delay: 0s; }
|
||||||
|
.c-star:nth-child(3)::before { animation-delay: 1.2s; }
|
||||||
|
.c-star:nth-child(4)::before { animation-delay: 2.5s; }
|
||||||
|
|
||||||
|
/* Star points (4-point cross) */
|
||||||
|
.c-star::after {
|
||||||
|
content: ''; position: absolute; inset: -8px; border-radius: 50%;
|
||||||
|
box-shadow:
|
||||||
|
0 -25px 0 -8px rgba(254,240,200,0.3),
|
||||||
|
0 25px 0 -8px rgba(254,240,200,0.3),
|
||||||
|
-25px 0 0 -8px rgba(254,240,200,0.3),
|
||||||
|
25px 0 0 -8px rgba(254,240,200,0.3);
|
||||||
|
animation: starRotate 10s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes starRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
||||||
|
|
||||||
|
.c-star:nth-child(2) { transform: translate(-50%,-50%) translate3d(-220px,-160px,-60px); }
|
||||||
|
.c-star:nth-child(3) { transform: translate(-50%,-50%) translate3d(190px,-30px,-30px); }
|
||||||
|
.c-star:nth-child(4) { transform: translate(-50%,-50%) translate3d(-120px,200px,-70px); }
|
||||||
|
|
||||||
|
.c-star .tag { font-size: 0.8rem; font-weight: 800; color: #fff; position: relative; z-index: 1; text-shadow: 0 0 15px rgba(255,255,255,0.4); }
|
||||||
|
.c-star .desc { font-size: 0.6rem; color: rgba(255,255,255,0.5); margin-top: 2px; position: relative; z-index: 1; }
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
|
||||||
|
font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em;
|
||||||
|
color: rgba(255,255,255,0.4); z-index: 100;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<span class="title">D. Constellation — แผนที่ดาว</span>
|
||||||
|
|
||||||
|
<!-- Starfield -->
|
||||||
|
<svg class="stars" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<radialGradient id="s"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#fff" stop-opacity="0"/></radialGradient>
|
||||||
|
</defs>
|
||||||
|
<circle cx="8%" cy="12%" r="1.5" fill="#fff" opacity="0.6"/><circle cx="15%" cy="8%" r="1" fill="#fff" opacity="0.3"/>
|
||||||
|
<circle cx="22%" cy="18%" r="0.8" fill="#fff" opacity="0.5"/><circle cx="78%" cy="10%" r="1.2" fill="#fff" opacity="0.4"/>
|
||||||
|
<circle cx="85%" cy="22%" r="1" fill="#fff" opacity="0.3"/><circle cx="92%" cy="8%" r="0.6" fill="#fff" opacity="0.7"/>
|
||||||
|
<circle cx="6%" cy="85%" r="1" fill="#fff" opacity="0.4"/><circle cx="14%" cy="92%" r="0.8" fill="#fff" opacity="0.5"/>
|
||||||
|
<circle cx="88%" cy="88%" r="1.3" fill="#fff" opacity="0.35"/><circle cx="95%" cy="78%" r="0.7" fill="#fff" opacity="0.6"/>
|
||||||
|
<circle cx="42%" cy="5%" r="0.9" fill="#fff" opacity="0.45"/><circle cx="55%" cy="3%" r="0.5" fill="#fff" opacity="0.55"/>
|
||||||
|
<circle cx="65%" cy="92%" r="1.1" fill="#fff" opacity="0.3"/><circle cx="35%" cy="95%" r="0.7" fill="#fff" opacity="0.5"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="demo">
|
||||||
|
<canvas id="constCanvas"></canvas>
|
||||||
|
<div class="scene" id="scene">
|
||||||
|
<div class="node star-main" data-node="center">
|
||||||
|
<div class="glow"></div>
|
||||||
|
<span class="label">กำไร</span>
|
||||||
|
<span class="sub">เป้าหมายของทุกธุรกิจ</span>
|
||||||
|
</div>
|
||||||
|
<div class="node c-star" data-node="mkt">
|
||||||
|
<span class="tag">Marketing</span>
|
||||||
|
<span class="desc">เพิ่มรายได้</span>
|
||||||
|
</div>
|
||||||
|
<div class="node c-star" data-node="ai">
|
||||||
|
<span class="tag">AI</span>
|
||||||
|
<span class="desc">ลดต้นทุน</span>
|
||||||
|
</div>
|
||||||
|
<div class="node c-star" data-node="biz">
|
||||||
|
<span class="tag">Business Knowledge</span>
|
||||||
|
<span class="desc">ลดความเสี่ยง</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const canvas = document.getElementById('constCanvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const scene = document.getElementById('scene');
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
const rect = canvas.parentElement.getBoundingClientRect();
|
||||||
|
canvas.width = rect.width;
|
||||||
|
canvas.height = rect.height;
|
||||||
|
}
|
||||||
|
resize(); window.addEventListener('resize', resize);
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
const rect = canvas.parentElement.getBoundingClientRect();
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
const center = document.querySelector('[data-node="center"]');
|
||||||
|
const stars = document.querySelectorAll('.c-star');
|
||||||
|
if (!center) { requestAnimationFrame(draw); return; }
|
||||||
|
|
||||||
|
const cr = center.getBoundingClientRect();
|
||||||
|
const cx = cr.left + cr.width/2 - rect.left;
|
||||||
|
const cy = cr.top + cr.height/2 - rect.top;
|
||||||
|
|
||||||
|
// Draw constellation lines (thin, elegant)
|
||||||
|
stars.forEach((star, i) => {
|
||||||
|
const pr = star.getBoundingClientRect();
|
||||||
|
const px = pr.left + pr.width/2 - rect.left;
|
||||||
|
const py = pr.top + pr.height/2 - rect.top;
|
||||||
|
const dx = px - cx, dy = py - cy;
|
||||||
|
const dist = Math.sqrt(dx*dx + dy*dy);
|
||||||
|
|
||||||
|
// Constellation line
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(cx + (dx/dist)*75, cy + (dy/dist)*75);
|
||||||
|
ctx.lineTo(px - (dx/dist)*35, py - (dy/dist)*35);
|
||||||
|
ctx.strokeStyle = 'rgba(254,240,200,0.25)';
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.setLineDash([2, 6]);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.setLineDash([]);
|
||||||
|
|
||||||
|
// Tiny connecting stars along line
|
||||||
|
for (let j = 0; j < 3; j++) {
|
||||||
|
const p = 0.25 + j * 0.25;
|
||||||
|
const sx = cx + (dx/dist)*75 + dx * (1 - 75/dist - 35/dist) * p;
|
||||||
|
const sy = cy + (dy/dist)*75 + dy * (1 - 75/dist - 35/dist) * p;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(sx, sy, 1.2, 0, Math.PI*2);
|
||||||
|
ctx.fillStyle = 'rgba(255,255,255,0.3)';
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
requestAnimationFrame(draw);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', e => {
|
||||||
|
scene.style.transform = `rotateX(${(e.clientY/window.innerHeight-0.5)*-5}deg) rotateY(${(e.clientX/window.innerWidth-0.5)*5}deg)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
draw();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
197
public/demos/e-magnetic.html
Normal file
197
public/demos/e-magnetic.html
Normal file
@@ -0,0 +1,197 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="th">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>E: Magnetic Field — สนามแม่เหล็ก</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;800;900&display=swap');
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body {
|
||||||
|
font-family: 'Kanit', system-ui, sans-serif;
|
||||||
|
background: #060a12;
|
||||||
|
color: #fff; overflow: hidden;
|
||||||
|
display: flex; align-items: center; justify-content: center; min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo { position: relative; width: 700px; height: 600px; }
|
||||||
|
canvas#magCanvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
|
||||||
|
.scene {
|
||||||
|
position: relative; width: 100%; height: 100%;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transition: transform 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node {
|
||||||
|
position: absolute;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
align-items: center; justify-content: center; text-align: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Magnet core */
|
||||||
|
.magnet {
|
||||||
|
left: 50%; top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 170px; height: 170px;
|
||||||
|
background: radial-gradient(circle at 40% 35%, #3a2000, #0d0500);
|
||||||
|
border: 3px solid #fed400;
|
||||||
|
box-shadow: 0 0 0 12px rgba(254,212,0,0.1), 0 0 60px rgba(254,212,0,0.3), 0 0 140px rgba(254,180,0,0.1);
|
||||||
|
z-index: 10;
|
||||||
|
animation: magnetPulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes magnetPulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 0 12px rgba(254,212,0,0.1), 0 0 60px rgba(254,212,0,0.3), 0 0 140px rgba(254,180,0,0.1); }
|
||||||
|
50% { box-shadow: 0 0 0 18px rgba(254,212,0,0.15), 0 0 80px rgba(254,212,0,0.4), 0 0 160px rgba(254,180,0,0.15); }
|
||||||
|
}
|
||||||
|
.magnet .label { font-size: 2.6rem; font-weight: 900; color: #fed400; }
|
||||||
|
.magnet .sub { font-size: 0.7rem; color: rgba(254,212,0,0.5); margin-top: 4px; font-weight: 600; }
|
||||||
|
|
||||||
|
/* Attracted nodes */
|
||||||
|
.attract {
|
||||||
|
width: 105px; height: 105px;
|
||||||
|
background: rgba(254,212,0,0.04);
|
||||||
|
border: 1.5px solid rgba(254,212,0,0.3);
|
||||||
|
box-shadow: 0 0 20px rgba(254,212,0,0.08);
|
||||||
|
z-index: 5;
|
||||||
|
left: 50%; top: 50%;
|
||||||
|
animation: attract 3s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
.attract:nth-child(2) {
|
||||||
|
transform: translate(-50%,-50%) translate3d(-200px,-150px,-60px);
|
||||||
|
animation-name: attract1;
|
||||||
|
}
|
||||||
|
.attract:nth-child(3) {
|
||||||
|
transform: translate(-50%,-50%) translate3d(170px,-20px,-25px);
|
||||||
|
animation-name: attract2;
|
||||||
|
}
|
||||||
|
.attract:nth-child(4) {
|
||||||
|
transform: translate(-50%,-50%) translate3d(-100px,190px,-70px);
|
||||||
|
animation-name: attract3;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes attract1 {
|
||||||
|
0% { transform: translate(-50%,-50%) translate3d(-220px,-160px,-80px); }
|
||||||
|
100% { transform: translate(-50%,-50%) translate3d(-185px,-140px,-50px); }
|
||||||
|
}
|
||||||
|
@keyframes attract2 {
|
||||||
|
0% { transform: translate(-50%,-50%) translate3d(185px,-25px,-35px); }
|
||||||
|
100% { transform: translate(-50%,-50%) translate3d(155px,-15px,-20px); }
|
||||||
|
}
|
||||||
|
@keyframes attract3 {
|
||||||
|
0% { transform: translate(-50%,-50%) translate3d(-120px,210px,-90px); }
|
||||||
|
100% { transform: translate(-50%,-50%) translate3d(-90px,180px,-60px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.attract .tag { font-size: 0.9rem; font-weight: 800; color: #fff; }
|
||||||
|
.attract .desc { font-size: 0.65rem; color: rgba(255,255,255,0.5); margin-top: 3px; }
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
|
||||||
|
font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em;
|
||||||
|
color: rgba(255,255,255,0.4); z-index: 100;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<span class="title">E. Magnetic Field — สนามแม่เหล็กดึงดูด</span>
|
||||||
|
<div class="demo">
|
||||||
|
<canvas id="magCanvas"></canvas>
|
||||||
|
<div class="scene" id="scene">
|
||||||
|
<div class="node magnet" data-node="center">
|
||||||
|
<span class="label">กำไร</span>
|
||||||
|
<span class="sub">เป้าหมายของทุกธุรกิจ</span>
|
||||||
|
</div>
|
||||||
|
<div class="node attract" data-node="mkt">
|
||||||
|
<span class="tag">Marketing</span>
|
||||||
|
<span class="desc">เพิ่มรายได้</span>
|
||||||
|
</div>
|
||||||
|
<div class="node attract" data-node="ai">
|
||||||
|
<span class="tag">AI</span>
|
||||||
|
<span class="desc">ลดต้นทุนและเวลา</span>
|
||||||
|
</div>
|
||||||
|
<div class="node attract" data-node="biz">
|
||||||
|
<span class="tag">Business<br>Knowledge</span>
|
||||||
|
<span class="desc">ลดความเสี่ยง</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const canvas = document.getElementById('magCanvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const scene = document.getElementById('scene');
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
const rect = canvas.parentElement.getBoundingClientRect();
|
||||||
|
canvas.width = rect.width;
|
||||||
|
canvas.height = rect.height;
|
||||||
|
}
|
||||||
|
resize(); window.addEventListener('resize', resize);
|
||||||
|
|
||||||
|
let t = 0;
|
||||||
|
function draw() {
|
||||||
|
t++;
|
||||||
|
const rect = canvas.parentElement.getBoundingClientRect();
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
const center = document.querySelector('[data-node="center"]');
|
||||||
|
const nodes = document.querySelectorAll('.attract');
|
||||||
|
if (!center) { requestAnimationFrame(draw); return; }
|
||||||
|
|
||||||
|
const cr = center.getBoundingClientRect();
|
||||||
|
const cx = cr.left + cr.width/2 - rect.left;
|
||||||
|
const cy = cr.top + cr.height/2 - rect.top;
|
||||||
|
|
||||||
|
// Magnetic field lines (ripple waves)
|
||||||
|
for (let r = 0; r < 4; r++) {
|
||||||
|
const radius = 95 + r * 30 + (t * 0.02) % 30;
|
||||||
|
const alpha = Math.max(0, 0.25 - r * 0.06 - ((t * 0.02) % 30) / 120);
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(cx, cy, radius, 0, Math.PI*2);
|
||||||
|
ctx.strokeStyle = `rgba(254,212,0,${alpha})`;
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Connection lines with magnetic field arcs
|
||||||
|
nodes.forEach((node, i) => {
|
||||||
|
const pr = node.getBoundingClientRect();
|
||||||
|
const px = pr.left + pr.width/2 - rect.left;
|
||||||
|
const py = pr.top + pr.height/2 - rect.top;
|
||||||
|
const dx = px - cx, dy = py - cy;
|
||||||
|
const dist = Math.sqrt(dx*dx + dy*dy);
|
||||||
|
|
||||||
|
// Main connection
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(cx + (dx/dist)*85, cy + (dy/dist)*85);
|
||||||
|
ctx.lineTo(px - (dx/dist)*53, py - (dy/dist)*53);
|
||||||
|
ctx.strokeStyle = `rgba(254,212,0,0.4)`;
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// Field curve arcs on both sides
|
||||||
|
for (let side = -1; side <= 1; side += 2) {
|
||||||
|
const offset = side * 15;
|
||||||
|
const midX = cx + dx * 0.5 + (-dy/dist) * offset;
|
||||||
|
const midY = cy + dy * 0.5 + (dx/dist) * offset;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(cx + (dx/dist)*85, cy + (dy/dist)*85);
|
||||||
|
ctx.quadraticCurveTo(midX, midY, px - (dx/dist)*53, py - (dy/dist)*53);
|
||||||
|
ctx.strokeStyle = `rgba(254,212,0,0.1)`;
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
requestAnimationFrame(draw);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', e => {
|
||||||
|
scene.style.transform = `rotateX(${(e.clientY/window.innerHeight-0.5)*-6}deg) rotateY(${(e.clientX/window.innerWidth-0.5)*6}deg)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
draw();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
75
public/demos/index.html
Normal file
75
public/demos/index.html
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="th">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Hero Design Demos</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;800;900&display=swap');
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body {
|
||||||
|
font-family: 'Kanit', system-ui, sans-serif;
|
||||||
|
background: #0d1117;
|
||||||
|
color: #fff;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 48px 24px;
|
||||||
|
}
|
||||||
|
h1 { font-size: 2rem; text-align: center; margin-bottom: 8px; }
|
||||||
|
h1 span { color: #fed400; }
|
||||||
|
.sub { text-align: center; color: rgba(255,255,255,0.5); margin-bottom: 40px; font-size: 1rem; }
|
||||||
|
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
|
||||||
|
.card {
|
||||||
|
background: rgba(255,255,255,0.04);
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 32px 24px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: flex; flex-direction: column; gap: 12px;
|
||||||
|
}
|
||||||
|
.card:hover { background: rgba(254,212,0,0.06); border-color: rgba(254,212,0,0.3); transform: translateY(-2px); }
|
||||||
|
.card .emoji { font-size: 3rem; }
|
||||||
|
.card .name { font-size: 1.3rem; font-weight: 800; }
|
||||||
|
.card .name span { color: #fed400; }
|
||||||
|
.card .desc { font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.5; }
|
||||||
|
.card .tag { display: inline-block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(254,212,0,0.6); border: 1px solid rgba(254,212,0,0.2); border-radius: 20px; padding: 4px 10px; width: fit-content; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Hero Section — <span>5 Design Demos</span></h1>
|
||||||
|
<p class="sub">เลือกดูแต่ละแนวคิดเพื่อเปรียบเทียบ</p>
|
||||||
|
<div class="grid">
|
||||||
|
<a href="a-orbital.html" class="card">
|
||||||
|
<div class="emoji">🌌</div>
|
||||||
|
<div class="name">A. <span>Orbital</span></div>
|
||||||
|
<div class="tag">ระบบดาวเคราะห์โคจร</div>
|
||||||
|
<div class="desc">กำไรเป็นดวงอาทิตย์เรืองแสง 3 ป้ายโคจรรอบด้วยวงแหวน orbital พร้อมหมุนอัตโนมัติ</div>
|
||||||
|
</a>
|
||||||
|
<a href="b-energyflow.html" class="card">
|
||||||
|
<div class="emoji">⚡</div>
|
||||||
|
<div class="name">B. <span>Energy Flow</span></div>
|
||||||
|
<div class="tag">กระแสพลังงาน</div>
|
||||||
|
<div class="desc">Particle วิ่งตามเส้นเชื่อมสีทอง เหมือนพลังงาน/ข้อมูลไหลเข้าสู่กำไร ดูมีชีวิตชีวา</div>
|
||||||
|
</a>
|
||||||
|
<a href="c-holographic.html" class="card">
|
||||||
|
<div class="emoji">🌀</div>
|
||||||
|
<div class="name">C. <span>Holographic 3D</span></div>
|
||||||
|
<div class="tag">Hologram Sci-Fi</div>
|
||||||
|
<div class="desc">โทน Cyan เรืองแสง พร้อม scanline และ beam เชื่อมต่อ ดูล้ำสมัย ดูแพง</div>
|
||||||
|
</a>
|
||||||
|
<a href="d-constellation.html" class="card">
|
||||||
|
<div class="emoji">✨</div>
|
||||||
|
<div class="name">D. <span>Constellation</span></div>
|
||||||
|
<div class="tag">แผนที่ดาว</div>
|
||||||
|
<div class="desc">โหนดเป็นดาวระยิบระยับ เส้นเชื่อมแบบกลุ่มดาว พื้นหลังมีดาวกระจาย ดูลึกลับสง่า</div>
|
||||||
|
</a>
|
||||||
|
<a href="e-magnetic.html" class="card">
|
||||||
|
<div class="emoji">🧲</div>
|
||||||
|
<div class="name">E. <span>Magnetic Field</span></div>
|
||||||
|
<div class="tag">สนามแม่เหล็ก</div>
|
||||||
|
<div class="desc">กำไรเป็นแม่เหล็กทรงพลัง มี ripple wave + field curve สื่อถึงการดึงดูดทุกอย่างสู่กำไร</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
BIN
public/images/portfolio/leudjorakhe.png
Normal file
BIN
public/images/portfolio/leudjorakhe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
6
public/robots.txt
Normal file
6
public/robots.txt
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
Disallow: /google-apps-script/
|
||||||
|
Disallow: /_archive/
|
||||||
|
|
||||||
|
Sitemap: https://moreminimore.com/sitemap.xml
|
||||||
16
public/sitemap.xml
Normal file
16
public/sitemap.xml
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||||
|
<url><loc>https://moreminimore.com/</loc><changefreq>weekly</changefreq><priority>1.0</priority></url>
|
||||||
|
<url><loc>https://moreminimore.com/about/</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
|
||||||
|
<url><loc>https://moreminimore.com/services/</loc><changefreq>weekly</changefreq><priority>0.9</priority></url>
|
||||||
|
<url><loc>https://moreminimore.com/services/website-development/</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
<url><loc>https://moreminimore.com/services/marketing-consult/</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
<url><loc>https://moreminimore.com/services/automation-workflow/</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
<url><loc>https://moreminimore.com/services/ai-consult/</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
<url><loc>https://moreminimore.com/portfolio/</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||||
|
<url><loc>https://moreminimore.com/blog/</loc><changefreq>weekly</changefreq><priority>0.8</priority></url>
|
||||||
|
<url><loc>https://moreminimore.com/contact/</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
|
||||||
|
<url><loc>https://moreminimore.com/faq/</loc><changefreq>monthly</changefreq><priority>0.6</priority></url>
|
||||||
|
<url><loc>https://moreminimore.com/privacy/</loc><changefreq>yearly</changefreq><priority>0.3</priority></url>
|
||||||
|
<url><loc>https://moreminimore.com/terms/</loc><changefreq>yearly</changefreq><priority>0.3</priority></url>
|
||||||
|
</urlset>
|
||||||
114
src/components/Footer.astro
Normal file
114
src/components/Footer.astro
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
---
|
||||||
|
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 footer-phone" href="tel:+66809955945">
|
||||||
|
<svg class="footer-phone-icon" aria-hidden="true" viewBox="0 0 24 24" focusable="false">
|
||||||
|
<path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1.3.4 2.6.6 4 .6.7 0 1.2.5 1.2 1.2v3.5c0 .7-.5 1.2-1.2 1.2C10.6 21.4 2.6 13.4 2.6 3.4c0-.7.5-1.2 1.2-1.2h3.5c.7 0 1.2.5 1.2 1.2 0 1.4.2 2.7.6 4 .1.4 0 .8-.3 1.2l-2.2 2.2Z" />
|
||||||
|
</svg>
|
||||||
|
<span>080-995-5945</span>
|
||||||
|
</a>
|
||||||
|
<a class="footer-link" href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-legal">
|
||||||
|
<a href="/privacy/">ความเป็นส่วนตัว</a>
|
||||||
|
<span aria-hidden="true">·</span>
|
||||||
|
<a href="/terms/">เงื่อนไขการใช้งาน</a>
|
||||||
|
<span aria-hidden="true">·</span>
|
||||||
|
<span>© {currentYear} MoreminiMore</span>
|
||||||
|
</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 {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
color: var(--ink);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: opacity .2s var(--ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-phone-icon {
|
||||||
|
width: .82em;
|
||||||
|
height: .82em;
|
||||||
|
fill: currentColor;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
154
src/components/LegalPageShell.astro
Normal file
154
src/components/LegalPageShell.astro
Normal file
@@ -0,0 +1,154 @@
|
|||||||
|
---
|
||||||
|
// Shared layout for legal pages (Privacy Policy, Terms of Service)
|
||||||
|
// Provides the legal-layout grid + scoped CSS
|
||||||
|
---
|
||||||
|
<div class="legal-layout">
|
||||||
|
<aside class="legal-rail" aria-label={Astro.props.railLabel}>
|
||||||
|
<p class="eyebrow">{Astro.props.railEyebrow}</p>
|
||||||
|
<h2>{Astro.props.railTitle}</h2>
|
||||||
|
<ul>
|
||||||
|
{Astro.props.railItems.map((item: string) => <li>{item}</li>)}
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<div class="legal-content legal-document">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.legal-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(220px, .34fr) minmax(0, .66fr);
|
||||||
|
gap: clamp(18px, 3vw, 34px);
|
||||||
|
align-items: start;
|
||||||
|
max-width: var(--container);
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-rail,
|
||||||
|
.legal-content {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid rgb(19 18 13 / .08);
|
||||||
|
border-radius: 30px;
|
||||||
|
background: white;
|
||||||
|
color: var(--ink);
|
||||||
|
box-shadow: 0 24px 70px rgb(42 36 18 / .07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-rail .eyebrow {
|
||||||
|
border-color: rgb(19 18 13 / .18);
|
||||||
|
background: var(--yellow);
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-rail {
|
||||||
|
position: sticky;
|
||||||
|
top: 112px;
|
||||||
|
padding: clamp(22px, 3vw, 34px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-rail h2 {
|
||||||
|
margin-top: 12px;
|
||||||
|
color: var(--ink);
|
||||||
|
font-size: clamp(1.6rem, 2vw, 2.3rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-rail ul {
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
margin: 22px 0 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-rail li {
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
padding-top: 10px;
|
||||||
|
color: rgb(19 18 13 / .76);
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content {
|
||||||
|
padding: clamp(24px, 5vw, 56px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content h2 {
|
||||||
|
margin-top: clamp(32px, 5vw, 56px);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
padding-top: 24px;
|
||||||
|
font-size: clamp(1.35rem, 1.1vw + 1rem, 1.85rem);
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content h2:first-of-type {
|
||||||
|
margin-top: 0;
|
||||||
|
border-top: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content h3 {
|
||||||
|
margin-top: 24px;
|
||||||
|
font-size: clamp(1.05rem, .4vw + 1rem, 1.2rem);
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content p,
|
||||||
|
.legal-content li {
|
||||||
|
line-height: 1.8;
|
||||||
|
color: rgb(19 18 13 / .76);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content strong {
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content em {
|
||||||
|
color: rgb(19 18 13 / .70);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content > p:first-of-type {
|
||||||
|
margin-top: 0;
|
||||||
|
color: var(--ink);
|
||||||
|
font-size: clamp(1.05rem, .45vw + 1rem, 1.22rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content ul {
|
||||||
|
padding-inline-start: 1.5rem;
|
||||||
|
margin-block: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content li {
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content hr {
|
||||||
|
margin-block: 32px;
|
||||||
|
border-color: var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-content a {
|
||||||
|
color: var(--red);
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
.legal-layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal-rail {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 620px) {
|
||||||
|
.legal-content,
|
||||||
|
.legal-rail {
|
||||||
|
padding: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,10 +1,14 @@
|
|||||||
---
|
---
|
||||||
import '../styles/global.css';
|
import '../styles/global.css';
|
||||||
|
import Footer from './Footer.astro';
|
||||||
import { formEndpoint, problems, services } from '../data/site.js';
|
import { formEndpoint, problems, services } from '../data/site.js';
|
||||||
|
|
||||||
|
const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
title = 'MoreminiMore',
|
title = 'MoreminiMore',
|
||||||
description = 'MoreminiMore ช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ',
|
description = 'MoreminiMore ช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ',
|
||||||
|
image = '/images/logos/logo-long-black.png',
|
||||||
} = Astro.props;
|
} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -16,6 +20,37 @@ const {
|
|||||||
<meta name="description" content={description} />
|
<meta name="description" content={description} />
|
||||||
<meta name="theme-color" content="#f8f5ea" />
|
<meta name="theme-color" content="#f8f5ea" />
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
|
|
||||||
|
<!-- Canonical -->
|
||||||
|
<link rel="canonical" href={canonicalURL} />
|
||||||
|
|
||||||
|
<!-- Open Graph -->
|
||||||
|
<meta property="og:site_name" content="MoreminiMore" />
|
||||||
|
<meta property="og:title" content={title} />
|
||||||
|
<meta property="og:description" content={description} />
|
||||||
|
<meta property="og:url" content={canonicalURL} />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:image" content={new URL(image, Astro.site).toString()} />
|
||||||
|
<meta property="og:image:width" content="1200" />
|
||||||
|
<meta property="og:image:height" content="630" />
|
||||||
|
<meta property="og:locale" content="th_TH" />
|
||||||
|
|
||||||
|
<!-- Twitter Card -->
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content={title} />
|
||||||
|
<meta name="twitter:description" content={description} />
|
||||||
|
<meta name="twitter:image" content={new URL(image, Astro.site).toString()} />
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||||
|
<link rel="manifest" href="/site.webmanifest" />
|
||||||
|
|
||||||
|
<!-- Preconnect for fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="background-stage" aria-hidden="true">
|
<div class="background-stage" aria-hidden="true">
|
||||||
@@ -111,6 +146,8 @@ const {
|
|||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
|
||||||
<button class="floating-cta" type="button" data-floating-cta data-open-lead>ส่งโจทย์ให้เราดู</button>
|
<button class="floating-cta" type="button" data-floating-cta data-open-lead>ส่งโจทย์ให้เราดู</button>
|
||||||
<div class="panel-backdrop" data-panel-backdrop data-close-lead></div>
|
<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}>
|
<aside class="lead-panel liquid-glass liquidGlass-wrapper" aria-labelledby="lead-title" aria-hidden="true" data-lead-panel data-endpoint={formEndpoint}>
|
||||||
|
|||||||
156
src/data/site.js
156
src/data/site.js
@@ -1,4 +1,7 @@
|
|||||||
export const formEndpoint = '';
|
// Google Apps Script Web App URL — deploy ตาม google-apps-script/SETUP.md
|
||||||
|
// ถ้ายังไม่มี ให้เว้นว่างไว้ ฟอร์มจะแสดงข้อความแจ้ง
|
||||||
|
// Production: ตั้ง PUBLIC_FORM_ENDPOINT=https://script.google.com/macros/s/.../exec
|
||||||
|
export const formEndpoint = (typeof import.meta !== 'undefined' && import.meta.env?.PUBLIC_FORM_ENDPOINT) || '';
|
||||||
|
|
||||||
export const problems = [
|
export const problems = [
|
||||||
['website_no_leads', 'เว็บมีอยู่แล้ว แต่ไม่ค่อยมีลูกค้าทัก'],
|
['website_no_leads', 'เว็บมีอยู่แล้ว แต่ไม่ค่อยมีลูกค้าทัก'],
|
||||||
@@ -15,11 +18,11 @@ export const services = [
|
|||||||
slug: 'website-development',
|
slug: 'website-development',
|
||||||
badge: 'พัฒนาเว็บไซต์',
|
badge: 'พัฒนาเว็บไซต์',
|
||||||
objective: 'ทำเว็บให้ขายได้',
|
objective: 'ทำเว็บให้ขายได้',
|
||||||
headline: 'เว็บที่ช่วยให้ลูกค้ารู้ว่าควรทักเรื่องอะไร',
|
headline: 'เว็บไชต์ที่ช่วยหาลีดหรือช่วยให้จำแบรนด์',
|
||||||
copy: 'เหมาะกับธุรกิจที่มีเว็บแล้วแต่ลูกค้ายังไม่ค่อยติดต่อ หรืออยากเริ่มเว็บใหม่ให้วัดผลได้ตั้งแต่วันแรก',
|
copy: 'เหมาะกับธุรกิจที่มีเว็บแล้วแต่ลูกค้ายังไม่ค่อยติดต่อ หรืออยากเริ่มเว็บใหม่ให้วัดผลได้ตั้งแต่วันแรก รวมถึงธุรกิจที่มีปัญหาเรื่อง SEO และ GEO',
|
||||||
detail: 'เริ่มจากถามว่าเว็บนี้ทำเพื่ออะไร ขายของ เก็บ lead หรือสร้างความน่าเชื่อถือ แล้วออกแบบหน้าและข้อความให้ทำหน้าที่นั้นได้จริง',
|
detail: 'เริ่มจากถามว่าเว็บนี้ทำเพื่ออะไร ขายของ เก็บ lead หรือสร้างความน่าเชื่อถือ แล้วออกแบบหน้าและข้อความให้ทำหน้าที่นั้นได้จริง',
|
||||||
painPoints: ['เว็บดูมีอยู่ แต่ลูกค้ายังไม่รู้ว่าควรทักเรื่องอะไร', 'หน้าเว็บไม่ช่วยคัด lead หรืออธิบายข้อเสนอให้ชัด', 'อยากเริ่มเว็บใหม่ให้พร้อมวัดผลตั้งแต่วันแรก'],
|
painPoints: ['เว็บดูมีอยู่ แต่ลูกค้ายังไม่รู้ว่าควรทักเรื่องอะไร', 'หน้าเว็บไม่ช่วยคัด lead หรืออธิบายข้อเสนอให้ชัด', 'อยากเริ่มเว็บใหม่ให้พร้อมวัดผลตั้งแต่วันแรก'],
|
||||||
approach: ['วาง message และ flow จากโจทย์ธุรกิจ', 'ออกแบบหน้าให้ตอบคำถามลูกค้าก่อนตัดสินใจ', 'ทำเว็บ Astro หรือ WordPress ตามความเหมาะสมของงาน'],
|
approach: ['เว็บไซต์เน้นตอบโจทย์ธุรกิจ เช่น การหาลีด หรือ การสร้าง Awareness', 'เว็บไชต์แบบ Responsive พร้อมระบบ SEO และ GEO', 'ระบบเว็บไชต์เน้นการใช้งานง่าย ให้ลูกค้าสามารถแก้ไขได้เอง'],
|
||||||
deliverables: ['โครงหน้าและ copy หลัก', 'เว็บไซต์ responsive พร้อมใช้งาน', 'พื้นฐาน SEO และ analytics ที่จำเป็น'],
|
deliverables: ['โครงหน้าและ copy หลัก', 'เว็บไซต์ responsive พร้อมใช้งาน', 'พื้นฐาน SEO และ analytics ที่จำเป็น'],
|
||||||
proof: 'เหมาะกับธุรกิจที่ต้องใช้เว็บไซต์เป็นฐานความน่าเชื่อถือและช่องทางรับ lead',
|
proof: 'เหมาะกับธุรกิจที่ต้องใช้เว็บไซต์เป็นฐานความน่าเชื่อถือและช่องทางรับ lead',
|
||||||
},
|
},
|
||||||
@@ -28,11 +31,11 @@ export const services = [
|
|||||||
slug: 'marketing-consult',
|
slug: 'marketing-consult',
|
||||||
badge: 'ที่ปรึกษาการตลาดออนไลน์',
|
badge: 'ที่ปรึกษาการตลาดออนไลน์',
|
||||||
objective: 'เพิ่มยอดขาย',
|
objective: 'เพิ่มยอดขาย',
|
||||||
headline: 'การตลาดที่ใช้งบคุ้มขึ้นจากข้อมูลจริง',
|
headline: 'วางกลยุทธ์การตลาดจากสถิติ',
|
||||||
copy: 'เหมาะกับธุรกิจที่ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม หรือมีคนทักมาแล้วไม่ใช่ลูกค้าที่ควรได้',
|
copy: 'เหมาะกับธุรกิจที่ยิงโฆษณาอยู่ แต่ยอดขายไม่คุ้ม หรือมีคนทักมาแล้วไม่ใช่ลูกค้าที่ควรได้ รวมถึงธุรกิจที่ยิงโฆษณา โดยไม่รู้ว่าแอคที่ยิงนั้นคุ้มค่าหรือยัง?',
|
||||||
detail: 'ดูสถิติคนเข้าเว็บ คนคลิกโฆษณา ยอดขาย และกลุ่มลูกค้าก่อน แล้วค่อยเลือกช่องทาง ข้อความ และงบประมาณที่ควรใช้',
|
detail: 'ดูสถิติคนเข้าเว็บ คนคลิกโฆษณา ยอดขาย และกลุ่มลูกค้าก่อน แล้วค่อยเลือกช่องทาง ข้อความ และงบประมาณที่ควรใช้',
|
||||||
painPoints: ['ยิงแอดแล้วมีคนคลิก แต่ยอดขายไม่คุ้ม', 'มี lead เข้ามา แต่คุณภาพลูกค้ายังไม่ตรง', 'ไม่แน่ใจว่างบควรอยู่ที่ช่องทางไหน'],
|
painPoints: ['ยิงแอดแล้วมีคนคลิก แต่ยอดขายไม่คุ้ม', 'มี lead เข้ามา แต่คุณภาพลูกค้ายังไม่ตรง', 'ไม่แน่ใจว่างบควรอยู่ที่ช่องทางไหน'],
|
||||||
approach: ['ดูข้อมูลแอด เว็บ และยอดขายเท่าที่มี', 'แยกปัญหาระหว่าง traffic, offer, landing page และ sales process', 'เสนอสิ่งที่ควรปรับก่อนใช้งบเพิ่ม'],
|
approach: ['วางระบบเก็บข้อมูลทางสถิติสำหรับเว็บไชต์, โฆษณา และยอดขาย', 'การวางกลยุทธ์จะใช้ข้อมูลสถิติเป็นพื้นฐาน', 'แต่ละช่องทางและแต่ละกลุ่มลูกค้าจะมีกลยุทธ์แตกต่างกัน'],
|
||||||
deliverables: ['diagnosis จากข้อมูลจริง', 'แผนปรับกลุ่มเป้าหมายและข้อความ', 'แนวทางวัดผลที่ช่วยดูคุณภาพลูกค้า'],
|
deliverables: ['diagnosis จากข้อมูลจริง', 'แผนปรับกลุ่มเป้าหมายและข้อความ', 'แนวทางวัดผลที่ช่วยดูคุณภาพลูกค้า'],
|
||||||
proof: 'เหมาะกับธุรกิจที่มี activity การตลาดอยู่แล้ว แต่อยากรู้ว่าเงินหายไปตรงไหน',
|
proof: 'เหมาะกับธุรกิจที่มี activity การตลาดอยู่แล้ว แต่อยากรู้ว่าเงินหายไปตรงไหน',
|
||||||
},
|
},
|
||||||
@@ -41,11 +44,11 @@ export const services = [
|
|||||||
slug: 'automation-workflow',
|
slug: 'automation-workflow',
|
||||||
badge: 'วางระบบอัตโนมัติ',
|
badge: 'วางระบบอัตโนมัติ',
|
||||||
objective: 'ลดต้นทุนและเวลา',
|
objective: 'ลดต้นทุนและเวลา',
|
||||||
headline: 'ระบบที่ลดงานช้าและงานผิดพลาด',
|
headline: 'วางระบบงานให้มีความรวดเร็วและลดความผิดพลาด',
|
||||||
copy: 'เหมาะกับทีมที่ทำงานเดิม ๆ ซ้ำทุกวัน ใช้เวลานาน หรือมีจุดผิดพลาดที่แก้ไม่จบ',
|
copy: 'เหมาะกับธุรกิจที่ยังใช้ระบบงานที่เน้นแรงงานคนมาก ซึ่งช้าและมีโอกาสผิดพลาดสูง',
|
||||||
detail: 'เริ่มจากดู workflow ปัจจุบันว่าอะไรซ้ำ ทำมือ หรือเสียเวลา แล้วเลือกว่าจะใช้ n8n ระบบเฉพาะทาง หรือ AI ช่วยในจุดไหน',
|
detail: 'เริ่มจากดู workflow ปัจจุบันว่าอะไรซ้ำ ทำมือ หรือเสียเวลา แล้วเลือกว่าจะใช้ n8n ระบบเฉพาะทาง หรือ AI ช่วยในจุดไหน',
|
||||||
painPoints: ['ทีมทำงานซ้ำ ๆ และเสียเวลากับขั้นตอนเดิม', 'ข้อมูลกระจัดกระจาย ต้องคอย copy หรือส่งต่อเอง', 'งานผิดพลาดจากการทำมือเกิดซ้ำ'],
|
painPoints: ['ทีมทำงานซ้ำ ๆ และเสียเวลากับขั้นตอนเดิม', 'ข้อมูลกระจัดกระจาย ต้องคอย copy หรือส่งต่อเอง', 'งานผิดพลาดจากการทำมือเกิดซ้ำ'],
|
||||||
approach: ['วาด workflow ปัจจุบันให้เห็นจุดเสียเวลา', 'เลือก automation เฉพาะจุดที่คุ้มก่อน', 'ออกแบบให้ทีมใช้งานง่ายและตรวจสอบได้'],
|
approach: ['งานที่มีการทำซ้ำ จะมีระบบงานมาแทนที่ทั้งหมด', 'เลือกระบบงานที่เหมาะสม กับความต้องการของลูกค้า และพฤติกรรมองค์กร', 'ระบบงานจะไม่เน้นการปรับพฤติกรรมการทำงาน แต่จะประสานหรือเป็นหนึ่งเดียวแทน'],
|
||||||
deliverables: ['workflow map', 'ระบบ automation หรือ integration ตาม scope', 'คู่มือใช้งานและจุดตรวจสอบ'],
|
deliverables: ['workflow map', 'ระบบ automation หรือ integration ตาม scope', 'คู่มือใช้งานและจุดตรวจสอบ'],
|
||||||
proof: 'เหมาะกับธุรกิจที่มีทีมทำงานซ้ำทุกวัน และอยากลดเวลาหรือความผิดพลาดก่อนขยายทีม',
|
proof: 'เหมาะกับธุรกิจที่มีทีมทำงานซ้ำทุกวัน และอยากลดเวลาหรือความผิดพลาดก่อนขยายทีม',
|
||||||
},
|
},
|
||||||
@@ -54,11 +57,11 @@ export const services = [
|
|||||||
slug: 'ai-consult',
|
slug: 'ai-consult',
|
||||||
badge: 'ที่ปรึกษาด้าน AI',
|
badge: 'ที่ปรึกษาด้าน AI',
|
||||||
objective: 'รักษาความรู้ขององค์กร',
|
objective: 'รักษาความรู้ขององค์กร',
|
||||||
headline: 'AI ที่ช่วยทีมทำงาน ไม่ใช่แค่ของเล่นใหม่',
|
headline: 'ระบบงานที่ผสาน AI เป็นส่วนหนึ่งในระบบ',
|
||||||
copy: 'เหมาะกับธุรกิจที่อยากใช้ AI แต่ยังไม่แน่ใจว่างานไหนควรเริ่มก่อนและใช้อย่างไรให้ปลอดภัย',
|
copy: 'เหมาะกับธุรกิจที่อยากใช้ AI ให้เกิดประโยชน์สูงสุด และไม่ต้องการให้ความรู้อยู่กับพนักงานเท่านั้น',
|
||||||
detail: 'เลือกโมเดลและวิธีใช้ให้เหมาะกับงานจริง โดยเฉพาะงานที่ต้องรักษาความรู้และความลับขององค์กร',
|
detail: 'เลือกโมเดลและวิธีใช้ให้เหมาะกับงานจริง โดยเฉพาะงานที่ต้องรักษาความรู้และความลับขององค์กร',
|
||||||
painPoints: ['อยากใช้ AI แต่ยังไม่รู้ว่างานไหนคุ้มที่สุด', 'ทีมลองเครื่องมือหลายตัวแต่ยังไม่เชื่อมกับงานจริง', 'มีความรู้สำคัญอยู่กับคนหรือเอกสารกระจัดกระจาย'],
|
painPoints: ['อยากใช้ AI แต่ยังไม่รู้ว่างานไหนคุ้มที่สุด', 'ทีมลองเครื่องมือหลายตัวแต่ยังไม่เชื่อมกับงานจริง', 'มีความรู้สำคัญอยู่กับคนหรือเอกสารกระจัดกระจาย'],
|
||||||
approach: ['เลือก use case ที่กระทบงานจริงก่อน', 'วางวิธีใช้ AI ที่เหมาะกับระดับความลับของข้อมูล', 'ช่วยทีมใช้ AI แบบตรวจสอบได้ ไม่ใช่ปล่อยให้เดาเอง'],
|
approach: ['ความรู้ที่พนักงานมี จะถูกเก็บเป็นความรู้ขององค์กร', 'พนักงานจะใช้ AI เป็นส่วนหนึ่งในการทำงาน', 'ข้อมูลที่เป้นความลับจะมีระบบงานเฉพาะ'],
|
||||||
deliverables: ['AI use case roadmap', 'prototype หรือ workflow ที่ใช้ได้จริง', 'แนวทางรักษาความรู้และข้อมูลขององค์กร'],
|
deliverables: ['AI use case roadmap', 'prototype หรือ workflow ที่ใช้ได้จริง', 'แนวทางรักษาความรู้และข้อมูลขององค์กร'],
|
||||||
proof: 'เหมาะกับองค์กรที่อยากใช้ AI เพื่อช่วยคนทำงาน ไม่ใช่แค่ซื้อเครื่องมือใหม่',
|
proof: 'เหมาะกับองค์กรที่อยากใช้ AI เพื่อช่วยคนทำงาน ไม่ใช่แค่ซื้อเครื่องมือใหม่',
|
||||||
},
|
},
|
||||||
@@ -69,32 +72,40 @@ export const portfolio = [
|
|||||||
name: 'Dataroot',
|
name: 'Dataroot',
|
||||||
image: '/images/portfolio/dataroot.png',
|
image: '/images/portfolio/dataroot.png',
|
||||||
href: 'https://erp.dataroot.asia',
|
href: 'https://erp.dataroot.asia',
|
||||||
tag: 'Marketing diagnosis',
|
tag: 'Marketing Consult',
|
||||||
description: 'เคสปรับการมองข้อมูลและกลุ่มเป้าหมายก่อนตัดสินใจใช้งบ',
|
description: 'บริษัทให้บริการ ERP Software และการปรับแต่ง ERP Software สำหรับองค์กรขนาดใหญ่',
|
||||||
featured: true,
|
featured: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Jet Industries',
|
name: 'Jet Industries',
|
||||||
image: '/images/portfolio/jetindustries.png',
|
image: '/images/portfolio/jetindustries.png',
|
||||||
href: 'https://jetindustries.co.th',
|
href: 'https://jetindustries.co.th',
|
||||||
tag: 'Corporate website',
|
tag: 'Website Development',
|
||||||
description: 'เว็บไซต์องค์กรผู้ผลิตพลาสติกฉีดขึ้นรูป ประสบการณ์กว่า 40 ปี',
|
description: 'เว็บไซต์องค์กรผู้ผลิตพลาสติกฉีดขึ้นรูป ประสบการณ์กว่า 40 ปี',
|
||||||
featured: true,
|
featured: true,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: 'เทรนเนอร์ซันนี่',
|
|
||||||
image: '/images/portfolio/trainersunny.png',
|
|
||||||
href: 'https://trainersunny.com',
|
|
||||||
tag: 'Personal brand',
|
|
||||||
description: 'เว็บไซต์ personal brand และหลักสูตรอบรมที่มีภาพจำชัด',
|
|
||||||
featured: true,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: 'Dealplustech',
|
name: 'Dealplustech',
|
||||||
image: '/images/portfolio/dealplustech.png',
|
image: '/images/portfolio/dealplustech.png',
|
||||||
href: 'https://www.dealplustech.co.th',
|
href: 'https://www.dealplustech.co.th',
|
||||||
|
tag: 'Marketing Consult · Website Development',
|
||||||
|
description: 'เว็บไซต์จัดจำหน่ายระบบน้ำและสุขภัณฑ์คุณภาพสูงสำหรับโรงงานและบ้านเรือน',
|
||||||
|
featured: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'เลือกจระเข้วานิไทย',
|
||||||
|
image: '/images/portfolio/leudjorakhe.png',
|
||||||
|
href: 'https://เลือดจระเข้วานิไทย.com',
|
||||||
tag: 'Website Development',
|
tag: 'Website Development',
|
||||||
description: 'เว็บไซต์ระบบน้ำและสุขภัณฑ์คุณภาพสูงสำหรับโรงงานและบ้านเรือน',
|
description: 'เว็บไซต์ผลิตภัณฑ์แคปซูลเลือดจระเข้เพื่อสุขภาพ',
|
||||||
|
featured: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'เทรนเนอร์ซันนี่',
|
||||||
|
image: '/images/portfolio/trainersunny.png',
|
||||||
|
href: 'https://trainersunny.com',
|
||||||
|
tag: 'Website Development',
|
||||||
|
description: 'เว็บไซต์ personal brand และหลักสูตรอบรมสำหรับเทรนเนอร์ฟิตเนส',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Underdog Marketing',
|
name: 'Underdog Marketing',
|
||||||
@@ -107,23 +118,30 @@ export const portfolio = [
|
|||||||
name: 'ทวนทอง 99',
|
name: 'ทวนทอง 99',
|
||||||
image: '/images/portfolio/tuanthong.png',
|
image: '/images/portfolio/tuanthong.png',
|
||||||
href: 'https://tuanthong99.com',
|
href: 'https://tuanthong99.com',
|
||||||
tag: 'E-commerce',
|
tag: 'Website Development',
|
||||||
description: 'เว็บไซต์สินค้าอุปโภคบริโภคและสมุนไพรไทย',
|
description: 'เว็บไซต์จำหน่ายสินค้าอุปโภคบริโภคและสมุนไพรไทย',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'สำนักงานกฎหมาย ตถาตา',
|
name: 'สำนักงานกฎหมาย ตถาตา',
|
||||||
image: '/images/portfolio/lawyernoom.png',
|
image: '/images/portfolio/lawyernoom.png',
|
||||||
href: 'https://lawyernoom.com',
|
href: 'https://lawyernoom.com',
|
||||||
tag: 'Website Development',
|
tag: 'Website Development',
|
||||||
description: 'เว็บไซต์สำนักงานกฎหมายที่เน้นความน่าเชื่อถือ',
|
description: 'เว็บไซต์สำนักงานกฎหมายที่เน้นความน่าเชื่อถือและการเข้าถึงง่าย',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Baofuling Shop',
|
||||||
|
image: '/images/portfolio/baofuling.png',
|
||||||
|
href: 'https://baofulingshop.com',
|
||||||
|
tag: 'Website Development',
|
||||||
|
description: 'เว็บไซต์ร้านค้าออนไลน์จำหน่ายผลิตภัณฑ์อาหารเสริมและสุขภาพ',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export const process = [
|
export const process = [
|
||||||
['เข้าใจธุรกิจ', 'ทำความรู้จักเป้าหมาย ลูกค้า และปัญหาที่เจอจริง'],
|
['เข้าใจธุรกิจ', 'ทำความรู้จักสินค้า กลุ่มเป้าหมาย พฤติกรรมองค์กรของลูกค้า และปัญหาที่เจอจริง'],
|
||||||
['ดูข้อมูล', 'เช็กเว็บ แอด ลูกค้า ขั้นตอนทำงาน หรือข้อมูลที่มีอยู่'],
|
['ดูข้อมูล', 'รวบรวมข้อมูลทางสถิติ ถ้าลูกค้ามีข้อมูลน้อย หรือ ยังไม่มีจะช่วยวางระบบเก็บข้อมูลให้ด้วย'],
|
||||||
['เลือกทางที่คุ้ม', 'เสนอสิ่งที่ควรทำก่อน ไม่ทำทุกอย่างพร้อมกัน'],
|
['เลือกทางที่คุ้ม', 'สรุปกลยุทธ์สำหรับลูกค้าทั้งในระยะสั้น และระยะยาว พร้อมทั้งแนวทางการปรับกลยุทธ์เบื้องต้น'],
|
||||||
['ลงมือและวัดผล', 'ทำให้ใช้งานได้จริง แล้วดูผลเพื่อปรับต่อ'],
|
['ลงมือและวัดผล', 'การติดตามผลหลังจากปฏิบัติตามกลยุทธ์ และปรับกลยุทธ์ตามสถานการณ์ที่เปลี่ยนไป'],
|
||||||
];
|
];
|
||||||
|
|
||||||
export const faqs = [
|
export const faqs = [
|
||||||
@@ -155,29 +173,57 @@ export const faqs = [
|
|||||||
{
|
{
|
||||||
category: 'หลังส่งมอบ',
|
category: 'หลังส่งมอบ',
|
||||||
question: 'มีประกันงานไหม?',
|
question: 'มีประกันงานไหม?',
|
||||||
answer: 'มีการดูแลหลังส่งมอบสำหรับปัญหาที่เกิดจากงานของเรา ส่วนงานที่เปลี่ยนแปลงเพิ่มจากขอบเขตเดิมจะคุยกันตามจริงก่อนทำ',
|
answer: 'มี — ถ้าเว็บมีปัญหาจากการพัฒนาของเรา จะแก้ไขให้ฟรี 30-90 วันหลังส่งมอบ (ขึ้นอยู่กับประเภทงาน) ถ้าเกิดจากการแก้ไขของลูกค้าเอง จะคิดค่าแก้ตามจริง',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'บริการ',
|
||||||
|
question: 'เหมาะกับธุรกิจแบบไหน?',
|
||||||
|
answer: 'SME ที่ต้องการคนช่วยดูเรื่อง Online Marketing และระบบ IT ลูกค้าที่ไม่มีความรู้ IT มากแต่จำเป็นต้องใช้ระบบ IT ในการทำงาน ไม่เหมาะกับ: องค์กรขนาดใหญ่ที่มีการเมืองเยอะ คนที่อยากได้ของฟรีหรือจ่ายน้อยแต่คาดหวังงานระดับแสน',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'ราคา',
|
||||||
|
question: 'มีแพ็คเกจไหม?',
|
||||||
|
answer: 'ไม่มีแพ็คเกจตายตัว เพราะงานแต่ละชิ้นต่างกัน เราจะส่ง Proposal เป็น PDF พร้อมรายละเอียดงาน ราคา ระยะเวลา ให้คุณอ่านก่อนเซ็น แก้ไข scope ได้',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'ราคา',
|
||||||
|
question: 'จ่ายยังไง?',
|
||||||
|
answer: 'เว็บไซต์: มัดจำ 50% ตอนเซ็น ที่เหลือจ่ายตอนส่งมอบ · ที่ปรึกษารายเดือน: จ่ายต้นเดือน เริ่มจ่ายเดือนแรกตอนเซ็นสัญญา ออกใบกำกับภาษีได้',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'ราคา',
|
||||||
|
question: 'มีค่าใช้จ่ายแอบแฝงไหม?',
|
||||||
|
answer: 'ไม่มี — เราจะบอกทุกค่าใช้จ่ายใน Proposal ตั้งแต่ต้น ไม่มี "อันนี้เพิ่มเงินนะ" ตอนใกล้ส่งมอบ ถ้ามีงานเพิ่มจริง ๆ จะคุยและตกลงราคาก่อนทำ',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'ระยะเวลา',
|
||||||
|
question: 'SEO ใช้เวลาเห็นผลกี่เดือน?',
|
||||||
|
answer: 'SEO ปกติใช้เวลา 3-6 เดือนถึงจะเห็นผลชัด ขึ้นอยู่กับคีย์เวิร์ดและคู่แข่ง เราเคยมีเคสติดหน้า 1 Google ใน 4 เดือน แต่ก็มีเคสที่ใช้เวลานานกว่านั้น — จะบอกตรง ๆ ตั้งแต่แรก',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'ระยะเวลา',
|
||||||
|
question: 'งานด่วน ทำได้ไหม?',
|
||||||
|
answer: 'ทำได้ แต่จะคิดราคาเร่งด่วนเพิ่ม เพราะกระทบกับงานอื่นที่มีอยู่ เราจะบอกชัดว่าค่าเร่งเท่าไหร่ก่อนรับงาน',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'AI',
|
||||||
|
question: 'AI ใช้ของแพงหรือของถูก?',
|
||||||
|
answer: 'เราเลือกตามงาน ไม่ใช่เลือกของแพงสุด งาน 80% ใช้ Model ราคาถูก (GPT-4o-mini, Haiku, Local LLM) ก็ได้ผล ส่วนงานที่ซับซ้อนมากค่อยใช้ของแพง วิธีนี้ช่วยลูกค้าประหยัดค่าใช้จ่ายได้มากกว่าครึ่ง',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'AI',
|
||||||
|
question: 'ข้อมูลปลอดภัยไหม (PDPA)?',
|
||||||
|
answer: 'ปลอดภัย — สำหรับงานที่ต้องการความลับ เราใช้ Local LLM ที่รันในเครื่องของลูกค้า ข้อมูลไม่ออกไปไหน ส่วนงานทั่วไปใช้ API ของผู้ให้บริการที่เชื่อถือได้ พร้อมทำ NDA ได้',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'หลังส่งมอบ',
|
||||||
|
question: 'ติดต่อช่องทางไหน?',
|
||||||
|
answer: 'LINE OA: @moreminimore (ตอบเร็วที่สุด) · โทร: 080-995-5945 · Email: contact@moreminimore.com คนที่ตอบคือคนที่ทำงานให้คุณ ไม่ใช่ Bot',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'หลังส่งมอบ',
|
||||||
|
question: 'มีแพ็คเกจดูแลรายเดือนไหม?',
|
||||||
|
answer: 'มี เริ่ม 2,000 บาท/เดือน รวมอัปเดตเนื้อหา ปรับ SEO แก้บั๊ก ตอบคำถามผ่าน LINE ถ้าไม่เอาแพ็คเกจ ก็จ่ายเป็นงาน ๆ ไป แล้วแต่ความเหมาะ',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export const posts = [
|
|
||||||
{
|
|
||||||
title: 'AI สำหรับ SME ไทย: เริ่มจากงานที่เจ็บที่สุดก่อน',
|
|
||||||
excerpt: 'AI ไม่จำเป็นต้องเริ่มจากระบบใหญ่ เริ่มจากคำถามซ้ำ งานเอกสารซ้ำ หรือข้อมูลที่ทีมใช้ตัดสินใจก่อนจะคุ้มกว่า',
|
|
||||||
category: 'AI Consult',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Marketing Automation ควรช่วยลดงาน ไม่ใช่เพิ่มเครื่องมือ',
|
|
||||||
excerpt: 'ก่อนเลือกเครื่องมือ ควรดู workflow จริงก่อนว่าขั้นตอนไหนซ้ำ ช้า หรือผิดพลาดบ่อย แล้วค่อยออกแบบระบบช่วย',
|
|
||||||
category: 'Automation',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'เว็บ SME ที่ดีควรถามได้ว่าลูกค้าควรทำอะไรต่อ',
|
|
||||||
excerpt: 'เว็บไซต์ไม่ใช่แค่หน้าแนะนำบริษัท แต่ควรช่วยให้ลูกค้าเข้าใจปัญหา เห็นทางเลือก และรู้ว่าควรติดต่อเรื่องอะไร',
|
|
||||||
category: 'Website',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'ยิงแอดแล้วไม่คุ้ม อาจไม่ใช่เพราะยิงผิดแพลตฟอร์ม',
|
|
||||||
excerpt: 'บางครั้งปัญหาอยู่ที่ intent ของคนที่เข้ามา ข้อความหน้าเว็บ หรือการวัดผลที่ยังไม่บอกคุณภาพลูกค้า',
|
|
||||||
category: 'Marketing',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|||||||
31
src/pages/404.astro
Normal file
31
src/pages/404.astro
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
---
|
||||||
|
import PageShell from '../components/PageShell.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<PageShell
|
||||||
|
title="ไม่พบหน้า | MoreminiMore"
|
||||||
|
description="ไม่พบหน้าที่คุณค้นหา อาจถูกย้ายหรือลิงก์ไม่ถูกต้อง"
|
||||||
|
>
|
||||||
|
<section class="page-hero scene scene-light" data-scene="light">
|
||||||
|
<div class="page-hero-grid">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">404</p>
|
||||||
|
<h1>ไม่พบหน้านี้</h1>
|
||||||
|
</div>
|
||||||
|
<p class="hero-lead">
|
||||||
|
หน้าที่คุณค้นหาอาจถูกย้าย เปลี่ยนชื่อ หรือไม่มีอยู่ กรุณาตรวจสอบ URL หรือกลับไปหน้าแรก
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="final-cta">
|
||||||
|
<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 class="eyebrow">กลับไปเริ่มต้น</p>
|
||||||
|
<h2>ไม่แน่ใจว่าควรเริ่มตรงไหน กลับไปหน้าแรกเพื่อดูข้อมูลเพิ่มเติม</h2>
|
||||||
|
<a class="button button-primary" href="/">กลับหน้าแรก</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</PageShell>
|
||||||
@@ -7,16 +7,12 @@ import { process } from '../data/site.js';
|
|||||||
title="เกี่ยวกับเรา | MoreminiMore"
|
title="เกี่ยวกับเรา | MoreminiMore"
|
||||||
description="รู้จัก MoreminiMore ที่ปรึกษาเว็บไซต์ การตลาด และ AI สำหรับ SME ที่เริ่มจากข้อมูลจริงก่อนเลือกสิ่งที่ควรทำ"
|
description="รู้จัก MoreminiMore ที่ปรึกษาเว็บไซต์ การตลาด และ AI สำหรับ SME ที่เริ่มจากข้อมูลจริงก่อนเลือกสิ่งที่ควรทำ"
|
||||||
>
|
>
|
||||||
<section class="page-hero scene scene-light" data-scene="light">
|
<section class="page-hero scene scene-light hero-oversized" data-scene="light">
|
||||||
<div class="page-hero-grid">
|
<p class="eyebrow">เกี่ยวกับเรา</p>
|
||||||
<div>
|
<h1>ที่ปรึกษาที่เริ่มจากคำถาม ไม่ใช่เริ่มจากขายแพ็กเกจ</h1>
|
||||||
<p class="eyebrow">About MoreminiMore</p>
|
<p class="hero-lead">
|
||||||
<h1>ที่ปรึกษาที่เริ่มจากคำถาม ไม่ใช่เริ่มจากขายแพ็กเกจ</h1>
|
MoreminiMore ทำงานกับ SME ที่อยากใช้เว็บ การตลาด ระบบอัตโนมัติ และ AI ให้คุ้มขึ้น โดยดูข้อมูลและบริบทของธุรกิจก่อนตัดสินใจลงมือ
|
||||||
</div>
|
</p>
|
||||||
<p class="hero-lead">
|
|
||||||
MoreminiMore ทำงานกับ SME ที่อยากใช้เว็บ การตลาด ระบบอัตโนมัติ และ AI ให้คุ้มขึ้น โดยดูข้อมูลและบริบทของธุรกิจก่อนตัดสินใจลงมือ
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="page-section">
|
<section class="page-section">
|
||||||
@@ -25,7 +21,7 @@ import { process } from '../data/site.js';
|
|||||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||||
<p class="eyebrow">Why we exist</p>
|
<p class="eyebrow">ทำไมเราถึงมีอยู่</p>
|
||||||
<h2>ธุรกิจไม่ควรเสียเงินกับสิ่งที่ยังไม่รู้ว่าคุ้มไหม</h2>
|
<h2>ธุรกิจไม่ควรเสียเงินกับสิ่งที่ยังไม่รู้ว่าคุ้มไหม</h2>
|
||||||
<p>
|
<p>
|
||||||
เราเห็น SME หลายรายจ่ายเงินกับเว็บที่สวยแต่ไม่มีคนทัก โฆษณาที่มีคนคลิกแต่ไม่เกิดยอดขาย หรือเครื่องมือ AI ที่ดูน่าตื่นเต้นแต่ไม่เข้ากับงานจริง จึงเลือกทำงานแบบดูโจทย์ก่อน แล้วค่อยเสนอสิ่งที่ควรทำ
|
เราเห็น SME หลายรายจ่ายเงินกับเว็บที่สวยแต่ไม่มีคนทัก โฆษณาที่มีคนคลิกแต่ไม่เกิดยอดขาย หรือเครื่องมือ AI ที่ดูน่าตื่นเต้นแต่ไม่เข้ากับงานจริง จึงเลือกทำงานแบบดูโจทย์ก่อน แล้วค่อยเสนอสิ่งที่ควรทำ
|
||||||
@@ -35,7 +31,7 @@ import { process } from '../data/site.js';
|
|||||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||||
<p class="eyebrow">Policy</p>
|
<p class="eyebrow">นโยบาย</p>
|
||||||
<h2>เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า</h2>
|
<h2>เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า</h2>
|
||||||
<p>
|
<p>
|
||||||
ถ้าลูกค้ามีกำไรมากขึ้น ลูกค้าก็อยู่ต่อได้ และเราก็ทำงานต่อได้ด้วย ทุกงานจึงต้องตอบให้ได้ว่าช่วยเพิ่มยอดขาย ลดต้นทุน ประหยัดเวลา หรือช่วยตัดสินใจได้ดีขึ้นอย่างไร
|
ถ้าลูกค้ามีกำไรมากขึ้น ลูกค้าก็อยู่ต่อได้ และเราก็ทำงานต่อได้ด้วย ทุกงานจึงต้องตอบให้ได้ว่าช่วยเพิ่มยอดขาย ลดต้นทุน ประหยัดเวลา หรือช่วยตัดสินใจได้ดีขึ้นอย่างไร
|
||||||
@@ -46,7 +42,7 @@ import { process } from '../data/site.js';
|
|||||||
|
|
||||||
<section class="page-section page-section-tight">
|
<section class="page-section page-section-tight">
|
||||||
<div class="section-heading">
|
<div class="section-heading">
|
||||||
<p class="eyebrow">Process</p>
|
<p class="eyebrow">ขั้นตอน</p>
|
||||||
<h2>วิธีทำงานที่ลดการเดา</h2>
|
<h2>วิธีทำงานที่ลดการเดา</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="process-grid">
|
<div class="process-grid">
|
||||||
@@ -60,14 +56,147 @@ import { process } from '../data/site.js';
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="page-section scene scene-dark tools-section" data-scene="dark">
|
||||||
|
<div class="tools-layout">
|
||||||
|
<div class="tools-copy">
|
||||||
|
<p class="eyebrow">เครื่องมือ</p>
|
||||||
|
<h2>เลือกเครื่องมือจากโจทย์ ไม่ใช่จากกระแส</h2>
|
||||||
|
<p>
|
||||||
|
เราใช้ stack หลายแบบ แต่หลักคิดมีข้อเดียว: เครื่องมือต้องช่วยเพิ่มยอดขาย ลดต้นทุน หรือทำให้ทีมตัดสินใจเร็วขึ้น ถ้าไม่ช่วย เราไม่ยัดใส่โปรเจกต์ให้ดูเท่
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tools-stack" aria-label="เครื่องมือที่ MoreminiMore ใช้">
|
||||||
|
<article class="tool-card tool-card-featured 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>01</span>
|
||||||
|
<h3>Marketing Intelligence</h3>
|
||||||
|
<p>ดูโฆษณาคู่แข่ง, keyword gap, trend ตลาด และสัญญาณที่บอกว่าควรเริ่มจากอะไร</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="tool-card 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>02</span>
|
||||||
|
<h3>Build Stack</h3>
|
||||||
|
<p>Astro, WordPress, Python, PHP, Node.js — เลือกตามงานจริง ไม่ล็อกลูกค้ากับของที่ดูแพงแต่ดูแลยาก</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="tool-card 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>03</span>
|
||||||
|
<h3>Automation + AI</h3>
|
||||||
|
<p>n8n, Make, OpenAI API, Meta API, Local LLM — ใช้เมื่อช่วยลดงานซ้ำหรือปิดช่องว่างข้อมูลได้จริง</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="final-cta">
|
<section class="final-cta">
|
||||||
<div class="glass-panel liquid-glass liquidGlass-wrapper">
|
<div class="glass-panel liquid-glass liquidGlass-wrapper">
|
||||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||||
<p class="eyebrow">Talk to us</p>
|
<p class="eyebrow">คุยกับเรา</p>
|
||||||
<h2>เล่าโจทย์ของธุรกิจคุณก่อน แล้วค่อยดูว่าควรเริ่มตรงไหน</h2>
|
<h2>เล่าโจทย์ของธุรกิจคุณก่อน แล้วค่อยดูว่าควรเริ่มตรงไหน</h2>
|
||||||
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</PageShell>
|
</PageShell>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.tools-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
|
||||||
|
gap: clamp(24px, 5vw, 64px);
|
||||||
|
align-items: start;
|
||||||
|
max-width: var(--container);
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-copy {
|
||||||
|
position: sticky;
|
||||||
|
top: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-copy h2 {
|
||||||
|
margin-top: 12px;
|
||||||
|
max-width: 10ch;
|
||||||
|
font-size: clamp(2.4rem, 5vw, 5.2rem);
|
||||||
|
line-height: .92;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-copy p:last-child {
|
||||||
|
margin-top: 18px;
|
||||||
|
max-width: 34rem;
|
||||||
|
color: rgb(255 255 255 / .72);
|
||||||
|
font-size: clamp(1rem, .4vw + 1rem, 1.2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-stack {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-card {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: clamp(22px, 4vw, 36px);
|
||||||
|
border: 1px solid rgb(255 255 255 / .24);
|
||||||
|
border-radius: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-card > *:not(.liquidGlass-effect, .liquidGlass-tint, .liquidGlass-shine) {
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-card span {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
border: 1px solid rgb(255 255 255 / .22);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
color: rgb(255 255 255 / .62);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: .08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-card h3 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: clamp(1.55rem, 2vw, 2.45rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-card p {
|
||||||
|
max-width: 42rem;
|
||||||
|
color: rgb(255 255 255 / .72);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-card-featured {
|
||||||
|
min-height: 260px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
background: linear-gradient(135deg, rgb(254 212 0 / .16), rgb(212 85 58 / .12));
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.tools-layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-copy {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-copy h2 {
|
||||||
|
max-width: 12ch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -12,16 +12,12 @@ const posts = (await getCollection('blog', ({ data }) => !data.draft)).sort(
|
|||||||
title="บทความ | MoreminiMore"
|
title="บทความ | MoreminiMore"
|
||||||
description="บทความจาก MoreminiMore เกี่ยวกับเว็บไซต์ การตลาดออนไลน์ ระบบอัตโนมัติ และ AI สำหรับ SME"
|
description="บทความจาก MoreminiMore เกี่ยวกับเว็บไซต์ การตลาดออนไลน์ ระบบอัตโนมัติ และ AI สำหรับ SME"
|
||||||
>
|
>
|
||||||
<section class="page-hero scene scene-light" data-scene="light">
|
<section class="page-hero scene scene-light hero-oversized" data-scene="light">
|
||||||
<div class="page-hero-grid">
|
<p class="eyebrow">บทความ</p>
|
||||||
<div>
|
<h1>บทความสำหรับธุรกิจที่อยากตัดสินใจจากข้อมูล</h1>
|
||||||
<p class="eyebrow">Blog</p>
|
<p class="hero-lead">
|
||||||
<h1>บทความสำหรับธุรกิจที่อยากตัดสินใจจากข้อมูล</h1>
|
รวมมุมมองเรื่องเว็บ การตลาด ระบบอัตโนมัติ และ AI แบบที่เน้นใช้งานจริงในธุรกิจ ไม่ใช่แค่ตามกระแส
|
||||||
</div>
|
</p>
|
||||||
<p class="hero-lead">
|
|
||||||
รวมมุมมองเรื่องเว็บ การตลาด ระบบอัตโนมัติ และ AI แบบที่เน้นใช้งานจริงในธุรกิจ ไม่ใช่แค่ตามกระแส
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="page-section">
|
<section class="page-section">
|
||||||
@@ -31,7 +27,7 @@ const posts = (await getCollection('blog', ({ data }) => !data.draft)).sort(
|
|||||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||||
<span>{post.data.category}</span>
|
<span class="eyebrow">{post.data.category}</span>
|
||||||
<h2>{post.data.title}</h2>
|
<h2>{post.data.title}</h2>
|
||||||
<p>{post.data.description}</p>
|
<p>{post.data.description}</p>
|
||||||
<a class="text-link" href={`/blog/${post.id}/`}>อ่านบทความ</a>
|
<a class="text-link" href={`/blog/${post.id}/`}>อ่านบทความ</a>
|
||||||
|
|||||||
@@ -23,18 +23,18 @@ const formattedDate = new Intl.DateTimeFormat('th-TH', {
|
|||||||
<article class="blog-article">
|
<article class="blog-article">
|
||||||
<header class="blog-article-hero scene scene-light" data-scene="light">
|
<header class="blog-article-hero scene scene-light" data-scene="light">
|
||||||
<div class="blog-article-heading">
|
<div class="blog-article-heading">
|
||||||
<a class="text-link" href="/blog/">บทความทั้งหมด</a>
|
<a class="blog-back-link" href="/blog/">← บทความทั้งหมด</a>
|
||||||
<p class="eyebrow">{post.data.category} · {formattedDate}</p>
|
<div class="blog-article-meta">
|
||||||
|
<span class="eyebrow eyebrow-yellow">{post.data.category}</span>
|
||||||
|
<span class="eyebrow">{formattedDate}</span>
|
||||||
|
</div>
|
||||||
<h1>{post.data.title}</h1>
|
<h1>{post.data.title}</h1>
|
||||||
<p>{post.data.description}</p>
|
<p class="blog-article-lead">{post.data.description}</p>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="blog-article-shell">
|
<div class="blog-article-shell">
|
||||||
<div class="blog-prose liquid-glass liquidGlass-wrapper">
|
<div class="blog-prose">
|
||||||
<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 />
|
<Content />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -45,7 +45,7 @@ const formattedDate = new Intl.DateTimeFormat('th-TH', {
|
|||||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||||
<p class="eyebrow">Next step</p>
|
<p class="eyebrow">ขั้นตอนถัดไป</p>
|
||||||
<h2>อ่านแล้วเจอโจทย์คล้ายกัน ส่งปัญหามาให้เราช่วยดูก่อนได้</h2>
|
<h2>อ่านแล้วเจอโจทย์คล้ายกัน ส่งปัญหามาให้เราช่วยดูก่อนได้</h2>
|
||||||
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -7,16 +7,12 @@ import { problems } from '../data/site.js';
|
|||||||
title="ติดต่อ | MoreminiMore"
|
title="ติดต่อ | MoreminiMore"
|
||||||
description="ติดต่อ MoreminiMore เพื่อส่งโจทย์เว็บไซต์ การตลาด ระบบอัตโนมัติ หรือ AI ให้เราช่วยดูว่าควรเริ่มตรงไหน"
|
description="ติดต่อ MoreminiMore เพื่อส่งโจทย์เว็บไซต์ การตลาด ระบบอัตโนมัติ หรือ AI ให้เราช่วยดูว่าควรเริ่มตรงไหน"
|
||||||
>
|
>
|
||||||
<section class="page-hero scene scene-light" data-scene="light">
|
<section class="page-hero scene scene-light hero-oversized" data-scene="light">
|
||||||
<div class="page-hero-grid">
|
<p class="eyebrow">ติดต่อ</p>
|
||||||
<div>
|
<h1>ส่งโจทย์ให้เราดู แล้วค่อยตัดสินใจว่าจะทำอะไร</h1>
|
||||||
<p class="eyebrow">Contact</p>
|
<p class="hero-lead">
|
||||||
<h1>ส่งโจทย์ให้เราดู แล้วค่อยตัดสินใจว่าจะทำอะไร</h1>
|
ไม่ต้องเตรียม brief สมบูรณ์ แค่เล่าว่าตอนนี้ธุรกิจติดตรงไหน เราจะช่วยดูว่าควรถามอะไรต่อและควรเริ่มจากจุดไหน
|
||||||
</div>
|
</p>
|
||||||
<p class="hero-lead">
|
|
||||||
ไม่ต้องเตรียม brief สมบูรณ์ แค่เล่าว่าตอนนี้ธุรกิจติดตรงไหน เราจะช่วยดูว่าควรถามอะไรต่อและควรเริ่มจากจุดไหน
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="page-section contact-layout">
|
<section class="page-section contact-layout">
|
||||||
@@ -24,7 +20,7 @@ import { problems } from '../data/site.js';
|
|||||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||||
<p class="eyebrow">Start here</p>
|
<p class="eyebrow">เริ่มต้นที่นี่</p>
|
||||||
<h2>เลือกปัญหาที่ใกล้ที่สุด</h2>
|
<h2>เลือกปัญหาที่ใกล้ที่สุด</h2>
|
||||||
<div class="contact-problem-list">
|
<div class="contact-problem-list">
|
||||||
{problems.map(([, label]) => <span>{label}</span>)}
|
{problems.map(([, label]) => <span>{label}</span>)}
|
||||||
@@ -33,7 +29,7 @@ import { problems } from '../data/site.js';
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<aside class="contact-info">
|
<aside class="contact-info">
|
||||||
<p class="eyebrow">Contact info</p>
|
<p class="eyebrow">ข้อมูลติดต่อ</p>
|
||||||
<h2>ช่องทางติดต่อ</h2>
|
<h2>ช่องทางติดต่อ</h2>
|
||||||
<dl>
|
<dl>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -7,16 +7,12 @@ import { faqs } from '../data/site.js';
|
|||||||
title="คำถามที่พบบ่อย | MoreminiMore"
|
title="คำถามที่พบบ่อย | MoreminiMore"
|
||||||
description="คำถามที่พบบ่อยเกี่ยวกับบริการ เว็บไซต์ การตลาด ระบบอัตโนมัติ AI ราคา และวิธีทำงานของ MoreminiMore"
|
description="คำถามที่พบบ่อยเกี่ยวกับบริการ เว็บไซต์ การตลาด ระบบอัตโนมัติ AI ราคา และวิธีทำงานของ MoreminiMore"
|
||||||
>
|
>
|
||||||
<section class="page-hero scene scene-light" data-scene="light">
|
<section class="page-hero scene scene-light hero-oversized" data-scene="light">
|
||||||
<div class="page-hero-grid">
|
<p class="eyebrow">คำถามที่พบบ่อย</p>
|
||||||
<div>
|
<h1>คำถามที่ควรถามก่อนเริ่มทำอะไรเพิ่ม</h1>
|
||||||
<p class="eyebrow">FAQ</p>
|
<p class="hero-lead">
|
||||||
<h1>คำถามที่ควรถามก่อนเริ่มทำอะไรเพิ่ม</h1>
|
ถ้ายังไม่แน่ใจว่าควรทำเว็บ ยิงแอด วางระบบ หรือใช้ AI ก่อน คำตอบเหล่านี้จะช่วยให้เห็นภาพเบื้องต้น
|
||||||
</div>
|
</p>
|
||||||
<p class="hero-lead">
|
|
||||||
ถ้ายังไม่แน่ใจว่าควรทำเว็บ ยิงแอด วางระบบ หรือใช้ AI ก่อน คำตอบเหล่านี้จะช่วยให้เห็นภาพเบื้องต้น
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="page-section">
|
<section class="page-section">
|
||||||
@@ -39,7 +35,7 @@ import { faqs } from '../data/site.js';
|
|||||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||||
<p class="eyebrow">Still unsure?</p>
|
<p class="eyebrow">ยังไม่แน่ใจ?</p>
|
||||||
<h2>ถ้าคำถามของคุณไม่อยู่ในนี้ ส่งโจทย์มาให้เราดูได้</h2>
|
<h2>ถ้าคำถามของคุณไม่อยู่ในนี้ ส่งโจทย์มาให้เราดูได้</h2>
|
||||||
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,453 +1,212 @@
|
|||||||
---
|
---
|
||||||
import '../styles/global.css';
|
import PageShell from '../components/PageShell.astro';
|
||||||
|
import { portfolio, process, problems, services } from '../data/site.js';
|
||||||
const formEndpoint = '';
|
|
||||||
|
|
||||||
const problems = [
|
|
||||||
['website_no_leads', 'เว็บมีอยู่แล้ว แต่ไม่ค่อยมีลูกค้าทัก'],
|
|
||||||
['ads_not_worth_it', 'ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม'],
|
|
||||||
['wrong_leads', 'มีคนทักมา แต่ไม่ใช่ลูกค้าที่ใช่'],
|
|
||||||
['slow_or_error_work', 'ทีมงานทำงานเดิม ๆ แต่ทำงานช้า หรือผิดพลาดบ่อย'],
|
|
||||||
['ai_not_sure', 'อยากใช้ AI แต่ไม่รู้เริ่มตรงไหน'],
|
|
||||||
['not_sure', 'ยังไม่แน่ใจว่าควรแก้อะไรก่อน'],
|
|
||||||
];
|
|
||||||
|
|
||||||
const services = [
|
|
||||||
{
|
|
||||||
name: 'Website Development',
|
|
||||||
slug: 'website-development',
|
|
||||||
headline: 'เว็บที่ช่วยให้ลูกค้ารู้ว่าควรทักเรื่องอะไร',
|
|
||||||
copy: 'เหมาะกับธุรกิจที่มีเว็บแล้วแต่ลูกค้ายังไม่ค่อยติดต่อ หรืออยากเริ่มเว็บใหม่ให้วัดผลได้ตั้งแต่วันแรก',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Marketing Consult',
|
|
||||||
slug: 'marketing-consult',
|
|
||||||
headline: 'การตลาดที่ใช้งบคุ้มขึ้นจากข้อมูลจริง',
|
|
||||||
copy: 'เหมาะกับธุรกิจที่ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม หรือมีคนทักมาแล้วไม่ใช่ลูกค้าที่ควรได้',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Automation Workflow',
|
|
||||||
slug: 'automation-workflow',
|
|
||||||
headline: 'ระบบที่ลดงานช้าและงานผิดพลาด',
|
|
||||||
copy: 'เหมาะกับทีมที่ทำงานเดิม ๆ ซ้ำทุกวัน ใช้เวลานาน หรือมีจุดผิดพลาดที่แก้ไม่จบ',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'AI Consult',
|
|
||||||
slug: 'ai-consult',
|
|
||||||
headline: 'AI ที่ช่วยทีมทำงาน ไม่ใช่แค่ของเล่นใหม่',
|
|
||||||
copy: 'เหมาะกับธุรกิจที่อยากใช้ AI แต่ยังไม่แน่ใจว่างานไหนควรเริ่มก่อนและใช้อย่างไรให้ปลอดภัย',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const portfolio = [
|
|
||||||
{
|
|
||||||
name: 'Jet Industries',
|
|
||||||
image: '/images/portfolio/jetindustries.png',
|
|
||||||
href: 'https://jetindustries.co.th',
|
|
||||||
tag: 'Featured credibility',
|
|
||||||
description: 'เว็บไซต์องค์กรผู้ผลิตพลาสติกฉีดขึ้นรูป ประสบการณ์กว่า 40 ปี',
|
|
||||||
featured: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'เทรนเนอร์ซันนี่',
|
|
||||||
image: '/images/portfolio/trainersunny.png',
|
|
||||||
href: 'https://trainersunny.com',
|
|
||||||
tag: 'Featured visual',
|
|
||||||
description: 'เว็บไซต์ personal brand และหลักสูตรอบรมที่มีภาพจำชัด',
|
|
||||||
featured: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Dealplustech',
|
|
||||||
image: '/images/portfolio/dealplustech.png',
|
|
||||||
href: 'https://www.dealplustech.co.th',
|
|
||||||
tag: 'Website Development',
|
|
||||||
description: 'เว็บไซต์ระบบน้ำและสุขภัณฑ์คุณภาพสูงสำหรับโรงงานและบ้านเรือน',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Underdog Marketing',
|
|
||||||
image: '/images/portfolio/underdog.png',
|
|
||||||
href: 'https://underdog.run',
|
|
||||||
tag: 'Website Development',
|
|
||||||
description: 'แพลตฟอร์มบทความการตลาดที่ใช้งานง่ายและ SEO friendly',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'ทวนทอง 99',
|
|
||||||
image: '/images/portfolio/tuanthong.png',
|
|
||||||
href: 'https://tuanthong99.com',
|
|
||||||
tag: 'E-commerce',
|
|
||||||
description: 'เว็บไซต์สินค้าอุปโภคบริโภคและสมุนไพรไทย',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'สำนักงานกฎหมาย ตถาตา',
|
|
||||||
image: '/images/portfolio/lawyernoom.png',
|
|
||||||
href: 'https://lawyernoom.com',
|
|
||||||
tag: 'Website Development',
|
|
||||||
description: 'เว็บไซต์สำนักงานกฎหมายที่เน้นความน่าเชื่อถือ',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const process = [
|
|
||||||
['เข้าใจธุรกิจ', 'ทำความรู้จักเป้าหมาย ลูกค้า และปัญหาที่เจอจริง'],
|
|
||||||
['ดูข้อมูล', 'เช็กเว็บ แอด ลูกค้า ขั้นตอนทำงาน หรือข้อมูลที่มีอยู่'],
|
|
||||||
['เลือกทางที่คุ้ม', 'เสนอสิ่งที่ควรทำก่อน ไม่ทำทุกอย่างพร้อมกัน'],
|
|
||||||
['ลงมือและวัดผล', 'ทำให้ใช้งานได้จริง แล้วดูผลเพื่อปรับต่อ'],
|
|
||||||
];
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<PageShell
|
||||||
<html lang="th">
|
title="MoreminiMore | เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า"
|
||||||
<head>
|
description="MoreminiMore ช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำให้คุ้มที่สุด"
|
||||||
<meta charset="UTF-8" />
|
>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
<section id="home" class="hero scene scene-light" data-scene="light">
|
||||||
<meta name="description" content="MoreminiMore ช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำให้คุ้มที่สุด" />
|
<div class="hero-grid">
|
||||||
<meta name="theme-color" content="#f8f5ea" />
|
<div class="hero-copy">
|
||||||
<title>MoreminiMore | ธุรกิจไม่ควรเสียเงินกับสิ่งที่ยังไม่รู้ว่าคุ้มไหม</title>
|
<p class="eyebrow">พาร์ทเนอร์สำหรับ SME ที่อยากตัดสินใจให้คุ้มขึ้น</p>
|
||||||
</head>
|
<h1 class="desktop-title">
|
||||||
<body>
|
<span>เป้าหมายของเราคือ<br>การเพิ่ม<span class="text-highlight">กำไร</span>ให้ลูกค้า</span>
|
||||||
<div class="background-stage" aria-hidden="true">
|
</h1>
|
||||||
<svg class="coded-background" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
|
<h1 class="mobile-title" aria-hidden="true">
|
||||||
<defs>
|
<span>เป้าหมาย</span>
|
||||||
<radialGradient id="Gradient1Home" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5">
|
<span>ของเราคือ</span>
|
||||||
<animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" />
|
<span>การเพิ่ม</span>
|
||||||
<stop offset="0%" stop-color="rgba(255, 0, 255, 1)" />
|
<span><span class="text-highlight">กำไร</span></span>
|
||||||
<stop offset="100%" stop-color="rgba(255, 0, 255, 0)" />
|
<span>ให้ลูกค้า</span>
|
||||||
</radialGradient>
|
</h1>
|
||||||
<radialGradient id="Gradient2Home" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5">
|
<p class="hero-lead">
|
||||||
<animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" />
|
เราช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำอย่างมีประสิทธิภาพ และเหมาะกับธุรกิจของคุณ
|
||||||
<stop offset="0%" stop-color="rgba(255, 255, 0, 1)" />
|
|
||||||
<stop offset="100%" stop-color="rgba(255, 255, 0, 0)" />
|
|
||||||
</radialGradient>
|
|
||||||
<radialGradient id="Gradient3Home" cx="50%" cy="50%" fx="0.836536%" fy="50%" r=".5">
|
|
||||||
<animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite" />
|
|
||||||
<stop offset="0%" stop-color="rgba(0, 255, 255, 1)" />
|
|
||||||
<stop offset="100%" stop-color="rgba(0, 255, 255, 0)" />
|
|
||||||
</radialGradient>
|
|
||||||
<radialGradient id="Gradient4Home" cx="50%" cy="50%" fx="4.56417%" fy="50%" r=".5">
|
|
||||||
<animate attributeName="fx" dur="23s" values="0%;5%;0%" repeatCount="indefinite" />
|
|
||||||
<stop offset="0%" stop-color="rgba(0, 255, 0, 1)" />
|
|
||||||
<stop offset="100%" stop-color="rgba(0, 255, 0, 0)" />
|
|
||||||
</radialGradient>
|
|
||||||
<radialGradient id="Gradient5Home" cx="50%" cy="50%" fx="2.65405%" fy="50%" r=".5">
|
|
||||||
<animate attributeName="fx" dur="24.5s" values="0%;5%;0%" repeatCount="indefinite" />
|
|
||||||
<stop offset="0%" stop-color="rgba(0, 0, 255, 1)" />
|
|
||||||
<stop offset="100%" stop-color="rgba(0, 0, 255, 0)" />
|
|
||||||
</radialGradient>
|
|
||||||
<radialGradient id="Gradient6Home" cx="50%" cy="50%" fx="0.981338%" fy="50%" r=".5">
|
|
||||||
<animate attributeName="fx" dur="25.5s" values="0%;5%;0%" repeatCount="indefinite" />
|
|
||||||
<stop offset="0%" stop-color="rgba(255, 0, 0, 1)" />
|
|
||||||
<stop offset="100%" stop-color="rgba(255, 0, 0, 0)" />
|
|
||||||
</radialGradient>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1Home)" transform="rotate(334.41 50 50)">
|
|
||||||
<animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite" />
|
|
||||||
<animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite" />
|
|
||||||
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="7s" repeatCount="indefinite" />
|
|
||||||
</rect>
|
|
||||||
<rect x="-2.17916%" y="35.4267%" width="100%" height="100%" fill="url(#Gradient2Home)" transform="rotate(255.072 50 50)">
|
|
||||||
<animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite" />
|
|
||||||
<animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite" />
|
|
||||||
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="12s" repeatCount="indefinite" />
|
|
||||||
</rect>
|
|
||||||
<rect x="9.00483%" y="14.5733%" width="100%" height="100%" fill="url(#Gradient3Home)" transform="rotate(139.903 50 50)">
|
|
||||||
<animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite" />
|
|
||||||
<animate attributeName="y" dur="12s" values="0%;25%;0%" repeatCount="indefinite" />
|
|
||||||
<animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="9s" repeatCount="indefinite" />
|
|
||||||
</rect>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<a class="skip-link" href="#main">ข้ามไปยังเนื้อหา</a>
|
|
||||||
|
|
||||||
<header class="site-nav liquid-glass liquidGlass-wrapper" data-nav>
|
|
||||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
|
||||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
|
||||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
|
||||||
<a class="brand" href="/" aria-label="MoreminiMore">
|
|
||||||
<img src="/images/logos/logo-long-black.png" width="205" height="36" alt="MoreminiMore" />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<button class="nav-toggle" type="button" aria-controls="nav-menu" aria-expanded="false" data-nav-toggle>
|
|
||||||
เมนู
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<nav id="nav-menu" class="nav-menu" aria-label="เมนูหลัก" data-nav-menu>
|
|
||||||
<a href="/">หน้าแรก</a>
|
|
||||||
<div class="nav-service">
|
|
||||||
<button type="button" aria-expanded="false" data-service-toggle>บริการ</button>
|
|
||||||
<div class="service-mega" data-service-menu>
|
|
||||||
{services.map((service) => (
|
|
||||||
<a href={`/services/${service.slug}/`}>
|
|
||||||
<strong>{service.name}</strong>
|
|
||||||
<span>{service.headline}</span>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a href="/portfolio/">ผลงาน</a>
|
|
||||||
<a href="/about/">เกี่ยวกับ</a>
|
|
||||||
<a href="/blog/">บทความ</a>
|
|
||||||
<a href="/contact/">ติดต่อ</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<button class="nav-cta" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section id="home" class="hero scene scene-light" data-scene="light">
|
|
||||||
<div class="hero-grid">
|
|
||||||
<div class="hero-copy">
|
|
||||||
<p class="eyebrow">พาร์ทเนอร์สำหรับ SME ที่อยากตัดสินใจให้คุ้มขึ้น</p>
|
|
||||||
<h1 class="desktop-title">
|
|
||||||
<span>ธุรกิจไม่ควร</span>
|
|
||||||
<span>เสียเงินกับสิ่งที่ยัง</span>
|
|
||||||
<span>ไม่รู้ว่าคุ้มไหม</span>
|
|
||||||
</h1>
|
|
||||||
<h1 class="mobile-title" aria-hidden="true">
|
|
||||||
<span>ธุรกิจ</span>
|
|
||||||
<span>ไม่ควร</span>
|
|
||||||
<span>เสียเงิน</span>
|
|
||||||
<span>กับสิ่งที่ยัง</span>
|
|
||||||
<span>ไม่รู้ว่า</span>
|
|
||||||
<span>คุ้มไหม</span>
|
|
||||||
</h1>
|
|
||||||
<p class="hero-lead">
|
|
||||||
เราช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำอย่างมีประสิทธิภาพ และเหมาะกับธุรกิจของคุณ
|
|
||||||
</p>
|
|
||||||
<div class="hero-actions">
|
|
||||||
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
|
||||||
<a class="button button-secondary" href="#portfolio">ดูผลงานก่อน</a>
|
|
||||||
</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>
|
|
||||||
<button class="text-link" type="button" data-open-lead>ขอให้ช่วยดูโจทย์</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="problem-strip">
|
|
||||||
<div>
|
|
||||||
<p class="eyebrow">Problem first</p>
|
|
||||||
<h2>คุณเล่าปัญหา เราช่วยหา service ที่เหมาะสม</h2>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
เว็บนี้ไม่เริ่มจากแพ็กเกจ เพราะธุรกิจแต่ละเจอปัญหาไม่เหมือนกัน ส่งโจทย์สั้น ๆ มาได้เลย แล้วเราจะช่วยดูว่าควรเริ่มจากเว็บ แอด ระบบทำงาน หรือ AI
|
|
||||||
</p>
|
</p>
|
||||||
</section>
|
<div class="hero-actions">
|
||||||
|
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
||||||
<section id="dataroot" class="case-section scene scene-dark" data-scene="dark">
|
<a class="button button-secondary" href="#portfolio">ดูผลงานก่อน</a>
|
||||||
<div class="section-heading">
|
|
||||||
<p class="eyebrow">Diagnosis story</p>
|
|
||||||
<h2>Dataroot: ก่อนแก้ ต้องรู้ก่อนว่าข้อมูลกำลังบอกอะไร</h2>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="case-grid">
|
<div class="hero-neural" data-depth-card>
|
||||||
<article class="case-story glass-panel liquid-glass liquidGlass-wrapper">
|
<canvas class="neural-canvas" aria-hidden="true"></canvas>
|
||||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
<div class="neural-scene">
|
||||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
<div class="neural-node node-center" data-node="center">
|
||||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
<span class="node-label">กำไร</span>
|
||||||
<div class="story-step">
|
<span class="node-sub">เป้าหมายของทุกธุรกิจ</span>
|
||||||
<span>01</span>
|
</div>
|
||||||
<h3>ปัญหา</h3>
|
<div class="neural-node neural-card node-marketing" data-node="marketing">
|
||||||
<p>ยิงโฆษณาและทำการตลาดอยู่แล้ว แต่ต้องดูให้ชัดว่าคนที่เข้ามาใช่ลูกค้าที่ควรได้หรือไม่</p>
|
<span class="card-tag">Marketing</span>
|
||||||
</div>
|
<span class="card-desc">เพิ่มรายได้</span>
|
||||||
<div class="story-step">
|
</div>
|
||||||
<span>02</span>
|
<div class="neural-node neural-card node-ai" data-node="ai">
|
||||||
<h3>สิ่งที่พบ</h3>
|
<span class="card-tag">AI</span>
|
||||||
<p>กลุ่มเป้าหมายและข้อความบางส่วนดึงความสนใจได้ แต่ยังไม่พาคนที่มี intent ตรงพอเข้ามา</p>
|
<span class="card-desc">ลดต้นทุนและเวลา</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="story-step">
|
<div class="neural-node neural-card node-biz" data-node="biz">
|
||||||
<span>03</span>
|
<span class="card-tag">Business Knowledge</span>
|
||||||
<h3>สิ่งที่ปรับ</h3>
|
<span class="card-desc">ลดความเสี่ยง</span>
|
||||||
<p>ปรับการมองกลุ่มเป้าหมายและการวัดผลจากข้อมูลจริง ไม่ใช่เลือกจากสิ่งที่ดูน่าจะคลิกง่าย</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<div class="case-proof" data-depth-card>
|
|
||||||
<img src="/images/portfolio/dataroot.png" alt="Dataroot website screenshot" loading="lazy" />
|
|
||||||
<div class="metric-card">
|
|
||||||
<strong>+373%</strong>
|
|
||||||
<span>impression</span>
|
|
||||||
</div>
|
|
||||||
<div class="metric-card">
|
|
||||||
<strong>+114.2%</strong>
|
|
||||||
<span>click</span>
|
|
||||||
</div>
|
|
||||||
<div class="metric-card">
|
|
||||||
<strong>-28.3%</strong>
|
|
||||||
<span>ad spend</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section id="services" class="services-section scene scene-light" data-scene="light">
|
<section class="problem-strip">
|
||||||
<div class="section-heading">
|
<div class="problem-strip-head">
|
||||||
<p class="eyebrow">Services</p>
|
<p class="eyebrow">เริ่มจากปัญหา</p>
|
||||||
<h2>บริการมีไว้ให้เราเลือกให้เหมาะกับปัญหา ไม่ใช่ให้คุณเดาเอง</h2>
|
<h2>คุณมีปัญหาเหล่านี้ไหม?</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="service-grid">
|
<div class="problem-sign-grid">
|
||||||
{services.map((service) => (
|
<div class="problem-sign">
|
||||||
<article class="service-card liquid-glass liquidGlass-wrapper">
|
<span class="problem-sign-num">01</span>
|
||||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
<span class="problem-sign-text">เว็บมีอยู่แล้ว แต่ไม่ค่อยมีลูกค้าทัก</span>
|
||||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
</div>
|
||||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
<div class="problem-sign">
|
||||||
<span>{service.name}</span>
|
<span class="problem-sign-num">02</span>
|
||||||
<h3>{service.headline}</h3>
|
<span class="problem-sign-text">ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม</span>
|
||||||
<p>{service.copy}</p>
|
</div>
|
||||||
</article>
|
<div class="problem-sign">
|
||||||
))}
|
<span class="problem-sign-num">03</span>
|
||||||
</div>
|
<span class="problem-sign-text">ทีมงานทำงานช้า หรือผิดพลาดบ่อย</span>
|
||||||
</section>
|
</div>
|
||||||
|
<div class="problem-sign">
|
||||||
|
<span class="problem-sign-num">04</span>
|
||||||
|
<span class="problem-sign-text">พนักงานลาออก พร้อมกับความรู้เกี่ยวกับลูกค้า</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section id="portfolio" class="portfolio-section scene scene-dark" data-scene="dark">
|
<p class="problem-closing">
|
||||||
<div class="section-heading">
|
ถ้าคุณมี 1 ใน 4 ปัญหานี้ — <strong>คุณคือคนที่เราอยากช่วย</strong>
|
||||||
<p class="eyebrow">Portfolio</p>
|
</p>
|
||||||
<h2>งานเว็บที่ต้องดูน่าเชื่อถือก่อน แล้วค่อยสวยแบบมีเหตุผล</h2>
|
</section>
|
||||||
<a class="section-link" href="/portfolio/">ดูผลงานทั้งหมด</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="portfolio-grid">
|
<section id="dataroot" class="case-section scene scene-dark" data-scene="dark">
|
||||||
{portfolio.slice(0, 5).map((item) => (
|
<div class="section-heading">
|
||||||
<a class:list={['portfolio-card', item.featured && 'featured']} href={item.href} target="_blank" rel="noopener">
|
<p class="eyebrow">กรณีศึกษา</p>
|
||||||
<img src={item.image} alt={`${item.name} website screenshot`} loading={item.featured ? 'eager' : 'lazy'} />
|
<div>
|
||||||
<div>
|
<h2>Dataroot</h2>
|
||||||
<span>{item.tag}</span>
|
<p>บริษัทให้บริการ ERP Software และการปรับแต่ ERP Software สำหรับองค์กรขนาดใหญ่</p>
|
||||||
<h3>{item.name}</h3>
|
</div>
|
||||||
<p>{item.description}</p>
|
</div>
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div class="portfolio-more">
|
|
||||||
<a class="button button-secondary" href="/portfolio/">ไปหน้า ผลงาน</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="process" class="process-section">
|
<div class="case-grid">
|
||||||
<div class="section-heading">
|
<article class="case-story glass-panel liquid-glass liquidGlass-wrapper">
|
||||||
<p class="eyebrow">How we work</p>
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||||
<h2>ไม่เริ่มจากขายของ เริ่มจากเข้าใจธุรกิจก่อน</h2>
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||||
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||||
|
<p class="case-story-title">เราทำอะไรบ้าง กับลูกค้าเจ้านี้</p>
|
||||||
|
<div class="story-step">
|
||||||
|
<span>01</span>
|
||||||
|
<h3>ปัญหา</h3>
|
||||||
|
<p>ยิงโฆษณาและทำการตลาดอยู่แล้ว แต่ต้องดูมีการใช้งบประมาณสูงมาก โดยลูกค้าที่ได้มาไม่คุ้มค่ากับงบประมาณที่จ่ายไป</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="process-grid">
|
<div class="story-step">
|
||||||
{process.map(([title, copy], index) => (
|
<span>02</span>
|
||||||
<article>
|
<h3>สิ่งที่พบ</h3>
|
||||||
<span class="step-number">{String(index + 1).padStart(2, '0')}</span>
|
<p>ตั้งค่าโฆษณากว้างมากเกินไป ทำให้เสียงบประมาณไปกับกลุ่มคนที่ไม่ใช้เป้าหมาย</p>
|
||||||
<h3>{title}</h3>
|
|
||||||
<p>{copy}</p>
|
|
||||||
</article>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div class="story-step">
|
||||||
|
<span>03</span>
|
||||||
|
<h3>สิ่งที่ปรับ</h3>
|
||||||
|
<p>ปรับการตั้งค่าโดยโฟกัส กลุ่มเป้าหมาย เพื่อให้โฆษณาไปแสดงเฉพาะกลุ่มคนที่น่าจะเป็นลูกค้า</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
<section class="final-cta">
|
<div class="case-proof" data-depth-card>
|
||||||
<div class="glass-panel liquid-glass liquidGlass-wrapper">
|
<img src="/images/portfolio/dataroot.png" alt="Dataroot website screenshot" loading="lazy" />
|
||||||
|
<div class="metric-card">
|
||||||
|
<strong>+373%</strong>
|
||||||
|
<span>impression</span>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card">
|
||||||
|
<strong>+114.2%</strong>
|
||||||
|
<span>click</span>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card">
|
||||||
|
<strong>-28.3%</strong>
|
||||||
|
<span>ad spend</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="services" class="services-section scene scene-light" data-scene="light">
|
||||||
|
<div class="section-heading">
|
||||||
|
<p class="eyebrow">บริการของเรา</p>
|
||||||
|
<h2>บริการเพื่อตอบโจทย์ปัญหาของคุณ</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-grid">
|
||||||
|
{services.map((service) => (
|
||||||
|
<article class="service-card liquid-glass liquidGlass-wrapper">
|
||||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||||
<p class="eyebrow">Start small</p>
|
<span>{service.name}</span>
|
||||||
<h2>ส่งโจทย์สั้น ๆ มาก่อนก็ได้ เดี๋ยวเราช่วยดูว่าควรเริ่มตรงไหน</h2>
|
<h3>{service.headline}</h3>
|
||||||
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
<p>{service.copy}</p>
|
||||||
</div>
|
<ul>
|
||||||
</section>
|
{service.approach.map((item) => <li>{item}</li>)}
|
||||||
</main>
|
</ul>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<button class="floating-cta" type="button" data-floating-cta data-open-lead>ส่งโจทย์ให้เราดู</button>
|
<section id="process" class="process-section">
|
||||||
|
<div class="section-heading">
|
||||||
|
<p class="eyebrow">วิธีการทำงาน</p>
|
||||||
|
<h2>กลยุทธ์และระบบงานของเรา สำหรับลูกค้าแต่ละรายจะไม่เหมือนกัน</h2>
|
||||||
|
</div>
|
||||||
|
<div class="process-grid">
|
||||||
|
{process.map(([title, copy], index) => (
|
||||||
|
<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>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="panel-backdrop" data-panel-backdrop></div>
|
<section id="portfolio" class="portfolio-section scene scene-dark" data-scene="dark">
|
||||||
<aside class="lead-panel liquid-glass liquidGlass-wrapper" aria-labelledby="lead-title" aria-hidden="true" data-lead-panel data-endpoint={formEndpoint}>
|
<div class="section-heading">
|
||||||
|
<p class="eyebrow">ผลงานของเรา</p>
|
||||||
|
<h2>ผลงานและลูกค้าบางส่วนของเรา</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="portfolio-grid">
|
||||||
|
{portfolio.filter(p => p.featured).map((item) => (
|
||||||
|
<a class:list={['portfolio-card', item.featured && 'featured']} href={item.href} target="_blank" rel="noopener noreferrer">
|
||||||
|
<img src={item.image} alt={`${item.name} website screenshot`} loading={item.featured ? 'eager' : 'lazy'} />
|
||||||
|
<div>
|
||||||
|
<span>{item.tag}</span>
|
||||||
|
<h3>{item.name}</h3>
|
||||||
|
<p>{item.description}</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div class="portfolio-more">
|
||||||
|
<a class="button button-primary" href="/portfolio/">ไปหน้า ผลงาน</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="final-cta">
|
||||||
|
<div class="glass-panel liquid-glass liquidGlass-wrapper">
|
||||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||||
<div class="panel-head">
|
<p class="eyebrow">เริ่มต้นง่าย ๆ</p>
|
||||||
<div>
|
<h2>ส่งโจทย์มาให้เราก่อนได้ คลิ๊กปุ่มด้านล่าง และกรอกแบบฟอร์ม</h2>
|
||||||
<p class="eyebrow">ส่งโจทย์ให้เราดู</p>
|
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
||||||
<h2 id="lead-title">เลือกปัญหาที่ใกล้ที่สุด แล้วเล่าเพิ่มสั้น ๆ</h2>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<button type="button" class="panel-close" aria-label="ปิดฟอร์ม" data-close-lead>ปิด</button>
|
</PageShell>
|
||||||
</div>
|
|
||||||
|
|
||||||
<form class="lead-form" data-lead-form>
|
|
||||||
<input class="honeypot" type="text" name="website" tabindex="-1" autocomplete="off" />
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend>ตอนนี้ติดเรื่องไหนอยู่?</legend>
|
|
||||||
<div class="chip-grid">
|
|
||||||
{problems.map(([value, label]) => (
|
|
||||||
<label class="chip">
|
|
||||||
<input type="checkbox" name="problems" value={value} />
|
|
||||||
<span>{label}</span>
|
|
||||||
</label>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
เล่าเพิ่มสั้น ๆ
|
|
||||||
<textarea name="message" rows="4" placeholder="เช่น ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม อยากรู้ว่าควรแก้อะไรก่อน"></textarea>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="field-row">
|
|
||||||
<label>
|
|
||||||
ชื่อ
|
|
||||||
<input name="name" type="text" autocomplete="name" required />
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
เบอร์โทร
|
|
||||||
<input name="phone" type="tel" autocomplete="tel" />
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
อีเมล
|
|
||||||
<input name="email" type="email" autocomplete="email" />
|
|
||||||
</label>
|
|
||||||
<p class="field-note">ใส่เบอร์โทรหรืออีเมลอย่างใดอย่างหนึ่งก็ได้</p>
|
|
||||||
|
|
||||||
<p class="form-status" data-form-status role="status"></p>
|
|
||||||
<button class="button button-primary" type="submit">ส่งโจทย์</button>
|
|
||||||
</form>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<svg class="glass-filter" aria-hidden="true" focusable="false">
|
|
||||||
<filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">
|
|
||||||
<feTurbulence type="fractalNoise" baseFrequency="0.01 0.01" numOctaves="1" seed="5" result="turbulence" />
|
|
||||||
<feComponentTransfer in="turbulence" result="mapped">
|
|
||||||
<feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />
|
|
||||||
<feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />
|
|
||||||
<feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />
|
|
||||||
</feComponentTransfer>
|
|
||||||
<feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />
|
|
||||||
<feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight">
|
|
||||||
<fePointLight x="-200" y="-200" z="300" />
|
|
||||||
</feSpecularLighting>
|
|
||||||
<feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />
|
|
||||||
<feDisplacementMap in="SourceGraphic" in2="softMap" scale="150" xChannelSelector="R" yChannelSelector="G" />
|
|
||||||
</filter>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import '../scripts/home.js';
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -7,70 +7,26 @@ import { portfolio } from '../data/site.js';
|
|||||||
title="ผลงาน | MoreminiMore"
|
title="ผลงาน | MoreminiMore"
|
||||||
description="ผลงานเว็บไซต์และเคสธุรกิจจริงของ MoreminiMore สำหรับ SME ที่ต้องการตัดสินใจจากงานจริง"
|
description="ผลงานเว็บไซต์และเคสธุรกิจจริงของ MoreminiMore สำหรับ SME ที่ต้องการตัดสินใจจากงานจริง"
|
||||||
>
|
>
|
||||||
<section class="page-hero scene scene-light" data-scene="light">
|
<section class="page-hero scene scene-light hero-oversized" data-scene="light">
|
||||||
<div class="page-hero-grid">
|
<p class="eyebrow">ผลงาน</p>
|
||||||
<div>
|
<h1>ผลงานจริงของเรา</h1>
|
||||||
<p class="eyebrow">Portfolio</p>
|
<p class="hero-lead">
|
||||||
<h1>ผลงานจริงที่เปิดดูเว็บจริงได้</h1>
|
ผลงานที่แสดงเป็นส่วนที่เปิดเผยได้ — บางโปรเจกต์มีข้อมูลลับของลูกค้า จึงไม่สามารถนำมาโชว์ได้
|
||||||
</div>
|
</p>
|
||||||
<p class="hero-lead">
|
|
||||||
เราเลือกโชว์งานที่ช่วยเล่าโจทย์ธุรกิจ ไม่ใช่แค่ภาพสวย เพราะงานที่ดีควรช่วยให้ลูกค้าตัดสินใจง่ายขึ้น
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="dataroot" class="case-section scene scene-dark" data-scene="dark">
|
<section class="portfolio-section scene scene-light portfolio-page" data-scene="light">
|
||||||
<div class="section-heading">
|
<div class="section-heading">
|
||||||
<p class="eyebrow">Featured case</p>
|
<p class="eyebrow">ผลงานทั้งหมด</p>
|
||||||
<h2>Dataroot: ก่อนแก้ ต้องรู้ก่อนว่าข้อมูลกำลังบอกอะไร</h2>
|
<h2>ผลงานเน้นการตอบโจทย์ธุรกิจ</h2>
|
||||||
</div>
|
<p class="portfolio-design-note">เราออกแบบตามวัตถุประสงค์ของลูกค้า ไม่ใช่แค่ความสวยหรือเทคโนโลยี — เพราะกลุ่มเป้าหมายต่างกัน ประสบการณ์ที่ดีสำคัญกว่าเทคนิคที่หวือหวา</p>
|
||||||
<div class="case-grid">
|
|
||||||
<article class="case-story 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>
|
|
||||||
<div class="story-step">
|
|
||||||
<span>01</span>
|
|
||||||
<h3>ปัญหา</h3>
|
|
||||||
<p>ยิงโฆษณาและทำการตลาดอยู่แล้ว แต่ต้องดูให้ชัดว่าคนที่เข้ามาใช่ลูกค้าที่ควรได้หรือไม่</p>
|
|
||||||
</div>
|
|
||||||
<div class="story-step">
|
|
||||||
<span>02</span>
|
|
||||||
<h3>สิ่งที่พบ</h3>
|
|
||||||
<p>กลุ่มเป้าหมายและข้อความบางส่วนดึงความสนใจได้ แต่ยังไม่พาคนที่มี intent ตรงพอเข้ามา</p>
|
|
||||||
</div>
|
|
||||||
<div class="story-step">
|
|
||||||
<span>03</span>
|
|
||||||
<h3>สิ่งที่ปรับ</h3>
|
|
||||||
<p>ปรับการมองกลุ่มเป้าหมายและการวัดผลจากข้อมูลจริง ไม่ใช่เลือกจากสิ่งที่ดูน่าจะคลิกง่าย</p>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<div class="case-proof" data-depth-card>
|
|
||||||
<img src="/images/portfolio/dataroot.png" alt="Dataroot website screenshot" loading="lazy" />
|
|
||||||
<div class="metric-card">
|
|
||||||
<strong>+373%</strong>
|
|
||||||
<span>impression</span>
|
|
||||||
</div>
|
|
||||||
<div class="metric-card">
|
|
||||||
<strong>+114.2%</strong>
|
|
||||||
<span>click</span>
|
|
||||||
</div>
|
|
||||||
<div class="metric-card">
|
|
||||||
<strong>-28.3%</strong>
|
|
||||||
<span>ad spend</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="portfolio-section scene scene-dark" data-scene="dark">
|
|
||||||
<div class="section-heading">
|
|
||||||
<p class="eyebrow">Selected work</p>
|
|
||||||
<h2>เว็บที่มีโจทย์ต่างกัน จึงต้องออกแบบต่างกัน</h2>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="portfolio-grid">
|
<div class="portfolio-grid">
|
||||||
{portfolio.filter((item) => item.name !== 'Dataroot').map((item) => (
|
{portfolio.map((item) => (
|
||||||
<a class={`portfolio-card ${item.featured ? 'featured' : ''}`} href={item.href} target="_blank" rel="noreferrer">
|
<a class={`portfolio-card ${item.featured ? 'featured' : ''} liquid-glass liquidGlass-wrapper`} href={item.href} target="_blank" rel="noopener noreferrer">
|
||||||
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||||
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||||
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||||
<img src={item.image} alt={`${item.name} website screenshot`} loading="lazy" />
|
<img src={item.image} alt={`${item.name} website screenshot`} loading="lazy" />
|
||||||
<div>
|
<div>
|
||||||
<span>{item.tag}</span>
|
<span>{item.tag}</span>
|
||||||
@@ -82,3 +38,73 @@ import { portfolio } from '../data/site.js';
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</PageShell>
|
</PageShell>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.portfolio-page {
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-hero-lead {
|
||||||
|
max-width: 52ch;
|
||||||
|
margin: 16px auto 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-page .eyebrow {
|
||||||
|
color: var(--muted);
|
||||||
|
border-color: rgb(19 18 13 / .10);
|
||||||
|
background: rgb(255 255 255 / .52);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-page .section-heading {
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-page .section-heading h2 {
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading .portfolio-design-note {
|
||||||
|
grid-column: 2;
|
||||||
|
margin: 6px 0 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-page .portfolio-card,
|
||||||
|
.portfolio-page .portfolio-card.featured {
|
||||||
|
grid-column: span 4;
|
||||||
|
border: 1px solid rgb(19 18 13 / .10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-page .portfolio-card h3 {
|
||||||
|
color: var(--ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-page .portfolio-card p {
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-page .portfolio-card span {
|
||||||
|
color: var(--muted);
|
||||||
|
-webkit-text-stroke: 0;
|
||||||
|
paint-order: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 920px) {
|
||||||
|
.portfolio-page .portfolio-card,
|
||||||
|
.portfolio-page .portfolio-card.featured {
|
||||||
|
grid-column: span 6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 620px) {
|
||||||
|
.portfolio-page .portfolio-card,
|
||||||
|
.portfolio-page .portfolio-card.featured {
|
||||||
|
grid-column: span 12;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
136
src/pages/privacy.astro
Normal file
136
src/pages/privacy.astro
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
---
|
||||||
|
import PageShell from '../components/PageShell.astro';
|
||||||
|
import LegalPageShell from '../components/LegalPageShell.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<PageShell
|
||||||
|
title="นโยบายความเป็นส่วนตัว | MoreminiMore"
|
||||||
|
description="นโยบายความเป็นส่วนตัวของ MoreminiMore — อธิบายข้อมูลที่เราเก็บ วิธีใช้ และสิทธิของท่านตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562"
|
||||||
|
>
|
||||||
|
<section class="page-hero scene scene-light hero-oversized" data-scene="light">
|
||||||
|
<p class="eyebrow">นโยบาย</p>
|
||||||
|
<h1>นโยบายความเป็นส่วนตัว</h1>
|
||||||
|
<p class="hero-lead">
|
||||||
|
เราให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน หน้านี้อธิบายข้อมูลที่เราเก็บ วิธีใช้ และสิทธิของท่านตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="page-section legal-section">
|
||||||
|
<LegalPageShell
|
||||||
|
railLabel="สรุปนโยบาย"
|
||||||
|
railEyebrow="สรุปสั้น ๆ"
|
||||||
|
railTitle="ข้อมูลที่คุณส่งให้เรา ใช้เพื่อคุยงานเท่านั้น"
|
||||||
|
railItems={[
|
||||||
|
'ไม่ขายข้อมูลให้บุคคลที่สาม',
|
||||||
|
'ไม่เก็บข้อมูลบัตรเครดิตบนเว็บนี้',
|
||||||
|
'ติดต่อขอลบหรือแก้ไขข้อมูลได้',
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<p><strong>MoreminiMore</strong> ("เรา") ให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน จึงได้จัดทำนโยบายความเป็นส่วนตัวฉบับนี้ขึ้นเพื่อชี้แจงเกี่ยวกับการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคล รวมถึงสิทธิต่าง ๆ ของท่านตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562</p>
|
||||||
|
|
||||||
|
<h2>1. ข้อมูลส่วนบุคคลที่เราเก็บรวบรวม</h2>
|
||||||
|
|
||||||
|
<p>เราเก็บรวบรวมข้อมูลส่วนบุคคลที่ท่านให้ไว้ผ่านช่องทางต่อไปนี้:</p>
|
||||||
|
|
||||||
|
<h3>1.1 แบบฟอร์มส่งโจทย์ (Lead Form)</h3>
|
||||||
|
<ul>
|
||||||
|
<li>ชื่อ-นามสกุล</li>
|
||||||
|
<li>หมายเลขโทรศัพท์ หรือ อีเมล (อย่างใดอย่างหนึ่ง)</li>
|
||||||
|
<li>ประเภทปัญหาทางธุรกิจที่ท่านเลือก</li>
|
||||||
|
<li>ข้อความหรือรายละเอียดที่ท่านเล่าให้เราฟัง</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>1.2 การติดต่อผ่านช่องทางอื่น</h3>
|
||||||
|
<ul>
|
||||||
|
<li>ข้อมูลที่ท่านให้เมื่อติดต่อเราผ่านอีเมล LINE หรือโทรศัพท์</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>1.3 ข้อมูลการใช้งาน</h3>
|
||||||
|
<ul>
|
||||||
|
<li>ข้อมูลการเข้าชมเว็บไซต์พื้นฐาน เช่น หน้าเว็บที่มีคนเข้าชม ระยะเวลาที่ใช้ในแต่ละหน้า (ผ่านเครื่องมือวิเคราะห์ที่ไม่ระบุตัวตน)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><strong>เราไม่เก็บข้อมูลทางการเงิน</strong> (เช่น ข้อมูลบัตรเครดิต) เพราะการชำระเงินไม่ได้ดำเนินการผ่านเว็บไซต์นี้</p>
|
||||||
|
|
||||||
|
<h2>2. วัตถุประสงค์ในการเก็บรวบรวมข้อมูล</h2>
|
||||||
|
|
||||||
|
<p>เราเก็บรวบรวมข้อมูลส่วนบุคคลเพื่อวัตถุประสงค์ดังต่อไปนี้:</p>
|
||||||
|
<ul>
|
||||||
|
<li>เพื่อติดต่อกลับและทำความเข้าใจโจทย์ธุรกิจของท่าน</li>
|
||||||
|
<li>เพื่อให้คำแนะนำและเสนอแนวทางที่เหมาะสมกับธุรกิจของท่าน</li>
|
||||||
|
<li>เพื่อสื่อสารและให้ข้อมูลเกี่ยวกับบริการของเราเมื่อท่านร้องขอ</li>
|
||||||
|
<li>เพื่อปรับปรุงคุณภาพเว็บไซต์และบริการของเรา</li>
|
||||||
|
<li>เพื่อปฏิบัติตามกฎหมายที่เกี่ยวข้อง</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>3. การใช้และเปิดเผยข้อมูลส่วนบุคคล</h2>
|
||||||
|
|
||||||
|
<p>เราจะไม่เปิดเผยข้อมูลส่วนบุคคลของท่านต่อบุคคลที่สาม เว้นแต่:</p>
|
||||||
|
<ul>
|
||||||
|
<li>ได้รับความยินยอมจากท่าน</li>
|
||||||
|
<li>จำเป็นต้องเปิดเผยเพื่อให้บริการตามคำขอของท่าน</li>
|
||||||
|
<li>กฎหมายกำหนดให้ต้องเปิดเผย</li>
|
||||||
|
<li>เพื่อป้องกันหรือระงับอันตรายต่อชีวิต สุขภาพ หรือทรัพย์สิน</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>เราไม่ขาย ให้เช่า หรือแลกเปลี่ยนข้อมูลส่วนบุคคลของท่านกับบุคคลที่สามเพื่อวัตถุประสงค์ทางการตลาด</p>
|
||||||
|
|
||||||
|
<h2>4. ระยะเวลาการเก็บรักษาข้อมูล</h2>
|
||||||
|
|
||||||
|
<p>เราเก็บรักษาข้อมูลส่วนบุคคลของท่านตราบเท่าที่จำเป็นเพื่อบรรลุวัตถุประสงค์ที่ระบุไว้ในนโยบายนี้ หรือตามที่กฎหมายกำหนด</p>
|
||||||
|
<p>ท่านสามารถขอให้เราลบหรือทำลายข้อมูลส่วนบุคคลของท่านได้ตามสิทธิ์ของท่านในข้อ 6</p>
|
||||||
|
|
||||||
|
<h2>5. การคุ้มครองข้อมูลส่วนบุคคล</h2>
|
||||||
|
|
||||||
|
<p>เรามีมาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อป้องกันการสูญหาย เข้าถึง ใช้ เปลี่ยนแปลง แก้ไข หรือเปิดเผยข้อมูลส่วนบุคคลโดยไม่ได้รับอนุญาต รวมถึง:</p>
|
||||||
|
<ul>
|
||||||
|
<li>การเข้ารหัสข้อมูลระหว่างการส่งผ่าน (HTTPS)</li>
|
||||||
|
<li>การจำกัดการเข้าถึงข้อมูลส่วนบุคคลเฉพาะผู้ที่จำเป็นต้องใช้ในการให้บริการ</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>6. คุกกี้ (Cookies)</h2>
|
||||||
|
|
||||||
|
<p>เว็บไซต์นี้อาจใช้คุกกี้พื้นฐานเพื่อ:</p>
|
||||||
|
<ul>
|
||||||
|
<li>จดจำการตั้งค่าการแสดงผลของท่าน</li>
|
||||||
|
<li>วิเคราะห์การใช้งานเว็บไซต์เพื่อการปรับปรุง</li>
|
||||||
|
</ul>
|
||||||
|
<p>ท่านสามารถตั้งค่าเบราว์เซอร์ของท่านเพื่อปฏิเสธคุกกี้บางประเภทหรือทั้งหมดได้</p>
|
||||||
|
|
||||||
|
<h2>7. สิทธิของเจ้าของข้อมูล</h2>
|
||||||
|
|
||||||
|
<p>ตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 ท่านมีสิทธิดังต่อไปนี้:</p>
|
||||||
|
|
||||||
|
<p><strong>7.1 สิทธิในการเข้าถึง</strong> — ท่านมีสิทธิขอเข้าถึงและขอรับสำเนาข้อมูลส่วนบุคคลของท่านที่เราเก็บไว้</p>
|
||||||
|
<p><strong>7.2 สิทธิในการแก้ไข</strong> — ท่านมีสิทธิขอให้เราแก้ไขข้อมูลส่วนบุคคลที่ไม่ถูกต้องหรือไม่สมบูรณ์</p>
|
||||||
|
<p><strong>7.3 สิทธิในการลบ</strong> — ท่านมีสิทธิขอให้เราลบข้อมูลส่วนบุคคลของท่านเมื่อไม่จำเป็นต้องเก็บรักษาไว้ต่อไป</p>
|
||||||
|
<p><strong>7.4 สิทธิในการระงับการใช้</strong> — ท่านมีสิทธิขอให้เราระงับการใช้ข้อมูลส่วนบุคคลของท่านในบางกรณี</p>
|
||||||
|
<p><strong>7.5 สิทธิในการคัดค้าน</strong> — ท่านมีสิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของท่าน</p>
|
||||||
|
<p><strong>7.6 สิทธิในการโอนย้าย</strong> — ท่านมีสิทธิขอรับข้อมูลส่วนบุคคลในรูปแบบที่สามารถอ่านได้ด้วยเครื่องมืออัตโนมัติ</p>
|
||||||
|
<p><strong>7.7 สิทธิในการถอนความยินยอม</strong> — ท่านมีสิทธิถอนความยินยอมที่ให้ไว้กับเราได้ตลอดเวลา</p>
|
||||||
|
<p><strong>7.8 สิทธิในการร้องเรียน</strong> — ท่านมีสิทธิร้องเรียนต่อสำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล หากเราละเมิดหรือไม่ปฏิบัติตามกฎหมายคุ้มครองข้อมูลส่วนบุคคล</p>
|
||||||
|
|
||||||
|
<h2>8. การติดต่อเรา</h2>
|
||||||
|
|
||||||
|
<p>หากท่านมีคำถาม ข้อสงสัย หรือต้องการใช้สิทธิใด ๆ ตามนโยบายนี้ กรุณาติดต่อ:</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<strong>MoreminiMore</strong><br />
|
||||||
|
อีเมล: <a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a><br />
|
||||||
|
โทรศัพท์: <a href="tel:+668****5945">080-995-5945</a><br />
|
||||||
|
LINE: <a href="https://line.me/ti/p/@moreminimore">@moreminimore</a><br />
|
||||||
|
ที่อยู่: 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>9. การเปลี่ยนแปลงนโยบาย</h2>
|
||||||
|
|
||||||
|
<p>เราอาจปรับปรุงนโยบายความเป็นส่วนตัวนี้เป็นครั้งคราว การเปลี่ยนแปลงจะมีผลเมื่อประกาศบนเว็บไซต์นี้ ท่านควรตรวจสอบนโยบายนี้เป็นระยะ</p>
|
||||||
|
|
||||||
|
<p><strong>วันที่มีผลบังคับใช้:</strong> 27 มิถุนายน 2569</p>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<p><em>นโยบายความเป็นส่วนตัวฉบับนี้จัดทำขึ้นตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562</em></p>
|
||||||
|
</LegalPageShell>
|
||||||
|
</section>
|
||||||
|
</PageShell>
|
||||||
@@ -7,16 +7,12 @@ import { services, process } from '../data/site.js';
|
|||||||
title="บริการ | MoreminiMore"
|
title="บริการ | MoreminiMore"
|
||||||
description="บริการของ MoreminiMore สำหรับ SME ที่ต้องการทำเว็บ การตลาด ระบบอัตโนมัติ และ AI โดยเริ่มจากข้อมูลจริงก่อนเลือกวิธีทำ"
|
description="บริการของ MoreminiMore สำหรับ SME ที่ต้องการทำเว็บ การตลาด ระบบอัตโนมัติ และ AI โดยเริ่มจากข้อมูลจริงก่อนเลือกวิธีทำ"
|
||||||
>
|
>
|
||||||
<section class="page-hero scene scene-light" data-scene="light">
|
<section class="page-hero scene scene-light hero-oversized" data-scene="light">
|
||||||
<div class="page-hero-grid">
|
<p class="eyebrow">บริการ</p>
|
||||||
<div>
|
<h1>เลือกบริการจากปัญหา ไม่ใช่จากชื่อแพ็กเกจ</h1>
|
||||||
<p class="eyebrow">Services</p>
|
<p class="hero-lead">
|
||||||
<h1>เลือกบริการจากปัญหา ไม่ใช่จากชื่อแพ็กเกจ</h1>
|
เราช่วยดูโจทย์ธุรกิจก่อน แล้วเลือกว่าควรเริ่มจากเว็บ การตลาด ระบบทำงาน หรือ AI จุดไหนคุ้มที่สุดสำหรับตอนนี้
|
||||||
</div>
|
</p>
|
||||||
<p class="hero-lead">
|
|
||||||
เราช่วยดูโจทย์ธุรกิจก่อน แล้วเลือกว่าควรเริ่มจากเว็บ การตลาด ระบบทำงาน หรือ AI จุดไหนคุ้มที่สุดสำหรับตอนนี้
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="page-section">
|
<section class="page-section">
|
||||||
@@ -42,7 +38,7 @@ import { services, process } from '../data/site.js';
|
|||||||
|
|
||||||
<section class="page-section page-section-tight">
|
<section class="page-section page-section-tight">
|
||||||
<div class="section-heading">
|
<div class="section-heading">
|
||||||
<p class="eyebrow">How we work</p>
|
<p class="eyebrow">วิธีการทำงาน</p>
|
||||||
<h2>ทำให้ง่ายต่อการตัดสินใจ ไม่ใช่ทำให้ดูเยอะ</h2>
|
<h2>ทำให้ง่ายต่อการตัดสินใจ ไม่ใช่ทำให้ดูเยอะ</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="process-grid">
|
<div class="process-grid">
|
||||||
@@ -61,7 +57,7 @@ import { services, process } from '../data/site.js';
|
|||||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||||
<p class="eyebrow">Next step</p>
|
<p class="eyebrow">ขั้นตอนถัดไป</p>
|
||||||
<h2>ไม่แน่ใจว่าควรเริ่มบริการไหน ส่งโจทย์มาให้เราดูก่อนได้</h2>
|
<h2>ไม่แน่ใจว่าควรเริ่มบริการไหน ส่งโจทย์มาให้เราดูก่อนได้</h2>
|
||||||
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -34,9 +34,9 @@ const relatedServices = services.filter((item) => item.slug !== service.slug);
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="page-section service-story-section">
|
<section class="page-section service-story-section scene scene-light" data-scene="light">
|
||||||
<div class="section-heading">
|
<div class="section-heading">
|
||||||
<p class="eyebrow">Diagnosis first</p>
|
<p class="eyebrow">วินิจฉัยก่อน</p>
|
||||||
<h2>เริ่มจากดูว่าโจทย์นี้ควรแก้ตรงไหนก่อน</h2>
|
<h2>เริ่มจากดูว่าโจทย์นี้ควรแก้ตรงไหนก่อน</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="service-story-grid">
|
<div class="service-story-grid">
|
||||||
@@ -63,7 +63,7 @@ const relatedServices = services.filter((item) => item.slug !== service.slug);
|
|||||||
|
|
||||||
<section class="case-section service-proof-section scene scene-dark" data-scene="dark">
|
<section class="case-section service-proof-section scene scene-dark" data-scene="dark">
|
||||||
<div class="section-heading">
|
<div class="section-heading">
|
||||||
<p class="eyebrow">What matters</p>
|
<p class="eyebrow">สิ่งที่สำคัญ</p>
|
||||||
<h2>{service.objective}</h2>
|
<h2>{service.objective}</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="service-proof-grid">
|
<div class="service-proof-grid">
|
||||||
@@ -87,9 +87,9 @@ const relatedServices = services.filter((item) => item.slug !== service.slug);
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="page-section page-section-tight">
|
<section class="page-section page-section-tight scene scene-light" data-scene="light">
|
||||||
<div class="section-heading">
|
<div class="section-heading">
|
||||||
<p class="eyebrow">Other services</p>
|
<p class="eyebrow">บริการอื่น ๆ</p>
|
||||||
<h2>บางโจทย์อาจต้องเริ่มจากบริการอื่นก่อน</h2>
|
<h2>บางโจทย์อาจต้องเริ่มจากบริการอื่นก่อน</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="related-service-grid">
|
<div class="related-service-grid">
|
||||||
@@ -111,7 +111,7 @@ const relatedServices = services.filter((item) => item.slug !== service.slug);
|
|||||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||||
<p class="eyebrow">Next step</p>
|
<p class="eyebrow">ขั้นตอนถัดไป</p>
|
||||||
<h2>เล่าโจทย์ของคุณก่อน แล้วเราช่วยดูว่าบริการนี้ใช่จุดเริ่มต้นไหม</h2>
|
<h2>เล่าโจทย์ของคุณก่อน แล้วเราช่วยดูว่าบริการนี้ใช่จุดเริ่มต้นไหม</h2>
|
||||||
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
111
src/pages/terms.astro
Normal file
111
src/pages/terms.astro
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
---
|
||||||
|
import PageShell from '../components/PageShell.astro';
|
||||||
|
import LegalPageShell from '../components/LegalPageShell.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<PageShell
|
||||||
|
title="เงื่อนไขการใช้งาน | MoreminiMore"
|
||||||
|
description="เงื่อนไขการใช้งานเว็บไซต์ MoreminiMore — การยอมรับเงื่อนไข ทรัพย์สินทางปัญญา ข้อห้าม และข้อจำกัดความรับผิด"
|
||||||
|
>
|
||||||
|
<section class="page-hero scene scene-light hero-oversized" data-scene="light">
|
||||||
|
<p class="eyebrow">เงื่อนไข</p>
|
||||||
|
<h1>เงื่อนไขการใช้งาน</h1>
|
||||||
|
<p class="hero-lead">
|
||||||
|
การเข้าใช้งานเว็บไซต์นี้ถือว่าท่านยอมรับเงื่อนไขด้านล่าง กรุณาอ่านก่อนใช้งานหรือส่งข้อมูลผ่านเว็บไซต์
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="page-section legal-section">
|
||||||
|
<LegalPageShell
|
||||||
|
railLabel="สรุปเงื่อนไข"
|
||||||
|
railEyebrow="สรุปสั้น ๆ"
|
||||||
|
railTitle="เว็บนี้ใช้เพื่อให้ข้อมูลก่อนเริ่มคุยงาน"
|
||||||
|
railItems={[
|
||||||
|
'รายละเอียดงานจริงยืนยันใน proposal',
|
||||||
|
'ห้าม scrape หรือใช้เนื้อหาเชิงพาณิชย์โดยไม่ขออนุญาต',
|
||||||
|
'ข้อกฎหมายสำคัญควรปรึกษาผู้เชี่ยวชาญเพิ่ม',
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<p><strong>เว็บไซต์:</strong> moreminimore.com</p>
|
||||||
|
<p><strong>มีผลบังคับใช้วันที่:</strong> 27 มิถุนายน 2569</p>
|
||||||
|
|
||||||
|
<h2>1. การยอมรับเงื่อนไข</h2>
|
||||||
|
|
||||||
|
<p>ด้วยการเข้าถึงและใช้งานเว็บไซต์ moreminimore.com ("เว็บไซต์") ของ MoreminiMore ("เรา") ท่าน ("ผู้ใช้") ยอมรับและตกลงที่จะถูกผูกมัดด้วยเงื่อนไขการใช้งานฉบับนี้</p>
|
||||||
|
<p>หากท่านไม่ยอมรับเงื่อนไขนี้ กรุณาหยุดใช้งานเว็บไซต์</p>
|
||||||
|
<p>เราขอสงวนสิทธิในการแก้ไขเงื่อนไขนี้เมื่อใดก็ได้ การแก้ไขจะมีผลเมื่อประกาศบนเว็บไซต์ การใช้งานต่อเนื่องหลังการแก้ไขถือว่าท่านยอมรับการเปลี่ยนแปลง</p>
|
||||||
|
|
||||||
|
<h2>2. เกี่ยวกับเรา</h2>
|
||||||
|
|
||||||
|
<p>MoreminiMore เป็นที่ปรึกษาด้านเว็บไซต์ การตลาดออนไลน์ AI และระบบอัตโนมัติสำหรับ SME เราเริ่มจากดูข้อมูลจริงก่อนเสนอแนวทางที่เหมาะสมกับธุรกิจของลูกค้าแต่ละราย</p>
|
||||||
|
|
||||||
|
<h2>3. ข้อมูลบนเว็บไซต์</h2>
|
||||||
|
|
||||||
|
<p>เนื้อหาบนเว็บไซต์นี้ใช้เพื่อให้ข้อมูลเบื้องต้นเกี่ยวกับบริการ แนวทางทำงาน และตัวอย่างผลงานของเรา รายละเอียดจริงของงาน ขอบเขต ราคา และระยะเวลาจะยืนยันเป็นรายโปรเจกต์หลังจากพูดคุยโจทย์กับลูกค้า</p>
|
||||||
|
<p>เราไม่รับประกันว่าข้อมูลทั้งหมดบนเว็บไซต์จะถูกต้อง ครบถ้วน หรือทันสมัยตลอดเวลา ข้อมูลอาจมีการเปลี่ยนแปลงโดยไม่ต้องแจ้งให้ทราบล่วงหน้า</p>
|
||||||
|
|
||||||
|
<h2>4. ทรัพย์สินทางปัญญา</h2>
|
||||||
|
|
||||||
|
<p>เนื้อหา ข้อความ กราฟิก โลโก้ และการออกแบบบนเว็บไซต์เป็นทรัพย์สินของเรา ห้ามทำซ้ำ ดัดแปลง แจกจ่าย หรือใช้ในเชิงพาณิชย์โดยไม่ได้รับอนุญาตเป็นลายลักษณ์อักษรจากเรา</p>
|
||||||
|
<p>ผลงานที่แสดงในหน้า Portfolio เป็นทรัพย์สินของลูกค้าแต่ละราย การแสดงผลงานได้รับอนุญาตจากลูกค้าแล้ว</p>
|
||||||
|
|
||||||
|
<h2>5. ข้อห้ามในการใช้งาน</h2>
|
||||||
|
|
||||||
|
<p>ท่านตกลงที่จะไม่:</p>
|
||||||
|
<ul>
|
||||||
|
<li>ใช้เว็บไซต์เพื่อกิจกรรมที่ผิดกฎหมาย</li>
|
||||||
|
<li>พยายามเข้าถึงระบบโดยไม่ได้รับอนุญาต</li>
|
||||||
|
<li>รบกวนหรือขัดขวางการทำงานของเว็บไซต์</li>
|
||||||
|
<li>ส่งสแปม มัลแวร์ หรือเนื้อหาที่เป็นอันตรายผ่านแบบฟอร์มบนเว็บไซต์</li>
|
||||||
|
<li>ละเมิดสิทธิทางปัญญาของผู้อื่น</li>
|
||||||
|
<li>คัดลอกหรือดึงข้อมูลบนเว็บไซต์ด้วยวิธีการอัตโนมัติ (scraping) โดยไม่ได้รับอนุญาต</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>6. การปฏิเสธความรับผิด</h2>
|
||||||
|
|
||||||
|
<p>บริการและข้อมูลบนเว็บไซต์ให้บริการ "ตามที่เป็น" (as-is) และ "ตามที่มี" (as-available):</p>
|
||||||
|
<ul>
|
||||||
|
<li>เราไม่รับประกันว่าเว็บไซต์จะปราศจากข้อผิดพลาด ทำงานต่อเนื่อง หรือตรงตามความต้องการของท่านทุกประการ</li>
|
||||||
|
<li>เราไม่รับผิดชอบต่อความเสียหายใด ๆ ที่เกิดจากการใช้งานหรือไม่สามารถใช้งานเว็บไซต์นี้ได้</li>
|
||||||
|
<li>เราไม่รับผิดชอบต่อเนื้อหาของเว็บไซต์ภายนอกที่ลิงก์มาจากเว็บไซต์นี้</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>7. การส่งข้อมูลผ่านเว็บไซต์</h2>
|
||||||
|
|
||||||
|
<p>เมื่อท่านส่งข้อมูลผ่านแบบฟอร์มบนเว็บไซต์:</p>
|
||||||
|
<ul>
|
||||||
|
<li>ท่านรับประกันว่าข้อมูลที่ให้เป็นความจริงและเป็นของท่านเอง</li>
|
||||||
|
<li>เราใช้ข้อมูลตามที่ระบุใน <a href="/privacy/">นโยบายความเป็นส่วนตัว</a></li>
|
||||||
|
<li>การส่งข้อมูลผ่านแบบฟอร์มไม่ถือเป็นข้อผูกมัดหรือสัญญาระหว่างท่านกับเรา จนกว่าจะมีการตกลงเป็นลายลักษณ์อักษร</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>8. ลิงก์ไปยังเว็บไซต์ภายนอก</h2>
|
||||||
|
|
||||||
|
<p>เว็บไซต์นี้อาจมีลิงก์ไปยังเว็บไซต์ภายนอก เราไม่รับผิดชอบต่อเนื้อหาหรือนโยบายความเป็นส่วนตัวของเว็บไซต์เหล่านั้น การคลิกลิงก์ภายนอกถือเป็นความเสี่ยงของท่านเอง</p>
|
||||||
|
|
||||||
|
<h2>9. การเปลี่ยนแปลงบริการ</h2>
|
||||||
|
|
||||||
|
<p>เราขอสงวนสิทธิในการปรับปรุง เปลี่ยนแปลง หรือระงับการให้บริการบางส่วนหรือทั้งหมดของเว็บไซต์ โดยไม่ต้องแจ้งให้ทราบล่วงหน้า</p>
|
||||||
|
|
||||||
|
<h2>10. กฎหมายที่ใช้บังคับ</h2>
|
||||||
|
|
||||||
|
<p>เงื่อนไขการใช้งานฉบับนี้อยู่ภายใต้การควบคุมและตีความตามกฎหมายแห่งราชอาณาจักรไทย</p>
|
||||||
|
|
||||||
|
<h2>11. การติดต่อ</h2>
|
||||||
|
|
||||||
|
<p>หากมีคำถามเกี่ยวกับเงื่อนไขนี้ กรุณาติดต่อ:</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<strong>MoreminiMore</strong><br />
|
||||||
|
อีเมล: <a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a><br />
|
||||||
|
โทรศัพท์: <a href="tel:+668****5945">080-995-5945</a><br />
|
||||||
|
LINE: <a href="https://line.me/ti/p/@moreminimore">@moreminimore</a><br />
|
||||||
|
ที่อยู่: 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<p><em>หากมีข้อสงสัยเกี่ยวกับข้อกฎหมาย กรุณาปรึกษาที่ปรึกษากฎหมาย</em></p>
|
||||||
|
</LegalPageShell>
|
||||||
|
</section>
|
||||||
|
</PageShell>
|
||||||
@@ -179,3 +179,167 @@ form?.addEventListener('submit', async (event) => {
|
|||||||
setStatus('ส่งไม่สำเร็จ กรุณาลองใหม่อีกครั้ง', 'error');
|
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
|
||||||
|
// Coordinates are relative to heroNeural container
|
||||||
|
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 };
|
||||||
|
|
||||||
|
// All neural nodes are circular — use circle intersection
|
||||||
|
const r = Math.min(hw, hh);
|
||||||
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
return {
|
||||||
|
x: cx + (dx / dist) * r,
|
||||||
|
y: cy + (dy / dist) * r
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Magnetic field time counter
|
||||||
|
let magTime = 0;
|
||||||
|
|
||||||
|
// Draw connections with magnetic field effects
|
||||||
|
function drawConnections() {
|
||||||
|
magTime++;
|
||||||
|
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;
|
||||||
|
|
||||||
|
// Magnetic ripple rings from center
|
||||||
|
for (let r = 0; r < 4; r++) {
|
||||||
|
const radius = 95 + r * 28 + (magTime * 0.03) % 28;
|
||||||
|
const alpha = Math.max(0, 0.22 - r * 0.05 - ((magTime * 0.03) % 28) / 130);
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
|
||||||
|
ctx.strokeStyle = `rgba(19, 18, 13, ${alpha})`;
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
);
|
||||||
|
|
||||||
|
const dx = endPt.x - startPt.x;
|
||||||
|
const dy = endPt.y - startPt.y;
|
||||||
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
|
||||||
|
// Main connection line
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(startPt.x, startPt.y);
|
||||||
|
ctx.lineTo(endPt.x, endPt.y);
|
||||||
|
ctx.strokeStyle = 'rgba(19, 18, 13, 0.3)';
|
||||||
|
ctx.lineWidth = 2.5;
|
||||||
|
ctx.lineCap = 'round';
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// Field curve arcs on both sides (magnetic field lines)
|
||||||
|
for (let side = -1; side <= 1; side += 2) {
|
||||||
|
const offset = side * 18;
|
||||||
|
const midX = startPt.x + dx * 0.5 + (-dy / dist) * offset;
|
||||||
|
const midY = startPt.y + dy * 0.5 + (dx / dist) * offset;
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(startPt.x, startPt.y);
|
||||||
|
ctx.quadraticCurveTo(midX, midY, endPt.x, endPt.y);
|
||||||
|
ctx.strokeStyle = 'rgba(19, 18, 13, 0.08)';
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
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) * 6;
|
||||||
|
targetRotateX = (y - 0.5) * -6;
|
||||||
|
});
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user