ChainBuilders · olujimiAdebakin · Jul 5, 2025 · Jul 4, 2025 · Jul 5, 2025
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -24,7 +24,8 @@
 body {
   color: var(--background);
   background: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-montserrat), sans-serif;
+
 }
 
 
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,19 +1,23 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter, Montserrat } from "next/font/google";
 import "./globals.css";
 import NavBar from "../components/landingPage/navBar";
 import FooterSection from "../components/landingPage/footer";
 import { AddPropertyModal } from "../components/AddProperty/add-property-modal";
 import { AuthProvider } from "@/context/authContext";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+
+const montserrat = Montserrat({ 
   subsets: ["latin"],
+  variable: "--font-montserrat",
+  display: 'swap'
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+
+const inter = Inter({
   subsets: ["latin"],
+  variable: "--font-inter",
+  display: 'swap'
 });
 
 export const metadata: Metadata = {
@@ -27,17 +31,15 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        <AuthProvider >
-        <NavBar />
-        {children}
-        <FooterSection />
-        <AddPropertyModal />
+    <html lang="en" className={`${montserrat.variable} ${inter.variable}`}>
+      <body className="font-sans"> 
+        <AuthProvider>
+          <NavBar />
+          {children}
+          <FooterSection />
+          <AddPropertyModal />
         </AuthProvider>
       </body>
     </html>
   );
-}
+}
diff --git a/frontend/src/components/landingPage/hero.tsx b/frontend/src/components/landingPage/hero.tsx
@@ -6,8 +6,13 @@ import Button from "../ui/Button";
 import { ArrowRight } from "lucide-react";
 import Link from "next/link";
 import { useModalStore } from "@/stores/modalStore";
