Forms

import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { FileText, CreditCard } from "lucide-react";


export default function PdfFormsPortal() {
const forms = [
{ id: 1, title: "Client Intake Form", price: "$25", pdf: "/forms/intake.pdf" },
{ id: 2, title: "Service Agreement", price: "$40", pdf: "/forms/agreement.pdf" },
{ id: 3, title: "Permit Request Form", price: "$15", pdf: "/forms/permit.pdf" },
];


return (
<div className="min-h-screen bg-gray-50 p-6">
<h1 className="text-3xl font-bold mb-6">PDF Forms & Payments Portal</h1>
<p className="mb-8 text-gray-600 max-w-xl">
Select a form below to download, fill out, and securely submit payment online.
</p>


<div className="grid md:grid-cols-3 gap-6">
{forms.map((form) => (
<Card key={form.id} className="rounded-2xl shadow-md">
<CardContent className="p-6 flex flex-col gap-4">
<div className="flex items-center gap-3">
<FileText className="w-6 h-6" />
<h2 className="text-lg font-semibold">{form.title}</h2>
</div>
<p className="text-gray-500">Price: {form.price}</p>


<div className="flex gap-3 mt-2">
<Button asChild variant="outline">
<a href={form.pdf} target="_blank">Download PDF</a>
</Button>
<Button className="flex items-center gap-2">
<CreditCard className="w-4 h-4" /> Pay Now
</Button>
</div>