Skip to content

Commit d0a4f2b

Browse files
rudrakshi99rudrakshi99
committed
refactor(body): created separate body comps
1 parent 57d5363 commit d0a4f2b

File tree

3 files changed

+122
-111
lines changed

3 files changed

+122
-111
lines changed

‎src/components/CardBar/CardBar.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Component } from "react";
2+
import Image from "../img/voice-message.png";
3+
import SMS from "../img/sms.png";
4+
import Help from "../img/help-desk.png";
5+
6+
class CardBar extends Component {
7+
render() {
8+
return (
9+
<section className="body__section py-10">
10+
<div className="grid place-items-center mt-5">
11+
<p className="text-3xl font-bold text-center text-gray-900 uppercase mb-2">
12+
HOW KRASHAK HELPS
13+
</p>
14+
<p className="text-xl font-medium text-center text-gray-500 ">
15+
Being a part of Krashak.AI, these are our mainstays
16+
</p>
17+
</div>
18+
<div className="grid place-items-center mt-14 mb-20">
19+
<div className="inline-flex space-x-36 items-center justify-end">
20+
<div className="w-1/4 h-full">
21+
<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">
22+
<img className="w-1/5 h-12 rounded-lg" src={Help} alt="help" />
23+
<p className="w-56 h-7 text-lg font-semibold text-gray-900 text-center">
24+
24*7 calls and help desk
25+
</p>
26+
<p className="opacity-70 w-56 h-1/5 text-base text-center">
27+
Providing solutions through calls
28+
</p>
29+
</div>
30+
</div>
31+
<div className="w-1/4 h-full">
32+
<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">
33+
<img className="w-14 h-14 rounded-lg" src={SMS} alt="SMS" />
34+
<p className="w-56 h-7 text-lg font-semibold text-gray-900 text-center">
35+
SMS services for contact
36+
</p>
37+
<p className="opacity-70 w-56 h-1/5 text-base text-center">
38+
Send your queries through SMS
39+
</p>
40+
</div>
41+
</div>
42+
<div className="w-1/4 h-full">
43+
<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">
44+
<img
45+
src={Image}
46+
className="w-14 h-14 rounded-lg"
47+
alt="voice assistance"
48+
/>
49+
<p className="w-56 h-7 text-lg font-semibold text-gray-900 text-center">
50+
Voice assistant System
51+
</p>
52+
<p className="opacity-70 w-56 h-1/5 text-base text-center">
53+
Get voice assisted solution
54+
</p>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</section>
60+
);
61+
}
62+
}
63+
64+
export default CardBar;

‎src/components/HelpCard/HelpCard.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Component } from "react";
2+
import SMS from "../img/sms.png";
3+
import Help from "../img/help-desk.png";
4+
import Call from "../img/phone-call.png";
5+
6+
class HelpCard extends Component {
7+
render() {
8+
return (
9+
<section className="bg-gray-100 py-10">
10+
<div className="grid place-items-center mt-14 ">
11+
<p className="text-3xl font-bold text-center text-gray-900 uppercase mb-2">
12+
NEED HELP?
13+
</p>
14+
<p className="text-xl font-medium text-center text-gray-500 ">
15+
We open the door to thousands of farmers worldwide. Ask your queries
16+
and get the best solution instantly. There are two ways to get the
17+
solutions.
18+
</p>
19+
</div>
20+
<div className="grid place-items-center mt-14 mb-20">
21+
<div className="flex space-x-20">
22+
<div className="flex flex-row m-2">
23+
<img className="w-14 h-14 rounded-lg mr-4" src={Call} />
24+
<div className="flex flex-column flex-wrap w-40">
25+
<p className="">Give krashak a call </p>
26+
<p className="text-green-600">9876644566</p>
27+
</div>
28+
</div>
29+
<div className="flex flex-row m-2">
30+
<img className="w-14 h-14 rounded-lg mr-4" src={SMS} />
31+
<div className="flex flex-column flex-wrap w-40">
32+
<p className="">Drop your query to </p>
33+
<p className="text-green-600">9876644566</p>
34+
</div>
35+
</div>
36+
<div className="flex flex-row m-2">
37+
<img className="w-14 h-14 rounded-lg mr-4" src={Help} />
38+
<div className="flex flex-column flex-wrap w-40">
39+
<p className="">Use the voice bot</p>
40+
<p
41+
className="text-green-600 cursor-pointer"
42+
onClick={() => this.navigation.navigate("/voice")}
43+
>
44+
click here
45+
</p>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
</section>
51+
);
52+
}
53+
}
54+
55+
export default HelpCard;

‎src/components/body/body.js

