clients/web: improve landing layout

polarsource · Aug 16, 2024 · 1f5e9f3 · 1f5e9f3
1 parent 4775359
commit 1f5e9f3
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 129 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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