Landing page content

docs/src/components/AppStore.astro

@@ -0,0 +1,45 @@
+---
+import { Image } from "astro:assets";
+
+import appStoreReview from "../assets/app-store-rating.jpg";
+import appStoreFeatured from "../assets/app-store-featured.jpg";
+---
+
+<style>
+  .section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+
+    @media (min-width: 520px) {
+      flex-direction: row;
+      justify-content: center;
+      gap: 4rem;
+      margin-top: 4rem;
+      margin-bottom: 4rem;
+    }
+  }
+
+  .image {
+    width: 10.5rem;
+    height: auto;
+  }
+</style>
+
+<section class="grid section" aria-label="App Store badges">
+  <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."'
+    width="336"
+    class="image"
+  />
+  <Image
+    src={appStoreFeatured}
+    alt='"Essential Apps for Developers" badge from the Apple App Store. The badge is black with white text and a white Apple logo, surrounded by a laurel wreath.'
+    width="336"
+    class="image"
+  />
+</section>

docs/src/components/Navigation.astro

@@ -37,13 +37,15 @@ import appIcon from "../assets/rocketsim-app-icon.png";
   }
 
   .navigation__logo {
+    display: none;
     width: 2.75rem;
     height: auto;
 
     opacity: 0;
     transition: opacity 0.3s;
 
     @media (min-width: 850px) {
+      display: block;
       grid-column: span 1 / -1;
       justify-self: end;
     }
@@ -95,9 +97,9 @@ import appIcon from "../assets/rocketsim-app-icon.png";
       ([e]) =>
         e.target.classList.toggle(
           "navigation-wrapper--sticky",
-          e.intersectionRatio < 1
+          e.intersectionRatio < 1,
         ),
-      { threshold: [1] }
+      { threshold: [1] },
     );
 
     observer.observe(el);

docs/src/components/Reviews.astro

@@ -0,0 +1,146 @@
+---
+import { Image } from "astro:assets";
+
+import majidImage from "../assets/majid.jpeg";
+import jordiImage from "../assets/jordi.jpeg";
+import joshImage from "../assets/josh.jpeg";
+---
+
+<style>
+  section {
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+  }
+
+  ul {
+    row-gap: 4rem;
+    padding: 0;
+
+    list-style: none;
+  }
+
+  li {
+    @media (min-width: 800px) {
+      grid-column: span 3;
+    }
+
+    @media (min-width: 1300px) {
+      grid-column: span 4;
+    }
+  }
+
+  figure {
+    margin: 0;
+  }
+
+  blockquote {
+    margin: 0 0 1rem;
+
+    font-size: 1.375rem;
+    font-weight: 600;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  figcaption {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .image {
+    width: 3rem;
+    height: 3rem;
+
+    border-radius: 50%;
+  }
+
+  cite {
+    display: block;
+
+    color: var(--text-color-light);
+    font-style: normal;
+  }
+
+  a {
+    display: block;
+
+    font-style: italic;
+    color: var(--text-color);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+</style>
+
+<section aria-label="Reviews from users">
+  <ul class="grid">
+    <li>
+      <figure>
+        <blockquote>
+          <p>
+            "I use <strong>RocketSim</strong> a lot to create recordings for my articles.
+            The touches now make it even easier to share my learnings."
+          </p>
+        </blockquote>
+        <figcaption>
+          <Image
+            src={majidImage}
+            alt="Majid Jabrayilov"
+            width="96"
+            class="image"
+          />
+          <div class="cite-wrapper">
+            <cite>Majid Jabrayilov</cite>
+            <a href="https://swiftwithmajid.com" target="_blank"
+              >swiftwithmajid.com</a
+            >
+          </div>
+        </figcaption>
+      </figure>
+    </li>
+    <li>
+      <figure>
+        <blockquote>
+          <p>
+            "<strong>RocketSim</strong> helps me to create localized preview videos
+            for Soosee, ready to upload to App Store Connect."
+          </p>
+        </blockquote>
+        <figcaption>
+          <Image src={jordiImage} alt="Jordi Bruin" width="96" class="image" />
+          <div class="cite-wrapper">
+            <cite>Jordi Bruin</cite>
+            <a href="https://soosee.app" target="_blank">soosee.app</a>
+          </div>
+        </figcaption>
+      </figure>
+    </li>
+    <li>
+      <figure>
+        <blockquote>
+          <p>
+            "Recordings with touches and high-quality GIFs from <strong
+              >RocketSim</strong
+            > are exactly what I need to show what I’m working on."
+          </p>
+        </blockquote>
+        <figcaption>
+          <Image src={joshImage} alt="Josh Holtz" width="96" class="image" />
+          <div class="cite-wrapper">
+            <cite>Josh Holtz</cite>
+            <a href="https://joshholtz.com">joshholtz.com</a>
+          </div>
+        </figcaption>
+      </figure>
+    </li>
+  </ul>
+</section>

docs/src/pages/index.astro

@@ -5,6 +5,8 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 import Navigation from "../components/Navigation.astro";
 import NavigationLink from "../components/NavigationLink.astro";
 import Header from "../components/Header.astro";
+import AppStore from "../components/AppStore.astro";
+import Reviews from "../components/Reviews.astro";
 
 import logoImage from "../assets/rocketsim-logo.svg";
 
@@ -52,6 +54,9 @@ const features = await Promise.all(
     </NavigationLink>
   </Navigation>
   <main>
+    <AppStore />
+    <Reviews />
+
     {
       features.map((feature) => (
         <>

docs/src/styles/global.css

@@ -54,11 +54,15 @@ strong {
   margin: 0 2rem;
 
   @media (min-width: 600px) {
+    grid-template-columns: repeat(9, [col-start] 1fr);
     grid-gap: 0 1rem;
-    grid-template-columns: repeat(8, [col-start] 1fr);
     margin: 0 5rem;
   }
 
+  @media (min-width: 800px) {
+    grid-gap: 0 2rem;
+  }
+
   @media (min-width: 1300px) {
     grid-template-columns: repeat(12, [col-start] 1fr);
     margin-right: auto;