Initial commit: Cat Sitting Planner with PWA, SQLite, and Webhook Notifications

app/actions/auth.ts

@@ -0,0 +1,25 @@
+"use server"
+
+import { cookies } from "next/headers"
+import prisma from "@/lib/prisma"
+
+export async function verifyPlanPassword(planId: string, password: string) {
+    const plan = await prisma.plan.findUnique({
+        where: { id: planId },
+    })
+
+    if (!plan) return false
+
+    if (plan.password === password) {
+        // Set a simple cookie to authorize this plan
+        (await cookies()).set(`plan_auth_${planId}`, "true", {
+            httpOnly: true,
+            secure: process.env.NODE_ENV === "production",
+            maxAge: 60 * 60 * 24 * 30, // 30 days
+            path: "/",
+        })
+        return true
+    }
+
+    return false
+}

app/actions/booking.ts

@@ -0,0 +1,62 @@
+"use server"
+
+import prisma from "@/lib/prisma"
+import { revalidatePath } from "next/cache"
+import { sendNotification } from "@/lib/notifications"
+
+export async function createBooking(planId: string, date: Date, name: string, type: "SITTER" | "OWNER_HOME" = "SITTER") {
+    // Simple check to ensure no double booking on server side
+    const existing = await prisma.booking.findFirst({
+        where: {
+            planId,
+            date: date,
+        }
+    })
+
+    if (existing) {
+        throw new Error("Day is already booked")
+    }
+
+    const plan = await prisma.plan.findUnique({
+        where: { id: planId }
+    })
+
+    await prisma.booking.create({
+        data: {
+            planId,
+            date,
+            sitterName: name,
+            type
+        }
+    })
+
+    if (plan?.webhookUrl && plan.notifyAll) {
+        const dateStr = date.toLocaleDateString()
+        const message = type === "OWNER_HOME"
+            ? `🏠 OWNER HOME: Marked for ${dateStr}.`
+            : `✅ NEW BOOKING: ${name} is sitting on ${dateStr}.`
+        await sendNotification(plan.webhookUrl, message)
+    }
+
+    revalidatePath(`/dashboard/${planId}`)
+}
+
+export async function deleteBooking(bookingId: number, planId: string) {
+    const booking = await prisma.booking.findUnique({
+        where: { id: bookingId },
+        include: { plan: true }
+    })
+
+    if (!booking) return
+
+    await prisma.booking.delete({
+        where: { id: bookingId }
+    })
+
+    if (booking.plan.webhookUrl) {
+        const dateStr = booking.date.toLocaleDateString()
+        await sendNotification(booking.plan.webhookUrl, `🚨 CANCELLATION: ${booking.sitterName} removed their booking for ${dateStr}.`)
+    }
+
+    revalidatePath(`/dashboard/${planId}`)
+}

app/actions/plan.ts

@@ -0,0 +1,22 @@
+"use server"
+
+import prisma from "@/lib/prisma"
+import { revalidatePath } from "next/cache"
+import { sendNotification } from "@/lib/notifications"
+
+export async function updatePlan(planId: string, data: { instructions?: string; webhookUrl?: string; notifyAll?: boolean }) {
+    const plan = await prisma.plan.update({
+        where: { id: planId },
+        data: {
+            instructions: data.instructions,
+            webhookUrl: data.webhookUrl,
+            notifyAll: data.notifyAll,
+        }
+    })
+
+    if (data.instructions && plan.webhookUrl && plan.notifyAll) {
+        await sendNotification(plan.webhookUrl, `📝 UPDATED: Cat instructions have been modified.`)
+    }
+
+    revalidatePath(`/dashboard/${planId}`)
+}

app/api/plan/[planId]/ics/route.ts

