claude

<!-- ═══════ HERO ═══════ -->
<section id="hero" class="hero">
  <div class="hero-tag">Tutorial · Buat Pemula</div>
  <h1>
    Terminal + GitHub<br>
    = AI <em>Superpower</em><span class="dot">.</span>
  </h1>
  <p class="hero-desc">Dua skill simple yang bikin AI 10x lebih powerful. Belajar santai, ga ribet, ga butuh latar belakang coding.</p>

  <div class="hero-pills">
    <div class="hero-pill dark">Gratis</div>
    <div class="hero-pill">15 menit</div>
    <div class="hero-pill">Mac &amp; Windows</div>
    <div class="hero-pill">Pemula friendly</div>
  </div>

  <div class="hero-terminal">
    <div class="tb-bar">
      <div class="d dot-r"></div>
      <div class="d dot-y"></div>
      <div class="d dot-g"></div>
      <span class="tb-title">Terminal — my-project</span>
    </div>
    <div class="tb-body" id="heroTerminal">
      <div class="line" id="hLine1"></div>
      <div class="line" id="hLine2"></div>
      <div class="line" id="hLine3"></div>
      <div class="line" id="hLine4"></div>
      <div class="line" id="hLine5"></div>
    </div>
  </div>
  <button class="play-btn" id="replayHero">
    <svg viewBox="0 0 10 10" fill="currentColor"><polygon points="2,1 2,9 8,5"/></svg>
    Replay
  </button>
</section>

<!-- ═══════ KENAPA ═══════ -->
<section id="why" class="fade-in">
  <div class="eyebrow">Kenapa belajar ini</div>
  <h2 class="section-h">AI bisa lebih dari<br>sekedar <span class="muted">jawab pertanyaan.</span></h2>

  <div class="why-block">
    <p>Pernah pengen AI <strong>baca seluruh kode</strong> kamu sekaligus, bukan cuma 1 file yang kamu paste? Atau pengen AI <strong>edit project</strong> langsung tanpa kamu copy-paste manual?</p>
    <p>Itu butuh 2 tools sederhana: <strong>Terminal</strong> (cara ngomong langsung sama komputer) dan <strong>GitHub</strong> (tempat simpan project online). Begitu kamu kuasain dasarnya, AI bukan lagi chatbot biasa — dia jadi rekan kerja yang bisa baca, edit, dan ngerti seluruh project kamu.</p>
  </div>
</section>

<!-- ═══════ TOOLS BENTO ═══════ -->
<section id="tools" class="fade-in">
  <div class="eyebrow">Kenalan dulu</div>
  <h2 class="section-h">3 tools.<br>Semuanya <span class="blue">simple</span>.</h2>
  <p class="section-lead">Bayangin gini biar gampang ingetnya:</p>

  <div class="bento-3">
    <div class="bento-card">
      <div class="bento-icon b1">💬</div>
      <h3>Terminal</h3>
      <div class="bento-tag">WhatsApp ke komputer</div>
      <p>Biasanya kamu klik-klik mouse, kan? Terminal ini ngomong via teks. Lebih cepet, lebih powerful, AI juga "ngomong"-nya pake ini.</p>
    </div>
    <div class="bento-card">
      <div class="bento-icon b2">↩️</div>
      <h3>Git</h3>
      <div class="bento-tag">Ctrl+Z level dewa</div>
      <p>Setiap perubahan project kamu kebackup otomatis. Salah edit? Tinggal balikin ke versi sebelumnya. Kapanpun.</p>
    </div>
    <div class="bento-card">
      <div class="bento-icon b3">☁️</div>
      <h3>GitHub</h3>
      <div class="bento-tag">Google Drive khusus kode</div>
      <p>Simpan project online. Akses dari mana aja, share gampang, dan AI bisa baca langsung lewat link.</p>
    </div>
  </div>
</section>

