[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "./globals.css" import { Inter } from "next/font/google" import { Navbar } from "@/components/navbar" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Your revolutionary Next.js SaaS", description: "A starter application with functionality", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 142.1 76.2% 36.3%; --primary-foreground: 355.7 100% 97.3%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 142.1 76.2% 36.3%; --radius: 0.5rem; } .dark { --background: 20 14.3% 4.1%; --foreground: 0 0% 95%; --card: 24 9.8% 10%; --card-foreground: 0 0% 95%; --popover: 0 0% 9%; --popover-foreground: 0 0% 95%; --primary: 142.1 70.6% 45.3%; --primary-foreground: 144.9 80.4% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 15%; --muted-foreground: 240 5% 64.9%; --accent: 12 6.5% 15.1%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 85.7% 97.3%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 142.4 71.8% 29.2%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @keyframes scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } .testimonial-scroll { animation: scroll linear infinite; } .testimonial-scroll:hover { animation-play-state: paused; } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/page.tsx" import { HeroSection } from "@/components/hero-section" import { DashboardPreview } from "@/components/dashboard-preview" import { FeaturesSection } from "@/components/features-section" import { NextGenSection } from "@/components/next-gen-section" import { PersonalOsSection } from "@/components/personal-os-section" import { StatsSection } from "@/components/stats-section" import { TestimonialsSection } from "@/components/testimonials-section" import { FaqSection } from "@/components/faq-section" import { CtaSection } from "@/components/cta-section" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/navbar.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" export function Navbar() { return (

SaaS

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" export function HeroSection() { return (

Public beta announcement 2.0

Your revolutionary
Next.js SaaS

This is a starter application that was developed, is well documented and ready to use for your SaaS.

) } [V0_FILE]typescriptreact:file="components/dashboard-preview.tsx" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent } from "@/components/ui/card" import { CuboidIcon as Cube } from "lucide-react" export function DashboardPreview() { return (

Tab 1 Tab 2 Tab 3 Tab 4 Tab 5

) } [V0_FILE]typescriptreact:file="components/features-section.tsx" import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card" export function FeaturesSection() { return (

Attention Grabbing Title

) } function FeatureCard({ number, title, description }: { number: number; title: string; description: string }) { return ( {number} {title}

{description}

) } [V0_FILE]typescriptreact:file="components/next-gen-section.tsx" import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { LineChart, Users, Activity } from "lucide-react" export function NextGenSection() { return (

The next-gen SaaS

Access to the greatest Next.js builder, scalable and gives you confidence to build your next feature. Everything from A to Z is well documented and thoughtfully implemented.

Customers

$1,452

{Array.from({ length: 6 }).map((_, i) => ( U{i + 1} ))}

Pipeline Analytics

{Array.from({ length: 20 }).map((_, i) => { const height = 20 + Math.random() * 80 return (

) })}

Campaigns

Campaign data visualization

Magic Ideas

Goal → Fund

) } function PipelineItem({ label, value }: { label: string; value: number }) { return (

{label} {value}%

) } [V0_FILE]typescriptreact:file="components/personal-os-section.tsx" import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card" import { Check } from "lucide-react" export function PersonalOsSection() { return (

Your personal
operating system

Connect your team with an intuitive platform that brings together your data, applications, and people.

AI Actions

Tell the AI to manage your tasks

Terminal

$ npm install next-saas

Installing packages...