@@ -0,0 +1,50 @@
+import prisma from "@/lib/prisma"
+import { NextResponse } from "next/server"
+
+export async function GET(
+    request: Request,
+    { params }: { params: Promise<{ planId: string }> }
+) {
+    const { planId } = await params
+    const plan = await prisma.plan.findUnique({
+        where: { id: planId },
+        include: { bookings: true }
+    })
+
+    if (!plan) {
+        return new NextResponse("Plan not found", { status: 404 })
+    }
+
+    let icsContent = "BEGIN:VCALENDAR\nVERSION:2.0\nPRODID:-//Cat Sitting Planner//EN\n"
+
+    for (const booking of plan.bookings) {
+        if (booking.type === "OWNER_HOME") continue; // Don't put owner home days in calendar? Or maybe do?
+
+        const date = new Date(booking.date)
+        const dateStr = date.toISOString().replace(/-|:|\.\d\d\d/g, "").slice(0, 8)
+
+        icsContent += "BEGIN:VEVENT\n"
+        icsContent += `DTSTART;VALUE=DATE:${dateStr}\n`
+        icsContent += `DTEND;VALUE=DATE:${dateStr}\n` // Single day event usually ends next day or same day? Calendar usually expects Start and End. For all day: DTSTART:YYYYMMDD, DTEND:YYYYMMDD+1
+
+        // Calculate next day for DTEND
+        const nextDate = new Date(date)
+        nextDate.setDate(date.getDate() + 1)
+        const nextDateStr = nextDate.toISOString().replace(/-|:|\.\d\d\d/g, "").slice(0, 8)
+
+        icsContent = icsContent.replace(`DTEND;VALUE=DATE:${dateStr}\n`, `DTEND;VALUE=DATE:${nextDateStr}\n`)
+
+        icsContent += `SUMMARY:Cat Sitting: ${booking.sitterName}\n`
+        icsContent += `DESCRIPTION:Cat sitting for plan ${plan.id}\n`
+        icsContent += "END:VEVENT\n"
+    }
+
+    icsContent += "END:VCALENDAR"
+
+    return new NextResponse(icsContent, {
+        headers: {
+            "Content-Type": "text/calendar",
+            "Content-Disposition": `attachment; filename="cat-sitting-${plan.startDate.toISOString().slice(0, 10)}.ics"`
+        }
+    })
+}

app/api/plan/route.ts

@@ -0,0 +1,27 @@
+import { NextResponse } from 'next/server';
+import prisma from '@/lib/prisma';
+
+export async function POST(req: Request) {
+    try {
+        const body = await req.json();
+        const { startDate, endDate, password, instructions } = body;
+
+        if (!startDate || !endDate || !password) {
+            return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
+        }
+
+        const plan = await prisma.plan.create({
+            data: {
+                startDate: new Date(startDate),
+                endDate: new Date(endDate),
+                password,
+                instructions,
+            },
+        });
+
+        return NextResponse.json({ planId: plan.id });
+    } catch (error) {
+        console.error('Error creating plan:', error);
+        return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+    }
+}

app/dashboard/[planId]/_components/plan-dashboard.tsx

