[V0_FILE]typescriptreact:file="components/ui/use-toast.tsx" isMerged="true" // This is a simplified version just to make the toast work // In a real project, you'd use the full shadcn/ui toast component import { toast as sonnerToast } from "sonner" type ToastProps = { title?: string description?: string } export function toast({ title, description }: ToastProps) { return sonnerToast(title, { description, }) } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isFixed="true" isQuickEdit="true" isMerged="true" // This is a simplified version just to make the toast work // In a real project, you'd use the full shadcn/ui toast component import { Toaster as SonnerToaster } from "sonner" export function Toaster() { return } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @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))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 0%; --foreground: 0 0% 98%; --card: 0 0% 3%; --card-foreground: 0 0% 98%; --popover: 0 0% 3%; --popover-foreground: 0 0% 98%; --primary: 0 72.2% 50.6%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 9%; --accent-foreground: 0 0% 98%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 72.2% 50.6%; --radius: 0.5rem; } .dark { --background: 0 0% 0%; --foreground: 0 0% 98%; --card: 0 0% 3%; --card-foreground: 0 0% 98%; --popover: 0 0% 3%; --popover-foreground: 0 0% 98%; --primary: 0 72.2% 50.6%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 72.2% 50.6%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @keyframes fall { 0% { transform: translateY(-20px); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0.7; } } .animate-fall { animation-name: fall; animation-timing-function: linear; } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { Pizza } from "lucide-react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { toast } from "@/components/ui/use-toast" import { Toaster } from "@/components/ui/toaster" import CliInterface from "@/components/cli-interface" import PizzaRain from "@/components/pizza-rain" export default function Home() { const router = useRouter() const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) toast({ title: "Order Placed!", description: "Your pizza order has been received and will be ready for your meetup.", }) setIsSubmitting(false) // Redirect to success page after a short delay setTimeout(() => { router.push("/success") }, 2000) } return (

Pizza Paradise

Pizza Paradise CLI

Order your perfect pizza for your next meetup with our command-line interface.

Hint: Type help to see available commands.

Start your order with order pizza or type{" "} form to scroll to the form below.

Prefer a Form?

If you prefer a traditional form interface, you can use the form below to order your pizza.

Pizza Order Form

Fill out this form to order your perfect pizza for your meetup.

Pizza Details

Size

Crust Type

Regular

Thin

Stuffed

Gluten Free

Toppings (Select up to 5)

Pepperoni

Mushrooms

Onions

Sausage

Bacon

Extra Cheese

Green Peppers

Pineapple

Delivery Details

Name

Phone

Delivery Address

</div>

<div className="space-y-2">
                      <Label htmlFor="meetup-details">Meetup Details (Optional)</Label>
                      <Textarea
                        id="meetup-details"
                        placeholder="Tell us about your meetup so we can prepare accordingly"
                      />
                    </div>
                  </div>

<Button type="submit" className="w-full bg-red-600 hover:bg-red-700" disabled={isSubmitting}>
                    {isSubmitting ? "Placing Order..." : "Place Pizza Order"}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </section>
      </main>

<footer className="w-full border-t border-gray-800 py-6 md:py-0">
        <div className="container flex flex-col items-center justify-between gap-4 md:h-16 md:flex-row">
          <p className="text-sm text-muted-foreground">© 2025 Pizza Paradise. All rights reserved.</p>
          <div className="flex gap-4">
            <a href="#" className="text-sm text-muted-foreground hover:text-primary">
              Terms
            </a>
            <a href="#" className="text-sm text-muted-foreground hover:text-primary">
              Privacy
            </a>
          </div>
        </div>
      </footer>

<Toaster />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/cli-interface.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Terminal } from "lucide-react"
import { useRouter } from "next/navigation"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { toast } from "@/components/ui/use-toast"

type CommandHistory = {
  command: string
  output: string
  isError?: boolean
}

export default function CliInterface() {
  const router = useRouter()
  const [input, setInput] = useState("")
  const [history, setHistory] = useState<CommandHistory[]>([
    {
      command: "",
      output:
        "🍕 Welcome to Pizza Paradise CLI v1.0.0\n" +
        "Type 'help' to see available commands.\n" +
        "Start your order with 'order pizza'.",
    },
  ])
  const [orderData, setOrderData] = useState({
    size: "",
    crust: "",
    toppings: [] as string[],
    name: "",
    address: "",
    phone: "",
    email: "",
  })
  const [orderStep, setOrderStep] = useState("")
  const terminalRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)

// Auto-scroll to bottom of terminal
  useEffect(() => {
    if (terminalRef.current) {
      terminalRef.current.scrollTop = terminalRef.current.scrollHeight
    }
  }, [history])

