From 46341abf2aa6faeb750ecde3ce16c79b0f98e3ee Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Thu, 1 Feb 2024 18:55:09 +0100
Subject: [PATCH] added text

---
 src/assets/css/aboutapp.css                  |  63 ++++++++++
 src/assets/images/icon/right_icon.png        | Bin 0 -> 611 bytes
 src/components/lnd/LndParts/AboutApp/Main.js | 126 ++++++-------------
 3 files changed, 104 insertions(+), 85 deletions(-)
 create mode 100644 src/assets/images/icon/right_icon.png

diff --git a/src/assets/css/aboutapp.css b/src/assets/css/aboutapp.css
index b305917..1db033b 100644
--- a/src/assets/css/aboutapp.css
+++ b/src/assets/css/aboutapp.css
@@ -152,6 +152,12 @@
   }
 }
 
+.section_title h2 {
+  font-size: 40px;
+  font-weight: 700;
+  color: #32236F;
+}
+
 .section_title h2 span {
   color: #1a3544;
 }
@@ -273,4 +279,61 @@
 
 .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: 20px;
+  color: #32236F;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.modern_ui_section .design_block li p {
+  margin-bottom: 0;
 }
\ No newline at end of file
diff --git a/src/assets/images/icon/right_icon.png b/src/assets/images/icon/right_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..704fee02419ba8a2dbebafaa2ed48bae20dd58f7
GIT binary patch
literal 611
zcmV-p0-XJcP)<h;3K|Lk000e1NJLTq000&M000&U1^@s6#I$TX00004b3#c}2nYxW
zd<bNS0006SNkl<ZI8U{e!A}!G6vn?-V7Emm`~f5sJn2P3V&buoNJ=<>2T33%;!PWc
zO^gRmAQumkSR*0f1e{FdQf`C`97!NrIiMF~5B>q|R?~$Po-?~{-7TH%QsNwE=KbC`
z-@JK4Pz)o<-KV<wkRy}?^8gVg<W^?RgD3|^R<}C0GJ900hoIU?8yNjH2Rb(Z>Q*Io
z=D7flWHhVeU2Os%*oMZ;T>%^j2G*`}PAkWUyznacFZ4%am8z6n5b!=1ZiAaws#b1;
z)2ZTuxRCkF9bd7V`PIsH*8(+T!N`3LBa=FIKAvD_^Ry;|V+lPOEgA%R8&<7^jy=%P
z+6I&gjE$u-zJ5CMhcg~gI%Q@-7!L!UdK$%@yKOd9j-TJp@%q{Ci=m7yN{<%vq7r(&
zt5VhQJq_PJpJDw?*<PA?5yS1F*6KDT)T!^B0GsTE-WY7b<N5Zgs)OB%y&N9u&@O=G
z<nyI=^xtf$>(0@B1*?nBDS}2_D`ddS_t(&KJ>rX%>RoGspv?FZczIrUSg2#Myu6e-
zBdTJpo&xFj^lS{rhZTHSwi=!O-?}U}`9MyhW?r<#uJDoSouaK4bt|6ue@|NGc2t-4
zh;ZvFs^z7L=AV=u&et}tVu@>kuWh<2n^o>r>arAHlWB<OXf(P|sZs#M*A&kLeobC~
xoxiU%A?7ATl7#EOUHm{^%x5*LGpqVc{{U=U{BysWf;j*H002ovPDHLkV1n3W8AkvB

literal 0
HcmV?d00001

diff --git a/src/components/lnd/LndParts/AboutApp/Main.js b/src/components/lnd/LndParts/AboutApp/Main.js
index 3f61b23..1f051b0 100644
--- a/src/components/lnd/LndParts/AboutApp/Main.js
+++ b/src/components/lnd/LndParts/AboutApp/Main.js
@@ -7,95 +7,51 @@ import img2 from '../../../../assets/images/followers.png'
 import img3 from '../../../../assets/images/reviews.png'
 import img4 from '../../../../assets/images/countries.png'
 
-const Main = ({video , dark}) => {
+const Main = ({ video, dark }) => {
   return (
     <>
-        <section className="row_am about_app_section">
-            <div className="container">
-                <div className="row">
-                    <div className="col-lg-6">
-                        <div className="about_img" data-aos="fade-in" data-aos-duration="1500">
-                        <div className="frame_img">
-                            <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>
+      <section className="row_am about_app_section">
+        <div className="container">
+          <div className="row modern_ui_section">
+            <div className="col-lg-6">
+              <div className="about_img" data-aos="fade-in" data-aos-duration="1500">
+                <div className="frame_img">
+                  <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>
-        </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 shores, 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>
     </>
   )
 }
-- 
2.34.1