Seed: wedding template (15 files)
This commit is contained in:
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user