Landing Page Preview - Pusat Alat Bantu Dengar

<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, viewport-fit=cover” />
<title>Nobel Audiology Center – Pusat Alat Bantu Dengar & Implan Koklea</title>
<link href=”https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap” rel=”stylesheet” />
<style>
/* ───── TOKENS ───── */
:root {
–navy: #0D2B4E;
–teal: #0E7C7B;
–teal-lt: #17A89F;
–sky: #E8F6F5;
–gold: #C9962A;
–white: #FFFFFF;
–grey-50: #F7F9FC;
–grey-100: #EEF2F7;
–grey-300: #C4CDD9;
–grey-600: #64748B;
–grey-900: #1A2535;
–radius-sm: 8px;
–radius-md: 16px;
–radius-lg: 24px;
–shadow-sm: 0 2px 8px rgba(13,43,78,.08);
–shadow-md: 0 8px 32px rgba(13,43,78,.12);
–shadow-lg: 0 20px 60px rgba(13,43,78,.18);
–ff-display: ‘Montserrat’, system-ui, sans-serif;
–ff-body: ‘Montserrat’, system-ui, sans-serif;
–transition: .3s cubic-bezier(.4,0,.2,1);
}

/* ───── RESET ───── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(–ff-body);
color: var(–grey-900);
background: var(–white);
line-height: 1.6;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ───── UTILITIES ───── */
.container {
width: 90%;
max-width: 1200px;
margin-inline: auto;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 100px;
font-weight: 600;
font-size: .95rem;
cursor: pointer;
transition: var(–transition);
border: none;
font-family: var(–ff-body);
}
.btn-primary {
background: var(–teal);
color: var(–white);
}
.btn-primary:hover {
background: var(–teal-lt);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(14,124,123,.35);
}
.btn-outline {
background: transparent;
color: var(–navy);
border: 2px solid var(–navy);
}
.btn-outline:hover {
background: var(–navy);
color: var(–white);
transform: translateY(-2px);
}
.btn-white {
background: var(–white);
color: var(–teal);
}
.btn-white:hover {
background: var(–sky);
transform: translateY(-2px);
}
.section-eyebrow {
display: inline-block;
font-size: .8rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(–teal);
margin-bottom: 12px;
}
.section-title {
font-family: var(–ff-display);
font-size: clamp(1.7rem, 4vw, 2.6rem);
font-weight: 700;
color: var(–navy);
line-height: 1.25;
}
.section-desc {
color: var(–grey-600);
font-size: 1rem;
max-width: 560px;
line-height: 1.75;
}

