src/components/marquee/Marquee.astro

@@ -4,12 +4,10 @@ import { Icon } from "astro-icon/components";
 const videos = [
   {
     author: '<a href="https://github.com/soramanew">soramane</a>',
-    source: "https://github.com/caelestia-dots/shell",
     path: "/assets/showcase/soramane.mp4",
   },
   {
     author: '<a href="https://outfoxxed.me">outfoxxed</a>',
-    source: "https://git.outfoxxed.me/outfoxxed/nixnew/src/branch/master/modules/user/modules/quickshell",
     path: "/assets/showcase/outfoxxed.mp4",
   },
   {
@@ -22,7 +20,6 @@ const videos = [
   },
   {
     author: '<a href="https://github.com/flickowoa">flicko</a>',
-    source: "https://github.com/flickowoa/zephyr",
     path: "/assets/showcase/flicko.mp4",
   },
 ];
@@ -37,7 +34,7 @@ const videos = [
     </div>
   </div>
   <div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0">
-    {videos.map(({ author, source, path }, index) => <div class="marquee-item">
+    {videos.map(({ author, path }, index) => <div class="marquee-item">
       <div>
         <video
           data-media-index={index}
@@ -50,10 +47,7 @@ const videos = [
         >
           <source src={path} type="video/mp4"/>
         </video>
-        <p>
+        <p>Configuration by <Fragment set:html={author}/></p>
-          Configuration by <Fragment set:html={author}/>
-          {source ? <Fragment>(<a href={source}>source code</a>)</Fragment> : null}
-        </p>
       </div>
     </div>)}
   </div>

src/pages/index.astro

@@ -13,25 +13,23 @@ const title = "Quickshell";
       <h2>building blocks for your desktop</h2>
     </section>
     <Marquee/>
-    <section class="about">
+    <section class="main-page_links">
-      <div class="about-txt">
+      <section class="main-page_links_set">
-        <p>
-          Quickshell is a toolkit for building status bars, widgets, lockscreens,
-          and other desktop components using QtQuick. It can be used alongside your
-          wayland compositor or window manager to build a complete desktop environment.
-          <br class="about-break">
-          <br class="about-break">
-          <a href="/docs/about">More information</a>
-        </p>
-      </div>
-      <div class="about-buttons">
         <a href="/docs/guide/install-setup" class="main-page_link-card">
           <h3>Install</h3>
         </a>
-        <a href="/docs/types" class="main-page_link-card main-page_bluecard">
+        <a href="/docs/types" class="main-page_link-card">
           <h3>Documentation</h3>
         </a>
-      </div>
+      </section>
+      <section class="main-page_links_set">
+        <a href="https://git.outfoxxed.me/quickshell/quickshell-examples" class="main-page_link-card main-page_bluecard">
+          <h3>Examples</h3>
+        </a>
+        <a href="https://git.outfoxxed.me/quickshell/quickshell" class="main-page_link-card main-page_bluecard">
+          <h3>Source Code</h3>
+        </a>
+      </section>
     </section>
     <section class="featurelist-section">
       <FeatureList/>

src/styles/main-page.css

@@ -64,27 +64,6 @@ html.dark .main-page_hero-text {
   }
 }
 
-.about {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
-  padding-inline: 0.5rem;
-  gap: 0.5rem;
-}
-
-.about-txt {
-  font-size: 1.1rem;
-}
-
-.about-break { display: none }
-
-.about-buttons {
-  display: flex;
-  gap: 0.5rem;
-  min-width: 15rem;
-}
-
 .main-page_links {
   display: flex;
   flex-direction: row;
@@ -144,6 +123,55 @@ html.dark .main-page_hero-text {
   }
 }
 
+/*html.dark .main-page_link-card {
+  background-color: transparent;
+  border-color: transparent;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    filter: blur(1.5rem) saturate(150%);
+    transition: filter 0.3s;
+    z-index: 1;
+  }
+
+  &::before {
+    background: linear-gradient(
+      115deg,
+      hsla(var(--green) 20 15 / 0.7) 25%,
+      hsla(var(--green) 25 25 / 0.8) 50%,
+      hsla(var(--green) 60 60 / 0.6) 80%
+    );
+  }
+
+  &:hover {
+    &::before {
+      filter: blur(0.9rem) saturate(200%);
+    }
+  }
+
+  &.main-page_bluecard {
+    background-color: transparent;
+    border-color: transparent;
+
+    &::before {
+      background: linear-gradient(
+        115deg,
+        hsla(var(--blue) 10 15 / 0.7) 25%,
+        hsla(var(--blue) 15 25 / 0.8) 50%,
+        hsla(var(--blue) 60 60 / 0.6) 80%
+      );
+    }
+
+    &:hover {
+      &::before {
+        filter: blur(0.9rem) saturate(200%);
+      }
+    }
+  }
+}*/
+
 html.dark .main-page_link-card {
   background-color: hsl(var(--green) 38% 25%);
   color: hsl(194deg 0% 100%);
@@ -173,10 +201,6 @@ html.dark .main-page_link-card {
   .main-page_links_set {
     flex-wrap: nowrap;
   }
-
-  .about-buttons {
-    flex-direction: row;
-  }
 }
 
 @media (min-width: 63rem) {
@@ -189,15 +213,4 @@ html.dark .main-page_link-card {
     max-width: 78rem;
     padding-inline: 1.5rem;
   }
-
-  .about {
-    flex-wrap: nowrap;
-    max-width: 78rem;
-    padding-inline: 1.5rem;
-    flex-direction: row;
-  }
-
-  .about-txt { max-width: 70% }
-  .about-break { display: unset }
-  .about-buttons { flex-direction: column }
 }