Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new hero section #183

Merged
merged 1 commit into from
May 28, 2024
Merged

new hero section #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed frontend/public/Rectangle 5.png
View file
Open in desktop
Binary file not shown.
Binary file added frontend/public/hero.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/herobg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed frontend/public/pexels-fr3nks-287227.jpg
View file
Open in desktop
Binary file not shown.
Binary file removed frontend/public/pexels-fr3nks-305564.jpg
View file
Open in desktop
Binary file not shown.
Binary file removed frontend/public/pexels-karolina-grabowska-4021775.jpg
View file
Open in desktop
Binary file not shown.
Binary file removed frontend/public/pexels-pixabay-40568.jpg
View file
Open in desktop
Binary file not shown.
Binary file added frontend/public/tick.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 12 additions & 21 deletions frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,25 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";

import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Swal from 'sweetalert2'


import AppContext from "./Context/Context.jsx";


import { Navbar, Footer, Home, Appointment, AllDoctors, AboutUs , Login , Signup , ErrorPage} from "./import-export/ImportExport.js";
import {
Navbar,
Footer,
Home,
Appointment,
AllDoctors,
AboutUs,
Login,
Signup,
ErrorPage,
} from "./import-export/ImportExport.js";
import TermsAndConditions from "./pages/TermsAndConditions.jsx";
import PrivacyPolicy from "./pages/PrivacyPolicy.jsx";
import GoToTop from "./components/GoToTop.jsx";

