Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PromptCanvas – Generator Prompt AI untuk Digital Marketer</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap" rel="stylesheet" />
<style>
/* ─── RESET & BASE ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--purple: #6D28D9;
--purple-light:#8B5CF6;
--purple-dark: #4C1D95;
--purple-glow: #7C3AED;
--amber: #F59E0B;
--amber-light: #FCD34D;
--green: #10B981;
--red: #EF4444;
--bg: #0D0B14;
--surface: #13101E;
--surface2: #1A1530;
--border: rgba(109,40,217,.35);
--text: #F3F0FF;
--muted: #A89EC4;
--font-head: 'Syne', sans-serif;
--font-body: 'DM Sans', sans-serif;
}
html { scroll-behavior: smooth; }
body {
background-color: #0D0B14 !important;
color: #F3F0FF !important;
font-family: 'DM Sans', sans-serif !important;
line-height: 1.65;
overflow-x: hidden;
}
/* ─── NOISE TEXTURE OVERLAY ──────────────────────────────────────── */
body::before {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
pointer-events: none; z-index: 0; opacity: .5;
}
/* ─── TYPOGRAPHY ─────────────────────────────────────────────────── */
h1,h2,h3,h4 { font-family: 'Syne', sans-serif !important; font-weight: 800; line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.7rem); }
p { color: #A89EC4 !important; }
strong { color: #F3F0FF !important; font-weight: 600; }
/* ─── UTILITIES ──────────────────────────────────────────────────── */
.container {
max-width: 1100px !important;
margin: 0 auto !important;
padding: 0 1.25rem !important;
}
.section { padding: 5rem 0; position: relative; z-index: 1; }
.text-center { text-align: center; }
.text-purple { color: var(--purple-light) !important; }
.badge {
display: inline-block;
background: rgba(109,40,217,.18);
border: 1px solid rgba(109,40,217,.45);
color: #C4B5FD !important;
font-size: .8rem; font-weight: 600;
padding: .3rem .85rem; border-radius: 999px;
letter-spacing: .05em; text-transform: uppercase;
margin-bottom: 1rem;
}
.divider {
width: 60px; height: 4px;
background: linear-gradient(90deg, var(--purple), var(--purple-light));
border-radius: 2px; margin: .75rem auto 1.5rem;
}
/* ─── GLOW BLOBS ─────────────────────────────────────────────────── */
.blob {
position: absolute; border-radius: 50%;
filter: blur(90px); pointer-events: none; z-index: 0;
}
.blob-purple { background: rgba(109,40,217,.25); }
.blob-amber { background: rgba(245,158,11,.12); }
/* ─── BUTTONS ────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; gap: .5rem;
font-family: 'DM Sans', sans-serif !important;
font-weight: 600; font-size: 1rem;
padding: .85rem 2rem; border-radius: 12px;
cursor: pointer; border: none; transition: all .25s ease;
text-decoration: none !important;
position: relative; overflow: hidden;
}
.btn::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));
pointer-events: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--purple) 0%, var(--purple-light) 100%) !important;
color: #FFFFFF !important;
box-shadow: 0 0 30px rgba(109,40,217,.45), 0 4px 15px rgba(0,0,0,.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 45px rgba(109,40,217,.65), 0 8px 25px rgba(0,0,0,.4);
}
.btn-lg { font-size: 1.1rem !important; padding: 1rem 2.4rem !important; border-radius: 14px !important; }
.btn-xl { font-size: 1.2rem !important; padding: 1.1rem 2.8rem !important; border-radius: 14px !important; }
/* ─── MICRO-TRUST ────────────────────────────────────────────────── */
.micro-trust {
display: flex; align-items: center; justify-content: center;
gap: .4rem; font-size: .8rem; color: #7C6FA0 !important;
margin-top: .75rem;
}
.micro-trust svg { flex-shrink: 0; }
/* ─── ANNOUNCEMENT BAR ───────────────────────────────────────────── */
#announce {
background: linear-gradient(90deg, var(--purple-dark), var(--purple), var(--purple-dark));
background-size: 200% 100%; animation: shimmer 4s linear infinite;
text-align: center; padding: .6rem 1rem;
font-size: .85rem; font-weight: 600; color: #E9D5FF !important;
position: relative; z-index: 100;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* ─── NAV ────────────────────────────────────────────────────────── */
nav {
position: sticky; top: 0; z-index: 90;
background: rgba(13,11,20,.85) !important;
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
padding: .9rem 1.25rem;
}
.nav-inner {
max-width: 1100px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
}
.logo {
font-family: 'Syne', sans-serif !important;
font-weight: 800; font-size: 1.4rem;
color: #F3F0FF !important;
text-decoration: none !important;
}
.logo span { color: var(--purple-light) !important; }
.nav-cta { font-size: .9rem !important; padding: .55rem 1.3rem !important; border-radius: 10px !important; }
/* ─── HERO ───────────────────────────────────────────────────────── */
#hero {
background-color: var(--bg) !important;
padding: 5rem 0 4rem;
position: relative; overflow: hidden;
}
#hero .blob:nth-child(1) { width: 500px; height: 500px; top: -120px; left: -120px; }
#hero .blob:nth-child(2) { width: 400px; height: 400px; bottom: -100px; right: -80px; }
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem; align-items: center;
}
.hero-label {
display: inline-flex; align-items: center; gap: .5rem;
background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4);
color: var(--amber-light) !important;
font-size: .8rem; font-weight: 700;
padding: .3rem .9rem; border-radius: 999px;
margin-bottom: 1.25rem; text-transform: uppercase; letter-spacing: .06em;
}
.hero-label span { animation: blink 1.2s step-start infinite; }
@keyframes blink { 50%{opacity:0} }
#hero h1 span.highlight {
background: linear-gradient(135deg, #C4B5FD, var(--purple-light));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
#hero h1 .underline-em {
position: relative; display: inline-block;
}
#hero h1 .underline-em::after {
content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
height: 3px; background: var(--amber); border-radius: 2px;
}
.hero-sub { font-size: 1.1rem; margin: 1.25rem 0 2rem; max-width: 500px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.hero-trust-item {
display: flex; align-items: center; gap: .4rem;
font-size: .85rem; color: #C4B5FD !important; font-weight: 500;
}
.hero-img-wrap {
position: relative;
border-radius: 20px;
padding: 3px;
background: linear-gradient(135deg, var(--purple), var(--purple-light), transparent);
box-shadow: 0 30px 80px rgba(109,40,217,.3);
}
.hero-img-wrap img {
width: 100%; border-radius: 18px; display: block;
}
.hero-img-badge {
position: absolute; bottom: 20px; left: -20px;
background: var(--surface2); border: 1px solid var(--border);
border-radius: 12px; padding: .65rem 1rem;
display: flex; align-items: center; gap: .6rem;
box-shadow: 0 8px 30px rgba(0,0,0,.4);
animation: float 3s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.hero-img-badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse-dot 1.5s infinite; }
@keyframes pulse-dot { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }
/* ─── HERO MOBILE IMAGE STRIP ────────────────────────────────────── */
.hero-img-mobile {
display: none;
width: 100%;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
margin-top: 1.5rem;
position: relative;
}
.hero-img-mobile img { width: 100%; display: block; border-radius: 14px; }
.hero-img-mobile .live-pill {
position: absolute; bottom: 10px; left: 10px;
background: rgba(13,11,20,.88); border: 1px solid var(--border);
border-radius: 999px; padding: .3rem .7rem;
display: flex; align-items: center; gap: .4rem;
font-size: .72rem; font-weight: 600; color: #F3F0FF !important;
}
.hero-img-mobile .live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse-dot 1.5s infinite; }
#problem { background-color: var(--surface) !important; }
.problem-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem; margin-top: 3rem;
}
.pain-card {
background: var(--bg) !important;
border: 1px solid var(--border);
border-radius: 16px; padding: 1.75rem;
transition: border-color .25s, transform .25s;
}
.pain-card:hover { border-color: var(--purple-light); transform: translateY(-4px); }
.pain-icon {
width: 48px; height: 48px; border-radius: 12px;
background: rgba(109,40,217,.18);
display: flex; align-items: center; justify-content: center;
margin-bottom: 1rem;
}
.pain-card h3 { margin-bottom: .5rem; font-size: 1.1rem; }
/* ─── AGITATION ──────────────────────────────────────────────────── */
#agitation {
background-color: var(--bg) !important;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.agit-box {
background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(239,68,68,.03));
border: 1px solid rgba(239,68,68,.3);
border-radius: 20px; padding: 2.5rem 3rem;
max-width: 780px; margin: 0 auto;
position: relative; overflow: hidden;
}
.agit-box::before {
content: '"'; position: absolute;
font-family: 'Syne', serif; font-size: 12rem; line-height: 1;
color: rgba(239,68,68,.07); top: -2rem; left: 1rem;
pointer-events: none;
}
.agit-list { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: .85rem; }
.agit-list li {
display: flex; align-items: flex-start; gap: .75rem;
font-size: 1rem; color: #D1C4E9 !important;
}
.agit-list li::before {
content: ''; flex-shrink: 0; width: 20px; height: 20px;
background: rgba(239,68,68,.2); border: 1px solid rgba(239,68,68,.5);
border-radius: 50%; margin-top: .15rem;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23EF4444' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center;
}
/* ─── SOLUTION ───────────────────────────────────────────────────── */
#solution { background-color: var(--surface) !important; }
.feat-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 1.5rem; margin-top: 3rem;
}
.feat-card {
background: var(--bg) !important;
border: 1px solid var(--border); border-radius: 18px; padding: 2rem;
position: relative; overflow: hidden;
transition: border-color .25s, transform .25s;
}
.feat-card:hover { border-color: var(--purple-light); transform: translateY(-4px); }
.feat-card .feat-num {
position: absolute; top: 1.25rem; right: 1.25rem;
font-family: 'Syne', sans-serif; font-size: 2.5rem; font-weight: 800;
color: rgba(109,40,217,.15); line-height: 1;
}
.feat-icon {
width: 52px; height: 52px; border-radius: 14px;
background: linear-gradient(135deg, var(--purple-dark), var(--purple));
display: flex; align-items: center; justify-content: center;
margin-bottom: 1.1rem;
box-shadow: 0 0 20px rgba(109,40,217,.35);
}
.feat-card h3 { margin-bottom: .5rem; font-size: 1.1rem; }
/* ─── OBJECTION HANDLING ─────────────────────────────────────────── */
#objection { background-color: var(--bg) !important; }
.obj-wrap {
display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
align-items: center; margin-top: 3rem;
}
.obj-list { display: flex; flex-direction: column; gap: 1.25rem; }
.obj-item {
display: flex; gap: 1rem; padding: 1.25rem 1.5rem;
background: var(--surface) !important;
border: 1px solid var(--border); border-radius: 14px;
}
.obj-icon {
width: 44px; height: 44px; flex-shrink: 0;
border-radius: 11px; background: rgba(109,40,217,.18);
display: flex; align-items: center; justify-content: center;
}
.obj-item h4 { font-size: .95rem; margin-bottom: .35rem; }
.obj-item p { font-size: .88rem !important; }
.obj-visual {
background: var(--surface2) !important;
border: 1px solid var(--border); border-radius: 20px; padding: 2rem;
}
.obj-stat { text-align: center; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.obj-stat:last-child { border-bottom: none; }
.obj-stat .num { font-family: 'Syne', sans-serif; font-size: 2.4rem; font-weight: 800; color: var(--purple-light) !important; }
.obj-stat .lbl { font-size: .85rem; color: var(--muted) !important; margin-top: .2rem; }
/* ─── SCARCITY / COUNTDOWN ───────────────────────────────────────── */
#scarcity {
background: linear-gradient(135deg, var(--purple-dark) 0%, #1A0A3E 100%) !important;
position: relative; overflow: hidden;
}
#scarcity .blob { background: rgba(245,158,11,.1) !important; width: 400px; height: 400px; top: -100px; right: -100px; }
.scarcity-inner { text-align: center; position: relative; z-index: 1; }
#scarcity h2 { color: #F3F0FF !important; }
.countdown-wrap {
display: flex; justify-content: center; gap: 1.5rem;
margin: 2.5rem 0;
}
.cd-block {
display: flex; flex-direction: column; align-items: center;
background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12);
border-radius: 16px; padding: 1.25rem 1.75rem;
min-width: 90px;
}
.cd-num {
font-family: 'Syne', sans-serif; font-size: 3rem; font-weight: 800;
color: #FCD34D !important; line-height: 1;
}
.cd-label { font-size: .75rem; color: #C4B5FD !important; text-transform: uppercase; letter-spacing: .08em; margin-top: .3rem; }
.cd-sep { font-size: 2.5rem; font-weight: 800; color: #FCD34D !important; align-self: center; margin-bottom: .5rem; }
.stock-bar-wrap { max-width: 400px; margin: 0 auto 2rem; }
.stock-bar-track { background: rgba(255,255,255,.1); border-radius: 999px; height: 10px; overflow: hidden; }
.stock-bar-fill { height: 100%; background: linear-gradient(90deg, var(--amber), #FBBF24); border-radius: 999px; width: 73%; position: relative; }
.stock-bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); animation: sweep 2s linear infinite; }
@keyframes sweep { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
.stock-label { display: flex; justify-content: space-between; font-size: .82rem; margin-top: .5rem; }
.stock-label span:first-child { color: var(--amber-light) !important; font-weight: 600; }
.stock-label span:last-child { color: var(--muted) !important; }
/* ─── BONUS ──────────────────────────────────────────────────────── */
#bonus { background-color: var(--surface) !important; }
.bonus-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem; margin-top: 2.5rem;
}
.bonus-card {
background: var(--bg) !important;
border: 1px solid rgba(109,40,217,.3); border-radius: 16px; padding: 1.5rem;
position: relative; overflow: hidden;
}
.bonus-card::before {
content: 'BONUS'; position: absolute; top: .75rem; right: -1rem;
background: var(--amber); color: #0D0B14 !important; font-size: .65rem; font-weight: 800;
padding: .2rem 1.5rem; transform: rotate(12deg); letter-spacing: .1em;
}
.bonus-icon { font-size: 2rem; margin-bottom: .75rem; }
.bonus-card h4 { font-size: 1rem; margin-bottom: .4rem; }
.bonus-card .value {
display: inline-block; margin-top: .75rem;
background: rgba(109,40,217,.15); border: 1px solid rgba(109,40,217,.35);
color: var(--purple-light) !important; font-size: .8rem; font-weight: 600;
padding: .2rem .7rem; border-radius: 999px;
}
/* ─── FAQ ────────────────────────────────────────────────────────── */
#faq { background-color: var(--surface) !important; }
.faq-list { max-width: 720px; margin: 2.5rem auto 0; display: flex; flex-direction: column; gap: 1rem; }
.faq-item {
background: var(--bg) !important;
border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.faq-q {
display: flex; align-items: center; justify-content: space-between;
padding: 1.2rem 1.5rem; cursor: pointer;
font-weight: 600; font-size: .97rem; color: var(--text) !important;
user-select: none; transition: background .2s;
}
.faq-q:hover { background: rgba(109,40,217,.08) !important; }
.faq-q .faq-icon {
flex-shrink: 0; width: 24px; height: 24px;
border-radius: 6px; background: rgba(109,40,217,.15);
display: flex; align-items: center; justify-content: center;
transition: transform .3s, background .2s;
}
.faq-item.open .faq-q .faq-icon { transform: rotate(45deg); background: rgba(109,40,217,.35); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .3s ease; }
.faq-item.open .faq-a { max-height: 300px; padding: 0 1.5rem 1.25rem; }
.faq-a p { font-size: .93rem !important; }
/* ─── PRICING ────────────────────────────────────────────────────── */
#pricing { background-color: var(--bg) !important; }
.pricing-card {
max-width: 560px; margin: 3rem auto 0;
background: var(--surface2) !important;
border: 2px solid var(--purple);
border-radius: 24px; overflow: hidden;
box-shadow: 0 0 60px rgba(109,40,217,.25);
position: relative;
}
.pricing-badge {
background: linear-gradient(90deg, var(--purple), var(--purple-light));
text-align: center; padding: .7rem;
font-size: .85rem; font-weight: 700; color: #FFF !important;
letter-spacing: .05em; text-transform: uppercase;
}
.pricing-body { padding: 2.5rem 2.5rem 2rem; }
.pricing-name { font-size: .9rem; color: var(--muted) !important; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.price-row { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: .75rem; }
.price-normal { font-size: 1.1rem; color: var(--muted) !important; text-decoration: line-through; }
.price-promo { font-family: 'Syne', sans-serif; font-size: 3.2rem; font-weight: 800; color: #FFF !important; line-height: 1; }
.price-save {
display: inline-block; background: rgba(16,185,129,.15);
border: 1px solid rgba(16,185,129,.4); color: var(--green) !important;
font-size: .8rem; font-weight: 700; padding: .2rem .7rem; border-radius: 999px;
margin-bottom: 1.5rem;
}
.value-table { width: 100%; border-collapse: collapse; margin-bottom: 1.75rem; }
.value-table tr { border-bottom: 1px solid var(--border); }
.value-table tr:last-child { border-bottom: none; }
.value-table td { padding: .75rem .25rem; font-size: .9rem; }
.value-table td:first-child { color: var(--text) !important; }
.value-table td:last-child { text-align: right; color: var(--muted) !important; }
.value-table .total-row td { color: var(--text) !important; font-weight: 700; }
.value-table .total-row td:last-child { color: var(--amber-light) !important; font-size: 1rem; }
.strike { text-decoration: line-through; color: var(--muted) !important; }
.price-cta { width: 100%; justify-content: center; font-size: 1.15rem !important; padding: 1.1rem !important; border-radius: 14px !important; }
.price-note { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .8rem; color: #7C6FA0 !important; margin-top: .75rem; }
/* ─── GUARANTEE ──────────────────────────────────────────────────── */
#guarantee { background-color: var(--surface) !important; }
.guarantee-box {
max-width: 640px; margin: 2.5rem auto 0;
background: var(--bg) !important;
border: 1px solid rgba(16,185,129,.35); border-radius: 20px;
padding: 2.5rem; text-align: center;
box-shadow: 0 0 40px rgba(16,185,129,.08);
}
.guarantee-icon {
width: 80px; height: 80px; border-radius: 50%;
background: rgba(16,185,129,.12); border: 2px solid rgba(16,185,129,.4);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1.25rem;
box-shadow: 0 0 30px rgba(16,185,129,.2);
}
.guarantee-box h3 { color: var(--green) !important; margin-bottom: .75rem; }
/* ─── SOCIAL PROOF ───────────────────────────────────────────────── */
#social-proof { background-color: var(--bg) !important; }
.testimonial-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem; margin-top: 2.5rem;
}
.testi-card {
background: var(--surface) !important;
border: 1px solid var(--border); border-radius: 18px; padding: 1.75rem;
transition: border-color .25s;
}
.testi-card:hover { border-color: var(--purple-light); }
.testi-stars { display: flex; gap: .2rem; margin-bottom: .85rem; }
.star { color: var(--amber) !important; font-size: 1rem; }
.testi-text { font-size: .95rem; color: #D1C4E9 !important; font-style: italic; margin-bottom: 1.25rem; }
.testi-author { display: flex; align-items: center; gap: .75rem; }
.testi-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, var(--purple), var(--purple-light));
display: flex; align-items: center; justify-content: center;
font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1rem; color: #FFF !important;
flex-shrink: 0;
}
.testi-name { font-weight: 600; font-size: .95rem; color: var(--text) !important; }
.testi-role { font-size: .8rem; color: var(--muted) !important; }
/* ─── FINAL CTA ──────────────────────────────────────────────────── */
#final-cta {
background: linear-gradient(135deg, #1A0A3E 0%, var(--purple-dark) 50%, #0D0B14 100%) !important;
text-align: center; padding: 6rem 0;
position: relative; overflow: hidden;
}
#final-cta .blob { width: 600px; height: 600px; top: -200px; left: 50%; transform: translateX(-50%); }
#final-cta h2 { color: #F3F0FF !important; max-width: 660px; margin: 0 auto .75rem; }
.final-cta-sub { max-width: 520px; margin: 0 auto 2rem; font-size: 1.05rem; }
#cta-form { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
/* ─── FOOTER ─────────────────────────────────────────────────────── */
footer {
background: var(--surface) !important;
border-top: 1px solid var(--border);
text-align: center; padding: 2rem 1.25rem;
font-size: .85rem; color: var(--muted) !important;
}
footer a { color: var(--purple-light) !important; text-decoration: none !important; }
/* ─── STICKY MOBILE CTA ──────────────────────────────────────────── */
#sticky-cta {
display: none;
position: fixed; bottom: 0; left: 0; right: 0;
z-index: 999; padding: .85rem 1.25rem 1.1rem;
background: rgba(13,11,20,.95) !important;
backdrop-filter: blur(12px);
border-top: 1px solid var(--border);
box-shadow: 0 -8px 30px rgba(0,0,0,.5);
}
#sticky-cta .btn { width: 100%; justify-content: center; font-size: 1.05rem !important; }
#sticky-cta .price-hint { text-align: center; font-size: .78rem; color: var(--muted) !important; margin-top: .4rem; }
/* ─── SALES NOTIFICATION POPUP ───────────────────────────────────── */
#sales-notif {
position: fixed; top: 1rem; left: 1rem; z-index: 9999;
background: var(--surface2) !important;
border: 1px solid var(--border); border-left: 3px solid var(--purple-light);
border-radius: 14px; padding: .9rem 1.1rem;
display: flex; align-items: center; gap: .85rem;
max-width: 290px; min-width: 260px;
box-shadow: 0 10px 40px rgba(0,0,0,.5);
transform: translateX(-110%); transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
#sales-notif.show { transform: translateX(0); }
#sales-notif.hide { transform: translateX(-110%); transition: transform .35s ease-in; }
.notif-avatar {
width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--purple), var(--purple-light));
display: flex; align-items: center; justify-content: center;
font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1rem; color: #FFF !important;
}
.notif-text { flex: 1; }
.notif-name { font-size: .88rem; font-weight: 600; color: var(--text) !important; }
.notif-action { font-size: .78rem; color: var(--muted) !important; }
.notif-time { font-size: .7rem; color: var(--purple-light) !important; font-weight: 600; margin-top: .15rem; }
.notif-close {
cursor: pointer; width: 22px; height: 22px; flex-shrink: 0;
border-radius: 50%; background: rgba(255,255,255,.06);
display: flex; align-items: center; justify-content: center;
color: var(--muted) !important;
font-size: .8rem; line-height: 1;
border: none; padding: 0;
}
.notif-close:hover { background: rgba(255,255,255,.12) !important; }
/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; gap: 2rem; }
.hero-img-badge { left: 10px; bottom: 12px; }
.obj-wrap { grid-template-columns: 1fr; gap: 1.75rem; }
.obj-visual { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.obj-stat { border-bottom: none; border-right: 1px solid var(--border); padding: .75rem .5rem; }
.obj-stat:last-child { border-right: none; }
.feat-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.problem-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
/* Sticky CTA */
#sticky-cta { display: block; }
body { padding-bottom: 88px !important; }
/* Global spacing */
.section { padding: 3rem 0; }
.container { padding: 0 1rem !important; }
/* Typography */
h1 { font-size: clamp(1.65rem, 7.5vw, 2.2rem) !important; line-height: 1.2; }
h2 { font-size: clamp(1.3rem, 6vw, 1.75rem) !important; line-height: 1.2; }
h3 { font-size: 1rem !important; }
p { font-size: .93rem !important; }
/* Announcement bar */
#announce { font-size: .75rem !important; padding: .55rem .75rem; line-height: 1.4; }
/* Nav */
nav { padding: .75rem 1rem; }
.logo { font-size: 1.2rem !important; }
.nav-cta { font-size: .8rem !important; padding: .5rem 1rem !important; }
/* Hero */
#hero { padding: 3rem 0 2.5rem; }
.hero-label { font-size: .72rem !important; padding: .28rem .75rem; margin-bottom: 1rem; }
.hero-sub { font-size: .95rem !important; margin: 1rem 0 1.5rem; max-width: 100%; }
.hero-trust { gap: .65rem; }
.hero-trust-item { font-size: .8rem !important; }
/* Hide hero desktop image on small mobile to reduce scroll */
.hero-img-wrap { display: none; }
/* Show mobile strip instead */
.hero-img-mobile { display: block; }
.btn-lg { font-size: 1rem !important; padding: .9rem 1.6rem !important; width: 100%; justify-content: center; }
/* Problem cards — single col */
.problem-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
.pain-card { padding: 1.35rem; }
.pain-icon { width: 42px; height: 42px; margin-bottom: .75rem; }
/* Agitation */
.agit-box { padding: 1.5rem 1.25rem; border-radius: 16px; }
.agit-box::before { font-size: 8rem; top: -1rem; }
.agit-list { margin-top: 1.1rem; gap: .75rem; }
.agit-list li { font-size: .9rem !important; }
/* Solution cards — single col */
.feat-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
.feat-card { padding: 1.4rem; }
.feat-icon { width: 44px; height: 44px; margin-bottom: .85rem; }
.feat-card .feat-num { font-size: 2rem; }
/* Objection */
.obj-wrap { gap: 1.5rem; margin-top: 2rem; }
.obj-item { padding: 1rem 1.1rem; gap: .75rem; }
.obj-icon { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; }
.obj-item h4 { font-size: .9rem; }
.obj-item p { font-size: .82rem !important; }
.obj-visual { grid-template-columns: 1fr; border-radius: 16px; padding: 1.25rem; }
.obj-stat { border-right: none !important; border-bottom: 1px solid var(--border) !important; padding: .85rem 0; }
.obj-stat:last-child { border-bottom: none !important; }
.obj-stat .num { font-size: 2rem !important; }
.obj-stat .lbl { font-size: .8rem !important; }
/* Scarcity / Countdown */
#scarcity { padding: 3rem 0; }
.countdown-wrap { gap: .6rem; margin: 1.75rem 0; }
.cd-block { min-width: 72px; padding: .9rem .85rem; border-radius: 12px; }
.cd-num { font-size: 2.1rem !important; }
.cd-label { font-size: .68rem; }
.cd-sep { font-size: 1.6rem; margin-bottom: .4rem; }
.stock-bar-wrap { padding: 0 .5rem; }
.stock-label { font-size: .78rem; }
/* Bonus cards — single col */
.bonus-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
.bonus-card { padding: 1.35rem 1.35rem 1.35rem 1.35rem; }
.bonus-card::before { font-size: .6rem; padding: .18rem 1.25rem; top: .6rem; right: -.85rem; }
.bonus-icon { font-size: 1.7rem; margin-bottom: .6rem; }
/* FAQ */
.faq-list { margin-top: 2rem; gap: .75rem; }
.faq-q { padding: 1rem 1.1rem; font-size: .9rem !important; }
.faq-item.open .faq-a { padding: 0 1.1rem 1rem; }
.faq-a p { font-size: .87rem !important; }
/* Pricing */
.pricing-card { border-radius: 18px; margin-top: 2rem; }
.pricing-body { padding: 1.5rem 1.25rem 1.25rem; }
.price-promo { font-size: 2.6rem !important; }
.value-table td { font-size: .82rem !important; padding: .6rem .2rem; }
.price-cta { font-size: 1.05rem !important; padding: 1rem !important; }
/* Guarantee */
.guarantee-box { padding: 1.75rem 1.25rem; border-radius: 16px; }
.guarantee-icon { width: 64px; height: 64px; }
.guarantee-icon svg { width: 32px; height: 32px; }
/* Testimonials — single col */
.testimonial-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
.testi-card { padding: 1.35rem; }
.testi-text { font-size: .9rem !important; }
/* Final CTA */
#final-cta { padding: 3.5rem 0; }
#final-cta h2 { font-size: clamp(1.3rem, 6vw, 1.65rem) !important; }
.final-cta-sub { font-size: .93rem !important; margin-bottom: 1.5rem; }
.btn-xl { font-size: 1.05rem !important; padding: .95rem 1.75rem !important; width: 100%; justify-content: center; }
/* Sticky CTA */
#sticky-cta { padding: .75rem 1rem 1rem; }
#sticky-cta .btn { font-size: 1rem !important; padding: .9rem 1rem !important; border-radius: 12px !important; }
#sticky-cta .price-hint { font-size: .73rem; }
/* Sales notif — smaller, no overlap with sticky CTA */
#sales-notif {
max-width: calc(100vw - 2rem);
min-width: 0;
font-size: .85rem;
top: .75rem; left: .75rem;
padding: .75rem .9rem;
gap: .65rem;
}
.notif-avatar { width: 36px; height: 36px; font-size: .85rem; }
.notif-name { font-size: .82rem; }
.notif-action { font-size: .73rem; }
.notif-time { font-size: .67rem; }
/* Footer */
footer { padding: 1.75rem 1rem; font-size: .8rem; }
footer p { line-height: 1.7; }
/* Divider */
.divider { margin: .6rem auto 1.25rem; }
.badge { font-size: .72rem; padding: .25rem .7rem; }
}
/* ── Small mobile (≤430px) ── */
@media (max-width: 430px) {
h1 { font-size: clamp(1.5rem, 8vw, 1.95rem) !important; }
h2 { font-size: clamp(1.2rem, 6.5vw, 1.55rem) !important; }
.countdown-wrap { gap: .4rem; }
.cd-block { min-width: 62px; padding: .8rem .65rem; }
.cd-num { font-size: 1.85rem !important; }
.cd-label { font-size: .62rem; letter-spacing: .04em; }
.cd-sep { font-size: 1.4rem; }
#announce { font-size: .7rem !important; }
.agit-list li { font-size: .85rem !important; }
.hero-label { font-size: .68rem !important; }
}
</style>
</head>
<body>
<!-- ════════════════════════════════════════════════════════════════
SALES NOTIFICATION POPUP
════════════════════════════════════════════════════════════════ -->
<div id="sales-notif" role="status" aria-live="polite">
<div class="notif-avatar" id="notif-initial">R</div>
<div class="notif-text">
<div class="notif-name" id="notif-name">Rizky dari Bandung</div>
<div class="notif-action">baru saja membeli PromptCanvas 🎉</div>
<div class="notif-time" id="notif-time">2 menit lalu</div>
</div>
<button class="notif-close" onclick="closeNotif()" aria-label="Tutup notifikasi">✕</button>
</div>
<!-- ════════════════════════════════════════════════════════════════
ANNOUNCEMENT BAR
════════════════════════════════════════════════════════════════ -->
<div id="announce">
🔥 Flash Sale Aktif — Hemat Rp50.000 | Harga naik kembali setelah timer habis
</div>
<!-- ════════════════════════════════════════════════════════════════
NAVIGATION
════════════════════════════════════════════════════════════════ -->
<nav>
<div class="nav-inner">
<a href="#" class="logo">Prompt<span>Canvas</span></a>
<a href="#cta-form" class="btn btn-primary nav-cta" data-action="cta-click">Beli Sekarang →</a>
</div>
</nav>
<!-- ════════════════════════════════════════════════════════════════
HERO SECTION
════════════════════════════════════════════════════════════════ -->
<section id="hero">
<div class="blob blob-purple" style="width:550px;height:550px;top:-150px;left:-150px;"></div>
<div class="blob blob-amber" style="width:400px;height:400px;bottom:-100px;right:-80px;"></div>
<div class="container">
<div class="hero-grid">
<!-- Copy -->
<div>
<div class="hero-label">
<span>●</span> Flash Sale Terbatas — Hari Ini
</div>
<h1>
Hasil ChatGPT Kamu <span class="underline-em">Terasa Kaku?</span>
Saatnya Pakai <span class="highlight">Prompt Terstruktur</span>
dari PromptCanvas
</h1>
<p class="hero-sub">
Platform generator prompt AI yang dirancang khusus untuk <strong>Digital Marketer</strong> — hasilkan konten, copy, dan strategi berkualitas tinggi tanpa buang waktu berjam-jam merevisi.
</p>
<a href="#cta-form" class="btn btn-primary btn-lg" data-action="cta-click">
<!-- icon arrow right -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
Dapatkan Akses Sekarang
</a>
<div class="micro-trust">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7C6FA0" stroke-width="2" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
Pembayaran aman · Akses langsung · Tanpa kontrak
</div>
<div class="hero-trust">
<div class="hero-trust-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8B5CF6" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
<span>Generate prompt tanpa batas</span>
</div>
<div class="hero-trust-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8B5CF6" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
<span>Akses semua template premium</span>
</div>
<div class="hero-trust-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8B5CF6" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
<span>Update konten terus bertambah</span>
</div>
</div>
<!-- Mobile-only compact image strip -->
<div class="hero-img-mobile">
<img src="https://placehold.co/700x280/1A1530/8B5CF6?text=PromptCanvas+UI" alt="Tampilan PromptCanvas" loading="eager" />
<div class="live-pill"><div class="dot"></div>Generator Aktif · 312 prompt hari ini</div>
</div>
</div>
<!-- Desktop image -->
<div>
<div class="hero-img-wrap">
<img src="https://placehold.co/600x420/1A1530/8B5CF6?text=PromptCanvas+UI" alt="Tampilan antarmuka PromptCanvas" loading="eager" />
<div class="hero-img-badge">
<div class="dot"></div>
<div>
<div style="font-size:.8rem;font-weight:700;color:#F3F0FF !important;">Generator Aktif</div>
<div style="font-size:.72rem;color:#A89EC4 !important;">312 prompt dibuat hari ini</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════
PROBLEM SECTION
════════════════════════════════════════════════════════════════ -->
<section id="problem" class="section">
<div class="container">
<div class="text-center">
<div class="badge">Problem</div>
<h2>Kenapa Hasil AI Kamu Masih <span class="text-purple">Jauh dari Ekspektasi?</span></h2>
<div class="divider"></div>
<p style="max-width:560px;margin:0 auto;">Bukan salah AI-nya. Masalahnya ada di cara kamu memberi instruksi. Inilah hambatan nyata yang dirasakan hampir setiap Digital Marketer.</p>
</div>
<div class="problem-grid">
<div class="pain-card">
<div class="pain-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
</div>
<h3>Output AI Terasa Generik & Kaku</h3>
<p>Kamu ketik satu kalimat, AI balas dengan teks yang bisa dipakai siapa saja. Tidak ada keunikan, tidak ada konteks bisnis kamu.</p>
</div>
<div class="pain-card">
<div class="pain-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="9" x2="15" y2="15"/><line x1="15" y1="9" x2="9" y2="15"/></svg>
</div>
<h3>Kebuntuan Ide & Blank Page Syndrome</h3>
<p>Duduk di depan layar, tidak tahu harus mulai dari mana. Waktu habis untuk berpikir, deadline semakin dekat.</p>
</div>
<div class="pain-card">
<div class="pain-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<h3>Ketidakefisienan Waktu (Trial & Error)</h3>
<p>Revisi 5–10 kali hanya untuk satu caption. Bolak-balik mengedit prompt karena hasilnya tidak sesuai yang kamu bayangkan.</p>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════
AGITATION SECTION
════════════════════════════════════════════════════════════════ -->
<section id="agitation" class="section">
<div class="container">
<div class="text-center" style="margin-bottom:2.5rem;">
<div class="badge" style="background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.4);color:#FCA5A5 !important;">Agitasi</div>
<h2>Dan Kalau Dibiarkan, Ini yang Akan Terjadi…</h2>
</div>
<div class="agit-box">
<ul class="agit-list">
<li>Kompetitor kamu yang sudah pakai prompt terstruktur akan memproduksi konten <strong>3x lebih cepat</strong> — sementara kamu masih stuck di revisi pertama.</li>
<li>Setiap jam yang terbuang untuk trial & error adalah jam yang <strong>tidak bisa kamu tagih</strong> ke klien atau tidak menghasilkan revenue.</li>
<li>Energi kreatif kamu terkuras untuk hal teknis, bukan untuk <strong>strategi dan eksekusi</strong> yang benar-benar menggerakkan bisnis.</li>
<li>Tim kamu kehilangan kepercayaan kalau deliverable selalu <strong>molor dan kualitasnya tidak konsisten</strong>.</li>
</ul>
<div style="margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid rgba(239,68,68,.2);font-size:.93rem;color:#FCA5A5 !important;font-weight:500;">
⚡ Kabar baiknya: ini semua bisa diatasi — dengan pendekatan yang tepat.
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════
SOLUTION SECTION
════════════════════════════════════════════════════════════════ -->
<section id="solution" class="section">
<div class="container">
<div class="text-center">
<div class="badge">Solusi</div>
<h2>Kenalkan: <span class="text-purple">PromptCanvas</span></h2>
<div class="divider"></div>
<p style="max-width:600px;margin:0 auto;">Platform generator prompt AI yang membantu Digital Marketer menghasilkan instruksi yang terstruktur, kontekstual, dan siap pakai — sehingga output AI kamu langsung relevan dari percobaan pertama.</p>
</div>
<div class="feat-grid">
<div class="feat-card">
<span class="feat-num">01</span>
<div class="feat-icon">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#E9D5FF" stroke-width="2" stroke-linecap="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
</div>
<h3>Generator Prompt Terstruktur</h3>
<p>Tidak perlu tebak-tebakan. Sistem membantu kamu membangun prompt berlapis dengan konteks, persona, format, dan constraint yang tepat.</p>
</div>
<div class="feat-card">
<span class="feat-num">02</span>
<div class="feat-icon">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#E9D5FF" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
</div>
<h3>Template Library Terus Bertambah</h3>
<p>Akses ratusan template prompt siap pakai untuk copywriting, konten media sosial, email marketing, riset, dan lebih banyak lagi.</p>
</div>
<div class="feat-card">
<span class="feat-num">03</span>
<div class="feat-icon">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#E9D5FF" stroke-width="2" stroke-linecap="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
</div>
<h3>Generate Tanpa Batas</h3>
<p>Tidak ada kuota harian. Eksperimen sebanyak yang kamu mau, kapan saja, tanpa khawatir limit habis di tengah proyek.</p>
</div>
<div class="feat-card">
<span class="feat-num">04</span>
<div class="feat-icon">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#E9D5FF" stroke-width="2" stroke-linecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h3>Dirancang untuk Digital Marketer</h3>
<p>Bukan tool generik. Setiap fitur dioptimalkan untuk kebutuhan spesifik marketing: iklan, konten, email, hingga strategi kampanye.</p>
</div>
<div class="feat-card">
<span class="feat-num">05</span>
<div class="feat-icon">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#E9D5FF" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
</div>
<h3>Multi-Platform Output</h3>
<p>Prompt yang dihasilkan kompatibel dengan ChatGPT, Claude, Gemini, dan model AI lainnya — fleksibel sesuai workflow kamu.</p>
</div>
<div class="feat-card">
<span class="feat-num">06</span>
<div class="feat-icon">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#E9D5FF" stroke-width="2" stroke-linecap="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
</div>
<h3>Update Berkelanjutan</h3>
<p>Dunia AI bergerak cepat. Generator dan template diperbarui secara rutin mengikuti perkembangan model dan kebutuhan pasar terkini.</p>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════
OBJECTION HANDLING
════════════════════════════════════════════════════════════════ -->
<section id="objection" class="section">
<div class="container">
<div class="text-center">
<div class="badge">Keraguan Dijawab</div>
<h2>"Apakah Hasilnya Tidak Akan <span class="text-purple">Sama dengan Pengguna Lain?</span>"</h2>
<div class="divider"></div>
<p style="max-width:600px;margin:0 auto;">Pertanyaan yang wajar. Dan jawabannya: tidak. Inilah cara PromptCanvas memastikan output kamu tetap unik.</p>
</div>
<div class="obj-wrap">
<div class="obj-list">
<div class="obj-item">
<div class="obj-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
<div>
<h4>Konteks Bisnis Kamu = Input Utama</h4>
<p>Generator meminta informasi spesifik: niche, target audiens, tone of voice, dan produk kamu. Hasilnya otomatis berbeda dari pengguna lain.</p>
</div>
</div>
<div class="obj-item">
<div class="obj-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/></svg>
</div>
<div>
<h4>Ratusan Variabel Kombinasi</h4>
<p>Struktur prompt mencakup persona, format, panjang, batasan, dan objektif yang dikombinasikan secara unik tiap sesi.</p>
</div>
</div>
<div class="obj-item">
<div class="obj-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
</div>
<div>
<h4>Output AI Berbeda untuk Setiap Generate</h4>
<p>Bahkan dengan prompt yang mirip, model AI menghasilkan teks berbeda. PromptCanvas membantu kamu mengarahkan dengan presisi — bukan menyalin template orang lain.</p>
</div>
</div>
</div>
<div class="obj-visual">
<div class="obj-stat">
<div class="num">312+</div>
<div class="lbl">Prompt dibuat hari ini</div>
</div>
<div class="obj-stat">
<div class="num">98%</div>
<div class="lbl">Pengguna melaporkan output lebih relevan</div>
</div>
<div class="obj-stat">
<div class="num">∞</div>
<div class="lbl">Kombinasi konteks yang bisa dihasilkan</div>
</div>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════
SOCIAL PROOF
════════════════════════════════════════════════════════════════ -->
<section id="social-proof" class="section">
<div class="container">
<div class="text-center">
<div class="badge">Testimoni</div>
<h2>Apa Kata Mereka yang Sudah <span class="text-purple">Mencobanya?</span></h2>
<div class="divider"></div>
</div>
<div class="testimonial-grid">
<div class="testi-card">
<div class="testi-stars">
<span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
</div>
<p class="testi-text">"Sebelumnya saya bisa habis 2 jam hanya untuk revisi satu copy iklan. Setelah pakai PromptCanvas, draft pertama sudah 80% siap. Workflow tim marketing kami jauh lebih cepat."</p>
<div class="testi-author">
<div class="testi-avatar">A</div>
<div>
<div class="testi-name">Arief W.</div>
<div class="testi-role">Digital Marketing Manager, Startup SaaS Jakarta</div>
</div>
</div>
</div>
<div class="testi-card">
<div class="testi-stars">
<span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
</div>
<p class="testi-text">"Yang saya suka, outputnya tidak terasa 'robotik'. Karena saya masukkan konteks brand saya, hasilnya benar-benar sesuai karakter konten kami. Game changer untuk content team."</p>
<div class="testi-author">
<div class="testi-avatar">D</div>
<div>
<div class="testi-name">Dian R.</div>
<div class="testi-role">Head of Content, Agensi Digital Surabaya</div>
</div>
</div>
</div>
<div class="testi-card">
<div class="testi-stars">
<span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
</div>
<p class="testi-text">"Awalnya skeptis — takut hasilnya sama dengan pengguna lain. Ternyata tidak. Setiap prompt yang saya generate sudah terintegrasi konteks produk saya. Sangat membantu."</p>
<div class="testi-author">
<div class="testi-avatar">M</div>
<div>
<div class="testi-name">M. Farhan</div>
<div class="testi-role">Performance Marketing Specialist, E-Commerce</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════
BONUS SECTION
════════════════════════════════════════════════════════════════ -->
<section id="bonus" class="section">
<div class="container">
<div class="text-center">
<div class="badge" style="background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.4);color:#FCD34D !important;">Bonus Eksklusif</div>
<h2>Dapatkan Ini Saat Kamu <span class="text-purple">Join Hari Ini</span></h2>
<div class="divider"></div>
<p style="max-width:540px;margin:0 auto;">Berlaku khusus untuk pembelian selama periode Flash Sale. Setelah timer habis, bonus ini tidak lagi disertakan.</p>
</div>
<div class="bonus-grid">
<div class="bonus-card">
<div class="bonus-icon">🎯</div>
<h4>Akses Semua Generator Prompt</h4>
<p style="font-size:.88rem !important;">Tidak hanya satu kategori — akses semua generator yang ada, termasuk yang akan ditambahkan di masa mendatang.</p>
<span class="value">Termasuk dalam paket</span>
</div>
<div class="bonus-card">
<div class="bonus-icon">⚡</div>
<h4>Generate Prompt Tanpa Batas</h4>
<p style="font-size:.88rem !important;">Tidak ada kuota atau limit harian. Eksperimen sepuasnya tanpa khawatir habis di tengah proyek penting.</p>
<span class="value">Unlimited</span>
</div>
<div class="bonus-card">
<div class="bonus-icon">🔄</div>
<h4>Update Konten Seumur Hidup</h4>
<p style="font-size:.88rem !important;">Bayar sekali, nikmati semua update template dan generator baru yang terus ditambahkan tanpa biaya tambahan.</p>
<span class="value">Lifetime Updates</span>
</div>
<div class="bonus-card">
<div class="bonus-icon">📚</div>
<h4>Library Template Premium</h4>
<p style="font-size:.88rem !important;">Kumpulan template prompt siap pakai untuk copywriting, konten sosmed, email, riset, dan strategi marketing.</p>
<span class="value">100+ Template</span>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════
SCARCITY + COUNTDOWN
════════════════════════════════════════════════════════════════ -->
<section id="scarcity" class="section">
<div class="blob blob-amber" style="width:450px;height:450px;top:-100px;right:-100px;"></div>
<div class="container">
<div class="scarcity-inner">
<div class="badge" style="background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.5);color:#FCD34D !important;">⏰ Penawaran Terbatas</div>
<h2>Harga Flash Sale Berakhir Dalam:</h2>
<div class="countdown-wrap" role="timer" aria-label="Hitung mundur penawaran">
<div class="cd-block">
<span class="cd-num" id="cd-hours">08</span>
<span class="cd-label">Jam</span>
</div>
<span class="cd-sep">:</span>
<div class="cd-block">
<span class="cd-num" id="cd-minutes">43</span>
<span class="cd-label">Menit</span>
</div>
<span class="cd-sep">:</span>
<div class="cd-block">
<span class="cd-num" id="cd-seconds">27</span>
<span class="cd-label">Detik</span>
</div>
</div>
<div class="stock-bar-wrap">
<div style="font-size:.85rem;color:#FCD34D !important;font-weight:600;margin-bottom:.5rem;">🔥 Slot Flash Sale Tersisa</div>
<div class="stock-bar-track">
<div class="stock-bar-fill"></div>
</div>
<div class="stock-label">
<span>73% slot sudah diambil</span>
<span>Sisa <30 slot</span>
</div>
</div>
<a href="#cta-form" class="btn btn-primary btn-xl" data-action="cta-click" style="background:linear-gradient(135deg,#F59E0B,#FBBF24) !important;color:#0D0B14 !important;box-shadow:0 0 30px rgba(245,158,11,.45);">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
Ambil Harga Flash Sale Sekarang
</a>
<p style="margin-top:1rem;font-size:.82rem;color:#D1C4E9 !important;">Setelah timer habis, harga kembali ke Rp199.000</p>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════
FAQ
════════════════════════════════════════════════════════════════ -->
<section id="faq" class="section">
<div class="container">
<div class="text-center">
<div class="badge">FAQ</div>
<h2>Pertanyaan yang <span class="text-purple">Sering Ditanyakan</span></h2>
<div class="divider"></div>
</div>
<div class="faq-list">
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">
Apakah PromptCanvas cocok untuk pemula yang baru kenal AI?
<div class="faq-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C4B5FD" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</div>
</div>
<div class="faq-a"><p>Ya, sangat cocok. PromptCanvas dirancang dengan antarmuka yang intuitif. Kamu tidak perlu tahu cara menulis prompt dari nol — sistem memandu kamu langkah demi langkah untuk mengisi konteks yang relevan, lalu generator bekerja secara otomatis.</p></div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">
AI mana saja yang kompatibel dengan prompt dari PromptCanvas?
<div class="faq-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C4B5FD" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</div>
</div>
<div class="faq-a"><p>Prompt yang dihasilkan kompatibel dengan ChatGPT (GPT-4o/4), Claude (Anthropic), Google Gemini, dan model AI populer lainnya. Struktur prompt kami menggunakan prinsip universal yang bekerja lintas platform.</p></div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">
Apakah hasilnya tidak akan sama dengan pengguna lain?
<div class="faq-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C4B5FD" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</div>
</div>
<div class="faq-a"><p>Tidak. Setiap prompt dibangun berdasarkan konteks unik yang kamu masukkan: nama brand, produk, target audiens, tone of voice, dan objektif kampanye. Kombinasi variabel ini memastikan output kamu berbeda dari siapapun. Selain itu, model AI sendiri tidak pernah menghasilkan output yang identik dua kali.</p></div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">
Apakah ini pembelian sekali bayar atau berlangganan bulanan?
<div class="faq-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C4B5FD" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</div>
</div>
<div class="faq-a"><p>Penawaran Flash Sale ini adalah harga spesial untuk akses. Detail model berlangganan dan durasi akses tertera di halaman checkout. Pastikan baca ketentuannya sebelum melakukan pembayaran.</p></div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">
Bagaimana jika saya tidak puas setelah membeli?
<div class="faq-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C4B5FD" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</div>
</div>
<div class="faq-a"><p>Kami menyediakan jaminan kepuasan. Jika dalam periode yang ditentukan kamu merasa PromptCanvas tidak membantu workflow kamu, hubungi tim support kami dan kami akan meninjau kasusmu secara langsung.</p></div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">
Kapan saya bisa mulai menggunakan setelah pembayaran?
<div class="faq-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C4B5FD" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</div>
</div>
<div class="faq-a"><p>Akses diberikan segera setelah pembayaran terkonfirmasi. Kamu akan menerima detail login melalui email yang didaftarkan. Prosesnya otomatis dan biasanya selesai dalam hitungan menit.</p></div>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════
GUARANTEE
════════════════════════════════════════════════════════════════ -->
<section id="guarantee" class="section">
<div class="container">
<div class="text-center">
<div class="badge" style="background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.4);color:#6EE7B7 !important;">Jaminan Kepuasan</div>
<h2>Tidak Ada Risiko untuk <span class="text-purple">Kamu</span></h2>
<div class="divider"></div>
</div>
<div class="guarantee-box">
<div class="guarantee-icon">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>
</div>
<h3>Jaminan Kepuasan Pengguna</h3>
<p style="max-width:500px;margin:.75rem auto 1.25rem;font-size:.95rem !important;">Kami percaya PromptCanvas akan membantu workflow marketing kamu secara nyata. Jika kamu merasa tidak mendapat nilai dari platform ini, hubungi kami dan tim kami akan menangani situasinya dengan adil.</p>
<div style="display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.25rem;">
<div style="display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:#6EE7B7 !important;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
Support responsif
</div>
<div style="display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:#6EE7B7 !important;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
Akses langsung setelah bayar
</div>
<div style="display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:#6EE7B7 !important;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
Pembayaran terenkripsi
</div>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════
PRICING + FINAL CTA
════════════════════════════════════════════════════════════════ -->
<section id="pricing" class="section">
<div class="container">
<div class="text-center">
<div class="badge" style="background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.45);color:#FCD34D !important;">Penawaran Flash Sale</div>
<h2>Investasi <span class="text-purple">Sekali</span> untuk Efisiensi Setiap Hari</h2>
<div class="divider"></div>
</div>
<div class="pricing-card">
<div class="pricing-badge">⚡ FLASH SALE — HARGA TERBAIK HARI INI</div>
<div class="pricing-body">
<div class="pricing-name">PromptCanvas — Akses Penuh</div>
<div class="price-row">
<span class="price-normal">Rp199.000</span>
<span class="price-promo">Rp149.000</span>
</div>
<div class="price-save">🎉 Hemat Rp50.000 hari ini</div>
<table class="value-table">
<tbody>
<tr>
<td>✦ Akses semua generator prompt</td>
<td class="strike">Rp99.000</td>
</tr>
<tr>
<td>✦ Generate prompt tanpa batas</td>
<td class="strike">Rp79.000</td>
</tr>
<tr>
<td>✦ Library 100+ template premium</td>
<td class="strike">Rp59.000</td>
</tr>
<tr>
<td>✦ Update konten berkala</td>
<td class="strike">Rp49.000</td>
</tr>
<tr>
<td>✦ Multi-platform AI compatibility</td>
<td class="strike">Rp39.000</td>
</tr>
<tr class="total-row">
<td><strong>Total Nilai</strong></td>
<td><strong>Rp325.000</strong></td>
</tr>
<tr class="total-row">
<td><strong>Harga Flash Sale</strong></td>
<td style="color:#FCD34D !important;font-size:1.1rem;font-weight:800;"><strong>Rp149.000</strong></td>
</tr>
</tbody>
</table>
<div id="cta-form">
<a href="https://tigafa.myr.id/pl/promptcanvas?ma=2lYwctS"
class="btn btn-primary price-cta"
data-action="cta-click"
style="width:100%;justify-content:center;font-size:1.15rem !important;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
Beli Sekarang — Rp149.000
</a>
</div>
<div class="price-note">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7C6FA0" stroke-width="2" stroke-linecap="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
Pembayaran aman · Akses dikirim langsung ke email kamu
</div>
<p style="text-align:center;font-size:.78rem;margin-top:.5rem;color:#5B4F7C !important;">
Dengan melanjutkan, kamu menyetujui syarat & ketentuan yang berlaku.
</p>
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════
FINAL CTA SECTION
════════════════════════════════════════════════════════════════ -->
<section id="final-cta">
<div class="blob blob-purple" style="width:600px;height:600px;top:-200px;left:50%;transform:translateX(-50%);"></div>
<div class="container" style="position:relative;z-index:1;">
<div class="text-center">
<div class="badge" style="background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.5);color:#FCD34D !important;">Terakhir Kali</div>
<h2 style="color:#F3F0FF !important;">Waktu Kamu untuk Berhenti Buang Waktu di Hasil AI yang Tidak Optimal</h2>
<p class="final-cta-sub">Digital Marketer yang efisien bukan yang paling pintar — tapi yang paling cepat mengeksekusi dengan tools yang tepat.</p>
<a href="https://tigafa.myr.id/pl/promptcanvas?ma=2lYwctS"
class="btn btn-primary btn-xl"
data-action="cta-click"
style="font-size:1.2rem !important;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
Beli Sekarang — Rp149.000
</a>
<div class="micro-trust" style="margin-top:1rem;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7C6FA0" stroke-width="2" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
Bergabung dengan ratusan Digital Marketer yang sudah menggunakannya
</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════════
FOOTER
════════════════════════════════════════════════════════════════ -->
<footer>
<p>© 2025 PromptCanvas. Hak cipta dilindungi. |
<a href="#">Syarat & Ketentuan</a> |
<a href="#">Kebijakan Privasi</a> |
<a href="#">Kontak</a>
</p>
<p style="margin-top:.5rem;font-size:.78rem;color:#3D3356 !important;">Hasil yang disebutkan bersifat individual dan dapat berbeda-beda. PromptCanvas adalah alat bantu yang membantu meningkatkan efisiensi, bukan solusi instan.</p>
</footer>
<!-- ════════════════════════════════════════════════════════════════
STICKY MOBILE CTA
════════════════════════════════════════════════════════════════ -->
<div id="sticky-cta">
<a href="#cta-form" class="btn btn-primary" data-action="cta-click" style="width:100%;justify-content:center;">
Beli Sekarang — Rp149.000
</a>
<div class="price-hint">Harga normal Rp199.000 · Flash Sale berakhir segera</div>
</div>
<!-- ════════════════════════════════════════════════════════════════
SCRIPTS
════════════════════════════════════════════════════════════════ -->
<script>
/* ── COUNTDOWN TIMER ── */
(function() {
var endKey = 'pc_flash_end';
var stored = localStorage.getItem(endKey);
var endTime;
if (stored) {
endTime = parseInt(stored, 10);
} else {
// 8h 43m 27s from now
endTime = Date.now() + (8 * 3600 + 43 * 60 + 27) * 1000;
localStorage.setItem(endKey, endTime);
}
function pad(n) { return String(n).padStart(2, '0'); }
function tick() {
var diff = Math.max(0, endTime - Date.now());
var h = Math.floor(diff / 3600000);
var m = Math.floor((diff % 3600000) / 60000);
var s = Math.floor((diff % 60000) / 1000);
document.getElementById('cd-hours').textContent = pad(h);
document.getElementById('cd-minutes').textContent = pad(m);
document.getElementById('cd-seconds').textContent = pad(s);
if (diff <= 0) { clearInterval(timer); }
}
tick();
var timer = setInterval(tick, 1000);
})();
/* ── FAQ ACCORDION ── */
function toggleFaq(el) {
var item = el.parentElement;
var isOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item.open').forEach(function(i) { i.classList.remove('open'); });
if (!isOpen) item.classList.add('open');
}
/* ── SALES NOTIFICATION POPUP ── */
var notifData = [
{ name: 'Rizky', city: 'Bandung', initial: 'R', time: '2 menit lalu' },
{ name: 'Sinta', city: 'Jakarta', initial: 'S', time: '5 menit lalu' },
{ name: 'Budi', city: 'Surabaya', initial: 'B', time: '7 menit lalu' },
{ name: 'Dewi', city: 'Yogyakarta', initial: 'D', time: '12 menit lalu' },
{ name: 'Fajar', city: 'Medan', initial: 'F', time: '15 menit lalu' },
{ name: 'Rina', city: 'Makassar', initial: 'R', time: '18 menit lalu' },
{ name: 'Hendra','city': 'Semarang', initial: 'H', time: '21 menit lalu' },
{ name: 'Putri', city: 'Palembang', initial: 'P', time: '24 menit lalu' },
];
var notifIdx = 0;
var notifEl = document.getElementById('sales-notif');
var notifOpen = false;
function showNotif() {
if (notifOpen) return;
var d = notifData[notifIdx % notifData.length];
notifIdx++;
document.getElementById('notif-initial').textContent = d.initial;
document.getElementById('notif-name').textContent = d.name + ' dari ' + d.city;
document.getElementById('notif-time').textContent = d.time;
notifEl.classList.remove('hide');
notifEl.classList.add('show');
notifOpen = true;
setTimeout(hideNotif, 5000);
}
function hideNotif() {
notifEl.classList.remove('show');
notifEl.classList.add('hide');
notifOpen = false;
}
function closeNotif() {
hideNotif();
}
// Show first notification after 3s, then every 18s
setTimeout(function() {
showNotif();
setInterval(function() {
if (!notifOpen) showNotif();
}, 18000);
}, 3000);
/* ── SCROLL REVEAL (lightweight) ── */
(function() {
if (!('IntersectionObserver' in window)) return;
var style = document.createElement('style');
style.textContent = '.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}.reveal.visible{opacity:1;transform:none}';
document.head.appendChild(style);
document.querySelectorAll('.pain-card,.feat-card,.testi-card,.bonus-card,.obj-item,.faq-item').forEach(function(el) {
el.classList.add('reveal');
});
var obs = new IntersectionObserver(function(entries) {
entries.forEach(function(e) {
if (e.isIntersecting) {
e.target.classList.add('visible');
obs.unobserve(e.target);
}
});
}, { threshold: 0.12 });
document.querySelectorAll('.reveal').forEach(function(el) { obs.observe(el); });
})();
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
7
Requests
4
Domains
170KB
Transfer Size
183KB
Content Size
187.0ms
Dom Content Loaded
1,284.0ms
First Paint
1,097.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...