From f2d632d870c60452271e3a727b02499debdcbb30 Mon Sep 17 00:00:00 2001
From: pari-dubey1 <paridubeyy00@gmail.com>
Date: Sat, 16 May 2026 22:13:16 +0530
Subject: [PATCH] feat: add responsive footer component

---
 src/app/components/Footer.tsx | 107 ++++++++++++++++++++++++++++++++++
 src/app/layout.tsx            |   5 +-
 2 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 src/app/components/Footer.tsx

diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
new file mode 100644
index 0000000..d3e757c
--- /dev/null
+++ b/src/app/components/Footer.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import logoSrc from "public/logo.svg";
+
+const Footer = () => {
+  return (
+    <footer className="border-t-2 border-gray-100 bg-white dark:border-gray-700 dark:bg-black">
+      <div className="mx-auto max-w-7xl px-6 py-10 lg:px-12">
+        
+        <div className="grid gap-10 md:grid-cols-3">
+          
+          {/* Logo + Description */}
+          <div>
+            <div className="mb-4 flex items-center gap-2">
+                <div className="rounded-md bg-white p-1">
+                    <Image
+                     src={logoSrc}
+                     alt="OpenResume Logo"
+                     className="h-8 w-auto"
+                    />
+                </div>
+            </div>
+
+            <p className="max-w-sm text-sm leading-relaxed text-gray-500 dark:text-gray-400">
+              Auto-Fill-Tool helps users streamline resume building,
+              parsing, and automation workflows with a clean and efficient experience.
+            </p>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h3 className="mb-4 text-lg font-semibold text-black dark:text-white">
+              Quick Links
+            </h3>
+
+            <ul className="space-y-3 text-sm text-gray-500 dark:text-gray-400">
+              <li>
+                <Link
+                  href="/"
+                  className="transition-colors hover:text-black dark:hover:text-white"
+                >
+                  Home
+                </Link>
+              </li>
+
+              <li>
+                <Link
+                  href="/resume-builder"
+                  className="transition-colors hover:text-black dark:hover:text-white"
+                >
+                  Resume Builder
+                </Link>
+              </li>
+
+              <li>
+                <Link
+                  href="/resume-parser"
+                  className="transition-colors hover:text-black dark:hover:text-white"
+                >
+                  Resume Parser
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Connect */}
+          <div>
+            <h3 className="mb-4 text-lg font-semibold text-black dark:text-white">
+              Connect
+            </h3>
+
+            <ul className="space-y-3 text-sm text-gray-500 dark:text-gray-400">
+              <li>
+                <a
+                  href="https://github.com/sunilkumar2170/Auto-Fill-Tool"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transition-colors hover:text-black dark:hover:text-white"
+                >
+                  GitHub Repository
+                </a>
+              </li>
+
+              <li>
+                <a
+                  href="mailto:support@example.com"
+                  className="transition-colors hover:text-black dark:hover:text-white"
+                >
+                  Contact Support
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom Footer */}
+        <div className="mt-10 border-t border-gray-200 pt-6 text-center text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400">
+          © {new Date().getFullYear()} Auto-Fill-Tool. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 249c39f..5ad9758 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,8 @@
-import "globals.css";
+// @ts-ignore: side-effect CSS import declarations
+import "./globals.css";
 import { TopNavBar } from "components/TopNavBar";
 import { Analytics } from "@vercel/analytics/react";
+import Footer from "./components/Footer";
 
 export const metadata = {
   title: "OpenResume - Free Open-source Resume Builder and Parser",
@@ -19,6 +21,7 @@ export default function RootLayout({
         <TopNavBar />
         {children}
         <Analytics />
+        <Footer />
       </body>
     </html>
   );