Home
Alif Bima Pradana
HealthLife - Modern Health Solutions

HealthLife - Modern Health Solutions

Health & Lifestyle website landing page

This tailwind example is contributed by Alif Bima Pradana, on 10-Mar-2026. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is Front page

Landing Page

Author Alif Bima Pradana

Fork Fullscreen

<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HealthLife - Solusi Kesehatan Modern</title>
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    
    <script src="https://unpkg.com/lucide@latest"></script>

<script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                    },
                    colors: {
                        primary: '#00d982',
                        'primary-dark': '#00b56c',
                        'primary-light': '#ccf7e6',
                        dark: '#0f172a',
                        card: '#1e293b',
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'blob': 'blob 7s infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-20px)' },
                        },
                        blob: {
                            '0%': { transform: 'translate(0px, 0px) scale(1)' },
                            '33%': { transform: 'translate(30px, -50px) scale(1.1)' },
                            '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
                            '100%': { transform: 'translate(0px, 0px) scale(1)' },
                        }
                    }
                }
            }
        }
    </script>

/* Grid Pattern */
        .bg-grid {
            background-size: 40px 40px;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
        }
        .dark .bg-grid {
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        }

/* Hide Scrollbar for clean UI */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

/* Animation Utilities */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body class="bg-white dark:bg-dark text-slate-800 dark:text-slate-100 transition-colors duration-300">

<nav class="fixed w-full z-50 glass-nav transition-all duration-300" id="navbar">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-20">
                
                <div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
                    <div class="w-10 h-10 bg-primary/20 rounded-xl flex items-center justify-center text-primary">
                        <i data-lucide="heart-pulse" class="w-6 h-6"></i>
                    </div>
                    <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-emerald-600 dark:to-emerald-400">
                        HealthLife
                    </span>
                </div>

<div class="hidden md:flex space-x-8 items-center">
                    <a href="#beranda" class="text-slate-600 dark:text-slate-300 hover:text-primary font-medium transition">Beranda</a>
                    <a href="#layanan" class="text-slate-600 dark:text-slate-300 hover:text-primary font-medium transition">Layanan</a>
                    <a href="#dokter" class="text-slate-600 dark:text-slate-300 hover:text-primary font-medium transition">Cari Dokter</a>
                    <a href="#artikel" class="text-slate-600 dark:text-slate-300 hover:text-primary font-medium transition">Artikel</a>
                </div>

<div class="hidden md:flex items-center space-x-4">
                    
                    <button id="theme-toggle" class="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition text-slate-600 dark:text-slate-300">
                        <i data-lucide="moon" class="w-5 h-5 hidden dark:block"></i>
                        <i data-lucide="sun" class="w-5 h-5 block dark:hidden"></i>
                    </button>
                    
                    <a href="#" class="text-slate-600 dark:text-slate-300 font-medium hover:text-primary">Masuk</a>
                    <a href="#" class="bg-primary hover:bg-primary-dark text-white px-5 py-2.5 rounded-full font-semibold transition shadow-lg shadow-primary/30 hover:shadow-primary/50 flex items-center gap-2">
                        Daftar
                    </a>
                </div>

<div class="md:hidden flex items-center gap-4">
            <button id="theme-toggle-mobile" class="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition text-slate-600 dark:text-slate-300">
                <i data-lucide="moon" class="w-5 h-5 hidden dark:block"></i>
                <i data-lucide="sun" class="w-5 h-5 block dark:hidden"></i>
            </button>
            <button id="mobile-menu-btn" class="text-slate-600 dark:text-slate-300 hover:text-primary transition">
                <i data-lucide="menu" class="w-8 h-8"></i>
            </button>
        </div>
    </div>
</div>

<div id="mobile-menu" class="fixed inset-y-0 right-0 w-[85%] max-w-xs bg-white/95 dark:bg-[#0f172a]/95 backdrop-blur-xl shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out z-[60] flex flex-col h-full md:hidden border-l border-slate-100 dark:border-slate-800">
    
    
    <div class="p-6 flex justify-between items-center border-b border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50">
        <div class="flex items-center gap-2">
            <div class="w-8 h-8 bg-primary/20 rounded-lg flex items-center justify-center text-primary">
                <i data-lucide="heart-pulse" class="w-5 h-5"></i>
            </div>
            <span class="text-lg font-bold text-slate-900 dark:text-white">HealthLife</span>
        </div>
        <button id="close-menu-btn" class="p-2 rounded-full hover:bg-red-50 hover:text-red-500 text-slate-500 transition-colors">
            <i data-lucide="x" class="w-6 h-6"></i>
        </button>
    </div>

