modified footer

src/components/footer.tsx

@@ -1,7 +1,18 @@
+import Logo from "./logo";
+import { Button } from "./ui/button";
+
 const Footer = () => {
   return (
-    <footer className="sticky bottom-0 flex h-12 items-center justify-center border-t gap-4 bg-background/50 backdrop-blur px-4 mt-10 md:px-6 z-30">
-      <span className="text-md text-muted-foreground">© ATOM 2024</span>
+    <footer className="sticky bottom-0 flex h-12 items-center justify-center border-t gap-4 bg-background/50 backdrop-blur px-4 mt-10 md:px-6 z-30 border-zinc-200 dark:border-zinc-800">
+      <Logo showText={false} showCopyright />
+      <div className="md:ml-auto w-full justify-between md:justify-end flex items-center gap-x-2 text-muted-foreground">
+        <Button variant="ghost" size="sm">
+          Privacy Policy
+        </Button>
+        <Button variant="ghost" size="sm">
+          Terms & Conditions
+        </Button>
+      </div>
     </footer>
   );
 };

src/components/logo.tsx

@@ -0,0 +1,48 @@
+import Image from "next/image";
+import { Poppins } from "next/font/google";
+
+import { cn } from "@/lib/utils";
+
+const font = Poppins({
+  subsets: ["latin"],
+  weight: ["400", "600"],
+});
+
+interface LogoProps {
+  text?: string;
+  showText?: boolean;
+  showCopyright?: boolean;
+}
+
+const Logo = ({ text, showText, showCopyright }: LogoProps) => {
+  return (
+    <div className="flex items-center gap-x-2">
+      <Image
+        src="/logo.png"
+        height="40"
+        width="40"
+        alt="Logo"
+        className="dark:hidden"
+      />
+      <Image
+        src="/logo-white.png"
+        height="40"
+        width="40"
+        alt="Logo"
+        className="hidden dark:block"
+      />
+      {showText && (
+        <p className={cn("font-semibold invisible md:visible", font.className)}>
+          {text}
+        </p>
+      )}
+      {showCopyright && (
+        <div className="w-24 text-sm font-medium text-muted-foreground">
+          &copy; {new Date().getFullYear()}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Logo;

src/components/navbar.tsx

@@ -1,11 +1,7 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import Image from "next/image";
 import Link from "next/link";
+import Logo from "./logo";
 
 const Navbar = () => {
-  const { theme } = useTheme();
   const links = [
     { name: "About", href: "#about" },
     { name: "Clients", href: "#clients" },
@@ -14,18 +10,7 @@ const Navbar = () => {
   ];
   return (
     <nav className="hidden flex-col gap-6 w-full text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
-      <Link
-        href="#"
-        className="flex items-center justify-start gap-2 text-lg h-12 w-12"
-      >
-        <Image
-          src={theme === "dark" ? "/logo-white.png" : "/logo.png"}
-          width={48}
-          height={48}
-          alt="logo"
-        />
-        <span className="sr-only">ATOM</span>
-      </Link>
+      <Logo text="ATOM" showText />
       <div className="flex items-center justify-center gap-2 w-full">
         {links.map((link) => (
           <Link