Merge branch 'team' of https://git.metatroncube.in/MetatroncubeSoftwareSolutions/janahan-law into team

components/AutoPopup.js

@@ -0,0 +1,233 @@
+"use client";
+import React, { useState, useRef, useEffect } from "react";
+import SimpleReactValidator from "simple-react-validator";
+import ReCAPTCHA from "react-google-recaptcha";
+import axios from "axios";
+import { useTranslation } from "next-i18next";
+
+export default function AutoPopup() {
+    const [show, setShow] = useState(false);
+
+    useEffect(() => {
+        const timer = setTimeout(() => setShow(true), 10000); // Show after 10s
+        return () => clearTimeout(timer);
+    }, []);
+
+    const { t } = useTranslation("contact");
+    const subjectOptions = t("form.subjectOptions", { returnObjects: true });
+
+    const [forms, setForms] = useState({
+        name: "",
+        email: "",
+        subject: "",
+        phone: "",
+        message: "",
+    });
+
+    const [validator] = useState(
+        new SimpleReactValidator({
+            className: "errorMessage",
+        })
+    );
+
+    const recaptchaRef = useRef(null);
+    const [recaptchaToken, setRecaptchaToken] = useState(null);
+
+    const RECAPTCHA_SITEKEY = "6Lc5wKUrAAAAAKqIviSUY2PsqLQ8Bq8CJJaHFA_f";
+
+    const changeHandler = (e) => {
+        const { name, value } = e.target;
+        setForms({ ...forms, [name]: value });
+
+        if (validator.allValid() && recaptchaToken) {
+            validator.hideMessages();
+        } else {
+            validator.showMessages();
+        }
+    };
+
+    const handleRecaptcha = (token) => {
+        setRecaptchaToken(token);
+        if (validator.allValid() && token) {
+            validator.hideMessages();
+        }
+    };
+
+    const submitHandler = async (e) => {
+        e.preventDefault();
+
+        if (validator.allValid() && recaptchaToken) {
+            validator.hideMessages();
+
+            const emailPayload = {
+                name: forms.name,
+                email: forms.email,
+                phone: forms.phone,
+                subject: forms.subject,
+                message: `Subject: ${forms.subject}\n\nMessage:\n${forms.message}`,
+                to: "info@janahanlaw.com",
+                senderName: "Janahan Law",
+                recaptchaToken: recaptchaToken,
+            };
+
+            try {
+                await axios.post("https://mailserver.metatronnest.com/send", emailPayload, {
+                    headers: { "Content-Type": "application/json" },
+                });
+
+                alert(t("form.successMessage"));
+
+                setForms({
+                    name: "",
+                    email: "",
+                    subject: "",
+                    phone: "",
+                    message: "",
+                });
+
+                validator.hideMessages();
+
+                if (recaptchaRef.current) {
+                    try {
+                        recaptchaRef.current.reset();
+                    } catch (err) { }
+                }
+                setRecaptchaToken(null);
+            } catch (err) {
+                alert(t("form.failedMessage"));
+            }
+        } else {
+            validator.showMessages();
+            setForms((prev) => ({ ...prev }));
+        }
+    };
+
+    if (!show) return null;
+
+    return (
+        <>
+
+            {/* Backdrop */}
+            <div
+                className="position-fixed top-0 start-0 w-100 h-100"
+                style={{
+                    backgroundColor: "rgba(0,0,0,0.5)", // gray transparent background
+                    zIndex: 99, // below popup but above page
+                }}
+                onClick={() => setShow(false)} // click on backdrop closes modal
+            ></div>
+
+            {/* Popup */}
+            <div
+                className="position-fixed top-50 start-50 translate-middle w-100 px-3"
+                style={{
+                    maxWidth: "600px", // limit on desktop
+                    zIndex: 10000,
+                }}
+            >
+                <div className="card shadow-lg">
+                    <div className="card-header d-flex justify-content-between align-items-center">
+                        <h5 className="mb-0">{t('contactInfo.pageTitle')}</h5>
+                        <button
+                            type="button"
+                            className="btn-close"
+                            onClick={() => setShow(false)}
+                        ></button>
+                    </div>
+                    <div className="card-body p-0">
+                        <div style={{ padding: "15px 10px 15px 20px" }}>
+                            <form onSubmit={submitHandler} className="contact-validation-active">
+                                <div className="row w-100">
+                                    <div className="col-6">
+                                        <input
+                                            value={forms.name}
+                                            type="text"
+                                            name="name"
+                                            onBlur={changeHandler}
+                                            onChange={changeHandler}
+                                            placeholder={t("form.namePlaceholder")}
+                                            className="form-control mb-2"
+                                        />
+                                        {validator.message("name", forms.name, "required|alpha_space")}
+                                    </div>
+
+                                    <div className="col-6">
+                                        <input
+                                            value={forms.email}
+                                            type="email"
+                                            name="email"
+                                            onBlur={changeHandler}
+                                            onChange={changeHandler}
+                                            placeholder={t("form.emailPlaceholder")}
+                                            className="form-control mb-2"
+                                        />
+                                        {validator.message("email", forms.email, "required|email")}
+                                    </div>
+
+                                    <div className="col-6">
+                                        <input
+                                            value={forms.phone}
+                                            type="phone"
+                                            name="phone"
+                                            onBlur={changeHandler}
+                                            onChange={changeHandler}
+                                            placeholder={t("form.phonePlaceholder")}
+                                            className="form-control mb-2"
+                                        />
+                                        {validator.message("phone", forms.phone, "required|phone")}
+                                    </div>
+
+                                    <div className="col-6">
+                                        <select
+                                            onBlur={changeHandler}
+                                            onChange={changeHandler}
+                                            value={forms.subject}
+                                            name="subject"
+                                            className="form-select mb-2"
+                                        >
+                                            <option value="">{t("form.subjectPlaceholder")}</option>
+                                            {Array.isArray(subjectOptions) &&
+                                                subjectOptions.map((opt, idx) => (
+                                                    <option key={idx}>{opt}</option>
+                                                ))}
+                                        </select>
+                                        {validator.message("subject", forms.subject, "required")}
+                                    </div>
+
+                                    <div className="col-12">
+                                        <textarea
+                                            onBlur={changeHandler}
+                                            onChange={changeHandler}
+                                            value={forms.message}
+                                            name="message"
+                                            placeholder={t("form.messagePlaceholder")}
+                                            className="form-control mb-2"
+                                        ></textarea>
+                                        {validator.message("message", forms.message, "required")}
+                                    </div>
+
+                                    <div className="col-12 mb-2">
+                                        <ReCAPTCHA
+                                            ref={recaptchaRef}
+                                            sitekey={RECAPTCHA_SITEKEY}
+                                            onChange={handleRecaptcha}
+                                        />
+                                        {!recaptchaToken && (
+                                            <div className="errorMessage">
+                                                {t("form.requiredMessages.recaptcha")}
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+
+                                <button type="submit" className="btn btn-primary w-100" >
+                                    {t("form.submitButton")}
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

components/ContactFrom/ContactForm.js

@@ -58,7 +58,7 @@ const ContactForm = () => {
         subject: forms.subject,
         message: `Subject: ${forms.subject}\n\nMessage:\n${forms.message}`,
         to: "info@janahanlaw.com",
-        senderName: "Website Contact Form",
+        senderName: "Janahan Law",
         recaptchaToken: recaptchaToken,
       };
 

components/HeaderTopbar/HeaderTopbar.js

@@ -7,43 +7,120 @@ import Image from 'next/image'
 import { useTranslation } from 'next-i18next'
 import { changeLanguage } from '../../utils/commonFunction.utils'
 import { useRouter } from 'next/router'
+import Slider from 'react-slick'
 
 const HeaderTopbar = () => {
-  const { t } = useTranslation('common')
+  const { t, i18n } = useTranslation('common')
-
   const router = useRouter()
 
-  const handleLanguageChange = () => {
+  const handleLanguageChange = (locale) => {
-    changeLanguage(router, 'es'); // always switch to Spanish
+    changeLanguage(router, locale)
-  };
+  }
+
+  // Slider Settings
+  const settings = {
+    dots: false,
+    arrows: false,
+    infinite: true,
+    autoplay: true,
+    autoplaySpeed: 2000,
+    speed: 600,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    fade: true,
+  }
 
   return (
     <>
       <div
-        className="header-top py-2 "
+        className="header-top py-2"
         style={{
           background: 'linear-gradient(90deg, #C12026 11.32%, #E14448 95.28%)',
         }}
       >
         <div className="container-fluid">
-          <div className='d-flex justify-content-center align-items-center gap-5 flex-wrap'>
+          <Slider {...settings}>
-            <div className="text-center" style={{ color: 'white' }}>
+            {/* 🔹 Show only Spanish switch if current lang is English */}
-              Haz clic en el botón para cambiar a español.
+            {i18n.language === 'en' && (
-            </div>
+              <div>
-            <button onClick={handleLanguageChange} className='white-button'>Haz clic aquí</button>
+                <div className="d-flex justify-content-center align-items-center gap-1 gap-md-5 flex-wrap">
-          </div>
+                  <div className="text-center text-white">
+                    Haz clic en el botón para cambiar el idioma a <b>Español</b>.
+                  </div>
+                  <button
+                    onClick={() => handleLanguageChange('es')}
+                    className="white-button"
+                  >
+                    Cambiar a Español
+                  </button>
+                </div>
+              </div>
+            )}
+            {
+              i18n.language === 'es' && (
+                <div>
+                  <div className="d-flex justify-content-center align-items-center gap-1 gap-md-5 flex-wrap">
+                    <div className="text-center text-white">
+                      Haz clic en el botón para cambiar el idioma a <b>Inglés</b>.
+                    </div>
+                    <button
+                      onClick={() => handleLanguageChange('en')}
+                      className="white-button"
+                    >
+                      Cambiar a Inglés
+                    </button>
+                  </div>
+                </div>
+              )
+            }
+
+            {/* 🔹 Show only English switch if current lang is Spanish */}
+            {i18n.language === 'en' && (
+              <div>
+                <div className="d-flex justify-content-center align-items-center gap-1 gap-md-5 flex-wrap">
+                  <div className="text-center text-white">
+                    Click the button to switch the language to <b>Spanish</b>.
+                  </div>
+                  <button
+                    onClick={() => handleLanguageChange('es')}
+                    className="white-button"
+                  >
+                    Switch to Spanish
+                  </button>
+                </div>
+              </div>
+            )}
+            {i18n.language === 'es' && (
+              <div>
+                <div className="d-flex justify-content-center align-items-center gap-1 gap-md-5 flex-wrap">
+                  <div className="text-center text-white">
+                    Click the button to switch the language to <b>English</b>.
+                  </div>
+                  <button
+                    onClick={() => handleLanguageChange('en')}
+                    className="white-button"
+                  >
+                    Switch to English
+                  </button>
+                </div>
+              </div>
+            )}
+          </Slider>
         </div>
       </div>
 
+      {/* 🔹 Main Topbar */}
       <div className="topbar d-lg-block d-none">
         <div className="container">
           <div className="row align-items-center">
+            {/* Logo */}
             <div className="col-lg-3 col-12 d-lg-block d-none">
               <Link className="navbar-brand" href="/">
                 <Image src={Logo} alt="logo" />
               </Link>
             </div>
 
+            {/* Contact Info */}
             <div className="col-lg-6 col-12">
               <div className="contact-info-wrap">
                 <div className="contact-info">
@@ -67,6 +144,7 @@ const HeaderTopbar = () => {
               </div>
             </div>
 
+            {/* Contact Button */}
             <div className="col-lg-3 col-12 d-flex justify-content-end align-items-center">
               <div className="contact-info ms-3">
                 <Link className="theme-btn" href="tel:+919847739275">

next-i18next.config.js

@@ -1,7 +1,7 @@
 
 module.exports = {
     i18n: {
-        defaultLocale: 'es',
+        defaultLocale: 'en',
         locales: ['en', 'es'],
         localeDetection: false,
     },

pages/_app.js

@@ -16,15 +16,17 @@ import Head from "next/head";
 
 // Import appWithTranslation from next-i18next
 import { appWithTranslation } from 'next-i18next';
+import AutoPopup from "../components/AutoPopup";
 
 function MyApp({ Component, pageProps }) {
   return (
-    <div>
+    <div className="position-relative">
       <Head>
         <title>Janahan Law - US Immigration Law</title>
       </Head>
       <Provider store={store}>
         <PersistGate loading={null} persistor={persistor}>
+          <AutoPopup /> 
           <Component {...pageProps} />
           <ToastContainer />
         </PersistGate>

pages/about/index.js

@@ -50,7 +50,7 @@ export default AboutPage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor', 'footer', 'innerBanner'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor', 'footer', 'innerBanner', 'contact'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }

pages/about/our-mission.js

@@ -26,7 +26,7 @@ export default AboutPage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'ourMission', 'footer'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'ourMission', 'footer', 'contact'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }

pages/about/racial-justice.js

@@ -26,7 +26,7 @@ export default AboutPage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'racialJustice', 'footer'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'racialJustice', 'footer', 'contact'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }

pages/blog/[slug].js

@@ -96,7 +96,7 @@ export async function getStaticPaths() {
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'blog', 'footer', 'innerBanner'])),
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'blog', 'footer', 'innerBanner', 'contact'])),
         },
     };
 }