<div class="flex-1 overflow-y-auto py-6 px-4 space-y-2">
        <div class="text-xs font-semibold text-slate-400 uppercase tracking-wider px-4 mb-2">Menu Utama</div>
        
        <a href="#beranda" class="mobile-link flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-300 hover:bg-primary/10 hover:text-primary rounded-xl transition-all font-medium group">
            <i data-lucide="home" class="w-5 h-5 text-slate-400 group-hover:text-primary transition-colors"></i>
            Beranda
        </a>
        <a href="#layanan" class="mobile-link flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-300 hover:bg-primary/10 hover:text-primary rounded-xl transition-all font-medium group">
            <i data-lucide="stethoscope" class="w-5 h-5 text-slate-400 group-hover:text-primary transition-colors"></i>
            Layanan
        </a>
        <a href="#dokter" class="mobile-link flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-300 hover:bg-primary/10 hover:text-primary rounded-xl transition-all font-medium group">
            <i data-lucide="user-plus" class="w-5 h-5 text-slate-400 group-hover:text-primary transition-colors"></i>
            Cari Dokter
        </a>
        <a href="#artikel" class="mobile-link flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-300 hover:bg-primary/10 hover:text-primary rounded-xl transition-all font-medium group">
            <i data-lucide="book-open" class="w-5 h-5 text-slate-400 group-hover:text-primary transition-colors"></i>
            Artikel
        </a>

<div class="text-xs font-semibold text-slate-400 uppercase tracking-wider px-4 mb-2">Akun</div>
        <a href="#" class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl transition-all font-medium">
            <i data-lucide="log-in" class="w-5 h-5 text-slate-400"></i>
            Masuk
        </a>
    </div>

<div class="p-6 border-t border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
        <a href="#" class="block w-full bg-primary hover:bg-primary-dark text-white text-center py-3.5 rounded-xl font-bold shadow-lg shadow-primary/30 transition-transform active:scale-95">
            Daftar Sekarang
        </a>
        <p class="text-center text-xs text-slate-400 mt-4">© 2023 HealthLife App</p>
    </div>
</div>

<div id="overlay" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-[55] hidden transition-opacity duration-300 md:hidden"></div>

</nav>

<section id="beranda" class="relative pt-32 pb-20 lg:pt-40 lg:pb-28 overflow-hidden bg-grid">
        
        <div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 rounded-full bg-primary/20 blur-3xl filter opacity-50 animate-blob"></div>
        <div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 rounded-full bg-blue-400/20 blur-3xl filter opacity-50 animate-blob animation-delay-2000"></div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                
                <div class="text-center lg:text-left reveal active">
                    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-light/50 dark:bg-primary/10 text-primary-dark dark:text-primary font-semibold text-sm mb-6 border border-primary/20">
                        <span class="relative flex h-3 w-3">
                          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
                          <span class="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
                        </span>
                        Platform Kesehatan Terpercaya No. 1
                    </div>
                    <h1 class="text-4xl lg:text-6xl font-extrabold tracking-tight leading-tight mb-6">
                        Kesehatan Anda Adalah <br>
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-600">Prioritas Kami</span>
                    </h1>
                    <p class="text-slate-600 dark:text-slate-400 text-lg mb-8 max-w-2xl mx-auto lg:mx-0 leading-relaxed">
                        Konsultasi dengan dokter spesialis, beli obat, dan cek lab kini lebih mudah, cepat, dan aman dari kenyamanan rumah Anda.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                        <a href="#" class="bg-primary hover:bg-primary-dark text-white px-8 py-4 rounded-xl font-bold transition shadow-xl shadow-primary/30 flex items-center justify-center gap-2 group">
                            Chat Dokter Sekarang
                            <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
                        </a>
                        <a href="#" class="bg-white dark:bg-slate-800 text-slate-700 dark:text-white border border-slate-200 dark:border-slate-700 px-8 py-4 rounded-xl font-bold hover:shadow-lg transition flex items-center justify-center gap-2">
                            <i data-lucide="calendar" class="w-5 h-5 text-primary"></i>
                            Buat Janji RS
                        </a>
                    </div>
                    
                    
                    <div class="mt-12 grid grid-cols-3 gap-6 border-t border-slate-200 dark:border-slate-800 pt-8">
                        <div>
                            <h3 class="text-3xl font-bold text-slate-900 dark:text-white">20rb+</h3>
                            <p class="text-sm text-slate-500">Dokter Aktif</p>
                        </div>
                        <div>
                            <h3 class="text-3xl font-bold text-slate-900 dark:text-white">5jt+</h3>
                            <p class="text-sm text-slate-500">Pasien Sembuh</p>
                        </div>
                        <div>
                            <h3 class="text-3xl font-bold text-slate-900 dark:text-white">99%</h3>
                            <p class="text-sm text-slate-500">Kepuasan</p>
                        </div>
                    </div>
                </div>

