Hedaer top transprent updated new banners updated

This commit is contained in:
akash 2025-09-20 17:17:05 +05:30
parent b21e729bf5
commit 7eefd03dba
34 changed files with 269 additions and 247 deletions

View File

@ -10,7 +10,7 @@ export const metadata = {
export default function AboutPage() {
return (
<Layout
headerStyle={2}
headerStyle={1}
footerStyle={1}
breadcrumbTitle="About Us"
bannerImage="/assets/images/about-us/about-us-banner.webp"

View File

@ -33,7 +33,7 @@ export default function AccidentDetailsPage({ params }) {
return (
<Layout
headerStyle={2}
headerStyle={1}
footerStyle={1}
breadcrumbTitle={`${service.title}`}
bannerImage={service.bannerImage}

View File

@ -10,7 +10,7 @@ export const metadata = {
export default function AccidentPage() {
return (
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Accident" bannerImage="/assets/images/accident/accident-banner.webp">
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Accident" bannerImage="/assets/images/accident/accident-banner.webp">
<section className="service-section sec-pad-2">
<div className="auto-container">
<div className="row clearfix">

View File

@ -34,7 +34,7 @@ export default function AreaOfInjuryDetails({ params }) {
return (
<Layout
headerStyle={2}
headerStyle={1}
footerStyle={1}
breadcrumbTitle={service.title}
bannerImage={service.bannerImage}

View File

@ -10,7 +10,7 @@ export const metadata = {
export default function AreaOfInjury() {
return (
<Layout
headerStyle={2}
headerStyle={1}
footerStyle={1}
breadcrumbTitle="Areas of Injury"
bannerImage="/assets/images/areas-of-injury/area-of-injury-banner.webp"

View File

@ -36,7 +36,7 @@ export default function BlogDetails({ params }) {
return (
<Layout
headerStyle={2}
headerStyle={1}
footerStyle={1}
breadcrumbTitle={blog.title}
bannerImage={blog.bannerImage}

View File

@ -10,7 +10,7 @@ export const metadata = {
export default function Blog() {
return (
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Blog" bannerImage="/assets/images/blog/blog-banner.webp">
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Blog" bannerImage="/assets/images/blog/blog-banner.webp">
<section className="news-section sec-pad">
<div className="auto-container">
<div className="sec-title mb_50 centred">

View File

@ -24,7 +24,7 @@ export default function Home() {
}
return (
<>
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Caregivers" bannerImage="/assets/images/caregivers/caregivers-banner.webp">
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Caregivers" bannerImage="/assets/images/caregivers/caregivers-banner.webp">
<section className="feature-section pt_90 pb_90">
<div className="shape" style={{ backgroundImage: 'url(/assets/images/shape/shape-6.png)' }}></div>
<div className="auto-container">

View File

@ -10,7 +10,7 @@ export const metadata = {
export default function ContactPage() {
return (
<Layout
headerStyle={2}
headerStyle={1}
footerStyle={1}
breadcrumbTitle="Contact Us"
bannerImage="/assets/images/contact/contact-us-banner.webp"

View File

@ -10,7 +10,7 @@ export const metadata = {
export default function CovidPage() {
return (
<Layout
headerStyle={2}
headerStyle={1}
footerStyle={1}
breadcrumbTitle="COVID-19 Updates"
bannerImage="/assets/images/covid/covid-19-banner.webp"

View File

@ -34,7 +34,7 @@ export default function ServiceDetailPage({ params }) {
}
return (
<Layout headerStyle={2} footerStyle={1}
<Layout headerStyle={1} footerStyle={1}
breadcrumbTitle={service.shortTitle}
bannerImage={service.bannerImage}>
<ServiceDetailClient slug={slug} service={service} servicesList={servicesList} />

View File

@ -10,7 +10,7 @@ export const metadata = {
export default function ServicesPage() {
return (
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Services"
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Services"
bannerImage="/assets/images/areas-of-injury/area-of-injury-banner.webp">
<section className="service-section sec-pad-2">
<div className="auto-container">

View File

@ -10,7 +10,7 @@ export const metadata = {
export default function FaqPage() {
return (
<Layout
headerStyle={2}
headerStyle={1}
footerStyle={1}
breadcrumbTitle="Faq's"
bannerImage="/assets/images/faq/faq-banner.webp"

View File

@ -10,7 +10,7 @@ export const metadata = {
export default function GalleryPage() {
return (
<Layout
headerStyle={2}
headerStyle={1}
footerStyle={1}
breadcrumbTitle="Gallery"
bannerImage="/assets/images/gallery-page/gallery-banner.webp"

View File

@ -10,7 +10,7 @@ export const metadata = {
export default function Gallery() {
return (
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Locations" bannerImage="/assets/images/location/location-banner.webp">
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Locations" bannerImage="/assets/images/location/location-banner.webp">
<section className="gallery-section sec-pad">
<div className="outer-container">
<div className="sec-title centred mb_30">

View File

@ -6,7 +6,7 @@ import { teamMembers } from "@/utils/constant.utils";
export default function Home() {
return (
<>
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Our Team" bannerImage="/assets/images/our-team/our-team-banner.webp">
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Our Team" bannerImage="/assets/images/our-team/our-team-banner.webp">
<section className="team-section pt_90 pb_90 centred">
<div className="auto-container">
<div className="sec-title mb_50">

View File

@ -39,7 +39,7 @@ export default function TeamDetails({ params }) {
if (!member) {
return (
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Not Found">
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Not Found">
<div className="auto-container">
<h2>Team member not found!</h2>
<Link href="/" className="theme-btn btn-one">Go Back</Link>

View File

@ -10,7 +10,7 @@ export const metadata = {
export default function About() {
return (
<>
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Our Approach" bannerImage="/assets/images/our-approach/our-approach-banner.webp">
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Our Approach" bannerImage="/assets/images/our-approach/our-approach-banner.webp">
{/* about-section */}
<section className="about-style-two pt_90 pb_90">
<div className="pattern-layer">

View File

@ -11,7 +11,7 @@ export const metadata = {
export default function About() {
return (
<>
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Payment And Insurance" bannerImage="/assets/images/payment-insurance/payment-banner.webp">
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Payment And Insurance" bannerImage="/assets/images/payment-insurance/payment-banner.webp">
{/* chooseus-section */}
<section className="solutions-section">
<div className="auto-container">

View File

@ -28,7 +28,7 @@ export default function RehabilitationDetailsPage({ params }) {
return (
<Layout
headerStyle={2}
headerStyle={1}
footerStyle={1}
breadcrumbTitle={`${service.title}`}
bannerImage={service.bannerImage}

View File

@ -10,7 +10,7 @@ export const metadata = {
export default function RehabilitationPage() {
return (
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Rehabilitation" bannerImage="/assets/images/rehabilitation/rehabilation-banner.webp">
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Rehabilitation" bannerImage="/assets/images/rehabilitation/rehabilation-banner.webp">
<section className="service-section sec-pad-2">
<div className="auto-container">
<div className="row clearfix">

View File

@ -10,7 +10,7 @@ export default function Home() {
return (
<Layout
headerStyle={2}
headerStyle={1}
footerStyle={1}
breadcrumbTitle="Shortcodes"
bannerImage="/assets/images/shortcodes/shortcodes-banner.webp"

View File

@ -11,7 +11,7 @@ export const metadata = {
export default function About() {
return (
<>
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle=" What To Expect" bannerImage="/assets/images/what-we-expect/expect-banner.webp">
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle=" What To Expect" bannerImage="/assets/images/what-we-expect/expect-banner.webp">
{/* chooseus-section */}
<section className="about-style-three pt_90 pb_90">
<div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/shape/shape-35.webp)' }}></div>

View File

@ -18,7 +18,7 @@ export default function Team() {
{ name: 'Pre/Post Surgical Management', image: '/assets/images/why-us/img/surgical.webp' },
];
return (
<Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Why Us" bannerImage="/assets/images/why-us/why-us-banner.webp">
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Why Us" bannerImage="/assets/images/why-us/why-us-banner.webp">
<section className="team-section pt_90 centred pb-0">
<div className="pattern-layer">
<div className="pattern-1" style={{ backgroundImage: 'url(/assets/images/shape/shape-13.webp)' }}></div>

View File

@ -15,7 +15,7 @@ export default function Menu() {
<Link className={router.pathname == "/index-2" ? "active" : ""}>Home Interior</Link>
</ul> */}
<ul className="navigation clearfix">
<ul className="navigation new-nav clearfix">
<li className="dropdown"><Link href="/">Home</Link>
{/* <ul>
<li><Link href="/">Home Page One</Link></li>

View File

@ -13,33 +13,26 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSide
<div className="top-inner">
<ul className="info-list clearfix">
<li>
<i className="icon-1"></i>Mon - Fri 8:00 - 18:00 / Sunday 8:00 - 14:00
<img src="/assets/images/icons/call.png" alt="Phone" style={{ marginRight: "8px" }} />
<Link href="tel:647-722-3434">647-722-3434</Link>
</li>
<li>
<i className="icon-2"></i>Email: <Link href="tel:01989526503">0198-9526503</Link>
</li>
<li>
<img src="assets/images/icons/icon-1.png" alt="location" /> 47 Bakery Street, London, UK
<img src="/assets/images/icons/mail.png" alt="Mail" style={{ marginRight: "8px" }} />
<Link href="mailto:bloor@rapharehab.ca">bloor@rapharehab.ca</Link>
</li>
</ul>
<ul className="social-links clearfix">
<li><Link href="/why-rapha-physiotherapy-etobicoke">Why Us</Link></li>
<li><Link href="/faq-physiotherapy-etobicoke">Faq</Link></li>
<li><Link href="/what-to-expect">What To Expect</Link></li>
<li><Link href="/payment-insurance">Payment And Insurance</Link></li>
<li>
<Link href="/">
<Link href="https://www.instagram.com/elrapharehab/" target="_blank" rel="noopener noreferrer">
<i className="icon-4"></i>
</Link>
</li>
<li>
<Link href="/">
<i className="icon-5"></i>
</Link>
</li>
<li>
<Link href="/">
<i className="icon-6"></i>
</Link>
</li>
<li>
<Link href="/">
<Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank" rel="noopener noreferrer">
<i className="icon-7"></i>
</Link>
</li>
@ -51,6 +44,31 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSide
{/* Header Upper */}
<div className="header-lower">
<div className="outer-container">
<div className="outer-box new">
<div className="logo-box">
<figure className="logo">
<Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link>
</figure>
</div>
<div className="menu-area">
<div className="mobile-nav-toggler" onClick={handleMobileMenu}>
<i className="icon-bar"></i>
<i className="icon-bar"></i>
<i className="icon-bar"></i>
</div>
<nav className="main-menu new-menu navbar-expand-md navbar-light clearfix">
<div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
<Menu />
</div>
</nav>
</div>
</div>
</div>
</div>
<div className="sticky-header">
<div className="auto-container">
<div className="outer-box">
<div className="logo-box">
@ -58,50 +76,15 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSide
<Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link>
</figure>
</div>
<div className="menu-area">
<div className="mobile-nav-toggler" onClick={handleMobileMenu}>
<i className="icon-bar"></i>
<i className="icon-bar"></i>
<i className="icon-bar"></i>
</div>
<nav className="main-menu navbar-expand-md navbar-light clearfix">
<div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
<Menu/>
</div>
</nav>
</div>
<div className="btn-box">
<Link href="/" className="theme-btn btn-one"><span>Request A Pickup</span></Link>
</div>
</div>
</div>
</div>
</div>
{/* Sticky Header */}
<div className="sticky-header">
<div className="auto-container">
<div className="outer-box">
<div className="logo-box">
<figure className="logo"><Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link></figure>
</div>
<nav className="main-menu navbar-expand-md navbar-light clearfix">
<div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
<Menu />
</div>
</nav>
<ul className="menu-right-content">
<div className="btn-box">
<Link href="/" className="theme-btn btn-one"><span>Request A Pickup</span></Link>
</div>
</ul>
</div>
</div>
</div>{/* End Sticky Menu */}
{/* Mobile Menu */}
</div>
<MobileMenu handleMobileMenu={handleMobileMenu} />
</header>

View File

@ -1,96 +1,89 @@
'use client'
import Link from "next/link";
import Menu from "../Menu"
import MobileMenu from "../MobileMenu"
import Sidebar from "../Sidebar"
import Menu from "../Menu";
import MobileMenu from "../MobileMenu";
export default function Header2({ scroll, isMobileMenu, handleMobileMenu, isSidebar, handlePopup, handleSidebar }) {
export default function Header2({
scroll,
isMobileMenu,
handleMobileMenu,
handlePopup,
handleSidebar,
isHome = false,
}) {
return (
<>
<header className={`main-header header-style-two ${scroll ? "fixed-header" : ""}`}>
<header
className={`main-header header-style-two ${scroll ? "fixed-header" : ""} ${isHome ? "home-page" : ""}`}
>
{/* Header Top */}
<div className="header-top">
<div className="top-inner">
<ul className="info-list clearfix">
<li>
<img src="/assets/images/icons/call.png" alt="Phone" style={{ marginRight: "8px" }} />
<Link href="tel:647-722-3434">647-722-3434</Link>
{/* <Link href="tel:647-722-3434">647-722-3434</Link> */}
</li>
<li>
<img src="/assets/images/icons/mail.png" alt="Mail" style={{ marginRight: "8px" }} />
<Link href="mailto:bloor@rapharehab.ca">bloor@rapharehab.ca</Link>
</li>
</ul>
<ul className="social-links clearfix">
<li><Link href="/why-rapha-physiotherapy-etobicoke">Why Us</Link></li>
<li><Link href="/faq-physiotherapy-etobicoke">Faq</Link></li>
<li><Link href="/what-to-expect">What To Expect</Link></li>
<li><Link href="/payment-insurance">Payment And Insurance</Link></li>
<li>
<Link href="/why-rapha-physiotherapy-etobicoke">Why Us</Link>
<Link href="https://www.instagram.com/elrapharehab/" target="_blank" rel="noopener noreferrer">
<i className="icon-4"></i>
</Link>
</li>
<li>
<Link href="/faq-physiotherapy-etobicoke">Faq</Link>
<Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank" rel="noopener noreferrer">
<i className="icon-7"></i>
</Link>
</li>
<li>
<Link href="/what-to-expect">What To Expect</Link>
</li>
<li>
<Link href="/payment-insurance">Payment And Insurance</Link>
</li>
<li><Link href="https://www.instagram.com/elrapharehab/" target="_blank"
rel="noopener noreferrer"><i className="icon-4"></i></Link></li>
{/* <li><Link href="/"><i className="icon-5"></i></Link></li> */}
{/* <li><Link href="/"><i className="icon-6"></i></Link></li> */}
<li><Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank"
rel="noopener noreferrer"><i className="icon-7"></i></Link></li>
</ul>
</div>
</div>
{/* Header Upper */}
{/* Header Lower */}
<div className="header-lower">
<div className="outer-container">
<div className="outer-box">
<div className="logo-box">
<figure className="logo"><Link href="/"><img src="/assets/images/footer-logo.png" alt="rapharehab" /></Link></figure>
<figure className="logo">
<Link href="/"><img src="/assets/images/footer-logo.png" alt="rapharehab" /></Link>
</figure>
</div>
{/* Menu Right Content */}
{/* <ul className="menu-right-content">
<li className="search-box-outer search-toggler" onClick={handlePopup}>
<i className="icon-27"></i>
</li>
<li className="nav-btn nav-toggler navSidebar-button clearfix" onClick={handleSidebar}>
<i className="icon-28"></i>
</li>
</ul> */}
<div className="menu-area">
{/* Mobile Navigation Toggler */}
<div className="mobile-nav-toggler" onClick={handleMobileMenu}>
<i className="icon-bar"></i>
<i className="icon-bar"></i>
<i className="icon-bar"></i>
</div>
{/* Main Menu */}
<nav className="main-menu navbar-expand-md navbar-light clearfix">
<div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
<Menu />
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/*End Header Upper*/}
{/* Sticky Header */}
<div className="sticky-header">
<div className="auto-container">
<div className="outer-box">
<div className="logo-box">
<figure className="logo"><Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link></figure>
<figure className="logo">
<Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link>
</figure>
</div>
<nav className="main-menu navbar-expand-md navbar-light clearfix">
@ -98,23 +91,13 @@ export default function Header2({ scroll, isMobileMenu, handleMobileMenu, isSide
<Menu />
</div>
</nav>
<ul className="menu-right-content">
{/* <li className="search-box-outer search-toggler" onClick={handlePopup}>
<i className="icon-27"></i>
</li> */}
{/* <li className="nav-btn nav-toggler navSidebar-button clearfix" onClick={handleSidebar}>
<i className="icon-28"></i>
</li> */}
</ul>
</div>
</div>
</div>{/* End Sticky Menu */}
</div>
{/* Mobile Menu */}
<MobileMenu handleMobileMenu={handleMobileMenu} />
</header>
</>
)
);
}

View File

@ -65,7 +65,7 @@ export default function Banner() {
{
id: 0,
variant: 'topToBottom',
bgImage: '/assets/images/home/banner/home-banner-1.png',
bgImage: '/assets/images/banner/desktopBanner/home-banner-1.png',
upperText: 'Begin Your Health Journey',
title: 'Better',
titleSpan: 'health',
@ -79,7 +79,7 @@ export default function Banner() {
{
id: 1,
variant: 'bottomToTop',
bgImage: '/assets/images/home/banner/home-banner-2.png',
bgImage: '/assets/images/banner/desktopBanner/home-banner-2.png',
upperText: 'Care That Heals Gently',
title: 'Relaxing',
titleSpan: 'Massage',
@ -93,7 +93,7 @@ export default function Banner() {
{
id: 2,
variant: 'leftToRight',
bgImage: '/assets/images/home/banner/home-banner-3.png',
bgImage: '/assets/images/banner/desktopBanner/home-banner-3.png',
upperText: 'Wellness Near You Always',
title: 'Trusted',
titleSpan: 'Physio',
@ -107,7 +107,7 @@ export default function Banner() {
{
id: 3,
variant: 'rightToLeft',
bgImage: '/assets/images/home/banner/home-banner-4.png',
bgImage: '/assets/images/banner/desktopBanner/home-banner-4.png',
upperText: 'Healing With Caring Hands',
title: 'Holistic',
titleSpan: 'Wellness',

View File

@ -49,19 +49,25 @@ export default function MobileBanner() {
}, []);
const slides = [
// {
// id: 0,
// variant: 'topToBottom',
// bgImage: '/assets/images/banner/mobile-banner/mbl-view-banner-1.png',
// upperText: 'Begin Your Health Journey',
// title: 'Better',
// titleSpan: 'health',
// titleEnd: 'Forever',
// subtitle: 'Expert Physiotherapy in Mississauga for You.',
// description: 'Our expert physiotherapists help you restore movement, reduce pain, and live healthier with personalized care in Mississauga.',
// buttonText: 'Book Your Appointment',
// buttonLink: 'tel:+647-722-3434',
// contentStyle: 'mobile-style'
// },
{
id: 0,
variant: 'topToBottom',
bgImage: '/assets/images/banner/mobile-banner/mbl-view-banner-1.png',
upperText: 'Begin Your Health Journey',
title: 'Better',
titleSpan: 'health',
titleEnd: 'Forever',
// subtitle: 'Expert Physiotherapy in Mississauga for You.',
description: 'Our expert physiotherapists help you restore movement, reduce pain, and live healthier with personalized care in Mississauga.',
buttonText: 'Book Your Appointment',
buttonLink: 'tel:+647-722-3434',
// contentStyle: 'mobile-style'
bgImage: '/assets/images/banner/mobile-banner/banner-1.webp',
hideContent: true
},
{
id: 1,

View File

@ -1014,6 +1014,43 @@
padding: 15.5px 0;
}
/* Fully transparent header */
.header-style-two,
.header-style-two .header-top,
.header-style-two .header-area {
background: transparent !important;
box-shadow: none !important;
border: none !important;
position: absolute; /* Keep header floating over content */
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
/* Menu, logo, and links visible on hero */
.header-style-two .header-top a,
.header-style-two .header-top .logo {
color: #fff !important;
}
/* Padding for alignment without background interference */
.header-style-two .header-top .top-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 100px;
padding-right: 100px;
position: relative; /* Needed for flex children alignment */
}
/* Optional: ensure header elements stay visible on scroll */
.header-style-two.fixed-header {
position: fixed;
background: rgba(0, 0, 0, 0.2); /* Slight transparency if needed on scroll */
}
.header-top .top-inner {
position: relative;
display: flex;
@ -1240,6 +1277,12 @@
/* background: #fff; */
}
.new{
background-color: #fff !important;
}
.main-header .header-lower .outer-box:before {
position: absolute;
content: '';
@ -1433,6 +1476,12 @@
transition: all 500ms ease;
}
.new-menu .new-nav>li>a{
color: #101A30 !important;
}
@media (max-width: 1200px) {
.main-menu .navigation>li>a {
font-size: 17px;
@ -1719,6 +1768,7 @@
.sticky-header .main-menu .navigation>li>a {
padding-top: 27px;
padding-bottom: 27px;
color: #101A30;
}
.sticky-header .main-menu .navigation>li>a:before {

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB