privacy-policy terms&conditions refuncpolicy cookies page added

app/(public)/_homeComponents/Footer.tsx

@@ -9,6 +9,37 @@ import {
   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 (
@@ -17,14 +48,12 @@ const Footer = () => {
       <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 */}
@@ -43,36 +72,43 @@ const Footer = () => {
 
           {/* 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"
-                />
-              )
-            )}
+            {[
+              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 */}
-        {[
-          ["Product", ["Features", "Solutions", "Pricing", "Security"]],
-          ["Company", ["About Us", "Careers", "Blog", "Contact"]],
-          ["Support", ["FAQ", "Help Center", "Guides"]],
-        ].map((col, idx) => (
+        {/* 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[0]}</h4>
+            <h4 className="font-semibold text-white text-lg mb-4">
+              {col.title}
+            </h4>
+
             <ul className="space-y-3">
-              {(col[1] as string[]).map((item, i) => (
+              {col.items.map((item, i) => (
                 <li
                   key={i}
-                  className="hover:text-white cursor-pointer text-sm opacity-80 hover:opacity-100 transition"
+                  className="text-sm opacity-80 hover:opacity-100 transition"
                 >
-                  {item}
+                  <Link href={item.url} className="hover:text-white">
+                    {item.label}
+                  </Link>
                 </li>
               ))}
             </ul>
@@ -88,4 +124,4 @@ const Footer = () => {
   );
 };
 
-export default Footer;
+export default Footer;