Skip to content

Commit aa87880

Browse files
justin808justin808
authored
[codex] Refresh homepage design (#709)
* Refresh homepage design * Fix homepage CI failures * Promote review app commands on homepage * Fix homepage CI regressions * Simplify homepage content density * Modernize footer branding * Trim legacy footer copy * Simplify react router demo * Address homepage review feedback * Fix CSS quoting for lint CI * Fix final homepage review issues
1 parent 0d87508 commit aa87880

File tree

15 files changed

+799
-302
lines changed

15 files changed

+799
-302
lines changed

‎app/views/layouts/application.html.erb‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<% content_for :body_content do %>
22
<%= react_component "NavigationBarApp" %>
33

4-
<div class="container mx-auto px-4 flex-grow">
4+
<div class="container mx-auto flex-grow px-4 sm:px-6 lg:px-8">
55
<%= yield %>
66
</div>
77

@@ -16,7 +16,7 @@
1616
<head>
1717
<meta charset="UTF-8">
1818
<meta name="viewport" content="width=device-width, initial-scale=1.0">
19-
<title>RailsReactTutorial</title>
19+
<title>React Webpack Rails Tutorial</title>
2020

2121
<%= append_stylesheet_pack_tag('stimulus-bundle') %>
2222
<%= append_javascript_pack_tag('stimulus-bundle') %>
@@ -27,7 +27,7 @@
2727
<%= csrf_meta_tags %>
2828
<%= action_cable_meta_tag %>
2929
</head>
30-
<body class="min-h-screen flex flex-col bg-sky-50 text-gray-700">
30+
<body class="min-h-screen flex flex-col bg-[#fffef9] text-slate-700 antialiased">
3131
<%= yield :body_content %>
3232
</body>
3333
</html>

‎app/views/pages/_header.html.erb‎

Lines changed: 78 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,78 @@
1-
<div class="prose max-w-full prose-a:text-sky-700 prose-li:my-0 prose-code:text-rose-600 prose-code:bg-yellow-100 prose-headings:text-gray-700">
2-
<p>Current Commit:
3-
<%= link_to git_commit_sha_short,
4-
"https://github.com/shakacode/react-webpack-rails-tutorial/commit/#{git_commit_sha}",
5-
id: "git-commit-sha" %>
6-
</p>
7-
8-
<ul>
9-
<li>
10-
<%= link_to "Can ShakaCode Help You?",
11-
"https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9" %>
12-
We're actively seeking new projects with React, React-Native, or Ruby on Rails
13-
</li>
14-
<li>
15-
This project is deployed on
16-
<%= link_to "Control Plane",
17-
"https://shakacode.controlplane.com" %>
18-
using
19-
<%= link_to "Heroku to Control Plane",
20-
"https://github.com/shakacode/heroku-to-control-plane" %>
21-
Ruby gem.
22-
</li>
23-
<li>
24-
See the
25-
<%= link_to "github.com/shakacode/react-webpack-rails-tutorial/README.md",
26-
"https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/README.md" %>
27-
for details of how this example site was built.
28-
</li>
29-
<li>
30-
Read <%= link_to "Documentation for React on Rails",
31-
"https://shakacode.gitbooks.io/react-on-rails/content/" %> and
32-
<%= link_to "The React on Rails Doctrine",
33-
"https://www.shakacode.com/blog/the-react-on-rails-doctrine" %>.
34-
</li>
35-
<li>
36-
Watch the <%= link_to "React On Rails Tutorial Series",
37-
"https://www.youtube.com/playlist?list=PL5VAKH-U1M6dj84BApfUtvBjvF-0-JfEU" %>.
38-
</li>
39-
<li>
40-
<%= link_to "ShakaCode", "http://www.shakacode.com"%>
41-
is doing support for React on Rails, including a private Slack channel, source code reviews, and pair programming sessions.
42-
<b><%= link_to "Click here", "http://www.shakacode.com/work/index.html" %></b> for more information.
43-
</li>
44-
</ul>
45-
</div>
46-
47-
<hr class="border-t my-8"/>
1+
<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">
2+
<div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
3+
<div class="max-w-2xl">
4+
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-sky-700">Quick Links</p>
5+
<h2 class="mt-3 text-4xl text-slate-900">Pull the next thing you need, not the whole library.</h2>
6+
<p class="mt-3 text-base leading-7 text-slate-600">
7+
Start with the essentials here. Open the extra reading only if you want more context.
8+
</p>
9+
</div>
10+
11+
<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">
12+
<span class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Current Commit</span>
13+
<%= link_to git_commit_sha_short,
14+
"https://github.com/shakacode/react-webpack-rails-tutorial/commit/#{git_commit_sha}",
15+
id: "git-commit-sha",
16+
class: "font-semibold text-slate-900 hover:text-sky-700" %>
17+
</div>
18+
</div>
19+
20+
<div class="mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
21+
22+
<%= link_to "https://github.com/shakacode/control-plane-flow",
23+
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 %>
24+
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Deployment</p>
25+
<p class="mt-3 text-xl font-semibold text-slate-900">control-plane-flow Library</p>
26+
<p class="mt-2 text-sm leading-6 text-slate-600">The library behind this project’s review-app workflow.</p>
27+
<% end %>
28+
29+
<%= link_to root_path(anchor: "review-app-commands"),
30+
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 %>
31+
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Review Apps</p>
32+
<p class="mt-3 text-xl font-semibold text-slate-900">Quick PR Commands</p>
33+
<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>
34+
<% end %>
35+
36+
<%= link_to "https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/README.md",
37+
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 %>
38+
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Build Notes</p>
39+
<p class="mt-3 text-xl font-semibold text-slate-900">Repository README</p>
40+
<p class="mt-2 text-sm leading-6 text-slate-600">Setup, structure, and local run instructions.</p>
41+
<% end %>
42+
43+
<%= link_to "https://shakacode.gitbooks.io/react-on-rails/content/",
44+
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 %>
45+
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Docs</p>
46+
<p class="mt-3 text-xl font-semibold text-slate-900">React on Rails Documentation</p>
47+
<p class="mt-2 text-sm leading-6 text-slate-600">Go deeper once the live demo clicks.</p>
48+
<% end %>
49+
</div>
50+
51+
<details class="mt-5 rounded-[1.5rem] border border-slate-200 bg-slate-50/70 p-5">
52+
<summary class="cursor-pointer text-sm font-semibold text-slate-900">
53+
More reading and support
54+
</summary>
55+
<div class="mt-4 grid gap-4 md:grid-cols-3">
56+
<%= link_to "https://www.shakacode.com/work/index.html",
57+
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 %>
58+
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Services</p>
59+
<p class="mt-3 text-xl font-semibold text-slate-900">ShakaCode Help</p>
60+
<p class="mt-2 text-sm leading-6 text-slate-600">Consulting, pairing, and delivery support.</p>
61+
<% end %>
62+
63+
<%= link_to "https://www.shakacode.com/blog/the-react-on-rails-doctrine",
64+
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 %>
65+
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Doctrine</p>
66+
<p class="mt-3 text-xl font-semibold text-slate-900">Philosophy</p>
67+
<p class="mt-2 text-sm leading-6 text-slate-600">Why Rails and React belong together here.</p>
68+
<% end %>
69+
70+
<%= link_to "https://www.youtube.com/playlist?list=PL5VAKH-U1M6dj84BApfUtvBjvF-0-JfEU",
71+
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 %>
72+
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Video</p>
73+
<p class="mt-3 text-xl font-semibold text-slate-900">Tutorial Series</p>
74+
<p class="mt-2 text-sm leading-6 text-slate-600">The longer historical walkthrough.</p>
75+
<% end %>
76+
</div>
77+
</details>
78+
</section>

0 commit comments

Comments
 (0)