Skip to content

Commit

Permalink
new navbar (all issues fixed)
Browse files Browse the repository at this point in the history
  • Loading branch information
@imohit1o1
imohit1o1 committed May 27, 2024
1 parent 286d786 commit e1f8f0b
Show file tree
Hide file tree
Showing 4 changed files with 167 additions and 197 deletions.
123 changes: 70 additions & 53 deletions frontend/src/components/Hero.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,42 +29,47 @@ function Hero() {
// <Slider {...settings}>
// {images.map((image, index) => (
// <div key={index} >
<div className="bg-light_theme w-full h-[90vh] relative md:bg-left-top bg-cover bg-no-repeat bg-center">
<div className="w-full h-full bg-black/20">
<div className="relative max-w-7xl mx-auto flex flex-col items-center md:items-start justify-between lg:px-6 px-3 py-3 h-full">
<div className="absolute top-[50%] translate-y-[-50%] lg:left-[5%] flex flex-col w-fit gap-6 ">
<h1 className="font-medium text-3xl md:text-4xl lg:text-5xl text-black py-2 px-6 ">
HELLO THERE!
<br />
<span className="text-2xl lg:text-4xl md:text-4xl font-medium">Always caring about
</span>
<br/>
<span className="text-2xl lg:text-4xl md:text-4xl font-medium"> your health, we are here to</span>
<br />
<span className="text-2xl lg:text-4xl md:text-4xl font-medium"> help you.</span>
</h1>
<div className="bg-light_theme w-full h-[100vh] relative md:bg-left-top bg-cover bg-no-repeat bg-center">
<div className="w-full h-full bg-black/20 ">
<div className="relative max-w-7xl mx-auto flex flex-col items-center md:items-start justify-between lg:px-6 px-3 py-3 h-[calc(100%_-_8vh)]">
<div className="absolute top-[50%] translate-y-[-50%] lg:left-[5%] flex flex-col w-fit gap-6 ">
<h1 className="font-medium text-3xl md:text-4xl lg:text-5xl text-black py-2 px-6 ">
HELLO THERE!
<br />
<span className="text-2xl lg:text-4xl md:text-4xl font-medium">
Always caring about
</span>
<br />
<span className="text-2xl lg:text-4xl md:text-4xl font-medium">
{" "}
your health, we are here to
</span>
<br />
<span className="text-2xl lg:text-4xl md:text-4xl font-medium">
{" "}
help you.
</span>
</h1>

{/* above medium scrren size button */}
<button
className="rounded-md ml-6 md:flex w-fit items-center px-8 py-4 text-md font-md shadow-sm hover:shadow-lg bg-main_theme hover:bg-onhover text-text gap-4 ">
<img
src="https://images.apollo247.in/images/ic-doctor.svg"
alt="icon"
className="hidden lg:block md:block size-8 "
/>
Book Your Appointment Now
{/* <IoIosArrowForward className="" /> */}
</button>
<button
className="rounded-md ml-6 md:flex w-fit items-center px-8 py-4 text-md font-md shadow-sm hover:shadow-lg bg-main_theme hover:bg-onhover text-text gap-4">
<img
src="https://www.svgrepo.com/download/88732/medicines.svg"
alt="icon"
className="hidden lg:block md:block size-8 "
/>
Buy Medicines and Essentials
</button>
{/* small screen size button
{/* above medium scrren size button */}
<button className="rounded-md ml-6 md:flex w-fit items-center px-8 py-4 text-md font-md shadow-sm hover:shadow-lg bg-main_theme hover:bg-onhover text-text gap-4 ">
<img
src="https://images.apollo247.in/images/ic-doctor.svg"
alt="icon"
className="hidden lg:block md:block size-8 "
/>
Book Your Appointment Now
{/* <IoIosArrowForward className="" /> */}
</button>
<button className="rounded-md ml-6 md:flex w-fit items-center px-8 py-4 text-md font-md shadow-sm hover:shadow-lg bg-main_theme hover:bg-onhover text-text gap-4">
<img
src="https://www.svgrepo.com/download/88732/medicines.svg"
alt="icon"
className="hidden lg:block md:block size-8 "
/>
Buy Medicines and Essentials
</button>
{/* small screen size button
<button className="md:hidden flex w-fit items-center rounded-full px-4 py-4 text-xs font-semibold shadow-sm hover:shadow-md bg-theme text-text ">
<img
src="https://images.apollo247.in/images/ic-doctor.svg"
Expand All @@ -73,25 +78,37 @@ function Hero() {
/>
Book an Appointment <IoIosArrowForward className="ml-2" />
</button> */}
</div>
<img
src={NewHero}
alt="Your Image"
className="hidden md:block absolute top-[50%] right-0 transform -translate-y-1/2 w-1/2 h-auto"
/>
<div className="lg:block hidden absolute top-24 right-96 bg-white border border-gray-300 rounded-lg shadow-lg shadow-lg-right shadow-lg-bottom py-4 px-2 mr-10">
<p className="font-semibold"><span>Stay hydrated, </span><br/><span>Stay healthy</span></p>
</div>
<div className="lg:block hidden absolute top-44 right-12 bg-white border border-gray-300 rounded-lg shadow-lg shadow-lg-right shadow-lg-bottom px-2 py-4 mt-4 ml-4">
<p className="font-semibold"><span>Healthy diet,</span><br/><span>Healthy life</span></p>
</div>

<div className="lg:block hidden absolute bottom-5 right-96 bg-white border border-gray-300 rounded-lg shadow-lg shadow-lg-right shadow-lg-bottom px-6 py-4 mt-4 mr-4">
<p className="font-semibold"><span>Prioritize your </span><br/><span>mental health</span></p>
</div>
</div>
</div>
</div>
<img
src={NewHero}
alt="Your Image"
className="hidden md:block absolute top-[50%] right-0 transform -translate-y-1/2 w-1/2 h-auto"
/>
<div className="lg:block hidden absolute top-24 right-96 bg-white border border-gray-300 rounded-lg shadow-lg shadow-lg-right shadow-lg-bottom py-4 px-2 mr-10">
<p className="font-semibold">
<span>Stay hydrated, </span>
<br />
<span>Stay healthy</span>
</p>
</div>
<div className="lg:block hidden absolute top-44 right-12 bg-white border border-gray-300 rounded-lg shadow-lg shadow-lg-right shadow-lg-bottom px-2 py-4 mt-4 ml-4">
<p className="font-semibold">
<span>Healthy diet,</span>
<br />
<span>Healthy life</span>
</p>
</div>

<div className="lg:block hidden absolute bottom-5 right-96 bg-white border border-gray-300 rounded-lg shadow-lg shadow-lg-right shadow-lg-bottom px-6 py-4 mt-4 mr-4">
<p className="font-semibold">
<span>Prioritize your </span>
<br />
<span>mental health</span>
</p>
</div>
</div>
</div>
</div>
// </div>
// ))}
// </Slider>
Expand Down
Loading

0 comments on commit e1f8f0b

Please sign in to comment.