feat: Add footer content and styling (#10)

* feat: Add footer content and styling

* demo: relative pathing for computed img src

* fix: Vite image processing peculiarities

https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url

src/App.vue

@@ -1,30 +1,31 @@
 <template>
+  <!-- Header -->
+  <TheHeader class="max-w-screen-xl mx-auto mt-4 sm:px-10 lg:px-20" />
+
   <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"
+    class="flex flex-col max-w-screen-xl gap-10 p-4 mx-auto sm:gap-20 lg:gap-40 sm:px-10 lg:px-20"
+    :class="hasAnyErrors ? 'mt-6 sm:mt-10' : 'mt-10 sm:mt-20 lg:mt-40'"
   >
-    <!-- Header -->
-    <TheHeader />
-
-    <!-- Form errors -->
-    <BaseNotification
-      v-show="hasAnyErrors"
-      role="alert"
-      class="mb-8 sm:mb-11 lg:mb-20"
-    >
-      <template #title>
-        Oops! Looks like you forgot to tell us something.
-      </template>
-
-      Please fill in the missing information so we can keep things cookin'!
-      <ul>
-        <li v-if="errors.bio">Please provide a bio in step 3.</li>
-        <li v-if="errors.jobDescription">
-          Please provide a job description in step 4.
-        </li>
-      </ul>
-    </BaseNotification>
-
     <form @submit.prevent="getCompletion" id="pitchForm">
+      <!-- Form errors -->
+      <BaseNotification
+        v-show="hasAnyErrors"
+        role="alert"
+        class="mb-8 sm:mb-11 lg:mb-20"
+      >
+        <template #title>
+          Oops! Looks like you forgot to tell us something.
+        </template>
+
+        Please fill in the missing information so we can keep things cookin'!
+        <ul>
+          <li v-if="errors.bio">Please provide a bio in step 3.</li>
+          <li v-if="errors.jobDescription">
+            Please provide a job description in step 4.
+          </li>
+        </ul>
+      </BaseNotification>
+
       <!-- Steps -->
       <div class="flex flex-col gap-10 sm:gap-20 lg:gap-4 lg:flex-row">
         <StepInput
@@ -97,13 +98,16 @@
       />
     </ul>
   </main>
+
+  <TheFooter class="mt-12" />
 </template>
 
 <script setup>
 import { inject } from '@vercel/analytics'
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 
 import TheHeader from './components/TheHeader.vue'
+import TheFooter from './components/TheFooter.vue'
 import BaseButton from './components/BaseButton.vue'
 import BaseNotification from './components/BaseNotification.vue'
 import StepInput from './components/StepInput.vue'

src/components/FooterSection.vue

@@ -0,0 +1,36 @@
+<template>
+  <section class="sm:w-80 sm:mx-auto lg:mx-0">
+    <div class="flex items-center gap-6">
+      <img :src="themeIcon" role="presentation" class="w-8 h-8" />
+      <h3 class="font-bold">
+        <span><slot name="title" /></span>
+      </h3>
+    </div>
+    <p class="ml-14 text-slate-500"><slot name="text" /></p>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  theme: {
+    type: String,
+    default: 'info',
+    validator(value) {
+      return ['info', 'mail'].includes(value)
+    },
+  },
+})
+
+const themeIcon = computed(() => {
+  switch (props.theme) {
+    case 'info':
+    default:
+      return new URL('@/assets/images/icon-info.png', import.meta.url).href
+
+    case 'mail':
+      return new URL('@/assets/images/icon-envelope.png', import.meta.url).href
+  }
+})
+</script>

src/components/StepInput.vue

@@ -2,7 +2,7 @@ import BaseLabel from './BaseLabel.vue';
 
 <template>
   <div class="flex flex-col justify-between">
-    <BaseLabel :for="stepId" class="flex">
+    <BaseLabel :for="stepId" class="flex items-start">
       <span
         class="mr-9 sm:mr-14 lg:mr-16"
         :class="

src/components/TheFooter.vue

@@ -0,0 +1,50 @@
+<template>
+  <footer class="pb-8">
+    <div
+      class="w-full pt-10 pb-12 text-white lg:pb-5 lg:pt-52 bg-primary-indigo"
+    >
+      <div class="ml-8 sm:mx-auto lg:ml-36 w-52 sm:w-96">
+        <h2 class="sm:text-lg">Contact Us</h2>
+        <p class="pt-5 text-2xl font-black sm:text-5xl lg:text-6xl">
+          Let's make it pop together.
+        </p>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-12 px-16 mt-12 sm:flex-row sm:px-10 lg:px-36">
+      <FooterSection>
+        <template #title>About the Creators</template>
+
+        <template #text>
+          Triple Tech is a tech squad committed to empowering people to land
+          their dream jobs with confidence and ease.
+        </template>
+      </FooterSection>
+
+      <FooterSection class="hidden lg:block">
+        <template #title>About the Site</template>
+
+        <template #text>
+          Pitch Pop-out is a cutting-edge AI solution that empowers job seekers
+          and users to craft personalized pitch summaries that align with the
+          requirements of their target positions. With ongoing improvements, the
+          app will soon offer features for generating tailored resumes that
+          match specific job descriptions, streamlining the application process
+          with a single click.
+        </template>
+      </FooterSection>
+
+      <FooterSection theme="mail">
+        <template #title>How Can We Help?</template>
+
+        <template #text>
+          <a href="mailto:[email protected]">[email protected]</a>
+        </template>
+      </FooterSection>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+import FooterSection from './FooterSection.vue'
+</script>

src/components/TheHeader.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="flex flex-col items-center gap-4 sm:justify-center sm:flex-row">
+  <header
+    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"
@@ -14,10 +16,10 @@
         Pitch Pop Out
       </h1>
 
-      <p class="w-64 text-center sm:w-72 lg:w-full lg:text-2xl">
+      <h2 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>
+      </h2>
       <p class="mt-4 lg:text-2xl">
         <span class="sr-only">It's as easy as ... </span>
         <span class="flex gap-4">
@@ -48,5 +50,5 @@
         </span>
       </p>
     </div>
-  </div>
+  </header>
 </template>