From 7a1793c3db3fdb72a83e7f53965d660950e381a1 Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Tue, 5 Mar 2024 22:44:07 +0100
Subject: [PATCH] feat(web): improve home screen

---
 web/src/lib/components/Footer.svelte          |  2 +-
 .../lib/components/ShowcaseEpisodes.svelte    | 65 +++++++++++++++++++
 web/src/lib/components/VideoShowcase.svelte   |  4 --
 web/src/lib/css.css                           |  5 ++
 web/src/routes/+page.svelte                   | 45 +++++++++----
 web/src/routes/download/+page.svelte          | 13 ++--
 6 files changed, 112 insertions(+), 22 deletions(-)
 create mode 100644 web/src/lib/components/ShowcaseEpisodes.svelte

diff --git a/web/src/lib/components/Footer.svelte b/web/src/lib/components/Footer.svelte
index 607ac2b..d5be3be 100644
--- a/web/src/lib/components/Footer.svelte
+++ b/web/src/lib/components/Footer.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div class='container pb-20 font-weight-light font-size-16 text-muted position-sticky' style='top: 100%'>
-  <hr class='w-full my-20' />
+  <hr class='w-full mb-20 mt-0' />
   <div class='row px-20 px-sm-0 mb-20 content'>
     <div class='col-12 col-md-4 pt-20 mb-20 text-md-left'>
       <a href='/'>