<!-- ═══════ PREREQ ═══════ -->
<section id="prereq" class="fade-in">
  <div class="eyebrow">Step 1</div>
  <h2 class="section-h">Yang kamu butuhin<span class="blue">.</span></h2>
  <p class="section-lead">Tap untuk centang kalau udah ready. Cuma 4 hal — semuanya gratis.</p>

  <div class="prereq-list" id="prereqList">
    <div class="prereq-item" data-id="p1">
      <div class="prereq-check"></div>
      <div class="prereq-text">
        Komputer Mac atau Windows
        <small>Linux juga bisa, tapi tutorial ini fokus ke 2 OS itu</small>
      </div>
    </div>
    <div class="prereq-item" data-id="p2">
      <div class="prereq-check"></div>
      <div class="prereq-text">
        Akun GitHub (gratis)
        <small>Belum punya? Daftar di <a href="https://github.com/signup" target="_blank">github.com/signup</a></small>
      </div>
    </div>
    <div class="prereq-item" data-id="p3">
      <div class="prereq-check"></div>
      <div class="prereq-text">
        Git terinstall di komputer
        <small>Cek dengan ketik di terminal: <code>git --version</code></small>
      </div>
    </div>
    <div class="prereq-item" data-id="p4">
      <div class="prereq-check"></div>
      <div class="prereq-text">
        Niat 15 menit
        <small>Yang ini paling penting 😄</small>
      </div>
    </div>
  </div>
</section>

