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/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/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/ServicesHomeOne.js

@@ -1,13 +1,13 @@
-import React from "react";
-import IconOne from "../../assets/images/icon/account_login.png";
-import IconTwo from "../../assets/images/icon/task.png";
-import IconThree from "../../assets/images/icon/target.png";
-import IconFour from "../../assets/images/icon/reward.png";
+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';
 
 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>
         </>
     );