From 1bd5892cc4a6542c414e237e1fd59f1e92ccd64b Mon Sep 17 00:00:00 2001 From: "CHIEFSOFT\\ameye" Date: Mon, 29 Jul 2024 13:33:26 -0400 Subject: [PATCH] fix --- app/components/FeaturesHomeOne.js | 18 +- app/components/FooterHomeOne.js | 5 +- app/components/HomeOne.js | 16 +- app/components/NextAfterHero.js | 2 +- app/components/ServicesHomeOne.js | 8 +- app/lib/CounterUpCom.js | 22 ++ app/lib/LazyImage.js | 52 ++++ app/lib/SkeletonLoaders.js | 14 + app/lib/StickyMenu.js | 12 + app/lib/TopToBottom.js | 15 + app/lib/localImgLoad.js | 2 + app/lnd/Lnd.js | 363 ++++++++++++++++++++++ app/lnd/LndParts/AboutApp/Main.js | 60 ++++ app/lnd/LndParts/Design/Main.js | 100 ++++++ app/lnd/LndParts/Design/Right.js | 53 ++++ app/lnd/LndParts/Download/Main.js | 82 +++++ app/lnd/LndParts/Faq/Main.js | 93 ++++++ app/lnd/LndParts/Features/Main.js | 125 ++++++++ app/lnd/LndParts/Interface/Main.js | 81 +++++ app/lnd/LndParts/Pricing/Main.js | 442 +++++++++++++++++++++++++++ app/lnd/LndParts/Story/Main.js | 64 ++++ app/lnd/LndParts/Testimonial/Main.js | 126 ++++++++ app/lnd/LndParts/Trusted/Main.js | 89 ++++++ app/lnd/LndParts/Work/Main.js | 167 ++++++++++ 24 files changed, 1986 insertions(+), 25 deletions(-) create mode 100644 app/lib/CounterUpCom.js create mode 100644 app/lib/LazyImage.js create mode 100644 app/lib/SkeletonLoaders.js create mode 100644 app/lib/StickyMenu.js create mode 100644 app/lib/TopToBottom.js create mode 100644 app/lib/localImgLoad.js create mode 100644 app/lnd/Lnd.js create mode 100644 app/lnd/LndParts/AboutApp/Main.js create mode 100644 app/lnd/LndParts/Design/Main.js create mode 100644 app/lnd/LndParts/Design/Right.js create mode 100644 app/lnd/LndParts/Download/Main.js create mode 100644 app/lnd/LndParts/Faq/Main.js create mode 100644 app/lnd/LndParts/Features/Main.js create mode 100644 app/lnd/LndParts/Interface/Main.js create mode 100644 app/lnd/LndParts/Pricing/Main.js create mode 100644 app/lnd/LndParts/Story/Main.js create mode 100644 app/lnd/LndParts/Testimonial/Main.js create mode 100644 app/lnd/LndParts/Trusted/Main.js create mode 100644 app/lnd/LndParts/Work/Main.js 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 ( <> - + {/* */}
THIS IS HOME
+ + + {/* */} + {/* */} + ); } @@ -36,7 +40,7 @@ export default HomeOne; {/* */} // // - + // // // // 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 ? : 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 ( + {alt} + ); +} + +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 `
` 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 `
` element with the class name "image-skeleton-loader and blog-text-skeleton-loader". + */ +export const ImageLoader = () =>
; + +export const BlogLoader = () =>
+ + \ 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 ( +// <> +// +// {/* */} +// +//
+//

Dummy Empty Page

+//
+// +// +// +// ); +// } +// +// 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 ( + <> + + + {/*
+
+
+ +
+
+
*/} +
+
+
+ image + image + image + +
+
+

Best way to manage your customers easily.

+

Lorem Ipsum is simply dummy text of the printing and setting indus orem Ipsum has been the industrys standard dummy text ever.

+
+ +
+
+
+
+
+
+
+
+ image +
+
+ +
+
+ image +
+
+ +
+
+ image +
+
+ +
+
+ image +
+
+
+
+ image +
+
+
+ +
+
+
+
+
+ +
+
+
+
+
    +
    +
  • +
    + image +
    +
    +

    0M+

    +

    Download

    +
    +
    • +
    + +
    +
  • +
    + image +
    +
    +

    0 M+

    +

    Followers

    +
    +
    • +
    + +
    +
  • +
    + image +
    +
    +

    1500+

    +

    Reviews

    +
    +
    • +
    + +
    +
  • +
    + image +
    +
    +

    0+

    +

    Countries

    +
    +
    • +
    +
+
+
+
+
+
+
+

Features that makes app different!

+

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe standard dummy

+
+
+
+
+
+
+ image +
+
+

Secure data

+

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe standard dummy.

+
+
+
+ +
+
+
+ image +
+
+

Automate everything

+

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe standard dummy.

+
+
+
+ +
+
+
+ image +
+
+

Secure data

+

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe standard dummy.

+
+
+
+
+ +
+ +
+ +
+
+ < AboutApp dark = {true}/> + + + {/**/} + {/**/} + {/**/} + + {/**/} + + + {ytShow && + <> + +
+ } + + ) +} + +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 ( + <> +
+
+
+
+
+
+ image +
+
+ image +
+
+
+
+
+
+

Motivate & Organize
Rewards

+

+ With a planned reward, the parent can introduce the family to earning and start financial education early. +

+
+ + +
    +
  • +

    Goals Completed

    +

    Motivate with rewards for goals completed, passing the exam, finishing chores, and learning new skills.

    +
    • +
  • +

    Connect Family

    +

    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.

    +
    • +
  • +

    Find any Task

    +

    Make more, connect to the marketplace, and earn from appropriate tasks.

    +
    • +
+
+
+
+
+
+ + ) +} + +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 ( + <> +
+ {gredient && +
+ image +
+ } +
+
+

Set Chores, Set Goals
Reward Accomplishments

+

+ Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards. +

+
+
+
+
+
+

Assign Faster with

+

+
wrench
Agent
+

+
+
+ {list?.map(({ icon, header, paragraph, name }, idx) => ( +
changeActiveImg(name)} style={{cursor: 'pointer'}}> +
+
+ +
+
{header}
+ {/*

{paragraph}

*/} +
+
+ ))} +
+
+
+
+ +
+
+
+
+ + ) +} + +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 ( +
+ {/*
+

Assign Faster with

+

+
wrench
Agent
+

+
*/} + {/*
  */} +
+ {/*

Ask our ❛❛wrenchAgent❜❜ Generative AI to assist

*/} +

Ask our ❛❛wrenchAgent❜❜ Generative AI to assist

+

❛❛Recommend 4 summer chores for a 12 years old❜❜

+
+ {/*
*/} + {/* withFadeEdge-light-purple border-skyblue border-thin*/} +
+
+ {list?.map((item, idx) => ( +
+
+
+ +
+
{item}
+
+
+ ))} + +
+
+
+ ) +} + + + +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 ( + <> +
+
+
+
+ anim_line + anim_line + anim_line + anim_line + anim_line + anim_line + anim_line + anim_line + anim_line +
+
+
+
+
+

Let’s download free from apple and play store

+

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

+
+
    +
  • + + image + +
    • +
  • + + image + +
    • +
+
+
+
+
+ image + image +
+
+
+
+
+
+
+ + ) +} + +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 ( + <> +
+ {gredient &&
image
} +
+
+

FAQ - Frequently Asked Questions

+

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe + standard dummy.

+
+
+
+
+
+

+ +

+
+
+
+

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.

+
+
+
+
+
+

+ +

+
+
+
+

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.

+
+
+
+
+
+

+ +

+
+
+
+

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.

+
+
+
+
+
+

+ +

+
+
+
+

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.

+
+
+
+
+
+
+
+ + ) +} + +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 ? +
+
+
+

Features that makes app different!

+

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe + standard dummy.

+
+
+
+
+
+ image +
+
+

Secure data

+

Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.

+
+
+
+
+ image +
+
+

Fully functional

+

Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.

+
+
+
+
+
+
+ image +
+
+

Live chat

+

Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.

+
+
+
+
+ image +
+
+

24-7 Support

+

Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.

+
+
+
+
+ image +
+
+
+
+ : +
+
+
+

Features that makes app different!

+

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe + standard dummy.

+
+
+
+
+
+ image +
+
+

Secure data

+

Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.

+
+
+
+
+ image +
+
+

Fully functional

+

Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.

+
+
+
+
+
+
+ image +
+
+

Live chat

+

Lorem Ipsum is simply dummy text of the printing and type setting indus ideas.

+
+
+
+
+ image +
+
+

24-7 Support

+

Simply dummy text of the printing and typesetting indus lorem Ipsum is dummy.

+
+
+
+
+ image +
+
+
+
} + + ) +} + +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 ( + <> +
+
+
+

Beautifull interface

+

+ Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe standard dummy. +

+
+
+ +
+
+ image +
+
+
+
+ image +
+
+
+
+ image +
+
+
+
+ image +
+
+
+
+ image +
+
+
+
+ image +
+
+ +
+
+
+ + ) +} + +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 ? +
+
+
+

Best & simple pricing

+

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe + standard dummy.

+
+
+ Monthly +
+ setTog(tog === true ? false : true)}> +
+ Yearly + 50% off +
+ +
+
+
+
+
+ image +
+
+

Standard

+ For the basics +
+ $15 +
    +
  • +

    Up to 5 Website

    +
    • +
  • +

    50 GB disk space

    +
    • +
  • +

    10 Customize sub pages

    +
    • +
  • +

    2 Domains access

    +
    • +
  • +

    Support on request

    +
    • +
+ BUY NOW +
+
+
+
+
+ image +
+
+

Unlimited

+ For the professionals +
+ $99 +
    +
  • +

    Unlimited Website

    +
    • +
  • +

    200 GB disk space

    +
    • +
  • +

    20 Customize sub pages

    +
    • +
  • +

    10 Domains access

    +
    • +
  • +

    24/7 Customer support

    +
    • +
+ BUY NOW +
+
+
+
+
+ image +
+
+

Premium

+ For small team +
+ $55 +
    +
  • +

    Up to 10 Website

    +
    • +
  • +

    100 GB disk space

    +
    • +
  • +

    15 Customize sub pages

    +
    • +
  • +

    4 Domains access

    +
    • +
  • +

    24/7 Customer support

    +
    • +
+ BUY NOW +
+
+
+
+ +
+
+
+
+
+ image +
+
+

Standard

+ For the basics +
+ $150 +
    +
  • +

    Up to 10 Website

    +
    • +
  • +

    100 GB disk space

    +
    • +
  • +

    25 Customize sub pages

    +
    • +
  • +

    4 Domains access

    +
    • +
  • +

    Support on request

    +
    • +
+ BUY NOW +
+
+ +
+
+
+ image +
+
+

Unlimited

+ For the professionals +
+ $999 +
    +
  • +

    Unlimited Website

    +
    • +
  • +

    400 GB disk space

    +
    • +
  • +

    40 Customize sub pages

    +
    • +
  • +

    20 Domains access

    +
    • +
  • +

    24/7 Customer support

    +
    • +
+ BUY NOW +
+
+ +
+
+
+ image +
+
+

Premium

+ For small team +
+ $550 +
    +
  • +

    Up to 20 Website

    +
    • +
  • +

    200 GB disk space

    +
    • +
  • +

    25 Customize sub pages

    +
    • +
  • +

    8 Domains access

    +
    • +
  • +

    24/7 Customer support

    +
    • +
+ BUY NOW +
+
+
+
+ +

Not sure what to choose ? contact us for custom packages

+
+
+ : +
+
+
+

Best & simple pricing

+

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe + standard dummy.

+
+
+ Monthly +
+ setTog(tog === true ? false : true)}> +
+ Yearly + 50% off +
+ +
+
+
+
+
+ { video ? image : image } +
+
+

Standard

+ For the basics +
+ $15 +
    +
  • +

    Up to 5 Website

    +
    • +
  • +

    50 GB disk space

    +
    • +
  • +

    10 Customize sub pages

    +
    • +
  • +

    2 Domains access

    +
    • +
  • +

    Support on request

    +
    • +
+ BUY NOW +
+
+
+
+
+ { video ? image : image } +
+
+

Unlimited

+ For the professionals +
+ $99 +
    +
  • +

    Unlimited Website

    +
    • +
  • +

    200 GB disk space

    +
    • +
  • +

    20 Customize sub pages

    +
    • +
  • +

    10 Domains access

    +
    • +
  • +

    24/7 Customer support

    +
    • +
+ BUY NOW +
+
+
+
+
+ {video ? image : image } +
+
+

Premium

+ For small team +
+ $55 +
    +
  • +

    Up to 10 Website

    +
    • +
  • +

    100 GB disk space

    +
    • +
  • +

    15 Customize sub pages

    +
    • +
  • +

    4 Domains access

    +
    • +
  • +

    24/7 Customer support

    +
    • +
+ BUY NOW +
+
+
+
+ +
+
+
+
+
+ { video ? image : image } +
+
+

Standard

+ For the basics +
+ $150 +
    +
  • +

    Up to 10 Website

    +
    • +
  • +

    100 GB disk space

    +
    • +
  • +

    25 Customize sub pages

    +
    • +
  • +

    4 Domains access

    +
    • +
  • +

    Support on request

    +
    • +
+ BUY NOW +
+
+ +
+
+
+ { video ? image : } +
+
+

Unlimited

+ For the professionals +
+ $999 +
    +
  • +

    Unlimited Website

    +
    • +
  • +

    400 GB disk space

    +
    • +
  • +

    40 Customize sub pages

    +
    • +
  • +

    20 Domains access

    +
    • +
  • +

    24/7 Customer support

    +
    • +
+ BUY NOW +
+
+ +
+
+
+ {video ? image : image } +
+
+

Premium

+ For small team +
+ $550 +
    +
  • +

    Up to 20 Website

    +
    • +
  • +

    200 GB disk space

    +
    • +
  • +

    25 Customize sub pages

    +
    • +
  • +

    8 Domains access

    +
    • +
  • +

    24/7 Customer support

    +
    • +
+ BUY NOW +
+
+
+
+ +

Not sure what to choose ? contact us for custom packages

+
+
+ } + + ) +} + +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 ( + <> +
+
+
+

Read latest story

+

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe standard dummy.

+
+
+
+
+
+ image + 45 min ago +
+
+

Cool features added!

+

Lorem Ipsum is simply dummy text of the printing and typesetting + industry lorem Ipsum has.

+ READ MORE +
+
+
+
+
+
+ image + 45 min ago +
+
+

Top rated app! Yupp.

+

Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.

+ READ MORE +
+
+
+
+
+
+ image + 45 min ago +
+
+

Creative ideas on app.

+

Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.

+ READ MORE +
+
+
+
+
+
+ + ) +} + +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 ( + <> +
+
+
+

What our customer say

+

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe + standard dummy.

+
+
+ +
+
+
+ + + + + +
+

+ “ Lorem Ipsum is simply dummy text of the printing and typese tting us orem Ipsum has been lorem + beenthe standar dummy. ” +

+
+ image +
+

Shayna John

+ Careative inc +
+
+
+
+
+ + + + + +
+

+ “ Lorem Ipsum is simply dummy text of the printing and typese tting us orem Ipsum has been lorem + beenthe standar dummy. ” +

+
+ image +
+

Willium Den

+ Careative inc +
+
+
+
+
+ + + + + +
+

+ “ Lorem Ipsum is simply dummy text of the printing and typese tting us orem Ipsum has been lorem + beenthe standar dummy. ” +

+
+ image +
+

Cyrus Stephen

+ Careative inc +
+
+ + +
+
+ + + + + +

5.0 / 5.0

+
+

2578

+ TOTAL USER REVIEWS +
+ +
+ image +
+
+
+
+ + ) +} + +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 ( + <> +
+
+
+

Trusted by 150+ companies

+

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe + standard dummy.

+
+
+ +
+
+ image +
+
+
+
+ image +
+
+
+
+ image +
+
+
+
+ image +
+
+
+
+ image +
+
+
+
+ image +
+
+
+
+ image +
+
+
+
+ image +
+
+ +
+
+
+ + ) +} + +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 ( + <> +
+
+
+
+

How it works - 3 easy steps

+

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe + standard dummy.

+
+
+
    +
  • +
    +

    Download app

    +
    + + + +
    +

    Download App either for Windows, Mac or Android

    +
    +
    +

    01

    +
    +
    + image +
    +
    • +
  • +
    +

    Create account

    + 14 days free trial +

    Sign up free for App account. One account for all devices.

    +
    +
    +

    02

    +
    +
    + image +
    +
    • +
  • +
    +

    It’s done, enjoy the app

    + Have any questions check our FAQs +

    Get most amazing app experience,Explore and share the app

    +
    +
    +

    03

    +
    +
    + image +
    +
    • +
+
+
+ + {dark ? +
+
+ + anim_line + anim_line + anim_line + anim_line + anim_line + anim_line + anim_line + anim_line + anim_line +
+
+ + image + image + image + image + setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU"> + + image +
+
+
+
+
+ + Let’s see virtually how it works + Watch video + +
+
: +
+
+ anim_line + anim_line + anim_line + anim_line + anim_line + anim_line + anim_line + anim_line + anim_line + +
+
+ image + image + image + image + setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU"> + + image +
+
+
+
+
+ + Let’s see virtually how it works + Watch video + +
+
} +
+
+ {ytShow && + <> + +
+ } + + ) +} + +export default Main \ No newline at end of file