feat(web): more wip features page

web/src/routes/features/+page.svelte

@@ -1,14 +1,86 @@
 <div class='container-xl'>
   <div class='content px-10'>
     <h1 class='w-full font-weight-bold text-white'>
-      Explore, Watch, and Dive into the World of Animation.
+      Explore, Find, and Dive into the World of Animation.
     </h1>
     <p class='text-muted font-size-16 w-600 mw-full'>
-      Embark on a journey through our Anime Discovery Hub, where seamless integration and advanced filtering redefine your anime experience. Discover, watch, and dive into animation like never before.
+      Embark on a journey through our Anime discovery, where seamless integration and advanced filtering redefine your anime experience. Discover, watch, and dive into animation like never before.
     </p>
   </div>
-  <div class='content row gap-15'>
-
+  <div class='content row pb-20'>
+    <div class='col-12 col-lg-9 p-10'>
+      <div class='w-full card flex-grow-1 pb-0 pt-15 m-0 d-flex flex-column h-500'>
+        <h4 class='text-center font-weight-bold text-white mb-0'>
+          Anything you want
+        </h4>
+        <p class='text-center text-muted font-size-14'>Filter anime by name, genre, season, year, format, status.<br />Browse lists, track sequels and more.</p>
+        <div class='flex-grow-1 w-full overflow-hidden d-flex position-relative'>
+          <div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-50' />
+          <img src='/search.webp' alt='search' class='w-full h-full' />
+        </div>
+      </div>
+    </div>
+    <div class='col-12 col-lg-3 p-10'>
+      <div class='w-full card flex-grow-1 pb-0 pt-15 m-0 d-flex flex-column align-items-center h-lg-500 h-600'>
+        <h4 class='text-center font-weight-bold text-white mb-0'>
+          Track your progress
+        </h4>
+        <p class='text-center text-muted font-size-14'>With a click of a button you can track your watch progress in no time.</p>
+        <div class='flex-grow-1 overflow-hidden d-flex position-relative w-full w-lg-full w-sm-three-quarter'>
+          <div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-50' />
+          <img src='/episodes.webp' alt='search' class='w-full h-full' />
+        </div>
+      </div>
+    </div>
+    <div class='col-12 col-lg-4 p-10'>
+      <div class='w-full card flex-grow-1 pb-0 pt-15 m-0 d-flex flex-column align-items-center h-lg-500 h-600'>
+        <h4 class='text-center font-weight-bold text-white mb-0'>
+          Discover anything
+        </h4>
+        <p class='text-center text-muted font-size-14'>Find new anime, watch trailers, bookmark and share with friends.</p>
+        <div class='flex-grow-1 overflow-hidden d-flex position-relative w-full w-lg-full w-sm-three-quarter'>
+          <div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-50' />
+          <img src='/episodes.webp' alt='search' class='w-full h-full' />
+          <!-- preview card hover -->
+        </div>
+      </div>
+    </div>
+    <div class='col-12 col-lg-4 p-10'>
+      <div class='w-full card flex-grow-1 pb-0 pt-15 m-0 d-flex flex-column align-items-center h-lg-500 h-600'>
+        <h4 class='text-center font-weight-bold text-white mb-0'>
+          See whats next
+        </h4>
+        <p class='text-center text-muted font-size-14'>View airing schedules, upcoming releases and the expected release times.</p>
+        <div class='flex-grow-1 overflow-hidden d-flex position-relative w-full w-lg-full w-sm-three-quarter'>
+          <div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-50' />
+          <img src='/episodes.webp' alt='search' class='w-full h-full' />
+          <!-- schedule page -->
+        </div>
+      </div>
+    </div>
+    <div class='col-12 col-lg-4 p-10'>
+      <div class='w-full card flex-grow-1 pb-0 pt-15 m-0 d-flex flex-column h-500'>
+        <h4 class='text-center font-weight-bold text-white mb-0'>
+          Don't miss out on anything
+        </h4>
+        <p class='text-center text-muted font-size-14'>Browse sequels, prequels and side stories. Track friends<br />and view recommendations.</p>
+        <div class='flex-grow-1 w-full overflow-hidden d-flex position-relative'>
+          <div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-50' />
+          <!-- view details left side -->
+          <img src='/search.webp' alt='search' class='w-full h-full' />
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- <div class='content px-10'>
+    <h1 class='w-full font-weight-bold text-white'>
+      Control Every Frame of Your Viewing Experience.
+    </h1>
+    <p class='text-muted font-size-16 w-600 mw-full'>
+      From full subtitle support to intuitive keybinds, our platform offers unparalleled control. Immerse yourself in the cinematic experience with Picture-in-Picture, Discord integration, and a suite of features designed to make every frame a masterpiece.
+    </p>
+  </div>
+  <div class='content row pb-20'>
     <div class='w-full w-lg-three-quarter p-10'>
       <div class='w-full card flex-grow-1 pb-0 pt-15 m-0 d-flex flex-column h-500'>
         <h4 class='text-center font-weight-bold text-white mb-0'>
