adjusted spacing points for the service feature

.gitignore

@@ -18,6 +18,8 @@
 .env.test.local
 .env.production.local
 
+.idea
+
 
 npm-debug.log*
 yarn-debug.log*

src/App.js

@@ -1,7 +1,19 @@
 import Routes from './Routes';
+import { Redirect, useLocation } from 'react-router-dom';
+
 
 function App() {
-    return <Routes />;
+    const {pathname} = useLocation()
+
+    return (
+        <>
+        {pathname.startsWith('/@') ? 
+        <Redirect to='/app' />
+        :
+        <Routes />
+        }
+        </>
+    );
 }
 
 export default App;

src/Routes.js

@@ -25,6 +25,7 @@ import Privacy from './components/Service/Privacy';
 import Terms from './components/Service/Terms';
 import FAQ from './components/FAQ/Index';
 import Lnd from './components/lnd/Lnd';
+import AppDownload from './components/AppDownload/AppDownload';
 
 function Routes() {
     const [loading, setLoading] = useState(true);
@@ -44,28 +45,27 @@ function Routes() {
                 </div>
             )}
             <div className={`appie-visible ${loading === false ? 'active' : ''}`}>
-                <Router>
+                <ScrollToTop>
-                    <ScrollToTop>
+                    <Switch>
-                        <Switch>
+                        <Route exact path="/" component={HomeOne} />
-                            <Route exact path="/" component={HomeOne} />
+                        <Route exact path="/eoffer" component={HomeOne} />
-                            <Route exact path="/eoffer" component={HomeOne} />
+                        {/*<Route exact path="/news" component={News} />*/}
-                            {/*<Route exact path="/news" component={News} />*/}
+                        <Route exact path="/blog" component={Blog} />
-                            <Route exact path="/blog" component={Blog} />
+                        <Route exact path="/blog/blogdetail/:id" component={BlogDetail} />
-                            <Route exact path="/blog/blogdetail/:id" component={BlogDetail} />
+                        <Route exact path="/use-cases" component={UseCases} />
-                            <Route exact path="/use-cases" component={UseCases} />
+                        {/*<Route exact path="/news/single-news" component={SingleNews} />*/}
-                            {/*<Route exact path="/news/single-news" component={SingleNews} />*/}
+                        <Route exact path="/service" component={Service} />
-                            <Route exact path="/service" component={Service} />
+                        <Route exact path="/terms" component={Terms} />
-                            <Route exact path="/terms" component={Terms} />
+                        <Route exact path="/privacy" component={Privacy} />
-                            <Route exact path="/privacy" component={Privacy} />
+                        <Route exact path="/about-us" component={AboutUs} />
-                            <Route exact path="/about-us" component={AboutUs} />
+                        <Route exact path="/contact" component={Contact} />
-                            <Route exact path="/contact" component={Contact} />
+                        <Route exact path="/faq" component={FAQ} />
-                            <Route exact path="/faq" component={FAQ} />
+                        <Route exact path="/error" component={Error} />
-                            <Route exact path="/error" component={Error} />
+                        <Route exact path="/lnd/*" component={Lnd} />
-                            <Route exact path="/lnd/*" component={Lnd} />
+                        <Route exact path="/app" component={AppDownload} />
-                            <Route component={Error} />
+                        <Route component={Error} />
-                        </Switch>
+                    </Switch>
-                    </ScrollToTop>
+                </ScrollToTop>
-                </Router>
             </div>
         </>
     );

src/assets/css/main.css

@@ -4894,6 +4894,28 @@ p {
   position: relative;
 }
 
+.service-item{
+  background: transparent;
+  border-radius: 6px;
+  padding: 30px 10px;
+}
+
+.service-item .icon {
+  display: inline-block;
+  text-align: center;
+
+  border-radius: 20px;
+  height: 80px;
+  line-height: 70px;
+  margin-bottom: 10px;
+  position: relative;
+  width: 80px;
+}
+
+.service-item h4 {
+  font-size: 20px;
+}
+
 .tags a {
   display: inline-block;
   height: 34px;

src/assets/css/style.css

@@ -107,6 +107,27 @@
   margin-top: -20px;
 }
 
