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

icons updated for structure

Browse Source
This commit is contained in:
Alaguraj0361 2025-09-16 00:17:26 +05:30
parent ef099cf307
commit 1696ce23df
6 changed files with 163 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/layout.js
View File

@ -20,7 +20,6 @@ export default function RootLayout({ children }) {
<html lang="en" className={`${poppins.variable}`}> <html lang="en" className={`${poppins.variable}`}>
<body> <body>
{children} {children}
<ContactFloat />
<AutoPopup/> <AutoPopup/>
</body> </body>
</html> </html>

8
app/page.js
View File

@ -24,13 +24,13 @@ export default function Home() {
return ( return (
<> <>
<Layout headerStyle={2} footerStyle={2}> <Layout headerStyle={2} footerStyle={2}>
<div className="d-none d-md-block"> {/* <div className="d-none d-md-block"> */}
<Banner /> <Banner />
</div> {/* </div> */}
{/*
<div className="d-block d-md-none"> <div className="d-block d-md-none">
<MobileBanner /> <MobileBanner />
</div> </div> */}
{/* <Features /> */} {/* <Features /> */}
<AboutSection /> <AboutSection />
{/* <ProcessSection /> */} {/* <ProcessSection /> */}

90
components/ContactFloat.js
View File

@ -1,43 +1,63 @@
"use client"; "use client";
import React from "react"; import React, { useState } from "react";
export default function ContactFloat() {
const [open, setOpen] = useState(false);
/** 3 extra contact icons */
const extraIcons = [
{
href: "mailto:info@example.com",
src: "/assets/images/icons/mail.png",
label: "Mail",
offset: 30, // main button bottom(60) + 20 = 80
},
{
href: "https://wa.me/1234567890",
src: "/assets/images/icons/whatsapp.png",
label: "WhatsApp",
offset: 90, // 60 + 90
},
{
href: "sms:1234567890",
src: "/assets/images/icons/sms.png",
label: "SMS",
offset: 150, // 60 + 160
},
];
function ContactFloat() {
return ( return (
<div style={styles.container}> <div className="contact-icon-container">
<a href="tel:6477223434" style={styles.button} aria-label="Call Us"> {/* Extra icons */}
{extraIcons.map((icon, i) => (
<a
key={i}
href={icon.href}
aria-label={icon.label}
className={`contact-icon-outer extra-icon ${open ? "show" : ""}`}
style={{ bottom: `${icon.offset}px` }}
>
<img src={icon.src} alt={icon.label} className="contact-icon" />
</a>
))}
{/* Main floating button */}
<button
type="button"
aria-label={open ? "Close" : "Call Us"}
className="contact-icon-outer toggle-btn"
onClick={() => setOpen((prev) => !prev)}
>
<img <img
src="/assets/images/icons/call.png" src={
alt="Call" open
style={styles.icon} ? "/assets/images/icons/close.png" // show close icon when menu is open
: "/assets/images/icons/call.png" // default call icon
}
alt="Contact"
className="contact-icon"
/> />
</a> </button>
</div> </div>
); );
} }
const styles = {
container: {
position: "fixed",
bottom: "24px",
left: "24px",
zIndex: 9999,
},
button: {
backgroundColor: "#102548",
padding: "16px",
borderRadius: "50%",
boxShadow: "0 4px 6px rgba(0,0,0,0.2)",
display: "flex",
alignItems: "center",
justifyContent: "center",
textDecoration: "none",
width: "56px",
height: "56px",
},
icon: {
width: "28px",
height: "28px",
},
};
export default ContactFloat;

2
components/layout/Layout.js
View File

@ -17,6 +17,7 @@ import Header1 from "./header/Header1";
import Header2 from './header/Header2'; import Header2 from './header/Header2';
import Header3 from "./header/Header3"; import Header3 from "./header/Header3";
import Header4 from "./header/Header4"; import Header4 from "./header/Header4";
import ContactFloat from "../ContactFloat";
export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumbTitle, bannerImage, children, wrapperCls }) { export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumbTitle, bannerImage, children, wrapperCls }) {
const [scroll, setScroll] = useState(0); const [scroll, setScroll] = useState(0);
@ -66,6 +67,7 @@ export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumb
{(footerStyle === 1 || !footerStyle) && <Footer1 />} {(footerStyle === 1 || !footerStyle) && <Footer1 />}
{footerStyle === 2 && <Footer2 />} {footerStyle === 2 && <Footer2 />}
</div> </div>
<ContactFloat />
<BackToTop scroll={scroll} /> <BackToTop scroll={scroll} />
</> </>
); );

11
components/sections/home/ServicesSection.js
View File

