diff --git a/app/components/FeaturesHomeOne.js b/app/components/FeaturesHomeOne.js
index ffe3431..5a6d294 100644
--- a/app/components/FeaturesHomeOne.js
+++ b/app/components/FeaturesHomeOne.js
@@ -1,18 +1,12 @@
+"use client"
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-// import thumb from '../../assets/images/onlineregistration.png';
-// import thumb22 from '../../assets/images/marketplace.png';
-// import thumb3 from '../../assets/images/product-listing-on-online-marketplace.png';
-// import thumb4 from '../../assets/images/flying.png';
-import freeAccount from '../../assets/images/free_account.png';
-import marketPlace from '../../assets/images/market_place.png';
-import task from '../../assets/images/task.png';
-import getPaid from '../../assets/images/get_paid.png';
 
-// import taskThumbnail from '../../assets/images/task-thumb.png'
-// import marketThumbnail from '../../assets/images/market-thumb.png'
-// import getPaidThumbnail from '../../assets/images/getpaid-thumb.png'
-// import accountThumbnail from '../../assets/images/account-thumb.png'
+import freeAccount from '../assets/images/free_account.png';
+import marketPlace from '../assets/images/market_place.png';
+import task from '../assets/images/task.png';
+import getPaid from '../assets/images/get_paid.png';
+
 
 
 import getConfig from './../../Config/config'
