f827afb33f
- Liquid glass effect on navbar/cards with backdrop-filter invert - Animated blob gradient background (SVG-based) - Portfolio section: scene-dark invert, show 5 items on home - How Work section: step flow with numbers + connecting lines - Hero: Decision snapshot replacing problem selector - About page: inverted background with contrast fixes - Fix parallax JS bundling via Astro - Fix navbar fixed positioning after liquid glass CSS - Submenu hover fix - Clean up removed legacy files/assets
191 lines
9.8 KiB
Plaintext
191 lines
9.8 KiB
Plaintext
---
|
|
import '../styles/global.css';
|
|
import { formEndpoint, problems, services } from '../data/site.js';
|
|
|
|
const {
|
|
title = 'MoreminiMore',
|
|
description = 'MoreminiMore ช่วย SME ดูข้อมูลจริงก่อนตัดสินใจทำเว็บ การตลาด AI หรือระบบอัตโนมัติ',
|
|
} = Astro.props;
|
|
---
|
|
|
|
<!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="theme-color" content="#f8f5ea" />
|
|
<title>{title}</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="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>
|
|
<a href="/contact/">ติดต่อ</a>
|
|
</nav>
|
|
|
|
<button class="nav-cta" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
|
|
</header>
|
|
|
|
<main id="main">
|
|
<slot />
|
|
</main>
|
|
|
|
<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>
|