InspireX: Tema web moderno (Tailwind, vídeo, galería)

1,366 Metehan

Abrir en el editor Publica tu código

InspireX: Tema web moderno (Tailwind, vídeo, galería)

Recomendado

26 August 2025

Plantilla HTML para sitio web de películas

18 November 2024

Plantilla de sitio web de portafolio moderno

17 January 2026

Portafolio de desarrolladores web: HTML, CSS, JavaScript, UI/UX

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>InspireX — Modern & İlham Verici Tema</title>
  <meta name="description" content="Profesyonel, gerçekçi ve ilham verici modern web tasarım. Mobil uyumlu menü, video bölümü, fotoğraf galerisi, blog ve daha fazlası." />
  <meta name="theme-color" content="#0ea5e9" />

<script src="https://cdn.tailwindcss.com"></script>
  <script>
    // Tailwind config (isteğe bağlı renk ve font ayarları)
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            display: ['Inter', 'ui-sans-serif', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial'],
          },
          colors: {
            brand: {
              50: '#ecfeff',
              100: '#cffafe',
              200: '#a5f3fc',
              300: '#67e8f9',
              400: '#22d3ee',
              500: '#06b6d4',
              600: '#0891b2',
              700: '#0e7490',
              800: '#155e75',
              900: '#164e63'
            }
          },
          boxShadow: {
            glow: '0 10px 30px -10px rgba(34,211,238,.4)'
          }
        }
      }
    }
  </script>

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='46' fill='%2306b6d4'/><text x='50' y='60' text-anchor='middle' font-size='48' fill='white'>İ</text></svg>">

