802 lines
31 KiB
Text
802 lines
31 KiB
Text
@model Banner
|
|
|
|
<style>
|
|
@@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');
|
|
|
|
/* ══════════════════════════════════════
|
|
BANNER / HERO
|
|
══════════════════════════════════════ */
|
|
.hero-wrap {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #030408;
|
|
padding: 0;
|
|
}
|
|
|
|
.hero-wrap::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 700px 500px at 20% 30%, rgba(59, 123, 247, 0.06) 0%, transparent 100%),
|
|
radial-gradient(ellipse 600px 450px at 80% 70%, rgba(34, 201, 176, 0.04) 0%, transparent 100%);
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-grid-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
|
|
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
|
|
}
|
|
|
|
.hero-inner {
|
|
position: relative;
|
|
z-index: 10;
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 70px 32px 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ── Badge ── */
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 5px 14px 5px 8px;
|
|
border-radius: 100px;
|
|
background: rgba(59, 123, 247, 0.06);
|
|
border: 1px solid rgba(59, 123, 247, 0.12);
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: rgba(255, 255, 255, 0.55);
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 24px;
|
|
animation: heroFade 0.6s ease-out both;
|
|
}
|
|
|
|
.hero-badge .badge-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #3b7bf7;
|
|
box-shadow: 0 0 6px rgba(59, 123, 247, 0.5);
|
|
animation: dotPulse 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
@@keyframes dotPulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
@@keyframes heroFade {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ── Title ── */
|
|
.hero-title {
|
|
font-family: 'Outfit', 'DM Sans', sans-serif;
|
|
font-size: clamp(1.8rem, 4.5vw, 3.4rem);
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.03em;
|
|
color: #ffffff;
|
|
margin-bottom: 8px;
|
|
animation: heroFade 0.6s ease-out 0.08s both;
|
|
}
|
|
|
|
.hero-title .title-gradient {
|
|
display: block;
|
|
background: linear-gradient(135deg, #3b7bf7 0%, #22c9b0 60%, #3b7bf7 100%);
|
|
background-size: 200% 200%;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: gradShift 6s ease-in-out infinite;
|
|
}
|
|
|
|
@@keyframes gradShift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
/* ── Description Card ── */
|
|
.hero-desc {
|
|
max-width: 700px;
|
|
margin: 24px auto 36px;
|
|
position: relative;
|
|
display: flex;
|
|
gap: 0;
|
|
background: linear-gradient(135deg, rgba(59, 123, 247, 0.03) 0%, rgba(34, 201, 176, 0.02) 100%);
|
|
border: 1px solid rgba(255, 255, 255, 0.04);
|
|
border-left: 2px solid rgba(59, 123, 247, 0.3);
|
|
border-radius: 0 12px 12px 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
animation: heroFade 0.6s ease-out 0.16s both;
|
|
}
|
|
|
|
.hero-desc::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 40px;
|
|
background: linear-gradient(180deg, rgba(59, 123, 247, 0.06) 0%, rgba(34, 201, 176, 0.04) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-desc-inner {
|
|
padding: 22px 28px 22px 24px;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 0.84rem;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
line-height: 1.85;
|
|
text-align: left;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-desc-icon {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 22px 0 0 16px;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-desc-icon i {
|
|
font-size: 1.1rem;
|
|
color: rgba(59, 123, 247, 0.4);
|
|
}
|
|
|
|
/* ── CTA ── */
|
|
.hero-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 13px 34px;
|
|
border-radius: 10px;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #0d1a2e 0%, #080f1c 100%);
|
|
border: 1px solid rgba(59, 123, 247, 0.18);
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
animation: heroFade 0.6s ease-out 0.24s both;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hero-cta:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 28px rgba(59, 123, 247, 0.15);
|
|
border-color: rgba(59, 123, 247, 0.3);
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.hero-cta i { font-size: 0.8rem; transition: transform 0.3s ease; }
|
|
.hero-cta:hover i { transform: translateX(3px); }
|
|
|
|
/* ── Divider ── */
|
|
.hero-sep {
|
|
width: 50px;
|
|
height: 1px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
margin: 44px auto 36px;
|
|
animation: heroFade 0.6s ease-out 0.32s both;
|
|
}
|
|
|
|
/* ══════════════════════════════════════
|
|
MINI FEATURE CARDS — 12 cards, 6x2
|
|
══════════════════════════════════════ */
|
|
.mini-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 12px;
|
|
animation: heroFade 0.7s ease-out 0.4s both;
|
|
}
|
|
|
|
.mini-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 20px 8px 18px;
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.018);
|
|
border: 1px solid rgba(255, 255, 255, 0.04);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
cursor: default;
|
|
}
|
|
|
|
.mini-card:hover {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border-color: rgba(255, 255, 255, 0.08);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.mini-icon {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.mini-card:hover .mini-icon { transform: scale(1.1); }
|
|
|
|
.mini-label {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 0.68rem;
|
|
font-weight: 600;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
text-align: center;
|
|
line-height: 1.25;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
.mini-card:hover .mini-label { color: rgba(255, 255, 255, 0.75); }
|
|
|
|
.mc-blue .mini-icon { background: rgba(59, 123, 247, 0.08); border: 1px solid rgba(59, 123, 247, 0.12); color: #3b7bf7; }
|
|
.mc-blue:hover .mini-icon { box-shadow: 0 4px 12px rgba(59, 123, 247, 0.15); }
|
|
.mc-teal .mini-icon { background: rgba(34, 201, 176, 0.08); border: 1px solid rgba(34, 201, 176, 0.12); color: #22c9b0; }
|
|
.mc-teal:hover .mini-icon { box-shadow: 0 4px 12px rgba(34, 201, 176, 0.15); }
|
|
.mc-purple .mini-icon { background: rgba(167, 139, 250, 0.08); border: 1px solid rgba(167, 139, 250, 0.12); color: #a78bfa; }
|
|
.mc-purple:hover .mini-icon { box-shadow: 0 4px 12px rgba(167, 139, 250, 0.15); }
|
|
.mc-amber .mini-icon { background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.12); color: #fbbf24; }
|
|
.mc-amber:hover .mini-icon { box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15); }
|
|
.mc-rose .mini-icon { background: rgba(251, 113, 133, 0.08); border: 1px solid rgba(251, 113, 133, 0.12); color: #fb7185; }
|
|
.mc-rose:hover .mini-icon { box-shadow: 0 4px 12px rgba(251, 113, 133, 0.15); }
|
|
.mc-sky .mini-icon { background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.12); color: #38bdf8; }
|
|
.mc-sky:hover .mini-icon { box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15); }
|
|
|
|
/* ══════════════════════════════════════
|
|
DEMO REQUEST MODAL
|
|
══════════════════════════════════════ */
|
|
.demo-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 99999;
|
|
background: rgba(2, 6, 23, 0.85);
|
|
backdrop-filter: blur(10px);
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
}
|
|
.demo-overlay.active { display: flex; animation: demoFadeIn .25s ease; }
|
|
@@keyframes demoFadeIn { from{opacity:0} to{opacity:1} }
|
|
|
|
.demo-modal {
|
|
background: #0f172a;
|
|
border: 1px solid rgba(59, 123, 247, 0.15);
|
|
border-radius: 24px;
|
|
width: 100%;
|
|
max-width: 460px;
|
|
position: relative;
|
|
animation: demoSlideUp .3s ease;
|
|
overflow: hidden;
|
|
box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 80px rgba(59,130,246,0.06);
|
|
}
|
|
@@keyframes demoSlideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
|
|
|
|
.demo-modal .dm-glow {
|
|
position: absolute; top: 0; left: 0; right: 0; height: 3px;
|
|
background: linear-gradient(90deg, #3b82f6, #14b8a6, #a78bfa);
|
|
border-radius: 24px 24px 0 0;
|
|
}
|
|
|
|
.dm-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 1.75rem 2rem 1rem;
|
|
}
|
|
.dm-header-left { display: flex; align-items: center; gap: 0.85rem; }
|
|
.dm-header-icon {
|
|
width: 48px; height: 48px; border-radius: 14px;
|
|
background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(20,184,166,0.1));
|
|
border: 1px solid rgba(59,130,246,0.2);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 1.2rem; color: #3b82f6;
|
|
}
|
|
.dm-header h3 {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 1.15rem; font-weight: 700; color: #f8fafc; margin: 0;
|
|
}
|
|
.dm-header p {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.68rem; color: #64748b; margin: 3px 0 0; letter-spacing: 0.05em;
|
|
}
|
|
.dm-close {
|
|
width: 36px; height: 36px; border-radius: 10px;
|
|
border: 1px solid rgba(255,255,255,0.08); background: none;
|
|
color: #94a3b8; display: flex; align-items: center; justify-content: center;
|
|
cursor: pointer; transition: all .2s; font-size: 0.9rem;
|
|
}
|
|
.dm-close:hover { background: rgba(248,113,113,0.15); border-color: rgba(248,113,113,0.3); color: #f87171; }
|
|
|
|
.dm-body { padding: 0.75rem 2rem 1.75rem; }
|
|
|
|
/* Features list */
|
|
.dm-features {
|
|
display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.dm-feat {
|
|
display: flex; align-items: center; gap: 0.5rem;
|
|
padding: 0.5rem 0.65rem;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.05);
|
|
border-radius: 8px;
|
|
font-size: 0.72rem; color: #94a3b8;
|
|
font-family: 'DM Sans', sans-serif;
|
|
}
|
|
.dm-feat i { font-size: 0.7rem; }
|
|
.dm-feat.blue i { color: #3b82f6; }
|
|
.dm-feat.teal i { color: #14b8a6; }
|
|
.dm-feat.purple i { color: #a78bfa; }
|
|
.dm-feat.amber i { color: #fbbf24; }
|
|
|
|
/* Form */
|
|
.dm-form-group { margin-bottom: 1.25rem; }
|
|
.dm-label {
|
|
display: flex; align-items: center; gap: 0.4rem;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.68rem; font-weight: 600; color: #cbd5e1;
|
|
text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem;
|
|
}
|
|
.dm-label i { font-size: 0.6rem; color: #3b82f6; }
|
|
|
|
.dm-input-wrap { position: relative; }
|
|
.dm-input-icon {
|
|
position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
|
|
color: #475569; font-size: 0.85rem; pointer-events: none; transition: color .2s;
|
|
}
|
|
.dm-input-wrap:focus-within .dm-input-icon { color: #3b82f6; }
|
|
|
|
.dm-input {
|
|
width: 100%; padding: 0.8rem 1rem 0.8rem 2.75rem;
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 12px; color: #e2e8f0;
|
|
font-family: 'Space Grotesk', sans-serif; font-size: 0.9rem;
|
|
outline: none; transition: all .25s;
|
|
}
|
|
.dm-input:focus {
|
|
border-color: rgba(59,130,246,0.5);
|
|
box-shadow: 0 0 0 3px rgba(59,130,246,0.1), 0 0 20px rgba(59,130,246,0.05);
|
|
background: rgba(255,255,255,0.07);
|
|
}
|
|
.dm-input::placeholder { color: #475569; }
|
|
|
|
/* Messages */
|
|
.dm-message {
|
|
padding: 0.7rem 1rem; border-radius: 10px;
|
|
font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem;
|
|
display: none; align-items: center; gap: 0.5rem;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
}
|
|
.dm-message.error {
|
|
background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); color: #f87171;
|
|
}
|
|
.dm-message.success {
|
|
background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.25); color: #34d399;
|
|
}
|
|
.dm-message.active { display: flex; }
|
|
|
|
/* Submit */
|
|
.dm-submit {
|
|
width: 100%; padding: 0.85rem;
|
|
background: linear-gradient(135deg, #3b82f6, #14b8a6);
|
|
border: none; border-radius: 12px;
|
|
color: #fff; font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 0.95rem; font-weight: 700;
|
|
cursor: pointer; transition: all .3s;
|
|
display: flex; align-items: center; justify-content: center; gap: 0.6rem;
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.dm-submit::before {
|
|
content: ''; position: absolute; top: 0; left: -100%;
|
|
width: 100%; height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
|
|
transition: left .5s;
|
|
}
|
|
.dm-submit:hover::before { left: 100%; }
|
|
.dm-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(59,130,246,0.3); }
|
|
.dm-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }
|
|
|
|
.dm-spinner {
|
|
display: none; width: 18px; height: 18px;
|
|
border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
|
|
border-radius: 50%; animation: dmSpin .6s linear infinite;
|
|
}
|
|
@@keyframes dmSpin { to{transform:rotate(360deg)} }
|
|
|
|
/* Success state */
|
|
.dm-success-view { display: none; text-align: center; padding: 1rem 0; }
|
|
.dm-success-view.active { display: block; }
|
|
.dm-success-icon {
|
|
width: 70px; height: 70px; border-radius: 50%;
|
|
background: rgba(52,211,153,0.12); border: 2px solid rgba(52,211,153,0.25);
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin: 0 auto 1.25rem; font-size: 2rem; color: #34d399;
|
|
animation: dmSuccessPop .4s ease;
|
|
}
|
|
@@keyframes dmSuccessPop { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }
|
|
.dm-success-view h4 { font-family:'Space Grotesk',sans-serif; font-size:1.1rem; font-weight:700; color:#f8fafc; margin:0 0 0.5rem; }
|
|
.dm-success-view p { font-size:0.85rem; color:#94a3b8; line-height:1.6; margin:0 0 1.5rem; }
|
|
|
|
.dm-footer {
|
|
text-align: center; padding: 0 2rem 1.5rem;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.6rem; color: #334155;
|
|
display: flex; align-items: center; justify-content: center; gap: 0.4rem;
|
|
}
|
|
.dm-footer i { color: #22c9b0; font-size: 0.55rem; }
|
|
|
|
/* ══════════════════════════════════════
|
|
RESPONSIVE
|
|
══════════════════════════════════════ */
|
|
@@media (max-width: 1024px) {
|
|
.mini-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
|
|
.hero-inner { padding: 56px 24px 48px; }
|
|
}
|
|
@@media (max-width: 768px) {
|
|
.mini-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
|
.hero-inner { padding: 48px 20px 40px; }
|
|
.hero-title { font-size: clamp(1.5rem, 5vw, 2.4rem); }
|
|
.hero-desc { padding: 16px 20px; font-size: 0.8rem; }
|
|
.hero-cta { padding: 11px 28px; font-size: 0.85rem; }
|
|
.hero-sep { margin: 36px auto 28px; }
|
|
.dm-features { grid-template-columns: 1fr; }
|
|
.demo-modal { max-width: 100%; }
|
|
}
|
|
@@media (max-width: 520px) {
|
|
.mini-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
|
|
.hero-inner { padding: 40px 14px 32px; }
|
|
.hero-title { font-size: clamp(1.3rem, 5vw, 2rem); }
|
|
.mini-card { padding: 16px 6px 14px; }
|
|
.mini-icon { width: 34px; height: 34px; font-size: 0.9rem; }
|
|
.mini-label { font-size: 0.62rem; }
|
|
.hero-desc { padding: 14px 16px; font-size: 0.78rem; }
|
|
.demo-overlay { padding: 1rem; }
|
|
.dm-header { padding: 1.5rem 1.5rem 0.75rem; }
|
|
.dm-body { padding: 0.75rem 1.5rem 1.5rem; }
|
|
}
|
|
</style>
|
|
|
|
<div class="hero-wrap">
|
|
<div class="hero-grid-bg"></div>
|
|
|
|
<div class="hero-inner">
|
|
<!-- Title from Model -->
|
|
<h1 class="hero-title">
|
|
@Model.Title
|
|
<span class="title-gradient">@Model.Description</span>
|
|
</h1>
|
|
|
|
<!-- Description from Model -->
|
|
<div class="hero-desc">
|
|
<div class="hero-desc-icon"><i class="bi bi-quote"></i></div>
|
|
<div class="hero-desc-inner">
|
|
@Html.Raw(Model.Content)
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA — opens demo modal -->
|
|
<button type="button" class="hero-cta" onclick="openDemoModal()">
|
|
Request Demo
|
|
<i class="bi bi-arrow-right"></i>
|
|
</button>
|
|
|
|
<!-- Divider -->
|
|
<div class="hero-sep"></div>
|
|
|
|
<!-- 12 Mini Feature Cards -->
|
|
<div class="mini-grid">
|
|
<div class="mini-card mc-blue">
|
|
<div class="mini-icon"><i class="bi bi-graph-up-arrow"></i></div>
|
|
<span class="mini-label">Survey Analysis</span>
|
|
</div>
|
|
<div class="mini-card mc-teal">
|
|
<div class="mini-icon"><i class="bi bi-grid-1x2"></i></div>
|
|
<span class="mini-label">Admin Dashboard</span>
|
|
</div>
|
|
<div class="mini-card mc-purple">
|
|
<div class="mini-icon"><i class="bi bi-ui-checks-grid"></i></div>
|
|
<span class="mini-label">Questionnaire</span>
|
|
</div>
|
|
<div class="mini-card mc-amber">
|
|
<div class="mini-icon"><i class="bi bi-cpu"></i></div>
|
|
<span class="mini-label">AI Sentiment</span>
|
|
</div>
|
|
<div class="mini-card mc-rose">
|
|
<div class="mini-icon"><i class="bi bi-shield-check"></i></div>
|
|
<span class="mini-label">GDPR Compliance</span>
|
|
</div>
|
|
<div class="mini-card mc-sky">
|
|
<div class="mini-icon"><i class="bi bi-speedometer2"></i></div>
|
|
<span class="mini-label">Real-time Reports</span>
|
|
</div>
|
|
<div class="mini-card mc-teal">
|
|
<div class="mini-icon"><i class="bi bi-heart-pulse"></i></div>
|
|
<span class="mini-label">Employee Wellbeing</span>
|
|
</div>
|
|
<div class="mini-card mc-blue">
|
|
<div class="mini-icon"><i class="bi bi-people"></i></div>
|
|
<span class="mini-label">Team Insights</span>
|
|
</div>
|
|
<div class="mini-card mc-purple">
|
|
<div class="mini-icon"><i class="bi bi-incognito"></i></div>
|
|
<span class="mini-label">Anonymous Responses</span>
|
|
</div>
|
|
<div class="mini-card mc-rose">
|
|
<div class="mini-icon"><i class="bi bi-activity"></i></div>
|
|
<span class="mini-label">Stress Detection</span>
|
|
</div>
|
|
<div class="mini-card mc-amber">
|
|
<div class="mini-icon"><i class="bi bi-clipboard2-check"></i></div>
|
|
<span class="mini-label">Action Plans</span>
|
|
</div>
|
|
<div class="mini-card mc-sky">
|
|
<div class="mini-icon"><i class="bi bi-download"></i></div>
|
|
<span class="mini-label">Data Export</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════
|
|
DEMO REQUEST MODAL
|
|
═══════════════════════════════════════ -->
|
|
<div class="demo-overlay" id="demoModal">
|
|
<div class="demo-modal">
|
|
<div class="dm-glow"></div>
|
|
|
|
<div class="dm-header">
|
|
<div class="dm-header-left">
|
|
<div class="dm-header-icon"><i class="bi bi-rocket-takeoff"></i></div>
|
|
<div>
|
|
<h3 id="dmTitle">Request a Demo</h3>
|
|
<p id="dmSubtitle">14-DAY FREE TRIAL · FULL AI ACCESS</p>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="dm-close" onclick="closeDemoModal()"><i class="bi bi-x-lg"></i></button>
|
|
</div>
|
|
|
|
<div class="dm-body">
|
|
<!-- Form View -->
|
|
<div id="demoFormView">
|
|
<div class="dm-features">
|
|
<div class="dm-feat blue"><i class="bi bi-check-circle-fill"></i> <span id="feat1">AI Analysis</span></div>
|
|
<div class="dm-feat teal"><i class="bi bi-check-circle-fill"></i> <span id="feat2">Full Dashboard</span></div>
|
|
<div class="dm-feat purple"><i class="bi bi-check-circle-fill"></i> <span id="feat3">Unlimited Surveys</span></div>
|
|
<div class="dm-feat amber"><i class="bi bi-check-circle-fill"></i> <span id="feat4">Data Export</span></div>
|
|
</div>
|
|
|
|
<div id="demoMessage" class="dm-message"></div>
|
|
|
|
<div class="dm-form-group">
|
|
<label class="dm-label"><i class="bi bi-envelope"></i> <span id="emailLabel">Email Address</span></label>
|
|
<div class="dm-input-wrap">
|
|
<i class="bi bi-at dm-input-icon"></i>
|
|
<input type="email" class="dm-input" id="demoEmail" placeholder="" required />
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" class="dm-submit" id="demoSubmitBtn" onclick="submitDemoRequest()">
|
|
<div class="dm-spinner" id="demoSpinner"></div>
|
|
<i class="bi bi-rocket-takeoff" id="demoSubmitIcon"></i>
|
|
<span id="demoSubmitText">Get Demo Access</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Success View -->
|
|
<div class="dm-success-view" id="demoSuccessView">
|
|
<div class="dm-success-icon"><i class="bi bi-check-lg"></i></div>
|
|
<h4 id="successTitle">Account Created!</h4>
|
|
<p id="successText">Check your email for login credentials. You can start exploring A-Survey right away.</p>
|
|
<button type="button" class="dm-submit" onclick="closeDemoModal()" style="max-width:200px;margin:0 auto;">
|
|
<i class="bi bi-check-lg"></i> <span id="successBtn">Got it!</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dm-footer">
|
|
<i class="bi bi-shield-lock-fill"></i> <span id="dmFooter">Your data is secure · GDPR compliant</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
// ── Language Detection ──
|
|
var lang = (document.documentElement.lang || navigator.language || 'en').toLowerCase();
|
|
var isDanish = lang.startsWith('da');
|
|
|
|
// ── Translations ──
|
|
var t = isDanish ? {
|
|
title: 'Anmod om Demo',
|
|
subtitle: '14 DAGES GRATIS PRØVE · FULD AI ADGANG',
|
|
feat1: 'AI Analyse',
|
|
feat2: 'Fuldt Dashboard',
|
|
feat3: 'Ubegrænset Surveys',
|
|
feat4: 'Data Eksport',
|
|
emailLabel: 'Email Adresse',
|
|
placeholder: 'Indtast din email adresse',
|
|
submitText: 'Få Demo Adgang',
|
|
submitting: 'Opretter konto...',
|
|
successTitle: 'Konto Oprettet!',
|
|
successText: 'Check din email for login detaljer. Du kan begynde at udforske A-Survey med det samme.',
|
|
successBtn: 'Forstået!',
|
|
footer: 'Dine data er sikre · GDPR kompatibel',
|
|
errorRequired: 'Indtast venligst en email adresse',
|
|
errorInvalid: 'Indtast venligst en gyldig email adresse',
|
|
errorNetwork: 'Netværksfejl. Prøv venligst igen.',
|
|
endpoint: '/DemoRequest/RequestDemo'
|
|
} : {
|
|
title: 'Request a Demo',
|
|
subtitle: '14-DAY FREE TRIAL · FULL AI ACCESS',
|
|
feat1: 'AI Analysis',
|
|
feat2: 'Full Dashboard',
|
|
feat3: 'Unlimited Surveys',
|
|
feat4: 'Data Export',
|
|
emailLabel: 'Email Address',
|
|
placeholder: 'Enter your email address',
|
|
submitText: 'Get Demo Access',
|
|
submitting: 'Creating account...',
|
|
successTitle: 'Account Created!',
|
|
successText: 'Check your email for login credentials. You can start exploring A-Survey right away.',
|
|
successBtn: 'Got it!',
|
|
footer: 'Your data is secure · GDPR compliant',
|
|
errorRequired: 'Please enter an email address',
|
|
errorInvalid: 'Please enter a valid email address',
|
|
errorNetwork: 'Network error. Please try again.',
|
|
endpoint: '/DemoRequest/RequestDemoEN'
|
|
};
|
|
|
|
// ── Apply translations ──
|
|
document.getElementById('dmTitle').textContent = t.title;
|
|
document.getElementById('dmSubtitle').textContent = t.subtitle;
|
|
document.getElementById('feat1').textContent = t.feat1;
|
|
document.getElementById('feat2').textContent = t.feat2;
|
|
document.getElementById('feat3').textContent = t.feat3;
|
|
document.getElementById('feat4').textContent = t.feat4;
|
|
document.getElementById('emailLabel').textContent = t.emailLabel;
|
|
document.getElementById('demoEmail').placeholder = t.placeholder;
|
|
document.getElementById('demoSubmitText').textContent = t.submitText;
|
|
document.getElementById('successTitle').textContent = t.successTitle;
|
|
document.getElementById('successText').textContent = t.successText;
|
|
document.getElementById('successBtn').textContent = t.successBtn;
|
|
document.getElementById('dmFooter').textContent = t.footer;
|
|
|
|
// ── Store translations globally ──
|
|
window._demoT = t;
|
|
})();
|
|
|
|
function openDemoModal() {
|
|
document.getElementById('demoFormView').style.display = 'block';
|
|
document.getElementById('demoSuccessView').classList.remove('active');
|
|
document.getElementById('demoEmail').value = '';
|
|
hideDemoMessage();
|
|
document.getElementById('demoModal').classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
setTimeout(function() { document.getElementById('demoEmail').focus(); }, 300);
|
|
}
|
|
|
|
function closeDemoModal() {
|
|
document.getElementById('demoModal').classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// Close on overlay click
|
|
document.getElementById('demoModal').addEventListener('click', function(e) {
|
|
if (e.target === this) closeDemoModal();
|
|
});
|
|
|
|
// Close on Escape
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && document.getElementById('demoModal').classList.contains('active')) {
|
|
closeDemoModal();
|
|
}
|
|
});
|
|
|
|
// Enter key submits
|
|
document.getElementById('demoEmail').addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter') { e.preventDefault(); submitDemoRequest(); }
|
|
});
|
|
|
|
function showDemoMessage(text, type) {
|
|
var el = document.getElementById('demoMessage');
|
|
el.className = 'dm-message ' + type + ' active';
|
|
el.innerHTML = '<i class="bi bi-' + (type === 'error' ? 'exclamation-circle' : 'check-circle') + '-fill"></i> ' + text;
|
|
}
|
|
|
|
function hideDemoMessage() {
|
|
var el = document.getElementById('demoMessage');
|
|
el.className = 'dm-message';
|
|
el.innerHTML = '';
|
|
}
|
|
|
|
function setDemoLoading(loading) {
|
|
var btn = document.getElementById('demoSubmitBtn');
|
|
var spinner = document.getElementById('demoSpinner');
|
|
var icon = document.getElementById('demoSubmitIcon');
|
|
var text = document.getElementById('demoSubmitText');
|
|
var t = window._demoT;
|
|
|
|
btn.disabled = loading;
|
|
spinner.style.display = loading ? 'block' : 'none';
|
|
icon.style.display = loading ? 'none' : '';
|
|
text.textContent = loading ? t.submitting : t.submitText;
|
|
}
|
|
|
|
function submitDemoRequest() {
|
|
var t = window._demoT;
|
|
var email = document.getElementById('demoEmail').value.trim();
|
|
hideDemoMessage();
|
|
|
|
// Validate
|
|
if (!email) {
|
|
showDemoMessage(t.errorRequired, 'error');
|
|
document.getElementById('demoEmail').focus();
|
|
return;
|
|
}
|
|
|
|
var emailRegex = /^[^\s@@]+@@[^\s@@]+\.[^\s@@]+$/;
|
|
if (!emailRegex.test(email)) {
|
|
showDemoMessage(t.errorInvalid, 'error');
|
|
document.getElementById('demoEmail').focus();
|
|
return;
|
|
}
|
|
|
|
setDemoLoading(true);
|
|
|
|
fetch(t.endpoint, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ "email": email })
|
|
})
|
|
.then(function(res) { return res.json(); })
|
|
.then(function(data) {
|
|
setDemoLoading(false);
|
|
if (data.success) {
|
|
// Show success view
|
|
document.getElementById('demoFormView').style.display = 'none';
|
|
document.getElementById('demoSuccessView').classList.add('active');
|
|
} else {
|
|
showDemoMessage(data.message || 'An error occurred.', 'error');
|
|
}
|
|
})
|
|
.catch(function(err) {
|
|
setDemoLoading(false);
|
|
showDemoMessage(t.errorNetwork, 'error');
|
|
});
|
|
}
|
|
</script>
|