Skip to content

Commit 83addb8

Browse files
RoyalIcingRoyalIcing
committed
Improve landing page
1 parent 6db9741 commit 83addb8

File tree

2 files changed

+44
-17
lines changed

2 files changed

+44
-17
lines changed

‎apps/components_guide_web/lib/components_guide_web/templates/landing/index.html.eex

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -46,20 +46,20 @@ subhead = "Guides to accessibility, TDD, BDD, naming, performance, and the lates
4646
</div>
4747

4848
<div class="text-white">
49-
<section class="pt-20 pb-20" style="<%= sections_styles(:cool) %>">
50-
<header class="mb-8 mx-auto max-w-4xl px-4 text-center">
51-
<h2 class="text-4xl font-bold leading-snug">
49+
<section class="pt-20 pb-20" style="<%= sections_styles(:dark) %>">
50+
<header class="mb-8 mx-auto max-w-4xl px-2 text-center">
51+
<h2 class="text-3xl sm:text-4xl font-bold leading-snug">
5252
Learn why accessibility is essential for a great UX, and use the same affordances to improve your own Developer Experience.
5353
</h2>
5454
</header>
5555
<%= stack_list([
5656
%{ title: "Landmarks", description: "Ensure your web pages have these familiar regions.", to: "/accessibility-first/landmarks", color: "purple" },
57-
%{ title: "Labels and Descriptions", description: "Make sure every region of interest is labelled.", to: "/accessibility-first/properties-cheatsheet", color: "indigo" },
58-
%{ title: "Properties", description: "Selected state, current page, hidden, and more.", to: "/accessibility-first/properties-cheatsheet", color: "teal" },
57+
%{ title: "Labels and Descriptions", description: "Ensure every region of interest is labelled.", to: "/accessibility-first/properties-cheatsheet", color: "indigo" },
58+
%{ title: "Properties", description: "Presenting selected state, current page, hiding, and more.", to: "/accessibility-first/properties-cheatsheet", color: "teal" },
5959
%{ title: "Form controls", description: "Inputs, checkboxes, radio buttons, comboboxes, and more.", to: "/accessibility-first/properties-cheatsheet", color: "red" },
60-
%{ title: "Widgets", description: "Buttons, links, tabs, comboboxes, and more.", to: "/accessibility-first/roles-cheatsheet", color: "orange" },
60+
%{ title: "Widgets", description: "Buttons, links, tabs, comboboxes, and more.", to: "/accessibility-first/widgets-cheatsheet", color: "orange" },
6161
%{ title: "Accessibility-First TDD", description: "Use accessibility affordances to write robust tests.", to: "/accessibility-first/roles-cheatsheet", color: "green" },
62-
%{ title: "Keyboard Navigation Acceptance Tests", description: "Ensure your forms are keyboard accessibility.", to: "/accessibility-first", color: "blue" },
62+
%{ title: "Keyboard Navigation Acceptance Tests", description: "Ensure your forms are keyboard accessibility.", to: "/accessibility-first/keyboard", color: "blue" },
6363
]) %>
6464
</section>
6565

@@ -71,25 +71,43 @@ subhead = "Guides to accessibility, TDD, BDD, naming, performance, and the lates
7171
</header>
7272
<%= stack_list([
7373
%{ title: "Contexts", description: "Use accessibility affordances to write robust tests.", to: "/accessibility-first", color: "green" },
74-
%{ title: "Isolated Component Unit Tests", description: "Test your atom components in isolation.", to: "/accessibility-first", color: "blue" },
74+
%{ title: "Atomic Component Unit Tests", description: "Test your atom components in isolation.", to: "/accessibility-first", color: "blue" },
75+
%{ title: "Scenarios", description: "Test your atom components in isolation.", to: "/accessibility-first", color: "indigo" },
76+
%{ title: "Error Handling", description: "Cover unhappy paths too.", to: "/accessibility-first", color: "orange" },
77+
78+
]) %>
79+
</section>
80+
81+
<section class="pt-20 pb-20" style="<%= sections_styles(:warm) %>">
82+
<header class="mb-8 mx-auto max-w-4xl px-4 text-center">
83+
<h2 class="text-4xl font-bold leading-snug">
84+
Naming is hard. Let’s make it easier.
85+
</h2>
86+
</header>
87+
<%= stack_list([
88+
%{ title: "Look up synonyms", description: "The right word can unlock everything.", to: "/accessibility-first", color: "green" },
89+
%{ title: "What’s most popular?", description: "Compare open source systems.", to: "/accessibility-first", color: "blue" },
90+
%{ title: "Domain driven", description: "Look to your user’s world first.", to: "/accessibility-first", color: "orange" },
7591

7692
]) %>
7793
</section>
7894

