128 lines
3.6 KiB
TypeScript
128 lines
3.6 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import {
|
|
Twitter,
|
|
Linkedin,
|
|
Github,
|
|
Facebook,
|
|
Instagram,
|
|
MessageCircle,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
const footerLinks = [
|
|
{
|
|
title: "Product",
|
|
items: [
|
|
{ label: "Features", url: "/features" },
|
|
{ label: "HRMS", url: "/hrms" },
|
|
{ label: "ATS", url: "/ats" },
|
|
{ label: "CRM", url: "/crm" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{ label: "About Us", url: "/about" },
|
|
{ label: "Careers", url: "/careers" },
|
|
{ label: "Blog", url: "/blog" },
|
|
{ label: "Contact", url: "/contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{ label: "Privacy Policy", url: "/privacy-policy" },
|
|
{ label: "Terms of Service", url: "/terms-and-conditions" },
|
|
{ label: "Refund Policy", url: "/refund-policy" },
|
|
{ label: "GDPR & Cookies", url: "/gdpr-cookies" },
|
|
],
|
|
},
|
|
];
|
|
|
|
const Footer = () => {
|
|
return (
|
|
<footer className="bg-gray-950 text-gray-300 pt-10 pb-10 relative overflow-hidden">
|
|
{/* Glow Background */}
|
|
<div className="absolute inset-0 opacity-5 bg-gradient-to-br from-purple-600 to-pink-600 blur-3xl" />
|
|
|
|
<div className="relative max-w-7xl mx-auto px-6 flex flex-wrap justify-between gap-10">
|
|
{/* Brand (Logo Update Section) */}
|
|
<motion.div
|
|
whileHover={{ scale: 1.03 }}
|
|
className="min-w-[230px] flex-1"
|
|
>
|
|
<div className="flex items-center mb-4 gap-3">
|
|
{/* White background for logo */}
|
|
<div className="w-50 h-12 bg-white rounded-xl flex items-center justify-center shadow-lg">
|
|
{/* Replace this image with your actual logo */}
|
|
<img
|
|
src="/logo.png"
|
|
alt="Company Logo"
|
|
className="w-50 h-12 object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-sm opacity-80 max-w-xs">
|
|
Hire smarter & faster — AI screening, automation & collaborative
|
|
recruitment tools.
|
|
</p>
|
|
|
|
{/* Social Icons */}
|
|
<div className="flex gap-4 mt-6">
|
|
{[
|
|
Facebook,
|
|
Instagram,
|
|
MessageCircle,
|
|
Twitter,
|
|
Linkedin,
|
|
Github,
|
|
].map((Icon, idx) => (
|
|
<Icon
|
|
key={idx}
|
|
className="w-6 h-6 hover:text-white hover:scale-110 transition cursor-pointer"
|
|
/>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Footer Links */}
|
|
{/* Footer Links */}
|
|
{footerLinks.map((col, idx) => (
|
|
<motion.div
|
|
key={idx}
|
|
whileHover={{ scale: 1.02 }}
|
|
className="min-w-[140px]"
|
|
>
|
|
<h4 className="font-semibold text-white text-lg mb-4">
|
|
{col.title}
|
|
</h4>
|
|
|
|
<ul className="space-y-3">
|
|
{col.items.map((item, i) => (
|
|
<li
|
|
key={i}
|
|
className="text-sm opacity-80 hover:opacity-100 transition"
|
|
>
|
|
<Link href={item.url} className="hover:text-white">
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom */}
|
|
<div className="mt-14 pt-6 border-t border-gray-700/40 text-center text-sm opacity-70">
|
|
© {new Date().getFullYear()} — All rights reserved.
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|