feat: Add header text and images (#6)

* hotfix: ignore vercel dierctory

* feat: Add header text and images

.gitignore

@@ -30,3 +30,4 @@ coverage
 
 # Vercel
 .vercel/*
+.vercel

src/App.vue

@@ -1,14 +1,12 @@
 <template>
-  <main class="flex flex-col gap-4 p-4 my-4 sm:px-10 lg:px-20">
-    <h1 class="mb-6">
-      <span class="block mb-2 text-2xl font-bold text-center lg:text-6xl"
-        >Pitch Pop Out</span
-      >
-      <span class="block text-center"
-        >Transform your resume summary into a personalized pop-out pitch!</span
-      >
-    </h1>
-    <div class="flex flex-col gap-24 sm:gap-20 lg:gap-4 lg:flex-row">
+  <main
+    class="flex flex-col max-w-screen-xl gap-10 p-4 mx-auto my-4 sm:gap-20 lg:gap-40 sm:px-10 lg:px-20"
+  >
+    <!-- Header -->
+    <TheHeader />
+
+    <!-- Steps -->
+    <div class="flex flex-col gap-10 sm:gap-20 lg:gap-4 lg:flex-row">
       <StepInput v-model:stepText="bio" :stepNumber="1" class="w-full lg:w-1/2">
         <template #stepSummary> Tell us about you. </template>
         <template #stepDirections>
@@ -56,6 +54,7 @@
 import { inject } from '@vercel/analytics'
 import { onMounted, ref } from 'vue'
 
+import TheHeader from './components/TheHeader.vue'
 import BaseButton from './components/BaseButton.vue'
 import StepInput from './components/StepInput.vue'
 

src/components/TheHeader.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex flex-col items-center gap-4 sm:justify-center sm:flex-row">
+    <h1 class="text-2xl font-bold text-center sm:hidden">Pitch Pop Out</h1>
+    <img
+      class="w-44 sm:w-60 md:w-1/3 lg:w-1/2"
+      src="../assets/images/tripleTechHeader.png"
+      alt="Cartoon drawing of a winking, bespectacled woman with curly hair and glasses, wearing bright clothing and holding a laptop. The woman is surrounded by large, abstract depictions of digital life."
+    />
+
+    <div class="flex flex-col items-center lg:gap-10 sm:gap-6">
+      <h1
+        class="hidden text-2xl font-bold text-center md:text-4xl lg:text-6xl sm:block"
+      >
+        Pitch Pop Out
+      </h1>
+
+      <p class="w-64 text-center sm:w-72 lg:w-full lg:text-2xl">
+        Transform your resume summary into a personalized
+        <span class="font-bold">pop-out pitch!</span>
+      </p>
+      <p class="mt-4 lg:text-2xl">
+        <span class="sr-only">It's as easy as ... </span>
+        <span class="flex gap-4">
+          <span class="flex flex-col items-center">
+            <img
+              class="h-10 lg:h-14"
+              src="../assets/images/icon-copy.png"
+              role="presentation"
+            />
+            Copy
+          </span>
+          <span class="flex flex-col items-center">
+            <img
+              class="h-10 lg:h-14"
+              src="../assets/images/icon-paste.png"
+              role="presentation"
+            />
+            Paste
+          </span>
+          <span class="flex flex-col items-center">
+            <img
+              class="h-10 lg:h-14"
+              src="../assets/images/icon-save.png"
+              role="presentation"
+            />
+            Save
+          </span>
+        </span>
+      </p>
+    </div>
+  </div>
+</template>