From c10aa15347bf1f72b95f16ef39a3abe376ee5200 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 6 Nov 2022 17:17:50 +0800
Subject: [PATCH] [portal][feat] add homepage

---
 apps/portal/public/{ => logos}/bank-logo.png  | Bin
 .../portal/public/{ => logos}/offers-logo.svg |   0
 .../public/{ => logos}/resumes-logo.svg       |   0
 .../portal/src/components/global/AppShell.tsx |   2 +-
 .../components/global/ProductNavigation.tsx   |  15 ++--
 .../components/offers/OffersNavigation.tsx    |   6 +-
 .../components/questions/LandingComponent.tsx |   4 +-
 .../questions/QuestionsNavigation.tsx         |   6 +-
 .../components/resumes/ResumesNavigation.tsx  |   2 +-
 apps/portal/src/pages/index.tsx               |  76 ++++++++++++++++--
 apps/portal/src/pages/offers/features.tsx     |   2 +-
 11 files changed, 91 insertions(+), 22 deletions(-)
 rename apps/portal/public/{ => logos}/bank-logo.png (100%)
 rename apps/portal/public/{ => logos}/offers-logo.svg (100%)
 rename apps/portal/public/{ => logos}/resumes-logo.svg (100%)

diff --git a/apps/portal/public/bank-logo.png b/apps/portal/public/logos/bank-logo.png
similarity index 100%
rename from apps/portal/public/bank-logo.png
rename to apps/portal/public/logos/bank-logo.png
diff --git a/apps/portal/public/offers-logo.svg b/apps/portal/public/logos/offers-logo.svg
similarity index 100%
rename from apps/portal/public/offers-logo.svg
rename to apps/portal/public/logos/offers-logo.svg
diff --git a/apps/portal/public/resumes-logo.svg b/apps/portal/public/logos/resumes-logo.svg
similarity index 100%
rename from apps/portal/public/resumes-logo.svg
rename to apps/portal/public/logos/resumes-logo.svg
diff --git a/apps/portal/src/components/global/AppShell.tsx b/apps/portal/src/components/global/AppShell.tsx
index 1f1979da..aa98eca6 100644
--- a/apps/portal/src/components/global/AppShell.tsx
+++ b/apps/portal/src/components/global/AppShell.tsx
@@ -44,7 +44,7 @@ function ProfileJewel() {
   }
 
   const userNavigation = [
-    { href: '/profile', name: 'Profile' },
+    // { href: '/profile', name: 'Profile' },
     {
       href: '/api/auth/signout',
       name: 'Log out',
diff --git a/apps/portal/src/components/global/ProductNavigation.tsx b/apps/portal/src/components/global/ProductNavigation.tsx
index bdd8efd6..60f8c328 100644
--- a/apps/portal/src/components/global/ProductNavigation.tsx
+++ b/apps/portal/src/components/global/ProductNavigation.tsx
@@ -36,14 +36,13 @@ export default function ProductNavigation({
         className="hover:text-primary-700 flex items-center gap-2 text-base font-medium"
         href={titleHref}>
         <div>
-          {titleHref !== '/' &&
-            (logo ?? (
-              <img
-                alt="Tech Interview Handbook"
-                className="h-8 w-auto"
-                src="/logo.svg"
-              />
-            ))}
+          {logo ?? (
+            <img
+              alt="Tech Interview Handbook"
+              className="h-8 w-auto"
+              src="/logo.svg"
+            />
+          )}
         </div>
         {title}
       </Link>
diff --git a/apps/portal/src/components/offers/OffersNavigation.tsx b/apps/portal/src/components/offers/OffersNavigation.tsx
index cf4b8e1f..11bc1856 100644
--- a/apps/portal/src/components/offers/OffersNavigation.tsx
+++ b/apps/portal/src/components/offers/OffersNavigation.tsx
@@ -16,7 +16,11 @@ const navigationAuthenticated: ProductNavigationItems = [
 const config = {
   googleAnalyticsMeasurementID: 'G-34XRGLEVCF',
   logo: (
-    <img alt="Tech Offers Repo" className="h-8 w-auto" src="/offers-logo.svg" />
+    <img
+      alt="Tech Offers Repo"
+      className="h-8 w-auto"
+      src="/logos/offers-logo.svg"
+    />
   ),
   navigation,
   showGlobalNav: false,
diff --git a/apps/portal/src/components/questions/LandingComponent.tsx b/apps/portal/src/components/questions/LandingComponent.tsx
index 6972f22a..7996a036 100644
--- a/apps/portal/src/components/questions/LandingComponent.tsx
+++ b/apps/portal/src/components/questions/LandingComponent.tsx
@@ -70,9 +70,9 @@ export default function LandingComponent({ onLanded }: LandingComponentProps) {
         <header className="flex flex-col items-start gap-16">
           <div className="flex flex-col items-center">
             <img
-              alt="Questions Bank"
+              alt="Question Bank"
               className="h-40 w-40"
-              src="/bank-logo.png"
+              src="/logos/bank-logo.png"
             />
             <h1 className="text-primary-700 text-center text-5xl font-bold">
               Tech Interview Question Bank
diff --git a/apps/portal/src/components/questions/QuestionsNavigation.tsx b/apps/portal/src/components/questions/QuestionsNavigation.tsx
index dfbd97b3..116b1474 100644
--- a/apps/portal/src/components/questions/QuestionsNavigation.tsx
+++ b/apps/portal/src/components/questions/QuestionsNavigation.tsx
@@ -11,7 +11,11 @@ const navigation: ProductNavigationItems = [
 const config = {
   googleAnalyticsMeasurementID: 'G-0T4LYWMK8L',
   logo: (
-    <img alt="Questions Bank" className="h-8 w-auto" src="/bank-logo.png" />
+    <img
+      alt="Questions Bank"
+      className="h-8 w-auto"
+      src="/logos/bank-logo.png"
+    />
   ),
   navigation,
   showGlobalNav: false,
diff --git a/apps/portal/src/components/resumes/ResumesNavigation.tsx b/apps/portal/src/components/resumes/ResumesNavigation.tsx
index ba39547c..c73299c4 100644
--- a/apps/portal/src/components/resumes/ResumesNavigation.tsx
+++ b/apps/portal/src/components/resumes/ResumesNavigation.tsx
@@ -26,7 +26,7 @@ const config = {
     <img
       alt="Tech Resume Review"
       className="h-8 w-auto"
-      src="/resumes-logo.svg"
+      src="/logos/resumes-logo.svg"
     />
   ),
   navigation,
diff --git a/apps/portal/src/pages/index.tsx b/apps/portal/src/pages/index.tsx
index 51f58469..a16a0ec8 100644
--- a/apps/portal/src/pages/index.tsx
+++ b/apps/portal/src/pages/index.tsx
@@ -1,13 +1,75 @@
+import { Button } from '@tih/ui';
+
+import Container from '~/components/shared/Container';
+
+const features = [
+  {
+    description:
+      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
+    href: '/resumes',
+    img: '/logos/resumes-logo.svg',
+    name: 'Resume Review',
+  },
+  {
+    description:
+      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
+    href: '/offers',
+    img: '/logos/offers-logo.svg',
+    name: 'Tech Offers',
+  },
+  {
+    description:
+      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
+    href: '/questions',
+    img: '/logos/bank-logo.png',
+    name: 'Question Bank',
+  },
+];
+
 export default function HomePage() {
   return (
-    <main className="flex-1 overflow-y-auto">
-      <div className="flex h-full items-center justify-center">
-        <div className="space-y-4">
-          <h1 className="text-primary-600 text-center text-4xl font-bold">
-            Tech Interview Handbook Portal
+    <div className="bg-white py-12">
+      <Container className="space-y-24">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl md:text-6xl">
+            <span className="block">Tech Interview Handbook</span>
+            <span className="text-primary-600 block">Portal</span>
           </h1>
+          <p className="mx-auto mt-3 max-w-md text-base text-slate-500 sm:text-lg md:mt-5 md:max-w-3xl md:text-xl">
+            Suite of products to help you get better at technical interviews.
+          </p>
         </div>
-      </div>
-    </main>
+        <div>
+          <h2 className="sr-only">Products.</h2>
+          <dl className="space-y-10 lg:grid lg:grid-cols-3 lg:gap-12 lg:space-y-0">
+            {features.map((feature) => (
+              <div key={feature.name}>
+                <dt>
+                  <div className="flex justify-center">
+                    <img
+                      alt={feature.name}
+                      className="h-48"
+                      src={feature.img}
+                    />
+                  </div>
+                  <p className="mt-8 text-xl font-medium leading-6 text-slate-900">
+                    {feature.name}
+                  </p>
+                </dt>
+                <dd className="mt-2 text-base text-slate-500">
+                  {feature.description}
+                </dd>
+                <Button
+                  className="mt-4"
+                  href={feature.href}
+                  label="Try it out"
+                  variant="tertiary"
+                />
+              </div>
+            ))}
+          </dl>
+        </div>
+      </Container>
+    </div>
   );
 }
diff --git a/apps/portal/src/pages/offers/features.tsx b/apps/portal/src/pages/offers/features.tsx
index cfe04a35..6457070e 100644
--- a/apps/portal/src/pages/offers/features.tsx
+++ b/apps/portal/src/pages/offers/features.tsx
@@ -90,7 +90,7 @@ export default function LandingPage() {
             <img
               alt="Tech Offers Repo"
               className="mx-auto mb-8 w-auto"
-              src="/offers-logo.svg"
+              src="/logos/offers-logo.svg"
             />
             <h1 className="text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
               <span>Choosing offers </span>