@ -4,8 +4,11 @@ import React from 'react';
export default function ServicesSection() { export default function ServicesSection() {
return ( return (
<section className="service-section bg-layer sec-pad bg-color-1" style={{ backgroundImage: 'url(/assets/images/home/our-services/our-services-bg.webp)' }}> <section className="service-section team-section bg-layer sec-pad bg-color-1">
<div className="pattern-layer">
<div className="pattern-1" style={{ backgroundImage: 'url(/assets/images/shape/shape-13.webp)' }}></div>
<div className="pattern-2" style={{ backgroundImage: 'url(/assets/images/shape/shape-14.webp)' }}></div>
</div>
<div className="auto-container"> <div className="auto-container">
<div className="sec-title-1 mb_50 centred"> <div className="sec-title-1 mb_50 centred">
<span className="sub-title-1">We Help You Move Better & Live Healthier</span> <span className="sub-title-1">We Help You Move Better & Live Healthier</span>
@ -27,12 +30,12 @@ export default function ServicesSection() {
<h3> <h3>
<Link href={`/etobicoke-treatment-service/${service.slug}`}> <Link href={`/etobicoke-treatment-service/${service.slug}`}>
{service?.title} {service?.title}
{/* {service?.title?.length > 25 {/* {service?.title?.length > 25
? service.title.slice(0, 25) + "..." ? service.title.slice(0, 25) + "..."
: service.title} */} : service.title} */}
</Link> </Link>
</h3> </h3>
<p>{service?.shortDescription}</p> <p>{service?.shortDescription}</p>
</div> </div>
</div> </div>
</div> </div>

140
public/assets/css/style.css
View File

@ -696,7 +696,7 @@
z-index: 99; z-index: 99;
width: 50px; width: 50px;
height: 50px; height: 50px;
background: var(--theme-color); background: #102548;
text-align: center; text-align: center;
color: #fff; color: #fff;
line-height: 50px; line-height: 50px;
@ -1072,25 +1072,26 @@
} */ } */
.mobile-menu .nav-header { .mobile-menu .nav-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; /* even spacing */ justify-content: space-between;
padding: 10px 15px; /* even spacing */
} padding: 10px 15px;
}
.mobile-menu .nav-social ul { .mobile-menu .nav-social ul {
display: flex; display: flex;
gap: 20px; gap: 20px;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
padding-bottom: 50px; padding-bottom: 50px;
} }
.mobile-menu .nav-social ul li a { .mobile-menu .nav-social ul li a {
font-size: 18px; font-size: 18px;
color: #fff; color: #fff;
} }
@ -2961,31 +2962,31 @@
} }
@media only screen and (max-width : 426px){ @media only screen and (max-width : 426px) {
.default-form .form-group input[type='text'], .default-form .form-group input[type='text'],
.default-form .form-group input[type='email'], .default-form .form-group input[type='email'],
.default-form .form-group textarea { .default-form .form-group textarea {
position: relative; position: relative;
display: block; display: block;
width: 100%; width: 100%;
height: 55px; height: 55px;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 10px; border-radius: 10px;
padding: 10px 30px; padding: 10px 30px;
font-size: 18px; font-size: 18px;
color: #676767; color: #676767;
transition: all 500ms ease; transition: all 500ms ease;
} }
.default-form .form-group textarea { .default-form .form-group textarea {
height: 80px; height: 80px;
resize: none; resize: none;
} }
.contact-style-three .default-form .form-group{ .contact-style-three .default-form .form-group {
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
@ -3167,10 +3168,59 @@
padding: 35px; padding: 35px;
} }
} }
@media (max-width: 425px) { @media (max-width: 425px) {
.custom-content-box.mobile-style { .custom-content-box.mobile-style {
background: white; background: white;
border-radius: 15%; border-radius: 15%;
opacity: 0.8; opacity: 0.8;
} }
} }
.contact-icon-container {
position: fixed;
bottom: 60px;
left: 20px;
z-index: 9999;
}
/* Common style for all icons */
.contact-icon-outer {
background-color: #102548;
padding: 16px;
border-radius: 50%;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
width: 56px;
height: 56px;
position: absolute;
left: 0; /* so all align vertically */
transition: transform 0.3s ease, opacity 0.3s ease;
}
.contact-icon {
width: 28px;
height: 28px;
}
/* Extra icons start hidden */
.extra-icon {
opacity: 0;
transform: translateY(20px); /* slight downward offset */
pointer-events: none;
}
/* When menu is open */
.extra-icon.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Delay each icon for “one-by-one” effect */
.extra-icon.show:nth-child(1) { transition-delay: 0.05s; }
.extra-icon.show:nth-child(2) { transition-delay: 0.1s; }
.extra-icon.show:nth-child(3) { transition-delay: 0.15s; }