pages/blog/index.js

@@ -26,7 +26,7 @@ export default BlogPage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'blog', 'footer'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'blog', 'footer', 'contact'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }

pages/index.js

@@ -42,7 +42,7 @@ export default HomePage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction', 'blog', 'footer', 'services'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction', 'blog', 'footer', 'services', 'contact', 'innerBanner'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }

pages/our-approach/index.js

@@ -30,7 +30,7 @@ export default OurApproach;
 export async function getStaticProps({ locale }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, ['menu',"common","ourApproach","footer", 'innerBanner'])),
+      ...(await serverSideTranslations(locale, ['menu',"common","ourApproach","footer", 'innerBanner', 'contact'])),
     },
   };
 }

pages/services/[slug].js

@@ -117,7 +117,7 @@ export async function getStaticProps({ params, locale }) {
   return {
     props: {
       service,
-      ...(await serverSideTranslations(locale, ["common", "menu", "services", , 'footer'])),
+      ...(await serverSideTranslations(locale, ["common", "menu", "services", , 'footer', 'contact'])),
     },
   };
 }

pages/services/index.js

@@ -31,7 +31,7 @@ export default Services;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'services', 'footer'])), // Add 'home', 'footer', etc.
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'services', 'footer', 'contact'])), // Add 'home', 'footer', etc.
         },
     };
 }