7995
<section class="pt-20 pb-20 text-blue-800" style="<%= sections_styles(:cool_light) %>">
8096
<header class="mb-8 mx-auto max-w-4xl px-4 text-center">
8197
<h2 class="text-4xl font-bold leading-snug">
82-
Write friendly tests using Jest and BDD.
98+
Find the right home for your state.
8399
</h2>
84100
</header>
85101
<%= stack_list([
86-
%{ title: "Accessibility-First TDD", description: "Use accessibility affordances to write robust tests.", to: "/accessibility-first", color: "green" },
87-
%{ title: "Isolated Component Unit Tests", description: "Test your atom components in isolation.", to: "/accessibility-first", color: "blue" },
102+
%{ title: "URL as source of truth", description: "The shareable, serializable, canonical standard.", to: "/accessibility-first", color: "green" },
103+
%{ title: "Modelling with state machines", description: "Systems to reliably think about state.", to: "/accessibility-first", color: "blue" },
104+
%{ title: "Connecting the pipes", description: "Use a library like Wonka to connect your app.", to: "/accessibility-first", color: "orange" },
105+
%{ title: "Never puts secrets where JavaScript can read", description: "Use cookies over local storage for anything private.", to: "/accessibility-first", color: "yellow" },
88106

89107
]) %>
90108
</section>
91109

92-
<section class="pt-20 pb-20" style="<%= sections_styles(:cool) %>">
110+
<section hidden class="pt-20 pb-20" style="<%= sections_styles(:cool) %>">
93111
<header class="mb-8 mx-auto max-w-4xl px-4 text-center">
94112
<h2 class="text-4xl font-bold leading-snug">
95113
Make modern iOS and macOS apps using reusable components, async data flow.

‎apps/components_guide_web/lib/components_guide_web/views/landing_view.ex

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ defmodule ComponentsGuideWeb.LandingView do
77
w-full max-w-md mx-auto
88
rounded overflow-hidden
99
shadow-xl
10-
transform hover:scale-105
11-
transition ease-in-out duration-1000
1210
">
1311
<%= for item <- items do %>
1412
<%= stack_item(item) %>
@@ -27,14 +25,13 @@ defmodule ComponentsGuideWeb.LandingView do
2725
<li>
2826
<a href="<%= to %>" class="
2927
block max-w-md w-full px-8 py-4 space-y-2
30-
font-bold
3128
text-<%= color %>-500 bg-<%= color %>-50
3229
border-t border-l-4 border-current
3330
hover:text-<%= color %>-600 hover:bg-<%= color %>-100
3431
hover:shadow-lg
3532
">
36-
<h2 class="text-3xl leading-tight"><%= title %></h2>
37-
<p><%= description %></p>
33+
<h2 class="text-3xl font-bold leading-tight"><%= title %></h2>
34+
<p class="text-xl"><%= description %></p>
3835
</a>
3936
"""
4037
end
@@ -113,6 +110,18 @@ defmodule ComponentsGuideWeb.LandingView do
113110
"background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"
114111
end
115112

113+
def sections_styles(:dark) do
114+
color = {:lab, 10, 1, -23}
115+
116+
gradient = Styling.linear_gradient("150grad", [
117+
color,
118+
color,
119+
color,
120+
])
121+
122+
"background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"
123+
end
124+
116125
def sections_styles(:warm) do
117126
color = {:lab, 30, 90, 20} |> Styling.to_css()
118127

0 commit comments

Comments
 (0)