Compare commits
25 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Ebube
|
eab01068d2 | ||
|
Ebube
|
d49a71b97a | ||
 tokslaw
|
c0b77f911f | ||
|
Ebube
|
46341abf2a | ||
 ameye
|
7f8fc1086f | ||
|
Ebube
|
a312984df8 | ||
|
ameye
|
490492bd0f | ||
|
victorAnumudu
|
e78561c93f | ||
|
victorAnumudu
|
e13d973b30 | ||
|
CHIEFSOFT\ameye
|
bd3d945f55 | ||
|
CHIEFSOFT\ameye
|
62e7cda35d | ||
|
ameye
|
e11c35e49b | ||
|
victorAnumudu
|
9e23fd83a8 | ||
|
ameye
|
537e639a65 | ||
|
victorAnumudu
|
02075a95c0 | ||
|
victorAnumudu
|
2873b22183 | ||
|
ameye
|
7b01bea019 | ||
|
victorAnumudu
|
6dd5dbc7b2 | ||
|
ameye
|
f8acc0a29e | ||
|
victorAnumudu
|
d175ef8922 | ||
|
ameye
|
751bcd6c5d | ||
|
victorAnumudu
|
8a4c7d92e8 | ||
|
victorAnumudu
|
0c4e464c5e | ||
|
CHIEFSOFT\ameye
|
3586b01756 | ||
|
ameye
|
715972dbde |
@@ -10,6 +10,7 @@
|
|||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-countup": "^6.0.0",
|
"react-countup": "^6.0.0",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
|
"react-owl-carousel": "^2.3.3",
|
||||||
"react-router-dom": "^5.3.0",
|
"react-router-dom": "^5.3.0",
|
||||||
"react-scripts": "5.0.0",
|
"react-scripts": "5.0.0",
|
||||||
"react-slick": "^0.28.1",
|
"react-slick": "^0.28.1",
|
||||||
|
|||||||
+37
-23
@@ -49,6 +49,16 @@
|
|||||||
</noscript>
|
</noscript>
|
||||||
|
|
||||||
<title>WrenchBoard</title>
|
<title>WrenchBoard</title>
|
||||||
|
<!-- Google tag (gtag.js) -->
|
||||||
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WB8G0ZD483"></script>
|
||||||
|
<script>
|
||||||
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag(){dataLayer.push(arguments);}
|
||||||
|
gtag('js', new Date());
|
||||||
|
|
||||||
|
gtag('config', 'G-WB8G0ZD483');
|
||||||
|
</script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@@ -56,29 +66,29 @@
|
|||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<script>
|
<!-- <script>-->
|
||||||
(function (i, s, o, g, r, a, m) {
|
<!-- (function (i, s, o, g, r, a, m) {-->
|
||||||
i["GoogleAnalyticsObject"] = r;
|
<!-- i["GoogleAnalyticsObject"] = r;-->
|
||||||
(i[r] =
|
<!-- (i[r] =-->
|
||||||
i[r] ||
|
<!-- i[r] ||-->
|
||||||
function () {
|
<!-- function () {-->
|
||||||
(i[r].q = i[r].q || []).push(arguments);
|
<!-- (i[r].q = i[r].q || []).push(arguments);-->
|
||||||
}),
|
<!-- }),-->
|
||||||
(i[r].l = 1 * new Date());
|
<!-- (i[r].l = 1 * new Date());-->
|
||||||
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
|
<!-- (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);-->
|
||||||
a.async = 1;
|
<!-- a.async = 1;-->
|
||||||
a.src = g;
|
<!-- a.src = g;-->
|
||||||
m.parentNode.insertBefore(a, m);
|
<!-- m.parentNode.insertBefore(a, m);-->
|
||||||
})(
|
<!-- })(-->
|
||||||
window,
|
<!-- window,-->
|
||||||
document,
|
<!-- document,-->
|
||||||
"script",
|
<!-- "script",-->
|
||||||
"https://www.google-analytics.com/analytics.js",
|
<!-- "https://www.google-analytics.com/analytics.js",-->
|
||||||
"ga"
|
<!-- "ga"-->
|
||||||
);
|
<!-- );-->
|
||||||
ga("create", "UA-54829827-4", "auto");
|
<!-- ga("create", "UA-54829827-4", "auto");-->
|
||||||
ga("send", "pageview");
|
<!-- ga("send", "pageview");-->
|
||||||
</script>
|
<!-- </script>-->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var LHC_API = LHC_API || {};
|
var LHC_API = LHC_API || {};
|
||||||
@@ -105,4 +115,8 @@
|
|||||||
s.parentNode.insertBefore(po, s);
|
s.parentNode.insertBefore(po, s);
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- plugins js -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -6,16 +6,6 @@
|
|||||||
"src": "favicon.ico",
|
"src": "favicon.ico",
|
||||||
"sizes": "64x64 32x32 24x24 16x16",
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
"type": "image/x-icon"
|
"type": "image/x-icon"
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "logo192.png",
|
|
||||||
"type": "image/png",
|
|
||||||
"sizes": "192x192"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "logo512.png",
|
|
||||||
"type": "image/png",
|
|
||||||
"sizes": "512x512"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"start_url": ".",
|
"start_url": ".",
|
||||||
|
|||||||
@@ -0,0 +1,370 @@
|
|||||||
|
@media screen and (max-width:1200px) {
|
||||||
|
|
||||||
|
/* about app section */
|
||||||
|
.about_app_section .about_text .app_statstic li {
|
||||||
|
width: 210px;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li p:first-child {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width:992px) {
|
||||||
|
|
||||||
|
/* about app section */
|
||||||
|
.about_app_section .row {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img {
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-top: 75px;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img::before {
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img .screen_img {
|
||||||
|
margin-left: -170px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li {
|
||||||
|
width: 35%;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img::before {
|
||||||
|
left: 35%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width:767px) {
|
||||||
|
|
||||||
|
/* about app section */
|
||||||
|
.about_app_section .about_text,
|
||||||
|
.about_app_section .about_text .section_title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic {
|
||||||
|
margin-top: 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li {
|
||||||
|
width: 48%;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li p:first-child {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 50px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img::before {
|
||||||
|
width: 350px;
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.row_am.about_app_section._ {
|
||||||
|
background: #fbf4fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width:479px) {
|
||||||
|
|
||||||
|
/* about app section */
|
||||||
|
.about_app_section .about_img::before {
|
||||||
|
left: 49%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* about app section */
|
||||||
|
/* .about_app_section .row {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.about_app_section .about_img {
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-top: 75px;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img::before {
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img .screen_img {
|
||||||
|
margin-left: -170px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li {
|
||||||
|
width: 35%;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img::before {
|
||||||
|
left: 35%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* about app section */
|
||||||
|
.about_app_section .about_text .app_statstic {
|
||||||
|
margin-top: 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li {
|
||||||
|
width: 48%;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li p:first-child {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 50px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img::before {
|
||||||
|
width: 350px;
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 479px) {
|
||||||
|
|
||||||
|
/* about app section */
|
||||||
|
.about_app_section .about_img::before {
|
||||||
|
left: 49%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section_title h2 {
|
||||||
|
font-size: 44px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
line-height: 54px;
|
||||||
|
text-shadow: 0 4px 10px #0000004d;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #32236F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section_title h2 span {
|
||||||
|
color: #1a3544;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* about us section wraper */
|
||||||
|
.about_app_section .about_img {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* about us section images*/
|
||||||
|
.about_app_section .about_img img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 38%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img .screen_img {
|
||||||
|
margin-left: -135px;
|
||||||
|
margin-top: 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .section_title {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .section_title h2 {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* about us section statastics nomber */
|
||||||
|
.about_app_section .about_text .app_statstic {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li {
|
||||||
|
width: 248px;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 15px 10px;
|
||||||
|
padding-left: 35px;
|
||||||
|
box-shadow: 0px 4px 10px #ede9fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li .icon {
|
||||||
|
margin-right: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
line-height: 1;
|
||||||
|
color: #32236F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li p:first-child {
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img .screen_img img {
|
||||||
|
animation-delay: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row_am {
|
||||||
|
padding: 50px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row_am {
|
||||||
|
padding: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.puprple_btn {
|
||||||
|
background-color: #1a3544;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 50px;
|
||||||
|
padding: 10px 40px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 1;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.puprple_btn::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 0%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 50px;
|
||||||
|
transition: .6s all;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.puprple_btn:hover::before {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.puprple_btn:hover {
|
||||||
|
color: #1a3544;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width:767px) {
|
||||||
|
|
||||||
|
/* modern ui section */
|
||||||
|
.modern_ui_section .ui_images {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modern_ui_section .section_title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modern_ui_section .design_block li {
|
||||||
|
padding-left: 0;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modern_ui_section .design_block li::before {
|
||||||
|
position: relative;
|
||||||
|
left: auto;
|
||||||
|
top: auto;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.modern_ui_section .row {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modern_ui_section .design_block {
|
||||||
|
margin-top: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* modern ui text */
|
||||||
|
.modern_ui_section .section_title {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modern_ui_section .ui_text {
|
||||||
|
padding-right: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* modern ui list */
|
||||||
|
.modern_ui_section .design_block li {
|
||||||
|
padding-left: 40px;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modern_ui_section .design_block li::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 5px;
|
||||||
|
background-image: url(../../../src/assets/images/right_icon.png);
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modern_ui_section .design_block li h4 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
padding-bottom: 7px;
|
||||||
|
text-shadow: 3px 4px 10px #0000004d;
|
||||||
|
|
||||||
|
color: #32236F;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modern_ui_section .design_block li p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
@@ -1,4 +1,6 @@
|
|||||||
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
|
||||||
|
@import url("aboutapp.css");
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "Roboto", sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
@@ -3227,6 +3229,63 @@ p {
|
|||||||
background: linear-gradient(135deg, #d8aaff 0%, #9b2cfa 100%);
|
background: linear-gradient(135deg, #d8aaff 0%, #9b2cfa 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.appie-modern-design .icon i {
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 26px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: purple;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .modern_ui_section{
|
||||||
|
margin-top: 100px;
|
||||||
|
} */
|
||||||
|
.modern_ui_section .section_sub_title{
|
||||||
|
font-size: 30px;
|
||||||
|
color: purple;
|
||||||
|
}
|
||||||
|
.modern_ui_section .ui_images{
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
padding: 30px 10px;
|
||||||
|
}
|
||||||
|
.modern_ui_section .right_img{
|
||||||
|
left: -60px;
|
||||||
|
top: -20px;
|
||||||
|
}
|
||||||
|
.modern_ui_section .left_img{
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modern_ui_section .left_img img{
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.modern_ui_section .right_img{
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
.modern_ui_section .right_img img {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.modern_ui_section .right_img .right_img_one{
|
||||||
|
width: 120px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.modern_ui_section .right_img .right_img_three{
|
||||||
|
left: -20px;
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 0px) and (max-width: 500px) {
|
||||||
|
.modern_ui_section .right_img{
|
||||||
|
left: -30px;
|
||||||
|
top: -20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
||||||
.traffic-btn {
|
.traffic-btn {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
@@ -8538,3 +8597,31 @@ LND PAGE STYLE STARTS HERE
|
|||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* -----------Interface_Section-Css-Start----------------- */
|
||||||
|
|
||||||
|
/* interface wraper */
|
||||||
|
.interface_section .screen_slider {
|
||||||
|
margin-top: 35px;
|
||||||
|
/* min-height: 520px; */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* interface images */
|
||||||
|
.interface_section .owl-item .screen_frame_img img {
|
||||||
|
transform: scale(.9);
|
||||||
|
border: 2px solid #000;
|
||||||
|
border-radius: 20px;
|
||||||
|
transition: 1s all;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 520px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interface_section .owl-item.center .screen_frame_img img {
|
||||||
|
transform: scale(1);
|
||||||
|
border: 3px solid #000;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
@@ -142,3 +142,94 @@
|
|||||||
left: 15px;
|
left: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* -----------------About-App-Section-Css-Start------------------ */
|
||||||
|
|
||||||
|
/* about us section wraper */
|
||||||
|
.about_app_section .about_img {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* about us section images*/
|
||||||
|
.about_app_section .about_img img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 38%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img .screen_img {
|
||||||
|
margin-left: -135px;
|
||||||
|
margin-top: 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .section_title {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .section_title h2 {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* about us section statastics nomber */
|
||||||
|
.about_app_section .about_text .app_statstic {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li {
|
||||||
|
width: 248px;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 15px 10px;
|
||||||
|
padding-left: 35px;
|
||||||
|
box-shadow: 0px 4px 10px #EDE9FE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li .icon {
|
||||||
|
margin-right: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
line-height: 1;
|
||||||
|
color: #32236F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .app_statstic li p:first-child {
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_img .screen_img img {
|
||||||
|
animation-delay: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_app_section .about_text .list {
|
||||||
|
margin-top: 45px;
|
||||||
|
margin-bottom: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_text{
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 611 B |
Binary file not shown.
|
After Width: | Height: | Size: 626 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 765 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 690 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
@@ -0,0 +1,81 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import OwlCarousel from 'react-owl-carousel'
|
||||||
|
import localImgLoad from '../../lib/localImgLoad'
|
||||||
|
|
||||||
|
import 'owl.carousel/dist/assets/owl.carousel.css'
|
||||||
|
import 'owl.carousel/dist/assets/owl.theme.default.css'
|
||||||
|
|
||||||
|
export default function FeaturedScreen() {
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<>
|
||||||
|
<section className="appie-service-area pt-50 pb-50 interface_section">
|
||||||
|
<div className="container-fluid">
|
||||||
|
<div className="appie-traffic-title section_title text-center" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
|
||||||
|
<h3 className='title'>App Screens <div className='section_sub_title'></div></h3>
|
||||||
|
<p>Simplicity of use is our goal always. Here are some of our featured screens.</p>
|
||||||
|
</div>
|
||||||
|
<div className="screen_slider" >
|
||||||
|
<OwlCarousel id="screen_slider" {...screen_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
|
||||||
|
<div className="item">
|
||||||
|
<div className="screen_frame_img">
|
||||||
|
<img src={localImgLoad('images/slider/slider_1.png')} alt="image" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="item">
|
||||||
|
<div className="screen_frame_img">
|
||||||
|
<img src={localImgLoad('images/slider/slider_2.png')} alt="image" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="item">
|
||||||
|
<div className="screen_frame_img">
|
||||||
|
<img src={localImgLoad('images/slider/slider_3.png')} alt="image" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="item">
|
||||||
|
<div className="screen_frame_img">
|
||||||
|
<img src={localImgLoad('images/slider/slider_4.png')} alt="image" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="item">
|
||||||
|
<div className="screen_frame_img">
|
||||||
|
<img src={localImgLoad('images/slider/slider_5.png')} alt="image" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="item">
|
||||||
|
<div className="screen_frame_img">
|
||||||
|
<img src={localImgLoad('images/slider/slider_6.png')} alt="image" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="item">
|
||||||
|
<div className="screen_frame_img">
|
||||||
|
<img src={localImgLoad('images/slider/slider_7.png')} alt="image" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</OwlCarousel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -3,6 +3,7 @@ import IconOne from '../../assets/images/icon/reward.png';
|
|||||||
import IconTwo from '../../assets/images/icon/assign-chores.png';
|
import IconTwo from '../../assets/images/icon/assign-chores.png';
|
||||||
import IconThree from '../../assets/images/icon/financial-education.png';
|
import IconThree from '../../assets/images/icon/financial-education.png';
|
||||||
import IconFour from '../../assets/images/icon/family-connect.png';
|
import IconFour from '../../assets/images/icon/family-connect.png';
|
||||||
|
import Main from '../lnd/LndParts/Design/Main';
|
||||||
|
|
||||||
function ServiceItem({ icon, title, description, index }) {
|
function ServiceItem({ icon, title, description, index }) {
|
||||||
return (
|
return (
|
||||||
@@ -25,10 +26,10 @@ function ServicesHomeOne({ className }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
className={`appie-service-area pt-20 pb-50 ${className}`}
|
className={`appie-service-area pt-50 pb-50 ${className}`}
|
||||||
id="service"
|
id="service"
|
||||||
>
|
>
|
||||||
<div className="container">
|
{/* <div className="container">
|
||||||
<div className="row justify-content-center">
|
<div className="row justify-content-center">
|
||||||
<div className="col-lg-8">
|
<div className="col-lg-8">
|
||||||
<div className="appie-section-title text-center">
|
<div className="appie-section-title text-center">
|
||||||
@@ -50,7 +51,9 @@ function ServicesHomeOne({ className }) {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
|
|
||||||
|
<Main />
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ import TrafficHomeTwo from './TrafficHomeTwo';
|
|||||||
import WrenchBoardHome from './WrenchBoardHome';
|
import WrenchBoardHome from './WrenchBoardHome';
|
||||||
import RecentJobsOne from './RecentJobsOne';
|
import RecentJobsOne from './RecentJobsOne';
|
||||||
import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
|
import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
|
||||||
|
import FeaturedScreen from './FeaturedScreen';
|
||||||
//import BlogData from './../../Services/BlogData';
|
//import BlogData from './../../Services/BlogData';
|
||||||
|
|
||||||
function HomeOne() {
|
function HomeOne() {
|
||||||
@@ -35,6 +36,7 @@ function HomeOne() {
|
|||||||
{/*<FaqHomeOne />*/}
|
{/*<FaqHomeOne />*/}
|
||||||
{/*<TrafficHomeOne />*/}
|
{/*<TrafficHomeOne />*/}
|
||||||
<TrafficHomeTwo />
|
<TrafficHomeTwo />
|
||||||
|
<FeaturedScreen />
|
||||||
{/*<TestimonialHomeOne />*/}
|
{/*<TestimonialHomeOne />*/}
|
||||||
{/*<TeamHomeOne />*/}
|
{/*<TeamHomeOne />*/}
|
||||||
{/*<PricingHomeOne />*/}
|
{/*<PricingHomeOne />*/}
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import UseCase from './UseCase';
|
|||||||
// import BlogSideBar from './BlogSideBar';
|
// import BlogSideBar from './BlogSideBar';
|
||||||
import HeaderNews from './HeaderNews';
|
import HeaderNews from './HeaderNews';
|
||||||
import HeroNews from './HeroNews';
|
import HeroNews from './HeroNews';
|
||||||
|
import AboutApp from '../lnd/LndParts/AboutApp/Main'
|
||||||
import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
|
import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
|
||||||
|
|
||||||
function UseCases() {
|
function UseCases() {
|
||||||
@@ -23,6 +24,7 @@ function UseCases() {
|
|||||||
{ link: '/use-cases', title: 'Use Cases' },
|
{ link: '/use-cases', title: 'Use Cases' },
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
<AboutApp />
|
||||||
<section className="blogpage-section">
|
<section className="blogpage-section">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
|
|||||||
@@ -7,95 +7,51 @@ import img2 from '../../../../assets/images/followers.png'
|
|||||||
import img3 from '../../../../assets/images/reviews.png'
|
import img3 from '../../../../assets/images/reviews.png'
|
||||||
import img4 from '../../../../assets/images/countries.png'
|
import img4 from '../../../../assets/images/countries.png'
|
||||||
|
|
||||||
const Main = ({video , dark}) => {
|
const Main = ({ video, dark }) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<section className="row_am about_app_section">
|
<section className="row_am about_app_section _">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row">
|
<div className="row modern_ui_section">
|
||||||
<div className="col-lg-6">
|
<div className="col-lg-6">
|
||||||
<div className="about_img" data-aos="fade-in" data-aos-duration="1500">
|
<div className="about_img" data-aos="fade-in" data-aos-duration="1500">
|
||||||
<div className="frame_img">
|
<div className="frame_img">
|
||||||
<img className="moving_position_animatin" src={frame} alt="image"/>
|
<img className="moving_position_animatin" src={frame} alt="image" />
|
||||||
</div>
|
|
||||||
<div className="screen_img">
|
|
||||||
<img className="moving_animation" src={screen} alt="image" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-lg-6">
|
|
||||||
<div className="about_text">
|
|
||||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
|
||||||
<h2>Some awesome words <span>about app.</span></h2>
|
|
||||||
<p>
|
|
||||||
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. Lorem
|
|
||||||
ipsum dolor sit amet.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{dark ?
|
|
||||||
<ul className="list">
|
|
||||||
<li data-aos="fade-up" data-aos-duration="1500">
|
|
||||||
<i className="icofont-verification-check"></i> Simply dummy text of the printing and
|
|
||||||
</li>
|
|
||||||
<li data-aos="fade-up" data-aos-duration="1500">
|
|
||||||
<i className="icofont-verification-check"></i> Typesetting industry lorem Ipsum has been the
|
|
||||||
</li>
|
|
||||||
<li data-aos="fade-up" data-aos-duration="1500">
|
|
||||||
<i className="icofont-verification-check"></i> Industrys standard dummy text
|
|
||||||
</li>
|
|
||||||
<li data-aos="fade-up" data-aos-duration="1500">
|
|
||||||
<i className="icofont-verification-check"></i> Simply dummy text of the printing and
|
|
||||||
</li>
|
|
||||||
<li data-aos="fade-up" data-aos-duration="1500">
|
|
||||||
<i className="icofont-verification-check"></i> Typesetting industry lorem Ipsum has been the
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
:
|
|
||||||
<ul className="app_statstic" id="counter" data-aos="fade-in" data-aos-duration="1500">
|
|
||||||
<li>
|
|
||||||
<div className="icon">
|
|
||||||
{video ? <img src="assets/images/download-one.png" alt="image" /> : <img src={img1} alt="image" />}
|
|
||||||
</div>
|
|
||||||
<div className="text">
|
|
||||||
<p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
|
|
||||||
<p>Download</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div className="icon">
|
|
||||||
{video ? <img src="assets/images/followers-one.png" alt="image" /> : <img src={img2} alt="image" /> }
|
|
||||||
</div>
|
|
||||||
<div className="text">
|
|
||||||
<p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
|
|
||||||
<p>Followers</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div className="icon">
|
|
||||||
{video ? <img src="assets/images/reviews-one.png" alt="image" /> : <img src={img3} alt="image" /> }
|
|
||||||
</div>
|
|
||||||
<div className="text">
|
|
||||||
<p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
|
|
||||||
<p>Reviews</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div className="icon">
|
|
||||||
{video ? <img src="assets/images/countries-one.png" alt="image" /> : <img src={img4} alt="image" /> }
|
|
||||||
</div>
|
|
||||||
<div className="text">
|
|
||||||
<p><span className="counter-value" data-count="150">0</span><span>+</span></p>
|
|
||||||
<p>Countries</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>}
|
|
||||||
<Link to="/contact" className="btn puprple_btn" data-aos="fade-in" data-aos-duration="1500">START FREE TRIAL</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="screen_img">
|
||||||
|
<img className="moving_animation" src={screen} alt="image" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div className="col-lg-6">
|
||||||
|
<div className="about_text">
|
||||||
|
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
||||||
|
<h2>Motivate & Organize <br /> <span>Rewards</span></h2>
|
||||||
|
<p>
|
||||||
|
With a planned reward, the parent can introduce the family to earning and start financial education early.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<ul className="design_block">
|
||||||
|
<li data-aos="fade-up" data-aos-duration="1500">
|
||||||
|
<h4>Goals Completed</h4>
|
||||||
|
<p>Motivate with rewards for goals completed, passing the exam, finishing chores, and learning new skills. </p>
|
||||||
|
</li>
|
||||||
|
<li data-aos="fade-up" data-aos-duration="1500">
|
||||||
|
<h4>Connect Family</h4>
|
||||||
|
<p>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. </p>
|
||||||
|
</li>
|
||||||
|
<li data-aos="fade-up" data-aos-duration="1500">
|
||||||
|
<h4>Find any Task </h4>
|
||||||
|
<p>Make more, connect to the marketplace, and earn from appropriate tasks.</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
import React from 'react'
|
import React, { useState } from 'react'
|
||||||
|
import localImgLoad from '../../../../lib/localImgLoad'
|
||||||
|
|
||||||
import img1 from '../../../../assets/images/modern01.png'
|
import img1 from '../../../../assets/images/modern01.png'
|
||||||
import img2 from '../../../../assets/images/secure_data.png'
|
import img2 from '../../../../assets/images/secure_data.png'
|
||||||
import img3 from '../../../../assets/images/modern02.png'
|
import img3 from '../../../../assets/images/modern02.png'
|
||||||
@@ -6,49 +8,88 @@ import img4 from '../../../../assets/images/modern03.png'
|
|||||||
|
|
||||||
|
|
||||||
const Main = ({gredient}) => {
|
const Main = ({gredient}) => {
|
||||||
|
|
||||||
|
const [activeImg, setActiveImg] = useState(list[0].name)
|
||||||
|
|
||||||
|
const changeActiveImg = (name) => {
|
||||||
|
setActiveImg(name)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
|
<section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
|
||||||
{gredient &&
|
{gredient &&
|
||||||
<div className="modernui_section_bg modernui-gredient"> <img src="assets/images/section-bg.png" alt="image"/> </div>}
|
<div className="modernui_section_bg modernui-gredient">
|
||||||
|
<img src="assets/images/section-bg.png" alt="image"/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row">
|
<div className="row align-items-center">
|
||||||
<div className="col-lg-6">
|
<div className="col-lg-6">
|
||||||
<div className="ui_text">
|
<div className="ui_text w-100">
|
||||||
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
|
<div className="appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
|
||||||
<h2>Beautiful design with <span>modern UI</span></h2>
|
<h3 className='title'>Set Chores, Set Goals <div className='section_sub_title'>Rewards Accomplishments</div></h3>
|
||||||
<p>
|
<p className=''>
|
||||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the
|
Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform plan rewards.
|
||||||
industrys standard dummy text ever since the when an unknown printer took a galley of type and.
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<div className="row">
|
||||||
<ul className="design_block">
|
{list?.map(({ icon, header, paragraph, name }, idx) => (
|
||||||
<li data-aos="fade-up" data-aos-duration="1500">
|
<div className="col-12 mb-20" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
|
||||||
<h4>Carefully designed</h4>
|
<div
|
||||||
<p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p>
|
className={`appie-traffic-service features appie-modern-design`}
|
||||||
</li>
|
style={{ paddingRight: "45px" }}
|
||||||
<li data-aos="fade-up" data-aos-duration="1500">
|
>
|
||||||
<h4>Seamless Sync</h4>
|
<div className="icon">
|
||||||
<p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p>
|
<i className={icon} />
|
||||||
</li>
|
</div>
|
||||||
<li data-aos="fade-up" data-aos-duration="1500">
|
<h5 className="title">{header}</h5>
|
||||||
<h4>Access Drive</h4>
|
<p>{paragraph}</p>
|
||||||
<p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type
|
</div>
|
||||||
setting.</p>
|
</div>
|
||||||
</li>
|
))}
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-lg-6">
|
<div className="col-lg-6">
|
||||||
<div className="ui_images" data-aos="fade-in" data-aos-duration="1500">
|
<div className='w-100 ui_image_con d-flex justify-content-center align-items-center'>
|
||||||
<div className="left_img">
|
<div className="ui_images position-relative d-flex justify-content-center align-items-center" data-aos="fade-in" data-aos-duration="1500">
|
||||||
<img className="moving_position_animatin" src={img1} alt="image" />
|
<div className="left_img position-relative">
|
||||||
</div>
|
<img
|
||||||
<div className="right_img">
|
className="moving_position_animatin position-relative"
|
||||||
<img className="moving_position_animatin" src={img2} alt="image" />
|
src={ localImgLoad(`images/home/${activeImg}.jpg`)}
|
||||||
<img className="moving_position_animatin" src={img3} alt="image" />
|
alt="image"
|
||||||
<img className="moving_position_animatin" src={img4} alt="image" />
|
width='332px'
|
||||||
</div>
|
height='auto'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="right_img position-relative d-flex flex-column justify-content-start align-items-center">
|
||||||
|
<div className='d-flex flex-column justify-content-start align-items-center'>
|
||||||
|
{/* <img className="moving_position_animatin right_img_one" src={img2} alt="image" /> */}
|
||||||
|
<img
|
||||||
|
className="moving_position_animatin right_img_two"
|
||||||
|
// src={img3}
|
||||||
|
src={
|
||||||
|
activeImg == 'reward-goals' ? localImgLoad(`images/home/box-reward.png`)
|
||||||
|
:
|
||||||
|
activeImg == 'assign-chores' ? localImgLoad(`images/home/box-chores.png`)
|
||||||
|
:
|
||||||
|
activeImg == 'financial-edu' ? localImgLoad(`images/home/box-financial.png`)
|
||||||
|
:
|
||||||
|
activeImg == 'family-connect' ? localImgLoad(`images/home/box-family.png`)
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
alt="image"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
className="moving_position_animatin right_img_three position-relative"
|
||||||
|
src={localImgLoad(`images/home/wrench-side-logo-1.png`)}
|
||||||
|
alt="image"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -59,3 +100,32 @@ const Main = ({gredient}) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default Main
|
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',
|
||||||
|
},
|
||||||
|
]
|
||||||
Reference in New Issue
Block a user