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

Merge branch 'added-about-app-component' of WrenchBoard/WrenchBoardMainSite into master

Browse Source
This commit is contained in:
Olusesan Ameye
2024-02-01 17:06:47 +00:00
committed by Gogs
parent 490492bd0f a312984df8
commit 7f8fc1086f
4 changed files with 367 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/css/aboutapp.css
+276
View File
@@ -0,0 +1,276 @@
@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;
}
}
@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 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;
}
src/assets/css/main.css
+2
View File
@@ -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
+87
View File
@@ -142,3 +142,90 @@
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: var(--bg-white);
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: var(--bg-white);
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: var(--dark-purple);
}
.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;
}
src/components/UseCases/index.js
+2
View File
@@ -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">