fix: hero and header styling

public/css/style.css

@@ -11555,7 +11555,6 @@ html.tablet .ui-to-top {
 	font-weight: 600;
 	letter-spacing: .14em;
 	text-transform: uppercase;
-	color: var(--color-colorHeaderText);
 }
 
 .rd-dropdown-link,
@@ -11968,16 +11967,18 @@ html.tablet .ui-to-top {
 
 .rd-navbar-fixed .rd-navbar-toggle {
 	display: inline-block;
+	position: absolute;
 }
 
 .rd-navbar-fixed .rd-navbar-brand {
 	position: relative;
-	margin-left: 6px;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 .rd-navbar-fixed .rd-navbar-brand img {
-	max-width: 160px;
+	max-width: 90px;
-	max-height: 41px;
+	max-height: 60px;
 	width: auto;
 	height: auto;
 }
@@ -12913,8 +12914,8 @@ html.rd-navbar-fixed-linked .page {
 .rd-navbar-classic.rd-navbar-static .rd-navbar-brand img {
 	width: auto;
 	height: auto;
-	max-width: 200px;
+	max-width: 220px;
-	max-height: 80px;
+	max-height: 110px;
 }
 
 .rd-navbar-classic.rd-navbar-static .rd-navbar-nav-wrap {
@@ -12946,7 +12947,7 @@ html.rd-navbar-fixed-linked .page {
 }
 
 .rd-navbar-classic.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-brand img, .rd-navbar-classic.rd-navbar-static.rd-navbar--is-clone .rd-navbar-brand img {
-	max-height: 50px;
+	max-height: 74px;
 }
 
 .rd-navbar-classic.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-nav-item > .rd-navbar-submenu, .rd-navbar-classic.rd-navbar-static.rd-navbar--is-clone .rd-navbar-nav-item > .rd-navbar-submenu {
@@ -13390,8 +13391,8 @@ html.rd-navbar-fixed-linked .page {
 .rd-navbar-corporate.rd-navbar-static .rd-navbar-brand img {
 	width: auto;
 	height: auto;
-	max-width: 200px;
+	max-width: 220px;
-	max-height: 80px;
+	max-height: 110px;
 }
 
 .rd-navbar-corporate.rd-navbar-static .rd-navbar-nav-wrap {

src/app/globals.css

@@ -14,14 +14,22 @@
   --color-colorExt1: #0a0a0a;
   --color-colorExt2:  #ffffff;
   --color-colorExt3: #967244;
-  --color-colorExt4: #31323c;
+  --color-colorext4: #bc986b;
+  --color-colorExt5: #31323c;
   --color-colorHeader: var(--color-colorExt1);
   --color-colorHeaderText: var(--color-colorExt2);
+  --color-colorHeaderTextHover: var(--color-colorext4);
   --color-colorFooter: var(--color-colorExt1);
   --color-colorFooterText: var(--color-colorExt2);
   --color-colorFooterTextHover: var(--color-colorExt3);
   --color-colorFormInput: var(--color-colorExt2);
-  --color-colorContactForm: var(--color-colorExt4);
+  --color-colorContactForm: var(--color-colorExt5);
+}
+
+@layer components {
+  .rd-nav-link-custom {
+    @apply text-colorHeader! lg:text-colorHeaderText! lg:hover:text-colorHeaderTextHover!
+  }
 }
 
 @media (prefers-color-scheme: dark) {

src/app/page.tsx

@@ -1,13 +1,11 @@
-import ContactFormBox from "@/components/ContactFormBox";
 import GoogleReviewBox from "@/components/GoogleReviewBox";
+import Hero from "@/components/Hero";
 import Link from "next/link";
 
 export default function Home() {
   return (
     <>
-      <section className="section bg-[url(/images/bg-header.webp)] flex! flex-row! justify-end!">
+      <Hero />
-        <ContactFormBox />
-      </section>
 
       <section className="section section-lg bg-default">
         <div className="container">

src/components/Hero.tsx

@@ -0,0 +1,9 @@
+import ContactFormBox from "./ContactFormBox";
+
+export default function Hero() {
+  return (
+    <section className="section bg-[url(/images/bg-header2.webp)] flex! flex-row! justify-end!">
+      <ContactFormBox />
+    </section>
+  );
+}

src/components/layouts/Header.tsx

@@ -70,28 +70,30 @@ export default function Header() {
                   <span></span>
                 </button>
 
-                <div className="rd-navbar-brand lg:flex lg:flex-col lg:items-center">
+                <div className="rd-navbar-brand">
                   <a className="brand" href="/">
                     <img
                       className="brand-logo-dark"
-                      src="images/logo-default-142x41.png"
+                      // src="images/logo-default-142x41.png"
+                      src="images/logo2.png"
                       alt=""
                       width="142"
                       height="41"
-                      srcSet="images/logo-default-284x82.png 2x"
+                      srcSet="images/logo2.png 2x"
                     />
                     <img
                       className="brand-logo-light"
-                      src="images/logo-inverse-121x61.png"
+                      // src="images/logo-inverse-121x61.png"\
+                      src="images/logo2.png"
                       alt=""
                       width="121"
                       height="61"
-                      srcSet="images/logo-inverse-284x82.png 2x"
+                      srcSet="images/logo2.png 2x"
                     />
                   </a>
-                  <h3 className="text-colorHeaderText! font-montserrat! font-semibold! hidden lg:inline">
+                  {/* <h3 className="text-colorHeaderText! font-montserrat! font-semibold! hidden lg:inline">
                     Dynamic Realty
-                  </h3>
+                  </h3> */}
                 </div>
               </div>
               <div className="rd-navbar-nav-wrap">
@@ -103,7 +105,7 @@ export default function Header() {
                   </li>
                   <li className="rd-nav-item">
                     <a
-                      className="rd-nav-link"
+                      className="rd-nav-link rd-nav-link-custom"
                       href="https://dynamicrealtyinc.managebuilding.com/Resident/public/rentals"
                       target="_blank"
                     >
@@ -111,17 +113,17 @@ export default function Header() {
                     </a>
                   </li>
                   <li className="rd-nav-item">
-                    <a className="rd-nav-link" href="/">
+                    <a className="rd-nav-link rd-nav-link-custom" href="/">
                       LISTINGS FOR SALE
                     </a>
                   </li>
                   <li className="rd-nav-item">
-                    <a className="rd-nav-link" href="/">
+                    <a className="rd-nav-link rd-nav-link-custom" href="/">
                       LISTINGS FOR RENT
                     </a>
                   </li>
                   <li className="rd-nav-item">
-                    <a className="rd-nav-link" href="/">
+                    <a className="rd-nav-link rd-nav-link-custom" href="/">
                       BLOGS
                     </a>
                   </li>