react-webpack-rails-tutorial/app/views/pages/_header.html.erb at 92e89e0b61791099e16e04ef1d619451022014b0 · shakacode/react-webpack-rails-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<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-2xl">
      <p class="text-xs font-semibold uppercase tracking-[0.28em] text-sky-700">Quick Links</p>
      <h2 class="mt-3 text-4xl text-slate-900">Pull the next thing you need, not the whole library.</h2>
      <p class="mt-3 text-base leading-7 text-slate-600">
        Start with the essentials here. Open the extra reading only if you want more context.
      </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-4">

    <%= link_to "https://github.com/shakacode/control-plane-flow",
                class: "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">The library behind this project’s review-app workflow.</p>
    <% end %>

    <%= link_to root_path(anchor: "review-app-commands"),
                class: "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">Keep <code>/deploy-review-app</code>, <code>/delete-review-app</code>, and <code>/help</code> close.</p>
    <% end %>

    <%= link_to "https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/README.md",
                class: "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">Setup, structure, and local run instructions.</p>
    <% end %>

    <%= link_to "https://shakacode.gitbooks.io/react-on-rails/content/",
                class: "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">Go deeper once the live demo clicks.</p>
    <% end %>
  </div>

  <details class="mt-5 rounded-[1.5rem] border border-slate-200 bg-slate-50/70 p-5">
    <summary class="cursor-pointer text-sm font-semibold text-slate-900">
      More reading and support
    </summary>
    <div class="mt-4 grid gap-4 md:grid-cols-3">
      <%= link_to "https://www.shakacode.com/work/index.html",
                  class: "rounded-3xl border border-slate-200 bg-white/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">ShakaCode Help</p>
        <p class="mt-2 text-sm leading-6 text-slate-600">Consulting, pairing, and delivery support.</p>
      <% end %>

      <%= link_to "https://www.shakacode.com/blog/the-react-on-rails-doctrine",
                  class: "rounded-3xl border border-slate-200 bg-white/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">Philosophy</p>
        <p class="mt-2 text-sm leading-6 text-slate-600">Why Rails and React belong together here.</p>
      <% end %>

      <%= link_to "https://www.youtube.com/playlist?list=PL5VAKH-U1M6dj84BApfUtvBjvF-0-JfEU",
                  class: "rounded-3xl border border-slate-200 bg-white/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">The longer historical walkthrough.</p>
      <% end %>
    </div>
  </details>
</section>