@@ -0,0 +1,240 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { format, eachDayOfInterval, isSameDay } from "date-fns"
+import { CalendarIcon, User, Home, X, Info } from "lucide-react"
+import { toast } from "sonner"
+
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { createBooking, deleteBooking } from "@/app/actions/booking"
+import { PlanSettings } from "@/components/plan-settings"
+
+type Booking = {
+    id: number
+    date: Date
+    sitterName: string | null
+    type: string
+}
+
+type Plan = {
+    id: string
+    startDate: Date
+    endDate: Date
+    instructions: string | null
+    webhookUrl: string | null
+    notifyAll: boolean
+    bookings: Booking[]
+}
+
+export function PlanDashboard({ plan }: { plan: Plan }) {
+    const [selectedDate, setSelectedDate] = useState<Date | null>(null)
+    const [sitterName, setSitterName] = useState("")
+    const [bookingType, setBookingType] = useState<"SITTER" | "OWNER_HOME">("SITTER")
+    const [isDialogOpen, setIsDialogOpen] = useState(false)
+    const [isSubmitting, setIsSubmitting] = useState(false)
+
+    // Load saved name from localStorage
+    useEffect(() => {
+        const savedName = localStorage.getItem("sitter_name")
+        if (savedName) setSitterName(savedName)
+    }, [])
+
+    // Generate all days
+    const days = eachDayOfInterval({
+        start: new Date(plan.startDate),
+        end: new Date(plan.endDate),
+    })
+
+    const handleBook = async () => {
+        if (!selectedDate) return
+        if (bookingType === "SITTER" && !sitterName.trim()) {
+            toast.error("Please enter your name")
+            return
+        }
+
+        setIsSubmitting(true)
+        try {
+            await createBooking(plan.id, selectedDate, bookingType === "SITTER" ? sitterName : "Owner", bookingType)
+
+            // Save name to localStorage if it's a sitter booking
+            if (bookingType === "SITTER") {
+                localStorage.setItem("sitter_name", sitterName)
+            }
+
+            toast.success("Spot booked!")
+            setIsDialogOpen(false)
+            // We keep the sitterName in state for the next booking
+        } catch (error) {
+            toast.error("Failed to book spot. Maybe it was just taken?")
+        } finally {
+            setIsSubmitting(false)
+        }
+    }
+
+    const handleCancel = async (bookingId: number) => {
+        // Optimistic UI could stay here, but relying on revalidatePath is safer for simple apps
+        if (!confirm("Are you sure you want to remove this entry?")) return
+
+        try {
+            await deleteBooking(bookingId, plan.id)
+            toast.success("Entry removed")
+        } catch {
+            toast.error("Failed to remove entry")
+        }
+    }
+
+    return (
+        <div className="space-y-4">
+            <div className="flex justify-between items-center bg-muted/50 p-4 rounded-lg">
+                <div className="flex items-center gap-2">
+                    <h2 className="text-lg font-semibold">Overview</h2>
+                    {plan.instructions && (
+                        <Dialog>
+                            <DialogTrigger asChild>
+                                <Button variant="ghost" size="sm" className="gap-2">
+                                    <Info className="w-4 h-4" />
+                                    Instructions
+                                </Button>
+                            </DialogTrigger>
+                            <DialogContent>
+                                <DialogHeader>
+                                    <DialogTitle>Cat Care Instructions</DialogTitle>
+                                </DialogHeader>
+                                <div className="whitespace-pre-wrap">{plan.instructions}</div>
+                            </DialogContent>
+                        </Dialog>
+                    )}
+                </div>
+                <div className="flex gap-2">
+                    <Button variant="outline" size="sm" asChild>
+                        <a href={`/api/plan/${plan.id}/ics`} target="_blank" rel="noopener noreferrer">
+                            <CalendarIcon className="w-4 h-4 mr-2" />
+                            Export
+                        </a>
+                    </Button>
+                    <PlanSettings
+                        planId={plan.id}
+                        initialWebhookUrl={plan.webhookUrl}
+                        initialInstructions={plan.instructions}
+                        initialNotifyAll={plan.notifyAll}
+                    />
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {days.map((day) => {
+                    const booking = plan.bookings.find((b) => isSameDay(new Date(b.date), day))
+                    const isOwnerHome = booking?.type === "OWNER_HOME"
+
+                    return (
+                        <div
+                            key={day.toISOString()}
+                            className={`p-4 border rounded-lg flex flex-col justify-between transition-colors ${booking
+                                ? isOwnerHome
+                                    ? "bg-blue-50 dark:bg-blue-900/20 border-blue-200"
+                                    : "bg-green-50 dark:bg-green-900/20 border-green-200"
+                                : "bg-card hover:bg-accent/50"
+                                }`}
+                        >
+                            <div className="flex justify-between items-start mb-2">
+                                <div className="font-semibold flex items-center gap-2">
+                                    <CalendarIcon className="w-4 h-4 opacity-70" />
+                                    {format(day, "EEEE, MMMM do")}
+                                </div>
+                                {booking && (
+                                    <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        className="h-6 w-6 -mr-2 -mt-2 opacity-50 hover:opacity-100 text-destructive"
+                                        onClick={() => handleCancel(booking.id)}
+                                    >
+                                        <X className="w-4 h-4" />
+                                        <span className="sr-only">Remove</span>
+                                    </Button>
+                                )}
+                            </div>
+
+                            {booking ? (
+                                <div className="flex items-center gap-2">
+                                    {isOwnerHome ? (
+                                        <>
+                                            <Home className="w-5 h-5 text-blue-500" />
+                                            <span className="font-medium text-blue-700 dark:text-blue-300">Owner Home</span>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <User className="w-5 h-5 text-green-600" />
+                                            <span className="font-medium text-green-700 dark:text-green-300">{booking.sitterName}</span>
+                                        </>
+                                    )}
+                                </div>
+                            ) : (
+                                <Dialog open={isDialogOpen && isSameDay(selectedDate!, day)} onOpenChange={(open: boolean) => {
+                                    setIsDialogOpen(open)
+                                    if (open) setSelectedDate(day)
+                                    else setSelectedDate(null)
+                                }}>
+                                    <DialogTrigger asChild>
+                                        <Button variant="outline" className="w-full dashed border-2">I'll do it!</Button>
+                                    </DialogTrigger>
+                                    <DialogContent>
+                                        <DialogHeader>
+                                            <DialogTitle>Book {format(day, "MMMM do")}</DialogTitle>
+                                            <DialogDescription>
+                                                Who is taking care of the cats?
+                                            </DialogDescription>
+                                        </DialogHeader>
+
+                                        <div className="grid gap-4 py-4">
+                                            <RadioGroup value={bookingType} onValueChange={(v: any) => setBookingType(v)} className="flex gap-4">
+                                                <div className="flex items-center space-x-2">
+                                                    <RadioGroupItem value="SITTER" id="r1" />
+                                                    <Label htmlFor="r1">I am Sitting</Label>
+                                                </div>
+                                                <div className="flex items-center space-x-2">
+                                                    <RadioGroupItem value="OWNER_HOME" id="r2" />
+                                                    <Label htmlFor="r2">Owner is Home</Label>
+                                                </div>
+                                            </RadioGroup>
+
+                                            {bookingType === "SITTER" && (
+                                                <div className="grid gap-2">
+                                                    <Label htmlFor="name">Name</Label>
+                                                    <Input
+                                                        id="name"
+                                                        value={sitterName}
+                                                        onChange={(e) => setSitterName(e.target.value)}
+                                                        placeholder="Your Name"
+                                                        autoFocus
+                                                    />
+                                                </div>
+                                            )}
+                                        </div>
+
+                                        <DialogFooter>
+                                            <Button onClick={handleBook} disabled={isSubmitting}>
+                                                {isSubmitting ? "Saving..." : "Confirm Booking"}
+                                            </Button>
+                                        </DialogFooter>
+                                    </DialogContent>
+                                </Dialog>
+                            )}
+                        </div>
+                    )
+                })}
+            </div>
+        </div>
+    )
+}

