[offers][style] homepage styling

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

@@ -2,12 +2,16 @@ export default function OffersTitle() {
   return (
     <>
       <div className="flex items-end justify-center">
-        <h1 className="text-center text-4xl font-bold">
+        <h1 className="mt-16 text-center text-4xl font-bold text-indigo-600">
-          Technical Handbook Offers Repo
+          Tech Handbook Offers Repo
         </h1>
       </div>
-      <div className="flex items-center justify-center text-2xl">
+      <div className="mt-2 text-center text-2xl font-normal text-indigo-500">
-        Benchmark your offers and discuss them with the community
+        Reveal profile stories behind offers
+      </div>
+      <div className="items-top flex justify-center text-xl font-normal">
+        Benchmark your offers and profiles, learn from other's offer profile,
+        and discuss with the community
       </div>
     </>
   );

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

@@ -10,10 +10,10 @@ export default function OffersHomePage() {
 
   return (
     <main className="flex-1 overflow-y-auto">
-      <div className="grid-rows grid h-1/3 bg-gray-100">
+      <div className="grid-rows grid h-1/2 bg-gray-100">
         <OffersTitle />
         <div className="flex items-start justify-center">
-          <div className="flex items-center">
+          <div className="mt-4 flex items-center">
             Viewing offers for
             <div className="mx-4">
               <Select
@@ -42,7 +42,7 @@ export default function OffersHomePage() {
               />
             </div>
             in
-            <div className="mx-4">
+            <div className="ml-4">
               <Select
                 isLabelHidden={true}
                 label="Select a company"
@@ -67,7 +67,7 @@ export default function OffersHomePage() {
           </div>
         </div>
       </div>
-      <div className="mt-10 flex justify-center">
+      <div className="flex justify-center bg-white pb-20 pt-10">
         <OffersTable />
       </div>
     </main>