nav bar button align changrd and bento box model images change into svg

src/assets/hero/Frame 4.svg

+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 4">
+<rect width="56" height="56" rx="28" fill="#1E1E1E"/>
+<path id="Vector" d="M28.1852 18.5329C28.5266 18.1917 28.9895 18 29.4721 18C29.9548 18 30.4177 18.1917 30.759 18.5329L38.9502 26.7241C39.2914 27.0654 39.4831 27.5283 39.4831 28.011C39.4831 28.4937 39.2914 28.9566 38.9502 29.2979L30.759 37.489C30.4157 37.8206 29.9559 38.0041 29.4787 37.9999C29.0014 37.9958 28.5449 37.8044 28.2074 37.4669C27.8699 37.1294 27.6785 36.6728 27.6743 36.1956C27.6702 35.7183 27.8536 35.2585 28.1852 34.9152L33.1126 29.8312H15.8203C15.3375 29.8312 14.8745 29.6395 14.5331 29.2981C14.1918 28.9567 14 28.4938 14 28.011C14 27.5282 14.1918 27.0652 14.5331 26.7239C14.8745 26.3825 15.3375 26.1907 15.8203 26.1907H33.1126L28.1852 21.1068C27.844 20.7654 27.6523 20.3025 27.6523 19.8199C27.6523 19.3372 27.844 18.8743 28.1852 18.5329Z" fill="#E9FAFF"/>
+</g>
+</svg>

src/component/bentobox.jsx

 import React from "react";
-import first from "../assets/bento/Frame 20.png";
-import second from "../assets/bento/Frame22.png";
-import third from "../assets/bento/Frame 21.png";
+import first from "../assets/bento/image1.svg";
+import second from "../assets/bento/image3.svg";
+import third from "../assets/bento/image2.svg";
 function Bento() {
     return (
         <>

src/component/navbar.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { FaBars, FaTimes } from "react-icons/fa";
 import backgd from "../assets/hero/hero_section.png";
 import boy from "../assets/hero/vendor_boy_girl.png";
+import arrow from "../assets/hero/Frame 4.svg"; 
 
 function Navbar() {
   const [menuOpen, setMenuOpen] = useState(false);
@@ -12,7 +13,7 @@ function Navbar() {
       style={{ backgroundImage: `url(${backgd})` }}
     >
       {/* Navbar */}
-      <div className="bg-[#28409C] h-[55px] flex items-center justify-between rounded-3xl mx-4 sm:mx-8 top-6 p-4 sm:p-6 relative left-[0px] md:left-[-5px] right-[-5px]  ">
+      <div className="bg-[#28409C] h-[68px] flex items-center justify-between rounded-4xl mx-4 sm:mx-8 top-6 p-6 sm:p-6 relative left-[0px] md:left-[-5px] right-[-5px]  ">
         {/* Logo */}
         <h1 className="text-white font-semibold text-2xl sm:text-3xl">OMPOI</h1>
 
@@ -59,7 +60,7 @@ function Navbar() {
       </div>
 
       {/* Hero Section */}
-      <div className="text-4xl font-bold mt-10 mx-4 sm:mx-10">
+      <div className="text-4xl font-bold mt-20 mx-4 sm:mx-10">
         <div>
           <span className="text-[#FF8C00] text-4xl sm:text-[4rem]">O</span>
           <span className="text-blue-900 text-3xl sm:text-[3rem]">nline</span>{" "}
@@ -73,7 +74,7 @@ function Navbar() {
           <span className="text-[#FF8C00] text-4xl sm:text-[4rem]">I</span>
           <span className="text-blue-900 text-3xl sm:text-[3rem]">ndia</span>
         </div>
-        <div className="text-xl sm:text-2xl font-bold mt-8">
+        <div className="text-[18.78px] sm:text-2xl font-bold mt-8">
           <span className="text-black">
             To bring 'utmost good satisfaction' to our clients by
           </span>
@@ -84,9 +85,10 @@ function Navbar() {
         </div>
         <div className="mt-6">
           <button className="flex items-center gap-2 px-3 py-2 text-black font-semibold bg-orange-300 rounded-full shadow-md hover:bg-orange-400 transition-all duration-300">
-            <span className="text-lg border rounded-[50rem] w-12 h-12 flex items-center justify-center bg-black text-white">
+            <img src={arrow} alt="arrow" />
+            {/*<span className="text-lg border rounded-[50rem] w-12 h-12 flex items-center justify-center bg-black text-white">
               ➜
-            </span>
+            </span>*/}
             Get Started
           </button>
           <div className="flex justify-center md:justify-end mt-6 md:-mt-[300px] ">