Home
Alif Bima Pradana
Landing page EVDesign

Landing page EVDesign

Website landing page EVDESIGN

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

Landing Page

Author Alif Bima Pradana

Fork Fullscreen

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>EVDesign — Visual Merek Anda</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:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300&display=swap" rel="stylesheet" />
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#fc1919',
          },
          fontFamily: {
            jakarta: ['"Plus Jakarta Sans"', 'sans-serif'],
          },
        }
      }
    }
  </script>
  <style>
    * { font-family: 'Plus Jakarta Sans', sans-serif; }

html { scroll-behavior: smooth; }

.nav-link {
      position: relative;
      color: #374151;
      font-weight: 500;
      transition: color 0.3s ease;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: #fc1919;
      transition: width 0.3s ease;
    }
    .nav-link:hover { color: #fc1919; }
    .nav-link:hover::after { width: 100%; }

.btn-primary {
      background: #fc1919;
      color: white;
      padding: 0.625rem 1.5rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.875rem;
      transition: all 0.3s ease;
      display: inline-block;
    }
    .btn-primary:hover {
      background: #d90000;
      box-shadow: 0 8px 20px rgba(252,25,25,0.35);
      transform: translateY(-1px);
    }

.btn-outline {
      border: 1.5px solid #d1d5db;
      color: #374151;
      padding: 0.625rem 1.5rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.875rem;
      transition: all 0.3s ease;
      display: inline-block;
      background: transparent;
    }
    .btn-outline:hover {
      border-color: #fc1919;
      color: #fc1919;
      transform: translateY(-1px);
    }

.service-card {
      background: #fff;
      border-radius: 16px;
      padding: 2rem;
      box-shadow: 0 2px 20px rgba(0,0,0,0.06);
      border: 1px solid #f3f4f6;
      transition: all 0.3s ease;
    }
    .service-card:hover {
      box-shadow: 0 12px 40px rgba(0,0,0,0.1);
      transform: translateY(-4px);
    }
    .service-card:hover .icon-box {
      background: #fc1919;
      color: white;
    }

.icon-box {
      width: 52px;
      height: 52px;
      background: #fff5f5;
      color: #fc1919;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      margin-bottom: 1.25rem;
    }

.section-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #fc1919;
      margin-bottom: 1rem;
    }
    .section-label::before {
      content: '';
      display: block;
      width: 24px;
      height: 2px;
      background: #fc1919;
      border-radius: 2px;
    }

