Merge branch 'contact-endpoint-bug' of MERMS/MermsWebsite2025 into master

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+.next
+.git
+*.log

.env

@@ -1,13 +1,21 @@
 APP_PORT=8091
 ESLINT_NO_DEV_ERRORS=true
-PANEL_URL=https://dev-panel.mermsemr.com
+PANEL_URL=https://panel.mermsemr.com
 
 # auth routes
-NEXT_PUBLIC_LOGIN_URL=https://dev-panel.mermsemr.com
-NEXT_PUBLIC_SIGNUP_URL=https://dev-panel.mermsemr.com/auth/signup
+NEXT_PUBLIC_LOGIN_URL=https://panel.mermsemr.com
+NEXT_PUBLIC_SIGNUP_URL=https://panel.mermsemr.com/auth/signup
+NEXT_PUBLIC_MERMS_WEBSITE_BASE_URL='https://blogdata.chiefsoft.net'
+NEXT_PUBLIC_APP_MAIN_API="https://devapi.mermsemr.com"
 
 # social links
 NEXT_PUBLIC_FACEBOOK_URL=https://www.facebook.com/people/Mermsemr/100066498622246/
 NEXT_PUBLIC_TWITTER_URL=#
 NEXT_PUBLIC_INSTAGRAM_URL=#
-NEXT_PUBLIC_YOUTUBE_URL=#
+NEXT_PUBLIC_YOUTUBE_URL=#
+
+#forum
+NEXT_SITE_FORUM=https://blog.mermsemr.com/
+
+#SITE API
+NEXT_SITE_BACKEND_SERVER=https://api.mermsemr.com/

.env.development

@@ -0,0 +1,21 @@
+APP_PORT=8091
+ESLINT_NO_DEV_ERRORS=true
+PANEL_URL=https://dev-panel.mermsemr.com
+
+# auth routes
+NEXT_PUBLIC_LOGIN_URL=https://dev-panel.mermsemr.com
+NEXT_PUBLIC_SIGNUP_URL=https://dev-panel.mermsemr.com/auth/signup
+NEXT_PUBLIC_MERMS_WEBSITE_BASE_URL='https://blogdata.chiefsoft.net'
+NEXT_PUBLIC_APP_MAIN_API="https://devapi.mermsemr.com"
+
+# social links
+NEXT_PUBLIC_FACEBOOK_URL=https://www.facebook.com/people/Mermsemr/100066498622246/
+NEXT_PUBLIC_TWITTER_URL=#
+NEXT_PUBLIC_INSTAGRAM_URL=#
+NEXT_PUBLIC_YOUTUBE_URL=#
+
+#forum
+NEXT_SITE_FORUM=https://blog.mermsemr.com/
+
+#SITE API
+NEXT_SITE_BACKEND_SERVER=https://devapi.mermsemr.com/

.env.local

@@ -0,0 +1,21 @@
+APP_PORT=8091
+ESLINT_NO_DEV_ERRORS=true
+PANEL_URL=https://panel.mermsemr.com
+
+# auth routes
+NEXT_PUBLIC_LOGIN_URL=https://panel.mermsemr.com
+NEXT_PUBLIC_SIGNUP_URL=https://panel.mermsemr.com/auth/signup
+NEXT_PUBLIC_MERMS_WEBSITE_BASE_URL='https://blogdata.chiefsoft.net'
+NEXT_PUBLIC_APP_MAIN_API="https://devapi.mermsemr.com"
+
+# social links
+NEXT_PUBLIC_FACEBOOK_URL=https://www.facebook.com/people/Mermsemr/100066498622246/
+NEXT_PUBLIC_TWITTER_URL=#
+NEXT_PUBLIC_INSTAGRAM_URL=#
+NEXT_PUBLIC_YOUTUBE_URL=#
+
+#forum
+NEXT_SITE_FORUM=https://blog.mermsemr.com/
+
+#SITE API
+NEXT_SITE_BACKEND_SERVER=https://api.mermsemr.com/

.env.production

@@ -0,0 +1,21 @@
+APP_PORT=8091
+ESLINT_NO_DEV_ERRORS=true
+PANEL_URL=https://panel.mermsemr.com
+
+# auth routes
+NEXT_PUBLIC_LOGIN_URL=https://panel.mermsemr.com
+NEXT_PUBLIC_SIGNUP_URL=https://panel.mermsemr.com/auth/signup
+NEXT_PUBLIC_MERMS_WEBSITE_BASE_URL='https://blogdata.chiefsoft.net'
+NEXT_PUBLIC_APP_MAIN_API="https://devapi.mermsemr.com"
+
+# social links
+NEXT_PUBLIC_FACEBOOK_URL=https://www.facebook.com/people/Mermsemr/100066498622246/
+NEXT_PUBLIC_TWITTER_URL=#
+NEXT_PUBLIC_INSTAGRAM_URL=#
+NEXT_PUBLIC_YOUTUBE_URL=#
+
+#forum
+NEXT_SITE_FORUM=https://blog.mermsemr.com/
+
+#SITE API
+NEXT_SITE_BACKEND_SERVER=https://api.mermsemr.com/

.env.test

@@ -0,0 +1,21 @@
+APP_PORT=8091
+ESLINT_NO_DEV_ERRORS=true
+PANEL_URL=https://qa-panel.mermsemr.com
+
+# auth routes
+NEXT_PUBLIC_LOGIN_URL=https://qa-panel.mermsemr.com
+NEXT_PUBLIC_SIGNUP_URL=https://qa-panel.mermsemr.com/auth/signup
+NEXT_PUBLIC_MERMS_WEBSITE_BASE_URL='https://blogdata.chiefsoft.net'
+NEXT_PUBLIC_APP_MAIN_API="https://devapi.mermsemr.com"
+
+# social links
+NEXT_PUBLIC_FACEBOOK_URL=https://www.facebook.com/people/Mermsemr/100066498622246/
+NEXT_PUBLIC_TWITTER_URL=#
+NEXT_PUBLIC_INSTAGRAM_URL=#
+NEXT_PUBLIC_YOUTUBE_URL=#
+
+#forum
+NEXT_SITE_FORUM=https://blog.mermsemr.com/
+
+#SITE API
+NEXT_SITE_BACKEND_SERVER=https://devapi.mermsemr.com/

README.md

@@ -0,0 +1,34 @@
+# MermsWebsite2025
+
+## Running
+
+### Development
+
+Docker:
+```
+NODE_ENV=development docker compose --env-file .env.development up -d
+```
+Direct:
+```
+NODE_ENV=development npm run dev
+```
+### QA
+
+Docker:
+```
+NODE_ENV=test docker compose --env-file .env.test up -d
+```
+Direct:
+```
+NODE_ENV=test npm run dev
+```
+### Production
+
+Docker:
+```
+NODE_ENV=live docker compose --env-file .env up -d
+```
+Direct:
+```
+NODE_ENV=live npm run dev
+```

components/elements/LanguageSwitcher.js

