public/assets/css/components/hero.css

@@ -1,9 +1,16 @@
+/* Custom styles for a special hero */
+#security.hero .hero-image {
+    max-height: 80vh;
+}
+
+/* Public styles for hero component */
+
 .hero {
     --hero-heading-color: var(--parch-color);
     --hero-heading-sub-color: var(--text-color);
     --hero-gn-purple-color: var(--text-color-alt);
     --hero-gn-purple-start: #201026;
-    --hero-gn-purple-end: #2F0E3A;
+    --hero-gn-purple-end: #2f0e3a;
 }
 
 .hero-heading {
@@ -24,6 +31,16 @@
     width: 100%;
 }
 
+.hero-wrapper-rtl {
+    gap: 35px;
+    align-items: flex-start;
+    flex-direction: row-reverse;
+}
+
+.hero-wrapper-rtl .hero-image {
+    margin: 0 !important;
+}
+
 .hero--inverted .hero-wrapper {
     justify-content: flex-start;
 }
@@ -146,7 +163,7 @@
     bottom: 0;
     right: 0;
     height: 150vh;
-    opacity: .2;
+    opacity: 0.2;
 }
 
 .hero--clipped {

src/views/Home.vue

@@ -56,6 +56,9 @@
       <li :class="{ active: activeSection === 'about' }">
         <button @click="scrollTo('#about')">About</button>
       </li>
+      <li :class="{ active: activeSection === 'security' }">
+        <button @click="scrollTo('#security')">Security</button>
+      </li>
       <li :class="{ active: activeSection === 'play' }">
         <button @click="scrollTo('#play')">Play</button>
       </li>
@@ -103,6 +106,39 @@
     </div>
   </section>
 
+  <section class="hero hero--inverted hero--big" id="security">
+    <div class="hero-wrapper hero-wrapper-rtl container">
+      <img
+        class="hero-image onFocus"
+        data-focus-class="fadeInRight"
+        src="/assets/images/icons/security.png"
+        alt="Why Parch..."
+      />
+      <article class="hero-content">
+        <header class="hero-heading">
+          <h2 class="color--work-1">Security</h2>
+          <b class="color--work-2">Build on trust.</b>
+        </header>
+        <div class="flexList">
+          <div class="text text--spaced">
+            <p>
+              ParchLinux inherits the renowned stability and security of Arch
+              Linux. This foundation ensures your system remains protected from
+              potential threats. Regular updates keep your software patched and
+              secure, while the inherent nature of Arch Linux promotes a
+              minimalist approach, reducing the attack surface for
+              vulnerabilities. Additionally, the supportive ParchLinux community
+              is always vigilant, offering assistance and keeping you informed
+              about security best practices. With ParchLinux, you can enjoy the
+              freedom and power of Linux with the peace of mind that comes with
+              a secure and trustworthy operating system.
+            </p>
+          </div>
+        </div>
+      </article>
+    </div>
+  </section>
+
   <section class="hero hero--big hero--gn-purple hero--clipped" id="play">
     <div class="hero-back">
       <video autoplay muted loop playsinline>