@@ -33,7 +105,93 @@
         </div>
       </div>
     </div>
+    <div class='w-full w-lg-quarter p-10'>
+      <div class='w-full card flex-grow-1 pb-0 pt-15 m-0 d-flex flex-column align-items-center h-lg-500 h-600'>
+        <h4 class='text-center font-weight-bold text-white mb-0'>
+          Discover anime
+        </h4>
+        <p class='text-center text-muted font-size-14'>Find new anime, watch trailers, bookmark and share with friends.</p>
+        <div class='flex-grow-1 overflow-hidden d-flex position-relative w-full w-lg-full w-sm-three-quarter'>
+          <div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-50' />
+          <img src='/episodes.webp' alt='search' class='w-full h-full' />
+          <!-- preview card hover
+        </div>
+      </div>
+    </div>
+    <div class='w-full w-lg-three-quarter p-10'>
+      <div class='w-full card flex-grow-1 pb-0 pt-15 m-0 d-flex flex-column h-500'>
+        <h4 class='text-center font-weight-bold text-white mb-0'>
+          Don't miss out on anything
+        </h4>
+        <p class='text-center text-muted font-size-14'>Browse sequels, prequels and side stories. Track friends<br />and view recommendations.</p>
+        <div class='flex-grow-1 w-full overflow-hidden d-flex position-relative'>
+          <div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-50' />
+          <!-- view details left side
+          <img src='/search.webp' alt='search' class='w-full h-full' />
+        </div>
+      </div>
+    </div>
   </div>
+  <div class='content px-10'>
+    <h1 class='w-full font-weight-bold text-white'>
+      Redefining Your Torrent Experience.
+    </h1>
+    <p class='text-muted font-size-16 w-600 mw-full'>
+      Our platform provides customization options, real-time streaming, and meticulous torrent management. Select your downloads folder, track progress on the seek bar, and immerse yourself in a symphony of features that make torrenting a seamless and personalized journey.
+    </p>
+  </div>
+  <div class='content row pb-20'>
+    <div class='w-full w-lg-three-quarter p-10'>
+      <div class='w-full card flex-grow-1 pb-0 pt-15 m-0 d-flex flex-column h-500'>
+        <h4 class='text-center font-weight-bold text-white mb-0'>
+          Anything you want
+        </h4>
+        <p class='text-center text-muted font-size-14'>Filter anime by name, genre, season, year, format, status.<br />Browse your lists, track sequels and more.</p>
+        <div class='flex-grow-1 w-full overflow-hidden d-flex position-relative'>
+          <div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-50' />
+          <img src='/search.webp' alt='search' class='w-full h-full' />
+        </div>
+      </div>
+    </div>
+    <div class='w-full w-lg-quarter p-10'>
+      <div class='w-full card flex-grow-1 pb-0 pt-15 m-0 d-flex flex-column align-items-center h-lg-500 h-600'>
+        <h4 class='text-center font-weight-bold text-white mb-0'>
+          Track your progress
+        </h4>
+        <p class='text-center text-muted font-size-14'>With a click of a button you can track your watch progress in no time.</p>
+        <div class='flex-grow-1 overflow-hidden d-flex position-relative w-full w-lg-full w-sm-three-quarter'>
+          <div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-50' />
+          <img src='/episodes.webp' alt='search' class='w-full h-full' />
+        </div>
+      </div>
+    </div>
+    <div class='w-full w-lg-quarter p-10'>
+      <div class='w-full card flex-grow-1 pb-0 pt-15 m-0 d-flex flex-column align-items-center h-lg-500 h-600'>
+        <h4 class='text-center font-weight-bold text-white mb-0'>
+          Discover anything
+        </h4>
+        <p class='text-center text-muted font-size-14'>Find new anime, watch trailers, bookmark and share with friends.</p>
+        <div class='flex-grow-1 overflow-hidden d-flex position-relative w-full w-lg-full w-sm-three-quarter'>
+          <div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-50' />
+          <img src='/episodes.webp' alt='search' class='w-full h-full' />
+          <!-- preview card hover
+        </div>
+      </div>
+    </div>
+    <div class='w-full w-lg-three-quarter p-10'>
+      <div class='w-full card flex-grow-1 pb-0 pt-15 m-0 d-flex flex-column h-500'>
+        <h4 class='text-center font-weight-bold text-white mb-0'>
+          Don't miss out on anything
+        </h4>
+        <p class='text-center text-muted font-size-14'>Browse sequels, prequels and side stories. Track friends<br />and view recommendations.</p>
+        <div class='flex-grow-1 w-full overflow-hidden d-flex position-relative'>
+          <div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-50' />
+          <!-- view details left side
+          <img src='/search.webp' alt='search' class='w-full h-full' />
+        </div>
+      </div>
+    </div>
+  </div> -->
 </div>
 
 <style>