@@ -0,0 +1,38 @@
+import { useRouter } from "next/router"
+import { useTranslations } from "next-intl"
+
+const LOCALES = [
+  { code: "en", label: "EN" },
+  { code: "fr", label: "FR" },
+  { code: "es", label: "ES" },
+]
+
+export default function LanguageSwitcher() {
+  const router = useRouter()
+  const t = useTranslations("Navigation")
+
+  const switchLocale = (locale) => {
+    router.push(router.asPath, router.asPath, { locale })
+  }
+
+  return (
+    <li className="nl-simple" aria-haspopup="true" style={{ listStyle: "none", marginLeft: "auto", fontSize: '10px' }}>
+      <span className="h-link" style={{ cursor: "default" }}>
+        {t("language")} <span className="wsarrow" />
+      </span>
+      <ul className="sub-menu">
+        {LOCALES.map(({ code, label }) => (
+          <li key={code} aria-haspopup="true">
+            <a
+              href="#"
+              onClick={(e) => { e.preventDefault(); switchLocale(code) }}
+              style={{ fontWeight: router.locale === code ? "700" : "400" }}
+            >
+              {label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </li>
+  )
+}

components/layout/Menu.js

@@ -1,55 +1,55 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useTranslations } from "next-intl";
+import LanguageSwitcher from "../elements/LanguageSwitcher";
 
 export default function Menu() {
-  const router = useRouter();
-
+  const t = useTranslations("Navigation");
   return (
     <>
       <ul className="wsmenu-list nav-theme">
-        {/* DROPDOWN SUB MENU */}
         <li aria-haspopup="true">
-          <Link href="#" className="h-link">
-            About <span className="wsarrow" />
+          <Link href="/#" className="h-link">
+            {t("about")} <span className="wsarrow" />
           </Link>
           <ul className="sub-menu">
             <li aria-haspopup="true">
-              <Link href="#merms-about">Why MERMS?</Link>
+              <Link href="/#merms-about">{t("whyMerms")}</Link>
             </li>
             <li aria-haspopup="true">
-              <Link href="#merms-works">How It Works</Link>
+              <Link href="/#merms-works">{t("howItWorks")}</Link>
             </li>
+            {/* <li aria-haspopup="true">
+              <Link href="/contacts">{t("contactUs")}</Link>
+            </li> */}
             <li aria-haspopup="true">
-              <Link href="/contacts">Contacts Us</Link>
-            </li>
-            <li aria-haspopup="true">
-              <Link href="/faqs">F.A.Q.</Link>
+              <Link href="/help-center">{t("helpCenter")}</Link>
             </li>
           </ul>
         </li>
-        {/* SIMPLE NAVIGATION LINK */}
         <li className="nl-simple" aria-haspopup="true">
           <Link href="/#merms-features" className="h-link">
-            Features
+            {t("features")}
           </Link>
         </li>
-        <li
-          className="nl-simple reg-fst-link mobile-last-link"
-          aria-haspopup="true"
-        >
+        <li className="nl-simple" aria-haspopup="true">
+          <Link href="/contacts" className="h-link">
+            {t("contactUs")}
+          </Link>
+        </li>
+        <li className="nl-simple reg-fst-link mobile-last-link" aria-haspopup="true">
           <Link href={process.env.NEXT_PUBLIC_LOGIN_URL} className="h-link">
-            Sign in
+            {t("signIn")}
           </Link>
         </li>
-        {/* SIGN UP BUTTON */}
         <li className="nl-simple" aria-haspopup="true">
           <Link
             href={process.env.NEXT_PUBLIC_SIGNUP_URL}
             className="btn r-04 btn--theme hover--tra-white last-link"
           >
-            Sign up
+            {t("signUp")}
           </Link>
         </li>
+        <LanguageSwitcher />
       </ul>
     </>
   );

components/layout/MobileMenu.js

@@ -1,80 +1,63 @@
 import Link from "next/link";
 import { useState } from "react";
+import { useTranslations } from "next-intl";
+
 export default function MobileMenu() {
-  const [isActive, setIsActive] = useState({
-    status: false,
-    key: "",
-  });
+  const t = useTranslations("Navigation");
+  const [isActive, setIsActive] = useState({ status: false, key: "" });
 
   const handleToggle = (key) => {
     if (isActive.key === key) {
-      setIsActive({
-        status: false,
-      });
+      setIsActive({ status: false });
     } else {
-      setIsActive({
-        status: true,
-        key,
-      });
+      setIsActive({ status: true, key });
     }
   };
+
   return (
     <>
       <ul className="wsmenu-list nav-theme">
-        {/* DROPDOWN SUB MENU */}
         <li aria-haspopup="true">
           <span
-            className={
-              isActive.key == 1 ? "wsmenu-click ws-activearrow" : "wsmenu-click"
-            }
+            className={isActive.key == 1 ? "wsmenu-click ws-activearrow" : "wsmenu-click"}
             onClick={() => handleToggle(1)}
           >
             <i className="wsmenu-arrow" />
           </span>
           <Link href="#" className="h-link">
-            About <span className="wsarrow" />
+            {t("about")} <span className="wsarrow" />
           </Link>
-          <ul
-            className="sub-menu"
-            style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}
-          >
+          <ul className="sub-menu" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
             <li aria-haspopup="true">
-              <Link href="#merms-about">Why MERMS?</Link>
+              <Link href="#merms-about">{t("whyMerms")}</Link>
             </li>
             <li aria-haspopup="true">
-              <Link href="#merms-works">How It Works</Link>
+              <Link href="#merms-works">{t("howItWorks")}</Link>
             </li>
             <li aria-haspopup="true">
-              <Link href="/contacts">Contacts Us</Link>
+              <Link href="/contacts">{t("contactUs")}</Link>
             </li>
             <li aria-haspopup="true">
               <Link href="/faqs">F.A.Q.</Link>
             </li>
           </ul>
         </li>
-        {/* SIMPLE NAVIGATION LINK */}
         <li className="nl-simple" aria-haspopup="true">
           <Link href="#merms-features" className="h-link">
-            Features
+            {t("features")}
           </Link>
         </li>
-
-        {/* SIGN IN LINK */}
-        <li
-          className="nl-simple reg-fst-link mobile-last-link"
-          aria-haspopup="true"
-        >
+        <li className="nl-simple reg-fst-link mobile-last-link" aria-haspopup="true">
           <Link href={process.env.NEXT_PUBLIC_LOGIN_URL} className="h-link">
-            Sign in
+            {t("signIn")}
           </Link>
         </li>
-        {/* SIGN UP BUTTON */}
         <li className="nl-simple" aria-haspopup="true">
           <Link
             href={process.env.NEXT_PUBLIC_SIGNUP_URL}
             className="btn r-04 btn--theme hover--tra-white last-link"
           >
-            Sign up
+            {t("signUp")}
           </Link>
         </li>
       </ul>

components/layout/footer/MermsFooter.js

@@ -1,113 +1,71 @@
-
 import Link from "next/link"
+import { useTranslations } from "next-intl"
+
 export default function MermsFooter() {
+    const t = useTranslations("Footer")
     return (
         <>
-            <footer id="footer-3" className="pt-100 footer ft-3-ntr">
+            <footer id="footer-3" className="pt-100 footer ft-3-ntr" style={{backgroundColor: "#F6FFFB"}}>
                 <div className="container">
-                    {/* FOOTER CONTENT */}
                     <div className="row">
-                        {/* FOOTER LOGO */}
                         <div className="col-md-6 col-xl-4">
                             <div className="footer-info">
-                                <img className="footer-logo" src="/images/logo-pink.png" alt="footer-logo" />
+                                <img className="footer-logo" src="/images/logo-pink.png" alt="footer-logo"/>
                             </div>
                             <div>
-                                <p>
-                                    Do you need a secure online presence for your healthcare brand with reliable SEO and online marketing to grow? MermEmr helps healthcare professionals to achieve their online marketing service needs
-                                </p>
+                                <p>{t("description")}</p>
                             </div>
                         </div>
                         <div className="col-12 col-md-6 col-xl-8 row">
-                            {/* FOOTER LINKS */}
                             <div className="col-6 col-sm-4 col-md-4 col-xl-4">
                                 <div className="footer-links fl-1">
-                                    {/* Title */}
-                                    <h6 className="s-17 w-700">Company</h6>
-                                    {/* Links */}
+                                    <h6 className="s-17 w-700">{t("site")}</h6>
                                     <ul className="foo-links clearfix">
-                                        <li>
-                                            <p><Link href="/about">About Us</Link></p>
-                                        </li>
-                                        <li>
-                                            <p><Link href="/contacts">Contact Us</Link></p>
-                                        </li>
-                                        <li>
-                                            <p><Link href="/merms-blog">Our Blog</Link></p>
-                                        </li>
+                                        <li><p><Link href="/">{t("home")}</Link></p></li>
+                                        <li><p><Link href="/about">{t("aboutUs")}</Link></p></li>
+                                        <li><p><Link href="/contacts">{t("contactUs")}</Link></p></li>
                                     </ul>
                                 </div>
-                            </div> {/* END FOOTER LINKS */}
-                            {/* FOOTER LINKS */}
+                            </div>
                             <div className="col-6 col-sm-4 col-md-4 col-xl-4">
                                 <div className="footer-links fl-2">
-                                    {/* Title */}
-                                    <h6 className="s-17 w-700">Product</h6>
-                                    {/* Links */}
+                                    <h6 className="s-17 w-700">{t("resources")}</h6>
                                     <ul className="foo-links clearfix1">
-                                        <li>
-                                            <p><Link href="/features">Features</Link></p>
-                                        </li>
-                                        <li>
-                                            <p><Link href="/merms-updates">What's New</Link></p>
-                                        </li>
-                                        <li>
-                                            <p><Link href="/pricing">Pricing</Link></p>
-                                        </li>
-                                        <li>
-                                            <p><Link href="/help-center">Help Center</Link></p>
-                                        </li>
+                                        <li><p><Link href="/features">{t("features")}</Link></p></li>
+                                        <li><p><Link href="/help-center">{t("helpCenter")}</Link></p></li>
+                                        <li><p><Link href="https://blog.mermsemr.com/" target={"_blank"}>{t("ourForum")}</Link></p></li>
                                     </ul>
                                 </div>
-                            </div> {/* END FOOTER LINKS */}
-                            {/* FOOTER LINKS */}
+                            </div>
                             <div className="col-6 col-sm-4 col-md-4 col-xl-4">
                                 <div className="footer-links fl-3">
-                                    {/* Title */}
-                                    <h6 className="s-17 w-700">Legal</h6>
-                                    {/* Links */}
+                                    <h6 className="s-17 w-700">{t("legal")}</h6>
                                     <ul className="foo-links clearfix1">
-                                        <li>
-                                            <p><Link href="/terms">Terms of Use</Link></p>
-                                        </li>
-                                        <li>
-                                            <p><Link href="/privacy">Privacy Policy</Link></p>
-                                        </li>
-                                        <li>
-                                            <p><Link href="/cookies">Cookie Policy</Link></p>
-                                        </li>
-                                        {/*<li>*/}
-                                        {/*    <p><Link href="#">Site Map</Link></p>*/}
-                                        {/*</li>*/}
+                                        <li><p><Link href="/terms">{t("termsOfUse")}</Link></p></li>
+                                        <li><p><Link href="/privacy">{t("privacyPolicy")}</Link></p></li>
                                     </ul>
                                 </div>
                             </div>
                         </div>
-                    </div> {/* END FOOTER CONTENT */}
-                    <hr />
-
+                    </div>
+                    <hr/>
                     <div className="bottom-footer">
                         <div className="row row-cols-1 row-cols-md-2 d-flex align-items-center">
-                            {/* FOOTER COPYRIGHT */}
                             <div className="col">
                                 <div className="footer-copyright">
-                                    <p className="p-sm">© 2025 autoMedSys A.I. <span>All Rights Reserved</span></p>
+                                    <p className="p-sm">{t("copyright")} <span>{t("allRightsReserved")}</span></p>
                                 </div>
                             </div>
-                            {/* FOOTER SOCIALS */}
                             <div className="col">
                                 <ul className="bottom-footer-socials ico-20 text-end">
-                                    <li><Link href={process.env.NEXT_PUBLIC_FACEBOOK_URL}><span className="flaticon-facebook" /></Link></li>
-                                    <li><Link href={process.env.NEXT_PUBLIC_TWITTER_URL}><span className="flaticon-twitter" /></Link></li>
-                                    <li><Link href={process.env.NEXT_PUBLIC_INSTAGRAM_URL}><span className="flaticon-instagram" /></Link></li>
-                                    <li><Link href={process.env.NEXT_PUBLIC_YOUTUBE_URL}><span className="flaticon-youtube" /></Link></li>
+                                    <li><Link href={process.env.NEXT_PUBLIC_FACEBOOK_URL}><span className="flaticon-facebook"/></Link></li>
+                                    <li><Link href={process.env.NEXT_PUBLIC_TWITTER_URL}><span className="flaticon-twitter"/></Link></li>
                                 </ul>
                             </div>
-                        </div> {/* End row */}
-                    </div> {/* END BOTTOM FOOTER */}
-                </div> {/* End container */}
+                        </div>
+                    </div>
+                </div>
             </footer>
-
         </>
     )
 }

components/sections/MermsAbout.js

@@ -1,40 +1,32 @@
-
+import { useTranslations } from "next-intl"
 
 export default function MermsAbout() {
+    const t = useTranslations("About")
     return (
         <>
             <section id="merms-about" className="pt-100 ct-03 content-section division">
                 <div className="container">
                     <div className="row d-flex align-items-center">
-                        {/* IMAGE BLOCK */}
                         <div className="col-md-6 col-lg-7">
                             <div className="img-block left-column wow fadeInRight">
                                 <img className="img-fluid" src="/images/img-14.png" alt="content-image" />
                             </div>
                         </div>
-                        {/* TEXT BLOCK */}
                         <div className="col-md-6 col-lg-5">
                             <div className="txt-block right-column wow fadeInLeft">
-                                {/* Section ID */}
-                                {/*<span className="section-id">Control Data Access</span>*/}
-                                {/* Title */}
-                                <h2 className="s-46 w-700">The worldview of your practice matters.</h2>
-                                {/* List */}
+                                <h2 className="s-46 w-700">{t("title")}</h2>
                                 <ul className="simple-list">
                                     <li className="list-item">
-                                        <p>Actively or passively, your potential clients trust and evaluate your practice daily.
-                                        </p>
+                                        <p>{t("list1")}</p>
                                     </li>
                                     <li className="list-item">
-                                        <p className="mb-0">
-                                            In your profession that feeds heavily on trust and image, MERMS solutions actively guide and engage you with this task
-                                        </p>
+                                        <p className="mb-0">{t("list2")}</p>
                                     </li>
                                 </ul>
                             </div>
-                        </div>	{/* END TEXT BLOCK */}
-                    </div>    {/* End row */}
-                </div>	   {/* End container */}
+                        </div>
+                    </div>
+                </div>
             </section>
         </>
     )

components/sections/MermsAboutFeautures.js

@@ -1,169 +1,130 @@
+import { useTranslations } from "next-intl"
 
-export default function MermsAboutFeautures(){
-
+export default function MermsAboutFeautures() {
+    const t = useTranslations("AboutFeatures")
     return <>
         <section id="features-11" className="py-100 features-section division">
             <div className="container">
-                {/* SECTION TITLE */}
                 <div className="row justify-content-center">
                     <div className="col-md-10 col-lg-9">
                         <div className="section-title mb-70">
-                            {/* Title */}
-                            <h2 className="s-50 w-700">We help you drive your goals with ease</h2>
-
+                            <h2 className="s-50 w-700">{t("title")}</h2>
                         </div>
                     </div>
                 </div>
-                {/* FEATURES-11 WRAPPER */}
                 <div className="fbox-wrapper">
                     <div className="row row-cols-1 row-cols-md-2 rows-3">
-                        {/* FEATURE BOX #1 */}
                         <div className="col">
                             <div className="fbox-11 fb-1 wow fadeInUp">
-                                {/* Icon */}
                                 <div className="fbox-ico-wrap">
                                     <div className="fbox-ico ico-50">
                                         <div className="shape-ico">
-                                            {/* Vector Icon */}
                                             <span className="flaticon-graphics color--theme" />
-                                            {/* Shape */}
                                             <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                 <path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                             </svg>
                                         </div>
                                     </div>
-                                </div>	{/* End Icon */}
-                                {/* Text */}
+                                </div>
                                 <div className="fbox-txt">
-                                    <h6 className="s-22 w-700">Healthcare Website</h6>
-                                    <p>Our platform is thoughtfully designed to cater to the unique needs of healthcare practitioners, ensuring that you can focus on what truly matters - your mission.
-                                    </p>
+                                    <h6 className="s-22 w-700">{t("feature1Title")}</h6>
+                                    <p>{t("feature1Desc")}</p>
                                 </div>
                             </div>
-                        </div>	{/* END FEATURE BOX #1 */}
-                        {/* FEATURE BOX #2 */}
+                        </div>
                         <div className="col">
                             <div className="fbox-11 fb-2 wow fadeInUp">
-                                {/* Icon */}
                                 <div className="fbox-ico-wrap">
                                     <div className="fbox-ico ico-50">
                                         <div className="shape-ico">
-                                            {/* Vector Icon */}
                                             <span className="flaticon-idea color--theme" />
-                                            {/* Shape */}
                                             <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                 <path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                             </svg>
                                         </div>
                                     </div>
-                                </div>	{/* End Icon */}
-                                {/* Text */}
+                                </div>
                                 <div className="fbox-txt">
-                                    <h6 className="s-22 w-700">Auto Engage</h6>
-                                    <p>We use our artificial intelligence tools to assist you in getting your users' engagement activities going with ease. We help you connect your contestants on social media sites.
-                                    </p>
+                                    <h6 className="s-22 w-700">{t("feature2Title")}</h6>
+                                    <p>{t("feature2Desc")}</p>
                                 </div>
                             </div>
-                        </div>	{/* END FEATURE BOX #2 */}
-                        {/* FEATURE BOX #3 */}
+                        </div>
                         <div className="col">
                             <div className="fbox-11 fb-3 wow fadeInUp">
-                                {/* Icon */}
                                 <div className="fbox-ico-wrap">
                                     <div className="fbox-ico ico-50">
                                         <div className="shape-ico">
-                                            {/* Vector Icon */}
                                             <span className="flaticon-graphic color--theme" />
-                                            {/* Shape */}
                                             <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                 <path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                             </svg>
                                         </div>
                                     </div>
-                                </div>	{/* End Icon */}
-                                {/* Text */}
+                                </div>
                                 <div className="fbox-txt">
-                                    <h6 className="s-22 w-700">Patient News</h6>
-                                    <p>Engage your patients and others will topics that educate and improve outcomes with blog addition to your website.
-                                    </p>
+                                    <h6 className="s-22 w-700">{t("feature3Title")}</h6>
+                                    <p>{t("feature3Desc")}</p>
                                 </div>
                             </div>
-                        </div>	{/* END FEATURE BOX #3 */}
-                        {/* FEATURE BOX #4 */}
+                        </div>
                         <div className="col">
                             <div className="fbox-11 fb-4 wow fadeInUp">
-                                {/* Icon */}
                                 <div className="fbox-ico-wrap">
                                     <div className="fbox-ico ico-50">
                                         <div className="shape-ico">
-                                            {/* Vector Icon */}
                                             <span className="flaticon-wireframe color--theme" />
-                                            {/* Shape */}
                                             <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                 <path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                             </svg>
                                         </div>
                                     </div>
-                                </div>	{/* End Icon */}
-                                {/* Text */}
+                                </div>
                                 <div className="fbox-txt">
-                                    <h6 className="s-22 w-700">Practice Tools</h6>
-                                    <p>From appointment scheduling, messaging patient records management and billing, manage your features account in one simple portal.
-                                    </p>
+                                    <h6 className="s-22 w-700">{t("feature4Title")}</h6>
+                                    <p>{t("feature4Desc")}</p>
                                 </div>
                             </div>
-                        </div>	{/* END FEATURE BOX #4 */}
-                        {/* FEATURE BOX #5 */}
+                        </div>
                         <div className="col">
                             <div className="fbox-11 fb-5 wow fadeInUp">
-                                {/* Icon */}
                                 <div className="fbox-ico-wrap">
                                     <div className="fbox-ico ico-50">
                                         <div className="shape-ico">
-                                            {/* Vector Icon */}
                                             <span className="flaticon-trophy color--theme" />
-                                            {/* Shape */}
                                             <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                 <path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                             </svg>
                                         </div>
                                     </div>
-                                </div>	{/* End Icon */}
-                                {/* Text */}
+                                </div>
                                 <div className="fbox-txt">
-                                    <h6 className="s-22 w-700">Personal Website</h6>
-                                    <p>You are already a practitioner , sometimes you need to engage in general health discourse, we provide personal channels that augments your online presence.
-                                    </p>
+                                    <h6 className="s-22 w-700">{t("feature5Title")}</h6>
+                                    <p>{t("feature5Desc")}</p>
                                 </div>
                             </div>
-                        </div>	{/* END FEATURE BOX #5 */}
-                        {/* FEATURE BOX #6 */}
+                        </div>
                         <div className="col">
                             <div className="fbox-11 fb-6 wow fadeInUp">
-                                {/* Icon */}
                                 <div className="fbox-ico-wrap">
                                     <div className="fbox-ico ico-50">
                                         <div className="shape-ico">
-                                            {/* Vector Icon */}
                                             <span className="flaticon-search-engine-1 color--theme" />
-                                            {/* Shape */}
                                             <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                 <path fill="#f4f9fc" d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                             </svg>
                                         </div>
                                     </div>
-                                </div>	{/* End Icon */}
-                                {/* Text */}
+                                </div>
                                 <div className="fbox-txt">
-                                    <h6 className="s-22 w-700">SEO &amp; Insight</h6>
-                                    <p>Monitor traffic and performance of your sites, get improvement recommendations and assist for improvement applicable. 
-                                    </p>
+                                    <h6 className="s-22 w-700">{t("feature6Title")}</h6>
+                                    <p>{t("feature6Desc")}</p>
                                 </div>
                             </div>
-                        </div>	{/* END FEATURE BOX #6 */}
-                    </div>  {/* End row */}
-                </div>	{/* END FEATURES-11 WRAPPER */}
-            </div>     {/* End container */}
+                        </div>
+                    </div>
+                </div>
+            </div>
         </section>
     </>
-}
+}

components/sections/MermsBanner.js

@@ -1,38 +1,30 @@
-
-
 import Link from "next/link"
+import { useTranslations } from "next-intl"
+
 export default function MermsBanner() {
+    const t = useTranslations("Banner")
     return (
         <>
-            <section id="banner-13" className="pt-100 banner-section">
+            <section id="banner-13" className="pt-100 banner-section" style={{paddingBottom: '15px'}}>
                 <div className="container">
-                    {/* BANNER-13 WRAPPER */}
                     <div className="banner-13-wrapper bg--03 bg--scroll r-16 block-shadow">
                         <div className="banner-overlay">
                             <div className="row d-flex align-items-center">
-                                {/* BANNER-5 TEXT */}
                                 <div className="col-md-7">
                                     <div className="banner-13-txt color--white">
-                                        {/* Title */}
-                                        <h2 className="s-46 w-700">Getting started with MERMS today!</h2>
-                                        {/* Text */}
-                                        {/*<p className="p-lg">Congue laoreet turpis neque auctor turpis vitae dolor a luctus*/}
-                                        {/*    placerat and magna ligula cursus*/}
-                                        {/*</p>*/}
-                                        {/* Button */}
-                                        <Link href={process.env.NEXT_PUBLIC_SIGNUP_URL} className="btn r-04 btn--theme hover--tra-white" data-bs-toggle="modal" data-bs-target="#modal-3">Get Started Now</Link>
-                                    </div>
-                                </div>	{/* END BANNER-13 TEXT */}
-                                {/* BANNER-13 IMAGE */}
-                                <div className="col-md-5">
-                                    <div className="banner-13-img text-center">
-                                        <img className="img-fluid" src="/images/start-banner.png" alt="banner-image" />
+                                        <h2 className="s-46 w-700">{t("title")}</h2>
+                                        <Link href={process.env.NEXT_PUBLIC_SIGNUP_URL} className="btn r-04 btn--theme hover--tra-white" data-bs-toggle="modal" data-bs-target="#modal-3">{t("cta")}</Link>
                                     </div>
                                 </div>
-                            </div>   {/* End row */}
-                        </div>   {/* End banner overlay */}
-                    </div>    {/* END BANNER-13 WRAPPER */}
-                </div>     {/* End container */}
+                                <div className="col-md-5">
+                                    <div className="banner-13-img text-center">
+                                        <img className="img-fluid" src="/images/start-banner-01.png" alt="banner-image" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </section>
         </>
     )

components/sections/MermsDedicatedTeam.js

@@ -1,33 +1,25 @@
-import VideoPopup from "../elements/VidepPopup";
+import { useTranslations } from "next-intl"
 
-export default function MermsDedicatedTeam (){
+export default function MermsDedicatedTeam() {
+    const t = useTranslations("DedicatedTeam")
     return <>
         <section className="bg--04 bg--fixed py-100 ct-01 content-section division">
             <div className="container">
                 <div className="row d-flex align-items-center">
-                    {/* TEXT BLOCK */}
                     <div className="col-md-6 order-last order-md-2">
                         <div className="txt-block left-column wow fadeInRight">
-                            {/* Section ID */}
                             <span className="section-id">our Team at MERMS</span>
-                            {/* Title */}
-                            <h2 className="s-50 w-700">Dedicated Team</h2>
-                            {/* Text */}
-                            <p className="p-lg">"We pride ourselves on fostering a collaborative environment where creativity and innovation thrive. By staying at the forefront of industry trends and technological advancements, we transform your ideas into actionable strategies that elevate your practice. Our goal is to assist you in establishing a strong online presence while you focus on what you do best—providing exceptional care to your patients"
-                            </p>
+                            <h2 className="s-50 w-700">{t("title")}</h2>
+                            <p className="p-lg">{t("description")}</p>
                         </div>
-                    </div>	{/* END TEXT BLOCK */}
-                    {/* IMAGE BLOCK */}
+                    </div>
                     <div className="col-md-6 order-first order-md-2">
                         <div className="img-block j-img video-preview right-column wow fadeInLeft">
-                            {/* Play Icon */}
-                            {/*<VideoPopup style={2} />*/}
-                            {/* Preview Image */}
                             <img className="img-fluid r-20" src="/images/img-17.jpg" alt="video-preview" />
                         </div>
                     </div>
-                </div>    {/* End row */}
-            </div>	   {/* End container */}
+                </div>
+            </div>
         </section>
     </>
 }

components/sections/MermsEngageBox.js

@@ -0,0 +1,31 @@
+import { useTranslations } from "next-intl"
+
+export default function MermsEngageBox() {
+    const t = useTranslations("EngageBox")
+    return <>
+        <section className="pt-100 ws-wrapper content-section">
+            <div className="container">
+                <div className="bc-1-wrapper bg--white-400 bg--fixed r-16">
+                    <div className="section-overlay">
+                        <div className="row d-flex align-items-center">
+                            <div className="col-md-6 order-last order-md-2">
+                                <div className="txt-block left-column wow fadeInRight">
+                                    <span className="section-id">{t("sectionId")}</span>
+                                    <h2 className="s-46 w-700">{t("title")}</h2>
+                                    <p>{t("description")}</p>
+                                    <h5 className="s-24 w-700">{t("subtitle")}</h5>
+                                    <p className="mb-0">{t("subtitleDesc")}</p>
+                                </div>
+                            </div>
+                            <div className="col-md-6 order-first order-md-2">
+                                <div className="img-block right-column wow fadeInLeft">
+                                    <img className="img-fluid" src="/images/engage-box.png" alt="content-image"/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </>
+}

components/sections/MermsFeatureSection4.js

@@ -1,76 +1,53 @@
+import { useTranslations } from "next-intl"
 
-
-
-
-export default function MermsFeatureSection4 (){
-
+export default function MermsFeatureSection4() {
+    const t = useTranslations("FeatureSection4")
     return (
         <>
             <section className="pt-100 ct-04 content-section division">
                 <div className="container">
-                    {/* SECTION CONTENT (ROW) */}
                     <div className="row d-flex align-items-center">
-                        {/* TEXT BLOCK */}
                         <div className="col-md-6 order-last order-md-2">
                             <div className="txt-block left-column wow fadeInRight">
-                                {/* CONTENT BOX #1 */}
                                 <div className="cbox-2 process-step">
-                                    {/* Icon */}
                                     <div className="ico-wrap">
                                         <div className="cbox-2-ico bg--theme color--white">1</div>
                                         <span className="cbox-2-line" />
                                     </div>
-                                    {/* Text */}
                                     <div className="cbox-2-txt">
-                                        <h5 className="s-22 w-700">Simple, Secure &amp; Intuitive</h5>
-                                        <p>Ligula risus auctor tempus feugiat dolor lacinia nemo purus in lipsum purus
-                                            sapien quaerat a primis viverra tellus vitae luctus dolor ipsum neque ligula
-                                            quaerat
-                                        </p>
+                                        <h5 className="s-22 w-700">{t("step1Title")}</h5>
+                                        <p>{t("step1Desc")}</p>
                                     </div>
-                                </div>	{/* END CONTENT BOX #1 */}
-                                {/* CONTENT BOX #2 */}
+                                </div>
                                 <div className="cbox-2 process-step">
-                                    {/* Icon */}
                                     <div className="ico-wrap">
                                         <div className="cbox-2-ico bg--theme color--white">2</div>
                                         <span className="cbox-2-line" />
                                     </div>
-                                    {/* Text */}
                                     <div className="cbox-2-txt">
-                                        <h5 className="s-22 w-700">Weekly Email Reports</h5>
-                                        <p>Ligula risus auctor tempus feugiat dolor lacinia nemo purus in lipsum purus
-                                            sapien quaerat a primis viverra tellus vitae luctus dolor ipsum neque ligula
-                                            quaerat
-                                        </p>
+                                        <h5 className="s-22 w-700">{t("step2Title")}</h5>
+                                        <p>{t("step2Desc")}</p>
                                     </div>
-                                </div>	{/* END CONTENT BOX #2 */}
-                                {/* CONTENT BOX #3 */}
+                                </div>
                                 <div className="cbox-2 process-step">
-                                    {/* Icon */}
                                     <div className="ico-wrap">
                                         <div className="cbox-2-ico bg--theme color--white">3</div>
                                     </div>
-                                    {/* Text */}
                                     <div className="cbox-2-txt">
-                                        <h5 className="s-22 w-700">No Personal Data Collected</h5>
-                                        <p className="mb-0">Ligula risus auctor tempus feugiat dolor lacinia nemo purus in
-                                            lipsum purus sapien quaerat a primis viverra tellus vitae luctus dolor ipsum n
-                                            eque ligula quaerat
-                                        </p>
+                                        <h5 className="s-22 w-700">{t("step3Title")}</h5>
+                                        <p className="mb-0">{t("step3Desc")}</p>
                                     </div>
-                                </div>	{/* END CONTENT BOX #3 */}
+                                </div>
                             </div>
-                        </div>	{/* END TEXT BLOCK */}
-                        {/* IMAGE BLOCK */}
+                        </div>
                         <div className="col-md-6 order-first order-md-2">
                             <div className="img-block wow fadeInLeft">
                                 <img className="img-fluid" src="/images/tablet-01.png" alt="content-image" />
                             </div>
                         </div>
-                    </div>	{/* END SECTION CONTENT (ROW) */}
-                </div>	   {/* End container */}
-            </section>	{/* END TEXT CONTENT */}
+                    </div>
+                </div>
+            </section>
         </>
     )
-}
+}

components/sections/MermsFeatures.js

@@ -1,123 +1,96 @@
-
+import { useTranslations } from "next-intl"
 
 export default function MermsFeatures() {
+    const t = useTranslations("Features")
     return (
         <>
-            <section id="merms-features" className="shape--bg shape--purple-100 pt-100 features-section division">
+            <section id="merms-features" className="shape--bg shape--purple-100 pt-100 features-section division"
+                     style={{paddingBottom: '15px'}}>
                 <div className="container">
                     <div className="row d-flex align-items-center">
-                        {/* FEATURES-13 WRAPPER */}
                         <div className="col-md-7 order-last order-md-2">
                             <div className="fbox-13-wrapper wow fadeInRight">
                                 <div className="row">
                                     <div className="col-md-6">
-                                        {/* FEATURE BOX #1 */}
                                         <div id="fb-12-1" className="fbox-12 bg--green-100 block-shadow r-12 mb-30">
-                                            {/* Icon */}
                                             <div className="fbox-ico ico-50">
                                                 <div className="shape-ico color--theme">
-                                                    {/* Vector Icon */}
-                                                    <span className="flaticon-graphics" />
-                                                    {/* Shape */}
+                                                    <span className="flaticon-graphics"/>
                                                     <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-                                                        <path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
+                                                        <path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)"/>
                                                     </svg>
                                                 </div>
-                                            </div>	{/* End Icon */}
-                                            {/* Text */}
+                                            </div>
                                             <div className="fbox-txt">
-                                                <h5 className="s-20 w-700">Website in Seconds</h5>
-                                                <p>Build a website in seconds with MERMS AI website builder.</p>
+                                                <h5 className="s-20 w-700">{t("deployTitle")}</h5>
+                                                <p>{t("deployDesc")}</p>
                                             </div>
                                         </div>
-                                        {/* FEATURE BOX #2 */}
                                         <div id="fb-12-2" className="fbox-12 bg--white-100 block-shadow r-12">
-                                            {/* Icon */}
                                             <div className="fbox-ico ico-50">
                                                 <div className="shape-ico color--theme">
-                                                    {/* Vector Icon */}
-                                                    <span className="flaticon-idea" />
-                                                    {/* Shape */}
+                                                    <span className="flaticon-idea"/>
                                                     <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-                                                        <path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
+                                                        <path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)"/>
                                                     </svg>
                                                 </div>
-                                            </div>	{/* End Icon */}
-                                            {/* Text */}
+                                            </div>
                                             <div className="fbox-txt">
-                                                <h5 className="s-20 w-700">Useful Addons</h5>
-                                                <p>Explore our expanding addons to improve your applications.</p>
+                                                <h5 className="s-20 w-700">{t("addonsTitle")}</h5>
+                                                <p>{t("addonsDesc")}</p>
                                             </div>
                                         </div>
                                     </div>
                                     <div className="col-md-6">
-                                        {/* FEATURE BOX #3 */}
                                         <div id="fb-12-3" className="fbox-12 bg--white-100 block-shadow r-12 mb-30">
-                                            {/* Icon */}
                                             <div className="fbox-ico ico-50">
                                                 <div className="shape-ico color--theme">
-                                                    {/* Vector Icon */}
-                                                    <span className="flaticon-graphic" />
-                                                    {/* Shape */}
+                                                    <span className="flaticon-graphic"/>
                                                     <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-                                                        <path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
+                                                        <path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)"/>
                                                     </svg>
                                                 </div>
-                                            </div>	{/* End Icon */}
-                                            {/* Text */}
+                                            </div>
                                             <div className="fbox-txt">
-                                                <h5 className="s-20 w-700">Digital Marketing</h5>
-                                                <p>Promote your presence and grow with MERMS SEO tools.</p>
+                                                <h5 className="s-20 w-700">{t("ecosystemTitle")}</h5>
+                                                <p>{t("ecosystemDesc")}</p>
                                             </div>
                                         </div>
-                                        {/* FEATURE BOX #4 */}
                                         <div id="fb-12-4" className="fbox-12 bg--green-100 block-shadow r-12">
-                                            {/* Icon */}
                                             <div className="fbox-ico ico-50">
                                                 <div className="shape-ico color--theme">
-                                                    {/* Vector Icon */}
-                                                    <span className="flaticon-search-engine-1" />
-                                                    {/* Shape */}
+                                                    <span className="flaticon-search-engine-1"/>
                                                     <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-                                                        <path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
+                                                        <path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)"/>
                                                     </svg>
                                                 </div>
-                                            </div>	{/* End Icon */}
-                                            {/* Text */}
+                                            </div>
                                             <div className="fbox-txt">
-                                                <h5 className="s-20 w-700">Unified Management</h5>
-                                                <p>Manage everything from one portal with MERMS AI Assist Tools</p>
+                                                <h5 className="s-20 w-700">{t("unifiedTitle")}</h5>
+                                                <p>{t("unifiedDesc")}</p>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>	{/* End row */}
-                        </div>	{/* END FEATURES-13 WRAPPER */}
-                        {/* TEXT BLOCK */}
+                            </div>
+                        </div>
+
                         <div className="col-md-5 order-first order-md-2">
                             <div className="txt-block left-column wow fadeInLeft">
-                                {/* Section ID */}
-                                {/*<span className="section-id">One-Stop Solution</span>*/}
-                                {/* Title */}
-                                <h2 className="s-46 w-700">Create a web presence without limits</h2>
-                                {/* Text */}
-                                <p>Bring your vision to life with the website builder that gives you the tools you need to succeed.
-                                </p>
-                                {/* List */}
+                                <h2 className="s-46 w-700">{t("mainTitle")}</h2>
+                                <p>{t("mainDesc")}</p>
                                 <ul className="simple-list">
                                     <li className="list-item">
-                                        <p>Design your website using our modern templates, designer fonts, and color palettes in minutes.
-                                        </p>
+                                        <p>{t("list1")}</p>
                                     </li>
                                     <li className="list-item">
-                                        <p className="mb-0">Promote your business and grow. Create a blog to grow your community and drive more traffic.
-                                        </p>
+                                        <p className="mb-0">{t("list2")}</p>
                                     </li>
                                 </ul>
                             </div>
-                        </div>	{/* END TEXT BLOCK */}
-                    </div>    {/* End row */}
-                </div>     {/* End container */}
+                        </div>
+                    </div>
+                </div>
             </section>
         </>
     )

components/sections/MermsFeatures2.js

@@ -10,7 +10,7 @@ export default function MermsFeatures2() {
                         <div className="col-md-10 col-lg-9">
                             <div className="section-title mb-80">
                                 {/* Title */}
-                                <h2 className="s-50 w-700">Supercharge your digital presence with AI.</h2>
+                                <h2 className="s-50 w-700">All-in-One Cloud Platform for Practice Management.</h2>
                                 {/* Text */}
                                 <p className="s-21 color--grey">Unified AI-powered solutions for everything that matters to your online reputation and engagement.</p>
                             </div>

components/sections/MermsFeaturesSection1.js

@@ -1,76 +1,62 @@
+import { useTranslations } from "next-intl"
 
-
-export default function MermsFeaturesSection1(){
-
+export default function MermsFeaturesSection1() {
+    const t = useTranslations("FeaturesSection1")
     return (
         <>
             <section id="features-2" className="pt-100 features-section division">
                 <div className="container">
-                    {/* SECTION TITLE */}
                     <div className="row justify-content-center">
                         <div className="col-md-10 col-lg-9">
                             <div className="section-title mb-80">
-                                {/* Title */}
-                                <h2 className="s-50 w-700">Everything in One Place</h2>
-                                {/* Text */}
-                                <p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>
+                                <h2 className="s-50 w-700">{t("title")}</h2>
+                                <p className="s-21 color--grey">{t("subtitle")}</p>
                             </div>
                         </div>
                     </div>
-                    {/* FEATURES-2 WRAPPER */}
                     <div className="fbox-wrapper text-center">
                         <div className="row row-cols-1 row-cols-md-3">
-                            {/* FEATURE BOX #1 */}
                             <div className="col">
                                 <div className="fbox-2 fb-1 wow fadeInUp">
-                                    {/* Image */}
                                     <div className="fbox-img gr--whitesmoke h-175">
                                         <img className="img-fluid light-theme-img" src="/images/f_01.png" alt="feature-image" />
                                         <img className="img-fluid dark-theme-img" src="/images/f_01_dark.png" alt="feature-image" />
                                     </div>
-                                    {/* Text */}
                                     <div className="fbox-txt">
-                                        <h6 className="s-22 w-700">Intuitive Dashboard</h6>
-                                        <p>Luctus egestas augue undo ultrice aliquam in lacus congue dapibus</p>
+                                        <h6 className="s-22 w-700">{t("dashboardTitle")}</h6>
+                                        <p>{t("dashboardDesc")}</p>
                                     </div>
                                 </div>
-                            </div>	{/* END FEATURE BOX #1 */}
-                            {/* FEATURE BOX #2 */}
+                            </div>
                             <div className="col">
                                 <div className="fbox-2 fb-2 wow fadeInUp">
-                                    {/* Image */}
                                     <div className="fbox-img gr--whitesmoke h-175">
                                         <img className="img-fluid light-theme-img" src="/images/f_05.png" alt="feature-image" />
                                         <img className="img-fluid dark-theme-img" src="/images/f_05_dark.png" alt="feature-image" />
                                     </div>
-                                    {/* Text */}
                                     <div className="fbox-txt">
-                                        <h6 className="s-22 w-700">Effortless Integration</h6>
-                                        <p>Tempor laoreet augue undo ultrice aliquam in lacusq luctus feugiat</p>
+                                        <h6 className="s-22 w-700">{t("integrationTitle")}</h6>
+                                        <p>{t("integrationDesc")}</p>
                                     </div>
                                 </div>
-                            </div>	{/* END FEATURE BOX #2 */}
-                            {/* FEATURE BOX #3 */}
+                            </div>
                             <div className="col">
                                 <div className="fbox-2 fb-3 wow fadeInUp">
-                                    {/* Image */}
                                     <div className="fbox-img gr--whitesmoke h-175">
                                         <img className="img-fluid light-theme-img" src="/images/f_02.png" alt="feature-image" />
                                         <img className="img-fluid dark-theme-img" src="/images/f_02_dark.png" alt="feature-image" />
                                     </div>
-                                    {/* Text */}
                                     <div className="fbox-txt">
-                                        <h6 className="s-22 w-700">Real-time Analytics</h6>
-                                        <p>Egestas luctus augue undo ultrice aliquam in lacus feugiat cursus</p>
+                                        <h6 className="s-22 w-700">{t("analyticsTitle")}</h6>
+                                        <p>{t("analyticsDesc")}</p>
                                     </div>
                                 </div>
-                            </div>	{/* END FEATURE BOX #3 */}
-                        </div>  {/* End row */}
-                    </div>	{/* END FEATURES-2 WRAPPER */}
-                </div>     {/* End container */}
-            </section>	{/* END FEATURES-2 */}
-
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
             <hr className="divider" />
         </>
     )
-}
+}

components/sections/MermsFeaturesSectionTwo.js

@@ -1,127 +1,95 @@
+import { useTranslations } from "next-intl"
 
-
-export default function MermsFeaturesSectionTwo(){
-
+export default function MermsFeaturesSectionTwo() {
+    const t = useTranslations("FeaturesSectionTwo")
     return (
         <>
             <section id="features-12" className="shape--bg shape--white-400 pt-100 features-section division">
                 <div className="container">
                     <div className="row d-flex align-items-center">
-                        {/* TEXT BLOCK */}
                         <div className="col-md-5">
                             <div className="txt-block left-column wow fadeInRight">
-
-                                <h2 className="s-46 w-700">Smart solutions, real-time results</h2>
-                                {/* Text */}
-                                <p>Sodales tempor sapien quaerat ipsum and congue undo laoreet turpis neque auctor turpis
-                                    vitae dolor luctus placerat magna ligula and cursus vitae
-                                </p>
-                                {/* List */}
+                                <h2 className="s-46 w-700">{t("title")}</h2>
+                                <p>{t("description")}</p>
                                 <ul className="simple-list">
                                     <li className="list-item">
-                                        <p>Tempor sapien quaerat undo ipsum laoreet diam purus sapien a dolor ociis ultrice
-                                            ipsum aliquam congue a dolor cursus congue varius magnis
-                                        </p>
+                                        <p>{t("list1")}</p>
                                     </li>
                                     <li className="list-item">
-                                        <p className="mb-0">Cursus purus suscipit  vitae cubilia magnis diam volute egestas
-                                            sapien ultrice auctor
-                                        </p>
+                                        <p className="mb-0">{t("list2")}</p>
                                     </li>
                                 </ul>
                             </div>
-                        </div>	{/* END TEXT BLOCK */}
-                        {/* FEATURES-12 WRAPPER */}
+                        </div>
                         <div className="col-md-7">
                             <div className="fbox-12-wrapper wow fadeInLeft">
                                 <div className="row">
                                     <div className="col-md-6">
-                                        {/* FEATURE BOX #1 */}
                                         <div id="fb-12-1" className="fbox-12 bg--white-100 block-shadow r-12 mb-30">
-                                            {/* Icon */}
                                             <div className="fbox-ico ico-50">
                                                 <div className="shape-ico color--theme">
-                                                    {/* Vector Icon */}
                                                     <span className="flaticon-layers-1" />
-                                                    {/* Shape */}
                                                     <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                         <path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                                     </svg>
                                                 </div>
-                                            </div>	{/* End Icon */}
-                                            {/* Text */}
+                                            </div>
                                             <div className="fbox-txt">
-                                                <h5 className="s-20 w-700">Comprehensive</h5>
-                                                <p>Nothing is overlooked at providing a complete coverage with details</p>
+                                                <h5 className="s-20 w-700">{t("websiteTitle")}</h5>
+                                                <p>{t("websiteDesc")}</p>
                                             </div>
                                         </div>
-                                        {/* FEATURE BOX #2 */}
                                         <div id="fb-12-2" className="fbox-12 bg--white-100 block-shadow r-12">
-                                            {/* Icon */}
                                             <div className="fbox-ico ico-50">
                                                 <div className="shape-ico color--theme">
-                                                    {/* Vector Icon */}
                                                     <span className="flaticon-click-1" />
-                                                    {/* Shape */}
                                                     <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                         <path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                                     </svg>
                                                 </div>
-                                            </div>	{/* End Icon */}
-                                            {/* Text */}
+                                            </div>
                                             <div className="fbox-txt">
-                                                <h5 className="s-20 w-700">Intuitive</h5>
-                                                <p>Easy to understand, navigate without the need for extensive training</p>
+                                                <h5 className="s-20 w-700">{t("ecosystemTitle")}</h5>
+                                                <p>{t("ecosystemDesc")}</p>
                                             </div>
                                         </div>
                                     </div>
                                     <div className="col-md-6">
-                                        {/* FEATURE BOX #3 */}
                                         <div id="fb-12-3" className="fbox-12 bg--white-100 block-shadow r-12 mb-30">
-                                            {/* Icon */}
                                             <div className="fbox-ico ico-50">
                                                 <div className="shape-ico color--theme">
-                                                    {/* Vector Icon */}
                                                     <span className="flaticon-prioritize" />
-                                                    {/* Shape */}
                                                     <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                         <path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                                     </svg>
                                                 </div>
-                                            </div>	{/* End Icon */}
-                                            {/* Text */}
+                                            </div>
                                             <div className="fbox-txt">
-                                                <h5 className="s-20 w-700">Flexible</h5>
-                                                <p>Suit your different circumstances or requirements with ease</p>
+                                                <h5 className="s-20 w-700">{t("addonsTitle")}</h5>
+                                                <p>{t("addonsDesc")}</p>
                                             </div>
                                         </div>
-                                        {/* FEATURE BOX #4 */}
                                         <div id="fb-12-4" className="fbox-12 bg--white-100 block-shadow r-12">
-                                            {/* Icon */}
                                             <div className="fbox-ico ico-50">
                                                 <div className="shape-ico color--theme">
-                                                    {/* Vector Icon */}
                                                     <span className="flaticon-analytics" />
-                                                    {/* Shape */}
                                                     <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                                         <path d="M69.8,-23C76.3,-2.7,57.6,25.4,32.9,42.8C8.1,60.3,-22.7,67,-39.1,54.8C-55.5,42.7,-57.5,11.7,-48.6,-11.9C-39.7,-35.5,-19.8,-51.7,5.9,-53.6C31.7,-55.6,63.3,-43.2,69.8,-23Z" transform="translate(100 100)" />
                                                     </svg>
                                                 </div>
-                                            </div>	{/* End Icon */}
-                                            {/* Text */}
+                                            </div>
                                             <div className="fbox-txt">
-                                                <h5 className="s-20 w-700">Efficient</h5>
-                                                <p>Accomplishes tasks quickly and effectively, maximize productivity</p>
+                                                <h5 className="s-20 w-700">{t("unifiedTitle")}</h5>
+                                                <p>{t("unifiedDesc")}</p>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>	{/* End row */}
-                        </div>	{/* END FEATURES-12 WRAPPER */}
-                    </div>    {/* End row */}
-                </div>     {/* End container */}
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </section>
         </>
     )
-
-}
+}

components/sections/MermsHowItWorks.js

@@ -1,66 +1,51 @@
-
-
+import { useTranslations } from "next-intl"
 
 export default function MermsHowItWorks() {
+    const t = useTranslations("HowItWorks")
     return (
         <>
             <section id="merms-works" className="pt-100 ct-01 content-section division">
                 <div className="container">
-                    {/* SECTION CONTENT (ROW) */}
                     <div className="row d-flex align-items-center">
-                        {/* TEXT BLOCK */}
                         <div className="col-md-6 order-last order-md-2">
                             <div className="txt-block left-column wow fadeInRight">
-                                {/* CONTENT BOX #2 */}
+                                <h2 className="s-46 w-700">{t("title")}</h2>
                                 <div className="cbox-4">
-                                    {/* Icon & Title */}
                                     <div className="box-title">
-                                        <span className="flaticon-layers-1 color--theme" />
-                                        <h5 className="s-24 w-700">Automatic Workflows</h5>
+                                        <span className="flaticon-layers-1 color--theme"/>
+                                        <h5 className="s-24 w-700">{t("workflowTitle")}</h5>
                                     </div>
-                                    {/* Text */}
                                     <div className="cbox-4-txt">
-                                        <p>It takes a single touch! Standardize service delivery using visual process workflows and AI-based automation. Get a quick visual summary of all your requests and monitor them in one place.
-                                        </p>
+                                        <p>{t("workflowDesc")}</p>
                                     </div>
-                                </div>	{/* END CONTENT BOX #2 */}
-                                {/* CONTENT BOX #1 */}
+                                </div>
                                 <div className="cbox-4">
-                                    {/* Icon & Title */}
                                     <div className="box-title">
-                                        <span className="flaticon-paper-sizes color--theme" />
-                                        <h5 className="s-24 w-700">Efficient A.I Assist</h5>
+                                        <span className="flaticon-paper-sizes color--theme"/>
+                                        <h5 className="s-24 w-700">{t("aiTitle")}</h5>
                                     </div>
-                                    {/* Text */}
                                     <div className="cbox-4-txt">
-                                        <p>Drive brand loyalty, boost your brand with social media marketing, and build your digital identity with our A.I. Assist creator tools.
-                                        </p>
+                                        <p>{t("aiDesc")}</p>
                                     </div>
-                                </div>	{/* END CONTENT BOX #1 */}
-
-                                {/* CONTENT BOX #3 */}
+                                </div>
                                 <div className="cbox-4">
-                                    {/* Icon & Title */}
                                     <div className="box-title">
-                                        <span className="flaticon-pie-chart color--theme" />
-                                        <h5 className="s-24 w-700">Useful Analytics</h5>
+                                        <span className="flaticon-pie-chart color--theme"/>
+                                        <h5 className="s-24 w-700">{t("analyticsTitle")}</h5>
                                     </div>
-                                    {/* Text */}
                                     <div className="cbox-4-txt">
-                                        <p className="mb-0">Monitor your website performance with our simplified data dashboard. You can stay on top of your website's performance with real-time traffic statistics and trend charts.
-                                        </p>
+                                        <p className="mb-0">{t("analyticsDesc")}</p>
                                     </div>
-                                </div>	{/* END CONTENT BOX #3 */}
-                            </div>
-                        </div>	{/* END TEXT BLOCK */}
-                        {/* IMAGE BLOCK */}
-                        <div className="col-md-6 order-first order-md-2">
-                            <div className="img-block right-column wow fadeInLeft">
-                                <img className="img-fluid" src="/images/img-08.png" alt="content-image" />
+                                </div>
                             </div>
                         </div>
-                    </div>	{/* END SECTION CONTENT (ROW) */}
-                </div>	   {/* End container */}
+                        <div className="col-md-6 order-first order-md-2">
+                            <div className="img-block right-column wow fadeInLeft">
+                                <img className="img-fluid" src="/images/img-08.png" alt="content-image"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </section>
         </>
     )

components/sections/MermsWhyChooseUs.js

@@ -1,40 +1,31 @@
+import { useTranslations } from "next-intl"
 
-export default function MermsWhyChooseUs(){
+export default function MermsWhyChooseUs() {
+    const t = useTranslations("WhyChooseUs")
     return <>
         <section className="pt-100 ws-wrapper content-section">
             <div className="container">
                 <div className="bc-1-wrapper bg--02 bg--fixed r-16">
                     <div className="section-overlay">
                         <div className="row d-flex align-items-center">
-                            {/* TEXT BLOCK */}
                             <div className="col-md-6 order-last order-md-2">
                                 <div className="txt-block left-column wow fadeInRight">
-                                    {/* Section ID */}
-                                    <span className="s-24 w-700 h5-title">Why Choose Us</span>
-                                    {/* Title */}
-                                    <h2 className="s-46 w-700 pt-3">Experience, Knowledge, Skills &amp; Passion</h2>
-                                    {/* Text */}
-                                    <p>
-                                    We make your practice stand out from other physicians in your area with modern A.I.-enabled solutions relevant to this period and time.
-                                    </p>
-                                    {/* Small Title */}
-                                    <h5 className="s-24 w-700 h5-title">Your success is the goal!</h5>
-                                    {/* Text */}
-                                    <p className="mb-0">Our platform helps any provider quickly create an online presence, a landing page, or a multi-page website. We also provide everything you need to get your practice humming at full speed.
-                                    </p>
+                                    <span className="s-24 w-700 h5-title">{t("sectionId")}</span>
+                                    <h2 className="s-46 w-700 pt-3">{t("title")}</h2>
+                                    <p>{t("description")}</p>
+                                    <h5 className="s-24 w-700 h5-title">{t("subtitle")}</h5>
+                                    <p className="mb-0">{t("subtitleDesc")}</p>
                                 </div>
-                            </div>	{/* END TEXT BLOCK */}
-                            {/* IMAGE BLOCK */}
+                            </div>
                             <div className="col-md-6 order-first order-md-2">
                                 <div className="img-block right-column wow fadeInLeft">
                                     <img className="img-fluid" src="/images/img-08.png" alt="content-image" />
                                 </div>
                             </div>
-                        </div>   {/* End row */}
-                    </div>    {/* End section overlay */}
-                </div>    {/* End content wrapper */}
-            </div>     {/* End container */}
+                        </div>
+                    </div>
+                </div>
+            </div>
         </section>
     </>
-
-}
+}

components/sections/MersmHero.js

@@ -1,7 +1,8 @@
-
-
 import Link from "next/link"
+import { useTranslations } from "next-intl"
+
 export default function MersmHero() {
+    const t = useTranslations("Hero")
     return (
         <>
             <section id="hero-13" className="hero-section">
@@ -10,28 +11,19 @@ export default function MersmHero() {
                         {/* HERO TEXT */}
                         <div className="col-md-5">
                             <div className="hero-13-txt wow fadeInRight">
-                                {/* Section ID */}
-                                <span className="section-id">Online Reputation That Work</span>
-                                {/* Title */}
-                                <h2 className="s-54 w-700">Your practice’s reputation is strategic for your success</h2>
-                                {/* Text */}
-                                <p className="p-lg">In the digital age, your online reputation has to work for you for your practice to be effective and create trust.
-                                </p>
-                                {/* Button */}
-                                <Link href={process.env.NEXT_PUBLIC_SIGNUP_URL} className="btn r-04 btn--theme hover--tra-black">Get started for free</Link>
-                                {/*<p className="p-sm btn-txt ico-15">*/}
-                                {/*    <span className="flaticon-check" /> No credit card needed, free 14-day trial*/}
-                                {/*</p>*/}
+                                <h2 className="s-54 w-700">{t("title")} <span className="color--theme">{t("title1")}</span> </h2>
+                                <p className="p-lg">{t("description")}</p>
+                                <Link href={process.env.NEXT_PUBLIC_SIGNUP_URL} className="btn r-04 btn--theme hover--tra-black">{t("cta")}</Link>
                             </div>
-                        </div>	{/* END HERO TEXT */}
+                        </div>
                         {/* HERO IMAGE */}
                         <div className="col-md-7">
                             <div className="hero-13-img wow fadeInLeft">
-                                <img className="img-fluid" src="/images/hero-13-img.png" alt="hero-image" />
+                                <img className="img-fluid" src="/images/hero-13-b-img.png" alt="hero-image" />
                             </div>
                         </div>
-                    </div>    {/* End row */}
-                </div>	   {/* End container */}
+                    </div>
+                </div>
             </section>
         </>
     )

components/services/services.js

@@ -0,0 +1,84 @@
+import axios from "axios"
+import {string} from "yup";
+
+
+axios.interceptors.request.use(
+    config => {
+        config.headers = {
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            // "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
+            // "Access-Control-Allow-Headers": "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
+            // "Content-Type": "application/json;charset=UTF-8",
+            // 'Authorization': (localStorage && localStorage.getItem('access_token')) ? `Bearer ${localStorage.getItem('access_token')}` : '',
+        };
+        // config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
+        // config.baseURL = process.env.REACT_APP_MAIN_API
+        return config;
+    },
+    error => {
+        return Promise.reject(error);
+    }
+);
+
+const blogBasePath = () => {
+    return 'https://blogdata.chiefsoft.net';
+}
+
+const siteServerPath = () => {
+    return process.env.NEXT_PUBLIC_APP_MAIN_API;
+}
+
+const postAuxEnd = (basePath, path, postData, media=false) => {
+    // const basePath = media ? process.env.NEXT_PUBLIC_APP_MAIN_API : process.env.NEXT_PUBLIC_APP_MAIN_API;
+    let newPostData = {}
+    if (!media) {
+        newPostData = {...postData}
+    } else {
+        newPostData = new FormData();
+        for (let data in postData) {
+            newPostData.append(data, postData[data]);
+        }
+    }
+    return axios.post(`${basePath}${path}`, newPostData).then(res => {
+        return res
+    }).catch(err => {
+        // throw new Error(err.response.data.error_message);
+        throw new Error(err);
+    })
+}
+
+const getAuxEnd = (basePath, path, reqData = null) => {
+    // const basePath = 'https://blogdata.chiefsoft.net'
+    return axios.get(`${basePath}${path}`, {params: reqData}).then(res => {
+        return res
+        // localStorage.clear();
+        // window.location.href = `/login?sessionExpired=true`;
+    }).catch(err => {
+        throw new Error(err);
+        // throw new Error(err.response.data.message);
+        // return err
+    })
+}
+
+// FUNCTION TO GET MERMS BLOGS
+export const getMermsBlogs = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return getAuxEnd(blogBasePath(), '/mermsblogdata/mermsemr', postData)
+}
+
+export const serMermsWebContact = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return getAuxEnd(siteServerPath(), '/mermsblogdata/mermsemr', postData)
+}
+
+export const sendContactMsg = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd(siteServerPath(), '/website/contact', postData)
+}

docker-compose.yml

@@ -10,14 +10,18 @@ services:
     working_dir: /app
     volumes:
       - .:/app
-      - ./node_modules:/app_backup/node_modules
+      - node_modules:/app/node_modules
 #      - ./run.sh:/app/run.sh
 #      - ./next:/app/.next
+    image: registry.chiefsoft.net/merms-web-2025:latest
     extra_hosts:
       - blogdata.chiefsoft.net:10.10.33.15
       - blog.mermsemr.com:10.10.33.15
       - backend.wrenchboard.api.test:10.10.33.15
     tty: true
     stdin_open: true
+    environment:
+      - NODE_ENV=${NODE_ENV:-live}
 volumes:
-  src:
+  src:
+  node_modules:

docker-entrypoint.sh

@@ -1,6 +1,7 @@
 #!/bin/sh
 set -e
 
+echo "NODE_ENV=$NODE_ENV"
 # Run command with node if the first argument contains a "-" or is not a system command. The last
 # part inside the "{}" is a workaround for the following bug in ash/dash:
 # https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=874264
@@ -8,4 +9,4 @@ if [ "${1#-}" != "${1}" ] || [ -z "$(command -v "${1}")" ] || { [ -f "${1}" ] &&
   set -- node "$@"
 fi
 
-exec "$@"
+exec "$@"

docker/Dockerfile

@@ -1,6 +1,6 @@
-FROM alpine:3.20
+FROM alpine:3.22
 
-ENV NODE_VERSION 22.12.0
+ENV NODE_VERSION=22.12.0
 
 RUN addgroup -g 1000 node \
     && adduser -u 1000 -G node -s /bin/sh -D node \
@@ -77,31 +77,31 @@ RUN addgroup -g 1000 node \
   && node --version \
   && npm --version
 
-ENV YARN_VERSION 1.22.22
+# ENV YARN_VERSION 1.22.22
 
-RUN apk add --no-cache --virtual .build-deps-yarn curl gnupg tar \
-  # use pre-existing gpg directory, see https://github.com/nodejs/docker-node/pull/1895#issuecomment-1550389150
-  && export GNUPGHOME="$(mktemp -d)" \
-  && for key in \
-    6A010C5166006599AA17F08146C2130DFD2497F5 \
-  ; do \
-    gpg --batch --keyserver hkps://keys.openpgp.org --recv-keys "$key" || \
-    gpg --batch --keyserver keyserver.ubuntu.com --recv-keys "$key" ; \
-  done \
-  && curl -fsSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz" \
-  && curl -fsSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz.asc" \
-  && gpg --batch --verify yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
-  && gpgconf --kill all \
-  && rm -rf "$GNUPGHOME" \
-  && mkdir -p /opt \
-  && tar -xzf yarn-v$YARN_VERSION.tar.gz -C /opt/ \
-  && ln -s /opt/yarn-v$YARN_VERSION/bin/yarn /usr/local/bin/yarn \
-  && ln -s /opt/yarn-v$YARN_VERSION/bin/yarnpkg /usr/local/bin/yarnpkg \
-  && rm yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
-  && apk del .build-deps-yarn \
-  # smoke test
-  && yarn --version \
-  && rm -rf /tmp/*
+# RUN apk add --no-cache --virtual .build-deps-yarn curl gnupg tar \
+#   # use pre-existing gpg directory, see https://github.com/nodejs/docker-node/pull/1895#issuecomment-1550389150
+#   && export GNUPGHOME="$(mktemp -d)" \
+#   && for key in \
+#     6A010C5166006599AA17F08146C2130DFD2497F5 \
+#   ; do \
+#     gpg --batch --keyserver hkps://keys.openpgp.org --recv-keys "$key" || \
+#     gpg --batch --keyserver keyserver.ubuntu.com --recv-keys "$key" ; \
+#   done \
+#   && curl -fsSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz" \
+#   && curl -fsSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz.asc" \
+#   && gpg --batch --verify yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
+#   && gpgconf --kill all \
+#   && rm -rf "$GNUPGHOME" \
+#   && mkdir -p /opt \
+#   && tar -xzf yarn-v$YARN_VERSION.tar.gz -C /opt/ \
+#   && ln -s /opt/yarn-v$YARN_VERSION/bin/yarn /usr/local/bin/yarn \
+#   && ln -s /opt/yarn-v$YARN_VERSION/bin/yarnpkg /usr/local/bin/yarnpkg \
+#   && rm yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
+#   && apk del .build-deps-yarn \
+#   # smoke test
+#   && yarn --version \
+#   && rm -rf /tmp/*
 
 COPY docker-entrypoint.sh /usr/local/bin/
 # ENTRYPOINT ["docker-entrypoint.sh"]
@@ -118,19 +118,18 @@ COPY package.json /app/
 # Install app dependencies
 RUN npm install --save
 RUN npm install react-scripts
-RUN npm install -g next
 RUN npm install sharp
 RUN npm install react-modal-video
 RUN npm install wowjs
 
 # Bundle app source
 COPY . /app
-RUN cp -a /app/. /app_backup
+# RUN cp -a /app/. /app_backup
 
 RUN chmod a+x /usr/local/bin/docker-entrypoint.sh
 
 EXPOSE 3000
 ENTRYPOINT [ "/usr/local/bin/docker-entrypoint.sh" ]
 
-#CMD ["sh", "-c", "next build && next start"]
-CMD [ "npm" ,"run","dev"]
+CMD ["sh", "-c", "npm run build && npm run start"]
+# CMD [ "npm" ,"run","dev"]

messages/en.json

@@ -0,0 +1,173 @@
+{
+  "Navigation": {
+    "about": "About",
+    "whyMerms": "Why MERMS?",
+    "howItWorks": "How It Works",
+    "contactUs": "Contact Us",
+    "helpCenter": "Help Center",
+    "features": "Features",
+    "forum": "Forum",
+    "signIn": "Sign in",
+    "signUp": "Sign up",
+    "language": "English"
+  },
+  "Footer": {
+    "description": "Are you looking for secure cloud-based tools and a strong online presence for your healthcare brand? MermEmr provides healthcare professionals with reliable SEO, online marketing, and clinical solutions to help you grow.",
+    "site": "Site",
+    "resources": "Resources",
+    "legal": "Legal",
+    "home": "Home",
+    "aboutUs": "About Us",
+    "contactUs": "Contact Us",
+    "features": "Features",
+    "helpCenter": "Help Center",
+    "ourForum": "Our Forum",
+    "termsOfUse": "Terms of Use",
+    "privacyPolicy": "Privacy Policy",
+    "copyright": "© 2026 MERMS(AI)",
+    "allRightsReserved": "All Rights Reserved"
+  },
+  "Hero": {
+    "title": "The AI Platform",
+    "title1": "Built for Medical Practitioners",
+    "description": "Empower your business with cutting-edge tools and seamless AI integration, elevating your practice to modern standards effortlessly.",
+    "cta": "Get started for free"
+  },
+  "Features": {
+    "deployTitle": "Deploy in Seconds",
+    "deployDesc": "Easily deploy the tools you need with our automated system.",
+    "addonsTitle": "Useful Addons",
+    "addonsDesc": "Explore our expanding addons to improve your applications.",
+    "ecosystemTitle": "Expanding Digital Ecosystem",
+    "ecosystemDesc": "We continuously introduce advanced digital tools designed to enhance and streamline your practice.",
+    "unifiedTitle": "Unified Management",
+    "unifiedDesc": "Manage everything from one portal with MERMS AI Assist Tools",
+    "mainTitle": "Deploy Tools for Your Practice with Ease in Our Secure Cloud.",
+    "mainDesc": "Empower your practice with seamless automation and essential tools for lasting success.",
+    "list1": "Effortlessly scale your practice with our growing ecosystem of innovative tools.",
+    "list2": "Boost your online presence and expand your community using our intelligent marketing platform."
+  },
+  "About": {
+    "title": "The worldview of your practice matters.",
+    "list1": "Actively or passively, your potential clients trust and evaluate your practice daily.",
+    "list2": "In your profession that feeds heavily on trust and image, MERMS solutions actively guide and engage you with this task"
+  },
+  "HowItWorks": {
+    "title": "MERMS-Agent: Always Here to Help You.",
+    "workflowTitle": "Automatic Workflows",
+    "workflowDesc": "It takes a single touch! Standardize service delivery using visual process workflows and AI-based automation. Get a quick visual summary of all your requests and monitor them in one place.",
+    "aiTitle": "Efficient A.I Assist",
+    "aiDesc": "Drive brand loyalty, boost your brand with social media marketing, and build your digital identity with our A.I. Assist creator tools.",
+    "analyticsTitle": "Useful Analytics",
+    "analyticsDesc": "Monitor your website performance with our simplified data dashboard. You can stay on top of your website's performance with real-time traffic statistics and trend charts."
+  },
+  "Banner": {
+    "title": "Getting started with MERMS today!",
+    "cta": "Get Started Now"
+  },
+  "EngageBox": {
+    "sectionId": "Enhance Engagement with Intelligent Solutions",
+    "title": "Achieve Success Through Automation.",
+    "description": "Utilize our automation tools and AI-Assist to enhance and manage your healthcare online presence, as well as streamline your practice operations.",
+    "subtitle": "Modern, Smarter Solutions for Your Practice",
+    "subtitleDesc": "Access up-to-date tools to manage your online presence and practice efficiently. Benefit from effective campaign management, seamless tool adoption, and real-time insights into industry trends."
+  },
+  "WhyChooseUs": {
+    "sectionId": "Why Choose Us",
+    "title": "Experience, Knowledge, Skills & Passion",
+    "description": "We make your practice stand out from other physicians in your area with modern A.I.-enabled solutions relevant to this period and time.",
+    "subtitle": "Your success is the goal!",
+    "subtitleDesc": "Our platform helps any provider quickly create an online presence, a landing page, or a multi-page website. We also provide everything you need to get your practice humming at full speed."
+  },
+  "AboutFeatures": {
+    "title": "We help you drive your goals with ease",
+    "feature1Title": "Healthcare Website",
+    "feature1Desc": "Our platform is thoughtfully designed to cater to the unique needs of healthcare practitioners, ensuring that you can focus on what truly matters - your mission.",
+    "feature2Title": "Auto Engage",
+    "feature2Desc": "We use our artificial intelligence tools to assist you in getting your users' engagement activities going with ease. We help you connect your contestants on social media sites.",
+    "feature3Title": "Patient News",
+    "feature3Desc": "Engage your patients and others with topics that educate and improve outcomes with blog addition to your website.",
+    "feature4Title": "Practice Tools",
+    "feature4Desc": "From appointment scheduling, messaging patient records management and billing, manage your features account in one simple portal.",
+    "feature5Title": "Personal Website",
+    "feature5Desc": "You are already a practitioner, sometimes you need to engage in general health discourse, we provide personal channels that augments your online presence.",
+    "feature6Title": "SEO & Insight",
+    "feature6Desc": "Monitor traffic and performance of your sites, get improvement recommendations and assist for improvement applicable."
+  },
+  "DedicatedTeam": {
+    "title": "Dedicated Team",
+    "description": "We pride ourselves on fostering a collaborative environment where creativity and innovation thrive. By staying at the forefront of industry trends and technological advancements, we transform your ideas into actionable strategies that elevate your practice. Our goal is to assist you in establishing a strong online presence while you focus on what you do best—providing exceptional care to your patients"
+  },
+  "FeaturesSection1": {
+    "title": "We pay attention to details",
+    "subtitle": "Continually evolving digital space means that we are constantly updating the tools you will need by:",
+    "dashboardTitle": "Intuitive Dashboard",
+    "dashboardDesc": "Easy-to-follow and user-adaptive dashboard that optimizes your targets.",
+    "integrationTitle": "Effortless Integration",
+    "integrationDesc": "Connect your tools to a target goal. Add and update what you need when required.",
+    "analyticsTitle": "Real-time Analytics",
+    "analyticsDesc": "Reporting that gives visibility to trends with AI assistance for recommendations."
+  },
+  "FeaturesSectionTwo": {
+    "title": "Innovative solutions, real-time results",
+    "description": "Bring your vision to life with the website builder that gives you the tools you need to succeed.",
+    "list1": "Design your website using our modern templates, designer fonts, and color palettes in minutes.",
+    "list2": "Promote your business and grow. Create a blog to grow your community and drive more traffic.",
+    "websiteTitle": "Website in Seconds",
+    "websiteDesc": "Build a website in seconds with MERMS AI website builder.",
+    "ecosystemTitle": "Expanding Digital Ecosystem",
+    "ecosystemDesc": "We continuously introduce advanced digital tools designed to enhance and streamline your practice.",
+    "addonsTitle": "Useful Addons",
+    "addonsDesc": "Explore our expanding addons to improve your applications.",
+    "unifiedTitle": "Unified Management",
+    "unifiedDesc": "Manage everything from one portal with MERMS AI Assist Tools."
+  },
+  "FeatureSection4": {
+    "step1Title": "Simple, Secure & Intuitive",
+    "step1Desc": "Accomplish your task in one easy-to-navigate dashboard that adapts to your priority. With a user-friendly interface, access important updates at a glance and make informed decisions quickly.",
+    "step2Title": "Active Status Reports",
+    "step2Desc": "Our Active Status Reports provide real-time insights into your ongoing products and tasks, ensuring you are always in the loop. These reports adapt dynamically to your needs, highlighting key metrics and progress indicators, allowing you to respond proactively to changes or challenges.",
+    "step3Title": "Secure at Core",
+    "step3Desc": "With Secure at Core, you can focus on what matters most—growing your business—while we take care of your security needs. Security is an ongoing commitment. We provide 24/7 monitoring and support."
+  },
+  "AboutPage": {
+    "title": "Helping healthcare providers with creative solutions.",
+    "description": "We aim to provide users with everything they need to succeed, from web presence and design to marketing, content creation, and more. Our specialists understand the unique challenges of running an efficient modern operation. We work with the latest technologies to maximize your return on investment.",
+    "quote": "As a healthcare provider, you must stay up-to-date on the latest trends and technologies to connect with your patients and provide them with top-notch care. We offer a variety of products that are specifically designed to help you meet the growing online needs of your practice"
+  },
+  "FeaturesPage": {
+    "sectionId": "Strategies That Work",
+    "title": "Modern Strategies & implementations",
+    "description": "In the agent world, we fit your solution to what works with attention to how your audience wants to reach you. We are an AI-first solution to your online and pipeline optimization practice.",
+    "subtitle": "Providing solutions that provably work",
+    "check1": "Made to suit different circumstances or requirements with ease.",
+    "check2": "Promote your brand, accomplish tasks quickly and effectively, and maximize productivity.",
+    "check3": "Create and grow your digital community and drive relevant traffic."
+  },
+  "ContactsPage": {
+    "title": "Questions? Let's Talk",
+    "description": "Want to learn more about MERMS, get a quote, or speak with an expert? Let us know what you are looking for and we'll get back to you right away",
+    "questionAbout": "This question is about:",
+    "chooseTopic": "Choose a topic, so we can best determine how to handle your request to:",
+    "selectDefault": "This question is about...",
+    "optionRegistering": "Registering or Accounts",
+    "optionApplication": "Application",
+    "optionTroubleshooting": "Troubleshooting",
+    "optionData": "Data or Files",
+    "optionOther": "Other",
+    "nameLabel": "Your Name:",
+    "namePlaceholder": "Please enter your name:",
+    "nameInput": "Your Name*",
+    "emailLabel": "Your Email Address:",
+    "emailPlaceholder": "Please carefully check your email address for accuracy:",
+    "emailInput": "Email Address*",
+    "messageLabel": "Explain your question in details:",
+    "messagePlaceholder": "Please provide specific details regarding your request or any feedback you wish to share.",
+    "messageInput": "I have a problem with...",
+    "sending": "Sending",
+    "messageSent": "Message Sent",
+    "submitRequest": "Submit Request",
+    "privacy": "We are committed to protecting your privacy. MERMS uses the information you provide to communicate with you regarding our relevant content, products, and services. You may unsubscribe from these communications at any time.",
+    "required": "Required"
+  }
+}

messages/es.json

@@ -0,0 +1,173 @@
+{
+  "Navigation": {
+    "about": "Acerca de",
+    "whyMerms": "¿Por qué MERMS?",
+    "howItWorks": "Cómo funciona",
+    "contactUs": "Contáctenos",
+    "helpCenter": "Centro de ayuda",
+    "features": "Características",
+    "forum": "Foro",
+    "signIn": "Iniciar sesión",
+    "signUp": "Registrarse",
+    "language": "Idioma"
+  },
+  "Footer": {
+    "description": "¿Busca herramientas seguras en la nube y una sólida presencia en línea para su marca de atención médica? MermEmr proporciona a los profesionales de la salud soluciones confiables de SEO, marketing en línea y clínicas para ayudarle a crecer.",
+    "site": "Sitio",
+    "resources": "Recursos",
+    "legal": "Legal",
+    "home": "Inicio",
+    "aboutUs": "Acerca de nosotros",
+    "contactUs": "Contáctenos",
+    "features": "Características",
+    "helpCenter": "Centro de ayuda",
+    "ourForum": "Nuestro Foro",
+    "termsOfUse": "Términos de uso",
+    "privacyPolicy": "Política de privacidad",
+    "copyright": "© 2026 MERMS(AI)",
+    "allRightsReserved": "Todos los derechos reservados"
+  },
+  "Hero": {
+    "title": "La plataforma de IA",
+    "title1": "creada para profesionales médicos",
+    "description": "Potencie su negocio con herramientas de última generación e integración de IA sin esfuerzo, llevando su práctica a los estándares modernos con facilidad.",
+    "cta": "Comenzar gratis"
+  },
+  "Features": {
+    "deployTitle": "Implementación en segundos",
+    "deployDesc": "Implemente fácilmente las herramientas que necesita con nuestro sistema automatizado.",
+    "addonsTitle": "Complementos útiles",
+    "addonsDesc": "Explore nuestros complementos en expansión para mejorar sus aplicaciones.",
+    "ecosystemTitle": "Ecosistema digital en expansión",
+    "ecosystemDesc": "Introducimos continuamente herramientas digitales avanzadas diseñadas para mejorar y optimizar su consultorio.",
+    "unifiedTitle": "Gestión unificada",
+    "unifiedDesc": "Gestione todo desde un portal con las herramientas MERMS AI Assist",
+    "mainTitle": "Implemente herramientas para su consultorio fácilmente en nuestra nube segura.",
+    "mainDesc": "Empodere su consultorio con automatización fluida y herramientas esenciales para el éxito duradero.",
+    "list1": "Escale su consultorio sin esfuerzo con nuestro creciente ecosistema de herramientas innovadoras.",
+    "list2": "Impulse su presencia en línea y expanda su comunidad usando nuestra plataforma de marketing inteligente."
+  },
+  "About": {
+    "title": "La visión del mundo de su consultorio importa.",
+    "list1": "De forma activa o pasiva, sus clientes potenciales confían y evalúan su consultorio diariamente.",
+    "list2": "En su profesión que depende en gran medida de la confianza y la imagen, las soluciones MERMS le guían y comprometen activamente con esta tarea"
+  },
+  "HowItWorks": {
+    "title": "MERMS-Agent: Siempre aquí para ayudarle.",
+    "workflowTitle": "Flujos de trabajo automáticos",
+    "workflowDesc": "¡Con un solo toque! Estandarice la prestación de servicios usando flujos de trabajo visuales y automatización basada en IA. Obtenga un resumen visual rápido de todas sus solicitudes y monitoréelas en un solo lugar.",
+    "aiTitle": "Asistencia A.I. eficiente",
+    "aiDesc": "Impulse la lealtad a la marca, potencie su marca con marketing en redes sociales y construya su identidad digital con nuestras herramientas creadoras A.I. Assist.",
+    "analyticsTitle": "Análisis útiles",
+    "analyticsDesc": "Monitoree el rendimiento de su sitio web con nuestro panel de datos simplificado. Manténgase al día del rendimiento de su sitio con estadísticas de tráfico en tiempo real y gráficos de tendencias."
+  },
+  "Banner": {
+    "title": "¡Comience con MERMS hoy!",
+    "cta": "Comenzar ahora"
+  },
+  "EngageBox": {
+    "sectionId": "Mejore el compromiso con soluciones inteligentes",
+    "title": "Logre el éxito a través de la automatización.",
+    "description": "Utilice nuestras herramientas de automatización y AI-Assist para mejorar y gestionar su presencia en línea en el ámbito de la salud, así como para optimizar las operaciones de su consultorio.",
+    "subtitle": "Soluciones modernas e inteligentes para su consultorio",
+    "subtitleDesc": "Acceda a herramientas actualizadas para gestionar eficientemente su presencia en línea. Benefíciese de una gestión eficaz de campañas, adopción fluida de herramientas e información en tiempo real sobre las tendencias del sector."
+  },
+  "WhyChooseUs": {
+    "sectionId": "Por qué elegirnos",
+    "title": "Experiencia, Conocimiento, Habilidades & Pasión",
+    "description": "Hacemos que su consultorio se destaque de otros médicos en su área con soluciones modernas habilitadas por IA relevantes para este período.",
+    "subtitle": "¡Su éxito es el objetivo!",
+    "subtitleDesc": "Nuestra plataforma ayuda a cualquier proveedor a crear rápidamente una presencia en línea, una página de destino o un sitio web de múltiples páginas. También proporcionamos todo lo que necesita para que su consultorio funcione a plena velocidad."
+  },
+  "AboutFeatures": {
+    "title": "Le ayudamos a alcanzar sus objetivos con facilidad",
+    "feature1Title": "Sitio web de salud",
+    "feature1Desc": "Nuestra plataforma está cuidadosamente diseñada para satisfacer las necesidades únicas de los profesionales de la salud, permitiéndole concentrarse en lo que realmente importa: su misión.",
+    "feature2Title": "Auto Engage",
+    "feature2Desc": "Usamos nuestras herramientas de inteligencia artificial para ayudarle a poner en marcha fácilmente las actividades de compromiso de sus usuarios en las redes sociales.",
+    "feature3Title": "Noticias para pacientes",
+    "feature3Desc": "Involucre a sus pacientes con temas que educan y mejoran los resultados a través de un blog en su sitio web.",
+    "feature4Title": "Herramientas de consultorio",
+    "feature4Desc": "Desde la programación de citas hasta la gestión de registros de pacientes y facturación, gestione todo desde un portal simple.",
+    "feature5Title": "Sitio web personal",
+    "feature5Desc": "Como profesional, a veces necesita participar en el discurso general de salud. Proporcionamos canales personales que aumentan su presencia en línea.",
+    "feature6Title": "SEO e Información",
+    "feature6Desc": "Monitoree el tráfico y el rendimiento de sus sitios, obtenga recomendaciones de mejora y asistencia para las mejoras aplicables."
+  },
+  "DedicatedTeam": {
+    "title": "Equipo dedicado",
+    "description": "Nos enorgullecemos de fomentar un entorno colaborativo donde la creatividad y la innovación prosperan. Al mantenernos a la vanguardia de las tendencias de la industria y los avances tecnológicos, transformamos sus ideas en estrategias accionables que elevan su consultorio. Nuestro objetivo es ayudarle a establecer una sólida presencia en línea mientras se concentra en lo que mejor sabe hacer: brindar atención excepcional a sus pacientes"
+  },
+  "FeaturesSection1": {
+    "title": "Prestamos atención a los detalles",
+    "subtitle": "El espacio digital en continua evolución significa que actualizamos constantemente las herramientas que necesitará mediante:",
+    "dashboardTitle": "Panel intuitivo",
+    "dashboardDesc": "Panel fácil de seguir y adaptativo al usuario que optimiza sus objetivos.",
+    "integrationTitle": "Integración sin esfuerzo",
+    "integrationDesc": "Conecte sus herramientas a un objetivo. Agregue y actualice lo que necesite cuando lo requiera.",
+    "analyticsTitle": "Análisis en tiempo real",
+    "analyticsDesc": "Informes que brindan visibilidad de tendencias con asistencia de IA para recomendaciones."
+  },
+  "FeaturesSectionTwo": {
+    "title": "Soluciones innovadoras, resultados en tiempo real",
+    "description": "Dé vida a su visión con el constructor de sitios web que le brinda las herramientas que necesita para tener éxito.",
+    "list1": "Diseñe su sitio web usando nuestras plantillas modernas, fuentes de diseñador y paletas de colores en minutos.",
+    "list2": "Promueva su negocio y crezca. Cree un blog para hacer crecer su comunidad y generar más tráfico.",
+    "websiteTitle": "Sitio web en segundos",
+    "websiteDesc": "Cree un sitio web en segundos con el constructor de sitios web de IA MERMS.",
+    "ecosystemTitle": "Ecosistema digital en expansión",
+    "ecosystemDesc": "Introducimos continuamente herramientas digitales avanzadas diseñadas para mejorar y optimizar su consultorio.",
+    "addonsTitle": "Complementos útiles",
+    "addonsDesc": "Explore nuestros complementos en expansión para mejorar sus aplicaciones.",
+    "unifiedTitle": "Gestión unificada",
+    "unifiedDesc": "Gestione todo desde un portal con las herramientas MERMS AI Assist."
+  },
+  "FeatureSection4": {
+    "step1Title": "Simple, Seguro e Intuitivo",
+    "step1Desc": "Realice su tarea en un panel fácil de navegar que se adapta a su prioridad. Con una interfaz fácil de usar, acceda a actualizaciones importantes de un vistazo y tome decisiones informadas rápidamente.",
+    "step2Title": "Informes de estado activos",
+    "step2Desc": "Nuestros informes de estado activos proporcionan información en tiempo real sobre sus productos y tareas en curso. Estos informes se adaptan dinámicamente a sus necesidades, destacando métricas clave e indicadores de progreso.",
+    "step3Title": "Seguridad en el núcleo",
+    "step3Desc": "Con Seguridad en el núcleo, puede concentrarse en lo que más importa: hacer crecer su negocio, mientras nos ocupamos de sus necesidades de seguridad. Proporcionamos monitoreo y soporte 24/7."
+  },
+  "AboutPage": {
+    "title": "Ayudando a los proveedores de atención médica con soluciones creativas.",
+    "description": "Nuestro objetivo es proporcionar a los usuarios todo lo que necesitan para tener éxito, desde presencia web y diseño hasta marketing y creación de contenido. Nuestros especialistas comprenden los desafíos únicos de gestionar una operación moderna eficiente. Trabajamos con las últimas tecnologías para maximizar su retorno de inversión.",
+    "quote": "Como proveedor de atención médica, debe mantenerse al día con las últimas tendencias y tecnologías para conectarse con sus pacientes y brindarles atención de primer nivel. Ofrecemos una variedad de productos específicamente diseñados para ayudarle a satisfacer las crecientes necesidades en línea de su consultorio"
+  },
+  "FeaturesPage": {
+    "sectionId": "Estrategias que funcionan",
+    "title": "Estrategias modernas e implementaciones",
+    "description": "En el mundo de los agentes, adaptamos su solución a lo que funciona con atención a cómo su audiencia quiere comunicarse con usted. Somos una solución con IA primero para la optimización de su práctica en línea.",
+    "subtitle": "Brindando soluciones que funcionan de forma comprobada",
+    "check1": "Diseñado para adaptarse a diferentes circunstancias o requisitos con facilidad.",
+    "check2": "Promueva su marca, realice tareas de manera rápida y efectiva, y maximice la productividad.",
+    "check3": "Cree y haga crecer su comunidad digital y genere tráfico relevante."
+  },
+  "ContactsPage": {
+    "title": "¿Preguntas? Hablemos",
+    "description": "¿Quiere saber más sobre MERMS, obtener una cotización o hablar con un experto? Díganos qué está buscando y le responderemos de inmediato",
+    "questionAbout": "Esta pregunta es sobre:",
+    "chooseTopic": "Elija un tema para que podamos determinar mejor cómo manejar su solicitud:",
+    "selectDefault": "Esta pregunta es sobre...",
+    "optionRegistering": "Registro o Cuentas",
+    "optionApplication": "Aplicación",
+    "optionTroubleshooting": "Solución de problemas",
+    "optionData": "Datos o Archivos",
+    "optionOther": "Otro",
+    "nameLabel": "Su nombre:",
+    "namePlaceholder": "Por favor ingrese su nombre:",
+    "nameInput": "Su Nombre*",
+    "emailLabel": "Su dirección de correo electrónico:",
+    "emailPlaceholder": "Por favor verifique cuidadosamente la exactitud de su correo electrónico:",
+    "emailInput": "Dirección de correo*",
+    "messageLabel": "Explique su pregunta en detalle:",
+    "messagePlaceholder": "Por favor proporcione detalles específicos sobre su solicitud o los comentarios que desea compartir.",
+    "messageInput": "Tengo un problema con...",
+    "sending": "Enviando",
+    "messageSent": "Mensaje enviado",
+    "submitRequest": "Enviar solicitud",
+    "privacy": "Estamos comprometidos a proteger su privacidad. MERMS utiliza la información que proporciona para comunicarse con usted sobre nuestro contenido, productos y servicios relevantes. Puede darse de baja de estas comunicaciones en cualquier momento.",
+    "required": "Requerido"
+  }
+}

messages/fr.json

@@ -0,0 +1,173 @@
+{
+  "Navigation": {
+    "about": "À propos",
+    "whyMerms": "Pourquoi MERMS ?",
+    "howItWorks": "Comment ça marche",
+    "contactUs": "Nous contacter",
+    "helpCenter": "Centre d'aide",
+    "features": "Fonctionnalités",
+    "forum": "Forum",
+    "signIn": "Se connecter",
+    "signUp": "S'inscrire",
+    "language": "Langue"
+  },
+  "Footer": {
+    "description": "Vous cherchez des outils cloud sécurisés et une forte présence en ligne pour votre marque de santé ? MermEmr fournit aux professionnels de santé des solutions fiables de référencement, de marketing en ligne et cliniques pour vous aider à vous développer.",
+    "site": "Site",
+    "resources": "Ressources",
+    "legal": "Légal",
+    "home": "Accueil",
+    "aboutUs": "À propos de nous",
+    "contactUs": "Nous contacter",
+    "features": "Fonctionnalités",
+    "helpCenter": "Centre d'aide",
+    "ourForum": "Notre Forum",
+    "termsOfUse": "Conditions d'utilisation",
+    "privacyPolicy": "Politique de confidentialité",
+    "copyright": "© 2026 MERMS(AI)",
+    "allRightsReserved": "Tous droits réservés"
+  },
+  "Hero": {
+    "title": "La plateforme d'IA",
+    "title1": "créée pour les médecins",
+    "description": "Donnez à votre entreprise les moyens d’agir grâce à des outils de pointe et à une intégration transparente de l’IA, élevant votre pratique aux normes modernes en toute simplicité.",
+    "cta": "Commencer gratuitement"
+  },
+  "Features": {
+    "deployTitle": "Déploiement en quelques secondes",
+    "deployDesc": "Déployez facilement les outils dont vous avez besoin avec notre système automatisé.",
+    "addonsTitle": "Extensions utiles",
+    "addonsDesc": "Découvrez nos extensions en expansion pour améliorer vos applications.",
+    "ecosystemTitle": "Écosystème numérique en expansion",
+    "ecosystemDesc": "Nous introduisons continuellement des outils numériques avancés conçus pour améliorer et rationaliser votre cabinet.",
+    "unifiedTitle": "Gestion unifiée",
+    "unifiedDesc": "Gérez tout depuis un seul portail avec les outils MERMS AI Assist",
+    "mainTitle": "Déployez des outils pour votre cabinet facilement dans notre cloud sécurisé.",
+    "mainDesc": "Donnez à votre cabinet les moyens d'agir avec une automatisation transparente et des outils essentiels pour un succès durable.",
+    "list1": "Faites évoluer facilement votre cabinet grâce à notre écosystème croissant d'outils innovants.",
+    "list2": "Boostez votre présence en ligne et développez votre communauté grâce à notre plateforme marketing intelligente."
+  },
+  "About": {
+    "title": "La vision du monde de votre cabinet est importante.",
+    "list1": "Activement ou passivement, vos clients potentiels font confiance à votre cabinet et l'évaluent quotidiennement.",
+    "list2": "Dans votre profession qui repose fortement sur la confiance et l'image, les solutions MERMS vous guident et vous engagent activement dans cette tâche"
+  },
+  "HowItWorks": {
+    "title": "MERMS-Agent : Toujours là pour vous aider.",
+    "workflowTitle": "Workflows automatiques",
+    "workflowDesc": "Il suffit d'un seul contact ! Standardisez la prestation de services à l'aide de workflows visuels et d'une automatisation basée sur l'IA. Obtenez un résumé visuel rapide de toutes vos demandes et suivez-les en un seul endroit.",
+    "aiTitle": "Assistance A.I. efficace",
+    "aiDesc": "Fidélisez votre marque, boostez-la grâce au marketing sur les réseaux sociaux, et construisez votre identité numérique avec nos outils créateurs A.I. Assist.",
+    "analyticsTitle": "Analyses utiles",
+    "analyticsDesc": "Surveillez les performances de votre site web avec notre tableau de bord simplifié. Gardez une longueur d'avance avec des statistiques de trafic en temps réel et des graphiques de tendances."
+  },
+  "Banner": {
+    "title": "Commencez avec MERMS aujourd'hui !",
+    "cta": "Commencer maintenant"
+  },
+  "EngageBox": {
+    "sectionId": "Améliorez l'engagement avec des solutions intelligentes",
+    "title": "Atteignez le succès grâce à l'automatisation.",
+    "description": "Utilisez nos outils d'automatisation et l'AI-Assist pour améliorer et gérer votre présence en ligne dans le domaine de la santé, ainsi que pour rationaliser les opérations de votre cabinet.",
+    "subtitle": "Des solutions modernes et plus intelligentes pour votre cabinet",
+    "subtitleDesc": "Accédez à des outils à jour pour gérer efficacement votre présence en ligne. Bénéficiez d'une gestion de campagnes efficace, d'une adoption transparente des outils et d'informations en temps réel sur les tendances du secteur."
+  },
+  "WhyChooseUs": {
+    "sectionId": "Pourquoi nous choisir",
+    "title": "Expérience, Connaissances, Compétences & Passion",
+    "description": "Nous faisons ressortir votre cabinet par rapport aux autres médecins de votre région grâce à des solutions modernes basées sur l'IA.",
+    "subtitle": "Votre succès est notre objectif !",
+    "subtitleDesc": "Notre plateforme aide tout prestataire à créer rapidement une présence en ligne, une page d'atterrissage ou un site multipage. Nous fournissons également tout ce dont vous avez besoin pour faire fonctionner votre cabinet à pleine vitesse."
+  },
+  "AboutFeatures": {
+    "title": "Nous vous aidons à atteindre vos objectifs facilement",
+    "feature1Title": "Site web de santé",
+    "feature1Desc": "Notre plateforme est conçue avec soin pour répondre aux besoins uniques des praticiens de santé, vous permettant de vous concentrer sur ce qui compte vraiment - votre mission.",
+    "feature2Title": "Auto Engage",
+    "feature2Desc": "Nous utilisons nos outils d'intelligence artificielle pour vous aider à lancer facilement les activités d'engagement de vos utilisateurs sur les réseaux sociaux.",
+    "feature3Title": "Actualités patients",
+    "feature3Desc": "Engagez vos patients avec des sujets qui éduquent et améliorent les résultats grâce à un blog sur votre site web.",
+    "feature4Title": "Outils de cabinet",
+    "feature4Desc": "De la prise de rendez-vous à la gestion des dossiers patients et à la facturation, gérez tout depuis un portail simple.",
+    "feature5Title": "Site web personnel",
+    "feature5Desc": "En tant que praticien, vous avez parfois besoin de vous engager dans des discussions générales sur la santé. Nous fournissons des canaux personnels qui augmentent votre présence en ligne.",
+    "feature6Title": "SEO & Analyse",
+    "feature6Desc": "Surveillez le trafic et les performances de vos sites, obtenez des recommandations d'amélioration et de l'aide pour les améliorations applicables."
+  },
+  "DedicatedTeam": {
+    "title": "Équipe dédiée",
+    "description": "Nous sommes fiers de favoriser un environnement collaboratif où la créativité et l'innovation prospèrent. En restant à la pointe des tendances du secteur et des avancées technologiques, nous transformons vos idées en stratégies concrètes qui élèvent votre cabinet. Notre objectif est de vous aider à établir une forte présence en ligne pendant que vous vous concentrez sur ce que vous faites le mieux — fournir des soins exceptionnels à vos patients"
+  },
+  "FeaturesSection1": {
+    "title": "Nous prêtons attention aux détails",
+    "subtitle": "L'espace numérique en constante évolution signifie que nous mettons constamment à jour les outils dont vous aurez besoin par :",
+    "dashboardTitle": "Tableau de bord intuitif",
+    "dashboardDesc": "Tableau de bord facile à suivre et adaptatif qui optimise vos objectifs.",
+    "integrationTitle": "Intégration sans effort",
+    "integrationDesc": "Connectez vos outils à un objectif cible. Ajoutez et mettez à jour ce dont vous avez besoin au besoin.",
+    "analyticsTitle": "Analytique en temps réel",
+    "analyticsDesc": "Rapports qui donnent de la visibilité aux tendances avec l'aide de l'IA pour les recommandations."
+  },
+  "FeaturesSectionTwo": {
+    "title": "Solutions innovantes, résultats en temps réel",
+    "description": "Donnez vie à votre vision avec le constructeur de site web qui vous donne les outils dont vous avez besoin pour réussir.",
+    "list1": "Créez votre site web en utilisant nos modèles modernes, polices de designer et palettes de couleurs en quelques minutes.",
+    "list2": "Promouvez votre activité et développez-vous. Créez un blog pour développer votre communauté et générer plus de trafic.",
+    "websiteTitle": "Site web en quelques secondes",
+    "websiteDesc": "Créez un site web en quelques secondes avec le constructeur de site web IA MERMS.",
+    "ecosystemTitle": "Écosystème numérique en expansion",
+    "ecosystemDesc": "Nous introduisons continuellement des outils numériques avancés conçus pour améliorer et rationaliser votre cabinet.",
+    "addonsTitle": "Extensions utiles",
+    "addonsDesc": "Découvrez nos extensions en expansion pour améliorer vos applications.",
+    "unifiedTitle": "Gestion unifiée",
+    "unifiedDesc": "Gérez tout depuis un seul portail avec les outils MERMS AI Assist."
+  },
+  "FeatureSection4": {
+    "step1Title": "Simple, Sécurisé & Intuitif",
+    "step1Desc": "Accomplissez votre tâche dans un tableau de bord facile à naviguer qui s'adapte à vos priorités. Avec une interface conviviale, accédez aux mises à jour importantes en un coup d'œil et prenez des décisions éclairées rapidement.",
+    "step2Title": "Rapports d'état actifs",
+    "step2Desc": "Nos rapports d'état actifs fournissent des informations en temps réel sur vos produits et tâches en cours. Ces rapports s'adaptent dynamiquement à vos besoins, mettant en évidence les métriques clés et les indicateurs de progression.",
+    "step3Title": "Sécurité au cœur",
+    "step3Desc": "Avec Sécurité au cœur, vous pouvez vous concentrer sur ce qui compte le plus — développer votre activité — pendant que nous prenons soin de vos besoins en sécurité. Nous fournissons une surveillance et un support 24h/24 et 7j/7."
+  },
+  "AboutPage": {
+    "title": "Aider les prestataires de soins de santé avec des solutions créatives.",
+    "description": "Nous visons à fournir aux utilisateurs tout ce dont ils ont besoin pour réussir, de la présence web et du design au marketing et à la création de contenu. Nos spécialistes comprennent les défis uniques de la gestion d'une opération moderne efficace. Nous travaillons avec les dernières technologies pour maximiser votre retour sur investissement.",
+    "quote": "En tant que prestataire de soins de santé, vous devez rester au courant des dernières tendances et technologies pour vous connecter avec vos patients et leur fournir des soins de premier ordre. Nous proposons une variété de produits spécifiquement conçus pour vous aider à répondre aux besoins en ligne croissants de votre cabinet"
+  },
+  "FeaturesPage": {
+    "sectionId": "Des stratégies qui fonctionnent",
+    "title": "Stratégies modernes & mises en œuvre",
+    "description": "Dans le monde des agents, nous adaptons votre solution à ce qui fonctionne en tenant compte de la façon dont votre audience veut vous atteindre. Nous sommes une solution IA-first pour votre pratique d'optimisation en ligne.",
+    "subtitle": "Des solutions qui fonctionnent de manière prouvée",
+    "check1": "Conçu pour s'adapter à différentes circonstances ou exigences avec facilité.",
+    "check2": "Promouvez votre marque, accomplissez les tâches rapidement et efficacement, et maximisez la productivité.",
+    "check3": "Créez et développez votre communauté numérique et générez du trafic pertinent."
+  },
+  "ContactsPage": {
+    "title": "Des questions ? Parlons-en",
+    "description": "Vous voulez en savoir plus sur MERMS, obtenir un devis ou parler à un expert ? Faites-nous part de ce que vous recherchez et nous vous répondrons immédiatement",
+    "questionAbout": "Cette question concerne :",
+    "chooseTopic": "Choisissez un sujet pour que nous puissions mieux déterminer comment traiter votre demande :",
+    "selectDefault": "Cette question concerne...",
+    "optionRegistering": "Inscription ou Comptes",
+    "optionApplication": "Application",
+    "optionTroubleshooting": "Dépannage",
+    "optionData": "Données ou Fichiers",
+    "optionOther": "Autre",
+    "nameLabel": "Votre nom :",
+    "namePlaceholder": "Veuillez entrer votre nom :",
+    "nameInput": "Votre Nom*",
+    "emailLabel": "Votre adresse e-mail :",
+    "emailPlaceholder": "Veuillez vérifier attentivement l'exactitude de votre adresse e-mail :",
+    "emailInput": "Adresse e-mail*",
+    "messageLabel": "Expliquez votre question en détail :",
+    "messagePlaceholder": "Veuillez fournir des détails spécifiques concernant votre demande ou les commentaires que vous souhaitez partager.",
+    "messageInput": "J'ai un problème avec...",
+    "sending": "Envoi en cours",
+    "messageSent": "Message envoyé",
+    "submitRequest": "Soumettre la demande",
+    "privacy": "Nous nous engageons à protéger votre vie privée. MERMS utilise les informations que vous fournissez pour communiquer avec vous. Vous pouvez vous désabonner de ces communications à tout moment.",
+    "required": "Obligatoire"
+  }
+}

next.config.js

@@ -1,8 +1,16 @@
 /** @type {import('next').NextConfig} */
+const path = require('path')
+
 const nextConfig = {
   reactStrictMode: true,
-  experimental: {
-    serverActions: true,
+  outputFileTracingRoot: path.join(__dirname),
+  i18n: {
+    locales: ['en', 'fr', 'es'],
+    defaultLocale: 'en',
+  },
+  webpack: (config) => {
+    config.resolve.alias['next-intl'] = path.join(__dirname, 'utils/next-intl-compat.js')
+    return config
   },
 }
 

package-lock.json

@@ -8,16 +8,21 @@
             "name": "merms",
             "version": "0.1.1",
             "dependencies": {
+                "@tanstack/react-query": "^5.62.16",
+                "axios": "^1.13.2",
                 "eslint": "8.41.0",
                 "eslint-config-next": "13.4.3",
+                "formik": "^2.4.9",
                 "next": "^13.5.8",
+                "next-intl": "^3.26.5",
                 "react": "18.2.0",
                 "react-dom": "18.2.0",
                 "react-modal-video": "^2.0.2",
                 "sass": "^1.62.1",
                 "server-only": "^0.0.1",
                 "swiper": "^10.0.4",
-                "wowjs": "^1.1.3"
+                "wowjs": "^1.1.3",
+                "yup": "^1.7.1"
             }
         },
         "node_modules/@babel/runtime": {
@@ -91,6 +96,66 @@
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             }
         },
+        "node_modules/@formatjs/ecma402-abstract": {
+            "version": "2.3.6",
+            "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.6.tgz",
+            "integrity": "sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==",
+            "license": "MIT",
+            "dependencies": {
+                "@formatjs/fast-memoize": "2.2.7",
+                "@formatjs/intl-localematcher": "0.6.2",
+                "decimal.js": "^10.4.3",
+                "tslib": "^2.8.0"
+            }
+        },
+        "node_modules/@formatjs/ecma402-abstract/node_modules/@formatjs/intl-localematcher": {
+            "version": "0.6.2",
+            "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.6.2.tgz",
+            "integrity": "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==",
+            "license": "MIT",
+            "dependencies": {
+                "tslib": "^2.8.0"
+            }
+        },
+        "node_modules/@formatjs/fast-memoize": {
+            "version": "2.2.7",
+            "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.7.tgz",
+            "integrity": "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==",
+            "license": "MIT",
+            "dependencies": {
+                "tslib": "^2.8.0"
+            }
+        },
+        "node_modules/@formatjs/icu-messageformat-parser": {
+            "version": "2.11.4",
+            "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.11.4.tgz",
+            "integrity": "sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw==",
+            "license": "MIT",
+            "dependencies": {
+                "@formatjs/ecma402-abstract": "2.3.6",
+                "@formatjs/icu-skeleton-parser": "1.8.16",
+                "tslib": "^2.8.0"
+            }
+        },
+        "node_modules/@formatjs/icu-skeleton-parser": {
+            "version": "1.8.16",
+            "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.16.tgz",
+            "integrity": "sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@formatjs/ecma402-abstract": "2.3.6",
+                "tslib": "^2.8.0"
+            }
+        },
+        "node_modules/@formatjs/intl-localematcher": {
+            "version": "0.5.10",
+            "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.10.tgz",
+            "integrity": "sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==",
+            "license": "MIT",
+            "dependencies": {
+                "tslib": "2"
+            }
+        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.14",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -646,12 +711,60 @@
                 "tslib": "^2.4.0"
             }
         },
+        "node_modules/@tanstack/query-core": {
+            "version": "5.100.14",
+            "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.100.14.tgz",
+            "integrity": "sha512-5X41dGpxgeaHISCRW2oYwcSycZeULZzAunaudXT9ov1KOTj9xwt0CH6hbwqP1/z74ZWF7rYFnDpyYH07XFcZew==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            }
+        },
+        "node_modules/@tanstack/react-query": {
+            "version": "5.100.14",
+            "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.100.14.tgz",
+            "integrity": "sha512-oOr6aRdSFEwWhzxEkD/9ZcItM3+LjBSkeVmadWKwUssAHTsqd/7bOjWrX4AbvEkoEhgAxzN0Xk6H/aYzXiYBAw==",
+            "license": "MIT",
+            "dependencies": {
+                "@tanstack/query-core": "5.100.14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            },
+            "peerDependencies": {
+                "react": "^18 || ^19"
+            }
+        },
+        "node_modules/@types/hoist-non-react-statics": {
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz",
+            "integrity": "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==",
+            "license": "MIT",
+            "dependencies": {
+                "hoist-non-react-statics": "^3.3.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*"
+            }
+        },
         "node_modules/@types/json5": {
             "version": "0.0.29",
             "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
             "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
             "license": "MIT"
         },
+        "node_modules/@types/react": {
+            "version": "19.2.15",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.15.tgz",
+            "integrity": "sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "csstype": "^3.2.2"
+            }
+        },
         "node_modules/@typescript-eslint/parser": {
             "version": "5.62.0",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
@@ -758,6 +871,7 @@
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
             "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
             "license": "MIT",
+            "peer": true,
             "bin": {
                 "acorn": "bin/acorn"
             },
@@ -774,6 +888,18 @@
                 "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
             }
         },
+        "node_modules/agent-base": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+            "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+            "license": "MIT",
+            "dependencies": {
+                "debug": "4"
+            },
+            "engines": {
+                "node": ">= 6.0.0"
+            }
+        },
         "node_modules/ajv": {
             "version": "6.12.6",
             "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -999,6 +1125,12 @@
             "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
             "license": "MIT"
         },
+        "node_modules/asynckit": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+            "license": "MIT"
+        },
         "node_modules/available-typed-arrays": {
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -1023,6 +1155,18 @@
                 "node": ">=4"
             }
         },