+import { useAuth } from "@/context/authContext";
+
 
 export default function Hero() {
+
+  const {user} = useAuth()
+
   const onLoginModal = useModalStore((state) => state.onLoginPrompt);
 
   return (
@@ -30,7 +35,7 @@ export default function Hero() {
       </p>
       <div className="mt-8 flex flex-col md:flex-row items-center  space-x-0 md:space-x-4 space-y-4 md:space-y-0">
         <Link onClick={onLoginModal} href="">
-          <Button className="bg-gradient-to-r hover:cursor-pointer from-[#34b792] w-[180px] to-[#328b79] lg:h-[60px] text-white lg:w-[220px] text-[20px] rounded-sm justify-center flex items-center space-x-2">
+          <Button className={`${user? "hidden" : "block"} bg-gradient-to-r hover:cursor-pointer from-[#34b792] w-[180px] to-[#328b79] lg:h-[60px] text-white lg:w-[220px] text-[20px] rounded-sm justify-center flex items-center space-x-2`}>
             <span>Get Started</span>
             <ArrowRight color="white" size={20} />
           </Button>

diff --git a/frontend/src/components/landingPage/howitWorks.tsx b/frontend/src/components/landingPage/howitWorks.tsx
@@ -1,5 +1,6 @@
 import Button from "../ui/Button";
 import Card from "../ui/Card";
+
 import {
   Gem,
   Home,

diff --git a/frontend/src/components/landingPage/navBar.tsx b/frontend/src/components/landingPage/navBar.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import React, { useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import Button from "../ui/Button";
-import { LogOut, User } from "lucide-react";
+import { Building, LogOut, User } from "lucide-react";
 import { useAuth } from "@/context/authContext";
 import { useModalStore } from "@/stores/modalStore";
 
@@ -14,34 +14,34 @@ export default function NavBar() {
   const [toggleMiniDropdown, setToggleMiniDropdown] = useState(false);
   const pathname = usePathname();
   const router = useRouter();
-  
+
   const { user, isLoading, signOut } = useAuth();
 
   const toggleMenu = () => setToggle(!toggle);
   const miniDropdowntoggle = () => setToggleMiniDropdown(!toggleMiniDropdown);
 
-const handleLogout = async () => {
-  try {
-    await signOut();
-    window.location.href = '/'; 
-  } catch (error) {
-    console.error("Logout failed:", error);
-  }
-};
+  const handleLogout = async () => {
+    try {
+      await signOut();
+      window.location.href = "/";
+    } catch (error) {
+      console.error("Logout failed:", error);
+    }
+  };
 
-  const links = user 
+  const links = user
     ? ["Home", "Properties", "Dashboard", "About", "Contact"]
     : ["Home", "Properties", "About", "Contact"];
 
-  const walletAddress = user?.email 
+  const walletAddress = user?.email
     ? `${user.email.substring(0, 3)}...${user.email.split("@")[1]}`
     : "Not connected";
 
   const getRoutePath = (item: string) => {
     if (item === "Home") return "/";
     if (item === "Dashboard") {
-      return user?.user_metadata?.user_type === "realtor" 
-        ? "/realtor-dashboard" 
+      return user?.user_metadata?.user_type === "realtor"
+        ? "/realtor-dashboard"
         : "/investor-dashboard";
     }
     return `/${item.toLowerCase().replace(" ", "")}`;
@@ -51,8 +51,13 @@ const handleLogout = async () => {
     <nav className="bg-white shadow-md sticky top-0 z-50">
       {/* Desktop Menu */}
       <div className="container mx-auto hidden md:flex justify-between items-center">
-        <div className="bg-gradient-to-r from-[#36a888] py-3 to-[#21805f] bg-clip-text text-transparent text-2xl font-bold">
-          BrickChain
+        <div className="flex space-x-2 pt-2 items-center">
+          <span className="bg-gradient-to-r from-[#36a888]  to-[#21805f] p-1 h-fit rounded-lg ">
+            <Building color="white" size={30} className="stroke-3" />
+          </span>{" "}
+          <div className="bg-gradient-to-r from-[#36a888] py-3 to-[#21805f] bg-clip-text text-transparent text-2xl font-bold">
+            BrickChain
+          </div>
         </div>
 
         <div className="space-x-3">
@@ -81,16 +86,16 @@ const handleLogout = async () => {
             <Button className="text-[#1A5D1A] hover:bg-[#e3e1e1]">
               Connect wallet
             </Button>
-            <Button 
-              onClick={onLoginModal} 
+            <Button
+              onClick={onLoginModal}
               className="bg-[#1A5D1A] text-white hover:bg-[#000000]"
             >
               Get Started
             </Button>
           </div>
         ) : (
           <div className="space-x-3 items-center hidden md:flex flex-col relative">
-            <Button 
+            <Button
               onClick={miniDropdowntoggle}
               className="bg-[white] text-[green] hover:bg-[#a8a7a7] flex space-x-2"
             >
@@ -100,7 +105,7 @@ const handleLogout = async () => {
             {toggleMiniDropdown && (
               <div className="flex flex-col gap-4 absolute bg-gradient-to-r from-emerald-500 to-teal-500 p-3 rounded-lg top-12 right-0 items-center justify-center min-w-[200px]">
                 <span className="text-white font-medium">{walletAddress}</span>
-                <Button 
+                <Button
                   onClick={handleLogout}
                   className="bg-[white] text-[green] border hover:bg-[#a8a7a7] flex space-x-2"
                 >
@@ -118,7 +123,7 @@ const handleLogout = async () => {
         <div className="bg-gradient-to-r hidden w-full sm:flex from-[#36a888] to-[#21805f] bg-clip-text text-transparent text-2xl font-bold">
           BrickChain
         </div>
-        
+
         <button
           className="text-gray-600 absolute top-2 right-3 hover:text-gray-800 focus:outline-none"
           onClick={toggleMenu}
@@ -179,14 +184,14 @@ const handleLogout = async () => {
                 );
               })}
             </div>
-            
+
             <div className="flex justify-between w-full mt-4">
               {!user ? (
                 <div className="flex md:justify-end justify-between items-center w-full">
                   <Button className="bg-[white] border hover:bg-[#e6e6e6] text-[#1A5D1A] text-sm">
                     Connect wallet
                   </Button>
-                  <Button 
+                  <Button
                     onClick={onLoginModal}
                     className="bg-[white] border hover:bg-[#e6e6e6] text-[#1A5D1A] text-sm"
                   >
@@ -196,7 +201,7 @@ const handleLogout = async () => {
               ) : (
                 <div className="flex gap-4 bg-gradient-to-r from-emerald-500 to-teal-500 p-3 rounded-lg items-center justify-center w-full">
                   <span className="text-white font-[600]">{walletAddress}</span>
-                  <Button 
+                  <Button
                     onClick={handleLogout}
                     className="bg-[white] text-[green] border hover:bg-[#a8a7a7] flex space-x-2"
                   >
@@ -211,4 +216,4 @@ const handleLogout = async () => {
       </div>
     </nav>
   );
-}
+}