feat: major content & layout overhaul across all sections
- Problem strip: 4 sign cards with closing statement - Dataroot section: rebranded as case study with new content - Services: 2×2 content-rich cards with bullet lists, updated copy - Process: moved above portfolio, new strategy-focused copy - Portfolio: 9 items with correct tags, uniform cards, light theme - SEO: OG tags, canonical, favicons, robots.txt, sitemap, 404 - Backdrop: lighter white for lead panel readability - Footer, LegalPages component, various text refinements - Fix CSS syntax error in neural hero hover state
This commit is contained in:
Kunthawat Greethong
@@ -2,6 +2,7 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
export default defineConfig({
|
||||
site: 'https://moreminimore.com',
|
||||
output: 'static',
|
||||
image: { layout: 'constrained', responsiveStyles: true },
|
||||
devToolbar: { enabled: false },
|
||||
|
||||
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>
|
||||
@@ -13,14 +13,21 @@ const currentYear = new Date().getFullYear();
|
||||
</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>
|
||||
<span class="footer-copy">© {currentYear} MoreminiMore</span>
|
||||
</div>
|
||||
|
||||
<div class="footer-legal">
|
||||
<a href="/privacy/">ความเป็นส่วนตัว</a>
|
||||
<span aria-hidden="true">·</span>
|
||||
<a href="/terms/">เงื่อนไขการใช้งาน</a>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span>© {currentYear} MoreminiMore</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -51,11 +58,21 @@ const currentYear = new Date().getFullYear();
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -3,9 +3,12 @@ import '../styles/global.css';
|
||||
import Footer from './Footer.astro';
|
||||
import { formEndpoint, problems, services } from '../data/site.js';
|
||||
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
|
||||
|
||||
const {
|
||||
title = 'MoreminiMore',
|
||||
description = 'MoreminiMore ช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ',
|
||||
image = '/images/logos/logo-long-black.png',
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
@@ -17,6 +20,37 @@ const {
|
||||
<meta name="description" content={description} />
|
||||
<meta name="theme-color" content="#f8f5ea" />
|
||||
<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>
|
||||
<body>
|
||||
<div class="background-stage" aria-hidden="true">
|
||||
|
||||
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 = [
|
||||
['website_no_leads', 'เว็บมีอยู่แล้ว แต่ไม่ค่อยมีลูกค้าทัก'],
|
||||
@@ -15,11 +18,11 @@ export const services = [
|
||||
slug: 'website-development',
|
||||
badge: 'พัฒนาเว็บไซต์',
|
||||
objective: 'ทำเว็บให้ขายได้',
|
||||
headline: 'เว็บที่ช่วยให้ลูกค้ารู้ว่าควรทักเรื่องอะไร',
|
||||
copy: 'เหมาะกับธุรกิจที่มีเว็บแล้วแต่ลูกค้ายังไม่ค่อยติดต่อ หรืออยากเริ่มเว็บใหม่ให้วัดผลได้ตั้งแต่วันแรก',
|
||||
headline: 'เว็บไชต์ที่ช่วยหาลีดหรือช่วยให้จำแบรนด์',
|
||||
copy: 'เหมาะกับธุรกิจที่มีเว็บแล้วแต่ลูกค้ายังไม่ค่อยติดต่อ หรืออยากเริ่มเว็บใหม่ให้วัดผลได้ตั้งแต่วันแรก รวมถึงธุรกิจที่มีปัญหาเรื่อง SEO และ GEO',
|
||||
detail: 'เริ่มจากถามว่าเว็บนี้ทำเพื่ออะไร ขายของ เก็บ lead หรือสร้างความน่าเชื่อถือ แล้วออกแบบหน้าและข้อความให้ทำหน้าที่นั้นได้จริง',
|
||||
painPoints: ['เว็บดูมีอยู่ แต่ลูกค้ายังไม่รู้ว่าควรทักเรื่องอะไร', 'หน้าเว็บไม่ช่วยคัด lead หรืออธิบายข้อเสนอให้ชัด', 'อยากเริ่มเว็บใหม่ให้พร้อมวัดผลตั้งแต่วันแรก'],
|
||||
approach: ['วาง message และ flow จากโจทย์ธุรกิจ', 'ออกแบบหน้าให้ตอบคำถามลูกค้าก่อนตัดสินใจ', 'ทำเว็บ Astro หรือ WordPress ตามความเหมาะสมของงาน'],
|
||||
approach: ['เว็บไซต์เน้นตอบโจทย์ธุรกิจ เช่น การหาลีด หรือ การสร้าง Awareness', 'เว็บไชต์แบบ Responsive พร้อมระบบ SEO และ GEO', 'ระบบเว็บไชต์เน้นการใช้งานง่าย ให้ลูกค้าสามารถแก้ไขได้เอง'],
|
||||
deliverables: ['โครงหน้าและ copy หลัก', 'เว็บไซต์ responsive พร้อมใช้งาน', 'พื้นฐาน SEO และ analytics ที่จำเป็น'],
|
||||
proof: 'เหมาะกับธุรกิจที่ต้องใช้เว็บไซต์เป็นฐานความน่าเชื่อถือและช่องทางรับ lead',
|
||||
},
|
||||
@@ -28,11 +31,11 @@ export const services = [
|
||||
slug: 'marketing-consult',
|
||||
badge: 'ที่ปรึกษาการตลาดออนไลน์',
|
||||
objective: 'เพิ่มยอดขาย',
|
||||
headline: 'การตลาดที่ใช้งบคุ้มขึ้นจากข้อมูลจริง',
|
||||
copy: 'เหมาะกับธุรกิจที่ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม หรือมีคนทักมาแล้วไม่ใช่ลูกค้าที่ควรได้',
|
||||
headline: 'วางกลยุทธ์การตลาดจากสถิติ',
|
||||
copy: 'เหมาะกับธุรกิจที่ยิงโฆษณาอยู่ แต่ยอดขายไม่คุ้ม หรือมีคนทักมาแล้วไม่ใช่ลูกค้าที่ควรได้ รวมถึงธุรกิจที่ยิงโฆษณา โดยไม่รู้ว่าแอคที่ยิงนั้นคุ้มค่าหรือยัง?',
|
||||
detail: 'ดูสถิติคนเข้าเว็บ คนคลิกโฆษณา ยอดขาย และกลุ่มลูกค้าก่อน แล้วค่อยเลือกช่องทาง ข้อความ และงบประมาณที่ควรใช้',
|
||||
painPoints: ['ยิงแอดแล้วมีคนคลิก แต่ยอดขายไม่คุ้ม', 'มี lead เข้ามา แต่คุณภาพลูกค้ายังไม่ตรง', 'ไม่แน่ใจว่างบควรอยู่ที่ช่องทางไหน'],
|
||||
approach: ['ดูข้อมูลแอด เว็บ และยอดขายเท่าที่มี', 'แยกปัญหาระหว่าง traffic, offer, landing page และ sales process', 'เสนอสิ่งที่ควรปรับก่อนใช้งบเพิ่ม'],
|
||||
approach: ['วางระบบเก็บข้อมูลทางสถิติสำหรับเว็บไชต์, โฆษณา และยอดขาย', 'การวางกลยุทธ์จะใช้ข้อมูลสถิติเป็นพื้นฐาน', 'แต่ละช่องทางและแต่ละกลุ่มลูกค้าจะมีกลยุทธ์แตกต่างกัน'],
|
||||
deliverables: ['diagnosis จากข้อมูลจริง', 'แผนปรับกลุ่มเป้าหมายและข้อความ', 'แนวทางวัดผลที่ช่วยดูคุณภาพลูกค้า'],
|
||||
proof: 'เหมาะกับธุรกิจที่มี activity การตลาดอยู่แล้ว แต่อยากรู้ว่าเงินหายไปตรงไหน',
|
||||
},
|
||||
@@ -41,11 +44,11 @@ export const services = [
|
||||
slug: 'automation-workflow',
|
||||
badge: 'วางระบบอัตโนมัติ',
|
||||
objective: 'ลดต้นทุนและเวลา',
|
||||
headline: 'ระบบที่ลดงานช้าและงานผิดพลาด',
|
||||
copy: 'เหมาะกับทีมที่ทำงานเดิม ๆ ซ้ำทุกวัน ใช้เวลานาน หรือมีจุดผิดพลาดที่แก้ไม่จบ',
|
||||
headline: 'วางระบบงานให้มีความรวดเร็วและลดความผิดพลาด',
|
||||
copy: 'เหมาะกับธุรกิจที่ยังใช้ระบบงานที่เน้นแรงงานคนมาก ซึ่งช้าและมีโอกาสผิดพลาดสูง',
|
||||
detail: 'เริ่มจากดู workflow ปัจจุบันว่าอะไรซ้ำ ทำมือ หรือเสียเวลา แล้วเลือกว่าจะใช้ n8n ระบบเฉพาะทาง หรือ AI ช่วยในจุดไหน',
|
||||
painPoints: ['ทีมทำงานซ้ำ ๆ และเสียเวลากับขั้นตอนเดิม', 'ข้อมูลกระจัดกระจาย ต้องคอย copy หรือส่งต่อเอง', 'งานผิดพลาดจากการทำมือเกิดซ้ำ'],
|
||||
approach: ['วาด workflow ปัจจุบันให้เห็นจุดเสียเวลา', 'เลือก automation เฉพาะจุดที่คุ้มก่อน', 'ออกแบบให้ทีมใช้งานง่ายและตรวจสอบได้'],
|
||||
approach: ['งานที่มีการทำซ้ำ จะมีระบบงานมาแทนที่ทั้งหมด', 'เลือกระบบงานที่เหมาะสม กับความต้องการของลูกค้า และพฤติกรรมองค์กร', 'ระบบงานจะไม่เน้นการปรับพฤติกรรมการทำงาน แต่จะประสานหรือเป็นหนึ่งเดียวแทน'],
|
||||
deliverables: ['workflow map', 'ระบบ automation หรือ integration ตาม scope', 'คู่มือใช้งานและจุดตรวจสอบ'],
|
||||
proof: 'เหมาะกับธุรกิจที่มีทีมทำงานซ้ำทุกวัน และอยากลดเวลาหรือความผิดพลาดก่อนขยายทีม',
|
||||
},
|
||||
@@ -54,11 +57,11 @@ export const services = [
|
||||
slug: 'ai-consult',
|
||||
badge: 'ที่ปรึกษาด้าน AI',
|
||||
objective: 'รักษาความรู้ขององค์กร',
|
||||
headline: 'AI ที่ช่วยทีมทำงาน ไม่ใช่แค่ของเล่นใหม่',
|
||||
copy: 'เหมาะกับธุรกิจที่อยากใช้ AI แต่ยังไม่แน่ใจว่างานไหนควรเริ่มก่อนและใช้อย่างไรให้ปลอดภัย',
|
||||
headline: 'ระบบงานที่ผสาน AI เป็นส่วนหนึ่งในระบบ',
|
||||
copy: 'เหมาะกับธุรกิจที่อยากใช้ AI ให้เกิดประโยชน์สูงสุด และไม่ต้องการให้ความรู้อยู่กับพนักงานเท่านั้น',
|
||||
detail: 'เลือกโมเดลและวิธีใช้ให้เหมาะกับงานจริง โดยเฉพาะงานที่ต้องรักษาความรู้และความลับขององค์กร',
|
||||
painPoints: ['อยากใช้ AI แต่ยังไม่รู้ว่างานไหนคุ้มที่สุด', 'ทีมลองเครื่องมือหลายตัวแต่ยังไม่เชื่อมกับงานจริง', 'มีความรู้สำคัญอยู่กับคนหรือเอกสารกระจัดกระจาย'],
|
||||
approach: ['เลือก use case ที่กระทบงานจริงก่อน', 'วางวิธีใช้ AI ที่เหมาะกับระดับความลับของข้อมูล', 'ช่วยทีมใช้ AI แบบตรวจสอบได้ ไม่ใช่ปล่อยให้เดาเอง'],
|
||||
approach: ['ความรู้ที่พนักงานมี จะถูกเก็บเป็นความรู้ขององค์กร', 'พนักงานจะใช้ AI เป็นส่วนหนึ่งในการทำงาน', 'ข้อมูลที่เป้นความลับจะมีระบบงานเฉพาะ'],
|
||||
deliverables: ['AI use case roadmap', 'prototype หรือ workflow ที่ใช้ได้จริง', 'แนวทางรักษาความรู้และข้อมูลขององค์กร'],
|
||||
proof: 'เหมาะกับองค์กรที่อยากใช้ AI เพื่อช่วยคนทำงาน ไม่ใช่แค่ซื้อเครื่องมือใหม่',
|
||||
},
|
||||
@@ -69,32 +72,40 @@ export const portfolio = [
|
||||
name: 'Dataroot',
|
||||
image: '/images/portfolio/dataroot.png',
|
||||
href: 'https://erp.dataroot.asia',
|
||||
tag: 'Marketing diagnosis',
|
||||
description: 'เคสปรับการมองข้อมูลและกลุ่มเป้าหมายก่อนตัดสินใจใช้งบ',
|
||||
tag: 'Marketing Consult',
|
||||
description: 'บริษัทให้บริการ ERP Software และการปรับแต่ง ERP Software สำหรับองค์กรขนาดใหญ่',
|
||||
featured: true,
|
||||
},
|
||||
{
|
||||
name: 'Jet Industries',
|
||||
image: '/images/portfolio/jetindustries.png',
|
||||
href: 'https://jetindustries.co.th',
|
||||
tag: 'Corporate website',
|
||||
tag: 'Website Development',
|
||||
description: 'เว็บไซต์องค์กรผู้ผลิตพลาสติกฉีดขึ้นรูป ประสบการณ์กว่า 40 ปี',
|
||||
featured: true,
|
||||
},
|
||||
{
|
||||
name: 'เทรนเนอร์ซันนี่',
|
||||
image: '/images/portfolio/trainersunny.png',
|
||||
href: 'https://trainersunny.com',
|
||||
tag: 'Personal brand',
|
||||
description: 'เว็บไซต์ personal brand และหลักสูตรอบรมที่มีภาพจำชัด',
|
||||
featured: true,
|
||||
},
|
||||
{
|
||||
name: 'Dealplustech',
|
||||
image: '/images/portfolio/dealplustech.png',
|
||||
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',
|
||||
description: 'เว็บไซต์ระบบน้ำและสุขภัณฑ์คุณภาพสูงสำหรับโรงงานและบ้านเรือน',
|
||||
description: 'เว็บไซต์ผลิตภัณฑ์แคปซูลเลือดจระเข้เพื่อสุขภาพ',
|
||||
featured: true,
|
||||
},
|
||||
{
|
||||
name: 'เทรนเนอร์ซันนี่',
|
||||
image: '/images/portfolio/trainersunny.png',
|
||||
href: 'https://trainersunny.com',
|
||||
tag: 'Website Development',
|
||||
description: 'เว็บไซต์ personal brand และหลักสูตรอบรมสำหรับเทรนเนอร์ฟิตเนส',
|
||||
},
|
||||
{
|
||||
name: 'Underdog Marketing',
|
||||
@@ -107,23 +118,30 @@ export const portfolio = [
|
||||
name: 'ทวนทอง 99',
|
||||
image: '/images/portfolio/tuanthong.png',
|
||||
href: 'https://tuanthong99.com',
|
||||
tag: 'E-commerce',
|
||||
description: 'เว็บไซต์สินค้าอุปโภคบริโภคและสมุนไพรไทย',
|
||||
tag: 'Website Development',
|
||||
description: 'เว็บไซต์จำหน่ายสินค้าอุปโภคบริโภคและสมุนไพรไทย',
|
||||
},
|
||||
{
|
||||
name: 'สำนักงานกฎหมาย ตถาตา',
|
||||
image: '/images/portfolio/lawyernoom.png',
|
||||
href: 'https://lawyernoom.com',
|
||||
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 faqs = [
|
||||
@@ -155,29 +173,57 @@ export const faqs = [
|
||||
{
|
||||
category: 'หลังส่งมอบ',
|
||||
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>
|
||||
@@ -60,6 +60,47 @@ import { process } from '../data/site.js';
|
||||
</div>
|
||||
</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">
|
||||
<div class="glass-panel liquid-glass liquidGlass-wrapper">
|
||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||
@@ -71,3 +112,95 @@ import { process } from '../data/site.js';
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
|
||||
@@ -31,7 +31,7 @@ const posts = (await getCollection('blog', ({ data }) => !data.draft)).sort(
|
||||
<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>{post.data.category}</span>
|
||||
<span class="eyebrow">{post.data.category}</span>
|
||||
<h2>{post.data.title}</h2>
|
||||
<p>{post.data.description}</p>
|
||||
<a class="text-link" href={`/blog/${post.id}/`}>อ่านบทความ</a>
|
||||
|
||||
@@ -23,18 +23,18 @@ const formattedDate = new Intl.DateTimeFormat('th-TH', {
|
||||
<article class="blog-article">
|
||||
<header class="blog-article-hero scene scene-light" data-scene="light">
|
||||
<div class="blog-article-heading">
|
||||
<a class="text-link" href="/blog/">บทความทั้งหมด</a>
|
||||
<p class="eyebrow">{post.data.category} · {formattedDate}</p>
|
||||
<a class="blog-back-link" href="/blog/">← บทความทั้งหมด</a>
|
||||
<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>
|
||||
<p>{post.data.description}</p>
|
||||
<p class="blog-article-lead">{post.data.description}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="blog-article-shell">
|
||||
<div class="blog-prose 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="blog-prose">
|
||||
<Content />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,468 +1,212 @@
|
||||
---
|
||||
import '../styles/global.css';
|
||||
import Footer from '../components/Footer.astro';
|
||||
|
||||
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 = [
|
||||
['เข้าใจธุรกิจ', 'ทำความรู้จักเป้าหมาย ลูกค้า และปัญหาที่เจอจริง'],
|
||||
['ดูข้อมูล', 'เช็กเว็บ แอด ลูกค้า ขั้นตอนทำงาน หรือข้อมูลที่มีอยู่'],
|
||||
['เลือกทางที่คุ้ม', 'เสนอสิ่งที่ควรทำก่อน ไม่ทำทุกอย่างพร้อมกัน'],
|
||||
['ลงมือและวัดผล', 'ทำให้ใช้งานได้จริง แล้วดูผลเพื่อปรับต่อ'],
|
||||
];
|
||||
import PageShell from '../components/PageShell.astro';
|
||||
import { portfolio, process, problems, services } from '../data/site.js';
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="th">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta name="description" content="MoreminiMore ช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำให้คุ้มที่สุด" />
|
||||
<meta name="theme-color" content="#f8f5ea" />
|
||||
<title>MoreminiMore | เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="background-stage" aria-hidden="true">
|
||||
<svg class="coded-background" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
|
||||
<defs>
|
||||
<radialGradient id="Gradient1Home" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5">
|
||||
<animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" />
|
||||
<stop offset="0%" stop-color="rgba(255, 0, 255, 1)" />
|
||||
<stop offset="100%" stop-color="rgba(255, 0, 255, 0)" />
|
||||
</radialGradient>
|
||||
<radialGradient id="Gradient2Home" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5">
|
||||
<animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" />
|
||||
<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>
|
||||
<PageShell
|
||||
title="MoreminiMore | เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า"
|
||||
description="MoreminiMore ช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ เพื่อเลือกสิ่งที่ควรทำให้คุ้มที่สุด"
|
||||
>
|
||||
<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>เป้าหมายของเราคือ<br>การเพิ่ม<span class="text-highlight">กำไร</span>ให้ลูกค้า</span>
|
||||
</h1>
|
||||
<h1 class="mobile-title" aria-hidden="true">
|
||||
<span>เป้าหมาย</span>
|
||||
<span>ของเราคือ</span>
|
||||
<span>การเพิ่ม</span>
|
||||
<span><span class="text-highlight">กำไร</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>
|
||||
|
||||
<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 class="hero-neural" data-depth-card>
|
||||
<canvas class="neural-canvas" aria-hidden="true"></canvas>
|
||||
<div class="neural-scene">
|
||||
<div class="neural-node node-center" data-node="center">
|
||||
<span class="node-label">กำไร</span>
|
||||
<span class="node-sub">เป้าหมายของทุกธุรกิจ</span>
|
||||
</div>
|
||||
<div class="neural-node neural-card node-marketing" data-node="marketing">
|
||||
<span class="card-tag">Marketing</span>
|
||||
<span class="card-desc">เพิ่มรายได้</span>
|
||||
</div>
|
||||
<div class="neural-node neural-card node-ai" data-node="ai">
|
||||
<span class="card-tag">AI</span>
|
||||
<span class="card-desc">ลดต้นทุนและเวลา</span>
|
||||
</div>
|
||||
<div class="neural-node neural-card node-biz" data-node="biz">
|
||||
<span class="card-tag">Business Knowledge</span>
|
||||
<span class="card-desc">ลดความเสี่ยง</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="problem-strip">
|
||||
<div class="problem-strip-head">
|
||||
<p class="eyebrow">เริ่มจากปัญหา</p>
|
||||
<h2>คุณมีปัญหาเหล่านี้ไหม?</h2>
|
||||
</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>
|
||||
<div class="problem-sign-grid">
|
||||
<div class="problem-sign">
|
||||
<span class="problem-sign-num">01</span>
|
||||
<span class="problem-sign-text">เว็บมีอยู่แล้ว แต่ไม่ค่อยมีลูกค้าทัก</span>
|
||||
</div>
|
||||
<div class="problem-sign">
|
||||
<span class="problem-sign-num">02</span>
|
||||
<span class="problem-sign-text">ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม</span>
|
||||
</div>
|
||||
<div class="problem-sign">
|
||||
<span class="problem-sign-num">03</span>
|
||||
<span class="problem-sign-text">ทีมงานทำงานช้า หรือผิดพลาดบ่อย</span>
|
||||
</div>
|
||||
<div class="problem-sign">
|
||||
<span class="problem-sign-num">04</span>
|
||||
<span class="problem-sign-text">พนักงานลาออก พร้อมกับความรู้เกี่ยวกับลูกค้า</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="nav-toggle" type="button" aria-controls="nav-menu" aria-expanded="false" data-nav-toggle>
|
||||
เมนู
|
||||
</button>
|
||||
<p class="problem-closing">
|
||||
ถ้าคุณมี 1 ใน 4 ปัญหานี้ — <strong>คุณคือคนที่เราอยากช่วย</strong>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section id="dataroot" class="case-section scene scene-dark" data-scene="dark">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">กรณีศึกษา</p>
|
||||
<div>
|
||||
<h2>Dataroot</h2>
|
||||
<p>บริษัทให้บริการ ERP Software และการปรับแต่ ERP Software สำหรับองค์กรขนาดใหญ่</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<p class="case-story-title">เราทำอะไรบ้าง กับลูกค้าเจ้านี้</p>
|
||||
<div class="story-step">
|
||||
<span>01</span>
|
||||
<h3>ปัญหา</h3>
|
||||
<p>ยิงโฆษณาและทำการตลาดอยู่แล้ว แต่ต้องดูมีการใช้งบประมาณสูงมาก โดยลูกค้าที่ได้มาไม่คุ้มค่ากับงบประมาณที่จ่ายไป</p>
|
||||
</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>เป้าหมายของเราคือ<br>การเพิ่ม<span class="text-highlight">กำไร</span>ให้ลูกค้า</span>
|
||||
</h1>
|
||||
<h1 class="mobile-title" aria-hidden="true">
|
||||
<span>เป้าหมาย</span>
|
||||
<span>ของเราคือ</span>
|
||||
<span>การเพิ่ม</span>
|
||||
<span><span class="text-highlight">กำไร</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-neural" data-depth-card>
|
||||
<canvas class="neural-canvas" aria-hidden="true"></canvas>
|
||||
<div class="neural-scene">
|
||||
<!-- Center node: กำไร -->
|
||||
<div class="neural-node node-center" data-node="center">
|
||||
<span class="node-label">กำไร</span>
|
||||
<span class="node-sub">เป้าหมายของทุกธุรกิจ</span>
|
||||
</div>
|
||||
|
||||
<!-- Outer node: Marketing -->
|
||||
<div class="neural-node neural-card node-marketing" data-node="marketing">
|
||||
<span class="card-tag">Marketing</span>
|
||||
<span class="card-desc">เพิ่มรายได้</span>
|
||||
</div>
|
||||
|
||||
<!-- Outer node: AI -->
|
||||
<div class="neural-node neural-card node-ai" data-node="ai">
|
||||
<span class="card-tag">AI</span>
|
||||
<span class="card-desc">ลดต้นทุนและเวลา</span>
|
||||
</div>
|
||||
|
||||
<!-- Outer node: Business Knowledge -->
|
||||
<div class="neural-node neural-card node-biz" data-node="biz">
|
||||
<span class="card-tag">Business Knowledge</span>
|
||||
<span class="card-desc">ลดความเสี่ยง</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="problem-strip">
|
||||
<div>
|
||||
<p class="eyebrow">เริ่มจากปัญหา</p>
|
||||
<h2>คุณเล่าปัญหา เราช่วยหา service ที่เหมาะสม</h2>
|
||||
<div class="story-step">
|
||||
<span>02</span>
|
||||
<h3>สิ่งที่พบ</h3>
|
||||
<p>ตั้งค่าโฆษณากว้างมากเกินไป ทำให้เสียงบประมาณไปกับกลุ่มคนที่ไม่ใช้เป้าหมาย</p>
|
||||
</div>
|
||||
<div class="problem-strip-content">
|
||||
<p>
|
||||
เว็บนี้ไม่เริ่มจากแพ็กเกจ เพราะธุรกิจแต่ละเจอปัญหาไม่เหมือนกัน ส่งโจทย์สั้น ๆ มาได้เลย แล้วเราจะช่วยดูว่าควรเริ่มจากเว็บ แอด ระบบทำงาน หรือ AI
|
||||
</p>
|
||||
<ul class="problem-list">
|
||||
<li>เว็บมีอยู่แล้ว แต่ไม่ค่อยมีลูกค้าทัก</li>
|
||||
<li>ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม</li>
|
||||
<li>ทีมงานทำงานช้า หรือผิดพลาดบ่อย</li>
|
||||
</ul>
|
||||
<div class="story-step">
|
||||
<span>03</span>
|
||||
<h3>สิ่งที่ปรับ</h3>
|
||||
<p>ปรับการตั้งค่าโดยโฟกัส กลุ่มเป้าหมาย เพื่อให้โฆษณาไปแสดงเฉพาะกลุ่มคนที่น่าจะเป็นลูกค้า</p>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<section id="dataroot" class="case-section scene scene-dark" data-scene="dark">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">ขั้นตอนวินิจฉัย</p>
|
||||
<h2>Dataroot: ก่อนแก้ ต้องรู้ก่อนว่าข้อมูลกำลังบอกอะไร</h2>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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="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 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-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
<span>{service.name}</span>
|
||||
<h3>{service.headline}</h3>
|
||||
<p>{service.copy}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="portfolio" class="portfolio-section scene scene-dark" data-scene="dark">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">ผลงาน</p>
|
||||
<h2>งานเว็บที่ต้องดูน่าเชื่อถือก่อน แล้วค่อยสวยแบบมีเหตุผล</h2>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-grid">
|
||||
{portfolio.slice(0, 5).map((item) => (
|
||||
<a class:list={['portfolio-card', item.featured && 'featured']} href={item.href} target="_blank" rel="noopener">
|
||||
<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 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>
|
||||
|
||||
<section class="final-cta">
|
||||
<div class="glass-panel liquid-glass liquidGlass-wrapper">
|
||||
<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-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
<p class="eyebrow">เริ่มต้นง่าย ๆ</p>
|
||||
<h2>ส่งโจทย์สั้น ๆ มาก่อนก็ได้ เดี๋ยวเราช่วยดูว่าควรเริ่มตรงไหน</h2>
|
||||
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<span>{service.name}</span>
|
||||
<h3>{service.headline}</h3>
|
||||
<p>{service.copy}</p>
|
||||
<ul>
|
||||
{service.approach.map((item) => <li>{item}</li>)}
|
||||
</ul>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
<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>
|
||||
|
||||
<button class="floating-cta" type="button" data-floating-cta data-open-lead>ส่งโจทย์ให้เราดู</button>
|
||||
<section id="portfolio" class="portfolio-section scene scene-dark" data-scene="dark">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">ผลงานของเรา</p>
|
||||
<h2>ผลงานและลูกค้าบางส่วนของเรา</h2>
|
||||
</div>
|
||||
|
||||
<div class="panel-backdrop" data-panel-backdrop></div>
|
||||
<aside class="lead-panel liquid-glass liquidGlass-wrapper" aria-labelledby="lead-title" aria-hidden="true" data-lead-panel data-endpoint={formEndpoint}>
|
||||
<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-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
<div class="panel-head">
|
||||
<div>
|
||||
<p class="eyebrow">ส่งโจทย์ให้เราดู</p>
|
||||
<h2 id="lead-title">เลือกปัญหาที่ใกล้ที่สุด แล้วเล่าเพิ่มสั้น ๆ</h2>
|
||||
</div>
|
||||
<button type="button" class="panel-close" aria-label="ปิดฟอร์ม" data-close-lead>ปิด</button>
|
||||
</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>
|
||||
<p class="eyebrow">เริ่มต้นง่าย ๆ</p>
|
||||
<h2>ส่งโจทย์มาให้เราก่อนได้ คลิ๊กปุ่มด้านล่าง และกรอกแบบฟอร์ม</h2>
|
||||
<button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
||||
</div>
|
||||
</section>
|
||||
</PageShell>
|
||||
|
||||
@@ -19,58 +19,17 @@ import { portfolio } from '../data/site.js';
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="dataroot" class="case-section scene scene-dark" data-scene="dark">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">ผลงานเด่น</p>
|
||||
<h2>Dataroot: ก่อนแก้ ต้องรู้ก่อนว่าข้อมูลกำลังบอกอะไร</h2>
|
||||
</div>
|
||||
<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">
|
||||
<section class="portfolio-section scene scene-light portfolio-page" data-scene="light">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">ผลงานทั้งหมด</p>
|
||||
<h2>เว็บที่มีโจทย์ต่างกัน จึงต้องออกแบบต่างกัน</h2>
|
||||
</div>
|
||||
<div class="portfolio-grid">
|
||||
{portfolio.filter((item) => item.name !== 'Dataroot').map((item) => (
|
||||
<a class={`portfolio-card ${item.featured ? 'featured' : ''}`} href={item.href} target="_blank" rel="noreferrer">
|
||||
{portfolio.map((item) => (
|
||||
<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" />
|
||||
<div>
|
||||
<span>{item.tag}</span>
|
||||
@@ -82,3 +41,57 @@ import { portfolio } from '../data/site.js';
|
||||
</div>
|
||||
</section>
|
||||
</PageShell>
|
||||
|
||||
<style>
|
||||
.portfolio-page {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@@ -1,25 +1,140 @@
|
||||
---
|
||||
import PageShell from '../components/PageShell.astro';
|
||||
import LegalPageShell from '../components/LegalPageShell.astro';
|
||||
---
|
||||
|
||||
<PageShell
|
||||
title="นโยบายความเป็นส่วนตัว | MoreminiMore"
|
||||
description="นโยบายความเป็นส่วนตัวของ MoreminiMore"
|
||||
description="นโยบายความเป็นส่วนตัวของ MoreminiMore — อธิบายข้อมูลที่เราเก็บ วิธีใช้ และสิทธิของท่านตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562"
|
||||
>
|
||||
<section class="page-hero scene scene-light" data-scene="light">
|
||||
<div class="page-hero-grid">
|
||||
<div>
|
||||
<p class="eyebrow">นโยบาย</p>
|
||||
<h1>นโยบายความเป็นส่วนตัว</h1>
|
||||
</div>
|
||||
<p class="hero-lead">
|
||||
เราให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน หน้านี้อธิบายข้อมูลที่เราเก็บ วิธีใช้ และสิทธิของท่านตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="page-section">
|
||||
<div class="glass-panel liquid-glass liquidGlass-wrapper">
|
||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
<p>หน้านี้กำลังอัพเดท กรุณาติดต่อเราหากมีคำถามเกี่ยวกับนโยบายความเป็นส่วนตัว</p>
|
||||
</div>
|
||||
<section 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>
|
||||
|
||||
@@ -1,25 +1,115 @@
|
||||
---
|
||||
import PageShell from '../components/PageShell.astro';
|
||||
import LegalPageShell from '../components/LegalPageShell.astro';
|
||||
---
|
||||
|
||||
<PageShell
|
||||
title="เงื่อนไขการใช้งาน | MoreminiMore"
|
||||
description="เงื่อนไขการใช้งานของ MoreminiMore"
|
||||
description="เงื่อนไขการใช้งานเว็บไซต์ MoreminiMore — การยอมรับเงื่อนไข ทรัพย์สินทางปัญญา ข้อห้าม และข้อจำกัดความรับผิด"
|
||||
>
|
||||
<section class="page-hero scene scene-light" data-scene="light">
|
||||
<div class="page-hero-grid">
|
||||
<div>
|
||||
<p class="eyebrow">เงื่อนไข</p>
|
||||
<h1>เงื่อนไขการใช้งาน</h1>
|
||||
</div>
|
||||
<p class="hero-lead">
|
||||
การเข้าใช้งานเว็บไซต์นี้ถือว่าท่านยอมรับเงื่อนไขด้านล่าง กรุณาอ่านก่อนใช้งานหรือส่งข้อมูลผ่านเว็บไซต์
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="page-section">
|
||||
<div class="glass-panel liquid-glass liquidGlass-wrapper">
|
||||
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
||||
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
||||
<p>หน้านี้กำลังอัพเดท กรุณาติดต่อเราหากมีคำถามเกี่ยวกับเงื่อนไขการใช้งาน</p>
|
||||
</div>
|
||||
<section 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>
|
||||
|
||||
@@ -594,6 +594,18 @@ flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.blog-card .eyebrow {
|
||||
width: fit-content;
|
||||
color: var(--ink);
|
||||
font-size: 12px;
|
||||
letter-spacing: .14em;
|
||||
}
|
||||
|
||||
.page-section .blog-card .eyebrow,
|
||||
.page-section-tight .blog-card .eyebrow {
|
||||
color: rgb(255 255 255 / .72);
|
||||
}
|
||||
|
||||
.detail-card .text-link {
|
||||
width: fit-content;
|
||||
}
|
||||
@@ -815,6 +827,11 @@ color: var(--muted);
|
||||
|
||||
.node-center:hover {
|
||||
transform: translate(-50%, -50%) translateZ(20px) scale(1.08);
|
||||
box-shadow:
|
||||
0 0 0 18px rgb(254 212 0 / .12),
|
||||
0 0 80px rgb(254 212 0 / .25),
|
||||
0 0 150px rgb(254 180 0 / .10);
|
||||
}
|
||||
|
||||
@keyframes magnetPulse {
|
||||
0%, 100% {
|
||||
@@ -830,11 +847,6 @@ color: var(--muted);
|
||||
0 0 150px rgb(254 180 0 / .12);
|
||||
}
|
||||
}
|
||||
box-shadow:
|
||||
0 0 0 18px rgb(254 212 0 / .12),
|
||||
0 0 80px rgb(254 212 0 / .25),
|
||||
0 0 150px rgb(254 180 0 / .10);
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-size: clamp(2.6rem, 5vw, 3.4rem);
|
||||
@@ -926,6 +938,11 @@ color: var(--muted);
|
||||
50% { transform: translate(-50%, -50%) translate3d(-145px, 130px, -65px); }
|
||||
}
|
||||
|
||||
@keyframes metricFloat {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
@@ -1316,9 +1333,9 @@ line-height: 1.32;
|
||||
.problem-strip {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
|
||||
gap: 24px;
|
||||
align-items: end;
|
||||
padding: clamp(56px, 8vw, 88px) 0;
|
||||
gap: clamp(24px, 5vw, 48px);
|
||||
align-items: start;
|
||||
padding: clamp(56px, 8vw, 88px) 0 clamp(80px, 10vw, 120px);
|
||||
}
|
||||
|
||||
.problem-strip h2,
|
||||
@@ -1328,41 +1345,75 @@ line-height: 1.32;
|
||||
font-size: clamp(2.4rem, 4vw, 4rem);
|
||||
}
|
||||
|
||||
.problem-strip p,
|
||||
.section-heading + p {
|
||||
.problem-strip .problem-strip-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* ── Problem Sign Grid (2×2) ── */
|
||||
.problem-sign-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.problem-sign {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 22px 26px;
|
||||
border: 1px solid rgb(19 18 13 / .10);
|
||||
border-radius: 22px;
|
||||
background: rgb(255 255 255 / .46);
|
||||
box-shadow: 0 12px 34px rgb(42 36 18 / .08), inset 1px 1px 0 rgb(255 255 255 / .64);
|
||||
backdrop-filter: blur(3px);
|
||||
transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
|
||||
}
|
||||
|
||||
.problem-sign:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--yellow);
|
||||
box-shadow: 0 20px 48px rgb(42 36 18 / .14), inset 1px 1px 0 rgb(255 255 255 / .74);
|
||||
}
|
||||
|
||||
.problem-sign-num {
|
||||
flex: 0 0 auto;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 16px;
|
||||
background: var(--yellow);
|
||||
color: var(--ink);
|
||||
font-size: 1.35rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: .02em;
|
||||
box-shadow: 0 8px 24px rgb(254 212 0 / .28);
|
||||
}
|
||||
|
||||
.problem-sign-text {
|
||||
color: var(--ink);
|
||||
font-weight: 700;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* ── Closing Statement ── */
|
||||
.problem-closing {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: clamp(28px, 4vw, 44px);
|
||||
padding: 20px 0 0;
|
||||
border-top: 1px solid var(--line);
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: clamp(1.05rem, 1.5vw, 1.28rem);
|
||||
}
|
||||
|
||||
.problem-strip-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.problem-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.problem-list li {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
font-size: 0.95rem;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.problem-list li::before {
|
||||
content: "→";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--yellow);
|
||||
font-weight: 700;
|
||||
-webkit-text-stroke: 1px var(--ink);
|
||||
paint-order: stroke fill;
|
||||
.problem-closing strong {
|
||||
color: var(--ink);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.case-section,
|
||||
@@ -1451,6 +1502,14 @@ border-color: rgb(255 255 255 / .20);
|
||||
box-shadow: 0 24px 70px rgb(0 0 0 / .34), inset 1px 1px 0 rgb(255 255 255 / .18);
|
||||
}
|
||||
|
||||
.case-story-title {
|
||||
margin: 0 0 6px;
|
||||
color: rgb(255 255 255 / .86);
|
||||
font-size: 1.15rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: .01em;
|
||||
}
|
||||
|
||||
.story-step {
|
||||
border-bottom: 1px solid var(--dark-line);
|
||||
padding-bottom: 16px;
|
||||
@@ -1461,9 +1520,9 @@ box-shadow: 0 24px 70px rgb(0 0 0 / .34), inset 1px 1px 0 rgb(255 255 255 / .18)
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.story-step span,
|
||||
.portfolio-card span,
|
||||
.service-card span,
|
||||
.process-grid span {
|
||||
color: var(--yellow);
|
||||
font-size: 12px;
|
||||
@@ -1509,21 +1568,25 @@ background: rgb(13 21 17 / .28);
|
||||
box-shadow: 0 18px 50px rgb(0 0 0 / .28), inset 1px 1px 0 rgb(255 255 255 / .16);
|
||||
padding: 16px;
|
||||
backdrop-filter: blur(5px) saturate(1.15);
|
||||
animation: metricFloat 2.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.metric-card:nth-of-type(1) {
|
||||
left: 22px;
|
||||
bottom: 24px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.metric-card:nth-of-type(2) {
|
||||
right: 28px;
|
||||
top: 26px;
|
||||
animation-delay: 0.9s;
|
||||
}
|
||||
|
||||
.metric-card:nth-of-type(3) {
|
||||
right: 72px;
|
||||
bottom: 42px;
|
||||
animation-delay: 1.8s;
|
||||
}
|
||||
|
||||
.metric-card strong {
|
||||
@@ -1550,21 +1613,21 @@ backdrop-filter: blur(5px) saturate(1.15);
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(19 18 13 / .10);
|
||||
border-radius: 24px;
|
||||
background: transparent;
|
||||
box-shadow: 0 18px 52px rgb(42 36 18 / .10), inset 1px 1px 0 rgb(255 255 255 / .65);
|
||||
padding: 22px;
|
||||
padding: clamp(22px, 3vw, 32px);
|
||||
transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
|
||||
}
|
||||
|
||||
@@ -1577,22 +1640,53 @@ linear-gradient(150deg, rgb(255 255 255 / .06), rgb(254 212 0 / .08));
|
||||
|
||||
.service-card h3 {
|
||||
margin-top: 10px;
|
||||
color: var(--ink);
|
||||
font-size: clamp(1.35rem, 1.6vw, 2rem);
|
||||
font-weight: 900;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--yellow);
|
||||
text-decoration-thickness: 4px;
|
||||
text-underline-offset: 6px;
|
||||
}
|
||||
|
||||
.service-card p {
|
||||
max-height: 0;
|
||||
margin-top: 0;
|
||||
overflow: hidden;
|
||||
.service-card > span {
|
||||
color: var(--muted);
|
||||
opacity: 0;
|
||||
transition: max-height .25s var(--ease), opacity .25s var(--ease), margin-top .25s var(--ease);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.service-card:hover p {
|
||||
max-height: 180px;
|
||||
margin-top: 14px;
|
||||
opacity: 1;
|
||||
.service-card > p {
|
||||
margin-top: 12px;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.service-card ul {
|
||||
margin: 14px 0 0;
|
||||
padding: 0 0 0 1.2em;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.service-card li {
|
||||
position: relative;
|
||||
padding-left: 4px;
|
||||
color: var(--ink);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.service-card li::before {
|
||||
content: "→";
|
||||
position: absolute;
|
||||
left: -1.2em;
|
||||
color: var(--yellow);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.portfolio-grid {
|
||||
@@ -1763,7 +1857,7 @@ color: rgb(255 255 255 / .72);
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
background: rgb(13 15 14 / .32);
|
||||
background: rgb(255 255 255 / .74);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .24s var(--ease);
|
||||
@@ -2143,12 +2237,20 @@ font-size: clamp(2rem, 7vw, 2.5rem);
|
||||
max-width: 11ch;
|
||||
}
|
||||
|
||||
.service-grid,
|
||||
.service-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.process-grid,
|
||||
.service-proof-grid .process-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.problem-sign-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.process-grid article {
|
||||
min-height: auto;
|
||||
}
|
||||
@@ -2159,12 +2261,6 @@ height: 58px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.service-card p {
|
||||
max-height: none;
|
||||
margin-top: 12px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.portfolio-card,
|
||||
.portfolio-card.featured {
|
||||
grid-column: span 12;
|
||||
@@ -2238,12 +2334,6 @@ border-radius: 18px;
|
||||
border-radius: 50%;
|
||||
min-height: auto;
|
||||
}
|
||||
@keyframes float-1,
|
||||
@keyframes float-2,
|
||||
@keyframes float-3 {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -2253,27 +2343,65 @@ border-radius: 18px;
|
||||
}
|
||||
|
||||
.blog-article-hero {
|
||||
padding: 168px 0 56px;
|
||||
padding: clamp(132px, 16vw, 188px) 0 clamp(46px, 7vw, 82px);
|
||||
}
|
||||
|
||||
.blog-article-heading,
|
||||
.blog-article-shell {
|
||||
width: min(820px, calc(100% - 32px));
|
||||
width: min(920px, calc(100% - 32px));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.blog-article-heading h1 {
|
||||
max-width: 15ch;
|
||||
margin-top: 14px;
|
||||
font-size: clamp(2.7rem, 4vw, 4rem);
|
||||
font-weight: 900;
|
||||
line-height: .96;
|
||||
.blog-article-heading {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.blog-article-heading > p:last-child {
|
||||
max-width: 680px;
|
||||
.blog-back-link {
|
||||
width: fit-content;
|
||||
color: var(--muted);
|
||||
font-size: clamp(1.1rem, 1vw + 1rem, 1.45rem);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.blog-back-link:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.blog-article-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.blog-article-meta .eyebrow {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.blog-article-meta .eyebrow-yellow {
|
||||
border-color: rgb(19 18 13 / .18);
|
||||
background: var(--yellow);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.blog-article-heading h1 {
|
||||
max-width: 18ch;
|
||||
margin: 0;
|
||||
font-size: clamp(2.85rem, 6vw, 6.8rem);
|
||||
font-weight: 950;
|
||||
line-height: .88;
|
||||
}
|
||||
|
||||
.blog-article-lead {
|
||||
max-width: 720px;
|
||||
border-left: 3px solid var(--yellow);
|
||||
margin: 0;
|
||||
padding-left: clamp(16px, 2vw, 24px);
|
||||
color: var(--muted);
|
||||
font-size: clamp(1.08rem, 1vw + 1rem, 1.5rem);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.blog-article-shell {
|
||||
@@ -2282,16 +2410,11 @@ border-radius: 18px;
|
||||
|
||||
.blog-prose {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(255 255 255 / .58);
|
||||
border: 1px solid rgb(19 18 13 / .08);
|
||||
border-radius: 28px;
|
||||
background: white;
|
||||
padding: clamp(26px, 5vw, 58px);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.blog-prose > *:not(.liquidGlass-effect, .liquidGlass-tint, .liquidGlass-shine) {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
box-shadow: 0 24px 70px rgb(42 36 18 / .08);
|
||||
}
|
||||
|
||||
.blog-prose h2 {
|
||||
|
||||
Reference in New Issue
Block a user