+        "node_modules/axios": {
+            "version": "1.16.1",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-1.16.1.tgz",
+            "integrity": "sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A==",
+            "license": "MIT",
+            "dependencies": {
+                "follow-redirects": "^1.16.0",
+                "form-data": "^4.0.5",
+                "https-proxy-agent": "^5.0.1",
+                "proxy-from-env": "^2.1.0"
+            }
+        },
         "node_modules/axobject-query": {
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -1128,9 +1272,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001690",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz",
-            "integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==",
+            "version": "1.0.30001793",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz",
+            "integrity": "sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -1202,6 +1346,18 @@
             "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
             "license": "MIT"
         },
+        "node_modules/combined-stream": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+            "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+            "license": "MIT",
+            "dependencies": {
+                "delayed-stream": "~1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
         "node_modules/concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1234,9 +1390,9 @@
             }
         },
         "node_modules/csstype": {
-            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+            "version": "3.2.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+            "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
             "license": "MIT"
         },
         "node_modules/damerau-levenshtein": {
@@ -1313,12 +1469,27 @@
                 }
             }
         },
+        "node_modules/decimal.js": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+            "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+            "license": "MIT"
+        },
         "node_modules/deep-is": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
             "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
             "license": "MIT"
         },
+        "node_modules/deepmerge": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+            "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/define-data-property": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -1353,6 +1524,15 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/delayed-stream": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+            "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
         "node_modules/detect-libc": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -1554,14 +1734,15 @@
             }
         },
         "node_modules/es-set-tostringtag": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
