[portal][feat] add homepage

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',

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 ?? (
-            (logo ?? (
             <img
               alt="Tech Interview Handbook"
               className="h-8 w-auto"
               src="/logo.svg"
             />
-            ))}
+          )}
         </div>
         {title}
       </Link>

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,

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

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,

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,

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="bg-white py-12">
-      <div className="flex h-full items-center justify-center">
+      <Container className="space-y-24">
-        <div className="space-y-4">
+        <div className="text-center">
-          <h1 className="text-primary-600 text-center text-4xl font-bold">
+          <h1 className="text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl md:text-6xl">
-            Tech Interview Handbook Portal
+            <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>
+          <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>
-    </main>
   );
 }

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>