| Server IP : 139.59.63.204 / Your IP : 216.73.217.62 Web Server : Apache/2.4.58 (Ubuntu) System : Linux ubuntu-s-1vcpu-1gb-blr1-01 6.8.0-110-generic #110-Ubuntu SMP PREEMPT_DYNAMIC Thu Mar 19 15:09:20 UTC 2026 x86_64 User : root ( 0) PHP Version : 8.3.6 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/demo/html/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>AMAN Hospital — Excellence in Care</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<style>
:root {
--teal: #0a7c6e;
--teal-light: #12a899;
--teal-pale: #e0f4f2;
--navy: #0b1f3a;
--gold: #c9a84c;
--cream: #faf8f4;
--white: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', sans-serif;
background-color: var(--cream);
color: var(--navy);
overflow-x: hidden;
}
h1, h2, h3, .serif { font-family: 'Cormorant Garamond', serif; }
/* ── Loader ── */
#loader {
position: fixed; inset: 0; z-index: 9999;
background: var(--navy);
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 1rem;
transition: opacity 0.7s ease, visibility 0.7s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; }
.loader-cross {
width: 60px; height: 60px;
position: relative;
animation: pulse 1.2s ease-in-out infinite;
}
.loader-cross::before, .loader-cross::after {
content: ''; position: absolute;
background: var(--teal-light);
border-radius: 4px;
}
.loader-cross::before { width: 100%; height: 30%; top: 35%; left: 0; }
.loader-cross::after { width: 30%; height: 100%; top: 0; left: 35%; }
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0.7; }
}
/* ── Navbar ── */
#navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 1.2rem 3rem;
display: flex; align-items: center; justify-content: space-between;
transition: all 0.4s ease;
}
#navbar.scrolled {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(12px);
box-shadow: 0 2px 30px rgba(11,31,58,0.08);
padding: 0.8rem 3rem;
}
.nav-logo { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:700; color:var(--white); letter-spacing:.05em; transition:color .3s; }
#navbar.scrolled .nav-logo { color: var(--navy); }
.nav-links a { color: rgba(255,255,255,0.85); font-size:.85rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; margin-left:2.5rem; transition:color .3s; }
#navbar.scrolled .nav-links a { color: var(--navy); }
.nav-links a:hover { color: var(--teal-light); }
.nav-cta {
background: var(--teal); color: #fff !important;
padding: .5rem 1.4rem; border-radius: 50px;
transition: background .3s, transform .2s !important;
}
.nav-cta:hover { background: var(--teal-light) !important; transform: translateY(-1px); }
/* ── Hero ── */
#hero {
min-height: 100vh;
background: linear-gradient(135deg, var(--navy) 0%, #0e3554 50%, #0d5f6e 100%);
position: relative; overflow: hidden;
display: flex; align-items: center;
}
.hero-grid {
position: absolute; inset: 0;
background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size: 60px 60px;
}
.hero-circle {
position: absolute; border-radius: 50%;
background: radial-gradient(circle, rgba(18,168,153,.25), transparent 70%);
}
.hero-circle-1 { width:700px; height:700px; top:-200px; right:-100px; animation: floatA 8s ease-in-out infinite; }
.hero-circle-2 { width:400px; height:400px; bottom:-100px; left:-50px; animation: floatB 10s ease-in-out infinite; }
@keyframes floatA { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-30px,20px) scale(1.05);} }
@keyframes floatB { 0%,100%{transform:translate(0,0);} 50%{transform:translate(20px,-30px);} }
.hero-content { position: relative; z-index: 2; max-width: 700px; }
.hero-badge {
display: inline-flex; align-items: center; gap:.5rem;
background: rgba(18,168,153,.15); border: 1px solid rgba(18,168,153,.4);
color: var(--teal-light); padding:.35rem 1rem; border-radius:50px;
font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
margin-bottom: 1.5rem;
opacity:0; transform:translateY(20px); animation: fadeUp .8s .3s forwards;
}
.hero-title {
font-family:'Cormorant Garamond',serif;
font-size: clamp(3.5rem, 6vw, 5.5rem);
font-weight:300; color:#fff; line-height:1.1; margin-bottom:1.5rem;
opacity:0; transform:translateY(30px); animation: fadeUp .9s .5s forwards;
}
.hero-title span { color: var(--teal-light); font-style:italic; }
.hero-subtitle {
color: rgba(255,255,255,.65); font-size:1.05rem; line-height:1.75;
max-width:520px; margin-bottom:2.5rem;
opacity:0; transform:translateY(20px); animation: fadeUp .8s .7s forwards;
}
.hero-actions {
display:flex; gap:1rem; flex-wrap:wrap;
opacity:0; transform:translateY(20px); animation: fadeUp .8s .9s forwards;
}
.btn-primary {
background: var(--teal); color:#fff; padding:.85rem 2rem;
border-radius:50px; font-size:.9rem; font-weight:600; letter-spacing:.05em;
text-decoration:none; border:none; cursor:pointer;
transition: all .3s; display:inline-flex; align-items:center; gap:.5rem;
box-shadow: 0 8px 30px rgba(10,124,110,.4);
}
.btn-primary:hover { background: var(--teal-light); transform:translateY(-3px); box-shadow:0 12px 40px rgba(10,124,110,.5); }
.btn-ghost {
background: transparent; color:#fff; padding:.85rem 2rem;
border-radius:50px; font-size:.9rem; font-weight:500;
text-decoration:none; border:1px solid rgba(255,255,255,.3); cursor:pointer;
transition:all .3s;
}
.btn-ghost:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); transform:translateY(-2px); }
.hero-stats {
position:absolute; bottom:3rem; left:50%; transform:translateX(-50%);
display:flex; gap:4rem; z-index:2;
opacity:0; animation: fadeUp .8s 1.1s forwards;
}
.stat-item { text-align:center; }
.stat-num { font-family:'Cormorant Garamond',serif; font-size:2.8rem; font-weight:700; color:#fff; line-height:1; }
.stat-label { color:rgba(255,255,255,.5); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; margin-top:.3rem; }
@keyframes fadeUp {
to { opacity:1; transform:translateY(0); }
}
/* ── Scroll indicator ── */
.scroll-indicator {
position:absolute; bottom:1.5rem; right:3rem; z-index:2;
display:flex; flex-direction:column; align-items:center; gap:.4rem;
color:rgba(255,255,255,.4); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
}
.scroll-line {
width:1px; height:50px;
background:linear-gradient(to bottom, rgba(255,255,255,.4), transparent);
animation: scrollAnim 2s ease-in-out infinite;
}
@keyframes scrollAnim { 0%,100%{transform:scaleY(1);opacity:.5;} 50%{transform:scaleY(.5);opacity:1;} }
/* ── Section headers ── */
.section-tag {
display:inline-block; color:var(--teal); font-size:.75rem;
font-weight:600; letter-spacing:.15em; text-transform:uppercase;
margin-bottom:.75rem;
}
.section-title {
font-family:'Cormorant Garamond',serif;
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight:400; color:var(--navy); line-height:1.2;
}
.section-title em { color:var(--teal); font-style:italic; }
/* ── Services ── */
#services { padding: 8rem 0; background: var(--white); }
.service-card {
background: var(--cream); border-radius:20px; padding:2.5rem 2rem;
transition: all .4s cubic-bezier(.175,.885,.32,1.275);
position:relative; overflow:hidden;
opacity:0; transform:translateY(40px);
}
.service-card.visible { animation: fadeUp .7s forwards; }
.service-card::before {
content:''; position:absolute; inset:0;
background: linear-gradient(135deg, var(--teal), var(--teal-light));
opacity:0; transition:opacity .4s;
}
.service-card:hover { transform:translateY(-8px); box-shadow:0 25px 60px rgba(10,124,110,.15); }
.service-card:hover::before { opacity:1; }
.service-card:hover .service-icon,
.service-card:hover .service-name,
.service-card:hover .service-desc { color:#fff !important; }
.service-card:hover .service-icon-bg { background:rgba(255,255,255,.15); }
.service-card > * { position:relative; z-index:1; }
.service-icon-bg { background:var(--teal-pale); width:60px; height:60px; border-radius:14px; display:flex; align-items:center; justify-content:center; transition:background .4s; margin-bottom:1.5rem; }
.service-icon { font-size:1.8rem; }
.service-name { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:600; color:var(--navy); margin-bottom:.6rem; transition:color .4s; }
.service-desc { color:#64748b; font-size:.88rem; line-height:1.7; transition:color .4s; }
/* ── About ── */
#about { padding:8rem 0; background:var(--cream); }
.about-image-wrap {
position:relative;
}
.about-img-box {
border-radius:24px; overflow:hidden; height:500px;
background:linear-gradient(135deg,var(--teal) 0%,var(--navy) 100%);
display:flex; align-items:center; justify-content:center;
}
.about-img-icon { font-size:8rem; opacity:.3; }
.about-badge-float {
position:absolute; bottom:-1.5rem; right:-1.5rem;
background:#fff; border-radius:20px;
padding:1.5rem 2rem; box-shadow:0 20px 50px rgba(11,31,58,.12);
text-align:center;
}
.about-badge-num { font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:700; color:var(--teal); line-height:1; }
.about-badge-lbl { font-size:.75rem; color:#64748b; letter-spacing:.05em; margin-top:.25rem; }
.about-feature { display:flex; gap:1rem; margin-bottom:1.5rem; align-items:flex-start; }
.about-feat-icon { width:40px; height:40px; border-radius:10px; background:var(--teal-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem; }
.about-feat-title { font-weight:600; color:var(--navy); margin-bottom:.25rem; }
.about-feat-desc { font-size:.85rem; color:#64748b; line-height:1.6; }
/* ── Doctors ── */
#doctors { padding:8rem 0; background:var(--white); }
.doctor-card {
background:var(--cream); border-radius:24px; overflow:hidden;
transition:transform .4s, box-shadow .4s;
opacity:0; transform:translateY(40px);
}
.doctor-card.visible { animation: fadeUp .7s forwards; }
.doctor-card:hover { transform:translateY(-10px); box-shadow:0 30px 70px rgba(11,31,58,.12); }
.doctor-photo {
height:260px;
display:flex; align-items:center; justify-content:center;
font-size:5rem;
}
.doctor-info { padding:1.5rem; }
.doctor-name { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:600; color:var(--navy); }
.doctor-spec { color:var(--teal); font-size:.82rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin:.25rem 0 .75rem; }
.doctor-exp { color:#64748b; font-size:.83rem; }
/* ── Testimonials ── */
#testimonials { padding:8rem 0; background:var(--navy); position:relative; overflow:hidden; }
#testimonials::before {
content:''; position:absolute; inset:0;
background: radial-gradient(ellipse at 20% 50%, rgba(18,168,153,.15), transparent 60%),
radial-gradient(ellipse at 80% 50%, rgba(10,124,110,.1), transparent 60%);
}
.testi-card {
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
border-radius:20px; padding:2.5rem; position:relative;
transition:transform .3s, background .3s;
}
.testi-card:hover { background:rgba(255,255,255,.1); transform:translateY(-4px); }
.testi-quote { font-size:3rem; color:var(--teal-light); opacity:.5; line-height:1; margin-bottom:1rem; font-family:'Cormorant Garamond',serif; }
.testi-text { color:rgba(255,255,255,.8); line-height:1.8; font-size:.95rem; margin-bottom:1.5rem; }
.testi-author { display:flex; align-items:center; gap:.75rem; }
.testi-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-light)); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.testi-name { color:#fff; font-weight:600; font-size:.9rem; }
.testi-role { color:rgba(255,255,255,.4); font-size:.78rem; }
.stars { color:var(--gold); font-size:.9rem; margin-bottom:1rem; }
/* ── Appointment ── */
#appointment { padding:8rem 0; background:var(--cream); }
.appt-form {
background:#fff; border-radius:28px; padding:3rem;
box-shadow:0 25px 80px rgba(11,31,58,.08);
}
.form-group { margin-bottom:1.5rem; }
.form-label { display:block; font-size:.8rem; font-weight:600; color:var(--navy); letter-spacing:.05em; text-transform:uppercase; margin-bottom:.5rem; }
.form-input {
width:100%; padding:.85rem 1.25rem;
border:1.5px solid #e2e8f0; border-radius:12px;
font-family:'DM Sans',sans-serif; font-size:.95rem; color:var(--navy);
background:#faf8f4; transition:all .3s; outline:none;
}
.form-input:focus { border-color:var(--teal); background:#fff; box-shadow:0 0 0 4px rgba(10,124,110,.08); }
.form-select { appearance:none; cursor:pointer; }
/* ── Contact ── */
#contact { padding:6rem 0; background:var(--white); }
.contact-card {
background:var(--cream); border-radius:20px; padding:2rem;
display:flex; align-items:flex-start; gap:1.2rem;
transition:transform .3s, box-shadow .3s;
}
.contact-card:hover { transform:translateY(-4px); box-shadow:0 15px 40px rgba(11,31,58,.08); }
.contact-icon-box { width:50px; height:50px; border-radius:14px; background:var(--teal-pale); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.contact-card-title { font-weight:700; color:var(--navy); margin-bottom:.3rem; }
.contact-card-info { color:#64748b; font-size:.9rem; line-height:1.6; }
/* ── Footer ── */
footer {
background:var(--navy); padding:4rem 0 2rem;
}
.footer-logo { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:700; color:#fff; margin-bottom:.75rem; }
.footer-tagline { color:rgba(255,255,255,.4); font-size:.85rem; line-height:1.6; max-width:260px; }
.footer-heading { color:rgba(255,255,255,.8); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.25rem; }
footer a { color:rgba(255,255,255,.5); font-size:.88rem; text-decoration:none; display:block; margin-bottom:.7rem; transition:color .3s; }
footer a:hover { color:var(--teal-light); }
.footer-divider { border:none; border-top:1px solid rgba(255,255,255,.08); margin:2.5rem 0 1.5rem; }
.footer-copy { color:rgba(255,255,255,.3); font-size:.8rem; text-align:center; }
/* ── Floating emergency button ── */
.emergency-btn {
position:fixed; bottom:2rem; right:2rem; z-index:200;
background:linear-gradient(135deg,#e53935,#c62828);
color:#fff; border:none; border-radius:50px; cursor:pointer;
padding:.85rem 1.5rem; font-family:'DM Sans',sans-serif; font-size:.85rem; font-weight:700;
letter-spacing:.05em; display:flex; align-items:center; gap:.5rem;
box-shadow:0 8px 30px rgba(229,57,53,.5);
animation: emergencePulse 2s ease-in-out infinite;
text-decoration:none;
}
@keyframes emergencePulse {
0%,100% { box-shadow:0 8px 30px rgba(229,57,53,.5); }
50% { box-shadow:0 8px 50px rgba(229,57,53,.8), 0 0 0 10px rgba(229,57,53,.1); }
}
/* ── Animations ── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s, transform .7s; }
.reveal.visible { opacity:1; transform:none; }
/* Mobile menu */
#mobile-menu { display:none; }
.hamburger { display:none; cursor:pointer; flex-direction:column; gap:5px; }
.hamburger span { width:25px; height:2px; background:#fff; transition:.3s; display:block; border-radius:2px; }
#navbar.scrolled .hamburger span { background:var(--navy); }
@media(max-width:768px) {
#navbar { padding:1rem 1.5rem; }
#navbar.scrolled { padding:.7rem 1.5rem; }
.nav-links { display:none; }
.hamburger { display:flex; }
#mobile-menu {
position:fixed; inset:0; z-index:99; background:var(--navy);
flex-direction:column; align-items:center; justify-content:center; gap:2rem;
}
#mobile-menu.open { display:flex; }
#mobile-menu a { color:#fff; font-size:1.5rem; text-decoration:none; font-family:'Cormorant Garamond',serif; }
.hero-stats { flex-direction:column; gap:1.5rem; bottom:2rem; }
.hero-content { padding:0 1.5rem; }
}
/* Number counter animation */
.count-up { transition:all .3s; }
</style>
</head>
<body>
<!-- Loader -->
<div id="loader">
<div class="loader-cross"></div>
<p style="color:rgba(255,255,255,.5); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; margin-top:.5rem;">AMAN Hospital</p>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu">
<a href="#services" onclick="closeMobile()">Services</a>
<a href="#about" onclick="closeMobile()">About</a>
<a href="#doctors" onclick="closeMobile()">Doctors</a>
<a href="#testimonials" onclick="closeMobile()">Testimonials</a>
<a href="#appointment" onclick="closeMobile()">Appointment</a>
<a href="#contact" onclick="closeMobile()">Contact</a>
</div>
<!-- Navbar -->
<nav id="navbar">
<div class="nav-logo">✚ AMAN</div>
<div class="nav-links">
<a href="#services">Services</a>
<a href="#about">About</a>
<a href="#doctors">Doctors</a>
<a href="#testimonials">Testimonials</a>
<a href="#contact">Contact</a>
<a href="#appointment" class="nav-cta">Book Appointment</a>
</div>
<div class="hamburger" onclick="toggleMenu()" id="hamburger">
<span></span><span></span><span></span>
</div>
</nav>
<!-- Hero -->
<section id="hero">
<div class="hero-grid"></div>
<div class="hero-circle hero-circle-1"></div>
<div class="hero-circle hero-circle-2"></div>
<div class="max-w-7xl mx-auto px-6 w-full pt-24">
<div class="hero-content">
<div class="hero-badge">
<span>🏥</span> Accredited Excellence · Est. 2008
</div>
<h1 class="hero-title">
Your Health,<br/>Our <span>Sacred</span><br/>Commitment
</h1>
<p class="hero-subtitle">
AMAN Hospital brings together world-class physicians, advanced technology, and compassionate care — delivering healing that honours the whole person.
</p>
<div class="hero-actions">
<a href="#appointment" class="btn-primary">📅 Book Appointment</a>
<a href="#services" class="btn-ghost">Explore Services →</a>
</div>
</div>
</div>
<div class="hero-stats">
<div class="stat-item">
<div class="stat-num"><span class="count-up" data-target="25000">0</span>+</div>
<div class="stat-label">Patients Served</div>
</div>
<div class="stat-item">
<div class="stat-num"><span class="count-up" data-target="120">0</span>+</div>
<div class="stat-label">Specialist Doctors</div>
</div>
<div class="stat-item">
<div class="stat-num"><span class="count-up" data-target="15">0</span>+</div>
<div class="stat-label">Years of Care</div>
</div>
<div class="stat-item">
<div class="stat-num"><span class="count-up" data-target="98">0</span>%</div>
<div class="stat-label">Patient Satisfaction</div>
</div>
</div>
<div class="scroll-indicator">
<div class="scroll-line"></div>
<span>Scroll</span>
</div>
</section>
<!-- Services -->
<section id="services" class="py-32 bg-white">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16 reveal">
<span class="section-tag">What We Offer</span>
<h2 class="section-title">Comprehensive <em>Medical Services</em></h2>
<p class="text-slate-500 mt-4 max-w-xl mx-auto text-sm leading-relaxed">From preventive care to complex surgeries, our multidisciplinary teams provide seamless, end-to-end medical support.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="service-card" data-delay="0">
<div class="service-icon-bg"><div class="service-icon">❤️</div></div>
<div class="service-name">Cardiology</div>
<div class="service-desc">Advanced heart care with catheterisation labs, echocardiography, and a dedicated cardiac ICU for critical interventions.</div>
</div>
<div class="service-card" data-delay="100">
<div class="service-icon-bg"><div class="service-icon">🧠</div></div>
<div class="service-name">Neurology & Neurosurgery</div>
<div class="service-desc">Comprehensive brain and spine care featuring MRI-guided surgery, stroke units, and neuro-rehabilitation programmes.</div>
</div>
<div class="service-card" data-delay="200">
<div class="service-icon-bg"><div class="service-icon">🦴</div></div>
<div class="service-name">Orthopaedics</div>
<div class="service-desc">Joint replacements, sports injuries, and spinal surgery performed by fellowship-trained orthopaedic surgeons.</div>
</div>
<div class="service-card" data-delay="0">
<div class="service-icon-bg"><div class="service-icon">👶</div></div>
<div class="service-name">Paediatrics & NICU</div>
<div class="service-desc">Dedicated child health unit with a Level-3 NICU, paediatric intensivists, and child-friendly care environments.</div>
</div>
<div class="service-card" data-delay="100">
<div class="service-icon-bg"><div class="service-icon">🔬</div></div>
<div class="service-name">Oncology</div>
<div class="service-desc">Multidisciplinary cancer care with chemotherapy, targeted therapy, radiation oncology, and supportive care services.</div>
</div>
<div class="service-card" data-delay="200">
<div class="service-icon-bg"><div class="service-icon">🫀</div></div>
<div class="service-name">Emergency & Trauma</div>
<div class="service-desc">24/7 emergency services with rapid-response trauma teams, resuscitation bays, and life-flight coordination.</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="py-32" style="background:var(--cream);">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div class="about-image-wrap reveal">
<div class="about-img-box">
<div class="about-img-icon">🏥</div>
</div>
<div class="about-badge-float">
<div class="about-badge-num">A+</div>
<div class="about-badge-lbl">NABH Accredited</div>
</div>
</div>
<div class="reveal">
<span class="section-tag">Our Story</span>
<h2 class="section-title mb-6">A Legacy of <em>Healing</em><br/>& Innovation</h2>
<p class="text-slate-500 leading-relaxed mb-8 text-sm">
Founded in 2008, AMAN Hospital began with a singular vision: to make world-class healthcare accessible to every individual, regardless of background. Over 15 years, we have grown into a 400-bed quaternary care facility, home to over 120 specialists and supported by the latest medical technology.
</p>
<div class="about-feature">
<div class="about-feat-icon">🎯</div>
<div>
<div class="about-feat-title">Patient-Centric Philosophy</div>
<div class="about-feat-desc">Every care plan is tailored to the individual — integrating medical, emotional, and social dimensions of health.</div>
</div>
</div>
<div class="about-feature">
<div class="about-feat-icon">⚕️</div>
<div>
<div class="about-feat-title">Cutting-Edge Technology</div>
<div class="about-feat-desc">From robotic surgery systems to AI-assisted diagnostics, we invest continuously in tools that improve outcomes.</div>
</div>
</div>
<div class="about-feature">
<div class="about-feat-icon">🌿</div>
<div>
<div class="about-feat-title">Holistic Wellbeing</div>
<div class="about-feat-desc">Our integrative wellness centre blends conventional medicine with evidence-based complementary therapies.</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Doctors -->
<section id="doctors" class="py-32 bg-white">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16 reveal">
<span class="section-tag">Meet the Team</span>
<h2 class="section-title">Our <em>Distinguished</em> Specialists</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="doctor-card" data-delay="0">
<div class="doctor-photo" style="background:linear-gradient(135deg,#0a7c6e22,#0b1f3a22);">👨⚕️</div>
<div class="doctor-info">
<div class="doctor-name">Dr. Rajiv Sharma</div>
<div class="doctor-spec">Cardiologist</div>
<div class="doctor-exp">22 years · AIIMS Delhi</div>
</div>
</div>
<div class="doctor-card" data-delay="100">
<div class="doctor-photo" style="background:linear-gradient(135deg,#12a89922,#0d5f6e22);">👩⚕️</div>
<div class="doctor-info">
<div class="doctor-name">Dr. Priya Mehta</div>
<div class="doctor-spec">Neurologist</div>
<div class="doctor-exp">18 years · PGIMER</div>
</div>
</div>
<div class="doctor-card" data-delay="200">
<div class="doctor-photo" style="background:linear-gradient(135deg,#c9a84c22,#0a7c6e22);">👨⚕️</div>
<div class="doctor-info">
<div class="doctor-name">Dr. Anand Kumar</div>
<div class="doctor-spec">Pediatrician</div>
<div class="doctor-exp">15 years · CMC Vellore</div>
</div>
</div>
<div class="doctor-card" data-delay="300">
<div class="doctor-photo" style="background:linear-gradient(135deg,#0b1f3a22,#12a89922);">👩⚕️</div>
<div class="doctor-info">
<div class="doctor-name">Dr. Sunita Rao</div>
<div class="doctor-spec">Oncologist</div>
<div class="doctor-exp">20 years · Tata Memorial</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class="py-32" style="background:var(--navy);">
<div class="max-w-7xl mx-auto px-6 relative z-10">
<div class="text-center mb-16 reveal">
<span class="section-tag" style="color:var(--teal-light);">Patient Voices</span>
<h2 class="section-title" style="color:#fff;">Stories of <em>Recovery</em><br/>& Gratitude</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="testi-card reveal">
<div class="stars">★★★★★</div>
<div class="testi-quote">"</div>
<p class="testi-text">The cardiology team at AMAN saved my life. From diagnosis to surgery to recovery, every step was handled with precision and kindness. I am forever grateful.</p>
<div class="testi-author">
<div class="testi-avatar">👨</div>
<div>
<div class="testi-name">Ramesh Gupta</div>
<div class="testi-role">Cardiac Patient · Delhi</div>
</div>
</div>
</div>
<div class="testi-card reveal">
<div class="stars">★★★★★</div>
<div class="testi-quote">"</div>
<p class="testi-text">After my stroke, the neuro-rehabilitation team at AMAN helped me regain movement and confidence I thought were gone forever. World-class care, warm hearts.</p>
<div class="testi-author">
<div class="testi-avatar">👩</div>
<div>
<div class="testi-name">Anita Verma</div>
<div class="testi-role">Neurology Patient · Noida</div>
</div>
</div>
</div>
<div class="testi-card reveal">
<div class="stars">★★★★★</div>
<div class="testi-quote">"</div>
<p class="testi-text">My daughter was admitted to the NICU and the team's expertise and constant communication gave us so much comfort. She is thriving today because of AMAN.</p>
<div class="testi-author">
<div class="testi-avatar">👩</div>
<div>
<div class="testi-name">Kavita Singh</div>
<div class="testi-role">Parent · Ghaziabad</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Appointment -->
<section id="appointment" class="py-32" style="background:var(--cream);">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
<div class="reveal">
<span class="section-tag">Schedule a Visit</span>
<h2 class="section-title mb-6">Book Your <em>Appointment</em></h2>
<p class="text-slate-500 text-sm leading-relaxed mb-8">Fill in the form and our patient care team will confirm your appointment within 2 hours. Walk-in appointments are also welcome 7 days a week.</p>
<div class="flex flex-col gap-4">
<div class="flex items-center gap-3" style="color:var(--teal)">
<span>⏰</span> <span class="text-slate-600 text-sm">OPD Hours: Mon – Sat, 8 AM – 8 PM</span>
</div>
<div class="flex items-center gap-3" style="color:var(--teal)">
<span>🚨</span> <span class="text-slate-600 text-sm">Emergency: 24 × 7 · All Days</span>
</div>
<div class="flex items-center gap-3" style="color:var(--teal)">
<span>📞</span> <span class="text-slate-600 text-sm">Helpline: +91 120 400 5000</span>
</div>
</div>
</div>
<div class="appt-form reveal">
<h3 class="serif text-2xl font-semibold mb-6" style="color:var(--navy);">Patient Details</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-0">
<div class="form-group md:col-span-1 md:pr-3">
<label class="form-label">First Name</label>
<input type="text" class="form-input" placeholder="Rahul" />
</div>
<div class="form-group md:col-span-1 md:pl-3">
<label class="form-label">Last Name</label>
<input type="text" class="form-input" placeholder="Sharma" />
</div>
</div>
<div class="form-group">
<label class="form-label">Phone Number</label>
<input type="tel" class="form-input" placeholder="+91 98765 43210" />
</div>
<div class="form-group">
<label class="form-label">Email Address</label>
<input type="email" class="form-input" placeholder="rahul@example.com" />
</div>
<div class="form-group">
<label class="form-label">Department</label>
<select class="form-input form-select">
<option value="">Select a Department</option>
<option>Cardiology</option>
<option>Neurology</option>
<option>Orthopaedics</option>
<option>Oncology</option>
<option>Paediatrics</option>
<option>Emergency & Trauma</option>
<option>General Medicine</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Preferred Date</label>
<input type="date" class="form-input" />
</div>
<div class="form-group">
<label class="form-label">Message (Optional)</label>
<textarea class="form-input" rows="3" placeholder="Brief description of your symptoms or query..."></textarea>
</div>
<button onclick="submitForm()" class="btn-primary w-full justify-center" style="width:100%;">
Confirm Appointment ✓
</button>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-14 reveal">
<span class="section-tag">Get in Touch</span>
<h2 class="section-title">Find & Contact <em>AMAN Hospital</em></h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
<div class="contact-card reveal">
<div class="contact-icon-box">📍</div>
<div>
<div class="contact-card-title">Our Address</div>
<div class="contact-card-info">14, Medical Campus Road,<br/>Sector 62, Noida – 201309</div>
</div>
</div>
<div class="contact-card reveal">
<div class="contact-icon-box">📞</div>
<div>
<div class="contact-card-title">Phone</div>
<div class="contact-card-info">+91 120 400 5000<br/>+91 98765 43210</div>
</div>
</div>
<div class="contact-card reveal">
<div class="contact-icon-box">✉️</div>
<div>
<div class="contact-card-title">Email</div>
<div class="contact-card-info">care@amanhospital.in<br/>appointments@amanhospital.in</div>
</div>
</div>
<div class="contact-card reveal">
<div class="contact-icon-box">🕐</div>
<div>
<div class="contact-card-title">Hours</div>
<div class="contact-card-info">OPD: Mon–Sat, 8AM–8PM<br/>Emergency: 24 × 7</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 pb-10">
<div>
<div class="footer-logo">✚ AMAN</div>
<p class="footer-tagline">Excellence in care, compassion at heart. Serving patients across the NCR region since 2008.</p>
</div>
<div>
<div class="footer-heading">Quick Links</div>
<a href="#services">Our Services</a>
<a href="#about">About Us</a>
<a href="#doctors">Our Doctors</a>
<a href="#appointment">Book Appointment</a>
</div>
<div>
<div class="footer-heading">Departments</div>
<a href="#services">Cardiology</a>
<a href="#services">Neurology</a>
<a href="#services">Orthopaedics</a>
<a href="#services">Oncology</a>
</div>
<div>
<div class="footer-heading">Connect</div>
<a href="#">Facebook</a>
<a href="#">Instagram</a>
<a href="#">LinkedIn</a>
<a href="#">YouTube</a>
</div>
</div>
<hr class="footer-divider"/>
<p class="footer-copy">© 2024 AMAN Hospital. All rights reserved. | Designed with care.</p>
</div>
</footer>
<!-- Emergency Button -->
<a href="tel:+911204005000" class="emergency-btn">
🚨 Emergency: 120 400 5000
</a>
<!-- Toast -->
<div id="toast" style="display:none;position:fixed;bottom:6rem;left:50%;transform:translateX(-50%);background:var(--teal);color:#fff;padding:.9rem 2rem;border-radius:50px;font-size:.9rem;font-weight:600;z-index:500;box-shadow:0 10px 40px rgba(10,124,110,.4);animation:fadeUp .4s forwards;">
✅ Appointment request submitted! We'll call within 2 hours.
</div>
<script>
// Loader
window.addEventListener('load', () => {
setTimeout(() => {
document.getElementById('loader').classList.add('hidden');
startCounters();
}, 1200);
});
// Navbar scroll
window.addEventListener('scroll', () => {
const nav = document.getElementById('navbar');
nav.classList.toggle('scrolled', window.scrollY > 60);
});
// Mobile menu
function toggleMenu() {
document.getElementById('mobile-menu').classList.toggle('open');
}
function closeMobile() {
document.getElementById('mobile-menu').classList.remove('open');
}
// Intersection observer for reveal
const observer = new IntersectionObserver((entries) => {
entries.forEach(el => {
if (el.isIntersecting) {
el.target.classList.add('visible');
observer.unobserve(el.target);
}
});
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// Service cards
const cardObserver = new IntersectionObserver((entries) => {
entries.forEach(el => {
if (el.isIntersecting) {
const delay = el.target.dataset.delay || 0;
setTimeout(() => el.target.classList.add('visible'), parseInt(delay));
cardObserver.unobserve(el.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.service-card, .doctor-card').forEach(el => cardObserver.observe(el));
// Counter animation
function startCounters() {
document.querySelectorAll('.count-up').forEach(el => {
const target = parseInt(el.dataset.target);
const duration = 2000;
const step = target / (duration / 16);
let current = 0;
const timer = setInterval(() => {
current = Math.min(current + step, target);
el.textContent = Math.floor(current).toLocaleString();
if (current >= target) clearInterval(timer);
}, 16);
});
}
// Form submit
function submitForm() {
const toast = document.getElementById('toast');
toast.style.display = 'block';
setTimeout(() => { toast.style.display = 'none'; }, 4000);
}
</script>
</body>
</html>