diff --git a/app/components/FooterHomeOne.js b/app/components/FooterHomeOne.js
index 787aa27..dac7537 100644
--- a/app/components/FooterHomeOne.js
+++ b/app/components/FooterHomeOne.js
@@ -1,7 +1,8 @@
+"use client"
 import React, { useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import logo from '../../assets/images/wrenchboard-logo-text.png';
-import getConfig from './../../Config/config'
+import logo from '../assets/images/wrenchboard-logo-text.png';
+import getConfig from '../../Config/config'; // './../../Config/config'
 
 function FooterHomeOne({ className }) {
     var site = useMemo(() => getConfig()[0], []);;
diff --git a/app/components/HomeOne.js b/app/components/HomeOne.js
index 3b32d5f..f5e5a1f 100644
--- a/app/components/HomeOne.js
+++ b/app/components/HomeOne.js
@@ -10,22 +10,26 @@ import Drawer from '../Mobile/Drawer';
 // import ServicesHomeOne from './ServicesHomeOne';
 // import TrafficHomeOne from './TrafficHomeOne';
 // import TrafficHomeTwo from './TrafficHomeTwo';
-// import FeaturedScreen from './FeaturedScreen'; 
+//import FeaturedScreen from './FeaturedScreen'; 
 import AfterHero from './AfterHero';
-// import NextAfterHero from './NextAfterHero';
+import NextAfterHero from './NextAfterHero';
 
 
 
 
 
 function HomeOne() {
-    // cORRECT CALL const [drawer, drawerAction] = useToggle(false);
-    const [drawer, drawerAction] = useToggle();
+    // needed  const [drawer, drawerAction] = useToggle(false);
 
     return (
         <>
-          <Drawer drawer={drawer} action={drawerAction.toggle} />
+          {/* <Drawer drawer={drawer} action={drawerAction.toggle} /> */}
            <div>THIS IS HOME </div>
+           <AfterHero />
+           <NextAfterHero />
+           {/* <ServicesHomeOne /> */}
+           {/* <FooterHomeOne /> */}
+
         </>
     );
 }
@@ -36,7 +40,7 @@ export default HomeOne;
             {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
             // <HomeOneHeader action={drawerAction.toggle} />
             // <HeroHomeOne />    
-            <AfterHero />
+            // <AfterHero />
             // <NextAfterHero />
             // <FeaturesHomeOne />
             // <ServicesHomeOne />
diff --git a/app/components/NextAfterHero.js b/app/components/NextAfterHero.js
index d8263f6..f905fef 100644
--- a/app/components/NextAfterHero.js
+++ b/app/components/NextAfterHero.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import serviceThumb from '../../assets/images/service-thumb-1.png';
+import serviceThumb from '../assets/images/service-thumb-1.png';
 
 function NextAfterHero() {
     return (
diff --git a/app/components/ServicesHomeOne.js b/app/components/ServicesHomeOne.js
index 39d77da..b0bf74c 100644
--- a/app/components/ServicesHomeOne.js
+++ b/app/components/ServicesHomeOne.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import IconOne from '../../assets/images/icon/reward.png';
-import IconTwo from '../../assets/images/icon/assign-chores.png';
-import IconThree from '../../assets/images/icon/financial-education.png';
-import IconFour from '../../assets/images/icon/family-connect.png';
+import IconOne from '../assets/images/icon/reward.png';
+import IconTwo from '../assets/images/icon/assign-chores.png';
+import IconThree from '../assets/images/icon/financial-education.png';
+import IconFour from '../assets/images/icon/family-connect.png';
 import Main from '../lnd/LndParts/Design/Main';
 
 function ServiceItem({ icon, title, description, index }) {
diff --git a/app/lib/CounterUpCom.js b/app/lib/CounterUpCom.js
new file mode 100644
index 0000000..e07352d
--- /dev/null
+++ b/app/lib/CounterUpCom.js
@@ -0,0 +1,22 @@
+import React, { useEffect, useState } from 'react';
+import CountUp from 'react-countup';
+
+function CounterUpCom({ endValue = 0, sectionSelect }) {
+    const [showCount, setShowCountValue] = useState(false);
+    useEffect(() => {
+        const rec = document.getElementById(sectionSelect);
+        if (rec) {
+            const currentPosition = rec.offsetTop - document.body.scrollTop;
+            window.addEventListener('scroll', () => {
+                const currentScrollPosition =
+                    window.pageYOffset || document.documentElement.scrollTop;
+                if (currentScrollPosition + 500 > currentPosition) {
+                    setShowCountValue(true);
+                }
+            });
+        }
+    }, [sectionSelect, showCount]);
+    return <>{showCount ? <CountUp delay={0} duration={3} end={endValue} /> : 0}</>;
+}
+
+export default CounterUpCom;
diff --git a/app/lib/LazyImage.js b/app/lib/LazyImage.js
new file mode 100644
index 0000000..0d3770c
--- /dev/null
+++ b/app/lib/LazyImage.js
@@ -0,0 +1,52 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+/**
+ * Renders an image lazily using the Intersection Observer API.
+ * The image is initially hidden and becomes visible once it enters the viewport.
+ * This approach improves performance by only loading images that are actually visible to the user.
+ * 
+ * @returns {JSX.Element} - The lazy image component.
+ */
+function LazyImage({ src, alt }) {
+  const imgRef = useRef();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(imgRef.current); // Stop observing once the image is in the viewport
+        }
+      },
+      {
+        root: null, // Viewport
+        rootMargin: '0px', // No margin
+        threshold: 0.1, // Percentage of the image that needs to be visible
+      }
+    );
+
+    if (imgRef.current) {
+      observer.observe(imgRef.current);
+    }
+
+    return () => {
+      if (imgRef.current) {
+        observer.unobserve(imgRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <img
+      ref={imgRef}
+      src={isVisible ? src : ''}
+      alt={alt}
+      loading="lazy"
+      className={isVisible ? 'visible' : 'hidden'} // You can apply CSS classes for animations
+    />
+  );
+}
+
+export default LazyImage;
diff --git a/app/lib/SkeletonLoaders.js b/app/lib/SkeletonLoaders.js
new file mode 100644
index 0000000..a50a384
--- /dev/null
+++ b/app/lib/SkeletonLoaders.js
@@ -0,0 +1,14 @@
+import "../assets/css/skeleton-loader.css"
+
+/**
+ * Renders a placeholder `<div>` element with the class name "image-skeleton-loader".
+ * This component is typically used as a placeholder for an image while it is being loaded.
+ * The CSS class "image-skeleton-loader or blog-text-skeleton-loader" can be used to style the placeholder element.
+ *
+ * @returns {React.Element} The rendered `<div>` element with the class name "image-skeleton-loader and blog-text-skeleton-loader".
+ */
+export const ImageLoader = () => <div className="image-skeleton-loader" />;
+
+export const BlogLoader = () => <div className="blog-text-skeleton-loader" />
+
+ 
\ No newline at end of file
diff --git a/app/lib/StickyMenu.js b/app/lib/StickyMenu.js
new file mode 100644
index 0000000..d78ac5b
--- /dev/null
+++ b/app/lib/StickyMenu.js
@@ -0,0 +1,12 @@
+export default function StickyMenu(selector = '.appie-sticky') {
+    document.addEventListener('scroll', () => {
+        const element = document.querySelector(selector);
+        if (element) {
+            if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+                element.classList.add('sticky');
+            } else {
+                element.classList.remove('sticky');
+            }
+        }
+    });
+}
diff --git a/app/lib/TopToBottom.js b/app/lib/TopToBottom.js
new file mode 100644
index 0000000..7ac3de1
--- /dev/null
+++ b/app/lib/TopToBottom.js
@@ -0,0 +1,15 @@
+export default function TopToBottom(value) {
+    const result = document.querySelector(value);
+    if (result) {
+        document.addEventListener('scroll', () => {
+            if (
+                document.body.scrollTop > window.innerHeight ||
+                document.documentElement.scrollTop > window.innerHeight
+            ) {
+                result.style.display = 'block';
+            } else {
+                result.style.display = 'none';
+            }
+        });
+    }
+}
diff --git a/app/lib/localImgLoad.js b/app/lib/localImgLoad.js
new file mode 100644
index 0000000..2d33975
--- /dev/null
+++ b/app/lib/localImgLoad.js
@@ -0,0 +1,2 @@
+const localImgLoad = (location) => require(`../assets/${location}`);
+export default localImgLoad
\ No newline at end of file
diff --git a/app/lnd/Lnd.js b/app/lnd/Lnd.js
new file mode 100644
index 0000000..f5a9bec
--- /dev/null
+++ b/app/lnd/Lnd.js
@@ -0,0 +1,363 @@
+// import React from 'react'
+// import useToggle from '../../Hooks/useToggle';
+// import Drawer from '../Mobile/Drawer';
+// import HomeOneHeader from '../HomeOne/HomeOneHeader';
+// import FooterHomeOne from '../HomeOne/FooterHomeOne';
+// import BackToTop from '../BackToTop';
+//
+//
+// function Lnd() {
+//     const [drawer, drawerAction] = useToggle(false);
+//
+//     return (
+//         <>
+//             <Drawer drawer={drawer} action={drawerAction.toggle} />
+//             {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+//             <HomeOneHeader action={drawerAction.toggle} />
+//             <div className='min-vh-100 d-flex flex-column justify-content-center align-items-center'>
+//                 <p>Dummy Empty Page</p>
+//             </div>
+//             <FooterHomeOne />
+//             <BackToTop />
+//         </>
+//     );
+// }
+//
+// export default Lnd
+
+
+import React , {useState, useEffect} from 'react'
+//import { HashLink as Link } from 'react-router-hash-link';
+import Design from './LndParts/Design/Main'
+import Work from './LndParts/Work/Main'
+//import Testimonial from './LndParts/Testimonial/Main'
+import AboutApp from './LndParts/AboutApp/Main'
+// import Trusted from './LndParts/Trusted/Main'
+// import Pricing from './LndParts/Pricing/Main'
+import Faq from './LndParts/Faq/Main'
+// import Interface from './LndParts/Interface/Main'
+import Download from './LndParts/Download/Main'
+import Story from './LndParts/Story/Main'
+
+import localImgLoad from '../../lib/localImgLoad'
+
+
+const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
+
+    const [ytShow , setytShow] = useState (false)
+    useEffect(() => {
+        // setfooter({f2 : true})
+        // setnavbar({n3 : true})
+        // setbrdcum({b2 : true})
+        localStorage.setItem("navbar","darkhome")
+
+    }, [])
+
+
+    return (
+        <>
+
+
+            {/* <div className="home-dark-block">
+        <header style={{position : "fixed"}}>
+            <div className="container">
+                <nav className="navbar navbar-expand-lg">
+                    <Link to="/" className="navbar-brand">
+                        <img src="assets/images/logo.png" alt="image" />
+                    </Link>
+                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                        <div className={`toggle-wrap ${mobile && "active"}`} onClick = {() => setmobile(true)}>
+                            <span className="toggle-bar" onClick = {() => setmobile(false)}></span>
+                        </div>
+                    </button>
+
+                    <div className={`collapse navbar-collapse ${mobile && "show"}`}>
+                        <ul className="navbar-nav ml-auto">
+                            <li className="nav-item has_dropdown">
+                                <Link to="#" className="nav-link" >Home</Link>
+                                <span className="drp_btn"><i className="icofont-rounded-down"></i></span>
+                                <div className="sub_menu">
+                                <ul>
+                                    <li><Link to="/">Home Defoult</Link></li>
+                                    <li><Link to="/home-dark">Home Dark Hero</Link></li>
+                                    <li><Link to="/home-wave">Home Wave </Link></li>
+                                    <li><Link to="/home-gredient">Home Gredient</Link></li>
+                                    <li><Link to="/home-video">Home Video</Link></li>
+                                    <li><Link to="/home-video2">Home Video 2</Link></li>
+                                </ul>
+                                </div>
+                            </li>
+                            <li className="nav-item">
+                                <Link smooth to="#features" className="nav-link">Features</Link>
+                            </li>
+                            <li className="nav-item">
+                                <Link smooth to="#how_it_work" className="nav-link">How it works</Link>
+                            </li>
+                            <li className="nav-item has_dropdown">
+                                <Link to="#" className="nav-link">Pages</Link>
+                                <span className="drp_btn"><i className="icofont-rounded-down"></i></span>
+                                <div className="sub_menu">
+                                    <ul>
+                                        <li><Link to="/about">About Us</Link></li>
+                                        <li><Link to="/review">Reviews</Link></li>
+                                        <li><Link to="/contact">Contact Us</Link></li>
+                                        <li><Link to="/faq">Faq</Link></li>
+                                        <li><Link to="/sign-in">Sign In</Link></li>
+                                        <li><Link to="/sign-up">Sign Up</Link></li>
+                                        <li><Link to="/blog">Blog List</Link></li>
+                                        <li><Link to="/blog-single">Blog Single</Link></li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li className="nav-item">
+                                <Link to="/pricing" className="nav-link">Pricing</Link>
+                            </li>
+                            <li className="nav-item has_dropdown">
+                                <Link to="#" className="nav-link">Blog</Link>
+                                <span className="drp_btn"><i className="icofont-rounded-down"></i></span>
+                                <div className="sub_menu">
+                                <ul>
+                                    <li><Link to="/blog">Blog List</Link></li>
+                                    <li><Link to="/blog-single">Blog Single</Link></li>
+                                </ul>
+                                </div>
+                            </li>
+                            <li className="nav-item">
+                                <Link to="/contact" className="nav-link" >Contact</Link>
+                            </li>
+                            <li className="nav-item">
+                                <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
+                            </li>
+                        </ul>
+                    </div>
+                </nav>
+            </div>
+        </header>
+        </div>  */}
+            <section className="banner_section homedark-banner min-vh-100">
+                <div className="container">
+                    <div className="row position-relative">
+                        <span className="position-absolute banner_shape1"> <img src={localImgLoad('images/banner-shape-one1.png')} width='10px' alt="image" /> </span>
+                        <span className="position-absolute banner_shape2"> <img src={localImgLoad('images/banner-shape2two.png')} width='10px' alt="image" /> </span>
+                        <span className="position-absolute banner_shape3"> <img src={localImgLoad('images/banner-shapethree3.png')} width='10px' alt="image" /> </span>
+
+                        <div className="col-12 col-lg-6 mx-auto text-center"  data-aos="fade-right" data-aos-duration="1500">
+                            <div className="banner_text my-3 p-4">
+                                <h1 className='text-white my-2'>Best way to manage your customers easily.</h1>
+                                <p className='text-white my-2'>Lorem Ipsum is simply dummy text of the printing and setting indus orem Ipsum has been the industrys standard dummy text ever.</p>
+                            </div>
+                            <div className="yt_video" data-aos="fade-in" data-aos-duration="1500">
+                                <div className="thumbnil">
+                                    <a className="popup-youtube play-button" onClick = {() => setytShow(true)} data-url="#" data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
+                                        {/* <span className="play_btn position-relative">
+                                            <img src={localImgLoad('images/play_icon.png')} className='position-relative' width='30px' height='30px' alt="image" />
+                                            <div className="waves-block">
+                                                <div className="waves wave-1"></div>
+                                                <div className="waves wave-2"></div>
+                                                <div className="waves wave-3"></div>
+                                            </div>
+                                        </span> */}
+                                        <span className="play_btn position-relative rounded-circle d-flex justify-content-center align-items-center">
+                                            <img src={localImgLoad('images/play_icon.png')} className='p-1 position-relative rounded-circle' width='30px' height='30px' alt="image" />
+                                        </span>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="container-fluid p-3 p-lg-5"  data-aos="fade-in" data-aos-duration="1500">
+                    <div className="banner_images">
+                        <div className="img-con d-block d-sm-flex justify-content-around align-items-center gap-5">
+                            <div className="col-lg-2 d-none d-lg-block">
+                                <div className="banner_screen screen1 text-center">
+                                    <img className="moving_position_animatin" src={localImgLoad('images/hero-image-5.png')} alt="image" />
+                                </div>
+                            </div>
+
+                            <div className="col-12 col-sm-4 col-lg-2">
+                                <div className="banner_screen screen2 text-center">
+                                    <img className="moving_animation" src={localImgLoad('images/hero-image-4.png')} alt="image" />
+                                </div>
+                            </div>
+
+                            <div className="my-4 my-md-0 col-12 col-sm-4 col-lg-3">
+                                <div className="banner_screen screen3 text-center">
+                                    <img className="moving_position_animatin" src={localImgLoad('images/hero-image-1.png')} alt="image" />
+                                </div>
+                            </div>
+
+                            <div className="col-12 col-sm-4 col-lg-2">
+                                <div className="banner_screen screen4 text-center">
+                                    <img className="moving_animation" src={localImgLoad('images/hero-image-2.png')} alt="image" />
+                                </div>
+                            </div>
+                            <div className="col-lg-2 d-none d-lg-block">
+                                <div className="banner_screen screen5 text-center">
+                                    <img className="moving_position_animatin" src={localImgLoad('images/hero-image-3.png')} alt="image" />
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+            <section className="row_am download_section homedark-download">
+                <div className="container">
+                    <ul className="app_btn" data-aos="fade-in" data-aos-duration="1500">
+                        <li>
+                            <a href="#" className="app_store">
+                                <img className="blue_img" src={localImgLoad('images/appstore_blue.png')} alt="image" />
+                                <img className="white_img" src={localImgLoad('images/appstore_white.png')} alt="image" />
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <img className="blue_img" src={localImgLoad('images/googleplay_blue.png')} alt="image" />
+                                <img className="white_img" src={localImgLoad('images/googleplay_white.png')} alt="image" />
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </section>
+            <section className="row_am statistic_section">
+                <div className="container">
+                    <ul className="app_statstic" id="counter" >
+                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12" data-aos="fade-up" data-aos-duration="1000">
+                            <li>
+                                <div className="icon">
+                                    <img src={localImgLoad('images/download-dark.png')} alt="image" />
+                                </div>
+                                <div className="text">
+                                    <p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
+                                    <p>Download</p>
+                                </div>
+                            </li>
+                        </div>
+
+                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1200">
+                            <li>
+                                <div className="icon">
+                                    <img src={localImgLoad('images/followers-dark.png')} alt="image" />
+                                </div>
+                                <div className="text">
+                                    <p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
+                                    <p>Followers</p>
+                                </div>
+                            </li>
+                        </div>
+
+                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1400">
+                            <li>
+                                <div className="icon">
+                                    <img src={localImgLoad('images/reviews-dark.png')} alt="image" />
+                                </div>
+                                <div className="text">
+                                    <p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
+                                    <p>Reviews</p>
+                                </div>
+                            </li>
+                        </div>
+
+                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1600">
+                            <li>
+                                <div className="icon">
+                                    <img src={localImgLoad('images/countries-dark.png')} alt="image" />
+                                </div>
+                                <div className="text">
+                                    <p><span className="counter-value" data-count="150">0</span><span>+</span></p>
+                                    <p>Countries</p>
+                                </div>
+                            </li>
+                        </div>
+                    </ul>
+                </div>
+            </section>
+            <section className="row_am features_section homedark-features" id="features">
+                <div className="container">
+                    <div className="features_inner">
+                        <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
+                            <h2><span>Features</span> that makes app different!</h2>
+                            <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy</p>
+                        </div>
+                        <div className="features_block">
+                            <div className="row">
+                                <div className="col-md-4">
+                                    <div className="feature_box" data-aos="fade-up" data-aos-duration="1500">
+                                        <div className="image">
+                                            <img src={localImgLoad('images/features1.png')} alt="image" />
+                                        </div>
+                                        <div className="text">
+                                            <h4>Secure data</h4>
+                                            <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="col-md-4">
+                                    <div className="feature_box" data-aos="fade-up" data-aos-duration="1700">
+                                        <div className="image">
+                                            <img src={localImgLoad('images/features2.png')} alt="image" />
+                                        </div>
+                                        <div className="text">
+                                            <h4>Automate everything</h4>
+                                            <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="col-md-4">
+                                    <div className="feature_box" data-aos="fade-up" data-aos-duration="1900">
+                                        <div className="image">
+                                            <img src={localImgLoad('images/features3.png')} alt="image" />
+                                        </div>
+                                        <div className="text">
+                                            <h4>Secure data</h4>
+                                            <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+            </section>
+            < AboutApp dark = {true}/>
+            <Design />
+            <Work dark = {true}/>
+            {/*<Testimonial />*/}
+            {/*<Trusted />*/}
+            {/*<Pricing />*/}
+            <Faq/>
+            {/*<Interface/>*/}
+            <Download />
+            <Story />
+            {ytShow &&
+                <>
+                    <div className="modal fade youtube-video show" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-modal="true" style={{paddingRight: "17px", display: "block"}}>
+                        <div className="modal-dialog" role="document">
+                            <div className="modal-content">
+                                <button id="close-video" type="button" className="button btn btn-default text-right" data-dismiss="modal">
+                                    <i className="icofont-close-line-circled" onClick={() => setytShow(false)}></i>
+                                </button>
+                                <div className="modal-body">
+                                    <div id="video-container" className="video-container">
+                                        <iframe id="youtubevideo" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&amp;mute=1" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>
+                                    </div>
+                                </div>
+                                <div className="modal-footer">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="purple_backdrop"></div>
+                </>}
+        </>
+    )
+}
+
+export default Lnd
\ No newline at end of file
diff --git a/app/lnd/LndParts/AboutApp/Main.js b/app/lnd/LndParts/AboutApp/Main.js
new file mode 100644
index 0000000..725f761
--- /dev/null
+++ b/app/lnd/LndParts/AboutApp/Main.js
@@ -0,0 +1,60 @@
+import { Link } from 'react-router-dom'
+import React from 'react'
+//import frame from '../../../../assets/images/about-frame.png'
+import frame from '../../../../assets/images/use-case-side-main.png'; //about-frame.png'
+import screen from '../../../../assets/images/use-case-side-extra.png'; //about-screen.png'
+import img1 from '../../../../assets/images/download.png'
+import img2 from '../../../../assets/images/followers.png'
+import img3 from '../../../../assets/images/reviews.png'
+import img4 from '../../../../assets/images/countries.png'
+
+const Main = ({ video, dark }) => {
+  return (
+    <>
+      <section className="row_am about_app_section _">
+        <div className="container">
+          <div className="row modern_ui_section">
+            <div className="col-lg-6">
+              <div className="about_img" data-aos="fade-in" data-aos-duration="1500">
+                <div className="frame_img">
+                  <img className="moving_position_animatin" src={frame} alt="image" />
+                </div>
+                <div className="screen_img">
+                  <img className="moving_animation" src={screen} alt="image" />
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-6">
+              <div className="about_text">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                  <h2>Motivate & Organize <br /> <span>Rewards</span></h2>
+                  <p>
+                    With a planned reward, the parent can introduce the family to earning and start financial education early.
+                  </p>
+                </div>
+
+
+                <ul className="design_block">
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Goals Completed</h4>
+                    <p>Motivate with rewards for goals completed, passing the exam, finishing chores, and learning new skills. </p>
+                  </li>
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Connect Family</h4>
+                    <p>It takes a village to raise a kid and share good news and encouragement from the more prominent family. Connect family to the achievements to boost encouragement. </p>
+                  </li>
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Find any Task </h4>
+                    <p>Make more, connect to the marketplace, and earn from appropriate tasks.</p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/app/lnd/LndParts/Design/Main.js b/app/lnd/LndParts/Design/Main.js
new file mode 100644
index 0000000..562eefd
--- /dev/null
+++ b/app/lnd/LndParts/Design/Main.js
@@ -0,0 +1,100 @@
+"use client"
+import React, { useState } from 'react'
+import localImgLoad from "../../../lib/localImgLoad"; // '../../../../lib/localImgLoad'
+
+import img1 from '../../../../assets/images/modern01.png'
+import img2 from '../../../../assets/images/secure_data.png'
+import img3 from '../../../../assets/images/modern02.png'
+import img4 from '../../../../assets/images/modern03.png'
+import Right from './Right'
+
+
+const Main = ({gredient}) => {
+
+    const [activeImg, setActiveImg] = useState(list[0].name)
+
+    const changeActiveImg = (name) => {
+        setActiveImg(name)
+    }
+
+  return (
+    <>
+        <section className={`row_am ${gredient && "gredient-bg"}`} >
+            {gredient &&
+            <div className="modernui_section_bg modernui-gredient"> 
+                <img src="assets/images/section-bg.png" alt="image"/> 
+            </div>
+            }
+            <div className="container">
+                <div className="p-0 appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                    <h3 className='title'>Set Chores, Set Goals <div className='section_sub_title'>Reward Accomplishments</div></h3>
+                    <p className=''>
+                    Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards.
+                    </p>
+                </div>
+                <div className="row mt-3 align-items-center">
+                    <div className="col-lg-6">
+                        <div className="w-100">
+                            <div className="appie-traffic-title section_title mb-3" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
+                                <h3 className='title text-center'>Assign Faster with</h3>
+                                <h3 className='w-100 title text-center d-flex justify-content-center flex-nowrap'>
+                                    <div className='color-blue italic'>wrench</div><div className='color-purple'>Agent</div>
+                                </h3>
+                            </div>
+                            <div className="row">
+                            {list?.map(({ icon, header, paragraph, name }, idx) => (
+                                <div className="col-12 mb-10" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
+                                    <div
+                                        className={`appie-traffic-service features appie-modern-design`}
+                                    >
+                                        <div className="icon">
+                                        <i className={icon} />
+                                        </div>
+                                        <h5 className="title">{header}</h5>
+                                        {/* <p>{paragraph}</p> */}
+                                    </div>
+                                </div>
+                            ))}
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-lg-6 mt-4 mt-lg-0">
+                        <Right />
+                    </div>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}
+
+export default Main
+
+
+
+const list = [
+      {
+        icon: 'fal fa-check',
+        header: 'Reward Goals Met',
+        paragraph: 'Set goals together and reward accomplishment',
+        name: 'reward-goals',
+      },
+      {
+        icon: 'fal fa-check',
+        header: 'Assign Regular Chores',
+        paragraph: 'Organize essential regular chores to be done',
+        name: 'assign-chores',
+      },
+      {
+        icon: 'fal fa-check',
+        header: 'Financial Education',
+        paragraph: 'Get Kids start early on money management',
+        name: 'financial-edu',
+      },
+      {
+        icon: 'fal fa-check',
+        header: 'Family Connect',
+        paragraph: 'Connect family, share accomplishments with friends',
+        name: 'family-connect',
+      },
+    ]
\ No newline at end of file
diff --git a/app/lnd/LndParts/Design/Right.js b/app/lnd/LndParts/Design/Right.js
new file mode 100644
index 0000000..e4f7f04
--- /dev/null
+++ b/app/lnd/LndParts/Design/Right.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import BGImage from "../../../../assets/images/sec-background.jpg";
+
+export default function Right() {
+  return (
+    <div className="p-1 w-100">
+        {/* <div className="appie-traffic-title section_title mb-0" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
+            <h3 className='title text-center'>Assign Faster with</h3>
+            <h3 className='title text-center d-flex justify-content-center flex-nowrap'>
+                <div className='color-blue italic'>wrench</div><div className='color-purple'>Agent</div>
+            </h3>
+        </div> */}
+        {/* <div className='px-2 w-100 mb-2'>  */}
+        <div className='color-purple text-center mb-2'>
+            {/* <h3 className='color-purple font-25 mb-10'>Ask our <span>&#x275B;&#x275B;<span className='color-blue italic'>wrench</span>Agent&#x275C;&#x275C;</span> Generative AI to assist</h3> */}
+            <h3 className='color-purple font-25 mb-10'>Ask our &#x275B;&#x275B;<span className='color-blue italic'>wrench</span><span className='color-purple'>Agent</span>&#x275C;&#x275C; Generative AI to assist</h3>
+            <h3 className='font_black font-20 mb-10'>&#x275B;&#x275B;Recommend  4 summer chores for a 12 years old&#x275C;&#x275C;</h3>
+        </div>
+        {/* </div> */}
+        {/* withFadeEdge-light-purple border-skyblue border-thin*/}
+        <div className="p-2 pt-3 bg-white custom-w-90 mx-auto border-r-10 overflow-hidden"
+            style={{ backgroundImage: `url(${BGImage})`, backgroundPosition: 'left center', backgroundRepeat: 'no-repeat' }}
+        >
+            <div className='generative-ai'>
+                {list?.map((item, idx) => (
+                    <div className="col-12 mb-20" key={idx}>
+                        <div
+                            className={`appie-traffic-service-two features appie-modern-design`}
+                        >
+                            <div className="icon">
+                            <i className='fal fa-check' />
+                            </div>
+                            <h5 className="title italic color-purple">{item}</h5>
+                        </div>
+                    </div>
+                ))}
+                <div className='w-100 d-flex justify-content-end'>
+                    <a className='main-btn' href={process.env.REACT_APP_DASH_URL_SIGNUP}>Get Started</a>
+                </div>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+
+
+const list = [
+    'Watering the plants and garden',
+    'Helping with meal preparation and cooking',
+    'Assisting with organizing and cleaning out a specific area of the house',
+    'Taking care of a pet, such as feeding, walking, and grooming'
+]
\ No newline at end of file
diff --git a/app/lnd/LndParts/Download/Main.js b/app/lnd/LndParts/Download/Main.js
new file mode 100644
index 0000000..bae2dff
--- /dev/null
+++ b/app/lnd/LndParts/Download/Main.js
@@ -0,0 +1,82 @@
+import { Link } from 'react-router-dom'
+import React, {useState} from 'react'
+import img from '../../../../assets/images/anim_line.png'
+import blueapp from '../../../../assets/images/appstore_blue.png'
+import blue from '../../../../assets/images/googleplay_blue.png'
+import screen from '../../../../assets/images/download-screen01.png'
+import screen1 from '../../../../assets/images/download-screen02.png'
+
+
+const Main = () => {
+    const [animate, setanimate] = useState()
+   
+
+    const [purple, setpurple] = useState()
+    window.addEventListener('scroll', function() {
+        const element = document.getElementsByClassName('free_text');
+        const position = element[0].getBoundingClientRect();
+        
+        if(position.top < window.innerHeight && position.bottom >= 0) {
+            const elm = document.getElementsByClassName("purple_backdrop");
+            elm[0].style.opacity = "1"; 
+        }else{
+            const elm = document.getElementsByClassName("purple_backdrop");
+            elm[0].style.opacity = "0"; 
+
+        }
+    });
+
+  return (
+    <>
+        <section className="row_am free_app_section review_freeapp" id="getstarted">
+            <div className="container">
+                <div className={`free_app_inner aos-init ${animate && "aos-animate"}`} data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100"> 
+                    <div className="anim_line dark_bg">
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                        <span><img src={img} alt="anim_line" /></span>
+                    </div>
+                    <div className="row">
+                        <div className="col-md-6">
+                            <div className="free_text">
+                                <div className="section_title">
+                                    <h2>Let’s download free from apple and play store</h2>
+                                    <p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
+                                    and typese tting indus orem Ipsum has beenthe standard</p>
+                                </div>
+                                <ul className="app_btn">
+                                <li>
+                                    <Link to="#">
+                                    <img src={blueapp} alt="image" />
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link to="#">
+                                    <img src={blue} alt="image" />
+                                    </Link>
+                                </li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div className="col-md-6">
+                            <div className="free_img">
+                                <img src={screen} alt="image" />
+                                <img className="mobile_mockup" src={screen1} alt="image" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <div className="purple_backdrop"></div>
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/app/lnd/LndParts/Faq/Main.js b/app/lnd/LndParts/Faq/Main.js
new file mode 100644
index 0000000..f2c8093
--- /dev/null
+++ b/app/lnd/LndParts/Faq/Main.js
@@ -0,0 +1,93 @@
+import React ,{ useState } from 'react'
+
+const Main = ({gredient}) => {
+
+    const[activeFaq, setActiveFaq] = useState({a : true})
+
+  return (
+    <>
+        <section className="row_am faq_section">
+        {gredient && <div className="faq_bg"> <img src="assets/images/section-bg.png" alt="image"/> </div>}
+            <div className="container">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
+                    <h2><span>FAQ</span> - Frequently Asked Questions</h2>
+                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                        standard dummy.</p>
+                </div>
+                <div className="faq_panel">
+                    <div className="accordion" id="accordionExample">
+                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
+                            <div className="card-header" id="headingOne">
+                                <h2 className="mb-0">
+                                <button type="button" className={`btn btn-link ${activeFaq.a && "active"}`} onClick= {() => setActiveFaq(activeFaq.a ? {a : false} : {a : true})} data-toggle="collapse" data-target="#collapseOne">
+                                {activeFaq.a ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>} How can i pay ?</button>
+                                </h2>
+                            </div>
+                            <div id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+                                <div className="card-body">
+                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
+                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
+                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
+                                    leap into electronic typesetting, remaining essentially unchanged.</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
+                            <div className="card-header" id="headingTwo">
+                                <h2 className="mb-0">
+                                <button type="button" className={`btn btn-link ${activeFaq.b && "active"}`} onClick= {() => setActiveFaq(activeFaq.b ? {b : false} : {b : true})} data-toggle="collapse"
+                                    data-target="#collapseTwo">{activeFaq.b ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>} How to setup account ?</button>
+                                </h2>
+                            </div>
+                            <div id="collapseTwo" className="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+                                <div className="card-body">
+                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
+                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
+                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
+                                    leap into electronic typesetting, remaining essentially unchanged.</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
+                            <div className="card-header" id="headingThree">
+                                <h2 className="mb-0">
+                                <button type="button" className={`btn btn-link ${activeFaq.c && "active"}`} onClick= {() => setActiveFaq(activeFaq.c ? {c : false} : {c : true})} data-toggle="collapse"
+                                    data-target="#collapseThree">{activeFaq.c ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>}What is process to get refund
+                                    ?</button>
+                                </h2>
+                            </div>
+                            <div id="collapseThree" className="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
+                                <div className="card-body">
+                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
+                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
+                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
+                                    leap into electronic typesetting, remaining essentially unchanged.</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
+                            <div className="card-header" id="headingFour">
+                                <h2 className="mb-0">
+                                <button type="button" className={`btn btn-link ${activeFaq.d && "active"}`} onClick= {() => setActiveFaq(activeFaq.d ? {d : false} : {d : true})} data-toggle="collapse"
+                                    data-target="#collapseFour">{activeFaq.d ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>}What is process to get refund
+                                    ?</button>
+                                </h2>
+                            </div>
+                            <div id="collapseFour" className="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
+                                <div className="card-body">
+                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has. been the
+                                    industrys standard dummy text ever since the when an unknown printer took a galley of type and
+                                    scrambled it to make a type specimen book. It has survived not only five cen turies but also the
+                                    leap into electronic typesetting, remaining essentially unchanged.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/app/lnd/LndParts/Features/Main.js b/app/lnd/LndParts/Features/Main.js
new file mode 100644
index 0000000..0e01a2d
--- /dev/null
+++ b/app/lnd/LndParts/Features/Main.js
@@ -0,0 +1,125 @@
+import React from 'react'
+import img1 from '../../../assets/images/secure_data.png'
+import img2 from '../../../assets/images/functional.png'
+import img3 from '../../../assets/images/live-chat.png'
+import img4 from '../../../assets/images/support.png'
+import img5 from '../../../assets/images/features_frame.png'
+
+const Main = ({video}) => {
+  return (
+    <>
+        {video ?
+        <section className="row_am features_section video-features" id="features">
+            <div className="container">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                <h2><span>Features</span> that makes app different!</h2>
+                <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                    standard dummy.</p>
+                </div>
+                <div className="feature_detail">
+                <div className="left_data feature_box">
+                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src="assets/images/secure.png" alt="image" />
+                    </div>
+                    <div className="text">
+                        <h4>Secure data</h4>
+                        <p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
+                    </div>
+                    </div>
+                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src="assets/images/abt_functional.png" alt="image" />
+                    </div>
+                    <div className="text">
+                        <h4>Fully functional</h4>
+                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
+                    </div>
+                    </div>
+                </div>
+                <div className="right_data feature_box">
+                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src="assets/images/communication.png" alt="image"/>
+                    </div>
+                    <div className="text">
+                        <h4>Live chat</h4>
+                        <p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
+                    </div>
+                    </div>
+                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src="assets/images/abt_support.png" alt="image" />
+                    </div>
+                    <div className="text">
+                        <h4>24-7 Support</h4>
+                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
+                    </div>
+                    </div>
+                </div>
+                <div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                    <img src="assets/images/features_frame.png" alt="image" />
+                </div>
+                </div>
+            </div>
+        </section>
+        :
+        <section className="row_am features_section" id="features">
+            <div className="container">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                <h2><span>Features</span> that makes app different!</h2>
+                <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                    standard dummy.</p>
+                </div>
+                <div className="feature_detail">
+                <div className="left_data feature_box">
+                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src={img1} alt="image" />
+                    </div>
+                    <div className="text">
+                        <h4>Secure data</h4>
+                        <p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
+                    </div>
+                    </div>
+                    <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src={img2} alt="image" />
+                    </div>
+                    <div className="text">
+                        <h4>Fully functional</h4>
+                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
+                    </div>
+                    </div>
+                </div>
+                <div className="right_data feature_box">
+                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src={img3} alt="image"/>
+                    </div>
+                    <div className="text">
+                        <h4>Live chat</h4>
+                        <p>Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.</p>
+                    </div>
+                    </div>
+                    <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
+                    <div className="icon">
+                        <img src={img4} alt="image" />
+                    </div>
+                    <div className="text">
+                        <h4>24-7 Support</h4>
+                        <p>Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.</p>
+                    </div>
+                    </div>
+                </div>
+                <div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                    <img src={img5} alt="image" />
+                </div>
+                </div>
+            </div>
+        </section>}
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/app/lnd/LndParts/Interface/Main.js b/app/lnd/LndParts/Interface/Main.js
new file mode 100644
index 0000000..3744a64
--- /dev/null
+++ b/app/lnd/LndParts/Interface/Main.js
@@ -0,0 +1,81 @@
+import OwlCarousel from 'react-owl-carousel'
+import React from 'react'
+import img1 from '../../../assets/images/screen-1.png'
+import img2 from '../../../assets/images/screen-2.png'
+import img3 from '../../../assets/images/screen-3.png'
+import img4 from '../../../assets/images/screen-4.png'
+import img5 from '../../../assets/images/screen-5.png'
+
+const Main = () => {
+
+    const screen_slider = {
+        loop:true,
+        margin:10,
+        nav:false,
+        autoplay: true,
+        smartSpeed: 1500,
+        center: true,
+        dots: true, 
+        responsive:{
+            0:{
+                items:2
+            },
+            600:{
+                items:3
+            },
+            1000:{
+                items:5
+            }
+        }
+    }
+  return (
+    <>
+        <section className="row_am interface_section">
+            <div className="container-fluid">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
+                    <h2>Beautifull <span>interface</span></h2>
+                    <p>
+                    Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.
+                    </p>
+                </div>
+                <div className="screen_slider" >
+                    <OwlCarousel id="screen_slider" {...screen_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={img1} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={img2} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={img3} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={img4} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={img5} alt="image" />
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="screen_frame_img">
+                                <img src={img3} alt="image" />
+                            </div>
+                        </div>
+                    </OwlCarousel>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/app/lnd/LndParts/Pricing/Main.js b/app/lnd/LndParts/Pricing/Main.js
new file mode 100644
index 0000000..fb75738
--- /dev/null
+++ b/app/lnd/LndParts/Pricing/Main.js
@@ -0,0 +1,442 @@
+import { Link } from 'react-router-dom'
+import React , { useState} from 'react'
+import img1 from '../../../assets/images/standard.png'
+import img2 from '../../../assets/images/unlimited.png'
+import img3 from '../../../assets/images/premium.png'
+
+const Main = ({gredient , video}) => {
+    
+    const[tog, setTog] = useState()
+
+  return (
+    <>
+        {gredient ?
+            <section className="row_am pricing_section gredient-pricing" id="pricing">
+                <div className="container">
+                    <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
+                    <h2>Best & simple <span>pricing</span></h2>
+                    <p className="gredient-p">Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                        standard dummy.</p>
+                    </div>
+                    <div className="toggle_block" data-aos="fade-up" data-aos-duration="1500">
+                        <span className={`month ${tog ? 'active' : ''}`}>Monthly</span>
+                        <div className="tog_block">
+                            <span className={`tog_btn ${tog && "month_active"}`} onClick = {() => setTog(tog === true ? false : true)}></span>
+                        </div>
+                        <span className="years">Yearly</span>
+                        <span className="offer">50% off</span>
+                    </div>
+
+                    <div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
+                        <div className="row">
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    <img src="assets/images/standard-one.png" alt="image" />
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Standard</h3>
+                                    <span>For the basics</span>
+                                    </div>
+                                    <span className="price">$15</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 5 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>50 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>10 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>2 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>Support on request</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                            <div className="col-md-4">
+                                <div className="pricing_block highlited_block">
+                                    <div className="icon">
+                                    <img src="assets/images/unlimited-one.png" alt="image"/>
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Unlimited</h3>
+                                    <span>For the professionals</span>
+                                    </div>
+                                    <span className="price">$99</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Unlimited Website</p>
+                                    </li>
+                                    <li>
+                                        <p>200 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>20 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>10 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    <img src="assets/images/premium-one.png" alt="image" />
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Premium</h3>
+                                    <span>For small team</span>
+                                    </div>
+                                    <span className="price">$55</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 10 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>100 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>15 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>4 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={`pricing_pannel yearly_plan ${tog ? 'active' : ''}`} >
+                        <div className="row">
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    <img src="assets/images/standard.png" alt="image" />
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Standard</h3>
+                                    <span>For the basics</span>
+                                    </div>
+                                    <span className="price">$150</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 10 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>100 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>25 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>4 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>Support on request</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+
+                            <div className="col-md-4">
+                                <div className="pricing_block highlited_block">
+                                    <div className="icon">
+                                    <img src="assets/images/unlimited.png" alt="image" />
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Unlimited</h3>
+                                    <span>For the professionals</span>
+                                    </div>
+                                    <span className="price">$999</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Unlimited Website</p>
+                                    </li>
+                                    <li>
+                                        <p>400 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>40 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>20 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    <img src="assets/images/premium.png" alt="image" />
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Premium</h3>
+                                    <span>For small team</span>
+                                    </div>
+                                    <span className="price">$550</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 20 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>200 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>25 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>8 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="contact_text" data-aos="fade-up" data-aos-duration="1500">Not sure what to choose ? <Link to="/contact">contact us</Link> for custom packages</p>
+                </div>
+            </section>
+        :
+            <section className="row_am pricing_section" id="pricing">
+                <div className="container">
+                    <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
+                    <h2>Best & simple <span>pricing</span></h2>
+                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                        standard dummy.</p>
+                    </div>
+                    <div className="toggle_block" data-aos="fade-up" data-aos-duration="1500">
+                        <span className={`month ${tog ? 'active' : ''}`}>Monthly</span>
+                        <div className="tog_block">
+                            <span className={`tog_btn ${tog && "month_active"}`} onClick = {() => setTog(tog === true ? false : true)}></span>
+                        </div>
+                        <span className="years">Yearly</span>
+                        <span className="offer">50% off</span>
+                    </div>
+
+                    <div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
+                        <div className="row">
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Standard</h3>
+                                    <span>For the basics</span>
+                                    </div>
+                                    <span className="price">$15</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 5 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>50 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>10 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>2 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>Support on request</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                            <div className="col-md-4">
+                                <div className="pricing_block highlited_block">
+                                    <div className="icon">
+                                    { video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2} alt="image"/> }
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Unlimited</h3>
+                                    <span>For the professionals</span>
+                                    </div>
+                                    <span className="price">$99</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Unlimited Website</p>
+                                    </li>
+                                    <li>
+                                        <p>200 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>20 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>10 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    {video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Premium</h3>
+                                    <span>For small team</span>
+                                    </div>
+                                    <span className="price">$55</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 10 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>100 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>15 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>4 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={`pricing_pannel yearly_plan ${tog ? 'active' : ''}`} >
+                        <div className="row">
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Standard</h3>
+                                    <span>For the basics</span>
+                                    </div>
+                                    <span className="price">$150</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 10 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>100 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>25 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>4 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>Support on request</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+
+                            <div className="col-md-4">
+                                <div className="pricing_block highlited_block">
+                                    <div className="icon">
+                                    { video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2}alt="image"/> }
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Unlimited</h3>
+                                    <span>For the professionals</span>
+                                    </div>
+                                    <span className="price">$999</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Unlimited Website</p>
+                                    </li>
+                                    <li>
+                                        <p>400 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>40 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>20 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+
+                            <div className="col-md-4">
+                                <div className="pricing_block">
+                                    <div className="icon">
+                                    {video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
+                                    </div>
+                                    <div className="pkg_name">
+                                    <h3>Premium</h3>
+                                    <span>For small team</span>
+                                    </div>
+                                    <span className="price">$550</span>
+                                    <ul className="benifits">
+                                    <li>
+                                        <p>Up to 20 Website</p>
+                                    </li>
+                                    <li>
+                                        <p>200 GB disk space</p>
+                                    </li>
+                                    <li>
+                                        <p>25 Customize sub pages</p>
+                                    </li>
+                                    <li>
+                                        <p>8 Domains access</p>
+                                    </li>
+                                    <li>
+                                        <p>24/7 Customer support</p>
+                                    </li>
+                                    </ul>
+                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="contact_text" data-aos="fade-up" data-aos-duration="1500">Not sure what to choose ? <Link to="/contact">contact us</Link> for custom packages</p>
+                </div>
+            </section>
+        }
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/app/lnd/LndParts/Story/Main.js b/app/lnd/LndParts/Story/Main.js
new file mode 100644
index 0000000..f40c2e4
--- /dev/null
+++ b/app/lnd/LndParts/Story/Main.js
@@ -0,0 +1,64 @@
+import { Link } from 'react-router-dom'
+import React from 'react'
+import story1 from '../../../../assets/images/story01.png'
+import story2 from '../../../../assets/images/story02.png'
+import story3 from '../../../../assets/images/story03.png'
+
+const Main = () => {
+  return (
+    <>
+        <section className="row_am latest_story" id="blog">
+            <div className="container">
+                <div className="section_title" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
+                    <h2>Read latest <span>story</span></h2>
+                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
+                </div>
+                <div className="row">
+                    <div className="col-md-4">
+                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
+                            <div className="story_img">
+                            <img src={story1} alt="image" />
+                            <span>45 min ago</span>
+                            </div>
+                            <div className="story_text">
+                                <h3>Cool features added!</h3>
+                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
+                                industry lorem Ipsum has.</p>
+                                <Link to="/blog-single">READ MORE</Link>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-md-4">
+                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
+                            <div className="story_img">
+                            <img src={story2} alt="image" />
+                            <span>45 min ago</span>
+                            </div>
+                            <div className="story_text">
+                                <h3>Top rated app! Yupp.</h3>
+                                <p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
+                                <Link to="/blog-single">READ MORE</Link>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-md-4">
+                        <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
+                            <div className="story_img">
+                            <img src={story3} alt="image" />
+                            <span>45 min ago</span>
+                            </div>
+                            <div className="story_text">
+                                <h3>Creative ideas on app.</h3>
+                                <p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
+                                <Link to="/blog-single">READ MORE</Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section> 
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/app/lnd/LndParts/Testimonial/Main.js b/app/lnd/LndParts/Testimonial/Main.js
new file mode 100644
index 0000000..42809a4
--- /dev/null
+++ b/app/lnd/LndParts/Testimonial/Main.js
@@ -0,0 +1,126 @@
+import OwlCarousel from 'react-owl-carousel'
+import { Link } from 'react-router-dom'
+import React from 'react'
+import user1 from '../../../../assets/images/testimonial_user1.png'
+import user2 from '../../../../assets/images/testimonial_user2.png'
+import user3 from '../../../../assets/images/testimonial_user3.png'
+import user4 from '../../../../assets/images/avtar_testimonial.png'
+
+const Main = () => {
+
+    const testimonial_slider = {
+        loop:true,
+        margin:10,
+        nav:false,
+        autoplay: true,
+        smartSpeed: 1500,
+        dots: true, 
+        responsive:{
+            0:{
+                items:1
+            },
+            600:{
+                items:1
+            },
+            1000:{
+                items:1
+            }
+        }
+    }
+  return (
+    <>
+        <section className="row_am testimonial_section"> 
+            <div className="container">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
+                    <h2>What our <span>customer say</span></h2>
+                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                        standard dummy.</p>
+                </div>
+                <div className="testimonial_block" data-aos="fade-in" data-aos-duration="1500">
+                    <OwlCarousel id="testimonial_slider" {...testimonial_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
+                        <div className="item">
+                            <div className="testimonial_slide_box">
+                                <div className="rating">
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                </div>
+                                <p className="review">
+                                “ Lorem Ipsum is simply dummy text of the printing and typese tting us orem Ipsum has been lorem
+                                beenthe standar dummy. ”
+                                </p>
+                                <div className="testimonial_img">
+                                <img src={user1} alt="image" />
+                                </div>
+                                <h3>Shayna John</h3>
+                                <span className="designation">Careative inc</span>
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="testimonial_slide_box">
+                                <div className="rating">
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                </div>
+                                <p className="review">
+                                “ Lorem Ipsum is simply dummy text of the printing and typese tting us orem Ipsum has been lorem
+                                beenthe standar dummy. ”
+                                </p>
+                                <div className="testimonial_img">
+                                <img src={user2} alt="image" />
+                                </div>
+                                <h3>Willium Den</h3>
+                                <span className="designation">Careative inc</span>
+                            </div>
+                        </div>
+                        <div className="item">
+                            <div className="testimonial_slide_box">
+                                <div className="rating">
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                <span><i className="icofont-star"></i></span>
+                                </div>
+                                <p className="review">
+                                “ Lorem Ipsum is simply dummy text of the printing and typese tting us orem Ipsum has been lorem
+                                beenthe standar dummy. ”
+                                </p>
+                                <div className="testimonial_img">
+                                <img src={user3} alt="image" />
+                                </div>
+                                <h3>Cyrus Stephen</h3>
+                                <span className="designation">Careative inc</span>
+                            </div>
+                        </div>
+                    </OwlCarousel>
+
+                    <div className="total_review">
+                        <div className="rating">
+                        <span><i className="icofont-star"></i></span>
+                        <span><i className="icofont-star"></i></span>
+                        <span><i className="icofont-star"></i></span>
+                        <span><i className="icofont-star"></i></span>
+                        <span><i className="icofont-star"></i></span>
+                        <p>5.0 / 5.0</p>
+                        </div>
+                        <h3>2578</h3>
+                        <Link to="/review">TOTAL USER REVIEWS <i className="icofont-arrow-right"></i></Link>
+                    </div>
+
+                    <div className="avtar_faces">
+                        <img src={user4} alt="image" />
+                    </div>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/app/lnd/LndParts/Trusted/Main.js b/app/lnd/LndParts/Trusted/Main.js
new file mode 100644
index 0000000..6968f45
--- /dev/null
+++ b/app/lnd/LndParts/Trusted/Main.js
@@ -0,0 +1,89 @@
+import OwlCarousel from 'react-owl-carousel'
+import React from 'react'
+import img1 from '../../../assets/images/paypal.png'
+import img2 from '../../../assets/images/spoty.png'
+import img3 from '../../../assets/images/shopboat.png'
+import img4 from '../../../assets/images/slack.png'
+import img5 from '../../../assets/images/envato.png'
+
+const Main = () => {
+    const company_slider = {
+        loop:true,
+        margin:10,
+        nav:false,
+        autoplay: true,
+        smartSpeed: 1500,
+        dots: true, 
+        responsive:{
+            0:{
+                items:2
+            },
+            600:{
+                items:3
+            },
+            1000:{
+                items:5
+            }
+        }
+    }
+
+  return (
+    <>
+        <section className="row_am trusted_section">
+            <div className="container">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                <h2>Trusted by <span>150+</span> companies</h2>
+                <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                    standard dummy.</p>
+                </div>
+                <div className="company_logos" >
+                <OwlCarousel id="company_slider" {...company_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img1} alt="image" />
+                    </div>
+                    </div>
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img2} alt="image" />
+                    </div>
+                    </div>
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img3} alt="image" />
+                    </div>
+                    </div>
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img4} alt="image" />
+                    </div>
+                    </div>
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img5} alt="image" />
+                    </div>
+                    </div>
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img1} alt="image" />
+                    </div>
+                    </div>
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img2} alt="image" />
+                    </div>
+                    </div>
+                    <div className="item">
+                    <div className="logo">
+                        <img src={img3} alt="image" />
+                    </div>
+                    </div>
+                </OwlCarousel>
+                </div>
+            </div>
+        </section>
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file
diff --git a/app/lnd/LndParts/Work/Main.js b/app/lnd/LndParts/Work/Main.js
new file mode 100644
index 0000000..4016487
--- /dev/null
+++ b/app/lnd/LndParts/Work/Main.js
@@ -0,0 +1,167 @@
+import React , {useState} from 'react'
+import { Link } from 'react-router-dom'
+import img from '../../../../assets/images/download_app.jpg'
+import img1 from '../../../../assets/images/create_account.jpg'
+import img2 from '../../../../assets/images/enjoy_app.jpg'
+import line from '../../../../assets/images/anim_line.png'
+import banner from '../../../../assets/images/banner-shape1.png'
+import banner1 from '../../../../assets/images/banner-shape2.png'
+import banner2 from '../../../../assets/images/banner-shape3.png'
+import video from '../../../../assets/images/play_icon.png'
+import ytvideo from '../../../../assets/images/yt_thumb.png'
+
+const Main = ({dark}) => {
+    const [ytShow , setytShow] = useState (false)
+
+  return (
+    <>
+        <section className="row_am how_it_works" id="how_it_work">
+            <div className="container">
+                <div className={`how_it_inner ${dark && "dark"}`}>
+                    <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
+                        <h2><span>How it works</span> - 3 easy steps</h2>
+                        <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe
+                        standard dummy.</p>
+                    </div>
+                    <div className="step_block">
+                        <ul>
+                            <li>
+                                <div className="step_text" data-aos="fade-right" data-aos-duration="1500">
+                                <h4>Download app</h4>
+                                <div className="app_icon">
+                                    <Link to="#"><i className="icofont-brand-android-robot"></i></Link>
+                                    <Link to="#"><i className="icofont-brand-apple"></i></Link>
+                                    <Link to="#"><i className="icofont-brand-windows"></i></Link>
+                                </div>
+                                <p>Download App either for Windows, Mac or Android</p>
+                                </div>
+                                <div className="step_number">
+                                <h3>01</h3>
+                                </div>
+                                <div className="step_img" data-aos="fade-left" data-aos-duration="1500">
+                                <img src={img} alt="image" />
+                                </div>
+                            </li>
+                            <li>
+                                <div className="step_text" data-aos="fade-left" data-aos-duration="1500">
+                                <h4>Create account</h4>
+                                <span>14 days free trial</span>
+                                <p>Sign up free for App account. One account for all devices.</p>
+                                </div>
+                                <div className="step_number"> 
+                                <h3>02</h3>
+                                </div>
+                                <div className="step_img" data-aos="fade-right" data-aos-duration="1500">
+                                <img src={img1} alt="image" />
+                                </div>
+                            </li>
+                            <li>
+                                <div className="step_text" data-aos="fade-right" data-aos-duration="1500">
+                                <h4>It’s done, enjoy the app</h4>
+                                <span>Have any questions check our <Link to="#">FAQs</Link></span>
+                                <p>Get most amazing app experience,Explore and share the app</p>
+                                </div>
+                                <div className="step_number">
+                                <h3>03</h3>
+                                </div>
+                                <div className="step_img" data-aos="fade-left" data-aos-duration="1500">
+                                <img src={img2} alt="image" />
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                
+                {dark ?
+                <div className="yt_video" style={{display: "none"}} data-aos="fade-in" data-aos-duration="1500">
+                    <div className="anim_line dark_bg">
+                        
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                    </div>
+                    <div className="thumbnil">
+                         
+                        <span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image"/> </span>
+                        <span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image"/> </span>
+                        <span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image"/> </span>
+                        <img src="assets/images/yt_thumb.png" alt="image" />
+                        <Link to="#" className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
+                        <span className="play_btn">
+                            <img src={video} alt="image" />
+                            <div className="waves-block">
+                            <div className="waves wave-1"></div>
+                            <div className="waves wave-2"></div>
+                            <div className="waves wave-3"></div>
+                            </div>
+                        </span>
+                        Let’s see virtually how it works
+                        <span>Watch video</span>
+                        </Link>
+                    </div>
+                </div> :
+                <div className="yt_video" data-aos="fade-in" data-aos-duration="1500">
+                    <div className="anim_line dark_bg">
+                    <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        <span><img src={line} alt="anim_line" /></span>
+                        
+                    </div>
+                    <div className="thumbnil">
+                        <span className="banner_shape1"> <img src={banner} alt="image"/> </span>
+                        <span className="banner_shape2"> <img src={banner1} alt="image"/> </span>
+                        <span className="banner_shape3"> <img src={banner2} alt="image"/> </span>
+                        <img src={ytvideo} alt="image" />
+                        <Link to="#" className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
+                        <span className="play_btn">
+                            <img src={video} alt="image" />
+                            <div className="waves-block">
+                            <div className="waves wave-1"></div>
+                            <div className="waves wave-2"></div>
+                            <div className="waves wave-3"></div>
+                            </div>
+                        </span>
+                        Let’s see virtually how it works
+                        <span>Watch video</span>
+                        </Link>
+                    </div>
+                </div>}
+            </div>
+        </section>
+        {ytShow &&
+        <>
+        <div className="modal fade youtube-video show" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-modal="true" style={{paddingRight: "17px", display: "block"}}>
+            <div className="modal-dialog" role="document">
+                <div className="modal-content">
+                <button id="close-video" type="button" className="button btn btn-default text-right" data-dismiss="modal">
+                    <i className="icofont-close-line-circled" onClick={() => setytShow(false)}></i>
+                </button>
+                    <div className="modal-body">
+                        <div id="video-container" className="video-container">
+                            <iframe id="youtubevideo" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&amp;mute=1" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>
+                        </div>        
+                    </div>
+                    <div className="modal-footer">
+                    </div>
+                </div> 
+            </div>
+        </div>
+        <div className="purple_backdrop"></div>
+        </>}
+    </>
+  )
+}
+
+export default Main
\ No newline at end of file