fixed contact page image

.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/layout/Menu.js

@@ -9,15 +9,15 @@ export default function Menu() {
       <ul className="wsmenu-list nav-theme">
         {/* DROPDOWN SUB MENU */}
         <li aria-haspopup="true">
-          <Link href="#" className="h-link">
+          <Link href="/#" className="h-link">
             About <span className="wsarrow" />
           </Link>
           <ul className="sub-menu">
             <li aria-haspopup="true">
-              <Link href="#merms-about">Why MERMS?</Link>
+              <Link href="/#merms-about">Why MERMS?</Link>
             </li>
             <li aria-haspopup="true">
-              <Link href="#merms-works">How It Works</Link>
+              <Link href="/#merms-works">How It Works</Link>
             </li>
             <li aria-haspopup="true">
               <Link href="/contacts">Contacts Us</Link>
@@ -33,6 +33,13 @@ export default function Menu() {
             Features
           </Link>
         </li>
+
+        <li className="nl-simple" aria-haspopup="true">
+          <Link href="/merms-blog" className="h-link">
+            Forum
+          </Link>
+        </li>
+
         <li
           className="nl-simple reg-fst-link mobile-last-link"
           aria-haspopup="true"

components/layout/footer/MermsFooter.js

@@ -1,20 +1,22 @@
-
 import Link from "next/link"
+
 export default function MermsFooter() {
     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
+                                    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.
                                 </p>
                             </div>
                         </div>
@@ -23,43 +25,57 @@ export default function MermsFooter() {
                             <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>
+                                    <h6 className="s-17 w-700">Site</h6>
                                     {/* Links */}
                                     <ul className="foo-links clearfix">
+                                        <li>
+                                            <p><Link href="/">Home</Link></p>
+                                        </li>
                                         <li>
                                             <p><Link href="/about">About Us</Link></p>
                                         </li>
+                                        {/*<li>*/}
+                                        {/*    <p><Link href="/merms-blog">Use Cases</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="/merms-blog">Our Blog</Link></p>*/}
+                                        {/*</li>*/}
                                     </ul>
                                 </div>
-                            </div> {/* END FOOTER LINKS */}
+                            </div>
+                            {/* END FOOTER LINKS */}
                             {/* FOOTER LINKS */}
                             <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>
+                                    <h6 className="s-17 w-700">Resources</h6>
                                     {/* Links */}
                                     <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="/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="https://blog.mermsemr.com/" target={"_blank"}>Our
+                                                Forum</Link></p>
+                                        </li>
                                     </ul>
                                 </div>
-                            </div> {/* END FOOTER LINKS */}
+                            </div>
+                            {/* END FOOTER LINKS */}
                             {/* FOOTER LINKS */}
                             <div className="col-6 col-sm-4 col-md-4 col-xl-4">
                                 <div className="footer-links fl-3">
@@ -73,9 +89,9 @@ export default function MermsFooter() {
                                         <li>
                                             <p><Link href="/privacy">Privacy Policy</Link></p>
                                         </li>
-                                        <li>
-                                            <p><Link href="/cookies">Cookie Policy</Link></p>
-                                        </li>
+                                        {/*<li>*/}
+                                        {/*    <p><Link href="/cookies">Cookie Policy</Link></p>*/}
+                                        {/*</li>*/}
                                         {/*<li>*/}
                                         {/*    <p><Link href="#">Site Map</Link></p>*/}
                                         {/*</li>*/}
@@ -83,29 +99,35 @@ export default function MermsFooter() {
                                 </div>
                             </div>
                         </div>
-                    </div> {/* END FOOTER CONTENT */}
-                    <hr />
+                    </div>
+                    {/* END FOOTER CONTENT */}
+                    <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">© 2026 autoMedSys(AI) <span>All Rights Reserved</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>
+                                    {/*<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>*/}
                                 </ul>
                             </div>
-                        </div> {/* End row */}
-                    </div> {/* END BOTTOM FOOTER */}
-                </div> {/* End container */}
+                        </div>
+                        {/* End row */}
+                    </div>
+                    {/* END BOTTOM FOOTER */}
+                </div>
+                {/* End container */}
             </footer>
 
         </>

components/sections/MermsBanner.js

@@ -4,7 +4,7 @@ import Link from "next/link"
 export default function MermsBanner() {
     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">
@@ -13,20 +13,14 @@ export default function MermsBanner() {
                                 {/* 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" />
+                                        <img className="img-fluid" src="/images/start-banner-01.png" alt="banner-image" />
                                     </div>
                                 </div>
                             </div>   {/* End row */}

components/sections/MermsFeatureSection4.js

@@ -23,9 +23,7 @@ export default function MermsFeatureSection4 (){
                                     {/* 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>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.
                                         </p>
                                     </div>
                                 </div>	{/* END CONTENT BOX #1 */}
@@ -38,10 +36,8 @@ export default function MermsFeatureSection4 (){
                                     </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
+                                        <h5 className="s-22 w-700">Active Status Reports</h5>
+                                        <p>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.
                                         </p>
                                     </div>
                                 </div>	{/* END CONTENT BOX #2 */}
@@ -53,10 +49,8 @@ export default function MermsFeatureSection4 (){
                                     </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
+                                        <h5 className="s-22 w-700">Secure at Core</h5>
+                                        <p className="mb-0">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.
                                         </p>
                                     </div>
                                 </div>	{/* END CONTENT BOX #3 */}

components/sections/MermsFeatures.js

@@ -1,33 +1,30 @@
-
-
 export default function MermsFeatures() {
     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">Deploy in Seconds</h5>
+                                                <p>Easily deploy the tools you need with our automated system.</p>
                                             </div>
                                         </div>
                                         {/* FEATURE BOX #2 */}
@@ -36,14 +33,15 @@ export default function MermsFeatures() {
                                             <div className="fbox-ico ico-50">
                                                 <div className="shape-ico color--theme">
                                                     {/* Vector Icon */}
-                                                    <span className="flaticon-idea" />
+                                                    <span className="flaticon-idea"/>
                                                     {/* 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)" />
+                                                        <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>
@@ -51,38 +49,37 @@ export default function MermsFeatures() {
                                         </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>
                                             </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" />
+                                                    <span className="flaticon-search-engine-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)" />
+                                                        <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 */}
+                                            </div>
+                                            {/* End Icon */}
                                             {/* Text */}
                                             <div className="fbox-txt">
                                                 <h5 className="s-20 w-700">Unified Management</h5>
@@ -91,33 +88,32 @@ export default function MermsFeatures() {
                                         </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.
+                                <h2 className="s-46 w-700">Deploy Tools for Your Practice with Ease in Our Secure
+                                    Cloud.</h2>
+                                <p>Empower your practice with seamless automation and essential tools for lasting
+                                    success.
                                 </p>
-                                {/* List */}
                                 <ul className="simple-list">
                                     <li className="list-item">
-                                        <p>Design your website using our modern templates, designer fonts, and color palettes in minutes.
+                                        <p>Effortlessly scale your practice with our growing ecosystem of innovative
+                                            tools.
                                         </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 className="mb-0">Boost your online presence and expand your community using
+                                            our intelligent marketing platform.
                                         </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

@@ -11,9 +11,9 @@ export default function MermsFeaturesSection1(){
                         <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>
+                                <h2 className="s-50 w-700">We pay attention to details</h2>
                                 {/* Text */}
-                                <p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>
+                                <p className="s-21 color--grey">Continually evolving digital space means that we are constantly updating the tools you will need by:</p>
                             </div>
                         </div>
                     </div>
@@ -31,7 +31,7 @@ export default function MermsFeaturesSection1(){
                                     {/* 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>
+                                        <p>Easy-to-follow and user-adaptive dashboard that optimizes your targets.</p>
                                     </div>
                                 </div>
                             </div>	{/* END FEATURE BOX #1 */}
@@ -46,7 +46,7 @@ export default function MermsFeaturesSection1(){
                                     {/* 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>
+                                        <p>Connect your tools to a target goal. Add and update what you need when required.</p>
                                     </div>
                                 </div>
                             </div>	{/* END FEATURE BOX #2 */}
@@ -61,7 +61,7 @@ export default function MermsFeaturesSection1(){
                                     {/* 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>
+                                        <p>Reporting that gives visibility to trends with AI assistance for recommendations.</p>
                                     </div>
                                 </div>
                             </div>	{/* END FEATURE BOX #3 */}

components/sections/MermsFeaturesSectionTwo.js

@@ -11,21 +11,18 @@ export default function MermsFeaturesSectionTwo(){
                         <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>
+                                <h2 className="s-46 w-700">Innovative 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>Bring your vision to life with the website builder that gives you the tools you need to succeed.
                                 </p>
                                 {/* List */}
                                 <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>Design your website using our modern templates, designer fonts, and color palettes in minutes.
                                         </p>
                                     </li>
                                     <li className="list-item">
-                                        <p className="mb-0">Cursus purus suscipit  vitae cubilia magnis diam volute egestas
-                                            sapien ultrice auctor
+                                        <p className="mb-0">Promote your business and grow. Create a blog to grow your community and drive more traffic.
                                         </p>
                                     </li>
                                 </ul>
@@ -51,8 +48,8 @@ export default function MermsFeaturesSectionTwo(){
                                             </div>	{/* End Icon */}
                                             {/* Text */}
                                             <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">Website in Seconds</h5>
+                                                <p>Build a website in seconds with MERMS AI website builder.</p>
                                             </div>
                                         </div>
                                         {/* FEATURE BOX #2 */}
@@ -70,8 +67,8 @@ export default function MermsFeaturesSectionTwo(){
                                             </div>	{/* End Icon */}
                                             {/* Text */}
                                             <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">Digital Marketing</h5>
+                                                <p>Promote your presence and grow with MERMS SEO tools.</p>
                                             </div>
                                         </div>
                                     </div>
@@ -91,8 +88,8 @@ export default function MermsFeaturesSectionTwo(){
                                             </div>	{/* End Icon */}
                                             {/* Text */}
                                             <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">Useful Addons</h5>
+                                                <p>Explore our expanding addons to improve your applications.</p>
                                             </div>
                                         </div>
                                         {/* FEATURE BOX #4 */}
@@ -110,8 +107,8 @@ export default function MermsFeaturesSectionTwo(){
                                             </div>	{/* End Icon */}
                                             {/* Text */}
                                             <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">Unified Management</h5>
+                                                <p>Manage everything from one portal with MERMS AI Assist Tools.</p>
                                             </div>
                                         </div>
                                     </div>

components/sections/MermsHowItWorks.js

@@ -1,6 +1,3 @@
-
-
-
 export default function MermsHowItWorks() {
     return (
         <>
@@ -11,56 +8,69 @@ export default function MermsHowItWorks() {
                         {/* TEXT BLOCK */}
                         <div className="col-md-6 order-last order-md-2">
                             <div className="txt-block left-column wow fadeInRight">
+                                <h2 className="s-46 w-700">MERMS-Agent: Always Here to Help You.</h2>
+
                                 {/* CONTENT BOX #2 */}
                                 <div className="cbox-4">
                                     {/* Icon & Title */}
                                     <div className="box-title">
-                                        <span className="flaticon-layers-1 color--theme" />
+                                        <span className="flaticon-layers-1 color--theme"/>
                                         <h5 className="s-24 w-700">Automatic Workflows</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>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>
                                     </div>
-                                </div>	{/* END CONTENT BOX #2 */}
+                                </div>
+                                {/* END CONTENT BOX #2 */}
                                 {/* CONTENT BOX #1 */}
                                 <div className="cbox-4">
                                     {/* Icon & Title */}
                                     <div className="box-title">
-                                        <span className="flaticon-paper-sizes color--theme" />
+                                        <span className="flaticon-paper-sizes color--theme"/>
                                         <h5 className="s-24 w-700">Efficient A.I Assist</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>Drive brand loyalty, boost your brand with social media marketing, and build
+                                            your digital identity with our A.I. Assist creator tools.
                                         </p>
                                     </div>
-                                </div>	{/* END CONTENT BOX #1 */}
+                                </div>
+                                {/* END CONTENT BOX #1 */}
 
                                 {/* CONTENT BOX #3 */}
                                 <div className="cbox-4">
                                     {/* Icon & Title */}
                                     <div className="box-title">
-                                        <span className="flaticon-pie-chart color--theme" />
+                                        <span className="flaticon-pie-chart color--theme"/>
                                         <h5 className="s-24 w-700">Useful Analytics</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 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>
                                     </div>
-                                </div>	{/* END CONTENT BOX #3 */}
+                                </div>
+                                {/* END CONTENT BOX #3 */}
                             </div>
-                        </div>	{/* END TEXT BLOCK */}
+                        </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" />
+                                <img className="img-fluid" src="/images/img-08.png" alt="content-image"/>
                             </div>
                         </div>
-                    </div>	{/* END SECTION CONTENT (ROW) */}
-                </div>	   {/* End container */}
+                    </div>
+                    {/* END SECTION CONTENT (ROW) */}
+                </div>
+                {/* End container */}
             </section>
         </>
     )

components/sections/MersmHero.js

@@ -11,11 +11,11 @@ export default function MersmHero() {
                         <div className="col-md-5">
                             <div className="hero-13-txt wow fadeInRight">
                                 {/* Section ID */}
-                                <span className="section-id">Online Reputation That Work</span>
+                                {/*<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>
+                                <h2 className="s-54 w-700">All-in-One Cloud Platform for Practice Management</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 className="p-lg">Streamline workflows across practice with powerful AI agents. Build and deploy automated workflows with ease.
                                 </p>
                                 {/* Button */}
                                 <Link href={process.env.NEXT_PUBLIC_SIGNUP_URL} className="btn r-04 btn--theme hover--tra-black">Get started for free</Link>
@@ -27,7 +27,7 @@ export default function MersmHero() {
                         {/* 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 */}

components/services/services.js

@@ -0,0 +1,77 @@
+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 = () => {
+    // NEXT_PUBLIC_APP_MAIN_API="https://devapi.mermsemr.com"
+    return 'https://devapi.mermsemr.com';
+}
+const postAuxEnd = (path, postData, media = false) => {
+    const basePath = media ? 'https://blogdata.chiefsoft.net' : 'https://blogdata.chiefsoft.net'
+    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)
+}

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"]

next.config.js

@@ -1,9 +1,9 @@
 /** @type {import('next').NextConfig} */
+const path = require('path')
+
 const nextConfig = {
   reactStrictMode: true,
-  experimental: {
-    serverActions: true,
-  },
+  outputFileTracingRoot: path.join(__dirname),
 }
 
 module.exports = nextConfig

package.json

@@ -12,8 +12,10 @@
     },
     "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",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -21,6 +23,7 @@
         "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/_help-center.js

@@ -0,0 +1,518 @@
+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>
+        </>
+    )
+}

pages/contacts.js

@@ -1,7 +1,51 @@
+import {useMutation} from '@tanstack/react-query';
 import Layout from "../components/layout/Layout"
 import Link from "next/link"
+import {Form, Formik} from 'formik';
+//import {Form, Formik} from 'formik';
+import * as Yup from "yup";
+
 export default function Home() {
 
+    const validationSchema = Yup.object().shape({
+        subject: Yup.string().required("Required"),
+        name: Yup.string().required("Required"),
+        email: Yup.string().required("Required"),
+        message: Yup.string().required("Required"),
+    })
+
+    const initialValues = {
+        subject: '',
+        name: '',
+        email: '',
+        message: ''
+    };
+
+    const contactMutation = useMutation({
+        mutationFn: (fields) => {
+            return null //completePWDReset(fields)
+        },
+        onSuccess: (res) => {
+            if (res?.data?.resultCode != '0') {
+                throw({message: res?.data?.resultDescription})
+            }
+        },
+        // onError: (err) => {
+        //     console.log('err', err)
+        // }
+    })
+
+    const handleContactMutation = (values) => {
+        let reqData = {
+            ...values
+        }
+        console.log(reqData)
+        setTimeout(() => {
+            contactMutation.reset()
+        }, 3000)
+        contactMutation.mutate(reqData)
+    }
+
     return (
         <>
             <Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
@@ -15,69 +59,133 @@ export default function Home() {
                                         {/* 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?
+                                        <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>
                                     </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 */}
+                                                            <div className="col-md-12 input-subject">
+                                                                <p className="p-lg">This question is
+                                                                    about:{(props.errors.subject && props.touched.subject) &&
+                                                                        <span style={{display: 'inline'}}
+                                                                              className='text-danger'>{props.errors.subject}</span>}</p>
+                                                                <span>Choose a topic, so we can best determine how to handle your request to:</span>
+                                                                <select name='subject' onChange={props.handleChange}
+                                                                        className="form-select subject"
+                                                                        aria-label="Default select example">
+                                                                    <option value=''>This question is about...</option>
+                                                                    <option
+                                                                        value='registering or account'>Registering or
+                                                                        Accounts
+                                                                    </option>
+                                                                    <option value='using application'>Application
+                                                                    </option>
+                                                                    <option value='troubleshooting'>Troubleshooting
+                                                                    </option>
+                                                                    <option value='data and files'>Data or Files
+                                                                    </option>
+                                                                    <option value='others'>Other</option>
+                                                                </select>
+                                                            </div>
+                                                            {/* Contact Form Input */}
+                                                            <div className="col-md-12">
+                                                                <p className="p-lg">Your
+                                                                    Name:{(props.errors.name && props.touched.name) &&
+                                                                        <span style={{display: 'inline'}}
+                                                                              className='text-danger'>{props.errors.name}</span>}</p>
+                                                                <span>Please enter your name: </span>
+                                                                <input type="text" onChange={props.handleChange}
+                                                                       name="name" className="form-control name"
+                                                                       placeholder="Your Name*"/>
+                                                            </div>
+                                                            <div className="col-md-12">
+                                                                <p className="p-lg">Your Email
+                                                                    Address:{(props.errors.email && props.touched.email) &&
+                                                                        <span style={{display: 'inline'}}
+                                                                              className='text-danger'>{props.errors.email}</span>}</p>
+                                                                <span>Please carefully check your email address for accuracy:</span>
+                                                                <input type="text" onChange={props.handleChange}
+                                                                       name="email" className="form-control email"
+                                                                       placeholder="Email Address*"/>
+                                                            </div>
+                                                            <div className="col-md-12">
+                                                                <p className="p-lg">Explain your question in
+                                                                    details:{(props.errors.message && props.touched.message) &&
+                                                                        <span style={{display: 'inline'}}
+                                                                              className='text-danger'>{props.errors.message}</span>}</p>
+                                                                <span>Please provide specific details regarding your request or any feedback you wish to share.</span>
+                                                                <textarea onChange={props.handleChange}
+                                                                          className="form-control message"
+                                                                          name="message" rows={6}
+                                                                          placeholder="I have a problem with..."/>
+                                                            </div>
+                                                            {/* Contact Form Button */}
+                                                            <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 ? 'Sending' : contactMutation.isSuccess ? 'Message Sent' : 'Submit Request'}
+                                                                </button>
+                                                            </div>
+                                                            <div className="contact-form-notice">
+                                                                <p className="p-sm">
+                                                                    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.
+                                                                </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
 			============================================= */}
 

pages/features.js

@@ -29,20 +29,18 @@ export default function Home() {
                                         {/* Section ID */}
                                         <span className="section-id">Strategies That Work</span>
                                         {/* Title */}
-                                        <h2 className="s-46 w-700">Right strategies &amp; implementations</h2>
+                                        <h2 className="s-46 w-700">Modern 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>
+                                        <p>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.</p>
                                         {/* Small Title */}
-                                        <h5 className="s-24 w-700">Get more done in less time</h5>
+                                        <h5 className="s-24 w-700">Providing solutions that provable work</h5>
                                         {/* CONTENT BOX #1 */}
                                         <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>Made to suit different circumstances or requirements with ease.</p>
                                             </div>
                                         </div>
                                         {/* CONTENT BOX #2 */}
@@ -51,9 +49,7 @@ export default function Home() {
                                                 <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>Promote your brand, accomplish tasks quickly and effectively, and maximize productivity.</p>
                                             </div>
                                         </div>
                                         {/* CONTENT BOX #3 */}
@@ -62,7 +58,7 @@ export default function Home() {
                                                 <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">Create and grow your digital community and drive relevant traffic.</p>
                                             </div>
                                         </div>
                                     </div>
@@ -70,14 +66,15 @@ 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 />
-
+                    <hr className="divider" />
                     <section className="pt-100 ws-wrapper content-section">
                         <div className="container">
                             <div className="bc-1-wrapper bg--white-400 bg--fixed r-16">
@@ -91,14 +88,12 @@ export default function Home() {
                                                 {/* 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>Leverage our automation tools to present and manage your healthcare online presence and your practice tools with AI-Assist.
                                                 </p>
                                                 {/* Small Title */}
-                                                <h5 className="s-24 w-700 h5-title">The smarter way to work</h5>
+                                                <h5 className="s-24 w-700 h5-title">Modern & Smarter for your Practice</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 className="mb-0">Up to date tools to manage all you need for effective online presence and your practice management. Effective practice campaign, easy adoptions of tools and visibility to trends.
                                                 </p>
                                             </div>
                                         </div>	{/* END TEXT BLOCK */}

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,20 +168,25 @@ 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>
 

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,14 +10,15 @@ 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>
         </>
     )

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="">

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 */}

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 */}

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;
 }