/* Kenar parıltısı efekti */
    .edge-light { position: relative; }
    .edge-light::after { content: ''; position: absolute; inset: -1px; border-radius: 1.25rem; padding: 1px; background: linear-gradient(135deg, rgba(6,182,212,.35), rgba(59,130,246,.25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; }

/* Video modal scrollbar sakla (mobil uyum) */
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
  </style>
</head>
<body class="bg-slate-50 text-slate-800 font-display selection:bg-brand-200 selection:text-slate-900">
  
  <header class="sticky top-0 z-50 backdrop-blur bg-white/70 border-b border-slate-200/60">
    <div class="max-w-6xl mx-auto px-4">
      <div class="flex items-center justify-between h-16">
        <a href="#" class="flex items-center gap-2 group" aria-label="InspireX Ana Sayfa">
          <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-sky-500 text-white shadow-glow">İX</span>
          <span class="text-lg font-semibold tracking-tight group-hover:text-sky-700 transition">InspireX</span>
        </a>

<nav class="hidden md:flex items-center gap-6 text-sm">
          <a href="#features" class="hover:text-sky-700">Özellikler</a>
          <a href="#video" class="hover:text-sky-700">Videolar</a>
          <a href="#gallery" class="hover:text-sky-700">Fotoğraflar</a>
          <a href="#blog" class="hover:text-sky-700">Blog</a>
          <a href="#pricing" class="hover:text-sky-700">Fiyatlar</a>
          <a href="#contact" class="hover:text-sky-700">İletişim</a>
          <a href="#cta" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-slate-900 text-white hover:bg-slate-800 transition shadow-md">
            Hemen Başla
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
          </a>
        </nav>

<button id="menuBtn" class="md:hidden p-2 rounded-lg border border-slate-300 hover:bg-slate-100" aria-expanded="false" aria-controls="mobileMenu" aria-label="Mobil menüyü aç/kapat">
          <svg id="iconOpen" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
          <svg id="iconClose" class="h-6 w-6 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
      </div>
    </div>

<div id="mobileMenu" class="md:hidden hidden border-t border-slate-200 bg-white" role="dialog" aria-label="Mobil menü">
      <div class="max-w-6xl mx-auto px-4 py-4 grid gap-2 text-base">
        <a class="py-2" href="#features">Özellikler</a>
        <a class="py-2" href="#video">Videolar</a>
        <a class="py-2" href="#gallery">Fotoğraflar</a>
        <a class="py-2" href="#blog">Blog</a>
        <a class="py-2" href="#pricing">Fiyatlar</a>
        <a class="py-2" href="#contact">İletişim</a>
        <a class="mt-2 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-xl bg-slate-900 text-white hover:bg-slate-800 transition shadow-md" href="#cta">Hemen Başla</a>
      </div>
    </div>
  </header>

<section class="relative overflow-hidden">
    <div class="absolute inset-0 -z-10 bg-gradient-to-b from-sky-50 via-white to-white"></div>
    <div class="max-w-6xl mx-auto px-4 py-20 grid md:grid-cols-2 gap-10 items-center">
      <div data-animate>
        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium bg-brand-100 text-brand-800 ring-1 ring-brand-300/50">Yeni Nesil Tasarım</span>
        <h1 class="mt-4 text-4xl md:text-5xl font-extrabold tracking-tight leading-tight">
          Profesyonel, Gerçekçi ve <span class="bg-gradient-to-r from-sky-600 to-brand-600 bg-clip-text text-transparent">İlham Verici</span> Deneyim
        </h1>
        <p class="mt-4 text-slate-600 max-w-prose">Mobil menü, video ve fotoğraf bölümleri, modern animasyonlar ve kullanıcı odaklı akış ile zenginleştirilmiş, tamamen duyarlı bir web şablonu.</p>
        <div class="mt-6 flex flex-wrap gap-3">
          <a href="#video" class="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-sky-600 text-white hover:bg-sky-700 transition shadow-glow">
            Demoyu İzle
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
          </a>
          <a href="#features" class="inline-flex items-center gap-2 px-5 py-3 rounded-xl border border-slate-300 hover:bg-white transition">
            Özellikleri Keşfet
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
          </a>
        </div>
        <div class="mt-8 grid grid-cols-3 gap-6 text-center">
          <div class="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm" aria-label="Hızlı Yükleme">
            <p class="text-3xl font-bold">98</p>
            <p class="text-xs text-slate-500">Lighthouse Performans</p>
          </div>
          <div class="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm" aria-label="Duyarlı Tasarım">
            <p class="text-3xl font-bold">100</p>
            <p class="text-xs text-slate-500">Responsive Uyum</p>
          </div>
          <div class="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm" aria-label="Erişilebilirlik">
            <p class="text-3xl font-bold">A11y</p>
            <p class="text-xs text-slate-500">Erişilebilir Özellikler</p>
          </div>
        </div>
      </div>

<section id="features" class="py-20 bg-white">
    <div class="max-w-6xl mx-auto px-4">
      <div class="text-center max-w-2xl mx-auto mb-12" data-animate>
        <h2 class="text-3xl md:text-4xl font-bold">Sadelik + Güç = <span class="text-sky-700">Verimlilik</span></h2>
        <p class="mt-3 text-slate-600">Performanslı, erişilebilir ve sezgisel bileşenlerle modern deneyim sunun.</p>
      </div>
      <div class="grid md:grid-cols-3 gap-6">
        
        <div class="p-6 rounded-2xl border border-slate-200 bg-gradient-to-b from-white to-slate-50 shadow-sm" data-animate>
          <div class="h-12 w-12 rounded-xl bg-sky-600 text-white inline-flex items-center justify-center mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M8 5v14m8-14v14M3 19h18"/></svg>
          </div>
          <h3 class="font-semibold text-lg">Mobil Menü & Duyarlı Yapı</h3>
          <p class="mt-2 text-slate-600">Kayan mobil menü, klavye/okunabilirlik odaklı erişim öznitelikleri ve hızlı aç/kapa animasyonu.</p>
        </div>
        
        <div class="p-6 rounded-2xl border border-slate-200 bg-gradient-to-b from-white to-slate-50 shadow-sm" data-animate>
          <div class="h-12 w-12 rounded-xl bg-sky-600 text-white inline-flex items-center justify-center mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20v-6m0 0V4m0 10h8m-8 0H4"/></svg>
          </div>
          <h3 class="font-semibold text-lg">Şık Animasyonlar</h3>
          <p class="mt-2 text-slate-600">Scroll ile görünen yumuşak fade-up animasyonlar ve parıltı efektleri.</p>
        </div>
        
        <div class="p-6 rounded-2xl border border-slate-200 bg-gradient-to-b from-white to-slate-50 shadow-sm" data-animate>
          <div class="h-12 w-12 rounded-xl bg-sky-600 text-white inline-flex items-center justify-center mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V22a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H2a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.02A1.65 1.65 0 0 0 9 4.09V4a2 2 0 1 1 4 0v.09c0 .66.39 1.26 1 1.51h.02a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06c-.51.51-.66 1.25-.33 1.82.25.61.85 1 1.51 1H22a2 2 0 1 1 0 4h-.09c-.66 0-1.26.39-1.51 1Z"/></svg>
          </div>
          <h3 class="font-semibold text-lg">Medya Entegrasyonu</h3>
          <p class="mt-2 text-slate-600">Video modalı, yerel/harici video ve optimize edilebilir görsel galeri.</p>
        </div>
      </div>
    </div>
  </section>

<section id="video" class="py-20 bg-slate-50">
    <div class="max-w-6xl mx-auto px-4 grid md:grid-cols-2 gap-10 items-center">
      <div data-animate>
        <h2 class="text-3xl md:text-4xl font-bold">Videolar ile Anlatın</h2>
        <p class="mt-3 text-slate-600">Ürününüzü veya hikâyenizi güçlü bir video ile sunun. Aşağıdaki örneği tam ekran modalda izleyebilirsiniz.</p>
        <ul class="mt-6 space-y-3 text-slate-700 list-disc list-inside">
          <li>HTML5 video veya YouTube/Vimeo desteği</li>
          <li>Otomatik oran koruma (16:9)</li>
          <li>Klavye ile kapatılabilen modal</li>
        </ul>
        <div class="mt-6 flex gap-3">
          <button id="openVideo" class="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-slate-900 text-white hover:bg-slate-800 transition shadow-md">
            Videoyu Aç
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
          </button>
          <a class="inline-flex items-center gap-2 px-5 py-3 rounded-xl border border-slate-300 hover:bg-white" href="#gallery">Galeriye Git</a>
        </div>
      </div>
      <div class="relative" data-animate>
        <div class="aspect-video rounded-2xl overflow-hidden border border-slate-200 shadow-xl">
          <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1522199794611-8e68227822fd?q=80&w=1600&auto=format&fit=crop" alt="Video önizleme" />
          <button id="openVideo2" class="absolute inset-0 m-auto h-16 w-16 rounded-full bg-white/90 backdrop-blur flex items-center justify-center shadow-lg hover:scale-105 transition" aria-label="Videoyu oynat">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
          </button>
        </div>
      </div>
    </div>

<div id="videoModal" class="fixed inset-0 z-50 hidden" aria-hidden="true">
      <div class="absolute inset-0 bg-black/60"></div>
      <div class="absolute inset-0 overflow-y-auto no-scrollbar">
        <div class="min-h-full flex items-center justify-center p-6">
          <div class="relative w-full max-w-4xl">
            <button id="closeVideo" class="absolute -top-12 right-0 text-white/90 hover:text-white" aria-label="Kapat">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
            <div class="aspect-video rounded-2xl overflow-hidden shadow-2xl ring-1 ring-white/10 bg-black">
              
              <iframe id="ytFrame" class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

<section id="gallery" class="py-20 bg-white">
    <div class="max-w-6xl mx-auto px-4">
      <div class="flex items-end justify-between gap-4 mb-8" data-animate>
        <div>
          <h2 class="text-3xl md:text-4xl font-bold">Fotoğraf Galerisi</h2>
          <p class="mt-2 text-slate-600">Yüksek kaliteli görsellerle hikâyenizi güçlendirin. Görsele tıklayın, büyütüp inceleyin.</p>
        </div>
        <a href="#" class="hidden md:inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-slate-300 hover:bg-white">Tümünü Gör</a>
      </div>

<div id="lightboxModal" class="fixed inset-0 z-50 hidden">
      <div class="absolute inset-0 bg-black/70"></div>
      <div class="absolute inset-0 flex items-center justify-center p-6">
        <figure class="relative max-w-5xl w-full">
          <button id="closeLightbox" class="absolute -top-12 right-0 text-white/90 hover:text-white" aria-label="Kapat">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
          </button>
          <img id="lightboxImg" class="w-full rounded-2xl shadow-2xl ring-1 ring-white/10" src="" alt="Büyütülmüş görsel" />
          <figcaption id="lightboxCaption" class="sr-only">Büyütülmüş görsel</figcaption>
        </figure>
      </div>
    </div>
  </section>

<section class="py-20 bg-slate-50">
    <div class="max-w-6xl mx-auto px-4">
      <div class="text-center max-w-2xl mx-auto mb-12" data-animate>
        <h2 class="text-3xl md:text-4xl font-bold">Kullanıcılar Ne Diyor?</h2>
        <p class="mt-3 text-slate-600">Gerçek geri bildirimlerle güven oluşturun.</p>
      </div>
      <div class="grid md:grid-cols-3 gap-6">
        <blockquote class="p-6 rounded-2xl bg-white border border-slate-200 shadow-sm" data-animate>
          <p class="text-slate-700">“Tasarım sade ama çok güçlü. Mobil uyum harika.”</p>
          <footer class="mt-4 text-sm text-slate-500">— Elif K.</footer>
        </blockquote>
        <blockquote class="p-6 rounded-2xl bg-white border border-slate-200 shadow-sm" data-animate>
          <p class="text-slate-700">“Video ve galeri entegrasyonu tam ihtiyacımız olan şeydi.”</p>
          <footer class="mt-4 text-sm text-slate-500">— Mert A.</footer>
        </blockquote>
        <blockquote class="p-6 rounded-2xl bg-white border border-slate-200 shadow-sm" data-animate>
          <p class="text-slate-700">“Kurulum kolay, performans mükemmel.”</p>
          <footer class="mt-4 text-sm text-slate-500">— Derya S.</footer>
        </blockquote>
      </div>
    </div>
  </section>

<section id="blog" class="py-20 bg-white">
    <div class="max-w-6xl mx-auto px-4">
      <div class="flex items-end justify-between gap-4 mb-8" data-animate>
        <div>
          <h2 class="text-3xl md:text-4xl font-bold">Son Yazılar</h2>
          <p class="mt-2 text-slate-600">İçgörü, ipucu ve trendler.</p>
        </div>
        <a href="#" class="hidden md:inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-slate-300 hover:bg-white">Tüm Yazılar</a>
      </div>

<div class="grid md:grid-cols-3 gap-6">
        
        <article class="rounded-2xl border border-slate-200 bg-white overflow-hidden shadow-sm" data-animate>
          <img class="w-full aspect-video object-cover" src="https://images.unsplash.com/photo-1474631245212-32dc3c8310c6?q=80&w=1600&auto=format&fit=crop" alt="Blog görseli 1"/>
          <div class="p-6">
            <h3 class="font-semibold text-lg">Duyarlı Tasarımın Temelleri</h3>
            <p class="mt-2 text-slate-600 line-clamp-3">Farklı cihazlarda tutarlı deneyim sunmanın püf noktaları ve pratik ipuçları.</p>
            <a href="#" class="mt-4 inline-flex items-center gap-2 text-sky-700 hover:underline">Devamını Oku
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </a>
          </div>
        </article>
        
        <article class="rounded-2xl border border-slate-200 bg-white overflow-hidden shadow-sm" data-animate>
          <img class="w-full aspect-video object-cover" src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?q=80&w=1600&auto=format&fit=crop" alt="Blog görseli 2"/>
          <div class="p-6">
            <h3 class="font-semibold text-lg">Medya Yönetimi: Görsel ve Video</h3>
            <p class="mt-2 text-slate-600 line-clamp-3">Hızlı yükleme için optimizasyon, format seçimi ve erişilebilir altyazı ekleme.</p>
            <a href="#" class="mt-4 inline-flex items-center gap-2 text-sky-700 hover:underline">Devamını Oku
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </a>
          </div>
        </article>
        
        <article class="rounded-2xl border border-slate-200 bg-white overflow-hidden shadow-sm" data-animate>
          <img class="w-full aspect-video object-cover" src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?q=80&w=1600&auto=format&fit=crop" alt="Blog görseli 3"/>
          <div class="p-6">
            <h3 class="font-semibold text-lg">Kullanıcı Odaklı Arayüz İpuçları</h3>
            <p class="mt-2 text-slate-600 line-clamp-3">Net hiyerarşi, kontrast, boşluk ve etkileşim geri bildirimi nasıl kurulur?</p>
            <a href="#" class="mt-4 inline-flex items-center gap-2 text-sky-700 hover:underline">Devamını Oku
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </a>
          </div>
        </article>
      </div>
    </div>
  </section>

<section id="pricing" class="py-20 bg-slate-50">
    <div class="max-w-6xl mx-auto px-4">
      <div class="text-center max-w-2xl mx-auto mb-12" data-animate>
        <h2 class="text-3xl md:text-4xl font-bold">Şeffaf Fiyatlandırma</h2>
        <p class="mt-2 text-slate-600">İhtiyacınıza uygun planı seçin. İstediğiniz zaman yükseltin.</p>
      </div>
      <div class="grid md:grid-cols-3 gap-6">
        
        <div class="p-6 rounded-2xl bg-white border border-slate-200 shadow-sm" data-animate>
          <h3 class="font-semibold text-lg">Başlangıç</h3>
          <p class="mt-1 text-slate-600">Kişisel projeler için</p>
          <p class="mt-4 text-3xl font-bold">₺0<span class="text-base text-slate-500">/ay</span></p>
          <ul class="mt-4 space-y-2 text-sm text-slate-600">
            <li>Mobil menü</li>
            <li>Video modal</li>
            <li>Foto galeri</li>
          </ul>
          <a href="#cta" class="mt-6 inline-flex justify-center w-full px-4 py-2 rounded-xl border border-slate-300 hover:bg-white">Başla</a>
        </div>
        
        <div class="p-6 rounded-2xl bg-gradient-to-b from-white to-slate-50 border-2 border-sky-600 shadow-glow" data-animate>
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium bg-sky-100 text-sky-800">En Popüler</div>
          <h3 class="mt-3 font-semibold text-lg">Profesyonel</h3>
          <p class="mt-1 text-slate-600">Ekipler ve markalar</p>
          <p class="mt-4 text-3xl font-bold">₺199<span class="text-base text-slate-500">/ay</span></p>
          <ul class="mt-4 space-y-2 text-sm text-slate-600">
            <li>Özel bileşen seti</li>
            <li>Gelişmiş animasyonlar</li>
            <li>Öncelikli destek</li>
          </ul>
          <a href="#cta" class="mt-6 inline-flex justify-center w-full px-4 py-2 rounded-xl bg-sky-600 text-white hover:bg-sky-700">Başla</a>
        </div>
        
        <div class="p-6 rounded-2xl bg-white border border-slate-200 shadow-sm" data-animate>
          <h3 class="font-semibold text-lg">Kurumsal</h3>
          <p class="mt-1 text-slate-600">Özel ihtiyaçlar</p>
          <p class="mt-4 text-3xl font-bold">İletişim</p>
          <ul class="mt-4 space-y-2 text-sm text-slate-600">
            <li>Özel entegrasyon</li>
            <li>Performans danışmanlığı</li>
            <li>SLA ve güvenlik</li>
          </ul>
          <a href="#contact" class="mt-6 inline-flex justify-center w-full px-4 py-2 rounded-xl border border-slate-300 hover:bg-white">Satış ile Görüş</a>
        </div>
      </div>
    </div>
  </section>

<section id="cta" class="py-20 bg-gradient-to-b from-sky-50 via-white to-white">
    <div class="max-w-6xl mx-auto px-4 grid md:grid-cols-2 gap-10 items-center">
      <div data-animate>
        <h2 class="text-3xl md:text-4xl font-bold">Hazır mısınız?</h2>
        <p class="mt-3 text-slate-600">InspireX ile projelerinizi bir üst seviyeye taşıyın. Hızlı kurulum, modern görünüm, güçlü iç yapı.</p>
        <form class="mt-6 grid sm:grid-cols-[1fr_auto] gap-3" onsubmit="event.preventDefault(); alert('Teşekkürler! Sizinle iletişime geçeceğiz.');">
          <label class="sr-only" for="email">E-posta</label>
          <input id="email" type="email" required placeholder="E-posta adresiniz" class="w-full rounded-xl border-slate-300 focus:border-sky-600 focus:ring-sky-600"/>
          <button class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-slate-900 text-white hover:bg-slate-800">Kayıt Ol</button>
        </form>
      </div>
      <div data-animate>
        <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
          <dl class="grid grid-cols-2 gap-6">
            <div>
              <dt class="text-sm text-slate-500">Tamamlanan Proje</dt>
              <dd class="text-2xl font-bold">+320</dd>
            </div>
            <div>
              <dt class="text-sm text-slate-500">Memnuniyet Oranı</dt>
              <dd class="text-2xl font-bold">%97</dd>
            </div>
            <div>
              <dt class="text-sm text-slate-500">Ortalama Teslim</dt>
              <dd class="text-2xl font-bold">5 gün</dd>
            </div>
            <div>
              <dt class="text-sm text-slate-500">Aktif Kullanıcı</dt>
              <dd class="text-2xl font-bold">12k</dd>
            </div>
          </dl>
        </div>
      </div>
    </div>
  </section>

<section id="contact" class="py-20 bg-white">
    <div class="max-w-6xl mx-auto px-4">
      <div class="text-center max-w-2xl mx-auto mb-12" data-animate>
        <h2 class="text-3xl md:text-4xl font-bold">Bizimle İletişime Geçin</h2>
        <p class="mt-2 text-slate-600">Sorularınız için formu doldurun, kısa sürede dönüş yapalım.</p>
      </div>
      <form class="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto" onsubmit="event.preventDefault(); alert('Mesajınız için teşekkürler!');">
        <div class="grid gap-2">
          <label for="name" class="text-sm">Ad Soyad</label>
          <input id="name" type="text" required class="rounded-xl border-slate-300 focus:border-sky-600 focus:ring-sky-600" placeholder="Adınız Soyadınız" />
        </div>
        <div class="grid gap-2">
          <label for="mail" class="text-sm">E-posta</label>
          <input id="mail" type="email" required class="rounded-xl border-slate-300 focus:border-sky-600 focus:ring-sky-600" placeholder="ornek@mail.com" />
        </div>
        <div class="md:col-span-2 grid gap-2">
          <label for="message" class="text-sm">Mesaj</label>
          <input id="message" rows="5" required class="rounded-xl border-slate-300 focus:border-sky-600 focus:ring-sky-600" placeholder="Mesajınızı yazın..."/>
        </div>
        <div class="md:col-span-2 flex items-center justify-between">
          <label class="inline-flex items-center gap-2 text-sm text-slate-600"><input type="checkbox" required class="rounded border-slate-300"/> KVKK metnini kabul ediyorum</label>
          <button class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-sky-600 text-white hover:bg-sky-700">Gönder</button>
        </div>
      </form>
    </div>
  </section>

<footer class="border-t border-slate-200 bg-white">
    <div class="max-w-6xl mx-auto px-4 py-10 grid md:grid-cols-4 gap-8 text-sm">
      <div>
        <a href="#" class="inline-flex items-center gap-2" aria-label="InspireX Ana Sayfa">
          <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-sky-500 text-white">İX</span>
          <span class="font-semibold">InspireX</span>
        </a>
        <p class="mt-3 text-slate-600">Modern, gerçekçi ve ilham verici web deneyimleri.</p>
      </div>
      <div>
        <h4 class="font-semibold mb-3">Ürün</h4>
        <ul class="space-y-2 text-slate-600">
          <li><a href="#features" class="hover:text-sky-700">Özellikler</a></li>
          <li><a href="#pricing" class="hover:text-sky-700">Fiyatlar</a></li>
          <li><a href="#blog" class="hover:text-sky-700">Blog</a></li>
        </ul>
      </div>
      <div>
        <h4 class="font-semibold mb-3">Şirket</h4>
        <ul class="space-y-2 text-slate-600">
          <li><a href="#" class="hover:text-sky-700">Hakkımızda</a></li>
          <li><a href="#contact" class="hover:text-sky-700">İletişim</a></li>
          <li><a href="#" class="hover:text-sky-700">Kariyer</a></li>
        </ul>
      </div>
      <div>
        <h4 class="font-semibold mb-3">Bülten</h4>
        <form class="grid grid-cols-[1fr_auto] gap-2" onsubmit="event.preventDefault(); alert('Abonelik tamamlandı!');">
          <label class="sr-only" for="fmail">E-posta</label>
          <input id="fmail" type="email" required placeholder="E-posta adresiniz" class="rounded-xl border-slate-300 focus:border-sky-600 focus:ring-sky-600"/>
          <button class="px-4 py-2 rounded-xl bg-slate-900 text-white hover:bg-slate-800">Abone Ol</button>
        </form>
      </div>
    </div>
    <div class="border-t border-slate-200">
      <div class="max-w-6xl mx-auto px-4 py-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-slate-500">
        <p>© <span id="year"></span> InspireX. Tüm hakları saklıdır.</p>
        <div class="flex items-center gap-4">
          <a href="#" class="hover:text-slate-700">KVKK</a>
          <a href="#" class="hover:text-slate-700">Gizlilik</a>
          <a href="#" class="hover:text-slate-700">Şartlar</a>
        </div>
      </div>
    </div>
  </footer>

<script>
    // Yıl
    document.getElementById('year').textContent = new Date().getFullYear();

// Mobile Menu Toggle
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const iconOpen = document.getElementById('iconOpen');
    const iconClose = document.getElementById('iconClose');

function toggleMenu() {
      const expanded = menuBtn.getAttribute('aria-expanded') === 'true';
      menuBtn.setAttribute('aria-expanded', String(!expanded));
      mobileMenu.classList.toggle('hidden');
      iconOpen.classList.toggle('hidden');
      iconClose.classList.toggle('hidden');
    }

menuBtn.addEventListener('click', toggleMenu);
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && !mobileMenu.classList.contains('hidden')) {
        toggleMenu();
      }
    });