<div class="relative lg:h-[600px] flex items-center justify-center reveal delay-200">
                    
                    <div class="absolute inset-0 bg-gradient-to-tr from-primary/10 to-blue-500/10 rounded-full blur-3xl transform rotate-12"></div>
                    
                    
                    <div class="relative w-full max-w-md animate-float">
                        <img src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Doctor" class="rounded-3xl shadow-2xl shadow-primary/20 object-cover w-full h-[500px] z-10 border-4 border-white dark:border-slate-700">
                        
                        
                        <div class="absolute -left-8 top-20 bg-white dark:bg-card p-4 rounded-2xl shadow-xl border border-slate-100 dark:border-slate-700 flex items-center gap-4 animate-float" style="animation-delay: 1s;">
                            <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-500">
                                <i data-lucide="heart" class="w-6 h-6 fill-current"></i>
                            </div>
                            <div>
                                <p class="text-xs text-slate-500">Heart Rate</p>
                                <p class="text-lg font-bold text-slate-800 dark:text-white">98 bpm</p>
                            </div>
                        </div>

<div class="absolute -right-8 bottom-32 bg-white dark:bg-card p-4 rounded-2xl shadow-xl border border-slate-100 dark:border-slate-700 flex items-center gap-4 animate-float" style="animation-delay: 2s;">
                            <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                                <i data-lucide="shield-check" class="w-6 h-6"></i>
                            </div>
                            <div>
                                <p class="text-xs text-slate-500">Status</p>
                                <p class="text-lg font-bold text-slate-800 dark:text-white">Verified</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="layanan" class="py-20 bg-slate-50 dark:bg-[#162032]">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 reveal">
                <span class="text-primary font-semibold tracking-wider uppercase text-sm">Layanan Kami</span>
                <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4 text-slate-900 dark:text-white">Solusi Kesehatan Terlengkap</h2>
                <p class="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
                    Akses berbagai layanan kesehatan dengan mudah dalam satu aplikasi yang terintegrasi.
                </p>
            </div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                
                <div class="group bg-white dark:bg-card p-8 rounded-2xl shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-100 dark:border-slate-800 relative overflow-hidden reveal">
                    <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition transform group-hover:scale-110">
                        <i data-lucide="message-circle" class="w-24 h-24 text-primary"></i>
                    </div>
                    <div class="w-14 h-14 bg-blue-50 dark:bg-blue-900/20 rounded-xl flex items-center justify-center text-blue-500 mb-6 group-hover:scale-110 transition">
                        <i data-lucide="message-square-plus" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Chat Dokter</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-sm mb-4">Konsultasi 24 jam dengan dokter umum dan spesialis berpengalaman.</p>
                    <a href="#" class="text-primary font-semibold text-sm flex items-center gap-1 group-hover:gap-2 transition-all">
                        Mulai Konsultasi <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>

