diff --git a/src/component/mainSection/mainSection.css b/src/component/mainSection/mainSection.css index c7b1926..8161ec8 100644 --- a/src/component/mainSection/mainSection.css +++ b/src/component/mainSection/mainSection.css @@ -1,125 +1,128 @@ .mainSection { - padding-top: 90px; - padding-bottom: 6vw; - width: 100%; - min-height: 100vh; - height: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - gap: 4rem; + padding-top: 90px; + padding-bottom: 2rem; + width: 100%; + min-height: 100vh; + height: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 2rem; } .home-container { - width: 100%; - display: grid; - grid-template-columns: 3fr 2fr; - align-items: center; + width: 100%; + display: grid; + grid-template-columns: 3fr 2fr; + align-items: center; } .home-container__info { - width: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.home-container__info h1 { + font-size: 1.6rem; } .home-container__img { - width: 100%; - height: auto; - aspect-ratio: 1 / 1; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; + width: 100%; + height: auto; + aspect-ratio: 1 / 1; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; } .home-container__img .home-img { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .home-container__info .subtitle { - margin-top: 1rem; + margin-top: 1rem; } .home-container__info .home-btns { - margin-top: 2rem; - display: flex; - align-items: center; - gap: 1rem; + margin-top: 2rem; + display: flex; + align-items: center; + gap: 1rem; } .mainSection .statistics { - margin-top: 4rem; - display: flex; - align-items: center; - gap: 2rem; + margin-top: 4rem; + display: flex; + align-items: center; + gap: 2rem; } .mainSection > .statistics { - display: none; + display: none; } .mainSection .statistics .content { - display: flex; - flex-direction: column; - align-items: center; - gap: 5px; + display: flex; + flex-direction: column; + align-items: center; + gap: 5px; } .mainSection .statistics .content h3 { - font-family: var(--roboto); - font-size: var(--small-fs); - font-weight: var(--fw-800); - line-height: 110.6%; /* 33.18px */ - letter-spacing: 1.2px; - text-transform: uppercase; + font-family: var(--roboto); + font-size: var(--small-fs); + font-weight: var(--fw-800); + line-height: 110.6%; /* 33.18px */ + letter-spacing: 1.2px; + text-transform: uppercase; } .mainSection .statistics .content.project h3 { - background: var(--text-bg-color); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; + background: var(--text-bg-color); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } .mainSection .statistics .content p { - font-size: var(--smaller-fs); - text-align: center; - font-weight: var(--fw-400); - line-height: 185.1%; /* 34.642px */ - letter-spacing: 0.749px; - text-transform: capitalize; + font-size: var(--smaller-fs); + text-align: center; + font-weight: var(--fw-400); + line-height: 185.1%; /* 34.642px */ + letter-spacing: 0.749px; + text-transform: capitalize; } -@media screen and (max-width:992px) { - - .home-container { - grid-template-columns: 1fr 1fr; - } - -} -@media screen and (max-width:768px){ - .mainSection { - justify-content: flex-start; - min-height: fit-content; - } - .home-container { - grid-template-columns: 1fr; - justify-items: center; - gap: 4rem; - } - .mainSection .home-container__info .statistics { - display: none; - } - .mainSection > .statistics { - margin-top: 0; - width: 100%; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - } - .mainSection .statistics .content h3 { - line-height: 100%; - } - .mainSection .statistics .content p { - line-height: 100%; - } - .home-container__img { - width: 80%; - } +@media screen and (max-width: 992px) { + .home-container { + grid-template-columns: 1fr 1fr; + } +} +@media screen and (max-width: 768px) { + .mainSection { + justify-content: flex-start; + min-height: fit-content; + } + .home-container { + grid-template-columns: 1fr; + justify-items: center; + gap: 2rem; + } + + .mainSection .home-container__info .statistics { + display: none; + } + .mainSection > .statistics { + margin-top: 0; + width: 100%; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + } + .mainSection .statistics .content h3 { + line-height: 100%; + } + .mainSection .statistics .content p { + line-height: 100%; + } + .home-container__img { + width: 80%; + } } diff --git a/src/component/testimonials/testimonial.css b/src/component/testimonials/testimonial.css index 60b2098..4e9f884 100644 --- a/src/component/testimonials/testimonial.css +++ b/src/component/testimonials/testimonial.css @@ -1,168 +1,181 @@ .testimonial { - padding-top: 8vw; - padding-bottom: 3vw; - width: 100%; - display: flex; - align-items: center; + padding-top: 8vw; + padding-bottom: 3vw; + width: 100%; + display: flex; + align-items: center; } .testimonial-container { - width: 100%; - overflow: hidden; - /* display: grid; + width: 100%; + overflow: hidden; + /* display: grid; grid-template-columns: 1fr 1fr; gap: 30px; */ } .testimonial-content { - padding: 40px 35px 30px 35px; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; + padding: 40px 35px 30px 35px; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; - border-radius: 10px; - box-shadow: 0 0 4px #808080; - background: rgba(128, 128, 128, 0.1); - position: relative; + border-radius: 10px; + box-shadow: 0 0 4px #808080; + background: rgba(128, 128, 128, 0.1); + position: relative; } .testimonial-content .testimonial-position { - width: 80px; - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 18px; - transform: rotate(-90deg); - position: absolute; - top: -45px; - right: 42px; + width: 80px; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 18px; + transform: rotate(-90deg); + position: absolute; + top: -45px; + right: 42px; } .testimonial-content .testimonial-position .icon1 { - width: 100%; - height: 40px; - background: linear-gradient(125deg, #da6cff, #fe44ee, #ff1ee2, #ff1ee2 72%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0) 100%); + width: 100%; + height: 40px; + background: linear-gradient( + 125deg, + #da6cff, + #fe44ee, + #ff1ee2, + #ff1ee2 72%, + rgba(0, 0, 0, 0) 72%, + rgba(0, 0, 0, 0) 100% + ); } .testimonial-content .testimonial-position .icon2 { - width: 100%; - height: 40px; - background: linear-gradient(125deg, #7654ff, #7a52ff, #bf68fd, #bf68fd 72%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0) 100% ); + width: 100%; + height: 40px; + background: linear-gradient( + 125deg, + #7654ff, + #7a52ff, + #bf68fd, + #bf68fd 72%, + rgba(0, 0, 0, 0) 72%, + rgba(0, 0, 0, 0) 100% + ); } .testimonial-content .assess { - display: flex; - align-items: center; - gap: 8px; + display: flex; + align-items: center; + gap: 8px; } .testimonial-content .subtitle { - margin-top: 20px; - margin-bottom: 20px; + margin-top: 20px; + margin-bottom: 20px; } .testimonial-content .line { - margin-top: auto; - width: 100%; - height: 1px; - background: linear-gradient(90deg, #FFF 1.04%, rgba(255, 255, 255, 0.00) 100%); + margin-top: auto; + width: 100%; + height: 1px; + background: linear-gradient(90deg, #fff 1.04%, rgba(255, 255, 255, 0) 100%); } .testimonial-footer { - margin-top: 26px; - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; + margin-top: 26px; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; } .testimonial-footer .testimonial-person { - display: flex; - align-items: center; - gap: 12px; + display: flex; + align-items: center; + gap: 12px; } .testimonial-person .person-img { - width: 62px; - height: 62px; - border-radius: 50%; - overflow: hidden; + width: 62px; + height: 62px; + border-radius: 50%; + overflow: hidden; } .testimonial-footer .testimonial-person .info-box { - display: flex; - flex-direction: column; - align-items: flex-start; + display: flex; + flex-direction: column; + align-items: flex-start; } .testimonial-footer .testimonial-person .info-box > p { - font-size: var(--small-fs); - font-weight: var(--fw-500); - line-height: 110.6%; /* 23.191px */ - letter-spacing: 0.734px; - text-transform: capitalize; + font-size: var(--small-fs); + font-weight: var(--fw-500); + line-height: 110.6%; /* 23.191px */ + letter-spacing: 0.734px; + text-transform: capitalize; } .testimonial-footer .testimonial-person .info-box > span { - margin-top: 10px; - font-size: 12px; - font-weight: var(--fw-500); - line-height: 110.6%; /* 12.884px */ - letter-spacing: 0.408px; - text-transform: capitalize; -} + margin-top: 10px; + font-size: 12px; + font-weight: var(--fw-500); + line-height: 110.6%; /* 12.884px */ + letter-spacing: 0.408px; + text-transform: capitalize; +} .testimonial-status { - display: flex; - align-items: center; - gap: 6px; + display: flex; + align-items: center; + gap: 6px; } .testimonial-status .icon { - width: 25px; - height: 25px; + width: 25px; + height: 25px; } .testimonial-status > span { - font-size: 15px; - font-weight: var(--fw-500); - line-height: 110.6%; /* 16.203px */ - letter-spacing: 0.513px; - text-transform: capitalize; + font-size: 15px; + font-weight: var(--fw-500); + line-height: 110.6%; /* 16.203px */ + letter-spacing: 0.513px; + text-transform: capitalize; } @media screen and (max-width: 768px) { - /* .testimonial-container { + /* .testimonial-container { grid-template-columns: 1fr; gap: 40px; } */ - .testimonial-content .testimonial-position .icon1 { - width: 80%; - height: 20px; - } - .testimonial-content .testimonial-position .icon2 { - width: 80%; - height: 20px; - } - .testimonial-footer { - margin-top: 20px; - } + .testimonial-content .testimonial-position .icon1 { + width: 80%; + height: 20px; + } + .testimonial-content .testimonial-position .icon2 { + width: 80%; + height: 20px; + } + .testimonial-footer { + margin-top: 20px; + } } +.swiper { + padding-top: 3rem; + padding-bottom: 3rem; + width: 200%; + height: 100%; + overflow: visible !important; +} - +.swiper-slide { + font-size: 18px; + /* Center slide text vertically */ + display: flex; + justify-content: center; + align-items: center; + height: auto !important; +} .swiper { - padding-top: 3rem; - padding-bottom: 3rem; - width: 100%; - height: 100%; - overflow: visible !important; - } - - .swiper-slide { - font-size: 18px; - /* Center slide text vertically */ - display: flex; - justify-content: center; - align-items: center; - height: auto !important; - } - - .swiper { - margin-left: auto; - margin-right: auto; - } + margin-left: auto; + margin-right: auto; +} diff --git a/src/pages/login/Login.js b/src/pages/login/Login.js index 33c24aa..507f61e 100644 --- a/src/pages/login/Login.js +++ b/src/pages/login/Login.js @@ -36,13 +36,13 @@ const Login = () => {