_header.html.erb

<section class="overflow-hidden rounded-[2rem] border border-white/80 bg-white/80 p-6 shadow-[0_24px_70px_-48px_rgba(15,23,42,0.45)] backdrop-blur sm:p-8">
  <div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
    <div class="max-w-3xl">
      <p class="text-xs font-semibold uppercase tracking-[0.28em] text-sky-700">Project Snapshot</p>
      <h2 class="mt-3 text-4xl text-slate-900">Useful links, deployment context, and support paths without the old wall of bullets.</h2>
      <p class="mt-3 text-base leading-7 text-slate-600">
        This tutorial is more than a starter app. It also documents the real project context around deployment, docs, videos, and support.
      </p>
    </div>

    <div class="inline-flex items-center gap-3 self-start rounded-full border border-slate-200 bg-slate-50 px-4 py-2 text-sm text-slate-600 shadow-sm shadow-slate-200">
      <span class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Current Commit</span>
      <%= link_to git_commit_sha_short,
                  "https://github.com/shakacode/react-webpack-rails-tutorial/commit/#{git_commit_sha}",
                  id: "git-commit-sha",
                  class: "font-semibold text-slate-900 hover:text-sky-700" %>
    </div>
  </div>

  <div class="mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
    <%= link_to "https://www.shakacode.com/work/index.html",
                class: "group rounded-3xl border border-slate-200 bg-slate-50/80 p-5 transition hover:-translate-y-0.5 hover:border-sky-300 hover:bg-white hover:no-underline hover:shadow-lg hover:shadow-sky-100" do %>
      <p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Services</p>
      <p class="mt-3 text-xl font-semibold text-slate-900">Can ShakaCode help you?</p>
      <p class="mt-2 text-sm leading-6 text-slate-600">ShakaCode is actively seeking new React, React Native, and Rails projects, with support ranging from code reviews to pairing.</p>
    <% end %>

    <%= link_to "https://github.com/shakacode/control-plane-flow",
                class: "group rounded-3xl border border-slate-200 bg-slate-50/80 p-5 transition hover:-translate-y-0.5 hover:border-sky-300 hover:bg-white hover:no-underline hover:shadow-lg hover:shadow-sky-100" do %>
      <p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Deployment</p>
      <p class="mt-3 text-xl font-semibold text-slate-900">control-plane-flow Library</p>
      <p class="mt-2 text-sm leading-6 text-slate-600">See the library behind the review-app and deployment flow, including the slash-command-driven Control Plane workflow used around this project.</p>
    <% end %>

    <%= link_to "#review-app-commands",
                class: "group rounded-3xl border border-slate-200 bg-slate-50/80 p-5 transition hover:-translate-y-0.5 hover:border-sky-300 hover:bg-white hover:no-underline hover:shadow-lg hover:shadow-sky-100" do %>
      <p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Review Apps</p>
      <p class="mt-3 text-xl font-semibold text-slate-900">Quick PR Commands</p>
      <p class="mt-2 text-sm leading-6 text-slate-600">Promote the fast path for preview environments with <code>/deploy-review-app</code>, <code>/delete-review-app</code>, and <code>/help</code>.</p>
    <% end %>

    <%= link_to "https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/README.md",
                class: "group rounded-3xl border border-slate-200 bg-slate-50/80 p-5 transition hover:-translate-y-0.5 hover:border-sky-300 hover:bg-white hover:no-underline hover:shadow-lg hover:shadow-sky-100" do %>
      <p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Build Notes</p>
      <p class="mt-3 text-xl font-semibold text-slate-900">Repository README</p>
      <p class="mt-2 text-sm leading-6 text-slate-600">See how the app is wired together, how to boot it locally, and how the React on Rails integration is structured.</p>
    <% end %>

    <%= link_to "https://shakacode.gitbooks.io/react-on-rails/content/",
                class: "group rounded-3xl border border-slate-200 bg-slate-50/80 p-5 transition hover:-translate-y-0.5 hover:border-sky-300 hover:bg-white hover:no-underline hover:shadow-lg hover:shadow-sky-100" do %>
      <p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Docs</p>
      <p class="mt-3 text-xl font-semibold text-slate-900">React on Rails Documentation</p>
      <p class="mt-2 text-sm leading-6 text-slate-600">Dive into the official guides when you want more than the demo can reasonably show in one screen.</p>
    <% end %>

    <%= link_to "https://www.shakacode.com/blog/the-react-on-rails-doctrine",
                class: "group rounded-3xl border border-slate-200 bg-slate-50/80 p-5 transition hover:-translate-y-0.5 hover:border-sky-300 hover:bg-white hover:no-underline hover:shadow-lg hover:shadow-sky-100" do %>
      <p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Doctrine</p>
      <p class="mt-3 text-xl font-semibold text-slate-900">React on Rails Philosophy</p>
      <p class="mt-2 text-sm leading-6 text-slate-600">Read the architectural rationale behind mixing Rails and React without surrendering the strengths of either.</p>
    <% end %>

    <%= link_to "https://www.youtube.com/playlist?list=PL5VAKH-U1M6dj84BApfUtvBjvF-0-JfEU",
                class: "group rounded-3xl border border-slate-200 bg-slate-50/80 p-5 transition hover:-translate-y-0.5 hover:border-sky-300 hover:bg-white hover:no-underline hover:shadow-lg hover:shadow-sky-100" do %>
      <p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Video</p>
      <p class="mt-3 text-xl font-semibold text-slate-900">Tutorial Series</p>
      <p class="mt-2 text-sm leading-6 text-slate-600">Watch the original walkthrough when you want the historical context and the step-by-step build process.</p>
    <% end %>
  </div>
</section>