316 lines
11 KiB
JavaScript
316 lines
11 KiB
JavaScript
import { Facebook, Instagram, Linkedin, Twitter, Youtube } from "lucide-react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
export default function Footer() {
|
|
return (
|
|
<footer className="bg-gradient-to-b from-green-50 to-white">
|
|
<div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-8">
|
|
{/* Need Help Section */}
|
|
<div>
|
|
<h3 className="text-[#A70710] font-bold text-lg mb-4">
|
|
Need Help?
|
|
</h3>
|
|
<ul className="space-y-2">
|
|
<li>
|
|
<Link to="/login"
|
|
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Member Login
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
to="/registration"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Sign Up
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/matches"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Partner Search
|
|
</a>
|
|
</li>
|
|
{/* <li>
|
|
<a
|
|
href="#"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
How to Use Thirukalyanam Matrimony App
|
|
</a>
|
|
</li> */}
|
|
{/* <li>
|
|
<a
|
|
href="#"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Premium Memberships
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Customer Support
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Site Map
|
|
</a>
|
|
</li> */}
|
|
</ul>
|
|
<ul className="space-y-2 py-2">
|
|
<Link
|
|
to="/contact"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Contact Us
|
|
</Link>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Company Section */}
|
|
{/* <div> */}
|
|
{/* <h3 className="text-[#A70710] font-bold text-lg mb-4">Company</h3> */}
|
|
{/* <ul className="space-y-2"> */}
|
|
{/* <li>
|
|
<a
|
|
href="#"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
About Us
|
|
</a>
|
|
</li> */}
|
|
{/* <li>
|
|
<a
|
|
href="#"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Thirukalyanam Blog
|
|
</a>
|
|
</li> */}
|
|
{/* <li>
|
|
<a
|
|
href="#"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Careers
|
|
</a>
|
|
</li> */}
|
|
{/* <li>
|
|
<a
|
|
href="#"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Awards & Recognition
|
|
</a>
|
|
</li> */}
|
|
{/* <li>
|
|
<Link
|
|
to="/contact"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Contact Us
|
|
</Link>
|
|
</li> */}
|
|
{/* </ul>
|
|
</div> */}
|
|
|
|
{/* Privacy & You Section */}
|
|
<div>
|
|
<h3 className="text-[#A70710] font-bold text-lg mb-4">
|
|
Privacy & You
|
|
</h3>
|
|
<ul className="space-y-2">
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Terms of Use
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Privacy Policy
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Be Safe Online
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Report Misuse
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* More Section */}
|
|
<div>
|
|
<h3 className="text-[#A70710] font-bold text-lg mb-4">More</h3>
|
|
<ul className="space-y-2">
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Be Safe Online
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className="text-gray-600 hover:text-green-600 transition-colors"
|
|
>
|
|
Report Misuse
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Social Media Section */}
|
|
<div className="mb-4">
|
|
<h3 className="text-[#A70710] font-bold text-lg mb-4">
|
|
Find us on:
|
|
</h3>
|
|
<div className="flex gap-3 mb-6">
|
|
<a
|
|
href="#"
|
|
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
|
|
>
|
|
<Facebook className="w-5 h-5 text-gray-700" />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
|
|
>
|
|
<Instagram className="w-5 h-5 text-gray-700" />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
|
|
>
|
|
<Linkedin className="w-5 h-5 text-gray-700" />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
|
|
>
|
|
<Twitter className="w-5 h-5 text-gray-700" />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
|
|
>
|
|
<Youtube className="w-5 h-5 text-gray-700" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Social Media & Apps Section */}
|
|
<div>
|
|
{/* <h3 className="text-[#A70710] font-bold text-lg mb-4">
|
|
Find us on:
|
|
</h3> */}
|
|
{/* <div className="flex gap-3 mb-6">
|
|
<a
|
|
href="#"
|
|
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
|
|
>
|
|
<Facebook className="w-5 h-5 text-gray-700" />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
|
|
>
|
|
<Instagram className="w-5 h-5 text-gray-700" />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
|
|
>
|
|
<Linkedin className="w-5 h-5 text-gray-700" />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
|
|
>
|
|
<Twitter className="w-5 h-5 text-gray-700" />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
|
|
>
|
|
<Youtube className="w-5 h-5 text-gray-700" />
|
|
</a>
|
|
</div> */}
|
|
|
|
<h3 className="text-[#A70710] font-bold text-lg mb-4">
|
|
Get the Thirukalyanam App
|
|
</h3>
|
|
<div className="space-y-3">
|
|
<a href="#" className="block">
|
|
<img
|
|
src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg"
|
|
alt="Download on App Store"
|
|
className="h-10 hover:opacity-80 transition-opacity"
|
|
/>
|
|
</a>
|
|
<a href="#" className="block">
|
|
<img
|
|
src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg"
|
|
alt="Get it on Google Play"
|
|
className="h-10 hover:opacity-80 transition-opacity"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-3">
|
|
Apple and the Apple Logo are trademarks of Apple Inc.
|
|
</p>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
Google Play and the Google Play logo are trademarks of Google LLC.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Copyright Section */}
|
|
<div className="border-t border-gray-200 pt-6">
|
|
<div className="flex flex-col md:flex-row justify-between items-center">
|
|
<p className="text-sm text-gray-600 mb-4 md:mb-0">
|
|
© {new Date().getFullYear()} Thirukalyanam, The World's
|
|
Leading Matchmaking Service™
|
|
</p>
|
|
|
|
<p className="text-sm text-gray-600">
|
|
Passionately created by{" "}
|
|
<span className="text-[#034E08] font-semibold">Amrithaa</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|