Update getting started page layout

Author: kaishin

_data/go_further.yml

@@ -1,24 +1,24 @@
 - title: "Go Further: Concurrency"
   description: "Swift has concurrency features built into the language making it easier to write concurrent code with the assistance of the compiler. This video introduces the async/await mechanism, a key part of Swift Concurrency."
-  content-type: video
-  content-url: https://developer.apple.com/videos/play/wwdc2021/10132/
-  thumbnail-url: #TBD
-  release-date: 2021-06-08
+  content_type: video
+  content_url: https://developer.apple.com/videos/play/wwdc2021/10132/
+  thumbnail_url: #TBD
+  release_date: 2021-06-08
 - title: "Go Further: Swift Generics"
   description: "In Swift, generics are a fundamental way to write abstract code. This video walks through the basics of Swift Generics and introducing generics into your code."
-  content-type: video
-  content-url: https://developer.apple.com/videos/play/wwdc2021/10132/
-  thumbnail-url: #TBD
-  release-date: 2021-06-09
+  content_type: video
+  content_url: https://developer.apple.com/videos/play/wwdc2021/10132/
+  thumbnail_url: #TBD
+  release_date: 2021-06-09
 - title: "Go Further: Regular Expressions"
   description: "Swift provides first-class regular expression support, commonly known as regex, for effective string processing. This video gives an overview of the power and flexibility of Swift Regex."
-  content-type: video
-  content-url: https://developer.apple.com/videos/play/wwdc2022/110357/
-  thumbnail-url: #TBD
-  release-date: 2022-06-07
+  content_type: video
+  content_url: https://developer.apple.com/videos/play/wwdc2022/110357/
+  thumbnail_url: #TBD
+  release_date: 2022-06-07
 - title: "Go Further: Swift Strings Under The Hood"
   description: "Swift strings provide a fast, Unicode-compliant way to work with text. This article provides more detail on how strings are implemented in Swift using UTF-8 and the reasons behind that choice."
-  content-type: article
-  content-url: https://www.swift.org/blog/utf8-string/
-  thumbnail-url: #TBD
-  release-date: 2019-03-20
+  content_type: article
+  content_url: https://www.swift.org/blog/utf8-string/
+  thumbnail_url: #TBD
+  release_date: 2019-03-20

assets/stylesheets/pages/_getting-started.scss

@@ -1,7 +1,26 @@
 
-.guide-list {
+.go-further-list{
   list-style: none;
   padding-left: 0;
+  display: grid;
+  gap: 1rem;
+  
+  .resource {
+    border: 1px solid var(--color-fill-gray);
+    padding: 0 1rem;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    
+    p {
+      flex-grow: 1;
+      color: var(--color-secondary-label);
+    }
+  }
+  
+  @media (min-width: 1000px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 .use-case-list {
@@ -29,7 +48,7 @@
   }
 
   @media (min-width: 1000px) {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 

getting-started/_go-further.html

@@ -2,34 +2,23 @@
 
 Ready to dive deeper? Here are some hand-picked resources covering about various Swift features and use.
 
-<ul class="guide-list">
-  <li class="guide">
-    <h3>Concurrency</h3>
-    <p class="description">
-      When you have code that needs to run at the same time as other code, it's important to choose the right tool for the job.
-    </p>
-
-    <p class="description">
-      We'll take you through the different kinds of concurrent tasks you can create in Swift, show you how to create groups of tasks, and find out how to cancel tasks in progress. We'll also provide guidance on when you may want to use unstructured tasks.
-    </p>
-    
-    <div class="links links-list-nostyle">
-      <a href="/">Read guide</a>
-    </div>
-  </li>
-
-  <li class="guide">
-    <h3>Testing</h3>
-    <p class="description">
-      Unit testing is an essential tool to consistently verify your code works correctly. Learn about the built-in testing features in Xcode, using XCTest.
-    </p>
-    
-    <p class="description">
-      Find out how to organize your tests and run them under different configurations using test plans, and discover how to automate testing and efficiently work with the results.
-    </p>
-    
-    <div class="links links-list-nostyle">
-      <a href="/">Read guide</a>
-    </div>
+<ul class="go-further-list">
+  {% for resource in site.data.go_further %}
+  <li class="resource">
+      <h3>{{ resource.title }}</h3>
+      <p class="description">
+        {{ resource.description }}
+      </p>
+      
+      <a href="{{ resource.content_url }}" class="cta-secondary">
+        {% if resource.content_type == "video" %}
+        Watch video
+        {% elsif resource.content_type == "article" %}
+        Read article        
+        {% else %}
+        View resource
+        {% endif %}
+      </a>
   </li>
+  {% endfor %}
 </ul>

getting-started/_use-cases.html

@@ -39,6 +39,6 @@ <h3>App for Apple platforms</h3>
       Requires macOS 12 and Xcode 14.
     </p>
 
-    <a href="/" class="cta-secondary">Start tutorial</a>
+    <a href="/getting-started/swiftui" class="cta-secondary">Start tutorial</a>
   </li>
 </ul>