<!-- ═══════ TERMINAL ═══════ -->
<section id="terminal" class="fade-in">
  <div class="eyebrow">Step 2</div>
  <h2 class="section-h">Belajar<br><span class="blue">Terminal.</span></h2>
  <p class="section-lead">Cuma 5 perintah dasar. Pilih OS kamu — sebagian besar perintah sama persis.</p>

  <div class="os-tabs" id="osTabs">
    <button class="os-tab active" data-os="macos">
      <svg viewBox="0 0 16 16" fill="currentColor"><path d="M13.5 11.1c-.3.7-.4 1-.8 1.6-.5.8-1.2 1.8-2.1 1.8-.8 0-1-.5-2.1-.5-1.1 0-1.3.5-2.1.5-.9 0-1.6-.9-2.1-1.7C2.8 10.5 2.7 7.6 4.6 6c.7-.6 1.6-1 2.4-1 .9 0 1.4.5 2.1.5.7 0 1.1-.5 2.1-.5.8 0 1.6.4 2.2 1.1-1.9 1-1.6 3.8.1 5zM9.8 3.8c.4-.5.7-1.2.6-1.9-.6 0-1.3.4-1.7.9-.4.4-.7 1.1-.6 1.8.6 0 1.3-.4 1.7-.8z"/></svg>
      macOS
    </button>
    <button class="os-tab" data-os="windows">
      <svg viewBox="0 0 16 16" fill="currentColor"><path d="M0 2.2L6.5 1.3v6.3H0V2.2zm0 11.6l6.5.9V8.4H0v5.4zm7.2-6.2V1.2L16 0v7.6H7.2zm0 .8H16V16l-8.8-1.2V8.4z"/></svg>
      Windows
    </button>
  </div>

  <!-- macOS Panel -->
  <div class="os-panel active" id="panel-macos">
    <div class="cmd-grid">
      <div class="cmd-card">
        <div class="cmd-code">pwd</div>
        <div class="cmd-desc"><strong>Saya ada di mana?</strong> — Tunjukin folder kamu sekarang.</div>
      </div>
      <div class="cmd-card">
        <div class="cmd-code">ls</div>
        <div class="cmd-desc"><strong>Apa aja di sini?</strong> — Lihat semua file &amp; folder.</div>
      </div>
      <div class="cmd-card">
        <div class="cmd-code">cd nama-folder</div>
        <div class="cmd-desc"><strong>Masuk ke folder.</strong> — Ganti "nama-folder" sesuai folder kamu.</div>
      </div>
      <div class="cmd-card">
        <div class="cmd-code">cd ..</div>
        <div class="cmd-desc"><strong>Keluar ke folder atas.</strong> — Mundur 1 level.</div>
      </div>
      <div class="cmd-card">
        <div class="cmd-code">mkdir my-project</div>
        <div class="cmd-desc"><strong>Bikin folder baru.</strong> — "my-project" bisa diganti nama lain.</div>
      </div>
    </div>
  </div>

  <!-- Windows Panel -->
  <div class="os-panel" id="panel-windows">
    <div class="cmd-grid">
      <div class="cmd-card">
        <div class="cmd-code">pwd</div>
        <div class="cmd-desc"><strong>Saya ada di mana?</strong> — Tunjukin folder kamu sekarang. (PowerShell)</div>
      </div>
      <div class="cmd-card">
        <div class="cmd-code">dir</div>
        <div class="cmd-desc"><strong>Apa aja di sini?</strong> — Lihat semua file &amp; folder. (atau pakai <code style="font-size:11px;background:var(--bg-soft);padding:1px 5px;border-radius:4px;">ls</code> di PowerShell)</div>
      </div>
      <div class="cmd-card">
        <div class="cmd-code">cd nama-folder</div>
        <div class="cmd-desc"><strong>Masuk ke folder.</strong> — Sama seperti Mac.</div>
      </div>
      <div class="cmd-card">
        <div class="cmd-code">cd ..</div>
        <div class="cmd-desc"><strong>Keluar ke folder atas.</strong> — Mundur 1 level.</div>
      </div>
      <div class="cmd-card">
        <div class="cmd-code">mkdir my-project</div>
        <div class="cmd-desc"><strong>Bikin folder baru.</strong> — Sama seperti Mac.</div>
      </div>
    </div>
  </div>

  <!-- INTERACTIVE SANDBOX -->
  <div class="sandbox-wrap">
    <div class="sandbox-header">
      <div class="sandbox-title">
        <span>🎮 Coba sendiri</span>
        <span class="badge">Live</span>
      </div>
      <div class="sandbox-actions">
        <button class="sb-btn" id="sbHelp">Help</button>
        <button class="sb-btn" id="sbReset">Reset</button>
      </div>
    </div>

    <div class="sandbox" id="sandbox">
      <div class="tb-bar">
        <div class="d dot-r"></div>
        <div class="d dot-y"></div>
        <div class="d dot-g"></div>
        <span class="tb-title">Sandbox — playground</span>
      </div>
      <div class="sandbox-output" id="sbOutput"></div>
      <div class="sb-prompt-line">
        <span class="sb-prompt" id="sbPromptLabel">user@playground ~ %</span>
        <input type="text" class="sb-input" id="sbInput" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="Ketik command lalu Enter...">
      </div>
    </div>

    <div class="challenge-box" id="challengeBox">
      <span class="challenge-icon">🎯</span>
      <div class="challenge-text" id="challengeText">
        <strong>Challenge 1 dari 5</strong>
        Ketik <code>pwd</code> untuk lihat kamu lagi di folder mana sekarang.
      </div>
    </div>
  </div>
</section>

<!-- ═══════ GITHUB CRUD ═══════ -->
<section id="github" class="fade-in">
  <div class="eyebrow">Step 3</div>
  <h2 class="section-h">Pakai <span class="blue">GitHub.</span></h2>
  <p class="section-lead">Cuma ada 4 hal yang biasa kamu lakukan. Tap kartunya untuk lihat detail.</p>

  <div class="crud-grid">
    <div class="crud-card create" data-card="create">
      <div class="crud-head">
        <div class="crud-icon">🆕</div>
        <div>
          <div class="crud-title">Bikin Repo Baru</div>
          <div class="crud-tag">Create</div>
        </div>
      </div>
      <p>Mau mulai project baru? Bikin "folder" online di GitHub. Cara paling gampang: lewat web.</p>
      <div class="crud-commands"><span class="c-comment"># Cara 1: Lewat web (paling simple)</span>

github.com → New Repository → Create

# Cara 2: Push folder yang udah ada $ git init $ git add . $ git commit -m "first commit" $ git remote add origin URL_REPO $ git push -u origin main