resposive navbar

src/components/landing/HeroSection.tsx

@@ -1,66 +1,69 @@
 import { motion } from "framer-motion"
+import HeroImage from "../../../public/heroImg.png"
 
 export function HeroSection() {
   return (
-    <section className="relative flex min-h-screen items-center justify-center overflow-hidden  px-10 md:px-20 py-24 text-white">
+    <section className="relative flex min-h-screen items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-20 py-16 md:py-24 text-white">
       {/* Overlay */}
       <div className="absolute inset-0 bg-black/30 backdrop-blur-[1px]" />
 
-      <div className="relative z-10 mx-auto flex w-full max-w-7xl flex-col items-center justify-between gap-16 md:flex-row">
+      <div className="relative z-10 mx-auto w-full max-w-7xl">
-        {/* Left Text Content */}
+        <div className="flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12">
+          {/* Left Text Content - 40% */}
           <motion.div
             initial={{ opacity: 0, x: -40 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.8, ease: "easeOut" }}
-          className="max-w-xl text-center md:text-left"
+            className="w-full lg:w-2/5 text-center lg:text-left"
           >
             {/* Badge */}
             <motion.div
               initial={{ opacity: 0, scale: 0.9 }}
               animate={{ opacity: 1, scale: 1 }}
               transition={{ delay: 0.2, duration: 0.6 }}
-            className="mb-6 inline-flex items-center justify-center md:justify-start"
+              className="mb-4 md:mb-6 inline-flex items-center justify-center lg:justify-start"
             >
-            <span className="rounded-full border border-white/20 bg-white/10 px-5 py-1.5 text-xs font-medium uppercase tracking-wider backdrop-blur-sm">
+              <span className="rounded-full border border-white/20 bg-white/10 px-4 py-1 text-xs font-medium uppercase tracking-wider backdrop-blur-sm">
                 Affiliate Program
               </span>
             </motion.div>
 
-          {/* Headline */}
+            {/* Headline - Smaller font sizes */}
-          <h1 className="mb-6 text-5xl font-extrabold leading-tight tracking-tight md:text-6xl lg:text-7xl">
+            <h1 className="mb-4 md:mb-6 text-3xl sm:text-4xl md:text-5xl font-extrabold leading-tight tracking-tight">
               Earn <span className="text-white/90">50% Commissions</span> for Every Referral
             </h1>
 
-          {/* Description */}
+            {/* Description - Smaller text */}
-          <p className="mb-10 text-lg leading-relaxed text-white/80 md:text-xl">
+            <p className="mb-6 md:mb-8 text-base md:text-lg leading-relaxed text-white/80">
-            Turn your influence into income. Join Planpost AI’s affiliate program and earn recurring rewards — every month,
+              Turn your influence into income. Join Planpost AI's affiliate program and earn recurring rewards — every month,
               automatically.
             </p>
 
-          {/* Single CTA Button */}
+            {/* CTA Button */}
             <motion.button
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.97 }}
-            className="rounded-lg bg-white px-10 py-4 text-base font-semibold text-[#5543af] shadow-lg transition-all hover:shadow-xl"
+              className="rounded-lg bg-white px-8 py-3 text-sm md:text-base font-semibold text-[#5543af] shadow-lg transition-all hover:shadow-xl"
             >
               Start Earning
             </motion.button>
           </motion.div>
 
-        {/* Right Side Image */}
+          {/* Right Side Image - 60% */}
           <motion.div
             initial={{ opacity: 0, x: 40 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.8, ease: 'easeOut', delay: 0.3 }}
-          className="max-w-xl w-full  flex justify-center"
+            className="w-full lg:w-3/5 flex justify-center items-center"
           >
             <img
-            src="https://media.istockphoto.com/id/948339996/photo/trading-business-the-affiliate-offers-a-profit-model-to-adapt-the-current-competitive-strategy.jpg?s=1024x1024&w=is&k=20&c=zv1JlvtgyiYhEjdLCHB0zsvx435q_VmnG-yYqMXNe50="
+              src={HeroImage}
-            alt="Affiliate Program Illustration"
+              alt="Hero"
-            className="w-full  rounded-2xl shadow-2xl object-cover"
+              className="w-full h-auto max-w-2xl object-cover shadow-2xl rounded-lg"
             />
           </motion.div>
         </div>
+      </div>
     </section>
   )
 }

src/components/landing/Navigation.tsx

@@ -1,51 +1,117 @@
-import { useEffect, useState } from "react"
+import { useState, useEffect, useRef } from "react"
 import { Link } from "react-router-dom"
