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

added a new section on home page

Browse Source
This commit is contained in:
victorAnumudu
2024-01-28 07:32:27 +01:00
parent 715972dbde
commit 0c4e464c5e
3 changed files with 129 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HomeOne/ServicesHomeOne.js
+3
View File
@@ -3,6 +3,7 @@ import IconOne from '../../assets/images/icon/reward.png';
import IconTwo from '../../assets/images/icon/assign-chores.png';
import IconThree from '../../assets/images/icon/financial-education.png';
import IconFour from '../../assets/images/icon/family-connect.png';
import Main from '../lnd/LndParts/Design/Main';
function ServiceItem({ icon, title, description, index }) {
return (
@@ -51,6 +52,8 @@ function ServicesHomeOne({ className }) {
))}
</div>
</div>
<Main />
</section>
);
}
src/components/lnd/LndParts/Design/Main.js
+78 -35
View File
@@ -10,45 +10,68 @@ const Main = ({gredient}) => {
<>
<section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
{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="row">
<div className="row align-items-center">
<div className="col-lg-6">
<div className="ui_text">
<div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
<h2>Beautiful design with <span>modern UI</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.
</p>
</div>
<ul className="design_block">
<li data-aos="fade-up" data-aos-duration="1500">
<h4>Carefully designed</h4>
<p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p>
</li>
<li data-aos="fade-up" data-aos-duration="1500">
<h4>Seamless Sync</h4>
<p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p>
</li>
<li data-aos="fade-up" data-aos-duration="1500">
<h4>Access Drive</h4>
<p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type
setting.</p>
</li>
</ul>
<div className="ui_text w-100">
<div className="appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
<h3 className='title'>Beautiful design with <div style={{color:'purple'}}>modern UI</div></h3>
<p className=''>
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.
</p>
</div>
{/* <ul className="design_block">
<li data-aos="fade-up" data-aos-duration="1500">
<h4>Carefully designed</h4>
<p>Lorem Ipsum is simply dummy text of the printing and type esetting industry lorem Ipsum has.</p>
</li>
<li data-aos="fade-up" data-aos-duration="1500">
<h4>Seamless Sync</h4>
<p>Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.</p>
</li>
<li data-aos="fade-up" data-aos-duration="1500">
<h4>Access Drive</h4>
<p>Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of type
setting.</p>
</li>
</ul> */}
<div className="row">
{list?.map(({ icon, header, paragraph }, idx) => (
<div className="col-12" key={idx}>
<div
className={`appie-traffic-service features appie-modern-design mb-30`}
style={{ paddingRight: "45px" }}
>
<div className="icon">
<i className={icon} />
</div>
<h5 className="title">{header}</h5>
<p>{paragraph}</p>
</div>
</div>
))}
</div>
</div>
</div>
<div className="col-lg-6">
<div className="ui_images" data-aos="fade-in" data-aos-duration="1500">
<div className="left_img">
<img className="moving_position_animatin" src={img1} alt="image" />
</div>
<div className="right_img">
<img className="moving_position_animatin" src={img2} alt="image" />
<img className="moving_position_animatin" src={img3} alt="image" />
<img className="moving_position_animatin" src={img4} alt="image" />
</div>
<div className='w-100 ui_image_con d-flex justify-content-center align-items-center'>
<div className="ui_images position-relative d-flex justify-content-center align-items-center" data-aos="fade-in" data-aos-duration="1500">
<div className="left_img">
<img className="moving_position_animatin" src={img1} alt="image" />
</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} alt="image" />
</div>
<img className="moving_position_animatin right_img_three position-relative" src={img4} alt="image" />
</div>
</div>
</div>
</div>
</div>
@@ -58,4 +81,24 @@ const Main = ({gredient}) => {
)
}
export default Main
export default Main
const list = [
{
icon: "fal fa-check",
header: "Carefully designed",
paragraph: "Get family access from parents, or create your free account.",
},
{
icon: "fal fa-check",
header: "Seamless Sync",
paragraph: "Simply dummy text of the printing and typesetting inustry lorem Ipsum has Lorem dollar summit.",
},
{
icon: "fal fa-check",
header: "Access Drive",
paragraph: "Printing and typesetting industry lorem Ipsum has been the industrys standard dummy text of typesetting.",
},
]