✓ Installation complete

) } function FeatureItem({ title }: { title: string }) { return (

{title}

) } function FeatureCheck({ title }: { title: string }) { return (

{title}

) } [V0_FILE]typescriptreact:file="components/stats-section.tsx" import { Card, CardContent } from "@/components/ui/card" export function StatsSection() { return (

) } function StatCard({ value, label }: { value: string; label: string }) { return (

{value}

{label}

) } [V0_FILE]typescriptreact:file="components/testimonials-section.tsx" "use client" import { useState, useEffect, useRef } from "react" import { Card, CardContent } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Star } from "lucide-react" const SCROLL_SPEED = 30 // seconds to complete one loop export function TestimonialsSection() { const [isHovered, setIsHovered] = useState(false) const containerRef = useRef(null) const [scrollHeight, setScrollHeight] = useState(0) useEffect(() => { if (containerRef.current) { setScrollHeight(containerRef.current.scrollHeight / 2) } }, []) const testimonials = [ { name: "Alex Johnson", role: "Product Manager", quote: "This platform has completely transformed how we manage our projects. Highly recommended!", rating: 5, }, { name: "Sarah Lee", role: "UX Designer", quote: "The efficiency and ease of use are unparalleled. It's been a game-changer for our team.", rating: 5, }, { name: "Michael Chen", role: "Software Engineer", quote: "I'm impressed by the robust features and the responsive support team. Excellent service!", rating: 4, }, { name: "Emily Taylor", role: "Marketing Director", quote: "The analytics capabilities have given us invaluable insights. We've seen a significant boost in our ROI.", rating: 5, }, { name: "David Rodriguez", role: "Startup Founder", quote: "As a startup, this tool has been crucial in helping us scale efficiently. Couldn't be happier!", rating: 5, }, { name: "Lisa Wong", role: "Project Coordinator", quote: "The collaboration features are top-notch. It's made our remote work so much smoother.", rating: 4, }, { name: "James Smith", role: "CTO", quote: "The API integration capabilities are extensive. It fits perfectly into our tech stack.", rating: 5, }, { name: "Anna Kowalski", role: "Customer Success Manager", quote: "Our clients love the intuitive interface. It's helped us improve our customer satisfaction scores.", rating: 5, }, ] return (

What people say

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{testimonials.map((testimonial, i) => ( ))}

) } function TestimonialCard({ name, role, quote, rating, }: { name: string role: string quote: string rating: number }) { return (

{Array.from({ length: 5 }).map((_, i) => ( ))}

{quote}

{name.charAt(0)}

{name}

{role}

) } [V0_FILE]typescriptreact:file="components/faq-section.tsx" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" export function FaqSection() { return (

Frequently Asked Questions

Can't find the answer you're looking for? Reach out to our customer support team.

) } function FaqItem({ question, answer }: { question: string; answer: string }) { return ( {question} {answer} ) } [V0_FILE]typescriptreact:file="components/cta-section.tsx" import { Button } from "@/components/ui/button" export function CtaSection() { return (

Ready to start?

Join thousands of satisfied users who have transformed their business with our Next.js SaaS platform.

) } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" "use client" import * as React from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" const Accordion = AccordionPrimitive.Root const AccordionItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AccordionItem.displayName = "AccordionItem" const AccordionTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( svg]:rotate-180", className, )} {...props} > {children} )) AccordionTrigger.displayName = "AccordionTrigger" const AccordionContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => (

{children}

)) AccordionContent.displayName = "AccordionContent" export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]json:file="package.json" isFixed="true" isQuickEdit="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-aspect-ratio": "^1.1.1", "@radix-ui/react-avatar": "^1.1.2", "@radix-ui/react-checkbox": "^1.1.3", "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-context-menu": "^2.2.4", "@radix-ui/react-dialog": "^1.1.4", "@radix-ui/react-dropdown-menu": "^2.1.4", "@radix-ui/react-hover-card": "^1.1.4", "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-menubar": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.2.3", "@radix-ui/react-popover": "^1.1.4", "@radix-ui/react-progress": "^1.1.1", "@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-scroll-area": "^1.2.2", "@radix-ui/react-select": "^2.1.4", "@radix-ui/react-separator": "^1.1.1", "@radix-ui/react-slider": "^1.2.2", "@radix-ui/react-slot": "^1.1.1", "@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-toast": "^1.2.4", "@radix-ui/react-toggle": "^1.1.1", "@radix-ui/react-toggle-group": "^1.1.1", "@radix-ui/react-tooltip": "^1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.16", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "8.10.1", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1", "framer-motion": "^10.16.4" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } }

Your revolutionary Next.js SaaS

About

About