first commit
This commit is contained in:
Executable
+151
@@ -0,0 +1,151 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const Footer = () => {
|
||||
const currentYear = new Date().getFullYear();
|
||||
return (
|
||||
<>
|
||||
<footer className="pt-100 pb-70">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<div className="footer-item">
|
||||
<div className="footer-contact">
|
||||
<h3>Contact Us</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<i className="icofont-ui-message"></i>
|
||||
<a href="mailto:info@disin.com">info@disin.com</a>
|
||||
<a href="mailto:hello@disin.com">hello@disin.com</a>
|
||||
</li>
|
||||
<li>
|
||||
<i className="icofont-stock-mobile"></i>
|
||||
<a href="tel:+07554332322">Call: +07 554 332 322</a>
|
||||
<a href="tel:+236256256365">Call: +236 256 256 365</a>
|
||||
</li>
|
||||
<li>
|
||||
<i className="icofont-location-pin"></i>
|
||||
210-27 Quadra, Market Street, Victoria Canada
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 col-lg-2">
|
||||
<div className="footer-item">
|
||||
<div className="footer-quick">
|
||||
<h3>Quick Links</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/about">
|
||||
<a>About us</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/about">
|
||||
<a>Blog</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/blog-details">
|
||||
<a>Our Expertise</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/faq">
|
||||
<a>Faq</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/doctor">
|
||||
<a>Doctors</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact">
|
||||
<a>Contact us</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 col-lg-3">
|
||||
<div className="footer-item">
|
||||
<div className="footer-quick">
|
||||
<h3>Our Services</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/service-details">
|
||||
<a>Dental Care</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/service-details">
|
||||
<a>Cardiology</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/service-details">
|
||||
<a>Hijama Therapy</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/service-details">
|
||||
<a>Massage Therapy</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/service-details">
|
||||
<a>Ambluance Sevices</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/service-details">
|
||||
<a>Medicine</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 col-lg-3">
|
||||
<div className="footer-item">
|
||||
<div className="footer-feedback">
|
||||
<h3>Feedback</h3>
|
||||
<form>
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" placeholder="Name" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" placeholder="Phone" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<textarea className="form-control" id="your_message" rows="3" placeholder="Message"></textarea>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<button type="submit" className="btn feedback-btn">SUBMIT</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div className="copyright-area">
|
||||
<div className="container">
|
||||
<div className="copyright-item">
|
||||
<p>Copyright © {currentYear} Design & Developed by <a href="https://hibootstrap.com/" target="_blank">HiBootstrap</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
Executable
+44
@@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
|
||||
const GoTop = ({scrollStepInPx, delayInMs}) => {
|
||||
|
||||
const [thePosition, setThePosition] = React.useState(false);
|
||||
const timeoutRef = React.useRef(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
document.addEventListener("scroll", () => {
|
||||
if (window.scrollY > 170) {
|
||||
setThePosition(true)
|
||||
} else {
|
||||
setThePosition(false);
|
||||
}
|
||||
});
|
||||
}, [])
|
||||
|
||||
const onScrollStep = () => {
|
||||
if (window.pageYOffset === 0){
|
||||
clearInterval(timeoutRef.current);
|
||||
}
|
||||
window.scroll(0, window.pageYOffset - scrollStepInPx);
|
||||
}
|
||||
|
||||
const scrollToTop = () => {
|
||||
timeoutRef.current = setInterval(onScrollStep, delayInMs);
|
||||
}
|
||||
|
||||
const renderGoTopIcon = () => {
|
||||
return (
|
||||
<div className={`go-top ${thePosition ? 'active' : ''}`} onClick={scrollToTop}>
|
||||
<i className='icofont-hand-drawn-up'></i>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{renderGoTopIcon()}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default GoTop;
|
||||
Executable
+24
@@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
import Head from "next/head"
|
||||
import GoTop from './GoTop'
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
return(
|
||||
<>
|
||||
<Head>
|
||||
<title>Disin - React Next Medical Health & Doctors Template</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<meta name="description" content="Disin - React Next Medical Health & Doctors Template" />
|
||||
<meta name="og:title" property="og:title" content="Disin - React Next Medical Health & Doctors Template"></meta>
|
||||
<meta name="twitter:card" content="Disin - React Next Medical Health & Doctors Template"></meta>
|
||||
<link rel="canonical" href="https://disin-react.envytheme.com/"></link>
|
||||
</Head>
|
||||
|
||||
{children}
|
||||
|
||||
<GoTop scrollStepInPx="100" delayInMs="10.50" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
Executable
+258
@@ -0,0 +1,258 @@
|
||||
import React from 'react';
|
||||
import Link from '../../utils/ActiveLink';
|
||||
|
||||
const Navbar = () => {
|
||||
const [menu, setMenu] = React.useState(true)
|
||||
|
||||
const toggleNavbar = () => {
|
||||
setMenu(!menu)
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
let elementId = document.getElementById("navbar");
|
||||
document.addEventListener("scroll", () => {
|
||||
if (window.scrollY > 170) {
|
||||
elementId.classList.add("is-sticky");
|
||||
} else {
|
||||
elementId.classList.remove("is-sticky");
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show';
|
||||
const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right';
|
||||
|
||||
return (
|
||||
<div id="navbar" className="navbar-area sticky-top">
|
||||
<div className="main-nav">
|
||||
<div className="container">
|
||||
<nav className="navbar navbar-expand-md navbar-light">
|
||||
<Link href="/">
|
||||
<a onClick={toggleNavbar} className="navbar-brand">
|
||||
<img src="/images/logo.png" alt="logo" />
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<button
|
||||
onClick={toggleNavbar}
|
||||
className={classTwo}
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span className="icon-bar top-bar"></span>
|
||||
<span className="icon-bar middle-bar"></span>
|
||||
<span className="icon-bar bottom-bar"></span>
|
||||
</button>
|
||||
|
||||
<div className={classOne} id="navbarSupportedContent">
|
||||
<ul className="navbar-nav">
|
||||
<li className="nav-item">
|
||||
<Link href="#" activeClassName="active">
|
||||
<a onClick={e => e.preventDefault()} className="nav-link dropdown-toggle">
|
||||
Home
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<ul className="dropdown-menu">
|
||||
<li className="nav-item">
|
||||
<Link href="/" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Home Demo - 1</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/index-2" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Home Demo - 2</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/index-3" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Home Demo - 3</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/index-4" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Home Demo - 4</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/index-5" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Home Demo - 5</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/about" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">About</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="#">
|
||||
<a onClick={e => e.preventDefault()} className="nav-link dropdown-toggle">
|
||||
Pages
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<ul className="dropdown-menu">
|
||||
<li className="nav-item">
|
||||
<Link href="/appointment" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Appointment</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/departments" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Departments</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/testimonials" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Testimonials</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/sign-up" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Sign Up</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/sign-in" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Sign In</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/faq" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">FAQ's</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/404" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">404 Error Page</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/coming-soon" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Coming Soon</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/privacy-policy" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Privacy Policy</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/terms-condition" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Terms & Conditions</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="#">
|
||||
<a onClick={e => e.preventDefault()} className="nav-link dropdown-toggle">
|
||||
Services
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<ul className="dropdown-menu">
|
||||
<li className="nav-item">
|
||||
<Link href="/services" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Services</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/service-details" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Service Details</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="#">
|
||||
<a onClick={e => e.preventDefault()} className="nav-link dropdown-toggle">
|
||||
Doctors
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<ul className="dropdown-menu">
|
||||
<li className="nav-item">
|
||||
<Link href="/doctors" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Doctors</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/doctor-details" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Doctor Details</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="#">
|
||||
<a onClick={e => e.preventDefault()} className="nav-link dropdown-toggle">
|
||||
Blog
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<ul className="dropdown-menu">
|
||||
<li className="nav-item">
|
||||
<Link href="/blog" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Blog</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/blog-details" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Blog Details</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link href="/contact" activeClassName="active">
|
||||
<a onClick={toggleNavbar} className="nav-link">Contact</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="nav-srh">
|
||||
<form>
|
||||
<input type="text" className="form-control" id="search" placeholder="Search..." />
|
||||
|
||||
<button className="search-icon icon-search">
|
||||
<i className="icofont-search-1"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
Executable
+72
@@ -0,0 +1,72 @@
|
||||
import React from 'react';
|
||||
|
||||
const TopHeader = () => {
|
||||
return (
|
||||
<div className="header-top">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-sm-8 col-lg-9">
|
||||
<div className="header-top-item">
|
||||
<div className="header-top-left">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="tel:+07554332322">
|
||||
<i className="icofont-ui-call"></i>
|
||||
Call : +07 554 332 322
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:hello@disin.com">
|
||||
<i className="icofont-ui-message"></i>
|
||||
hello@disin.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<i className="icofont-location-pin"></i>
|
||||
210-27 Quadra, Canada
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-4 col-lg-3">
|
||||
<div className="header-top-item">
|
||||
<div className="header-top-right">
|
||||
<ul className="lang-list">
|
||||
<li><a href="/">EN</a></li>
|
||||
<li><a href="/ar">AR</a></li>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.facebook.com/" target="_blank">
|
||||
<i className="icofont-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/" target="_blank">
|
||||
<i className="icofont-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/" target="_blank">
|
||||
<i className="icofont-linkedin"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.instagram.com/" target="_blank">
|
||||
<i className="icofont-instagram"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TopHeader;
|
||||
Reference in New Issue
Block a user