Adding spline-viewer and main button

assets/_variables.scss

@@ -95,6 +95,6 @@ $width-xl: 90rem;
 
 /* Shadows */
 $main-shadow: 0px 3px 5px rgba($black, 0.025), 0px 2px 2px rgba(0, 0, 0, 0.025), 0px 4px 4px rgba($black, 0.01);
-$big-shadow: 0px 0px 1px 1px rgba($brand, 0.1), 0px 20px 18px rgba($black, 0.1), 0px 20px 28px rgba($black, 0.05), 0px 6px 25px rgba($black, 0.01);
+$big-shadow: 0px 0px 1px 1px rgba($brand, 0.05), 0px 20px 18px rgba($black, 0.05), 0px 20px 28px rgba($black, 0.05), 0px 6px 25px rgba($black, 0.01);
 $soft-shadow: 0px 1px 1px rgba($black, 0.05), 0px 8px 8px rgba($black, 0.05);
 $small-shadow: rgba($black, 0.04) 0px 1px 6px 0px, rgba($black, 0.12) 0px -2px 4px 0px inset, rgba($black, 0.14) 0px -1px 2px 0px inset;

components/v2/Header.vue

@@ -81,7 +81,7 @@ nav {
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    padding: $spacing-sm;
+    padding: $spacing-sm $spacing-md;
     max-width: $max-width;
     margin: 0 auto;
 

components/v2/Hero.vue

@@ -0,0 +1,90 @@
+<template>
+  <section class="home-hero">
+    <div class="home-hero-content">
+      <section class="hero-text">
+        <h1>Unleash the full power of your writing team</h1>
+        <p class="hero-description">Reduce your project’s timelines by leveraging our structured workflows, a modern writing experience, and built-in stakeholder review and approval.</p>
+        <section class="hero-button">
+          <nuxt-link to="/articles"><spline-viewer class="spline-viewer" url="https://prod.spline.design/LAtGJGEkHL1GjOCb/scene.splinecode"></spline-viewer></nuxt-link>
+          <!-- <button class="primary large">Get started</button> -->
+          <p>Free for beta users. Limited to 1 project. No credit card required.</p>
+        </section>
+      </section>
+      <section class="hero-image">
+        <img src="/public/images/hero-preview.png" alt="Vewrite" />
+      </section>
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+
+@use 'assets/variables' as *;
+
+.home-hero {
+  width: 100%;
+
+  .home-hero-content {
+    max-width: $max-width;
+    margin: 0 auto;
+    padding: $spacing-lg $spacing-md;
+    min-height: 400px;
+    display: flex;
+    flex-direction: column;
+
+    .hero-text {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      text-align: center;
+      padding: 0 $spacing-md $spacing-lg;
+
+      h1 {
+        font-size: 5vw;
+        font-weight: 600;
+        max-width: 800px;
+        margin: 0 auto;
+        line-height: 1;
+        padding: $spacing-md 0;
+        background: linear-gradient(to right, #4D70E7 60%, #3F5CBE 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        display: inline-block;
+      }
+
+      p.hero-description {
+        max-width: 600px;
+        margin: 0 auto;
+        padding: 0 0 $spacing-md;
+      }
+
+      .hero-button {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: $spacing-xs;
+
+        .spline-viewer {
+          height: 120px;
+        }
+      }
+    }
+
+    .hero-image {
+      position: relative;
+      border: $border;
+      border-radius: $br-lg;
+      overflow: hidden;
+      
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+      }
+    }
+  }
+}
+
+</style>

nuxt.config.ts

@@ -21,9 +21,11 @@ export default defineNuxtConfig({
     }
   },
 
+  plugins: ['~/plugins/spline-viewer.client.ts'],
+
   googleFonts: {
     families: {
-      NotoSans: true,
+      'Noto Sans': true,
     }
   },
 

pages/index.vue

@@ -1,6 +1,7 @@
 <template>
   <NuxtLayout>
     <JoinPopup />
+    <v2Hero />
 <!-- 
     <main id="Hero" :class="{'scrolled': isScrolled}">
       <section id="Illustrations">

plugins/spline-viewer.client.ts

@@ -0,0 +1,8 @@
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    const script = document.createElement('script');
+    script.src = 'https://unpkg.com/@splinetool/viewer/build/spline-viewer.js';
+    script.type = 'module';
+    document.body.appendChild(script);
+  }
+});