function App() {

useEffect(() => {
Swal.fire({
title: "<strong>Discord Alert !</strong>",
html: `
Alert will be removed once all contributors join the server
`,
showCloseButton: true,
focusConfirm: false,
confirmButtonText: `
<i class="fa fa-thumbs-up"></i> Ok
`,
});
});


return (
<BrowserRouter>
<AppContext>
Expand All @@ -47,7 +38,7 @@ function App() {
<Route path="/signup" element={<Signup />} />
<Route path="/*" element={<ErrorPage />} />
</Routes>
<GoToTop/>
<GoToTop />
<Footer />
<ToastContainer position="top-center" />
</AppContext>
Expand Down
182 changes: 78 additions & 104 deletions frontend/src/components/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,117 +1,91 @@
// eslint-disable-next-line no-unused-vars
import React from "react";
import { IoIosArrowForward } from "react-icons/io";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import NewHero from "/new_hero.png";
function Hero() {
// // Settings for the carousel
// const images = [
// "/heroone.jpg",
// "/anton-8q-U8X1zkvI-unsplash.jpg",
// "/pexels-fr3nks-287227.jpg",
// "/pexels-fr3nks-305564.jpg",
// "/pexels-karolina-grabowska-4021775.jpg",
// "/pexels-pixabay-40568.jpg"
// // Add more image paths here if needed
// ];
// const settings = {
// dots: true,
// infinite: true,
// speed: 500,
// slidesToShow: 1,
// slidesToScroll: 1,
// autoplay: true,
// autoplaySpeed: 700
// };
import { NavLink } from "react-router-dom";
import heroImg from "/hero.png";
import tick from "/tick.png";
import hero from "/new_hero.png";

function Hero() {
return (
// <Slider {...settings}>
// {images.map((image, index) => (
// <div key={index} >
<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>
<div className={`bg-light_theme w-full h-lvh relative `}>
<section className="relative max-w-7xl mx-auto flex flex-col items-center md:items-start justify-center md:justify-between h-full lg:px-6 px-3 py-1">
{/* text container */}
<section className="md:absolute md:top-[50%] md:translate-y-[-50%] md:left-[50%] md:translate-x-[-50%] lg:left-0 lg:translate-x-0 flex flex-col max-w-lg gap-y-6">
{/* heading */}
<h1 className="font-semibold text-3xl md:text-4xl lg:text-5xl text-main_theme tracking-tight">
<span className="text-dark_theme mr-2">Always</span>
<span>caring about your health</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
<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"
alt="icon"
className="hidden mr-2 md:mr-4 size-8"
/>
Book an Appointment <IoIosArrowForward className="ml-2" />
</button> */}
{/* para */}
<p className="text-text_grey mb-6">
MediHub is a platform where you can meet all doctors and buy
essentials in one place.
</p>

{/* ctas */}
<NavLink
to={"/alldoctors"}
className="rounded flex w-fit items-center px-3 md:px-4 py-3 md:py-4 text-md text-md shadow-md hover:shadow-lg bg-main_theme hover:bg-dark_theme text-text gap-2 md:gap-4"
>
<img
src="https://images.apollo247.in/images/ic-doctor.svg"
alt="icon"
className="md:size-7 size-5"
/>
Book Your Appointment Now
</NavLink>
<NavLink
to={"/medicines/all"}
className="rounded flex w-fit items-center px-3 md:px-4 py-3 md:py-4 text-md text-md shadow-md hover:shadow-lg bg-main_theme hover:bg-dark_theme text-text gap-2 md:gap-4"
>
<img
src="https://www.svgrepo.com/download/88732/medicines.svg"
alt="icon"
className="md:size-7 size-5"
/>
Buy Medicines and Essentials
</NavLink>
</section>

{/* image section */}
<section className="hidden absolute top-[50%] translate-y-[-50%] right-[0%] min-w-[700px] md:min-h-[450px] lg:flex items-end justify-center py-4">
{/* image container */}
<div className="overflow-hidden h-fit relative">
<img
src={heroImg}
alt="heroImage"
className="md:w-[500px] object-contain object-top translate-y-[2%]"
/>
</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 className="hidden absolute top-[20%] left-[-3%] bg-white/40 backdrop-filter backdrop-blur-md rounded-md shadow-md px-4 py-4 md:flex items-center gap-3 text-dark_theme ">
<img src={tick} alt="tick" />
<p className="font-semibold">50+ Experienced Doctors</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 className="hidden md:absolute top-[45%] right-[-10%] bg-white/40 backdrop-filter backdrop-blur-md rounded-md shadow-md px-4 py-4 md:flex items-center gap-3 text-dark_theme ">
<img src={tick} alt="tick" />
<p className="font-semibold">20+ Medical Achievements</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 className="absolute bottom-[-5%] left-[-6%] bg-white/40 backdrop-filter backdrop-blur-md rounded-md shadow-md px-6 py-4 flex flex-col items-start text-dark_theme space-y-7">
{/* iamge div */}
<div className="flex items-center gap-4">
<img
src={hero}
alt="hero"
className="w-14 h-14 px-1 py-1 object-cover bg-main_theme/20 backdrop-blur-md rounded-full border border-dark_theme"
/>
<div className="">
<h2 className="font-semibold">Dr.Harish Shukla</h2>
<p className="font-normal text-text_grey/90">Cardiologist</p>
</div>
</div>
<p className="font-semibold text-center">Make Appointment</p>
</div>
</div>
</div>
</section>
</section>
</div>
// </div>
// ))}
// </Slider>
);
}

Expand Down
20 changes: 11 additions & 9 deletions frontend/src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function Navbar() {

// Nav items array
const navItems = [
{ to: "/", label: "Home" },
// { to: "/", label: "Home" },
{ to: "/alldoctors", label: "All Doctors" },
{ to: "/specialities", label: "Specialities" },
{ to: "/medicines", label: "Medicines" },
Expand Down Expand Up @@ -59,8 +59,8 @@ function Navbar() {
];

return (
<div className={"w-full h-16 bg-light_theme fixed top-0 z-50 shadow-md"}>
<div className="max-w-7xl mx-auto flex items-center justify-between lg:px-6 px-3 py-1 h-full">
<div className={"w-full h-16 bg-light_theme/20 fixed top-0 z-50 shadow-md"}>
<div className="max-w-7xl mx-auto flex items-center justify-between lg:px-6 md:px-4 px-3 py-1 h-full">
{/* logo */}
<div className="flex items-center gap-3">
<NavLink to={"/"}>
Expand All @@ -87,7 +87,7 @@ function Navbar() {
>
<NavLink
to={"/login"}
className="text-md font-semibold relative cursor-pointer rounded flex items-center border border-dark_theme text-dark_theme px-3 py-1 gap-2 max-w-[150px]"
className="text-md font-semibold relative cursor-pointer rounded flex items-center border border-dark_theme text-dark_theme px-4 py-2 gap-2 max-w-[150px]"
>
<FaRegCircleUser className="text-dark_theme" />
<span className="truncate">Login</span>
Expand All @@ -96,17 +96,19 @@ function Navbar() {
{/* Dropdown Menus */}
{isDropdownOpen && (
<div
className="absolute left-0 mt-0 w-52 bg-light_theme border border-dark_theme rounded shadow-lg z-50"
className="absolute left-0 mt-0 w-56 bg-light_theme border border-dark_theme rounded shadow-lg z-50"
onMouseEnter={handleMouseEnter}
>
{/* Drop down menu items */}
{dropdownMenus.map((menu, index) => (
<NavLink
key={index}
to={menu.to}
className="flex items-center px-4 py-2 gap-2 text-sm font-medium text-dark_theme hover:bg-main_theme/10"
className="flex items-center px-4 py-3 gap-2 text-sm font-medium text-dark_theme hover:bg-main_theme/10"
>
{menu.icon && <menu.icon className="text-dark_theme" />}{" "}
{menu.icon && (
<menu.icon className="text-dark_theme size-4" />
)}{" "}
{menu.label}
</NavLink>
))}
Expand All @@ -116,8 +118,8 @@ function Navbar() {
</ul>
</div>

<div className="flex gap-3 items-center relative">
<NavLink target="_blank">
<div className="hidden md:flex gap-3 items-center relative">
<NavLink to={"/cartpage"}>
<IoCartOutline className="text-dark_theme size-10 hidden md:block mr-1" />
<div className="absolute bottom-6 left-5 border border-main_theme rounded-full cursor-pointer z-50 bg-main_theme/90 text-light_theme">
<span className="px-2 py-2 text-sm font-medium">7</span>
Expand Down
5 changes: 4 additions & 1 deletion frontend/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,10 @@ export default {
cart_orange: "#FF8945",
text: "#ffffff",
text_grey: "#464646"
}
},
// height:{
// heroHeihgt:"calc"
// }
},
},
plugins: [],
Expand Down