feat: new job hub pages

packages/shared/src/components/RecruiterLayout.tsx

@@ -52,7 +52,7 @@ export const RecruiterLayout = ({
       params.append(key, value as string);
     });
 
-    params.delete('id'); // remove opportunity id param
+    params.delete('id'); // remove jobs id param
 
     router.push(`${onboardingUrl}?${params.toString()}`);
   }, [shouldRedirectOnboarding, router]);

packages/shared/src/components/fields/DragDrop.tsx

@@ -152,8 +152,8 @@ export function DragDrop({
   renderCta,
   isCopyBold,
   dragDropDescription = 'Drag & Drop your CV or',
-  ctaLabelDesktop = 'Upload PDF',
-  ctaLabelMobile = 'Upload PDF',
+  ctaLabelDesktop = 'Upload CV',
+  ctaLabelMobile = 'Upload CV',
   uploadIcon,
   showRemove,
   fullClick = false,

packages/shared/src/components/opportunity/NewOpportunityPopover.tsx

@@ -34,7 +34,7 @@ export const NewOpportunityPopover = (): ReactElement => {
         >
           Your next big move is here!
         </Typography>
-        <Link href={`${webappUrl}opportunity/${alerts.opportunityId}`} passHref>
+        <Link href={`${webappUrl}jobs/${alerts.opportunityId}`} passHref>
           <Button
             size={ButtonSize.XSmall}
             onClick={logOpportunityNudgeClick}
@@ -52,7 +52,7 @@ export const NewOpportunityPopover = (): ReactElement => {
           Hey {user.name}, We&#39;ve found a new opportunity that aligns with
           your experience and what you’ve been exploring lately.
         </Typography>
-        <Link href={`${webappUrl}opportunity/${alerts.opportunityId}`} passHref>
+        <Link href={`${webappUrl}jobs/${alerts.opportunityId}`} passHref>
           <Button
             tag="a"
             variant={ButtonVariant.Primary}

packages/shared/src/components/opportunity/OpportunityEntryButton.tsx

@@ -56,8 +56,8 @@ export const OpportunityEntryButton = () => {
     <RenderTooltip content="Jobs" placement="bottom-end">
       <div>
         <Link
-          href={`${webappUrl}opportunity/${
-            hasOpportunityAlert ? alerts.opportunityId : 'welcome'
+          href={`${webappUrl}jobs/${
+            hasOpportunityAlert ? alerts.opportunityId : ''
           }`}
           passHref
         >

packages/shared/src/components/opportunity/OpportunityHeader.tsx

@@ -0,0 +1,45 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import useSidebarRendered from '../../hooks/useSidebarRendered';
+import { Typography, TypographyType } from '../typography/Typography';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import Link from '../utilities/Link';
+import { settingsUrl, webappUrl } from '../../lib/constants';
+import { FilterIcon } from '../icons';
+
+const jobPreferenceUrl = `${settingsUrl}job-preferences`;
+const howItWorksUrl = `${webappUrl}opportunity/how-it-works`;
+export const OpportunityHeader = (): ReactElement => {
+  const { sidebarRendered } = useSidebarRendered();
+
+  if (sidebarRendered) {
+    return <></>;
+  }
+
+  return (
+    <div className="flex items-center justify-between border-b border-border-subtlest-tertiary px-5 py-3">
+      <Typography type={TypographyType.Title3} bold>
+        Jobs
+      </Typography>
+      <div className="flex gap-2">
+        <Link href={howItWorksUrl}>
+          <Button
+            tag="a"
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Small}
+          >
+            How it works
+          </Button>
+        </Link>
+        <Link href={jobPreferenceUrl}>
+          <Button
+            tag="a"
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Small}
+            icon={<FilterIcon />}
+          />
+        </Link>
+      </div>
+    </div>
+  );
+};

packages/shared/src/components/opportunity/OpportunitySteps/OpportunityStepsInfo.tsx

@@ -35,7 +35,7 @@ export const OpportunityStepsInfo = (
   );
 
   const goToNextStep = () => {
-    router.push(`${webappUrl}opportunity/${opportunityId}/questions-setup`);
+    router.push(`${webappUrl}jobs/${opportunityId}/questions-setup`);
   };
 
   const {

packages/shared/src/components/opportunity/OpportunitySteps/OpportunityStepsQuestions.tsx

@@ -39,7 +39,7 @@ export const OpportunityStepsQuestions = (
   const { displayToast } = useToastNotification();
 
   const goToNextStep = () => {
-    router.push(`${webappUrl}opportunity/${opportunityId}/approved`);
+    router.push(`${webappUrl}jobs/${opportunityId}/approved`);
   };
 
   const {

packages/shared/src/components/sidebar/SidebarTablet.tsx

@@ -134,8 +134,8 @@ export const SidebarTablet = ({
       >
         <div className="relative">
           <Link
-            href={`${webappUrl}opportunity/${
-              hasOpportunityAlert ? alerts.opportunityId : 'welcome'
+            href={`${webappUrl}jobs/${
+              hasOpportunityAlert ? alerts.opportunityId : ''
             }`}
             prefetch={false}
             passHref

packages/shared/src/features/opportunity/components/IntroHeader.tsx

@@ -0,0 +1,39 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { DailyIcon } from '../../../components/icons';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { briefButtonBg } from '../../../styles/custom';
+
+export const IntroHeader = (): ReactElement => {
+  return (
+    <FlexCol className="items-center gap-2">
+      <FlexRow className="items-center gap-1">
+        <DailyIcon />{' '}
+        <Typography
+          center
+          type={TypographyType.Callout}
+          color={TypographyColor.Secondary}
+        >
+          Career mode unlocked (beta)
+        </Typography>
+      </FlexRow>
+      <Typography
+        center
+        type={TypographyType.LargeTitle}
+        bold
+        style={{
+          background: briefButtonBg,
+        }}
+        className="!bg-clip-text text-transparent"
+      >
+        Welcome to a new hiring experience that respects your time, privacy, and
+        intelligence
+      </Typography>
+    </FlexCol>
+  );
+};

packages/shared/src/features/opportunity/components/OpportunityAllSet.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { opportunityBriefcaseDone } from '../../../lib/image';
+import { briefButtonBg } from '../../../styles/custom';
+import { TargetId } from '../../../lib/log';
+import { CandidatePreferenceButton } from './CandidatePreferenceButton';
+
+export const OpportunityAllSet = (): ReactElement => {
+  return (
+    <div className="flex flex-col gap-6 rounded-16 border-border-subtlest-secondary px-4 py-6 laptop:border">
+      <div className="flex flex-col flex-wrap items-center gap-4 laptop:flex-row-reverse">
+        <img
+          src={opportunityBriefcaseDone}
+          className="max-w-36"
+          alt="daily.dev jobs"
+        />
+        <div className="flex flex-1 flex-wrap justify-center gap-2 text-center laptop:justify-start laptop:text-left">
+          <Typography
+            center
+            type={TypographyType.Title1}
+            bold
+            style={{
+              background: briefButtonBg,
+            }}
+            className="!bg-clip-text text-transparent"
+          >
+            You are all set!
+          </Typography>
+          <Typography
+            type={TypographyType.Callout}
+            color={TypographyColor.Primary}
+            className="flex-shrink"
+          >
+            We’ll surface the most relevant opportunities right here as they
+            become available, so you won’t miss anything important.
+          </Typography>
+        </div>
+      </div>
+      <CandidatePreferenceButton
+        label="Update job preferences"
+        targetId={TargetId.OpportunityWelcomePage}
+        className="w-full"
+      />
+    </div>
+  );
+};

packages/shared/src/features/opportunity/components/OpportunityBenefits.tsx

@@ -0,0 +1,54 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol } from '../../../components/utilities';
+import {
+  JobIcon,
+  MedalBadgeIcon,
+  ShieldPlusIcon,
+} from '../../../components/icons';
+
+const benefits = [
+  {
+    icon: <ShieldPlusIcon secondary />,
+    title: 'No recruiter spam',
+    description:
+      'No cold DMs from strangers. Only real roles from vetted teams, surfaced when there is a strong reason to talk.',
+  },
+  {
+    icon: <MedalBadgeIcon />,
+    title: 'Private until you say yes',
+    description:
+      'You stay invisible until you choose to engage. You quietly review matches, and nothing moves without your clear approval.',
+  },
+  {
+    icon: <JobIcon secondary />,
+    title: 'Signal, not noise',
+    description:
+      'We match you with roles based on your skills, preferences, and goals. If it is not a real fit, you will not see it.',
+  },
+];
+export const OpportunityBenefits = (): ReactElement => {
+  return (
+    <div className="flex flex-col gap-4 text-center tablet:flex-row">
+      {benefits.map(({ icon, title, description }) => (
+        <FlexCol className="flex-1 items-center gap-1" key={title}>
+          {icon}
+          <Typography type={TypographyType.Callout} bold className="mt-1.5">
+            {title}
+          </Typography>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Secondary}
+          >
+            {description}
+          </Typography>
+        </FlexCol>
+      ))}
+    </div>
+  );
+};

packages/shared/src/features/opportunity/components/OpportunityCVUpload.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import classNames from 'classnames';
+import { fileValidation, useUploadCv } from '../../profile/hooks/useUploadCv';
+import { FlexCol } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { UploadIcon } from '../../../components/icons/Upload';
+import { IconSize } from '../../../components/Icon';
+import { DragDrop } from '../../../components/fields/DragDrop';
+import { opportunityBriefcase } from '../../../lib/image';
+import useSidebarRendered from '../../../hooks/useSidebarRendered';
+import { FeelingLazy } from '../../profile/components/FeelingLazy';
+
+export const OpportunityCVUpload = (): ReactElement => {
+  const { sidebarRendered } = useSidebarRendered();
+  const { onUpload } = useUploadCv();
+
+  const handleFileSelect = (files: File[]) => {
+    if (files.length > 0) {
+      onUpload(files[0]);
+    }
+  };
+
+  return (
+    <div className="mx-auto max-w-xl px-4 py-10">
+      <FlexCol className="gap-4">
+        <Typography
+          type={TypographyType.Callout}
+          color={TypographyColor.Secondary}
+          center
+        >
+          Upload your CV so we can match you with opportunities that align with
+          your skills and preferences.
+        </Typography>
+        <div className="relative">
+          {sidebarRendered && (
+            <img
+              src={opportunityBriefcase}
+              className="absolute -left-12 z-1 w-24 -rotate-6"
+              alt="daily.dev jobs"
+            />
+          )}
+
+          <DragDrop
+            isCompactList
+            showRemove
+            fullClick
+            className={classNames('w-full')}
+            validation={fileValidation}
+            onFilesDrop={handleFileSelect}
+            uploadIcon={
+              <span className="flex size-8 items-center justify-center rounded-10 bg-surface-float text-text-primary">
+                <UploadIcon size={IconSize.Small} />
+              </span>
+            }
+          />
+        </div>
+        {sidebarRendered && (
+          <FlexCol className="items-center">
+            <FeelingLazy />
+          </FlexCol>
+        )}
+        <Typography
+          type={TypographyType.Footnote}
+          color={TypographyColor.Tertiary}
+          center
+          className="mt-2"
+        >
+          🛡️ We never want to waste your time. Ever.
+          <br /> 100% confidential. Zero bad recruiting.
+        </Typography>
+      </FlexCol>
+    </div>
+  );
+};