From 1f5e9f3b4dc2ac460fa28280da4429348219c4af Mon Sep 17 00:00:00 2001
From: Emil Widlund <hello@emilwidlund.com>
Date: Fri, 16 Aug 2024 11:56:58 +0200
Subject: [PATCH] clients/web: improve landing layout

---
 .../src/components/Auth/GetStartedButton.tsx  |  25 ++-
 .../apps/web/src/components/Landing/API.tsx   |   2 +-
 .../web/src/components/Landing/Community.tsx  |   4 +-
 .../web/src/components/Landing/Hero/Hero.tsx  |  10 +-
 .../src/components/Landing/LandingLayout.tsx  |   6 -
 .../src/components/Landing/LandingPage.tsx    |  23 +--
 .../web/src/components/Landing/LastPitch.tsx  |   5 +-
 .../apps/web/src/components/Landing/MOR.tsx   |  13 +-
 .../src/components/Landing/Monetization.tsx   | 171 ++++++++++--------
 .../src/components/Landing/Testamonials.tsx   |   4 +-
 .../Landing/molecules/FeatureItem.tsx         |   2 +-
 .../web/src/components/Layout/PolarMenu.tsx   |   2 +-
 .../components/Layout/Public/TopbarRight.tsx  |   2 +-
 13 files changed, 140 insertions(+), 129 deletions(-)

diff --git a/clients/apps/web/src/components/Auth/GetStartedButton.tsx b/clients/apps/web/src/components/Auth/GetStartedButton.tsx
index 773a232c25..beabdc8165 100644
--- a/clients/apps/web/src/components/Auth/GetStartedButton.tsx
+++ b/clients/apps/web/src/components/Auth/GetStartedButton.tsx
@@ -1,29 +1,38 @@
+import { ArrowForwardOutlined } from '@mui/icons-material'
 import Link from 'next/link'
 import Button from 'polarkit/components/ui/atoms/button'
+import { ComponentProps } from 'react'
 import { twMerge } from 'tailwind-merge'
 
