first commit
This commit is contained in:
Executable
+84
@@ -0,0 +1,84 @@
|
||||
import React from 'react';
|
||||
|
||||
const AppointmentForm = () => {
|
||||
return (
|
||||
<div className="appointment-area ptb-100 plr-15">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="appointment-item">
|
||||
<h2>Book your appointment</h2>
|
||||
<span>We will confirm your appointment within 2 hours</span>
|
||||
|
||||
<div className="appointment-form">
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group">
|
||||
<i className="icofont-business-man-alt-1"></i>
|
||||
<label>Name</label>
|
||||
<input type="text" className="form-control" placeholder="Enter Your Name" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group">
|
||||
<i className="icofont-ui-message"></i>
|
||||
<label>Email</label>
|
||||
<input type="email" className="form-control" placeholder="Enter Your Email" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group">
|
||||
<i className="icofont-ui-call"></i>
|
||||
<label>Phone</label>
|
||||
<input type="text" className="form-control" placeholder="Enter Your Number" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group">
|
||||
<i className="icofont-hospital"></i>
|
||||
<label>Services</label>
|
||||
<select className="form-control" id="exampleFormControlSelect1">
|
||||
<option>Dental Care</option>
|
||||
<option>Neurology</option>
|
||||
<option>Cardiology</option>
|
||||
<option>Pathology</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group">
|
||||
<i className="icofont-doctor"></i>
|
||||
<label>Doctor</label>
|
||||
<select className="form-control" id="exampleFormControlSelect2">
|
||||
<option>Choose Your Doctor</option>
|
||||
<option>John Smith</option>
|
||||
<option>Sarah Taylor</option>
|
||||
<option>Stevn King</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group">
|
||||
<i className="icofont-business-man"></i>
|
||||
<label>Age</label>
|
||||
<input type="text" className="form-control" placeholder="Your Age" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<button type="submit" className="btn appointment-btn">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AppointmentForm;
|
||||
Executable
+98
@@ -0,0 +1,98 @@
|
||||
import React from 'react';
|
||||
|
||||
const AppointmentFormTwo = () => {
|
||||
return (
|
||||
<div className="appointment-area-three">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="row m-0">
|
||||
<div className="col-lg-7">
|
||||
<div className="appointment-item appointment-item-two">
|
||||
<h2>Book your appointment</h2>
|
||||
<span>We will confirm your appointment within 2 hours</span>
|
||||
|
||||
<div className="appointment-form">
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group">
|
||||
<i className="icofont-business-man-alt-1"></i>
|
||||
<label>Name</label>
|
||||
<input type="text" className="form-control" placeholder="Enter Your Name" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group">
|
||||
<i className="icofont-ui-message"></i>
|
||||
<label>Email</label>
|
||||
<input type="email" className="form-control" placeholder="Enter Your Email" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group">
|
||||
<i className="icofont-ui-call"></i>
|
||||
<label>Phone</label>
|
||||
<input type="text" className="form-control" placeholder="Enter Your Number" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group">
|
||||
<i className="icofont-hospital"></i>
|
||||
<label>Services</label>
|
||||
<select className="form-control" id="exampleFormControlSelect1">
|
||||
<option>Dental Care</option>
|
||||
<option>Pathology</option>
|
||||
<option>Diagnosis</option>
|
||||
<option>Neurology</option>
|
||||
<option>Cardiology</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group">
|
||||
<i className="icofont-doctor"></i>
|
||||
<label>Doctor</label>
|
||||
<input type="text" className="form-control" placeholder="Choose Your Doctor" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form-group">
|
||||
<i className="icofont-business-man"></i>
|
||||
<label>Age</label>
|
||||
<input type="text" className="form-control" placeholder="Your Age" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<button type="submit" className="btn appointment-btn">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-5 pr-0">
|
||||
<div className="speciality-item speciality-right speciality-right-two speciality-right-three">
|
||||
<img src="/images/doctors/doctor4.jpg" alt="Doctor" />
|
||||
|
||||
<div className="speciality-emergency">
|
||||
<div className="speciality-icon">
|
||||
<i className="icofont-ui-call"></i>
|
||||
</div>
|
||||
<h3>Emergency Call</h3>
|
||||
<p>+07 554 332 322</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AppointmentFormTwo;
|
||||
Executable
+140
@@ -0,0 +1,140 @@
|
||||
import React from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
const ModalVideo = dynamic(() => import('react-modal-video'), {
|
||||
ssr: false
|
||||
});
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionItemHeading,
|
||||
AccordionItemPanel,
|
||||
AccordionItemButton
|
||||
} from 'react-accessible-accordion';
|
||||
|
||||
const FaqSection = () => {
|
||||
// Popup Video
|
||||
const [isOpen, setIsOpen] = React.useState(true);
|
||||
const openModal = () => {
|
||||
setIsOpen(!isOpen);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div className="faq-area-two ptb-100">
|
||||
<div className="faq-shape">
|
||||
<img src="/images/faq-shape1.png" alt="Faq" />
|
||||
<img src="/images/faq-shape2.png" alt="Faq" />
|
||||
</div>
|
||||
|
||||
<div className="container">
|
||||
<div className="section-title">
|
||||
<h2>Frequently Asked & Queastions</h2>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="faq-img">
|
||||
<img src="/images/faq-main.jpg" alt="Faq" />
|
||||
|
||||
<div
|
||||
onClick={e => {e.preventDefault(); openModal()}}
|
||||
className="popup-youtube"
|
||||
>
|
||||
<i className="icofont-ui-play"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<Accordion allowZeroExpanded preExpanded={['a']}>
|
||||
<AccordionItem uuid="a">
|
||||
<AccordionItemHeading>
|
||||
<AccordionItemButton>
|
||||
<span>
|
||||
What is the source of the virus?
|
||||
</span>
|
||||
</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
<AccordionItemPanel>
|
||||
<p>
|
||||
Coronaviruses are a large family of viruses. Some cause illness in people, and others, such as canine and feline coronaviruses, only infect animals. Rarely, animal coronaviruses that infect animals have emerged to infect people and can spread between people
|
||||
</p>
|
||||
</AccordionItemPanel>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem uuid="b">
|
||||
<AccordionItemHeading>
|
||||
<AccordionItemButton>
|
||||
<span>
|
||||
How does the virus spread?
|
||||
</span>
|
||||
</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
<AccordionItemPanel>
|
||||
<p>
|
||||
Coronaviruses are a large family of viruses. Some cause illness in people, and others, such as canine and feline coronaviruses, only infect animals. Rarely, animal coronaviruses that infect animals have emerged to infect people and can spread between people
|
||||
</p>
|
||||
</AccordionItemPanel>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem uuid="c">
|
||||
<AccordionItemHeading>
|
||||
<AccordionItemButton>
|
||||
<span>
|
||||
Who has had COVID-19 spread the illness to others?
|
||||
</span>
|
||||
</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
<AccordionItemPanel>
|
||||
<p>
|
||||
Coronaviruses are a large family of viruses. Some cause illness in people, and others, such as canine and feline coronaviruses, only infect animals. Rarely, animal coronaviruses that infect animals have emerged to infect people and can spread between people
|
||||
</p>
|
||||
</AccordionItemPanel>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem uuid="d">
|
||||
<AccordionItemHeading>
|
||||
<AccordionItemButton>
|
||||
<span>
|
||||
Will warm weather stop the outbreak of COVID-19?
|
||||
</span>
|
||||
</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
<AccordionItemPanel>
|
||||
<p>
|
||||
Coronaviruses are a large family of viruses. Some cause illness in people, and others, such as canine and feline coronaviruses, only infect animals. Rarely, animal coronaviruses that infect animals have emerged to infect people and can spread between people
|
||||
</p>
|
||||
</AccordionItemPanel>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem uuid="e">
|
||||
<AccordionItemHeading>
|
||||
<AccordionItemButton>
|
||||
<span>
|
||||
What is community spread?
|
||||
</span>
|
||||
</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
<AccordionItemPanel>
|
||||
<p>
|
||||
Coronaviruses are a large family of viruses. Some cause illness in people, and others, such as canine and feline coronaviruses, only infect animals. Rarely, animal coronaviruses that infect animals have emerged to infect people and can spread between people
|
||||
</p>
|
||||
</AccordionItemPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* If you want to change the video need to update videoID */}
|
||||
<ModalVideo
|
||||
channel='youtube'
|
||||
isOpen={!isOpen}
|
||||
videoId='bk7McNUjWgw'
|
||||
onClose={() => setIsOpen(!isOpen)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default FaqSection;
|
||||
Executable
+117
@@ -0,0 +1,117 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const LatestBlogPost = () => {
|
||||
return (
|
||||
<div className="blog-area pt-100 pb-70">
|
||||
<div className="container">
|
||||
<div className="section-title">
|
||||
<h2>Our Latest Blogs</h2>
|
||||
</div>
|
||||
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-item">
|
||||
<div className="blog-top">
|
||||
<Link href="/blog-details">
|
||||
<a>
|
||||
<img src="/images/blog/blog1.jpg" alt="Blog" />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="blog-bottom">
|
||||
<h3>
|
||||
<Link href="/blog-details">
|
||||
<a>In this hospital there are special surgeon</a>
|
||||
</Link>
|
||||
</h3>
|
||||
<p>Lorem ipsum is dolor sit amet, csectetur adipiscing elit, dolore smod tempor incididunt ut labore et..</p>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/blog-details">
|
||||
<a>
|
||||
Read More <i className="icofont-long-arrow-right"></i>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<i className="icofont-calendar"></i>
|
||||
Jan 03, 2020
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-item">
|
||||
<div className="blog-top">
|
||||
<Link href="/blog-details">
|
||||
<a>
|
||||
<img src="/images/blog/blog2.jpg" alt="Blog" />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="blog-bottom">
|
||||
<h3>
|
||||
<Link href="/blog-details">
|
||||
<a>World AIDS Day, designated on 1 December</a>
|
||||
</Link>
|
||||
</h3>
|
||||
<p>Lorem ipsum is dolor sit amet, csectetur adipiscing elit, dolore smod tempor incididunt ut labore et..</p>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/blog-details">
|
||||
<a>
|
||||
Read More <i className="icofont-long-arrow-right"></i>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<i className="icofont-calendar"></i>
|
||||
Jan 03, 2020
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<div className="blog-item">
|
||||
<div className="blog-top">
|
||||
<Link href="/blog-details">
|
||||
<a>
|
||||
<img src="/images/blog/blog3.jpg" alt="Blog" />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="blog-bottom">
|
||||
<h3>
|
||||
<Link href="/blog-details">
|
||||
<a>More than 80 clinical trials launch to test coronavirus</a>
|
||||
</Link>
|
||||
</h3>
|
||||
<p>Lorem ipsum is dolor sit amet, csectetur adipiscing elit, dolore smod tempor incididunt ut labore et..</p>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/blog-details">
|
||||
<a>
|
||||
Read More <i className="icofont-long-arrow-right"></i>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<i className="icofont-calendar"></i>
|
||||
Jan 03, 2020
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LatestBlogPost;
|
||||
Executable
+33
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
|
||||
const NewsletterForm = () => {
|
||||
return (
|
||||
<div className="newsletter-area ptb-100">
|
||||
<div className="container">
|
||||
<div className="row newsletter-wrap align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="newsletter-item">
|
||||
<h2>Join Our Newsletter</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="newsletter-item">
|
||||
<div className="newsletter-form">
|
||||
<form className="newsletter-form">
|
||||
<input type="email" className="form-control" placeholder="Enter Your Email" name="EMAIL" required />
|
||||
|
||||
<button className="btn newsletter-btn" type="submit">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NewsletterForm;
|
||||
Executable
+81
@@ -0,0 +1,81 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const OurDoctors = () => {
|
||||
return (
|
||||
<div className="doctors-area ptb-100">
|
||||
<div className="container">
|
||||
<div className="section-title">
|
||||
<h2>Meet Our Doctors</h2>
|
||||
</div>
|
||||
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<div className="doctor-item">
|
||||
<div className="doctor-top">
|
||||
<img src="/images/doctors/doctor1.jpg" alt="Doctor" />
|
||||
<Link href="/appointment">
|
||||
<a>Get Appointment</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="doctor-bottom">
|
||||
<h3>
|
||||
<Link href="/doctor-details">
|
||||
<a>Dr. Babatunde</a>
|
||||
</Link>
|
||||
</h3>
|
||||
<span>Neurosurgeon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<div className="doctor-item">
|
||||
<div className="doctor-top">
|
||||
<img src="/images/doctors/doctor2.jpg" alt="Doctor" />
|
||||
<Link href="/appointment">
|
||||
<a>Get Appointment</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="doctor-bottom">
|
||||
<h3>
|
||||
<Link href="/doctor-details">
|
||||
<a>Dr. Addision Smith</a>
|
||||
</Link>
|
||||
</h3>
|
||||
<span>Neurosurgeon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<div className="doctor-item">
|
||||
<div className="doctor-top">
|
||||
<img src="/images/doctors/doctor3.jpg" alt="Doctor" />
|
||||
<Link href="/appointment">
|
||||
<a>Get Appointment</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="doctor-bottom">
|
||||
<h3>
|
||||
<Link href="/doctor-details">
|
||||
<a>Dr. Sarah Tylor</a>
|
||||
</Link>
|
||||
</h3>
|
||||
<span>Dental Surgeon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="doctor-btn">
|
||||
<Link href="/doctor-details">
|
||||
<a>See All</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default OurDoctors;
|
||||
Executable
+26
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const PageBanner = ({pageTitle, homePageUrl, homePageText, activePageText, bgImage}) => {
|
||||
return (
|
||||
<div className={`page-title-area ${bgImage}`}>
|
||||
<div className="d-table">
|
||||
<div className="d-table-cell">
|
||||
<div className="page-title-item">
|
||||
<h2>{pageTitle}</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href={homePageUrl}>
|
||||
<a>{homePageText}</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="active">{activePageText}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PageBanner;
|
||||
Executable
+69
@@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
const OwlCarousel = dynamic(import('react-owl-carousel3'));
|
||||
|
||||
const options = {
|
||||
items:1,
|
||||
loop:true,
|
||||
margin:0,
|
||||
nav: true,
|
||||
dots: false,
|
||||
autoplay:false,
|
||||
autoplayHoverPause:true,
|
||||
navText: [
|
||||
"<i class='icofont-simple-left'></i>",
|
||||
"<i class='icofont-simple-right'></i>"
|
||||
],
|
||||
};
|
||||
|
||||
const TestimonialSlider = () => {
|
||||
const [display, setDisplay] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
setDisplay(true);
|
||||
}, [])
|
||||
return (
|
||||
<div className="review-area ptb-100">
|
||||
<div className="container">
|
||||
{display ? <OwlCarousel
|
||||
className="feedback-slider owl-carousel owl-theme"
|
||||
{...options}
|
||||
>
|
||||
<div className="feedback-item">
|
||||
<div className="client-img">
|
||||
<img src="/images/clients/client1.png" alt="Feedback" />
|
||||
<h3>Adision Smith</h3>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra</p>
|
||||
</div>
|
||||
|
||||
<div className="feedback-item">
|
||||
<div className="client-img">
|
||||
<img src="/images/clients/client2.png" alt="Feedback" />
|
||||
<h3>John Cena</h3>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra</p>
|
||||
</div>
|
||||
|
||||
<div className="feedback-item">
|
||||
<div className="client-img">
|
||||
<img src="/images/clients/client3.png" alt="Feedback" />
|
||||
<h3>Mac Smith</h3>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra</p>
|
||||
</div>
|
||||
|
||||
<div className="feedback-item">
|
||||
<div className="client-img">
|
||||
<img src="/images/clients/client4.png" alt="Feedback" />
|
||||
<h3>Shane Watson</h3>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra</p>
|
||||
</div>
|
||||
</OwlCarousel> : ''}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TestimonialSlider;
|
||||
Executable
+157
@@ -0,0 +1,157 @@
|
||||
import React from 'react';
|
||||
import { resetIdCounter, Tab, Tabs, TabList, TabPanel } from 'react-tabs';
|
||||
resetIdCounter();
|
||||
import dynamic from 'next/dynamic';
|
||||
const ModalVideo = dynamic(() => import('react-modal-video'), {
|
||||
ssr: false
|
||||
});
|
||||
|
||||
const VideoIntro = () => {
|
||||
// Popup Video
|
||||
const [isOpen, setIsOpen] = React.useState(true);
|
||||
const openModal = () => {
|
||||
setIsOpen(!isOpen);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div className="video-wrap">
|
||||
<Tabs>
|
||||
<TabPanel>
|
||||
<div className="video-area">
|
||||
<div className="d-table">
|
||||
<div className="d-table-cell">
|
||||
<div className="container">
|
||||
<div className="video-item">
|
||||
<div
|
||||
onClick={e => {e.preventDefault(); openModal()}}
|
||||
className="popup-youtube"
|
||||
>
|
||||
<i className="icofont-ui-play"></i>
|
||||
</div>
|
||||
|
||||
<div className="video-content">
|
||||
<h3>Hospital Introduction</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
<div className="video-area">
|
||||
<div className="d-table">
|
||||
<div className="d-table-cell">
|
||||
<div className="container">
|
||||
<div className="video-item">
|
||||
<div
|
||||
onClick={e => {e.preventDefault(); openModal()}}
|
||||
className="popup-youtube"
|
||||
>
|
||||
<i className="icofont-ui-play"></i>
|
||||
</div>
|
||||
|
||||
<div className="video-content">
|
||||
<h3>About Our Pharmacy</h3>
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
<div className="video-area">
|
||||
<div className="d-table">
|
||||
<div className="d-table-cell">
|
||||
<div className="container">
|
||||
<div className="video-item">
|
||||
<div
|
||||
onClick={e => {e.preventDefault(); openModal()}}
|
||||
className="popup-youtube"
|
||||
>
|
||||
<i className="icofont-ui-play"></i>
|
||||
</div>
|
||||
<div className="video-content">
|
||||
<h3>Our reasearch center and lab</h3>
|
||||
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
<div className="video-area">
|
||||
<div className="d-table">
|
||||
<div className="d-table-cell">
|
||||
<div className="container">
|
||||
<div className="video-item">
|
||||
<div
|
||||
onClick={e => {e.preventDefault(); openModal()}}
|
||||
className="popup-youtube"
|
||||
>
|
||||
<i className="icofont-ui-play"></i>
|
||||
</div>
|
||||
<div className="video-content">
|
||||
<h3>CCU & ICU</h3>
|
||||
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
<div className="video-area">
|
||||
<div className="d-table">
|
||||
<div className="d-table-cell">
|
||||
<div className="container">
|
||||
<div className="video-item">
|
||||
<div
|
||||
onClick={e => {e.preventDefault(); openModal()}}
|
||||
className="popup-youtube"
|
||||
>
|
||||
<i className="icofont-ui-play"></i>
|
||||
</div>
|
||||
<div className="video-content">
|
||||
<h3>Our Doctors</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<TabList>
|
||||
<Tab>Hospital Introduction</Tab>
|
||||
<Tab>Pharmacy</Tab>
|
||||
<Tab>Reasearch & Lab</Tab>
|
||||
<Tab>CCU & ICU</Tab>
|
||||
<Tab>Doctors</Tab>
|
||||
</TabList>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
{/* If you want to change the video need to update videoID */}
|
||||
<ModalVideo
|
||||
channel='youtube'
|
||||
isOpen={!isOpen}
|
||||
videoId='bk7McNUjWgw'
|
||||
onClose={() => setIsOpen(!isOpen)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default VideoIntro;
|
||||
Reference in New Issue
Block a user