-
+import { Menu, X } from "lucide-react"
+import BrandLogo from "../../../public/planpost.png"
 export function Navigation() {
   const [scrolled, setScrolled] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    const handleScroll = () => {
+    const handleScroll = () => setScrolled(window.scrollY > 30)
-      if (window.scrollY > 30) {
-        setScrolled(true)
-      } else {
-        setScrolled(false)
-      }
-    }
     window.addEventListener("scroll", handleScroll)
     return () => window.removeEventListener("scroll", handleScroll)
   }, [])
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setMenuOpen(false)
+      }
+    }
+    if (menuOpen) document.addEventListener("mousedown", handleClickOutside)
+    else document.removeEventListener("mousedown", handleClickOutside)
+    return () => document.removeEventListener("mousedown", handleClickOutside)
+  }, [menuOpen])
+
   return (
     <nav
       className={`fixed top-3 left-1/2 z-50 -translate-x-1/2 transition-all duration-500 ease-in-out rounded-2xl border border-white/10 backdrop-blur-md shadow-lg ${
         scrolled
-          ? "bg-[#5543af]/90 w-[50%] max-w-4xl py-2"
+          ? "bg-[#5543af]/90 w-[90%] sm:w-[70%] md:w-[50%] py-2"
-          : "bg-[#5543af]/80 w-[90%] max-w-7xl py-3"
+          : "bg-[#5543af]/80 w-[90%] sm:w-[90%] md:w-[90%] py-3"
       }`}
     >
-      <div className="flex items-center justify-between px-8 transition-all duration-300">
+      <div className="flex items-center justify-between px-6 sm:px-8">
         {/* Logo */}
         <Link to="/" className="flex items-center gap-2">
           <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-[#8529e0] to-[#9d2ec8]">
-            <span className="text-sm font-bold text-white">P</span>
+            <img src={BrandLogo} alt="" />
           </div>
           <span className="text-lg font-semibold text-white">Planpost Affiliate</span>
         </Link>
 
-        <div className="flex items-center gap-8">
+        {/* Desktop Links */}
+        <div className="hidden md:flex items-center gap-4">
           <Link
             to="/login"
-            className="rounded-lg border border-white/40  px-4 py-2 text-sm font-medium text-white hover:bg-white/20 transition-all"
+            style={{
-            style={{color:"white"}}
+              borderRadius: "0.5rem",
+              border: "1px solid rgba(255,255,255,0.4)",
+              padding: "0.5rem 1rem",
+              fontSize: "0.875rem",
+              fontWeight: 500,
+              color: "#ffffff",
+            }}
           >
             Login
           </Link>
-
           <Link
             to="/signup"
-            className="rounded-lg bg-white  px-4 py-2 text-sm font-semibold hover:opacity-90 transition-opacity"
+            style={{
-            style={{color:"#5d4ab2"}}
+              borderRadius: "0.5rem",
+              padding: "0.5rem 1rem",
+              fontSize: "0.875rem",
+              fontWeight: 600,
+              backgroundColor: "#ffffff",
+              color: "#5d4ab2",
+            }}
+          >
+            Try Free
+          </Link>
+        </div>
+
+        {/* Mobile Hamburger */}
+        <div className="md:hidden flex items-center z-50">
+          <button onClick={() => setMenuOpen(!menuOpen)}>
+            {menuOpen ? <X className="w-6 h-6 bg-[#3c2f7b] text-white  "  /> : <Menu className="w-6 h-6 bg-[#3c2f7b] text-white border border-yellow-400" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      <div
+        ref={menuRef}
+        className={`md:hidden transition-max-height duration-300 overflow-hidden ${
+          menuOpen ? "max-h-40 mt-2" : "max-h-0"
+        }`}
+      >
+        <div className="flex flex-col gap-2 px-6 pb-4 bg-[#5543af]/95 rounded-b-2xl">
+          <Link
+            to="/login"
+            style={{
+              borderRadius: "0.5rem",
+              border: "1px solid rgba(255,255,255,0.4)",
+              padding: "0.5rem 1rem",
+              fontSize: "0.875rem",
+              fontWeight: 500,
+              color: "#ffffff",
+            }}
+            onClick={() => setMenuOpen(false)}
+          >
+            Login
+          </Link>
+          <Link
+            to="/signup"
+            style={{
+              borderRadius: "0.5rem",
+              padding: "0.5rem 1rem",
+              fontSize: "0.875rem",
+              fontWeight: 600,
+              backgroundColor: "#ffffff",
+              color: "#5d4ab2",
+            }}
+            onClick={() => setMenuOpen(false)}
           >
             Try Free
           </Link>