+3-111
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,10 @@
1-
import { useNavigate } from "react-router-dom";
21
import "../../index.css";
3-
import { Component } from "react";
42
import "./body.css";
5-
import Image from "../img/voice-message.png";
6-
import SMS from "../img/sms.png";
7-
import Help from "../img/help-desk.png";
8-
import Call from "../img/phone-call.png";
93
import FeatureImg from "../img/feature.jpeg";
10-
11-
class CardBar extends Component {
12-
render() {
13-
return (
14-
<section className="body__section py-10">
15-
<div className="grid place-items-center mt-5">
16-
<p className="text-3xl font-bold text-center text-gray-900 uppercase mb-2">
17-
HOW KRASHAK HELPS
18-
</p>
19-
<p className="text-xl font-medium text-center text-gray-500 ">
20-
Being a part of Krashak.AI, these are our mainstays
21-
</p>
22-
</div>
23-
<div className="grid place-items-center mt-14 mb-20">
24-
<div className="inline-flex space-x-36 items-center justify-end">
25-
<div className="w-1/4 h-full">
26-
<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">
27-
<img className="w-1/5 h-12 rounded-lg" src={Help} />
28-
<p className="w-56 h-7 text-lg font-semibold text-gray-900 text-center">
29-
24*7 calls and help desk
30-
</p>
31-
<p className="opacity-70 w-56 h-1/5 text-base text-center">
32-
Providing solutions through calls
33-
</p>
34-
</div>
35-
</div>
36-
<div className="w-1/4 h-full">
37-
<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">
38-
<img className="w-14 h-14 rounded-lg" src={SMS} />
39-
<p className="w-56 h-7 text-lg font-semibold text-gray-900 text-center">
40-
SMS services for contact
41-
</p>
42-
<p className="opacity-70 w-56 h-1/5 text-base text-center">
43-
Send your queries through SMS
44-
</p>
45-
</div>
46-
</div>
47-
<div className="w-1/4 h-full">
48-
<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">
49-
<img className="w-14 h-14 rounded-lg" src={Image} />
50-
<p className="w-56 h-7 text-lg font-semibold text-gray-900 text-center">
51-
Voice assistent System
52-
</p>
53-
<p className="opacity-70 w-56 h-1/5 text-base text-center">
54-
Get voice assisted solution
55-
</p>
56-
</div>
57-
</div>
58-
</div>
59-
</div>
60-
</section>
61-
);
62-
}
63-
}
64-
65-
class HelpCard extends Component {
66-
render() {
67-
return (
68-
<section className="bg-gray-100 py-10">
69-
<div className="grid place-items-center mt-14 ">
70-
<p className="text-3xl font-bold text-center text-gray-900 uppercase mb-2">
71-
NEED HELP?
72-
</p>
73-
<p className="text-xl font-medium text-center text-gray-500 ">
74-
We open the door to thousands of farmers worldwide. Ask your queries
75-
and get the best solution instantly. There are two ways to get the
76-
solutions.
77-
</p>
78-
</div>
79-
<div className="grid place-items-center mt-14 mb-20">
80-
<div className="flex space-x-20">
81-
<div className="flex flex-row m-2">
82-
<img className="w-14 h-14 rounded-lg mr-4" src={Call} />
83-
<div className="flex flex-column flex-wrap w-40">
84-
<p className="">Give krashak a call </p>
85-
<p className="text-green-600">9876644566</p>
86-
</div>
87-
</div>
88-
<div className="flex flex-row m-2">
89-
<img className="w-14 h-14 rounded-lg mr-4" src={SMS} />
90-
<div className="flex flex-column flex-wrap w-40">
91-
<p className="">Drop your query to </p>
92-
<p className="text-green-600">9876644566</p>
93-
</div>
94-
</div>
95-
<div className="flex flex-row m-2">
96-
<img className="w-14 h-14 rounded-lg mr-4" src={Help} />
97-
<div className="flex flex-column flex-wrap w-40">
98-
<p className="">Use the voice bot</p>
99-
<p
100-
className="text-green-600 cursor-pointer"
101-
onClick={() => this.navigation.navigate("/voice")}
102-
>
103-
click here
104-
</p>
105-
</div>
106-
</div>
107-
</div>
108-
</div>
109-
</section>
110-
);
111-
}
112-
}
4+
import CardBar from "../CardBar/CardBar";
5+
import HelpCard from "../HelpCard/HelpCard";
1136

1147
const Body = () => {
115-
const navigate = useNavigate();
1168
return (
1179
<div className="body">
11810
<div className="background-image grid place-items-center my-6">
@@ -140,7 +32,7 @@ const Body = () => {
14032
Take a look at our features
14133
</p>
14234
</div>
143-
<img src={FeatureImg}></img>
35+
<img src={FeatureImg} alt="features"></img>
14436
</section>
14537
</div>
14638
);

0 commit comments

Comments
 (0)