Merge branch 'new-website' into new-website--add-required-scripts

Author: ngnijland

docs/src/collections/feature/asc-drag-drop-video.md

@@ -6,7 +6,7 @@ asset:
   path: "/features/asc-drag-drop-demo.mp4"
   alt: "Drag your recorded MP4 or GIF into any destination. Use it as an App Store Preview video or share a visual representation inside GitHub issues and pull requests. Directly share what you're working on in Slack or on Twitter."
   alignment: "full-width"
-  columnSpan: 8
+  columnSpan: 12
 sortOrder: 17
 ---
 

docs/src/collections/feature/compare-designs.md

@@ -6,7 +6,7 @@ asset:
   path: "/features/onboarding-compare.mp4"
   alt: "Comparing designs on top of the Simulator after exporting them from apps like Figma."
   alignment: "full-width"
-  columnSpan: 6
+  columnSpan: 12
 sortOrder: 3
 ---
 

docs/src/collections/feature/location-simulation.md

@@ -6,7 +6,7 @@ asset:
   path: "../../assets/features/location-routes.png"
   alt: "Single locations or automobile and walking routes: Test them right in the Simulator."
   alignment: "full-width"
-  columnSpan: 6
+  columnSpan: 12
 sortOrder: 8
 ---
 

docs/src/collections/feature/magnify.md

@@ -6,7 +6,7 @@ asset:
   path: "/features/magnifier-color-picker.mp4"
   alt: "Use the Color Picker and copy the value as SwiftUI Color, NSColor, or UIColor code."
   alignment: "full-width"
-  columnSpan: 6
+  columnSpan: 12
 sortOrder: 5.3
 ---
 

docs/src/collections/feature/network-monitoring.md

@@ -6,7 +6,7 @@ asset:
   path: "/features/network-monitoring-demo.mp4"
   alt: "Clicking through network requests that are done while using the Stock Analyzer app."
   alignment: "full-width"
-  columnSpan: 6
+  columnSpan: 12
   caption: "Network Monitoring is made possible by [Pulse](https://github.com/kean/Pulse), an open-source project created by [Alex Grebenyuk](https://github.com/kean)."
 sortOrder: 1
 ---

docs/src/collections/feature/recording-example.md

@@ -6,7 +6,7 @@ asset:
   path: "/features/recording-example.mp4"
   alt: "RocketSim's touch-attention mode ensures your demo is easy to follow since a touch indicator will be constantly visible."
   alignment: "full-width"
-  columnSpan: 8
+  columnSpan: 6
 sortOrder: 16
 ---
 

docs/src/collections/feature/user-defaults-editor.md

@@ -6,7 +6,7 @@ asset:
   path: "/features/user-defaults-editor.mp4"
   alt: "Test how your app responds to User Defaults changes. Quickly switch states like User Defaults-driven experiments."
   alignment: "full-width"
-  columnSpan: 6
+  columnSpan: 12
 sortOrder: 6
 ---
 

docs/src/components/AppStore.astro

@@ -33,7 +33,7 @@ import appStoreFeatured from "../assets/app-store-featured.jpg";
   }
 </style>
 
-<section class="grid section" aria-label="App Store badges">
+<section class="grid section" aria-label="App Store badges" data-aos="fade-in">
   <Image
     src={appStoreReview}
     alt='"4.7 Rating" badge from the Apple App Store, with five gold stars. The badge is black with white text and a white Apple logo, surrounded by a laurel wreath. Text at the bottom reads "App Store Reviews."'

docs/src/components/Feature.astro

@@ -115,7 +115,10 @@ if (asset.alignment === "full-width") {
   }
 </style>
 
-<article class="grid">
+<article
+  class="grid"
+  data-aos={asset.alignment === "full-width" ? undefined : "fade-up"}
+>
   <div
     class="feature-content"
     style={{
@@ -124,6 +127,11 @@ if (asset.alignment === "full-width") {
           ? "2 / -2"
           : `${asset.alignment === "left" ? `span ${12 - asset.columnSpan}` : 1} / ${asset.alignment === "left" ? -1 : `span ${12 - asset.columnSpan}`}`,
     }}
+    data-aos={asset.alignment === "full-width"
+      ? "fade-in"
+      : asset.alignment === "left"
+        ? "fade-left"
+        : "fade-right"}
   >
     <h3
       class:list={[
@@ -156,9 +164,10 @@ if (asset.alignment === "full-width") {
     style={{
       "--image-column":
         asset.alignment === "full-width"
-          ? "1 / -1"
+          ? `${(12 - asset.columnSpan) / 2 + 1} / span ${asset.columnSpan}`
           : `${asset.alignment === "left" ? 1 : `span ${asset.columnSpan}`} / ${asset.alignment === "left" ? `span ${asset.columnSpan}` : -1}`,
     }}
+    data-aos={asset.alignment === "full-width" ? "fade-up" : undefined}
   >
     {
       asset.type === "image" ? (
@@ -181,6 +190,14 @@ if (asset.alignment === "full-width") {
         />
       )
     }
-    {parsedCaption ? <figcaption set:html={parsedCaption} /> : null}
+    {
+      parsedCaption ? (
+        <figcaption
+          set:html={parsedCaption}
+          data-aos="fade-up"
+          data-aos-delay="1000"
+        />
+      ) : null
+    }
   </figure>
 </article>

docs/src/components/Insights.astro

@@ -26,7 +26,7 @@ import featureImage from "../assets/features/build-insights.png";
 </style>
 
 <section>
-  <div class="header-wrapper">
+  <div class="header-wrapper" data-aos="fade-in">
     <SectionHeader
       title="RocketSim Insights"
       subtitle="Increase the productivity of your whole team"