/* ───── HERO ───── */
.hero {
padding-top: 0;
min-height: 100svh;
display: flex;
align-items: center;
background: linear-gradient(135deg, var(–navy) 0%, #143d6b 50%, #0a5c6b 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: ”;
position: absolute;
inset: 0;
background: url(“data:image/svg+xml,%3Csvg width=’60’ height=’60’ viewBox=’0 0 60 60′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cg fill=’none’ fill-rule=’evenodd’%3E%3Cg fill=’%23ffffff’ fill-opacity=’0.03’%3E%3Ccircle cx=’30’ cy=’30’ r=’4’/%3E%3C/g%3E%3C/g%3E%3C/svg%3E”);
}
.hero-blob {
position: absolute;
right: -100px;
top: 50%;
transform: translateY(-50%);
width: 55vw;
max-width: 700px;
height: 55vw;
max-height: 700px;
background: radial-gradient(circle, rgba(14,124,123,.5) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 1;
padding: 80px 0;
max-width: 620px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
border-radius: 100px;
padding: 6px 16px;
font-size: .8rem;
font-weight: 600;
color: rgba(255,255,255,.9);
margin-bottom: 24px;
backdrop-filter: blur(8px);
}
.hero-badge-dot {
width: 8px; height: 8px;
background: #4ade80;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .6; transform: scale(1.2); }
}
.hero h1 {
font-family: var(–ff-display);
font-size: clamp(2rem, 5.5vw, 3.8rem);
font-weight: 700;
color: var(–white);
line-height: 1.15;
margin-bottom: 20px;
}
.hero h1 em {
font-style: normal;
color: var(–teal-lt);
}
.hero-sub {
font-size: clamp(.95rem, 2vw, 1.1rem);
color: rgba(255,255,255,.75);
margin-bottom: 40px;
line-height: 1.7;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-stats {
position: relative;
z-index: 1;
display: flex;
gap: 40px;
margin-top: 64px;
padding-top: 40px;
border-top: 1px solid rgba(255,255,255,.15);
}
.stat { text-align: left; }
.stat-num {
font-family: var(–ff-display);
font-size: 2rem;
font-weight: 700;
color: var(–white);
line-height: 1;
}
.stat-num span { color: var(–teal-lt); }
.stat-label { font-size: .8rem; color: rgba(255,255,255,.6); margin-top: 4px; }
.hero-visual {
position: absolute;
right: 0; top: 0; bottom: 0;
width: 48%;
display: flex;
align-items: center;
justify-content: center;
}
.hero-sound-wave {
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 5px;
opacity: .35;
}
.wave-bar {
width: 4px;
background: var(–white);
border-radius: 2px;
animation: wave 1.4s ease-in-out infinite;
}
.wave-bar:nth-child(1) { height: 32px; animation-delay: 0s; }
.wave-bar:nth-child(2) { height: 60px; animation-delay: .1s; }
.wave-bar:nth-child(3) { height: 90px; animation-delay: .2s; }
.wave-bar:nth-child(4) { height: 120px; animation-delay: .3s; }
.wave-bar:nth-child(5) { height: 150px; animation-delay: .4s; }
.wave-bar:nth-child(6) { height: 180px; animation-delay: .5s; }
.wave-bar:nth-child(7) { height: 150px; animation-delay: .6s; }
.wave-bar:nth-child(8) { height: 120px; animation-delay: .7s; }
.wave-bar:nth-child(9) { height: 90px; animation-delay: .8s; }
.wave-bar:nth-child(10) { height: 60px; animation-delay: .9s; }
.wave-bar:nth-child(11) { height: 32px; animation-delay: 1s; }
@keyframes wave {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(.4); }
}

/* ───── MARQUEE ───── */
.marquee-wrap {
background: var(–teal);
padding: 14px 0;
overflow: hidden;
}
.marquee-track {
display: flex;
gap: 48px;
width: max-content;
animation: marquee 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
display: flex;
align-items: center;
gap: 12px;
font-size: .85rem;
font-weight: 600;
color: rgba(255,255,255,.85);
white-space: nowrap;
}
.marquee-item svg { flex-shrink: 0; }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

/* ───── SERVICES ───── */
.services { padding: 96px 0; background: var(–white); }
.services-header {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 32px;
margin-bottom: 56px;
}
.service-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.service-card {
background: var(–white);
border: 1px solid var(–grey-100);
border-radius: var(–radius-lg);
padding: 36px 32px;
transition: var(–transition);
cursor: pointer;
position: relative;
overflow: hidden;
}
.service-card::after {
content: ”;
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(–teal), var(–teal-lt));
transform: scaleX(0);
transform-origin: left;
transition: var(–transition);
}
.service-card:hover {
border-color: var(–teal);
box-shadow: var(–shadow-md);
transform: translateY(-4px);
}
.service-card:hover::after { transform: scaleX(1); }
.service-icon {
width: 56px; height: 56px;
background: var(–sky);
border-radius: var(–radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
margin-bottom: 20px;
transition: var(–transition);
}
.service-card:hover .service-icon { background: var(–teal); }
.service-card h3 {
font-size: 1.1rem;
font-weight: 700;
color: var(–navy);
margin-bottom: 10px;
}
.service-card p {
font-size: .88rem;
color: var(–grey-600);
line-height: 1.7;
margin-bottom: 24px;
}
.service-card-link {
font-size: .85rem;
font-weight: 700;
color: var(–teal);
display: inline-flex;
align-items: center;
gap: 6px;
transition: var(–transition);
}
.service-card:hover .service-card-link { gap: 10px; }

/* ───── PRODUCTS ───── */
.products { padding: 96px 0; background: var(–grey-50); }
.products-tabs {
display: flex;
gap: 8px;
margin: 40px 0 48px;
flex-wrap: wrap;
}
.tab-btn {
padding: 10px 22px;
border-radius: 100px;
border: 2px solid var(–grey-300);
background: var(–white);
font-family: var(–ff-body);
font-size: .88rem;
font-weight: 600;
color: var(–grey-600);
cursor: pointer;
transition: var(–transition);
}
.tab-btn.active, .tab-btn:hover {
background: var(–navy);
border-color: var(–navy);
color: var(–white);
}
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.product-card {
background: var(–white);
border-radius: var(–radius-lg);
overflow: hidden;
box-shadow: var(–shadow-sm);
transition: var(–transition);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(–shadow-md); }
.product-img {
height: 200px;
background: linear-gradient(135deg, var(–sky), #d0eeed);
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
position: relative;
}
.product-badge {
position: absolute;
top: 12px; right: 12px;
background: var(–gold);
color: var(–white);
font-size: .7rem;
font-weight: 700;
letter-spacing: .06em;
padding: 4px 10px;
border-radius: 100px;
}
.product-body { padding: 24px; }
.product-brand {
font-size: .75rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(–teal);
margin-bottom: 6px;
}
.product-body h3 {
font-size: 1rem;
font-weight: 700;
color: var(–navy);
margin-bottom: 8px;
}
.product-body p {
font-size: .83rem;
color: var(–grey-600);
line-height: 1.6;
margin-bottom: 20px;
}

/* ───── TELECARE ───── */
.telecare { padding: 96px 0; background: var(–white); }
.telecare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.telecare-visual {
background: linear-gradient(135deg, var(–navy), #0a5c6b);
border-radius: var(–radius-lg);
padding: 48px 40px;
position: relative;
overflow: hidden;
}
.telecare-visual::before {
content: ”;
position: absolute;
top: -40px; right: -40px;
width: 200px; height: 200px;
background: rgba(14,124,123,.4);
border-radius: 50%;
}
.telecare-cards {
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
z-index: 1;
}
.telecare-mini {
background: rgba(255,255,255,.12);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.2);
border-radius: var(–radius-md);
padding: 20px;
transition: var(–transition);
}
.telecare-mini:hover {
background: rgba(255,255,255,.18);
transform: translateX(4px);
}
.telecare-mini-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.tm-icon {
width: 38px; height: 38px;
background: var(–teal);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.telecare-mini h4 {
font-size: .9rem;
font-weight: 700;
color: var(–white);
}
.telecare-mini p {
font-size: .8rem;
color: rgba(255,255,255,.65);
line-height: 1.5;
}
.telecare-content { padding-left: 16px; }
.telecare-content .section-title { margin-bottom: 16px; }
.telecare-content .section-desc { margin-bottom: 32px; }
.telecare-features {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 36px;
}
.telecare-feat {
display: flex;
align-items: flex-start;
gap: 14px;
}
.feat-check {
width: 28px; height: 28px;
background: var(–sky);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(–teal);
font-size: .8rem;
font-weight: 700;
margin-top: 1px;
}
.telecare-feat p {
font-size: .9rem;
color: var(–grey-600);
line-height: 1.5;
}

/* ───── ONLINE TEST ───── */
.online-test {
padding: 96px 0;
background: linear-gradient(135deg, var(–teal) 0%, var(–navy) 100%);
position: relative;
overflow: hidden;
}
.online-test::before {
content: ”;
position: absolute;
inset: 0;
background: url(“data:image/svg+xml,%3Csvg width=’80’ height=’80’ viewBox=’0 0 80 80′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cg fill=’none’%3E%3Ccircle cx=’40’ cy=’40’ r=’20’ stroke=’%23ffffff’ stroke-opacity=’.05′ stroke-width=’1’/%3E%3C/g%3E%3C/svg%3E”);
}
.online-test-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.online-test h2 {
font-family: var(–ff-display);
font-size: clamp(1.6rem, 3.5vw, 2.6rem);
font-weight: 700;
color: var(–white);
margin-bottom: 16px;
line-height: 1.25;
}
.online-test p {
color: rgba(255,255,255,.75);
font-size: 1rem;
margin-bottom: 36px;
line-height: 1.7;
}
.test-form {
background: var(–white);
border-radius: var(–radius-lg);
padding: 40px;
}
.test-form h3 {
font-size: 1.15rem;
font-weight: 700;
color: var(–navy);
margin-bottom: 24px;
}
.form-group { margin-bottom: 18px; }
.form-group label {
display: block;
font-size: .8rem;
font-weight: 700;
color: var(–navy);
margin-bottom: 6px;
letter-spacing: .02em;
}
.form-group input,
.form-group select {
width: 100%;
padding: 12px 16px;
border: 2px solid var(–grey-100);
border-radius: var(–radius-sm);
font-family: var(–ff-body);
font-size: .9rem;
color: var(–grey-900);
background: var(–grey-50);
outline: none;
transition: var(–transition);
}
.form-group input:focus,
.form-group select:focus {
border-color: var(–teal);
background: var(–white);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.test-form .btn { width: 100%; justify-content: center; font-size: 1rem; padding: 16px; }

/* ───── BRANCHES ───── */
.branches { padding: 96px 0; background: var(–grey-50); }
.branches-header {
text-align: center;
margin-bottom: 56px;
}
.branches-header .section-desc { margin-inline: auto; }
.branch-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.branch-card {
background: var(–white);
border-radius: var(–radius-lg);
padding: 32px;
border: 1px solid var(–grey-100);
transition: var(–transition);
}
.branch-card:hover {
border-color: var(–teal);
box-shadow: var(–shadow-md);
transform: translateY(-4px);
}
.branch-icon {
width: 48px; height: 48px;
background: var(–sky);
border-radius: var(–radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
margin-bottom: 20px;
}
.branch-card h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(–navy);
margin-bottom: 8px;
}
.branch-card address {
font-style: normal;
font-size: .85rem;
color: var(–grey-600);
line-height: 1.6;
margin-bottom: 20px;
}
.branch-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(–sky);
color: var(–teal);
font-size: .75rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 100px;
margin-bottom: 20px;
}
.branch-card a {
font-size: .85rem;
font-weight: 700;
color: var(–teal);
display: inline-flex;
align-items: center;
gap: 6px;
transition: var(–transition);
}
.branch-card a:hover { gap: 10px; }

/* ───── CTA BANNER ───── */
.cta-banner {
padding: 80px 0;
background: var(–navy);
}
.cta-banner-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.cta-banner h2 {
font-family: var(–ff-display);
font-size: clamp(1.4rem, 3vw, 2.2rem);
color: var(–white);
max-width: 500px;
line-height: 1.3;
}
.cta-banner-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ───── FOOTER ───── */
footer {
background: #091c35;
color: rgba(255,255,255,.6);
padding: 72px 0 32px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 56px;
}
.footer-brand .nav-logo { margin-bottom: 16px; }
.footer-brand .nav-logo-text strong { color: var(–white); }
.footer-brand p {
font-size: .85rem;
line-height: 1.7;
margin-bottom: 24px;
}
.social-links { display: flex; gap: 10px; }
.social-link {
width: 38px; height: 38px;
background: rgba(255,255,255,.1);
border-radius: var(–radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: var(–transition);
color: rgba(255,255,255,.7);
}
.social-link:hover { background: var(–teal); color: var(–white); }
.footer-col h4 {
font-size: .8rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: var(–white);
margin-bottom: 20px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a {
font-size: .85rem;
transition: var(–transition);
}
.footer-col ul li a:hover { color: var(–teal-lt); }
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,.1);
font-size: .8rem;
flex-wrap: wrap;
gap: 12px;
}
.footer-bottom a { color: var(–teal-lt); }

/* ───── RESPONSIVE ───── */
@media (max-width: 1024px) {
.service-cards { grid-template-columns: repeat(2, 1fr); }
.product-grid { grid-template-columns: repeat(2, 1fr); }
.telecare-grid { grid-template-columns: 1fr; }
.telecare-content { padding-left: 0; }
.online-test-inner { grid-template-columns: 1fr; gap: 48px; }
.branch-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.hero-visual { display: none; }
}
@media (max-width: 768px) {
.service-cards { grid-template-columns: 1fr; }
.product-grid { grid-template-columns: 1fr; }
.branch-grid { grid-template-columns: 1fr; }
.services-header { grid-template-columns: 1fr; }
.hero-stats { flex-wrap: wrap; gap: 24px; }
.cta-banner-inner { flex-direction: column; text-align: center; }
.footer-grid { grid-template-columns: 1fr; gap: 36px; }
.footer-bottom { flex-direction: column; text-align: center; }
.form-row { grid-template-columns: 1fr; }
.test-form { padding: 28px 20px; }
.telecare-visual { padding: 32px 24px; }
}
@media (max-width: 480px) {
.hero-actions { flex-direction: column; }
.hero-actions .btn { width: 100%; justify-content: center; }
.hero-badge { font-size: .75rem; }
}

/* ───── SCROLL REVEAL ───── */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>

<!– ╔═══ HERO ═══╗ –>
<section class=”hero”>
<div class=”hero-blob”></div>
<div class=”hero-sound-wave” aria-hidden=”true”>
<div class=”wave-bar”></div><div class=”wave-bar”></div><div class=”wave-bar”></div>
<div class=”wave-bar”></div><div class=”wave-bar”></div><div class=”wave-bar”></div>
<div class=”wave-bar”></div><div class=”wave-bar”></div><div class=”wave-bar”></div>
<div class=”wave-bar”></div><div class=”wave-bar”></div>
</div>
<div class=”container”>
<div class=”hero-content reveal”>
<div class=”hero-badge”>
<div class=”hero-badge-dot”></div>
One-Stop Solution for Hearing Problems
</div>
<h1>Setiap orang berhak mendapat akses <em>pendengaran terbaik</em></h1>
<p class=”hero-sub”>Nobel Audiology Center hadir dengan solusi lengkap — dari pemeriksaan pendengaran, alat bantu dengar, implan koklea, hingga rehabilitasi mendengar dan berbicara.</p>
<div class=”hero-actions”>
<a href=”https://hearing-screener.beyondhearing.org/TesOnlineNobel/D3nwuK/welcome” target=”_blank” rel=”noopener” class=”btn btn-white”>
<svg width=”18″ height=”18″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><path d=”M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01″/></svg>
Tes Pendengaran Online
</a>
<a href=”https://wa.me/6281398785448″ target=”_blank” rel=”noopener” class=”btn” style=”background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);”>
<svg width=”18″ height=”18″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><rect x=”3″ y=”4″ width=”18″ height=”18″ rx=”2″/><line x1=”16″ y1=”2″ x2=”16″ y2=”6″/><line x1=”8″ y1=”2″ x2=”8″ y2=”6″/><line x1=”3″ y1=”10″ x2=”21″ y2=”10″/></svg>
Buat Janji Temu
</a>
</div>
<div class=”hero-stats”>
<div class=”stat”>
<div class=”stat-num”>15<span>+</span></div>
<div class=”stat-label”>Tahun Pengalaman</div>
</div>
<div class=”stat”>
<div class=”stat-num”>3<span>+</span></div>
<div class=”stat-label”>Cabang Jakarta</div>
</div>
<div class=”stat”>
<div class=”stat-num”>10k<span>+</span></div>
<div class=”stat-label”>Pasien Terbantu</div>
</div>
</div>
</div>
</div>
</section>

<!– ╔═══ MARQUEE ═══╗ –>
<div class=”marquee-wrap” aria-hidden=”true”>
<div class=”marquee-track”>
<!– Doubled for seamless loop –>
<span class=”marquee-item”><svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><polyline points=”20 6 9 17 4 12″/></svg> GN ReSound</span>
<span class=”marquee-item”><svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><polyline points=”20 6 9 17 4 12″/></svg> Implan Koklea Marvel</span>
<span class=”marquee-item”><svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><polyline points=”20 6 9 17 4 12″/></svg> Pemeriksaan Audiometri</span>
<span class=”marquee-item”><svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><polyline points=”20 6 9 17 4 12″/></svg> Rehabilitasi AVT</span>
<span class=”marquee-item”><svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><polyline points=”20 6 9 17 4 12″/></svg> Remote Fitting</span>
<span class=”marquee-item”><svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><polyline points=”20 6 9 17 4 12″/></svg> TeleKonsul</span>
<span class=”marquee-item”><svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><polyline points=”20 6 9 17 4 12″/></svg> Layanan Purna Jual</span>
<span class=”marquee-item”><svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><polyline points=”20 6 9 17 4 12″/></svg> GN ReSound</span>
<span class=”marquee-item”><svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><polyline points=”20 6 9 17 4 12″/></svg> Implan Koklea Marvel</span>
<span class=”marquee-item”><svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><polyline points=”20 6 9 17 4 12″/></svg> Pemeriksaan Audiometri</span>
<span class=”marquee-item”><svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><polyline points=”20 6 9 17 4 12″/></svg> Rehabilitasi AVT</span>
<span class=”marquee-item”><svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><polyline points=”20 6 9 17 4 12″/></svg> Remote Fitting</span>
<span class=”marquee-item”><svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><polyline points=”20 6 9 17 4 12″/></svg> TeleKonsul</span>
<span class=”marquee-item”><svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><polyline points=”20 6 9 17 4 12″/></svg> Layanan Purna Jual</span>
</div>
</div>

<!– ╔═══ SERVICES ═══╗ –>
<section class=”services” id=”layanan”>
<div class=”container”>
<div class=”services-header reveal”>
<div>
<span class=”section-eyebrow”>Layanan Kami</span>
<h2 class=”section-title”>Solusi lengkap untuk setiap<br>kebutuhan pendengaran</h2>
</div>
<a href=”#” class=”btn btn-outline”>Lihat Semua Layanan</a>
</div>
<div class=”service-cards”>
<div class=”service-card reveal”>
<div class=”service-icon”>🩺</div>
<h3>Pemeriksaan Pendengaran</h3>
<p>Pemeriksaan lengkap berbasis objektif dan subjektif: Audiometri Nada Murni, Audiometri Tutur, Play Audiometry, Timpanometri, OAE, dan ABR/BERA/ASSR.</p>
<a href=”#” class=”service-card-link”>Pelajari lebih lanjut →</a>
</div>
<div class=”service-card reveal”>
<div class=”service-icon”>👂</div>
<h3>Solusi Teknologi Pendengaran</h3>
<p>Alat bantu dengar untuk gangguan ringan hingga sangat berat, serta implan koklea untuk gangguan berat yang tidak lagi merespons alat bantu dengar.</p>
<a href=”#” class=”service-card-link”>Pelajari lebih lanjut →</a>
</div>
<div class=”service-card reveal”>
<div class=”service-icon”>🗣️</div>
<h3>Rehabilitasi Mendengar & Berbicara</h3>
<p>Layanan RehABilitasi untuk anak-anak pasca pemasangan alat bantu dengar atau implan koklea, karena memasang teknologi saja tidaklah cukup.</p>
<a href=”#” class=”service-card-link”>Pelajari lebih lanjut →</a>
</div>
</div>
</div>
</section>

<!– ╔═══ PRODUCTS ═══╗ –>
<section class=”products” id=”produk”>
<div class=”container”>
<div class=”reveal”>
<span class=”section-eyebrow”>Produk Kami</span>
<h2 class=”section-title”>Teknologi pendengaran<br>terdepan untuk Anda</h2>
</div>
<div class=”products-tabs reveal”>
<button class=”tab-btn active” onclick=”switchTab(this,’abd’)”>Alat Bantu Dengar</button>
<button class=”tab-btn” onclick=”switchTab(this,’ik’)”>Implan Koklea</button>
</div>
<div class=”product-grid” id=”tab-abd”>
<div class=”product-card reveal”>
<div class=”product-img”>
<span style=”font-size:3.5rem;”>🎧</span>
<span class=”product-badge”>Terlaris</span>
</div>
<div class=”product-body”>
<div class=”product-brand”>GN ReSound</div>
<h3>ReSound OMNIA</h3>
<p>Alat bantu dengar dengan teknologi OrganicHearing™ terbaru untuk pengalaman mendengar yang paling alami.</p>
<a href=”#” class=”btn btn-outline” style=”padding:10px 20px;font-size:.85rem;”>Lihat Detail</a>
</div>
</div>
<div class=”product-card reveal”>
<div class=”product-img”>
<span style=”font-size:3.5rem;”>🎵</span>
</div>
<div class=”product-body”>
<div class=”product-brand”>GN ReSound</div>
<h3>ReSound Key</h3>
<p>Pilihan terjangkau dengan performa tinggi. Konektivitas langsung ke iPhone dan Android tanpa perantara.</p>
<a href=”#” class=”btn btn-outline” style=”padding:10px 20px;font-size:.85rem;”>Lihat Detail</a>
</div>
</div>
<div class=”product-card reveal”>
<div class=”product-img”>
<span style=”font-size:3.5rem;”>🔊</span>
<span class=”product-badge”>Custom Fit</span>
</div>
<div class=”product-body”>
<div class=”product-brand”>GN ReSound</div>
<h3>ReSound Custom</h3>
<p>Dibuat khusus sesuai bentuk telinga Anda. Diskret, nyaman, dan canggih dalam satu perangkat.</p>
<a href=”#” class=”btn btn-outline” style=”padding:10px 20px;font-size:.85rem;”>Lihat Detail</a>
</div>
</div>
</div>
<div class=”product-grid” id=”tab-ik” style=”display:none;”>
<div class=”product-card reveal”>
<div class=”product-img”>
<span style=”font-size:3.5rem;”>🦻</span>
<span class=”product-badge”>Flagship</span>
</div>
<div class=”product-body”>
<div class=”product-brand”>Advanced Bionics</div>
<h3>Naída CI Marvel</h3>
<p>Implan koklea paling canggih dengan konektivitas Bluetooth langsung ke semua perangkat audio.</p>
<a href=”#” class=”btn btn-outline” style=”padding:10px 20px;font-size:.85rem;”>Lihat Detail</a>
</div>
</div>
<div class=”product-card reveal”>
<div class=”product-img”>
<span style=”font-size:3.5rem;”>👶</span>
</div>
<div class=”product-body”>
<div class=”product-brand”>Advanced Bionics</div>
<h3>Sky CI Marvel</h3>
<p>Dirancang khusus untuk anak-anak. Warna cerah, tahan banting, dan nyaman dipakai sepanjang hari.</p>
<a href=”#” class=”btn btn-outline” style=”padding:10px 20px;font-size:.85rem;”>Lihat Detail</a>
</div>
</div>
<div class=”product-card reveal”>
<div class=”product-img”>
<span style=”font-size:3.5rem;”>✨</span>
<span class=”product-badge”>Advanced</span>
</div>
<div class=”product-body”>
<div class=”product-brand”>Advanced Bionics</div>
<h3>Naída CI Q90</h3>
<p>Prosesor suara implan koklea dengan kinerja paling tinggi untuk kualitas pendengaran yang optimal.</p>
<a href=”#” class=”btn btn-outline” style=”padding:10px 20px;font-size:.85rem;”>Lihat Detail</a>
</div>
</div>
</div>
</div>
</section>

<!– ╔═══ TELECARE ═══╗ –>
<section class=”telecare” id=”telecare”>
<div class=”container”>
<div class=”telecare-grid”>
<div class=”telecare-visual reveal”>
<div class=”telecare-cards”>
<div class=”telecare-mini”>
<div class=”telecare-mini-top”>
<div class=”tm-icon”>📡</div>
<h4>Remote Fitting</h4>
</div>
<p>Sesuaikan alat bantu dengar Anda secara daring dari rumah, kapanpun dan dimanapun.</p>
</div>
<div class=”telecare-mini”>
<div class=”telecare-mini-top”>
<div class=”tm-icon”>💬</div>
<h4>TeleKonsul</h4>
</div>
<p>Konsultasi video dengan lintas profesi — audiologis, dokter, dan orang tua lainnya.</p>
</div>
<div class=”telecare-mini”>
<div class=”telecare-mini-top”>
<div class=”tm-icon”>🧒</div>
<h4>TeleRehAB</h4>
</div>
<p>Jarak bukan penghalang. Pantau perkembangan anak bersama terapis AVT secara virtual.</p>
</div>
</div>
</div>
<div class=”telecare-content reveal”>
<span class=”section-eyebrow”>TeleCare</span>
<h2 class=”section-title”>Layanan jarak jauh tanpa batas</h2>
<p class=”section-desc”>Kami memanfaatkan teknologi untuk memastikan perjalanan mendengar Anda dan anak Anda tidak pernah terganggu, di manapun Anda berada.</p>
<div class=”telecare-features”>
<div class=”telecare-feat”>
<div class=”feat-check”>✓</div>
<p><strong>Remote Fitting</strong> — Penyesuaian alat bantu dengar via video call dengan hearing care professional kami.</p>
</div>
<div class=”telecare-feat”>
<div class=”feat-check”>✓</div>
<p><strong>TeleKonsul</strong> — Diskusikan kebutuhan pendengaran Anda dengan berbagai profesi dalam satu sesi.</p>
</div>
<div class=”telecare-feat”>
<div class=”feat-check”>✓</div>
<p><strong>TeleRehAB</strong> — Orang tua sebagai terapis terbaik, didampingi praktisi AVT berpengalaman.</p>
</div>
</div>
<a href=”#” class=”btn btn-primary”>Jadwalkan Sesi TeleCare</a>
</div>
</div>
</div>
</section>

<!– ╔═══ ONLINE TEST ═══╗ –>
<section class=”online-test” id=”tes”>
<div class=”container online-test-inner”>
<div class=”reveal”>
<span class=”section-eyebrow” style=”color:rgba(255,255,255,.7);”>Tes Gratis</span>
<h2>Seberapa baik Anda mendengar hari ini?</h2>
<p>Terkadang kita tidak menyadari gangguan pendengaran sampai mulai mempengaruhi gaya hidup kita. Uji kemampuan mendengar Anda hanya dalam 10 menit.</p>
<ul style=”list-style:none;display:flex;flex-direction:column;gap:12px;”>
<li style=”display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.8);font-size:.9rem;”>
<span style=”background:rgba(255,255,255,.15);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0;”>✓</span>
Dilakukan oleh hearing care professional berpengalaman
</li>
<li style=”display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.8);font-size:.9rem;”>
<span style=”background:rgba(255,255,255,.15);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0;”>✓</span>
Hasil langsung & rekomendasi solusi yang tepat
</li>
<li style=”display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.8);font-size:.9rem;”>
<span style=”background:rgba(255,255,255,.15);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0;”>✓</span>
Gratis tanpa biaya konsultasi awal
</li>
</ul>
</div>
<div class=”test-form reveal”>
<h3>Uji Pendengaran Anda — Gratis</h3>
<div class=”form-row”>
<div class=”form-group”>
<label>Nama Lengkap *</label>
<input type=”text” placeholder=”Nama Anda” />
</div>
<div class=”form-group”>
<label>Usia *</label>
<input type=”number” placeholder=”Usia Anda” />
</div>
</div>
<div class=”form-group”>
<label>Kota Domisili *</label>
<input type=”text” placeholder=”Kota Anda” />
</div>
<div class=”form-group”>
<label>Nomor Telepon / WhatsApp *</label>
<input type=”tel” placeholder=”+62 8xx xxxx xxxx” />
</div>
<div class=”form-group”>
<label>E-mail *</label>
<input type=”email” placeholder=”email@contoh.com” />
</div>
<div class=”form-group”>
<label>Rujukan Dokter (opsional)</label>
<input type=”text” placeholder=”Nama dokter yang merujuk” />
</div>
<a href=”https://hearing-screener.beyondhearing.org/TesOnlineNobel/D3nwuK/welcome” target=”_blank” rel=”noopener” class=”btn btn-primary” style=”width:100%;justify-content:center;”>Mulai Tes Pendengaran →</a>
</div>
</div>
</section>

<!– ╔═══ BRANCHES ═══╗ –>
<section class=”branches” id=”cabang”>
<div class=”container”>
<div class=”branches-header reveal”>
<span class=”section-eyebrow”>Cabang Kami</span>
<h2 class=”section-title”>Temukan Nobel Audiology<br>terdekat dari Anda</h2>
<p class=”section-desc” style=”margin-top:12px;”>Kami hadir di Jakarta Timur, Jakarta Barat, dan Jakarta Selatan untuk melayani kebutuhan pendengaran Anda.</p>
</div>
<div class=”branch-grid”>
<div class=”branch-card reveal”>
<div class=”branch-icon”>📍</div>
<div class=”branch-tag”>
<span>●</span> Buka Sekarang
</div>
<h3>Nobel Audiology – Jakarta Timur</h3>
<address>Jl. Contoh No. 1, Jakarta Timur<br>DKI Jakarta, 13xxx</address>
<a href=”#”>Lihat Peta & Jam Buka →</a>
</div>
<div class=”branch-card reveal”>
<div class=”branch-icon”>📍</div>
<div class=”branch-tag”>
<span>●</span> Buka Sekarang
</div>
<h3>Nobel Audiology – Jakarta Barat</h3>
<address>Jl. Contoh No. 2, Jakarta Barat<br>DKI Jakarta, 11xxx</address>
<a href=”#”>Lihat Peta & Jam Buka →</a>
</div>
<div class=”branch-card reveal”>
<div class=”branch-icon”>📍</div>
<div class=”branch-tag”>
<span>●</span> Buka Sekarang
</div>
<h3>Nobel Audiology – Jakarta Selatan</h3>
<address>Jl. Contoh No. 3, Jakarta Selatan<br>DKI Jakarta, 12xxx</address>
<a href=”#”>Lihat Peta & Jam Buka →</a>
</div>
</div>
</div>
</section>

<!– ╔═══ CTA BANNER ═══╗ –>
<section class=”cta-banner”>
<div class=”container cta-banner-inner”>
<h2>Siap untuk memulai perjalanan mendengar Anda?</h2>
<div class=”cta-banner-actions”>
<a href=”https://wa.me/6281398785448″ target=”_blank” rel=”noopener” class=”btn btn-white”>Buat Janji Temu</a>
<a href=”tel:+6221″ class=”btn” style=”background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);”>
<svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2.5″><path d=”M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.68A2 2 0 012 .18h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 14l.02 2.92z”/></svg>
Hubungi Kami
</a>
</div>
</div>
</section>

<!– ╔═══ FOOTER ═══╗ –>
<footer>
<div class=”container”>
<div class=”footer-grid”>
<div class=”footer-brand”>
<div class=”nav-logo” style=”margin-bottom:16px;”>
<div class=”nav-logo-mark” style=”background:var(–teal);”>
<svg width=”22″ height=”22″ viewBox=”0 0 24 24″ fill=”none” stroke=”white” stroke-width=”2.5″ stroke-linecap=”round” stroke-linejoin=”round”>
<path d=”M3 18c0-3.3 2.7-6 6-6s6 2.7 6 6″/>
<circle cx=”9″ cy=”9″ r=”3″/>
<path d=”M15 12c1.8 0 3.5.7 4.7 2″/>
</svg>
</div>
<div class=”nav-logo-text”>
<strong>Nobel Audiology</strong>
<span style=”color:rgba(255,255,255,.4);”>Center</span>
</div>
</div>
<p>Pusat alat bantu dengar dan implan koklea terpercaya di Indonesia. Kami berkomitmen memberikan solusi pendengaran terbaik untuk setiap individu.</p>
<div class=”social-links”>
<a href=”#” class=”social-link” aria-label=”Instagram”>
<svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″><rect x=”2″ y=”2″ width=”20″ height=”20″ rx=”5″/><path d=”M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z”/><line x1=”17.5″ y1=”6.5″ x2=”17.51″ y2=”6.5″/></svg>
</a>
<a href=”#” class=”social-link” aria-label=”Facebook”>
<svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″><path d=”M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z”/></svg>
</a>
<a href=”#” class=”social-link” aria-label=”YouTube”>
<svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″><path d=”M22.54 6.42a2.78 2.78 0 00-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 001.46 6.42 29 29 0 001 12a29 29 0 00.46 5.58A2.78 2.78 0 003.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 001.95-1.95A29 29 0 0023 12a29 29 0 00-.46-5.58z”/><polygon points=”9.75 15.02 15.5 12 9.75 8.98 9.75 15.02″/></svg>
</a>
<a href=”#” class=”social-link” aria-label=”WhatsApp”>
<svg width=”16″ height=”16″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″><path d=”M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z”/></svg>
</a>
</div>
</div>
<div class=”footer-col”>
<h4>Produk</h4>
<ul>
<li><a href=”#”>Alat Bantu Dengar</a></li>
<li><a href=”#”>GN ReSound</a></li>
<li><a href=”#”>ReSound OMNIA</a></li>
<li><a href=”#”>ReSound Key</a></li>
<li><a href=”#”>Implan Koklea</a></li>
<li><a href=”#”>Marvel CI</a></li>
</ul>
</div>
<div class=”footer-col”>
<h4>Layanan</h4>
<ul>
<li><a href=”#”>Pemeriksaan Pendengaran</a></li>
<li><a href=”#”>Layanan RehAB</a></li>
<li><a href=”#”>Layanan Purna Jual</a></li>
<li><a href=”#”>Remote Fitting</a></li>
<li><a href=”#”>TeleKonsul</a></li>
<li><a href=”#”>TeleRehAB</a></li>
</ul>
</div>
<div class=”footer-col”>
<h4>Informasi</h4>
<ul>
<li><a href=”#”>Mentor & Komunitas AB</a></li>
<li><a href=”#”>Artikel Terbaru</a></li>
<li><a href=”#”>Cabang Terdekat</a></li>
<li><a href=”https://wa.me/6281398785448″ target=”_blank” rel=”noopener”>Buat Janji Temu</a></li>
<li><a href=”https://hearing-screener.beyondhearing.org/TesOnlineNobel/D3nwuK/welcome” target=”_blank” rel=”noopener”>Tes Pendengaran Online</a></li>
<li><a href=”#”>Kontak Kami</a></li>
</ul>
</div>
</div>
<div class=”footer-bottom”>
<span>© 2024 Nobel Audiology Center. Hak cipta dilindungi.</span>
<span>Dibuat dengan ❤️ untuk mereka yang berhak mendengar</span>
</div>
</div>
</footer>

/* ── Scroll reveal ── */
const reveals = document.querySelectorAll(‘.reveal’);
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, i) => {
if (entry.isIntersecting) {
setTimeout(() => entry.target.classList.add(‘visible’), i * 80);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.08, rootMargin: ‘0px 0px -40px 0px’ });
reveals.forEach(el => observer.observe(el));
</script>
</body>
</html>