chore: update pricing tables and add blocks to nav

saas-js · Mar 13, 2024 · 1570438 · 1570438
1 parent 3494f2d
commit 1570438
Show file tree

Hide file tree

Showing 10 changed files with 150 additions and 16 deletions.
diff --git a/apps/website/src/components/blocks/canvas-header.tsx b/apps/website/src/components/blocks/canvas-header.tsx
@@ -11,6 +11,7 @@ import {
   Tag,
 } from '@chakra-ui/react'
 import { ColorControl } from './color-control'
+import { ButtonLink } from '../link'
 import { UiComponent } from '../../data/blocks'
 import { useAuth } from '@saas-ui/auth'
 import { useRouter } from 'next/router'
@@ -125,16 +126,14 @@ export function CanvasHeader({
             </Button>
           </ButtonGroup>
         ) : (
-          <Button
+          <ButtonLink
             variant="outline"
             data-checked={state === 'code' ? 'true' : undefined}
             leftIcon={<FiLock size="1rem" />}
-            onClick={() =>
-              router.push(`/login?redirectUrl=/blocks/${attributes.category}`)
-            }
+            href="/pricing"
           >
             Get the code
-          </Button>
+          </ButtonLink>
         )}
       </HStack>
     </HStack>

diff --git a/apps/website/src/components/themes/notifications.tsx b/apps/website/src/components/themes/notifications.tsx
@@ -34,7 +34,7 @@ const NotificationItem: React.FC<NotificationItemProps> = (props) => {
           size="sm"
           fontWeight="normal"
           m="0"
-          for={name}
+          htmlFor={name}
           userSelect="none"
         >
           {title}

diff --git a/apps/website/src/components/themes/page.tsx b/apps/website/src/components/themes/page.tsx
@@ -99,7 +99,7 @@ export const ThemesPage = () => {
   return (
     <Box>
       <SEO
-        title="Saas UI"
+        title="Chakra UI Themes"
         description="Professionally crafted Chakra UI themes"
         titleTemplate="Professionally crafted Chakra UI themes"
       />

diff --git a/apps/website/src/data/blocks/categories.ts b/apps/website/src/data/blocks/categories.ts
@@ -23,7 +23,7 @@ export const CATEGORIES: CategoriesGroup[] = [
       {
         slug: 'cards',
         name: 'Cards',
-        images: images.kpicards ?? null,
+        images: images.cards ?? null,
       },
       {
         slug: 'kpi-cards',

diff --git a/apps/website/src/data/blocks/images/cards-dark.svg b/apps/website/src/data/blocks/images/cards-dark.svg
diff --git a/apps/website/src/data/blocks/images/cards.svg b/apps/website/src/data/blocks/images/cards.svg
diff --git a/apps/website/src/data/blocks/images/index.ts b/apps/website/src/data/blocks/images/index.ts
@@ -4,6 +4,8 @@ import navbar from './navbars.svg?url'
 import navbarDark from './navbars-dark.svg?url'
 import settings from './settings.svg?url'
 import settingsDark from './settings-dark.svg?url'
+import cards from './cards.svg?url'
+import cardsDark from './cards-dark.svg?url'
 import files from './files.svg?url'
 import filesDark from './files-dark.svg?url'
 import commandbars from './commandbars.svg?url'
@@ -27,6 +29,7 @@ const img = {
   sidebars: { light: sidebar, dark: sidebarDark },
   navbars: { light: navbar, dark: navbarDark },
   settings: { light: settings, dark: settingsDark },
+  cards: { light: cards, dark: cardsDark },
   files: { light: files, dark: filesDark },
   commandbars: { light: commandbars, dark: commandbarsDark },
   drawers: { light: drawers, dark: drawersDark },

diff --git a/apps/website/src/data/header-nav.tsx b/apps/website/src/data/header-nav.tsx
@@ -14,7 +14,6 @@ const headerNav: (NavLinkProps & { authenticated?: boolean })[] = [
   },
   {
     href: '/blocks',
-    authenticated: true,
     label: (
       <HStack justifyContent="center">
         <Text>Blocks</Text>

diff --git a/apps/website/src/pages/pricing.tsx b/apps/website/src/pages/pricing.tsx
@@ -3,13 +3,20 @@ import * as React from 'react'
 import Script from 'next/script'
 
 import {
+  Avatar,
   Badge,
   Box,
   Button,
   CardHeader,
   Center,
+  Container,
   IconButton,
   SimpleGrid,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
   Tag,
   useClipboard,
   useDisclosure,
@@ -33,7 +40,7 @@ import { ButtonLink } from '@/components/link'
 
 import { Faq } from '@/components/faq'
 
-import { Testimonials } from '@/components/testimonials'
+import { Testimonial, Testimonials } from '@/components/testimonials'
 
 import { BackgroundGradientRadial } from '@/components/background-gradient-radial'
 import { Br } from '@saas-ui/react'
@@ -72,6 +79,8 @@ const PricingPage = () => {
       <Box mb={8} w="full" position="relative" overflow="hidden">
         <Pricing />
 
+        <TestimonialTabs />
+
         <Faq />
 
         <Testimonials />
@@ -80,6 +89,80 @@ const PricingPage = () => {
   )
 }
 
+const TestimonialTabs = () => {
+  return (
+    <Container>
+      <Tabs
+        variant="unstyled"
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+      >
+        <TabList mb="6">
+          <Tab opacity="0.4" _selected={{ opacity: 1 }}>
+            <Avatar
+              name="Simon Høiberg"
+              src="https://senjaio.b-cdn.net/public/avatar/33d3d3ac-530d-4a2a-a2a9-93621e00bb1d_1698499800957.jpg?width=200"
+            />
+          </Tab>
+          <Tab opacity="0.4" _selected={{ opacity: 1 }}>
+            <Avatar
+              name="Makenna Smutz"
+              src="https://senjaio.b-cdn.net/public/avatar/ecbaf7d4-f379-4693-8366-39bb63d2b623_profile-image.jpeg?width=200"
+            />
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel textAlign="center">
+            <Text
+              fontSize="2xl"
+              fontWeight="light"
+              mb="6"
+              _before={{ content: '"“"' }}
+              _after={{ content: '"“"' }}
+            >
+              It&apos;s challenging building something that&apos;s a great
+              developer experience and performing well at the same time. SaaS UI
+              has been a massive help in this.
+            </Text>
+
+            <Text>Simon Høiberg</Text>
+            <Text color="muted" fontSize="sm">
+              {' '}
+              Founder -{' '}
+              <a href="https://aidbase.ai/" target="_blank">
+                Aidbase
+              </a>
+            </Text>
+          </TabPanel>
+          <TabPanel textAlign="center">
+            <Text
+              fontSize="2xl"
+              fontWeight="light"
+              mb="6"
+              _before={{ content: '"“"' }}
+              _after={{ content: '"“"' }}
+            >
+              Saas-ui is fantastic if you want to build fast-as-thought with
+              beautiful defaults and still have the flexibility to customize
+              when time allows. I truly love building with it!!
+            </Text>
+
+            <Text>Makenna Smutz</Text>
+            <Text color="muted" fontSize="sm">
+              {' '}
+              Founder -{' '}
+              <a href="https://halite.app/" target="_blank">
+                Halite
+              </a>
+            </Text>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </Container>
+  )
+}
+
 const getPaymentLinks = (
   append?: boolean
 ): {
@@ -164,7 +247,7 @@ const Pricing = () => {
           <PricingBox
             title={
               <HStack as="span">
-                <Text as="span">Design</Text>{' '}
+                <Text as="span">Figma Pro</Text>{' '}
                 <Tag colorScheme="primary" size="sm">
                   New
                 </Tag>
@@ -241,6 +324,16 @@ const Pricing = () => {
                 help="You can build and fail as many self hosted SaaS products as you like. Maximum 1 client project per license."
               />
               <PricingFeature title="Advanced components" />
+              <PricingFeature
+                title={
+                  <HStack as="span">
+                    <Text as="span">Blocks</Text>{' '}
+                    <Tag colorScheme="primary" size="sm">
+                      New
+                    </Tag>
+                  </HStack>
+                }
+              />
               <PricingFeature title="Multiple themes" />
               <PricingFeature title="Next.js and Electron boilerplates" />
               <PricingFeature title="Private discord community" />
@@ -295,7 +388,7 @@ const Pricing = () => {
               <PricingFeature
                 title={
                   <HStack as="span">
-                    <Text as="span">Figma design system</Text>{' '}
+                    <Text as="span">Figma Pro included</Text>{' '}
                     <Tag colorScheme="primary" size="sm">
                       New
                     </Tag>

diff --git a/apps/website/src/pages/redeem.tsx b/apps/website/src/pages/redeem.tsx
@@ -12,10 +12,6 @@ import { Auth, AvailableProviders, useAuth } from '@saas-ui/auth'
 import { FaDiscord, FaGoogle } from 'react-icons/fa6'
 
 const providers: AvailableProviders = {
-  google: {
-    name: 'Google',
-    icon: () => <FaGoogle size="1.1rem" color="#DB4437" />,
-  },
   discord: {
     name: 'Discord',
     icon: () => <FaDiscord size="1.1rem" color="#7289da" />,