<div class="group bg-white dark:bg-card p-8 rounded-2xl shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-100 dark:border-slate-800 relative overflow-hidden reveal delay-100">
                    <div class="w-14 h-14 bg-red-50 dark:bg-red-900/20 rounded-xl flex items-center justify-center text-red-500 mb-6 group-hover:scale-110 transition">
                        <i data-lucide="pill" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Toko Obat</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-sm mb-4">Beli obat resep atau vitamin, diantar langsung ke rumah Anda.</p>
                    <a href="#" class="text-primary font-semibold text-sm flex items-center gap-1 group-hover:gap-2 transition-all">
                        Belanja Sekarang <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>

<div class="group bg-white dark:bg-card p-8 rounded-2xl shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-100 dark:border-slate-800 relative overflow-hidden reveal delay-200">
                    <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition">
                        <i data-lucide="stethoscope" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Janji Temu RS</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-sm mb-4">Booking jadwal konsultasi tatap muka di Rumah Sakit terdekat.</p>
                    <a href="#" class="text-primary font-semibold text-sm flex items-center gap-1 group-hover:gap-2 transition-all">
                        Buat Janji <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>

<div class="group bg-white dark:bg-card p-8 rounded-2xl shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-100 dark:border-slate-800 relative overflow-hidden reveal delay-300">
                    <div class="w-14 h-14 bg-purple-50 dark:bg-purple-900/20 rounded-xl flex items-center justify-center text-purple-500 mb-6 group-hover:scale-110 transition">
                        <i data-lucide="flask-conical" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Cek Lab</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-sm mb-4">Layanan tes laboratorium lengkap dengan hasil yang akurat.</p>
                    <a href="#" class="text-primary font-semibold text-sm flex items-center gap-1 group-hover:gap-2 transition-all">
                        Lihat Paket <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

<section id="dokter" class="py-20 bg-white dark:bg-dark relative overflow-hidden">
        
        <div class="absolute -left-40 top-40 w-80 h-80 bg-primary/5 rounded-full blur-3xl"></div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
            <div class="flex flex-col md:flex-row justify-between items-end mb-12 reveal">
                <div>
                    <span class="text-primary font-semibold tracking-wider uppercase text-sm">Dokter Spesialis</span>
                    <h2 class="text-3xl md:text-4xl font-bold mt-2 text-slate-900 dark:text-white">Mitra Dokter Terbaik</h2>
                </div>
                <a href="#" class="hidden md:flex text-primary font-medium hover:underline gap-1 items-center mt-4 md:mt-0">
                    Lihat Semua Dokter <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </a>
            </div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                
                <div class="bg-white dark:bg-card border border-slate-100 dark:border-slate-800 rounded-2xl p-4 hover:shadow-lg transition text-center reveal">
                    <div class="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-2 border-primary/20 p-1">
                        <img src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Doctor" class="w-full h-full rounded-full object-cover">
                    </div>
                    <h3 class="font-bold text-lg text-slate-900 dark:text-white">dr. Sarah Wijaya</h3>
                    <p class="text-primary text-sm font-medium mb-2">Spesialis Anak</p>
                    <div class="flex items-center justify-center gap-1 text-yellow-400 text-sm mb-4">
                        <i data-lucide="star" class="w-4 h-4 fill-current"></i>
                        <span class="text-slate-600 dark:text-slate-400 font-medium">4.9 (1.2k)</span>
                    </div>
                    <div class="flex items-center justify-between bg-slate-50 dark:bg-slate-800/50 p-3 rounded-xl">
                        <span class="text-xs font-medium text-slate-500">Mulai dari</span>
                        <span class="text-sm font-bold text-slate-800 dark:text-white">Rp 50.000</span>
                    </div>
                    <button class="w-full mt-4 bg-primary/10 hover:bg-primary text-primary hover:text-white py-2 rounded-lg font-medium transition text-sm">Chat Sekarang</button>
                </div>