// Auto-focus input
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus()
    }
  }, [])

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!input.trim()) return

processCommand(input)
    setInput("")
  }

const processCommand = (cmd: string) => {
    const command = cmd.trim().toLowerCase()
    let output = ""
    let isError = false

// Add command to history
    const newHistory = [...history, { command, output: "", isError: false }]

// Process based on current order step
    if (orderStep) {
      switch (orderStep) {
        case "size":
          if (["small", "medium", "large", "xl"].includes(command)) {
            setOrderData({ ...orderData, size: command })
            output = `Size set to ${command}.\nPlease select a crust type: regular, thin, stuffed, or gluten-free`
            setOrderStep("crust")
          } else {
            output = "Invalid size. Please choose: small, medium, large, or xl"
            isError = true
          }
          break

case "crust":
          if (["regular", "thin", "stuffed", "gluten-free"].includes(command)) {
            setOrderData({ ...orderData, crust: command })
            output = `Crust set to ${command}.\nPlease enter toppings separated by commas (max 5), or type 'none'`
            setOrderStep("toppings")
          } else {
            output = "Invalid crust type. Please choose: regular, thin, stuffed, or gluten-free"
            isError = true
          }
          break

case "toppings":
          if (command !== "none") {
            const toppings = command
              .split(",")
              .map((t) => t.trim())
              .filter(Boolean)
            if (toppings.length > 5) {
              output = "Too many toppings! Maximum is 5. Please try again."
              isError = true
            } else {
              setOrderData({ ...orderData, toppings })
              output = `Toppings set: ${toppings.join(", ") || "none"}.\nPlease enter your name`
              setOrderStep("name")
            }
          } else {
            setOrderData({ ...orderData, toppings: [] })
            output = "No toppings selected.\nPlease enter your name"
            setOrderStep("name")
          }
          break

case "name":
          setOrderData({ ...orderData, name: command })
          output = `Name set to ${command}.\nPlease enter your delivery address`
          setOrderStep("address")
          break

case "address":
          setOrderData({ ...orderData, address: command })
          output = `Address set to ${command}.\nPlease enter your phone number`
          setOrderStep("phone")
          break

case "phone":
          setOrderData({ ...orderData, phone: command })
          output = `Phone set to ${command}.\nPlease enter your email`
          setOrderStep("email")
          break

case "email":
          if (command.includes("@") && command.includes(".")) {
            setOrderData({ ...orderData, email: command })
            output =
              `Email set to ${command}.\n\nOrder Summary:\n` +
              `Size: ${orderData.size}\n` +
              `Crust: ${orderData.crust}\n` +
              `Toppings: ${orderData.toppings.length ? orderData.toppings.join(", ") : "none"}\n` +
              `Name: ${orderData.name}\n` +
              `Address: ${orderData.address}\n` +
              `Phone: ${orderData.phone}\n` +
              `Email: ${command}\n\n` +
              `Type 'confirm' to place your order or 'cancel' to start over.`
            setOrderStep("confirm")
          } else {
            output = "Please enter a valid email address"
            isError = true
          }
          break

case "confirm":
          if (command === "confirm") {
            output = "🎉 Order confirmed! Processing your pizza order...\n\nYour pizza will be ready for your meetup!"

// Show toast notification
            toast({
              title: "Order Placed!",
              description: "Your pizza order has been received and will be ready for your meetup.",
            })

// Reset order state
            setOrderStep("")

// Redirect to success page after a delay
            setTimeout(() => {
              router.push("/success")
            }, 3000)
          } else if (command === "cancel") {
            output = "Order cancelled. Type 'order pizza' to start a new order."
            setOrderStep("")
          } else {
            output = "Please type 'confirm' to place your order or 'cancel' to start over."
            isError = true
          }
          break
      }
    } else {
      // Process regular commands
      switch (command) {
        case "help":
          output =
            "Available commands:\n" +
            "- help: Show this help message\n" +
            "- order pizza: Start a new pizza order\n" +
            "- clear: Clear the terminal\n" +
            "- form: Scroll to the form ordering section\n" +
            "- about: Learn about Pizza Paradise"
          break

case "order pizza":
          output = "Starting new pizza order...\n\nPlease select a size: small, medium, large, or xl"
          setOrderStep("size")
          break

case "clear":
          setHistory([
            {
              command: "",
              output: "🍕 Terminal cleared. Type 'help' to see available commands.",
            },
          ])
          return

case "form":
          output = "Scrolling to form ordering section..."
          setTimeout(() => {
            document.getElementById("form-section")?.scrollIntoView({ behavior: "smooth" })
          }, 500)
          break

case "about":
          output =
            "🍕 Pizza Paradise 🍕\n\n" +
            "We make the best pizzas for your meetups and events!\n" +
            "Our pizzas are made with fresh ingredients and baked to perfection.\n" +
            "Order now and experience pizza paradise!"
          break

default:
          output = `Command not recognized: ${command}\nType 'help' to see available commands.`
          isError = true
      }
    }

// Update the last command's output
    newHistory[newHistory.length - 1].output = output
    newHistory[newHistory.length - 1].isError = isError

setHistory(newHistory)
  }

return (
    <Card className="border-2 border-gray-800 bg-black text-white">
      <CardHeader className="bg-gray-900 border-b border-gray-800">
        <div className="flex items-center">
          <Terminal className="h-5 w-5 text-green-400 mr-2" />
          <CardTitle className="text-green-400">Pizza Paradise CLI</CardTitle>
        </div>
        <CardDescription className="text-gray-400">Order your pizza using command-line interface</CardDescription>
      </CardHeader>
      <CardContent className="p-0">
        <div
          ref={terminalRef}
          className="font-mono text-sm p-4 h-[400px] overflow-y-auto bg-black"
          onClick={() => inputRef.current?.focus()}
        >
          {history.map((item, index) => (
            <div key={index} className="mb-2">
              {item.command && (
                <div className="flex">
                  <span className="text-green-400 mr-2">$</span>
                  <span>{item.command}</span>
                </div>
              )}
              <div className={`ml-4 whitespace-pre-wrap ${item.isError ? "text-red-400" : "text-gray-300"}`}>
                {item.output}
              </div>
            </div>
          ))}
          <form onSubmit={handleSubmit} className="flex items-center mt-2">
            <span className="text-green-400 mr-2">$</span>
            <Input
              ref={inputRef}
              type="text"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              className="flex-1 bg-transparent border-none text-white focus-visible:ring-0 focus-visible:ring-offset-0 p-0 h-6"
              autoComplete="off"
            />
          </form>
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/pizza-rain.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useEffect, useState } from "react"
import { Pizza } from "lucide-react"

type PizzaProps = {
  left: number
  delay: number
  size: number
  rotation: number
  duration: number
}

export default function PizzaRain() {
  const [pizzas, setPizzas] = useState<PizzaProps[]>([])

useEffect(() => {
    // Create 20 pizzas with random properties
    const newPizzas = Array.from({ length: 20 }, (_, i) => ({
      left: Math.random() * 100, // random position from 0-100%
      delay: Math.random() * 5, // random delay 0-5s
      size: Math.random() * 20 + 20, // random size 20-40px
      rotation: Math.random() * 360, // random rotation 0-360deg
      duration: Math.random() * 5 + 5, // random duration 5-10s
    }))

setPizzas(newPizzas)
  }, [])

return (
    <div className="fixed inset-0 pointer-events-none z-10 overflow-hidden">
      {pizzas.map((pizza, index) => (
        <div
          key={index}
          className="absolute animate-fall"
          style={{
            left: `${pizza.left}%`,
            top: `-${pizza.size}px`,
            animationDelay: `${pizza.delay}s`,
            animationDuration: `${pizza.duration}s`,
            animationIterationCount: "infinite",
          }}
        >
          <Pizza
            size={pizza.size}
            className="text-red-500 animate-spin"
            style={{
              animationDuration: `${pizza.duration * 2}s`,
              transform: `rotate(${pizza.rotation}deg)`,
            }}
            fill="#FF6B6B"
          />
        </div>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/success/page.tsx" isEdit="true" isQuickEdit="true"
import Link from "next/link"
import { ArrowLeft, CheckCircle } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function Success() {
  return (
    <div className="container max-w-md py-12">
      <div className="flex flex-col items-center justify-center text-center">
        <div className="flex h-20 w-20 items-center justify-center rounded-full bg-green-900 mb-6">
          <CheckCircle className="h-10 w-10 text-green-400" />
        </div>
        <h1 className="text-3xl font-bold mb-2">Order Successful!</h1>
        <p className="text-muted-foreground mb-8">
          Your pizza order has been received and will be ready for your meetup. We've sent a confirmation to your email.
        </p>
        <div className="flex flex-col gap-4 w-full max-w-xs">
          <Link href="/">
            <Button className="w-full">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Return to Home
            </Button>
          </Link>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { Toaster } from "sonner"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Pizza Paradise",
  description: "Order your perfect pizza for your next meetup",
}

// Add dark class to the html element to ensure dark mode is applied
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className="dark">
      <body className={inter.className}>
        {children}
        <Toaster />
      </body>
    </html>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This