[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import Link from "next/link" import { ChevronRight, Check, ArrowRight, Sparkles } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" export default function Home() { return (

Acme Inc

Transform your workflow today

Transform Your Workflow with Our Powerful Platform

Streamline your processes, boost productivity, and achieve better results with our all-in-one solution.

No credit card required

14-day free trial

Dashboard Preview

Your data visualized beautifully

Features

Everything You Need in One Place

Our platform offers a comprehensive suite of tools designed to help you succeed.

{features.map((feature, index) => (

{feature.icon}

{feature.title} {feature.description}

))}

How It Works

Simple Process, Powerful Results

Our streamlined workflow makes it easy to get started and see results quickly.

{steps.map((step, index) => (

{index + 1}

{step.title}

{step.description}

))}

Process Visualization

See how everything connects

Testimonials

Trusted by Thousands of Businesses

Don't just take our word for it. See what our customers have to say.

{testimonials.map((testimonial, index) => (

{testimonial.name} {testimonial.role}

{testimonial.content}

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

))}

Pricing

Simple, Transparent Pricing

Choose the plan that's right for you and get started today.

{pricingPlans.map((plan, index) => ( {plan.featured && (

Popular

)} {plan.name} {plan.description}

${plan.price} /month

{feature}

))}

FAQ

Frequently Asked Questions

Find answers to common questions about our platform.

{faqs.map((faq, index) => ( {faq.question} {faq.answer} ))}

Ready to Get Started?

Join thousands of satisfied customers and transform your workflow today.

) } const features = [ { title: "Intuitive Dashboard", description: "Get a clear overview of your performance with our easy-to-use dashboard.", icon: ( ), }, { title: "Advanced Analytics", description: "Gain valuable insights with detailed analytics and reporting tools.", icon: ( ), }, { title: "Team Collaboration", description: "Work seamlessly with your team members in real-time.", icon: ( ), }, { title: "Automated Workflows", description: "Save time with automated processes and customizable workflows.", icon: ( ), }, { title: "Secure Data Storage", description: "Keep your data safe with our enterprise-grade security measures.", icon: ( ), }, { title: "Mobile Access", description: "Access your data and tools from anywhere with our mobile-friendly platform.", icon: ( ), }, ] const steps = [ { title: "Create an Account", description: "Sign up for free and set up your profile in minutes.", }, { title: "Import Your Data", description: "Easily import your existing data or start fresh.", }, { title: "Customize Your Workspace", description: "Tailor the platform to fit your specific needs and preferences.", }, { title: "Start Seeing Results", description: "Begin using the tools and watch your productivity soar.", }, ] const testimonials = [ { name: "Sarah Johnson", role: "Marketing Director", content: "This platform has completely transformed how our team collaborates. We've seen a 40% increase in productivity since implementing it.", rating: 5, }, { name: "Michael Chen", role: "Product Manager", content: "The analytics tools have given us insights we never had before. It's like having a data scientist on the team without the extra cost.", rating: 5, }, { name: "Emily Rodriguez", role: "Small Business Owner", content: "As a small business, we needed something affordable yet powerful. This platform delivers exactly what we need without breaking the bank.", rating: 4, }, ] const pricingPlans = [ { name: "Starter", description: "Perfect for individuals and small projects", price: 0, featured: false, features: ["Basic dashboard access", "Up to 5 projects", "1GB storage", "Email support"], }, { name: "Professional", description: "Ideal for growing teams and businesses", price: 29, featured: true, features: [ "Advanced analytics", "Unlimited projects", "10GB storage", "Priority support", "Team collaboration tools", ], }, { name: "Enterprise", description: "For large organizations with complex needs", price: 99, featured: false, features: [ "Custom dashboard", "Unlimited everything", "100GB storage", "24/7 dedicated support", "Advanced security features", "API access", ], }, ] const faqs = [ { question: "How do I get started?", answer: "Getting started is easy! Simply sign up for a free account, and you'll be guided through the setup process. You can be up and running in just a few minutes.", }, { question: "Can I import data from other platforms?", answer: "Yes, we offer seamless integration with most popular platforms. You can import your data directly or use our API to connect with your existing tools.", }, { question: "Is my data secure?", answer: "Absolutely. We use industry-leading encryption and security measures to ensure your data is always protected. We also offer regular backups and disaster recovery options.", }, { question: "Do you offer a free trial?", answer: "Yes, we offer a 14-day free trial of our Professional plan, no credit card required. You can also start with our free Starter plan and upgrade whenever you're ready.", }, { question: "What kind of support do you offer?", answer: "We provide email support for all plans, with priority support for Professional users and dedicated 24/7 support for Enterprise customers. We also have an extensive knowledge base and community forum.", }, ] [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Modern Landing Page", description: "A bright, fun, and professional landing page built with Next.js, Tailwind CSS, and shadcn/ui", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 262 83% 58%; --primary-foreground: 210 40% 98%; --secondary: 346 77% 60%; --secondary-foreground: 210 40% 98%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 262 83% 58%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 263 75% 63%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 346 77% 60%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 263 75% 63%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="tailwind.config.ts" isEdit="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", 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")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isEdit="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ThemeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) }