-            "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+            "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
             "license": "MIT",
             "dependencies": {
-                "get-intrinsic": "^1.2.4",
+                "es-errors": "^1.3.0",
+                "get-intrinsic": "^1.2.6",
                 "has-tostringtag": "^1.0.2",
-                "hasown": "^2.0.1"
+                "hasown": "^2.0.2"
             },
             "engines": {
                 "node": ">= 0.4"
@@ -1611,6 +1792,7 @@
             "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==",
             "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.2.0",
                 "@eslint-community/regexpp": "^4.4.0",
@@ -1774,6 +1956,7 @@
             "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz",
             "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@rtsao/scc": "^1.1.0",
                 "array-includes": "^3.1.8",
@@ -2145,6 +2328,26 @@
             "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
             "license": "ISC"
         },
+        "node_modules/follow-redirects": {
+            "version": "1.16.0",
+            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+            "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+            "funding": [
+                {
+                    "type": "individual",
+                    "url": "https://github.com/sponsors/RubenVerborgh"
+                }
+            ],
+            "license": "MIT",
+            "engines": {
+                "node": ">=4.0"
+            },
+            "peerDependenciesMeta": {
+                "debug": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/for-each": {
             "version": "0.3.3",
             "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2154,6 +2357,47 @@
                 "is-callable": "^1.1.3"
             }
         },