.portfolio-item {
      border-radius: 12px;
      overflow: hidden;
      background: #f3f4f6;
      aspect-ratio: 4/3;
      position: relative;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .portfolio-item:hover { transform: scale(1.02); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
    .portfolio-overlay {
      position: absolute;
      inset: 0;
      background: rgba(252,25,25,0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .portfolio-item:hover .portfolio-overlay { opacity: 1; }

.placeholder-img {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #9ca3af;
    }

.contact-input {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1.5px solid #e5e7eb;
      border-radius: 8px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 0.875rem;
      color: #111827;
      transition: border-color 0.3s ease;
      outline: none;
      background: #fff;
    }
    .contact-input:focus { border-color: #fc1919; box-shadow: 0 0 0 3px rgba(252,25,25,0.1); }
    .contact-input::placeholder { color: #9ca3af; }

.mobile-menu {
      display: none;
      position: fixed;
      top: 64px;
      left: 0;
      right: 0;
      background: white;
      border-bottom: 1px solid #f3f4f6;
      padding: 1.5rem;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
      z-index: 40;
    }
    .mobile-menu.open { display: flex; flex-direction: column; gap: 1rem; }

.hero-placeholder {
      width: 100%;
      height: 100%;
      min-height: 400px;
      background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 50%, #e5e7eb 100%);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .hero-placeholder::before {
      content: '';
      position: absolute;
      width: 200px;
      height: 200px;
      background: rgba(252,25,25,0.06);
      border-radius: 50%;
      top: -40px;
      right: -40px;
    }
    .hero-placeholder::after {
      content: '';
      position: absolute;
      width: 120px;
      height: 120px;
      background: rgba(252,25,25,0.08);
      border-radius: 50%;
      bottom: 30px;
      left: 20px;
    }

.stat-card {
      text-align: center;
      padding: 1.5rem;
    }
    .stat-number {
      font-size: 2.25rem;
      font-weight: 800;
      color: #111827;
      line-height: 1;
    }
    .stat-number span { color: #fc1919; }

@keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .fade-up { animation: fadeUp 0.7s ease forwards; }
    .delay-1 { animation-delay: 0.1s; opacity: 0; }
    .delay-2 { animation-delay: 0.2s; opacity: 0; }
    .delay-3 { animation-delay: 0.35s; opacity: 0; }
    .delay-4 { animation-delay: 0.5s; opacity: 0; }
  </style>
</head>
<body class="bg-white text-gray-900">

<nav id="navbar" class="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100 transition-all duration-300">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        
        <a href="#" class="flex items-center gap-2">
          <span class="text-xl font-extrabold tracking-tight text-gray-900">EV<span style="color:#fc1919">Design</span></span>
        </a>

<div class="hidden md:flex items-center gap-8">
          <a href="#" class="nav-link text-sm">Home</a>
          <a href="#portfolio" class="nav-link text-sm">Portofolio</a>
          <a href="#services" class="nav-link text-sm">Layanan</a>
          <a href="#about" class="nav-link text-sm">Tentang</a>
          <a href="#contact" class="nav-link text-sm">Kontak</a>
        </div>

<div class="flex items-center gap-4">
          <a href="#contact" class="hidden md:inline-block btn-primary">Get a Quote</a>
          
          <button id="menuToggle" class="md:hidden p-2 text-gray-600 hover:text-primary transition-colors">
            <iconify-icon id="menuIcon" icon="lucide:menu" width="22"></iconify-icon>
          </button>
        </div>
      </div>
    </div>

<div id="mobileMenu" class="mobile-menu">
      <a href="#" class="nav-link text-sm">Home</a>
      <a href="#portfolio" class="nav-link text-sm">Portofolio</a>
      <a href="#services" class="nav-link text-sm">Layanan</a>
      <a href="#about" class="nav-link text-sm">Tentang</a>
      <a href="#contact" class="nav-link text-sm">Kontak</a>
      <a href="#contact" class="btn-primary text-center mt-2">Get a Quote</a>
    </div>
  </nav>

<section class="max-w-7xl mx-auto px-6 lg:px-8 py-20 lg:py-28">
    <div class="grid lg:grid-cols-2 gap-16 items-center">
      
      <div>
        <div class="section-label fade-up">Studio Kreatif</div>
        <h1 class="text-4xl lg:text-6xl font-extrabold leading-tight text-gray-900 mb-6 fade-up delay-1">
          EVDesign: Wujudkan<br/><span style="color:#fc1919">Visual Merek</span> Anda
        </h1>
        <p class="text-gray-500 text-lg leading-relaxed mb-10 max-w-lg fade-up delay-2">
          Kami adalah mitra kreatif Anda dalam desain grafis, branding, dan komunikasi visual yang elegan dan berdampak.
        </p>
        <div class="flex flex-wrap gap-4 fade-up delay-3">
          <a href="#portfolio" class="btn-primary text-sm px-6 py-3">Lihat Portofolio</a>
          <a href="#contact" class="btn-outline text-sm px-6 py-3">Hubungi Kami</a>
        </div>
        
        <div class="mt-14 flex gap-10 fade-up delay-4">
          <div class="stat-card pl-0">
            <div class="stat-number">120<span>+</span></div>
            <div class="text-xs text-gray-400 font-medium mt-1 uppercase tracking-wider">Proyek Selesai</div>
          </div>
          <div class="w-px bg-gray-100"></div>
          <div class="stat-card">
            <div class="stat-number">85<span>+</span></div>
            <div class="text-xs text-gray-400 font-medium mt-1 uppercase tracking-wider">Klien Puas</div>
          </div>
          <div class="w-px bg-gray-100"></div>
          <div class="stat-card">
            <div class="stat-number">7<span>+</span></div>
            <div class="text-xs text-gray-400 font-medium mt-1 uppercase tracking-wider">Tahun Pengalaman</div>
          </div>
        </div>
      </div>
      
      <div class="fade-up delay-2">
        <div class="hero-placeholder shadow-2xl" style="box-shadow: 0 32px 80px rgba(0,0,0,0.1);">
          <div class="relative z-10 flex flex-col items-center gap-3 text-gray-300">
            <iconify-icon icon="lucide:image" width="64" style="color:#d1d5db"></iconify-icon>
            <span class="text-sm font-medium" style="color:#d1d5db">Hero Visual</span>
          </div>
          
          <div class="absolute bottom-6 left-6 bg-white rounded-xl px-4 py-3 shadow-lg flex items-center gap-3 z-10">
            <div class="w-8 h-8 rounded-full flex items-center justify-center" style="background:#fff5f5">
              <iconify-icon icon="lucide:star" width="16" style="color:#fc1919"></iconify-icon>
            </div>
            <div>
              <div class="text-xs font-bold text-gray-900">Top Rated</div>
              <div class="text-xs text-gray-400">Design Studio</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

<section id="services" class="py-20 lg:py-28 bg-gray-50/60">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
      <div class="text-center mb-16">
        <div class="section-label justify-center">Apa yang Kami Tawarkan</div>
        <h2 class="text-3xl lg:text-4xl font-extrabold text-gray-900 mb-4">Layanan Unggulan</h2>
        <div class="w-12 h-1 rounded-full mx-auto" style="background:#fc1919"></div>
        <p class="text-gray-400 mt-5 max-w-md mx-auto text-sm leading-relaxed">Setiap layanan kami dirancang untuk memberikan dampak nyata bagi bisnis dan merek Anda.</p>
      </div>

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        
        <div class="service-card">
          <div class="icon-box">
            <iconify-icon icon="lucide:sparkles" width="24"></iconify-icon>
          </div>
          <h3 class="font-bold text-gray-900 text-lg mb-2">Brand Identity</h3>
          <p class="text-gray-500 text-sm leading-relaxed">Membangun identitas merek yang kuat, konsisten, dan mudah diingat—dari logo hingga panduan gaya visual.</p>
        </div>
        
        <div class="service-card">
          <div class="icon-box">
            <iconify-icon icon="lucide:pen-tool" width="24"></iconify-icon>
          </div>
          <h3 class="font-bold text-gray-900 text-lg mb-2">Desain Grafis</h3>
          <p class="text-gray-500 text-sm leading-relaxed">Materi visual berkualitas tinggi untuk kebutuhan promosi, media sosial, kemasan, dan publikasi cetak.</p>
        </div>
        
        <div class="service-card">
          <div class="icon-box">
            <iconify-icon icon="lucide:monitor" width="24"></iconify-icon>
          </div>
          <h3 class="font-bold text-gray-900 text-lg mb-2">Web Design</h3>
          <p class="text-gray-500 text-sm leading-relaxed">Desain antarmuka website yang elegan, intuitif, dan berpusat pada pengalaman pengguna untuk hasil konversi terbaik.</p>
        </div>
        
        <div class="service-card">
          <div class="icon-box">
            <iconify-icon icon="lucide:layout" width="24"></iconify-icon>
          </div>
          <h3 class="font-bold text-gray-900 text-lg mb-2">UI/UX Design</h3>
          <p class="text-gray-500 text-sm leading-relaxed">Perancangan antarmuka produk digital yang fungsional, estetis, dan memberikan pengalaman pengguna yang menyenangkan.</p>
        </div>
        
        <div class="service-card">
          <div class="icon-box">
            <iconify-icon icon="lucide:camera" width="24"></iconify-icon>
          </div>
          <h3 class="font-bold text-gray-900 text-lg mb-2">Foto & Video</h3>
          <p class="text-gray-500 text-sm leading-relaxed">Produksi konten visual premium—foto produk, video promosi, dan motion graphic untuk brand storytelling yang kuat.</p>
        </div>
        
        <div class="service-card">
          <div class="icon-box">
            <iconify-icon icon="lucide:megaphone" width="24"></iconify-icon>
          </div>
          <h3 class="font-bold text-gray-900 text-lg mb-2">Komunikasi Pemasaran</h3>
          <p class="text-gray-500 text-sm leading-relaxed">Strategi dan eksekusi visual untuk kampanye pemasaran yang relevan, menarik, dan tepat sasaran.</p>
        </div>
      </div>
    </div>
  </section>

<section id="about" class="py-20 lg:py-28">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
      <div class="grid lg:grid-cols-2 gap-16 items-center">
        
        <div class="order-2 lg:order-1">
          <div class="relative">
            <div class="hero-placeholder rounded-2xl" style="min-height:380px; box-shadow: 0 20px 60px rgba(0,0,0,0.08);">
              <div class="relative z-10 flex flex-col items-center gap-3 text-gray-300">
                <iconify-icon icon="lucide:image" width="56" style="color:#d1d5db"></iconify-icon>
                <span class="text-sm font-medium" style="color:#d1d5db">Studio / Proses Kerja</span>
              </div>
            </div>
            
            <div class="absolute -bottom-5 -right-5 bg-white rounded-2xl p-5 shadow-xl border border-gray-50">
              <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full flex items-center justify-center" style="background:#fc1919">
                  <iconify-icon icon="lucide:award" width="18" style="color:white"></iconify-icon>
                </div>
                <div>
                  <div class="text-xs font-bold text-gray-900">Award Winning</div>
                  <div class="text-xs text-gray-400">Creative Studio</div>
                </div>
              </div>
            </div>
          </div>
        </div>

<div class="order-1 lg:order-2">
          <div class="section-label">Siapa Kami</div>
          <h2 class="text-3xl lg:text-4xl font-extrabold text-gray-900 mb-6 leading-tight">Tentang EVDesign</h2>
          <p class="text-gray-500 leading-relaxed mb-5 text-sm">
            EVDesign adalah studio desain kreatif yang berdedikasi untuk menghadirkan solusi visual berkelas tinggi. Kami percaya bahwa setiap merek memiliki cerita unik yang layak diceritakan dengan indah—melalui tipografi yang presisi, palet warna yang kaya makna, dan komposisi yang tak terlupakan.
          </p>
          <p class="text-gray-500 leading-relaxed mb-8 text-sm">
            Filosofi kami sederhana: setiap detail adalah kesempatan untuk menciptakan kesan. Dari sketsa pertama hingga output final, kami memastikan setiap elemen visual memancarkan kualitas, kemewahan, dan keeleganan yang Anda bayangkan untuk merek Anda.
          </p>
          <div class="flex flex-col gap-4 mb-10">
            <div class="flex items-start gap-3">
              <div class="w-5 h-5 rounded-full flex-shrink-0 flex items-center justify-center mt-0.5" style="background:#fff5f5">
                <iconify-icon icon="lucide:check" width="12" style="color:#fc1919"></iconify-icon>
              </div>
              <p class="text-sm text-gray-600">Pendekatan berbasis strategi merek, bukan sekadar estetika.</p>
            </div>
            <div class="flex items-start gap-3">
              <div class="w-5 h-5 rounded-full flex-shrink-0 flex items-center justify-center mt-0.5" style="background:#fff5f5">
                <iconify-icon icon="lucide:check" width="12" style="color:#fc1919"></iconify-icon>
              </div>
              <p class="text-sm text-gray-600">Tim desainer berpengalaman dengan portofolio global.</p>
            </div>
            <div class="flex items-start gap-3">
              <div class="w-5 h-5 rounded-full flex-shrink-0 flex items-center justify-center mt-0.5" style="background:#fff5f5">
                <iconify-icon icon="lucide:check" width="12" style="color:#fc1919"></iconify-icon>
              </div>
              <p class="text-sm text-gray-600">Proses kolaboratif yang transparan dan tepat waktu.</p>
            </div>
          </div>
          <a href="#contact" class="btn-primary px-7 py-3">Ceritakan Proyek Anda &rarr;</a>
        </div>
      </div>
    </div>
  </section>

<section id="portfolio" class="py-20 lg:py-28 bg-gray-50/60">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
      <div class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
        <div>
          <div class="section-label">Hasil Kerja Terbaik</div>
          <h2 class="text-3xl lg:text-4xl font-extrabold text-gray-900">Karya Terpilih</h2>
        </div>
        <a href="#" class="btn-outline text-sm px-5 py-2.5 self-start md:self-auto whitespace-nowrap">Lihat Semua</a>
      </div>

<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-5">
        
        <div class="portfolio-item" style="aspect-ratio:3/4;">
          <div class="placeholder-img">
            <iconify-icon icon="lucide:image" width="36" style="color:#c4c4c4"></iconify-icon>
          </div>
          <div class="portfolio-overlay">
            <div class="text-center text-white">
              <iconify-icon icon="lucide:external-link" width="24" class="mb-2"></iconify-icon>
              <div class="text-sm font-bold">Brand Identity</div>
              <div class="text-xs opacity-75">Kopi Nusantara</div>
            </div>
          </div>
        </div>
        
        <div class="portfolio-item lg:col-span-2" style="aspect-ratio:16/9;">
          <div class="placeholder-img">
            <iconify-icon icon="lucide:image" width="40" style="color:#c4c4c4"></iconify-icon>
          </div>
          <div class="portfolio-overlay">
            <div class="text-center text-white">
              <iconify-icon icon="lucide:external-link" width="24" class="mb-2"></iconify-icon>
              <div class="text-sm font-bold">Web Design</div>
              <div class="text-xs opacity-75">Luxe Fashion House</div>
            </div>
          </div>
        </div>
        
        <div class="portfolio-item" style="aspect-ratio:3/4;">
          <div class="placeholder-img">
            <iconify-icon icon="lucide:image" width="36" style="color:#c4c4c4"></iconify-icon>
          </div>
          <div class="portfolio-overlay">
            <div class="text-center text-white">
              <iconify-icon icon="lucide:external-link" width="24" class="mb-2"></iconify-icon>
              <div class="text-sm font-bold">Packaging</div>
              <div class="text-xs opacity-75">Herbal Co.</div>
            </div>
          </div>
        </div>
        
        <div class="portfolio-item md:col-span-2">
          <div class="placeholder-img">
            <iconify-icon icon="lucide:image" width="36" style="color:#c4c4c4"></iconify-icon>
          </div>
          <div class="portfolio-overlay">
            <div class="text-center text-white">
              <iconify-icon icon="lucide:external-link" width="24" class="mb-2"></iconify-icon>
              <div class="text-sm font-bold">Social Media Kit</div>
              <div class="text-xs opacity-75">TechStart ID</div>
            </div>
          </div>
        </div>
        
        <div class="portfolio-item md:col-span-2">
          <div class="placeholder-img">
            <iconify-icon icon="lucide:image" width="36" style="color:#c4c4c4"></iconify-icon>
          </div>
          <div class="portfolio-overlay">
            <div class="text-center text-white">
              <iconify-icon icon="lucide:external-link" width="24" class="mb-2"></iconify-icon>
              <div class="text-sm font-bold">Annual Report</div>
              <div class="text-xs opacity-75">Gala Investama</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

<section id="contact" class="py-20 lg:py-28">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
      <div class="text-center mb-16">
        <div class="section-label justify-center">Berkolaborasi</div>
        <h2 class="text-3xl lg:text-4xl font-extrabold text-gray-900 mb-4">Mulai Proyek Anda</h2>
        <div class="w-12 h-1 rounded-full mx-auto" style="background:#fc1919"></div>
        <p class="text-gray-400 mt-5 max-w-sm mx-auto text-sm">Ceritakan visi Anda kepada kami, dan bersama-sama kita akan mewujudkannya menjadi realitas visual yang menakjubkan.</p>
      </div>

<div class="grid lg:grid-cols-2 gap-12 items-start">
        
        <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100">
          <h3 class="font-bold text-gray-900 text-lg mb-2">Hubungi Kami</h3>
          <p class="text-gray-400 text-sm mb-8">Tim kami siap membantu Anda dalam setiap langkah proses kreatif.</p>

<div class="flex flex-col gap-6">
            <div class="flex items-start gap-4">
              <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" style="background:#fff5f5">
                <iconify-icon icon="lucide:mail" width="18" style="color:#fc1919"></iconify-icon>
              </div>
              <div>
                <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Email</div>
                <a href="mailto:hello@evdesign.id" class="text-sm font-semibold text-gray-800 hover:text-red-500 transition-colors">hello@evdesign.id</a>
              </div>
            </div>
            <div class="flex items-start gap-4">
              <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" style="background:#fff5f5">
                <iconify-icon icon="lucide:phone" width="18" style="color:#fc1919"></iconify-icon>
              </div>
              <div>
                <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Telepon</div>
                <a href="tel:+6281234567890" class="text-sm font-semibold text-gray-800 hover:text-red-500 transition-colors">+62 812 3456 7890</a>
              </div>
            </div>
            <div class="flex items-start gap-4">
              <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" style="background:#fff5f5">
                <iconify-icon icon="lucide:map-pin" width="18" style="color:#fc1919"></iconify-icon>
              </div>
              <div>
                <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Alamat</div>
                <p class="text-sm font-semibold text-gray-800">Jl. Raya Kemang No. 21,<br/>Jakarta Selatan, 12730</p>
              </div>
            </div>
          </div>

<div class="mt-10 pt-8 border-t border-gray-200">
            <div class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Jam Operasional</div>
            <div class="flex justify-between text-sm mb-2">
              <span class="text-gray-600">Senin – Jumat</span>
              <span class="font-semibold text-gray-900">09.00 – 18.00</span>
            </div>
            <div class="flex justify-between text-sm">
              <span class="text-gray-600">Sabtu</span>
              <span class="font-semibold text-gray-900">09.00 – 14.00</span>
            </div>
          </div>
        </div>

<div>
          <div class="flex flex-col gap-5">
            <div class="grid md:grid-cols-2 gap-5">
              <div>
                <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Nama Lengkap</label>
                <input type="text" class="contact-input" placeholder="Nama Anda" />
              </div>
              <div>
                <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Email</label>
                <input type="email" class="contact-input" placeholder="email@anda.com" />
              </div>
            </div>
            <div>
              <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Subjek</label>
              <input type="text" class="contact-input" placeholder="Tentang proyek Anda..." />
            </div>
            <div>
              <label class="block text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Pesan</label>
              <textarea class="contact-input" rows="5" placeholder="Ceritakan lebih detail tentang kebutuhan desain Anda..."></textarea>
            </div>
            <button class="btn-primary w-full py-3.5 text-center font-bold flex items-center justify-center gap-2" style="font-size:0.9rem;">
              Kirim Pesan
              <iconify-icon icon="lucide:arrow-right" width="16"></iconify-icon>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>

<footer class="bg-gray-50 border-t border-gray-100">
    <div class="max-w-7xl mx-auto px-6 lg:px-8 py-12">
      <div class="flex flex-col md:flex-row items-center justify-between gap-8">
        
        <div class="text-center md:text-left">
          <a href="#" class="text-xl font-extrabold tracking-tight text-gray-900">EV<span style="color:#fc1919">Design</span></a>
          <p class="text-xs text-gray-400 mt-2">© 2025 EVDesign. All rights reserved.</p>
        </div>

<div class="flex flex-wrap items-center justify-center gap-6 text-xs text-gray-400 font-medium">
          <a href="#" class="hover:text-gray-700 transition-colors">Home</a>
          <a href="#services" class="hover:text-gray-700 transition-colors">Layanan</a>
          <a href="#portfolio" class="hover:text-gray-700 transition-colors">Portofolio</a>
          <a href="#about" class="hover:text-gray-700 transition-colors">Tentang</a>
          <a href="#contact" class="hover:text-gray-700 transition-colors">Kontak</a>
        </div>

<div class="flex items-center gap-3">
          <a href="#" class="w-9 h-9 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:border-red-500 hover:text-red-500 transition-all duration-300 shadow-sm" aria-label="Instagram">
            <iconify-icon icon="mdi:instagram" width="18"></iconify-icon>
          </a>
          <a href="#" class="w-9 h-9 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:border-red-500 hover:text-red-500 transition-all duration-300 shadow-sm" aria-label="Behance">
            <iconify-icon icon="mdi:behance" width="18"></iconify-icon>
          </a>
          <a href="#" class="w-9 h-9 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:border-red-500 hover:text-red-500 transition-all duration-300 shadow-sm" aria-label="LinkedIn">
            <iconify-icon icon="mdi:linkedin" width="18"></iconify-icon>
          </a>
          <a href="#" class="w-9 h-9 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:border-red-500 hover:text-red-500 transition-all duration-300 shadow-sm" aria-label="Dribbble">
            <iconify-icon icon="mdi:dribbble" width="18"></iconify-icon>
          </a>
        </div>
      </div>
    </div>
  </footer>

menuToggle.addEventListener('click', () => {
      menuOpen = !menuOpen;
      mobileMenu.classList.toggle('open', menuOpen);
      menuIcon.setAttribute('icon', menuOpen ? 'lucide:x' : 'lucide:menu');
    });

// Close mobile menu on link click
    mobileMenu.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        menuOpen = false;
        mobileMenu.classList.remove('open');
        menuIcon.setAttribute('icon', 'lucide:menu');
      });
    });

// Navbar shadow on scroll
    window.addEventListener('scroll', () => {
      const navbar = document.getElementById('navbar');
      if (window.scrollY > 10) {
        navbar.style.boxShadow = '0 2px 24px rgba(0,0,0,0.07)';
      } else {
        navbar.style.boxShadow = 'none';
      }
    });

// Intersection Observer for scroll animations
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.style.animation = 'fadeUp 0.7s ease forwards';
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.1 });

document.querySelectorAll('.service-card, .portfolio-item, .stat-card').forEach(el => {
      el.style.opacity = '0';
      observer.observe(el);
    });
  </script>

</body>
</html>

Related Examples

gallary
html , css

Author:
Hacker Development

10 months ago

664
Call to Action
CTA with Dark and Shadow colors

Author:
KULDEEP

8 months ago

1.2k
Learn Confidently with Rabbil Hasan

Author:
Tanvir Hasan Bappy (Tanvir)

4 months ago

309
landi page template

Author:
Raul antonio de la cruz hernandez

2 months ago

257
PIXEL.DEV | Portfolio
Personal portofolio

Author:
Alif Bima Pradana

19 hours ago

5
LuxeSaaS Landing Page
You can simply copy the code above into the index.html file and open it in a browser. All assets (Tailwind, Fonts, Icons) are loaded from the CDN, so no additional installation is required.

Author:
Alif Bima Pradana

3 weeks ago

154
Portfolio Hero Section 5

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

2.2k
Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

Author:
KULDEEP

8 months ago

927
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

8 months ago

1.9k
Portfolio Hero Section 4

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.1k
walve style by omerlink
walve style by omerlink

Author:
Omer fils ELENGA

1 month ago

130
Chinese

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

429

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components