<div class="bg-white dark:bg-card border border-slate-100 dark:border-slate-800 rounded-2xl p-4 hover:shadow-lg transition text-center reveal delay-100">
                    <div class="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-2 border-primary/20 p-1">
                        <img src="https://images.unsplash.com/photo-1537368910025-700350fe46c7?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Doctor" class="w-full h-full rounded-full object-cover">
                    </div>
                    <h3 class="font-bold text-lg text-slate-900 dark:text-white">dr. Budi Santoso</h3>
                    <p class="text-primary text-sm font-medium mb-2">Spesialis Jantung</p>
                    <div class="flex items-center justify-center gap-1 text-yellow-400 text-sm mb-4">
                        <i data-lucide="star" class="w-4 h-4 fill-current"></i>
                        <span class="text-slate-600 dark:text-slate-400 font-medium">5.0 (850)</span>
                    </div>
                    <div class="flex items-center justify-between bg-slate-50 dark:bg-slate-800/50 p-3 rounded-xl">
                        <span class="text-xs font-medium text-slate-500">Mulai dari</span>
                        <span class="text-sm font-bold text-slate-800 dark:text-white">Rp 85.000</span>
                    </div>
                    <button class="w-full mt-4 bg-primary/10 hover:bg-primary text-primary hover:text-white py-2 rounded-lg font-medium transition text-sm">Chat Sekarang</button>
                </div>

<div class="bg-white dark:bg-card border border-slate-100 dark:border-slate-800 rounded-2xl p-4 hover:shadow-lg transition text-center reveal delay-200">
                    <div class="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-2 border-primary/20 p-1">
                        <img src="https://images.unsplash.com/photo-1594824476967-48c8b964273f?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Doctor" class="w-full h-full rounded-full object-cover">
                    </div>
                    <h3 class="font-bold text-lg text-slate-900 dark:text-white">dr. Amanda Lee</h3>
                    <p class="text-primary text-sm font-medium mb-2">Spesialis Kulit</p>
                    <div class="flex items-center justify-center gap-1 text-yellow-400 text-sm mb-4">
                        <i data-lucide="star" class="w-4 h-4 fill-current"></i>
                        <span class="text-slate-600 dark:text-slate-400 font-medium">4.8 (2.1k)</span>
                    </div>
                    <div class="flex items-center justify-between bg-slate-50 dark:bg-slate-800/50 p-3 rounded-xl">
                        <span class="text-xs font-medium text-slate-500">Mulai dari</span>
                        <span class="text-sm font-bold text-slate-800 dark:text-white">Rp 60.000</span>
                    </div>
                    <button class="w-full mt-4 bg-primary/10 hover:bg-primary text-primary hover:text-white py-2 rounded-lg font-medium transition text-sm">Chat Sekarang</button>
                </div>

<div class="bg-white dark:bg-card border border-slate-100 dark:border-slate-800 rounded-2xl p-4 hover:shadow-lg transition text-center reveal delay-300">
                    <div class="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-2 border-primary/20 p-1">
                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Doctor" class="w-full h-full rounded-full object-cover">
                    </div>
                    <h3 class="font-bold text-lg text-slate-900 dark:text-white">dr. Kevin Lim</h3>
                    <p class="text-primary text-sm font-medium mb-2">Psikolog Klinis</p>
                    <div class="flex items-center justify-center gap-1 text-yellow-400 text-sm mb-4">
                        <i data-lucide="star" class="w-4 h-4 fill-current"></i>
                        <span class="text-slate-600 dark:text-slate-400 font-medium">4.9 (980)</span>
                    </div>
                    <div class="flex items-center justify-between bg-slate-50 dark:bg-slate-800/50 p-3 rounded-xl">
                        <span class="text-xs font-medium text-slate-500">Mulai dari</span>
                        <span class="text-sm font-bold text-slate-800 dark:text-white">Rp 75.000</span>
                    </div>
                    <button class="w-full mt-4 bg-primary/10 hover:bg-primary text-primary hover:text-white py-2 rounded-lg font-medium transition text-sm">Chat Sekarang</button>
                </div>
            </div>

<div class="mt-8 text-center md:hidden">
                <a href="#" class="text-primary font-medium hover:underline inline-flex items-center gap-1">
                    Lihat Semua Dokter <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </a>
            </div>
        </div>
    </section>

