[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import type React from "react" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "StreamLine - Simplify Your Workflow", description: "StreamLine is a powerful SaaS platform designed to streamline your business processes and boost productivity.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Header from "./components/Header" import Hero from "./components/Hero" import Features from "./components/Features" import Testimonials from "./components/Testimonials" import Pricing from "./components/Pricing" import CTA from "./components/CTA" import Footer from "./components/Footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/components/Header.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { ThemeToggle } from "@/components/theme-toggle" export default function Header() { return (

StreamLine

) } [V0_FILE]typescriptreact:file="app/components/Hero.tsx" isEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" export default function Hero() { return (

Simplify Your Workflow with StreamLine

Boost productivity and streamline your business processes with our powerful SaaS platform. Designed for teams of all sizes.

{/* Animated background elements */}

) } [V0_FILE]typescriptreact:file="app/components/Features.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { Zap, Layers, Users, TrendingUp } from "lucide-react" import { motion } from "framer-motion" const features = [ { name: "Lightning Fast", description: "Our platform is optimized for speed, ensuring quick load times and responsive interactions.", icon: Zap, }, { name: "Intuitive Interface", description: "A user-friendly interface that's easy to navigate, making your work more efficient.", icon: Layers, }, { name: "Team Collaboration", description: "Seamlessly work together with your team members in real-time.", icon: Users, }, { name: "Advanced Analytics", description: "Gain valuable insights with our powerful analytics and reporting tools.", icon: TrendingUp, }, ] export default function Features() { return (

{/* Add background elements */}

Features Everything you need to streamline your workflow StreamLine offers a comprehensive set of features designed to boost your productivity and simplify your business processes.

{feature.name}: {feature.description}

) } [V0_FILE]typescriptreact:file="app/components/Testimonials.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { motion } from "framer-motion" const testimonials = [ { name: "Sarah Thompson", role: "CEO at TechCorp", image: "/placeholder.svg?height=400&width=400", quote: "StreamLine has revolutionized our workflow. It's intuitive, powerful, and has significantly boosted our team's productivity.", }, { name: "John Davis", role: "Marketing Director at GrowthHub", image: "/placeholder.svg?height=400&width=400", quote: "The analytics features in StreamLine have provided us with invaluable insights. It's been a game-changer for our marketing strategies.", }, { name: "Emily Chen", role: "Product Manager at InnovateCo", image: "/placeholder.svg?height=400&width=400", quote: "The collaboration tools in StreamLine have made remote work seamless for our team. It's an essential part of our daily operations now.", }, ] export default function Testimonials() { return (

{/* Add background elements */}

Trusted by businesses worldwide

Here's what our satisfied customers have to say about StreamLine

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

{testimonial.name}

{testimonial.role}

"{testimonial.quote}"

))}

) } [V0_FILE]typescriptreact:file="app/components/Pricing.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { Check } from "lucide-react" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" const plans = [ { name: "Starter", price: "$29", features: ["5 team members", "Basic analytics", "24/7 support", "10GB storage"], }, { name: "Professional", price: "$99", features: [ "Unlimited team members", "Advanced analytics", "Priority support", "100GB storage", "Custom integrations", ], }, { name: "Enterprise", price: "Custom", features: [ "Unlimited everything", "Dedicated account manager", "Custom feature development", "On-premise deployment option", ], }, ] export default function Pricing() { return (

{/* Add background elements */}

Simple, transparent pricing

Choose the plan that's right for your business

{plans.map((plan, index) => (

{plan.name}

{plan.price}

{plan.name === "Enterprise" ? "Contact us for pricing" : "per month"}

What's included

{feature}

))}

) } [V0_FILE]typescriptreact:file="app/components/CTA.tsx" isEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" export default function CTA() { return (

Ready to streamline your workflow? Start your free trial today. Join thousands of satisfied customers who have transformed their business with StreamLine.

) } [V0_FILE]typescriptreact:file="app/components/Footer.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Facebook, Twitter, Instagram, Linkedin } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="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: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --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: 221.2 83.2% 53.3%; --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: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --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: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom styles for better visibility in light mode */ .bg-primary-light { @apply bg-primary/20 dark:bg-primary/30; } .bg-secondary-light { @apply bg-secondary/20 dark:bg-secondary/30; } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import * as React from "react" 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 ) } [V0_FILE]typescriptreact:file="src/components/Pricing.tsx" isEdit="true" isMerged="true" "use client" import { Check } from "lucide-react" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" const plans = [ { name: "Starter", price: "$29", features: ["5 team members", "Basic analytics", "24/7 support", "10GB storage"], }, { name: "Professional", price: "$99", features: [ "Unlimited team members", "Advanced analytics", "Priority support", "100GB storage", "Custom integrations", ], }, { name: "Enterprise", price: "Custom", features: [ "Unlimited everything", "Dedicated account manager", "Custom feature development", "On-premise deployment option", ], }, ] export default function Pricing() { return (

