diff --git a/public/assets/vendor/css/core.css b/public/assets/vendor/css/core.css index 48163eb5..f440443e 100644 --- a/public/assets/vendor/css/core.css +++ b/public/assets/vendor/css/core.css @@ -76,6 +76,7 @@ --bs-dark-border-subtle: #bfc0c6; --bs-white-rgb: 255, 255, 255; --bs-black-rgb: 34, 48, 62; + --bs-font-roboto:"Segoe UI", Roboto, "sans-serif", --bs-font-sans-serif: "Public Sans", -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; @@ -88,7 +89,7 @@ ); --bs-root-font-size: 16px; --bs-body-font-family: var(--bs-font-sans-serif); - --bs-body-font-size: 0.8375rem; + --bs-body-font-size: 0.875rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.375; --bs-body-color: #646e78; diff --git a/public/img/app/error in filter of expenses .png b/public/img/app/error in filter of expenses .png deleted file mode 100644 index ee2034bb..00000000 Binary files a/public/img/app/error in filter of expenses .png and /dev/null differ diff --git a/public/img/app/should be expense category .png b/public/img/app/should be expense category .png deleted file mode 100644 index 5e7e36e0..00000000 Binary files a/public/img/app/should be expense category .png and /dev/null differ diff --git a/public/img/avatars/1.png b/public/img/avatars/1.png deleted file mode 100644 index 02ffed82..00000000 Binary files a/public/img/avatars/1.png and /dev/null differ diff --git a/public/img/avatars/5.png b/public/img/avatars/5.png deleted file mode 100644 index 649f9ec0..00000000 Binary files a/public/img/avatars/5.png and /dev/null differ diff --git a/public/img/avatars/6.png b/public/img/avatars/6.png deleted file mode 100644 index 99ad3a60..00000000 Binary files a/public/img/avatars/6.png and /dev/null differ diff --git a/public/img/avatars/7.png b/public/img/avatars/7.png deleted file mode 100644 index 335a7417..00000000 Binary files a/public/img/avatars/7.png and /dev/null differ diff --git a/public/img/brand/logo-1.png b/public/img/brand/logo-1.png deleted file mode 100644 index 7f551d70..00000000 Binary files a/public/img/brand/logo-1.png and /dev/null differ diff --git a/public/img/brand/logo-2.png b/public/img/brand/logo-2.png deleted file mode 100644 index 5e3f2698..00000000 Binary files a/public/img/brand/logo-2.png and /dev/null differ diff --git a/public/img/brand/logo-3.png b/public/img/brand/logo-3.png deleted file mode 100644 index e854e939..00000000 Binary files a/public/img/brand/logo-3.png and /dev/null differ diff --git a/public/img/brand/logo-4.png b/public/img/brand/logo-4.png deleted file mode 100644 index 6c5d3f3c..00000000 Binary files a/public/img/brand/logo-4.png and /dev/null differ diff --git a/public/img/brand/logo-5.png b/public/img/brand/logo-5.png deleted file mode 100644 index bf3cc14e..00000000 Binary files a/public/img/brand/logo-5.png and /dev/null differ diff --git a/public/img/brand/logo-6.png b/public/img/brand/logo-6.png deleted file mode 100644 index 99980b2a..00000000 Binary files a/public/img/brand/logo-6.png and /dev/null differ diff --git a/public/img/brand/logo_1-dark.png b/public/img/brand/logo_1-dark.png deleted file mode 100644 index cb1a58d2..00000000 Binary files a/public/img/brand/logo_1-dark.png and /dev/null differ diff --git a/public/img/brand/logo_1-light.png b/public/img/brand/logo_1-light.png deleted file mode 100644 index e0308e90..00000000 Binary files a/public/img/brand/logo_1-light.png and /dev/null differ diff --git a/public/img/brand/logo_2-dark.png b/public/img/brand/logo_2-dark.png deleted file mode 100644 index f5e92478..00000000 Binary files a/public/img/brand/logo_2-dark.png and /dev/null differ diff --git a/public/img/brand/logo_2-light.png b/public/img/brand/logo_2-light.png deleted file mode 100644 index 719e6103..00000000 Binary files a/public/img/brand/logo_2-light.png and /dev/null differ diff --git a/public/img/brand/logo_3-dark.png b/public/img/brand/logo_3-dark.png deleted file mode 100644 index 27c68e49..00000000 Binary files a/public/img/brand/logo_3-dark.png and /dev/null differ diff --git a/public/img/brand/logo_3-light.png b/public/img/brand/logo_3-light.png deleted file mode 100644 index 5ec4f174..00000000 Binary files a/public/img/brand/logo_3-light.png and /dev/null differ diff --git a/public/img/brand/logo_4-dark.png b/public/img/brand/logo_4-dark.png deleted file mode 100644 index 3e5bfc3d..00000000 Binary files a/public/img/brand/logo_4-dark.png and /dev/null differ diff --git a/public/img/brand/logo_4-light.png b/public/img/brand/logo_4-light.png deleted file mode 100644 index 0929f535..00000000 Binary files a/public/img/brand/logo_4-light.png and /dev/null differ diff --git a/public/img/brand/logo_5-dark.png b/public/img/brand/logo_5-dark.png deleted file mode 100644 index 34342001..00000000 Binary files a/public/img/brand/logo_5-dark.png and /dev/null differ diff --git a/public/img/brand/logo_5-light.png b/public/img/brand/logo_5-light.png deleted file mode 100644 index deb1071f..00000000 Binary files a/public/img/brand/logo_5-light.png and /dev/null differ diff --git a/public/img/brand/ofw-500x500.png b/public/img/brand/ofw-500x500.png new file mode 100644 index 00000000..4e8c3112 Binary files /dev/null and b/public/img/brand/ofw-500x500.png differ diff --git a/public/img/elements/1.jpg b/public/img/elements/1.jpg deleted file mode 100644 index 779350ea..00000000 Binary files a/public/img/elements/1.jpg and /dev/null differ diff --git a/public/img/elements/11.jpg b/public/img/elements/11.jpg deleted file mode 100644 index 30f1d630..00000000 Binary files a/public/img/elements/11.jpg and /dev/null differ diff --git a/public/img/elements/12.jpg b/public/img/elements/12.jpg deleted file mode 100644 index e7347643..00000000 Binary files a/public/img/elements/12.jpg and /dev/null differ diff --git a/public/img/elements/13.jpg b/public/img/elements/13.jpg deleted file mode 100644 index 5b19ce51..00000000 Binary files a/public/img/elements/13.jpg and /dev/null differ diff --git a/public/img/elements/17.jpg b/public/img/elements/17.jpg deleted file mode 100644 index 2004cda1..00000000 Binary files a/public/img/elements/17.jpg and /dev/null differ diff --git a/public/img/elements/18.jpg b/public/img/elements/18.jpg deleted file mode 100644 index 46af1552..00000000 Binary files a/public/img/elements/18.jpg and /dev/null differ diff --git a/public/img/elements/19.jpg b/public/img/elements/19.jpg deleted file mode 100644 index cae34490..00000000 Binary files a/public/img/elements/19.jpg and /dev/null differ diff --git a/public/img/elements/2.jpg b/public/img/elements/2.jpg deleted file mode 100644 index 78bc4d8e..00000000 Binary files a/public/img/elements/2.jpg and /dev/null differ diff --git a/public/img/elements/20.jpg b/public/img/elements/20.jpg deleted file mode 100644 index 1d7fb7c2..00000000 Binary files a/public/img/elements/20.jpg and /dev/null differ diff --git a/public/img/elements/3.jpg b/public/img/elements/3.jpg deleted file mode 100644 index f34f3de6..00000000 Binary files a/public/img/elements/3.jpg and /dev/null differ diff --git a/public/img/elements/4.jpg b/public/img/elements/4.jpg deleted file mode 100644 index 48432005..00000000 Binary files a/public/img/elements/4.jpg and /dev/null differ diff --git a/public/img/elements/5.jpg b/public/img/elements/5.jpg deleted file mode 100644 index 29714f59..00000000 Binary files a/public/img/elements/5.jpg and /dev/null differ diff --git a/public/img/elements/7.jpg b/public/img/elements/7.jpg deleted file mode 100644 index 01a42a51..00000000 Binary files a/public/img/elements/7.jpg and /dev/null differ diff --git a/public/img/hero/bg-01.jpg b/public/img/hero/bg-01.jpg new file mode 100644 index 00000000..0ea8eebf Binary files /dev/null and b/public/img/hero/bg-01.jpg differ diff --git a/public/img/hero/bg-02.png b/public/img/hero/bg-02.png new file mode 100644 index 00000000..e6acaea7 Binary files /dev/null and b/public/img/hero/bg-02.png differ diff --git a/public/img/hero/bg-03.png b/public/img/hero/bg-03.png new file mode 100644 index 00000000..622a1104 Binary files /dev/null and b/public/img/hero/bg-03.png differ diff --git a/public/img/hero/bg-04.png b/public/img/hero/bg-04.png new file mode 100644 index 00000000..988f506f Binary files /dev/null and b/public/img/hero/bg-04.png differ diff --git a/public/img/images/contact-customer-service.png b/public/img/hero/contact-customer-service.png similarity index 100% rename from public/img/images/contact-customer-service.png rename to public/img/hero/contact-customer-service.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/directory.png b/public/img/icons/directory.png new file mode 100644 index 00000000..038852cd Binary files /dev/null and b/public/img/icons/directory.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/google-play-icon.png b/public/img/icons/google-play-icon.png index 1365ff35..117bcb16 100644 Binary files a/public/img/icons/google-play-icon.png and b/public/img/icons/google-play-icon.png differ diff --git a/public/img/icons/profile.png b/public/img/icons/profile.png new file mode 100644 index 00000000..8333da3a Binary files /dev/null and b/public/img/icons/profile.png differ diff --git a/public/img/icons/report.png b/public/img/icons/report.png new file mode 100644 index 00000000..62b6682c Binary files /dev/null and b/public/img/icons/report.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/public/img/illustrations/02.png b/public/img/illustrations/02.png deleted file mode 100644 index dba19e98..00000000 Binary files a/public/img/illustrations/02.png and /dev/null differ diff --git a/public/img/illustrations/03.png b/public/img/illustrations/03.png index 45d19881..8d517756 100644 Binary files a/public/img/illustrations/03.png and b/public/img/illustrations/03.png differ diff --git a/public/img/illustrations/contact-customer-service.png b/public/img/illustrations/contact-customer-service.png new file mode 100644 index 00000000..4e5aaaad Binary files /dev/null and b/public/img/illustrations/contact-customer-service.png differ diff --git a/public/img/illustrations/contact-us.png b/public/img/illustrations/contact-us.png new file mode 100644 index 00000000..4886aca8 Binary files /dev/null and b/public/img/illustrations/contact-us.png differ diff --git a/public/img/illustrations/fm-01.png b/public/img/illustrations/fm-01.png new file mode 100644 index 00000000..885bde1a Binary files /dev/null and b/public/img/illustrations/fm-01.png differ diff --git a/public/img/illustrations/gap between grid header and message.png b/public/img/illustrations/gap between grid header and message.png deleted file mode 100644 index 9461a532..00000000 Binary files a/public/img/illustrations/gap between grid header and message.png and /dev/null differ diff --git a/public/img/illustrations/man-with-laptop-light.png b/public/img/illustrations/man-with-laptop-light.png deleted file mode 100644 index 42661207..00000000 Binary files a/public/img/illustrations/man-with-laptop-light.png and /dev/null differ diff --git a/public/img/illustrations/payment request.png b/public/img/illustrations/payment request.png deleted file mode 100644 index 8d8a289b..00000000 Binary files a/public/img/illustrations/payment request.png and /dev/null differ diff --git a/public/img/illustrations/prom-min.webp b/public/img/illustrations/prom-min.webp deleted file mode 100644 index 0cccb84b..00000000 Binary files a/public/img/illustrations/prom-min.webp and /dev/null differ diff --git a/public/img/illustrations/worker_01.svg b/public/img/illustrations/worker_01.svg deleted file mode 100644 index 2170c2f4..00000000 --- a/public/img/illustrations/worker_01.svg +++ /dev/null @@ -1,4955 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/img/illustrations/worker_02.jpg b/public/img/illustrations/worker_02.jpg deleted file mode 100644 index 274c55c3..00000000 Binary files a/public/img/illustrations/worker_02.jpg and /dev/null differ diff --git a/public/img/illustrations/worker_02.svg b/public/img/illustrations/worker_02.svg deleted file mode 100644 index c673e01c..00000000 --- a/public/img/illustrations/worker_02.svg +++ /dev/null @@ -1,1117 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/img/illustrations/worker_03.jpg b/public/img/illustrations/worker_03.jpg deleted file mode 100644 index 99c9be24..00000000 Binary files a/public/img/illustrations/worker_03.jpg and /dev/null differ diff --git a/public/img/illustrations/worker_03.png b/public/img/illustrations/worker_03.png deleted file mode 100644 index d5fdab98..00000000 Binary files a/public/img/illustrations/worker_03.png and /dev/null differ diff --git a/public/img/layouts/layout-container-light.png b/public/img/layouts/layout-container-light.png deleted file mode 100644 index 513338f0..00000000 Binary files a/public/img/layouts/layout-container-light.png and /dev/null differ diff --git a/public/img/layouts/layout-fluid-light.png b/public/img/layouts/layout-fluid-light.png deleted file mode 100644 index ca093f4c..00000000 Binary files a/public/img/layouts/layout-fluid-light.png and /dev/null differ diff --git a/public/img/layouts/layout-without-menu-light.png b/public/img/layouts/layout-without-menu-light.png deleted file mode 100644 index fe7d9198..00000000 Binary files a/public/img/layouts/layout-without-menu-light.png and /dev/null differ diff --git a/public/img/layouts/layout-without-navbar-light.png b/public/img/layouts/layout-without-navbar-light.png deleted file mode 100644 index 68e69ba9..00000000 Binary files a/public/img/layouts/layout-without-navbar-light.png and /dev/null differ diff --git a/public/img/sneat.svg b/public/img/sneat.svg deleted file mode 100644 index 347e4f0d..00000000 --- a/public/img/sneat.svg +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/public/img/teams/team-member-1.png b/public/img/teams/team-member-1.png deleted file mode 100644 index 2a007f12..00000000 Binary files a/public/img/teams/team-member-1.png and /dev/null differ diff --git a/public/img/teams/team-member-2.png b/public/img/teams/team-member-2.png deleted file mode 100644 index b1b7e7c0..00000000 Binary files a/public/img/teams/team-member-2.png and /dev/null differ diff --git a/public/img/teams/team-member-3.png b/public/img/teams/team-member-3.png deleted file mode 100644 index 805b2825..00000000 Binary files a/public/img/teams/team-member-3.png and /dev/null differ diff --git a/public/img/teams/team-member-4.png b/public/img/teams/team-member-4.png deleted file mode 100644 index 8718f3c1..00000000 Binary files a/public/img/teams/team-member-4.png and /dev/null differ diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9b..00000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/vendor/css/core.css b/src/assets/vendor/css/core.css index 70f4fb09..bf74ae48 100644 --- a/src/assets/vendor/css/core.css +++ b/src/assets/vendor/css/core.css @@ -72,7 +72,7 @@ --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-root-font-size: 16px; --bs-body-font-family: var(--bs-font-sans-serif); - --bs-body-font-size: 0.9375rem; + --bs-body-font-size: 0.875rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.375; --bs-body-color: #646e78; diff --git a/src/components/common/OfwLabel.jsx b/src/components/common/OfwLabel.jsx new file mode 100644 index 00000000..772ea11a --- /dev/null +++ b/src/components/common/OfwLabel.jsx @@ -0,0 +1,12 @@ +const OfwLabel = () => { + return ( + <> + + OnField + Work + .com + + + ); +}; +export default OfwLabel; diff --git a/src/pages/Home/FeatureCard.jsx b/src/pages/Home/FeatureCard.jsx new file mode 100644 index 00000000..340434b7 --- /dev/null +++ b/src/pages/Home/FeatureCard.jsx @@ -0,0 +1,24 @@ +const FeatureCard = ({ imagesrc, title, description }) => { + return ( + <> +
+
+
+
+ {title} + +
{title}
+ +
+

