feat(infra): testing arcade with Nico for infra hero

assets/styles/_variable.scss

@@ -126,7 +126,7 @@ $theme-colors: (
     "teal": $teal,
 );
 
-$font-family-sans-serif: "Public Sans", sans-serif;
+$font-family-sans-serif: "Mona Sans", sans-serif;
 $font-family-monospace: "Source Code Pro", monospace;
 
 $font-size-base: 1rem;

assets/styles/app.scss

@@ -23,6 +23,7 @@ body {
     --spacer: #{$spacer};
     --#{$prefix}font-size-lg: #{$font-size-lg};
     --#{$prefix}font-size-sm: #{$font-size-sm};
+    --bs-font-sans-serif: #{$font-family-sans-serif};
 }
 
 @each $breakpoint, $container-max-width in $container-max-widths {

assets/styles/vendor.scss

@@ -38,7 +38,7 @@
 @import  "@kestra-io/ui-libs/src/scss/vendor.scss";
 
 @import "vue-material-design-icons/styles.css";
-@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@100;400;600;700;800&family=Source+Code+Pro:wght@400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@100;400;600;700;800&family=Source+Code+Pro:wght@400;700&family=Mona+Sans:wght@200..900&display=swap");
 @import 'aos/src/sass/aos';
 @import 'vanilla-cookieconsent/dist/cookieconsent.css';
 @import "@vue-flow/core/dist/style.css";

components/company/Orchestrate.vue

@@ -161,7 +161,7 @@ const companyLogos = [
         }
 
         .title {
-          font-family: 'Public Sans';
+          font-family: 'Mona Sans';
           font-weight: 600;
           font-size: 48px;
           line-height: 1;

components/content/ApiDoc.vue

@@ -9,7 +9,7 @@
             allow-authentication="false"
             allow-server-selection="false"
             allow-try="false"
-            regular-font="Public Sans"
+            regular-font="Mona Sans"
             mono-font="Source Code Pro"
         />
     </ClientOnly>

components/content/ApiDocee.vue

@@ -9,7 +9,7 @@
             allow-authentication="false"
             allow-server-selection="false"
             allow-try="false"
-            regular-font="Public Sans"
+            regular-font="Mona Sans"
             mono-font="Source Code Pro"
         />
     </ClientOnly>

components/infrastructure/Govern.vue

@@ -0,0 +1,243 @@
+<template>
+    <section class="govern">
+        <div class="container">
+            <h1><span class="highlight">Orchestrate</span> And <br>
+                <span class="indent"><span class="highlight">Govern</span> The Entire Infrastructure Lifecycle</span>
+            </h1>
+            <div class="cards-container mt-4">
+                <div v-for="card in cards" :key="card.title" class="cards">
+                    <div class="inner-card" :class="{ 'reverse': card.reverse }">
+                        <div class="content-card">
+                            <h2>
+                                {{ card.title }}
+                            </h2>
+                            <p>
+                                {{ card.description }}
+                            </p>
+                        </div>
+                        <div class="img-card">
+                            <img :src="card.image" :alt="card.title" class="img-fluid">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="govern-cta">
+        <div class="container center-container">
+            <h1 class="title">
+                See how teams are using Kestra to replace vRO, Rundeck, and thousands of scripts.
+            </h1>
+            <div class="gradient-border">
+                <NuxtLink href="/demo" class="btn btn-lg btn-secondary">Talk to us</NuxtLink>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+    const cards = [
+        {
+            title: "Standardize IaC Pipeline",
+            description: "Run IaC the same way every time. kestra orchestrates the full lifecycle with shared parameters, secrets, retries, and evidence-\ngrade logs across all environments.",
+            image: "/landing/infrastructure/iac.png"
+        },
+        {
+            title: "Deploy to Any Target, On-Prem or Cloud",
+            description: "Provision and evolve workloads anywhere. Kestra workflows drive K8s, vSphere, cloud, and network APIs with consistent sequencing, execution, and traceability.",
+            image: "/landing/infrastructure/deploy.png",
+            reverse: true
+        },
+        {
+            title: "Integrated\nHuman-in-the-Loop",
+            description: "Pause workflows for critical checks. Kestra offers relying Business Decisions with audit trail and controlled executions.",
+            image: "/landing/infrastructure/loop.png"
+        }
+    ]
+
+</script>
+
+<style lang="scss" scoped>
+    @import "../../assets/styles/_variable";
+
+    .center-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 26px;
+        color: $white;
+
+        @include media-breakpoint-up(md) {
+            gap: 3rem;
+        }
+    }
+
+    .title {
+        font-weight: 600;
+        line-height: 33.5px;
+        text-align: center;
+        margin: 0;
+    }
+
+    .content {
+        max-width: 660px;
+        color: $white;
+        text-align: center;
+    }
+
+    .govern {
+        background: $white;
+        padding: 2rem 0;
+
+        @include media-breakpoint-up(md) {
+            padding: 4rem 0;
+        }
+
+        h1,
+        h2 {
+            font-weight: 700;
+            margin: 0;
+        }
+
+        h1 {
+            font-size: 1.5rem;
+            text-align: center;
+            line-height: 2rem;
+
+            @include media-breakpoint-up(md) {
+                font-size: 2.625rem;
+                line-height: 3rem;
+                text-align: left;
+                margin-bottom: 3.5rem;
+            }
+        }
+
+        .indent {
+            text-align: center;
+
+            @include media-breakpoint-up(md) {
+                margin-left: 4rem;
+                text-align: left;
+            }
+        }
+
+        .cards-container {
+            display: flex;
+            flex-direction: column;
+            gap: 1.625rem;
+        }
+
+        .cards {
+            border: 1px solid #D4D4D4;
+            padding: 0.375rem;
+            border-radius: 0.8125rem;
+        }
+
+        .inner-card {
+            background: #F4F4F4;
+            border-radius: 0.5625rem;
+            display: flex;
+            flex-direction: column-reverse;
+            align-items: center;
+            padding: 0.5rem;
+
+            @include media-breakpoint-up(md) {
+                flex-direction: row;
+                padding-left: 4rem;
+
+                &.reverse {
+                    flex-direction: row-reverse;
+                    padding: 0 4rem 0 0;
+                }
+            }
+        }
+
+        .content-card {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+
+            @include media-breakpoint-up(xl) {
+                min-width: 338px;
+                min-height: 184px;
+                gap: 1rem;
+            }
+
+            h2 {
+                font-size: 1.5rem;
+                line-height: 1.875rem;
+                white-space: pre-line;
+
+                @include media-breakpoint-up(lg) {
+                    font-size: 1.875rem;
+                }
+            }
+
+            p {
+                font-weight: 400;
+                font-size: 0.75rem;
+                line-height: 1.125rem;
+                white-space: pre-line;
+                color: #1E202A;
+                margin: 0;
+
+                @include media-breakpoint-up(lg) {
+                    font-size: 0.875rem;
+                    line-height: 1.375rem;
+                }
+            }
+        }
+
+        .img-card {
+            width: 100%;
+            margin-bottom: 1rem;
+
+            img {
+                width: 100%;
+                height: auto;
+                object-fit: contain;
+                display: block;
+            }
+
+            @include media-breakpoint-up(md) {
+                width: auto;
+                margin-bottom: 0;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+            }
+        }
+    }
+
+    .govern-cta {
+        padding: 2.5rem 0;
+        background: #000001 url('/landing/infrastructure/cta-gradient.svg') no-repeat center center / cover;
+        margin-top: 2.5rem;
+
+        @include media-breakpoint-up(lg) {
+            padding: 4rem 0 90px;
+        }
+
+        .title {
+            color: $white;
+            max-width: 75%;
+
+            @include media-breakpoint-up(md) {
+                font-size: 2.25rem;
+                line-height: 3.125rem;
+            }
+        }
+
+        .btn-lg {
+            border: none;
+            padding: 0.5rem 1.5rem;
+            font-size: 18.4px;
+            border-radius: 8px;
+        }
+    }
+
+</style>

components/infrastructure/Hero.vue

@@ -0,0 +1,47 @@
+<template>
+    <section class="hero">
+        <div class="container">
+            <div style="position: relative; padding-bottom: calc(56.461% + 41px); height: 0px; width: 100%;">
+                <iframe
+                    src="https://demo.arcade.software/cuDf2qq3l9LX1WgP52Fp?embed&embed_mobile=inline&embed_desktop=inline&show_copy_link=true"
+                    title="Hero Infra" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen
+                    allowfullscreen allow="clipboard-write"
+                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color-scheme: light;"></iframe>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+    //NOOP
+</script>
+
+<style lang="scss" scoped>
+.hero {
+    position: relative;
+    z-index: 1;
+    padding-top: calc(var(--nav-height, 72px) + 1rem);
+    min-height: 100vh;
+    overflow: visible;
+}
+
+.hero::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background-image: url('/landing/infrastructure/Hero-bk.png');
+    background-size: cover;
+    background-position: top center;
+    background-repeat: no-repeat;
+    z-index: -1;
+    pointer-events: none;
+}
+
+.container {
+    position: relative;
+    z-index: 2;
+}
+</style>

components/layout/Footer.vue

@@ -108,8 +108,21 @@ import Heart from "vue-material-design-icons/Heart.vue";
 
 footer {
     position: relative;
+    z-index: 10;
     font-size: var(--bs-font-size-sm);
-    background-color: $black-9 !important;
+    background-color: $black-9;
+
+    &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: -3rem;
+        height: 3rem;
+        background-color: $black-9;
+        z-index: -1;
+        pointer-events: none;
+    }
 
     h5, a, p{
         color: var(--bs-white);
@@ -140,8 +153,12 @@ footer {
     }
 
     &.plugins-page {
-        background-color: #0A0B0D !important;
+        background-color: #0A0B0D;
         border-top: 1px solid $black-3;
     }
+
+    &.dark-footer {
+        background-color: #0A0B0D !important;
+    }
 }
 </style>

components/overview/Workflows.vue

@@ -218,7 +218,7 @@ const workflowSections = [
 
             .feature-content {
                 h3 {
-                    font-family: 'Public Sans', sans-serif;
+                    font-family: 'Mona Sans', sans-serif;
                     font-weight: 600;
                     font-size: 24px;
                     line-height: 36px;