chore: update landings pages

saas-js · Oct 6, 2024 · 27e4d77 · 27e4d77
1 parent 04da7b6
commit 27e4d77
Show file tree

Hide file tree

Showing 18 changed files with 383 additions and 253 deletions.
diff --git a/apps/website/public/Launching-amico.svg b/apps/website/public/Launching-amico.svg
diff --git a/apps/website/public/eelco.jpg b/apps/website/public/eelco.jpg
diff --git a/apps/website/public/eelco128.jpg b/apps/website/public/eelco128.jpg
diff --git a/apps/website/src/components/footer.tsx b/apps/website/src/components/footer.tsx
@@ -1,4 +1,13 @@
-import { Flex, HStack, IconButton, Stack, Text } from '@chakra-ui/react'
+import {
+  Flex,
+  Grid,
+  GridItem,
+  Heading,
+  HStack,
+  IconButton,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
 import { Link } from '@saas-ui/react'
 import { FaDiscord, FaGithub } from 'react-icons/fa'
 import Footer, { Copyright, FooterLink } from './layout/footer'
@@ -8,43 +17,26 @@ import Logo from './saas-ui'
 
 const CustomFooter = () => {
   return (
-    <Footer columns={{ base: 1, lg: 2 }}>
-      <Stack spacing="8" mb="4">
-        <Stack alignItems="flex-start" maxW="container.sm">
-          <Flex width="100px">
+    <Footer columns={{ base: 1, lg: 2 }} pb="">
+      <Stack spacing="8" mb="20">
+        <Stack alignItems="flex-start" maxW="container.sm" gap="4">
+          <Flex width="80px">
             <Logo />
           </Flex>
-          <Text fontSize="md" color="muted">
-            The React component library for startups. 100+ Open Source and
-            Premium components.{' '}
-            <Link href="/nextjs-boilerplate">Next.js boilerplate</Link> for B2B
-            apps and dashboards.
+          <Text fontSize="sm" color="muted">
+            The React toolkit for SaaS products. Crafted by{' '}
+            <Link href="https://appulse.net">Appulse Software</Link>.
           </Text>
         </Stack>
-      </Stack>
-      <Stack
-        direction={{ base: 'row', lg: 'column-reverse' }}
-        justify={{ base: 'flex-start', lg: 'flex-end' }}
-        alignItems="flex-end"
-        spacing="4"
-        alignSelf="flex-end"
-        mb="4"
-      >
-        <HStack spacing="4">
-          <FooterLink href="/blog">Blog</FooterLink>
-          <FooterLink href="mailto:hello@saas-ui.dev">Contact</FooterLink>
-          <FooterLink href="/license">License</FooterLink>
-          <FooterLink href="/terms">Terms</FooterLink>
-          <FooterLink href="/privacy">Privacy</FooterLink>
-        </HStack>
+
         <HStack display={{ base: 'none', lg: 'block' }}>
           <IconButton
             variant="ghost"
             aria-label="discord"
             icon={<FaDiscord size="14" />}
             borderRadius="md"
             as={Link}
-            href="https://discord.gg/4PmJGFcAjX"
+            href="/discord"
           />
 
           <IconButton
@@ -62,10 +54,52 @@ const CustomFooter = () => {
             icon={<FaGithub size="14" />}
             borderRadius="md"
             as={Link}
-            href="https://github.com/saas-js/saas-ui"
+            href="https://github.com/saas-js"
           />
         </HStack>
       </Stack>
+      <Grid templateColumns="repeat(3, 1fr)" gap={4}>
+        <GridItem>
+          <Heading as="h5" size="xs" mb="4">
+            Resources
+          </Heading>
+          <Stack>
+            <FooterLink href="https://saas-ui.lemonsqueezy.com/affiliates">
+              Affiliate Program
+            </FooterLink>
+            <FooterLink href="/docs">Documentation</FooterLink>
+            <FooterLink href="/blog">Blog</FooterLink>
+            <FooterLink href="https://roadmap.saas-ui.dev">Roadmap</FooterLink>
+          </Stack>
+        </GridItem>
+        <GridItem>
+          <Heading as="h5" size="xs" mb="4">
+            Products
+          </Heading>
+          <Stack>
+            <FooterLink href="/nextjs-starter-kit">
+              Next.js Starter Kit
+            </FooterLink>
+            <FooterLink href="/nextjs-starter-kit">
+              Next.js Boilerplate
+            </FooterLink>
+            <FooterLink href="/docs/components">Component library</FooterLink>
+            <FooterLink href="/figma">Figma UI Kit</FooterLink>
+            <FooterLink href="/blocks">Pre-built components</FooterLink>
+          </Stack>
+        </GridItem>
+        <GridItem>
+          <Heading as="h5" size="xs" mb="4">
+            Company
+          </Heading>
+          <Stack>
+            <FooterLink href="mailto:hello@saas-ui.dev">Contact</FooterLink>
+            <FooterLink href="/license">License</FooterLink>
+            <FooterLink href="/terms">Terms</FooterLink>
+            <FooterLink href="/privacy">Privacy</FooterLink>
+          </Stack>
+        </GridItem>
+      </Grid>
     </Footer>
   )
 }

diff --git a/apps/website/src/components/layout/footer.tsx b/apps/website/src/components/layout/footer.tsx
@@ -16,7 +16,7 @@ export interface FooterProps extends BoxProps {
 const Footer = ({ children, columns = 4, ...rest }: FooterProps) => {
   return (
     <Box {...rest}>
-      <Container maxW="container.2xl" px="8" py="8">
+      <Container maxW="container.xl" px="8" py="8">
         <SimpleGrid columns={columns}>{children}</SimpleGrid>
       </Container>
     </Box>

diff --git a/apps/website/src/components/logos/chakra.tsx b/apps/website/src/components/logos/chakra.tsx
@@ -1,22 +1,26 @@
-import { useColorModeValue } from '@chakra-ui/react'
+import { chakra, HTMLChakraProps } from '@chakra-ui/react'
 
-export const ChakraLogo = (props) => {
+export const ChakraLogo = (props: HTMLChakraProps<'svg'>) => {
   return (
-    <svg viewBox="0 0 998 257" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <chakra.svg
+      viewBox="0 0 998 257"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
       <path
         d="M388.5 115.302c17.612 0 25.466 11.424 28.084 21.658l24.752-9.044c-4.76-18.564-21.896-38.08-53.074-38.08-33.32 0-59.262 25.704-59.262 61.404 0 35.224 25.942 61.642 59.976 61.642 30.464 0 47.838-19.754 53.312-37.842l-24.276-8.806c-2.618 8.806-10.948 21.42-29.036 21.42-17.374 0-32.368-13.09-32.368-36.414s14.994-35.938 31.892-35.938zM484.894 141.244c.476-14.756 8.806-26.18 24.038-26.18 17.374 0 23.8 11.424 23.8 25.704v68.544h27.608v-73.304c0-25.466-13.804-45.934-42.364-45.934-12.138 0-25.228 4.284-33.082 14.518V37h-27.608v172.312h27.608v-68.068zM577.29 177.896c0 18.326 14.994 34.986 39.27 34.986 18.802 0 30.226-9.52 35.7-18.326 0 9.282.952 14.042 1.19 14.756h25.704c-.238-1.19-1.428-8.092-1.428-18.564v-57.596c0-23.086-13.566-43.316-49.266-43.316-28.56 0-46.648 17.85-48.79 37.842l25.228 5.712c1.19-11.662 9.282-20.944 23.8-20.944 15.232 0 21.896 7.854 21.896 17.612 0 4.046-1.904 7.378-8.568 8.33l-29.75 4.522c-19.754 2.856-34.986 14.28-34.986 34.986zm44.506 13.328c-10.948 0-16.898-7.14-16.898-14.994 0-9.52 6.902-14.28 15.47-15.708L650.594 156v5.236c0 22.61-13.328 29.988-28.798 29.988zM810.108 93.406h-36.652l-44.506 46.886V37h-27.37v172.312h27.37v-32.368l14.28-14.994 34.034 47.362h33.796l-48.552-66.878 47.6-49.028zM889.349 92.692c-1.19-.238-4.046-.714-7.378-.714-15.232 0-28.084 7.378-33.558 19.992V93.406h-26.894v115.906h27.608v-55.216c0-21.658 9.758-34.034 31.178-34.034 2.856 0 5.95.238 9.044.714V92.692zM895.968 177.896c0 18.326 14.994 34.986 39.27 34.986 18.802 0 30.226-9.52 35.7-18.326 0 9.282.952 14.042 1.19 14.756h25.704c-.238-1.19-1.428-8.092-1.428-18.564v-57.596c0-23.086-13.566-43.316-49.266-43.316-28.56 0-46.648 17.85-48.79 37.842l25.228 5.712c1.19-11.662 9.282-20.944 23.8-20.944 15.232 0 21.896 7.854 21.896 17.612 0 4.046-1.904 7.378-8.568 8.33l-29.75 4.522c-19.754 2.856-34.986 14.28-34.986 34.986zm44.506 13.328c-10.948 0-16.898-7.14-16.898-14.994 0-9.52 6.902-14.28 15.47-15.708L969.272 156v5.236c0 22.61-13.328 29.988-28.798 29.988z"
-        fill={useColorModeValue('black', 'white')}
+        fill="currentColor"
       ></path>
       <rect
         width="257"
         height="257"
         rx="128.5"
-        fill={useColorModeValue('black', 'white')}
+        fill="var(--chakra-colors-teal-400)"
       ></rect>
       <path
         d="M69.558 133.985l87.592-86.9891c1.636-1.6251 4.27.3525 3.165 2.377l-32.601 59.7521c-.728 1.332.237 2.958 1.755 2.958h56.34c1.815 0 2.691 2.223 1.364 3.462l-98.7278 92.142c-1.7702 1.652-4.4051-.676-2.9839-2.636l46.7357-64.473c.958-1.322.014-3.174-1.619-3.174H70.9673c-1.7851 0-2.6759-2.161-1.4093-3.419z"
-        fill={useColorModeValue('white', 'black')}
+        fill="white"
       ></path>
-    </svg>
+    </chakra.svg>
   )
 }
diff --git a/apps/website/src/components/logos/customers/farmo.tsx b/apps/website/src/components/logos/customers/farmo.tsx
diff --git a/apps/website/src/components/logos/customers/growtha.tsx b/apps/website/src/components/logos/customers/growtha.tsx
@@ -0,0 +1,45 @@
+import { chakra } from '@chakra-ui/react'
+
+export const Growtha = (props: any) => (
+  <chakra.svg viewBox="0 0 173 32" version="1.1" fill="none" {...props}>
+    <path
+      d="M23.7653 32C32.6019 32 39.7653 24.8366 39.7653 16C39.7653 7.16344 32.6019 0 23.7653 0C14.9287 0 7.7653 7.16344 7.7653 16C7.7653 24.8366 14.9287 32 23.7653 32Z"
+      fill="white"
+    ></path>
+    <path
+      d="M29.1355 7.7815C28.6839 7.87106 28.1904 8.04679 27.695 8.27806C27.9561 10.4026 29.6381 12.0847 31.7627 12.3454C31.9944 11.8504 32.1708 11.3568 32.2608 10.9067L33.0427 7L29.1355 7.7815Z"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="1.05461"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></path>
+    <path
+      d="M20.4049 19.6377C13.0114 27.029 2.23624 32.0002 1.06869 27.0734C0.363756 24.0987 5.23633 22.5001 8.73633 21.0001"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></path>
+    <path
+      d="M27.6961 8.27832C26.5088 8.83686 25.3097 9.7272 24.6495 10.6088L22.5831 13.3626L21.2661 13.1619C20.7514 13.0852 20.0281 13.3222 19.6604 13.6906L16.3141 17.0366L19.4688 17.5146L18.3227 19.044L20.9997 21.7191L22.5291 20.5737L23.0064 23.7269L26.3523 20.3817C26.7208 20.0133 26.9588 19.2919 26.8806 18.7776L26.6811 17.4598L29.4349 15.3942C30.3165 14.7336 31.208 13.5338 31.7646 12.3464C29.6389 12.0849 27.9576 10.4029 27.6961 8.27832Z"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="0.752289"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></path>
+    <path
+      d="M23.736 31C32.0203 31 38.736 24.2843 38.736 16C38.736 7.71573 32.0203 1 23.736 1C15.4517 1 8.73599 7.71573 8.73599 16C8.73599 24.2843 15.4517 31 23.736 31Z"
+      stroke="currentColor"
+      strokeWidth="2"
+    ></path>
+    <path
+      d="M59.944 25.5308C58.1188 25.5308 56.5265 25.2328 55.167 24.6368C53.8075 24.0223 52.6807 23.2028 51.7868 22.1785C50.9115 21.1542 50.2597 20.0182 49.8313 18.7704C49.403 17.5226 49.1888 16.2748 49.1888 15.027V14.4124C49.1888 13.1274 49.403 11.8703 49.8313 10.6412C50.2597 9.41198 50.9022 8.29455 51.7589 7.28888C52.6342 6.2832 53.7144 5.48238 54.9994 4.88642C56.303 4.29047 57.8022 3.99249 59.497 3.99249C61.3407 3.99249 62.9703 4.33703 64.3857 5.0261C65.8011 5.69655 66.9372 6.63705 67.7938 7.84759C68.6505 9.03948 69.1441 10.427 69.2744 12.01H64.693C64.5813 11.265 64.2833 10.6132 63.7991 10.0545C63.3335 9.49578 62.7282 9.05808 61.9833 8.74152C61.2569 8.42492 60.4282 8.26662 59.497 8.26662C58.6031 8.26662 57.8022 8.42492 57.0945 8.74152C56.4055 9.05808 55.8095 9.50508 55.3067 10.0824C54.8225 10.6598 54.45 11.3489 54.1893 12.1497C53.9471 12.9319 53.8261 13.7979 53.8261 14.7477C53.8261 15.7347 53.9565 16.638 54.2172 17.4574C54.4965 18.2582 54.897 18.9566 55.4184 19.5526C55.9399 20.1299 56.5824 20.5769 57.346 20.8935C58.1282 21.2101 58.9942 21.3684 59.944 21.3684C61.2104 21.3684 62.3092 21.1077 63.2404 20.5862C64.1715 20.0647 64.842 19.3757 65.2517 18.519L64.693 21.6477V16.787H68.9113V21.1449C68.0359 22.5603 66.8254 23.6498 65.2796 24.4134C63.7525 25.1583 61.9739 25.5308 59.944 25.5308ZM59.3573 17.6809V14.3845H70.5874V17.6809H59.3573ZM73.2974 25V9.69128H76.8452V16.2562H76.7614C76.7614 14.0958 77.2176 12.429 78.1302 11.2557C79.0614 10.0824 80.4023 9.49578 82.1529 9.49578H82.7395V13.3509H81.6221C80.393 13.3509 79.4432 13.6861 78.7727 14.3566C78.1023 15.0084 77.767 15.9582 77.767 17.206V25H73.2974ZM92.4323 25.5308C91.0914 25.5308 89.8995 25.3259 88.8565 24.9162C87.8136 24.4878 86.929 23.9105 86.2027 23.1842C85.495 22.4579 84.9549 21.6291 84.5824 20.6979C84.2099 19.7481 84.0237 18.7518 84.0237 17.7088V17.0663C84.0237 16.0048 84.2099 14.9991 84.5824 14.0493C84.9735 13.0809 85.5322 12.2335 86.2585 11.5072C87.0035 10.7808 87.8974 10.2128 88.9404 9.80308C89.9833 9.37468 91.1473 9.16058 92.4323 9.16058C93.7546 9.16058 94.9279 9.37468 95.9522 9.80308C96.9951 10.2128 97.8797 10.7808 98.606 11.5072C99.3324 12.2335 99.8911 13.0809 100.282 14.0493C100.673 14.9991 100.869 16.0048 100.869 17.0663V17.7088C100.869 18.7518 100.683 19.7481 100.31 20.6979C99.9376 21.6291 99.3882 22.4579 98.6619 23.1842C97.9542 23.9105 97.0789 24.4878 96.036 24.9162C94.993 25.3259 93.7918 25.5308 92.4323 25.5308ZM92.4323 21.7595C93.3076 21.7595 94.0339 21.5732 94.6113 21.2008C95.1886 20.8283 95.6262 20.3068 95.9242 19.6364C96.2408 18.9659 96.3991 18.221 96.3991 17.4015C96.3991 16.5262 96.2408 15.7627 95.9242 15.1108C95.6076 14.4404 95.1513 13.9096 94.5554 13.5185C93.9781 13.1274 93.2704 12.9319 92.4323 12.9319C91.6128 12.9319 90.9052 13.1274 90.3092 13.5185C89.7132 13.9096 89.257 14.4404 88.9404 15.1108C88.6424 15.7627 88.4934 16.5262 88.4934 17.4015C88.4934 18.221 88.6424 18.9659 88.9404 19.6364C89.2383 20.3068 89.6853 20.8283 90.2813 21.2008C90.8772 21.5732 91.5942 21.7595 92.4323 21.7595ZM109.249 25L112.042 10.1942H116.931L120.171 25H116.707L113.383 10.3059H115.366L112.377 25H109.249ZM108.187 25L108.159 21.2846H111.232L111.26 25H108.187ZM106.176 25L102.069 9.69128H106.455L110.282 25H106.176ZM117.853 25L117.881 21.2846H120.954V25H117.853ZM119.11 25L122.518 9.69128H126.624L122.937 25H119.11ZM136.615 25.1955C135.07 25.1955 133.822 25.0093 132.872 24.6368C131.922 24.2457 131.224 23.6032 130.777 22.7093C130.348 21.7967 130.134 20.5676 130.134 19.0218V5.55688H134.297V19.1894C134.297 19.9157 134.483 20.4744 134.855 20.8655C135.246 21.238 135.796 21.4243 136.504 21.4243H138.766V25.1955H136.615ZM127.816 12.9598V9.69128H138.766V12.9598H127.816ZM141.772 25V4.60707H146.242V16.3679H145.571C145.571 14.8222 145.767 13.5185 146.158 12.457C146.549 11.3954 147.126 10.5946 147.89 10.0545C148.653 9.49578 149.613 9.21638 150.767 9.21638H150.963C152.658 9.21638 153.952 9.82168 154.846 11.0323C155.74 12.2242 156.187 13.9748 156.187 16.2841V25H151.717V16.0048C151.717 15.1667 151.466 14.4963 150.963 13.9934C150.479 13.472 149.836 13.2112 149.035 13.2112C148.197 13.2112 147.517 13.4813 146.996 14.0214C146.493 14.5614 146.242 15.2784 146.242 16.1724V25H141.772ZM169.242 25V20.4745H168.488V15.5578C168.488 14.7756 168.302 14.189 167.929 13.7979C167.557 13.4068 166.961 13.2112 166.141 13.2112C165.732 13.2112 165.192 13.2205 164.521 13.2392C163.851 13.2578 163.162 13.2857 162.454 13.323C161.746 13.3602 161.104 13.3975 160.526 13.4347V9.66338C160.955 9.62618 161.458 9.58888 162.035 9.55168C162.612 9.51438 163.208 9.48648 163.823 9.46788C164.437 9.44918 165.015 9.43988 165.555 9.43988C167.119 9.43988 168.432 9.66338 169.494 10.1104C170.574 10.5573 171.393 11.2371 171.952 12.1497C172.511 13.0436 172.79 14.1983 172.79 15.6137V25H169.242ZM164.354 25.3911C163.255 25.3911 162.286 25.1955 161.448 24.8045C160.629 24.4134 159.986 23.8546 159.521 23.1283C159.055 22.3834 158.822 21.4988 158.822 20.4745C158.822 19.357 159.111 18.4445 159.688 17.7368C160.266 17.0104 161.076 16.4797 162.119 16.1444C163.162 15.7906 164.363 15.6137 165.722 15.6137H168.991V18.0999H165.694C164.912 18.0999 164.307 18.2955 163.879 18.6866C163.469 19.0591 163.264 19.5712 163.264 20.223C163.264 20.8376 163.469 21.3405 163.879 21.7315C164.307 22.104 164.912 22.2903 165.694 22.2903C166.197 22.2903 166.644 22.2065 167.035 22.0388C167.445 21.8526 167.78 21.5453 168.041 21.117C168.302 20.6886 168.451 20.0927 168.488 19.3291L169.55 20.4465C169.456 21.5081 169.196 22.402 168.767 23.1283C168.358 23.8546 167.78 24.4134 167.035 24.8045C166.309 25.1955 165.415 25.3911 164.354 25.3911Z"
+      fill="currentColor"
+    ></path>
+  </chakra.svg>
+)