From 3ddf8771c8afc02025384a5e83090897a13dfeab Mon Sep 17 00:00:00 2001
From: Pagebakers <eelco@appulse.nl>
Date: Fri, 17 Nov 2023 12:21:46 +0100
Subject: [PATCH] chore: add figma landing

---
 .../src/components/layout/navigation.tsx      |   2 +-
 .../src/components/signup-form/index.tsx      |   2 +-
 apps/website/src/pages/figma.tsx              | 141 ++++++++++++++++++
 3 files changed, 143 insertions(+), 2 deletions(-)
 create mode 100644 apps/website/src/pages/figma.tsx

diff --git a/apps/website/src/components/layout/navigation.tsx b/apps/website/src/components/layout/navigation.tsx
index 135df64fa..fa223307f 100644
--- a/apps/website/src/components/layout/navigation.tsx
+++ b/apps/website/src/components/layout/navigation.tsx
@@ -52,7 +52,7 @@ const Header = () => {
 
   return (
     <HStack flex="1" ps="4">
-      <HStack spacing="2" flexShrink={0} flex="1" justifyContent="flex-start">
+      <HStack spacing="1" flexShrink={0} flex="1" justifyContent="flex-start">
         {headerNav.map(({ href, id, ...props }, i) => {
           return (
             <NavLink
diff --git a/apps/website/src/components/signup-form/index.tsx b/apps/website/src/components/signup-form/index.tsx
index 827937c6c..d3a1cc12d 100644
--- a/apps/website/src/components/signup-form/index.tsx
+++ b/apps/website/src/components/signup-form/index.tsx
@@ -125,7 +125,7 @@ export function SignupForm({ isOpen, onClose }: any) {
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>
-          Figma early access <ModalCloseButton />
+          Figma Pro early access <ModalCloseButton />
         </ModalHeader>
         <ModalBody pb="6">
           <Box
diff --git a/apps/website/src/pages/figma.tsx b/apps/website/src/pages/figma.tsx
new file mode 100644
index 000000000..ee97548cc
--- /dev/null
+++ b/apps/website/src/pages/figma.tsx
@@ -0,0 +1,141 @@
+import * as React from 'react'
+
+import Script from 'next/script'
+
+import {
+  AspectRatio,
+  Box,
+  Button,
+  CardHeader,
+  Center,
+  IconButton,
+  SimpleGrid,
+  Tag,
+  useClipboard,
+  useDisclosure,
+} from '@chakra-ui/react'
+import {
+  Heading,
+  Text,
+  HStack,
+  VStack,
+  Stack,
+  useColorModeValue,
+  Avatar,
+  Tooltip,
+  Card,
+  CardBody,
+} from '@chakra-ui/react'
+
+import Section from '@/components/marketing/section-wrapper'
+import SectionTitle from '@/components/marketing/section-title'
+
+import SEO from '@/components/seo'
+import { CheckIcon } from '@chakra-ui/icons'
+import { ButtonLink } from '@/components/link'
+
+import { Faq } from '@/components/faq'
+
+import { Testimonials } from '@/components/testimonials'
+
+import { BackgroundGradientRadial } from '@/components/background-gradient-radial'
+import { Br } from '@saas-ui/react'
+import { useRouter } from 'next/router'
+import CodePanel from '@/components/code-panel/code-panel'
+import { FiCheck, FiCopy } from 'react-icons/fi'
+import { SignupForm } from '@/components/signup-form'
+import { FaFigma } from 'react-icons/fa6'
+
+const FigmaPage = () => {
+  return (
+    <Box>
+      <SEO
+        title="Saas UI"
+        description="The React component library for Startups"
+        titleTemplate="%s - Pricing"
+      />
+      <BackgroundGradientRadial
+        top="-30%"
+        bottom="auto"
+        opacity="0.3"
+        _dark={{ opacity: 0.5 }}
+        pointerEvents="none"
+      />
+      <Box mb={8} w="full" position="relative" overflow="hidden">
+        <Figma />
+
+        <FigmaEmbed />
+
+        <Testimonials />
+      </Box>
+    </Box>
+  )
+}
+
+const Figma = () => {
+  const figma = useDisclosure()
+
+  return (
+    <Section id="pricing" pos="relative" innerWidth="container.xl" py="20">
+      <Box zIndex="2" pos="relative">
+        <SectionTitle
+          title="Saas UI Figma Kit"
+          description={
+            <>
+              <Text fontSize="xl" mb="12">
+                Professionally crafted Figma design system for <br /> designing
+                beautiful products at any scale.
+              </Text>
+            </>
+          }
+          pt={{ base: '8', lg: '20' }}
+          sx={{ mb: 0, textAlign: 'center' }}
+        />
+
+        <HStack justifyContent="center">
+          <Button
+            onClick={figma.onOpen}
+            variant="primary"
+            size="lg"
+            leftIcon={<FaFigma />}
+          >
+            Figma Pro early access
+          </Button>
+        </HStack>
+
+        <SignupForm isOpen={figma.isOpen} onClose={figma.onClose} />
+      </Box>
+    </Section>
+  )
+}
+
+const FigmaEmbed = () => {
+  return (
+    <Box>
+      <Heading textAlign="center" size="md" fontWeight="medium" mb="8">
+        Free community library
+      </Heading>
+      <AspectRatio ratio={16 / 9} w="full" maxW="container.xl" mx="auto">
+        <Box
+          as="iframe"
+          objectFit={'cover'}
+          rounded="xl"
+          src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FPxBbup77UKMM8ApWacxlCb%2FSaas-UI-Theme-1.1-(Community)%3Ftype%3Ddesign%26node-id%3D0%253A1%26mode%3Ddesign%26t%3DD2h54RiMJdxlk72N-1"
+        ></Box>
+      </AspectRatio>
+    </Box>
+  )
+}
+
+export default FigmaPage
+
+export async function getStaticProps() {
+  return {
+    props: {
+      header: {
+        position: 'fixed',
+        variant: 'dark',
+      },
+    },
+  }
+}