// Scroll ile görünüm animasyonu
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('show');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.15 });

document.querySelectorAll('[data-animate]').forEach((el) => observer.observe(el));

// Video Modal (YouTube)
    const videoModal = document.getElementById('videoModal');
    const openVideo = document.getElementById('openVideo');
    const openVideo2 = document.getElementById('openVideo2');
    const closeVideo = document.getElementById('closeVideo');
    const ytFrame = document.getElementById('ytFrame');

openVideo.addEventListener('click', showVideo);
    openVideo2.addEventListener('click', showVideo);
    closeVideo.addEventListener('click', hideVideo);
    videoModal.addEventListener('click', (e) => { if (e.target === videoModal.firstElementChild || e.target === videoModal) hideVideo(); });
    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !videoModal.classList.contains('hidden')) hideVideo(); });

// Lightbox (Galeri)
    const lightboxModal = document.getElementById('lightboxModal');
    const lightboxImg = document.getElementById('lightboxImg');
    const closeLightbox = document.getElementById('closeLightbox');

document.querySelectorAll('[data-lightbox]').forEach((btn) => {
      btn.addEventListener('click', () => {
        const src = btn.getAttribute('data-lightbox');
        lightboxImg.src = src;
        lightboxModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
      });
    });

function hideLightbox() {
      lightboxModal.classList.add('hidden');
      lightboxImg.src = '';
      document.body.style.overflow = '';
    }

closeLightbox.addEventListener('click', hideLightbox);
    lightboxModal.addEventListener('click', (e) => { if (e.target === lightboxModal.firstElementChild || e.target === lightboxModal) hideLightbox(); });
    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !lightboxModal.classList.contains('hidden')) hideLightbox(); });
  </script>
</body>
</html>

CSS