From e946e47a84141f863bd689172416e9f9617fbe3d Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:13:02 +0000
Subject: [PATCH] Seed: wedding template (15 files)

---
 src/pages/Rsvp.tsx | 141 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 141 insertions(+)
 create mode 100644 src/pages/Rsvp.tsx

diff --git a/src/pages/Rsvp.tsx b/src/pages/Rsvp.tsx
new file mode 100644
index 0000000..2e6008c
--- /dev/null
+++ b/src/pages/Rsvp.tsx
@@ -0,0 +1,141 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Heart, Send, Calendar } from "lucide-react";
+import { useSaasMutation } from "@/hooks/use-tygarun";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+export default function RsvpPage() {
+  const [attending, setAttending] = useState("yes");
+  const [guests, setGuests] = useState("1");
+  const [dietary, setDietary] = useState("");
+  const { mutate: createLead, loading: sending } = useSaasMutation("crm", "/leads");
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const form = e.currentTarget;
+    const data = new FormData(form);
+    try {
+      await createLead({
+        name: data.get("name"),
+        email: data.get("email"),
+        attending,
+        guests,
+        dietary,
+        song: data.get("song"),
+        message: data.get("message"),
+      });
+      toast.success("Thank you! Your RSVP has been received.", { description: "We cannot wait to celebrate with you!" });
+      form.reset();
+      setAttending("yes");
+      setGuests("1");
+      setDietary("");
+    } catch (err) {
+      toast.error("Could not send your RSVP. Please try again.");
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-stone-950">
+      <Header />
+
+      <section className="pt-32 pb-24 bg-gradient-to-b from-rose-50 to-white dark:from-stone-900 dark:to-stone-950">
+        <div className="mx-auto max-w-xl px-6">
+          <p className="text-rose-400 text-sm uppercase tracking-[0.2em] text-center mb-2">We Would Love to Have You</p>
+          <h1 className="font-serif text-4xl sm:text-5xl text-center text-stone-800 dark:text-white mb-4 animate-fade-up">RSVP</h1>
+          <p className="text-center text-stone-500 dark:text-stone-400 mb-12 text-sm">Please let us know if you can make it. We would be honored to have you celebrate with us.</p>
+
+          <Card className="border-border/50 backdrop-blur-sm bg-card/80 shadow-xl">
+            <CardContent className="pt-8 pb-8">
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div className="space-y-2">
+                  <Label htmlFor="name" className="text-stone-700 dark:text-stone-200">Full Name</Label>
+                  <Input id="name" name="name" required placeholder="Your full name" className="border-rose-200 dark:border-stone-600 focus-visible:ring-rose-400" />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="email" className="text-stone-700 dark:text-stone-200">Email</Label>
+                  <Input id="email" name="email" type="email" required placeholder="your@email.com" className="border-rose-200 dark:border-stone-600 focus-visible:ring-rose-400" />
+                </div>
+
+                <div className="space-y-3">
+                  <Label className="text-stone-700 dark:text-stone-200">Will you be attending?</Label>
+                  <RadioGroup value={attending} onValueChange={setAttending} className="flex gap-6">
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="yes" id="yes" className="border-rose-300 text-rose-400" />
+                      <Label htmlFor="yes" className="text-stone-600 dark:text-stone-300 cursor-pointer">Joyfully Accept</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="no" id="no" className="border-rose-300 text-rose-400" />
+                      <Label htmlFor="no" className="text-stone-600 dark:text-stone-300 cursor-pointer">Regretfully Decline</Label>
+                    </div>
+                  </RadioGroup>
+                </div>
+
+                {attending === "yes" && (
+                  <>
+                    <div className="space-y-2">
+                      <Label className="text-stone-700 dark:text-stone-200">Number of Guests</Label>
+                      <Select value={guests} onValueChange={setGuests}>
+                        <SelectTrigger className="border-rose-200 dark:border-stone-600">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {["1", "2", "3", "4"].map((n) => (
+                            <SelectItem key={n} value={n}>{n} {Number(n) === 1 ? "Guest" : "Guests"}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label className="text-stone-700 dark:text-stone-200">Dietary Requirements</Label>
+                      <Select value={dietary} onValueChange={setDietary}>
+                        <SelectTrigger className="border-rose-200 dark:border-stone-600">
+                          <SelectValue placeholder="Select if applicable" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {["None", "Vegetarian", "Vegan", "Gluten-Free", "Halal", "Kosher", "Other"].map((d) => (
+                            <SelectItem key={d} value={d.toLowerCase()}>{d}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="song" className="text-stone-700 dark:text-stone-200">Song Request</Label>
+                      <Input id="song" name="song" placeholder="What song gets you on the dance floor?" className="border-rose-200 dark:border-stone-600 focus-visible:ring-rose-400" />
+                    </div>
+                  </>
+                )}
+
+                <div className="space-y-2">
+                  <Label htmlFor="message" className="text-stone-700 dark:text-stone-200">Message for the Couple</Label>
+                  <Textarea id="message" name="message" rows={3} placeholder="Share your well wishes..." className="border-rose-200 dark:border-stone-600 focus-visible:ring-rose-400 resize-none" />
+                </div>
+
+                <Button type="submit" disabled={sending} className="w-full bg-rose-400 hover:bg-rose-500 active:scale-[0.98] text-white rounded-full text-base py-6">
+                  <Send className="h-4 w-4 mr-2" />{sending ? "Sending..." : "Send RSVP"}
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+
+          <div className="mt-8 text-center flex items-center justify-center gap-2 text-sm text-stone-500 dark:text-stone-400">
+            <Calendar className="h-4 w-4 text-rose-400" />
+            <span>Please RSVP by May 1, 2026</span>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file