Ruby on Rails 7 Hotwire 从入门到掌握视频教程 04 实战 - clone rails 官网中间部分

https://rubyonrails.org/

https://rubyonrails.org/assets/images/shape-top-down-left.svg

https://api.rubyonrails.org/v7.0.0/classes/ActionView/Helpers/AssetTagHelper.html#method-i-video_tag

diff --git a/.gitignore b/.gitignore
index 886f714..367a7bd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,4 @@

 # Ignore master key for decrypting credentials and more.
 /config/master.key
+/public/*.mp4
\ No newline at end of file
diff --git a/app/assets/images/railsfm.jpg b/app/assets/images/railsfm.jpg
new file mode 100644
index 0000000..01ff648
Binary files /dev/null and b/app/assets/images/railsfm.jpg differ
diff --git a/app/assets/images/shape-top-down-left.svg b/app/assets/images/shape-top-down-left.svg
new file mode 100644
index 0000000..033d721
--- /dev/null
+++ b/app/assets/images/shape-top-down-left.svg
@@ -0,0 +1 @@
+<svg preserveAspectRatio="none" width="1600" height="160" viewBox="0 0 1600 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>shape-top-down-left</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M0,140.00072 L0,0.000720438065 L1600,0.000720438065 C1136.32007,145.714253 610,190.57072 0,140.00072 Z" fill="#000"/></g></svg>
diff --git a/app/assets/stylesheets/style.css b/app/assets/stylesheets/style.css
index 689e0fe..d7e1fb4 100644
--- a/app/assets/stylesheets/style.css
+++ b/app/assets/stylesheets/style.css
@@ -52,3 +52,93 @@ body {
 .logo:hover {
   background: #271b23;
 }
+
+.hero {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.hero .container {
+  max-width: 1080px;
+}
+
+.hero h1 {
+  color: #d30001;
+  font-weight: 700;
+  font-size: 65px;
+  line-height: 72px;
+  text-align: center;
+}
+
+.hero h4 {
+  font-size: 36px;
+  color: #261b23;
+  letter-spacing: -0.01rem;
+  line-height: 44px;
+  text-align: center;
+  font-weight: 400;
+}
+
+.hero h4 strong {
+  color: #261b23;
+  font-weight: 700;
+}
+
+.hero .button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.hero .button a {
+  background: #f0e7e9;
+  border-radius: 6px;
+  color: #261b23;
+  padding: 10px 20px;
+  text-decoration: none;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.hero .button a:hover {
+  background: #dcd3d5;
+  color: #d30001;
+}
+
+.video {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 60px;
+  background: #f0e7e9;
+  position: relative;
+}
+
+.video:before {
+  background-position: left top;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  content: "";
+  height: 10vw;
+  left: 0;
+  max-height: 160px;
+  position: absolute;
+  top: -1px;
+  width: 100%;
+  background-image: url("shape-top-down-left.svg");
+  filter: brightness(0) invert(1);
+}
+
+.video .container {
+  max-width: 1080px;
+  z-index: 1;
+}
+
+.video .container video {
+  border-radius: 8px;
+  box-shadow: 0 15px 70px 5px rgb(38 27 35 / 15%), 0 1px 1px rgb(38 27 35 / 4%);
+  max-width: 100%;
+  overflow: hidden;
+}
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 4d24dec..33db9fc 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -1,15 +1,34 @@
 <nav class="nav">
   <ul>
     <li><%= link_to "Blog", nil %></li>
-    <li><%= link_to "Guides", nil %></li>
-    <li><%= link_to "API", nil %></li>
+    <li><%= link_to "Guides", "https://guides.rubyonrails.org/", target: "_blank" %></li>
+    <li><%= link_to "API", "https://api.rubyonrails.org/", target: "_blank" %></li>
   </ul>
-  <a class="logo" href="#">
+  <%= link_to root_path, class: "logo" do %>
     <%= image_tag "logo.svg" %>
-  </a>
+  <% end %>
   <ul>
-    <li><%= link_to "Forum", nil %></li>
-    <li><%= link_to "Contribute", nil %></li>
+    <li><%= link_to "Forum", "https://discuss.rubyonrails.org/", target: "_blank" %></li>
+    <li><%= link_to "Contribute", "https://github.com/rails/rails", target: "_blank" %></li>
     <li><%= link_to "Team", nil %></li>
   </ul>
-</nav>
\ No newline at end of file
+</nav>
+
+<div class="hero">
+  <div class="container">
+    <h1>Compress the complexity of modern web apps.</h1>
+    <h4>
+      Learn just what you need to get started, then keep leveling up as you go.
+      <strong>Ruby on Rails scales from HELLO WORLD to IPO.</strong>
+    </h4>
+    <div class="button">
+      <%= link_to "Rails 7.0.0 — released December 15, 2021", nil %>
+    </div>
+  </div>
+</div>
+
+<div class="video">
+  <div class="container">
+    <%= video_tag "/rails1.mp4", poster: "railsfm.jpg", controls: true %>
+  </div>
+</div>
\ No newline at end of file