{description}

+
+
+
+ + ); +}; +export default FeatureCard; diff --git a/src/pages/Home/LandingPage.css b/src/pages/Home/LandingPage.css index 16c8dbbc..adb10a18 100644 --- a/src/pages/Home/LandingPage.css +++ b/src/pages/Home/LandingPage.css @@ -1,668 +1,269 @@ -.section-py { - padding: 6.25rem 0; +/* Custom Styles */ +.custom-navbar { + background: #efefef; + transition: all 0.3s ease; + padding: 1rem 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; - } +.carousel-item { + height: 100vh; + min-height: 500px; + background-size: cover; + background-position: center; + position: relative; } -.first-section-pt { - padding-top: 11.28rem; -} -@media (max-width: 1199.98px) { - .first-section-pt { - padding-top: 7.5rem; - } +.carousel-caption { + bottom: 20%; } -.card[class*="card-hover-border-"] { - transition: all 0.2s ease-in-out; -} - -.banner-bg-img { +.hero-overlay { position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - object-fit: cover; - object-position: left; + inset: 0; + background: rgba(0, 0, 0, 0.4); } -.section-title-img { - height: 100%; - width: 120%; - inset-inline-start: -12%; - top: 10px; +.feature-icon { + font-size: 40px; + color: #4fc143; } -/* .light-style body { - background-color: #fff; +/* .text-primary { + color: #49bf3c !important; } */ -.dark-style body { - background-color: #2b2c40; +/* .btn-primary { + background-color: #49bf3c !important; +} */ + +.landing-body { + font-family: var(--bs-font-roboto); + background-color: var(--bs-white); } -nav.layout-navbar { - /* backdrop-filter: unset; */ - /* background-color: transparent !important; */ - /* background-color: rgba(214, 36, 33, 0.88) !important; */ +.hero { + background: linear-gradient(135deg, #4fc143, #007bff); + color: white; + padding: 100px 0; } -nav.layout-navbar::before { - position: absolute; - display: block; - block-size: 100%; - content: ""; - inline-size: 100%; - inset-block-start: 0; - inset-inline-start: 0; +.pricing-card { + transition: transform 0.2s, box-shadow 0.2s; } -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: 0rem; - padding-block: 0.614rem; - transform: unset; - transition: all 0.2s ease-in-out; - border-radius: 0.375rem; +.pricing-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } -nav.layout-navbar.navbar-active::after { - backdrop-filter: saturate(100%) blur(6px); - -webkit-backdrop-filter: saturate(100%) blur(6px); +.feature-icon-image { + width: 50px; } -.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; - } +.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; } -.light-style .layout-navbar .navbar.landing-navbar { - border-color: rgba(255, 255, 255, 100); - background: rgba(255, 255, 255, 50); +.accordion-header { + line-height: 1.375; + margin-bottom: 0; + position: relative; + border-bottom: none; } -.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 { + +.accordion-item { 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; + background-color: #fff; + border: 1px solid #fff; } -.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); +.accordion-item:first-of-type { + border-top-left-radius: 0.375rem; + border-top-right-radius: 0.375rem; } -@media (min-width: 992px) { - [dir="rtl"] - .navbar.landing-navbar - .navbar-nav - .nav-item.mega-dropdown - > .dropdown-menu { - transform: translateX(50%); - } +.accordion:not(.accordion-custom-button):not(.accordion-arrow-left) + .accordion-item:not(:last-of-type) { + margin-block-end: 0.5rem; } -.landing-footer .footer-link, -.landing-footer .footer-text { - color: #fff; - opacity: 0.78; +.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); } -.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 { - 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; + +.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; -} -@media (max-width: 1199.98px) { - .section-py { - padding: 5rem 0; - } -} -@media (max-width: 767.98px) { - .section-py { - padding: 3rem 0; - } + min-height: 100vh !important; } -.landing-hero { - border-radius: 0 0 3.5rem 3.5rem; - padding-top: 8.2rem; +.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; } -.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 { + +/* 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 right, - #28c76f 0%, - #5a4aff 47.92%, - #ff3739 100% + to left, + rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) 50%, + #4fc143 50% ); - 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; + background-size: 200%; + background-position: right; + transition: background-position 0.5s ease-out; } -@media (min-width: 1200px) { - .landing-hero .hero-title { - font-size: 2.625rem; - } + +.card-slider:hover { + background-position: left; + transform: translateY(-5px); } -.landing-hero .landing-hero-btn .hero-btn-item { - inset-inline-start: -94%; - top: 65%; + +.scroll-top.active { + visibility: visible; + opacity: 1; } -.landing-hero .hero-animation-img { - margin-bottom: -32rem; + +.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%); } -.animation-img { - border: 1px soid red; + +.contact-section { + background: #fff; + border-radius: 20px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); + padding: 40px 40px; + margin: 60px auto; + max-width: 1100px; } -@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 { + +.contact-img img { width: 100%; + border-radius: 15px; } -.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; - } +.contact-text h2 { + font-size: 2.5rem; + font-weight: 700; + color: #173b5f; } -@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; +.contact-text p { + font-size: 1rem; + color: #6c757d; + margin-top: 15px; + margin-bottom: 25px; } -.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; -} +.btn-green { + background-color: #49bf3c; + color: #fff; -.landing-team .card, -.landing-team .card .team-image-box { - border-top-left-radius: 5.625rem; - border-top-right-radius: 1.25rem; + border-radius: 50px; + padding: 10px 30px; + font-weight: 500; + text-decoration: none; + transition: all 0.3s ease; } -.landing-team .card .card-body { - border-bottom-left-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; +.btn-green:hover { + background-color: #2d8822; + color: #fff; } -.landing-team .team-image-box { - height: 11.5625rem; +.btn-ovel-small { + padding-bottom: 5.072px; + padding-inline-end: 12px; + padding-inline-start: 12px; + padding-left: 12px; + padding-right: 12px; + padding-top: 5.072px; } -.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; -} - -.light-style .landing-hero { - background: linear-gradient(138.18deg, #eae8fd, #ede7e7 94.44%); -} - -.text-green { - color: #49bf3c !important; -} - -.text-blue { - color: var(--bs-blue); +.btn-square-small { + border-radius: 3px; + padding-bottom: 5.072px; + padding-inline-end: 12px; + padding-inline-start: 12px; + padding-left: 12px; + padding-right: 12px; + padding-top: 5.072px; } diff --git a/src/pages/Home/LandingPage.jsx b/src/pages/Home/LandingPage.jsx index 24c69924..b72b1523 100644 --- a/src/pages/Home/LandingPage.jsx +++ b/src/pages/Home/LandingPage.jsx @@ -1,1288 +1,856 @@ -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 React, { useEffect } from "react"; +import DashboardImage from "/img/hero/bg-01.jpg"; +import { Swiper, SwiperSlide } from "swiper/react"; +import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules"; +import SwaperSlideImages from "./SwaperSlideImages"; +import FeatureCard from "./FeatureCard"; +import SubscriptionPlans from "./SubscriptionPlans"; +import OfwLabel from "../../components/common/OfwLabel"; const LandingPage = () => { - const [swiperRef, setSwiperRef] = useState(null); return ( -
- - {/* Navbar: End */} - - {/* Sections:Start */} - -
- {/* Hero: Start */} -
-
-
-
-

- All-in-one platform to manage projects, people, and resources - seamlessly. -

- {/*

- Production-ready & easy to use Admin Template -
- for Reliability and Customizability. -

*/} -
- {/* - Join community - Join community arrow - */} - - Get Early Access - - - Request a Demo - -
+ <> +
+ {" "} +
- {/* Hero: End */} - - {/* Useful features: Start */} -
-
-
- - Useful Features - -
-

- - From tasks to teams, documents to inventory — - {/* laptop charging */} - - everything your business needs in one place. -

-

- All-in-one platform to manage projects, people, and resources - seamlessly. -

-
-
-
- laptop charging -
-
Project & Task Management
-

- Plan, assign, and track projects and tasks seamlessly for - better team collaboration. -

-
-
-
- transition up -
-
Attendance & Leave Tracking
-

- Monitor employee attendance and manage leave requests with - ease. -

-
-
-
- edit -
-
Role-based Permissions
-

- Securely control access with customizable roles and - permissions. -

-
-
-
- 3d select solid -
-
Expense & Budget Tracking
-

- Keep projects on budget with real-time expense and cost - management. -

-
-
-
- user -
-
Reporting & Analytics
-

- Gain actionable insights through powerful reports and - analytics dashboards. -

-
-
-
- keyboard -
-
Document Management
-

- Organize, share, and access all your project and employee - documents in one place. -

-
-
-
- keyboard -
-
- Service Provider & Subcontractor Tracking -
-

- Manage multiple service providers and subcontractors - efficiently within projects. -

-
{" "} -
-
- keyboard -
-
Inventory Management
-

- Track materials, supplies, and assets — never run short again. -

-
{" "} -
-
-
- keyboard -
-
Directory
-

- Your team, suppliers, vendors organized and connected in one - unified directory. -

-
{" "} -
-
- {/* Useful features: End */} - - {/* */} - - {/* */} - {/* Pricing plans: Start */} -
-
-
- - Pricing Plans - + + +
+ {/* */} +
+
+

Powerful Features for Every Role

+
+ + + + + + + + + + + + + + + + + +
-

- - Tailored pricing plans - {/* laptop charging */} - - designed for you -

-

+

+
+ {/* */} +
+
+

Simple & Transparent Pricing

+
Tailored pricing plans designed for you.
+

No matter which plan you choose, you’ll get access to powerful - features. Choose the best plan to fit your needs. + features. Choose the best plan to fit your needs.

{/* */} - -
-
- {/* Pricing plans: End */} - - {/* Fun facts: Start */} -
-
-
-
-
-
- laptop -

7.1k+

-

- Support Tickets -
- Resolved -

-
-
-
-
-
-
- laptop -

50k+

-

- Join creatives -
- community -

-
-
-
-
-
-
- laptop -

4.8/5

-

- Highly Rated -
- Products -

-
-
-
-
-
-
- laptop -

100%

-

- Money Back -
- Guarantee -

-
+ + {/*
+
+
+
+
Starter
+

+ ₹499/month +

+
    +
  • Up to 10 users
    • +
  • Basic reporting
    • +
  • Project tracking
    • +
+ + Request Demo +
-
-
- {/* Fun facts: End */} - {/* FAQ: Start */} -
-
-
- FAQ -
-

- Frequently Asked - - Questions - {/* laptop charging */} - -

-

- Browse through these FAQs to find answers to commonly asked - questions. -

-
-
-
- faq boy with logos -
-
-
-
-
-

- -

- -
-
- A smart Project Management System designed to bring - teams, tasks, and timelines together in one place. With - AI-driven insights, role-based access, and seamless - reporting, it empowers organizations to deliver projects - faster and smarter. -
-
-
-
-

- -

-
-
- Yes, you have full flexibility to manage your - subscription. You can upgrade to a higher plan to unlock - more features, downgrade to a smaller plan if your needs - change, or cancel your subscription anytime. Plan - changes take effect instantly, and billing adjustments - are applied on a pro-rated basis. -
-
-
-
-

- -

-
-
- Security is at the core of OnFieldWork.com. We use - industry-standard encryption (SSL/TLS) to protect data - in transit and advanced encryption to safeguard data at - rest. Role-based access controls ensure that only - authorized users can access sensitive information. Our - system is hosted on secure, cloud-ready infrastructure - with regular backups, monitoring, and compliance with - best practices to keep your data safe and available at - all times. -
-
-
-
-

- -

-
-
- You can reach our support team anytime through the - in-app help center, email, or live chat. We also provide - a detailed knowledge base and FAQs to guide you through - common queries. For personalized assistance, our support - specialists are always ready to help you. -
-
-
-
-

- -

-
-
- OnFieldWork.com operate under a proprietary license - combined with a subscription model. This means customers - don’t own the software but are granted the right to - access and use it through the cloud under our Terms of - Service. Depending on the plan, licensing may be based - on users, features, or usage, and you can upgrade, - downgrade, or cancel at any time. non! -
-
-
-
-

- -

-
-
- Yes, OnFieldWork.com is designed to be flexible and - adaptable. You can customize workflows, user roles, - permissions, and reporting to match your organization’s - unique processes. Depending on your plan, we also - support advanced customization such as integrating with - third-party tools, adding custom fields, and tailoring - modules to fit your business requirements. -
-
-
{" "} -
-
-
-
-
- {/* 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 - {" "} */} +
+
+
+
Professional
+

+ ₹999/month +

+
    +
  • Unlimited projects
    • +
  • Expense & attendance tracking
    • +
  • Advanced analytics
    • +
- Request a Demo + Request Demo + +
+
+
+ +
+
+
+
Enterprise
+

Custom

+
    +
  • Dedicated support
    • +
  • Custom integrations
    • +
  • Private cloud hosting
    • +
+ + Request Demo + +
+
+
+
*/} +
+
+ {/* */} +
+
+

+ About +

+

+ is a powerful SaaS-based Project Management + Platform built to simplify and streamline field operations for + modern businesses. +

{" "} +

+ Whether you manage on-site teams, oversee multiple projects, or + coordinate vendors and suppliers, + brings everything together in one connected ecosystem — giving you + complete control, visibility, and efficiency in your day-to-day + operations. +

+
Our Mission
{" "} +

+ At + , our mission is to empower organizations to manage their field + operations effortlessly — helping teams stay organized, + accountable, and productive, no matter where they are. We aim to + eliminate manual processes, data silos, and communication gaps + that often slow down projects and increase operational costs.{" "} +
What We Do We provide a comprehensive suite of tools + designed to handle every critical aspect of field management — + from workforce tracking to expense control and reporting. With + , you can: +

+
    +
  • + Track Attendance Seamlessly - Enable site + managers to record daily attendance, capture employee photos, + and maintain transparent records for management.{" "} +
    • +
  • + Manage Expenses Efficiently - Log, categorize, + and approve expenses related to daily operations, procurement, + and travel — all within a streamlined workflow. +
    • +
  • + Generate Smart Reports - Get real-time + insights through dashboards and reports that highlight project + progress, team productivity, and cost trends. +
    • +
  • + {" "} + Organize Your Directory - Maintain a unified + directory for teams, suppliers, and vendors. Every contact is + securely stored, role-based, and easy to access — ensuring that + your network stays structured and connected. +
    • +
  • + Record Notes & References - Attach notes to + contacts for instant recall and better relationship management + across your organization. +
    • {" "} +
  • + Role-Based Access Control - Protect sensitive + data with secure, role-based permissions, ensuring that each + team member accesses only the information relevant to their + role.{" "} +
    • {" "} +
+
+ Why Choose ?{" "} +
+
    +
  • + Purpose-Built for Field Teams - Designed + keeping in mind the unique challenges of field operations. +
    • {" "} +
  • + Scalable & Cloud-Based - A SaaS platform that + grows with your business — accessible from anywhere, anytime. +
    • {" "} +
  • + Unified Dashboard Experience - Get a 360° view + of all your field activities, project progress, and financial + health. +
    • {" "} +
  • + Data-Driven Insights - Make informed decisions + using analytics and trend-based reporting.{" "} +
    • +
  • + Collaboration at Its Core - Connect your teams, + vendors, and suppliers under one digital workspace.{" "} +
    • +
+
+
+
+
+

+ Frequently Asked Questions
+

+ {" "} + Browse through these FAQs to find answers to commonly asked + questions. +
+ + +
+
+

+ +

+
+
+ A smart Project Management System designed to bring teams, + tasks, and timelines together in one place. With AI-driven + insights, role-based access, and seamless reporting, it + empowers organizations to deliver projects faster and + smarter. +
+
+
+
+

+ +

+
+
+ Yes, you have full flexibility to manage your subscription. + You can upgrade to a higher plan to unlock more features, + downgrade to a smaller plan if your needs change, or cancel + your subscription anytime. Plan changes take effect + instantly, and billing adjustments are applied on a + pro-rated basis. +
+
+
+
+

+ +

+
+
+ Security is at the core of . We use + industry-standard encryption (SSL/TLS) to protect data in + transit and advanced encryption to safeguard data at rest. + Role-based access controls ensure that only authorized users + can access sensitive information. Our system is hosted on + secure, cloud-ready infrastructure with regular backups, + monitoring, and compliance with best practices to keep your + data safe and available at all times. +
+
+
+
+

+ +

+
+
+ You can reach our support team anytime through the in-app + help center, email, or live chat. We also provide a detailed + knowledge base and FAQs to guide you through common queries. + For personalized assistance, our support specialists are + always ready to help you. +
+
+
+
+

+ +

+
+
+ operate under a proprietary license + combined with a subscription model. This means customers + don’t own the software but are granted the right to access + and use it through the cloud under our Terms of Service. + Depending on the plan, licensing may be based on users, + features, or usage, and you can upgrade, downgrade, or + cancel at any time. non! +
+
+
+
+

+ +

+
+
+ Yes, is designed to be flexible and + adaptable. You can customize workflows, user roles, + permissions, and reporting to match your organization’s + unique processes. Depending on your plan, we also support + advanced customization such as integrating with third-party + tools, adding custom fields, and tailoring modules to fit + your business requirements. +
+
+
+
+
+
+ {/* */} +
+
+
+
+ Contact Illustration +
+
+

+ Contact Us +

+

+ We’d love to hear from you! Whether you have a question about + features, pricing, or anything else — our team is ready to + answer all your queries. +

+
+
+
+
+ +
+ +
+
+
+
+
+ +
+
+

Phone

+
+ + +91 70288 83755 + +
+
+
+
+
+ +
+
Download our app
+ + + google play icon + {" "} + + apple app store icon + {" "} +
+
- {/* CTA: End */} - - {/* Contact Us: Start */} -
*/} + {/*
+

Image Gallary

+
+ + + {" "} + {" "} + + {" "} + {" "} + + {" "} + {" "} + + {" "} + {" "} + + {" "} + {" "} + + {" "} + {" "} + + {" "} + {" "} + + {" "} + {" "} + + {" "} + {" "} + + {" "} + + +
+
*/} + {/* */} +
+