public/locales/en/contact.json

@@ -5,7 +5,8 @@
     "callTitle": "Call Now",
     "phone": "+1 (305) 330-7413",
     "questionTitle": "Have Any Question?",
-    "questionDesc": "We’re here to help with all your U.S. immigration and legal needs — contact Janahan Law for trusted guidance today."
+    "questionDesc": "We’re here to help with all your U.S. immigration and legal needs — contact Janahan Law for trusted guidance today.",
+    "pageTitle": "Contact Us"
   },
   "form": {
     "namePlaceholder": "Your Name",
@@ -48,4 +49,4 @@
       "recaptcha": "Please complete the ReCAPTCHA"
     }
   }
-}
+}

public/locales/es/contact.json

@@ -5,7 +5,8 @@
     "callTitle": "Llama ahora",
     "phone": "+1 (305) 330-7413",
     "questionTitle": "¿Tienes alguna pregunta?",
-    "questionDesc": "Estamos aquí para ayudarte con todas tus necesidades legales y de inmigración en EE. UU. — contacta a Janahan Law para obtener orientación confiable hoy."
+    "questionDesc": "Estamos aquí para ayudarte con todas tus necesidades legales y de inmigración en EE. UU. — contacta a Janahan Law para obtener orientación confiable hoy.",
+    "pageTitle": "Contáctenos"
   },
   "form": {
     "namePlaceholder": "Tu Nombre",
@@ -48,4 +49,4 @@
       "recaptcha": "Por favor completa el ReCAPTCHA"
     }
   }
