f114a34a62
- 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)
76 lines
3.9 KiB
HTML
76 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hero Design Demos</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;800;900&display=swap');
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: 'Kanit', system-ui, sans-serif;
|
|
background: #0d1117;
|
|
color: #fff;
|
|
min-height: 100vh;
|
|
padding: 48px 24px;
|
|
}
|
|
h1 { font-size: 2rem; text-align: center; margin-bottom: 8px; }
|
|
h1 span { color: #fed400; }
|
|
.sub { text-align: center; color: rgba(255,255,255,0.5); margin-bottom: 40px; font-size: 1rem; }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
|
|
.card {
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 16px;
|
|
padding: 32px 24px;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
transition: all 0.3s ease;
|
|
display: flex; flex-direction: column; gap: 12px;
|
|
}
|
|
.card:hover { background: rgba(254,212,0,0.06); border-color: rgba(254,212,0,0.3); transform: translateY(-2px); }
|
|
.card .emoji { font-size: 3rem; }
|
|
.card .name { font-size: 1.3rem; font-weight: 800; }
|
|
.card .name span { color: #fed400; }
|
|
.card .desc { font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.5; }
|
|
.card .tag { display: inline-block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(254,212,0,0.6); border: 1px solid rgba(254,212,0,0.2); border-radius: 20px; padding: 4px 10px; width: fit-content; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Hero Section — <span>5 Design Demos</span></h1>
|
|
<p class="sub">เลือกดูแต่ละแนวคิดเพื่อเปรียบเทียบ</p>
|
|
<div class="grid">
|
|
<a href="a-orbital.html" class="card">
|
|
<div class="emoji">🌌</div>
|
|
<div class="name">A. <span>Orbital</span></div>
|
|
<div class="tag">ระบบดาวเคราะห์โคจร</div>
|
|
<div class="desc">กำไรเป็นดวงอาทิตย์เรืองแสง 3 ป้ายโคจรรอบด้วยวงแหวน orbital พร้อมหมุนอัตโนมัติ</div>
|
|
</a>
|
|
<a href="b-energyflow.html" class="card">
|
|
<div class="emoji">⚡</div>
|
|
<div class="name">B. <span>Energy Flow</span></div>
|
|
<div class="tag">กระแสพลังงาน</div>
|
|
<div class="desc">Particle วิ่งตามเส้นเชื่อมสีทอง เหมือนพลังงาน/ข้อมูลไหลเข้าสู่กำไร ดูมีชีวิตชีวา</div>
|
|
</a>
|
|
<a href="c-holographic.html" class="card">
|
|
<div class="emoji">🌀</div>
|
|
<div class="name">C. <span>Holographic 3D</span></div>
|
|
<div class="tag">Hologram Sci-Fi</div>
|
|
<div class="desc">โทน Cyan เรืองแสง พร้อม scanline และ beam เชื่อมต่อ ดูล้ำสมัย ดูแพง</div>
|
|
</a>
|
|
<a href="d-constellation.html" class="card">
|
|
<div class="emoji">✨</div>
|
|
<div class="name">D. <span>Constellation</span></div>
|
|
<div class="tag">แผนที่ดาว</div>
|
|
<div class="desc">โหนดเป็นดาวระยิบระยับ เส้นเชื่อมแบบกลุ่มดาว พื้นหลังมีดาวกระจาย ดูลึกลับสง่า</div>
|
|
</a>
|
|
<a href="e-magnetic.html" class="card">
|
|
<div class="emoji">🧲</div>
|
|
<div class="name">E. <span>Magnetic Field</span></div>
|
|
<div class="tag">สนามแม่เหล็ก</div>
|
|
<div class="desc">กำไรเป็นแม่เหล็กทรงพลัง มี ripple wave + field curve สื่อถึงการดึงดูดทุกอย่างสู่กำไร</div>
|
|
</a>
|
|
</div>
|
|
</body>
|
|
</html>
|