© 2025 OnFieldWork.com All Rights Reserved.

+
+ -
-
- Contact US -
-

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

-

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

-
- -
-
-
-

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 */} - - {/* Footer: End */} -
+ ); }; + export default LandingPage; diff --git a/src/pages/Home/LandingPageOld.css b/src/pages/Home/LandingPageOld.css new file mode 100644 index 00000000..16c8dbbc --- /dev/null +++ b/src/pages/Home/LandingPageOld.css @@ -0,0 +1,668 @@ +.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; + } +} + +.first-section-pt { + padding-top: 11.28rem; +} +@media (max-width: 1199.98px) { + .first-section-pt { + padding-top: 7.5rem; + } +} + +.card[class*="card-hover-border-"] { + transition: all 0.2s ease-in-out; +} + +.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: 0rem; + 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 { + 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; +} + +.light-style .landing-hero { + background: linear-gradient(138.18deg, #eae8fd, #ede7e7 94.44%); +} + +.text-green { + color: #49bf3c !important; +} + +.text-blue { + color: var(--bs-blue); +} diff --git a/src/pages/Home/LandingPageOld.jsx b/src/pages/Home/LandingPageOld.jsx new file mode 100644 index 00000000..df546e60 --- /dev/null +++ b/src/pages/Home/LandingPageOld.jsx @@ -0,0 +1,1288 @@ +import { noop } from "@tanstack/react-query"; +import React, { useEffect, useMemo, useState } from "react"; + +import "./LandingPageOld.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"; + +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", +}; + +const LandingPageOld = () => { + const [swiperRef, setSwiperRef] = useState(null); + return ( +
+ + {/* Navbar: End */} + + {/* Sections:Start */} + +
+ {/* Hero: Start */} +
+
+
+
+

+ All-in-one platform to manage projects, people, and resources + seamlessly. +

+ {/*

+ Production-ready & easy to use Admin Template +
+ for Reliability and Customizability. +

*/} +
+ {/* + Join community + Join community arrow + */} + + Get Early Access + + + Request a Demo + +
+
+ +
+
+ {}} + onSwiper={(swiper) => {}} + > + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+ {/* Hero: End */} + + {/* Useful features: Start */} +
+
+
+ + Useful Features + +
+

+ + From tasks to teams, documents to inventory — + {/* laptop charging */} + + everything your business needs in one place. +

+

+ All-in-one platform to manage projects, people, and resources + seamlessly. +

+
+
+
+ laptop charging +
+
Project & Task Management
+

+ Plan, assign, and track projects and tasks seamlessly for + better team collaboration. +

+
+
+
+ transition up +
+
Attendance & Leave Tracking
+

+ Monitor employee attendance and manage leave requests with + ease. +

+
+
+
+ edit +
+
Role-based Permissions
+

+ Securely control access with customizable roles and + permissions. +

+
+
+
+ 3d select solid +
+
Expense & Budget Tracking
+

+ Keep projects on budget with real-time expense and cost + management. +

+
+
+
+ user +
+
Reporting & Analytics
+

+ Gain actionable insights through powerful reports and + analytics dashboards. +

+
+
+
+ keyboard +
+
Document Management
+

+ Organize, share, and access all your project and employee + documents in one place. +

+
+
+
+ keyboard +
+
+ Service Provider & Subcontractor Tracking +
+

+ Manage multiple service providers and subcontractors + efficiently within projects. +

+
{" "} +
+
+ keyboard +
+
Inventory Management
+

+ Track materials, supplies, and assets — never run short again. +

+
{" "} +
+
+
+ keyboard +
+
Directory
+

+ Your team, suppliers, vendors organized and connected in one + unified directory. +

+
{" "} +
+
+ {/* Useful features: End */} + + {/* */} + + {/* */} + + {/* Pricing plans: Start */} +
+
+
+ + Pricing Plans + +
+

+ + Tailored pricing plans + {/* laptop charging */} + + designed for you +

+

+ No matter which plan you choose, you’ll get access to powerful + features. Choose the best plan to fit your needs. +

+ {/* */} + +
+
+ {/* Pricing plans: End */} + + {/* Fun facts: Start */} +
+
+
+
+
+
+ laptop +

7.1k+

+

+ Support Tickets +
+ Resolved +

+
+
+
+
+
+
+ laptop +

50k+

+

+ Join creatives +
+ community +

+
+
+
+
+
+
+ laptop +

4.8/5

+

+ Highly Rated +
+ Products +

+
+
+
+
+
+
+ laptop +

100%

+

+ Money Back +
+ Guarantee +

+
+
+
+
+
+
+ {/* Fun facts: End */} + + {/* FAQ: Start */} +
+
+
+ FAQ +
+

+ Frequently Asked + + Questions + {/* laptop charging */} + +

+

+ Browse through these FAQs to find answers to commonly asked + questions. +

+
+
+
+ faq boy with logos +
+
+
+
+
+

+ +

+ +
+
+ A smart Project Management System designed to bring + teams, tasks, and timelines together in one place. With + AI-driven insights, role-based access, and seamless + reporting, it empowers organizations to deliver projects + faster and smarter. +
+
+
+
+

+ +

+
+
+ Yes, you have full flexibility to manage your + subscription. You can upgrade to a higher plan to unlock + more features, downgrade to a smaller plan if your needs + change, or cancel your subscription anytime. Plan + changes take effect instantly, and billing adjustments + are applied on a pro-rated basis. +
+
+
+
+

+ +

+
+
+ Security is at the core of OnFieldWork.com. We use + industry-standard encryption (SSL/TLS) to protect data + in transit and advanced encryption to safeguard data at + rest. Role-based access controls ensure that only + authorized users can access sensitive information. Our + system is hosted on secure, cloud-ready infrastructure + with regular backups, monitoring, and compliance with + best practices to keep your data safe and available at + all times. +
+
+
+
+

+ +

+
+
+ You can reach our support team anytime through the + in-app help center, email, or live chat. We also provide + a detailed knowledge base and FAQs to guide you through + common queries. For personalized assistance, our support + specialists are always ready to help you. +
+
+
+
+

+ +

+
+
+ OnFieldWork.com operate under a proprietary license + combined with a subscription model. This means customers + don’t own the software but are granted the right to + access and use it through the cloud under our Terms of + Service. Depending on the plan, licensing may be based + on users, features, or usage, and you can upgrade, + downgrade, or cancel at any time. non! +
+
+
+
+

+ +

+
+
+ Yes, OnFieldWork.com is designed to be flexible and + adaptable. You can customize workflows, user roles, + permissions, and reporting to match your organization’s + unique processes. Depending on your plan, we also + support advanced customization such as integrating with + third-party tools, adding custom fields, and tailoring + modules to fit your business requirements. +
+
+
{" "} +
+
+
+
+
+ {/* 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 */} + + {/* Footer: End */} +
+ ); +}; +export default LandingPageOld; diff --git a/src/pages/Home/SubscriptionPlans.jsx b/src/pages/Home/SubscriptionPlans.jsx index 8e7a736a..59ef4a7e 100644 --- a/src/pages/Home/SubscriptionPlans.jsx +++ b/src/pages/Home/SubscriptionPlans.jsx @@ -10,8 +10,6 @@ const SubscriptionPlans = () => { const { data, isLoading, isError, error } = useSubscription(frequency); const [loading, setLoading] = useState(false); - - const frequencyLabel = (freq) => { switch (freq) { case 0: @@ -104,13 +102,13 @@ const SubscriptionPlans = () => {
Features
-
)) diff --git a/src/pages/Home/SwaperSlideImages.jsx b/src/pages/Home/SwaperSlideImages.jsx new file mode 100644 index 00000000..9300b12c --- /dev/null +++ b/src/pages/Home/SwaperSlideImages.jsx @@ -0,0 +1,26 @@ +import { SwiperSlide } from "swiper/react"; + +const SwaperSlideImages = ({ + ImageUrl = "../../../public/assets/img/backgrounds/18.jpg", + Title = "", + Body = "", + ContentAlign = "right", +}) => { + return ( +
+ Card image cap + {/*
+
Card title
+

+ Some quick example text to build on the card title and make up the + bulk of the card's content. +

+ + Go somewhere + +
*/} +
+ ); +}; + +export default SwaperSlideImages; diff --git a/src/pages/authentication/MainLogin.css b/src/pages/authentication/MainLogin.css index 5ac6d208..dd6a759e 100644 --- a/src/pages/authentication/MainLogin.css +++ b/src/pages/authentication/MainLogin.css @@ -29,15 +29,6 @@ font-size: 16px; font-weight: 300; } -ul { - font-size: 16px; - font-weight: 300; - list-style-type: disc; - margin-block-start: 1em; - margin-block-end: 1em; - padding-inline-start: 40px; - unicode-bidi: isolate; -} ul li { /* padding: 10px 10px 10px 0; */ @@ -48,16 +39,21 @@ li { margin: 0px; display: list-item; } -.ul.more-features-list { - max-width: 430px; - padding: 10px 0 0 0; - display: block; -} + ul.more-features-list { + font-size: 16px; + font-weight: 300; + list-style-type: none; + margin-block-start: 1em; + margin-block-end: 1em; + padding-inline-start: 40px; + unicode-bidi: isolate; display: block; position: relative; margin-left: 10px; + padding: 10px 0 0 0; + display: block; } .list-item { @@ -93,3 +89,16 @@ ul.more-features-list { stroke-dasharray: 125.6; transform: rotate(-90deg); } + +.login-pg-swiper { + width: 80vw; /* 80% of viewport width */ + height: 70vh; /* 70% of viewport height */ + margin: auto; /* Center the swiper container */ +} + +.swiper-slide img.login-pg-img-swiper { + display: block; + width: 100%; /* Image takes full width of the slide (which is 80vw) */ + height: 100%; /* Image takes full height of the slide (which is 70vh) */ + object-fit: contain; /* Ensures the entire image is visible without stretching, maintaining aspect ratio */ +} diff --git a/src/pages/authentication/MainLogin.jsx b/src/pages/authentication/MainLogin.jsx index 271770dc..1de9f1f2 100644 --- a/src/pages/authentication/MainLogin.jsx +++ b/src/pages/authentication/MainLogin.jsx @@ -1,249 +1,293 @@ import { React, useRef } from "react"; import LoginPage from "./LoginPage"; import "./MainLogin.css"; -import { Swiper, SwiperSlide } from "swiper/react"; -import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules"; const MainLogin = () => { - const progressCircle = useRef(null); - const progressContent = useRef(null); - const onAutoplayTimeLeft = (s, time, progress) => { - progressCircle.current.style.setProperty("--progress", 1 - progress); - progressContent.current.textContent = `${Math.ceil(time / 1000)}s`; - }; return ( <>
-
- {}} - onSwiper={(swiper) => {}} - onAutoplayTimeLeft={onAutoplayTimeLeft} + {/*
*/} +