feat: add hero image for referrals page (#109)

<img width="1582" alt="Screenshot 2024-12-18 at 11 03 33"
src="https://github.com/user-attachments/assets/24079d63-9b6e-4e18-a78d-52adddd0079e"
/>

components/ReferralCodeCreator.vue

@@ -9,7 +9,7 @@ const referralsUrl = `${config.public.consoleUrl}/referrals`
 
 <template>
   <form :action="referralsUrl" method="GET" class="flex flex-row space-x-2">
-    <input type="email" name="email" class="w-96 rounded-full px-4" placeholder="Email Address">
+    <input type="email" name="email" class="w-40 md:w-96 rounded-full px-4" placeholder="Email Address">
     <input type="submit" value="Generate Code" class="btn">
   </form>
 </template>

pages/referrals.vue

@@ -5,13 +5,13 @@ import ReferralCodeCreator from '~/components/ReferralCodeCreator.vue';
 
 <template>
   <TransitionProvider>
-    <Section class="bg-brand-4 mt-16">
-      <HeroBase>
-        <template #right>
-          <SectionHeader class="color-brand-3 mt-8" eyebrow="Earn Racha Points & Storage Credits"
+    <Section class="bg-brand-4 referrals-bg">
+      <HeroBase class="sm:min-h-200">
+        <template #left>
+          <SectionHeader class="color-brand-3" eyebrow="Earn Racha Points & Storage Credits"
             title="Refer your friends to Storacha!"
             description="Share Storacha’s blazing-fast, decentralized storage and get rewarded with Racha Points, part of our soon to be announced Loyalty Program, and Storage Credits! It’s simple: the more friends you refer, the more perks you unlock!" />
-            <div class="color-brand-3 prose p1">
+          <div class="color-brand-3 prose p1">
             <p>
               <b>Enter your email</b> and we will generate your unique referral code!
             </p>
@@ -54,3 +54,12 @@ import ReferralCodeCreator from '~/components/ReferralCodeCreator.vue';
     </Section>
   </TransitionProvider>
 </template>
+
+<style lang="postcss" scoped>
+@screen xl {
+  .referrals-bg {
+    background: url(/img/referrals/hero.png) no-repeat right;
+    background-size: contain;
+  }
+}
+</style>

pages/referred.vue

@@ -7,15 +7,15 @@ const consoleSignupUrl = `${config.public.consoleUrl}?refcode=${refcode}`
 
 <template>
   <TransitionProvider>
-    <Section class="bg-brand-4 mt-16">
-      <HeroBase>
-        <template #right>
+    <Section class="bg-brand-4 referrals-bg">
+      <HeroBase class="sm:min-h-200">
+        <template #left>
           <SectionHeader class="color-brand-3" eyebrow="A Master Racha Invited You"
             title="Receive up to Two Months of Free Storage"
             description="Sign up now for a Lite/Medium plan and receive two months subscription free. Sign up to a Business/Extra Spicy plan and receive one month subscription for free. Continue using Storacha to earn more rewards!" />
           <div class="color-brand-3 prose">
             <p>
-              For the full rundown on how it all works, check out our <b><a href="https://docs.storacha.network/referral-terms/">Terms &
+              For the full rundown on how it all works, check out our <b><a href="https://docs.storacha.network/referral-terms/" class="whitespace-nowrap">Terms &
                   Conditions</a></b>.
             </p>
           </div>
@@ -56,3 +56,12 @@ const consoleSignupUrl = `${config.public.consoleUrl}?refcode=${refcode}`
     </Section>
   </TransitionProvider>
 </template>
+
+<style lang="postcss" scoped>
+@screen xl {
+  .referrals-bg {
+    background: url(/img/referrals/hero.png) no-repeat right;
+    background-size: contain;
+  }
+}
+</style>