Magnetic Field hero, Thai eyebrows, black text-stroke, service pages fixes

- Hero: Magnetic Field design (ripple rings, field curves, attract animations) - H1: เปลี่ยนเป็น 'เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า', กำไร เน้นขอบดำ - Site: ทุก eyebrow แปลเป็นไทย - Buttons: text สีดำทุกหน้าแม้ใน dark section - Yellow text: เพิ่ม -webkit-text-stroke ขอบดำทุก element - Service pages: light/light/dark pattern, process-grid แถวเดียว - Logo: อัพเดทใหม่ - Demos: เพิ่ม 5 hero design concepts (orbital, energy flow, holographic, constellation, magnetic)
2026-06-26 11:15:58 +07:00
parent 689a8924e6
commit f114a34a62
18 changed files with 1201 additions and 108 deletions
--- a/public/demos/b-energyflow.html
+++ b/public/demos/b-energyflow.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="th">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>B: Energy Flow — กระแสพลังงาน</title>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;800;900&display=swap');
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  font-family: 'Kanit', system-ui, sans-serif;
+  background: #080d14;
+  color: #fff; overflow: hidden;
+  display: flex; align-items: center; justify-content: center; min-height: 100vh;
+}
+.demo { position: relative; width: 650px; height: 580px; }
+canvas#flowCanvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
+.scene {
+  position: relative; width: 100%; height: 100%;
+  transform-style: preserve-3d;
+  transition: transform 0.3s ease-out;
+}
+
+.node {
+  position: absolute;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center; text-align: center;
+}
+
+/* Core */
+.core {
+  left: 50%; top: 50%;
+  transform: translate(-50%, -50%);
+  width: 160px; height: 160px; border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, #2a1a00, #100800);
+  border: 2px solid rgba(254,212,0,0.8);
+  box-shadow: 0 0 40px rgba(254,212,0,0.3), 0 0 80px rgba(254,180,0,0.1), inset 0 0 40px rgba(254,212,0,0.08);
+  z-index: 10;
+  animation: coreBeat 2s ease-in-out infinite;
+}
+@keyframes coreBeat {
+  0%, 100% { box-shadow: 0 0 40px rgba(254,212,0,0.3), 0 0 80px rgba(254,180,0,0.1), inset 0 0 40px rgba(254,212,0,0.08); }
+  50% { box-shadow: 0 0 60px rgba(254,212,0,0.5), 0 0 100px rgba(254,180,0,0.2), inset 0 0 50px rgba(254,212,0,0.12); }
+}
+.core .label { font-size: 2.6rem; font-weight: 900; color: #fed400; }
+.core .sub { font-size: 0.7rem; color: rgba(254,212,0,0.5); margin-top: 4px; font-weight: 600; }
+
+/* Satellites */
+.satellite {
+  border-radius: 50%;
+  background: rgba(255,255,255,0.04);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(254,212,0,0.25);
+  width: 120px; height: 120px;
+  z-index: 5;
+  left: 50%; top: 50%;
+}
+.satellite:nth-child(2) { transform: translate(-50%, -50%) translateY(-230px); animation: float1 4s ease-in-out infinite; }
+.satellite:nth-child(3) { transform: translate(-50%, -50%) translateX(220px) translateY(10px); animation: float2 4.5s ease-in-out infinite; }
+.satellite:nth-child(4) { transform: translate(-50%, -50%) translateX(-160px) translateY(190px); animation: float3 5s ease-in-out infinite; }
+@keyframes float1 { 0%,100%{ transform: translate(-50%,-50%) translateY(-230px); } 50%{ transform: translate(-50%,-50%) translateY(-245px); } }
+@keyframes float2 { 0%,100%{ transform: translate(-50%,-50%) translateX(220px) translateY(10px); } 50%{ transform: translate(-50%,-50%) translateX(235px) translateY(0px); } }
+@keyframes float3 { 0%,100%{ transform: translate(-50%,-50%) translateX(-160px) translateY(190px); } 50%{ transform: translate(-50%,-50%) translateX(-175px) translateY(205px); } }
+
+.satellite .tag { font-size: 0.9rem; font-weight: 800; color: #fff; }
+.satellite .desc { font-size: 0.65rem; color: rgba(255,255,255,0.5); margin-top: 3px; }
+
+.title {
+  position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
+  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em;
+  color: rgba(255,255,255,0.4); z-index: 100;
+}
+</style>
+</head>
+<body>
+<span class="title">B. Energy Flow — กระแสพลังงาน พร้อม particles</span>
+<div class="demo">
+  <canvas id="flowCanvas"></canvas>
+  <div class="scene" id="scene">
+    <div class="node core" data-node="center">
+      <span class="label">กำไร</span>
+      <span class="sub">เป้าหมายของทุกธุรกิจ</span>
+    </div>
+    <div class="node satellite" data-node="mkt">
+      <span class="tag">Marketing</span>
+      <span class="desc">เพิ่มรายได้</span>
+    </div>
+    <div class="node satellite" data-node="ai">
+      <span class="tag">AI</span>
+      <span class="desc">ลดต้นทุนและเวลา</span>
+    </div>
+    <div class="node satellite" data-node="biz">
+      <span class="tag">Business<br>Knowledge</span>
+      <span class="desc">ลดความเสี่ยง</span>
+    </div>
+  </div>
+</div>
+
+<script>
+const canvas = document.getElementById('flowCanvas');
+const ctx = canvas.getContext('2d');
+const scene = document.getElementById('scene');
+
+function resize() {
+  const rect = canvas.parentElement.getBoundingClientRect();
+  canvas.width = rect.width;
+  canvas.height = rect.height;
+}
+resize();
+window.addEventListener('resize', resize);
+
+// Particle system per connection
+const connections = [];
+let t = 0;
+
+function draw() {
+  t++;
+  const rect = canvas.parentElement.getBoundingClientRect();
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  const sun = document.querySelector('[data-node="center"]');
+  const sats = document.querySelectorAll('.satellite');
+  if (!sun) { requestAnimationFrame(draw); return; }
+
+  const sr = sun.getBoundingClientRect();
+  const sx = sr.left + sr.width/2 - rect.left;
+  const sy = sr.top + sr.height/2 - rect.top;
+
+  sats.forEach((sat, i) => {
+    const pr = sat.getBoundingClientRect();
+    const px = pr.left + pr.width/2 - rect.left;
+    const py = pr.top + pr.height/2 - rect.top;
+
+    const dx = px - sx, dy = py - sy;
+    const dist = Math.sqrt(dx*dx + dy*dy);
+
+    // Draw stream line
+    ctx.beginPath();
+    ctx.moveTo(sx + (dx/dist)*80, sy + (dy/dist)*80);
+    ctx.lineTo(px - (dx/dist)*60, py - (dy/dist)*60);
+    const grad = ctx.createLinearGradient(sx, sy, px, py);
+    grad.addColorStop(0, 'rgba(254,212,0,0.6)');
+    grad.addColorStop(0.5, 'rgba(254,212,0,0.3)');
+    grad.addColorStop(1, 'rgba(254,212,0,0.1)');
+    ctx.strokeStyle = grad;
+    ctx.lineWidth = 2;
+    ctx.stroke();
+
+    // Animated particles along the line
+    const count = 12;
+    for (let j = 0; j < count; j++) {
+      const phase = (t * 0.03 + j / count + i * 0.33) % 1;
+      const pp = phase < 0.5 ? phase * 2 : 2 - phase * 2;
+      const x = sx + (dx/dist)*80 + dx * (1 - 80/dist - 60/dist) * phase;
+      const y = sy + (dy/dist)*80 + dy * (1 - 80/dist - 60/dist) * phase;
+      ctx.beginPath();
+      ctx.arc(x, y, 2.5, 0, Math.PI*2);
+      ctx.fillStyle = `rgba(254,230,100,${0.8 * pp})`;
+      ctx.fill();
+      // Glow
+      ctx.beginPath();
+      ctx.arc(x, y, 5, 0, Math.PI*2);
+      ctx.fillStyle = `rgba(254,212,0,${0.25 * pp})`;
+      ctx.fill();
+    }
+  });
+
+  requestAnimationFrame(draw);
+}
+
+document.addEventListener('mousemove', e => {
+  const x = (e.clientX / window.innerWidth - 0.5) * 6;
+  const y = (e.clientY / window.innerHeight - 0.5) * -6;
+  scene.style.transform = `rotateX(${y}deg) rotateY(${x}deg)`;
+});
+
+draw();
+</script>
+</body>
+</html>