[offers] tweak hero

apps/portal/src/components/offers/OffersNavigation.ts

@@ -1,8 +1,8 @@
 import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
 
 const navigation: ProductNavigationItems = [
-  { href: '/offers/browse', name: 'Browse' },
+  { href: '/offers/browse', name: 'Browse all offers' },
-  { href: '/offers/submit', name: 'Analyse your offers' },
+  { href: '/offers/submit', name: 'Analyze your offers' },
 ];
 
 const config = {
@@ -10,7 +10,7 @@ const config = {
   googleAnalyticsMeasurementID: 'G-DBLZDQ2ZZN',
   navigation,
   showGlobalNav: false,
-  title: 'Offer Profile Repository',
+  title: 'Tech Offers Repo',
   titleHref: '/offers',
 };
 

apps/portal/src/components/offers/OffersTitle.tsx

@@ -1,18 +0,0 @@
-export default function OffersTitle() {
-  return (
-    <>
-      <div className="flex items-end justify-center">
-        <h1 className="text-primary-600 mt-16 text-center text-4xl font-bold">
-          Offer Profile Repository
-        </h1>
-      </div>
-      <div className="text-primary-500 mt-2 text-center text-2xl font-normal">
-        Reveal profile stories behind offers
-      </div>
-      <div className="items-top flex justify-center text-xl font-normal">
-        Click into offers to view profiles, benchmark your offers and profiles,
-        and discuss with the community
-      </div>
-    </>
-  );
-}

apps/portal/src/pages/offers/browse.tsx

@@ -1,6 +1,7 @@
+import Link from 'next/link';
 import { useState } from 'react';
+import { Banner } from '@tih/ui';
 
-import OffersTitle from '~/components/offers/OffersTitle';
 import OffersTable from '~/components/offers/table/OffersTable';
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead';
@@ -11,20 +12,34 @@ export default function OffersHomePage() {
 
   return (
     <main className="flex-1 overflow-y-auto">
-      <div className="grid-rows grid h-1/2 bg-slate-100">
+      <Banner size="xs">
-        <OffersTitle />
+        ⭐ Check if your offer is competitive by submitting it{' '}
+        <Link className="underline" href="/offers/submit">
+          here
+        </Link>
+        . ⭐
+      </Banner>
+      <div className="space-y-6 bg-stone-100 py-16">
+        <div>
+          <div>
+            <h1 className="text-primary-600 text-center text-5xl font-bold">
+              Tech Offers Repo
+            </h1>
+          </div>
+          <div className="mt-4 text-center text-2xl text-slate-600">
+            Find out how good your offer is. Discover how others got their
+            offers.
+          </div>
+        </div>
         <div className="flex items-start justify-center">
-          <div className="mt-4 flex items-center">
+          <div className="mt-4 flex items-center space-x-4 text-slate-500">
-            Viewing offers for
+            <span>Viewing offers for</span>
-            <div className="mx-4">
             <JobTitlesTypeahead
               isLabelHidden={true}
               placeHolder="Software Engineer"
               onSelect={({ value }) => setjobTitleFilter(value)}
             />
-            </div>
+            <span>in</span>
-            in
-            <div className="ml-4">
             <CompaniesTypeahead
               isLabelHidden={true}
               placeHolder="All Companies"
@@ -33,7 +48,6 @@ export default function OffersHomePage() {
           </div>
         </div>
       </div>
-      </div>
       <div className="flex justify-center bg-white pb-20 pt-10">
         <OffersTable
           companyFilter={companyFilter}

apps/portal/src/pages/offers/index.tsx

@@ -96,7 +96,7 @@ export default function LandingPage() {
             <div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
               <div className="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5 sm:space-y-0">
                 <a
-                  className="border-grey-600 flex items-center justify-center rounded-md border bg-white bg-white px-4 py-3 text-base font-medium text-indigo-700 shadow-sm hover:bg-indigo-50 sm:px-8"
+                  className="border-grey-600 flex items-center justify-center rounded-md border bg-white px-4 py-3 text-base font-medium text-indigo-700 shadow-sm hover:bg-indigo-50 sm:px-8"
                   href={HOME_URL}>
                   Get started
                 </a>