style: add site footer and put nav in container

src/app/layout.tsx

@@ -6,6 +6,7 @@ import "@/app/globals.css";
 
 import { NavigationBar } from "@/components/navigationBar/nav";
 import { Toaster } from "react-hot-toast";
+import { SiteFooter } from "@/components/siteFooter";
 
 const montserrat = Montserrat({
   subsets: ["latin"],
@@ -39,6 +40,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
               <div className="flex-1 bg-background">{children}</div>
             </div>
           </ThemeProvider>
+          <SiteFooter />
         </body>
       </html>
     </ReactQueryClientProvider>

src/components/navigationBar/nav.tsx

@@ -8,7 +8,7 @@ import { cn } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
-import { useRouter } from 'next/navigation';
+import { useRouter } from "next/navigation";
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -46,31 +46,27 @@ const landings = [
     route: "/crm-landing",
   },
 ];
-const ListItem = React.forwardRef<
-  React.ElementRef<"a">,
-  React.ComponentPropsWithoutRef<"a">
->(({ className, title, children, ...props }, ref) => {
-  return (
-    <li>
-      <NavigationMenuLink asChild>
-        <a
-          ref={ref}
-          className={cn(
-            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-            className
-          )}
-          {...props}
-        >
-          <div className="text-sm font-medium leading-none">{title}</div>
-          <hr />
-          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-            {children}
-          </p>
-        </a>
-      </NavigationMenuLink>
-    </li>
-  );
-});
+const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
+  ({ className, title, children, ...props }, ref) => {
+    return (
+      <li>
+        <NavigationMenuLink asChild>
+          <a
+            ref={ref}
+            className={cn(
+              "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+              className
+            )}
+            {...props}>
+            <div className="text-sm font-medium leading-none">{title}</div>
+            <hr />
+            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
+          </a>
+        </NavigationMenuLink>
+      </li>
+    );
+  }
+);
 ListItem.displayName = "ListItem";
 
 const unAuthenticatedComponents = () => {
@@ -104,11 +100,7 @@ const authenticatedComponents = () => {
       <Wallet />
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button
-            variant="outline"
-            size="icon"
-            className="overflow-hidden rounded-full"
-          >
+          <Button variant="outline" size="icon" className="overflow-hidden rounded-full">
             <Avatar>
               <AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" />
               <AvatarFallback>1</AvatarFallback>
@@ -144,14 +136,14 @@ export function NavigationBar() {
   }, [loading]);
 
   const handleKeyDown = async (k: React.KeyboardEvent<HTMLInputElement>) => {
-    if (k.key === 'Enter') {
+    if (k.key === "Enter") {
       const query = (k.target as HTMLInputElement).value.trim();
       if (query) {
         router.push(`/find?query=${encodeURIComponent(query)}`);
       }
     }
   };
-  
+
   const businessComponents = [
     {
       title: "Businesses",
@@ -177,14 +169,13 @@ export function NavigationBar() {
   ];
   return (
     <header className="sticky top-0 flex flex-wrap w-full bg-card text-sm py-3 border-b-2 border-border z-50">
-      <nav className="max-w-[85rem] w-full mx-auto px-4">
+      <nav className="max-w-screen-xl w-full mx-auto px-4">
         <div className="flex items-center justify-between">
           <div className="flex flex-col">
             <Link
               className="flex-none text-xl font-semibold dark:text-white focus:outline-none focus:opacity-80"
               href="/"
-              aria-label="Brand"
-            >
+              aria-label="Brand">
               <span className="inline-flex items-center gap-x-2 text-xl font-semibold dark:text-white">
                 <Image src="./logo.svg" alt="logo" width={50} height={50} />
                 B2DVentures
@@ -196,17 +187,11 @@ export function NavigationBar() {
             <NavigationMenu>
               <NavigationMenuList>
                 <NavigationMenuItem>
-                  <NavigationMenuTrigger className="text-base">
-                    Businesses
-                  </NavigationMenuTrigger>
+                  <NavigationMenuTrigger className="text-base">Businesses</NavigationMenuTrigger>
                   <NavigationMenuContent>
                     <ul className="grid w-[400px] ">
                       {businessComponents.map((component) => (
-                        <ListItem
-                          key={component.title}
-                          title={component.title}
-                          href={component.href}
-                        >
+                        <ListItem key={component.title} title={component.title} href={component.href}>
                           {component.description}
                         </ListItem>
                       ))}
@@ -215,17 +200,11 @@ export function NavigationBar() {
                 </NavigationMenuItem>
 
                 <NavigationMenuItem>
-                  <NavigationMenuTrigger className="text-base font-medium ">
-                    Projects
-                  </NavigationMenuTrigger>
+                  <NavigationMenuTrigger className="text-base font-medium ">Projects</NavigationMenuTrigger>
                   <NavigationMenuContent>
                     <ul className="grid w-[400px] ">
                       {projectComponents.map((component) => (
-                        <ListItem
-                          key={component.title}
-                          title={component.title}
-                          href={component.href}
-                        >
+                        <ListItem key={component.title} title={component.title} href={component.href}>
                           {component.description}
                         </ListItem>
                       ))}
@@ -234,17 +213,11 @@ export function NavigationBar() {
                 </NavigationMenuItem>
 
                 <NavigationMenuItem>
-                  <NavigationMenuTrigger className="text-base">
-                    Blogs
-                  </NavigationMenuTrigger>
+                  <NavigationMenuTrigger className="text-base">Blogs</NavigationMenuTrigger>
                   <NavigationMenuContent>
                     <ul className="grid w-[400px] ">
                       {blogComponents.map((component) => (
-                        <ListItem
-                          key={component.title}
-                          title={component.title}
-                          href={component.href}
-                        >
+                        <ListItem key={component.title} title={component.title} href={component.href}>
                           {component.description}
                         </ListItem>
                       ))}
@@ -253,19 +226,13 @@ export function NavigationBar() {
                 </NavigationMenuItem>
 
                 <NavigationMenuItem>
-                  <NavigationMenuLink
-                    className="text-base font-medium"
-                    href="docs"
-                  >
+                  <NavigationMenuLink className="text-base font-medium" href="docs">
                     Docs
                   </NavigationMenuLink>
                 </NavigationMenuItem>
 
                 <NavigationMenuItem className="pl-5 flex">
-                  <Search
-                    onClick={() => setSearchActive(!searchActive)}
-                    className="cursor-pointer"
-                  />
+                  <Search onClick={() => setSearchActive(!searchActive)} className="cursor-pointer" />
                   {/* search bar's input */}
                   <input
                     type="text"

src/components/siteFooter.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link";
+
+export function SiteFooter() {
+  return (
+    <footer className="pt-6">
+      <div className="flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row bg-foreground text-background">
+        <div className="container max-w-screen-xl flex flex-col md:flex-row justify-between items-center py-6">
+          {/* Logo or Brand */}
+          <div className="flex items-center space-x-4">
+            <div className="text-xl font-bold">B2DVentures</div>
+          </div>
+
+          {/* Navigation Links */}
+          <div className="flex space-x-6">
+            <Link href="/" className="hover:underline">
+              Home
+            </Link>
+            <Link href="/about" className="hover:underline">
+              About Us
+            </Link>
+            <Link href="/services" className="hover:underline">
+              Services
+            </Link>
+            <Link href="/contact" className="hover:underline">
+              Contact
+            </Link>
+          </div>
+          {/* Copyright */}
+          <div className="text-sm text-center mt-4 md:mt-0 md:ml-6">
+            &copy; {new Date().getFullYear()} B2DVentures. All rights reserved.
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}