Skip to content

Commit 2bc007f

Browse files
RoyalIcingRoyalIcing
committed
Update landing page
1 parent c38038a commit 2bc007f

File tree

6 files changed

+320
-37
lines changed

6 files changed

+320
-37
lines changed

‎apps/components_guide_web/assets/css/app.css

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ html {
1010
@apply bg-gray-900;
1111
}
1212

13+
[hidden] {
14+
display: none !important;
15+
}
16+
1317
article a {
1418
text-decoration: underline;
1519
}
@@ -42,7 +46,8 @@ input {
4246
}
4347

4448
ul:not([class]) {
45-
@apply list-disc;
49+
list-style: disc;
50+
padding-left: 1em;
4651
}
4752
ul:not([class]) > li > ul:not([class]) {
4853
@apply pl-8;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ topics = [
1616
]
1717
%>
1818

19-
<header class="text-white" style="background: <%= header_background %>;">
19+
<header class="text-white" style="background: <%= header_background() %>;">
2020
<section class="container px-6 pt-12 pb-12">
2121
<h1 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
2222
<%= "🥇 Accessibility-First Testing" %>
@@ -28,7 +28,7 @@ topics = [
2828
<p class="py-2 text-xl text-center">
2929
<span>Topics include:</span>
3030
<%= for topic <- topics do %>
31-
<a href="#" class="inline-block mx-1 mb-3 px-4 py-2 text-white rounded shadow-xl" style="background-color: rgba(255,255,255,0.1)"><%= topic %></a>
31+
<a href="#" class="inline-block mx-1 mb-3 px-4 py-2 text-white rounded shadow-xl" style="background-color: rgba(255,255,255,0.1)"><%= topic %></a>
3232
<% end %>
3333
</p>
3434
</section>

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

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<%= if true do %>
2+
<div class="text-white" style="background: linear-gradient(-32deg, #840000 0%, #E0003C 30%, #FF493F 50%, #FF584A 50%, #FF6F86 90%, #FF584A 120%);">
3+
<section class="container px-6 pt-12 pb-8">
4+
<h1 class="mx-auto max-w-4xl px-2 text-3xl sm:text-4xl md:text-5xl text-center leading-snug font-bold text-shadow">
5+
<%#= "Great apps need great components. Learn how to make them in SwiftUI and React." %>
6+
<%= "Great apps need great components. Learn by making in SwiftUI or React." %>
7+
</h1>
8+
<p class="mt-6 mb-8 mx-auto max-w-3xl text-2xl sm:text-3xl md:text-4xl text-center leading-snug italic text-red-100 text-shadow">
9+
<%= "Learn the techniques that work best across a range of component systems." %>
10+
</p>
11+
<p class="mx-auto py-2 max-w-4xl text-base md:text-xl text-center">
12+
Topics include:
13+
<%= for {text, index} <- Enum.with_index(["SwiftUI", "React", "Combine", "RxJS", "Figma", "Sketch", "Performance", "Clarity", "Documentation", "Responsive", "Design Teams"]) do %>
14+
<a href="#" class="inline-block md:mx-1 mb-2 md:mb-3 px-3 md:px-4 py-1 md:py-2 font-bold bg-white <%= if index <= 5, do: "text-blue-500 hover:bg-blue-600", else: "text-indigo-500 hover:bg-indigo-600" %> hover:text-white rounded shadow-xl"><%= text %></a>
15+
<% end %>
16+
</p>
17+
<div class="max-w-3xl mx-auto mt-8 flex flex-col sm:flex-row justify-around">
18+
<figure class="pb-4 flex flex-col items-center">
19+
<div style="height: 92px;">
20+
<img src="https://collected.systems/1/github/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/material/play-circle-outline.svg?defaultFill=white" width=92 height=92>
21+
</div>
22+
<figcaption class="text-lg md:text-xl font-bold">Watch video lessons</figcaption>
23+
</figure>
24+
<figure class="pb-4 flex flex-col items-center">
25+
<div style="height: 92px;">
26+
<img src="https://collected.systems/1/github/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/dev/swift.svg?defaultFill=white" width=92 height=92>
27+
</div>
28+
<figcaption class="text-lg md:text-xl font-bold">Learn SwiftUI & Combine</figcaption>
29+
</figure>
30+
<figure class="pb-4 flex flex-col items-center">
31+
<div style="height: 92px;">
32+
<img src="https://collected.systems/1/github/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/dev/react.svg?defaultFill=white" width=92 height=92>
33+
</div>
34+
<figcaption class="text-lg md:text-xl font-bold">Learn React</figcaption>
35+
</figure>
36+
</div>
37+
</section>
38+
</div>
39+
<% else %>
40+
<div class="text-white" style="background: linear-gradient(-32deg, #840000 0%, #E0003C 30%, #FF493F 50%, #FF584A 50%, #FF6F86 90%, #FF584A 120%);">
41+
<section class="container px-6 pt-12 pb-16">
42+
<h1 class="mx-auto max-w-5xl text-5xl text-center leading-snug font-bold">
43+
<%#= "Great apps need great components. Learn how to make them in SwiftUI & React." %>
44+
<%= "Great apps need great components. Learn how in SwiftUI, Combine, React & RxJS." %>
45+
</h1>
46+
<p class="mt-6 mb-8 mx-auto max-w-3xl text-4xl text-center italic leading-snug text-orange-100">
47+
<%#= "Learn the techniques that have worked best across a range of component systems." %>
48+
<%= "Learn the techniques that have worked best for modern component systems." %>
49+
</p>
50+
<p class="mx-auto py-2 max-w-4xl text-xl text-center">
51+
Topics include:
52+
<%= for {text, index} <- Enum.with_index(["SwiftUI", "React", "Combine", "RxJS", "Figma", "Sketch", "Performance", "Clarity", "Documentation", "Responsive", "Design Teams"]) do %>
53+
<a href="#" class="inline-block mx-1 mb-3 px-4 py-2 font-bold bg-white <%= if index <= 5, do: "text-blue-500 hover:bg-blue-600", else: "text-red-500 hover:bg-red-600" %> hover:text-white rounded shadow-xl"><%= text %></a>
54+
<% end %>
55+
</p>
56+
</section>
57+
</div>
58+
<% end %>
59+
60+
<div class="text-white bg-gray-800">
61+
<section class="pt-20">
62+
<header class="mb-8 mx-auto max-w-4xl px-4 text-center">
63+
<h2 class="text-4xl font-bold leading-snug">
64+
Make modern iOS and macOS apps using reusable components, async data flow.
65+
</h2>
66+
</header>
67+
<div class="w-full max-w-md mx-auto rounded overflow-hidden shadow-lg">
68+
<a href="/swiftui" class="block w-full px-8 py-4 font-bold bg-orange-100 text-orange-600 border-l-4 border-orange-500 hover:bg-orange-200 hover:text-orange-700 shadow-xl">
69+
<span class="text-3xl"><%= "Learn SwiftUI" %></span>
70+
<br>
71+
The future of UI from Apple
72+
</a>
73+
<a href="#" class="block max-w-md w-full px-8 py-4 font-bold bg-red-100 text-red-600 border-t border-l-4 border-red-500 hover:bg-red-200 hover:text-red-700 shadow-xl">
74+
<span class="text-3xl"><%= "Learn Combine" %></span>
75+
<br>
76+
Swift async data flow refined
77+
</a>
78+
</div>
79+
</section>
80+
81+
<section class="pt-20 pb-16">
82+
<header class="mb-8 mx-auto max-w-4xl px-4 text-center">
83+
<h2 class="text-4xl font-bold">Learn to make modern web apps using components, hooks, async data flow.</h2>
84+
</header>
85+
<div class="w-full max-w-md mx-auto rounded overflow-hidden shadow-lg">
86+
<a href="#" class="block max-w-md w-full px-8 py-4 font-bold bg-blue-100 text-blue-600 border-l-4 border-blue-500 hover:bg-blue-200 hover:text-blue-700 shadow-xl hover:shadow-lg">
87+
<span class="text-3xl"><%= "Learn React" %></span>
88+
<br>
89+
The venerable component-first library
90+
</a>
91+
<a href="#" class="block max-w-md w-full px-8 py-4 font-bold bg-indigo-100 text-indigo-600 border-t border-l-4 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-700 shadow-xl hover:shadow-lg">
92+
<span class="text-3xl"><%= "Learn TypeScript" %></span>
93+
<br>
94+
Safer, more expressive code
95+
</a>
96+
<a href="#" class="block max-w-md w-full px-8 py-4 font-bold bg-pink-100 text-pink-600 border-t border-l-4 border-pink-500 hover:bg-pink-200 hover:text-pink-700 shadow-xl hover:shadow-lg">
97+
<span class="text-3xl"><%= "Learn RxJS" %></span>
98+
<br>
99+
Reusable, testable data models
100+
</a>
101+
</div>
102+
</section>
103+
</div>

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

Lines changed: 87 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
1-
<%= if true do %>
2-
<div class="text-white" style="background: linear-gradient(-32deg, #840000 0%, #E0003C 30%, #FF493F 50%, #FF584A 50%, #FF6F86 90%, #FF584A 120%);">
1+
<%
2+
3+
heading = "Great apps start with great components"
4+
heading = "Want to learn more of the why than the how?"
5+
heading = "Want to learn more of the why than the how?"
6+
7+
subhead = "Learn more of the why than the how."
8+
9+
%>
10+
11+
<div class="text-white" style="<%= header_styles(2) %>">
312
<section class="container px-6 pt-12 pb-8">
4-
<h1 class="mx-auto max-w-4xl px-2 text-3xl sm:text-4xl md:text-5xl text-center leading-snug font-bold text-shadow">
5-
<%#= "Great apps need great components. Learn how to make them in SwiftUI and React." %>
6-
<%= "Great apps need great components. Learn by making in SwiftUI or React." %>
13+
<h1 class="mx-auto max-w-4xl px-2 text-3xl sm:text-4xl md:text-6xl text-center leading-tight font-bold text-shadow">
14+
<%= heading %>
715
</h1>
816
<p class="mt-6 mb-8 mx-auto max-w-3xl text-2xl sm:text-3xl md:text-4xl text-center leading-snug italic text-red-100 text-shadow">
9-
<%= "Learn the techniques that work best across a range of component systems." %>
17+
<%= subhead %>
1018
</p>
11-
<p class="mx-auto py-2 max-w-4xl text-base md:text-xl text-center">
19+
<p hidden class="mx-auto py-2 max-w-4xl text-base md:text-xl text-center">
1220
Topics include:
1321
<%= for {text, index} <- Enum.with_index(["SwiftUI", "React", "Combine", "RxJS", "Figma", "Sketch", "Performance", "Clarity", "Documentation", "Responsive", "Design Teams"]) do %>
14-
<a href="#" class="inline-block md:mx-1 mb-2 md:mb-3 px-3 md:px-4 py-1 md:py-2 font-bold bg-white <%= if index <= 5, do: "text-blue-500 hover:bg-blue-600", else: "text-indigo-500 hover:bg-indigo-600" %> hover:text-white rounded shadow-xl"><%= text %></a>
22+
<a href="#" class="inline-block md:mx-1 mb-2 md:mb-3 px-3 md:px-4 py-1 md:py-2 font-bold bg-white <%= if index <= 5, do: "text-blue-500 hover:bg-blue-600", else: "text-indigo-500 hover:bg-indigo-600" %> hover:text-white rounded shadow-xl"><%= text %></a>
1523
<% end %>
1624
</p>
17-
<div class="max-w-3xl mx-auto mt-8 flex flex-col sm:flex-row justify-around">
25+
<div hidden class="max-w-3xl mx-auto mt-8 flex flex-col sm:flex-row justify-around">
1826
<figure class="pb-4 flex flex-col items-center">
1927
<div style="height: 92px;">
2028
<img src="https://collected.systems/1/github/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/material/play-circle-outline.svg?defaultFill=white" width=92 height=92>
@@ -36,29 +44,76 @@
3644
</div>
3745
</section>
3846
</div>
39-
<% else %>
40-
<div class="text-white" style="background: linear-gradient(-32deg, #840000 0%, #E0003C 30%, #FF493F 50%, #FF584A 50%, #FF6F86 90%, #FF584A 120%);">
41-
<section class="container px-6 pt-12 pb-16">
42-
<h1 class="mx-auto max-w-5xl text-5xl text-center leading-snug font-bold">
43-
<%#= "Great apps need great components. Learn how to make them in SwiftUI & React." %>
44-
<%= "Great apps need great components. Learn how in SwiftUI, Combine, React & RxJS." %>
45-
</h1>
46-
<p class="mt-6 mb-8 mx-auto max-w-3xl text-4xl text-center italic leading-snug text-orange-100">
47-
<%#= "Learn the techniques that have worked best across a range of component systems." %>
48-
<%= "Learn the techniques that have worked best for modern component systems." %>
49-
</p>
50-
<p class="mx-auto py-2 max-w-4xl text-xl text-center">
51-
Topics include:
52-
<%= for {text, index} <- Enum.with_index(["SwiftUI", "React", "Combine", "RxJS", "Figma", "Sketch", "Performance", "Clarity", "Documentation", "Responsive", "Design Teams"]) do %>
53-
<a href="#" class="inline-block mx-1 mb-3 px-4 py-2 font-bold bg-white <%= if index <= 5, do: "text-blue-500 hover:bg-blue-600", else: "text-red-500 hover:bg-red-600" %> hover:text-white rounded shadow-xl"><%= text %></a>
54-
<% end %>
55-
</p>
47+
48+
<div class="text-white">
49+
<aside class="py-20">
50+
<div class="w-full max-w-4xl mx-auto space-y-6 text-3xl rounded overflow-hidden shadow-lg">
51+
<p>
52+
There’s a lot of learning materials on specific technologies out there. But technologies change — rapidly.
53+
54+
<p>
55+
Frameworks will come and go.
56+
React might be the hotness today, but in a few years another framework might well rule the roost.
57+
58+
<p>
59+
The guides here cover what will remain relevant for decades to come:
60+
61+
<ul class="list-disc pl-8 font-bold">
62+
<li class="text-red-300"><%= "Great UX and performance" %>
63+
<li class="text-teal-300"><%= "Accessibility" %>
64+
<li class="text-blue-300"><%= "Component naming & responsibility" %>
65+
<li class="text-green-300"><%= "TDD & BDD" %>
66+
<li class="text-yellow-100"><%= "Thinking about state" %>
67+
<li class="text-orange-300"><%= "Modular styling with modern CSS" %>
68+
<li class="text-purple-300"><%= "Preferring built-in first" %>
69+
</ul>
70+
71+
<p>
72+
It’s all free to read and share.
73+
</div>
74+
</aside>
75+
76+
<section class="pt-20 pb-20" style="<%= sections_styles(:cool) %>">
77+
<header class="mb-8 mx-auto max-w-4xl px-4 text-center">
78+
<h2 class="text-4xl font-bold leading-snug">
79+
Learn why accessibility is essential for a great UX, and use the same affordances to improve your own Developer Experience.
80+
</h2>
81+
</header>
82+
<%= stack_list([
83+
%{ title: "Landmarks", description: "Ensure your web pages have these familiar regions.", to: "#", color: "indigo" },
84+
%{ title: "Widgets", description: "Buttons, links, tabs, comboboxes, and more.", to: "#", color: "orange" },
85+
%{ title: "Accessibility-First TDD", description: "Use accessibility affordances to write robust tests.", to: "/accessibility-first", color: "green" },
86+
%{ title: "Keyboard Navigation Acceptance Tests", description: "Ensure your forms are keyboard accessibility.", to: "/accessibility-first", color: "blue" },
87+
]) %>
88+
</section>
89+
90+
<section class="pt-20 pb-20 text-blue-800" style="<%= sections_styles(:cool_light) %>">
91+
<header class="mb-8 mx-auto max-w-4xl px-4 text-center">
92+
<h2 class="text-4xl font-bold leading-snug">
93+
Write friendly tests using Jest and BDD.
94+
</h2>
95+
</header>
96+
<%= stack_list([
97+
%{ title: "Contexts", description: "Use accessibility affordances to write robust tests.", to: "/accessibility-first", color: "green" },
98+
%{ title: "Isolated Component Unit Tests", description: "Test your atom components in isolation.", to: "/accessibility-first", color: "blue" },
99+
100+
]) %>
56101
</section>
57-
</div>
58-
<% end %>
59102

60-
<div class="text-white bg-gray-800">
61-
<section class="pt-20">
103+
<section class="pt-20 pb-20 text-blue-800" style="<%= sections_styles(:cool_light) %>">
104+
<header class="mb-8 mx-auto max-w-4xl px-4 text-center">
105+
<h2 class="text-4xl font-bold leading-snug">
106+
Write friendly tests using Jest and BDD.
107+
</h2>
108+
</header>
109+
<%= stack_list([
110+
%{ title: "Accessibility-First TDD", description: "Use accessibility affordances to write robust tests.", to: "/accessibility-first", color: "green" },
111+
%{ title: "Isolated Component Unit Tests", description: "Test your atom components in isolation.", to: "/accessibility-first", color: "blue" },
112+
113+
]) %>
114+
</section>
115+
116+
<section class="pt-20 pb-20" style="<%= sections_styles(:cool) %>">
62117
<header class="mb-8 mx-auto max-w-4xl px-4 text-center">
63118
<h2 class="text-4xl font-bold leading-snug">
64119
Make modern iOS and macOS apps using reusable components, async data flow.
@@ -78,7 +133,7 @@
78133
</div>
79134
</section>
80135

81-
<section class="pt-20 pb-16">
136+
<section class="pt-20 pb-16" style="<%= sections_styles(:warm) %>">
82137
<header class="mb-8 mx-auto max-w-4xl px-4 text-center">
83138
<h2 class="text-4xl font-bold">Learn to make modern web apps using components, hooks, async data flow.</h2>
84139
</header>
@@ -100,4 +155,4 @@
100155
</a>
101156
</div>
102157
</section>
103-
</div>
158+
</div>

‎apps/components_guide_web/lib/components_guide_web/templates/layout/app.html.eex

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
1515
<%= render @view_module, @view_template, assigns %>
1616
</main>
17-
<footer class="container pt-4 pb-6 text-gray-600 tracking-wide">
17+
<footer role="contentinfo" class="container pt-4 pb-6 text-gray-600 tracking-wide">
1818
<p><small class="text-xs">Copyright © 2020 Patrick Smith</small></p>
1919
<ul class="list-none text-xs mt-4 leading-loose">
2020
<li><a href="https://github.com/ComponentsTV/components_guide">Source on GitHub</a>
@@ -35,6 +35,6 @@
3535
//document.querySelectorAll('.post.category-javascript pre code').forEach(el => el.classList.add('language-jsx'));
3636
window.Prism.highlightAll();
3737
</script>
38-
38+
3939
</body>
4040
</html>

0 commit comments

Comments
 (0)