diff --git a/apps/website/public/frameworks/nextjs.svg b/apps/website/public/frameworks/nextjs.svg deleted file mode 100644 index f0f195ff7..000000000 --- a/apps/website/public/frameworks/nextjs.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/website/public/frameworks/supabase.svg b/apps/website/public/frameworks/supabase.svg deleted file mode 100644 index 69b609e8d..000000000 --- a/apps/website/public/frameworks/supabase.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/website/public/img/frameworks/authjs.webp b/apps/website/public/img/frameworks/authjs.webp new file mode 100644 index 000000000..d06ca723a Binary files /dev/null and b/apps/website/public/img/frameworks/authjs.webp differ diff --git a/apps/website/public/frameworks/bedrock.svg b/apps/website/public/img/frameworks/bedrock.svg similarity index 100% rename from apps/website/public/frameworks/bedrock.svg rename to apps/website/public/img/frameworks/bedrock.svg diff --git a/apps/website/public/frameworks/blitz.svg b/apps/website/public/img/frameworks/blitz.svg similarity index 100% rename from apps/website/public/frameworks/blitz.svg rename to apps/website/public/img/frameworks/blitz.svg diff --git a/apps/website/public/frameworks/chakra.svg b/apps/website/public/img/frameworks/chakra.svg similarity index 100% rename from apps/website/public/frameworks/chakra.svg rename to apps/website/public/img/frameworks/chakra.svg diff --git a/apps/website/public/img/frameworks/drizzle.svg b/apps/website/public/img/frameworks/drizzle.svg new file mode 100644 index 000000000..474fc30a2 --- /dev/null +++ b/apps/website/public/img/frameworks/drizzle.svg @@ -0,0 +1,36 @@ + + + + + + diff --git a/apps/website/public/img/frameworks/neon.svg b/apps/website/public/img/frameworks/neon.svg new file mode 100644 index 000000000..d95656fcf --- /dev/null +++ b/apps/website/public/img/frameworks/neon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/website/public/img/frameworks/nextjs.svg b/apps/website/public/img/frameworks/nextjs.svg new file mode 100644 index 000000000..a7bc1733b --- /dev/null +++ b/apps/website/public/img/frameworks/nextjs.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/apps/website/public/img/frameworks/postgresql.svg b/apps/website/public/img/frameworks/postgresql.svg new file mode 100644 index 000000000..ecfcb48da --- /dev/null +++ b/apps/website/public/img/frameworks/postgresql.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/apps/website/public/img/frameworks/react-email.png b/apps/website/public/img/frameworks/react-email.png new file mode 100644 index 000000000..10dc08b06 Binary files /dev/null and b/apps/website/public/img/frameworks/react-email.png differ diff --git a/apps/website/public/frameworks/react.svg b/apps/website/public/img/frameworks/react.svg similarity index 100% rename from apps/website/public/frameworks/react.svg rename to apps/website/public/img/frameworks/react.svg diff --git a/apps/website/public/frameworks/redwood.svg b/apps/website/public/img/frameworks/redwood.svg similarity index 100% rename from apps/website/public/frameworks/redwood.svg rename to apps/website/public/img/frameworks/redwood.svg diff --git a/apps/website/public/img/frameworks/resend.svg b/apps/website/public/img/frameworks/resend.svg new file mode 100644 index 000000000..f330dd7ec --- /dev/null +++ b/apps/website/public/img/frameworks/resend.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/apps/website/public/img/frameworks/stripe.svg b/apps/website/public/img/frameworks/stripe.svg new file mode 100644 index 000000000..7c19b087f --- /dev/null +++ b/apps/website/public/img/frameworks/stripe.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/website/public/img/frameworks/supabase.svg b/apps/website/public/img/frameworks/supabase.svg new file mode 100644 index 000000000..6c7f9c6bc --- /dev/null +++ b/apps/website/public/img/frameworks/supabase.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/website/public/img/frameworks/tanstack.png b/apps/website/public/img/frameworks/tanstack.png new file mode 100644 index 000000000..ec5d62142 Binary files /dev/null and b/apps/website/public/img/frameworks/tanstack.png differ diff --git a/apps/website/public/img/frameworks/trpc.svg b/apps/website/public/img/frameworks/trpc.svg new file mode 100644 index 000000000..ab103d77c --- /dev/null +++ b/apps/website/public/img/frameworks/trpc.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/website/public/img/frameworks/turbopack.svg b/apps/website/public/img/frameworks/turbopack.svg new file mode 100644 index 000000000..073100090 --- /dev/null +++ b/apps/website/public/img/frameworks/turbopack.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + diff --git a/apps/website/public/img/frameworks/turborepo.svg b/apps/website/public/img/frameworks/turborepo.svg new file mode 100644 index 000000000..30a67e974 --- /dev/null +++ b/apps/website/public/img/frameworks/turborepo.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + diff --git a/apps/website/public/frameworks/ts-logo-512.svg b/apps/website/public/img/frameworks/typescript.svg similarity index 100% rename from apps/website/public/frameworks/ts-logo-512.svg rename to apps/website/public/img/frameworks/typescript.svg diff --git a/apps/website/src/components/layout/navigation-menu.tsx b/apps/website/src/components/layout/navigation-menu.tsx index 37d50adc1..8d621860c 100644 --- a/apps/website/src/components/layout/navigation-menu.tsx +++ b/apps/website/src/components/layout/navigation-menu.tsx @@ -1,6 +1,7 @@ import React from 'react' import * as NavigationMenu from '@radix-ui/react-navigation-menu' import { + Badge, Box, Button, chakra, @@ -130,7 +131,23 @@ export const Navigation = () => { + Next.js starter kit + + Updated + + + } icon={ @@ -623,7 +640,10 @@ const List = chakra('ul', { const ListItem = React.forwardRef< HTMLAnchorElement, - HTMLChakraProps<'a'> & { icon?: React.ReactNode } + Omit, 'title'> & { + icon?: React.ReactNode + title: React.ReactNode + } >(function ListItem( { children, title, icon, gridRow, gridColumn, gridArea, ...props }, forwardedRef diff --git a/apps/website/src/components/testimonials/testimonials.tsx b/apps/website/src/components/testimonials/testimonials.tsx index dc970da8a..16486e33a 100644 --- a/apps/website/src/components/testimonials/testimonials.tsx +++ b/apps/website/src/components/testimonials/testimonials.tsx @@ -49,7 +49,7 @@ export const Testimonials = () => { @@ -95,7 +95,7 @@ export const Testimonials = () => { diff --git a/apps/website/src/components/used-by/index.tsx b/apps/website/src/components/used-by/index.tsx index e22a73ae2..aa867d819 100644 --- a/apps/website/src/components/used-by/index.tsx +++ b/apps/website/src/components/used-by/index.tsx @@ -12,7 +12,7 @@ export const UsedBy = (props?: Omit) => { return (
- Used by indie founders and startups worldwide + Used by indie founders and established startups { +const NextjsStarterKit = () => { const [animateGlow, setAnimate] = React.useState(false) return ( @@ -142,32 +129,7 @@ const Home = () => { View Pricing - - } - > - Read documentation - + @@ -230,24 +192,26 @@ const Home = () => { - + - - - Get started today + + + Start shipping today - - Join more than 400 other developers and founders building succesful - SaaS products. + + Trusted by 400+ developers and founders world wide. - - Buy Pro - + + + Buy Pro + + + @@ -256,6 +220,423 @@ const Home = () => { ) } +function DocumentationLink(props: Pick) { + return ( + + } + {...props} + > + Documentation + + ) +} + +const FeatureCard = ({ + title, + children, + description, + gridColumn, + bg = 'gray.50', + ...rest +}: StackProps & { description: React.ReactNode }) => { + return ( + + + + + + {title} + + + + {description} + + + + {children} + + + + ) +} + +function StarterKitFeatures() { + return ( +
+ + + Saas UI solves all the boring stuff for you. It ships with a ton + useful UI components, patterns and templates
to help you build + better products, faster. + + + + + Buy now + + + } + > + Documentation + + + + + + + + Utilise all latest Next.js features. + + + RSC, SSR, Streaming without getting fully locked in thanks to + tRPC and React Query. + + + } + gridColumn="span 3" + > + + Next.js + tRPC + Tanstack Query + + + + + Fast, type-safe development environment. + + + Turbopack, Turborepo, TypeScript and sensible configs for + Prettier and ESLint. + + + } + gridColumn="span 3" + > + + TypeScript + Turbopack + Turborepo + + + + + Built on the world's most proven database. + + + PostgreSQL managed by Drizzle ORM. Run it locally, use Supabase, + or on the edge with Neon. + + + } + gridColumn="span 3" + > + + Postgresql + Turbopack + Supabase + Neon + + + + + Get paid reliably. + + + Stripe integration, pricing tables, tiered pricing, metered + usage, grandfathering and entitlements. + + + } + gridColumn="span 3" + > + + Stripe + + + + + Own your user data or choose a hosted solution. + + + Easily switch providers, support magic links, passwords, OAuth + and role-based authorization. + + + } + gridColumn="span 3" + > + + Auth.js + Supabase + + + + + Beautiful, easily customisable emails. + + + Build with React Email, send with Resend or pick your own + favourite SMTP provider. + + + } + gridColumn="span 3" + > + + React Email + Resend + + + + + + Support multiple workspaces. Invite members and manage roles. + + + } + gridColumn="span 2" + /> + + + Expertly crafted dashboard UI built with the Saas UI design + system. + + + } + gridColumn="span 2" + /> + + + Built-in settings pages for users and teams. + + + } + gridColumn="span 2" + /> + + + Built-in onboarding pages to guide users through the product. + + + } + gridColumn="span 2" + /> + + + Incrementally roll out new features and add easily add paywalls. + + + } + gridColumn="span 2" + /> + + + Growing collection of components and patterns to help you build + better products. + + + } + gridColumn="span 2" + /> + +
+ ) +} + const Screenshots = () => { return (
{ >
{ alt="Image showing the Saas UI dashboard" src="/screenshots/dashboard.png" quality="75" - // layout="fixed" width={1528} height={1060} /> @@ -307,7 +691,6 @@ const Screenshots = () => { alt="Image showing the Saas UI billing settings" src="/screenshots/billing.png" quality="75" - // layout="fixed" width={1607} height={1021} /> @@ -331,7 +714,6 @@ const Founder = () => { fontWeight="semibold" fontSize={['2xl', null, '4xl']} lineHeight="lg" - color={useColorModeValue('black', 'white')} width={{ base: 'full', lg: '50%' }} mb="8" > @@ -341,6 +723,7 @@ const Founder = () => { { ) } -const ProFeatures = () => { - return ( - - - Pro license - - - Not your standard -
dashboard template. - - - } - description={ - - - Saas UI Pro includes everything you need to build frontends that - scale. -
- Use it as a template for your next product or foundation for your - design system. - - - - Buy Pro - - - } - > - Explore Demo - - - - } - align="left" - variant="alternate" - columns={[1, 2, 3]} - iconSize={4} - features={[ - { - title: 'Components.', - icon: FiBox, - description: - 'All premium components are available on a private NPM registery, no more copy pasting and always up-to-date.', - variant: 'inline', - }, - { - title: 'Starterkits.', - icon: FiLock, - description: - 'Example apps in Next.JS, Electron. Including authentication, billing, example pages, everything you need to get started FAST.', - variant: 'inline', - }, - { - title: 'Documentation.', - icon: FiSearch, - description: - 'Extensively documented, including storybooks, best practices, use-cases and examples.', - variant: 'inline', - }, - { - title: 'Onboarding.', - icon: FiUserPlus, - description: - 'Add user onboarding flows, like tours, hints and inline documentation without breaking a sweat.', - variant: 'inline', - }, - { - title: 'Feature flags.', - icon: FiFlag, - description: - "Implement feature toggles for your billing plans with easy to use hooks. Connect Flagsmith, or other remote config services once you're ready.", - variant: 'inline', - }, - { - title: 'Upselling.', - icon: FiTrendingUp, - description: - 'Components and hooks for upgrade flows designed to make upgrading inside your app frictionless.', - variant: 'inline', - }, - { - title: 'Themes.', - icon: FiToggleLeft, - description: - 'Includes multiple themes with darkmode support, always have the perfect starting point for your next project.', - variant: 'inline', - }, - { - title: 'Generators.', - icon: FiTerminal, - description: - 'Extend your design system while maintaininig code quality and consistency with build-in generators.', - variant: 'inline', - }, - { - title: 'Monorepo.', - icon: FiCode, - description: ( - <> - All code is available as packages in a high-performance{' '} - Turborepo, you have full - control to modify and adjust it to your workflow. - - ), - variant: 'inline', - }, - ]} - /> - ) -} - -export default Home +export default NextjsStarterKit export async function getStaticProps() { return {