-}
+}

styles/sass/layout/_header.scss

@@ -8,6 +8,7 @@
 .topbar {
 	padding: 20px 0;
 	border-bottom: 1px solid #D9D9D9;
+	background-color: white;
 
 	.contact-info-wrap {
 		display: flex;
@@ -961,6 +962,8 @@
 
 
 .wpo-site-header {
+	background-color: white;
+
 	.navigation {
 		background-color: transparent;
 		margin-bottom: 0;

styles/sass/page/_contact.scss

@@ -227,4 +227,118 @@
 	h2.hidden {
 		display: none;
 	}
+}
+
+.form-field {
+	margin-bottom: 30px;
+}
+
+.errorMessage {
+	color: red;
+	font-size: 14px;
+	margin-top: 5px;
+}
+
+form input,
+form select,
+form textarea {
+	background: transparent;
+	width: 100%;
+	height: 50px;
+	border: 1px solid transparent;
+	border-radius: 0px;
+	box-shadow: none !important;
+	padding-left: 25px;
+	border: 1px solid #ebebeb;
+	color: #a9a9a9;
+
+	@include media-query(991px) {
+		height: 45px;
+	}
+
+	&:focus {
+		border-color: $theme-primary-color;
+		background: transparent;
+	}
+}
+
+form textarea {
+	height: 180px;
+	padding-top: 15px;
+}
+
+form {
+	margin: 0;
+	overflow: hidden;
+
+	@include placeholder-style(#9d9c9c, 15px, normal);
+
+	select {
+		display: inline-block;
+		color: #a9a9a9;
+		cursor: pointer;
+		opacity: 1;
+		padding: 6px 25px;
+		font-size: 15px;
+		font-size: calc-rem-value(15);
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		-o-appearance: none;
+		appearance: none;
+		-moz-appearance: none;
+		background: transparent url(/images/select-icon2.png) no-repeat calc(100% - 15px) center;
+		position: relative;
+
+		&:focus {
+			background: transparent url(/images/select-icon2.png) no-repeat calc(100% - 15px) center;
+		}
+	}
+
+	.submit-area {
+		text-align: center;
+		width: 100%;
+		margin-bottom: 10px;
+		margin-left: 0;
+
+		@include media-query(767px) {
+			margin-bottom: 0;
+		}
+
+		.theme-btn {
+			border-radius: 0px;
+			font-family: $base-font;
+			font-size: 16px;
+
+			&:after {
+				border-radius: 0px;
+			}
+		}
+	}
+}
+
+form>div {
+	margin: 0 15px 25px;
+
+	@include media-query(600px) {
+		width: calc(100% - 25px);
+	}
+}
+
+form .fullwidth {
+	width: calc(100% - 25px);
+	float: none;
+	clear: both;
+}
+
+form>div>div {
+	margin-bottom: 7px;
+}
+
+.popup-form {
+	position: absolute;
+	top: "20%  !important;";
+	right: "35%  !important;";
+	z-index: 10000 !important;
+	width: "600px  !important;";
+	max-width: "100%  !important;";
 }