WrenchBoard/WrenchBoardMainSite
2
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

added text

Browse Source
This commit was merged in pull request #62.
This commit is contained in:
Ebube
2024-02-01 18:55:09 +01:00
parent 7f8fc1086f
commit 46341abf2a
3 changed files with 104 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/css/aboutapp.css
+63
View File
@@ -152,6 +152,12 @@
} }
} }
.section_title h2 {
font-size: 40px;
font-weight: 700;
color: #32236F;
}
.section_title h2 span { .section_title h2 span {
color: #1a3544; color: #1a3544;
} }
@@ -274,3 +280,60 @@
.puprple_btn:hover { .puprple_btn:hover {
color: #1a3544; 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;
}
src/assets/images/icon/right_icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 611 B

src/components/lnd/LndParts/AboutApp/Main.js
+41 -85
View File
@@ -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 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>
</> </>
) )
} }