feat(onboarding): redesign onboarding v2 page

packages/shared/src/components/InteractionCounter.tsx

@@ -32,7 +32,7 @@ export default function InteractionCounter({
   }, [value]);
 
   const elementClassName = classNames(
-    'flex h-5 min-w-[1ch] flex-col overflow-hidden',
+    'flex h-5 min-w-[2ch] flex-col items-start overflow-hidden text-left !leading-5',
     className,
   );
 
@@ -49,27 +49,21 @@ export default function InteractionCounter({
     setShownValue(value);
   };
 
-  const childClassName =
-    'h-5 inline-block transition-[opacity,transform] ease-in-out duration-300 will-change-[opacity,transform]';
+  const animationContainerClassName =
+    'flex flex-col items-start transition-transform duration-300 ease-in-out will-change-transform';
+  const rowClassName = 'inline-block h-5 shrink-0 !leading-5';
 
   return (
     <span className={elementClassName} {...props}>
       <span
         className={classNames(
-          childClassName,
-          animate ? '-translate-y-full opacity-0' : 'translate-y-0 opacity-100',
-        )}
-      >
-        {largeNumberFormat(shownValue)}
-      </span>
-      <span
-        className={classNames(
-          childClassName,
-          animate ? '-translate-y-full opacity-100' : 'translate-y-0 opacity-0',
+          animationContainerClassName,
+          animate ? '-translate-y-5' : 'translate-y-0',
         )}
         onTransitionEnd={updateShownValue}
       >
-        {largeNumberFormat(value)}
+        <span className={rowClassName}>{largeNumberFormat(shownValue)}</span>
+        <span className={rowClassName}>{largeNumberFormat(value)}</span>
       </span>
     </span>
   );

packages/shared/src/components/LoginButton.tsx

@@ -15,6 +15,7 @@ interface ClassName {
 
 interface LoginButtonProps {
   className?: ClassName;
+  onSignupClick?: () => boolean | void;
 }
 
 enum ButtonCopy {
@@ -32,11 +33,17 @@ const getLogEvent = (copy: ButtonCopy): LogEvent => ({
 
 export default function LoginButton({
   className = {},
+  onSignupClick,
 }: LoginButtonProps): ReactElement {
   const { logEvent } = useLogContext();
   const { showLogin } = useAuthContext();
   const onClick = (copy: ButtonCopy) => {
     logEvent(getLogEvent(copy));
+
+    if (copy === ButtonCopy.Signup && onSignupClick?.()) {
+      return;
+    }
+
     showLogin({
       trigger: AuthTriggers.MainButton,
       options: {

packages/shared/src/components/MainLayout.tsx

@@ -19,7 +19,7 @@ import { PromptElement } from './modals/Prompt';
 import { useNotificationParams } from '../hooks/useNotificationParams';
 import { useAuthContext } from '../contexts/AuthContext';
 import { SharedFeedPage } from './utilities';
-import { isTesting, onboardingUrl } from '../lib/constants';
+import { isTesting, onboardingUrl, onboardingV2Path } from '../lib/constants';
 import { useBanner } from '../hooks/useBanner';
 import { useGrowthBookContext } from './GrowthBookProvider';
 import {
@@ -58,6 +58,7 @@ export interface MainLayoutProps
   screenCentered?: boolean;
   customBanner?: ReactNode;
   showSidebar?: boolean;
+  sidebarDisabled?: boolean;
   onNavTabClick?: (tab: string) => void;
   canGoBack?: string;
   hideBackButton?: boolean;
@@ -71,8 +72,10 @@ function MainLayoutComponent({
   isNavItemsButton,
   customBanner,
   additionalButtons,
+  hideSearchField,
   screenCentered = true,
   showSidebar = true,
+  sidebarDisabled = true,
   className,
   onLogoClick,
   onNavTabClick,
@@ -97,6 +100,26 @@ function MainLayoutComponent({
   useAuthVerificationRecovery();
   useNotificationParams();
 
+  const onSignupClick = (): boolean => {
+    if (router.pathname !== onboardingV2Path) {
+      return false;
+    }
+
+    router.replace(
+      {
+        pathname: router.pathname,
+        query: {
+          ...router.query,
+          onbSignup: '1',
+        },
+      },
+      undefined,
+      { shallow: true },
+    );
+
+    return true;
+  };
+
   useEffect(() => {
     if (!isNotificationsReady || unreadCount === 0 || hasLoggedImpression) {
       return;
@@ -192,7 +215,9 @@ function MainLayoutComponent({
         hasBanner={isBannerAvailable}
         sidebarRendered={sidebarRendered}
         additionalButtons={additionalButtons}
+        hideSearchField={hideSearchField}
         onLogoClick={onLogoClick}
+        onSignupClick={onSignupClick}
       />
       <main
         className={classNames(
@@ -202,6 +227,7 @@ function MainLayoutComponent({
           isAuthReady &&
             !isScreenCentered &&
             sidebarExpanded &&
+            !sidebarDisabled &&
             'laptop:!pl-60',
           isBannerAvailable && 'laptop:pt-24',
         )}
@@ -212,6 +238,7 @@ function MainLayoutComponent({
             onNavTabClick={onNavTabClick}
             onLogoClick={onLogoClick}
             activePage={activePage}
+            disabled={sidebarDisabled}
           />
         )}
         {children}

packages/shared/src/components/auth/OnboardingRegistrationForm.tsx

@@ -155,7 +155,7 @@ export const OnboardingRegistrationForm = ({
           onLogin={() => onExistingEmail?.('')}
           className={{
             container:
-              'mx-auto mt-6 text-center text-text-secondary typo-callout',
+              'mx-auto mt-6 w-full justify-center border-t border-border-subtlest-tertiary pt-6 text-center text-text-secondary typo-callout',
             login: '!text-inherit',
           }}
         />

packages/shared/src/components/auth/RegistrationForm.tsx

@@ -33,7 +33,7 @@ import {
   TypographyTag,
   TypographyType,
 } from '../typography/Typography';
-import { onboardingGradientClasses } from '../onboarding/common';
+
 import { useAuthData } from '../../contexts/AuthDataContext';
 import { authAtom } from '../../features/onboarding/store/onboarding.store';
 import { FunnelTargetId } from '../../features/onboarding/types/funnelEvents';
@@ -81,6 +81,8 @@ const RegistrationForm = ({
   const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
   const [name, setName] = useState('');
   const isRecruiterOnboarding = trigger === AuthTriggers.RecruiterSelfServe;
+  const hideExperienceLevel =
+    isRecruiterOnboarding || trigger === AuthTriggers.Onboarding;
   const {
     username,
     setUsername,
@@ -162,7 +164,7 @@ const RegistrationForm = ({
     );
     delete values?.['cf-turnstile-response'];
 
-    const requiresExperienceLevel = !isRecruiterOnboarding;
+    const requiresExperienceLevel = !hideExperienceLevel;
     if (
       !values['traits.name']?.length ||
       !values['traits.username']?.length ||
@@ -271,9 +273,10 @@ const RegistrationForm = ({
             variant={ButtonVariant.Secondary}
           />
           <Typography
-            className={classNames('mt-0.5 flex-1', onboardingGradientClasses)}
+            className="mt-0.5 flex-1 text-text-primary"
             tag={TypographyTag.H2}
-            type={TypographyType.Title1}
+            type={TypographyType.Title2}
+            bold
           >
             Join daily.dev
           </Typography>
@@ -385,7 +388,7 @@ const RegistrationForm = ({
           }
           rightIcon={usernameIcon}
         />
-        {!isRecruiterOnboarding && (
+        {!hideExperienceLevel && (
           <ExperienceLevelDropdown
             className={{ container: 'w-full' }}
             name="traits.experienceLevel"

packages/shared/src/components/auth/SocialRegistrationForm.tsx

@@ -5,7 +5,7 @@ import type {
   AuthTriggersType,
   SocialRegistrationParameters,
 } from '../../lib/auth';
-import { AuthEventNames } from '../../lib/auth';
+import { AuthEventNames, AuthTriggers } from '../../lib/auth';
 import { formToJson } from '../../lib/form';
 import { Button, ButtonVariant } from '../buttons/Button';
 import ImageInput from '../fields/ImageInput';
@@ -57,9 +57,11 @@ export const SocialRegistrationForm = ({
   onSignup,
   isLoading,
   simplified,
+  trigger,
 }: SocialRegistrationFormProps): ReactElement => {
   const { logEvent } = useLogContext();
   const { user } = useContext(AuthContext);
+  const hideExperienceLevel = trigger === AuthTriggers.Onboarding;
   const [nameHint, setNameHint] = useState<string>(null);
   const [usernameHint, setUsernameHint] = useState<string>(null);
   const [experienceLevelHint, setExperienceLevelHint] = useState<string>(null);
@@ -118,7 +120,7 @@ export const SocialRegistrationForm = ({
       return;
     }
 
-    if (!values.experienceLevel?.length) {
+    if (!hideExperienceLevel && !values.experienceLevel?.length) {
       logError('Experience level not provided');
       setExperienceLevelHint('Please select your experience level');
       return;
@@ -229,18 +231,20 @@ export const SocialRegistrationForm = ({
           }
           rightIcon={isLoadingUsername ? <Loader /> : null}
         />
-        <ExperienceLevelDropdown
-          className={{ container: 'w-full' }}
-          name="experienceLevel"
-          onChange={() => {
-            if (experienceLevelHint) {
-              setExperienceLevelHint(null);
-            }
-          }}
-          valid={experienceLevelHint === null}
-          hint={experienceLevelHint}
-          saveHintSpace
-        />
+        {!hideExperienceLevel && (
+          <ExperienceLevelDropdown
+            className={{ container: 'w-full' }}
+            name="experienceLevel"
+            onChange={() => {
+              if (experienceLevelHint) {
+                setExperienceLevelHint(null);
+              }
+            }}
+            valid={experienceLevelHint === null}
+            hint={experienceLevelHint}
+            saveHintSpace
+          />
+        )}
         <span className="border-b border-border-subtlest-tertiary pb-4 text-text-secondary typo-subhead">
           Your email will be used to send you product and community updates
         </span>

packages/shared/src/components/layout/HeaderButtons.tsx

@@ -10,12 +10,14 @@ import { OpportunityEntryButton } from '../opportunity/OpportunityEntryButton';
 
 interface HeaderButtonsProps {
   additionalButtons?: ReactNode;
+  onSignupClick?: () => boolean | void;
 }
 
 const Container = classed('div', 'ml-auto flex justify-end gap-3');
 
 export function HeaderButtons({
   additionalButtons,
+  onSignupClick,
 }: HeaderButtonsProps): ReactElement {
   const { isLoggedIn, isAuthReady } = useAuthContext();
   const { loadedSettings } = useSettingsContext();
@@ -28,6 +30,7 @@ export function HeaderButtons({
     return (
       <Container>
         <LoginButton
+          onSignupClick={onSignupClick}
           className={{
             container: 'gap-4',
             button: 'hidden laptop:block',

packages/shared/src/components/layout/MainLayoutHeader.tsx

@@ -20,6 +20,8 @@ export interface MainLayoutHeaderProps {
   sidebarRendered?: boolean;
   additionalButtons?: ReactNode;
   onLogoClick?: (e: React.MouseEvent) => unknown;
+  hideSearchField?: boolean;
+  onSignupClick?: () => boolean | void;
 }
 
 const SearchPanel = dynamic(
@@ -39,6 +41,8 @@ function MainLayoutHeader({
   sidebarRendered,
   additionalButtons,
   onLogoClick,
+  hideSearchField,
+  onSignupClick,
 }: MainLayoutHeaderProps): ReactElement {
   const { loadedSettings } = useSettingsContext();
   const { streak, isStreaksEnabled } = useReadingStreak();
@@ -56,6 +60,7 @@ function MainLayoutHeader({
 
   const RenderSearchPanel = useCallback(
     () =>
+      !hideSearchField &&
       loadedSettings && (
         <SearchPanel
           className={{
@@ -70,7 +75,7 @@ function MainLayoutHeader({
           }}
         />
       ),
-    [loadedSettings, isSearchPage, hasBanner],
+    [loadedSettings, isSearchPage, hasBanner, hideSearchField],
   );
 
   if (loadedSettings && !isLaptop) {
@@ -114,7 +119,10 @@ function MainLayoutHeader({
             />
           </div>
           <RenderSearchPanel />
-          <HeaderButtons additionalButtons={additionalButtons} />
+          <HeaderButtons
+            additionalButtons={additionalButtons}
+            onSignupClick={onSignupClick}
+          />
         </>
       )}
     </header>

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

@@ -21,13 +21,15 @@ interface SidebarProps {
   isNavButtons?: boolean;
   onNavTabClick?: (tab: string) => void;
   onLogoClick?: (e: React.MouseEvent) => unknown;
+  disabled?: boolean;
 }
 
 export const Sidebar = ({
   isNavButtons,
   onNavTabClick,
   onLogoClick,
   activePage,
+  disabled,
 }: SidebarProps): ReactElement => {
   const isLaptop = useViewSize(ViewSize.Laptop);
   const isTablet = useViewSize(ViewSize.Tablet);
@@ -39,6 +41,7 @@ export const Sidebar = ({
         activePage={activePage}
         onLogoClick={onLogoClick}
         featureTheme={featureTheme}
+        disabled={disabled}
       />
     );
   }
@@ -52,6 +55,7 @@ export const Sidebar = ({
         featureTheme={featureTheme}
         isNavButtons={isNavButtons}
         onNavTabClick={onNavTabClick}
+        disabled={disabled}
       />
     );
   }