+.app-download.options{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.app-download.options .main-btn {
+  color: #0e1133;
+  background-color: #fff;
+  border: 3px solid #3EAFCC;
+  padding: 2px 112px;
+  letter-spacing: 1px;
+}
+
+.app-download.appie-hero-content h5 {
+    color: #51B5D0;
+    /* border-color: #fff; */
+}
+
 @media only screen and (min-width: 300px) and (max-width: 1024px) {
   .testimonial-about-slider-active .testimonial-box {
     box-shadow: none;

src/components/AppDownload/AppDownload.js

@@ -0,0 +1,11 @@
+import HomeOneHeader from '../HomeOne/HomeOneHeader';
+import AppDownloadDetails from './AppDownloadDetails';
+
+export default function AppDownload() {
+  return (
+    <>
+      <HomeOneHeader showLogoOnly={true} />
+      <AppDownloadDetails />
+    </>
+  )
+}

src/components/AppDownload/AppDownloadDetails.js

@@ -0,0 +1,78 @@
+import React from 'react'
+import heroThumbOne from '../../assets/images/app-thumb-1.png';
+import heroThumbOne1 from '../../assets/images/app-thumb-2.png';
+
+import heroThumbTwo from '../../assets/images/app-pic.png';
+import CustomSlider from '../customSlider/CustomSlider';
+
+const AppDownloadDetails = () => {
+    return (
+        <>
+            <section className="appie-hero-area">
+                <div className="container">
+                    <div className="row align-items-center">
+                        <div className="col-lg-6">
+                            <div className="app-download appie-hero-content appie-hero-content-6">
+                                <h5 className='title'>Download from</h5>
+                            <div className='flex app-download options'>
+                                <ul>
+                                    <li className=''>
+                                        <a className="item-2" target='_blank' href={process.env.REACT_APP_APPLE_APP}>
+                                            <i className="fab fa-apple"></i>
+                                            <span>
+                                                Available on the <span>App Store</span>
+                                            </span>
+                                        </a>
+                                    </li>
+                                    <li className=''>
+                                        <a className="item-2" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
+                                            <i className="fab fa-google-play"></i>
+                                            <span>
+                                                Available on the <span>Google Play</span>
+                                            </span>
+                                        </a>
+                                    </li>
+                                </ul>
+                                <h5>OR</h5>
+                                <a target='_blank' href={process.env.REACT_APP_DASH_URL_SIGNUP} className='main-btn'>
+                                    Register Online
+                                </a>
+                            </div>
+                                
+                                <h1 className="appie-title"> Turn Chores into Exciting Challenges and Earn <span className='earn-rewards px-2'>Rewards!</span> </h1>
+                                <p>Your place to set family goals and reward achievements. Find tasks to earn from, or build a tasks portfolio and find others to perform tasks for you.</p>
+                            </div>
+                        </div>
+                        <div className="col-lg-6">
+                            <div className="appie-hero-thumb">
+                                <div
+                                    className="thumb wow animated fadeInUp"
+                                    data-wow-duration="2000ms"
+                                    data-wow-delay="200ms"
+                                >
+                                    {/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
+                                    <div style={{ width: '350px', margin: 'auto' }}>
+                                        <CustomSlider
+                                            images={[heroThumbOne, heroThumbOne1, heroThumbOne]}
+                                            speed='5'
+                                            indicatorColor='#333'
+                                        />
+                                    </div>
+                                </div>
+                                <div
+                                    className="thumb-2 wow animated fadeInRight"
+                                    data-wow-duration="2000ms"
+                                    data-wow-delay="600ms"
+                                >
+                                    <img src={heroThumbTwo} alt="" width="100%" height="100%" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    )
+}
+
+export default AppDownloadDetails

src/components/Blog/Blog.js

@@ -19,12 +19,12 @@ function Blog({ blogItem, imgUrl, loader }) {
 
   const headerLoaderStyles = {
     "--text-container-width": "300px",
-    "--text-container-height": "34px",
+    "--text-container-height": "18px",
   };
 
   const bodyTextLoaderStyles = {
     "--text-container-width": "770px",
-    "--text-container-height": "150px",
+    "--text-container-height": "15px",
   };
 
   return (

src/components/HomeOne/FooterHomeOne.js

@@ -20,7 +20,7 @@ function FooterHomeOne({ className }) {
                                     </a>
                                 </div>
                                 <p>
-                                    {`It is simple. You can set goals, task, or anything that need to be done and reward accomplishment. WrenchBoard is the platform to connect opportunities. `}
+                                    {`It is simple. You can set goals, task, or anything that needs to be done and reward accomplishment. WrenchBoard is the platform to connect opportunities. `}
                                 </p>
                                 <a href="/service">
                                     Read More <i className="fal fa-arrow-right" />
@@ -95,12 +95,12 @@ function FooterHomeOne({ className }) {
                                     </li>
                                     <li>
                                         <a href="#">
-                                            <i className="fal fa-phone" />  404 855-7966
+                                            <i className="fal fa-phone" />  404-855-7966
                                         </a>
                                     </li>
                                     <li>
                                         <a href="#">
-                                            <i className="fal fa-map-marker-alt" />Atlanta,GA 30339 
+                                            <i className="fal fa-map-marker-alt" />Atlanta, GA 30339 
                                         </a>
                                     </li>
                                 </ul>

src/components/HomeOne/HomeOneHeader.js

@@ -4,7 +4,7 @@ import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
 import getConfig from './../../Config/config'
 
-function HomeOneHeader({ action }) {
+function HomeOneHeader({ action, showLogoOnly = false }) {
   var site = getConfig()[0];
   useEffect(() => {
     StickyMenu();
@@ -21,27 +21,30 @@ function HomeOneHeader({ action }) {
                 </a>
               </div>
             </div>
-            <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
+
-              <div className="appie-header-main-menu">
+            {!showLogoOnly && <>
-                <Navigation />
+              <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
-              </div>
+                <div className="appie-header-main-menu">
-            </div>
+                  <Navigation />
-            <div className="col-lg-4  col-md-7 col-sm-6 col-6 order-2 order-sm-3">
-              <div className="appie-btn-box text-right">
-                <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
-                  <i className="fal fa-user" /> Login
-                </a>
-                <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
-                  Get Started
-                </a>
-                <div
-                  onClick={(e) => action(e)}
-                  className="toggle-btn ml-30 canvas_open d-lg-none d-block"
-                >
-                  <i className="fa fa-bars" />
                 </div>
               </div>
-            </div>
+              <div className="col-lg-4  col-md-7 col-sm-6 col-6 order-2 order-sm-3">
+                <div className="appie-btn-box text-right">
+                  <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
+                    <i className="fal fa-user" /> Login
+                  </a>
+                  <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
+                    Get Started
+                  </a>
+                  <div
+                    onClick={(e) => action(e)}
+                    className="toggle-btn ml-30 canvas_open d-lg-none d-block"
+                  >
+                    <i className="fa fa-bars" />
+                  </div>
+                </div>
+              </div>
+            </>}
           </div>
         </div>
       </div>

src/components/HomeOne/ServicesHomeOne.js

@@ -1,13 +1,13 @@
-import React from "react";
+import React from 'react';
-import IconOne from "../../assets/images/icon/account_login.png";
+import IconOne from '../../assets/images/icon/reward.png';
-import IconTwo from "../../assets/images/icon/task.png";
+import IconTwo from '../../assets/images/icon/assign-chores.png';
-import IconThree from "../../assets/images/icon/target.png";
+import IconThree from '../../assets/images/icon/financial-education.png';
-import IconFour from "../../assets/images/icon/reward.png";
+import IconFour from '../../assets/images/icon/family-connect.png';
 
 function ServiceItem({ icon, title, description, index }) {
   return (
     <div
-      className="appie-single-service text-center mt-30 wow animated fadeInUp"
+      className="service-item text-center mt-30 wow animated fadeInUp"
       data-wow-duration="2000ms"
       data-wow-delay={`${200 * (index + 1)}ms`}
       style={{ cursor: "default" }}
@@ -22,40 +22,19 @@ function ServiceItem({ icon, title, description, index }) {
 }
 
 function ServicesHomeOne({ className }) {
-  const serviceTitle = "Set Goals and Rewards to Inspire";
-  const serviceItems = [
-    {
-      icon: IconOne,
-      title: "Free Account",
-      description: "Join WrenchBoard. Get your free account.",
-    },
-    {
-      icon: IconTwo,
-      title: "Set Goals",
-      description: "Suggest or find what you want to get rewarded for.",
-    },
-    {
-      icon: IconThree,
-      title: "Complete",
-      description: "Complete task, and notify assigner with ease.",
-    },
-    {
-      icon: IconFour,
-      title: "Reward",
-      description: "Task completed. Find your reward.",
-    },
-  ];
 
   return (
     <section
-      className={`appie-service-area pt-10 pb-50 ${className}`}
+      className={`appie-service-area pt-20 pb-50 ${className}`}
       id="service"
     >
       <div className="container">
         <div className="row justify-content-center">
           <div className="col-lg-8">
             <div className="appie-section-title text-center">
-              <h3 className="appie-title">{serviceTitle}</h3>
+              <h3 className="appie-title">
+              Set Chores, Set Goals and <br /> Rewards Accomplishments
+              </h3>
             </div>
           </div>
         </div>
@@ -77,3 +56,27 @@ function ServicesHomeOne({ className }) {
 }
 
 export default ServicesHomeOne;
+
+const serviceTitle = `Set Chores, Set Goals and Rewards Accomplishments`;
+const serviceItems = [
+  {
+    icon: IconOne,
+    title: 'Reward Goals Met',
+    description: 'Set goals together and reward accomplishment',
+  },
+  {
+    icon: IconTwo,
+    title: 'Assign Regular Chores',
+    description: 'Organize essential regular chores to be done',
+  },
+  {
+    icon: IconThree,
+    title: 'Financial Education',
+    description: 'Get Kids start early on money management',
+  },
+  {
+    icon: IconFour,
+    title: 'Family Connect',
+    description: 'Connect family, share accomplishments with friends',
+  },
+];

src/components/Navigation.js

@@ -9,9 +9,9 @@ function Navigation() {
                     <Link to="/">Home</Link>
                 </li>
                 <li>
-                    <Link to="/service">Services</Link>
+                    <Link to="/about-us">About</Link>
                 </li>
-                <li>
+                {/* <li>
                     <a href="#">
                         Resources <i className="fal fa-angle-down" />
                     </a>
@@ -26,8 +26,7 @@ function Navigation() {
                             <Link to="/faq">FAQs</Link>
                         </li>
                     </ul>
-                </li>
+                </li> */}
-               
             </ul>
         </>
     );

src/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+
 import App from './App';
 import './assets/css/bootstrap.min.css';
 import './assets/css/custom-animated.css';
@@ -12,7 +14,9 @@ import './assets/css/style.css';
 
 ReactDOM.render(
     <React.StrictMode>
-        <App />
+        <Router>
+            <App />
+        </Router>
     </React.StrictMode>,
     document.getElementById('root')
 );