[offers][feat] add header for pages (#526)

* [offers][feat] add header for pages * [offers][fix] fix pronoun for toast * [offers][feat] fix index page description
2 years ago · d1956ca12a
parent a79e132161
commit d1956ca12a
11 changed files with 509 additions and 442 deletions
--- a/apps/portal/src/components/offers/OffersNavigation.tsx
+++ b/apps/portal/src/components/offers/OffersNavigation.tsx
@ -8,7 +8,7 @@ const navigation: ProductNavigationItems = [

 const navigationAuthenticated: ProductNavigationItems = [
  { href: '/offers/submit', name: 'Analyze your offers' },
-  { href: '/offers/dashboard', name: 'Your dashboard' },
+  { href: '/offers/dashboard', name: 'My dashboard' },
  { href: '/offers/features', name: 'Features' },
  { href: '/offers/about', name: 'About' },
 ];
--- a/apps/portal/src/pages/index.tsx
+++ b/apps/portal/src/pages/index.tsx
@ -12,7 +12,7 @@ const features = [
  },
  {
    description:
-      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
+      'Reveal stories behind offers. Help job seekers benchmark and analyse their anonymous offers with more context. Encourage discussions around offer profiles.',
    href: '/offers',
    img: '/logos/offers-logo.svg',
    name: 'Tech Offers',
--- a/apps/portal/src/pages/offers/about.tsx
+++ b/apps/portal/src/pages/offers/about.tsx
@ -1,3 +1,5 @@
+import Head from 'next/head';
+
 import Container from '~/components/shared/Container';

 const people = [
@ -29,6 +31,10 @@ const people = [

 export default function AboutPage() {
  return (
+    <>
+      <Head>
+        <title>About us - Tech Offers Repo</title>
+      </Head>
      <div className="lg:py-18 bg-white py-12">
        <Container variant="xs">
          <div className="space-y-12">
@ -40,8 +46,8 @@ export default function AboutPage() {
                Tech Offers Repo, a project under the series of Tech Interview
                Handbook (TIH), reveals the stories behind offers by focusing on
                the profiles of the offer receivers. It helps job seekers
-              benchmark and analyse their anonymous offers with more context and
-              encourages discussions around offer profiles.
+                benchmark and analyse their anonymous offers with more context
+                and encourages discussions around offer profiles.
              </p>
            </div>
            {/* Feedback */}
@ -99,5 +105,6 @@ export default function AboutPage() {
          </div>
        </Container>
      </div>
+    </>
  );
 }
--- a/apps/portal/src/pages/offers/dashboard.tsx
+++ b/apps/portal/src/pages/offers/dashboard.tsx
@ -1,3 +1,4 @@
+import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { signIn, useSession } from 'next-auth/react';
 import { useState } from 'react';
@ -45,6 +46,10 @@ export default function ProfilesDashboard() {

  if (userProfiles.length === 0) {
    return (
+      <>
+        <Head>
+          <title>My Dashboard - Tech Offers Repo</title>
+        </Head>
        <div className="flex w-full">
          <div className="w-full justify-center space-y-8 py-16 text-xl">
            <div className="flex w-full flex-row justify-center">
@ -60,10 +65,15 @@ export default function ProfilesDashboard() {
            </div>
          </div>
        </div>
+      </>
    );
  }

  return (
+    <>
+      <Head>
+        <title>My Dashboard - Tech Offers Repo</title>
+      </Head>
      <Container variant="xs">
        {userProfilesQuery.isLoading && (
          <div className="flex h-screen">
@ -75,11 +85,11 @@ export default function ProfilesDashboard() {
        {!userProfilesQuery.isLoading && (
          <div className="overflow-y-auto py-8">
            <h1 className="mx-auto mb-4 text-start text-4xl font-bold text-slate-900">
-            Your dashboard
+              My dashboard
            </h1>
            <p className="mt-4 text-xl leading-8 text-slate-500">
-            Save your offer profiles to your dashboard to easily access and edit
-            them later.
+              Save your offer profiles to your dashboard to easily access and
+              edit them later.
            </p>
            <div className="mt-8 flex justify-center">
              <ul className="w-full space-y-4" role="list">
@ -93,5 +103,6 @@ export default function ProfilesDashboard() {
          </div>
        )}
      </Container>
+    </>
  );
 }
--- a/apps/portal/src/pages/offers/features.tsx
+++ b/apps/portal/src/pages/offers/features.tsx
@ -1,3 +1,4 @@
+import Head from 'next/head';
 import type { SVGProps } from 'react';
 import {
  BookmarkSquareIcon,
@ -82,6 +83,10 @@ const footerNavigation = {

 export default function LandingPage() {
  return (
+    <>
+      <Head>
+        <title>Features - Tech Offers Repo</title>
+      </Head>
      <div className="mx-auto w-full overflow-y-auto bg-white">
        <main>
          {/* Hero section */}
@ -99,7 +104,8 @@ export default function LandingPage() {
                </span>
              </h1>
              <p className="mx-auto mt-6 max-w-lg text-center text-xl sm:max-w-3xl">
-              Analyze your offers using profiles from fellow software engineers.
+                Analyze your offers using profiles from fellow software
+                engineers.
              </p>
              <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-1 sm:gap-5 sm:space-y-0">
@ -181,8 +187,8 @@ export default function LandingPage() {
                Your privacy is our priority.
              </h2>
              <p className="text-primary-100 mt-4 flex flex-row justify-center text-lg">
-              All offer profiles are anonymized and we do not store information
-              about your personal identity.
+                All offer profiles are anonymized and we do not store
+                information about your personal identity.
              </p>
              <div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
                {features.map((feature) => (
@ -253,5 +259,6 @@ export default function LandingPage() {
          </div>
        </footer>
      </div>
+    </>
  );
 }
--- a/apps/portal/src/pages/offers/index.tsx
+++ b/apps/portal/src/pages/offers/index.tsx
@ -1,3 +1,4 @@
+import Head from 'next/head';
 import Link from 'next/link';
 import { useState } from 'react';
 import { MapPinIcon } from '@heroicons/react/24/outline';
@ -27,6 +28,10 @@ export default function OffersHomePage() {
    useSearchParamSingle<JobTitleType | null>('jobTitleId');

  return (
+    <>
+      <Head>
+        <title>Home - Tech Offers Repo</title>
+      </Head>
      <main className="flex-1 overflow-y-auto">
        <Banner size="sm">
          ⭐ Check if your offer is competitive by submitting it{' '}
@ -140,5 +145,6 @@ export default function OffersHomePage() {
          />
        </Container>
      </main>
+    </>
  );
 }
--- a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx
@ -1,4 +1,5 @@
 import Error from 'next/error';
+import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
 import { useState } from 'react';
@ -201,6 +202,12 @@ export default function OfferProfile() {
      </div>
    </div>
  ) : (
+    <>
+      <Head>
+        <title>
+          {background?.profileName ? background.profileName : 'View profile'}
+        </title>
+      </Head>
      <div className="w-full divide-x lg:flex">
        <div className="divide-y lg:w-2/3">
          <div className="h-fit">
@ -238,5 +245,6 @@ export default function OfferProfile() {
          />
        </div>
      </div>
+    </>
  );
 }
--- a/apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx
@ -1,4 +1,5 @@
 import Error from 'next/error';
+import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { JobType } from '@prisma/client';
@ -88,6 +89,9 @@ export default function OffersEditPage() {

  return (
    <>
+      <Head>
+        <title>Edit profile</title>
+      </Head>
      {getProfileResult.isError && (
        <div className="flex w-full justify-center">
          <Error statusCode={404} title="Requested profile does not exist" />
--- a/apps/portal/src/pages/offers/submit.tsx
+++ b/apps/portal/src/pages/offers/submit.tsx
@ -1,5 +1,14 @@
+import Head from 'next/head';
+
 import OffersSubmissionForm from '~/components/offers/offersSubmission/OffersSubmissionForm';

 export default function OffersSubmissionPage() {
-  return <OffersSubmissionForm />;
+  return (
+    <>
+      <Head>
+        <title>Analyze your offers</title>
+      </Head>
+      <OffersSubmissionForm />
+    </>
+  );
 }
--- a/apps/portal/src/pages/offers/submit/index.tsx
+++ b/apps/portal/src/pages/offers/submit/index.tsx
@ -1,5 +1,14 @@
+import Head from 'next/head';
+
 import OffersSubmissionForm from '~/components/offers/offersSubmission/OffersSubmissionForm';

 export default function OffersSubmissionPage() {
-  return <OffersSubmissionForm />;
+  return (
+    <>
+      <Head>
+        <title>Analyze your offers</title>
+      </Head>
+      <OffersSubmissionForm />
+    </>
+  );
 }
--- a/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx
+++ b/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx
@ -1,4 +1,5 @@
 import Error from 'next/error';
+import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
 import { useEffect, useRef, useState } from 'react';
@ -92,6 +93,10 @@ export default function OffersSubmissionResult() {
      title="You do not have permissions to access this page"
    />
  ) : (
+    <>
+      <Head>
+        <title>View the result</title>
+      </Head>
      <div ref={pageRef} className="w-full">
        <div className="flex justify-center">
          <div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
@ -139,5 +144,6 @@ export default function OffersSubmissionResult() {
          </div>
        </div>
      </div>
+    </>
  );
 }