diff --git a/app/layout.js b/app/layout.js index aaf2cc6..fe1474a 100644 --- a/app/layout.js +++ b/app/layout.js @@ -20,7 +20,7 @@ export default function RootLayout({ children }) { {children} - + {/* */} ); diff --git a/components/ContactFloat.js b/components/ContactFloat.js index 37612d1..d74a9b4 100644 --- a/components/ContactFloat.js +++ b/components/ContactFloat.js @@ -1,63 +1,327 @@ "use client"; import React, { useState } from "react"; +import ReCAPTCHA from "react-google-recaptcha"; +import axios from "axios"; export default function ContactFloat() { const [open, setOpen] = useState(false); + const [showChat, setShowChat] = useState(false); - /** 3 extra contact icons */ + /** Contact actions */ const extraIcons = [ { - href: "mailto:info@example.com", + href: "mailto:bloor@rapharehab.ca", 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: "tel:647-722-3434", + src: "/assets/images/icons/call.png", + label: "Call", }, { - href: "sms:1234567890", - src: "/assets/images/icons/sms.png", - label: "SMS", - offset: 150, // 60 + 160 + action: () => setShowChat(true), + src: "/assets/images/icons/chat.png", + label: "Chat", }, ]; return ( -
- {/* Extra icons */} - {extraIcons.map((icon, i) => ( - - {icon.label} - - ))} + <> + {/* Floating Contact Buttons */} +
+ {open && ( +
+ {extraIcons.map((icon, i) => + icon.href ? ( + + {icon.label} + + ) : ( + + ) + )} +
+ )} - {/* Main floating button */} - + +
+ + {/* Chat Form Sidebar */} + {showChat && ( + setShowChat(false)} /> + )} + + ); +} + +/** Contact Form Sidebar */ +function ChatForm({ onClose }) { + const [formData, setFormData] = useState({ + username: "", + lname: "", + email: "", + phone: "", + subject: "", + message: "", + }); + const [formErrors, setFormErrors] = useState({}); + const [captchaToken, setCaptchaToken] = useState(null); + const [alert, setAlert] = useState({ show: false, type: "", message: "" }); + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData((prev) => ({ ...prev, [name]: value })); + }; + + const handleCaptchaChange = (token) => { + setCaptchaToken(token); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + + const errors = {}; + if (!formData.username.trim()) errors.username = "First Name is required."; + if (!formData.lname.trim()) errors.lname = "Last Name is required."; + if (!formData.email.trim()) errors.email = "Email is required."; + if (!formData.phone.trim()) errors.phone = "Phone is required."; + if (!formData.subject.trim()) errors.subject = "Subject is required."; + if (!formData.message.trim()) errors.message = "Message is required."; + if (!captchaToken) errors.captcha = "Please verify the CAPTCHA."; + + setFormErrors(errors); + if (Object.keys(errors).length > 0) return; + + const emailData = { + ...formData, + message: `Subject: ${formData.subject}

Message: ${formData.message}`, + to: "bloor@rapharehab.ca", + senderName: "Rapha Rehab Chat Form", + recaptchaToken: captchaToken, + }; + + try { + const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, { + headers: { "Content-Type": "application/json" }, + }); + + setAlert({ + show: true, + type: "success", + message: res?.data?.message || "Message sent successfully!", + }); + + setFormData({ + username: "", + lname: "", + email: "", + phone: "", + subject: "", + message: "", + }); + setCaptchaToken(null); + setFormErrors({}); + } catch (error) { + setAlert({ + show: true, + type: "danger", + message: "Failed to send message. Please try again later.", + }); + } + }; + + return ( +
+
+
Chat with Us
+ +
+ +
+ {alert.show && ( +
{alert.message}
+ )} + +
+ + {formErrors.username && {formErrors.username}} + + + {formErrors.lname && {formErrors.lname}} + + + {formErrors.email && {formErrors.email}} + + + {formErrors.phone && {formErrors.phone}} + + + {formErrors.subject && {formErrors.subject}} + + + {formErrors.message && {formErrors.message}} + +
+ + {formErrors.captcha && {formErrors.captcha}} +
+ + +
+
); } diff --git a/components/SocialFloat.js b/components/SocialFloat.js new file mode 100644 index 0000000..c47e11e --- /dev/null +++ b/components/SocialFloat.js @@ -0,0 +1,99 @@ +"use client"; +import React, { useState } from "react"; + +export default function SocialFloat() { + const [open, setOpen] = useState(false); + + /** Social icons */ + const socialIcons = [ + { + href: "https://www.facebook.com/ELRaphaRehabCenter/", + iconClass: "icon-4", // Facebook + label: "Facebook", + offset: -40, + }, + { + href: "https://www.instagram.com/elrapharehab/", + iconClass: "icon-7", // Instagram + label: "Instagram", + offset: 40, + }, + ]; + + return ( +
+ {/* Extra social icons */} + {open && ( +
+ {socialIcons.map((icon, i) => ( + + + + ))} +
+ )} + + {/* Main floating button */} + +
+ ); +} diff --git a/components/layout/Layout.js b/components/layout/Layout.js index 3fc69d4..48abe61 100644 --- a/components/layout/Layout.js +++ b/components/layout/Layout.js @@ -18,6 +18,7 @@ import Header2 from './header/Header2'; import Header3 from "./header/Header3"; import Header4 from "./header/Header4"; import ContactFloat from "../ContactFloat"; +import SocialFloat from "../SocialFloat"; export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumbTitle, bannerImage, children, wrapperCls }) { const [scroll, setScroll] = useState(0); @@ -68,6 +69,7 @@ export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumb {footerStyle === 2 && }
+ ); diff --git a/components/sections/home2/MobileBanner.js b/components/sections/home2/MobileBanner.js index 4fd23e5..2710c78 100644 --- a/components/sections/home2/MobileBanner.js +++ b/components/sections/home2/MobileBanner.js @@ -53,7 +53,15 @@ export default function MobileBanner() { id: 0, variant: 'topToBottom', bgImage: '/assets/images/banner/mobile-banner/banner-1.webp', - hideContent: true + upperText: 'The Journey to Better Health Begins here', + title: 'Your Path to', + titleSpan: 'Recovery', + titleEnd: 'Starts Today', + subtitle: 'Expert Physiotherapy in Mississauga for You.', + description: 'Our skilled team provides physiotherapy in Mississauga to help you regain mobility and live pain-free. Compassionate care designed around your needs.', + buttonText: 'Book Your Appointment', + buttonLink: 'tel:+647-722-3434', + contentStyle: 'mobile-style' }, { id: 1, @@ -137,7 +145,7 @@ export default function MobileBanner() {
{slide.upperText} -

{slide.title} {slide.titleSpan} {slide.titleEnd}

+

+ {slide.title} {slide.titleSpan} {slide.titleEnd} +

{slide.subtitle}

{slide.description}

@@ -164,6 +170,7 @@ export default function MobileBanner() {
+ )} diff --git a/public/assets/css/module-css/banner.css b/public/assets/css/module-css/banner.css index 7ac3a3b..f3626db 100644 --- a/public/assets/css/module-css/banner.css +++ b/public/assets/css/module-css/banner.css @@ -680,6 +680,28 @@ } +@media only screen and (max-width:426px){ + + .banner-carousel .content-box h2 span{ + position: relative; + display: inline-block; + font-weight: 400; + color: #fff; +} + +.banner-carousel .content-box h2 span:before{ + position: absolute; + content: ''; + background: #bc0000; + width: 100%; + height: 4px; + left: 0px; + bottom: 0px; + border-radius: 5px; +} + +} + diff --git a/public/assets/images/banner-2.jpeg b/public/assets/images/banner-2.jpeg new file mode 100644 index 0000000..a969cce Binary files /dev/null and b/public/assets/images/banner-2.jpeg differ diff --git a/public/assets/images/banner/mobile-banner/banner-1.webp b/public/assets/images/banner/mobile-banner/banner-1.webp index 31e2b89..1ccc84f 100644 Binary files a/public/assets/images/banner/mobile-banner/banner-1.webp and b/public/assets/images/banner/mobile-banner/banner-1.webp differ diff --git a/public/assets/images/banner/mobile-banner/banner-2.webp b/public/assets/images/banner/mobile-banner/banner-2.webp index 40dc791..a0a442d 100644 Binary files a/public/assets/images/banner/mobile-banner/banner-2.webp and b/public/assets/images/banner/mobile-banner/banner-2.webp differ diff --git a/public/assets/images/banner/mobile-banner/banner-3.webp b/public/assets/images/banner/mobile-banner/banner-3.webp index 4fc38c5..1f11e5c 100644 Binary files a/public/assets/images/banner/mobile-banner/banner-3.webp and b/public/assets/images/banner/mobile-banner/banner-3.webp differ diff --git a/public/assets/images/banner/mobile-banner/banner-4.webp b/public/assets/images/banner/mobile-banner/banner-4.webp index 57597c4..82b2142 100644 Binary files a/public/assets/images/banner/mobile-banner/banner-4.webp and b/public/assets/images/banner/mobile-banner/banner-4.webp differ diff --git a/public/assets/images/icon.png b/public/assets/images/icon.png new file mode 100644 index 0000000..3d882f0 Binary files /dev/null and b/public/assets/images/icon.png differ