diff --git a/index.html b/index.html index 0ac2d657..d9d131a4 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,8 @@ + + @@ -105,6 +107,9 @@ + + + diff --git a/public/img/teams/team-member-1.png b/public/img/app/teams/team-member-1.png similarity index 100% rename from public/img/teams/team-member-1.png rename to public/img/app/teams/team-member-1.png diff --git a/public/img/teams/team-member-2.png b/public/img/app/teams/team-member-2.png similarity index 100% rename from public/img/teams/team-member-2.png rename to public/img/app/teams/team-member-2.png diff --git a/public/img/teams/team-member-3.png b/public/img/app/teams/team-member-3.png similarity index 100% rename from public/img/teams/team-member-3.png rename to public/img/app/teams/team-member-3.png diff --git a/public/img/teams/team-member-4.png b/public/img/app/teams/team-member-4.png similarity index 100% rename from public/img/teams/team-member-4.png rename to public/img/app/teams/team-member-4.png diff --git a/public/img/icons/ai.png b/public/img/icons/ai.png new file mode 100644 index 00000000..bf9b1f11 Binary files /dev/null and b/public/img/icons/ai.png differ diff --git a/public/img/icons/apple-icon-lite.png b/public/img/icons/apple-icon-lite.png new file mode 100644 index 00000000..2654c2d3 Binary files /dev/null and b/public/img/icons/apple-icon-lite.png differ diff --git a/public/img/icons/attendance.png b/public/img/icons/attendance.png new file mode 100644 index 00000000..ea2460b6 Binary files /dev/null and b/public/img/icons/attendance.png differ diff --git a/public/img/icons/cloud-service.png b/public/img/icons/cloud-service.png new file mode 100644 index 00000000..de9dd0ac Binary files /dev/null and b/public/img/icons/cloud-service.png differ diff --git a/public/img/icons/dashboard.png b/public/img/icons/dashboard.png new file mode 100644 index 00000000..5d62aef8 Binary files /dev/null and b/public/img/icons/dashboard.png differ diff --git a/public/img/icons/document.png b/public/img/icons/document.png new file mode 100644 index 00000000..aec11224 Binary files /dev/null and b/public/img/icons/document.png differ diff --git a/public/img/icons/google-play-icon-lite.png b/public/img/icons/google-play-icon-lite.png new file mode 100644 index 00000000..6952cb9f Binary files /dev/null and b/public/img/icons/google-play-icon-lite.png differ diff --git a/public/img/icons/spending.png b/public/img/icons/spending.png new file mode 100644 index 00000000..aaf8d53c Binary files /dev/null and b/public/img/icons/spending.png differ diff --git a/src/App.tsx b/src/App.tsx index db452672..4818ce5b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,7 +18,7 @@ const App = () => { - + {/* */} ); diff --git a/src/pages/Home/LandingPage.css b/src/pages/Home/LandingPage.css index 35b05e9e..bb47eab4 100644 --- a/src/pages/Home/LandingPage.css +++ b/src/pages/Home/LandingPage.css @@ -1,656 +1,206 @@ +/* Custom Styles */ +.carousel-item { + height: 100vh; + min-height: 500px; + background-size: cover; + background-position: center; + position: relative; +} + +.carousel-caption { + bottom: 20%; +} + +.hero-overlay { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.4); +} + +.feature-icon { + font-size: 40px; + color: #4fc143; +} + +.text-primary { + color: #49bf3c !important; +} +.text-blue { + color: #696cff !important; +} + +.btn-primary { + background-color: #49bf3c !important; +} + +body { + font-family: "Segoe UI", Roboto, sans-serif; + background-color: #ffff; +} + +.hero { + background: linear-gradient(135deg, #4fc143, #007bff); + color: white; + padding: 100px 0; +} + +.pricing-card { + transition: transform 0.2s, box-shadow 0.2s; +} + +.pricing-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); +} + +.feature-icon-image { + width: 50px; +} + +.accordion { + --bs-accordion-box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08); + --bs-accordion-active-box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1); + --bs-accordion-active-bg: #fff; + --bs-accordion-btn-active-bg: #fff; + --bs-accordion-btn-focus-box-shadow: none; + --bs-accordion-btn-focus-shadow-width: 0; + --bs-accordion-color: #646e78; + --bs-accordion-bg: #fff; + --bs-accordion-transition: all 0.2s ease-in-out, border-radius 0.15s ease; + --bs-accordion-border-color: #fff; + --bs-accordion-border-width: 1px; + --bs-accordion-border-radius: 0.375rem; + --bs-accordion-inner-border-radius: 0.375rem; + --bs-accordion-btn-padding-x: 1.4375rem; + --bs-accordion-btn-padding-y: 0.7305rem; + --bs-accordion-btn-color: #384551; + --bs-accordion-btn-bg: #fff; + --bs-accordion-btn-icon: url( + data:image/svg + xml, + %3csvgwidth="20"height="20"viewBox="0 0 20 20"fill="none"xmlns="http://www.w3.org/2000/svg"%3e%3cgid="bx-chevron-down"%3e%3cpathid="Vector"d="M13.5775 7.74417L9.99997 11.3217L6.42247 7.74417L5.24414 8.9225L9.99997 13.6783L14.7558 8.9225L13.5775 7.74417Z"fill="%23384551"fill-opacity="0.9"/%3e%3c/g%3e%3c/svg%3e + ); + --bs-accordion-btn-icon-width: 1.25rem; + --bs-accordion-btn-icon-transform: rotate(-180deg); + --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out; + --bs-accordion-btn-active-icon: url( + data:image/svg + xml, + %3csvgwidth="20"height="20"viewBox="0 0 20 20"fill="none"xmlns="http://www.w3.org/2000/svg"%3e%3cgid="bx-chevron-down"%3e%3cpathid="Vector"d="M13.5775 7.74417L9.99997 11.3217L6.42247 7.74417L5.24414 8.9225L9.99997 13.6783L14.7558 8.9225L13.5775 7.74417Z"fill="%23384551"fill-opacity="0.9"/%3e%3c/g%3e%3c/svg%3e + ); + --bs-accordion-btn-focus-box-shadow: none; + --bs-accordion-body-padding-x: 1.1875rem; + --bs-accordion-body-padding-y: 1.1875rem; + --bs-accordion-active-color: #384551; + --bs-accordion-active-bg: #fff; +} + +.accordion-header { + line-height: 1.375; + margin-bottom: 0; + position: relative; + border-bottom: none; +} + +.accordion-item { + color: #646e78; + background-color: #fff; + border: 1px solid #fff; +} + +.accordion-item:first-of-type { + border-top-left-radius: 0.375rem; + border-top-right-radius: 0.375rem; +} + +.accordion:not(.accordion-custom-button):not(.accordion-arrow-left) + .accordion-item:not(:last-of-type) { + margin-block-end: 0.5rem; +} + +.accordion-button { + position: relative; + display: flex; + align-items: center; + width: 100%; + padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x); + font-size: 1rem; + font-weight: 400; + color: var(--bs-accordion-btn-color); + text-align: left; + background-color: var(--bs-accordion-btn-bg); + border: 0; + border-radius: 0; + overflow-anchor: none; + transition: var(--bs-accordion-transition); +} + +.accordion-button:not(.collapsed) { + color: var(--bs-accordion-active-color); + background-color: var(--bs-accordion-active-bg); + box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 + var(--bs-accordion-border-color); +} + .section-py { padding: 6.25rem 0; } -.section-py .heading { - font-size: 1.625rem; -} -@media (max-width: 1199.98px) { - .section-py { - padding: 4rem 0; - } -} -@media (max-width: 767.98px) { - .section-py { - padding: 3rem 0; - } +.btn-primary { + --bs-btn-color: #fff; + --bs-btn-bg: #4fc143; + --bs-btn-border-color: #4fc143; + --bs-btn-hover-color: #fff; + --bs-btn-hover-bg: #0b5ed7; + --bs-btn-hover-border-color: #0a58ca; + --bs-btn-focus-shadow-rgb: 49, 132, 253; + --bs-btn-active-color: #fff; + --bs-btn-active-bg: #0a58ca; + --bs-btn-active-border-color: #0a53be; + --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + --bs-btn-disabled-color: #fff; + --bs-btn-disabled-bg: #4fc143; + --bs-btn-disabled-border-color: #4fc143; } -.first-section-pt { - padding-top: 11.28rem; -} -@media (max-width: 1199.98px) { - .first-section-pt { - padding-top: 7.5rem; - } +/* https://codingyaar.com/bootstrap-card-hover-effect-3-background-color-change/# */ +.card-slider { + border: 0; + border-radius: 0; + /* color: #fff; */ + box-shadow: 5px 5px 10px #e1e1e1; + padding: 3em 0; + /* border-bottom-right-radius: 4em; + border-top-left-radius: 4em; */ + background: linear-gradient( + to left, + rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) 50%, + #4fc143 50% + ); + background-size: 200%; + background-position: right; + transition: background-position 0.5s ease-out; } -.card[class*="card-hover-border-"] { - transition: all 0.2s ease-in-out; +.card-slider:hover { + background-position: left; + transform: translateY(-5px); } -.banner-bg-img { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - object-fit: cover; - object-position: left; -} - -.section-title-img { - height: 100%; - width: 120%; - inset-inline-start: -12%; - top: 10px; -} - -/* .light-style body { - background-color: #fff; -} */ - -.dark-style body { - background-color: #2b2c40; -} - -nav.layout-navbar { - /* backdrop-filter: unset; */ - /* background-color: transparent !important; */ - /* background-color: rgba(214, 36, 33, 0.88) !important; */ -} - -nav.layout-navbar::before { - position: absolute; - display: block; - block-size: 100%; - content: ""; - inline-size: 100%; - inset-block-start: 0; - inset-inline-start: 0; -} - -nav.layout-navbar .navbar.landing-navbar { - --bs-front-navbar-bg: rgba(var(--bs-paper-bg-rgb), 0.38); - --bs-front-navbar-border-color: rgba(var(--bs-paper-bg-rgb), 0.68); - border: 2px solid var(--bs-front-navbar-border-color); - background-color: var(--bs-front-navbar-bg); - margin-block-start: 1rem; - padding-block: 0.614rem; - transform: unset; - transition: all 0.2s ease-in-out; - border-radius: 0.375rem; -} - -nav.layout-navbar.navbar-active::after { - backdrop-filter: saturate(100%) blur(6px); - -webkit-backdrop-filter: saturate(100%) blur(6px); -} - -.navbar.landing-navbar { - box-shadow: none; - transition: all 0.2s ease-in-out; - transform: unset !important; - padding-top: 0.614rem; - padding-bottom: 0.614rem; - margin-top: 1rem; - border-width: 2px; - border-style: solid; - border-radius: 0.375rem; -} -.navbar.landing-navbar .navbar-nav .nav-link { - padding: 0.5rem 0.625rem; - margin-inline-end: 0.625rem; -} -@media (max-width: 1199.98px) { - .navbar.landing-navbar .navbar-nav .nav-link { - padding-left: 0.5rem; - padding-right: 0.5rem; - margin-inline-end: 0; - } -} -.navbar.landing-navbar .navbar-nav .nav-item:last-child .nav-link { - margin-inline-end: 0; -} -@media (min-width: 992px) { - .navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown > .dropdown-menu { - max-width: 1300px; - inset-inline-start: 50% !important; - transform: translateX(-50%); - top: 100%; - } -} -@media (max-width: 991.98px) { - .navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown > .dropdown-menu { - background: transparent; - box-shadow: none; - border: none; - } -} -.navbar.landing-navbar - .navbar-nav - .nav-item.mega-dropdown - > .dropdown-menu - .mega-dropdown-link { - padding-left: 0; - padding-right: 0; - margin: 0; - font-weight: 400; -} -.navbar.landing-navbar - .navbar-nav - .nav-item.mega-dropdown - > .dropdown-menu - .mega-dropdown-link - i { - font-size: 1rem; - font-weight: 700; - margin-top: -0.125rem; -} -.navbar.landing-navbar .navbar-nav .nav-item .nav-img-col, -.navbar.landing-navbar .navbar-nav .nav-item .nav-img-col img { - border-radius: 0.625rem; -} -@media (max-width: 991.98px) { - .navbar.landing-navbar .landing-menu-overlay { - position: fixed; - display: none; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(34, 48, 62, 0.78); - transition: all 0.2s ease-in-out; - z-index: 9998; - } - .navbar.landing-navbar .landing-nav-menu { - position: fixed; - display: block !important; - height: 100%; - max-width: 300px; - width: 80%; - padding: 1rem; - inset-inline-start: -100%; - top: 0; - overflow-y: auto; - transition: all 0.3s ease-in-out; - z-index: 9999; - } - .navbar.landing-navbar .landing-nav-menu.show { - inset-inline-start: 0; - } - .navbar.landing-navbar .landing-nav-menu.show ~ .landing-menu-overlay { - display: block; - } -} - -.light-style .layout-navbar .navbar.landing-navbar { - border-color: rgba(255, 255, 255, 100); - background: rgba(255, 255, 255, 50); -} -.light-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link { - color: #384551; -} -.light-style - .layout-navbar - .navbar.landing-navbar - .navbar-nav - .show - > .nav-link, -.light-style - .layout-navbar - .navbar.landing-navbar - .navbar-nav - .active - > .nav-link, -.light-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.show, -.light-style - .layout-navbar - .navbar.landing-navbar - .navbar-nav - .nav-link.active { - color: #696cff !important; -} -.light-style - .layout-navbar - .navbar.landing-navbar - .navbar-nav - .nav-item.mega-dropdown - > .dropdown-menu - .mega-dropdown-link - i { - color: #646e78; -} -@media (max-width: 991.98px) { - .light-style .layout-navbar .navbar.landing-navbar .landing-nav-menu { - background-color: #fff; - } -} -.light-style .layout-navbar.navbar-active .navbar.landing-navbar { - background: #fff; - box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08); -} -.light-style .layout-navbar .menu-text { - color: #384551; -} - -.dark-style .layout-navbar .navbar.landing-navbar { - border-color: rgba(65, 65, 95, 0.68); - background-color: rgba(65, 65, 95, 0.38); -} -.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link { - color: #d5d5e2; -} -.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .show > .nav-link, -.dark-style - .layout-navbar - .navbar.landing-navbar - .navbar-nav - .active - > .nav-link, -.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.show, -.dark-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.active { - color: #696cff !important; -} -.dark-style - .layout-navbar - .navbar.landing-navbar - .navbar-nav - .nav-item.mega-dropdown - > .dropdown-menu - .mega-dropdown-link - i { - color: #b2b2c4; -} -@media (max-width: 991.98px) { - .dark-style .layout-navbar .navbar.landing-navbar .landing-nav-menu { - background-color: #2b2c40; - } -} -.dark-style .layout-navbar .navbar .menu-text { - color: #d5d5e2; -} -.dark-style .layout-navbar.navbar-active .navbar.landing-navbar { - background: #2b2c40; - border-color: #2b2c40; - box-shadow: 0 0.125rem 0.375rem 0 rgba(20, 20, 29, 0.2); -} - -@media (min-width: 992px) { - [dir="rtl"] - .navbar.landing-navbar - .navbar-nav - .nav-item.mega-dropdown - > .dropdown-menu { - transform: translateX(50%); - } -} - -.landing-footer .footer-link, -.landing-footer .footer-text { - color: #fff; - opacity: 0.78; -} -.landing-footer .footer-title { - color: #fff; - opacity: 0.92; -} -.landing-footer .footer-bottom-text { - color: #d3d4dc; -} -.landing-footer .footer-bottom { - background-color: #f44336; -} -.landing-footer .footer-link { - transition: all 0.2s ease-in-out; -} -.landing-footer .footer-link:hover { +.scroll-top.active { + visibility: visible; opacity: 1; } -.landing-footer .footer-top { - padding-top: 1.3rem; - padding-bottom: 1.3rem; - border-top-left-radius: 1.75rem; - border-top-right-radius: 1.75rem; - background-color: #f44336; -} -@media (max-width: 767.98px) { - .landing-footer .footer-top { - padding: 3rem 0; - } -} -.landing-footer .footer-top .footer-bg { - object-position: center; -} -@media (min-width: 992px) { - .landing-footer .footer-logo-description { - max-width: 385px; - } -} -.landing-footer .footer-form { - max-width: 22.25rem; -} -.landing-footer .footer-form input { - background-color: transparent; - border-color: #4e4f6c; - color: #fff; -} -.landing-footer .footer-form input:hover:not([disabled]):not([focus]) { - border-color: #4e4f6c; -} -.landing-footer .footer-form input::placeholder { - color: rgba(255, 255, 255, 0.5); -} -.landing-footer .footer-form label { - color: #d5d5e2; -} -.section-py { - padding: 6.25rem 0; -} -@media (max-width: 1199.98px) { - .section-py { - padding: 5rem 0; - } -} -@media (max-width: 767.98px) { - .section-py { - padding: 3rem 0; - } -} - -.landing-hero { - border-radius: 0 0 3.5rem 3.5rem; - padding-top: 8.2rem; -} -.landing-hero::after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; -} -@media (min-width: 992px) { - .landing-hero .hero-text-box { - /* max-width: 34.375rem; */ - max-width: 70%; - margin: 0 auto; - } -} -.landing-hero .hero-title { - background: linear-gradient( - to right, - #28c76f 0%, - #5a4aff 47.92%, - #ff3739 100% - ); - background-size: 200% auto; - color: #384551; - font-size: calc(1.3875rem + 1.65vw); - background-clip: text; - line-height: 1.2; - text-fill-color: transparent; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - animation: shine 2s ease-in-out infinite alternate; -} -@media (min-width: 1200px) { - .landing-hero .hero-title { - font-size: 2.625rem; - } -} -.landing-hero .landing-hero-btn .hero-btn-item { - inset-inline-start: -94%; - top: 65%; -} -.landing-hero .hero-animation-img { - margin-bottom: -32rem; -} -.animation-img { - border: 1px soid red; -} -@media (max-width: 1199.98px) { - .landing-hero .hero-animation-img { - margin-bottom: -20rem; - } -} -@media (max-width: 575.98px) { - .landing-hero .hero-animation-img { - margin-bottom: -10rem; - } -} -.landing-hero .hero-animation-img .hero-dashboard-img { - width: 80%; - margin: 0 auto; - will-change: transform; - transform-style: preserve-3d; - transition: all 0.1s; -} -.landing-hero .hero-animation-img .hero-dashboard-img img { - width: 100%; -} - -.landing-hero-blank { - padding-top: 26rem; -} -@media (max-width: 1199.98px) { - .landing-hero-blank { - padding-top: 15rem; - } -} -@media (max-width: 575.98px) { - .landing-hero-blank { - padding-top: 7rem; - } -} - -@keyframes shine { - 0% { - background-position: 0% 50%; - } - 80% { - background-position: 50% 90%; - } - 100% { - background-position: 91% 100%; - } -} -.landing-features - .features-icon-wrapper - .features-icon-box - .features-icon-description { - max-width: 19.25rem; - margin: 0 auto; -} - -.landing-reviews { - border-top-left-radius: 3.75rem; - border-top-right-radius: 3.75rem; -} -.landing-reviews .swiper-reviews-carousel .swiper-button-prev, -.landing-reviews .swiper-reviews-carousel .swiper-button-next { - display: none; -} -.landing-reviews .swiper-reviews-carousel .swiper-slide { - height: auto; - padding: 0.8125rem; -} -.landing-reviews .swiper-reviews-carousel .client-logo { - height: 1.375rem; - object-fit: contain; -} -.landing-reviews .swiper-logo-carousel { - padding-bottom: 6.25rem; -} -.landing-reviews .swiper-logo-carousel .swiper { - max-width: 45rem; -} -.landing-reviews .swiper-logo-carousel .swiper .swiper-slide { - display: flex; - justify-content: center; -} -.landing-reviews .swiper-logo-carousel .swiper .client-logo { - max-height: 2.5rem; - max-width: 95%; - object-fit: contain; -} - -.landing-team .card, -.landing-team .card .team-image-box { - border-top-left-radius: 5.625rem; - border-top-right-radius: 1.25rem; -} -.landing-team .card .card-body { - border-bottom-left-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; -} -.landing-team .team-image-box { - height: 11.5625rem; -} -.landing-team .team-image-box .card-img-position { - height: 15rem; - transform: translateX(-50%); - max-width: 100%; - object-fit: cover; -} -@media (max-width: 991.98px) { - .landing-team .team-image-box .card-img-position { - height: 13rem; - } -} -@media (max-width: 575.98px) { - .landing-team .team-image-box { - height: 11rem; - } -} -.landing-team .card .team-media-icons i { - transition: all 0.2s ease-in-out; -} - -.landing-pricing { - border-radius: 3.75rem; -} -.landing-pricing .pricing-plans-item { - inset-inline-end: -56%; - bottom: -0.5rem; -} -@media (max-width: 767.98px) { - .landing-pricing .pricing-plans-item { - inset-inline-end: 0; - bottom: 1rem; - } -} -.landing-pricing .pricing-list .badge.badge-center { - width: 1rem; - height: 1rem; -} -.landing-pricing .pricing-list .badge.badge-center i { - margin-top: -5px; -} -.landing-pricing .price-yearly-toggle { - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); -} -.landing-pricing .card .card-header, -.landing-pricing .card .card-body { - padding: 2rem; - padding-top: 3rem; -} - -.landing-faq { - border-top-left-radius: 3.75rem; - border-top-right-radius: 3.75rem; -} -.landing-faq .faq-image { - max-width: 20rem; - width: 80%; -} - -.landing-cta .cta-title { - font-size: 2.125rem; -} -@media (max-width: 767.98px) { - .landing-cta .cta-title { - font-size: 1.8rem; - } -} - -.landing-contact .text-heading { - overflow-wrap: anywhere; -} -.landing-contact .contact-img-box, -.landing-contact .contact-img-box .contact-img { - border-radius: 3.75rem 0.375rem 0.375rem 0.375rem; -} -.landing-contact .contact-img-box .contact-border-img { - inset-block-start: -2.5rem; - inset-inline-start: -2.8125rem; -} - -.light-style .landing-hero { - background: linear-gradient(138.18deg, #eae8fd 0%, #fce5e6 94.44%); -} -.light-style .landing-hero::after { - background-color: #fff; -} - -.dark-style .landing-hero { - background: #1e2130; -} -.dark-style .landing-hero::after { - background-color: #2b2c40; -} - -[dir="rtl"] .landing-reviews-btns { - display: flex; - justify-content: flex-end; - flex-direction: row-reverse; - gap: 1rem; -} -[dir="rtl"] .landing-team .team-image-box .card-img-position { - transform: translateX(50%) !important; -} -[dir="rtl"] .landing-pricing .switch .switch-label { - padding-right: 0; -} -[dir="rtl"] .landing-pricing .switch .switch-label:first-child { - padding-left: 0.5rem; -} -[dir="rtl"] .landing-pricing .switch .switch-input ~ .switch-label { - padding-right: 3rem; -} -[dir="rtl"] .landing-contact .contact-img-box { - border-radius: 0.375rem 3.75rem 0.375rem 0.375rem; -} -[dir="rtl"] .landing-contact .contact-img-box::before { - inset-block-start: -1.875rem; - inset-inline-start: -3.125rem; - transform: rotate(90deg); -} - -.swiper { - width: 100%; - height: 100%; - border-radius: 10px; -} - -.swiper-slide { - text-align: center; - font-size: 18px; - - /* Center slide text vertically */ - display: flex; - justify-content: center; - align-items: center; -} - -.swiper-slide img { - display: block; - width: 100%; - height: 100%; - object-fit: cover; +.scroll-top { + position: fixed; + visibility: hidden; + opacity: 0; + right: 15px; + bottom: 15px; + z-index: 99999; + background-color: #4fc143; + width: 40px; + height: 40px; + border-radius: 25px; + transition: all 0.4s; + border: 2px solid color-mix(in srgb, #0a53be, transparent 10%); } diff --git a/src/pages/Home/LandingPage.jsx b/src/pages/Home/LandingPage.jsx index 35b01202..cddf354f 100644 --- a/src/pages/Home/LandingPage.jsx +++ b/src/pages/Home/LandingPage.jsx @@ -1,1271 +1,563 @@ -import { noop } from "@tanstack/react-query"; -import React, { useEffect, useMemo, useState } from "react"; - -import "./LandingPage.css"; -import { Link } from "react-router-dom"; - -import { Swiper, SwiperSlide } from "swiper/react"; -// import required modules -import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules"; -// Import Swiper styles import "swiper/css"; -import "swiper/css/navigation"; -import SwaperSlideContent from "./SwaperSlideContent"; -import SwaperBlogContent from "./SwaperBlogContent"; -import SubscriptionPlans from "./SubscriptionPlans"; +import "./LandingPage.css"; -const swiperConfig = { - spaceBetween: 30, - centeredSlides: true, - rewind: true, - autoplay: { - delay: 3500, - disableOnInteraction: false, - }, - pagination: { - clickable: true, - }, - keyboard: { - enabled: true, - }, - navigation: false, - modules: [EffectFlip, Autoplay, Pagination, Navigation], - className: "mySwiper", -}; +import DashboardImage from "/img/app/dashboard-light-04.png"; const LandingPage = () => { - const [swiperRef, setSwiperRef] = useState(null); return ( -
-
- - - - {/* FAQ: End */} - - {/* CTA: Start */} -
- cta image -
-
- Contact US -
- -
-
- hero elements -
-
-
- {" "} -

- - Let's Work - {/* laptop charging */} - - Together -

-

- Any question or remark? just write us a message -

-
-
-
-
- -
- -
-
-
-
-
- -
-
-

Phone

-
- - +91 70288 83755 - -
-
-
-
-
-
-
-
- Ready to Get Started? -
-
- Start your project with a free trial -
- {/* - Get Started - {" "} */} - - Request a Demo - -
-
-
-
-
- {/* CTA: End */} - - {/* Contact Us: Start */} -
-
-
- Contact US -
-

- - Let's work - laptop charging - - together -

-

- Any question or remark? just write us a message -

-
-
-
- contact border - contact customer service -
-
-
-
-
- -
- -
-
-
-
-
- -
-
-

Phone

-
- - +1234 568 963 - -
-
-
-
-
-
-
-
-
-
-
-

Send a message

-

- If you would like to discuss anything related to payment, - account, licensing, -
- partnerships, or have pre-sales questions, you’re at the - right place. -

-
-
-
- - -
-
- - -
-
- - -
-
- -
-
-
-
-
-
-
-
-
- {/* Contact Us: End */} + + - {/* / Sections:End */} - - {/* Footer: Start */} -