From d0a4f2b5d4ce006d31b9bc090bf927d1b3715243 Mon Sep 17 00:00:00 2001
From: sonirudrakshi99 <sonirudrakshi99@gmail.com>
Date: Tue, 6 Dec 2022 18:12:35 +0530
Subject: [PATCH] refactor(body): created separate body comps

---
 src/components/CardBar/CardBar.js   |  64 ++++++++++++++++
 src/components/HelpCard/HelpCard.js |  55 ++++++++++++++
 src/components/body/body.js         | 114 +---------------------------
 3 files changed, 122 insertions(+), 111 deletions(-)
 create mode 100644 src/components/CardBar/CardBar.js
 create mode 100644 src/components/HelpCard/HelpCard.js

diff --git a/src/components/CardBar/CardBar.js b/src/components/CardBar/CardBar.js
new file mode 100644
index 0000000..eb30da6
--- /dev/null
+++ b/src/components/CardBar/CardBar.js
@@ -0,0 +1,64 @@
+import { Component } from "react";
+import Image from "../img/voice-message.png";
+import SMS from "../img/sms.png";
+import Help from "../img/help-desk.png";
+
+class CardBar extends Component {
+  render() {
+    return (
+      <section className="body__section py-10">
+        <div className="grid place-items-center mt-5">
+          <p className="text-3xl font-bold text-center text-gray-900 uppercase mb-2">
+            HOW KRASHAK HELPS
+          </p>
+          <p className="text-xl font-medium text-center text-gray-500 ">
+            Being a part of Krashak.AI, these are our mainstays
+          </p>
+        </div>
+        <div className="grid place-items-center mt-14 mb-20">
+          <div className="inline-flex space-x-36 items-center justify-end">
+            <div className="w-1/4 h-full">
+              <div className="inline-flex flex-col space-y-6 items-center justify-end flex-1 h-full pl-9 pr-8 pt-8 pb-11 bg-white border rounded border-black border-opacity-10">
+                <img className="w-1/5 h-12 rounded-lg" src={Help} alt="help" />
+                <p className="w-56 h-7 text-lg font-semibold text-gray-900 text-center">
+                  24*7 calls and help desk
+                </p>
+                <p className="opacity-70 w-56 h-1/5 text-base text-center">
+                  Providing solutions through calls
+                </p>
+              </div>
+            </div>
+            <div className="w-1/4 h-full">
+              <div className="inline-flex flex-col space-y-6 items-center justify-end flex-1 h-full pl-9 pr-8 pt-8 pb-11 bg-white border rounded border-black border-opacity-10">
+                <img className="w-14 h-14 rounded-lg" src={SMS} alt="SMS" />
+                <p className="w-56 h-7 text-lg font-semibold text-gray-900 text-center">
+                  SMS services for contact
+                </p>
+                <p className="opacity-70 w-56 h-1/5 text-base text-center">
+                  Send your queries through SMS
+                </p>
+              </div>
+            </div>
+            <div className="w-1/4 h-full">
+              <div className="inline-flex flex-col space-y-6 items-center justify-end flex-1 h-full pl-9 pr-8 pt-8 pb-11 bg-white border rounded border-black border-opacity-10">
+                <img
+                  src={Image}
+                  className="w-14 h-14 rounded-lg"
+                  alt="voice assistance"
+                />
+                <p className="w-56 h-7 text-lg font-semibold text-gray-900 text-center">
+                  Voice assistant System
+                </p>
+                <p className="opacity-70 w-56 h-1/5 text-base text-center">
+                  Get voice assisted solution
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+}
+
+export default CardBar;
diff --git a/src/components/HelpCard/HelpCard.js b/src/components/HelpCard/HelpCard.js
new file mode 100644
index 0000000..8446a13
--- /dev/null
+++ b/src/components/HelpCard/HelpCard.js
@@ -0,0 +1,55 @@
+import { Component } from "react";
+import SMS from "../img/sms.png";
+import Help from "../img/help-desk.png";
+import Call from "../img/phone-call.png";
+
+class HelpCard extends Component {
+    render() {
+      return (
+        <section className="bg-gray-100 py-10">
+          <div className="grid place-items-center mt-14 ">
+            <p className="text-3xl font-bold text-center text-gray-900 uppercase mb-2">
+              NEED HELP?
+            </p>
+            <p className="text-xl font-medium text-center text-gray-500 ">
+              We open the door to thousands of farmers worldwide. Ask your queries
+              and get the best solution instantly. There are two ways to get the
+              solutions.
+            </p>
+          </div>
+          <div className="grid place-items-center mt-14 mb-20">
+            <div className="flex space-x-20">
+              <div className="flex flex-row m-2">
+                <img className="w-14 h-14 rounded-lg mr-4" src={Call} />
+                <div className="flex flex-column flex-wrap w-40">
+                  <p className="">Give krashak a call </p>
+                  <p className="text-green-600">9876644566</p>
+                </div>
+              </div>
+              <div className="flex flex-row m-2">
+                <img className="w-14 h-14 rounded-lg mr-4" src={SMS} />
+                <div className="flex flex-column flex-wrap w-40">
+                  <p className="">Drop your query to </p>
+                  <p className="text-green-600">9876644566</p>
+                </div>
+              </div>
+              <div className="flex flex-row m-2">
+                <img className="w-14 h-14 rounded-lg mr-4" src={Help} />
+                <div className="flex flex-column flex-wrap w-40">
+                  <p className="">Use the voice bot</p>
+                  <p
+                    className="text-green-600 cursor-pointer"
+                    onClick={() => this.navigation.navigate("/voice")}
+                  >
+                    click here
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      );
+    }
+  }
+
+    export default HelpCard;
\ No newline at end of file
diff --git a/src/components/body/body.js b/src/components/body/body.js
index a4175d2..98d467a 100644
--- a/src/components/body/body.js
+++ b/src/components/body/body.js
@@ -1,118 +1,10 @@
-import { useNavigate } from "react-router-dom";
 import "../../index.css";
-import { Component } from "react";
 import "./body.css";
-import Image from "../img/voice-message.png";
-import SMS from "../img/sms.png";
-import Help from "../img/help-desk.png";
-import Call from "../img/phone-call.png";
 import FeatureImg from "../img/feature.jpeg";
-
-class CardBar extends Component {
-  render() {
-    return (
-      <section className="body__section py-10">
-        <div className="grid place-items-center mt-5">
-          <p className="text-3xl font-bold text-center text-gray-900 uppercase mb-2">
-            HOW KRASHAK HELPS
-          </p>
-          <p className="text-xl font-medium text-center text-gray-500 ">
-            Being a part of Krashak.AI, these are our mainstays
-          </p>
-        </div>
-        <div className="grid place-items-center mt-14 mb-20">
-          <div className="inline-flex space-x-36 items-center justify-end">
-            <div className="w-1/4 h-full">
-              <div className="inline-flex flex-col space-y-6 items-center justify-end flex-1 h-full pl-9 pr-8 pt-8 pb-11 bg-white border rounded border-black border-opacity-10">
-                <img className="w-1/5 h-12 rounded-lg" src={Help} />
-                <p className="w-56 h-7 text-lg font-semibold text-gray-900 text-center">
-                  24*7 calls and help desk
-                </p>
-                <p className="opacity-70 w-56 h-1/5 text-base text-center">
-                  Providing solutions through calls
-                </p>
-              </div>
-            </div>
-            <div className="w-1/4 h-full">
-              <div className="inline-flex flex-col space-y-6 items-center justify-end flex-1 h-full pl-9 pr-8 pt-8 pb-11 bg-white border rounded border-black border-opacity-10">
-                <img className="w-14 h-14 rounded-lg" src={SMS} />
-                <p className="w-56 h-7 text-lg font-semibold text-gray-900 text-center">
-                  SMS services for contact
-                </p>
-                <p className="opacity-70 w-56 h-1/5 text-base text-center">
-                  Send your queries through SMS
-                </p>
-              </div>
-            </div>
-            <div className="w-1/4 h-full">
-              <div className="inline-flex flex-col space-y-6 items-center justify-end flex-1 h-full pl-9 pr-8 pt-8 pb-11 bg-white border rounded border-black border-opacity-10">
-                <img className="w-14 h-14 rounded-lg" src={Image} />
-                <p className="w-56 h-7 text-lg font-semibold text-gray-900 text-center">
-                  Voice assistent System
-                </p>
-                <p className="opacity-70 w-56 h-1/5 text-base text-center">
-                  Get voice assisted solution
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    );
-  }
-}
-
-class HelpCard extends Component {
-  render() {
-    return (
-      <section className="bg-gray-100 py-10">
-        <div className="grid place-items-center mt-14 ">
-          <p className="text-3xl font-bold text-center text-gray-900 uppercase mb-2">
-            NEED HELP?
-          </p>
-          <p className="text-xl font-medium text-center text-gray-500 ">
-            We open the door to thousands of farmers worldwide. Ask your queries
-            and get the best solution instantly. There are two ways to get the
-            solutions.
-          </p>
-        </div>
-        <div className="grid place-items-center mt-14 mb-20">
-          <div className="flex space-x-20">
-            <div className="flex flex-row m-2">
-              <img className="w-14 h-14 rounded-lg mr-4" src={Call} />
-              <div className="flex flex-column flex-wrap w-40">
-                <p className="">Give krashak a call </p>
-                <p className="text-green-600">9876644566</p>
-              </div>
-            </div>
-            <div className="flex flex-row m-2">
-              <img className="w-14 h-14 rounded-lg mr-4" src={SMS} />
-              <div className="flex flex-column flex-wrap w-40">
-                <p className="">Drop your query to </p>
-                <p className="text-green-600">9876644566</p>
-              </div>
-            </div>
-            <div className="flex flex-row m-2">
-              <img className="w-14 h-14 rounded-lg mr-4" src={Help} />
-              <div className="flex flex-column flex-wrap w-40">
-                <p className="">Use the voice bot</p>
-                <p
-                  className="text-green-600 cursor-pointer"
-                  onClick={() => this.navigation.navigate("/voice")}
-                >
-                  click here
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    );
-  }
-}
+import CardBar from "../CardBar/CardBar";
+import HelpCard from "../HelpCard/HelpCard";
 
 const Body = () => {
-  const navigate = useNavigate();
   return (
     <div className="body">
       <div className="background-image grid place-items-center my-6">
@@ -140,7 +32,7 @@ const Body = () => {
             Take a look at our features
           </p>
         </div>
-        <img src={FeatureImg}></img>
+        <img src={FeatureImg} alt="features"></img>
       </section>
     </div>
   );