<section id="artikel" class="py-20 bg-slate-50 dark:bg-[#162032]">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 reveal">
                <span class="text-primary font-semibold tracking-wider uppercase text-sm">Edukasi</span>
                <h2 class="text-3xl md:text-4xl font-bold mt-2 text-slate-900 dark:text-white">Artikel Kesehatan Terbaru</h2>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                
                <article class="bg-white dark:bg-card rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition group reveal">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Food" class="w-full h-full object-cover transform group-hover:scale-110 transition duration-500">
                        <div class="absolute top-4 left-4 bg-white/90 dark:bg-black/70 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-primary">Nutrisi</div>
                    </div>
                    <div class="p-6">
                        <h3 class="font-bold text-lg mb-2 text-slate-900 dark:text-white line-clamp-2 group-hover:text-primary transition">10 Makanan Super untuk Meningkatkan Imunitas</h3>
                        <p class="text-slate-500 text-sm line-clamp-2 mb-4">Menjaga daya tahan tubuh sangat penting, berikut adalah daftar makanan...</p>
                        <a href="#" class="text-sm font-semibold text-slate-700 dark:text-slate-300 flex items-center gap-2">Baca Selengkapnya <i data-lucide="chevron-right" class="w-4 h-4"></i></a>
                    </div>
                </article>

<article class="bg-white dark:bg-card rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition group reveal delay-100">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Yoga" class="w-full h-full object-cover transform group-hover:scale-110 transition duration-500">
                        <div class="absolute top-4 left-4 bg-white/90 dark:bg-black/70 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-primary">Hidup Sehat</div>
                    </div>
                    <div class="p-6">
                        <h3 class="font-bold text-lg mb-2 text-slate-900 dark:text-white line-clamp-2 group-hover:text-primary transition">Manfaat Olahraga Pagi Bagi Kesehatan Mental</h3>
                        <p class="text-slate-500 text-sm line-clamp-2 mb-4">Memulai hari dengan olahraga ringan dapat mengurangi stress...</p>
                        <a href="#" class="text-sm font-semibold text-slate-700 dark:text-slate-300 flex items-center gap-2">Baca Selengkapnya <i data-lucide="chevron-right" class="w-4 h-4"></i></a>
                    </div>
                </article>

<article class="bg-white dark:bg-card rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition group reveal delay-200">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1584362917165-526a968579e8?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Sleep" class="w-full h-full object-cover transform group-hover:scale-110 transition duration-500">
                        <div class="absolute top-4 left-4 bg-white/90 dark:bg-black/70 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-primary">Tips</div>
                    </div>
                    <div class="p-6">
                        <h3 class="font-bold text-lg mb-2 text-slate-900 dark:text-white line-clamp-2 group-hover:text-primary transition">Pola Tidur yang Baik untuk Produktivitas</h3>
                        <p class="text-slate-500 text-sm line-clamp-2 mb-4">Kurang tidur dapat mempengaruhi kinerja otak dan fokus anda...</p>
                        <a href="#" class="text-sm font-semibold text-slate-700 dark:text-slate-300 flex items-center gap-2">Baca Selengkapnya <i data-lucide="chevron-right" class="w-4 h-4"></i></a>
                    </div>
                </article>

<article class="bg-white dark:bg-card rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition group reveal delay-300">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1505576399279-565b52d4ac71?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Hospital" class="w-full h-full object-cover transform group-hover:scale-110 transition duration-500">
                        <div class="absolute top-4 left-4 bg-white/90 dark:bg-black/70 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-primary">Info Medis</div>
                    </div>
                    <div class="p-6">
                        <h3 class="font-bold text-lg mb-2 text-slate-900 dark:text-white line-clamp-2 group-hover:text-primary transition">Kapan Harus Melakukan Medical Check-Up?</h3>
                        <p class="text-slate-500 text-sm line-clamp-2 mb-4">Pentingnya deteksi dini penyakit melalui pemeriksaan rutin...</p>
                        <a href="#" class="text-sm font-semibold text-slate-700 dark:text-slate-300 flex items-center gap-2">Baca Selengkapnya <i data-lucide="chevron-right" class="w-4 h-4"></i></a>
                    </div>
                </article>
            </div>
        </div>
    </section>