{/* Add background elements */}

Simple, transparent pricing

Choose the plan that's right for your business

{plans.map((plan, index) => (

{plan.name}

{plan.price}

{plan.name === "Enterprise" ? "Contact us for pricing" : "per month"}

What's included

{feature}

))}

) } [V0_FILE]typescriptreact:file="src/components/CTA.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" export default function CTA() { return (

Ready to streamline your workflow? Start your free trial today. Join thousands of satisfied customers who have transformed their business with StreamLine.

) } [V0_FILE]typescriptreact:file="src/components/theme-toggle.tsx" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" // rest of the code will go here. This is a placeholder. function MyComponent() { return (

) } export default MyComponent [V0_FILE]typescriptreact:file="src/components/Footer.tsx" isMerged="true" import Link from "next/link" import { Facebook, Twitter, Instagram, Linkedin } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="src/app/page.tsx" isEdit="true" import Header from "@/components/Header" import Hero from "@/components/Hero" import Features from "@/components/Features" import Testimonials from "@/components/Testimonials" import Pricing from "@/components/Pricing" import CTA from "@/components/CTA" import Footer from "@/components/Footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="src/app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import type React from "react" // Added import for React const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "StreamLine - Simplify Your Workflow", description: "StreamLine is a powerful SaaS platform designed to streamline your business processes and boost productivity.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="src/components/Header.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { motion, AnimatePresence } from "framer-motion" import { Moon, Sun, Menu, X, ChevronRight } from "lucide-react" import { useTheme } from "next-themes" export default function Header() { const [isMenuOpen, setIsMenuOpen] = useState(false) const [isScrolled, setIsScrolled] = useState(false) const { theme, setTheme } = useTheme() const toggleMenu = () => setIsMenuOpen(!isMenuOpen) useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const menuItems = [ { href: "#features", label: "Features" }, { href: "#testimonials", label: "Testimonials" }, { href: "#pricing", label: "Pricing" }, ] return (

Stream Line Log in Sign up

{isMenuOpen && (

{menuItems.map((item) => ( {item.label} ))}

)}

) } [V0_FILE]typescriptreact:file="src/components/Hero.tsx" isEdit="true" "use client" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" export default function Hero() { return (

Simplify Your Workflow with StreamLine

Boost productivity and streamline your business processes with our powerful SaaS platform. Designed for teams of all sizes.

{/* Animated background elements */}

) } [V0_FILE]typescriptreact:file="src/components/Features.tsx" isEdit="true" "use client" import { Zap, Layers, Users, TrendingUp } from "lucide-react" import { motion } from "framer-motion" const features = [ { name: "Lightning Fast", description: "Our platform is optimized for speed, ensuring quick load times and responsive interactions.", icon: Zap, }, { name: "Intuitive Interface", description: "A user-friendly interface that's easy to navigate, making your work more efficient.", icon: Layers, }, { name: "Team Collaboration", description: "Seamlessly work together with your team members in real-time.", icon: Users, }, { name: "Advanced Analytics", description: "Gain valuable insights with our powerful analytics and reporting tools.", icon: TrendingUp, }, ] export default function Features() { return (

Features Everything you need to streamline your workflow StreamLine offers a comprehensive set of features designed to boost your productivity and simplify your business processes.

{feature.name}: {feature.description}

) } [V0_FILE]typescriptreact:file="src/components/Testimonials.tsx" isEdit="true" "use client" import { motion } from "framer-motion" const testimonials = [ { name: "Sarah Thompson", role: "CEO at TechCorp", image: "/placeholder.svg?height=400&width=400", quote: "StreamLine has revolutionized our workflow. It's intuitive, powerful, and has significantly boosted our team's productivity.", }, { name: "John Davis", role: "Marketing Director at GrowthHub", image: "/placeholder.svg?height=400&width=400", quote: "The analytics features in StreamLine have provided us with invaluable insights. It's been a game-changer for our marketing strategies.", }, { name: "Emily Chen", role: "Product Manager at InnovateCo", image: "/placeholder.svg?height=400&width=400", quote: "The collaboration tools in StreamLine have made remote work seamless for our team. It's an essential part of our daily operations now.", }, ] export default function Testimonials() { return (

Trusted by businesses worldwide

Here's what our satisfied customers have to say about StreamLine

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

{testimonial.name}

{testimonial.role}

"{testimonial.quote}"

))}

) }