diff --git a/app/layout.js b/app/layout.js index 3008c36..aaf2cc6 100644 --- a/app/layout.js +++ b/app/layout.js @@ -20,7 +20,6 @@ export default function RootLayout({ children }) { {children} - diff --git a/app/page.js b/app/page.js index b126d2d..e14e314 100644 --- a/app/page.js +++ b/app/page.js @@ -24,13 +24,13 @@ export default function Home() { return ( <> -
+ {/*
*/} -
- + {/*
*/} +{/*
-
+ */} {/* */} {/* */} diff --git a/components/ContactFloat.js b/components/ContactFloat.js index e64dd90..37612d1 100644 --- a/components/ContactFloat.js +++ b/components/ContactFloat.js @@ -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 ( -
- +
+ {/* Extra icons */} + {extraIcons.map((icon, i) => ( + + {icon.label} + + ))} + + {/* Main floating button */} +
); } - -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; diff --git a/components/layout/Layout.js b/components/layout/Layout.js index 071eb21..3fc69d4 100644 --- a/components/layout/Layout.js +++ b/components/layout/Layout.js @@ -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) && } {footerStyle === 2 && }
+ ); diff --git a/components/sections/home/ServicesSection.js b/components/sections/home/ServicesSection.js index afad8f5..6cb35c0 100644 --- a/components/sections/home/ServicesSection.js +++ b/components/sections/home/ServicesSection.js @@ -4,8 +4,11 @@ import React from 'react'; export default function ServicesSection() { return ( -
- +
+
+
+
+
We Help You Move Better & Live Healthier @@ -27,12 +30,12 @@ export default function ServicesSection() {

{service?.title} - {/* {service?.title?.length > 25 + {/* {service?.title?.length > 25 ? service.title.slice(0, 25) + "..." : service.title} */}

-

{service?.shortDescription}

+

{service?.shortDescription}

diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 50debd4..1c7ee56 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -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; - } -} \ No newline at end of file + .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; }