+        "node_modules/form-data": {
+            "version": "4.0.5",
+            "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+            "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+            "license": "MIT",
+            "dependencies": {
+                "asynckit": "^0.4.0",
+                "combined-stream": "^1.0.8",
+                "es-set-tostringtag": "^2.1.0",
+                "hasown": "^2.0.2",
+                "mime-types": "^2.1.12"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/formik": {
+            "version": "2.4.9",
+            "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.9.tgz",
+            "integrity": "sha512-5nI94BMnlFDdQRBY4Sz39WkhxajZJ57Fzs8wVbtsQlm5ScKIR1QLYqv/ultBnobObtlUyxpxoLodpixrsf36Og==",
+            "funding": [
+                {
+                    "type": "individual",
+                    "url": "https://opencollective.com/formik"
+                }
+            ],
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@types/hoist-non-react-statics": "^3.3.1",
+                "deepmerge": "^2.1.1",
+                "hoist-non-react-statics": "^3.3.0",
+                "lodash": "^4.17.21",
+                "lodash-es": "^4.17.21",
+                "react-fast-compare": "^2.0.1",
+                "tiny-warning": "^1.0.2",
+                "tslib": "^2.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0"
+            }
+        },
         "node_modules/fs.realpath": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2452,6 +2696,28 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/hoist-non-react-statics": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+            "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "react-is": "^16.7.0"
+            }
+        },
+        "node_modules/https-proxy-agent": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+            "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+            "license": "MIT",
+            "dependencies": {
+                "agent-base": "6",
+                "debug": "4"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/ignore": {
             "version": "5.3.2",
             "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2523,6 +2789,18 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/intl-messageformat": {
+            "version": "10.7.18",
+            "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.18.tgz",
+            "integrity": "sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@formatjs/ecma402-abstract": "2.3.6",
+                "@formatjs/fast-memoize": "2.2.7",
+                "@formatjs/icu-messageformat-parser": "2.11.4",
+                "tslib": "^2.8.0"
+            }
+        },
         "node_modules/is-array-buffer": {
             "version": "3.0.5",
             "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -3035,6 +3313,18 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/lodash": {
+            "version": "4.18.1",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+            "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+            "license": "MIT"
+        },
+        "node_modules/lodash-es": {
+            "version": "4.18.1",
+            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+            "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+            "license": "MIT"
+        },
         "node_modules/lodash.merge": {
             "version": "4.6.2",
             "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3084,6 +3374,27 @@
                 "node": ">=8.6"
             }
         },
+        "node_modules/mime-db": {
+            "version": "1.52.0",
+            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+            "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/mime-types": {
+            "version": "2.1.35",
+            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+            "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+            "license": "MIT",
+            "dependencies": {
+                "mime-db": "1.52.0"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
         "node_modules/minimatch": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3135,11 +3446,21 @@
             "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
             "license": "MIT"
         },
+        "node_modules/negotiator": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+            "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
         "node_modules/next": {
             "version": "13.5.8",
             "resolved": "https://registry.npmjs.org/next/-/next-13.5.8.tgz",
             "integrity": "sha512-VlR7FaXpSibCs7ujOqStaDFTGSdX/NvWgLDcd47oiHUe8i63ZtNkX9intgcYAu/MxpaeEGinHaMB5mwxuzglKw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@next/env": "13.5.8",
                 "@swc/helpers": "0.5.2",
@@ -3181,6 +3502,27 @@
                 }
             }
         },
+        "node_modules/next-intl": {
+            "version": "3.26.5",
+            "resolved": "https://registry.npmjs.org/next-intl/-/next-intl-3.26.5.tgz",
+            "integrity": "sha512-EQlCIfY0jOhRldiFxwSXG+ImwkQtDEfQeSOEQp6ieAGSLWGlgjdb/Ck/O7wMfC430ZHGeUKVKax8KGusTPKCgg==",
+            "funding": [
+                {
+                    "type": "individual",
+                    "url": "https://github.com/sponsors/amannn"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "@formatjs/intl-localematcher": "^0.5.4",
+                "negotiator": "^1.0.0",
+                "use-intl": "^3.26.5"
+            },
+            "peerDependencies": {
+                "next": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0"
+            }
+        },
         "node_modules/node-addon-api": {
             "version": "7.1.1",
             "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
@@ -3504,6 +3846,21 @@
                 "react-is": "^16.13.1"
             }
         },
+        "node_modules/property-expr": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+            "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
+            "license": "MIT"
+        },
+        "node_modules/proxy-from-env": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+            "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/punycode": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3538,6 +3895,7 @@
             "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
             "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "loose-envify": "^1.1.0"
             },
@@ -3550,6 +3908,7 @@
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
             "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "loose-envify": "^1.1.0",
                 "scheduler": "^0.23.0"
@@ -3558,6 +3917,12 @@
                 "react": "^18.2.0"
             }
         },
+        "node_modules/react-fast-compare": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+            "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
+            "license": "MIT"
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -3797,6 +4162,7 @@
             "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.0.tgz",
             "integrity": "sha512-qsSxlayzoOjdvXMVLkzF84DJFc2HZEL/rFyGIKbbilYtAvlCxyuzUeff9LawTn4btVnLKg75Z8MMr1lxU1lfGw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "chokidar": "^4.0.0",
                 "immutable": "^5.0.2",
@@ -4217,6 +4583,18 @@
             "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
             "license": "MIT"
         },
+        "node_modules/tiny-case": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+            "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
+            "license": "MIT"
+        },
+        "node_modules/tiny-warning": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+            "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+            "license": "MIT"
+        },
         "node_modules/to-regex-range": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4229,6 +4607,12 @@
                 "node": ">=8.0"
             }
         },
+        "node_modules/toposort": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+            "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
+            "license": "MIT"
+        },
         "node_modules/tsconfig-paths": {
             "version": "3.15.0",
             "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -4407,6 +4791,19 @@
                 "punycode": "^2.1.0"
             }
         },
+        "node_modules/use-intl": {
+            "version": "3.26.5",
+            "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-3.26.5.tgz",
+            "integrity": "sha512-OdsJnC/znPvHCHLQH/duvQNXnP1w0hPfS+tkSi3mAbfjYBGh4JnyfdwkQBfIVf7t8gs9eSX/CntxUMvtKdG2MQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@formatjs/fast-memoize": "^2.2.0",
+                "intl-messageformat": "^10.5.14"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0"
+            }
+        },
         "node_modules/watchpack": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -4553,6 +4950,30 @@
             "funding": {
                 "url": "https://github.com/sponsors/sindresorhus"
             }
+        },
+        "node_modules/yup": {
+            "version": "1.7.1",
+            "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",
+            "integrity": "sha512-GKHFX2nXul2/4Dtfxhozv701jLQHdf6J34YDh2cEkpqoo8le5Mg6/LrdseVLrFarmFygZTlfIhHx/QKfb/QWXw==",
+            "license": "MIT",
+            "dependencies": {
+                "property-expr": "^2.0.5",
+                "tiny-case": "^1.0.3",
+                "toposort": "^2.0.2",
+                "type-fest": "^2.19.0"
+            }
+        },
+        "node_modules/yup/node_modules/type-fest": {
+            "version": "2.19.0",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+            "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+            "license": "(MIT OR CC0-1.0)",
+            "engines": {
+                "node": ">=12.20"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
         }
     }
 }

package.json

@@ -12,15 +12,19 @@
     },
     "dependencies": {
         "@tanstack/react-query": "^5.62.16",
+        "axios": "^1.13.2",
         "eslint": "8.41.0",
         "eslint-config-next": "13.4.3",
+        "formik": "^2.4.9",
         "next": "^13.5.8",
+        "next-intl": "^3.26.5",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-modal-video": "^2.0.2",
         "sass": "^1.62.1",
         "server-only": "^0.0.1",
         "swiper": "^10.0.4",
-        "wowjs": "^1.1.3"
+        "wowjs": "^1.1.3",
+        "yup": "^1.7.1"
     }
 }

pages/404.js

@@ -37,4 +37,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/ProductHome.js

@@ -22,4 +22,13 @@ export default function ProductHome() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/_app.js

@@ -1,5 +1,6 @@
 import Preloader from "../components/elements/Preloader"
 import { useEffect, useState } from "react"
+import { NextIntlClientProvider } from "next-intl"
 
 import "/public/css/bootstrap.min.css"
 import "/public/css/flaticon.css"
@@ -13,25 +14,26 @@ import "/public/css/responsive.css"
 import QueryClientContext from "../components/queryclientProvider/QueryClientContext"
 
 function MyApp({ Component, pageProps }) {
+    const { messages, locale, ...restPageProps } = pageProps
 
     const [loading, setLoading] = useState(true)
     useEffect(() => {
         setTimeout(() => {
             setLoading(false)
         }, 1000)
-
     }, [])
-    return (<>
-        {/* <SmoothScroll /> */}
-        {!loading ? (
-            // <ProductHome />
-            <QueryClientContext>
-                <Component {...pageProps} />
-            </QueryClientContext>
-        ) : (
-            <Preloader />
-        )}
-    </>)
+
+    return (
+        <NextIntlClientProvider locale={locale || "en"} messages={messages || {}}>
+            {!loading ? (
+                <QueryClientContext>
+                    <Component {...restPageProps} />
+                </QueryClientContext>
+            ) : (
+                <Preloader />
+            )}
+        </NextIntlClientProvider>
+    )
 }
 
 export default MyApp

pages/_help-center.js

