upper menu

components/layout/Layout.js

@@ -17,20 +17,20 @@ export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumb
         !isMobileMenu ? document.body.classList.add("wsactive") : document.body.classList.remove("wsactive")
     }
 
-    // useEffect(() => {
+    useEffect(() => {
-    //     const WOW = require('wowjs')
+        const WOW = require('wowjs')
-    //     window.wow = new WOW.WOW({
+        window.wow = new WOW.WOW({
-    //         live: false
+            live: false
-    //     })
+        })
-    //     window.wow.init()
+        window.wow.init()
 
-    //     document.addEventListener("scroll", () => {
+        document.addEventListener("scroll", () => {
-    //         const scrollCheck = window.scrollY > 100
+            const scrollCheck = window.scrollY > 100
-    //         if (scrollCheck !== scroll) {
+            if (scrollCheck !== scroll) {
-    //             setScroll(scrollCheck)
+                setScroll(scrollCheck)
-    //         }
+            }
-    //     })
+        })
-    // }, [])
+    }, [])
     return (
         <>
             <PageHead headTitle={headTitle} />

components/layout/Menu.js

@@ -13,10 +13,9 @@ export default function Menu() {
                     <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></li>
-                        <li aria-haspopup="true"><Link href="#lnk-2">Integrations</Link></li>
+                        <li aria-haspopup="true"><Link href="#merms-works">How It Works</Link></li>
-                        <li aria-haspopup="true"><Link href="#lnk-3">How It Works</Link></li>
+                        <li aria-haspopup="true"><Link href="/contacts">Contacts Us</Link></li>
-                        <li aria-haspopup="true"><Link href="#features-2">Best Solutions</Link></li>
+                        <li aria-haspopup="true"><Link href="/faqs">F.A.Q.</Link></li>
-                        <li aria-haspopup="true"><Link href="#reviews-1">Testimonials</Link></li>
                     </ul>
                 </li>
                 {/* SIMPLE NAVIGATION LINK */}

components/layout/header/Header1.js

@@ -12,7 +12,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, header
                         <a id="wsnavtoggle" className="wsanimated-arrow" onClick={handleMobileMenu}><span /></a>
                     </div>
                     {/* NAVIGATION MENU */}
-                    <div className={`wsmainfull menu clearfix ${scroll ? "scroll" : ""}`}>
+                    <div className={`wsmainfull menu clearfix ${scroll ? "scroll fix-h" : ""}`}>
                         <div className="wsmainwp clearfix">
                             {/* HEADER BLACK LOGO */}
                             <div className="desktoplogo">

components/sections/MermsHowItWorks.js

@@ -0,0 +1,58 @@
+
+
+export default function MermsHowItWorks() {
+    return (
+        <>
+            <section id="merms-works" className="pt-100 features-section division">
+                <div className="container">
+                    {/* SECTION TITLE */}
+                    <div className="row justify-content-center">
+                        <div className="col-md-10 col-lg-9">
+                            <div className="section-title mb-70">
+                                {/* Title */}
+                                <h2 className="s-48 w-700">Track the progress towards objectives with key results</h2>
+                                {/* Text */}
+                                <p className="s-21 color--grey">Ligula risus auctor tempus magna feugiat lacinia.</p>
+                            </div>
+                        </div>
+                    </div>
+                    {/* FEATURES-5 WRAPPER */}
+                    <div className="fbox-wrapper text-center">
+                        <div className="row d-flex align-items-center">
+                            {/* FEATURE BOX #1 */}
+                            <div className="col-md-6">
+                                <div className="fbox-5 fb-1 gr--smoke r-16 wow fadeInUp">
+                                    {/* Text */}
+                                    <div className="fbox-txt order-last order-md-2">
+                                        <h5 className="s-26 w-700">Marketing Integrations</h5>
+                                        <p>Aliquam a augue suscipit luctus diam neque purus ipsum neque and dolor primis libero</p>
+                                    </div>
+                                    {/* Image */}
+                                    <div className="fbox-5-img order-first order-md-2">
+                                        <img className="img-fluid light-theme-img" src="/images/f_06.png" alt="feature-image" />
+                                        <img className="img-fluid dark-theme-img" src="/images/f_06_dark.png" alt="feature-image" />
+                                    </div>
+                                </div>
+                            </div>	{/* END FEATURE BOX #1 */}
+                            {/* FEATURE BOX #2 */}
+                            <div className="col-md-6">
+                                <div className="fbox-5 fb-2 gr--smoke r-16 wow fadeInUp">
+                                    {/* Image */}
+                                    <div className="fbox-5-img">
+                                        <img className="img-fluid light-theme-img" src="/images/f_07.png" alt="feature-image" />
+                                        <img className="img-fluid dark-theme-img" src="/images/f_07_dark.png" alt="feature-image" />
+                                    </div>
+                                    {/* Text */}
+                                    <div className="fbox-txt">
+                                        <h5 className="s-26 w-700">Research Solutions</h5>
+                                        <p>Aliquam a augue suscipit luctus diam neque purus ipsum neque and dolor primis libero</p>
+                                    </div>
+                                </div>
+                            </div>	{/* END FEATURE BOX #2 */}
+                        </div>  {/* End row */}
+                    </div>	{/* END FEATURES-5 WRAPPER */}
+                </div>     {/* End container */}
+            </section>
+        </>
+    )
+}

pages/ProductHome.js

@@ -19,6 +19,7 @@ import Reviews2_3 from "../components/sections/Reviews2_3"
 import MersmHero from "../components/sections/MersmHero";
 import MermsFeatures from "../components/sections/MermsFeatures";
 import MermsAbout from "../components/sections/MermsAbout";
+import MermsHowItWorks from "../components/sections/MermsHowItWorks";
 
 export default function ProductHome() {
 
@@ -32,6 +33,7 @@ export default function ProductHome() {
                 <hr className="divider" />
                 <MermsFeatures />
                 {/*<Features13_5 />*/}
+                <MermsHowItWorks />
                 <Lnk1_13 />
                 <Ct02_27 />
                 <Lnk2_13 />

public/css/merms.css

@@ -38,6 +38,10 @@ section,
     height: 100%;
 }
 
+.fix-h {
+    background-color: red !important;
+    height: 80px !important;
+}
 /*------------------------------------------*/
 /*  BLOCK SHADOW
 /*------------------------------------------*/