vibeasite-templates/template-education
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: education template (18 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:12:20 +00:00
parent 06ced75006
commit 7daf9ac1d0
1 changed files with 76 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.tsx
+76
View File
@@ -0,0 +1,76 @@
import { Link } from "react-router-dom";
import { GraduationCap, Mail, Facebook, Twitter, Linkedin, Youtube, Send, ShieldCheck } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { toast } from "sonner";
export default function Footer() {
const handleNewsletter = (e: React.FormEvent) => {
e.preventDefault();
toast.success("Subscribed! Check your inbox for a welcome email.");
};
return (
<footer className="bg-slate-950 text-slate-300 py-16 border-t border-slate-800">
<div className="mx-auto max-w-7xl px-6">
<div className="grid md:grid-cols-5 gap-10">
<div className="md:col-span-2">
<div className="flex items-center gap-2 mb-4">
<GraduationCap className="h-6 w-6 text-indigo-400" />
<span className="text-xl font-bold text-white">Luminar Academy</span>
</div>
<p className="text-sm leading-relaxed mb-4">Empowering learners worldwide with industry-leading courses, expert instructors, and career-ready certifications since 2018.</p>
<form onSubmit={handleNewsletter} className="flex gap-2">
<Input type="email" placeholder="Your email" required className="bg-slate-900 border-slate-700 rounded-full text-sm" />
<Button type="submit" size="icon" className="bg-indigo-600 hover:bg-indigo-700 rounded-full shrink-0"><Send className="h-4 w-4" /></Button>
</form>
<div className="flex items-center gap-2 mt-4 text-xs text-slate-500">
<ShieldCheck className="h-3.5 w-3.5 text-amber-500" />
<span>Accredited by the International Association of Online Education (IAOE)</span>
</div>
</div>
<div>
<h4 className="font-semibold text-white mb-4 text-sm uppercase tracking-wider">Courses</h4>
<ul className="space-y-2.5 text-sm">
<li><Link to="/courses" className="hover:text-indigo-400 transition-colors">All Courses</Link></li>
<li><Link to="/courses" className="hover:text-indigo-400 transition-colors">Web Development</Link></li>
<li><Link to="/courses" className="hover:text-indigo-400 transition-colors">Data Science</Link></li>
<li><Link to="/courses" className="hover:text-indigo-400 transition-colors">AI & Machine Learning</Link></li>
<li><Link to="/courses" className="hover:text-indigo-400 transition-colors">Design</Link></li>
</ul>
</div>
<div>
<h4 className="font-semibold text-white mb-4 text-sm uppercase tracking-wider">Resources</h4>
<ul className="space-y-2.5 text-sm">
<li><Link to="/instructors" className="hover:text-indigo-400 transition-colors">Instructors</Link></li>
<li><Link to="/courses" className="hover:text-indigo-400 transition-colors">Free Courses</Link></li>
<li><Link to="/contact" className="hover:text-indigo-400 transition-colors">Help Center</Link></li>
<li><Link to="/contact" className="hover:text-indigo-400 transition-colors">Community</Link></li>
</ul>
</div>
<div>
<h4 className="font-semibold text-white mb-4 text-sm uppercase tracking-wider">Company</h4>
<ul className="space-y-2.5 text-sm">
<li><Link to="/contact" className="hover:text-indigo-400 transition-colors">About Us</Link></li>
<li><Link to="/contact" className="hover:text-indigo-400 transition-colors">Careers</Link></li>
<li><Link to="/contact" className="hover:text-indigo-400 transition-colors">Contact</Link></li>
<li><Link to="/contact" className="hover:text-indigo-400 transition-colors">Privacy Policy</Link></li>
</ul>
</div>
</div>
<div className="mt-12 pt-8 border-t border-slate-800 flex flex-col md:flex-row items-center justify-between gap-4">
<p className="text-sm text-slate-500">© 2026 Luminar Academy. All rights reserved.</p>
<div className="flex gap-4">
{[Facebook, Twitter, Linkedin, Youtube].map((Icon, i) => (
<a key={i} href="#" className="text-slate-500 hover:text-indigo-400 transition-colors"><Icon className="h-5 w-5" /></a>
))}
</div>
</div>
</div>
</footer>
);
}