Update testimonials

Author: nukeop

packages/website/src/components/Testimonial.astro

@@ -9,10 +9,10 @@ const Element = url ? 'a' : 'div';
 
 <Element
   href={url}
-  class="themed-border border-border bg-background-secondary rounded-md shadow-shadow p-5 flex flex-col gap-3 text-left"
+  class="themed-border border-border bg-background-secondary rounded-md shadow-shadow p-5 flex flex-col gap-3 text-left w-80 shrink-0 transition duration-200 hover:brightness-95 prefers-dark:hover:brightness-125"
 >
-  <p class="text-sm">{quote}</p>
-  <span class="text-xs text-foreground-secondary font-bold self-end">
-    — {author}{source ? `, ${source}` : ''}
+  <span class="text-base font-bold">
+    {author}{source ? `, ${source}` : ''}
   </span>
+  <p class="text-sm whitespace-pre-line">{quote}</p>
 </Element>

packages/website/src/components/Testimonials.astro

@@ -1,15 +1,37 @@
 ---
 import { testimonials } from '../data/testimonials';
 import Testimonial from './Testimonial.astro';
+
+const row1 = testimonials.filter((_, index) => index % 2 === 0);
+const row2 = testimonials.filter((_, index) => index % 2 !== 0);
 ---
 
-<section class="px-4 pb-16 md:px-8 w-full max-w-5xl mx-auto">
+<section class="pb-16 w-full overflow-hidden group">
   <h3
-    class="font-heading font-black text-2xl md:text-3xl uppercase tracking-widest text-center mb-8"
+    class="font-heading font-black text-2xl md:text-3xl uppercase tracking-widest text-center mb-8 px-4"
   >
     People love Nuclear
   </h3>
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-6">
-    {testimonials.map((testimonial) => <Testimonial {...testimonial} />)}
+  <div class="flex flex-col gap-5">
+    <div
+      class="flex gap-5 w-fit"
+      style="animation: marquee-scroll 30s linear infinite; animation-play-state: running;"
+    >
+      {row1.map((testimonial) => <Testimonial {...testimonial} />)}
+      {row1.map((testimonial) => <Testimonial {...testimonial} />)}
+    </div>
+    <div
+      class="flex gap-5 w-fit"
+      style="animation: marquee-scroll 45s linear infinite; animation-play-state: running;"
+    >
+      {row2.map((testimonial) => <Testimonial {...testimonial} />)}
+      {row2.map((testimonial) => <Testimonial {...testimonial} />)}
+    </div>
   </div>
 </section>
+
+<style>
+  section:hover > div > div {
+    animation-play-state: paused;
+  }
+</style>

packages/website/src/data/testimonials.ts

@@ -12,12 +12,45 @@ export const testimonials: Testimonial[] = [
     author: 'itismyjob',
     source: 'redditor',
   },
+  {
+    quote: 'Sounds illegal.',
+    author: 'ineedyourdiscipline',
+    url: 'https://old.reddit.com/r/privacy/comments/aggycb/nuclear_a_free_alternative_to_spotify_no_drm_100/ee68tsi/',
+    source: 'redditor',
+  },
   {
     quote:
       "I used nuclear and had a horrible experience with it. It looks bad, you wait for 1 minute to play a 3 minute song, it's slow as fuck. Probably it's because of Electron, but it is used by so many people that I started cringing.",
     author: 'Anonymous /g/ user',
     url: 'https://desuarchive.org/g/thread/80081582/#80096271',
   },
+  {
+    quote: 'Hard to tell if this is a real project or just a prank.',
+    author: 'incone123',
+    source: 'HN user',
+    url: 'https://news.ycombinator.com/item?id=45117618',
+  },
+  {
+    quote:
+      "I downloaded Nuclear (the AppImage, if that matters) and booted it up. Instant 300MB RAM usage.\n\nI think I'll pass.",
+    author: 'throwaway58576',
+    source: 'HN user',
+    url: 'https://news.ycombinator.com/item?id=45118538',
+  },
+  {
+    quote:
+      "Half the time trying to play a song doesn't work. Dozens and dozens of javascript errors in the console, most of which seem to be legitimate (trying to parse xml as json, type errors, and other serious stuff). Electron. That's three strikes, I'm out.",
+    author: 'markasoftware',
+    source: 'HN user',
+    url: 'https://news.ycombinator.com/item?id=45120348',
+  },
+  {
+    quote:
+      "Can I add a testimonial?\nRun the thing, clicked a song, it said it can't play it, removed the thing.",
+    author: 'kesor',
+    source: 'HN user',
+    url: 'https://news.ycombinator.com/item?id=45119307',
+  },
   {
     quote:
       "If they aren't paying the artists this will be wiped off the face of the net in a month.",
@@ -28,7 +61,7 @@ export const testimonials: Testimonial[] = [
     quote: 'As a musician, fuck everything about this',
     author: 'Rockytriton',
     source: 'redditor',
-    url: 'https://www.reddit.com/r/linux/comments/ag82rn/nuclear_a_free_alternative_to_spotify_no_drm_100/ee5q1ds/',
+    url: 'https://old.reddit.com/r/linux/comments/ag82rn/nuclear_a_free_alternative_to_spotify_no_drm_100/ee5q1ds/',
   },
   {
     quote:

packages/website/src/styles/global.css

@@ -87,3 +87,12 @@
   background-size: cover;
   background-position: center;
 }
+
+@keyframes marquee-scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}