feat: hero banner #5 (#6)

app.vue

@@ -2,15 +2,7 @@
   <div class="flex flex-col gap-4">
     <PageHeader />
 
-    <div :class="$style['hero-banner']">
-      <main class="pt-4">
-        <PageContainer>
-          <article>
-            Main content
-          </article>
-        </PageContainer>
-      </main>
-    </div>
+    <HeroBanner />
 
     <PageFooter />
   </div>
@@ -19,33 +11,3 @@
 <script>
   import '@/assets/scss/global.scss';
 </script>
-
-<style lang="scss" module>
-  .hero-banner {
-    @apply pt-14;
-    @apply h-96;
-    @apply bg-no-repeat bg-cover bg-center;
-    @apply bg-black;
-    background-image: url('@/assets/images/bg-hero-banner-xs.jpg');
-
-    @media (min-width: theme('screens.sm')) {
-      background-image: url('@/assets/images/bg-hero-banner-sm.jpg');
-    }
-
-    @media (min-width: theme('screens.md')) {
-      background-image: url('@/assets/images/bg-hero-banner-md.jpg');
-    }
-
-    @media (min-width: theme('screens.lg')) {
-      background-image: url('@/assets/images/bg-hero-banner-lg.jpg');
-    }
-
-    @media (min-width: theme('screens.xl')) {
-      background-image: url('@/assets/images/bg-hero-banner-xl.jpg');
-    }
-
-    @media (min-width: theme('screens.2xl')) {
-      background-image: url('@/assets/images/bg-hero-banner-2xl.jpg');
-    }
-  }
-</style>

assets/scss/global.scss

@@ -1,3 +1,3 @@
 html, body {
-  @apply bg-zinc-800 text-zinc-100;
+  @apply bg-zinc-900 text-zinc-100;
 }

components/Button.vue

@@ -0,0 +1,71 @@
+<template>
+  <button
+    :type="type"
+    :class="[
+      $style.button,
+      $style[`button-${size}`],
+      $style[`button-${variant}`]
+    ]"
+    v-bind="remainingProps"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script lang="ts" setup>
+  type ButtonProps = {
+    type?: 'button' | 'submit' | 'reset';
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'primary' | 'secondary' | 'on-glass';
+  };
+
+  const {
+    type,
+    size,
+    variant,
+    ...remainingProps
+  } = withDefaults(defineProps<ButtonProps>(), {
+    type: 'button',
+    size: 'md',
+    variant: 'primary'
+  });
+</script>
+
+<style lang="scss" module>
+  .button {
+    @apply inline-flex items-center justify-center;
+    @apply w-min;
+    @apply whitespace-nowrap;
+    @apply transition-colors;
+
+    &-sm {
+      @apply py-1.5 px-3;
+      @apply rounded-md;
+      @apply text-sm;
+    }
+
+    &-md {
+      @apply py-2 px-4;
+      @apply rounded-md;
+    }
+
+    &-lg {
+      @apply py-3 px-6;
+      @apply rounded-lg;
+      @apply text-lg;
+    }
+
+    &-primary {
+      @apply text-white;
+      @apply bg-blue-600;
+      @apply hover:bg-blue-700;
+    }
+
+    &-on-glass {
+      @apply text-white;
+      @apply bg-white bg-opacity-10;
+      @apply border-2 border-white border-opacity-5;
+      @apply hover:bg-opacity-20;
+    }
+  }
+</style>

components/HeroBanner.vue

@@ -0,0 +1,66 @@
+<template>
+  <div :class="$style['hero-banner']">
+    <PageContainer class="relative flex items-center h-full">
+      <div class="grid lg:grid-cols-2 gap-4">
+        <article :class="$style['hero-banner-content']">
+          <h2 class="text-4xl font-bold">Welcome to my portfolio!</h2>
+
+          <p>Hello! My name is Diego, I am a fullstack developer with emphasis in front-end development since 2011.</p>
+
+          <Button
+            class="self-end"
+            size="lg"
+            variant="on-glass"
+          >
+            Hire me
+          </Button>
+        </article>
+
+        <div class="hidden lg:block">
+          <img
+            src="@/assets/images/profile-picture.png"
+            alt="A Diego's picture.'"
+            class="absolute bottom-0 right-40"
+          />
+        </div>
+      </div>
+    </PageContainer>
+  </div>
+</template>
+
+<style lang="scss" module>
+  .hero-banner {
+    @apply pt-12;
+    @apply bg-no-repeat bg-cover bg-center;
+    @apply bg-black;
+    height: 32rem;
+    background-image: url('@/assets/images/bg-hero-banner-xs.jpg');
+
+    @media (min-width: theme('screens.sm')) {
+      background-image: url('@/assets/images/bg-hero-banner-sm.jpg');
+    }
+
+    @media (min-width: theme('screens.md')) {
+      background-image: url('@/assets/images/bg-hero-banner-md.jpg');
+    }
+
+    @media (min-width: theme('screens.lg')) {
+      background-image: url('@/assets/images/bg-hero-banner-lg.jpg');
+    }
+
+    @media (min-width: theme('screens.xl')) {
+      background-image: url('@/assets/images/bg-hero-banner-xl.jpg');
+    }
+
+    @media (min-width: theme('screens.2xl')) {
+      background-image: url('@/assets/images/bg-hero-banner-2xl.jpg');
+    }
+
+    &-content {
+      @apply flex flex-col gap-4;
+      @apply bg-black bg-opacity-10 backdrop-blur-md;
+      @apply p-8;
+      @apply border-2 border-white border-opacity-5 rounded-xl;
+    }
+  }
+</style>

components/Nav.vue

@@ -21,7 +21,7 @@
     @apply lg:flex-row;
 
     @media (min-width: theme('screens.lg')) {
-      margin-top: (1 / 16) * -1rem;
+      margin-top: -0.0625rem;
     }
 
     &-title {

components/PageContainer.vue

@@ -7,5 +7,6 @@
 <style lang="scss" module>
   .page-container {
     @apply container mx-auto px-4;
+    @apply transition-all;
   }
 </style>

components/PageHeader.vue

@@ -42,6 +42,7 @@
 
     &.open {
       @apply h-full;
+      @apply lg:h-12;
     }
 
     &-title {