homepage wip

src/views/index/index.hbs

@@ -155,18 +155,18 @@
         </div>
       </div>
       <div class="col-md-6 aspect-ratio-3by2">
-        <a class="card border-0 px-4 pt-4 rounded-4 d-flex flex-column h-100 bg-dark-subtle overflow-hidden text-decoration-none"
+        <a class="card border-0 px-4 pt-4 rounded-4 d-flex flex-column h-100 bg-hbchannel overflow-hidden text-decoration-none"
            href="https://repo.webosbrew.org/apps/org.webosbrew.hbchannel">
           <h3 class="flex-fill">Meet Homebrew Channel</h3>
-          <p>Alternative app store</p>
-          <div class="mt-3 tv-container shadow shadow-lg">
+          <p>Discover and install apps with ease.</p>
+          <div class="mt-2 tv-container shadow shadow-lg">
             <img class="tv-screen w-100" src="../../img/screenshots/hbchannel.png" alt="Homebrew Channel app"/>
           </div>
         </a>
       </div>
-      <div class="col-md-6 aspect-ratio-3by2">
+      <div class="col-md-6 aspect-ratio-md-3by2">
         <div class="card border-0 p-4 rounded-4 d-flex flex-column justify-content-end h-100 bg-dark-subtle">
-          <h3>
+          <h3 class="card-title">
             Setup with a few steps,<br>
             safe and simple.<br>
             <a class="text-decoration-none stretched-link" href="#get-started">Get started<i
@@ -180,14 +180,29 @@
   <div class="py-3 bg-dark-subtle"></div>
 
   <section id="mods" class="container-lg py-5">
-    <h2 class="text-center">Gain More Control*</h2>
+    <h2 class="text-center">Gain More Control</h2>
     <div class="row g-3 mt-5">
+      <div class="col-md-6 aspect-ratio-3by2">
+        <div
+            class="card border-0 rounded-4 h-100 bg-dark-subtle d-flex flex-column justify-content-end overflow-hidden">
+          <img class="card-img-top object-fit-contain" src="../../img/screenshots/aerial-screensaver.png"
+               alt="Screensaver"/>
+          <div class="card-body p-4">
+            <h3 class="card-title">Screensavers</h3>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6 aspect-ratio-3by2">
+        <div class="card border-0 rounded-4 h-100 bg-dark-subtle overflow-hidden">
+          <img class="card-img object-fit-contain" src="../../img/photos/amblight-setup.jpg" alt="Amblight setup"/>
+          <div class="card-img-overlay p-4">
+            <h3 class="card-title">Ambient light</h3>
+          </div>
+        </div>
+      </div>
     </div>
-    <p>
-      TODO: Screensavers, privacy protection scripts, AltHome
-    </p>
     <div class="mt-2">
-      <small class="text-body-tertiary">*Mods are available for rooted TVs only.</small>
+      <small class="text-body-tertiary">Mods are available for rooted TVs only.</small>
     </div>
   </section>
 
@@ -207,7 +222,7 @@
           <img src="../../img/icon32.svg" width="48" height="48"
                class="position-absolute bottom-0 end-0 me-2 mb-2 opacity-75" alt="webOS Homebrew"/>
           <h5 class="card-title text-white">Root your TV</h5>
-          <p class="card-text">
+          <p class="card-text text-white opacity-75">
             Jailbreak your TV and install Homebrew Channel.
             <br>
             Gain more control over your TV.
@@ -222,7 +237,7 @@
           <img src="../../img/devmode32.svg" width="48" height="48"
                class="position-absolute bottom-0 end-0 me-2 mb-2 opacity-75" alt="Dev Mode"/>
           <h5 class="card-title text-white">Install via Dev Mode</h5>
-          <p class="card-text">
+          <p class="card-text text-white opacity-75">
             Install apps and games via Developer Mode.
             <br>
             No root required.
@@ -249,22 +264,22 @@
     <div class="row g-3 mt-5">
       <div class="col-sm-6 col-lg-3">
         <div class="card card-body rounded-4 bg-dark-subtle">
-          <i class="bi bi-discord"></i>Join openlgtv Discord
+          <i class="bi bi-discord text-discord"></i>Join openlgtv Discord
         </div>
       </div>
       <div class="col-sm-6 col-lg-3">
         <div class="card card-body rounded-4 bg-dark-subtle">
-          <i class="bi bi-github"></i>Check out our GitHub
+          <i class="bi bi-github"></i>Check out our repositories
         </div>
       </div>
       <div class="col-sm-6 col-lg-3">
         <div class="card card-body rounded-4 bg-dark-subtle">
-          <i class="bi bi-lightbulb-fill"></i>Suggest an idea
+          <i class="bi bi-lightbulb-fill text-amber-500"></i>Suggest an idea
         </div>
       </div>
       <div class="col-sm-6 col-lg-3">
         <div class="card card-body rounded-4 bg-dark-subtle">
-          <i class="bi bi-heart-fill"></i>Donate
+          <i class="bi bi-heart-fill text-pink-500"></i>Donate
         </div>
       </div>
     </div>

src/views/index/index.scss

@@ -1,4 +1,5 @@
 @import "../../scss/styles";
+@import "bootstrap/scss/variables";
 
 html {
   scroll-padding-top: 65px;
@@ -178,12 +179,24 @@ html {
   pointer-events: none;
 }
 
-.aspect-ratio-lg-1 {
-  @include media-breakpoint-up(lg) {
-    border-radius: var(--bs-border-radius-xxl);
+.aspect-ratio-3by2 {
+  aspect-ratio: 3/2;
+}
+
+.aspect-ratio-md-3by2 {
+  @include media-breakpoint-up(md) {
+    aspect-ratio: 3/2;
   }
 }
 
-.aspect-ratio-3by2 {
-  aspect-ratio: 3/2;
-}
+.text-discord {
+  color: #5865F2;
+}
+
+.text-amber-500 {
+  color: $yellow-500;
+}
+
+.text-pink-500 {
+  color: $pink-500;
+}