added styles

src/assets/css/aboutapp.css

@@ -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;
+}

src/assets/css/main.css

@@ -1,4 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
+@import url("aboutapp.css");
+
 body {
   font-family: "Roboto", sans-serif;
   font-weight: normal;

src/assets/css/style.css

@@ -142,3 +142,94 @@
     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;
+}

src/components/UseCases/index.js

@@ -7,6 +7,7 @@ import UseCase from './UseCase';
 // import BlogSideBar from './BlogSideBar';
 import HeaderNews from './HeaderNews';
 import HeroNews from './HeroNews';
+import AboutApp from '../lnd/LndParts/AboutApp/Main'
 import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
 
 function UseCases() {
@@ -23,6 +24,7 @@ function UseCases() {
                     { link: '/use-cases', title: 'Use Cases' },
                 ]}
             />
+            <AboutApp />
             <section className="blogpage-section">
                 <div className="container">
                     <div className="row">

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 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>
     </>
   )
 }