diff --git a/navbar.jsx b/navbar.jsx deleted file mode 100644 index 70eec83874d560ddc3c826ba12febaf4d7b4d27e..0000000000000000000000000000000000000000 --- a/navbar.jsx +++ /dev/null @@ -1,104 +0,0 @@ -import React, { useState } from "react"; -import { FaBars, FaTimes } from "react-icons/fa"; -import backgd from "./hero_section.png"; -import boy from "./vendor_boy_girl.png"; - -function Navbar() { - const [menuOpen, setMenuOpen] = useState(false); - - return ( - <div - className="min-h-screen bg-cover" - style={{ backgroundImage: `url(${backgd})` }} - > - {/* Navbar */} - <div className="bg-[#28409C] h-[55px] flex items-center justify-between rounded-3xl mx-4 sm:mx-8 mt-6 p-4 sm:p-6 relative"> - {/* Logo */} - <h1 className="text-white font-semibold text-2xl sm:text-3xl">OMPOI</h1> - - {/* Hamburger Menu Icon (Visible on small screens) */} - <div - className="md:hidden cursor-pointer text-white text-2xl" - onClick={() => setMenuOpen(!menuOpen)} - > - {menuOpen ? <FaTimes /> : <FaBars />} - </div> - - {/* Navigation Menu */} - <div - className={`absolute md:static top-16 right-0 w-full bg-transparent backdrop-filter backdrop-blur-md md:bg-transparent transition-transform duration-100 ease-in-out ${ - menuOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0" - }`} - > - <nav className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-12 py-4 md:py-0"> - <a - className="text-black md:text-white font-bold text-lg md:text-2xl hover:text-[#FFBD69] transition-colors duration-300" - href="#" - > - Home - </a> - <a - className="text-black md:text-white font-bold text-lg md:text-2xl hover:text-[#FFBD69] transition-colors duration-300" - href="#" - > - Profile - </a> - <a - className="text-black md:text-white font-bold text-lg md:text-2xl hover:text-[#FFBD69] transition-colors duration-300" - href="#" - > - Contact - </a> - </nav> - </div> - - {/* Get Started Button */} - <button className="hidden md:block bg-[#FFBD69] text-black font-bold text-sm md:text-base rounded-lg w-[160px] h-[37px] hover:bg-yellow-400 transition-colors duration-300"> - Get Started - </button> - </div> - - {/* Hero Section */} - <div className="text-4xl font-bold mt-10 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>{" "} - <span className="text-[#FF8C00] text-4xl sm:text-[4rem]">M</span> - <span className="text-blue-900 text-3xl sm:text-[3rem]">arket</span>{" "} - <span className="text-[#FF8C00] text-4xl sm:text-[4rem]">P</span> - <span className="text-blue-900 text-3xl sm:text-[3rem]">lace</span>{" "} - <br /> - <span className="text-[#FF8C00] text-4xl sm:text-[4rem]">O</span> - <span className="text-blue-900 text-3xl sm:text-[3rem]">f</span>{" "} - <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"> - <span className="text-black"> - To bring 'utmost good satisfaction' to our clients by - </span> - <br /> - <span className="text-black"> - offering right products at competitive rates - </span> - </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"> - ➜ - </span> - Get Started - </button> - <div className="flex justify-center md:justify-end mt-6 md:-mt-[300px] "> - <div className=" "> - <img src={boy} alt="Vendor" className="size-[350px] md:size-[550px] " /> - </div> - </div> - </div> - - </div> - </div> - ); -} - -export default Navbar;