add request audit button (#32)

* add request audit button

* format page

Author: josepchetrit12

app/components/navbar.tsx

@@ -340,7 +340,7 @@ const Navbar: React.FC = () => {
                         <a href="#" className="text-[15px] font-medium leading-[126%] tracking-[-0.01em] text-[#0a0f39] dark:text-[#fafafa] hover:text-[#4e5ee4] dark:hover:text-[#d1d1d1] transition-colors duration-300">
                           {menu.name}
                         </a>
-                        
+
                         <div className={`invisible opacity-0 absolute top-[40px] ${key === 'products' ? 'left-[-224px] min-w-0 max-w-[1200px] w-[calc(100vw-55px)]' :
                           key === 'services' ? 'left-[-337px] min-w-0 max-w-[790px] w-[calc(100vw-55px)]' :
                             'transform -translate-x-1/2 left-1/2 min-w-[500px]'
@@ -349,7 +349,7 @@ const Navbar: React.FC = () => {
                             key === 'services' ? 'before:left-[354px]' :
                               'before:left-1/2 before:-translate-x-1/2'
                             } before:-translate-y-full before:bg-[url('https://7795250.fs1.hubspotusercontent-na1.net/hubfs/7795250/triangle-corner2.svg')] dark:before:bg-[url('https://7795250.fs1.hubspotusercontent-na1.net/hubfs/7795250/triangle-corner-darkest.svg')] before:bg-cover before:bg-no-repeat`}>
-                             {/* Add a hidden pseudo-element to create a hover bridge */}
+                            {/* Add a hidden pseudo-element to create a hover bridge */}
                             <div className="absolute -top-5 left-0 w-full h-5 bg-transparent opacity-0 group-hover:opacity-100"></div>
                             {/* <div className="absolute h-[15px] w-full top-[100%] left-0 bg-transparent"></div> */}
                             <div className="flex justify-between gap-[30px] flex-wrap">
@@ -427,6 +427,17 @@ const Navbar: React.FC = () => {
 
                 {/* Nav Buttons */}
                 <div className="flex items-center gap-2">
+
+                  <div>
+                    <a id="talk_to_an_expert-navbar" className="inline-block py-[7px] px-4 text-[14px] tracking-[-0.02em] rounded-[100px] font-medium leading-[120%] 
+                    text-[#0a0f39] bg-[#fafafa] border border-[#efefef] 
+                    dark:text-[#D8D8D8] dark:bg-transparent 
+                    transition-all duration-200 
+                    hover:bg-[#ededed] hover:text-[rgba(10,15,57,0.8)] 
+                    dark:hover:bg-transparent 
+                    active:bg-[#e1e1e1] whitespace-nowrap text-center"
+                      href="https://www.openzeppelin.com/request?id=talk_to_an_expert-navbar">Request an Audit</a>
+                  </div>
                   <Button variant="ghost" asChild className="text-sm font-medium">
                     {isHowItWorksPage ? (
                       <Link href="/" className="flex items-center gap-2">
@@ -499,6 +510,9 @@ const Navbar: React.FC = () => {
                 </div>
 
                 <ul className={`p-main-nav-mobile-list ${isMenuOpen ? 'block fixed left-0 right-0 bottom-0 overflow-y-auto top-[52px] w-full pt-5 pb-[120px] bg-white dark:bg-[#01030a] z-100' : 'hidden'}`}>
+                  <li className="button-item px-4 max-w-[600px] mx-auto">
+                    <a id="talk_to_an_expert-navbar" className="inline-block w-full py-[10px] px-4 text-[16px] text-center rounded-[100px] font-medium leading-[120%] text-[#0a0f39] bg-[#fafafa] border border-[#efefef] dark:bg-transparent dark:text-[#D8D8D8] transition-all duration-200" href="https://www.openzeppelin.com/request?id=talk_to_an_expert-navbar">Request an Audit</a>
+                  </li>
                   <div className="flex justify-center items-center gap-8 py-2">
                     {/* Docs/Home */}
                     {isHowItWorksPage ? (