From 937815f395a0d43061aa42dd7571accc89a6c6e0 Mon Sep 17 00:00:00 2001
From: novellac <38117965+novellac@users.noreply.github.com>
Date: Sat, 22 Apr 2023 18:59:43 -0400
Subject: [PATCH] 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                         |  50 +++++++++++++++-------------
 src/assets/images/icon-envelope.png | Bin 0 -> 1256 bytes
 src/assets/images/icon-info.png     | Bin 0 -> 2263 bytes
 src/components/FooterSection.vue    |  36 ++++++++++++++++++++
 src/components/StepInput.vue        |   2 +-
 src/components/TheFooter.vue        |  50 ++++++++++++++++++++++++++++
 src/components/TheHeader.vue        |  10 +++---
 7 files changed, 120 insertions(+), 28 deletions(-)
 create mode 100644 src/assets/images/icon-envelope.png
 create mode 100644 src/assets/images/icon-info.png
 create mode 100644 src/components/FooterSection.vue
 create mode 100644 src/components/TheFooter.vue

diff --git a/src/App.vue b/src/App.vue
index 6f51b4c..055fa82 100644
--- a/src/App.vue
+++ b/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,6 +98,8 @@
       />
     </ul>
   </main>
+
+  <TheFooter class="mt-12" />
 </template>
 
 <script setup>
@@ -104,6 +107,7 @@ 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'
diff --git a/src/assets/images/icon-envelope.png b/src/assets/images/icon-envelope.png
new file mode 100644
index 0000000000000000000000000000000000000000..d68a1e2f2b4e592bcb17f49bf3adbded3f7690c3
GIT binary patch
literal 1256
zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7uRSoCO|{#S9EO-XP4l)OOlRpde#$
zkh>GZx^prwfgF}}M_)$<hK>E)e-c@N+*(f;$B+ufw|5<jgxy7seY~z5c{C_;l2Pa*
zwkK?hxIDyGMwlP4V^ZHx+GL?_a3_H&Qou*lswr>5$|52C#Y>f=@4h@{qoyL-mHG9{
zo_YW3w9O)p-ItG^cQK;_Xd70b;Mo;rG<)5#*?ae%Y<R)gD8Bg1tSwRe`FYcxKKeH+
zO2DS!y?m?>dsczZsT~iGvm{Dvy|5&HkJbHpKSoyW2Y)}f7N-5TP|OJ4diB?f>D#}H
zi8weio|zXTcl+ag!DIc2kM>=&zp>tub;IX!2J?N2wN3(a7e0FOboTDzTL=9Z6aKu*
zTsm*>udlCzKRuB>kW*!8sJvI{#T=t&vp?0;d&=#Z&pgAn*iE77Z{P>z%1>MgY4bnc
zezT0l=!Wi{{KO{*wHb^x<_UEKY0R3)zF(e^&Hek5z*QCs{Jry8b~*1!Gx;^yL1ydC
znyX(X6n=isQ2uVm;oYK*CUMWXq}T)Y?TcQysA7f3Ze{^d$LrVfxPR~ezwbQf;=6n-
zwdIzIwZ$3ryoLT;>MVvkAJ#8Ad-kPXI#=@?9w&}KR>^s+wz53}QKBUk*G_Re2{;9;
z<vAZ!?K+`ZpzPAC4{NS6NH}Gvocf^S#lWLj6L#fc<Q1UE4;S^roBfy)X0~5=`C-jv
zhKMx94vBf491UM>SOO0l2QqG$*Q!udp=QJ|t%74wd-~aU{tqvbUd0J6`FHEgTl+PO
zIE1(re|@Miy>>0<xv##&NA3sTlmxzSpRe4~ZzVl1e*Vs@zY^~-yy~A+%rTe${4VYV
z|1vCF71AoM)iQi_e_PD)s4cySX@z~&d?x{Go5|u1e>F7Q73wO~%o~1P4B}Fp`EceR
zhF9)WWt@r*Z!Te4As-vWagy)+C7?MvyLb}k{Q97Cm*K_ZbYc6J)vHTi9X6iN(5BM4
z(Aii@R<7oE^%Q|Sp?)F<mmij%q;g`m3v0Rbp;K)IX0z9+P0=v_bMUeKy}k9!x(nYg
zS1@LnmcgOPb3TRrfDotR(ua{!j0Ou8msr?%Ycr^+v`lGF&tyAb#kG+C@a8Sd2@{=O
zT>h{|o^iu8rx%Yutchpb;Gp=Wvf|o#h8gJ`mOSTw$uj&tBv2$Z@2Mce@A(2nGV@Ma
zNs64d_p_Q9Cfuo>nRL>aA<cQi<KT0jehD)CZ)7lP$BnMrG(6m(B#^lx<gxdiS?mR+
zs^4tiZz`{i4Rk*HUaG8GG1XP!?4{>Q;rpYHOZ_!&)aiP3*LIIVh)~C-yRXE739{i*
zY;)d~CI_};G2i>*4VC|;R(RMe3pnzw>pwBMoZ;!ue?ghe99C%_=TBe%m%n7=<;De{
z-u`>pUd`dme&>h&{X5nRWm|TZzM0%D?0nSF(M0iBdDC5kM~7#-&lP;fbZwhgW^G87
z-OJzGAC&XVwEg$?f`F~+(q$|Q*St0UyVNL6F010&E#2g_%U5sAGp|Un|M+p6#xa&S
qwr?Est&eE`+-8im3;+sVXxz`Z@M2eq^!|W0kQz@{KbLh*2~7Zy=oqR1

literal 0
HcmV?d00001

diff --git a/src/assets/images/icon-info.png b/src/assets/images/icon-info.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0e79d4fe77f5814f6d7bb34128fc7cbbc2f13a5
GIT binary patch
literal 2263
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

literal 0
HcmV?d00001

diff --git a/src/components/FooterSection.vue b/src/components/FooterSection.vue
new file mode 100644
index 0000000..c5db954
--- /dev/null
+++ b/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>
diff --git a/src/components/StepInput.vue b/src/components/StepInput.vue
index c0fe0c8..bebf0a3 100644
--- a/src/components/StepInput.vue
+++ b/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="
diff --git a/src/components/TheFooter.vue b/src/components/TheFooter.vue
new file mode 100644
index 0000000..af029aa
--- /dev/null
+++ b/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:info@tripletech.com">info@tripletech.com</a>
+        </template>
+      </FooterSection>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+import FooterSection from './FooterSection.vue'
+</script>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 97606ee..dc22ec0 100644
--- a/src/components/TheHeader.vue
+++ b/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>