@@ -0,0 +1,527 @@
+import Layout from "../components/layout/Layout"
+import Link from "next/link"
+import { useState } from "react"
+export default function Home() {
+    const [activeIndex, setActiveIndex] = useState(1)
+    const handleOnClick = (index) => {
+        setActiveIndex(index)
+    }
+    const [isActive, setIsActive] = useState({
+        status: false,
+        key: 1,
+    })
+
+    const handleToggle = (key) => {
+        if (isActive.key === key) {
+            setIsActive({
+                status: false,
+            })
+        } else {
+            setIsActive({
+                status: true,
+                key,
+            })
+        }
+    }
+    return (
+        <>
+            <Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
+                <div>
+                    <section id="faqs-4" className="gr--whitesmoke inner-page-hero pb-100 faqs-section division">
+                        <div className="container">
+                            {/* SECTION TITLE */}
+                            <div className="row justify-content-center">
+                                <div className="col-lg-11 col-xl-10">
+                                    <div className="inner-page-title">
+                                        <h2 className="s-52 w-700">How Can We Help?</h2>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* TABS NAVIGATION */}
+                            <div className="row">
+                                <div className="col">
+                                    <div className="tabs-nav tabs--theme clearfix">
+                                        <ul className="tabs-1">
+                                            {/* TAB-1 LINK */}
+                                            <li className={activeIndex === 1 ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"} onClick={() => handleOnClick(1)}>
+                                                <div className="tab-link-ico"><span className="flaticon-mechanics" /></div>
+                                                <p>Getting Started</p>
+                                            </li>
+                                            {/* TAB-2 LINK */}
+                                            <li className={activeIndex === 2 ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"} onClick={() => handleOnClick(2)}>
+                                                <div className="tab-link-ico"><span className="flaticon-suit" /></div>
+                                                <p>My Account</p>
+                                            </li>
+                                            {/* TAB-3 LINK */}
+                                            <li className={activeIndex === 3 ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"} onClick={() => handleOnClick(3)}>
+                                                <div className="tab-link-ico"><span className="flaticon-price-label" /></div>
+                                                <p>Pricing Plans</p>
+                                            </li>
+                                            {/* TAB-4 LINK */}
+                                            <li className={activeIndex === 4 ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"} onClick={() => handleOnClick(4)}>
+                                                <div className="tab-link-ico"><span className="flaticon-screenplay" /></div>
+                                                <p>Other Questions</p>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>	{/* END TABS NAVIGATION */}
+                            {/* TABS CONTENT */}
+                            <div className="tabs-content">
+                                <div className="row justify-content-center">
+                                    <div className="col-xl-10">
+                                        {/* TAB-1 CONTENT */}
+                                        <div id="tab-1" className={activeIndex === 1 ? "tab-content current" : "tab-content "}>
+                                            <div className="accordion-wrapper">
+                                                <ul className="accordion">
+                                                    {/* QUESTION #1 */}
+                                                    <li className={isActive.key == 1 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(1)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">What is MERMS, and how does it work?</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>MERMS operates on a cloud-based model, allowing users to access the software from anywhere, at any time. By leveraging advanced technology, MERMS streamlines processes, enhances collaboration, and provides real-time data analytics. This system automates routine tasks, enabling teams to focus on more strategic initiatives.
+                                                            </p>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #1 */}
+                                                    {/* QUESTION #2 */}
+                                                    <li  className={isActive.key == 2 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(2)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">What can I do with MERMS?</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>With MERMS, users can manage projects, track budgets, oversee inventory, and collaborate across different departments. Whether you're in finance, marketing, or operations, MERMS offers customizable solutions to cater to your specific needs. Not only can you streamline processes, but you can also improve decision-making with data-driven insights.
+                                                            </p>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #2 */}
+                                                    {/* QUESTION #3 */}
+                                                    <li  className={isActive.key == 3 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(3)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">Which Product and Tools does MERMS support?</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>MERMS supports a wide array of tools, including CRM systems, project management software, and financial applications. It integrates seamlessly with popular platforms like Slack, Microsoft Teams, and Google Workspace, allowing for a comprehensive management experience without losing functionality.
+                                                            </p>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #3 */}
+                                                    {/* QUESTION #4 */}
+                                                    <li  className={isActive.key == 4 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(4)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">Can I Automate with MERMS?</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>Yes! MERMS offers robust automation capabilities. Users can set up automated workflows for routine tasks, such as reporting, notifications, and data entry, minimizing human error and saving valuable time. This feature enhances productivity, making it easier for organizations to scale and adapt to changing needs.
+                                                            </p>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #4 */}
+                                                </ul>
+                                            </div>
+                                        </div>	{/* END TAB-1 CONTENT */}
+                                        {/* TAB-2 CONTENT */}
+                                        <div id="tab-2"  className={activeIndex === 2 ? "tab-content current" : "tab-content "}>
+                                            <div className="accordion-wrapper">
+                                                <ul className="accordion">
+                                                    {/* QUESTION #1 */}
+                                                    <li className={isActive.key == 6 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(6)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">Sign up and manage your account</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 6 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <ol className="digit-list">
+                                                                <li className="list-item">
+                                                                    <p>Curabitur ac dapibus libero eu congue tristique neque</p>
+                                                                </li>
+                                                                <li className="list-item">
+                                                                    <p>Sagittis congue augue egestas volutpat egestas</p>
+                                                                </li>
+                                                                <li className="list-item">
+                                                                    <p>An aliquam justo suscipit congue augue</p>
+                                                                </li>
+                                                                <li className="list-item">
+                                                                    <p>Gestas integer congue a lectus porta</p>
+                                                                </li>
+                                                            </ol>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #1 */}
+                                                    {/* QUESTION #2 */}
+                                                    <li  className={isActive.key == 7 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(7)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">Manage account settings</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 7 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris lectus
+                                                                laoreet gestas neque and vitae undo auctor dolor luctus placerat a magna
+                                                                cursus congue magna mpedit ligula congue maecenas gravida augue porttitor
+                                                                nunc, quis vehicula magna luctus tempor. Quisque vel laoreet turpis. Viverra
+                                                                augue, a augue tempor, dictum tempor diam. Sed pulvinar a consectetur nibh,
+                                                                imperdiet varius viverra
+                                                            </p>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #2 */}
+                                                    {/* QUESTION #3 */}
+                                                    <li  className={isActive.key == 8 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(8)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">Change language or location settings</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 8 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris lectus
+                                                                laoreet gestas neque and vitae undo auctor dolor luctus placerat a magna
+                                                                cursus congue magna mpedit ligula congue maecenas gravida augue porttitor
+                                                                nunc, quis vehicula magna luctus tempor. Quisque vel laoreet turpis. Viverra
+                                                                augue, a augue tempor, dictum tempor diam. Sed pulvinar a consectetur nibh,
+                                                                imperdiet varius viverra
+                                                            </p>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #3 */}
+                                                    {/* QUESTION #4 */}
+                                                    <li  className={isActive.key == 9 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(9)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">Troubleshoot account issues</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 9 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
+                                                                ipsum primis an augue ultrice ligula egestas suscipit lectus gestas
+                                                                integer congue a lectus porta tristique phasellus neque a blandit and
+                                                                tristique justo aliquam justo suscipit congue augue egestas volutpat
+                                                                egestas magna sem congue
+                                                            </p>
+                                                            {/* Text */}
+                                                            <p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
+                                                                ipsum primis and augue efficitur ligula egestas suscipit lectus gestas
+                                                                integer congue a lectus porta phasellus neque
+                                                            </p>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #4 */}
+                                                    {/* QUESTION #5 */}
+                                                    <li className={isActive.key == 10 ? "accordion-item acc-last-item is-active" : "accordion-item acc-last-item"} onClick={() => handleToggle(10)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">Manage accessibility settings</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 10 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris
+                                                                lectus laoreet gestas neque and vitae undo auctor dolor luctus placerat
+                                                                a magna cursus congue magna mpedit ligula congue maecenas gravida augue
+                                                                porttitor nunc, quis vehicula magna luctus tempor. Quisque vel laoreet
+                                                                turpis. Viverra augue, a augue tempor, dictum tempor diam. Sed pulvinar
+                                                                a consectetur nibh, imperdiet varius viverra
+                                                            </p>
+                                                            {/* Text */}
+                                                            <p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
+                                                                and magna ipsum vitae purus and efficitur ipsum primis in cubilia laoreet
+                                                                tempor gravida
+                                                            </p>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #5 */}
+                                                </ul>
+                                            </div>
+                                        </div>	{/* END TAB-2 CONTENT */}
+                                        {/* TAB-3 CONTENT */}
+                                        <div id="tab-3"  className={activeIndex === 3 ? "tab-content current" : "tab-content "}>
+                                            <div className="accordion-wrapper">
+                                                <ul className="accordion">
+                                                    {/* QUESTION #1 */}
+                                                    <li className={isActive.key == 11 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(11)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">How much does MERMS cost?</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 11 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
+                                                                ipsum primis undo augue ultrice ligula egestas suscipit lectus gestas
+                                                                integer congue a lectus porta neque blandit tristique
+                                                            </p>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #1 */}
+                                                    {/* QUESTION #2 */}
+                                                    <li  className={isActive.key == 12 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(12)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">I didn't receive the license key after purchased</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 12 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <ul className="simple-list">
+                                                                <li className="list-item">
+                                                                    <p>Curabitur ac dapibus libero. Quisque eu congue tristique neque.
+                                                                        Phasellus blandit tristique aliquam justo undo. Aliquam vitae molestie nunc. Quisque sapien justo, aliquet non molestie purus
+                                                                        tempor
+                                                                    </p>
+                                                                </li>
+                                                                <li className="list-item">
+                                                                    <p>Sagittis congue augue egestas volutpat egestas magna suscipit
+                                                                        egestas magna ipsum vitae purus undo efficitur ipsum primis in
+                                                                        cubilia laoreet augue egestas luctus donec curabitur dapibus libero
+                                                                    </p>
+                                                                </li>
+                                                            </ul>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #2 */}
+                                                    {/* QUESTION #3 */}
+                                                    <li  className={isActive.key == 13 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(13)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">Do you offer discounts for annual plans?</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 13 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <ul className="simple-list">
+                                                                <li className="list-item">
+                                                                    <p>Curabitur ac dapibus libero. Quisque eu congue justo undo
+                                                                        tristique neque phasellus and blandit tristique aliquam. Aliquam
+                                                                        vitae molestie nunc. Quisque sapien justo, aliquet non molestie
+                                                                        purus tempor
+                                                                    </p>
+                                                                </li>
+                                                                <li className="list-item">
+                                                                    <p>Sagittis congue augue egestas volutpat egestas magna suscipit
+                                                                        egestas magna ipsum vitae purus undo efficitur ipsum primis in
+                                                                        cubilia laoreet augue egestas luctus donec curabitur dapibus libero
+                                                                    </p>
+                                                                </li>
+                                                            </ul>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #3 */}
+                                                    {/* QUESTION #4 */}
+                                                    <li  className={isActive.key == 14 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(14)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">How safe is my data?</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 14 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>An augue cubilia laoreet and magna suscipit egestas magna an ipsum
+                                                                purus ipsum primis an augue ultrice ligula egestas suscipit lectus
+                                                                gestas integer congue a lectus porta tristique phasellus neque a blandit
+                                                                undo tristique justo aliquam justo suscipit congue augue egestas volutpat
+                                                                egestas magna sem
+                                                            </p>
+                                                            {/* Text */}
+                                                            <p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
+                                                                ipsum primis and augue efficitur ligula egestas suscipit lectus gestas
+                                                                integer congue a lectus porta phasellus neque
+                                                            </p>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #4 */}
+                                                    {/* QUESTION #5 */}
+                                                    <li className={isActive.key == 15 ? "accordion-item acc-last-item is-active" : "accordion-item acc-last-item"} onClick={() => handleToggle(15)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">How to request a refund?</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 15 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <ul className="simple-list">
+                                                                <li className="list-item">
+                                                                    <p>Curabitur ac dapibus libero. Quisque eu congue tristique</p>
+                                                                </li>
+                                                                <li className="list-item">
+                                                                    <p>Congue tristique neque phasellus blandit tristique justo
+                                                                        undo aliquam. Aliquam vitae molestie quisque sapien justo,
+                                                                        aliquet non molestie purus tempor
+                                                                    </p>
+                                                                </li>
+                                                                <li className="list-item">
+                                                                    <p>Sagittis congue augue egestas volutpat egestas magna suscipit
+                                                                        egestas magna ipsum
+                                                                    </p>
+                                                                </li>
+                                                            </ul>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #5 */}
+                                                </ul>
+                                            </div>
+                                        </div>	{/* END TAB-3 CONTENT */}
+                                        {/* TAB-4 CONTENT */}
+                                        <div id="tab-4"  className={activeIndex === 4 ? "tab-content current" : "tab-content "}>
+                                            <div className="accordion-wrapper">
+                                                <ul className="accordion">
+                                                    {/* QUESTION #1 */}
+                                                    <li className={isActive.key == 16 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(16)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">How do I get the error log?</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 16 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
+                                                                and magna ipsum vitae
+                                                            </p>
+                                                            {/* Text */}
+                                                            <p>Sagittis congue augue egestas volutpat egestas and magna suscipit an
+                                                                egestas magna ipsum vitae purus congue efficitur ipsum primis in cubilia
+                                                                laoreet augue egestas luctus donec and curabitur dapibus
+                                                            </p>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #1 */}
+                                                    {/* QUESTION #2 */}
+                                                    <li  className={isActive.key == 17 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(17)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">I forgot my folder password, what should I do?</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 17 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
+                                                                magna ipsum vitae purus congue efficitur ipsum primis in cubilia laoreet
+                                                                augue egestas luctus donec and curabitur dapibus
+                                                            </p>
+                                                            {/* Text */}
+                                                            <ol className="digit-list">
+                                                                <li className="list-item">
+                                                                    <p>Gestas integer congue a lectus porta</p>
+                                                                </li>
+                                                                <li className="list-item">
+                                                                    <p>An aliquam justo suscipit congue augue</p>
+                                                                </li>
+                                                                <li className="list-item">
+                                                                    <p>Sagittis congue augue egestas volutpat egestas</p>
+                                                                </li>
+                                                            </ol>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #2 */}
+                                                    {/* QUESTION #3 */}
+                                                    <li  className={isActive.key == 18 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(18)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">Limitations of folder password protection</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 18 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris
+                                                                lectus laoreet gestas neque and vitae undo auctor dolor luctus placerat
+                                                                a magna cursus congue magna mpedit ligula congue maecenas gravida augue
+                                                                porttitor nunc, quis vehicula magna luctus tempor. Quisque vel laoreet
+                                                                turpis. Viverra augue, a augue tempor, dictum tempor diam. Sed pulvinar
+                                                                a consectetur nibh, imperdiet varius viverra
+                                                            </p>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #3 */}
+                                                    {/* QUESTION #4 */}
+                                                    <li  className={isActive.key == 19 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(19)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">Import existing library</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 19 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris
+                                                                lectus laoreet gestas neque and vitae undo auctor dolor luctus placerat
+                                                                a magna cursus congue magna mpedit ligula congue maecenas gravida augue
+                                                                porttitor nunc, quis vehicula magna luctus tempor. Quisque vel laoreet
+                                                                turpis. Viverra augue, a augue tempor, dictum tempor diam. Sed pulvinar
+                                                                a consectetur nibh, imperdiet varius viverra
+                                                            </p>
+                                                            {/* Text */}
+                                                            <p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
+                                                                and magna ipsum vitae purus and efficitur ipsum primis in cubilia laoreet
+                                                                tempor gravida
+                                                            </p>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #4 */}
+                                                    {/* QUESTION #5 */}
+                                                    <li className={isActive.key == 20 ? "accordion-item acc-last-item is-active" : "accordion-item acc-last-item"} onClick={() => handleToggle(20)}>
+                                                        {/* Question */}
+                                                        <div className="accordion-thumb">
+                                                            <h5 className="s-22 w-700">I lost my license. Can you send it to me?</h5>
+                                                        </div>
+                                                        {/* Answer */}
+                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 20 ? "block" : "none"}` }}>
+                                                            {/* Text */}
+                                                            <p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
+                                                                ipsum primis undo augue ultrice ligula egestas suscipit lectus gestas
+                                                                integer congue phasellus neque blandit tristique
+                                                            </p>
+                                                            {/* Text */}
+                                                            <p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
+                                                                and magna ipsum vitae
+                                                            </p>
+                                                        </div>
+                                                    </li>	{/* END QUESTION #5 */}
+                                                </ul>
+                                            </div>
+                                        </div>	{/* END TAB-4 CONTENT */}
+                                    </div>
+                                </div> {/* End row */}
+                            </div>	{/* END TABS CONTENT */}
+                        </div>     {/* End container */}
+                    </section>	{/* END  FAQs-4 */}
+                    {/* BANNER-9
+			============================================= */}
+                    <section id="banner-9" className="bg--02 py-70 x-border banner-section">
+                        <div className="container">
+                            {/* BANNER-9 WRAPPER */}
+                            <div className="banner-7-wrapper">
+                                <div className="row justify-content-center d-flex align-items-center">
+                                    {/* BANNER-9 TEXT */}
+                                    <div className="col-md-7 col-xl-5">
+                                        <div className="banner-9-txt">
+                                            {/* Title */}
+                                            <h3 className="s-40 w-700">Still need help?</h3>
+                                            {/* Text */}
+                                            <p className="p-lg">Don't hesitate to contact us about any question you might be interested in</p>
+                                            {/* Button */}
+                                            <Link href="/contacts" className="btn r-04 btn--theme hover--theme">Ask your question here</Link>
+                                        </div>
+                                    </div>
+                                    {/* BANNER-9 IMAGE */}
+                                    <div className="col-md-5 col-xl-5">
+                                        <div className="banner-9-img text-end">
+                                            <img className="img-fluid" src="/images/help.png" alt="banner-image" />
+                                        </div>
+                                    </div>
+                                </div>     {/* End row */}
+                            </div>    {/* END BANNER-9 WRAPPER */}
+                        </div>     {/* End container */}
+                    </section>
+                </div>
+
+            </Layout>
+        </>
+    )
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/about.js

@@ -7,30 +7,25 @@ import MermsRecentBlog from "../components/sections/MermsRecentBlog";
 import MermsWhyChooseUs from "../components/sections/MermsWhyChooseUs";
 import MermsDedicatedTeam from "../components/sections/MermsDedicatedTeam";
 import MermsAboutFeautures from "../components/sections/MermsAboutFeautures";
+import { useTranslations } from "next-intl";
 export default function Home() {
+    const t = useTranslations("AboutPage")
 
     return (
         <>
             <Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
                 <div>
-                    {/* ABOUT-2
-			============================================= */}
                     <section id="about-2" className="rel inner-page-hero about-section division">
-                        {/* ABOUT-2 TITLE */}
                         <div className="container">
                             <div className="row">
                                 <div className="col-md-11 col-lg-10 col-xl-9">
                                     <div className="about-2-title mb-60">
-                                        {/* Title */}
-                                        <h2 className="s-52 w-700 mb-30">Helping healthcare providers with creative solutions.</h2>
-                                        {/* Text */}
-                                        <p className="mb-0">We aim to provide users with everything they need to succeed, from web presence and design to marketing, 
-                                            content creation, and more. Our specialists understand the unique challenges of running an efficient modern operation. We work with the latest technologies to maximize your return on investment.
-                                        </p>
+                                        <h2 className="s-52 w-700 mb-30">{t("title")}</h2>
+                                        <p className="mb-0">{t("description")}</p>
                                     </div>
                                 </div>
                             </div>
-                        </div>	  {/* END ABOUT-2 TITLE */}
+                        </div>
                         {/* ABOUT-2 IMAGES */}
                         <div className="container-fluid">
                             <div className="row">
@@ -61,9 +56,7 @@ export default function Home() {
                                                 <div className="a2-txt-quote ico-40 o-20">
                                                     <span className="flaticon-quote" />
                                                 </div>
-                                                {/* Text */}
-                                                <p>As a healthcare provider, you must stay up-to-date on the latest trends and technologies to connect with your patients and provide them with top-notch care. We offer a variety of products that are specifically designed to help you meet the growing online needs of your practice
-                                                </p>
+                                                <p>{t("quote")}</p>
                                                 {/* Author */}
                                                 {/* <p className="a2-txt-author">Charlie Cheever <span>CEO &amp; CO-FOUNDER</span></p> */}
                                             </div>
@@ -92,4 +85,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/blog-listing.js

@@ -460,4 +460,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/blogview/[id]/index.js

@@ -158,4 +158,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getServerSideProps({ locale }) {
+  const { getMessages } = await import('../../../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/contacts.js

@@ -1,6 +1,55 @@
+import {useMutation} from '@tanstack/react-query';
 import Layout from "../components/layout/Layout"
 import Link from "next/link"
+import {Form, Formik} from 'formik';
+import * as Yup from "yup";
+import { useTranslations } from "next-intl";
+
+import { sendContactMsg } from "../components/services/services";
+
 export default function Home() {
+    const t = useTranslations("ContactsPage")
+
+    const validationSchema = Yup.object().shape({
+        subject: Yup.string().required(t("required")),
+        name: Yup.string().required(t("required")),
+        email: Yup.string().required(t("required")),
+        message: Yup.string().required(t("required")),
+    })
+
+    const initialValues = {
+        subject: '',
+        name: '',
+        email: '',
+        message: ''
+    };
+
+    const contactMutation = useMutation({
+        mutationFn: (fields) => {
+            return sendContactMsg(fields)
+        },
+        onSuccess: (res) => {
+            // if (res?.data?.resultCode != '0') {
+            //     throw({message: res?.data?.resultDescription})
+            // }
+            window.scrollTo(0, 0);
+        },
+        // onSettled: () => {
+        //     setTimeout(() => {
+        //         contactMutation.reset()
+        //     }, 3000)
+        // }
+        // onError: (err) => {
+        //     console.log('err', err)
+        // }
+    })
+
+    const handleContactMutation = (values) => {
+        let reqData = {
+            ...values
+        }
+        contactMutation.mutate(reqData)
+    }
 
     return (
         <>
@@ -12,72 +61,140 @@ export default function Home() {
                             <div className="row justify-content-center">
                                 <div className="col-md-10 col-lg-9">
                                     <div className="section-title text-center mb-80">
-                                        {/* Title */}
-                                        <h2 className="s-52 w-700">Questions? Let's Talk</h2>
-                                        {/* Text */}
-                                        <p className="p-lg">Want to learn more about MERMS, get a quote, or speak with an expert?
-                                            Let us know what you are looking for and we’ll get back to you right away
-                                        </p>
+                                        <h2 className="s-52 w-700">{t("title")}</h2>
+                                        <p className="p-lg">{t("description")}</p>
                                     </div>
                                 </div>
                             </div>
                             {/* CONTACT FORM */}
-                            <div className="row justify-content-center">
-                                <div className="col-md-11 col-lg-10 col-xl-8">
-                                    <div className="form-holder">
-                                        <form name="contactform" className="row contact-form">
-                                            {/* Form Select */}
-                                            <div className="col-md-12 input-subject">
-                                                <p className="p-lg">This question is about: </p>
-                                                <span>Choose a topic, so we know who to send your request to: </span>
-                                                <select className="form-select subject" aria-label="Default select example">
-                                                    <option>This question is about...</option>
-                                                    <option>Registering/Authorising</option>
-                                                    <option>Using Application</option>
-                                                    <option>Troubleshooting</option>
-                                                    <option>Backup/Restore</option>
-                                                    <option>Other</option>
-                                                </select>
-                                            </div>
-                                            {/* Contact Form Input */}
-                                            <div className="col-md-12">
-                                                <p className="p-lg">Your Name: </p>
-                                                <span>Please enter your real name: </span>
-                                                <input type="text" name="name" className="form-control name" placeholder="Your Name*" />
-                                            </div>
-                                            <div className="col-md-12">
-                                                <p className="p-lg">Your Email Address: </p>
-                                                <span>Please carefully check your email address for accuracy</span>
-                                                <input type="text" name="email" className="form-control email" placeholder="Email Address*" />
-                                            </div>
-                                            <div className="col-md-12">
-                                                <p className="p-lg">Explain your question in details: </p>
-                                                <span>Your OS version, MERMS version &amp; build, steps you did. Be VERY precise!</span>
-                                                <textarea className="form-control message" name="message" rows={6} placeholder="I have a problem with..." />
-                                            </div>
-                                            {/* Contact Form Button */}
-                                            <div className="col-md-12 mt-15 form-btn text-right">
-                                                <button type="submit" className="btn btn--theme hover--theme submit">Submit Request</button>
-                                            </div>
-                                            <div className="contact-form-notice">
-                                                <p className="p-sm">We are committed to your privacy. MERMS uses the information you
-                                                    provide us to contact you about our relevant content, products, and services.
-                                                    You may unsubscribe from these communications at any time. For more information,
-                                                    check out our <Link href="/privacy">Privacy Policy</Link>.
-                                                </p>
-                                            </div>
-                                            {/* Contact Form Message */}
-                                            <div className="col-lg-12 contact-form-msg">
-                                                <span className="loading" />
-                                            </div>
-                                        </form>
+
+                            <div>
+                                <div className="row d-flex align-items-start">
+                                    {/* IMAGE BLOCK */}
+                                    <div className="col-md-6 col-lg-6">
+                                        <div className="img-block left-column wow fadeInRight">
+                                            <img className="img-fluid" src="/images/contact-us-page.png" alt="content-image"/>
+                                        </div>
+                                    </div>
+                                    
+
+                                    <div className="col-md-6 col-lg-6">
+                                        <div className="form-holder">
+                                            <Formik
+                                                initialValues={initialValues}
+                                                validationSchema={validationSchema}
+                                                onSubmit={handleContactMutation}
+                                            >
+                                                {(props) => {
+                                                    return (
+                                                        <Form name="contactform" className="row contact-form">
+                                                            {/* Form Select */}
+                                                            {contactMutation.isSuccess ?
+                                                            <div className='w-100 text-center'>
+                                                                <p className='p-lg' style={{lineHeight: '30px'}}>
+                                                                    Thank you for reaching out to us. We have received your message and will treat it with utmost urgency. Our team will respond to you as soon as possible.
+                                                                </p>
+                                                                <div className="d-flex justify-content-center mt-15" style={{marginTop: '80px'}}>
+                                                                    <Link href="/" className="btn btn--theme hover--theme submit">
+                                                                        Return Home
+                                                                    </Link>
+                                                                </div>
+                                                            </div>
+                                                            :contactMutation.isError ?
+                                                            <div className='w-100 text-center'>
+                                                                <p className='p-lg' style={{lineHeight: '30px', color: 'red'}}>
+                                                                    Opps! An error occured, please try again.
+                                                                </p>
+                                                                <div className="d-flex justify-content-center mt-15" style={{marginTop: '80px'}}>
+                                                                    <button onClick={()=>contactMutation.reset()} type='button' className="btn btn--theme hover--theme submit">
+                                                                        Resend Message
+                                                                    </button>
+                                                                </div>
+                                                            </div>
+                                                            :
+                                                            <>
+                                                            <div className="col-md-12 input-subject">
+                                                                <p className="p-lg">{t("questionAbout")}{(props.errors.subject && props.touched.subject) &&
+                                                                        <span style={{display: 'inline'}} className='text-danger'>{props.errors.subject}</span>}</p>
+                                                                <span>{t("chooseTopic")}</span>
+                                                                <select name='subject' onChange={props.handleChange}
+                                                                        className="form-select subject"
+                                                                        aria-label="Default select example">
+                                                                    <option value=''>{t("selectDefault")}</option>
+                                                                    <option value='registering or account'>{t("optionRegistering")}</option>
+                                                                    <option value='using application'>{t("optionApplication")}</option>
+                                                                    <option value='troubleshooting'>{t("optionTroubleshooting")}</option>
+                                                                    <option value='data and files'>{t("optionData")}</option>
+                                                                    <option value='others'>{t("optionOther")}</option>
+                                                                </select>
+                                                            </div>
+                                                            <div className="col-md-12">
+                                                                <p className="p-lg">{t("nameLabel")}{(props.errors.name && props.touched.name) &&
+                                                                        <span style={{display: 'inline'}} className='text-danger'>{props.errors.name}</span>}</p>
+                                                                <span>{t("namePlaceholder")}</span>
+                                                                <input type="text" onChange={props.handleChange}
+                                                                       name="name" className="form-control name"
+                                                                       placeholder={t("nameInput")}/>
+                                                            </div>
+                                                            <div className="col-md-12">
+                                                                <p className="p-lg">{t("emailLabel")}{(props.errors.email && props.touched.email) &&
+                                                                        <span style={{display: 'inline'}} className='text-danger'>{props.errors.email}</span>}</p>
+                                                                <span>{t("emailPlaceholder")}</span>
+                                                                <input type="text" onChange={props.handleChange}
+                                                                       name="email" className="form-control email"
+                                                                       placeholder={t("emailInput")}/>
+                                                            </div>
+                                                            <div className="col-md-12">
+                                                                <p className="p-lg">{t("messageLabel")}{(props.errors.message && props.touched.message) &&
+                                                                        <span style={{display: 'inline'}} className='text-danger'>{props.errors.message}</span>}</p>
+                                                                <span>{t("messagePlaceholder")}</span>
+                                                                <textarea onChange={props.handleChange}
+                                                                          className="form-control message"
+                                                                          name="message" rows={6}
+                                                                          placeholder={t("messageInput")}/>
+                                                            </div>
+                                                            <div className="d-flex justify-content-end mt-15 form-btn">
+                                                                <button
+                                                                    type="submit"
+                                                                    className="btn btn--theme hover--theme submit"
+                                                                    disabled={contactMutation.isPending || contactMutation.isSuccess}
+                                                                >
+                                                                    {contactMutation.isPending ? t("sending") : contactMutation.isSuccess ? t("messageSent") : t("submitRequest")}
+                                                                </button>
+                                                            </div>
+                                                            </>
+                                                            }
+                                                            <div className="contact-form-notice">
+                                                                <p className="p-sm">{t("privacy")}</p>
+                                                            </div>
+
+                                                            {/* Contact Form Message */}
+                                                            <div className="col-lg-12 contact-form-msg">
+                                                                <span className="loading"/>
+                                                            </div>
+                                                        </Form>
+                                                    );
+                                                }}
+                                            </Formik>
+                                        </div>
+                                        {/*</div>*/}
                                     </div>
                                 </div>
-                            </div>	   {/* END CONTACT FORM */}
-                        </div>	   {/* End container */}
-                    </section>	{/* END CONTACTS-1 */}
+                                {/* End row */}
+                            </div>
+
+
+                            {/*<div className="row justify-content-center">*/}
+                            {/*    <div className="col-md-11 col-lg-10 col-xl-8">*/}
+
+                            {/*    </div>*/}
+                            {/*</div>	   */}
+                        </div>
+                        {/* End container */}
+                    </section>
+                    {/* END CONTACTS-1 */}
                     {/* DIVIDER LINE */}
-                    <hr className="divider" />
+                    <hr className="divider"/>
                     {/* NEWSLETTER-1
 			============================================= */}
 
@@ -86,4 +203,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/cookies.js

@@ -225,4 +225,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/download.js

@@ -203,4 +203,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/faqs.js

@@ -595,4 +595,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/features.js

@@ -7,7 +7,10 @@ import MermsBanner from "../components/sections/MermsBanner";
 import MermsFeatureSection4 from "../components/sections/MermsFeatureSection4";
 import MermsFeaturesSection1 from "../components/sections/MermsFeaturesSection1";
 import MermsFeaturesSectionTwo from "../components/sections/MermsFeaturesSectionTwo";
+import MermsEngageBox from "../components/sections/MermsEngageBox";
+import { useTranslations } from "next-intl";
 export default function Home() {
+    const t = useTranslations("FeaturesPage")
 
     return (
         <>
@@ -26,43 +29,32 @@ export default function Home() {
                                 {/* TEXT BLOCK */}
                                 <div className="col-md-6">
                                     <div className="txt-block right-column wow fadeInLeft">
-                                        {/* Section ID */}
-                                        <span className="section-id">Strategies That Work</span>
-                                        {/* Title */}
-                                        <h2 className="s-46 w-700">Right strategies &amp; implementations</h2>
-                                        {/* Text */}
-                                        <p>Sodales tempor sapien quaerat ipsum undo congue laoreet turpis neque auctor turpis
-                                            vitae dolor luctus placerat magna and ligula cursus purus vitae purus an ipsum suscipit
-                                        </p>
-                                        {/* Small Title */}
-                                        <h5 className="s-24 w-700">Get more done in less time</h5>
-                                        {/* CONTENT BOX #1 */}
+                                        <span className="section-id">{t("sectionId")}</span>
+                                        <h2 className="s-46 w-700">{t("title")}</h2>
+                                        <p>{t("description")}</p>
+                                        <h5 className="s-24 w-700">{t("subtitle")}</h5>
                                         <div className="cbox-1 ico-15">
                                             <div className="ico-wrap color--theme">
                                                 <div className="cbox-1-ico"><span className="flaticon-check" /></div>
                                             </div>
                                             <div className="cbox-1-txt">
-                                                <p>Magna dolor luctus at egestas sapien</p>
+                                                <p>{t("check1")}</p>
                                             </div>
                                         </div>
-                                        {/* CONTENT BOX #2 */}
                                         <div className="cbox-1 ico-15">
                                             <div className="ico-wrap color--theme">
                                                 <div className="cbox-1-ico"><span className="flaticon-check" /></div>
                                             </div>
                                             <div className="cbox-1-txt">
-                                                <p>Cursus purus suscipit vitae cubilia magnis volute egestas vitae sapien
-                                                    turpis ultrice auctor congue varius magnis
-                                                </p>
+                                                <p>{t("check2")}</p>
                                             </div>
                                         </div>
-                                        {/* CONTENT BOX #3 */}
                                         <div className="cbox-1 ico-15">
                                             <div className="ico-wrap color--theme">
                                                 <div className="cbox-1-ico"><span className="flaticon-check" /></div>
                                             </div>
                                             <div className="cbox-1-txt">
-                                                <p className="mb-0">Volute turpis dolores and sagittis congue</p>
+                                                <p className="mb-0">{t("check3")}</p>
                                             </div>
                                         </div>
                                     </div>
@@ -70,54 +62,29 @@ export default function Home() {
                             </div>	{/* END SECTION CONTENT (ROW) */}
                         </div>	   {/* End container */}
                     </section>
+                    <hr className="divider" />
                     <MermsFeaturesSectionTwo />
-
+                    <hr className="divider" />
                     <MermsFeaturesSection1 />
-
+                    <hr className="divider" />
                     <MermsFeatureSection4 />
-
+                    <hr className="divider" />
                     <MermsAboutFeautures />
-
-                    <section className="pt-100 ws-wrapper content-section">
-                        <div className="container">
-                            <div className="bc-1-wrapper bg--white-400 bg--fixed r-16">
-                                <div className="section-overlay">
-                                    <div className="row d-flex align-items-center">
-                                        {/* TEXT BLOCK */}
-                                        <div className="col-md-6 order-last order-md-2">
-                                            <div className="txt-block left-column wow fadeInRight">
-                                                {/* Section ID */}
-                                                <span className="section-id">Enhance Engagement</span>
-                                                {/* Title */}
-                                                <h2 className="s-46 w-700">Automate your way to success</h2>
-                                                {/* Text */}
-                                                <p>Sodales tempor sapien quaerat congue eget ipsum laoreet turpis neque auctor
-                                                    vitae eros dolor luctus placerat magna ligula cursus and purus pretium
-                                                </p>
-                                                {/* Small Title */}
-                                                <h5 className="s-24 w-700 h5-title">The smarter way to work</h5>
-                                                {/* Text */}
-                                                <p className="mb-0">Sapien tempor sodales quaerat ipsum undo congue laoreet turpis neque
-                                                    auctor turpis vitae dolor luctus placerat magna and ligula cursus purus vitae
-                                                </p>
-                                            </div>
-                                        </div>	{/* END TEXT BLOCK */}
-                                        {/* IMAGE BLOCK */}
-                                        <div className="col-md-6 order-first order-md-2">
-                                            <div className="img-block right-column wow fadeInLeft">
-                                                <img className="img-fluid" src="/images/img-05.png" alt="content-image" />
-                                            </div>
-                                        </div>
-                                    </div>   {/* End row */}
-                                </div>    {/* End section overlay */}
-                            </div>    {/* End content wrapper */}
-                        </div>     {/* End container */}
-                    </section>	{/* END BOX CONTENT */}
-
+                    <hr className="divider" />
+                    <MermsEngageBox />
                     <hr className="divider" />
                     <MermsBanner />
                 </div>
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/help-center.js

@@ -1,14 +1,73 @@
 import Layout from "../components/layout/Layout"
 import Link from "next/link"
-import { useState } from "react"
+import {useState} from "react"
+
+const tabs = [
+    {name: 'Getting Started', icon: 'flaticon-mechanics'},
+    {name: 'My Account', icon: 'flaticon-suit'},
+    {name: 'Subscriptions', icon: 'flaticon-price-label'},
+    {name: 'Other Questions', icon: 'flaticon-screenplay'}
+]
+
+const tabContents = {
+    'Getting Started': [
+        {
+            title: 'What is MERMS, and how does it work?',
+            desc: `MERMS operates on a cloud-based model, allowing users to access the software from anywhere, at any time. By leveraging advanced technology, MERMS streamlines processes, enhances collaboration, and provides real-time data analytics. This system automates routine tasks, enabling teams to focus on more strategic initiatives.`
+        },
+        {
+            title: 'What can I do with MERMS?',
+            desc: `With MERMS, users can manage projects, track budgets, oversee inventory, and collaborate across different departments. Whether you're in finance, marketing, or operations, MERMS offers customizable solutions to cater to your specific needs. Not only can you streamline processes, but you can also improve decision-making with data-driven insights.`
+        },
+        {
+            title: 'Which Product and Tools does MERMS support?',
+            desc: `MERMS supports a wide array of tools, including CRM systems, project management software, and financial applications. It integrates seamlessly with popular platforms like Slack, Microsoft Teams, and Google Workspace, allowing for a comprehensive management experience without losing functionality.`
+        },
+        {
+            title: 'Can I Automate with MERMS?',
+            desc: `Yes! MERMS offers robust automation capabilities. Users can set up automated workflows for routine tasks, such as reporting, notifications, and data entry, minimizing human error and saving valuable time. This feature enhances productivity, making it easier for organizations to scale and adapt to changing needs.`
+        }
+    ],
+
+    'My Account': [
+        {title: 'How do I reset my account password?', desc: `You can reset your password by clicking the “Forgot Password” link on the login page. Follow the instructions sent to your registered email to create a new password.`},
+        {title: 'How can I update my email address or personal information?', desc: `Log in to your account, navigate to the Account Settings or Profile section, and update your information as needed. Remember to save your changes before exiting.`},
+        {title: 'What should I do if I suspect unauthorized access to my account?', desc: `Immediately change your password and review your recent account activity. Contact support to report the issue and secure your account.`},
+        {title: 'How do I delete or deactivate my account?', desc: `Go to the Account Settings or Privacy section and look for the option to delete or deactivate your account. Follow the prompts to complete the process. If you need assistance, contact customer support.`},
+        {title: 'How can I view or download my account activity and history?', desc: `Most platforms have an Account Activity or History tab within your account dashboard. You can view or download your activity details from there. If you need a comprehensive report, contact support.`},
+    ],
+
+    'Subscriptions': [
+        {title: 'What subscription plans are available?', desc: `We offer a variety of subscription plans designed to meet diverse needs, including monthly, annual, and enterprise options. Comprehensive details regarding each plan are available on our Pricing page.`},
+        {title: 'How can I upgrade or downgrade my subscription?', desc: `You may upgrade or downgrade your subscription at any time through your Account Settings. Any changes will be applied at the beginning of your next billing cycle.`},
+        {title: 'What is your subscription refund policy?', desc: `Refunds are provided in accordance with our Refund Policy. For eligibility requirements and detailed instructions on submitting a refund request, please consult our policy page.`},
+        {title: 'How do I cancel my subscription?', desc: `To cancel your subscription, please log in to your account, navigate to the Subscription section, and follow the provided cancellation prompts. A confirmation email will be sent to you upon successful completion of the process.`},
+        {title: 'Will I lose access to features immediately after canceling my subscription?', desc: `No, you will continue to have access to all subscription features until the conclusion of your current billing period. Afterward, your account will revert to the free or basic version.`},
+    ],
+
+    'Other Questions': [
+        {
+            title: 'Is my personal information secure on your website?',
+            desc: `Yes, we employ industry-standard encryption and advanced security protocols to ensure that your personal information remains protected at all times.`
+        },
+        {title: 'How do I contact customer support?', desc: `You may contact our customer support team through the Contact Us page, by email, or via live chat, according to your preference.`},
+        {title: 'Are there any fees for using the website’s services?', desc: `Our basic services are complimentary. However, certain premium features may require a subscription or a one-time payment. For more information, please refer to our Pricing page.`},
+        {title: 'What browsers are supported by your website?', desc: `Our website is compatible with the latest versions of major web browsers, including Chrome, Firefox, Safari, and Edge.`},
+        {title: 'Can I access the website on my mobile device?', desc: `Yes, our website is fully responsive and optimized for seamless use on smartphones and tablets.`},
+    ]
+
+}
+
 export default function Home() {
-    const [activeIndex, setActiveIndex] = useState(1)
-    const handleOnClick = (index) => {
-        setActiveIndex(index)
+    const [activeTab, setActiveTab] = useState(tabs[0])
+    const handleOnClick = (tab) => {
+        setActiveTab(tab)
     }
+
+
     const [isActive, setIsActive] = useState({
         status: false,
-        key: 1,
+        key: 0,
     })
 
     const handleToggle = (key) => {
@@ -43,510 +102,59 @@ export default function Home() {
                                     <div className="tabs-nav tabs--theme clearfix">
                                         <ul className="tabs-1">
                                             {/* TAB-1 LINK */}
-                                            <li className={activeIndex === 1 ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"} onClick={() => handleOnClick(1)}>
-                                                <div className="tab-link-ico"><span className="flaticon-mechanics" /></div>
-                                                <p>Getting Started</p>
-                                            </li>
-                                            {/* TAB-2 LINK */}
-                                            <li className={activeIndex === 2 ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"} onClick={() => handleOnClick(2)}>
-                                                <div className="tab-link-ico"><span className="flaticon-suit" /></div>
-                                                <p>My Account</p>
-                                            </li>
-                                            {/* TAB-3 LINK */}
-                                            <li className={activeIndex === 3 ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"} onClick={() => handleOnClick(3)}>
-                                                <div className="tab-link-ico"><span className="flaticon-price-label" /></div>
-                                                <p>Pricing Plans</p>
-                                            </li>
-                                            {/* TAB-4 LINK */}
-                                            <li className={activeIndex === 4 ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"} onClick={() => handleOnClick(4)}>
-                                                <div className="tab-link-ico"><span className="flaticon-screenplay" /></div>
-                                                <p>Other Questions</p>
-                                            </li>
+                                            {tabs.map((tab, index) => (
+                                                <li key={index}
+                                                    className={activeTab?.name === tab?.name ? "tab-link ico-45 r-16 current" : "tab-link ico-45 r-16"}
+                                                    onClick={() => handleOnClick(tab)}>
+                                                    <div className="tab-link-ico"><span className={tab.icon}/></div>
+                                                    <p>{tab.name}</p>
+                                                </li>
+                                            ))}
                                         </ul>
                                     </div>
                                 </div>
-                            </div>	{/* END TABS NAVIGATION */}
+                            </div>
+                            {/* END TABS NAVIGATION */}
                             {/* TABS CONTENT */}
                             <div className="tabs-content">
                                 <div className="row justify-content-center">
                                     <div className="col-xl-10">
-                                        {/* TAB-1 CONTENT */}
-                                        <div id="tab-1" className={activeIndex === 1 ? "tab-content current" : "tab-content "}>
-                                            <div className="accordion-wrapper">
-                                                <ul className="accordion">
-                                                    {/* QUESTION #1 */}
-                                                    <li className={isActive.key == 1 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(1)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">What is MERMS and how does it work?</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>Sagittis congue augue egestas volutpat egestas magna suscipit
-                                                                egestas magna ipsum vitae purus congue efficitur and ipsum primis
-                                                                in cubilia laoreet augue egestas luctus donec and curabitur dapibus
-                                                            </p>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #1 */}
-                                                    {/* QUESTION #2 */}
-                                                    <li  className={isActive.key == 2 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(2)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">What's inside the package?</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
-                                                                tempor magna undo ipsum vitae purus and efficitur ipsum primis in
-                                                                cubilia laoreet tempor gravida luctus neque purus ipsum neque
-                                                            </p>
-                                                            {/* Text */}
-                                                            <p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris
-                                                                lectus laoreet and gestas neque vitae auctor dolor luctus placerat
-                                                                a magna cursus congue magna mpedit ligula undo congue. Maecenas
-                                                                agravida augue porttitor nunc, quis vehicula magna luctus tempor.
-                                                                Quisque vel laoreet turpis. Viverra augue, a augue tempor, dictum
-                                                                tempor diam. Sed pulvinar a consectetur nibh, imperdiet varius viverra
-                                                            </p>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #2 */}
-                                                    {/* QUESTION #3 */}
-                                                    <li  className={isActive.key == 3 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(3)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">General settings</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>An augue cubilia laoreet magna suscipit egestas magna ipsum purus
-                                                                ipsum a primis an augue ultrice ligula egestas suscipit lectus gestas
-                                                                integer congue a lectus porta phasellus neque blandit tristique
-                                                            </p>
-                                                            {/* Text */}
-                                                            <p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
-                                                                and magna and vehicula
-                                                            </p>
-                                                            {/* Text */}
-                                                            <p>Sagittis congue augue egestas volutpat egestas magna suscipit lipsum
-                                                                egestas magna ipsum vitae a purus ipsum congue efficitur ipsum primis
-                                                                in cubilia laoreet augue egestas luctus donec and curabitur
-                                                            </p>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #3 */}
-                                                    {/* QUESTION #4 */}
-                                                    <li  className={isActive.key == 4 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(4)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">Which languages does MERMS support?</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
-                                                                ipsum primis undo augue ultrice ligula egestas suscipit lectus gestas
-                                                                integer congue a lectus porta tristique phasellus neque a blandit and
-                                                                tristique justo aliquam justo suscipit congue augue egestas volutpat
-                                                                egestas magna sem congue
-                                                            </p>
-                                                            {/* Text */}
-                                                            <p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
-                                                                ipsum primis and augue efficitur ligula egestas suscipit lectus gestas
-                                                                integer congue a lectus porta phasellus neque
-                                                            </p>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #4 */}
-                                                    {/* QUESTION #5 */}
-                                                    <li className={isActive.key == 5 ? "accordion-item acc-last-item is-active" : "accordion-item acc-last-item"} onClick={() => handleToggle(5)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">Automate testing with API</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 5 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <ul className="simple-list">
-                                                                <li className="list-item">
-                                                                    <p>Curabitur ac dapibus libero quisque eu congue tristique egestas
-                                                                        phasellus blandit tristique justo aliquam. Aliquam vitae molestie
-                                                                        quisque sapien justo, aliquet aliquam molestie sed purus undo
-                                                                        venenatis tempor gravida eget lacinia. Augue aliquam a suscipit
-                                                                        tincidunt tincidunt massa
-                                                                    </p>
-                                                                </li>
-                                                                <li className="list-item">
-                                                                    <p>Aliquam vitae molestie nunc. Quisque sapien justo, aliquet non
-                                                                        molestie sed purus, venenatis
-                                                                    </p>
-                                                                </li>
-                                                                <li className="list-item">
-                                                                    <p>Sagittis congue augue egestas volutpat egestas magna suscipit
-                                                                        egestas magna ipsum vitae an efficitur purus undo ipsum primis
-                                                                        in cubilia laoreet augue egestas luctus donec curabitur dapibus
-                                                                        libero
-                                                                    </p>
-                                                                </li>
-                                                            </ul>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #5 */}
-                                                </ul>
+                                        {/* CONTENT */}
+                                        {tabs.map((tab, index) => (
+                                            <div key={index} id="tab-1"
+                                                 className={activeTab?.name === tab?.name ? "tab-content current" : "tab-content "}>
+                                                <div className="accordion-wrapper">
+                                                    <ul className="accordion">
+                                                        {tabContents[activeTab.name]?.map((content, index) => (
+                                                            <li key={index}
+                                                                className={isActive.key == index ? "accordion-item is-active" : "accordion-item"}
+                                                                onClick={() => handleToggle(index)}>
+                                                                {/* Question */}
+                                                                <div className="accordion-thumb">
+                                                                    <h5 className="s-22 w-700">{content?.title}</h5>
+                                                                </div>
+                                                                {/* Answer */}
+                                                                <div className="accordion-panel color--grey"
+                                                                     style={{display: `${isActive.key == index ? "block" : "none"}`}}>
+                                                                    {/* Text */}
+                                                                    <p>{content?.desc}</p>
+                                                                </div>
+                                                            </li>
+                                                        ))}
+                                                    </ul>
+                                                </div>
                                             </div>
-                                        </div>	{/* END TAB-1 CONTENT */}
-                                        {/* TAB-2 CONTENT */}
-                                        <div id="tab-2"  className={activeIndex === 2 ? "tab-content current" : "tab-content "}>
-                                            <div className="accordion-wrapper">
-                                                <ul className="accordion">
-                                                    {/* QUESTION #1 */}
-                                                    <li className={isActive.key == 6 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(6)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">Sign up and manage your account</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 6 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <ol className="digit-list">
-                                                                <li className="list-item">
-                                                                    <p>Curabitur ac dapibus libero eu congue tristique neque</p>
-                                                                </li>
-                                                                <li className="list-item">
-                                                                    <p>Sagittis congue augue egestas volutpat egestas</p>
-                                                                </li>
-                                                                <li className="list-item">
-                                                                    <p>An aliquam justo suscipit congue augue</p>
-                                                                </li>
-                                                                <li className="list-item">
-                                                                    <p>Gestas integer congue a lectus porta</p>
-                                                                </li>
-                                                            </ol>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #1 */}
-                                                    {/* QUESTION #2 */}
-                                                    <li  className={isActive.key == 7 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(7)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">Manage account settings</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 7 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris lectus
-                                                                laoreet gestas neque and vitae undo auctor dolor luctus placerat a magna
-                                                                cursus congue magna mpedit ligula congue maecenas gravida augue porttitor
-                                                                nunc, quis vehicula magna luctus tempor. Quisque vel laoreet turpis. Viverra
-                                                                augue, a augue tempor, dictum tempor diam. Sed pulvinar a consectetur nibh,
-                                                                imperdiet varius viverra
-                                                            </p>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #2 */}
-                                                    {/* QUESTION #3 */}
-                                                    <li  className={isActive.key == 8 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(8)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">Change language or location settings</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 8 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris lectus
-                                                                laoreet gestas neque and vitae undo auctor dolor luctus placerat a magna
-                                                                cursus congue magna mpedit ligula congue maecenas gravida augue porttitor
-                                                                nunc, quis vehicula magna luctus tempor. Quisque vel laoreet turpis. Viverra
-                                                                augue, a augue tempor, dictum tempor diam. Sed pulvinar a consectetur nibh,
-                                                                imperdiet varius viverra
-                                                            </p>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #3 */}
-                                                    {/* QUESTION #4 */}
-                                                    <li  className={isActive.key == 9 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(9)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">Troubleshoot account issues</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 9 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
-                                                                ipsum primis an augue ultrice ligula egestas suscipit lectus gestas
-                                                                integer congue a lectus porta tristique phasellus neque a blandit and
-                                                                tristique justo aliquam justo suscipit congue augue egestas volutpat
-                                                                egestas magna sem congue
-                                                            </p>
-                                                            {/* Text */}
-                                                            <p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
-                                                                ipsum primis and augue efficitur ligula egestas suscipit lectus gestas
-                                                                integer congue a lectus porta phasellus neque
-                                                            </p>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #4 */}
-                                                    {/* QUESTION #5 */}
-                                                    <li className={isActive.key == 10 ? "accordion-item acc-last-item is-active" : "accordion-item acc-last-item"} onClick={() => handleToggle(10)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">Manage accessibility settings</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 10 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris
-                                                                lectus laoreet gestas neque and vitae undo auctor dolor luctus placerat
-                                                                a magna cursus congue magna mpedit ligula congue maecenas gravida augue
-                                                                porttitor nunc, quis vehicula magna luctus tempor. Quisque vel laoreet
-                                                                turpis. Viverra augue, a augue tempor, dictum tempor diam. Sed pulvinar
-                                                                a consectetur nibh, imperdiet varius viverra
-                                                            </p>
-                                                            {/* Text */}
-                                                            <p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
-                                                                and magna ipsum vitae purus and efficitur ipsum primis in cubilia laoreet
-                                                                tempor gravida
-                                                            </p>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #5 */}
-                                                </ul>
-                                            </div>
-                                        </div>	{/* END TAB-2 CONTENT */}
-                                        {/* TAB-3 CONTENT */}
-                                        <div id="tab-3"  className={activeIndex === 3 ? "tab-content current" : "tab-content "}>
-                                            <div className="accordion-wrapper">
-                                                <ul className="accordion">
-                                                    {/* QUESTION #1 */}
-                                                    <li className={isActive.key == 11 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(11)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">How much does MERMS cost?</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 11 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
-                                                                ipsum primis undo augue ultrice ligula egestas suscipit lectus gestas
-                                                                integer congue a lectus porta neque blandit tristique
-                                                            </p>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #1 */}
-                                                    {/* QUESTION #2 */}
-                                                    <li  className={isActive.key == 12 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(12)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">I didn't receive the license key after purchased</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 12 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <ul className="simple-list">
-                                                                <li className="list-item">
-                                                                    <p>Curabitur ac dapibus libero. Quisque eu congue tristique neque.
-                                                                        Phasellus blandit tristique aliquam justo undo. Aliquam vitae molestie nunc. Quisque sapien justo, aliquet non molestie purus
-                                                                        tempor
-                                                                    </p>
-                                                                </li>
-                                                                <li className="list-item">
-                                                                    <p>Sagittis congue augue egestas volutpat egestas magna suscipit
-                                                                        egestas magna ipsum vitae purus undo efficitur ipsum primis in
-                                                                        cubilia laoreet augue egestas luctus donec curabitur dapibus libero
-                                                                    </p>
-                                                                </li>
-                                                            </ul>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #2 */}
-                                                    {/* QUESTION #3 */}
-                                                    <li  className={isActive.key == 13 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(13)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">Do you offer discounts for annual plans?</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 13 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <ul className="simple-list">
-                                                                <li className="list-item">
-                                                                    <p>Curabitur ac dapibus libero. Quisque eu congue justo undo
-                                                                        tristique neque phasellus and blandit tristique aliquam. Aliquam
-                                                                        vitae molestie nunc. Quisque sapien justo, aliquet non molestie
-                                                                        purus tempor
-                                                                    </p>
-                                                                </li>
-                                                                <li className="list-item">
-                                                                    <p>Sagittis congue augue egestas volutpat egestas magna suscipit
-                                                                        egestas magna ipsum vitae purus undo efficitur ipsum primis in
-                                                                        cubilia laoreet augue egestas luctus donec curabitur dapibus libero
-                                                                    </p>
-                                                                </li>
-                                                            </ul>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #3 */}
-                                                    {/* QUESTION #4 */}
-                                                    <li  className={isActive.key == 14 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(14)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">How safe is my data?</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 14 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>An augue cubilia laoreet and magna suscipit egestas magna an ipsum
-                                                                purus ipsum primis an augue ultrice ligula egestas suscipit lectus
-                                                                gestas integer congue a lectus porta tristique phasellus neque a blandit
-                                                                undo tristique justo aliquam justo suscipit congue augue egestas volutpat
-                                                                egestas magna sem
-                                                            </p>
-                                                            {/* Text */}
-                                                            <p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
-                                                                ipsum primis and augue efficitur ligula egestas suscipit lectus gestas
-                                                                integer congue a lectus porta phasellus neque
-                                                            </p>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #4 */}
-                                                    {/* QUESTION #5 */}
-                                                    <li className={isActive.key == 15 ? "accordion-item acc-last-item is-active" : "accordion-item acc-last-item"} onClick={() => handleToggle(15)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">How to request a refund?</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 15 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <ul className="simple-list">
-                                                                <li className="list-item">
-                                                                    <p>Curabitur ac dapibus libero. Quisque eu congue tristique</p>
-                                                                </li>
-                                                                <li className="list-item">
-                                                                    <p>Congue tristique neque phasellus blandit tristique justo
-                                                                        undo aliquam. Aliquam vitae molestie quisque sapien justo,
-                                                                        aliquet non molestie purus tempor
-                                                                    </p>
-                                                                </li>
-                                                                <li className="list-item">
-                                                                    <p>Sagittis congue augue egestas volutpat egestas magna suscipit
-                                                                        egestas magna ipsum
-                                                                    </p>
-                                                                </li>
-                                                            </ul>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #5 */}
-                                                </ul>
-                                            </div>
-                                        </div>	{/* END TAB-3 CONTENT */}
-                                        {/* TAB-4 CONTENT */}
-                                        <div id="tab-4"  className={activeIndex === 4 ? "tab-content current" : "tab-content "}>
-                                            <div className="accordion-wrapper">
-                                                <ul className="accordion">
-                                                    {/* QUESTION #1 */}
-                                                    <li className={isActive.key == 16 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(16)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">How do I get the error log?</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 16 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
-                                                                and magna ipsum vitae
-                                                            </p>
-                                                            {/* Text */}
-                                                            <p>Sagittis congue augue egestas volutpat egestas and magna suscipit an
-                                                                egestas magna ipsum vitae purus congue efficitur ipsum primis in cubilia
-                                                                laoreet augue egestas luctus donec and curabitur dapibus
-                                                            </p>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #1 */}
-                                                    {/* QUESTION #2 */}
-                                                    <li  className={isActive.key == 17 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(17)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">I forgot my folder password, what should I do?</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 17 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
-                                                                magna ipsum vitae purus congue efficitur ipsum primis in cubilia laoreet
-                                                                augue egestas luctus donec and curabitur dapibus
-                                                            </p>
-                                                            {/* Text */}
-                                                            <ol className="digit-list">
-                                                                <li className="list-item">
-                                                                    <p>Gestas integer congue a lectus porta</p>
-                                                                </li>
-                                                                <li className="list-item">
-                                                                    <p>An aliquam justo suscipit congue augue</p>
-                                                                </li>
-                                                                <li className="list-item">
-                                                                    <p>Sagittis congue augue egestas volutpat egestas</p>
-                                                                </li>
-                                                            </ol>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #2 */}
-                                                    {/* QUESTION #3 */}
-                                                    <li  className={isActive.key == 18 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(18)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">Limitations of folder password protection</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 18 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris
-                                                                lectus laoreet gestas neque and vitae undo auctor dolor luctus placerat
-                                                                a magna cursus congue magna mpedit ligula congue maecenas gravida augue
-                                                                porttitor nunc, quis vehicula magna luctus tempor. Quisque vel laoreet
-                                                                turpis. Viverra augue, a augue tempor, dictum tempor diam. Sed pulvinar
-                                                                a consectetur nibh, imperdiet varius viverra
-                                                            </p>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #3 */}
-                                                    {/* QUESTION #4 */}
-                                                    <li  className={isActive.key == 19 ? "accordion-item is-active" : "accordion-item"} onClick={() => handleToggle(19)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">Import existing library</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 19 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>Sapien egestas, congue gestas posuere cubilia congue ipsum mauris
-                                                                lectus laoreet gestas neque and vitae undo auctor dolor luctus placerat
-                                                                a magna cursus congue magna mpedit ligula congue maecenas gravida augue
-                                                                porttitor nunc, quis vehicula magna luctus tempor. Quisque vel laoreet
-                                                                turpis. Viverra augue, a augue tempor, dictum tempor diam. Sed pulvinar
-                                                                a consectetur nibh, imperdiet varius viverra
-                                                            </p>
-                                                            {/* Text */}
-                                                            <p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
-                                                                and magna ipsum vitae purus and efficitur ipsum primis in cubilia laoreet
-                                                                tempor gravida
-                                                            </p>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #4 */}
-                                                    {/* QUESTION #5 */}
-                                                    <li className={isActive.key == 20 ? "accordion-item acc-last-item is-active" : "accordion-item acc-last-item"} onClick={() => handleToggle(20)}>
-                                                        {/* Question */}
-                                                        <div className="accordion-thumb">
-                                                            <h5 className="s-22 w-700">I lost my license. Can you send it to me?</h5>
-                                                        </div>
-                                                        {/* Answer */}
-                                                        <div className="accordion-panel color--grey" style={{ display: `${isActive.key == 20 ? "block" : "none"}` }}>
-                                                            {/* Text */}
-                                                            <p>An augue cubilia laoreet and magna suscipit egestas magna ipsum purus
-                                                                ipsum primis undo augue ultrice ligula egestas suscipit lectus gestas
-                                                                integer congue phasellus neque blandit tristique
-                                                            </p>
-                                                            {/* Text */}
-                                                            <p>Sagittis congue augue egestas volutpat egestas magna suscipit egestas
-                                                                and magna ipsum vitae
-                                                            </p>
-                                                        </div>
-                                                    </li>	{/* END QUESTION #5 */}
-                                                </ul>
-                                            </div>
-                                        </div>	{/* END TAB-4 CONTENT */}
+                                        ))}
+                                        {/* END OF CONTENT */}
                                     </div>
-                                </div> {/* End row */}
-                            </div>	{/* END TABS CONTENT */}
-                        </div>     {/* End container */}
-                    </section>	{/* END  FAQs-4 */}
+                                </div>
+                                {/* End row */}
+                            </div>
+                            {/* END TABS CONTENT */}
+                        </div>
+                        {/* End container */}
+                    </section>
+                    {/* END  FAQs-4 */}
                     {/* BANNER-9
 			============================================= */}
                     <section id="banner-9" className="bg--02 py-70 x-border banner-section">
@@ -560,24 +168,38 @@ export default function Home() {
                                             {/* Title */}
                                             <h3 className="s-40 w-700">Still need help?</h3>
                                             {/* Text */}
-                                            <p className="p-lg">Don't hesitate to contact us about any question you might be interested in</p>
+                                            <p className="p-lg">Don't hesitate to contact us about any question you
+                                                might be interested in</p>
                                             {/* Button */}
-                                            <Link href="/contacts" className="btn r-04 btn--theme hover--theme">Ask your question here</Link>
+                                            <Link href="/contacts" className="btn r-04 btn--theme hover--theme">Ask your
+                                                question here</Link>
                                         </div>
                                     </div>
                                     {/* BANNER-9 IMAGE */}
                                     <div className="col-md-5 col-xl-5">
                                         <div className="banner-9-img text-end">
-                                            <img className="img-fluid" src="/images/help.png" alt="banner-image" />
+                                            <img className="img-fluid" src="/images/help.png" alt="banner-image"/>
                                         </div>
                                     </div>
-                                </div>     {/* End row */}
-                            </div>    {/* END BANNER-9 WRAPPER */}
-                        </div>     {/* End container */}
+                                </div>
+                                {/* End row */}
+                            </div>
+                            {/* END BANNER-9 WRAPPER */}
+                        </div>
+                        {/* End container */}
                     </section>
                 </div>
 
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/index.js

@@ -1,10 +1,8 @@
-import Link from "next/link"
 import Layout from "../components/layout/Layout"
 import MersmHero from "../components/sections/MersmHero";
 import MermsFeatures from "../components/sections/MermsFeatures";
 import MermsAbout from "../components/sections/MermsAbout";
 import MermsHowItWorks from "../components/sections/MermsHowItWorks";
-import MermsFeatures2 from "../components/sections/MermsFeatures2";
 import MermsBanner from "../components/sections/MermsBanner";
 
 export default function Home() {
@@ -12,15 +10,25 @@ export default function Home() {
     return (
         <>
             <Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark">
-                <MersmHero />
-                <hr className="divider" />
-                <MermsAbout />
-                <hr className="divider" />
-                <MermsFeatures />
-                <MermsHowItWorks />
-                {/*<MermsFeatures2 />*/}
-                <MermsBanner />
+                <MersmHero/>
+                <hr className="divider"/>
+                <MermsFeatures/>
+                <hr className="divider"/>
+                <MermsHowItWorks/>
+                <hr className="divider"/>
+                <MermsAbout/>
+                <hr className="divider"/>
+                <MermsBanner/>
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/integrations.js

@@ -520,4 +520,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/merms-blog.js

@@ -5,14 +5,17 @@ import Layout from "../components/layout/Layout"
 import Link from "next/link"
 import queryKeys from "../components/queryclientProvider/queryKeys";
 import MermsBlogFix from "../components/sections/MermsBlogFix";
+import { getMermsBlogs } from "../components/services/services";
 
 export default  function Home() {
 
     const {data, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.blog,
+        // queryFn: () => getMermsBlogs(),
+        staleTime: 0,
         queryFn: async () => {
             try {
-                const blog_url = 'https://blogdata.chiefsoft.net/mermsblogdata/mermsemr';
+                const blog_url = `${process.env.NEXT_PUBLIC_MERMS_WEBSITE_BASE_URL}/mermsblogdata/mermsemr`;
                 const res = await fetch(blog_url)
                 const data = await res.json()
                 return data
@@ -136,7 +139,7 @@ export default  function Home() {
                                             {/* END BLOG POST #1 */}
                                         </div>
                                     </div>	{/* END POSTS WRAPPER */}
-                                    <MermsBlogFix />
+                                    {/*<MermsBlogFix />*/}
                                 </>
                                 :
                                 <div className="">
@@ -161,4 +164,13 @@ export default  function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/merms-blogview_.js

@@ -156,4 +156,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/merms-updates.js

@@ -73,4 +73,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/pricing.js

@@ -455,4 +455,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/privacy.js

@@ -11,245 +11,98 @@ export default function Home() {
                             <div className="col-xl-10">
                                 {/* INNER PAGE TITLE */}
                                 <div className="inner-page-title">
-                                    <h2 className="s-52 w-700">Privacy Policy</h2>
-                                    <p className="p-lg">This policy is effective as of 11th November 2022</p>
+                                    <h2 className="s-52 w-700">Privacy Policy for MERMS</h2>
+                                    <p className="p-lg"><strong>Effective Date:</strong> 23rd October, 2024</p>
                                 </div>
                                 {/* TEXT BLOCK */}
                                 <div className="txt-block legal-info">
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>1.</span> Introduction</h4>
-                                    {/* Text */}
-                                    <p>Sagittis congue augue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce lacinia placerat and nulla justo molestie blandit justo
-                                        diam aliquet tortor molestie sagittis lacinia undo and mullam molestie diam luctus donec
-                                        bibendum aliquet massa elementum. Libero quisque lacus and ligula massa lorem.
+                                    <p>
+                                        Thank you for choosing MERMS . Your privacy is important to us. This Privacy Policy outlines how we collect, use, disclose, and protect your information when you use our software as a service (SaaS) offerings.
                                     </p>
-                                    {/* Text */}
-                                    <p>Sagittis congue augue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce an aliquam nulla lacinia justo molestie blandit justo
-                                        diam aliquet tortor molestie non sagittis lacinia
-                                    </p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>2.</span> Personal Information We Collect</h4>
-                                    {/* Small Title */}
-                                    <h5 className="s-24 w-700"><span>2.1.</span> Information you provide to us</h5>
-                                    {/* Text */}
-                                    <p>Congue augue sagittis egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce lorem nulla an aliquam acinia justo molestie blandit
-                                        justo diam an aliquet tortor sagittis lacinia molestie diam egestas
-                                    </p>
-                                    {/* List */}
+
+                                    {/* Information We Collect */}
+                                    <h4 className="s-30 w-700"><span>1.</span> Information We Collect</h4>
+                                    <p>We may collect the following types of information:</p>
                                     <ul className="simple-list">
                                         <li className="list-item">
-                                            <p>Quaerat sodales sapien undo velna purus euismod purus velna blandit vitae auctor
-                                                and congue magna tempor sapien gravida laoreet turpis urna augue, viverra a augue
-                                                eget dictum tempor
+                                            <p><span>Personal Information:</span> This includes any data that identifies you, such as your name, email address, phone number, billing information, and any other personal details you provide when you register or interact with our services.
                                             </p>
                                         </li>
                                         <li className="list-item">
-                                            <p>Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien congue
-                                                and augue egestas
+                                            <p><span>Usage Data:</span> We automatically collect information about your interactions with our services, including your IP address, browser type, device information, and pages visited.
                                             </p>
                                         </li>
                                         <li className="list-item">
-                                            <p>Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien congue
-                                                augue egestas sagittis massa lorem fusce cursus fusce nulla vitae massa placerat
-                                                vulputate purus
-                                            </p>
-                                        </li>
-                                        <li className="list-item">
-                                            <p>Sapien sodales quaerat undo velna purus euismod purus velna blandit vitae auctor
-                                                and congue magna tempor sapien gravida laoreet turpis urna augue, viverra a augue
-                                                eget dictum pulvinar
+                                            <p><span>Cookies and Tracking Technologies:</span> We use cookies and similar technologies to enhance your experience and analyze how our services are used. You can manage your cookie preferences through your browser settings.
                                             </p>
                                         </li>
                                     </ul>
-                                    {/* Small Title */}
-                                    <h5 className="s-24 w-700"><span>2.2.</span> Automatic data collection</h5>
-                                    {/* Text */}
-                                    <p>Congue sagittis augue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce aliquam
-                                    </p>
-                                    {/* Text */}
-                                    <p>Sagittis congue augue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce an aliquam nulla lacinia justo molestie blandit justo
-                                        diam aliquet tortor molestie non sagittis lacinia
-                                    </p>
-                                    {/* Small Title */}
-                                    <h5 className="s-24 w-700"><span>2.3.</span> User comments and content</h5>
-                                    {/* Text */}
-                                    <p>Integer congue sagittis augue egestas  velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque diam augue fusce sapien nulla a primis lacinia ipsum a molestie blandit
-                                        and justo an aliquet eget molestie sagittis at quaerat sodales
-                                    </p>
-                                    {/* List */}
+
+                                    {/* How We Use Your Information */}
+                                    <h4 className="s-30 w-700"><span>2.</span> How We Use Your Information</h4>
+                                    <p>We use the information we collect for various purposes, including:</p>
                                     <ul className="simple-list">
                                         <li className="list-item">
-                                            <p>Quaerat sodales sapien undo velna purus euismod purus velna blandit vitae auctor
-                                                and congue magna tempor sapien gravida laoreet turpis urna augue, viverra a augue
-                                                eget dictum tempor
+                                            <p>To provide and maintain our services.</p>
+                                        </li>
+                                        <li className="list-item">
+                                            <p>To process transactions and send you related information.</p>
+                                        </li>
+                                        <li className="list-item">
+                                            <p>To improve our services, understand user behavior, and enhance user experience.</p>
+                                        </li>
+                                        <li className="list-item">
+                                            <p>To communicate with you, including sending updates, security alerts, and support messages.</p>
+                                        </li>
+                                        <li className="list-item">
+                                            <p>To comply with legal obligations and protect our rights.</p>
+                                        </li>
+                                    </ul>
+
+                                    {/* Information Sharing and Disclosure */}
+                                    <h4 className="s-30 w-700"><span>3.</span> Information Sharing and Disclosure</h4>
+                                    <p>
+                                        We do not sell your personal information. We may share your information in the following circumstances:
+                                    </p>
+                                    <ul className="simple-list">
+                                        <li className="list-item">
+                                            <p><span>Service Providers:</span> We may employ third-party companies to facilitate our services or to provide services on our behalf, such as payment processing, data analysis, or email communication.
                                             </p>
                                         </li>
                                         <li className="list-item">
-                                            <p>Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien congue
-                                                and augue egestas
+                                            <p><span>Legal Requirements:</span> We may disclose your information if required to do so by law or in response to valid requests by public authorities.
+                                            </p>
+                                        </li>
+                                        <li className="list-item">
+                                            <p><span>Business Transfers:</span> In the event of a merger, acquisition, or sale of all or a portion of our assets, your information may be transferred as part of that business transaction.
                                             </p>
                                         </li>
                                     </ul>
-                                    {/* Small Title */}
-                                    <h5 className="s-24 w-700"><span>2.4.</span> Information from other sources</h5>
-                                    {/* Text */}
-                                    <p>Sagittis congue augue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce lacinia placerat and nulla justo molestie blandit justo
-                                        diam aliquet tortor molestie sagittis lacinia undo and mullam molestie diam luctus donec
-                                        bibendum aliquet massa elementum. Libero quisque lacus and ligula massa lorem.
+
+                                    
+                                    {/* Data Security */}
+                                    <h4 className="s-30 w-700"><span>4.</span> Data Security</h4>
+                                    <p>
+                                        We take the security of your information seriously and implement reasonable technical and organizational measures to protect it from unauthorized access, loss, or misuse. However, please be aware that no method of transmission over the internet or method of electronic storage is 100% secure.
                                     </p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>3.</span> Types of Information</h4>
-                                    {/* Text */}
-                                    <p>Integer congue sagittis augue egestas  velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque diam augue fusce sapien nulla a primis lacinia ipsum a molestie blandit
-                                        and justo an aliquet eget molestie sagittis at quaerat sodales
+
+                                    {/* Your Rights */}
+                                    <h4 className="s-30 w-700"><span>5.</span> Your Rights</h4>
+                                    <p>
+                                        Depending on your location, you may have certain rights regarding your personal information, including the right to access, correct, delete, or restrict its processing. You can exercise these rights by contacting us at support@mermsemr.com.
                                     </p>
-                                    {/* Text */}
-                                    <p>Aliqum mullam tincidunt a sapien gravida and diam donec porta.</p>
-                                    {/* Text */}
-                                    <p>Sagittis congue augue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce lacinia placerat and nulla justo molestie blandit justo
-                                        diam aliquet tortor molestie sagittis lacinia undo and mullam molestie diam luctus donec
-                                        bibendum aliquet massa elementum. Libero quisque lacus and ligula massa lorem.
-                                    </p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>4.</span> How We Use Personal Information</h4>
-                                    {/* Text */}
-                                    <p>Congue augue sagittis egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce lorem nulla an aliquam lacinia justo molestie blandit
-                                        justo diam an aliquet tortor sagittis lacinia molestie diam egestas
-                                    </p>
-                                    {/* Text */}
-                                    <p>Sagittis augue congue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque aliquam fusce blandit
-                                    </p>
-                                    {/* Small Title */}
-                                    <h5 className="s-24 w-700"><span>4.1.</span> In mails and contact forms</h5>
-                                    {/* Text */}
-                                    <p>Integer congue sagittis augue egestas  velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque diam augue fusce sapien
-                                    </p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>5.</span> Price and Taxes</h4>
-                                    {/* List */}
-                                    <ul className="simple-list">
-                                        <li className="list-item">
-                                            <p>Quaerat sodales sapien undo velna purus euismod purus velna blandit vitae auctor
-                                                and congue magna tempor sapien gravida laoreet turpis urna augue, viverra a augue
-                                                eget tempor pulvinar
-                                            </p>
-                                        </li>
-                                        <li className="list-item">
-                                            <p>Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien congue
-                                                and augue egestas
-                                            </p>
-                                        </li>
-                                    </ul>
-                                    {/* Text */}
-                                    <p>Augue congue sagittis egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque donec and ipsum porta diam lorem sodales an aliquam lacinia justo
-                                        sapien congue aliquet and sodales a quaerat tortor lacinia egestas
-                                    </p>
-                                    {/* Small Title */}
-                                    <h4 className="s-30 w-700"><span>5.</span> Children's Privacy</h4>
-                                    {/* Text */}
-                                    <p>Integer congue sagittis augue egestas  velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque diam augue fusce sapien
-                                    </p>
-                                    {/* Text */}
-                                    <p>Sagittis augue congue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec and augue
-                                        luctus congue
-                                    </p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>6.</span> Data Shared with Third Parties</h4>
-                                    {/* Text */}
-                                    <p>Integer congue sagittis augue egestas  velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque diam augue fusce sapien nulla a primis lacinia ipsum a molestie blandit
-                                        and justo an aliquet eget molestie sagittis at quaerat sodales
-                                    </p>
-                                    {/* Text */}
-                                    <p>Aliqum mullam tincidunt a sapien gravida and diam donec porta.</p>
-                                    {/* Text */}
-                                    <p>Sagittis congue augue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce lacinia placerat and nulla justo molestie blandit justo
-                                        diam aliquet tortor molestie sagittis lacinia undo and mullam molestie diam luctus donec
-                                        bibendum aliquet massa elementum. Libero quisque lacus and ligula massa lorem.
-                                    </p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>7.</span> Security Measures</h4>
-                                    {/* Text */}
-                                    <p>Sagittis congue augue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce lacinia placerat and nulla justo molestie blandit justo
-                                        diam aliquet tortor molestie sagittis lacinia undo and mullam molestie diam luctus donec
-                                        bibendum aliquet massa elementum. Libero quisque lacus and ligula massa lorem fusce cursus
-                                        fusce nulla vitae massa placerat and mollis, sapien gravida aliquet ipsum ultrices aliquet
-                                        lorem diam purus undo vitae aliquam auris dapibus libero fusce blandit.
-                                    </p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>8.</span> Changes in the Privacy Policy</h4>
-                                    {/* Text */}
-                                    <p>Congue augue sagittis egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce lorem nulla an aliquam lacinia justo molestie blandit
-                                        justo diam an aliquet tortor sagittis lacinia molestie diam egestas
-                                    </p>
-                                    {/* Text */}
-                                    <p>Aliqum mullam tincidunt a sapien gravida and diam donec porta.</p>
-                                    {/* Text */}
-                                    <p>Sagittis augue congue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque aliquam fusce blandit
-                                    </p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>9.</span> How to Contact Us</h4>
-                                    {/* Text */}
-                                    <p>If you have any questions or suggestions about this Terms of Service, do not hesitate to
-                                        contact us at <Link href="mailto:yourdomain@mail.com" className="color--theme">hello@yourdomain.com</Link>
+
+                                    {/* Changes to This Privacy Policy */}
+                                    <h4 className="s-30 w-700"><span>6.</span> Changes to This Privacy Policy</h4>
+                                    <p>
+                                        We may update our Privacy Policy from time to time. We will notify you of any significant changes by posting the new Privacy Policy on our website and updating the effective date. Your continued use of our services after changes to the Privacy Policy will signify your acceptance of those changes.
                                     </p>
+
+                                    {/* Contact Us */}
+                                    <h4 className="s-30 w-700"><span>7.</span> Contact Us</h4>
+                                    <p>If you have any questions or concerns about this Privacy Policy or our data practices, please contact us at:</p>
+                                    <p>MermsEmr(MERMS) <br /> support@mermsemr.com</p>
+                                    <p>Thank you for trusting MERMS with your information.</p>
                                 </div>	{/* END TEXT BLOCK */}
                             </div>
                         </div>    {/* End row */}
@@ -259,4 +112,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/project-details.js

@@ -262,4 +262,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/projects.js

@@ -400,4 +400,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/reset-password.js

@@ -58,4 +58,13 @@ export default function Home() {
            
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/reviews.js

@@ -243,4 +243,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/single-post.js

@@ -558,4 +558,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/team.js

@@ -442,4 +442,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

pages/terms.js

@@ -12,190 +12,120 @@ export default function Home() {
                                 {/* INNER PAGE TITLE */}
                                 <div className="inner-page-title">
                                     <h2 className="s-52 w-700">Terms of Service</h2>
-                                    <p className="p-lg">This policy is effective as of 23th October 2022</p>
+                                    <p className="p-lg"><strong>Effective Date:</strong> 23rd October, 2024</p>
                                 </div>
                                 {/* TEXT BLOCK */}
                                 <div className="txt-block legal-info">
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>1.</span> Ownership</h4>
-                                    {/* Text */}
-                                    <p>Donec sodales nibh vel (the <span>"Terms"</span>) aliquet tristique purus
-                                        justo suscipit mauris tempus sed laoreet nulla ante purus. Donec dolor and magna undo
-                                        suscipit magna at tortor laoreet dignissim, undo porttitor massa quisque and mollis,
-                                        sapien gravida aliquet ipsum ultrices aliquet lorem purus and vitae auris aliquam
+                                    
+                                    {/* Introduction */}
+                                    <h4 className="s-30 w-700"><span>1.</span> Introduction</h4>
+                                    <p>
+                                        Welcome to MERMS. By accessing or using our services, you agree to be bound by these Terms of Service (<span>"Terms"</span>). If you do not agree to these Terms, please do not use our services.
                                     </p>
-                                    {/* Text */}
-                                    <p>Sagittis congue augue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce an aliquam nulla lacinia justo molestie blandit justo
-                                        diam aliquet tortor molestie non sagittis lacinia
+
+                                    {/* Services Provided */}
+                                    <h4 className="s-30 w-700"><span>2.</span> Services Provided</h4>
+                                    <p>
+                                        MERMS provides hosting and support for medical software, including but not limited to &#91;list specific services and software offered&#93;. Our services aim to assist healthcare providers in managing patient information, scheduling, billing, and other medical practice needs.
                                     </p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>2.</span> Acceptance of Terms</h4>
-                                    {/* Text */}
-                                    <p>Sagittis congue augue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce lacinia placerat and nulla justo molestie blandit justo
-                                        diam aliquet tortor molestie sagittis lacinia undo and mullam molestie diam luctus donec
-                                        bibendum aliquet massa elementum. Libero quisque lacus and ligula massa lorem fusce cursus
-                                        fusce nulla vitae massa placerat and mollis, sapien gravida aliquet ipsum ultrices aliquet
-                                        lorem diam purus undo vitae aliquam auris dapibus libero fusce blandit.
-                                    </p>
-                                    {/* Text */}
-                                    <p>Congue augue sagittis egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce lorem nulla an aliquam lacinia justo molestie blandit
-                                        justo diam an aliquet tortor sagittis lacinia molestie diam egestas
-                                    </p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>3.</span> Service Description</h4>
-                                    {/* Text */}
-                                    <p>Congue sagittis augue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce aliquam
-                                    </p>
-                                    {/* List */}
+
+                                    {/* User Accounts */}
+                                    <h4 className="s-30 w-700"><span>3.</span> User Accounts</h4>
                                     <ul className="simple-list">
                                         <li className="list-item">
-                                            <p>Quaerat sodales sapien undo velna purus euismod purus velna blandit vitae auctor
-                                                and congue magna tempor sapien gravida laoreet turpis urna augue, viverra a augue
-                                                eget diam pulvinar
+                                            <p>- <span>Eligibility:</span> To use our services, you must create an account. You represent that you are at least 18 years old and have the legal capacity to enter into a contract.
                                             </p>
                                         </li>
                                         <li className="list-item">
-                                            <p>Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien congue
-                                                and augue egestas
+                                            <p>- <span>Account Security:</span> You are responsible for maintaining the confidentiality of your account credentials and for all activities under your account. Notify us immediately of any unauthorized use of your account.
                                             </p>
                                         </li>
                                     </ul>
-                                    {/* Small Title */}
-                                    <h5 className="s-24 w-700"><span>3.1.</span> Subscription</h5>
-                                    {/* Text */}
-                                    <p>Integer congue sagittis augue egestas  velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque diam augue fusce sapien nulla a primis lacinia ipsum a molestie blandit
-                                        and justo an aliquet eget molestie sagittis at quaerat sodales
+
+                                    {/* Acceptable Use */}
+                                    <h4 className="s-30 w-700"><span>4.</span> Acceptable Use</h4>
+                                    <p>
+                                        You agree to use our services only for lawful purposes and in accordance with all applicable laws. You agree not to:
                                     </p>
-                                    {/* Text */}
-                                    <p>Aliqum mullam tincidunt a sapien gravida and diam donec porta.</p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>4.</span> Account Information</h4>
-                                    {/* Text */}
-                                    <p>Sagittis congue augue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce lacinia placerat and nulla justo molestie blandit justo
-                                        diam aliquet tortor molestie sagittis lacinia undo and mullam molestie diam luctus donec
-                                        bibendum aliquet massa elementum. Libero quisque lacus and ligula massa lorem.
-                                    </p>
-                                    {/* Small Title */}
-                                    <h5 className="s-24 w-700"><span>4.1.</span> Registering for an account</h5>
-                                    {/* Text */}
-                                    <p>Congue augue sagittis egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce lorem nulla an aliquam lacinia justo molestie blandit
-                                        justo diam an aliquet tortor sagittis lacinia molestie diam egestas
-                                    </p>
-                                    {/* Text */}
-                                    <p>Sagittis augue congue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque aliquam fusce blandit
-                                    </p>
-                                    {/* Small Title */}
-                                    <h5 className="s-24 w-700"><span>4.2.</span> Your responsibility for your account</h5>
-                                    {/* Text */}
-                                    <p>Integer congue sagittis augue egestas  velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque diam augue fusce sapien
-                                    </p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>5.</span> Price and Taxes</h4>
-                                    {/* List */}
                                     <ul className="simple-list">
                                         <li className="list-item">
-                                            <p>Quaerat sodales sapien undo velna purus euismod purus velna blandit vitae auctor
-                                                and congue magna tempor sapien gravida laoreet turpis urna augue, viverra a augue
-                                                eget tempor diam
+                                            <p>Share any sensitive personal health information without proper authorization.</p>
+                                        </li>
+                                        <li className="list-item">
+                                            <p>Transmit any harmful or malicious code.</p>
+                                        </li>
+                                        <li className="list-item">
+                                            <p>Engage in any activity that could harm our systems or interfere with other users' access to our services.</p>
+                                        </li>
+                                    </ul>
+
+                                    {/* Data Protection and Privacy */}
+                                    <h4 className="s-30 w-700"><span>5.</span> Data Protection and Privacy</h4>
+                                    <p>
+                                        MERMS is committed to protecting your personal information and ensuring compliance with applicable laws, including HIPAA. Please review our Privacy Policy for more details on how we collect, use, and protect your information.
+                                    </p>
+
+                                    {/* Intellectual Property */}
+                                    <h4 className="s-30 w-700"><span>6.</span> Intellectual Property</h4>
+                                    <p>
+                                        All content, features, and functionality of our services, including but not limited to software, text, graphics, logos, and designs, are the exclusive property of MERMS and are protected by intellectual property laws. You may not reproduce, distribute, or create derivative works without our express written permission.
+                                    </p>
+
+                                    {/* Payment Terms */}
+                                    <h4 className="s-30 w-700"><span>7.</span> Payment Terms</h4>
+                                    <ul className="simple-list">
+                                        <li className="list-item">
+                                            <p><span>Fees:</span> You agree to pay all fees associated with your use of our services as outlined in your subscription plan.
                                             </p>
                                         </li>
                                         <li className="list-item">
-                                            <p>Nemo ipsam egestas volute turpis dolores ut aliquam quaerat sodales sapien congue
-                                                and augue egestas
+                                            <p><span>Billing Cycle:</span> Payments will be billed on a [monthly/annual] basis, and your payment method will be charged accordingly.
+                                            </p>
+                                        </li>
+                                        <li className="list-item">
+                                            <p><span>Refund Policy:</span> All fees are non-refundable once the service period has commenced, unless otherwise specified in your subscription plan.
                                             </p>
                                         </li>
                                     </ul>
-                                    {/* Text */}
-                                    <p>Augue congue sagittis egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque donec and ipsum porta diam lorem sodales an aliquam lacinia justo
-                                        sapien congue aliquet and sodales a quaerat tortor lacinia egestas
+
+                                    {/* Termination */}
+                                    <h4 className="s-30 w-700"><span>8.</span> Termination</h4>
+                                    <p>
+                                        We reserve the right to suspend or terminate your access to our services at our discretion, without notice, for conduct that we believe violates these Terms or is harmful to other users or our business interests.
                                     </p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>6.</span> Method of Payment</h4>
-                                    {/* Text */}
-                                    <p>Integer congue sagittis augue egestas  velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque diam augue fusce sapien
+
+                                    {/* Limitation of Liability */}
+                                    <h4 className="s-30 w-700"><span>9.</span> Limitation of Liability</h4>
+                                    <p>
+                                        To the fullest extent permitted by law, MERMS shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising out of or in connection with your use of our services. Our total liability shall not exceed the amount paid by you for the services in the 12 months prior to the claim.
                                     </p>
-                                    {/* Text */}
-                                    <p>Sagittis augue congue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec and augue
-                                        luctus congue
+
+                                    {/* Changes to Terms */}
+                                    <h4 className="s-30 w-700"><span>10.</span> Changes to Terms</h4>
+                                    <p>
+                                        We may update these Terms from time to time. We will notify you of any changes by posting the new Terms on our website. Your continued use of our services following any changes constitutes your acceptance of the new Terms.
                                     </p>
-                                    {/* Small Title */}
-                                    <h5 className="s-24 w-700"><span>6.1.</span> Refunds</h5>
-                                    {/* Text */}
-                                    <p>Integer congue sagittis augue egestas  velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque diam augue fusce sapien nulla a primis lacinia ipsum a molestie blandit
-                                        and justo an aliquet eget molestie sagittis at quaerat sodales
+
+                                    {/* Governing Law */}
+                                    <h4 className="s-30 w-700"><span>11.</span> Governing Law</h4>
+                                    <p>
+                                        These Terms shall be governed by and construed in accordance with the laws of Georgia, USA. Any disputes arising from these Terms shall be subject to the exclusive jurisdiction of the courts located in Georgia, USA.
                                     </p>
-                                    {/* Text */}
-                                    <p>Aliqum mullam tincidunt a sapien gravida and diam donec porta.</p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>7.</span> Security</h4>
-                                    {/* Text */}
-                                    <p>Sagittis congue augue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce lacinia placerat and nulla justo molestie blandit justo
-                                        diam aliquet tortor molestie sagittis lacinia undo and mullam molestie diam luctus donec
-                                        bibendum aliquet massa elementum. Libero quisque lacus and ligula massa lorem fusce cursus
-                                        fusce nulla vitae massa placerat and mollis, sapien gravida aliquet ipsum ultrices aliquet
-                                        lorem diam purus undo vitae aliquam auris dapibus libero fusce blandit.
+
+                                    {/* Contact Information */}
+                                    <h4 className="s-30 w-700"><span>12.</span> Contact Information</h4>
+                                    <p>If you have any questions about these Terms, please contact us at {" "}
+                                        <Link href="mailto:support@mermsemr.com" className="color--theme">support@mermsemr.com.</Link>
                                     </p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>8.</span> Changes to This Terms of Service</h4>
-                                    {/* Text */}
-                                    <p>Congue augue sagittis egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque blandit fusce lorem nulla an aliquam lacinia justo molestie blandit
-                                        justo diam an aliquet tortor sagittis lacinia molestie diam egestas
-                                    </p>
-                                    {/* Text */}
-                                    <p>Sagittis augue congue egestas integer velna purus purus magna nec suscipit and egestas
-                                        magna aliquam ipsum vitae purus justo lacus ligula ipsum primis cubilia donec undo augue
-                                        luctus vitae egestas a molestie donec libero sapien dapibus congue tempor undo quisque
-                                        fusce cursus neque aliquam fusce blandit
-                                    </p>
-                                    {/* Title */}
-                                    <h4 className="s-30 w-700"><span>9.</span> How to Contact Us</h4>
-                                    {/* Text */}
-                                    <p>If you have any questions or suggestions about this Terms of Service, do not hesitate to
-                                        contact us at <Link href="mailto:yourdomain@mail.com" className="color--theme">hello@yourdomain.com</Link>
+                                    <p>
+                                        Please consult with a legal professional to make sure that these Terms of Service comply with local laws and regulations specific to your business and its offerings.
                                     </p>
+
+
+
+                                    {/* Commonly used headings */}
+                                    {/* <h4 className="s-30 w-700"><span>1.</span> Ownership</h4>
+                                    <h5 className="s-24 w-700"><span>3.1.</span> Subscription</h5> */}
                                 </div>	{/* END TEXT BLOCK */}
                             </div>
                         </div>    {/* End row */}
@@ -205,4 +135,13 @@ export default function Home() {
             </Layout>
         </>
     )
-}
+}
+export async function getStaticProps({ locale }) {
+  const { getMessages } = await import('../utils/getMessages')
+  return {
+    props: {
+      locale,
+      messages: await getMessages(locale),
+    }
+  }
+}

public/css/merms.css

@@ -3078,7 +3078,7 @@ p.video-txt-sm {
     line-height: 1;
     font-weight: 700;
     letter-spacing: 0.5px;
-    text-transform: uppercase;
+    /* text-transform: uppercase; */
     margin-bottom: 35px;
 }
 

utils/getMessages.js

@@ -0,0 +1,11 @@
+const loaders = {
+  en: () => import('../messages/en.json'),
+  fr: () => import('../messages/fr.json'),
+  es: () => import('../messages/es.json'),
+}
+
+export async function getMessages(locale) {
+  const load = loaders[locale] || loaders.en
+  const mod = await load()
+  return mod.default
+}

utils/next-intl-compat.js

@@ -0,0 +1,25 @@
+import React, { createContext, useContext } from 'react'
+
+const TranslationContext = createContext({ messages: {}, locale: 'en' })
+
+export function NextIntlClientProvider({ locale, messages, children, timeZone }) {
+  return React.createElement(
+    TranslationContext.Provider,
+    { value: { locale: locale || 'en', messages: messages || {} } },
+    children
+  )
+}
+
+export function useTranslations(namespace) {
+  const { messages } = useContext(TranslationContext)
+  return function t(key) {
+    const ns = messages?.[namespace]
+    if (!ns) return key
+    return ns[key] ?? key
+  }
+}
+
+export function useLocale() {
+  const { locale } = useContext(TranslationContext)
+  return locale
+}