feat: horizontal snap-scroll testimonials on mobile

src/components/site/Testimonials.astro

@@ -22,15 +22,6 @@ const defaultItems: Testimonial[] = [
     companyLogo: '/site/logos/doc-detective.png',
     image: '/site/manny.jpeg',
   },
-  {
-    quote:
-      'This is the most "make something people want" feature I have ever seen. It solves my problem in a better way than I thought would be possible.',
-    author: 'Alan Mond',
-    title: 'Docs Maintainer',
-    company: 'Bazel',
-    companyLogo: '/site/logos/bazel-icon.png',
-    image: '/site/alan.jpeg',
-  },
   {
     quote:
       'Promptless dramatically speeds up my time-to-first-draft. My team literally calls me a 10x tech writer.',
@@ -40,6 +31,15 @@ const defaultItems: Testimonial[] = [
     companyLogo: '/site/logos/runpod.png',
     image: '/site/mo.jpeg',
   },
+  {
+    quote:
+      'This is the most "make something people want" feature I have ever seen. It solves my problem in a better way than I thought would be possible.',
+    author: 'Alan Mond',
+    title: 'Docs Maintainer',
+    company: 'Bazel',
+    companyLogo: '/site/logos/bazel-icon.png',
+    image: '/site/alan.jpeg',
+  },
   {
     quote:
       "Promptless updates every relevant section of our docs, catching both the latest changes and old spots we'd missed. It feels like magic.",

src/styles/site.css

@@ -272,9 +272,34 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 550px) {
   .pl-site-testimonials-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: unset;
+    grid-template-rows: repeat(2, 1fr);
+    grid-auto-flow: column;
+    grid-auto-columns: calc(100% - 3rem);
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .pl-site-testimonials-grid::-webkit-scrollbar {
+    display: none;
+  }
+
+  .pl-site-testimonial {
+    scroll-snap-align: start;
+  }
+
+  .pl-site-testimonials::after {
+    content: '•  •  •';
+    display: block;
+    text-align: center;
+    color: #d1d5db;
+    font-size: 1.1rem;
+    letter-spacing: 0.1em;
+    margin-top: 0.75rem;
   }
 }
 
@@ -1261,10 +1286,6 @@
     padding-left: 2.8rem;
   }
 
-  .pl-site-testimonials-grid {
-    grid-template-columns: 1fr;
-  }
-
   .pl-site-form-row input {
     min-width: 0;
     width: 100%;