<!doctype html><html lang="id"><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>Shiawasegift AI Studio — Solusi AI untuk Bisnismu</title> <meta name="description" content="Shiawasegift AI Studio landing page demo untuk layanan AI: chatbot, analitik, dan integrasi. Clean, responsif, dan siap dikustom." /> <style> :root{ --bg:#0f1724; --card:#0b1220; --accent:#7c5cff; --muted:#94a3b8; --glass: rgba(255,255,255,0.04); --radius:14px; --maxw:1100px; } *{box-sizing:border-box} body{ margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg,#071028 0%, #081127 60%, #071026 100%); color:#e6eef8; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.5; } .container{ max-width:var(--maxw); margin:36px auto; padding:24px; } header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; } .brand{ display:flex;align-items:center;gap:12px; } .logo{ width:52px;height:52px;border-radius:12px; background:linear-gradient(135deg,var(--accent) 0%, #4cc9f0 100%); display:flex;align-items:center;justify-content:center;font-weight:700;color:#081026; box-shadow:0 6px 20px rgba(124,92,255,0.18), inset 0 -6px 18px rgba(255,255,255,0.05) } .brand h1{margin:0;font-size:18px;letter-spacing:0.2px} nav{display:flex;gap:14px;align-items:center} nav a{color:var(--muted);text-decoration:none;font-size:14px;padding:8px 12px;border-radius:10px} nav a:hover{background:var(--glass);color:#fff} .hero{ display:grid; grid-template-columns: 1fr 440px; gap:28px; align-items:center; margin-top:22px; } .card{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:var(--radius); padding:28px; box-shadow:0 8px 30px rgba(2,6,23,0.6); } .headline{font-size:28px;margin:0 0 12px} .sub{color:var(--muted);margin-bottom:18px} .cta-row{display:flex;gap:12px;align-items:center} .btn{ background:linear-gradient(90deg,var(--accent), #4cc9f0); color:#071026;padding:12px 16px;border-radius:12px;border:0;font-weight:600;cursor:pointer; box-shadow:0 8px 30px rgba(124,92,255,0.18); } .btn.ghost{ background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.04); } .features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px} .feature{ background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); padding:16px;border-radius:12px;color:var(--muted); font-size:14px; } .mock{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px;padding:18px;height:320px;display:flex;flex-direction:column;gap:12px; } .mock .screen{ background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.8)); border-radius:10px;padding:12px;flex:1;overflow:auto;font-size:13px;color:var(--muted) } .input-group{display:flex;gap:8px;margin-top:12px} input[type="email"]{flex:1;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#e6eef8} footer{margin-top:28px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px} .stat{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:18px;border-radius:12px;text-align:center} .stat .num{font-size:20px;font-weight:700;color:#fff} @media (max-width:980px){ .hero{grid-template-columns:1fr;padding-bottom:12px} .features{grid-template-columns:repeat(2,1fr)} .cards{grid-template-columns:1fr} } @media (max-width:560px){ .features{grid-template-columns:1fr} header{flex-direction:column;align-items:flex-start;gap:12px} .logo{width:44px;height:44px} } </style><meta name="generator" content="WP Rocket 3.18" data-wpr-features="wpr_preload_links" /></head><body> <div data-rocket-location-hash="93b9c55a76db46220508acbe442d05f2" class="container"> <header data-rocket-location-hash="376287218b6ead3b5b6fc67b7e0c0376"> <div data-rocket-location-hash="a9a30065df0cc8969610b635d1e46521" class="brand"> <div class="logo">AI</div> <div data-rocket-location-hash="0e34c9f32b14155eefd1c4d993d8d352"> <h1>AI Studio</h1> <div style="font-size:12px;color:var(--muted)">Solusi AI untuk bisnis & kreator</div> </div> </div> <nav> <a href="#features">Fitur</a> <a href="#pricing">Harga</a> <a href="#demo">Demo</a> <a href="#contact" class="btn ghost">Kontak</a> </nav> </header> <main data-rocket-location-hash="6e5961a7f07002a87d72c3d55c699759"> <section data-rocket-location-hash="71fa6c4ee549b5dbdd184bedcbe3e6d6" class="hero"> <div class="card"> <h2 class="headline">Bikin bisnis lo lebih pintar dengan AI ⚡</h2> <p class="sub">Chatbot cerdas, analitik otomatis, dan integrasi mudah — tanpa pusing setup. Cocok buat UMKM, agency, dan developer.</p> <div class="cta-row"> <button class="btn" id="cta-primary">Coba Gratis 14 Hari</button> <button class="btn ghost" id="cta-secondary">Lihat Demo</button> </div> <div class="features" id="features" style="margin-top:18px"> <div class="feature"> <strong>Chatbot</strong> <div style="margin-top:6px">Jawab pelanggan 24/7 dengan NLP lokal.</div> </div> <div class="feature"> <strong>Analitik</strong> <div style="margin-top:6px">Insight pengguna & funnel otomatis.</div> </div> <div class="feature"> <strong>Integrasi</strong> <div style="margin-top:6px">API, webhook, dan plugin CMS.</div> </div> </div> <div class="cards"> <div class="stat"> <div style="color:var(--muted)">Pengguna aktif</div> <div class="num" id="users-count">1.2K+</div> </div> <div class="stat"> <div style="color:var(--muted)">Response time</div> <div class="num">~350ms</div> </div> <div class="stat"> <div style="color:var(--muted)">Uptime</div> <div class="num">99.9%</div> </div> </div> </div> <aside class="mock card" id="demo"> <div style="display:flex;justify-content:space-between;align-items:center"> <div style="font-weight:700">Live Demo Chat</div> <div style="font-size:12px;color:var(--muted)">Beta</div> </div> <div class="screen" id="chat-screen"> <div style="margin-bottom:10px"><strong>Pengunjung:</strong> Halo, saya mau tanya soal paket.</div> <div style="margin-bottom:10px;color:#c7d2fe"><strong>AI Studio:</strong> Halo! Paket kami mulai dari Rp99.000/bln. Mau rekomendasi berdasarkan kebutuhan?</div> <div style="margin-bottom:10px"><strong>Pengunjung:</strong> Aku butuh chatbot untuk toko pakaian online.</div> <div style="margin-bottom:10px;color:#c7d2fe"><strong>AI Studio:</strong> Sip! Paket Standard + integrasi WhatsApp cocok. Ada free trial 14 hari ✨</div> </div> <div class="input-group"> <input type="email" id="email" placeholder="Masukkan email untuk coba gratis" /> <button class="btn" id="signup">Daftar</button> </div> <div style="font-size:12px;color:var(--muted);margin-top:8px">Atau coba demo interaktif untuk lihat response AI.</div> </aside> </section> <section data-rocket-location-hash="83319d2212ab36940f5539384064d6ec" style="margin-top:28px" class="card"> <h2 style="margin-top:0">Kenapa pilih AI Studio?</h2> <p style="color:var(--muted)">Template cepat, support Bahasa Indonesia, dan integrasi simpel. Cocok buat yang pengen otomatisasi tanpa ribet.</p> <div style="display:flex;gap:18px;flex-wrap:wrap;margin-top:14px"> <div style="flex:1;min-width:220px"> <strong>Implementasi cepat</strong> <div style="color:var(--muted);margin-top:6px">Setup dalam hitungan jam, dokumentasi lengkap.</div> </div> <div style="flex:1;min-width:220px"> <strong>Harga ramah</strong> <div style="color:var(--muted);margin-top:6px">Paket terjangkau untuk UMKM dan kreator.</div> </div> <div style="flex:1;min-width:220px"> <strong>Dukungan lokal</strong> <div style="color:var(--muted);margin-top:6px">Support Bahasa Indonesia via chat & email.</div> </div> </div> </section> <section data-rocket-location-hash="e4c8e6e7aaa0622bfd94c39c6bbcb513" id="pricing" style="margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px"> <div class="card" style="padding:20px"> <h3 style="margin:0 0 6px">Starter</h3> <div style="color:var(--muted)">Gratis 14 hari • Bot dasar • 1k pesan/bln</div> <div style="margin-top:12px"><strong>Rp0</strong>/bulan</div> <div style="margin-top:12px"><button class="btn">Coba Starter</button></div> </div> <div class="card" style="padding:20px"> <h3 style="margin:0 0 6px">Standard</h3> <div style="color:var(--muted)">NLP lokal • 10k pesan • Integrasi WA</div> <div style="margin-top:12px"><strong>Rp199.000</strong>/bulan</div> <div style="margin-top:12px"><button class="btn">Pilih Standard</button></div> </div> <div class="card" style="padding:20px"> <h3 style="margin:0 0 6px">Pro</h3> <div style="color:var(--muted)">Unlimited • SLA • Dedicated support</div> <div style="margin-top:12px"><strong>Custom</strong></div> <div style="margin-top:12px"><button class="btn">Hubungi Sales</button></div> </div> </section> <section data-rocket-location-hash="bdca0018b591837a396ff8a10802fc0e" style="margin-top:22px" class="card"> <h2 style="margin:0 0 8px">Integrasi & API</h2> <p style="color:var(--muted)">Mudah sambungin ke website, WhatsApp, atau aplikasi mobile. Tersedia REST API dan webhook.</p> <pre style="background:#061025;padding:12px;border-radius:10px;color:#9fb7ff;font-size:13px;overflow:auto">curl -X POST https://api.aistudio.example/v1/chat \ -H "Authorization: Bearer YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d '{"message":"Halo, rekomendasi paket untuk toko baju?"}' </pre> </section> <section data-rocket-location-hash="102ec617b1240d4df7dc828c7ba48fe9" style="margin-top:22px" class="card"> <h2 style="margin:0 0 8px">Testimoni</h2> <div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:12px"> <div style="flex:1;min-width:200px"> <strong>Ani, Pemilik Toko Online (Bandung)</strong> <div style="color:var(--muted);margin-top:6px">"Chatbot bantu balas order pas aku lagi sibuk. Penjualan naik 20%!"</div> </div> <div style="flex:1;min-width:200px"> <strong>Budi, Agency (Surabaya)</strong> <div style="color:var(--muted);margin-top:6px">"Integrasi gampang, dokumentasi jelas."</div> </div> </div> </section> </main> <footer data-rocket-location-hash="8a4ef50742cf3456f9db6425e16930dc"> <div>© 2025 AI Studio — dibuat dengan ♥</div> <div data-rocket-location-hash="872cb5aa463635e3d4bed379dd58a4b6" style="display:flex;gap:12px;align-items:center"> <a href="#" style="color:var(--muted);text-decoration:none">Privacy</a> <a href="#" style="color:var(--muted);text-decoration:none">Terms</a> </div> </footer> </div> <script> // Simple interactions document.getElementById('signup').addEventListener('click', function(){ const email = document.getElementById('email').value.trim(); if(!email){ alert('Masukkan email dulu ya 🙂'); return; } this.innerText = 'Loading...'; setTimeout(()=>{ alert('Terima kasih! Link coba gratis dikirim ke ' + email); this.innerText='Daftar' },900); }); document.getElementById('cta-primary').addEventListener('click', ()=> { document.getElementById('email').focus(); window.scrollTo({top: document.getElementById('demo').offsetTop - 20, behavior:'smooth'}); }); // Small counter anim const el = document.getElementById('users-count'); let num = 0; const target = 1200; const iv = setInterval(()=>{ if(num>=target){ clearInterval(iv); el.innerText='1.2K+'; } else { num += Math.ceil((target-num)/8); el.innerText = Math.floor(num/1000)==0? num : Math.floor(num/1000)+'.' + (num%1000) + 'K'; } },80); </script><script>var rocket_beacon_data = {"ajax_url":"https:\/\/shiawasegift.com\/wp-admin\/admin-ajax.php","nonce":"383a73c05e","url":"https:\/\/shiawasegift.com","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://shiawasegift.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body></html> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me - Debug: cached@1758550231 -->
