Banner updated

This commit is contained in:
akash 2025-09-22 22:03:51 +05:30
parent 01d662e1bf
commit 5559ed4ce1
8 changed files with 152 additions and 82 deletions

View File

@ -68,7 +68,7 @@ export default function Home() {
<div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/shape/shape-35.webp)' }}></div>
<div className="auto-container">
<div className="row clearfix">
<div className="col-lg-6 col-md-12 col-sm-12 image-column">
{/* <div className="col-lg-6 col-md-12 col-sm-12 image-column">
<div className="image_block_three">
<div className="image-box">
<figure className="image image-1"><img src="/assets/images/caregivers/right.webp" alt="A professional and friendly care provider" /></figure>
@ -76,13 +76,27 @@ export default function Home() {
<div className="icon-box"><img src="/assets/images/caregivers/rapharehab-web-images.webp" alt="A professional and friendly care provider" /></div>
</div>
</div>
</div> */}
<div className="col-lg-6 col-md-12 col-sm-12 image-column mb-5 text-center text-lg-start">
<div className="image_block_four">
<div className="image-box">
<figure>
<img
src="/assets/images/caregivers/left.webp"
alt="A professional and friendly care provider"
className="img-fluid"
/>
</figure>
</div>
</div>
</div>
<div className="col-lg-6 col-md-12 col-sm-12 content-column mt-5">
<div className="content_block_one">
<div className="content-box">
<div className="sec-title-1 mb_15 mt_15">
<span className="sub-title-1">At NanoCare</span>
<h2>A professional and friendly care provider</h2>
<h2>A professional and friendly care provider</h2>
</div>
<div className="text-box mb_40">
<p className="text-white">At NanoCare, we select Caregivers who are passionate about providing in home care to those in need on a daily basis.</p>
@ -97,17 +111,17 @@ export default function Home() {
</div>
</section>
<section className="service-section pb_90 pt_90 bg-color-1" id="service">
<section className="service-section pb_90 pt_90 bg-color-1" id="service">
<div className="auto-container">
<div className="row clearfix">
<div className="col-lg-4 col-md-6 col-sm-12 service-block">
<div className="service-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
<div className="inner-box">
<div className="col-lg-4 col-md-6 col-sm-12 service-block d-flex">
<div className="service-block-one wow fadeInUp animated d-flex flex-column flex-grow-1" data-wow-delay="00ms" data-wow-duration="1500ms">
<div className="inner-box d-flex flex-column flex-grow-1">
<div className="image-box">
<figure className="image"><img src="/assets/images/caregivers/1.webp" alt="Keira Knightley" /></figure>
{/* <div className="icon-box"><i className="icon-15"></i></div> */}
</div>
<div className="lower-content2">
<div className="lower-content2 mt-auto">
<h3>Keira Knightley</h3>
<h5 className="mb-3">Care Manager</h5>
<p>Keira Knightley has thirty-six years of nursing experience across a range of services, including hospital, community, nursing and care homes.</p>
@ -115,14 +129,14 @@ export default function Home() {
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12 service-block">
<div className="service-block-one wow fadeInUp animated" data-wow-delay="300ms" data-wow-duration="1500ms">
<div className="inner-box">
<div className="col-lg-4 col-md-6 col-sm-12 service-block d-flex">
<div className="service-block-one wow fadeInUp animated d-flex flex-column flex-grow-1" data-wow-delay="300ms" data-wow-duration="1500ms">
<div className="inner-box d-flex flex-column flex-grow-1">
<div className="image-box">
<figure className="image"><img src="/assets/images/caregivers/2.webp" alt="Katherine waterston" /></figure>
{/* <div className="icon-box"><i className="icon-16"></i></div> */}
</div>
<div className="lower-content2">
<div className="lower-content2 mt-auto">
<h3>Katherine waterston</h3>
<h5 className="mb-3">Care Manager</h5>
<p>At Nano Care, Katherine ensures that the each and every client of Nano Care is looked after according to the companys core mission, values and vision.</p>
@ -130,14 +144,14 @@ export default function Home() {
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12 service-block">
<div className="service-block-one wow fadeInUp animated" data-wow-delay="600ms" data-wow-duration="1500ms">
<div className="inner-box">
<div className="col-lg-4 col-md-6 col-sm-12 service-block d-flex">
<div className="service-block-one wow fadeInUp animated d-flex flex-column flex-grow-1" data-wow-delay="600ms" data-wow-duration="1500ms">
<div className="inner-box d-flex flex-column flex-grow-1">
<div className="image-box">
<figure className="image"><img src="/assets/images/caregivers/3.webp" alt="Anna faris" /></figure>
{/* <div className="icon-box"><i className="icon-17"></i></div> */}
</div>
<div className="lower-content2">
<div className="lower-content2 mt-auto">
<h3>Anna faris</h3>
<h5 className="mb-3">Care Manager</h5>
<p>Anna ensures that all the staff and support workers at Nano Care adhere to the companys ethos of providing the highest care standards in every service we offer</p>
@ -149,14 +163,14 @@ export default function Home() {
</div>
<div className="auto-container">
<div className="row clearfix">
<div className="col-lg-4 col-md-6 col-sm-12 service-block">
<div className="service-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
<div className="inner-box">
<div className="col-lg-4 col-md-6 col-sm-12 service-block d-flex">
<div className="service-block-one wow fadeInUp animated d-flex flex-column flex-grow-1" data-wow-delay="00ms" data-wow-duration="1500ms">
<div className="inner-box d-flex flex-column flex-grow-1">
<div className="image-box">
<figure className="image"><img src="/assets/images/caregivers/4.webp" alt="David walliams" /></figure>
{/* <div className="icon-box"><i className="icon-15"></i></div> */}
</div>
<div className="lower-content2">
<div className="lower-content2 mt-auto">
<h3>David walliams</h3>
<h5 className="mb-3">Care Co-Ordinator</h5>
<p>David walliams has over thirty eight years of experience in the Care and Services Industry. Previously working in Germany for many years.</p>
@ -164,14 +178,14 @@ export default function Home() {
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12 service-block">
<div className="service-block-one wow fadeInUp animated" data-wow-delay="300ms" data-wow-duration="1500ms">
<div className="inner-box">
<div className="col-lg-4 col-md-6 col-sm-12 service-block d-flex">
<div className="service-block-one wow fadeInUp animated d-flex flex-column flex-grow-1" data-wow-delay="300ms" data-wow-duration="1500ms">
<div className="inner-box d-flex flex-column flex-grow-1">
<div className="image-box">
<figure className="image"><img src="/assets/images/caregivers/5.webp" alt="John henry" /></figure>
{/* <div className="icon-box"><i className="icon-16"></i></div> */}
</div>
<div className="lower-content2">
<div className="lower-content2 mt-auto">
<h3>John henry</h3>
<h5 className="mb-3">Care Co-Ordinator</h5>
<p>John has experience in ensuring that the level of care that is provided to our clients does not fall short of any expectations that is expected of a care provider.</p>
@ -179,14 +193,14 @@ export default function Home() {
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12 service-block">
<div className="service-block-one wow fadeInUp animated" data-wow-delay="600ms" data-wow-duration="1500ms">
<div className="inner-box">
<div className="col-lg-4 col-md-6 col-sm-12 service-block d-flex">
<div className="service-block-one wow fadeInUp animated d-flex flex-column flex-grow-1" data-wow-delay="600ms" data-wow-duration="1500ms">
<div className="inner-box d-flex flex-column flex-grow-1">
<div className="image-box">
<figure className="image"><img src="/assets/images/caregivers/6.webp" alt="Sophia jabola" /></figure>
{/* <div className="icon-box"><i className="icon-17"></i></div> */}
</div>
<div className="lower-content2">
<div className="lower-content2 mt-auto">
<h3>Sophia jabola</h3>
<h5 className="mb-3">Care Co-Ordinator</h5>
<p>She has previously trained as a midwife. Her nine years experience as a nurse included working in the Hospital Medical Ward and Accident and Emergency.</p>
@ -198,6 +212,7 @@ export default function Home() {
</div>
</section>
<section className="faq-section pt_90 pb_90">
<div className="auto-container">
<div className="sec-title centred mb_50">
@ -284,8 +299,8 @@ export default function Home() {
{/* FAQ 4 */}
<li className="accordion block">
<div
className={isActive.key === 3 ? "acc-btn active" : "acc-btn"}
onClick={() => handleToggle(3)}
className={isActive.key === 4 ? "acc-btn active" : "acc-btn"}
onClick={() => handleToggle(4)}
>
<div className="icon-box"><i className="icon-34"></i></div>
<h5>Do you hire W-2, 1099, or private contractors?</h5>

View File

@ -347,8 +347,8 @@ export default function Home() {
{/* RIGHT IMAGE / LEFT CONTENT */}
<div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1">
<div className="image_block_two pl_30">
<div className="image-box">
<figure className="image image-1"><img src="/assets/images/shortcodes/back.webp" alt="Why choose nanocare" /></figure>
<div className="image-box x">
<figure className="image image-1-ho "><img src="/assets/images/shortcodes/back.webp" alt="Why choose nanocare" /></figure>
<figure className="image image-2"><img src="/assets/images/shortcodes/front.webp" alt="Why choose nanocare" /></figure>
{/* <div className="icon-box"><img src="/assets/images/about-us/section3/icon.webp" alt="" /></div> */}
</div>

View File

@ -69,14 +69,14 @@ export default function Team() {
<div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1">
<div className="image_block_two pr_30">
<div className="image-box">
<figure className="image image-1"><img src="/assets/images/why-us/back-1.webp" alt="health care professionals" /></figure>
<figure className="image image-1-ho"><img src="/assets/images/why-us/back-1.webp" alt="health care professionals" /></figure>
<figure className="image image-2"><img src="/assets/images/why-us/front-1.webp" alt="health care professionals" /></figure>
<div className="icon-box"><img src="/assets/images/why-us/icon-1.webp" alt="health care professionals" /></div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-12 col-sm-12 content-column order-1 order-lg-2">
<div className="content_block_one pl_30">
<div className="content_block_one">
<div className="content-box">
{/* <div className="sec-title mb_15">
<span className="sub-title">About Us</span>
@ -98,7 +98,7 @@ export default function Team() {
</div>
</section>
<section className="testimonial-style-two p_relative pt-0">
<section className="testimonial-style-two p_relative pt-5">
{/* <div className="pattern-layer" style={{ backgroundImage: 'url(assets/images/shape/shape-19.png)' }}></div> */}
<div className="auto-container">
<div className="row align-items-center flex-row-reverse">
@ -106,8 +106,8 @@ export default function Team() {
<div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1">
<div className="image_block_two pl_30">
<div className="image-box">
<figure className="image image-1"><img src="/assets/images/why-us/back-2.webp" alt="Top-Notch Treatment " /></figure>
<figure className="image image-2"><img src="/assets/images/why-us/front-2.webp" alt="Top-Notch Treatment " /></figure>
<figure className="image image-1-ho"><img src="/assets/images/why-us/back-2.webp" alt="Top-Notch Treatment " /></figure>
<figure className="image image-2 rowImage"><img src="/assets/images/why-us/front-2.webp" alt="Top-Notch Treatment " /></figure>
<div className="icon-box"><img src="/assets/images/why-us/icon-2.webp" alt="Top-Notch Treatment" /></div>
</div>
</div>

View File

@ -94,7 +94,17 @@ export default function Banner() {
<div className="bg-layer bg-slide-0"
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-1.webp)' }}>
</div>
<div className="auto-container" style={{ height: "600px" }}>
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end" }}>
<div className="content-box custom-content-box" style={{ backgroundColor: '#ffffff8a', opacity: 0.8, borderRadius: '20px', padding: '30px' }}>
<span className="upper-text">Renew your</span>
<h2>Strength</h2>
<p>Man lifting dumbbell (currently Relaxing Massage Therapy)</p>
<div className="btn-box mt-3">
<Link href="tel:+647-722-3434" className="theme-btn btn-one">
<span>Book Your Appointment</span>
</Link>
</div>
</div>
</div>
</motion.div>
)}
@ -119,9 +129,9 @@ export default function Banner() {
</div>
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end" }}>
<div className="content-box custom-content-box" style={{ backgroundColor: '#ffffff8a', opacity: 0.8, borderRadius: '20px', padding: '30px' }}>
<span className="upper-text">Care That Heals Gently</span>
<h2>Relaxing <span>Massage</span> Therapy</h2>
<p>Experience soothing massage techniques that release tension, promote circulation, and support your overall wellness.</p>
<span className="upper-text">Restore your</span>
<h2>Mobility</h2>
<p>Physiotherapist smiling with patient (currently Trusted Physio Experts)</p>
<div className="btn-box mt-3">
<Link href="/contact" className="theme-btn btn-one">
<span>Schedule a Massage</span>
@ -152,9 +162,9 @@ export default function Banner() {
</div>
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end" }}>
<div className="content-box custom-content-box" style={{ backgroundColor: '#ffffff8a', opacity: 0.8, borderRadius: '20px', padding: '30px' }}>
<span className="upper-text">Wellness Near You Always</span>
<h2>Trusted <span>Physio</span> Experts</h2>
<p>Comprehensive physiotherapy and rehab services designed to restore your strength, mobility, and long-term wellness.</p>
<span className="upper-text">Reclaim your</span>
<h2>Wellness</h2>
<p>Hands massaging shoulder (currently Holistic Wellness Care)</p>
<div className="btn-box mt-3">
<Link href="/etobicoke-treatment-service" className="theme-btn btn-one">
<span>Explore Our Service</span>
@ -185,9 +195,9 @@ export default function Banner() {
</div>
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end" }}>
<div className="content-box custom-content-box" style={{ backgroundColor: '#ffffff8a', opacity: 0.8, borderRadius: '20px', padding: '30px' }}>
<span className="upper-text">Healing With Caring Hands</span>
<h2>Holistic <span>Wellness</span> Care</h2>
<p>Discover holistic physiotherapy and rehab services designed to restore balance, ease pain, and support long-term recovery.</p>
<span className="upper-text">Begin your</span>
<h2>Recovery</h2>
<p>Illustrated people recovering & playing sports (currently Your Path to Recovery Starts Today)</p>
<div className="btn-box mt-3">
<Link href="/contact" className="theme-btn btn-one">
<span>Visit Our Location</span>

View File

@ -49,34 +49,28 @@ 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/1.webp',
hideContent: true
upperText: 'Renew your',
title: 'Strength',
// 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: 1,
variant: 'bottomToTop',
bgImage: '/assets/images/banner/mobile-banner/2.webp',
upperText: 'Care That Heals Gently',
title: 'Relaxing',
titleSpan: 'Massage',
titleEnd: 'Therapy',
upperText: 'Restore your ',
title: 'Mobility',
// titleSpan: 'Massage',
// titleEnd: 'Therapy',
// subtitle: 'Expert Hand Massage Techniques for Relief',
description: 'Experience soothing massage techniques that release tension, promote circulation, and support your overall wellness.',
buttonText: 'Schedule a Massage',
@ -87,10 +81,10 @@ export default function MobileBanner() {
id: 2,
variant: 'leftToRight',
bgImage: '/assets/images/banner/mobile-banner/3.webp',
upperText: 'Wellness Near You Always',
title: 'Trusted',
titleSpan: 'Physio',
titleEnd: 'Experts',
upperText: 'Reclaim your',
title: 'Wellness',
// titleSpan: 'Physio',
// titleEnd: 'Experts',
// subtitle: 'Physiotherapy Etobicoke & Rehab Care.',
description: 'Comprehensive physiotherapy and rehab services designed to restore your strength, mobility, and long-term wellness.',
buttonText: 'Explore Our Service',
@ -101,10 +95,10 @@ export default function MobileBanner() {
id: 3,
variant: 'rightToLeft',
bgImage: '/assets/images/banner/mobile-banner/4.webp',
upperText: 'Healing With Caring Hands',
title: 'Holistic',
titleSpan: 'Wellness',
titleEnd: 'Care',
upperText: 'Begin your ',
title: ' Recovery',
// titleSpan: 'Wellness',
// titleEnd: 'Care',
// subtitle: 'Waterfront Physio and Rehab Services.',
description: 'Discover holistic physiotherapy and rehab services designed to restore balance, ease pain, and support long-term recovery.',
buttonText: 'Visit Our Location',

View File

@ -438,6 +438,7 @@
.about-style-three .pattern-layer{
position: absolute;
opacity: 0.8;
top: 0px;
right: 0px;
width: 699px;

View File

@ -195,10 +195,10 @@
position: relative;
display: block;
font-size: 24px;
line-height: 34px;
line-height: 22px;
font-family: var(--secondary-font);
color: var(--theme-color);
margin-bottom: 15px;
margin-bottom: 0px;
opacity: 0;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
@ -214,15 +214,15 @@
@media (max-width: 500px) {
.banner-carousel .content-box .upper-text {
color: #fff !important;
color: #102548 !important;
font-size: 18px !important;
line-height: 24px;
line-height: 19px;
}
}
@media (max-width: 500px) {
.banner-carousel .content-box h2 {
color: #fff !important;
color: #bc0000 !important;
font-size: 24px;
line-height: 24px;
}
@ -246,9 +246,9 @@
position: relative;
display: block;
font-size: 64px;
line-height: 90px;
line-height: 60px;
font-weight: 700;
margin-bottom: 25px;
margin-bottom: 15px;
opacity: 1;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
@ -720,6 +720,17 @@
border-radius: 5px;
}
.banner-carousel .content-box {
bottom: 170px; /* keep your bottom offset */
text-align: center; /* center align text */
margin: 0 auto; /* horizontally center the box */
}
.banner-carousel .content-box * {
justify-content: center;
text-align: center;
}
}
/* @media (max-width: 1440px) {
@ -766,4 +777,5 @@
font-size: 16px;
padding: 15px 20px !important;
}
} */
} */

View File

@ -165,6 +165,28 @@
}
.image-1-ho img{
position: relative;
top: -200px;
left: -17px;
}
.image .image-1-ho .aligned-image img{
display: none !important;
}
.raw-image{
display: none;
}
}
@media only screen and (max-width: 991px){
@ -214,6 +236,15 @@
}
.image-1-ho img{
position: relative;
top: -23px;
left: 49px;
}
}
@media only screen and (max-width: 767px) {
@ -236,6 +267,13 @@
}
.image-1-ho img{
display: none;
}
.image_block_two .image-box .my-icon{
position: absolute;