-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## Changelog - [x] New hero section - [x] Highlight Nav and example - [x] Waiting list form
- Loading branch information
Showing
20 changed files
with
791 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| /** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */ | ||
| const config = { | ||
| plugins: ["prettier-plugin-tailwindcss"], | ||
| tabWidth: 4, | ||
| plugins: ["prettier-plugin-tailwindcss"], | ||
| tabWidth: 4, | ||
| }; | ||
|
|
||
| export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| "use client"; | ||
|
|
||
| import { cn } from "@/lib/utils"; | ||
| import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; | ||
| import type { TabsProps } from "@radix-ui/react-tabs"; | ||
| import { SaasStarterkitHighlight } from "@/app/(app)/_components/saas-startkit-highlight"; | ||
| import React from "react"; | ||
|
|
||
| const highlights = [ | ||
| { | ||
| id: "saas-starterkit", | ||
| title: "SaaS Starterkit", | ||
| description: | ||
| "Auth, Dashboard, Landing Pages, billing and more — everything you need to launch your MVP faster.", | ||
| badge: "Almost Ready", | ||
| }, | ||
| { | ||
| id: "blocks", | ||
| title: "Blocks", | ||
| description: | ||
| "Auth forms, modals, hero sections, pricing tables, and more — all customizable and open source.", | ||
| disabled: true, | ||
| badge: "Soon", | ||
| }, | ||
| { | ||
| id: "guides", | ||
| title: "Guides", | ||
| description: | ||
| "Authenticating users, setting up billing, and more — all the guides you need to launch your app.", | ||
| disabled: true, | ||
| badge: "Soon", | ||
| }, | ||
| ]; | ||
|
|
||
| type HighlightNavProps = TabsProps; | ||
|
|
||
| export function HighlightTabs({ className, ...props }: HighlightNavProps) { | ||
| const [selectedHighlight, setSelectedHighlight] = React.useState( | ||
| highlights[0]?.id, | ||
| ); | ||
|
|
||
| const activeHighlight = highlights.find( | ||
| (highlight) => highlight.id === selectedHighlight, | ||
| ); | ||
|
|
||
| return ( | ||
| <Tabs | ||
| className={cn("space-y-10", className)} | ||
| value={selectedHighlight} | ||
| onValueChange={(value) => setSelectedHighlight(value)} | ||
| {...props} | ||
| > | ||
| <div className="flex flex-col items-center gap-4"> | ||
| <TabsList className="grid h-auto grid-cols-3 items-start bg-transparent p-0"> | ||
| {highlights.map((highlight) => ( | ||
| <TabsTrigger | ||
| value={highlight.id} | ||
| key={highlight.id} | ||
| disabled={highlight.disabled} | ||
| className="group flex flex-col items-center justify-start gap-2 whitespace-normal rounded-none border-t py-6 text-start data-[state=active]:border-primary data-[state=active]:shadow-none sm:items-start" | ||
| > | ||
| <div className="flex flex-col items-center gap-2 sm:flex-row"> | ||
| <h2 className="text-center font-medium"> | ||
| {highlight.title} | ||
| </h2> | ||
| {highlight?.badge && ( | ||
| <span className="block rounded-sm bg-secondary px-2 py-0.5 text-center text-xs font-medium text-primary"> | ||
| {highlight.badge} | ||
| </span> | ||
| )} | ||
| </div> | ||
| <p className="hidden font-normal text-muted-foreground transition-all sm:block"> | ||
| {highlight.description} | ||
| </p> | ||
| </TabsTrigger> | ||
| ))} | ||
| </TabsList> | ||
|
|
||
| <p className="block w-full text-center text-sm font-normal text-muted-foreground transition-all sm:hidden"> | ||
| {activeHighlight?.description} | ||
| </p> | ||
| </div> | ||
| <TabsContent value="saas-starterkit"> | ||
| <SaasStarterkitHighlight /> | ||
| </TabsContent> | ||
| </Tabs> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
apps/www/src/app/(app)/_components/saas-startkit-highlight.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import { badgeVariants } from "@/components/ui/badge"; | ||
| import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; | ||
| import { siteUrls } from "@/config/urls"; | ||
| import Image from "next/image"; | ||
| import Link from "next/link"; | ||
| import { ArrowRightIcon } from "lucide-react"; | ||
| import { buttonVariants } from "@/components/ui/button"; | ||
|
|
||
| const saasStarterkitHighlights = [ | ||
| { | ||
| id: "user-dashboard", | ||
| title: "User Dashboard", | ||
| imageLight: | ||
| "https://utfs.io/f/43bbc3c8-cf3c-4fae-a0eb-9183f1779489-294m81.png", | ||
| imageDark: | ||
| "https://utfs.io/f/fddea366-51c6-45f4-bd54-84d273ad9fb9-1ly324.png", | ||
| }, | ||
| { | ||
| id: "auth", | ||
| title: "Authentication", | ||
| imageLight: | ||
| "https://utfs.io/f/805616c1-22b8-4508-9890-9ba9e2867a41-p24dnn.png", | ||
| imageDark: | ||
| "https://utfs.io/f/9074c0de-d9ea-4c0b-9d49-55dca1253a3f-6ig3yq.png", | ||
| }, | ||
| { | ||
| id: "user-settings", | ||
| title: "User Settings", | ||
| imageLight: | ||
| "https://utfs.io/f/da560e34-84ca-4283-8060-65d727def753-eqmy3s.png", | ||
| imageDark: | ||
| "https://utfs.io/f/e365451e-1a36-43a7-8d1c-7315e5aae430-63u1th.png", | ||
| }, | ||
| { | ||
| id: "Users-management", | ||
| title: "Users Management", | ||
| imageLight: | ||
| "https://utfs.io/f/72a2c035-69e0-46ca-84a8-446e4dabf77c-3koi6e.png", | ||
| imageDark: | ||
| "https://utfs.io/f/89099112-4273-4375-9e44-1b3394600e21-c6ikq1.png", | ||
| }, | ||
| ]; | ||
|
|
||
| export function SaasStarterkitHighlight() { | ||
| return ( | ||
| <div className="space-y-4"> | ||
| <p className="gap-2 text-center text-sm sm:text-left"> | ||
| For more information, Visit the{" "} | ||
| <Link | ||
| href={siteUrls.saasStarterkit} | ||
| className={badgeVariants({ | ||
| variant: "secondary", | ||
| className: "ml-1 mt-1 gap-0.5 sm:mt-0", | ||
| })} | ||
| > | ||
| <span>SaaS Starterkit</span> | ||
| <ArrowRightIcon className="h-3 w-3" /> | ||
| </Link> | ||
| </p> | ||
| <Tabs defaultValue="user-dashboard" className="h-auto"> | ||
| <TabsList className="h-auto flex-wrap items-center justify-center gap-2 bg-transparent p-0 sm:justify-start"> | ||
| {saasStarterkitHighlights.map((tab) => ( | ||
| <TabsTrigger | ||
| key={tab.id} | ||
| value={tab.id} | ||
| className="data-[state=active]:bg-secondary" | ||
| > | ||
| {tab.title} | ||
| </TabsTrigger> | ||
| ))} | ||
|
|
||
| <Link | ||
| href={siteUrls.saasStarterkit} | ||
| className={buttonVariants({ | ||
| variant: "ghost", | ||
| size: "sm", | ||
| className: "gap-1", | ||
| })} | ||
| > | ||
| <span>View all</span> | ||
| <ArrowRightIcon className="h-4 w-4" /> | ||
| </Link> | ||
| </TabsList> | ||
| {saasStarterkitHighlights.map((tab) => ( | ||
| <TabsContent | ||
| className="relative aspect-video rounded-md bg-muted" | ||
| key={tab.id} | ||
| value={tab.id} | ||
| > | ||
| <Image | ||
| src={tab.imageLight} | ||
| alt={tab.title} | ||
| fill | ||
| className="block rounded-md border border-border dark:hidden" | ||
| priority | ||
| /> | ||
|
|
||
| <Image | ||
| src={tab.imageDark} | ||
| alt={tab.title} | ||
| fill | ||
| className="hidden rounded-md border border-border dark:block" | ||
| priority | ||
| /> | ||
| </TabsContent> | ||
| ))} | ||
| </Tabs> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.