feat: support four cards on home page (#893)

* feat: support four cards on home page

* chore(cms): adjust copy

* chore(cms): change order

Author: greatislander

src/assets/styles/base/_helpers.scss

@@ -116,7 +116,7 @@
     box-shadow: 0 0.5rem 0 0 var(--fl-fgColor, var(--color-red-45));
     inline-size: 64px;
     left: calc(50% - 64px / 2);
-    top: calc(35% - 64px / 2);
+    top: calc(25% - 64px / 2);
   }
 
   &:hover,
@@ -129,7 +129,7 @@
   &:active {
     .play-button {
       box-shadow: 0 6px 0 0 var(--fl-fgColor, var(--color-red-45));
-      top: calc(35% - 30px);
+      top: calc(25% - 30px);
     }
   }
 }
@@ -177,8 +177,8 @@
   margin: calc(var(--space) / 2);
 }
 
-.switcher > * > :nth-last-child(n+4),
-.switcher > * > :nth-last-child(n+4) ~ * {
+.switcher > * > :nth-last-child(n+5),
+.switcher > * > :nth-last-child(n+5) ~ * {
   flex-basis: 100%;
 }
 

src/index.md

@@ -3,13 +3,16 @@ headerCallToActionText: Create
 createSection:
   title: Let's check out Weavly!
   cards:
+    - title: Customize Weavly
+      link: https://youtu.be/eAG2VnmCotc
+      image: /assets/media/customizing-weavly.png
     - link: https://youtu.be/zg-TmHyBx0E
-      title: How to create a program in Weavly
+      title: Create a program
       image: /assets/media/creating-a-program-in-weavly.png
-    - title: How to customize Weavly
-      link: https://youtu.be/eAG2VnmCotc
+    - title: Customize backgrounds
+      link: https://www.youtube.com/watch?v=3c5YW8N_Gdg
       image: /assets/media/customizing-weavly.png
-    - title: How to share a program
+    - title: Share a program
       link: https://youtu.be/VZyaot1YL9U
       image: /assets/media/sharing-programs.png
 learnSection: