[V0_FILE]typescriptreact:file="components/payment-modal.tsx" "use client" import { useState } from "react" import Image from "next/image" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { cn } from "@/lib/utils" interface PaymentMethod { id: string name: string logo: string description: string } const paymentMethods: PaymentMethod[] = [ { id: "paypal", name: "PayPal", logo: "/placeholder.svg?height=40&width=120", description: "Pay with your PayPal account", }, { id: "stripe", name: "Stripe", logo: "/placeholder.svg?height=40&width=120", description: "Pay with credit card", }, { id: "mollie", name: "Mollie", logo: "/placeholder.svg?height=40&width=120", description: "Pay with European payment methods", }, ] interface PaymentModalProps { isOpen: boolean onClose: () => void plan: { name: string price: number period: string } } export function PaymentModal({ isOpen, onClose, plan }: PaymentModalProps) { const [selectedMethod, setSelectedMethod] = useState("stripe") const [isLoading, setIsLoading] = useState(false) const handleSubmit = async () => { setIsLoading(true) // Simulated payment processing await new Promise((resolve) => setTimeout(resolve, 1500)) setIsLoading(false) onClose() } return ( ) } [V0_FILE]typescriptreact:file="components/pricing-card.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Check } from "lucide-react" import { PaymentModal } from "./payment-modal" interface PricingCardProps { name: string price: number period: string features: string[] featured?: boolean } export function PricingCard({ name, price, period, features, featured }: PricingCardProps) { const [showPaymentModal, setShowPaymentModal] = useState(false) return ( <>

{featured && (

Featured

)}

{name}

€{price} /{period}

{feature}

setShowPaymentModal(false)} plan={{ name, price, period }} /> ) } [V0_FILE]typescriptreact:file="pricing-page.tsx" import { PricingCard } from "@/components/pricing-card" const plans = [ { name: "Starter", price: 15, period: "month", features: ["Up to 10,000 data points per month", "Email support", "Community forum access", "Cancel anytime"], }, { name: "Pro", price: 40, period: "quarter", featured: true, features: [ "Advanced analytics dashboard", "Customizable reports and charts", "Real-time data tracking", "Integration with third-party tools", "Everything in Hobby Plan", ], }, { name: "Premium", price: 120, period: "year", features: [ "Unlimited data storage", "Customizable dashboards", "Advanced data segmentation", "Real-time data processing", "AI-powered insights and recommendations", "Everything in Hobby Plan", "Everything in Pro Plan", ], }, ] export default function PricingPage() { return (

Simple pricing for advanced people

Our pricing is designed for advanced people who need more features and more flexibility.

{plans.map((plan) => ( ))}

) }