<section class="py-20 bg-primary bg-opacity-5 dark:bg-opacity-5 reveal">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-3xl font-bold text-center mb-12 text-slate-900 dark:text-white">Apa Kata Mereka?</h2>
            <div class="grid md:grid-cols-3 gap-8">
                
                <div class="bg-white dark:bg-card p-6 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800 relative">
                    <i data-lucide="quote" class="w-10 h-10 text-primary/20 absolute top-4 right-4"></i>
                    <div class="flex items-center gap-4 mb-4">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-12 h-12 rounded-full">
                        <div>
                            <h4 class="font-bold text-slate-900 dark:text-white">Rina Susanti</h4>
                            <p class="text-xs text-slate-500">Ibu Rumah Tangga</p>
                        </div>
                    </div>
                    <p class="text-slate-600 dark:text-slate-300 italic">"Sangat terbantu dengan layanan chat dokter. Responnya cepat dan penjelasannya sangat detail. Obat langsung diantar ke rumah."</p>
                </div>

<div class="bg-white dark:bg-card p-6 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800 relative">
                    <i data-lucide="quote" class="w-10 h-10 text-primary/20 absolute top-4 right-4"></i>
                    <div class="flex items-center gap-4 mb-4">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full">
                        <div>
                            <h4 class="font-bold text-slate-900 dark:text-white">Dimas Pratama</h4>
                            <p class="text-xs text-slate-500">Karyawan Swasta</p>
                        </div>
                    </div>
                    <p class="text-slate-600 dark:text-slate-300 italic">"Aplikasi health & lifestyle terbaik. Fitur booking janji RS-nya sangat efisien, tidak perlu antri lama di rumah sakit lagi."</p>
                </div>

<div class="bg-white dark:bg-card p-6 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800 relative">
                    <i data-lucide="quote" class="w-10 h-10 text-primary/20 absolute top-4 right-4"></i>
                    <div class="flex items-center gap-4 mb-4">
                        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-12 h-12 rounded-full">
                        <div>
                            <h4 class="font-bold text-slate-900 dark:text-white">Siti Nurhaliza</h4>
                            <p class="text-xs text-slate-500">Mahasiswi</p>
                        </div>
                    </div>
                    <p class="text-slate-600 dark:text-slate-300 italic">"Artikel kesehatannya sangat informatif dan terpercaya. Tampilannya juga bersih dan mudah digunakan."</p>
                </div>
            </div>
        </div>
    </section>

<footer class="bg-slate-50 dark:bg-[#0b1120] pt-16 pb-8 border-t border-slate-200 dark:border-slate-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
                
                <div>
                    <div class="flex items-center gap-2 mb-6">
                        <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white">
                            <i data-lucide="heart-pulse" class="w-5 h-5"></i>
                        </div>
                        <span class="text-xl font-bold text-slate-900 dark:text-white">HealthLife</span>
                    </div>
                    <p class="text-slate-500 dark:text-slate-400 mb-6">Partner kesehatan terpercaya keluarga Anda. Melayani dengan hati, didukung teknologi terkini.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-white dark:bg-card flex items-center justify-center text-slate-500 hover:text-primary hover:shadow-md transition border border-slate-100 dark:border-slate-700"><i data-lucide="instagram" class="w-5 h-5"></i></a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white dark:bg-card flex items-center justify-center text-slate-500 hover:text-primary hover:shadow-md transition border border-slate-100 dark:border-slate-700"><i data-lucide="facebook" class="w-5 h-5"></i></a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white dark:bg-card flex items-center justify-center text-slate-500 hover:text-primary hover:shadow-md transition border border-slate-100 dark:border-slate-700"><i data-lucide="twitter" class="w-5 h-5"></i></a>
                    </div>
                </div>

<div>
                    <h4 class="font-bold text-slate-900 dark:text-white mb-6">Layanan</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-slate-500 dark:text-slate-400 hover:text-primary transition">Chat Dokter</a></li>
                        <li><a href="#" class="text-slate-500 dark:text-slate-400 hover:text-primary transition">Toko Obat</a></li>
                        <li><a href="#" class="text-slate-500 dark:text-slate-400 hover:text-primary transition">Buat Janji RS</a></li>
                        <li><a href="#" class="text-slate-500 dark:text-slate-400 hover:text-primary transition">Cek Lab</a></li>
                    </ul>
                </div>

