chore: fix mobile header

saas-js · Oct 9, 2024 · 3eef184 · 3eef184
1 parent 40b7adc
commit 3eef184
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 13 deletions.
diff --git a/apps/website/src/components/global-search/global-search.tsx b/apps/website/src/components/global-search/global-search.tsx
@@ -123,7 +123,7 @@ export const GlobalSearch = (props: Omit<CommandBarProps, 'children'>) => {
                                 } else if (action) {
                                   action()
                                 }
-                                onClose()
+                                onClose?.()
                               }}
                             >
                               {title}

diff --git a/apps/website/src/components/motion/fall-in-place.tsx b/apps/website/src/components/motion/fall-in-place.tsx
@@ -1,4 +1,6 @@
+import { Box } from '@chakra-ui/react'
 import MotionBox, { MotionBoxProps } from './box'
+import { motion } from 'framer-motion'
 import React from 'react'
 import { useInView, IntersectionOptions } from 'react-intersection-observer'
 
@@ -8,6 +10,7 @@ export const FallInPlace = ({
   translateY = '20px',
   initialInView,
   threshold,
+  transition,
   onChange,
   ...rest
 }: MotionBoxProps & {
@@ -25,7 +28,7 @@ export const FallInPlace = ({
   })
 
   return (
-    <MotionBox
+    <motion.div
       ref={ref}
       initial={{ scale: 1, opacity: 0, translateY }}
       animate={inView && { scale: 1, opacity: 1, translateY: 0 }}
@@ -34,10 +37,10 @@ export const FallInPlace = ({
         ease: 'easeOut',
         duration: 2,
         delay: initialInView ? delay : 0,
+        ...transition,
       }}
-      {...rest}
     >
-      {children}
-    </MotionBox>
+      <Box {...rest}>{children}</Box>
+    </motion.div>
   )
 }
diff --git a/apps/website/src/pages/index.tsx b/apps/website/src/pages/index.tsx
@@ -154,17 +154,11 @@ const Home = () => {
                     fontWeight="medium"
                     textAlign="center"
                     color="gray.600"
-                    width="3xl"
+                    maxW="3xl"
                     _dark={{ color: 'gray.400' }}
                     fontSize={{ base: 'md', md: 'xl', lg: '2xl' }}
                     initialInView
                   >
-                    {/* Saas UI is a <Em>React component library</Em> and{' '}
-                    <Em>starter kit</Em>
-                    <Br display={{ base: 'none', md: 'inline' }} /> that
-                    doesn&apos;t get in your way and helps you{' '}
-                    <Br display={{ base: 'none', md: 'inline' }} /> build
-                    intuitive SaaS products with speed. */}
                     Saas UI is a purpose-built toolkit for building high-quality
                     apps. Start with our free component library and build
                     fullstack apps with production-ready templates and starter
@@ -429,9 +423,10 @@ const Founder = () => {
           fontWeight="semibold"
           fontSize={['2xl', null, '4xl']}
           lineHeight="lg"
-          color={useColorModeValue('black', 'white')}
+          color="black"
           width={{ base: 'full', lg: '50%' }}
           mb="8"
+          _dark={{ color: 'white' }}
         >
           Building SaaS products requires you to be a generalist on many fronts.
           However many developers aren&apos;t very design savvy and vice versa.