MetatroncubeSoftwareSolutions/rapharehap
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Home responsive added

Browse Source
This commit is contained in:
akash 2025-09-22 20:23:52 +05:30
parent bdd61ea046
commit 01d662e1bf
12 changed files with 129 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/about-us/AboutClient.js
View File

@ -84,9 +84,9 @@ export default function Home() {
<div className="shape-4" style={{ backgroundImage: 'url(/assets/images/shape/shape-34.png)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
</div>
<figure className="image image-1"><img src="/assets/images/about-us/section1/about-right.webp" alt="About us" /></figure>
<figure className="image image-1-ho"><img src="/assets/images/about-us/section1/about-right.webp" alt="About us" /></figure>
<figure className="image image-2"><img src="/assets/images/about-us/section1/about-left.webp" alt="About us" /></figure>
<div className="icon-box"><img src="/assets/images/about-us/section1/about-icon.webp" alt="About us" /></div>
<div className="icon-box new-ho"><img src="/assets/images/about-us/section1/about-icon.webp" alt="About us" /></div>
</div>
</div>
</div>

4
app/ourapproach-physiotherapy-etobicoke/page.js
View File

@ -31,9 +31,9 @@ export default function About() {
<div className="shape-4" style={{ backgroundImage: 'url(/assets/images/shape/shape-34.png)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
</div>
<figure className="image image-1"><img src="/assets/images/our-approach/right.webp" alt="Our Approach" /></figure>
<figure className="image image-1-ho"><img src="/assets/images/our-approach/right.webp" alt="Our Approach" /></figure>
<figure className="image image-2"><img src="/assets/images/our-approach/left.webp" alt="Our Approach" /></figure>
<div className="icon-box"><img src="/assets/images/our-approach/icon.webp" alt="Our Approach" /></div>
<div className="icon-box new-ho"><img src="/assets/images/our-approach/icon.webp" alt="Our Approach" /></div>
</div>
</div>
</div>

6
app/payment-insurance/page.js
View File

@ -35,9 +35,9 @@ export default function About() {
<div className="col-lg-6 col-md-12 col-sm-12 image-column">
<div className="image_block_two">
<div className="image-box">
<figure className="image image-1"><img src="/assets/images/payment-insurance/back.webp" alt="Payment and Insurance" /></figure>
<figure className="image image-2"><img src="/assets/images/payment-insurance/front.webp" alt="Payment and Insurance" /></figure>
<div className="icon-box"><img src="/assets/images/payment-insurance/icon.webp" alt="Payment and Insurance" /></div>
<figure className="image image-1-ho"><img src="/assets/images/payment-insurance/back.webp" alt="Payment and Insurance" /></figure>
<figure className="image image-2-new"><img src="/assets/images/payment-insurance/front.webp" alt="Payment and Insurance" /></figure>
<div className="icon-box cart-icon"><img src="/assets/images/payment-insurance/icon.webp" alt="Payment and Insurance" /></div>
</div>
</div>
</div>

2
app/what-to-expect/page.js
View File

@ -27,7 +27,7 @@ export default function About() {
<div className="shape-4" style={{ backgroundImage: 'url(/assets/images/shape/shape-34.png)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
</div>
<figure className="image image-1"><img src="/assets/images/what-we-expect/right.webp" alt="What to Expect – Physiotherapy Etobicoke" /></figure>
<figure className="image image-1-ho"><img src="/assets/images/what-we-expect/right.webp" alt="What to Expect – Physiotherapy Etobicoke" /></figure>
<figure className="image image-2"><img src="/assets/images/what-we-expect/left.webp" alt="What to Expect – Physiotherapy Etobicoke" /></figure>
<div className="icon-box"><img src="/assets/images/what-we-expect/icon.webp" alt="What to Expect – Physiotherapy Etobicoke" /></div>
</div>

21
components/sections/home2/Banner.js
View File

@ -16,7 +16,9 @@ const swiperOptions = {
autoplay: {
delay: 5000,
disableOnInteraction: false,
pauseOnMouseEnter: true, // stops on hover for smooth UX
},
speed: 1500, // increase speed for smoother sliding
loop: true,
navigation: {
nextEl: '.h1n',
@ -26,6 +28,7 @@ const swiperOptions = {
el: '.swiper-pagination',
clickable: true,
},
effect: "slide", // ensures smooth slide effect
};
const variants = {
@ -91,17 +94,7 @@ 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="content-box custom-content-box">
<span className="upper-text">Begin Your Health Journey</span>
<h2>Better <span>health</span> Forever</h2>
<p>Our expert physiotherapists help you restore movement, reduce pain, and live healthier with personalized care in Mississauga.</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 className="auto-container" style={{ height: "600px" }}>
</div>
</motion.div>
)}
@ -124,7 +117,7 @@ export default function Banner() {
<div className="bg-layer"
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-2.webp)' }}>
</div>
<div className="auto-container" style={{height:"600px", display:"flex", alignItems:"end"}}>
<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>
@ -157,7 +150,7 @@ export default function Banner() {
<div className="bg-layer"
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-3.webp)' }}>
</div>
<div className="auto-container" style={{height:"600px", display:"flex", alignItems:"end"}}>
<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>
@ -190,7 +183,7 @@ export default function Banner() {
<div className="bg-layer"
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/home-banner-4.webp)' }}>
</div>
<div className="auto-container" style={{height:"600px", display:"flex", alignItems:"end"}}>
<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>

79
public/assets/css/module-css/about.css
View File

@ -328,12 +328,23 @@
border-radius: 20px;
z-index: 1;
}
.image_block_three .image-box .image-1-ho{
position: relative;
filter: drop-shadow(-10px 20px 50px rgba(75, 183, 241, 0.3));
border-radius: 20px;
z-index: 1;
}
.image_block_three .image-box .image-1 img{
width: 100%;
border-radius: 20px;
}
.image_block_three .image-box .image-1-ho img{
width: 100%;
border-radius: 20px;
}
.image_block_three .image-box .image-2{
position: absolute;
left: -10px;
@ -570,6 +581,10 @@
margin: 0 auto;
}
.image_block_three .image-box .image-1-ho{
max-width: 306px;
margin: 0 auto;
}
.image_block_three .image-box .image-2{
position: relative;
left: 0px;
@ -620,6 +635,54 @@
transform: rotate(-15deg);
}
.image_block_three .image-box .image-1-ho {
position: relative;
filter: drop-shadow(-10px 20px 50px rgba(75, 183, 241, 0.3));
border-radius: 20px;
z-index: 1;
margin-right: -134px;
left: -104px;
}
.image_block_three .image-box .new-ho{
top: 309px;
left: 279px;
}
}
@media only screen and (max-width: 768px) {
.image_block_three .image-box .image-1-ho {
position: relative;
filter: drop-shadow(-10px 20px 50px rgba(75, 183, 241, 0.3));
border-radius: 20px;
z-index: 1;
margin-right: 0px !important;
left: 0px !important;
}
.image_block_three .image-box .new-ho{
top: 337px;
left: 239px;
}
}
@media only screen and (max-width: 500px) {
.image_block_three .image-box .image-1-ho img{
display: none;
}
}
@media only screen and (max-width: 499px){
@ -644,6 +707,12 @@
display: none !important;
}
.image_block_three .image-box .image-1-ho img{
width: 100%;
border-radius: 20px;
display: none !important;
}
}
@media only screen and (max-width: 426px) {
@ -666,6 +735,16 @@
}
@media screen and (max-width: 376px) {
.image_block_three .image-box .new-ho{
left: 200px;
}
}

8
public/assets/css/module-css/feature.css
View File

@ -11,7 +11,7 @@
box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1);
border-radius: 20px;
overflow: hidden;
padding: 34px;
padding: 20px;
z-index: 1;
margin-bottom: 30px;
transition: all 500ms ease;
@ -284,4 +284,10 @@
.feature-section.mobile-only .feature-block {
width: 50%;
}
}
@media (max-width: 992px) {
.team-block-one .inner-box .lower-content {
padding: 15px 10px 0px 10px;
}
}

35
public/assets/css/module-css/solutions.css
View File

@ -20,6 +20,9 @@
.solutions-section .progress-inner{
max-width: none;
}
}
@ -42,6 +45,9 @@
display: block;
border-radius: 20px;
overflow: hidden;
top: -164px;
left: -12px;
}
.image_block_two .image-box .image-1-new{
@ -57,9 +63,9 @@
.image_block_two .image-box .image-2{
position: absolute;
left: -50px;
left: -21px;
bottom: 0px;
background: #fff;
/* background: #fff; */
padding: 10px;
border-radius: 20px;
filter: drop-shadow(0px 2px 70px rgba(0, 0, 0, 0.1));
@ -69,7 +75,7 @@
position: absolute;
left: -50px;
bottom: 0px;
background: #fff;
/* background: #fff; */
padding: 10px;
border-radius: 20px;
filter: drop-shadow(0px 2px 70px rgba(0, 0, 0, 0.1));
@ -145,7 +151,7 @@
position: absolute;
left: 14px !important;
bottom: -86px !important;
background: #fff;
/* background: #fff; */
padding: 10px;
border-radius: 20px;
filter: drop-shadow(0px 2px 70px rgba(0, 0, 0, 0.1));
@ -187,12 +193,19 @@
position: absolute;
left: 14px !important;
bottom: -36px !important;
background: #fff;
/* background: #fff; */
padding: 10px;
border-radius: 20px;
filter: drop-shadow(0px 2px 70px rgba(0, 0, 0, 0.1));
}
.image_block_two .image-box .cart-icon{
left: 302px;
top: 412px;
}
.image_block_two .image-box .my-icon{
position: absolute;
@ -250,9 +263,17 @@
}
}
@media only screen and (max-width: 499px){
@media only screen and (max-width: 500px){
.image_block_two .image-box .cart-icon{
/* left: 292px;
top: 312px; */
display: none;
}
}

BIN
public/assets/images/banner/desktopBanner/home-banner-1.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 108 KiB

BIN
public/assets/images/banner/desktopBanner/home-banner-2.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 49 KiB

BIN
public/assets/images/banner/desktopBanner/home-banner-3.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 38 KiB

BIN
public/assets/images/banner/desktopBanner/home-banner-4.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 64 KiB