<div>
                    <h4 class="font-bold text-slate-900 dark:text-white mb-6">Perusahaan</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-slate-500 dark:text-slate-400 hover:text-primary transition">Tentang Kami</a></li>
                        <li><a href="#" class="text-slate-500 dark:text-slate-400 hover:text-primary transition">Karir</a></li>
                        <li><a href="#" class="text-slate-500 dark:text-slate-400 hover:text-primary transition">Kebijakan Privasi</a></li>
                        <li><a href="#" class="text-slate-500 dark:text-slate-400 hover:text-primary transition">Syarat & Ketentuan</a></li>
                    </ul>
                </div>

<div>
                    <h4 class="font-bold text-slate-900 dark:text-white mb-6">Hubungi Kami</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start gap-3 text-slate-500 dark:text-slate-400">
                            <i data-lucide="map-pin" class="w-5 h-5 text-primary flex-shrink-0"></i>
                            <span>Jl. Sudirman No. 88, Jakarta Selatan, Indonesia</span>
                        </li>
                        <li class="flex items-center gap-3 text-slate-500 dark:text-slate-400">
                            <i data-lucide="phone" class="w-5 h-5 text-primary flex-shrink-0"></i>
                            <span>+62 21 555 0123</span>
                        </li>
                        <li class="flex items-center gap-3 text-slate-500 dark:text-slate-400">
                            <i data-lucide="mail" class="w-5 h-5 text-primary flex-shrink-0"></i>
                            <span>support@healthlife.com</span>
                        </li>
                    </ul>
                </div>
            </div>

<div class="border-t border-slate-200 dark:border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <p class="text-slate-500 dark:text-slate-400 text-sm">© 2023 HealthLife. All rights reserved.</p>
                <div class="flex gap-4">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Google_Play_Store_badge_EN.svg/1200px-Google_Play_Store_badge_EN.svg.png" class="h-10 cursor-pointer" alt="Play Store">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Download_on_the_App_Store_Badge.svg/2560px-Download_on_the_App_Store_Badge.svg.png" class="h-10 cursor-pointer" alt="App Store">
                </div>
            </div>
        </div>
    </footer>

<script>
        // Initialize Icons
        lucide.createIcons();

// Mobile Menu Logic
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const closeMenuBtn = document.getElementById('close-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        const overlay = document.getElementById('overlay');
        const mobileLinks = document.querySelectorAll('.mobile-link');

mobileMenuBtn.addEventListener('click', toggleMenu);
        closeMenuBtn.addEventListener('click', toggleMenu);
        overlay.addEventListener('click', toggleMenu);
        
        // Close menu when link clicked
        mobileLinks.forEach(link => {
            link.addEventListener('click', toggleMenu);
        });

// Dark Mode Logic
        const themeToggles = document.querySelectorAll('#theme-toggle, #theme-toggle-mobile');
        
        // Check local storage or system preference
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }

themeToggles.forEach(btn => {
            btn.addEventListener('click', () => {
                document.documentElement.classList.toggle('dark');
                if (document.documentElement.classList.contains('dark')) {
                    localStorage.theme = 'dark';
                } else {
                    localStorage.theme = 'light';
                }
            });
        });

// Navbar Scroll Effect
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 20) {
                navbar.classList.add('shadow-md');
            } else {
                navbar.classList.remove('shadow-md');
            }
        });

// Scroll Animation (Intersection Observer)
        const observerOptions = {
            threshold: 0.1,
            rootMargin: "0px 0px -50px 0px"
        };

document.querySelectorAll('.reveal').forEach(el => {
            observer.observe(el);
        });
    </script>
</body>
</html>

Related Examples

Organize your work, master your flow
Organize your work, master your flow

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

124
Learn Confidently with Rabbil Hasan

Author:
Tanvir Hasan Bappy (Tanvir)

4 months ago

310
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

15k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

10 months ago

432
Simple app landing page

Author:
Prajwal Hallale

3 years ago

9.2k
Eduplay
Turn screen time into fun learning time

Author:
Alif Bima Pradana

19 hours ago

1
side bar
html css

Author:
Hacker Development

10 months ago

1.1k
Landing page
g2.5, neomorphism

Author:
Akram Khan

8 months ago

1.2k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.1k
Animated Coming Soon Page 1
animated coming soon landing page

Author:
81

9 months ago

800
ServerHub Interface

Author:
МОЙДОЫР

4 months ago

778
super cube
complex landing page for super cube created by salvator

Author:
Baraka Salvator

9 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components