[offers][fix] fix landing page description (#424)

* [offers][fix] fix landing page width

* [offers][fix] fix landing page typo

* [offers][chore] fix British English in landing page

* [offers][chore] fix description in landing page

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

@@ -1,7 +1,7 @@
 import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
 
 const navigation: ProductNavigationItems = [
-  { href: '/offers/home', name: 'Home' },
+  { href: '/offers/browse', name: 'Browse' },
   { href: '/offers/submit', name: 'Analyse your offers' },
 ];
 

apps/portal/src/components/offers/landing/LeftTextCard.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 
+import { HOME_URL } from '~/components/offers/types';
+
 type LeftTextCardProps = Readonly<{
   description: string;
   icon: ReactNode;
@@ -8,7 +10,6 @@ type LeftTextCardProps = Readonly<{
   title: string;
 }>;
 
-const baseUrl = '/offers/home';
 export default function LeftTextCard({
   description,
   icon,
@@ -21,7 +22,7 @@ export default function LeftTextCard({
       <div className="mx-auto max-w-xl px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
         <div>
           <div>
-            <span className="flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600 to-indigo-600">
+            <span className="to-primary-500 flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600">
               {icon}
             </span>
           </div>
@@ -32,8 +33,8 @@ export default function LeftTextCard({
             <p className="mt-4 text-lg text-gray-500">{description}</p>
             <div className="mt-6">
               <a
-                className="inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
-                href={baseUrl}>
+                className="to-primary-500 inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                href={HOME_URL}>
                 Get started
               </a>
             </div>

apps/portal/src/components/offers/landing/RightTextCard.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 
+import { HOME_URL } from '~/components/offers/types';
+
 type RightTextCarddProps = Readonly<{
   description: string;
   icon: ReactNode;
@@ -8,7 +10,6 @@ type RightTextCarddProps = Readonly<{
   title: string;
 }>;
 
-const baseUrl = '/offers/home';
 export default function RightTextCard({
   description,
   icon,
@@ -21,7 +22,7 @@ export default function RightTextCard({
       <div className="mx-auto max-w-xl px-4 sm:px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
         <div>
           <div>
-            <span className="flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600 to-indigo-600">
+            <span className="to-primary-500 flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600">
               {icon}
             </span>
           </div>
@@ -32,8 +33,8 @@ export default function RightTextCard({
             <p className="mt-4 text-lg text-gray-500">{description}</p>
             <div className="mt-6">
               <a
-                className="inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
-                href={baseUrl}>
+                className="to-primary-500 inline-flex rounded-md border border-transparent bg-gradient-to-r from-purple-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                href={HOME_URL}>
                 Get started
               </a>
             </div>

apps/portal/src/components/offers/profile/ProfileComments.tsx

@@ -175,36 +175,7 @@ export default function ProfileComments({
       ) : (
         <div>Please log in before commenting on this profile.</div>
       )}
-      <div>
-        <TextArea
-          label={`Comment as ${
-            isEditable ? profileName : session?.user?.name ?? 'anonymous'
-          }`}
-          placeholder="Type your comment here"
-          value={currentReply}
-          onChange={(value) => setCurrentReply(value)}
-        />
-        <div className="mt-2 flex w-full justify-end">
-          <div className="w-fit">
-            <Button
-              disabled={
-                commentsQuery.isLoading ||
-                !currentReply.length ||
-                createCommentMutation.isLoading
-              }
-              display="block"
-              isLabelHidden={false}
-              isLoading={createCommentMutation.isLoading}
-              label="Comment"
-              size="sm"
-              variant="primary"
-              onClick={() => handleComment(currentReply)}
-            />
-          </div>
-        </div>
-        <HorizontalDivider />
-      </div>
-      <div className="h-full overflow-y-scroll">
+      <div className="h-full overflow-y-auto">
         <div className="h-content mb-96 w-full">
           {replies?.map((reply: Reply) => (
             <ExpandableCommentCard

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

@@ -2,6 +2,8 @@ import type { JobType } from '@prisma/client';
 
 import type { MonthYear } from '~/components/shared/MonthYearPicker';
 
+export const HOME_URL = '/offers/browse';
+
 /*
  *  Offer Profile
  */

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

@@ -10,26 +10,26 @@ import {
 
 import LeftTextCard from '~/components/offers/landing/LeftTextCard';
 import RightTextCard from '~/components/offers/landing/RightTextCard';
-const baseUrl = '/offers/home';
+import { HOME_URL } from '~/components/offers/types';
 
 const features = [
   {
     description:
-      'Name of the profile creator is stricly anonymous by using randomly generated names.',
+      'Profile names are randomly generated to keep your offers strictly anonymous.',
     icon: UsersIcon,
-    name: 'Anonymisd Profile Name',
+    name: 'Anonymized Profile Name',
   },
   {
     description:
-      ' Only people with the edit link can edit that profile. Share profiles to others using public link without giving edit permission.',
+      'Only users with the edit link can edit that profile. Share profiles to others using a public link without giving edit permission.',
     icon: ShareIcon,
     name: 'Edit Link v.s. Public Link',
   },
   {
     description:
-      "Offer profiles will not be automatically saved under creator's account in database unless explicit permission is given.",
+      "Offer profiles will not be automatically saved under creators' account in our database unless explicit permission is given.",
     icon: BookmarkSquareIcon,
-    name: 'No Auto-Save to User Account',
+    name: 'Save with Permission',
   },
 ];
 
@@ -79,29 +79,29 @@ const footerNavigation = {
 
 export default function LandingPage() {
   return (
-    <div className="overflow-y-auto bg-white">
+    <div className="mx-auto w-full overflow-y-auto bg-white">
       <main>
         {/* Hero section */}
         <div className="relative h-full">
           <div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
             <h1 className="text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
-              <span className="block">Choosing offers made easier</span>
-              <span className="from-primary-600 -mb-1 block bg-gradient-to-r to-purple-500 bg-clip-text pb-1 text-transparent">
-                using profiles behind offers.
+              <span>Choosing offers </span>
+              <span className="from-primary-600 -mb-1 mr-2 bg-gradient-to-r to-purple-500 bg-clip-text pb-1 pr-4 italic text-transparent">
+                made easier
               </span>
             </h1>
-            <p className="text-primary-600 mx-auto mt-6 max-w-lg text-center text-xl sm:max-w-3xl">
-              Analyse your offers using profiles from fellow software engineers.
+            <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.
             </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-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"
-                  href={baseUrl}>
+                  href={HOME_URL}>
                   Get started
                 </a>
                 <a
-                  className="bg-primary-600 flex items-center justify-center rounded-md border border-transparent px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-opacity-70 sm:px-8"
+                  className="bg-primary-500 flex items-center justify-center rounded-md border border-transparent px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-opacity-70 sm:px-8"
                   href="#">
                   Live demo
                 </a>
@@ -118,7 +118,7 @@ export default function LandingPage() {
           />
           <div className="relative">
             <LeftTextCard
-              description="An offer profile includes not only offers that a person get in their application cycle, but also background information such as education and work experience. Use offer profiles to help you better contaxtualize offers."
+              description="An offer profile includes not only offers that a person received in their application cycle, but also background information such as education and work experience. Use offer profiles to help you better contextualize offers."
               icon={
                 <InformationCircleIcon
                   aria-hidden="true"
@@ -161,13 +161,13 @@ export default function LandingPage() {
         </div>
 
         {/* Gradient Feature Section */}
-        <div className="bg-gradient-to-r from-purple-800 to-indigo-700">
+        <div className="to-primary-600 bg-gradient-to-r from-purple-800">
           <div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 sm:pt-20 sm:pb-24 lg:max-w-7xl lg:px-8 lg:pt-24">
             <h2 className="flex justify-center text-4xl font-bold tracking-tight text-white">
               Your privacy is our priority.
             </h2>
-            <p className="mt-4 flex flex-row justify-center text-lg text-purple-200">
-              All offer profiles are anonymised and we do not store information
+            <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.
             </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">
@@ -185,7 +185,7 @@ export default function LandingPage() {
                     <h3 className="text-lg font-medium text-white">
                       {feature.name}
                     </h3>
-                    <p className="mt-2 text-base text-purple-200">
+                    <p className="text-primary-100 mt-2 text-base">
                       {feature.description}
                     </p>
                   </div>
@@ -200,14 +200,14 @@ export default function LandingPage() {
           <div className="mx-auto max-w-4xl py-16 px-4 sm:px-6 sm:py-24 lg:flex lg:max-w-7xl lg:items-center lg:justify-between lg:px-8">
             <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-4xl">
               <span className="block">Ready to get started?</span>
-              <span className="-mb-1 block bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text pb-1 text-transparent">
+              <span className="to-primary-600 -mb-1 block bg-gradient-to-r from-purple-600 bg-clip-text pb-1 text-transparent">
                 Create your own offer profile today.
               </span>
             </h2>
             <div className="mt-6 space-y-4 sm:flex sm:space-y-0 sm:space-x-5">
               <a
-                className="flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-3 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
-                href={baseUrl}>
+                className="to-primary-500 flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-purple-600 bg-origin-border px-4 py-3 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                href={HOME_URL}>
                 Get Started
               </a>
             </div>

apps/portal/src/pages/offers/profile/[offerProfileId].tsx

@@ -10,6 +10,7 @@ import type {
   BackgroundDisplayData,
   OfferDisplayData,
 } from '~/components/offers/types';
+import { HOME_URL } from '~/components/offers/types';
 import type { JobTitleType } from '~/components/shared/JobTitles';
 import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
 
@@ -46,7 +47,7 @@ export default function OfferProfile() {
       enabled: typeof offerProfileId === 'string',
       onSuccess: (data: Profile) => {
         if (!data) {
-          router.push('/offers/home');
+          router.push(HOME_URL);
         }
         // If the profile is not editable with a wrong token, redirect to the profile page
         if (!data?.isEditable && token !== '') {
@@ -148,7 +149,7 @@ export default function OfferProfile() {
     },
     onSuccess: () => {
       trpcContext.invalidateQueries(['offers.profile.listOne']);
-      router.push('/offers/home');
+      router.push(HOME_URL);
       showToast({
         title: `Offers profile successfully deleted!`,
         variant: 'success',