feat(web): testimonials

web/src/lib/components/Testimonials.svelte

@@ -0,0 +1,69 @@
+<div class='row pt-20'>
+  <div class='col-md-4 col-12'>
+    <div class='card mx-10 my-20 h-200 flex-column d-flex'>
+      <div class='d-flex flex-row text-white align-items-center pb-5'>
+        <img src='/drkninja.webp' class='img-fluid rounded-circle h-50 w-50 mr-20' alt='pfp' />
+        <div>
+          <h4 class='font-weight-bold m-0'>DrkNinja</h4>
+          <p class='text-muted m-0'>@drkninja</p>
+        </div>
+      </div>
+      <p class='text-muted font-size-16 m-0 pt-10 overflow-hidden'>I just wanted to give you my dearest thanks for this app! It has changed the way I consume anime, and honestly it's almost entirely perfect. 9.5/10 would and have recommended.</p>
+    </div>
+    <div class='card mx-10 my-20 h-200 flex-column d-flex'>
+      <div class='d-flex flex-row text-white align-items-center pb-5'>
+        <img src='/jomujomujomu.webp' class='img-fluid rounded-circle h-50 w-50 mr-20' alt='pfp' />
+        <div>
+          <h4 class='font-weight-bold m-0'>jomujomujomu</h4>
+          <p class='text-muted m-0'>@jomujomujomu</p>
+        </div>
+      </div>
+      <p class='text-muted font-size-16 m-0 pt-10 overflow-hidden'>Thank you so much for this! I prefer the quality on torrents but prefer the convenience of streaming.</p>
+    </div>
+  </div>
+  <div class='col-md-4 col-12'>
+    <div class='card mx-10 my-20 h-250 flex-column d-flex'>
+      <div class='d-flex flex-row text-white align-items-center pb-5'>
+        <img src='/avatar_default_6.webp' class='img-fluid rounded-circle h-50 w-50 mr-20' alt='pfp' />
+        <div>
+          <h4 class='font-weight-bold m-0'>Aralakh</h4>
+          <p class='text-muted m-0'>@Aralakh</p>
+        </div>
+      </div>
+      <p class='text-muted font-size-16 m-0 pt-15 overflow-hidden'>Whoa! This is my first time hearing about this app, awesome work. I love that you have the option to turn off English subs! I've been trying to find a site with current anime that doesn't have English subs or where one can turn on Japanese subs, this helps tremendously. Thank you!</p>
+    </div>
+    <div class='card mx-10 my-20 h-250 flex-column d-flex'>
+      <div class='d-flex flex-row text-white align-items-center pb-5'>
+        <img src='/avatar_default_2.webp' class='img-fluid rounded-circle h-50 w-50 mr-20' alt='pfp' />
+        <div>
+          <h4 class='font-weight-bold m-0'>kwokinator</h4>
+          <p class='text-muted m-0'>@kwokinator</p>
+        </div>
+      </div>
+      <p class='text-muted font-size-16 m-0 pt-15 overflow-hidden'>Great app! Having a convenient app like this might actually swing me from binge watching after every season to watching weekly because I'm just too damn lazy to keep downloading new episodes every week for multiple shows instead of one big batch.</p>
+    </div>
+  </div>
+  <div class='col-md-4 col-12'>
+    <div class='card mx-10 my-20 h-200 flex-column d-flex'>
+      <div class='d-flex flex-row text-white align-items-center pb-5'>
+        <img src='/alpharights.webp' class='img-fluid rounded-circle h-50 w-50 mr-20' alt='pfp' />
+        <div>
+          <h4 class='font-weight-bold m-0'>alpharights</h4>
+          <p class='text-muted m-0'>@alpharights
+          </p>
+        </div>
+      </div>
+      <p class='text-muted font-size-16 m-0 pt-10 overflow-hidden'>Much easier for me to just open the app instead of having to type it in the search bar. Really glad this was made.</p>
+    </div>
+    <div class='card mx-10 my-20 h-200 flex-column d-flex'>
+      <div class='d-flex flex-row text-white align-items-center pb-5'>
+        <img src='/avatar_default_0.webp' class='img-fluid rounded-circle h-50 w-50 mr-20' alt='pfp' />
+        <div>
+          <h4 class='font-weight-bold m-0'>jtipt</h4>
+          <p class='text-muted m-0'>@jtipt</p>
+        </div>
+      </div>
+      <p class='text-muted font-size-16 m-0 pt-10 overflow-hidden'>This is quite an amazing app I'm liking it quite a lot. Probably gonna use this for all seasonal anime watching.</p>
+    </div>
+  </div>
+</div>

web/src/routes/+page.svelte

@@ -10,6 +10,7 @@
   import ShowcaseCards from '$lib/components/ShowcaseCards.svelte'
   import VideoShowcase from '$lib/components/VideoShowcase.svelte'
   import EpisodeList from '$lib/components/EpisodeList.svelte'
+  import Testimonials from '$lib/components/Testimonials.svelte'
   import { violetEpisodes } from '$lib/dummyData.js'
 
   export let data
@@ -128,6 +129,17 @@
   </div>
 </div>
 <Stargazers stargazers={data.stargazers} />
+<div class='container-xl'>
+  <hr />
+  <div class='my-20 py-20'>
+    <div class='content'>
+      <h1 class='text-center font-weight-bold text-white'>
+        What they say...
+      </h1>
+    </div>
+    <Testimonials />
+  </div>
+</div>
 <hr class='mb-0' />
 <div class='bg-dark'>
   <div class='container-xl pt-20'>