diff --git a/web/src/lib/components/ShowcaseEpisodes.svelte b/web/src/lib/components/ShowcaseEpisodes.svelte
new file mode 100644
index 0000000..ddd86e7
--- /dev/null
+++ b/web/src/lib/components/ShowcaseEpisodes.svelte
@@ -0,0 +1,65 @@
+<script>
+  import { since } from '@/modules/util.js'
+</script>
+
+<div class='d-flex flex-column pl-lg-20'>
+  <div class='w-full my-20 content-visibility-auto scale opacity-half px-20 h-150' tabindex='0' role='button'>
+    <div class='rounded w-full h-full overflow-hidden d-flex flex-xsm-column flex-row pointer bg-black'>
+      <div class='h-full'><img alt='thumbnail' src='https://artworks.thetvdb.com/banners/series/330139/episodes/5e9182bfcfe47.jpg' class='img-cover h-full' /></div>
+      <div class='h-full w-full px-20 py-15 d-flex flex-column'>
+        <div class='w-full d-flex flex-row mb-15'>
+          <div class='text-white font-weight-bold font-size-16 overflow-hidden title'>1. "I Love You"</div>
+          <div class='ml-auto pl-5'>25m</div>
+        </div>
+        <div class='progress mb-15' style='height: 2px; min-height: 2px;'><div class='progress-bar w-full' /></div>
+        <div class='font-size-12 overflow-hidden'>Hodgins retrieves Violet from the hospital, as Major Gilbert asked him to look out for her. After they meet Gilbert`s relatives, he offers her a job.</div>
+        <div class='pt-10 font-size-12 mt-auto'>{since(new Date('January 11, 2018'))}</div>
+      </div>
+    </div>
+  </div>
+  <div class='w-full my-20 content-visibility-auto scale h-150' tabindex='0' role='button'>
+    <div class='rounded w-full h-full overflow-hidden d-flex flex-xsm-column flex-row pointer border bg-dark'>
+      <div class='h-full'><img alt='thumbnail' src='https://artworks.thetvdb.com/banners/series/330139/episodes/5e918871eb4d4.jpg' class='img-cover h-full' /></div>
+      <div class='h-full w-full px-20 py-15 d-flex flex-column'>
+        <div class='w-full d-flex flex-row mb-15'>
+          <div class='text-white font-weight-bold font-size-16 overflow-hidden title'>2. Not Coming Back</div>
+          <div class='ml-auto pl-5'>25m</div>
+        </div>
+        <div class='font-size-12 overflow-hidden'>Violet tries to adjust to her new job: she needs to learn typing, and her coworkers question whether she has the right demeanor for letter writing.</div>
+        <div class='pt-10 font-size-12 mt-auto'>{since(new Date('January 18, 2018'))}</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .opacity-half {
+    opacity: 30%;
+  }
+  .title {
+    display: -webkit-box !important;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+  .scale {
+    transition: transform 0.2s ease;
+  }
+  .scale:hover{
+    transform: scale(1.05);
+  }
+  .border {
+    --dm-border-color: white
+  }
+  @media (max-width: 470px) {
+    .flex-xsm-column {
+      flex-direction: column !important;
+    }
+    .scale {
+      height: auto !important;
+    }
+    img {
+      width: 100%;
+      height: 15rem !important;
+    }
+  }
+</style>
diff --git a/web/src/lib/components/VideoShowcase.svelte b/web/src/lib/components/VideoShowcase.svelte
index f970eeb..32fdfd6 100644
--- a/web/src/lib/components/VideoShowcase.svelte
+++ b/web/src/lib/components/VideoShowcase.svelte
@@ -25,10 +25,6 @@
 </div>
 
 <style>
-  .app-image {
-    aspect-ratio: 2/1;
-    object-fit: contain;
-  }
   .overlay-gradient {
     background: linear-gradient(0deg, #101113 15.27%, rgba(16, 17, 19, 0.92) 41.28%, rgba(16, 17, 19, 0.25) 74.32%);
     pointer-events: none;
diff --git a/web/src/lib/css.css b/web/src/lib/css.css
index 4bbd6a9..eb714a6 100644
--- a/web/src/lib/css.css
+++ b/web/src/lib/css.css
@@ -13,4 +13,9 @@ hr {
 
 :root {
   --container-xl-max-width: 150rem
+}
+
+.app-image {
+  aspect-ratio: 2/1;
+  object-fit: contain;
 }
\ No newline at end of file
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 5ff15f4..302c3bf 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -9,8 +9,8 @@
   import Stargazers from '$lib/components/Stargazers.svelte'
   import ShowcaseCards from '$lib/components/ShowcaseCards.svelte'
   import VideoShowcase from '$lib/components/VideoShowcase.svelte'
+  import ShowcaseEpisodes from '$lib/components/ShowcaseEpisodes.svelte'
 
-  /** @type {import('./$types').PageData} */
   export let data
 </script>
 
@@ -86,13 +86,13 @@
 <div class='container-xl'>
   <hr />
   <div class='my-20 py-20'>
-    <div class='row flex-column-reverse flex-md-row'>
-      <div class='col-md-5 col-12'>
+    <div class='row flex-column-reverse flex-lg-row'>
+      <div class='col-lg-6 col-12'>
         <div class='content'>
-          <img src='player.webp' alt='player' class='mw-full' />
+          <ShowcaseEpisodes />
         </div>
       </div>
-      <div class='col-md-7 col-12'>
+      <div class='col-lg-6 col-12 align-items-center d-flex'>
         <div class='content'>
           <h1 class='w-full font-weight-bold text-white'>
             It already does that.
@@ -104,13 +104,11 @@
   </div>
   <hr />
   <div class='my-20 py-20'>
-    <div>
-      <div class='content'>
-        <h1 class='text-center font-weight-bold text-white'>
-          Available everywhere.
-        </h1>
-        <p class='text-center text-muted font-size-16'>No need to install different apps for different devices and platforms, effortlessly install on any<br />platform, ensuring a seamless anime experience on any device. Whether you prefer Windows, Linux, Mac, Android and more.</p>
-      </div>
+    <div class='content'>
+      <h1 class='text-center font-weight-bold text-white'>
+        Available everywhere.
+      </h1>
+      <p class='text-center text-muted font-size-16'>No need to install different apps for different devices and platforms, effortlessly install on any<br />platform, ensuring a seamless anime experience on any device. Whether you prefer Windows, Linux, Mac, Android and more.</p>
     </div>
     <div class='platform-grid p-20 text-white'>
       <WindowsSvg class='w-50 h-50' />
@@ -129,8 +127,31 @@
   </div>
 </div>
 <Stargazers stargazers={data.stargazers} />
+<hr class='mb-0' />
+<div class='bg-dark'>
+  <div class='container-xl pt-20'>
+    <div class='pt-20'>
+      <div class='content my-0 align-items-center d-flex flex-column'>
+        <h1 class='text-center font-weight-bold text-white mb-0'>
+          MIRU
+        </h1>
+        <p class='text-center text-muted font-size-16'>Start your journey right here. Right now. Get started by<br />clicking download button below.</p>
+        <a href='/download' class='btn btn-danger btn-lg'>
+          Download
+        </a>
+
+        <div class='h-150 w-full overflow-hidden mt-20 pt-20'>
+          <img src='app.webp' alt='app' class='mw-full px-20 w-full app-image' />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 
 <style>
+  .btn-danger {
+    --dm-button-danger-bg-color: #e5204c
+  }
   .glow {
     background-image: radial-gradient(circle farthest-side,rgba(255,0,182,.05),hsla(0,0%,100%,0));
     pointer-events: none;
diff --git a/web/src/routes/download/+page.svelte b/web/src/routes/download/+page.svelte
index be83ef5..79a0868 100644
--- a/web/src/routes/download/+page.svelte
+++ b/web/src/routes/download/+page.svelte
@@ -6,7 +6,6 @@
   import AndroidTVSVG from '$lib/svg/AndroidTVSVG.svelte'
   import SteamOSSVG from '$lib/svg/SteamOSSVG.svelte'
 
-  /** @type {import('./$types').PageData} */
   export let data
 
   function getOS () {
@@ -39,13 +38,17 @@
     const releases = await data.releases
 
     const { assets } = releases[0]
+
+    /** @param {string} ext */
+    const url = ext => assets.find(({ name }) => name.endsWith(ext))?.browser_download_url || ''
+
     downloads = {
       iOS: 'https://www.android.com',
       Android: '',
-      Windows: assets.find(({ name }) => name.endsWith('installer.exe'))?.browser_download_url || '',
-      'Mac OS': assets.find(({ name }) => name.endsWith('.dmg'))?.browser_download_url || '',
-      Linux: assets.find(({ name }) => name.endsWith('.AppImage'))?.browser_download_url || '',
-      Debian: assets.find(({ name }) => name.endsWith('.deb'))?.browser_download_url || ''
+      Windows: url('installer.exe'),
+      'Mac OS': url('.dmg'),
+      Linux: url('.AppImage'),
+      Debian: url('.deb')
     }
     return downloads
   }