-interface GetStartedButtonProps {
+interface GetStartedButtonProps extends ComponentProps<typeof Button> {
   text?: string
   returnTo?: string
-  wrapperClassNames?: string
-  className?: string
 }
 
 const GetStartedButton: React.FC<GetStartedButtonProps> = ({
   text: _text,
   returnTo: _returnTo,
   wrapperClassNames,
-  className,
+  size = 'lg',
+  ...props
 }) => {
-  const text = _text || 'Get Started'
+  const text = _text || 'Start for free'
   const returnTo = _returnTo ? encodeURIComponent(_returnTo) : '/dashboard'
   return (
     <Link href={`/login${returnTo ? `?return_to=${returnTo}` : ''}`}>
       <Button
-        wrapperClassNames={twMerge('space-x-3 p-2.5', wrapperClassNames)}
-        className={twMerge('text-md p-5', className)}
+        wrapperClassNames={twMerge(
+          'flex flex-row items-center gap-x-2',
+          wrapperClassNames,
+        )}
+        size={size}
+        {...props}
       >
-        {text}
+        <div>{text}</div>
+        <ArrowForwardOutlined
+          className={size === 'lg' ? 'text-lg' : 'text-md'}
+          fontSize="inherit"
+        />
       </Button>
     </Link>
   )
diff --git a/clients/apps/web/src/components/Landing/API.tsx b/clients/apps/web/src/components/Landing/API.tsx
index b85764b9cd..e3afa5ccdb 100644
--- a/clients/apps/web/src/components/Landing/API.tsx
+++ b/clients/apps/web/src/components/Landing/API.tsx
@@ -10,7 +10,7 @@ export const API = () => {
     <Section
       id="integrations"
       className="flex flex-col items-center justify-center gap-y-24"
-      wrapperClassName="overflow-hidden"
+      wrapperClassName="overflow-hidden dark:bg-black"
     >
       <Circles className="absolute inset-0 top-1/2 -z-10 hidden -translate-y-1/2 text-white dark:block" />
       <Circles className="absolute inset-0 top-1/2 -z-10 block -translate-y-1/2 text-black dark:hidden" />
diff --git a/clients/apps/web/src/components/Landing/Community.tsx b/clients/apps/web/src/components/Landing/Community.tsx
index 4b0495051e..014a24c8fd 100644
--- a/clients/apps/web/src/components/Landing/Community.tsx
+++ b/clients/apps/web/src/components/Landing/Community.tsx
@@ -13,7 +13,7 @@ export const Community = () => {
           srcSet={`/assets/landing/post_dark.png`}
         />
         <img
-          className="dark:border-polar-700 rounded-4xl border border-gray-200"
+          className="dark:border-polar-700 md:rounded-4xl rounded-2xl border border-gray-200"
           srcSet={`/assets/landing/post.png`}
           alt="Post in Polar"
         />
@@ -22,7 +22,7 @@ export const Community = () => {
         <h2 className="text-2xl leading-snug md:text-5xl">
           Grow community alongside transactions
         </h2>
-        <h3 className="dark:text-polar-600 text-xl leading-snug text-gray-300 md:text-4xl">
+        <h3 className="dark:text-polar-600 text-xl leading-snug text-gray-500 md:text-4xl">
           Crucial for successful developer tools. So it&apos;s built-in - for
           free
         </h3>
diff --git a/clients/apps/web/src/components/Landing/Hero/Hero.tsx b/clients/apps/web/src/components/Landing/Hero/Hero.tsx
index aa8dd3b790..ebfb92bf9e 100644
--- a/clients/apps/web/src/components/Landing/Hero/Hero.tsx
+++ b/clients/apps/web/src/components/Landing/Hero/Hero.tsx
@@ -3,6 +3,7 @@
 import GetStartedButton from '@/components/Auth/GetStartedButton'
 import { Section } from '@/components/Landing/Section'
 import Link from 'next/link'
+import Button from 'polarkit/components/ui/atoms/button'
 
 export const Hero = () => {
   return (
@@ -12,7 +13,7 @@ export const Hero = () => {
     >
       <div className="relative z-20 flex w-full flex-col items-center gap-y-12 text-center xl:w-2/3">
         <div className="z-20 flex flex-col items-center gap-y-12">
-          <h1 className="text-4xl leading-snug text-gray-950 md:text-7xl md:leading-tight dark:text-white">
+          <h1 className="text-balance text-4xl leading-snug text-gray-950 md:text-7xl md:leading-tight dark:text-white">
             The best monetization platform for developers
           </h1>
           <div className="flex flex-col items-center gap-y-4 xl:w-2/3">
@@ -41,7 +42,7 @@ export const Hero = () => {
             </p>
           </div>
         </div>
-        <div className="z-20 flex flex-col items-center gap-y-8">
+        <div className="z-20 flex flex-row items-center gap-x-4">
           {/* <div className="dark:bg-polar-800 flex flex-row items-center gap-x-2 rounded-full bg-white py-2 pl-6 pr-2">
             <div className="flex flex-row items-center gap-x-0.5">
               <span>polar.sh/</span>
@@ -57,6 +58,11 @@ export const Hero = () => {
             />
           </div> */}
           <GetStartedButton />
+          <a target="_blank" href="https://github.com/polarsource/polar">
+            <Button size="lg" variant="ghost">
+              Star on GitHub
+            </Button>
+          </a>
         </div>
       </div>
       <video
diff --git a/clients/apps/web/src/components/Landing/LandingLayout.tsx b/clients/apps/web/src/components/Landing/LandingLayout.tsx
index bbda739436..9814688f08 100644
--- a/clients/apps/web/src/components/Landing/LandingLayout.tsx
+++ b/clients/apps/web/src/components/Landing/LandingLayout.tsx
@@ -46,12 +46,6 @@ const LandingPageTopbar = () => {
         size={100}
       />
       <div className="flex flex-row items-center gap-x-4">
-        <a
-          href="https://github.com/polarsource/polar"
-          className="dark:text-polar-200 dark:bg-polar-800 dark:hover:bg-polar-700 transition-color hidden flex-row items-center gap-x-2 rounded-full bg-gray-100 px-4 py-1.5 text-sm hover:bg-gray-200 md:flex"
-        >
-          Star on GitHub
-        </a>
         <Link href="/login">
           <Button>Login</Button>
         </Link>
diff --git a/clients/apps/web/src/components/Landing/LandingPage.tsx b/clients/apps/web/src/components/Landing/LandingPage.tsx
index cbbfe174a2..817182cae7 100644
--- a/clients/apps/web/src/components/Landing/LandingPage.tsx
+++ b/clients/apps/web/src/components/Landing/LandingPage.tsx
@@ -4,16 +4,14 @@ import { LastPitch } from '@/components/Landing/LastPitch'
 import { MerchantOfRecord } from '@/components/Landing/MOR'
 import { Monetization } from '@/components/Landing/Monetization'
 import { Testamonials } from '@/components/Landing/Testamonials'
-import { Separator } from 'polarkit/components/ui/separator'
 import { API } from './API'
 import { Pricing } from './Pricing'
 import { Section } from './Section'
 
 export default function Page() {
   return (
-    <div className="flex flex-col items-center">
+    <div className="flex w-full flex-col items-center">
       <Hero />
-      <Separator className="w-screen" />
       <PageContent />
     </div>
   )
@@ -22,36 +20,27 @@ export default function Page() {
 export const PageContent = () => {
   return (
     <>
-      <Section className="flex flex-col gap-y-32">
+      <Section
+        wrapperClassName="dark:bg-black"
+        className="flex flex-col gap-y-32"
+      >
         <Monetization />
       </Section>
 
-      <Separator className="w-screen" />
-
       <Section>
         <MerchantOfRecord />
       </Section>
 
-      <Separator className="w-screen" />
+      <Testamonials />
 
       <Section>
         <Community />
       </Section>
 
-      <Separator className="w-screen" />
-
       <API />
 
-      <Separator className="w-screen" />
-
-      <Testamonials />
-
-      <Separator className="w-screen" />
-
       <Pricing />
 
-      <Separator className="w-screen" />
-
       <LastPitch />
     </>
   )
diff --git a/clients/apps/web/src/components/Landing/LastPitch.tsx b/clients/apps/web/src/components/Landing/LastPitch.tsx
index c9c1c4f91f..c6e00d5653 100644
--- a/clients/apps/web/src/components/Landing/LastPitch.tsx
+++ b/clients/apps/web/src/components/Landing/LastPitch.tsx
@@ -3,7 +3,10 @@ import { Section } from './Section'
 
 export const LastPitch = () => {
   return (
-    <Section className="flex flex-col items-center justify-center gap-y-32">
+    <Section
+      className="flex flex-col items-center justify-center gap-y-32"
+      wrapperClassName="dark:bg-black"
+    >
       <div className="flex flex-col items-center gap-y-12 text-center">
         <div className="flex flex-col items-center gap-y-4">
           <h1 className="text-center text-4xl">
diff --git a/clients/apps/web/src/components/Landing/MOR.tsx b/clients/apps/web/src/components/Landing/MOR.tsx
index 9ef3bdd5ac..a8a89fec6c 100644
--- a/clients/apps/web/src/components/Landing/MOR.tsx
+++ b/clients/apps/web/src/components/Landing/MOR.tsx
@@ -5,24 +5,19 @@ import {
   ReceiptLongOutlined,
   TrendingUpOutlined,
 } from '@mui/icons-material'
-import { motion } from 'framer-motion'
 import FeatureItem from './molecules/FeatureItem'
 
 export const MerchantOfRecord = () => {
   return (
     <div className="flex flex-col gap-y-24">
-      <motion.div
-        className="relative flex flex-col gap-y-4"
-        initial={{ opacity: 0 }}
-        whileInView={{ opacity: 1, transition: { duration: 2 } }}
-      >
+      <div className="relative flex flex-col gap-y-4">
         <picture>
           <source
             media="(prefers-color-scheme: dark)"
             srcSet={`/assets/landing/metrics_dark.png`}
           />
           <img
-            className="dark:border-polar-700 rounded-4xl border border-gray-200"
+            className="dark:border-polar-700 md:rounded-4xl rounded-2xl border border-gray-200"
             srcSet={`/assets/landing/metrics.png`}
             alt="Metrics dashboard in Polar"
           />
@@ -31,11 +26,11 @@ export const MerchantOfRecord = () => {
           <h2 className="text-2xl leading-snug md:text-5xl">
             Increase sales, not overhead
           </h2>
-          <h3 className="dark:text-polar-600 text-xl leading-snug text-gray-300 md:text-4xl">
+          <h3 className="dark:text-polar-600 text-xl leading-snug text-gray-500 md:text-4xl">
             Polar handles VAT, sales tax and billing so you don&apos;t have to
           </h3>
         </div>
-      </motion.div>
+      </div>
 
       <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
         <FeatureItem
diff --git a/clients/apps/web/src/components/Landing/Monetization.tsx b/clients/apps/web/src/components/Landing/Monetization.tsx
index a8264c46ac..ea3c79859b 100644
--- a/clients/apps/web/src/components/Landing/Monetization.tsx
+++ b/clients/apps/web/src/components/Landing/Monetization.tsx
@@ -5,11 +5,13 @@ import {
   DiamondOutlined,
   FileDownloadOutlined,
   HiveOutlined,
-  StickyNote2Outlined,
-  TuneOutlined,
-  VerifiedOutlined,
+  Inventory2,
+  Key,
+  Lightbulb,
+  StickyNote2,
+  Tune,
+  Verified,
 } from '@mui/icons-material'
-import { motion } from 'framer-motion'
 import Link from 'next/link'
 import Avatar from 'polarkit/components/ui/atoms/avatar'
 import { twMerge } from 'tailwind-merge'
@@ -24,6 +26,7 @@ interface BenefitCardProps {
   title: string
   description: string
   icon: JSX.Element
+  link?: string
 }
 
 const BenefitCard = ({
@@ -31,18 +34,21 @@ const BenefitCard = ({
   title,
   description,
   icon,
+  link,
 }: BenefitCardProps) => {
   return (
     <Link
-      href="/benefits"
+      href={link ?? '/benefits'}
       className={twMerge(
-        'hover:bg-gray-75 dark:hover:bg-polar-900 dark:bg-polar-950 flex flex-col justify-between gap-y-8 bg-white p-8 transition-colors',
+        'hover:bg-gray-75 dark:hover:bg-polar-900 dark:bg-polar-950 bg-gray-75 flex flex-col justify-between gap-y-8 rounded-3xl p-8 transition-colors',
         className,
       )}
     >
-      <span>{icon}</span>
+      <span className="flex h-10 w-10 flex-col items-center justify-center rounded-full bg-blue-100 text-blue-500 dark:bg-blue-950 dark:text-blue-300">
+        {icon}
+      </span>
       <div className="flex flex-col gap-y-2">
-        <h3>{title}</h3>
+        <h3 className="font-medium">{title}</h3>
         <p className="dark:text-polar-200 text-gray-500">{description}</p>
       </div>
     </Link>
@@ -51,81 +57,88 @@ const BenefitCard = ({
 
 const Benefits = () => {
   return (
-    <>
-      <div className="flex flex-col items-center gap-y-4 text-center md:gap-y-8">
+    <div className="flex flex-col gap-y-16">
+      <div className="flex flex-col gap-y-2 md:gap-y-6">
         <h2 className="text-2xl leading-snug md:text-5xl">
           Powerful & built-in benefits
         </h2>
-        <p className="dark:text-polar-600 text-xl leading-snug text-gray-300 md:text-4xl">
+        <p className="dark:text-polar-500 text-xl leading-snug text-gray-400 md:text-4xl">
           We&apos;re building common developer upsells so you don&apos;t have to
         </p>
       </div>
-      <div className="rounded-4xl grid grid-cols-1 overflow-hidden border md:grid-cols-3">
+      <div className="rounded-4xl grid grid-cols-1 gap-6 overflow-hidden md:grid-cols-3">
         <BenefitCard
-          className="border-b md:border-r"
-          icon={<GitHubIcon width={30} height={30} />}
+          icon={<GitHubIcon width={24} height={24} />}
           title="Private GitHub Repositories"
           description="Automate access to an unlimited amount of private GitHub repositories."
         />
         <BenefitCard
-          className="border-b md:border-r"
           icon={
-            <FileDownloadOutlined className="text-4xl" fontSize="inherit" />
+            <FileDownloadOutlined className="text-2xl" fontSize="inherit" />
           }
           title="File Downloads"
-          description="From e-books, source code to executables - any file is supported up to 10GB/each."
+          description="From e-books, source code to executables - any file up to 10GB/each."
         />
         <BenefitCard
-          className="border-b"
-          icon={<StickyNote2Outlined className="text-4xl" fontSize="inherit" />}
+          icon={<StickyNote2 className="text-2xl" fontSize="inherit" />}
           title="Free & Premium Newsletters"
           description="Write a free, premium or early access newsletter in GitHub flavoured markdown."
         />
         <BenefitCard
-          className="border-b md:border-b-0 md:border-r"
-          icon={<DiscordIcon size={30} />}
+          icon={<DiscordIcon size={24} />}
           title="Discord Invites & Roles"
           description="Give customers exclusive access or premium appearances and permissions."
         />
         <BenefitCard
-          className="border-b md:border-b-0 md:border-r"
-          icon={<VerifiedOutlined className="text-4xl" fontSize="inherit" />}
+          icon={<Verified className="text-2xl" fontSize="inherit" />}
           title="Sponsor Promotion"
           description="Automate README.md logotypes and offer newsletter sponsorship."
         />
         <BenefitCard
-          icon={<TuneOutlined className="text-4xl" fontSize="inherit" />}
+          icon={<Tune className="text-2xl" fontSize="inherit" />}
           title="Custom Benefit"
           description="Create your own and share secret notes, e.g Cal.com link to book consultation."
         />
       </div>
-      <div className="-mt-12 text-center">
-        <p className="dark:bg-polar-800 dark:border-polar-700 dark:text-polar-400 inline-block rounded-full bg-gray-100 px-4 py-2 text-gray-400 dark:border">
-          License keys, private packages & more to come
-        </p>
+      <div className="flex flex-col gap-y-8">
+        <h2 className="text-lg md:text-2xl">Coming soon</h2>
+        <div className="rounded-4xl grid grid-cols-1 gap-6 overflow-hidden md:grid-cols-3">
+          <BenefitCard
+            icon={<Key className="text-2xl" />}
+            title="License Keys"
+            description="Verifiable license keys for your custom usecases."
+          />
+          <BenefitCard
+            icon={<Inventory2 className="text-2xl" fontSize="inherit" />}
+            title="Private Package Registry"
+            description="Gatekeep access to packages for your paying customers."
+          />
+          <BenefitCard
+            icon={<Lightbulb className="text-2xl" fontSize="inherit" />}
+            title="Have ideas?"
+            description="We're constantly trying to improve our benefit offerings."
+            link="https://github.com/polarsource/polar/issues/new"
+          />
+        </div>
       </div>
-    </>
+    </div>
   )
 }
 
 export const Monetization = () => {
-  const circleRadius = 80
+  // const circleRadius = 80
 
   return (
-    <>
-      <div className="flex flex-col items-center gap-y-24 md:gap-y-32">
-        <motion.div
-          className="relative flex flex-col items-center gap-y-6 text-center"
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1, transition: { duration: 2 } }}
-        >
+    <div className="flex flex-col gap-y-24 md:gap-y-32">
+      <div className="flex flex-col gap-y-16">
+        <div className="relative flex flex-col gap-y-2 md:gap-y-6">
           <h2 className="text-2xl leading-snug md:text-5xl">
             From first donation to IPO
           </h2>
-          <h3 className="dark:text-polar-600 text-xl leading-snug text-gray-300 md:text-4xl">
+          <h3 className="dark:text-polar-500 text-xl leading-snug text-gray-400 md:text-4xl">
             Polar offers features to scale with your needs
           </h3>
-        </motion.div>
+        </div>
         <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
           <FeatureItem
             className="md:row-span-2"
@@ -172,14 +185,14 @@ export const Monetization = () => {
             link="#integrations"
           />
         </div>
+      </div>
 
-        <Benefits />
-
-        <div className="flex flex-col items-center gap-y-4 text-center md:gap-y-8">
+      <div className="flex flex-col gap-y-16">
+        <div className="flex flex-col gap-y-2 md:gap-y-6">
           <h2 className="text-2xl leading-snug md:text-5xl">
             Supporting all use cases
           </h2>
-          <p className="dark:text-polar-600 text-xl leading-snug text-gray-300 md:text-4xl">
+          <p className="dark:text-polar-500 text-xl leading-snug text-gray-400 md:text-4xl">
             From sustainable open source, sponsorware to full-fledged SaaS
           </p>
         </div>
@@ -234,46 +247,48 @@ export const Monetization = () => {
             </Link>
           ))}
         </div>
+      </div>
 
-        <Link
-          className="relative hidden h-64 w-64 flex-col items-center justify-center rounded-full md:flex"
-          href="https://polar.sh/polarsource/posts/github-supports-polar-in-funding-yaml"
-        >
-          <GitHubIcon
-            className="text-black dark:text-white"
-            width={60}
-            height={60}
-          />
-          <div className="absolute inset-0 h-full w-full animate-spin fill-black text-xl font-semibold uppercase tracking-wide [animation-duration:32s] dark:fill-white">
-            <svg
-              x="0"
-              y="0"
-              viewBox="0 0 300 300"
-              enableBackground="new 0 0 300 300"
-              xmlSpace="preserve"
-            >
-              <defs>
-                <path
-                  id="circlePath"
-                  d={`
+      <Benefits />
+
+      {/* <Link
+        className="relative hidden h-64 w-64 flex-col items-center justify-center rounded-full md:flex"
+        href="https://polar.sh/polarsource/posts/github-supports-polar-in-funding-yaml"
+      >
+        <GitHubIcon
+          className="text-black dark:text-white"
+          width={60}
+          height={60}
+        />
+        <div className="absolute inset-0 h-full w-full animate-spin fill-black text-xl font-semibold uppercase tracking-wide [animation-duration:32s] dark:fill-white">
+          <svg
+            x="0"
+            y="0"
+            viewBox="0 0 300 300"
+            enableBackground="new 0 0 300 300"
+            xmlSpace="preserve"
+          >
+            <defs>
+              <path
+                id="circlePath"
+                d={`
           M 150, 150
           m -${circleRadius}, 0
           a ${circleRadius},${circleRadius} 0 0,1 ${circleRadius * 2},0
           a ${circleRadius},${circleRadius} 0 0,1 -${circleRadius * 2},0
           `}
-                />
-              </defs>
-              <g>
-                <text fontSize={12}>
-                  <textPath xlinkHref="#circlePath" textLength={80 * 6.1}>
-                    Official Funding Option · Official Funding Option ·
-                  </textPath>
-                </text>
-              </g>
-            </svg>
-          </div>
-        </Link>
-      </div>
-    </>
+              />
+            </defs>
+            <g>
+              <text fontSize={12}>
+                <textPath xlinkHref="#circlePath" textLength={80 * 6.1}>
+                  Official Funding Option · Official Funding Option ·
+                </textPath>
+              </text>
+            </g>
+          </svg>
+        </div>
+      </Link> */}
+    </div>
   )
 }
diff --git a/clients/apps/web/src/components/Landing/Testamonials.tsx b/clients/apps/web/src/components/Landing/Testamonials.tsx
index 728d1a5d0e..423e107d23 100644
--- a/clients/apps/web/src/components/Landing/Testamonials.tsx
+++ b/clients/apps/web/src/components/Landing/Testamonials.tsx
@@ -80,8 +80,8 @@ const testamonials = [
 
 export const Testamonials = () => {
   return (
-    <Section className="gap-y-16">
-      <h3 className="text-center text-4xl leading-snug">
+    <Section className="gap-y-16" wrapperClassName="dark:bg-black">
+      <h3 className="text-center text-2xl leading-snug md:text-5xl">
         Serving world-class developers, world-wide
       </h3>
       <div className="dark:border-polar-700 rounded-4xl flex flex-col divide-y overflow-hidden border">
diff --git a/clients/apps/web/src/components/Landing/molecules/FeatureItem.tsx b/clients/apps/web/src/components/Landing/molecules/FeatureItem.tsx
index 0c455e5c01..4669ada2ab 100644
--- a/clients/apps/web/src/components/Landing/molecules/FeatureItem.tsx
+++ b/clients/apps/web/src/components/Landing/molecules/FeatureItem.tsx
@@ -45,7 +45,7 @@ const FeatureItem = ({
           ) : (
             <div className="-mr-4 h-10" />
           )}
-          <h3 className="text-lg leading-snug">{title}</h3>
+          <h3 className="text-lg font-medium leading-snug">{title}</h3>
         </CardHeader>
         <CardContent className="flex h-full flex-col gap-y-4 pb-6">
           <p className="dark:text-polar-200 h-full leading-relaxed text-gray-500 transition-colors group-hover:text-black dark:group-hover:text-white">
diff --git a/clients/apps/web/src/components/Layout/PolarMenu.tsx b/clients/apps/web/src/components/Layout/PolarMenu.tsx
index a254fcc7cc..9e5ea4ddbc 100644
--- a/clients/apps/web/src/components/Layout/PolarMenu.tsx
+++ b/clients/apps/web/src/components/Layout/PolarMenu.tsx
@@ -46,7 +46,7 @@ const PolarMenu = ({
         </div>
       ) : (
         <>
-          <GetStartedButton className="px-2 py-4 text-sm" />
+          <GetStartedButton size="sm" />
           <Link
             href={loginLink}
             className="text-sm text-blue-500 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
diff --git a/clients/apps/web/src/components/Layout/Public/TopbarRight.tsx b/clients/apps/web/src/components/Layout/Public/TopbarRight.tsx
index 913dd965c3..df515467de 100644
--- a/clients/apps/web/src/components/Layout/Public/TopbarRight.tsx
+++ b/clients/apps/web/src/components/Layout/Public/TopbarRight.tsx
@@ -30,7 +30,7 @@ const TopbarRight = ({
         </div>
       ) : (
         <>
-          <GetStartedButton className="px-2 py-4 text-sm" />
+          <GetStartedButton size="sm" />
           <Link
             href={`/login?return_to=${loginReturnTo}`}
             className="text-sm text-blue-500 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"