fix:mobile menu, button hover, navbar alignment

Author: mshalom27

src/components/AboutSection.jsx

@@ -4,7 +4,7 @@ import { siteConfig } from "../config/navbarHero";
 export default function AboutSection() {
   return (
     <section className="bg-white px-4 sm:px-6 md:px-10 lg:px-16 py-12 sm:py-16">
-      <div className="w-full max-w-[1600px] mx-auto flex flex-col md:flex-row items-center justify-between gap-y-10 gap-x-10 md:gap-x-20">
+      <div className="w-full max-w-[1600px] mx-auto flex flex-col md:flex-row items-center justify-between gap-y-10 gap-x-10 xl:gap-x-12 2xl:gap-x-14">
         <div className="w-full max-w-[500px] px-2 md:px-0 mt-10 md:mt-0">
           <img
             src={siteConfig.about.image}
@@ -30,7 +30,7 @@ export default function AboutSection() {
 
           <div className="flex flex-col sm:flex-row sm:justify-center md:justify-start items-center mt-6 gap-4">
             <Button
-              className="bg-white text-blue-600 px-10 shadow-lg py-2 rounded-md border border-black hover:bg-blue-100"
+              className="bg-white text-blue-600 px-10 shadow-lg py-2 rounded-md border border-black transition duration-300 ease-in-out hover:bg-[rgba(6,25,70,1)] hover:text-white"
               style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
             >
               {siteConfig.about.button}

src/components/HeroSection.jsx

@@ -29,13 +29,13 @@ export default function HeroSection() {
 
           <div className="flex flex-col sm:flex-row sm:justify-center md:justify-start items-center mt-6 gap-4">
             <Button
-              className="bg-[rgba(6,25,70,1)] text-white px-14 py-2 rounded-md hover:bg-[rgba(6,25,70,0.9)]"
+              className="bg-[rgba(6,25,70,1)] text-white px-14 py-2 rounded-md transition duration-300 ease-in-out hover:bg-white hover:text-[rgba(6,25,70,1)]"
               style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
             >
               {siteConfig.hero.primaryButton}
             </Button>
             <Button
-              className="bg-transparent text-[rgba(55,115,236,1)] underline-offset-4 hover:underline"
+              className="bg-transparent text-[rgba(55,115,236,1)] underline-offset-4 transition duration-300 ease-in-out hover:bg-[rgba(55,115,236,1)] hover:text-white "
               style={{ fontFamily: "Helvetica, Arial, sans-serif" }}
             >
               {siteConfig.hero.secondaryLink}

src/components/MissionCard.jsx

@@ -1,6 +1,6 @@
 export default function MissionCard({ title, description }) {
   return (
-    <div className="bg-[#0A1440] text-white w-[260px] h-[320px] rounded-md shadow-md flex flex-col justify-center items-center text-center px-6 py-10">
+    <div className="bg-[#0A1440] text-white w-[300px] h-[320px] rounded-md shadow-md flex flex-col justify-center items-center text-center px-6 py-10">
       <h4
         className="font-bold text-[32px] leading-[150%] mb-6"
         style={{ fontFamily: "Helvetica, Arial, sans-serif" }}

src/components/MissionSection.jsx

@@ -4,7 +4,7 @@ import { siteConfig } from "../config/navbarHero";
 export default function MissionSection() {
   return (
     <section className="w-full bg-white py-20 flex justify-center">
-      <div className="max-w-7xl w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 px-4 place-items-center">
+      <div className="w-full max-w-none mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  max-[1250px]:px-6 gap-14 place-items-center">
         {siteConfig.missions.map(({ title, description }, index) => (
           <MissionCard key={index} title={title} description={description} />
         ))}

src/components/Navbar.jsx

@@ -6,7 +6,7 @@ export default function Navbar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
-    <header className="bg-white w-full px-0 min-[900px]:sticky fixed top-0 left-0 z-50 ">
+    <header className="bg-white w-full px-0 min-[1100px]:sticky fixed top-0 left-0 z-50 ">
       <div className="max-w-[1920px] w-screen mx-auto px-4 sm:px-6 md:px-8 lg:px-10 py-3 flex items-center text-black font-['Helvetica'] font-normal text-[20px] leading-[100%] tracking-[-0.015em]">
         <div className="flex items-center space-x-3 min-[900px]:space-x-6 flex-shrink-0">
           <img
@@ -17,7 +17,7 @@ export default function Navbar() {
         </div>
 
         <nav
-          className="hidden min-[900px]:flex flex-grow justify-center space-x-6"
+          className="hidden min-[1100px]:flex absolute left-1/2 transform -translate-x-1/2 justify-center space-x-6"
           style={{ letterSpacing: "-1.5%" }}
         >
           {siteConfig.navigation.links.map((item) => (
@@ -31,17 +31,17 @@ export default function Navbar() {
           ))}
         </nav>
 
-        <div className="hidden min-[900px]:flex items-center space-x-4 text-sm flex-shrink-0">
-          <Button className="border border-black bg-white text-black px-3 py-1.5 text-sm transition-colors hover:bg-blue-50 hover:border-blue-600">
+        <div className="hidden min-[1100px]:flex items-center space-x-4 text-sm flex-shrink-0 ml-auto ">
+          <Button className="border border-black bg-white text-black px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-[rgba(55,115,236,1)] hover:text-white hover:border-none">
             Join Us
           </Button>
-          <Button className="bg-[rgba(6,25,70,1)] text-white px-3 py-1.5 text-sm transition-colors hover:bg-[rgba(6,25,70,0.8)]">
+          <Button className="bg-[rgba(6,25,70,1)] text-white px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-white hover:text-[rgba(6,25,70,1)]">
             Contact Us
           </Button>
         </div>
 
         <button
-          className="min-[900px]:hidden ml-auto flex items-center"
+          className="min-[1100px]:hidden ml-auto flex items-center"
           onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
           aria-label="Toggle menu"
         >
@@ -72,9 +72,9 @@ export default function Navbar() {
       </div>
 
       {mobileMenuOpen && (
-        <div className="min-[900px]:hidden fixed inset-0 bg-white px-6 py-6 z-40 overflow-auto">
+        <div className="min-[1100px]:hidden fixed inset-0 bg-[#173477ec] px-6 py-6 z-40 overflow-auto text-white">
           <button
-            className="absolute top-6 right-6 text-black"
+            className="absolute top-6 right-6 text-white"
             onClick={() => setMobileMenuOpen(false)}
             aria-label="Close menu"
           >
@@ -94,24 +94,24 @@ export default function Navbar() {
             </svg>
           </button>
 
-          <nav className="mt-14 flex flex-col space-y-4">
+          <nav className="mt-14 flex flex-col w-full">
             {siteConfig.navigation.links.map((item) => (
               <a
                 key={item.name}
                 href={item.href}
-                className="text-black text-lg font-semibold hover:text-[rgba(55,115,236,1)]"
+                className="w-full py-4 text-lg font-semibold text-center text-white hover:text-blue-300 transition-colors"
                 onClick={() => setMobileMenuOpen(false)}
               >
                 {item.name}
               </a>
             ))}
           </nav>
 
-          <div className="mt-6 flex space-x-4 border-t border-border pt-4">
-            <Button className="flex-grow border border-black bg-white text-black px-3 py-2">
+          <div className="mt-8 flex flex-col space-y-4 pt-6 w-full">
+            <Button className="w-full border border-white bg-transparent text-white px-4 py-3 text-center text-base transition duration-300 hover:bg-white hover:text-[rgba(6,25,70,1)]">
               Join Us
             </Button>
-            <Button className="flex-grow bg-[rgba(6,25,70,1)] text-white px-3 py-2">
+            <Button className="w-full bg-white text-[rgba(6,25,70,1)] px-4 py-3 text-center text-base transition duration-300 hover:bg-blue-100">
               Contact Us
             </Button>
           </div>