update landing page

polarsource · Jan 3, 2025 · 3ec7e73 · 3ec7e73
1 parent 65a0726
commit 3ec7e73
Show file tree

Hide file tree

Showing 18 changed files with 163 additions and 72 deletions.
diff --git a/clients/apps/web/src/components/Auth/AuthModal.tsx b/clients/apps/web/src/components/Auth/AuthModal.tsx
@@ -1,6 +1,6 @@
+import { UserSignupAttribution } from '@polar-sh/sdk'
 import ShadowBox from 'polarkit/components/ui/atoms/shadowbox'
 import LogoIcon from '../Brand/LogoIcon'
-import { UserSignupAttribution } from '@polar-sh/sdk'
 import Login from './Login'
 
 interface AuthModalProps {
@@ -17,12 +17,12 @@ export const AuthModal = ({
   const isSignup = signup !== undefined
   const title = isSignup ? 'Sign Up' : 'Log In'
 
-  const copy =
-    isSignup ? (
-      <p className="dark:text-polar-500 text-xl text-gray-500">
-        Join thousands of developers &amp; startups monetizing their products with Polar.
-      </p>
-    ) : null
+  const copy = isSignup ? (
+    <p className="dark:text-polar-500 text-xl text-gray-500">
+      Join thousands of developers &amp; startups monetizing their products with
+      Polar.
+    </p>
+  ) : null
 
   return (
     <ShadowBox className="overflow-y-auto p-12">
@@ -35,7 +35,11 @@ export const AuthModal = ({
         </div>
 
         <div className="flex flex-col gap-y-12">
-          <Login returnTo={returnTo} returnParams={returnParams} signup={signup} />
+          <Login
+            returnTo={returnTo}
+            returnParams={returnParams}
+            signup={signup}
+          />
         </div>
       </div>
     </ShadowBox>

diff --git a/clients/apps/web/src/components/Checkout/CheckoutCard.tsx b/clients/apps/web/src/components/Checkout/CheckoutCard.tsx
@@ -75,7 +75,7 @@ export const CheckoutCard = ({
     [onCheckoutUpdate],
   )
   return (
-    <ShadowBox className="dark:bg-polar-800 dark:border-polar-700 flex flex-col gap-6 rounded-3xl border bg-gray-50 md:ring-gray-200 dark:md:border-none">
+    <ShadowBox className="dark:bg-polar-800 dark:border-polar-700 flex flex-col gap-6 rounded-3xl bg-gray-50">
       <h2 className="text-lg font-medium">{product.name}</h2>
       {!disabled && hasBothIntervals && (
         <SubscriptionTierRecurringIntervalSwitch

diff --git a/clients/apps/web/src/components/Checkout/CheckoutForm.tsx b/clients/apps/web/src/components/Checkout/CheckoutForm.tsx
@@ -969,10 +969,11 @@ const StripeCheckoutForm = (props: CheckoutFormProps) => {
             },
             '.Input': {
               padding: '12px',
-              backgroundColor: theme === 'dark' ? 'rgb(21, 22, 25)' : 'white',
+              backgroundColor:
+                theme === 'dark' ? 'rgb(26.4, 26.8, 29.7)' : 'white',
               color: theme === 'dark' ? '#E5E5E1' : '#181A1F',
               borderRadius: '9999px',
-              borderColor: theme === 'dark' ? 'rgb(28, 29, 33)' : '#EEE',
+              borderColor: theme === 'dark' ? 'rgb(36, 36.5, 40.5)' : '#EEE',
               boxShadow: inputBoxShadow,
             },
             '.Input:focus': {
@@ -981,8 +982,9 @@ const StripeCheckoutForm = (props: CheckoutFormProps) => {
               boxShadow: focusBoxShadow,
             },
             '.Tab': {
-              backgroundColor: theme === 'dark' ? 'rgb(21 22 25)' : 'white',
-              borderColor: theme === 'dark' ? 'rgb(28, 29, 33)' : '#EEE',
+              backgroundColor:
+                theme === 'dark' ? 'rgb(26.4, 26.8, 29.7)' : 'white',
+              borderColor: theme === 'dark' ? 'rgb(36, 36.5, 40.5)' : '#EEE',
             },
             '.Tab--selected': {
               backgroundColor: 'rgb(51, 129, 255)',

diff --git a/clients/apps/web/src/components/Checkout/CheckoutInfo.tsx b/clients/apps/web/src/components/Checkout/CheckoutInfo.tsx
@@ -22,7 +22,7 @@ export const CheckoutInfo = ({
 }: CheckoutInfoProps) => {
   const { product } = checkout
   return (
-    <div className={twMerge('flex flex-col gap-y-10 md:p-12', className)}>
+    <div className={twMerge('flex flex-col gap-y-8 md:p-12', className)}>
       <CheckoutProductInfo organization={organization} product={product} />
       <CheckoutCard checkout={checkout} onCheckoutUpdate={onCheckoutUpdate} />
     </div>

diff --git a/clients/apps/web/src/components/Checkout/CheckoutProductInfo.tsx b/clients/apps/web/src/components/Checkout/CheckoutProductInfo.tsx
@@ -17,7 +17,7 @@ const CheckoutProductInfo = ({
 }: CheckoutProductInfoProps) => {
   return (
     <>
-      <div className="flex flex-col gap-y-6 md:gap-y-12">
+      <div className="flex flex-col gap-y-6 md:gap-y-8">
         {organization.profile_settings?.enabled ? (
           <Link href={organizationPageLink(organization)}>
             <Avatar

diff --git a/clients/apps/web/src/components/Landing/Benefits.tsx b/clients/apps/web/src/components/Landing/Benefits.tsx
@@ -13,6 +13,22 @@ interface BenefitItemProps {
   image?: string
 }
 
+const benefitItemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 1 } },
+}
+
+const accordionVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+      duration: 1,
+    },
+  },
+}
+
 const BenefitItem = ({
   index,
   title,
@@ -21,12 +37,16 @@ const BenefitItem = ({
   onClick,
 }: BenefitItemProps) => {
   return (
-    <button
+    <motion.button
       className={twMerge(
         'flex w-full flex-col items-start gap-y-1 py-4 text-left',
         isOpen ? 'cursor-default' : '',
       )}
       onClick={() => !isOpen && onClick(index)}
+      variants={benefitItemVariants}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true }}
     >
       <div className="flex w-full flex-row items-center justify-between text-lg">
         {title}
@@ -37,13 +57,12 @@ const BenefitItem = ({
           className="dark:text-polar-500 text-gray-500"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.3 }}
+          transition={{ duration: 0.5 }}
         >
           {description}
         </motion.p>
       )}
-    </button>
+    </motion.button>
   )
 }
 
@@ -55,7 +74,13 @@ interface AccordionProps {
 
 const Accordion = ({ items, activeItem, setActiveItem }: AccordionProps) => {
   return (
-    <div className="dark:divide-polar-700 dark:border-polar-700 flex flex-col divide-y divide-gray-200 border-y border-gray-200">
+    <motion.div
+      className="dark:divide-polar-700 dark:border-polar-700 flex flex-col divide-y divide-gray-200 border-y border-gray-200"
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true }}
+      variants={accordionVariants}
+    >
       {items.map((item, index) => (
         <BenefitItem
           {...item}
@@ -65,7 +90,7 @@ const Accordion = ({ items, activeItem, setActiveItem }: AccordionProps) => {
           onClick={setActiveItem}
         />
       ))}
-    </div>
+    </motion.div>
   )
 }
 
@@ -134,7 +159,7 @@ export const Benefits = () => {
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
-        transition={{ duration: 0.3 }}
+        transition={{ duration: 1 }}
       />
     </div>
   )

diff --git a/clients/apps/web/src/components/Landing/Checkout.tsx b/clients/apps/web/src/components/Landing/Checkout.tsx
@@ -20,7 +20,7 @@ export const Checkout = () => {
         <Link href="/docs/checkout">
           <Button
             fullWidth
-            wrapperClassNames="flex flex-row items-center gap-x-2 text-lg"
+            wrapperClassNames="flex flex-row items-center gap-x-2"
             variant="ghost"
           >
             <span>Integrate Checkouts</span>

diff --git a/clients/apps/web/src/components/Landing/Hero/Hero.tsx b/clients/apps/web/src/components/Landing/Hero/Hero.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import GetStartedButton from '@/components/Auth/GetStartedButton'
+import { motion } from 'framer-motion'
 import { useCallback, useMemo, useState } from 'react'
 
 export const Hero = () => {
@@ -24,23 +25,46 @@ export const Hero = () => {
     )
   }, [])
 
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  }
+
+  const itemVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { duration: 1 } },
+  }
+
   return (
-    <div className="flex w-full flex-col items-center justify-center gap-8 text-center">
-      {/*   <Canvas
-        camera={{
-          zoom: 0.8,
-        }}
+    <motion.div
+      className="flex w-full flex-col items-center justify-center gap-8 text-center"
+      variants={containerVariants}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true }}
+    >
+      <motion.h1
+        className="max-w-2xl text-pretty text-4xl !leading-tight text-gray-950 md:text-6xl dark:text-white"
+        variants={itemVariants}
       >
-        <Coins />
-      </Canvas> */}
-      <h1 className="max-w-2xl text-pretty text-4xl !leading-tight text-gray-950 md:text-6xl dark:text-white">
         Payment infrastructure for the{' '}
         <span className="dark:text-polar-500 text-gray-400">21st century</span>
-      </h1>
-      <p className="text-pretty text-xl leading-relaxed">
+      </motion.h1>
+      <motion.p
+        className="text-pretty text-xl leading-relaxed"
+        variants={itemVariants}
+      >
         The modern way to sell your SaaS and digital products
-      </p>
-      <div className="flex flex-row items-center gap-x-4">
+      </motion.p>
+      <motion.div
+        className="flex flex-row items-center gap-x-4"
+        variants={itemVariants}
+      >
         <form
           className="dark:bg-polar-900 shadow-3xl hidden flex-row items-center gap-x-2 rounded-full bg-gray-50 py-2 pl-6 pr-2 md:flex"
           role="form"
@@ -88,7 +112,7 @@ export const Hero = () => {
             text="Get Started"
           />
         </div>
-      </div>
-    </div>
+      </motion.div>
+    </motion.div>
   )
 }
diff --git a/clients/apps/web/src/components/Landing/LandingPage.tsx b/clients/apps/web/src/components/Landing/LandingPage.tsx
@@ -30,7 +30,11 @@ export const PageContent = () => {
         <MerchantOfRecord />
         <Checkout />
         <Features />
+      </Section>
+      <div className="flex w-full flex-col items-center justify-center py-16 md:max-w-[1440px] md:px-8">
         <Video src="/assets/landing/Polar2024.webm" />
+      </div>
+      <Section className="flex flex-col gap-y-24">
         <Testimonials />
         <Tools />
         <Pricing />

diff --git a/clients/apps/web/src/components/Landing/SDKs.tsx b/clients/apps/web/src/components/Landing/SDKs.tsx
@@ -1,12 +1,12 @@
 'use client'
 
+import { motion } from 'framer-motion'
 import Link from 'next/link'
 import CurlIcon from '../Icons/frameworks/curl'
 import GoIcon from '../Icons/frameworks/go'
 import NodeJsIcon from '../Icons/frameworks/nodejs'
 import PhpIcon from '../Icons/frameworks/php'
 import PythonIcon from '../Icons/frameworks/python'
-
 interface Framework {
   name: string
   icon: React.ReactNode
@@ -33,20 +33,43 @@ const frameworks: Framework[] = [
   { name: 'CURL', icon: <CurlIcon />, href: '/docs/api' },
 ]
 
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+}
+
+const itemVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 1 } },
+}
+
 export default function FrameworkSelector() {
   return (
-    <div className="flex w-full flex-row items-center justify-center gap-x-4 md:w-3/4 md:gap-x-24 md:self-center">
+    <motion.div
+      className="flex w-full flex-row items-center justify-center gap-x-4 md:w-3/4 md:gap-x-24 md:self-center"
+      variants={containerVariants}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true }}
+    >
       {frameworks.map((framework) => (
-        <Link
+        <motion.div
           key={framework.name}
-          href={framework.href}
           className="dark:hover:bg-polar-950 group flex flex-1 flex-col items-center justify-center hover:bg-gray-100"
+          variants={itemVariants}
         >
-          <div className="flex flex-col opacity-50 transition-all duration-200 group-hover:opacity-100">
-            {framework.icon}
-          </div>
-        </Link>
+          <Link key={framework.name} href={framework.href}>
+            <div className="flex flex-col opacity-50 transition-all duration-200 group-hover:opacity-100">
+              {framework.icon}
+            </div>
+          </Link>
+        </motion.div>
       ))}
-    </div>
+    </motion.div>
   )
 }
diff --git a/clients/apps/web/src/components/Landing/molecules/SplitPromo.tsx b/clients/apps/web/src/components/Landing/molecules/SplitPromo.tsx
@@ -27,7 +27,7 @@ const containerVariants = {
 
 const itemVariants = {
   hidden: { opacity: 0, y: 20 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+  visible: { opacity: 1, y: 0, transition: { duration: 1 } },
 }
 
 export const SplitPromo: React.FC<SplitPromoProps> = ({

diff --git a/clients/apps/web/src/components/Landing/molecules/Video.tsx b/clients/apps/web/src/components/Landing/molecules/Video.tsx
@@ -1,12 +1,18 @@
 'use client'
 
 import { VolumeMute, VolumeUp } from '@mui/icons-material'
+import { motion } from 'framer-motion'
 import { useEffect, useRef, useState } from 'react'
 
 interface VideoProps {
   src: string
 }
 
+const videoVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 2 } },
+}
+
 export const Video = ({ src }: VideoProps) => {
   const videoContainerRef = useRef<HTMLDivElement>(null)
   const videoRef = useRef<HTMLVideoElement>(null)
@@ -42,15 +48,19 @@ export const Video = ({ src }: VideoProps) => {
   return (
     <div
       ref={videoContainerRef}
-      className="relative aspect-video w-full overflow-hidden rounded-2xl"
+      className="relative aspect-video w-full overflow-hidden rounded-3xl"
     >
-      <video
+      <motion.video
         ref={videoRef}
         src={src}
         className="absolute inset-0 h-full w-full object-cover"
         autoPlay
         loop
         muted={isMuted}
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: false }}
+        variants={videoVariants}
       />
       <div className="absolute right-8 top-8 hidden cursor-pointer md:block">
         {isMuted ? (