283 lines
14 KiB
Plaintext
283 lines
14 KiB
Plaintext
---
|
|
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',
|
|
robotsMeta = 'index, follow',
|
|
} = Astro.props;
|
|
|
|
const siteUrl = new URL('/', Astro.site).toString();
|
|
const logoUrl = new URL('/images/logos/logo-long-black.png', Astro.site).toString();
|
|
const ogImageUrl = new URL(image, Astro.site).toString();
|
|
|
|
const organizationJsonLd = JSON.stringify({
|
|
'@context': 'https://schema.org',
|
|
'@type': 'Organization',
|
|
name: 'MoreminiMore',
|
|
url: siteUrl,
|
|
logo: logoUrl,
|
|
description: description,
|
|
sameAs: [
|
|
'https://www.facebook.com/moreminimore',
|
|
'https://www.linkedin.com/company/moreminimore',
|
|
],
|
|
});
|
|
---
|
|
|
|
<!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={description} />
|
|
<meta name="robots" content={robotsMeta} />
|
|
<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={ogImageUrl} />
|
|
<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={ogImageUrl} />
|
|
|
|
<!-- Organization JSON-LD -->
|
|
<script type="application/ld+json" set:html={organizationJsonLd}>
|
|
</script>
|
|
|
|
<!-- Favicons -->
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
|
<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 />
|
|
|
|
<!-- ConsentOS (cookie consent — load first) -->
|
|
<script src="https://consent.moreminimore.com/consent-loader.js" data-site-id="2f6d0ab5-f7d6-4d06-b299-5069c21f6238" data-api-base="https://consent.moreminimore.com"></script>
|
|
|
|
<!-- Google Analytics 4 -->
|
|
<script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-74BHREDLC3"></script>
|
|
<script is:inline>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
gtag('config', 'G-74BHREDLC3');
|
|
</script>
|
|
|
|
<!-- Meta Pixel -->
|
|
<script is:inline>
|
|
!function(f,b,e,v,n,t,s)
|
|
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
|
|
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
|
|
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
|
|
n.queue=[];t=b.createElement(e);t.async=!0;
|
|
t.src=v;s=b.getElementsByTagName(e)[0];
|
|
s.parentNode.insertBefore(t,s)}(window, document,'script',
|
|
'https://connect.facebook.net/en_US/fbevents.js');
|
|
fbq('init', '418349260078648');
|
|
fbq('track', 'PageView');
|
|
</script>
|
|
|
|
<!-- Umami Analytics -->
|
|
<script is:inline defer src="https://umami.moreminimore.com/script.js" data-website-id="b2e87a6c-0b64-43c8-bb09-e406ffca0af1"></script>
|
|
<script is:inline defer src="https://umami.moreminimore.com/recorder.js" data-website-id="b2e87a6c-0b64-43c8-bb09-e406ffca0af1" data-sample-rate="0.15" data-mask-level="moderate" data-max-duration="300000"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Meta Pixel (noscript) -->
|
|
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=418349260078648&ev=PageView&noscript=1" /></noscript>
|
|
|
|
<div class="background-stage" aria-hidden="true">
|
|
<svg class="coded-background" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
|
|
<defs>
|
|
<radialGradient id="Gradient1" 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="Gradient2" 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="Gradient3" 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="Gradient4" 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="Gradient5" 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="Gradient6" 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(#Gradient1)" 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(#Gradient2)" 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(#Gradient3)" 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>
|
|
</nav>
|
|
|
|
<button class="nav-cta" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
|
</header>
|
|
|
|
<main id="main">
|
|
<slot />
|
|
</main>
|
|
|
|
<Footer />
|
|
|
|
<button class="floating-cta" type="button" data-floating-cta data-open-lead>ส่งโจทย์ให้เราดู</button>
|
|
<div class="panel-backdrop" data-panel-backdrop data-close-lead></div>
|
|
<aside class="lead-panel liquid-glass liquidGlass-wrapper" aria-labelledby="lead-title" aria-hidden="true" data-lead-panel data-endpoint={formEndpoint}>
|
|
<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>
|