icons updated for structure
This commit is contained in:
Alaguraj0361
parent
ef099cf307
commit
1696ce23df
@ -20,7 +20,6 @@ export default function RootLayout({ children }) {
|
||||
<html lang="en" className={`${poppins.variable}`}>
|
||||
<body>
|
||||
{children}
|
||||
<ContactFloat />
|
||||
<AutoPopup/>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -24,13 +24,13 @@ export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Layout headerStyle={2} footerStyle={2}>
|
||||
<div className="d-none d-md-block">
|
||||
{/* <div className="d-none d-md-block"> */}
|
||||
<Banner />
|
||||
</div>
|
||||
|
||||
{/* </div> */}
|
||||
{/*
|
||||
<div className="d-block d-md-none">
|
||||
<MobileBanner />
|
||||
</div>
|
||||
</div> */}
|
||||
{/* <Features /> */}
|
||||
<AboutSection />
|
||||
{/* <ProcessSection /> */}
|
||||
|
||||
@ -1,43 +1,63 @@
|
||||
"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 (
|
||||
<div style={styles.container}>
|
||||
<a href="tel:6477223434" style={styles.button} aria-label="Call Us">
|
||||
<div className="contact-icon-container">
|
||||
{/* 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
|
||||
src="/assets/images/icons/call.png"
|
||||
alt="Call"
|
||||
style={styles.icon}
|
||||
src={
|
||||
open
|
||||
? "/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>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
@ -17,6 +17,7 @@ import Header1 from "./header/Header1";
|
||||
import Header2 from './header/Header2';
|
||||
import Header3 from "./header/Header3";
|
||||
import Header4 from "./header/Header4";
|
||||
import ContactFloat from "../ContactFloat";
|
||||
|
||||
export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumbTitle, bannerImage, children, wrapperCls }) {
|
||||
const [scroll, setScroll] = useState(0);
|
||||
@ -66,6 +67,7 @@ export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumb
|
||||
{(footerStyle === 1 || !footerStyle) && <Footer1 />}
|
||||
{footerStyle === 2 && <Footer2 />}
|
||||
</div>
|
||||
<ContactFloat />
|
||||
<BackToTop scroll={scroll} />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -4,8 +4,11 @@ import React from 'react';
|
||||
|
||||
export default function ServicesSection() {
|
||||
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="sec-title-1 mb_50 centred">
|
||||
<span className="sub-title-1">We Help You Move Better & Live Healthier</span>
|
||||
@ -27,12 +30,12 @@ export default function ServicesSection() {
|
||||
<h3>
|
||||
<Link href={`/etobicoke-treatment-service/${service.slug}`}>
|
||||
{service?.title}
|
||||
{/* {service?.title?.length > 25
|
||||
{/* {service?.title?.length > 25
|
||||
? service.title.slice(0, 25) + "..."
|
||||
: service.title} */}
|
||||
</Link>
|
||||
</h3>
|
||||
<p>{service?.shortDescription}</p>
|
||||
<p>{service?.shortDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -696,7 +696,7 @@
|
||||
z-index: 99;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: var(--theme-color);
|
||||
background: #102548;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
@ -1072,25 +1072,26 @@
|
||||
} */
|
||||
|
||||
.mobile-menu .nav-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between; /* even spacing */
|
||||
padding: 10px 15px;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* even spacing */
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.mobile-menu .nav-social ul {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.mobile-menu .nav-social ul {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.mobile-menu .nav-social ul li a {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
.mobile-menu .nav-social ul li a {
|
||||
font-size: 18px;
|
||||
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='email'],
|
||||
.default-form .form-group textarea {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 10px 30px;
|
||||
font-size: 18px;
|
||||
color: #676767;
|
||||
transition: all 500ms ease;
|
||||
}
|
||||
.default-form .form-group input[type='email'],
|
||||
.default-form .form-group textarea {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 10px 30px;
|
||||
font-size: 18px;
|
||||
color: #676767;
|
||||
transition: all 500ms ease;
|
||||
}
|
||||
|
||||
.default-form .form-group textarea {
|
||||
height: 80px;
|
||||
resize: none;
|
||||
}
|
||||
.default-form .form-group textarea {
|
||||
height: 80px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.contact-style-three .default-form .form-group{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.contact-style-three .default-form .form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -3167,10 +3168,59 @@
|
||||
padding: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 425px) {
|
||||
.custom-content-box.mobile-style {
|
||||
background: white;
|
||||
border-radius: 15%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.custom-content-box.mobile-style {
|
||||
background: white;
|
||||
border-radius: 15%;
|
||||
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; }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user