Seed: education template (18 files)
This commit is contained in:
@@ -0,0 +1,152 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||||
|
import { Mail, Phone, MapPin, Clock, Send } from "lucide-react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
const faqs = [
|
||||||
|
{ q: "How do I enroll in a course?", a: "Simply browse our course catalog, select a course, and click Enroll Now. You can start learning immediately after payment. We also offer a free trial for new students." },
|
||||||
|
{ q: "Do I receive a certificate upon completion?", a: "Yes! Every course includes a verifiable certificate of completion that you can share on LinkedIn and add to your resume. Our certificates are recognized by industry leaders." },
|
||||||
|
{ q: "What is your refund policy?", a: "We offer a 30-day money-back guarantee on all courses. If you are not satisfied, contact our support team for a full refund — no questions asked." },
|
||||||
|
{ q: "Are there any prerequisites for courses?", a: "Prerequisites vary by course. Beginner courses require no prior experience. Intermediate and advanced courses list their prerequisites on the course detail page." },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ContactPage() {
|
||||||
|
const [sending, setSending] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setSending(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setSending(false);
|
||||||
|
toast.success("Message sent! We will get back to you within 24 hours.");
|
||||||
|
}, 1200);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-white dark:bg-slate-950">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{/* ── Contact Section ── */}
|
||||||
|
<section className="pt-32 pb-20">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="text-center mb-12 animate-fade-up">
|
||||||
|
<h1 className="text-3xl sm:text-4xl font-bold mb-3">Get In Touch</h1>
|
||||||
|
<p className="text-muted-foreground max-w-xl mx-auto">Have questions about courses, enrollment, or partnerships? We are here to help.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid lg:grid-cols-5 gap-10">
|
||||||
|
{/* Info */}
|
||||||
|
<div className="lg:col-span-2 space-y-6 animate-fade-up" style={{ animationDelay: "0.1s" }}>
|
||||||
|
<Card className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl">
|
||||||
|
<CardContent className="p-6 space-y-5">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="w-10 h-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center shrink-0">
|
||||||
|
<Mail className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-sm mb-0.5">Email</div>
|
||||||
|
<div className="text-sm text-muted-foreground">hello@luminaracademy.com</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="w-10 h-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center shrink-0">
|
||||||
|
<Phone className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-sm mb-0.5">Phone</div>
|
||||||
|
<div className="text-sm text-muted-foreground">+1 (555) 234-5678</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="w-10 h-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center shrink-0">
|
||||||
|
<MapPin className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-sm mb-0.5">Address</div>
|
||||||
|
<div className="text-sm text-muted-foreground">500 Innovation Drive, Suite 300, San Francisco, CA 94105</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="w-10 h-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center shrink-0">
|
||||||
|
<Clock className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-sm mb-0.5">Office Hours</div>
|
||||||
|
<div className="text-sm text-muted-foreground">Mon–Fri 9:00 AM – 6:00 PM PST</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form */}
|
||||||
|
<div className="lg:col-span-3 animate-fade-up" style={{ animationDelay: "0.15s" }}>
|
||||||
|
<Card className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div className="grid sm:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium mb-1.5 block">Full Name</label>
|
||||||
|
<Input required placeholder="Your name" className="rounded-lg" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium mb-1.5 block">Email</label>
|
||||||
|
<Input type="email" required placeholder="you@example.com" className="rounded-lg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium mb-1.5 block">Subject</label>
|
||||||
|
<Select>
|
||||||
|
<SelectTrigger className="rounded-lg"><SelectValue placeholder="Select a subject" /></SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="enrollment">Course Enrollment</SelectItem>
|
||||||
|
<SelectItem value="technical">Technical Support</SelectItem>
|
||||||
|
<SelectItem value="billing">Billing & Payments</SelectItem>
|
||||||
|
<SelectItem value="partnership">Partnership</SelectItem>
|
||||||
|
<SelectItem value="other">Other</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium mb-1.5 block">Message</label>
|
||||||
|
<Textarea placeholder="How can we help you?" rows={5} className="rounded-lg resize-none" />
|
||||||
|
</div>
|
||||||
|
<Button type="submit" disabled={sending} className="w-full bg-indigo-600 hover:bg-indigo-700 text-white rounded-full shadow-lg shadow-indigo-500/20 active:scale-[0.97] transition-all">
|
||||||
|
{sending ? "Sending..." : (<><Send className="mr-2 h-4 w-4" /> Send Message</>)}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── FAQ ── */}
|
||||||
|
<section className="py-20 bg-slate-50 dark:bg-slate-950">
|
||||||
|
<div className="mx-auto max-w-3xl px-6">
|
||||||
|
<div className="text-center mb-12 animate-fade-up">
|
||||||
|
<h2 className="text-2xl sm:text-3xl font-bold">Frequently Asked Questions</h2>
|
||||||
|
</div>
|
||||||
|
<Accordion type="single" collapsible className="space-y-3 animate-fade-up">
|
||||||
|
{faqs.map((f, i) => (
|
||||||
|
<AccordionItem key={i} value={`faq-\${i}`} className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200/60 dark:border-slate-800/60 px-6">
|
||||||
|
<AccordionTrigger className="text-left font-medium hover:no-underline">{f.q}</AccordionTrigger>
|
||||||
|
<AccordionContent className="text-muted-foreground">{f.a}</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
))}
|
||||||
|
</Accordion>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user