feat: update homepage

Author: Pagebakers

.cursor/mcp.json

@@ -0,0 +1,10 @@
+{
+    "mcpServers": {
+      "playwright": {
+        "command": "pnpx",
+        "args": [
+          "@playwright/mcp"
+        ]
+      }
+    }
+  }

.gitignore

@@ -71,3 +71,11 @@ yarn-error.log*
 ## Panda
 styled-system
 styled-system-studio
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

apps/website/app/(saas-js)/(landing)/page.tsx

@@ -4,8 +4,6 @@ import { FeaturesSection } from '@/components/saas-js/features.section'
 import { FounderSection } from '@/components/saas-js/founder.section'
 import { GetStartedSection } from '@/components/saas-js/get-started.section'
 import { HeroSection } from '@/components/saas-js/hero.section'
-import { ProblemSection } from '@/components/saas-js/problem.section'
-import { StackSection } from '@/components/saas-js/stack.section'
 import { TestimonialsSection } from '@/components/saas-js/testimonials.section'
 import { WhySection } from '@/components/saas-js/why.section'
 import { Button, ButtonGroup, Stack, Text } from '@chakra-ui/react'
@@ -14,8 +12,9 @@ import type { Metadata } from 'next'
 import Link from 'next/link'
 
 export const metadata: Metadata = {
-  title: 'Next.js and TanStack Start starterkits',
-  description: 'Building blocks for top tier SaaS products',
+  title: 'AI-native SaaS starter kit for TanStack Start',
+  description:
+    'TanStack Start starter kit built for AI-assisted development. Auth, billing, dashboards, and strict types that keep your AI agents on track.',
 }
 
 export default function Page() {
@@ -37,10 +36,7 @@ export default function Page() {
       />
       <DemoSection />
       <CustomersSection />
-      <ProblemSection />
-      <StackSection />
       <FeaturesSection />
-      <WhySection />
       <FounderSection />
       <TestimonialsSection />
       <GetStartedSection>
@@ -50,7 +46,9 @@ export default function Page() {
               <Link href="/pricing">Buy now</Link>
             </Button>
             <Button variant="outline" asChild>
-              <Link href="/docs">Documentation</Link>
+              <Link href="/docs/starter-kits/tanstack-start">
+                Read the docs
+              </Link>
             </Button>
           </ButtonGroup>
 

apps/website/app/(saas-js)/(landing)/pricing/components/pricing-table.tsx

@@ -21,13 +21,13 @@ import { TbBlocks, TbCheck, TbHeartHandshake } from 'react-icons/tb'
 export function PricingTable(props: { lastUpdated?: string | null }) {
   return (
     <Stack gap="0">
-      <Tabs.Root variant="enclosed" defaultValue="nextjs" position="static">
+      <Tabs.Root variant="enclosed" defaultValue="all-access" position="static">
         <Tabs.List>
-          <Tabs.Trigger value="nextjs">Next.js</Tabs.Trigger>
-          <Tabs.Trigger value="tanstack-start">Tanstack Start</Tabs.Trigger>
           <Tabs.Trigger value="all-access">
             All access <Badge colorPalette="accent">40%+ off</Badge>
           </Tabs.Trigger>
+          <Tabs.Trigger value="tanstack-start">Tanstack Start</Tabs.Trigger>
+          <Tabs.Trigger value="nextjs">Next.js</Tabs.Trigger>
         </Tabs.List>
         <Tabs.ContentGroup>
           <Tabs.Content value="tanstack-start">
@@ -310,7 +310,7 @@ export function PricingTableAllAccess(props: { lastUpdated?: string | null }) {
             Custom
           </Text>
           <Heading as="h2" fontSize="2xl" fontWeight="medium">
-            Enterprise
+            Startup
           </Heading>
 
           <Text fontSize="2xl" fontWeight="medium" color="fg.subtle">

apps/website/app/(saas-js)/docs/page.tsx

@@ -53,7 +53,7 @@ export default function Page() {
 
           <Stack gap="4">
             <Heading as="h3" size="xl">
-              Utilities
+              Open Source
             </Heading>
 
             <List.Root textStyle="lg" gap="2" listStyle="none">

apps/website/components/example.tsx

@@ -1,6 +1,6 @@
 import { readExampleFile } from '@/lib/composition'
 import { highlightCode } from '@/lib/highlight-code'
-import { FieldsProvider, defaultFieldTypes } from '@saas-ui/forms'
+// import { FieldsProvider, defaultFieldTypes } from '@saas-ui/forms'
 import { Box, BoxProps, HStack, Stack, Tabs, Text } from '@saas-ui/react'
 import Link from 'next/link'
 
@@ -175,13 +175,13 @@ export const ExampleTabs = (props: Props) => {
           maxHeight={maxHeight}
           overflow={overflow}
         >
-          <FieldsProvider
+          {/*<FieldsProvider
             value={{
               fields: defaultFieldTypes,
             }}
-          >
-            <ExamplePreview name={props.name} />
-          </FieldsProvider>
+          >*/}
+          <ExamplePreview name={props.name} />
+          {/*</FieldsProvider>*/}
         </Tabs.Content>
         <Tabs.Content value="code" mt="0!" pt="0!">
           <ExampleCodeWrapper maxHeight="480px">

apps/website/components/logos/next.tsx

@@ -0,0 +1,63 @@
+import { HTMLChakraProps, chakra } from '@chakra-ui/react'
+
+export const NextjsLogo = (props: HTMLChakraProps<'svg'>) => {
+  return (
+    <chakra.svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 180 180"
+      width="1em"
+      height="1em"
+      {...props}
+    >
+      <mask
+        height="180"
+        id=":r8:mask0_408_134"
+        maskUnits="userSpaceOnUse"
+        width="180"
+        x="0"
+        y="0"
+        style={{ maskType: 'alpha' }}
+      >
+        <circle cx="90" cy="90" fill="black" r="90"></circle>
+      </mask>
+      <g mask="url(#:r8:mask0_408_134)">
+        <circle cx="90" cy="90" dataCircle="true" fill="black" r="90"></circle>
+        <path
+          d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z"
+          fill="url(#:r8:paint0_linear_408_134)"
+        ></path>
+        <rect
+          fill="url(#:r8:paint1_linear_408_134)"
+          height="72"
+          width="12"
+          x="115"
+          y="54"
+        ></rect>
+      </g>
+      <defs>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id=":r8:paint0_linear_408_134"
+          x1="109"
+          x2="144.5"
+          y1="116.5"
+          y2="160.5"
+        >
+          <stop stopColor="white"></stop>
+          <stop offset="1" stopColor="white" stopOpacity="0"></stop>
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id=":r8:paint1_linear_408_134"
+          x1="121"
+          x2="120.799"
+          y1="54"
+          y2="106.875"
+        >
+          <stop stopColor="white"></stop>
+          <stop offset="1" stopColor="white" stopOpacity="0"></stop>
+        </linearGradient>
+      </defs>
+    </chakra.svg>
+  )
+}

apps/website/components/logos/tanstack.tsx

@@ -0,0 +1,19 @@
+import { HTMLChakraProps, chakra } from '@chakra-ui/react'
+
+export const TanstackLogo = (props: HTMLChakraProps<'svg'>) => {
+  return (
+    <chakra.svg
+      height="1em"
+      width="1em"
+      viewBox="0 0 663 660"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="m305.114318.62443771c8.717817-1.14462121 17.926803-.36545135 26.712694-.36545135 32.548987 0 64.505987 5.05339923 95.64868 14.63098274 39.74418 12.2236582 76.762804 31.7666864 109.435876 57.477568 40.046637 31.5132839 73.228974 72.8472109 94.520714 119.2362609 39.836383 86.790386 39.544267 191.973146-1.268422 278.398081-26.388695 55.880442-68.724007 102.650458-119.964986 136.75724-41.808813 27.828603-90.706831 44.862601-140.45707 50.89341-63.325458 7.677926-131.784923-3.541603-188.712259-32.729444-106.868873-54.795293-179.52309291-165.076271-180.9604082-285.932068-.27660564-23.300971.08616998-46.74071 4.69884909-69.814998 7.51316071-37.57857 20.61272131-73.903917 40.28618971-106.877282 21.2814003-35.670293 48.7704861-67.1473767 81.6882804-92.5255597 38.602429-29.7610135 83.467691-51.1674988 130.978372-62.05777669 11.473831-2.62966514 22.9946-4.0869914 34.57273-5.4964306l3.658171-.44480576c3.050084-.37153079 6.104217-.74794222 9.162589-1.14972654zm-110.555861 549.44131429c-14.716752 1.577863-30.238964 4.25635-42.869928 12.522173 2.84343.683658 6.102369.004954 9.068638 0 7.124652-.011559 14.317732-.279903 21.434964.032202 17.817402.781913 36.381729 3.63214 53.58741 8.350042 22.029372 6.040631 41.432961 17.928687 62.656049 25.945156 22.389644 8.456554 44.67706 11.084675 68.427 11.084675 11.96813 0 23.845573-.035504 35.450133-3.302696-6.056202-3.225083-14.72582-2.619864-21.434964-3.963236-14.556814-2.915455-28.868774-6.474936-42.869928-11.470264-10.304996-3.676672-20.230803-8.214291-30.11097-12.848661l-6.348531-2.985046c-9.1705-4.309263-18.363277-8.560752-27.845391-12.142608-24.932161-9.418465-52.560181-14.071964-79.144482-11.221737zm22.259385-62.614168c-29.163917 0-58.660076 5.137344-84.915434 18.369597-6.361238 3.206092-12.407546 7.02566-18.137277 11.258891-1.746125 1.290529-4.841829 2.948483-5.487351 5.191839-.654591 2.275558 1.685942 4.182039 3.014086 5.637703 6.562396-3.497556 12.797498-7.199878 19.78612-9.855246 45.19892-17.169893 99.992458-13.570779 145.098218 2.172348 22.494346 7.851335 43.219483 19.592421 65.129314 28.800338 24.503461 10.297807 49.53043 16.975034 75.846795 20.399104 31.04195 4.037546 66.433549.7654 94.808495-13.242161 9.970556-4.921843 23.814245-12.422267 28.030337-23.320339-5.207047.454947-9.892236 2.685918-14.83959 4.224149-7.866632 2.445646-15.827248 4.51974-23.908229 6.138887-27.388113 5.486604-56.512458 6.619429-84.091013 1.639788-25.991939-4.693152-50.142596-14.119246-74.179513-24.03502l-3.068058-1.268177c-2.045137-.846788-4.089983-1.695816-6.135603-2.544467l-3.069142-1.272366c-12.279956-5.085721-24.606928-10.110797-37.210937-14.51024-24.485325-8.546552-50.726667-13.784628-76.671218-13.784628zm51.114145-447.9909432c-34.959602 7.7225298-66.276908 22.7605319-96.457338 41.7180089-17.521434 11.0054099-34.281927 22.2799893-49.465301 36.4444283-22.5792616 21.065423-39.8360564 46.668751-54.8866988 73.411509-15.507372 27.55357-25.4498976 59.665686-30.2554517 90.824149-4.7140432 30.568106-5.4906485 62.70747-.0906864 93.301172 6.7503648 38.248526 19.5989769 74.140579 39.8896436 107.337631 6.8187918-3.184625 11.659796-10.445603 17.3128555-15.336896 11.4149428-9.875888 23.3995608-19.029311 36.2745548-26.928535 4.765981-2.923712 9.662222-5.194315 14.83959-7.275014 1.953055-.785216 5.14604-1.502727 6.06527-3.647828 1.460876-3.406732-1.240754-9.335897-1.704904-12.865654-1.324845-10.095517-2.124534-20.362774-1.874735-30.549941.725492-29.668947 6.269727-59.751557 16.825623-87.521453 7.954845-20.924233 20.10682-39.922168 34.502872-56.971512 4.884699-5.785498 10.077731-11.170545 15.437296-16.512656 3.167428-3.157378 7.098271-5.858983 9.068639-9.908915-10.336599.006606-20.674847 2.987289-30.503603 6.013385-21.174447 6.519522-41.801477 16.19312-59.358362 29.841512-8.008432 6.226409-13.873368 14.387371-21.44733 20.939921-2.32322 2.010516-6.484901 4.704691-9.695199 3.187928-4.8500728-2.29042-4.1014979-11.835213-4.6571581-16.222019-2.1369011-16.873476 4.2548401-38.216325 12.3778671-52.843142 13.039878-23.479694 37.150915-43.528712 65.467327-42.82854 12.228647.302197 22.934587 4.551115 34.625711 7.324555-2.964621-4.211764-6.939158-7.28162-10.717482-10.733763-9.257431-8.459031-19.382979-16.184864-30.503603-22.028985-4.474136-2.350694-9.291232-3.77911-14.015169-5.506421-2.375159-.867783-5.36616-2.062533-6.259834-4.702213-1.654614-4.888817 7.148561-9.416813 10.381943-11.478522 12.499882-7.969406 27.826705-14.525258 42.869928-14.894334 23.509209-.577147 46.479246 12.467678 56.162903 34.665926 3.404469 7.803171 4.411273 16.054969 5.079109 24.382907l.121749 1.56229.174325 2.345587c.01913.260708.038244.521433.057403.782164l.11601 1.56437.120128 1.563971c7.38352-6.019164 12.576553-14.876995 19.78612-21.323859 16.861073-15.07846 39.936636-21.7722 61.831627-14.984333 19.786945 6.133107 36.984382 19.788105 47.105807 37.959541 2.648042 4.754231 10.035685 16.373942 4.698379 21.109183-4.177345 3.707277-9.475079.818243-13.880788-.719162-3.33605-1.16376-6.782939-1.90214-10.241828-2.585698l-1.887262-.369639c-.629089-.122886-1.257979-.246187-1.886079-.372129-11.980496-2.401886-25.91652-2.152533-37.923398-.041284-7.762754 1.364839-15.349083 4.127545-23.083807 5.271929v1.651348c21.149714.175043 41.608563 12.240618 52.043268 30.549941 4.323267 7.585468 6.482428 16.267431 8.138691 24.770223 2.047864 10.50918.608423 21.958802-2.263037 32.201289-.962925 3.433979-2.710699 9.255807-6.817143 10.046802-2.902789.558982-5.36781-2.330878-7.024898-4.279468-4.343878-5.10762-8.475879-9.96341-13.573278-14.374161-12.895604-11.157333-26.530715-21.449361-40.396663-31.373138-7.362086-5.269452-15.425755-12.12007-23.908229-15.340199 2.385052 5.745041 4.721463 11.086326 5.532694 17.339156 2.385876 18.392716-5.314223 35.704625-16.87179 49.540445-3.526876 4.222498-7.29943 8.475545-11.744712 11.755948-1.843407 1.360711-4.156734 3.137561-6.595373 2.752797-7.645687-1.207961-8.555849-12.73272-9.728176-18.637115-3.970415-19.998652-2.375984-39.861068 3.132802-59.448534-4.901187 2.485279-8.443727 7.923994-11.521293 12.385111-6.770975 9.816439-12.645804 20.199291-16.858599 31.375615-16.777806 44.519521-16.616219 96.664142 5.118834 139.523233 2.427098 4.786433 6.110614 4.144058 10.894733 4.144058.720854 0 1.44257-.004515 2.164851-.010924l2.168232-.022283c4.338648-.045438 8.686803-.064635 12.979772.508795 2.227588.297243 5.320818.032202 7.084256 1.673642 2.111344 1.966755.986008 5.338808.4996 7.758859-1.358647 6.765574-1.812904 12.914369-1.812904 19.816178 9.02412-1.398692 11.525415-15.866153 14.724172-23.118874 3.624982-8.216283 7.313444-16.440823 10.667192-24.770223 1.648843-4.093692 3.854171-8.671229 3.275427-13.210785-.649644-5.10184-4.335633-10.510831-6.904531-14.862134-4.86244-8.234447-10.389363-16.70834-13.969002-25.595896-2.861567-7.104926-.197036-15.983399 7.871579-18.521521 4.450228-1.400344 9.198073 1.345848 12.094266 4.562675 6.07269 6.74328 9.992815 16.777697 14.401823 24.692609l34.394873 61.925556c2.920926 5.243856 5.848447 10.481933 8.836976 15.687808 1.165732 2.031158 2.352075 5.167068 4.740424 6.0332 2.127008.77118 5.033095-.325315 7.148561-.748886 5.492297-1.099798 10.97635-2.287117 16.488434-3.28288 6.605266-1.193099 16.673928-.969342 21.434964-6.129805-6.963066-2.205375-15.011895-2.074919-22.259386-1.577863-4.352947.298894-9.178287 1.856116-13.178381-.686135-5.953149-3.783239-9.910373-12.522173-13.552668-18.377854-8.980425-14.439388-17.441465-29.095929-26.041008-43.760726l-1.376261-2.335014-2.765943-4.665258c-1.380597-2.334387-2.750786-4.67476-4.079753-7.036188-1.02723-1.826391-2.549937-4.233231-1.078344-6.24705 1.545791-2.114476 4.91472-2.239146 7.956473-2.243117l.603351.000261c1.195428.001526 2.315572.002427 3.222811-.11692 12.27399-1.615019 24.718635-2.952611 37.098976-2.952611-.963749-3.352237-3.719791-7.141255-2.838484-10.73046 1.972017-8.030506 13.526287-10.543033 18.899867-4.780653 3.60767 3.868283 5.704174 9.192229 8.051303 13.859765 3.097352 6.162006 6.624228 12.118418 9.940876 18.16483 5.805578 10.585967 12.146205 20.881297 18.116667 31.375615.49237.865561.999687 1.726685 1.512269 2.587098l.771613 1.290552c2.577138 4.303168 5.164895 8.635123 6.553094 13.461506-20.735854-.9487-36.30176-25.018751-45.343193-41.283704-.721369 2.604176.450959 4.928448 1.388326 7.431066 1.948109 5.197619 4.276275 10.147535 7.20627 14.862134 4.184765 6.732546 8.982075 13.665732 15.313633 18.553722 11.236043 8.673707 26.05255 8.721596 39.572241 7.794364 8.669619-.595311 19.50252-4.542034 28.030338-1.864372 8.513803 2.673532 11.940924 12.063098 6.884745 19.276187-3.787393 5.403211-8.842747 7.443452-15.128962 8.257566 4.445282 9.53571 10.268996 18.385285 14.490036 28.072919 1.758491 4.035895 3.59118 10.22102 7.8048 12.350433 2.805507 1.416857 6.824562.09743 9.85761.034678-3.043765-8.053625-8.742992-14.887729-11.541904-23.118874 8.533589.390544 16.786875 4.843404 24.732651 7.685374 15.630376 5.590144 31.063836 11.701854 46.475333 17.86913l7.112077 2.848685c6.338978 2.538947 12.71588 5.052299 18.961699 7.812528 2.285297 1.009799 5.449427 3.370401 7.975455 1.917215 2.061054-1.186494 3.394144-4.015253 4.665403-5.931643 3.55573-5.361927 6.775921-10.928622 9.965609-16.513481 12.774414-22.36586 22.143967-46.872692 28.402976-71.833646 20.645168-82.323009 2.934117-173.156241-46.677107-241.922507-19.061454-26.420745-43.033164-49.262193-69.46165-68.1783861-66.13923-47.336721-152.911262-66.294198-232.486917-48.7172481zm135.205158 410.5292842c-17.532977 4.570931-35.601827 8.714164-53.58741 11.040088 2.365265 8.052799 8.145286 15.885969 12.376218 23.118874 1.635653 2.796558 3.3859 6.541816 6.618457 7.755557 3.651364 1.370619 8.063669-.853747 11.508927-1.975838-1.595256-4.364513-4.279573-8.292245-6.476657-12.385112-.905215-1.687677-2.305907-3.685809-1.559805-5.68972 1.410585-3.786541 7.266452-3.563609 10.509727-4.221671 8.54678-1.733916 17.004522-3.898008 25.557073-5.611281 3.150939-.631641 7.538512-2.342438 10.705115-1.285575 2.371037.791232 3.800147 2.744743 5.152304 4.781948l.606196.918752c.80912 1.222827 1.637246 2.41754 2.671212 3.351165 3.457625 3.121874 8.628398 3.60159 13.017619 4.453686-2.678546-6.027421-7.130424-11.301001-9.984571-17.339156-1.659561-3.511592-3.023155-8.677834-6.656381-10.707341-5.005064-2.795733-15.341663 2.461334-20.458024 3.795624zm-110.472507-40.151706c-.825246 10.467897-4.036369 18.984725-9.068639 28.072919 5.76683.729896 11.649079.989984 17.312856 2.39363 4.244947 1.051908 8.156828 3.058296 12.366325 4.211763-2.250671-6.157877-6.426367-11.651913-9.661398-17.339156-3.266358-5.740912-6.189758-12.717032-10.949144-17.339156z"
+        fill="currentColor"
+        transform="translate(.9778)"
+      />
+    </chakra.svg>
+  )
+}

apps/website/components/saas-js/customers.section.tsx

@@ -51,7 +51,12 @@ export const CustomersSection = () => (
   <Box py="10" pos="relative">
     <Container>
       <Stack>
-        <Heading as="h3" textAlign="center" fontWeight="medium">
+        <Heading
+          as="h3"
+          textAlign="center"
+          fontWeight="medium"
+          textStyle={{ base: 'lg', md: 'xl' }}
+        >
           Used by indie founders and established startups
         </Heading>
         <CustomersGridRow />