<!DOCTYPE html>
<html lang="tr">
<head>
  <%- include('partials/head') %>
  <title>LexaClip — Metin akışınızı hızlandırın</title>
  <meta name="description" content="LexaClip, yazma işlerinizi hızlandıran tarayıcı eklentisi." />
</head>
<body class="bg-slate-950 text-slate-100 antialiased">

  <!-- Navigasyon -->
  <header class="border-b border-slate-800/60">
    <nav class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
      <a href="/" class="flex items-center gap-2 text-xl font-bold">
        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-500 text-white">T</span>
        LexaClip
      </a>
      <div class="flex items-center gap-6 text-sm text-slate-300">
        <a href="#ozellikler" class="hover:text-white">Özellikler</a>
        <a href="#nasil" class="hover:text-white">Nasıl Çalışır</a>
        <a href="#indir" class="rounded-lg bg-indigo-500 px-4 py-2 font-semibold text-white transition hover:bg-indigo-400">Eklentiyi Edin</a>
      </div>
    </nav>
  </header>

  <!-- Hero -->
  <section class="relative overflow-hidden">
    <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(99,102,241,0.18),transparent_60%)]"></div>
    <div class="mx-auto max-w-6xl px-6 py-24 text-center">
      <p class="mb-4 inline-block rounded-full border border-indigo-400/30 bg-indigo-500/10 px-4 py-1 text-sm text-indigo-300">
        Tarayıcı eklentisi
      </p>
      <h1 class="mx-auto max-w-3xl text-5xl font-extrabold leading-tight tracking-tight md:text-6xl">
        Metin akışınızı <span class="bg-gradient-to-r from-indigo-400 to-sky-400 bg-clip-text text-transparent">hızlandırın</span>
      </h1>
      <p class="mx-auto mt-6 max-w-2xl text-lg text-slate-400">
        LexaClip ile tekrar eden yazma işlerinizden kurtulun. Tarayıcınızda çalışan akıllı metin araçlarıyla
        her gün dakikalar değil, saatler kazanın.
      </p>
      <div class="mt-10 flex items-center justify-center gap-4" id="indir">
        <a href="#" class="rounded-xl bg-indigo-500 px-8 py-4 text-lg font-semibold text-white shadow-lg shadow-indigo-500/25 transition hover:bg-indigo-400">
          Chrome'a Ekle — Ücretsiz
        </a>
        <a href="#ozellikler" class="rounded-xl border border-slate-700 px-8 py-4 text-lg font-semibold text-slate-200 transition hover:border-slate-500">
          Daha Fazla Bilgi
        </a>
      </div>
    </div>
  </section>

  <!-- Özellikler -->
  <section id="ozellikler" class="mx-auto max-w-6xl px-6 py-20">
    <h2 class="text-center text-3xl font-bold md:text-4xl">Neden LexaClip?</h2>
    <p class="mx-auto mt-3 max-w-xl text-center text-slate-400">İhtiyacınız olan her şey, tarayıcınızdan bir tık uzakta.</p>
    <div class="mt-12 grid gap-6 md:grid-cols-3">
      <div class="rounded-2xl border border-slate-800 bg-slate-900/50 p-8 transition hover:border-indigo-500/40">
        <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-500/15 text-2xl">⚡</div>
        <h3 class="text-xl font-semibold">Hızlı ve Hafif</h3>
        <p class="mt-2 text-slate-400">Tarayıcınızı yavaşlatmadan, ihtiyaç duyduğunuz anda saniyeler içinde çalışır.</p>
      </div>
      <div class="rounded-2xl border border-slate-800 bg-slate-900/50 p-8 transition hover:border-indigo-500/40">
        <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-500/15 text-2xl">✍️</div>
        <h3 class="text-xl font-semibold">Akıllı Metin Araçları</h3>
        <p class="mt-2 text-slate-400">Tekrar eden yazma işlerini otomatikleştirin, her sitede kaldığınız yerden devam edin.</p>
      </div>
      <div class="rounded-2xl border border-slate-800 bg-slate-900/50 p-8 transition hover:border-indigo-500/40">
        <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-500/15 text-2xl">🔒</div>
        <h3 class="text-xl font-semibold">Gizlilik Önce</h3>
        <p class="mt-2 text-slate-400">Verileriniz size aittir. LexaClip yalnızca çalışması için gerekeni işler.</p>
      </div>
    </div>
  </section>

  <!-- Nasıl çalışır -->
  <section id="nasil" class="border-y border-slate-800/60 bg-slate-900/30">
    <div class="mx-auto max-w-6xl px-6 py-20">
      <h2 class="text-center text-3xl font-bold md:text-4xl">Üç adımda başlayın</h2>
      <div class="mt-12 grid gap-10 md:grid-cols-3">
        <div class="text-center">
          <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-indigo-500 text-xl font-bold">1</div>
          <h3 class="text-lg font-semibold">Eklentiyi Yükleyin</h3>
          <p class="mt-2 text-slate-400">Chrome mağazasından tek tıkla ekleyin.</p>
        </div>
        <div class="text-center">
          <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-indigo-500 text-xl font-bold">2</div>
          <h3 class="text-lg font-semibold">Hesabınızı Oluşturun</h3>
          <p class="mt-2 text-slate-400">E-postanızla saniyeler içinde kaydolun.</p>
        </div>
        <div class="text-center">
          <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-indigo-500 text-xl font-bold">3</div>
          <h3 class="text-lg font-semibold">Kullanmaya Başlayın</h3>
          <p class="mt-2 text-slate-400">Her web sayfasında LexaClip yanınızda.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="mx-auto max-w-6xl px-6 py-20 text-center">
    <div class="rounded-3xl border border-indigo-500/30 bg-gradient-to-b from-indigo-500/10 to-transparent p-12">
      <h2 class="text-3xl font-bold md:text-4xl">Bugün denemeye başlayın</h2>
      <p class="mx-auto mt-3 max-w-xl text-slate-400">Ücretsiz plan ile hemen başlayın, kredi kartı gerekmez.</p>
      <a href="#indir" class="mt-8 inline-block rounded-xl bg-indigo-500 px-8 py-4 text-lg font-semibold text-white shadow-lg shadow-indigo-500/25 transition hover:bg-indigo-400">
        Chrome'a Ekle
      </a>
    </div>
  </section>

  <footer class="border-t border-slate-800/60">
    <div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-8 text-sm text-slate-500">
      <p>© <%= new Date().getFullYear() %> LexaClip. Tüm hakları saklıdır.</p>
      <div class="flex items-center gap-4">
        <a href="/privacy" class="hover:text-slate-300">Gizlilik Politikası</a>
        <p>textflow.lumerexa.com</p>
      </div>
    </div>
  </footer>

</body>
</html>