app/dashboard/[planId]/page.tsx

@@ -0,0 +1,51 @@
+import { notFound } from "next/navigation"
+import { cookies } from "next/headers"
+import prisma from "@/lib/prisma"
+import { PlanLoginForm } from "@/components/plan-login-form"
+import { Toaster } from "@/components/ui/sonner"
+import { PlanDashboard } from "./_components/plan-dashboard"
+
+export default async function DashboardPage({ params }: { params: Promise<{ planId: string }> }) {
+    const { planId } = await params
+    const plan = await prisma.plan.findUnique({
+        where: { id: planId },
+        include: { bookings: true },
+    })
+
+    if (!plan) {
+        notFound()
+    }
+
+    const cookieStore = await cookies()
+    const isAuthenticated = cookieStore.get(`plan_auth_${plan.id}`)?.value === "true"
+
+    if (!isAuthenticated) {
+        return (
+            <main className="flex min-h-screen flex-col items-center p-4">
+                <PlanLoginForm planId={plan.id} />
+            </main>
+        )
+    }
+
+    return (
+        <main className="flex min-h-screen flex-col items-center p-4">
+            <div className="w-full max-w-4xl space-y-6">
+                <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+                    <div>
+                        <h1 className="text-2xl font-bold">Cat Sitting Plan</h1>
+                        <p className="text-muted-foreground text-sm">
+                            {plan.startDate.toLocaleDateString()} - {plan.endDate.toLocaleDateString()}
+                        </p>
+                    </div>
+                    <div className="text-sm bg-muted px-3 py-1 rounded-md">
+                        Group ID: <span className="font-mono font-bold">{plan.id}</span>
+                    </div>
+                </div>
+
+                <div className="p-4 border rounded-lg bg-card text-card-foreground shadow-sm">
+                    <PlanDashboard plan={plan} />
+                </div>
+            </div>
+        </main>
+    )
+}

app/globals.css

@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Toaster } from "@/components/ui/sonner";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+        <Toaster />
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,26 @@
+import { CreatePlanForm } from "@/components/create-plan-form";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-4 bg-muted/20">
+      <div className="w-full max-w-md space-y-4">
+        <div className="text-center space-y-2">
+          <h1 className="text-3xl font-bold tracking-tighter">Cat Sitting Planner</h1>
+          <p className="text-muted-foreground">Coordinate care for your furry friends while you're away.</p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Create a New Plan</CardTitle>
+            <CardDescription>Select your travel dates and set a group password.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CreatePlanForm />
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  );
+}
+