MetatroncubeSoftwareSolutions/MetatronLatestWebsite
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sections space color code updated

Browse Source
This commit is contained in:
Selvi 2026-03-02 21:28:01 +05:30
parent 9e71cf37c1
commit e8f80b04cd
58 changed files with 1666 additions and 393 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -1153,7 +1153,6 @@
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"license": "MIT", "license": "MIT",
"peer": true,
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
"url": "https://opencollective.com/popperjs" "url": "https://opencollective.com/popperjs"
@ -1252,7 +1251,6 @@
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
"integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"csstype": "^3.2.2" "csstype": "^3.2.2"
} }
@ -1331,7 +1329,6 @@
"integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==", "integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@typescript-eslint/scope-manager": "8.56.0", "@typescript-eslint/scope-manager": "8.56.0",
"@typescript-eslint/types": "8.56.0", "@typescript-eslint/types": "8.56.0",
@ -1857,7 +1854,6 @@
"integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"bin": { "bin": {
"acorn": "bin/acorn" "acorn": "bin/acorn"
}, },
@ -2814,7 +2810,6 @@
"integrity": "sha512-VmQ+sifHUbI/IcSopBCF/HO3YiHQx/AVd3UVyYL6weuwW+HvON9VYn5l6Zl1WZzPWXPNZrSQpxwkkZ/VuvJZzg==", "integrity": "sha512-VmQ+sifHUbI/IcSopBCF/HO3YiHQx/AVd3UVyYL6weuwW+HvON9VYn5l6Zl1WZzPWXPNZrSQpxwkkZ/VuvJZzg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/eslint-utils": "^4.8.0",
"@eslint-community/regexpp": "^4.12.1", "@eslint-community/regexpp": "^4.12.1",
@ -2988,7 +2983,6 @@
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@rtsao/scc": "^1.1.0", "@rtsao/scc": "^1.1.0",
"array-includes": "^3.1.9", "array-includes": "^3.1.9",
@ -4908,7 +4902,6 @@
"resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz", "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
"integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==", "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
"license": "MIT", "license": "MIT",
"peer": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@ -4943,7 +4936,6 @@
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
"integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==", "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"scheduler": "^0.27.0" "scheduler": "^0.27.0"
}, },
@ -5185,7 +5177,6 @@
"resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz",
"integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==", "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"chokidar": "^4.0.0", "chokidar": "^4.0.0",
"immutable": "^5.0.2", "immutable": "^5.0.2",
@ -5707,7 +5698,6 @@
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"engines": { "engines": {
"node": ">=12" "node": ">=12"
}, },
@ -5870,7 +5860,6 @@
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"peer": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
"tsserver": "bin/tsserver" "tsserver": "bin/tsserver"

64
public/assets/css/main.css
View File

@ -123,11 +123,11 @@ i[class^=flaticon-],
--primary-font: 'Inter', sans-serif; --primary-font: 'Inter', sans-serif;
--secondary-font: 'Roboto', sans-serif; --secondary-font: 'Roboto', sans-serif;
--theme-color: #3c72fc; --theme-color: #3779b9;
--theme-color-1: #0f0d1d; --theme-color-1: #1a1f2b;
--primary10: rgba(60, 114, 252, 0.1); --primary10: rgba(60, 114, 252, 0.1);
--white: #ffffff; --white: #ffffff;
--gradient-bg: linear-gradient(90deg, #3c72fc -10.59%, #00060c 300.59%); --gradient-bg: linear-gradient(90deg, #3779b9 -10.59%, #00060c 300.59%);
} }
* { * {
@ -1023,14 +1023,14 @@ only screen and (min-width: 576px) and (max-width: 767px) {
.section-space { .section-space {
padding-top: 120px; padding-top: 80px;
padding-bottom: 120px; padding-bottom: 80px;
} }
@media only screen and (min-width: 992px) and (max-width: 1199px) { @media only screen and (min-width: 992px) and (max-width: 1199px) {
.section-space { .section-space {
padding-top: 100px; padding-top: 80px;
padding-bottom: 100px; padding-bottom: 80px;
} }
} }
@ -1041,8 +1041,7 @@ only screen and (min-width: 576px) and (max-width: 767px) {
} }
} }
@media only screen and (min-width: 576px) and (max-width: 767px), @media (max-width: 767px) {
(max-width: 575px) {
.section-space { .section-space {
padding-top: 60px; padding-top: 60px;
padding-bottom: 60px; padding-bottom: 60px;
@ -1050,12 +1049,12 @@ only screen and (min-width: 576px) and (max-width: 767px) {
} }
.section-space-top { .section-space-top {
padding-top: 120px; padding-top: 80px;
} }
@media only screen and (min-width: 992px) and (max-width: 1199px) { @media only screen and (min-width: 992px) and (max-width: 1199px) {
.section-space-top { .section-space-top {
padding-top: 100px; padding-top: 80px;
} }
} }
@ -1065,20 +1064,19 @@ only screen and (min-width: 576px) and (max-width: 767px) {
} }
} }
@media only screen and (min-width: 576px) and (max-width: 767px), @media (max-width: 767px) {
(max-width: 575px) {
.section-space-top { .section-space-top {
padding-top: 70px; padding-top: 70px;
} }
} }
.section-space-bottom { .section-space-bottom {
padding-bottom: 120px; padding-bottom: 80px;
} }
@media only screen and (min-width: 992px) and (max-width: 1199px) { @media only screen and (min-width: 992px) and (max-width: 1199px) {
.section-space-bottom { .section-space-bottom {
padding-bottom: 100px; padding-bottom: 80px;
} }
} }
@ -1088,15 +1086,14 @@ only screen and (min-width: 576px) and (max-width: 767px) {
} }
} }
@media only screen and (min-width: 576px) and (max-width: 767px), @media (max-width: 767px) {
(max-width: 575px) {
.section-space-bottom { .section-space-bottom {
padding-bottom: 70px; padding-bottom: 70px;
} }
} }
.section-space-medium { .section-space-medium {
padding: 100px 0; padding: 80px 0;
} }
@media only screen and (min-width: 992px) and (max-width: 1199px) { @media only screen and (min-width: 992px) and (max-width: 1199px) {
@ -1107,19 +1104,18 @@ only screen and (min-width: 576px) and (max-width: 767px) {
@media only screen and (min-width: 768px) and (max-width: 991px) { @media only screen and (min-width: 768px) and (max-width: 991px) {
.section-space-medium { .section-space-medium {
padding: 60px 0; padding: 80px 0;
} }
} }
@media only screen and (min-width: 576px) and (max-width: 767px), @media (max-width: 767px) {
(max-width: 575px) {
.section-space-medium { .section-space-medium {
padding: 60px 0; padding: 60px 0;
} }
} }
.section-space-medium-top { .section-space-medium-top {
padding-top: 100px; padding-top: 80px;
} }
@media only screen and (min-width: 992px) and (max-width: 1199px) { @media only screen and (min-width: 992px) and (max-width: 1199px) {
@ -1130,19 +1126,18 @@ only screen and (min-width: 576px) and (max-width: 767px) {
@media only screen and (min-width: 768px) and (max-width: 991px) { @media only screen and (min-width: 768px) and (max-width: 991px) {
.section-space-medium-top { .section-space-medium-top {
padding-top: 60px; padding-top: 80px;
} }
} }
@media (max-width: 575px), @media (max-width: 767px) {
only screen and (min-width: 576px) and (max-width: 767px) {
.section-space-medium-top { .section-space-medium-top {
padding-top: 60px; padding-top: 60px;
} }
} }
.section-space-medium-bottom { .section-space-medium-bottom {
padding-bottom: 100px; padding-bottom: 80px;
} }
@media only screen and (min-width: 992px) and (max-width: 1199px) { @media only screen and (min-width: 992px) and (max-width: 1199px) {
@ -1153,12 +1148,11 @@ only screen and (min-width: 576px) and (max-width: 767px) {
@media only screen and (min-width: 768px) and (max-width: 991px) { @media only screen and (min-width: 768px) and (max-width: 991px) {
.section-space-medium-bottom { .section-space-medium-bottom {
padding-bottom: 60px; padding-bottom: 80px;
} }
} }
@media only screen and (min-width: 576px) and (max-width: 767px), @media (max-width: 767px) {
(max-width: 575px) {
.section-space-medium-bottom { .section-space-medium-bottom {
padding-bottom: 60px; padding-bottom: 60px;
} }
@ -1176,12 +1170,11 @@ only screen and (min-width: 576px) and (max-width: 767px) {
@media only screen and (min-width: 768px) and (max-width: 991px) { @media only screen and (min-width: 768px) and (max-width: 991px) {
.section-space-small { .section-space-small {
padding: 60px 0; padding: 80px 0;
} }
} }
@media only screen and (min-width: 576px) and (max-width: 767px), @media (max-width: 767px) {
(max-width: 575px) {
.section-space-small { .section-space-small {
padding: 60px 0; padding: 60px 0;
} }
@ -1193,12 +1186,11 @@ only screen and (min-width: 576px) and (max-width: 767px) {
@media only screen and (min-width: 768px) and (max-width: 991px) { @media only screen and (min-width: 768px) and (max-width: 991px) {
.section-space-small-top { .section-space-small-top {
padding-top: 60px; padding-top: 80px;
} }
} }
@media only screen and (min-width: 576px) and (max-width: 767px), @media (max-width: 767px) {
(max-width: 575px) {
.section-space-small-top { .section-space-small-top {
padding-top: 60px; padding-top: 60px;
} }
@ -3333,7 +3325,7 @@ p.banner-text {
left: -16px; left: -16px;
width: 50px; width: 50px;
height: 30px; height: 30px;
background: #3c72fc; background: #3779b9;
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 48% 47%, 0 0); clip-path: polygon(50% 0%, 100% 0, 100% 100%, 48% 47%, 0 0);
} }

6
public/assets/imgs/logo/black-logo.svg
View File

@ -5,7 +5,7 @@
<path d="M141.728 17.6406V21.7656H127.431V17.6406H141.728ZM131.556 11.4297H137.204V35.9922C137.204 36.7734 137.313 37.375 137.532 37.7969C137.767 38.2031 138.087 38.4766 138.493 38.6172C138.899 38.7578 139.376 38.8281 139.923 38.8281C140.313 38.8281 140.688 38.8047 141.048 38.7578C141.407 38.7109 141.696 38.6641 141.915 38.6172L141.938 42.9297C141.47 43.0703 140.923 43.1953 140.298 43.3047C139.688 43.4141 138.985 43.4688 138.188 43.4688C136.892 43.4688 135.743 43.2422 134.743 42.7891C133.743 42.3203 132.962 41.5625 132.399 40.5156C131.837 39.4688 131.556 38.0781 131.556 36.3438V11.4297Z" fill="#1D1D1D"/> <path d="M141.728 17.6406V21.7656H127.431V17.6406H141.728ZM131.556 11.4297H137.204V35.9922C137.204 36.7734 137.313 37.375 137.532 37.7969C137.767 38.2031 138.087 38.4766 138.493 38.6172C138.899 38.7578 139.376 38.8281 139.923 38.8281C140.313 38.8281 140.688 38.8047 141.048 38.7578C141.407 38.7109 141.696 38.6641 141.915 38.6172L141.938 42.9297C141.47 43.0703 140.923 43.1953 140.298 43.3047C139.688 43.4141 138.985 43.4688 138.188 43.4688C136.892 43.4688 135.743 43.2422 134.743 42.7891C133.743 42.3203 132.962 41.5625 132.399 40.5156C131.837 39.4688 131.556 38.0781 131.556 36.3438V11.4297Z" fill="#1D1D1D"/>
<path d="M102.012 30.5781V30.0859C102.012 28.2266 102.278 26.5156 102.809 24.9531C103.34 23.375 104.122 22.0078 105.153 20.8516C106.184 19.6953 107.45 18.7969 108.95 18.1562C110.45 17.5 112.168 17.1719 114.106 17.1719C116.075 17.1719 117.809 17.5 119.309 18.1562C120.825 18.7969 122.098 19.6953 123.129 20.8516C124.161 22.0078 124.942 23.375 125.473 24.9531C126.004 26.5156 126.27 28.2266 126.27 30.0859V30.5781C126.27 32.4219 126.004 34.1328 125.473 35.7109C124.942 37.2734 124.161 38.6406 123.129 39.8125C122.098 40.9688 120.833 41.8672 119.333 42.5078C117.833 43.1484 116.106 43.4688 114.153 43.4688C112.215 43.4688 110.489 43.1484 108.973 42.5078C107.458 41.8672 106.184 40.9688 105.153 39.8125C104.122 38.6406 103.34 37.2734 102.809 35.7109C102.278 34.1328 102.012 32.4219 102.012 30.5781ZM109.348 30.0859V30.5781C109.348 31.5781 109.426 32.5156 109.583 33.3906C109.754 34.2656 110.028 35.0312 110.403 35.6875C110.778 36.3438 111.27 36.8594 111.879 37.2344C112.504 37.5938 113.262 37.7734 114.153 37.7734C115.043 37.7734 115.793 37.5938 116.403 37.2344C117.012 36.8594 117.504 36.3438 117.879 35.6875C118.254 35.0312 118.52 34.2656 118.676 33.3906C118.848 32.5156 118.934 31.5781 118.934 30.5781V30.0859C118.934 29.1016 118.848 28.1797 118.676 27.3203C118.52 26.4453 118.254 25.6719 117.879 25C117.504 24.3281 117.004 23.8047 116.379 23.4297C115.77 23.0547 115.012 22.8672 114.106 22.8672C113.231 22.8672 112.489 23.0547 111.879 23.4297C111.27 23.8047 110.778 24.3281 110.403 25C110.028 25.6719 109.754 26.4453 109.583 27.3203C109.426 28.1797 109.348 29.1016 109.348 30.0859Z" fill="#1D1D1D"/> <path d="M102.012 30.5781V30.0859C102.012 28.2266 102.278 26.5156 102.809 24.9531C103.34 23.375 104.122 22.0078 105.153 20.8516C106.184 19.6953 107.45 18.7969 108.95 18.1562C110.45 17.5 112.168 17.1719 114.106 17.1719C116.075 17.1719 117.809 17.5 119.309 18.1562C120.825 18.7969 122.098 19.6953 123.129 20.8516C124.161 22.0078 124.942 23.375 125.473 24.9531C126.004 26.5156 126.27 28.2266 126.27 30.0859V30.5781C126.27 32.4219 126.004 34.1328 125.473 35.7109C124.942 37.2734 124.161 38.6406 123.129 39.8125C122.098 40.9688 120.833 41.8672 119.333 42.5078C117.833 43.1484 116.106 43.4688 114.153 43.4688C112.215 43.4688 110.489 43.1484 108.973 42.5078C107.458 41.8672 106.184 40.9688 105.153 39.8125C104.122 38.6406 103.34 37.2734 102.809 35.7109C102.278 34.1328 102.012 32.4219 102.012 30.5781ZM109.348 30.0859V30.5781C109.348 31.5781 109.426 32.5156 109.583 33.3906C109.754 34.2656 110.028 35.0312 110.403 35.6875C110.778 36.3438 111.27 36.8594 111.879 37.2344C112.504 37.5938 113.262 37.7734 114.153 37.7734C115.043 37.7734 115.793 37.5938 116.403 37.2344C117.012 36.8594 117.504 36.3438 117.879 35.6875C118.254 35.0312 118.52 34.2656 118.676 33.3906C118.848 32.5156 118.934 31.5781 118.934 30.5781V30.0859C118.934 29.1016 118.848 28.1797 118.676 27.3203C118.52 26.4453 118.254 25.6719 117.879 25C117.504 24.3281 117.004 23.8047 116.379 23.4297C115.77 23.0547 115.012 22.8672 114.106 22.8672C113.231 22.8672 112.489 23.0547 111.879 23.4297C111.27 23.8047 110.778 24.3281 110.403 25C110.028 25.6719 109.754 26.4453 109.583 27.3203C109.426 28.1797 109.348 29.1016 109.348 30.0859Z" fill="#1D1D1D"/>
<path d="M70.875 38.7344L77.6719 8.875H81.5859L83.1328 12.5781L75.8906 43H71.6016L70.875 38.7344ZM68.2266 8.875L73.9219 38.875L72.9375 43H68.0625L60.6562 8.875H68.2266ZM87.9844 38.7109L93.6094 8.875H101.156L93.75 43H88.9219L87.9844 38.7109ZM84.1406 8.875L91.0312 38.8984L90.2344 43H85.9688L78.6094 12.5547L80.2266 8.875H84.1406Z" fill="#1D1D1D"/> <path d="M70.875 38.7344L77.6719 8.875H81.5859L83.1328 12.5781L75.8906 43H71.6016L70.875 38.7344ZM68.2266 8.875L73.9219 38.875L72.9375 43H68.0625L60.6562 8.875H68.2266ZM87.9844 38.7109L93.6094 8.875H101.156L93.75 43H88.9219L87.9844 38.7109ZM84.1406 8.875L91.0312 38.8984L90.2344 43H85.9688L78.6094 12.5547L80.2266 8.875H84.1406Z" fill="#1D1D1D"/>
<path d="M45.553 20.0278C44.9054 19.9365 44.2788 19.9716 43.6924 20.1101C43.112 20.247 42.5035 20.0474 42.0816 19.626L40.186 17.7303C39.7681 17.3124 39.5705 16.7085 39.7069 16.1331C39.8449 15.5527 39.881 14.9337 39.7942 14.2936C39.4962 12.101 37.7285 10.3332 35.5358 10.0357C34.8957 9.94894 34.2767 9.98556 33.6968 10.123C33.1214 10.2595 32.518 10.0623 32.1001 9.64444L30.2922 7.83655C29.8653 7.40966 29.6677 6.79064 29.8157 6.20573C29.9406 5.71061 29.9922 5.18692 29.9541 4.64415C29.7775 2.12494 27.6712 0.0892953 25.1474 0.00301401C22.3092 -0.0943032 19.9781 2.17761 19.9781 4.99429C19.9781 5.37654 20.0217 5.74875 20.1035 6.10592C20.2369 6.68731 20.0784 7.29629 19.6565 7.71817L17.7303 9.64444C17.3124 10.0623 16.7084 10.2595 16.1336 10.123C15.5537 9.98506 14.9342 9.94843 14.2946 10.0357C12.1019 10.3332 10.3342 12.101 10.0362 14.2936C9.94941 14.9337 9.98602 15.5527 10.1235 16.1331C10.2599 16.7085 10.0628 17.3124 9.64441 17.7303L7.74874 19.626C7.32736 20.0474 6.71838 20.247 6.13799 20.1101C5.55157 19.9716 4.92502 19.9365 4.27741 20.0278C2.07072 20.3393 0.304967 22.1372 0.037595 24.3499C-0.354182 27.596 2.3717 30.3208 5.61829 29.9281C7.81445 29.6622 9.60529 27.9195 9.93235 25.7314C10.0272 25.0953 10.0006 24.4793 9.87315 23.8999C9.74624 23.3235 9.9479 22.7236 10.3648 22.3062L12.3517 20.3192C12.7676 19.9034 13.366 19.7439 13.9414 19.8668C14.3974 19.9641 14.876 19.9992 15.3691 19.9616C17.7945 19.7775 19.7785 17.7935 19.9631 15.3681C20.0007 14.8745 19.9656 14.3954 19.8677 13.9395C19.7448 13.3641 19.9044 12.7656 20.3202 12.3498L22.3398 10.3302C22.7572 9.91282 23.3571 9.75581 23.9345 9.87821C24.2691 9.94944 24.6157 9.98707 24.9719 9.98707C25.2994 9.98707 25.619 9.95446 25.928 9.89326C26.5019 9.77939 27.0958 9.93539 27.5092 10.3492L29.5097 12.3498C29.9255 12.7656 30.085 13.3641 29.9621 13.9395C29.8648 14.3954 29.8297 14.8745 29.8668 15.3681C30.0514 17.7935 32.0354 19.777 34.4608 19.9616C34.9539 19.9992 35.433 19.9641 35.8885 19.8668C36.4638 19.7439 37.0623 19.9034 37.4781 20.3192L39.4651 22.3062C39.8825 22.7236 40.0836 23.3235 39.9572 23.8999C39.8298 24.4788 39.8027 25.0953 39.898 25.7314C40.2246 27.9195 42.0154 29.6622 44.2116 29.9281C47.4582 30.3213 50.1836 27.5965 49.7923 24.3499C49.5254 22.1372 47.7592 20.3393 45.553 20.0278Z" fill="#3C72FC"/> <path d="M45.553 20.0278C44.9054 19.9365 44.2788 19.9716 43.6924 20.1101C43.112 20.247 42.5035 20.0474 42.0816 19.626L40.186 17.7303C39.7681 17.3124 39.5705 16.7085 39.7069 16.1331C39.8449 15.5527 39.881 14.9337 39.7942 14.2936C39.4962 12.101 37.7285 10.3332 35.5358 10.0357C34.8957 9.94894 34.2767 9.98556 33.6968 10.123C33.1214 10.2595 32.518 10.0623 32.1001 9.64444L30.2922 7.83655C29.8653 7.40966 29.6677 6.79064 29.8157 6.20573C29.9406 5.71061 29.9922 5.18692 29.9541 4.64415C29.7775 2.12494 27.6712 0.0892953 25.1474 0.00301401C22.3092 -0.0943032 19.9781 2.17761 19.9781 4.99429C19.9781 5.37654 20.0217 5.74875 20.1035 6.10592C20.2369 6.68731 20.0784 7.29629 19.6565 7.71817L17.7303 9.64444C17.3124 10.0623 16.7084 10.2595 16.1336 10.123C15.5537 9.98506 14.9342 9.94843 14.2946 10.0357C12.1019 10.3332 10.3342 12.101 10.0362 14.2936C9.94941 14.9337 9.98602 15.5527 10.1235 16.1331C10.2599 16.7085 10.0628 17.3124 9.64441 17.7303L7.74874 19.626C7.32736 20.0474 6.71838 20.247 6.13799 20.1101C5.55157 19.9716 4.92502 19.9365 4.27741 20.0278C2.07072 20.3393 0.304967 22.1372 0.037595 24.3499C-0.354182 27.596 2.3717 30.3208 5.61829 29.9281C7.81445 29.6622 9.60529 27.9195 9.93235 25.7314C10.0272 25.0953 10.0006 24.4793 9.87315 23.8999C9.74624 23.3235 9.9479 22.7236 10.3648 22.3062L12.3517 20.3192C12.7676 19.9034 13.366 19.7439 13.9414 19.8668C14.3974 19.9641 14.876 19.9992 15.3691 19.9616C17.7945 19.7775 19.7785 17.7935 19.9631 15.3681C20.0007 14.8745 19.9656 14.3954 19.8677 13.9395C19.7448 13.3641 19.9044 12.7656 20.3202 12.3498L22.3398 10.3302C22.7572 9.91282 23.3571 9.75581 23.9345 9.87821C24.2691 9.94944 24.6157 9.98707 24.9719 9.98707C25.2994 9.98707 25.619 9.95446 25.928 9.89326C26.5019 9.77939 27.0958 9.93539 27.5092 10.3492L29.5097 12.3498C29.9255 12.7656 30.085 13.3641 29.9621 13.9395C29.8648 14.3954 29.8297 14.8745 29.8668 15.3681C30.0514 17.7935 32.0354 19.777 34.4608 19.9616C34.9539 19.9992 35.433 19.9641 35.8885 19.8668C36.4638 19.7439 37.0623 19.9034 37.4781 20.3192L39.4651 22.3062C39.8825 22.7236 40.0836 23.3235 39.9572 23.8999C39.8298 24.4788 39.8027 25.0953 39.898 25.7314C40.2246 27.9195 42.0154 29.6622 44.2116 29.9281C47.4582 30.3213 50.1836 27.5965 49.7923 24.3499C49.5254 22.1372 47.7592 20.3393 45.553 20.0278Z" fill="#3779b9"/>
<path d="M19.7505 45.0058C19.7505 42.2473 21.9868 40.0115 24.7448 40.0115C27.5033 40.0115 29.7391 42.2478 29.7391 45.0058C29.7391 47.7642 27.5033 50 24.7448 50C21.9868 50 19.7505 47.7637 19.7505 45.0058Z" fill="#3C72FC"/> <path d="M19.7505 45.0058C19.7505 42.2473 21.9868 40.0115 24.7448 40.0115C27.5033 40.0115 29.7391 42.2478 29.7391 45.0058C29.7391 47.7642 27.5033 50 24.7448 50C21.9868 50 19.7505 47.7637 19.7505 45.0058Z" fill="#3779b9"/>
<path d="M35.3367 30.073C34.6896 29.9817 34.063 30.0169 33.4766 30.1553C32.8962 30.2923 32.2877 30.0926 31.8664 29.6712L30.0655 27.8704C29.6386 27.4435 29.4409 26.8244 29.5889 26.2395C29.7138 25.7444 29.7655 25.2207 29.7274 24.6779C29.5508 22.1587 27.4444 20.1231 24.9202 20.0368C22.0819 19.9395 19.7509 22.2114 19.7509 25.0281C19.7509 25.4103 19.7945 25.7826 19.8763 26.1402C20.0097 26.7216 19.8512 27.3301 19.4293 27.7525L17.51 29.6717C17.0887 30.0931 16.4797 30.2928 15.8998 30.1558C15.3134 30.0174 14.6873 29.9822 14.0397 30.0735C11.833 30.3851 10.0668 32.1824 9.7994 34.3951C9.40713 37.6417 12.133 40.3671 15.3801 39.9738C17.5763 39.7079 19.3671 37.9648 19.6937 35.7766C19.7885 35.1406 19.7614 34.5246 19.6345 33.9457C19.5076 33.3698 19.7092 32.7693 20.1261 32.3525L22.1126 30.366C22.5299 29.9486 23.1299 29.7916 23.7072 29.914C24.0418 29.9853 24.389 30.0229 24.7446 30.0229C25.0717 30.0229 25.3917 29.9903 25.7007 29.9291C26.2746 29.8157 26.8686 29.9712 27.2824 30.3851L29.2498 32.3525C29.6672 32.7698 29.8683 33.3698 29.7419 33.9462C29.6145 34.5251 29.5874 35.1416 29.6827 35.7776C30.0093 37.9658 31.8006 39.7085 33.9968 39.9743C37.2434 40.3676 39.9688 37.6427 39.577 34.3961C39.3096 32.1829 37.5434 30.3846 35.3367 30.073Z" fill="#3C72FC"/> <path d="M35.3367 30.073C34.6896 29.9817 34.063 30.0169 33.4766 30.1553C32.8962 30.2923 32.2877 30.0926 31.8664 29.6712L30.0655 27.8704C29.6386 27.4435 29.4409 26.8244 29.5889 26.2395C29.7138 25.7444 29.7655 25.2207 29.7274 24.6779C29.5508 22.1587 27.4444 20.1231 24.9202 20.0368C22.0819 19.9395 19.7509 22.2114 19.7509 25.0281C19.7509 25.4103 19.7945 25.7826 19.8763 26.1402C20.0097 26.7216 19.8512 27.3301 19.4293 27.7525L17.51 29.6717C17.0887 30.0931 16.4797 30.2928 15.8998 30.1558C15.3134 30.0174 14.6873 29.9822 14.0397 30.0735C11.833 30.3851 10.0668 32.1824 9.7994 34.3951C9.40713 37.6417 12.133 40.3671 15.3801 39.9738C17.5763 39.7079 19.3671 37.9648 19.6937 35.7766C19.7885 35.1406 19.7614 34.5246 19.6345 33.9457C19.5076 33.3698 19.7092 32.7693 20.1261 32.3525L22.1126 30.366C22.5299 29.9486 23.1299 29.7916 23.7072 29.914C24.0418 29.9853 24.389 30.0229 24.7446 30.0229C25.0717 30.0229 25.3917 29.9903 25.7007 29.9291C26.2746 29.8157 26.8686 29.9712 27.2824 30.3851L29.2498 32.3525C29.6672 32.7698 29.8683 33.3698 29.7419 33.9462C29.6145 34.5251 29.5874 35.1416 29.6827 35.7776C30.0093 37.9658 31.8006 39.7085 33.9968 39.9743C37.2434 40.3676 39.9688 37.6427 39.577 34.3961C39.3096 32.1829 37.5434 30.3846 35.3367 30.073Z" fill="#3779b9"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

6
public/assets/imgs/logo/logo-white.svg
View File

@ -5,7 +5,7 @@
<path d="M141.728 17.6406V21.7656H127.431V17.6406H141.728ZM131.556 11.4297H137.204V35.9922C137.204 36.7734 137.313 37.375 137.532 37.7969C137.767 38.2031 138.087 38.4766 138.493 38.6172C138.899 38.7578 139.376 38.8281 139.923 38.8281C140.313 38.8281 140.688 38.8047 141.048 38.7578C141.407 38.7109 141.696 38.6641 141.915 38.6172L141.938 42.9297C141.47 43.0703 140.923 43.1953 140.298 43.3047C139.688 43.4141 138.985 43.4688 138.188 43.4688C136.892 43.4688 135.743 43.2422 134.743 42.7891C133.743 42.3203 132.962 41.5625 132.399 40.5156C131.837 39.4688 131.556 38.0781 131.556 36.3438V11.4297Z" fill="white"/> <path d="M141.728 17.6406V21.7656H127.431V17.6406H141.728ZM131.556 11.4297H137.204V35.9922C137.204 36.7734 137.313 37.375 137.532 37.7969C137.767 38.2031 138.087 38.4766 138.493 38.6172C138.899 38.7578 139.376 38.8281 139.923 38.8281C140.313 38.8281 140.688 38.8047 141.048 38.7578C141.407 38.7109 141.696 38.6641 141.915 38.6172L141.938 42.9297C141.47 43.0703 140.923 43.1953 140.298 43.3047C139.688 43.4141 138.985 43.4688 138.188 43.4688C136.892 43.4688 135.743 43.2422 134.743 42.7891C133.743 42.3203 132.962 41.5625 132.399 40.5156C131.837 39.4688 131.556 38.0781 131.556 36.3438V11.4297Z" fill="white"/>
<path d="M102.012 30.5781V30.0859C102.012 28.2266 102.278 26.5156 102.809 24.9531C103.34 23.375 104.122 22.0078 105.153 20.8516C106.184 19.6953 107.45 18.7969 108.95 18.1562C110.45 17.5 112.168 17.1719 114.106 17.1719C116.075 17.1719 117.809 17.5 119.309 18.1562C120.825 18.7969 122.098 19.6953 123.129 20.8516C124.161 22.0078 124.942 23.375 125.473 24.9531C126.004 26.5156 126.27 28.2266 126.27 30.0859V30.5781C126.27 32.4219 126.004 34.1328 125.473 35.7109C124.942 37.2734 124.161 38.6406 123.129 39.8125C122.098 40.9688 120.833 41.8672 119.333 42.5078C117.833 43.1484 116.106 43.4688 114.153 43.4688C112.215 43.4688 110.489 43.1484 108.973 42.5078C107.458 41.8672 106.184 40.9688 105.153 39.8125C104.122 38.6406 103.34 37.2734 102.809 35.7109C102.278 34.1328 102.012 32.4219 102.012 30.5781ZM109.348 30.0859V30.5781C109.348 31.5781 109.426 32.5156 109.583 33.3906C109.754 34.2656 110.028 35.0312 110.403 35.6875C110.778 36.3438 111.27 36.8594 111.879 37.2344C112.504 37.5938 113.262 37.7734 114.153 37.7734C115.043 37.7734 115.793 37.5938 116.403 37.2344C117.012 36.8594 117.504 36.3438 117.879 35.6875C118.254 35.0312 118.52 34.2656 118.676 33.3906C118.848 32.5156 118.934 31.5781 118.934 30.5781V30.0859C118.934 29.1016 118.848 28.1797 118.676 27.3203C118.52 26.4453 118.254 25.6719 117.879 25C117.504 24.3281 117.004 23.8047 116.379 23.4297C115.77 23.0547 115.012 22.8672 114.106 22.8672C113.231 22.8672 112.489 23.0547 111.879 23.4297C111.27 23.8047 110.778 24.3281 110.403 25C110.028 25.6719 109.754 26.4453 109.583 27.3203C109.426 28.1797 109.348 29.1016 109.348 30.0859Z" fill="white"/> <path d="M102.012 30.5781V30.0859C102.012 28.2266 102.278 26.5156 102.809 24.9531C103.34 23.375 104.122 22.0078 105.153 20.8516C106.184 19.6953 107.45 18.7969 108.95 18.1562C110.45 17.5 112.168 17.1719 114.106 17.1719C116.075 17.1719 117.809 17.5 119.309 18.1562C120.825 18.7969 122.098 19.6953 123.129 20.8516C124.161 22.0078 124.942 23.375 125.473 24.9531C126.004 26.5156 126.27 28.2266 126.27 30.0859V30.5781C126.27 32.4219 126.004 34.1328 125.473 35.7109C124.942 37.2734 124.161 38.6406 123.129 39.8125C122.098 40.9688 120.833 41.8672 119.333 42.5078C117.833 43.1484 116.106 43.4688 114.153 43.4688C112.215 43.4688 110.489 43.1484 108.973 42.5078C107.458 41.8672 106.184 40.9688 105.153 39.8125C104.122 38.6406 103.34 37.2734 102.809 35.7109C102.278 34.1328 102.012 32.4219 102.012 30.5781ZM109.348 30.0859V30.5781C109.348 31.5781 109.426 32.5156 109.583 33.3906C109.754 34.2656 110.028 35.0312 110.403 35.6875C110.778 36.3438 111.27 36.8594 111.879 37.2344C112.504 37.5938 113.262 37.7734 114.153 37.7734C115.043 37.7734 115.793 37.5938 116.403 37.2344C117.012 36.8594 117.504 36.3438 117.879 35.6875C118.254 35.0312 118.52 34.2656 118.676 33.3906C118.848 32.5156 118.934 31.5781 118.934 30.5781V30.0859C118.934 29.1016 118.848 28.1797 118.676 27.3203C118.52 26.4453 118.254 25.6719 117.879 25C117.504 24.3281 117.004 23.8047 116.379 23.4297C115.77 23.0547 115.012 22.8672 114.106 22.8672C113.231 22.8672 112.489 23.0547 111.879 23.4297C111.27 23.8047 110.778 24.3281 110.403 25C110.028 25.6719 109.754 26.4453 109.583 27.3203C109.426 28.1797 109.348 29.1016 109.348 30.0859Z" fill="white"/>
<path d="M70.875 38.7344L77.6719 8.875H81.5859L83.1328 12.5781L75.8906 43H71.6016L70.875 38.7344ZM68.2266 8.875L73.9219 38.875L72.9375 43H68.0625L60.6562 8.875H68.2266ZM87.9844 38.7109L93.6094 8.875H101.156L93.75 43H88.9219L87.9844 38.7109ZM84.1406 8.875L91.0312 38.8984L90.2344 43H85.9688L78.6094 12.5547L80.2266 8.875H84.1406Z" fill="white"/> <path d="M70.875 38.7344L77.6719 8.875H81.5859L83.1328 12.5781L75.8906 43H71.6016L70.875 38.7344ZM68.2266 8.875L73.9219 38.875L72.9375 43H68.0625L60.6562 8.875H68.2266ZM87.9844 38.7109L93.6094 8.875H101.156L93.75 43H88.9219L87.9844 38.7109ZM84.1406 8.875L91.0312 38.8984L90.2344 43H85.9688L78.6094 12.5547L80.2266 8.875H84.1406Z" fill="white"/>
<path d="M45.553 20.0278C44.9054 19.9365 44.2788 19.9716 43.6924 20.1101C43.112 20.247 42.5035 20.0474 42.0816 19.626L40.186 17.7303C39.7681 17.3124 39.5705 16.7085 39.7069 16.1331C39.8449 15.5527 39.881 14.9337 39.7942 14.2936C39.4962 12.101 37.7285 10.3332 35.5358 10.0357C34.8957 9.94894 34.2767 9.98556 33.6968 10.123C33.1214 10.2595 32.518 10.0623 32.1001 9.64444L30.2922 7.83655C29.8653 7.40966 29.6677 6.79064 29.8157 6.20573C29.9406 5.71061 29.9922 5.18692 29.9541 4.64415C29.7775 2.12494 27.6712 0.0892953 25.1474 0.00301401C22.3092 -0.0943032 19.9781 2.17761 19.9781 4.99429C19.9781 5.37654 20.0217 5.74875 20.1035 6.10592C20.2369 6.68731 20.0784 7.29629 19.6565 7.71817L17.7303 9.64444C17.3124 10.0623 16.7084 10.2595 16.1336 10.123C15.5537 9.98506 14.9342 9.94843 14.2946 10.0357C12.1019 10.3332 10.3342 12.101 10.0362 14.2936C9.94941 14.9337 9.98602 15.5527 10.1235 16.1331C10.2599 16.7085 10.0628 17.3124 9.64441 17.7303L7.74874 19.626C7.32736 20.0474 6.71838 20.247 6.13799 20.1101C5.55157 19.9716 4.92502 19.9365 4.27741 20.0278C2.07072 20.3393 0.304967 22.1372 0.037595 24.3499C-0.354182 27.596 2.3717 30.3208 5.61829 29.9281C7.81445 29.6622 9.60529 27.9195 9.93235 25.7314C10.0272 25.0953 10.0006 24.4793 9.87315 23.8999C9.74624 23.3235 9.9479 22.7236 10.3648 22.3062L12.3517 20.3192C12.7676 19.9034 13.366 19.7439 13.9414 19.8668C14.3974 19.9641 14.876 19.9992 15.3691 19.9616C17.7945 19.7775 19.7785 17.7935 19.9631 15.3681C20.0007 14.8745 19.9656 14.3954 19.8677 13.9395C19.7448 13.3641 19.9044 12.7656 20.3202 12.3498L22.3398 10.3302C22.7572 9.91282 23.3571 9.75581 23.9345 9.87821C24.2691 9.94944 24.6157 9.98707 24.9719 9.98707C25.2994 9.98707 25.619 9.95446 25.928 9.89326C26.5019 9.77939 27.0958 9.93539 27.5092 10.3492L29.5097 12.3498C29.9255 12.7656 30.085 13.3641 29.9621 13.9395C29.8648 14.3954 29.8297 14.8745 29.8668 15.3681C30.0514 17.7935 32.0354 19.777 34.4608 19.9616C34.9539 19.9992 35.433 19.9641 35.8885 19.8668C36.4638 19.7439 37.0623 19.9034 37.4781 20.3192L39.4651 22.3062C39.8825 22.7236 40.0836 23.3235 39.9572 23.8999C39.8298 24.4788 39.8027 25.0953 39.898 25.7314C40.2246 27.9195 42.0154 29.6622 44.2116 29.9281C47.4582 30.3213 50.1836 27.5965 49.7923 24.3499C49.5254 22.1372 47.7592 20.3393 45.553 20.0278Z" fill="#3C72FC"/> <path d="M45.553 20.0278C44.9054 19.9365 44.2788 19.9716 43.6924 20.1101C43.112 20.247 42.5035 20.0474 42.0816 19.626L40.186 17.7303C39.7681 17.3124 39.5705 16.7085 39.7069 16.1331C39.8449 15.5527 39.881 14.9337 39.7942 14.2936C39.4962 12.101 37.7285 10.3332 35.5358 10.0357C34.8957 9.94894 34.2767 9.98556 33.6968 10.123C33.1214 10.2595 32.518 10.0623 32.1001 9.64444L30.2922 7.83655C29.8653 7.40966 29.6677 6.79064 29.8157 6.20573C29.9406 5.71061 29.9922 5.18692 29.9541 4.64415C29.7775 2.12494 27.6712 0.0892953 25.1474 0.00301401C22.3092 -0.0943032 19.9781 2.17761 19.9781 4.99429C19.9781 5.37654 20.0217 5.74875 20.1035 6.10592C20.2369 6.68731 20.0784 7.29629 19.6565 7.71817L17.7303 9.64444C17.3124 10.0623 16.7084 10.2595 16.1336 10.123C15.5537 9.98506 14.9342 9.94843 14.2946 10.0357C12.1019 10.3332 10.3342 12.101 10.0362 14.2936C9.94941 14.9337 9.98602 15.5527 10.1235 16.1331C10.2599 16.7085 10.0628 17.3124 9.64441 17.7303L7.74874 19.626C7.32736 20.0474 6.71838 20.247 6.13799 20.1101C5.55157 19.9716 4.92502 19.9365 4.27741 20.0278C2.07072 20.3393 0.304967 22.1372 0.037595 24.3499C-0.354182 27.596 2.3717 30.3208 5.61829 29.9281C7.81445 29.6622 9.60529 27.9195 9.93235 25.7314C10.0272 25.0953 10.0006 24.4793 9.87315 23.8999C9.74624 23.3235 9.9479 22.7236 10.3648 22.3062L12.3517 20.3192C12.7676 19.9034 13.366 19.7439 13.9414 19.8668C14.3974 19.9641 14.876 19.9992 15.3691 19.9616C17.7945 19.7775 19.7785 17.7935 19.9631 15.3681C20.0007 14.8745 19.9656 14.3954 19.8677 13.9395C19.7448 13.3641 19.9044 12.7656 20.3202 12.3498L22.3398 10.3302C22.7572 9.91282 23.3571 9.75581 23.9345 9.87821C24.2691 9.94944 24.6157 9.98707 24.9719 9.98707C25.2994 9.98707 25.619 9.95446 25.928 9.89326C26.5019 9.77939 27.0958 9.93539 27.5092 10.3492L29.5097 12.3498C29.9255 12.7656 30.085 13.3641 29.9621 13.9395C29.8648 14.3954 29.8297 14.8745 29.8668 15.3681C30.0514 17.7935 32.0354 19.777 34.4608 19.9616C34.9539 19.9992 35.433 19.9641 35.8885 19.8668C36.4638 19.7439 37.0623 19.9034 37.4781 20.3192L39.4651 22.3062C39.8825 22.7236 40.0836 23.3235 39.9572 23.8999C39.8298 24.4788 39.8027 25.0953 39.898 25.7314C40.2246 27.9195 42.0154 29.6622 44.2116 29.9281C47.4582 30.3213 50.1836 27.5965 49.7923 24.3499C49.5254 22.1372 47.7592 20.3393 45.553 20.0278Z" fill="#3779b9"/>
<path d="M19.7505 45.0058C19.7505 42.2473 21.9868 40.0115 24.7448 40.0115C27.5033 40.0115 29.7391 42.2478 29.7391 45.0058C29.7391 47.7642 27.5033 50 24.7448 50C21.9868 50 19.7505 47.7637 19.7505 45.0058Z" fill="#3C72FC"/> <path d="M19.7505 45.0058C19.7505 42.2473 21.9868 40.0115 24.7448 40.0115C27.5033 40.0115 29.7391 42.2478 29.7391 45.0058C29.7391 47.7642 27.5033 50 24.7448 50C21.9868 50 19.7505 47.7637 19.7505 45.0058Z" fill="#3779b9"/>
<path d="M35.3367 30.073C34.6896 29.9817 34.063 30.0169 33.4766 30.1553C32.8962 30.2923 32.2877 30.0926 31.8664 29.6712L30.0655 27.8704C29.6386 27.4435 29.4409 26.8244 29.5889 26.2395C29.7138 25.7444 29.7655 25.2207 29.7274 24.6779C29.5508 22.1587 27.4444 20.1231 24.9202 20.0368C22.0819 19.9395 19.7509 22.2114 19.7509 25.0281C19.7509 25.4103 19.7945 25.7826 19.8763 26.1402C20.0097 26.7216 19.8512 27.3301 19.4293 27.7525L17.51 29.6717C17.0887 30.0931 16.4797 30.2928 15.8998 30.1558C15.3134 30.0174 14.6873 29.9822 14.0397 30.0735C11.833 30.3851 10.0668 32.1824 9.7994 34.3951C9.40713 37.6417 12.133 40.3671 15.3801 39.9738C17.5763 39.7079 19.3671 37.9648 19.6937 35.7766C19.7885 35.1406 19.7614 34.5246 19.6345 33.9457C19.5076 33.3698 19.7092 32.7693 20.1261 32.3525L22.1126 30.366C22.5299 29.9486 23.1299 29.7916 23.7072 29.914C24.0418 29.9853 24.389 30.0229 24.7446 30.0229C25.0717 30.0229 25.3917 29.9903 25.7007 29.9291C26.2746 29.8157 26.8686 29.9712 27.2824 30.3851L29.2498 32.3525C29.6672 32.7698 29.8683 33.3698 29.7419 33.9462C29.6145 34.5251 29.5874 35.1416 29.6827 35.7776C30.0093 37.9658 31.8006 39.7085 33.9968 39.9743C37.2434 40.3676 39.9688 37.6427 39.577 34.3961C39.3096 32.1829 37.5434 30.3846 35.3367 30.073Z" fill="#3C72FC"/> <path d="M35.3367 30.073C34.6896 29.9817 34.063 30.0169 33.4766 30.1553C32.8962 30.2923 32.2877 30.0926 31.8664 29.6712L30.0655 27.8704C29.6386 27.4435 29.4409 26.8244 29.5889 26.2395C29.7138 25.7444 29.7655 25.2207 29.7274 24.6779C29.5508 22.1587 27.4444 20.1231 24.9202 20.0368C22.0819 19.9395 19.7509 22.2114 19.7509 25.0281C19.7509 25.4103 19.7945 25.7826 19.8763 26.1402C20.0097 26.7216 19.8512 27.3301 19.4293 27.7525L17.51 29.6717C17.0887 30.0931 16.4797 30.2928 15.8998 30.1558C15.3134 30.0174 14.6873 29.9822 14.0397 30.0735C11.833 30.3851 10.0668 32.1824 9.7994 34.3951C9.40713 37.6417 12.133 40.3671 15.3801 39.9738C17.5763 39.7079 19.3671 37.9648 19.6937 35.7766C19.7885 35.1406 19.7614 34.5246 19.6345 33.9457C19.5076 33.3698 19.7092 32.7693 20.1261 32.3525L22.1126 30.366C22.5299 29.9486 23.1299 29.7916 23.7072 29.914C24.0418 29.9853 24.389 30.0229 24.7446 30.0229C25.0717 30.0229 25.3917 29.9903 25.7007 29.9291C26.2746 29.8157 26.8686 29.9712 27.2824 30.3851L29.2498 32.3525C29.6672 32.7698 29.8683 33.3698 29.7419 33.9462C29.6145 34.5251 29.5874 35.1416 29.6827 35.7776C30.0093 37.9658 31.8006 39.7085 33.9968 39.9743C37.2434 40.3676 39.9688 37.6427 39.577 34.3961C39.3096 32.1829 37.5434 30.3846 35.3367 30.073Z" fill="#3779b9"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

6
public/assets/imgs/logo/logo.svg
View File

@ -5,7 +5,7 @@
<path d="M141.728 17.6406V21.7656H127.431V17.6406H141.728ZM131.556 11.4297H137.204V35.9922C137.204 36.7734 137.313 37.375 137.532 37.7969C137.767 38.2031 138.087 38.4766 138.493 38.6172C138.899 38.7578 139.376 38.8281 139.923 38.8281C140.313 38.8281 140.688 38.8047 141.048 38.7578C141.407 38.7109 141.696 38.6641 141.915 38.6172L141.938 42.9297C141.47 43.0703 140.923 43.1953 140.298 43.3047C139.688 43.4141 138.985 43.4688 138.188 43.4688C136.892 43.4688 135.743 43.2422 134.743 42.7891C133.743 42.3203 132.962 41.5625 132.399 40.5156C131.837 39.4688 131.556 38.0781 131.556 36.3438V11.4297Z" fill="#1D1D1D"/> <path d="M141.728 17.6406V21.7656H127.431V17.6406H141.728ZM131.556 11.4297H137.204V35.9922C137.204 36.7734 137.313 37.375 137.532 37.7969C137.767 38.2031 138.087 38.4766 138.493 38.6172C138.899 38.7578 139.376 38.8281 139.923 38.8281C140.313 38.8281 140.688 38.8047 141.048 38.7578C141.407 38.7109 141.696 38.6641 141.915 38.6172L141.938 42.9297C141.47 43.0703 140.923 43.1953 140.298 43.3047C139.688 43.4141 138.985 43.4688 138.188 43.4688C136.892 43.4688 135.743 43.2422 134.743 42.7891C133.743 42.3203 132.962 41.5625 132.399 40.5156C131.837 39.4688 131.556 38.0781 131.556 36.3438V11.4297Z" fill="#1D1D1D"/>
<path d="M102.012 30.5781V30.0859C102.012 28.2266 102.278 26.5156 102.809 24.9531C103.34 23.375 104.122 22.0078 105.153 20.8516C106.184 19.6953 107.45 18.7969 108.95 18.1562C110.45 17.5 112.168 17.1719 114.106 17.1719C116.075 17.1719 117.809 17.5 119.309 18.1562C120.825 18.7969 122.098 19.6953 123.129 20.8516C124.161 22.0078 124.942 23.375 125.473 24.9531C126.004 26.5156 126.27 28.2266 126.27 30.0859V30.5781C126.27 32.4219 126.004 34.1328 125.473 35.7109C124.942 37.2734 124.161 38.6406 123.129 39.8125C122.098 40.9688 120.833 41.8672 119.333 42.5078C117.833 43.1484 116.106 43.4688 114.153 43.4688C112.215 43.4688 110.489 43.1484 108.973 42.5078C107.458 41.8672 106.184 40.9688 105.153 39.8125C104.122 38.6406 103.34 37.2734 102.809 35.7109C102.278 34.1328 102.012 32.4219 102.012 30.5781ZM109.348 30.0859V30.5781C109.348 31.5781 109.426 32.5156 109.583 33.3906C109.754 34.2656 110.028 35.0312 110.403 35.6875C110.778 36.3438 111.27 36.8594 111.879 37.2344C112.504 37.5938 113.262 37.7734 114.153 37.7734C115.043 37.7734 115.793 37.5938 116.403 37.2344C117.012 36.8594 117.504 36.3438 117.879 35.6875C118.254 35.0312 118.52 34.2656 118.676 33.3906C118.848 32.5156 118.934 31.5781 118.934 30.5781V30.0859C118.934 29.1016 118.848 28.1797 118.676 27.3203C118.52 26.4453 118.254 25.6719 117.879 25C117.504 24.3281 117.004 23.8047 116.379 23.4297C115.77 23.0547 115.012 22.8672 114.106 22.8672C113.231 22.8672 112.489 23.0547 111.879 23.4297C111.27 23.8047 110.778 24.3281 110.403 25C110.028 25.6719 109.754 26.4453 109.583 27.3203C109.426 28.1797 109.348 29.1016 109.348 30.0859Z" fill="#1D1D1D"/> <path d="M102.012 30.5781V30.0859C102.012 28.2266 102.278 26.5156 102.809 24.9531C103.34 23.375 104.122 22.0078 105.153 20.8516C106.184 19.6953 107.45 18.7969 108.95 18.1562C110.45 17.5 112.168 17.1719 114.106 17.1719C116.075 17.1719 117.809 17.5 119.309 18.1562C120.825 18.7969 122.098 19.6953 123.129 20.8516C124.161 22.0078 124.942 23.375 125.473 24.9531C126.004 26.5156 126.27 28.2266 126.27 30.0859V30.5781C126.27 32.4219 126.004 34.1328 125.473 35.7109C124.942 37.2734 124.161 38.6406 123.129 39.8125C122.098 40.9688 120.833 41.8672 119.333 42.5078C117.833 43.1484 116.106 43.4688 114.153 43.4688C112.215 43.4688 110.489 43.1484 108.973 42.5078C107.458 41.8672 106.184 40.9688 105.153 39.8125C104.122 38.6406 103.34 37.2734 102.809 35.7109C102.278 34.1328 102.012 32.4219 102.012 30.5781ZM109.348 30.0859V30.5781C109.348 31.5781 109.426 32.5156 109.583 33.3906C109.754 34.2656 110.028 35.0312 110.403 35.6875C110.778 36.3438 111.27 36.8594 111.879 37.2344C112.504 37.5938 113.262 37.7734 114.153 37.7734C115.043 37.7734 115.793 37.5938 116.403 37.2344C117.012 36.8594 117.504 36.3438 117.879 35.6875C118.254 35.0312 118.52 34.2656 118.676 33.3906C118.848 32.5156 118.934 31.5781 118.934 30.5781V30.0859C118.934 29.1016 118.848 28.1797 118.676 27.3203C118.52 26.4453 118.254 25.6719 117.879 25C117.504 24.3281 117.004 23.8047 116.379 23.4297C115.77 23.0547 115.012 22.8672 114.106 22.8672C113.231 22.8672 112.489 23.0547 111.879 23.4297C111.27 23.8047 110.778 24.3281 110.403 25C110.028 25.6719 109.754 26.4453 109.583 27.3203C109.426 28.1797 109.348 29.1016 109.348 30.0859Z" fill="#1D1D1D"/>
<path d="M70.875 38.7344L77.6719 8.875H81.5859L83.1328 12.5781L75.8906 43H71.6016L70.875 38.7344ZM68.2266 8.875L73.9219 38.875L72.9375 43H68.0625L60.6562 8.875H68.2266ZM87.9844 38.7109L93.6094 8.875H101.156L93.75 43H88.9219L87.9844 38.7109ZM84.1406 8.875L91.0312 38.8984L90.2344 43H85.9688L78.6094 12.5547L80.2266 8.875H84.1406Z" fill="#1D1D1D"/> <path d="M70.875 38.7344L77.6719 8.875H81.5859L83.1328 12.5781L75.8906 43H71.6016L70.875 38.7344ZM68.2266 8.875L73.9219 38.875L72.9375 43H68.0625L60.6562 8.875H68.2266ZM87.9844 38.7109L93.6094 8.875H101.156L93.75 43H88.9219L87.9844 38.7109ZM84.1406 8.875L91.0312 38.8984L90.2344 43H85.9688L78.6094 12.5547L80.2266 8.875H84.1406Z" fill="#1D1D1D"/>
<path d="M45.553 20.0278C44.9054 19.9365 44.2788 19.9716 43.6924 20.1101C43.112 20.247 42.5035 20.0474 42.0816 19.626L40.186 17.7303C39.7681 17.3124 39.5705 16.7085 39.7069 16.1331C39.8449 15.5527 39.881 14.9337 39.7942 14.2936C39.4962 12.101 37.7285 10.3332 35.5358 10.0357C34.8957 9.94894 34.2767 9.98556 33.6968 10.123C33.1214 10.2595 32.518 10.0623 32.1001 9.64444L30.2922 7.83655C29.8653 7.40966 29.6677 6.79064 29.8157 6.20573C29.9406 5.71061 29.9922 5.18692 29.9541 4.64415C29.7775 2.12494 27.6712 0.0892953 25.1474 0.00301401C22.3092 -0.0943032 19.9781 2.17761 19.9781 4.99429C19.9781 5.37654 20.0217 5.74875 20.1035 6.10592C20.2369 6.68731 20.0784 7.29629 19.6565 7.71817L17.7303 9.64444C17.3124 10.0623 16.7084 10.2595 16.1336 10.123C15.5537 9.98506 14.9342 9.94843 14.2946 10.0357C12.1019 10.3332 10.3342 12.101 10.0362 14.2936C9.94941 14.9337 9.98602 15.5527 10.1235 16.1331C10.2599 16.7085 10.0628 17.3124 9.64441 17.7303L7.74874 19.626C7.32736 20.0474 6.71838 20.247 6.13799 20.1101C5.55157 19.9716 4.92502 19.9365 4.27741 20.0278C2.07072 20.3393 0.304967 22.1372 0.037595 24.3499C-0.354182 27.596 2.3717 30.3208 5.61829 29.9281C7.81445 29.6622 9.60529 27.9195 9.93235 25.7314C10.0272 25.0953 10.0006 24.4793 9.87315 23.8999C9.74624 23.3235 9.9479 22.7236 10.3648 22.3062L12.3517 20.3192C12.7676 19.9034 13.366 19.7439 13.9414 19.8668C14.3974 19.9641 14.876 19.9992 15.3691 19.9616C17.7945 19.7775 19.7785 17.7935 19.9631 15.3681C20.0007 14.8745 19.9656 14.3954 19.8677 13.9395C19.7448 13.3641 19.9044 12.7656 20.3202 12.3498L22.3398 10.3302C22.7572 9.91282 23.3571 9.75581 23.9345 9.87821C24.2691 9.94944 24.6157 9.98707 24.9719 9.98707C25.2994 9.98707 25.619 9.95446 25.928 9.89326C26.5019 9.77939 27.0958 9.93539 27.5092 10.3492L29.5097 12.3498C29.9255 12.7656 30.085 13.3641 29.9621 13.9395C29.8648 14.3954 29.8297 14.8745 29.8668 15.3681C30.0514 17.7935 32.0354 19.777 34.4608 19.9616C34.9539 19.9992 35.433 19.9641 35.8885 19.8668C36.4638 19.7439 37.0623 19.9034 37.4781 20.3192L39.4651 22.3062C39.8825 22.7236 40.0836 23.3235 39.9572 23.8999C39.8298 24.4788 39.8027 25.0953 39.898 25.7314C40.2246 27.9195 42.0154 29.6622 44.2116 29.9281C47.4582 30.3213 50.1836 27.5965 49.7923 24.3499C49.5254 22.1372 47.7592 20.3393 45.553 20.0278Z" fill="#3C72FC"/> <path d="M45.553 20.0278C44.9054 19.9365 44.2788 19.9716 43.6924 20.1101C43.112 20.247 42.5035 20.0474 42.0816 19.626L40.186 17.7303C39.7681 17.3124 39.5705 16.7085 39.7069 16.1331C39.8449 15.5527 39.881 14.9337 39.7942 14.2936C39.4962 12.101 37.7285 10.3332 35.5358 10.0357C34.8957 9.94894 34.2767 9.98556 33.6968 10.123C33.1214 10.2595 32.518 10.0623 32.1001 9.64444L30.2922 7.83655C29.8653 7.40966 29.6677 6.79064 29.8157 6.20573C29.9406 5.71061 29.9922 5.18692 29.9541 4.64415C29.7775 2.12494 27.6712 0.0892953 25.1474 0.00301401C22.3092 -0.0943032 19.9781 2.17761 19.9781 4.99429C19.9781 5.37654 20.0217 5.74875 20.1035 6.10592C20.2369 6.68731 20.0784 7.29629 19.6565 7.71817L17.7303 9.64444C17.3124 10.0623 16.7084 10.2595 16.1336 10.123C15.5537 9.98506 14.9342 9.94843 14.2946 10.0357C12.1019 10.3332 10.3342 12.101 10.0362 14.2936C9.94941 14.9337 9.98602 15.5527 10.1235 16.1331C10.2599 16.7085 10.0628 17.3124 9.64441 17.7303L7.74874 19.626C7.32736 20.0474 6.71838 20.247 6.13799 20.1101C5.55157 19.9716 4.92502 19.9365 4.27741 20.0278C2.07072 20.3393 0.304967 22.1372 0.037595 24.3499C-0.354182 27.596 2.3717 30.3208 5.61829 29.9281C7.81445 29.6622 9.60529 27.9195 9.93235 25.7314C10.0272 25.0953 10.0006 24.4793 9.87315 23.8999C9.74624 23.3235 9.9479 22.7236 10.3648 22.3062L12.3517 20.3192C12.7676 19.9034 13.366 19.7439 13.9414 19.8668C14.3974 19.9641 14.876 19.9992 15.3691 19.9616C17.7945 19.7775 19.7785 17.7935 19.9631 15.3681C20.0007 14.8745 19.9656 14.3954 19.8677 13.9395C19.7448 13.3641 19.9044 12.7656 20.3202 12.3498L22.3398 10.3302C22.7572 9.91282 23.3571 9.75581 23.9345 9.87821C24.2691 9.94944 24.6157 9.98707 24.9719 9.98707C25.2994 9.98707 25.619 9.95446 25.928 9.89326C26.5019 9.77939 27.0958 9.93539 27.5092 10.3492L29.5097 12.3498C29.9255 12.7656 30.085 13.3641 29.9621 13.9395C29.8648 14.3954 29.8297 14.8745 29.8668 15.3681C30.0514 17.7935 32.0354 19.777 34.4608 19.9616C34.9539 19.9992 35.433 19.9641 35.8885 19.8668C36.4638 19.7439 37.0623 19.9034 37.4781 20.3192L39.4651 22.3062C39.8825 22.7236 40.0836 23.3235 39.9572 23.8999C39.8298 24.4788 39.8027 25.0953 39.898 25.7314C40.2246 27.9195 42.0154 29.6622 44.2116 29.9281C47.4582 30.3213 50.1836 27.5965 49.7923 24.3499C49.5254 22.1372 47.7592 20.3393 45.553 20.0278Z" fill="#3779b9"/>
<path d="M19.7505 45.0058C19.7505 42.2473 21.9868 40.0115 24.7448 40.0115C27.5033 40.0115 29.7391 42.2478 29.7391 45.0058C29.7391 47.7642 27.5033 50 24.7448 50C21.9868 50 19.7505 47.7637 19.7505 45.0058Z" fill="#3C72FC"/> <path d="M19.7505 45.0058C19.7505 42.2473 21.9868 40.0115 24.7448 40.0115C27.5033 40.0115 29.7391 42.2478 29.7391 45.0058C29.7391 47.7642 27.5033 50 24.7448 50C21.9868 50 19.7505 47.7637 19.7505 45.0058Z" fill="#3779b9"/>
<path d="M35.3367 30.073C34.6896 29.9817 34.063 30.0169 33.4766 30.1553C32.8962 30.2923 32.2877 30.0926 31.8664 29.6712L30.0655 27.8704C29.6386 27.4435 29.4409 26.8244 29.5889 26.2395C29.7138 25.7444 29.7655 25.2207 29.7274 24.6779C29.5508 22.1587 27.4444 20.1231 24.9202 20.0368C22.0819 19.9395 19.7509 22.2114 19.7509 25.0281C19.7509 25.4103 19.7945 25.7826 19.8763 26.1402C20.0097 26.7216 19.8512 27.3301 19.4293 27.7525L17.51 29.6717C17.0887 30.0931 16.4797 30.2928 15.8998 30.1558C15.3134 30.0174 14.6873 29.9822 14.0397 30.0735C11.833 30.3851 10.0668 32.1824 9.7994 34.3951C9.40713 37.6417 12.133 40.3671 15.3801 39.9738C17.5763 39.7079 19.3671 37.9648 19.6937 35.7766C19.7885 35.1406 19.7614 34.5246 19.6345 33.9457C19.5076 33.3698 19.7092 32.7693 20.1261 32.3525L22.1126 30.366C22.5299 29.9486 23.1299 29.7916 23.7072 29.914C24.0418 29.9853 24.389 30.0229 24.7446 30.0229C25.0717 30.0229 25.3917 29.9903 25.7007 29.9291C26.2746 29.8157 26.8686 29.9712 27.2824 30.3851L29.2498 32.3525C29.6672 32.7698 29.8683 33.3698 29.7419 33.9462C29.6145 34.5251 29.5874 35.1416 29.6827 35.7776C30.0093 37.9658 31.8006 39.7085 33.9968 39.9743C37.2434 40.3676 39.9688 37.6427 39.577 34.3961C39.3096 32.1829 37.5434 30.3846 35.3367 30.073Z" fill="#3C72FC"/> <path d="M35.3367 30.073C34.6896 29.9817 34.063 30.0169 33.4766 30.1553C32.8962 30.2923 32.2877 30.0926 31.8664 29.6712L30.0655 27.8704C29.6386 27.4435 29.4409 26.8244 29.5889 26.2395C29.7138 25.7444 29.7655 25.2207 29.7274 24.6779C29.5508 22.1587 27.4444 20.1231 24.9202 20.0368C22.0819 19.9395 19.7509 22.2114 19.7509 25.0281C19.7509 25.4103 19.7945 25.7826 19.8763 26.1402C20.0097 26.7216 19.8512 27.3301 19.4293 27.7525L17.51 29.6717C17.0887 30.0931 16.4797 30.2928 15.8998 30.1558C15.3134 30.0174 14.6873 29.9822 14.0397 30.0735C11.833 30.3851 10.0668 32.1824 9.7994 34.3951C9.40713 37.6417 12.133 40.3671 15.3801 39.9738C17.5763 39.7079 19.3671 37.9648 19.6937 35.7766C19.7885 35.1406 19.7614 34.5246 19.6345 33.9457C19.5076 33.3698 19.7092 32.7693 20.1261 32.3525L22.1126 30.366C22.5299 29.9486 23.1299 29.7916 23.7072 29.914C24.0418 29.9853 24.389 30.0229 24.7446 30.0229C25.0717 30.0229 25.3917 29.9903 25.7007 29.9291C26.2746 29.8157 26.8686 29.9712 27.2824 30.3851L29.2498 32.3525C29.6672 32.7698 29.8683 33.3698 29.7419 33.9462C29.6145 34.5251 29.5874 35.1416 29.6827 35.7776C30.0093 37.9658 31.8006 39.7085 33.9968 39.9743C37.2434 40.3676 39.9688 37.6427 39.577 34.3961C39.3096 32.1829 37.5434 30.3846 35.3367 30.073Z" fill="#3779b9"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

2
public/assets/imgs/shapes/star.svg
View File

@ -1,3 +1,3 @@
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30 0L38.1027 21.8973L60 30L38.1027 38.1027L30 60L21.8973 38.1027L0 30L21.8973 21.8973L30 0Z" fill="#3c72fc"/> <path d="M30 0L38.1027 21.8973L60 30L38.1027 38.1027L30 60L21.8973 38.1027L0 30L21.8973 21.8973L30 0Z" fill="#3779b9"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 223 B

After

Width:  |  Height:  |  Size: 223 B

11
src/app/about-us/page.tsx
View File

@ -7,6 +7,7 @@ import Footer2 from "@/components/layout/Footer2";
import InnerBanner from "@/components/common/InnerBanner"; import InnerBanner from "@/components/common/InnerBanner";
import FeaturesSection from "@/components/home/home-2/FeaturesSection"; import FeaturesSection from "@/components/home/home-2/FeaturesSection";
import About2Section from "@/components/home/home-2/About2Section"; import About2Section from "@/components/home/home-2/About2Section";
import WhyChooseUs from "@/components/about/WhyChooseUs";
import ServiceTabSection from "@/components/home/home-2/ServiceTabSection"; import ServiceTabSection from "@/components/home/home-2/ServiceTabSection";
import WorkProcessSection from "@/components/home/home-2/WorkProcessSection"; import WorkProcessSection from "@/components/home/home-2/WorkProcessSection";
import TextSliderSection from "@/components/home/home-2/TextSliderSection"; import TextSliderSection from "@/components/home/home-2/TextSliderSection";
@ -42,14 +43,15 @@ export default function Home2() {
{/* <FeaturesSection /> */} {/* <FeaturesSection /> */}
<About2Section /> <About2Section />
<IconCounterSection /> <IconCounterSection />
<ServiceTabSection /> <HelpFormSection />
<OfferSection/> <WhyChooseUs />
{/* <ServiceTabSection /> */}
{/* <OfferSection/> */}
{/* <TextSliderSection /> */} {/* <TextSliderSection /> */}
<WorkProcessSection /> <WorkProcessSection />
<TestimonialsSection /> <TestimonialsSection />
<BrandSection /> <BrandSection />
{/* <FaqSection /> */}
<FaqSection />
{/* <ServiceTabSection /> */} {/* <ServiceTabSection /> */}
@ -57,7 +59,6 @@ export default function Home2() {
{/* <ProjectSlider2Section /> */} {/* <ProjectSlider2Section /> */}
{/* <TestimonialsSection /> */} {/* <TestimonialsSection /> */}
{/* <IconCounterSection /> */} {/* <IconCounterSection /> */}
<HelpFormSection />
{/* <Blog2Section /> */} {/* <Blog2Section /> */}
</main> </main>
<Footer1 /> <Footer1 />

6
src/app/contact/page.tsx
View File

@ -4,7 +4,8 @@ import React, { useEffect } from "react";
import Header1 from "@/components/layout/Header1"; import Header1 from "@/components/layout/Header1";
import Footer1 from "@/components/layout/Footer1"; import Footer1 from "@/components/layout/Footer1";
import InnerBanner from "@/components/common/InnerBanner"; import InnerBanner from "@/components/common/InnerBanner";
import HelpFormSection from "@/components/home/home-2/HelpFormSection"; import ContactSection from "@/components/contact/ContactSection";
import MapSection from "@/components/contact/MapSection";
export default function ContactPage() { export default function ContactPage() {
useEffect(() => { useEffect(() => {
@ -23,7 +24,8 @@ export default function ContactPage() {
<Header1 /> <Header1 />
<main> <main>
<InnerBanner title="Contact Us" /> <InnerBanner title="Contact Us" />
<HelpFormSection /> <ContactSection />
<MapSection />
</main> </main>
<Footer1 /> <Footer1 />
</> </>

31
src/app/faq/page.tsx Normal file
View File

@ -0,0 +1,31 @@
"use client";
import React, { useEffect } from "react";
import Header1 from "@/components/layout/Header1";
import Footer1 from "@/components/layout/Footer1";
import InnerBanner from "@/components/common/InnerBanner";
import FaqPageSection from "@/components/faq/FaqPageSection";
export default function FaqPage() {
useEffect(() => {
const init = () => {
if (typeof window !== "undefined" && (window as any).initMetatron && (window as any).jQuery) {
(window as any).initMetatron();
} else {
setTimeout(init, 100);
}
};
init();
}, []);
return (
<>
<Header1 />
<main>
<InnerBanner title="FAQ" />
<FaqPageSection />
</main>
<Footer1 />
</>
);
}

122
src/app/globals.css
View File

@ -21,8 +21,15 @@ body {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: #070d1a; background: #070d1a;
padding-top: 120px; padding-top: 80px;
padding-bottom: 200px; padding-bottom: 80px;
}
@media (max-width: 767px) {
.offer-area {
padding-top: 60px;
padding-bottom: 60px;
}
} }
.offer__shadow { .offer__shadow {
@ -81,7 +88,7 @@ body {
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2px;
color: #3c72fc; color: #3779b9;
margin: 0 0 12px; margin: 0 0 12px;
} }
@ -109,8 +116,8 @@ body {
} }
.btn-one:hover { .btn-one:hover {
background: #3c72fc; background: #3779b9;
border-color: #3c72fc; border-color: #3779b9;
} }
/* Offer grid */ /* Offer grid */
@ -191,7 +198,7 @@ body {
} }
.offer__item:hover .offer__icon { .offer__item:hover .offer__icon {
background: linear-gradient(160deg, #3c72fc 0%, #1a3fa8 100%); background: linear-gradient(160deg, #3779b9 0%, #1a3fa8 100%);
box-shadow: 0 0 28px rgba(60, 114, 252, 0.75); box-shadow: 0 0 28px rgba(60, 114, 252, 0.75);
transform: rotateY(360deg); transform: rotateY(360deg);
} }
@ -342,8 +349,15 @@ body {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
padding-top: 180px; padding-top: 80px;
padding-bottom: 180px; padding-bottom: 80px;
}
@media (max-width: 767px) {
.banner__inner-page {
padding-top: 60px;
padding-bottom: 60px;
}
} }
.banner__inner-page::before { .banner__inner-page::before {
@ -406,7 +420,7 @@ body {
} }
.banner__inner-page .breadcrumb-list a:hover { .banner__inner-page .breadcrumb-list a:hover {
color: #3c72fc; color: #3779b9;
} }
.banner__inner-page .breadcrumb-list span { .banner__inner-page .breadcrumb-list span {
@ -418,7 +432,7 @@ body {
.banner__inner-page .breadcrumb-list i { .banner__inner-page .breadcrumb-list i {
font-size: 13px; font-size: 13px;
color: #3c72fc; color: #3779b9;
} }
@keyframes swayX { @keyframes swayX {
@ -474,8 +488,8 @@ body {
@media (max-width: 768px) { @media (max-width: 768px) {
.banner__inner-page { .banner__inner-page {
padding-top: 120px; padding-top: 60px;
padding-bottom: 120px; padding-bottom: 60px;
} }
.banner__inner-page h2 { .banner__inner-page h2 {
@ -494,8 +508,8 @@ body {
/* --- CSS Variables (shared) --- */ /* --- CSS Variables (shared) --- */
:root { :root {
--getizy-base: #D33D35; --getizy-base: #3779b9;
--getizy-base-two: #FB8459; --getizy-base-two: #1a1f2b;
--getizy-secondary: #222230; --getizy-secondary: #222230;
--getizy-white: #FFFFFF; --getizy-white: #FFFFFF;
--getizy-white-rgb: 255, 255, 255; --getizy-white-rgb: 255, 255, 255;
@ -507,8 +521,8 @@ body {
position: relative; position: relative;
overflow: visible; overflow: visible;
background: #f5f0ec; background: #f5f0ec;
padding-top: 120px; padding-top: 80px;
padding-bottom: 120px; padding-bottom: 80px;
} }
/* --- Background shapes --- */ /* --- Background shapes --- */
@ -789,8 +803,8 @@ body {
} }
.fo-section { .fo-section {
padding-top: 80px; padding-top: 60px;
padding-bottom: 80px; padding-bottom: 60px;
} }
} }
@ -1140,7 +1154,7 @@ body {
} }
.about-one.section-space { .about-one.section-space {
padding-top: 120px; padding-top: 80px;
} }
/* dark texture bg */ /* dark texture bg */
@ -1219,7 +1233,7 @@ body {
left: 0px; left: 0px;
width: 120px; width: 120px;
height: 8px; height: 8px;
background: linear-gradient(90deg, var(--getizy-base, #D33D35) 0%, var(--getizy-base-two, #FB8459) 100%); background: linear-gradient(90deg, var(--getizy-base, #3779b9) 0%, var(--getizy-base-two, #FB8459) 100%);
z-index: 10; z-index: 10;
border-radius: 4px; border-radius: 4px;
} }
@ -1249,7 +1263,7 @@ body {
width: 950px; width: 950px;
height: 950px; height: 950px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(145deg, var(--getizy-base, #D33D35) 0%, var(--getizy-base-two, #FB8459) 100%); background: linear-gradient(145deg, var(--getizy-base, #3779b9) 0%, var(--getizy-base-two, #FB8459) 100%);
z-index: -1; z-index: -1;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2); box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
} }
@ -1406,7 +1420,7 @@ body {
padding: 20px 40px; padding: 20px 40px;
overflow: hidden; overflow: hidden;
z-index: 0; z-index: 0;
background: linear-gradient(145deg, var(--getizy-base, #D33D35) 0%, var(--getizy-base-two, #FB8459) 100%); background: linear-gradient(145deg, var(--getizy-base, #3779b9) 0%, var(--getizy-base-two, #FB8459) 100%);
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
transition: all 0.5s; transition: all 0.5s;
@ -1418,7 +1432,7 @@ body {
} }
.about-one__content .getizy-btn:hover { .about-one__content .getizy-btn:hover {
background: linear-gradient(145deg, var(--getizy-base, #D33D35) 0%, var(--getizy-base-two, #FB8459) 100%); background: linear-gradient(145deg, var(--getizy-base, #3779b9) 0%, var(--getizy-base-two, #FB8459) 100%);
} }
.btn-hover-cropping { .btn-hover-cropping {
@ -1514,7 +1528,7 @@ body {
.faq-two { .faq-two {
position: relative; position: relative;
background-color: #1b272a; background-color: #1b272a;
padding: 120px 0 289px; padding: 80px 0 289px;
clip-path: polygon(0 0, 100% 0, 100% 69%, 80% 100%, 20% 100%, 0% 69%); clip-path: polygon(0 0, 100% 0, 100% 69%, 80% 100%, 20% 100%, 0% 69%);
z-index: 1; z-index: 1;
} }
@ -1553,7 +1567,7 @@ body {
top: 5px; top: 5px;
bottom: 5px; bottom: 5px;
width: 2px; width: 2px;
background-color: var(--getizy-base, #D33D35); background-color: var(--getizy-base, #3779b9);
} }
.faq-two__content__text { .faq-two__content__text {
@ -1578,7 +1592,7 @@ body {
.faq-two__content__list li i { .faq-two__content__list li i {
font-size: 24px; font-size: 24px;
color: var(--getizy-base, #D33D35); color: var(--getizy-base, #3779b9);
} }
/* Accordion */ /* Accordion */
@ -1702,7 +1716,7 @@ body {
.video-three__btn { .video-three__btn {
width: 250px; width: 250px;
height: 250px; height: 250px;
background-color: var(--getizy-base, #D33D35); background-color: var(--getizy-base, #3779b9);
border: 8px solid #fff; border: 8px solid #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1777,7 +1791,7 @@ body {
═══════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════ */
.why-choose-three { .why-choose-three {
position: relative; position: relative;
padding: 120px 0; padding: 80px 0;
overflow: hidden; overflow: hidden;
background-color: #f7f8fc; background-color: #f7f8fc;
} }
@ -1841,7 +1855,7 @@ body {
border-radius: 10px; border-radius: 10px;
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;
color: #051d1f; color: #1a1f2b;
font-family: var(--getizy-heading, "Barlow", sans-serif); font-family: var(--getizy-heading, "Barlow", sans-serif);
counter-increment: count; counter-increment: count;
padding: 19px 30px; padding: 19px 30px;
@ -1864,13 +1878,13 @@ body {
content: ""; content: "";
border-radius: 10px; border-radius: 10px;
transition: all 500ms ease; transition: all 500ms ease;
background-color: var(--getizy-base, #D33D35); background-color: var(--getizy-base, #3779b9);
z-index: -1; z-index: -1;
} }
.why-choose-three__content__list li:hover::after { .why-choose-three__content__list li:hover::after {
width: 100%; width: 100%;
background-color: var(--getizy-base, #D33D35); background-color: var(--getizy-base, #3779b9);
} }
.why-choose-three__content__list__number::after { .why-choose-three__content__list__number::after {
@ -1879,7 +1893,7 @@ body {
font-weight: 700; font-weight: 700;
width: 32px; width: 32px;
height: 32px; height: 32px;
background-color: #051d1f; background-color: #1a1f2b;
color: #fff; color: #fff;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
@ -1890,12 +1904,12 @@ body {
.why-choose-three__content__list li:hover .why-choose-three__content__list__number::after { .why-choose-three__content__list li:hover .why-choose-three__content__list__number::after {
background-color: #fff; background-color: #fff;
color: #051d1f; color: #1a1f2b;
} }
.why-choose-three__content__list__icon { .why-choose-three__content__list__icon {
font-size: 40px; font-size: 40px;
color: var(--getizy-base, #D33D35); color: var(--getizy-base, #3779b9);
transition: all 500ms ease; transition: all 500ms ease;
} }
@ -1941,7 +1955,7 @@ body {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
color: var(--getizy-base, #D33D35); color: var(--getizy-base, #3779b9);
letter-spacing: 0.1em; letter-spacing: 0.1em;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1961,7 +1975,7 @@ body {
font-size: 45px; font-size: 45px;
font-weight: 700; font-weight: 700;
line-height: 1.1; line-height: 1.1;
color: #051d1f; color: #1a1f2b;
} }
@media (max-width: 1199px) { @media (max-width: 1199px) {
@ -1999,13 +2013,13 @@ body {
.contact-one { .contact-one {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding: 120px 0 0; padding: 80px 0 0;
background-color: #fff; background-color: #fff;
} }
.contact-one__info { .contact-one__info {
position: relative; position: relative;
background-color: var(--getizy-base, #D33D35); background-color: var(--getizy-base, #3779b9);
border-radius: 10px; border-radius: 10px;
padding: 58px 30px 40px 200px; padding: 58px 30px 40px 200px;
z-index: 2; z-index: 2;
@ -2061,7 +2075,7 @@ body {
height: 0px; height: 0px;
border-style: solid; border-style: solid;
border-width: 48px 0 48px 56px; border-width: 48px 0 48px 56px;
border-color: transparent transparent transparent var(--getizy-base, #D33D35); border-color: transparent transparent transparent var(--getizy-base, #3779b9);
} }
.contact-one__image { .contact-one__image {
@ -2097,7 +2111,7 @@ body {
.contact-one__wrapper { .contact-one__wrapper {
position: relative; position: relative;
z-index: 2; z-index: 2;
background-color: #051d1f; background-color: #1a1f2b;
border-radius: 10px; border-radius: 10px;
background-position: right bottom; background-position: right bottom;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -2111,7 +2125,7 @@ body {
width: 215px; width: 215px;
height: 100px; height: 100px;
content: ""; content: "";
background-color: var(--getizy-base, #D33D35); background-color: var(--getizy-base, #3779b9);
z-index: -1; z-index: -1;
border-radius: 0 0 0 10px; border-radius: 0 0 0 10px;
} }
@ -2139,7 +2153,7 @@ body {
height: 0px; height: 0px;
border-style: solid; border-style: solid;
border-width: 48px 56px 48px 0; border-width: 48px 56px 48px 0;
border-color: transparent var(--getizy-base, #D33D35) transparent transparent; border-color: transparent var(--getizy-base, #3779b9) transparent transparent;
z-index: 1; z-index: 1;
} }
@ -2196,12 +2210,12 @@ body {
.form-one__control input:focus, .form-one__control input:focus,
.form-one__control textarea:focus { .form-one__control textarea:focus {
border-color: var(--getizy-base, #D33D35); border-color: var(--getizy-base, #3779b9);
} }
.contact-one__form .tolak-btn { .contact-one__form .tolak-btn {
width: auto; width: auto;
background-color: var(--getizy-base, #D33D35); background-color: var(--getizy-base, #3779b9);
color: #fff; color: #fff;
border: none; border: none;
padding: 15px 40px; padding: 15px 40px;
@ -2213,7 +2227,7 @@ body {
.contact-one__form .tolak-btn:hover { .contact-one__form .tolak-btn:hover {
background-color: #fff; background-color: #fff;
color: #051d1f; color: #1a1f2b;
} }
@media (max-width: 991px) { @media (max-width: 991px) {
@ -2269,7 +2283,7 @@ body {
.service-three { .service-three {
position: relative; position: relative;
background-color: #ecf2fc; background-color: #ecf2fc;
padding: 120px 0; padding: 80px 0;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
} }
@ -2333,13 +2347,13 @@ body {
margin: 0 auto -22px; margin: 0 auto -22px;
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
font-size: 42px; font-size: 42px;
color: var(--getizy-base, #D33D35); color: var(--getizy-base, #3779b9);
transition: all 500ms ease; transition: all 500ms ease;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
} }
.service-three__item:hover .service-three__item__icon { .service-three__item:hover .service-three__item__icon {
background-color: var(--getizy-base, #D33D35); background-color: var(--getizy-base, #3779b9);
color: #fff; color: #fff;
} }
@ -2350,7 +2364,7 @@ body {
} }
.service-three__item__title a { .service-three__item__title a {
color: #051d1f; color: #1a1f2b;
transition: all 500ms ease; transition: all 500ms ease;
} }
@ -2366,7 +2380,7 @@ body {
} }
.service-three__item:hover .service-three__item__text { .service-three__item:hover .service-three__item__text {
color: rgba(255, 255, 255, 0.7); color: #fff !important;
} }
.service-three__item__image { .service-three__item__image {
@ -2401,13 +2415,13 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 16px; font-size: 16px;
color: var(--getizy-base, #D33D35); color: var(--getizy-base, #3779b9);
transition: all 500ms ease; transition: all 500ms ease;
z-index: 3; z-index: 3;
} }
.service-three__item:hover .service-three__item__rm { .service-three__item:hover .service-three__item__rm {
background-color: var(--getizy-base, #D33D35); background-color: var(--getizy-base, #3779b9);
color: #fff; color: #fff;
} }
@ -2422,7 +2436,7 @@ body {
═══════════════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════════════ */
.work-process-container-wrapper.style2 { .work-process-container-wrapper.style2 {
position: relative; position: relative;
padding: 120px 0; padding: 80px 0;
z-index: 1; z-index: 1;
} }
@ -2596,7 +2610,7 @@ body {
.process-card .text { .process-card .text {
font-size: 15px; font-size: 15px;
font-weight: 700; font-weight: 700;
color: #051d1f; color: #1a1f2b;
line-height: 1.1; line-height: 1.1;
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }

9
src/app/page.tsx
View File

@ -6,7 +6,7 @@ import Footer1 from "@/components/layout/Footer1";
import BannerSection from "@/components/home/home-1/BannerSection"; import BannerSection from "@/components/home/home-1/BannerSection";
import AboutSection from "@/components/home/home-1/AboutSection"; import AboutSection from "@/components/home/home-1/AboutSection";
import ServiceSliderSection from "@/components/home/home-1/ServiceSliderSection"; import ServiceThreeSlider from "@/components/home/home-1/ServiceThreeSlider";
import CtaSection from "@/components/home/home-1/CtaSection"; import CtaSection from "@/components/home/home-1/CtaSection";
import ChooseSection from "@/components/home/home-1/ChooseSection"; import ChooseSection from "@/components/home/home-1/ChooseSection";
import TestimonialsSection from "@/components/home/home-1/TestimonialsSection"; import TestimonialsSection from "@/components/home/home-1/TestimonialsSection";
@ -38,12 +38,11 @@ export default function MainPage() {
<AboutSection /> <AboutSection />
<ChooseSection /> <ChooseSection />
<IconCounterSection /> <IconCounterSection />
<ServiceSliderSection /> <ServiceThreeSlider />
<CtaSection /> <CtaSection />
<BrandSection /> <BrandSection />
<FaqVideoSection/> <TestimonialsSection />
<TestimonialsSection/> <ContactSection />
<ContactSection/>
<BlogSection /> <BlogSection />
</main> </main>

14
src/app/services/page.tsx
View File

@ -13,11 +13,15 @@ import ProjectsSection from "@/components/home/home-3/ProjectsSection";
import BrandsSection from "@/components/home/home-3/BrandsSection"; import BrandsSection from "@/components/home/home-3/BrandsSection";
import FaqSection from "@/components/home/home-3/FaqSection"; import FaqSection from "@/components/home/home-3/FaqSection";
import BlogSection from "@/components/home/home-3/BlogSection"; import BlogSection from "@/components/home/home-3/BlogSection";
import FeaturesSection from "@/components/home/home-2/FeaturesSection"; import FeaturesSection from "@/components/home/home-1/FeaturesSection";
import FeaturesSection2 from "@/components/home/home-2/FeaturesSection";
import CtaSection from "@/components/home/home-1/CtaSection"; import CtaSection from "@/components/home/home-1/CtaSection";
import Footer1 from "@/components/layout/Footer1"; import Footer1 from "@/components/layout/Footer1";
import Header1 from "@/components/layout/Header1"; import Header1 from "@/components/layout/Header1";
import WorkProcessSection from "@/components/home/home-2/WorkProcessSection"; import WorkProcessSection from "@/components/home/home-2/WorkProcessSection";
import ServiceSection2 from "@/components/careers/ServiceSection";
import WorkProcessSection2 from "@/components/careers/WorkProcessSection";
import AboutService from "@/components/services/AboutService";
export default function Home3() { export default function Home3() {
useEffect(() => { useEffect(() => {
@ -39,11 +43,15 @@ export default function Home3() {
<FeaturesSection /> <FeaturesSection />
<ChooseSection /> <ChooseSection />
{/* <HelpFormSection /> */} {/* <HelpFormSection /> */}
<ServiceSection /> {/* <ServiceSection /> */}
<ServiceSection2 />
<WorkProcessSection /> <WorkProcessSection />
<FeaturesSection2 />
<AboutService />
{/* <ProjectsSection /> */} {/* <ProjectsSection /> */}
{/* <BrandsSection /> */} {/* <BrandsSection /> */}
<FaqSection /> {/* <FaqSection /> */}
<WorkProcessSection2 />
{/* <BlogSection /> */} {/* <BlogSection /> */}
{/* <CtaSection/> */} {/* <CtaSection/> */}
</main> </main>

234
src/components/about/WhyChooseUs.tsx Normal file
View File

@ -0,0 +1,234 @@
import React from "react";
const WhyChooseUs = () => {
return (
<section className="why-choose-us section-space">
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6">
<div className="content-area pr-50">
<div className="section-title-wrapper mb-30">
<span className="section-subtitle">
<i className="fa-solid fa-play rotate-triangle"></i> WHY CHOOSE US
</span>
<h2 className="section-title">
Consulting Solutions For Your Business Development.
</h2>
<p className="section-desc">
Business tailored design, management & support services Business business agency elit,
sed do eiusmod tempor majority have in some we form, by injected humour solution.
</p>
</div>
<div className="feature-list mb-40">
<div className="feature-item d-flex align-items-center mb-30">
<div className="feature-icon">
<i className="fa-solid fa-handshake-angle"></i>
</div>
<div className="feature-content">
<h4>We Are Improve Choose Business.</h4>
<p>Market research branding of engagement.</p>
</div>
</div>
<div className="feature-item d-flex align-items-center mb-0 border-top-line">
<div className="feature-icon">
<i className="fa-solid fa-lightbulb"></i>
</div>
<div className="feature-content">
<h4>Business Consulting This Network.</h4>
<p>Business tailored design, management & off support.</p>
</div>
</div>
</div>
<div className="bottom-note">
<div className="note-item">
<i className="fa-solid fa-circle-arrow-right"></i>
<span>We are business many variations of passages of this business magical solution.</span>
</div>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="image-area-wrapper p-relative">
<div className="main-image">
<img src="/assets/img/about/about-img8.png" alt="Business Meeting" />
</div>
<div className="circular-image">
<div className="inner-circle">
<img src="/assets/img/about/about-img10.png" alt="Profile" />
</div>
</div>
</div>
</div>
</div>
</div>
<style jsx>{`
.why-choose-us {
padding: 80px 0;
background: #fff;
}
@media (max-width: 767px) {
.why-choose-us {
padding: 60px 0;
}
}
.section-subtitle {
color: #3779b9;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.rotate-triangle {
font-size: 14px;
transform: rotate(-30deg);
margin-top: -2px;
}
.section-title {
font-size: 44px;
font-weight: 800;
color: #1a1a1a;
line-height: 1.2;
margin-bottom: 25px;
}
.section-desc {
font-size: 16px;
color: #666;
line-height: 1.7;
margin-bottom: 35px;
}
.feature-item {
padding: 25px 0;
}
.border-top-line {
border-top: 1px solid #eee;
}
.feature-icon {
width: 70px;
height: 70px;
background: #3779b9;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
flex-shrink: 0;
color: #fff;
font-size: 28px;
}
.feature-content h4 {
font-size: 22px;
font-weight: 700;
margin-bottom: 8px;
color: #1a1a1a;
}
.feature-content p {
font-size: 15px;
color: #666;
margin: 0;
}
.bottom-note {
padding-top: 30px;
border-top: 1px solid #eee;
}
.note-item {
display: flex;
align-items: flex-start;
gap: 15px;
}
.note-item i {
color: #1a1a1a;
font-size: 18px;
margin-top: 3px;
}
.note-item span {
font-size: 16px;
color: #444;
font-weight: 500;
line-height: 1.5;
}
.image-area-wrapper {
padding-left: 20px;
}
.main-image {
width: 100%;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}
.main-image img {
width: 100%;
display: block;
}
.circular-image {
position: absolute;
top: 50%;
left: -80px;
transform: translateY(-50%);
width: 280px;
height: 280px;
background: #fff;
padding: 10px;
border-radius: 50%;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
z-index: 2;
}
.inner-circle {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
border: 2px solid #fff;
}
.inner-circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1199px) {
.circular-image {
width: 220px;
height: 220px;
left: -50px;
}
.section-title {
font-size: 36px;
}
}
@media (max-width: 991px) {
.content-area {
padding-right: 0;
margin-bottom: 60px;
}
.image-area-wrapper {
padding-left: 0;
}
.circular-image {
width: 200px;
height: 200px;
left: -30px;
}
}
@media (max-width: 575px) {
.circular-image {
position: relative;
top: 0;
left: 0;
transform: none;
margin: -60px auto 0;
}
}
`}</style>
</section>
);
};
export default WhyChooseUs;

2
src/components/careers/AboutOneSection.tsx
View File

@ -74,7 +74,7 @@ const AboutOneSection = () => {
height={50} height={50}
/> />
</div> </div>
<div className="about-one__orange-bar"></div> {/* <div className="about-one__orange-bar"></div> */}
</div> </div>
</div> </div>
<div className="col-lg-5 position-relative"> <div className="col-lg-5 position-relative">

8
src/components/careers/FaqVideoSection.tsx
View File

@ -92,19 +92,19 @@ const FaqVideoSection = () => {
</p> </p>
<ul className="faq-two__content__list"> <ul className="faq-two__content__list">
<li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}> <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
<div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#D33D35", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div> <div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#3779b9", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
You solution business will be fully satisfied you are under. You solution business will be fully satisfied you are under.
</li> </li>
<li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}> <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
<div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#D33D35", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div> <div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#3779b9", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
You solution business will be fully satisfied you are under. You solution business will be fully satisfied you are under.
</li> </li>
<li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}> <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
<div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#D33D35", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div> <div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#3779b9", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
You solution business will be fully satisfied you are under. You solution business will be fully satisfied you are under.
</li> </li>
<li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}> <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
<div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#D33D35", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div> <div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#3779b9", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
You solution business will be fully satisfied you are under. You solution business will be fully satisfied you are under.
</li> </li>
<li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700" }}> <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700" }}>

4
src/components/careers/ServiceSection.tsx
View File

@ -3,7 +3,7 @@
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef } from "react";
import Link from "next/link"; import Link from "next/link";
const ServiceSection = () => { const ServiceSection2 = () => {
const sectionRef = useRef<HTMLDivElement>(null); const sectionRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
@ -141,4 +141,4 @@ const ServiceSection = () => {
); );
}; };
export default ServiceSection; export default ServiceSection2;

4
src/components/careers/WorkProcessSection.tsx
View File

@ -2,7 +2,7 @@
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef } from "react";
const WorkProcessSection = () => { const WorkProcessSection2 = () => {
const sectionRef = useRef<HTMLDivElement>(null); const sectionRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
@ -124,4 +124,4 @@ const WorkProcessSection = () => {
); );
}; };
export default WorkProcessSection; export default WorkProcessSection2;

192
src/components/common/InnerBanner.tsx
View File

@ -3,31 +3,31 @@ import React, { useEffect } from "react";
import Link from "next/link"; import Link from "next/link";
interface InnerBannerProps { interface InnerBannerProps {
title: string; title: string;
breadcrumb?: string; // overrides title in breadcrumb if different breadcrumb?: string; // overrides title in breadcrumb if different
bgImage?: string; // optional custom background, defaults to hero-bg1 bgImage?: string; // optional custom background, defaults to hero-bg1
} }
const InnerBanner = ({ const InnerBanner = ({
title, title,
breadcrumb, breadcrumb,
bgImage = "/assets/img/bg/hero-bg1.png", bgImage = "/assets/img/bg/hero-bg1.png",
}: InnerBannerProps) => { }: InnerBannerProps) => {
const crumb = breadcrumb ?? title; const crumb = breadcrumb ?? title;
useEffect(() => { useEffect(() => {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
// @ts-ignore // @ts-ignore
if (window.WOW) { if (window.WOW) {
// @ts-ignore // @ts-ignore
new window.WOW({ live: false }).init(); new window.WOW({ live: false }).init();
} }
} }
}, []); }, []);
return ( return (
<> <>
<style>{` <style>{`
/* ── Inner Banner ─────────────────────────────────────────── */ /* ── Inner Banner ─────────────────────────────────────────── */
.banner__inner-page { .banner__inner-page {
position: relative; position: relative;
@ -37,8 +37,8 @@ const InnerBanner = ({
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
padding-top: 180px; padding-top: 120px;
padding-bottom: 180px; padding-bottom: 120px;
} }
/* dark gradient overlay */ /* dark gradient overlay */
@ -49,7 +49,7 @@ const InnerBanner = ({
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: linear-gradient(270.07deg, #002b98 0.07%, #00060c 99.95%); background: linear-gradient(270.07deg, #3779b9 0.07%, #1a1f2b 99.95%);
z-index: -1; z-index: -1;
opacity: 0.82; opacity: 0.82;
} }
@ -103,7 +103,7 @@ const InnerBanner = ({
transition: color 0.3s; transition: color 0.3s;
} }
.banner__inner-page .breadcrumb-list a:hover { .banner__inner-page .breadcrumb-list a:hover {
color: #3c72fc; color: #3779b9;
} }
.banner__inner-page .breadcrumb-list span { .banner__inner-page .breadcrumb-list span {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
@ -113,7 +113,7 @@ const InnerBanner = ({
} }
.banner__inner-page .breadcrumb-list i { .banner__inner-page .breadcrumb-list i {
font-size: 13px; font-size: 13px;
color: #3c72fc; color: #3779b9;
} }
/* ── sway animation for shape3 ─── */ /* ── sway animation for shape3 ─── */
@ -145,87 +145,87 @@ const InnerBanner = ({
.wow.fadeInUp { animation: _fadeInUp 1s ease both; } .wow.fadeInUp { animation: _fadeInUp 1s ease both; }
@media (max-width: 768px) { @media (max-width: 768px) {
.banner__inner-page { padding-top: 120px; padding-bottom: 120px; } .banner__inner-page { padding-top: 60px; padding-bottom: 60px; }
.banner__inner-page h2 { font-size: 28px; line-height: 36px; } .banner__inner-page h2 { font-size: 28px; line-height: 36px; }
.banner__inner-page .ib-shape3 { display: none; } .banner__inner-page .ib-shape3 { display: none; }
} }
`}</style> `}</style>
<section <section
className="banner__inner-page" className="banner__inner-page"
style={{ backgroundImage: `url(${bgImage})` }} style={{ backgroundImage: `url(${bgImage})` }}
> >
{/* shape2 – bottom-left large */} {/* shape2 – bottom-left large */}
<div <div
className="ib-shape2 wow slideInLeft" className="ib-shape2 wow slideInLeft"
data-wow-delay="0ms" data-wow-delay="0ms"
data-wow-duration="1500ms" data-wow-duration="1500ms"
> >
<img <img
src="/assets/img/elements/elements16.png" src="/assets/img/elements/elements16.png"
alt="shape" alt="shape"
width={169} width={169}
height={266} height={266}
style={{ color: "transparent" }} style={{ color: "transparent" }}
/> />
</div> </div>
{/* shape1 – bottom-left small (layered above shape2) */} {/* shape1 – bottom-left small (layered above shape2) */}
<div <div
className="ib-shape1 wow slideInLeft" className="ib-shape1 wow slideInLeft"
data-wow-delay="200ms" data-wow-delay="200ms"
data-wow-duration="1500ms" data-wow-duration="1500ms"
> >
<img <img
src="/assets/img/elements/elements8.png" src="/assets/img/elements/elements8.png"
alt="shape" alt="shape"
width={188} width={188}
height={231} height={231}
style={{ color: "transparent", opacity: 0.6 }} style={{ color: "transparent", opacity: 0.6 }}
/> />
</div> </div>
{/* shape3 – right side with sway */} {/* shape3 – right side with sway */}
<div <div
className="ib-shape3 wow slideInRight" className="ib-shape3 wow slideInRight"
data-wow-delay="200ms" data-wow-delay="200ms"
data-wow-duration="1500ms" data-wow-duration="1500ms"
> >
<img <img
src="/assets/img/elements/elements9.png" src="/assets/img/elements/elements9.png"
alt="shape" alt="shape"
width={535} width={535}
height={450} height={450}
className="sway__animationX" className="sway__animationX"
style={{ color: "transparent", opacity: 0.5 }} style={{ color: "transparent", opacity: 0.5 }}
/> />
</div> </div>
{/* text content */} {/* text content */}
<div className="ib-container"> <div className="ib-container">
<h2 <h2
className="wow fadeInUp" className="wow fadeInUp"
data-wow-delay="0ms" data-wow-delay="0ms"
data-wow-duration="1500ms" data-wow-duration="1500ms"
> >
{title} {title}
</h2> </h2>
<div <div
className="breadcrumb-list wow fadeInUp" className="breadcrumb-list wow fadeInUp"
data-wow-delay="200ms" data-wow-delay="200ms"
data-wow-duration="1500ms" data-wow-duration="1500ms"
> >
<Link href="/">Home</Link> <Link href="/">Home</Link>
<span> <span>
<i className="fa-regular fa-angles-right mx-2" /> <i className="fa-solid fa-angles-right mx-2" />
{crumb} {crumb}
</span> </span>
</div> </div>
</div> </div>
</section> </section>
</> </>
); );
}; };
export default InnerBanner; export default InnerBanner;

10
src/components/common/Offcanvas.tsx
View File

@ -7,7 +7,7 @@ const Offcanvas = () => {
(window as any).jQuery('#mobile-menu').meanmenu({ (window as any).jQuery('#mobile-menu').meanmenu({
meanMenuContainer: '.mobile-menu', meanMenuContainer: '.mobile-menu',
meanScreenWidth: "1199", meanScreenWidth: "1199",
meanExpand: ['<i class="far fa-plus"></i>'], meanExpand: ['<i class="fa-solid fa-plus"></i>'],
}); });
} }
}, []); }, []);
@ -28,7 +28,7 @@ const Offcanvas = () => {
<a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="Header Logo" /></a> <a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="Header Logo" /></a>
</div> </div>
<div className="offcanvas__close"> <div className="offcanvas__close">
<button onClick={closeOffcanvas}><i className="fal fa-times"></i></button> <button onClick={closeOffcanvas}><i className="fa-solid fa-xmark"></i></button>
</div> </div>
</div> </div>
<div className="offcanvas__search mb-25"> <div className="offcanvas__search mb-25">
@ -40,7 +40,7 @@ const Offcanvas = () => {
<ul> <ul>
<li className="d-flex align-items-center"> <li className="d-flex align-items-center">
<div className="offcanvas__contact-icon mr-15"> <div className="offcanvas__contact-icon mr-15">
<i className="fal fa-map-marker-alt"></i> <i className="fa-solid fa-location-dot"></i>
</div> </div>
<div className="offcanvas__contact-text"> <div className="offcanvas__contact-text">
<a target="_blank" href="#">31 Park End St, Brockhampton, UK</a> <a target="_blank" href="#">31 Park End St, Brockhampton, UK</a>
@ -48,7 +48,7 @@ const Offcanvas = () => {
</li> </li>
<li className="d-flex align-items-center"> <li className="d-flex align-items-center">
<div className="offcanvas__contact-icon mr-15"> <div className="offcanvas__contact-icon mr-15">
<i className="far fa-phone"></i> <i className="fa-solid fa-phone"></i>
</div> </div>
<div className="offcanvas__contact-text"> <div className="offcanvas__contact-text">
<a href="tel:+00112233665">+00112233665</a> <a href="tel:+00112233665">+00112233665</a>
@ -56,7 +56,7 @@ const Offcanvas = () => {
</li> </li>
<li className="d-flex align-items-center"> <li className="d-flex align-items-center">
<div className="offcanvas__contact-icon mr-15"> <div className="offcanvas__contact-icon mr-15">
<i className="fal fa-envelope"></i> <i className="fa-solid fa-envelope"></i>
</div> </div>
<div className="offcanvas__contact-text"> <div className="offcanvas__contact-text">
<a href="mailto:support@example.com">support@example.com</a> <a href="mailto:support@example.com">support@example.com</a>

217
src/components/contact/ContactSection.tsx Normal file
View File

@ -0,0 +1,217 @@
import React from "react";
const ContactSection = () => {
return (
<section className="contact-area section-space">
<div className="container">
<div className="row">
<div className="col-lg-5 col-md-12">
<div className="contact-info-wrapper">
<div className="section-title-wrapper mb-40">
<span className="section-subtitle">
<span className="dash"></span> Contact With Us
</span>
<h1 className="section-title">Feel Free to Get in Touch</h1>
</div>
<div className="contact-info-list">
<div className="contact-info-item d-flex align-items-center mb-30">
<div className="icon">
<i className="fa-solid fa-phone-volume"></i>
</div>
<div className="content">
<span>Call Anytime</span>
<h6><a href="tel:+8898006802">+ 88 ( 9800 ) 6802</a></h6>
</div>
</div>
<div className="contact-info-item d-flex align-items-center mb-30">
<div className="icon">
<i className="fa-solid fa-envelope"></i>
</div>
<div className="content">
<span>Send Email</span>
<h6><a href="mailto:needhelp@company.com">needhelp@company.com</a></h6>
</div>
</div>
<div className="contact-info-item d-flex align-items-center">
<div className="icon">
<i className="fa-solid fa-location-dot"></i>
</div>
<div className="content">
<span>Visit Now</span>
<h6>88 Broklyn Golden Street. New York, USA</h6>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-7 col-md-12">
<div className="contact-form-wrapper bg-color-light p-relative">
<form action="#" className="contact-form">
<div className="row">
<div className="col-md-6 mb-20">
<input type="text" placeholder="Your Name" required />
</div>
<div className="col-md-6 mb-20">
<input type="email" placeholder="Email Address" required />
</div>
<div className="col-md-6 mb-20">
<input type="tel" placeholder="Phone Number" required />
</div>
<div className="col-md-6 mb-20">
<input type="text" placeholder="Subject" required />
</div>
<div className="col-md-12 mb-20">
<textarea placeholder="Write a Message" rows={4} required></textarea>
</div>
<div className="col-md-12">
<button type="submit" className="primary-btn-1 w-100">
SEND A MESSAGE
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<style jsx>{`
.contact-area {
padding: 80px 0;
background: #fff;
}
@media (max-width: 767px) {
.contact-area {
padding: 60px 0;
}
}
.section-subtitle {
color: #6366f1;
font-weight: 600;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
}
.section-subtitle .dash {
width: 25px;
height: 2px;
background: #6366f1;
display: inline-block;
}
.section-title {
font-size: 52px;
font-weight: 800;
color: #0f172a;
line-height: 1.1;
margin-bottom: 45px;
}
.contact-info-item .icon {
width: 75px;
height: 75px;
background: #fff;
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
color: #6366f1;
font-size: 28px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
}
.contact-info-item:hover .icon {
background: #6366f1;
color: #fff;
transform: scale(1.1) rotate(10deg);
box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
}
.contact-info-item .content span {
display: block;
font-size: 13px;
color: #64748b;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
.contact-info-item .content h6 {
font-size: 22px;
font-weight: 700;
margin: 0;
color: #1e293b;
}
.contact-info-item .content h6 a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-info-item .content h6 a:hover {
color: #6366f1;
}
.contact-form-wrapper {
background: #f8fafc;
padding: 60px;
border-radius: 24px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03);
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 18px 25px;
border: 1px solid #e2e8f0;
background: #fff;
border-radius: 12px;
outline: none;
transition: all 0.3s ease;
font-size: 15px;
color: #1e293b;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #6366f1;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.primary-btn-1 {
background: #6366f1;
color: #fff;
padding: 20px 30px;
border: none;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 15px;
margin-top: 10px;
box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
}
.primary-btn-1:hover {
background: #4f46e5;
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
}
@media (max-width: 991px) {
.contact-form-wrapper {
margin-top: 60px;
padding: 40px;
}
.section-title {
font-size: 36px;
}
}
@media (max-width: 575px) {
.contact-form-wrapper {
padding: 25px;
}
}
`}</style>
</section>
);
};
export default ContactSection;

43
src/components/contact/MapSection.tsx Normal file
View File

@ -0,0 +1,43 @@
import React from "react";
const MapSection = () => {
return (
<section className="map-area">
<div className="container-fluid p-0">
<div className="map-wrapper">
<iframe
title="Google Map"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d158858.1106774136!2d-0.2416812035308924!3d51.5287718408761!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sin!4v1700000000000!5m2!1sen!2sin"
width="100%"
height="500"
style={{ border: 0 }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
></iframe>
</div>
</div>
<style jsx>{`
.map-area {
margin-bottom: -10px; /* Adjust as needed to align with footer */
}
.map-wrapper {
height: 500px;
width: 100%;
overflow: hidden;
border: none;
}
iframe {
display: block;
width: 100%;
height: 100%;
border: none;
background: transparent;
filter: grayscale(1); /* Optional: Adjust to match the design */
}
`}</style>
</section>
);
};
export default MapSection;

274
src/components/faq/FaqPageSection.tsx Normal file
View File

@ -0,0 +1,274 @@
"use client";
import React, { useState } from "react";
const faqData = [
{
category: "General Inquiries",
items: [
{ id: 1, question: "What is Metatron Cube Software Solutions?", answer: "Metatron Cube is a premier IT consulting and software development agency specializing in tailored business solutions, digital transformation, and high-performance technology management." },
{ id: 2, question: "How can I start a project with you?", answer: "Starting a project is simple. You can reach out through our contact form, email us directly, or schedule a free discovery call to discuss your business requirements." },
{ id: 3, question: "Where is your company located?", answer: "We are headquartered in a modern tech hub, serving clients globally with our distributed team of expert developers and consultants." },
{ id: 4, question: "Do you offer free consultations?", answer: "Yes, we provide a complimentary initial consultation to understand your needs and determine how our solutions can best drive your business growth." },
{ id: 5, question: "What industries do you specialize in?", answer: "We have extensive experience in Fintech, Healthcare, E-commerce, Logistics, and Enterprise Resource Planning (ERP) sectors." }
]
},
{
category: "Services & Solutions",
items: [
{ id: 6, question: "What software development services do you provide?", answer: "We offer full-cycle development including web applications, mobile apps (iOS/Android), custom ERP systems, and API integrations." },
{ id: 7, question: "Do you provide UI/UX design services?", answer: "Absolutely. Our design team focuses on creating user-centric, intuitive, and visually stunning interfaces that enhance user engagement and brand value." },
{ id: 8, question: "Can you help migrate our legacy system to the cloud?", answer: "Yes, we specialize in cloud migration strategies for AWS, Azure, and Google Cloud, ensuring zero data loss and minimal downtime." },
{ id: 9, question: "Do you offer dedicated developer teams?", answer: "Yes, we provide staff augmentation and dedicated teams that integrate seamlessly with your in-house workflow to accelerate development." },
{ id: 10, question: "What is your typical development methodology?", answer: "We primarily follow Agile and Scrum methodologies to ensure transparency, flexibility, and rapid delivery of high-quality software." }
]
},
{
category: "Support & Maintenance",
items: [
{ id: 11, question: "How do you handle software security?", answer: "Security is built into our dev process. We perform regular code audits, penetration testing, and follow industry standard compliance like GDPR or HIPAA where applicable." },
{ id: 12, question: "Do you provide 24/7 technical support?", answer: "We offer various support tiers, including 24/7 critical incident response and proactive system monitoring to ensure your operations never stop." },
{ id: 13, question: "What happens after the project is launched?", answer: "After launch, we provide a warranty period followed by optional maintenance packages to handle updates, scaling, and feature enhancements." },
{ id: 14, question: "How do you manage data backups?", answer: "We implement automated daily backups with redundant storage across different geographic locations to ensure data recoverability under any circumstances." },
{ id: 15, question: "Can you provide training for our staff?", answer: "Yes, we provide comprehensive documentation and training sessions to ensure your team is fully equipped to manage the new system efficiently." }
]
},
{
category: "Consulting & Strategy",
items: [
{ id: 16, question: "How do you help businesses with digital transformation?", answer: "We analyze your current processes, identify bottlenecks, and implement digital solutions that automate workflows and improve overall efficiency." },
{ id: 17, question: "Do you provide IT infrastructure consulting?", answer: "Yes, we advise on server architecture, network security, and infrastructure scaling to support your business's future growth." },
{ id: 18, question: "How do you measure project success?", answer: "We define clear KPIs at the start, such as performance metrics, user adoption rates, and ROI, and track them throughout the lifecycle." },
{ id: 19, question: "Can you help us with technology stack selection?", answer: "Our consultants evaluate your project needs to recommend the most scalable, cost-effective, and future-proof tech stack (e.g., React, Node.js, Python)." },
{ id: 20, question: "Do you work with startups?", answer: "Yes, we love working with startups to build MVPs (Minimum Viable Products) quickly and efficiently to help them secure funding and market traction." }
]
}
];
const FaqPageSection = () => {
const [activeId, setActiveId] = useState<number | null>(1);
const toggleAccordion = (id: number) => {
setActiveId(activeId === id ? null : id);
};
return (
<section className="faq-page-section section-space">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-8">
<div className="section-title-wrapper text-center mb-60">
<span className="section-subtitle">
<i className="fa-solid fa-circle-question"></i> HELP KNOWLEDGE BASE
</span>
<h2 className="section-title">Frequently Asked Questions</h2>
<p className="section-desc">
Find answers to common questions about our services, processes, and how we can help your business thrive in the digital age.
</p>
</div>
</div>
</div>
<div className="faq-content-wrapper">
{faqData.map((category, catIndex) => (
<div key={catIndex} className="faq-category-block mb-50">
<h3 className="category-header">
<span className="category-count">0{catIndex + 1}</span> {category.category}
</h3>
<div className="accordion-custom">
{category.items.map((faq) => (
<div
key={faq.id}
className={`faq-item ${activeId === faq.id ? "active" : ""}`}
>
<button
className="faq-question"
onClick={() => toggleAccordion(faq.id)}
aria-expanded={activeId === faq.id}
>
<span className="question-text">{faq.question}</span>
<span className="faq-icon">
{activeId === faq.id ? <i className="fa-solid fa-minus"></i> : <i className="fa-solid fa-plus"></i>}
</span>
</button>
<div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
<div className="answer-inner">
{faq.answer}
</div>
</div>
</div>
))}
</div>
</div>
))}
</div>
<div className="faq-cta text-center mt-80">
<div className="cta-box">
<h3>Still have questions?</h3>
<p>If you couldn't find the answer you were looking for, feel free to contact us. Our team is ready to help you!</p>
<a href="/contact" className="primary-btn-1 mt-20">
Contact Support &nbsp; | <i className="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<style jsx>{`
.faq-page-section {
background: #f8fafc;
padding: 80px 0;
}
@media (max-width: 767px) {
.faq-page-section {
padding: 60px 0;
}
}
.section-subtitle {
color: #3779b9;
font-weight: 700;
margin-bottom: 15px;
display: inline-flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.section-title {
font-size: 48px;
font-weight: 800;
color: #0f172a;
margin-bottom: 20px;
}
.section-desc {
color: #64748b;
max-width: 700px;
margin: 0 auto;
font-size: 16px;
}
.faq-content-wrapper {
max-width: 900px;
margin: 0 auto;
}
.category-header {
font-size: 24px;
font-weight: 700;
color: #0f172a;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 15px;
padding-bottom: 15px;
border-bottom: 2px solid #e2e8f0;
}
.category-count {
color: #3779b9;
font-size: 14px;
background: rgba(60, 114, 252, 0.1);
padding: 4px 10px;
border-radius: 4px;
}
.accordion-custom {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: #fff;
border-radius: 12px;
border: 1px solid #e2e8f0;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item.active {
border-color: #3779b9;
box-shadow: 0 10px 30px rgba(60, 114, 252, 0.08);
}
.faq-question {
width: 100%;
padding: 22px 30px;
display: flex;
justify-content: space-between;
align-items: center;
background: none;
border: none;
text-align: left;
cursor: pointer;
outline: none;
}
.question-text {
font-size: 18px;
font-weight: 700;
color: #1e293b;
transition: all 0.3s ease;
}
.faq-item:hover .question-text {
color: #3779b9;
}
.faq-item.active .question-text {
color: #3779b9;
}
.faq-icon {
width: 32px;
height: 32px;
background: #f1f5f9;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #64748b;
transition: all 0.3s ease;
}
.faq-item.active .faq-icon {
background: #3779b9;
color: #fff;
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer.show {
max-height: 500px;
}
.answer-inner {
padding: 0 30px 25px;
color: #64748b;
line-height: 1.7;
font-size: 16px;
}
@media (max-width: 991px) {
.section-title {
font-size: 36px;
}
.faq-question {
padding: 18px 20px;
}
.question-text {
font-size: 16px;
padding-right: 15px;
}
}
.faq-cta {
padding-top: 60px;
border-top: 1px solid #e2e8f0;
}
.cta-box h3 {
font-size: 32px;
font-weight: 800;
color: #0f172a;
margin-bottom: 15px;
}
.cta-box p {
color: #64748b;
font-size: 18px;
margin-bottom: 30px;
}
`}</style>
</section>
);
};
export default FaqPageSection;

28
src/components/home/OfferSection.tsx
View File

@ -4,22 +4,22 @@ import React, { useEffect } from "react";
// ── inline SVG icons ──────────────────────────────────────────────────────── // ── inline SVG icons ────────────────────────────────────────────────────────
const IconWebsite = () => ( const IconWebsite = () => (
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 0C10.3961 0 0 5.74724 0 18C0 29.9409 9.99921 36 18 36C31.7268 36 36 23.974 36 18C36 9.18425 29.2535 0 18 0ZM13.826 1.6937C11.948 3.29528 10.389 5.94567 9.38268 9.23386C8.07874 8.46142 6.8811 7.50472 5.81811 6.39213C8.01496 4.08898 10.7929 2.47323 13.826 1.6937ZM5.04567 7.25669C6.23622 8.49685 7.58976 9.55276 9.06378 10.389C8.51102 12.5362 8.18504 14.9173 8.14252 17.4189H1.17638C1.30394 13.6843 2.66457 10.1197 5.04567 7.25669ZM5.04567 28.7433C2.65748 25.8803 1.30394 22.3158 1.17638 18.5811H8.14252C8.18504 21.0898 8.51102 23.4638 9.06378 25.611C7.59685 26.4543 6.24331 27.5032 5.04567 28.7433ZM5.81811 29.615C6.8811 28.5024 8.07874 27.5457 9.38268 26.7732C10.389 30.0543 11.948 32.7118 13.826 34.3134C10.7929 33.5268 8.01496 31.911 5.81811 29.615ZM17.4189 34.7953C14.4 34.4126 11.7992 31.0394 10.3961 26.2063C12.5646 25.1079 14.9598 24.4913 17.4189 24.3992V34.7953ZM17.4189 23.2441C14.8535 23.3291 12.3591 23.9598 10.0984 25.0654C9.62362 23.0811 9.34016 20.8913 9.29764 18.5811H17.4189V23.2441ZM17.4189 17.4189H9.29764C9.34016 15.1087 9.62362 12.9189 10.0984 10.9346C12.3661 12.0402 14.8606 12.6709 17.4189 12.7559V17.4189ZM17.4189 11.6008C14.9528 11.5157 12.5646 10.8921 10.3961 9.7937C11.7992 4.95354 14.4 1.5874 17.4189 1.20472V11.6008ZM30.9543 7.25669C33.3354 10.1197 34.6961 13.6843 34.8236 17.4189H27.8646C27.8221 14.9102 27.4961 12.5362 26.9433 10.389C28.4102 9.54567 29.7638 8.49685 30.9543 7.25669ZM30.1819 6.38504C29.1189 7.49764 27.9213 8.45433 26.6173 9.22677C25.611 5.94567 24.052 3.29528 22.174 1.68661C25.2071 2.47323 27.985 4.08898 30.1819 6.38504ZM18.5811 1.20472C21.6 1.5874 24.2008 4.96063 25.6039 9.7937C23.4354 10.8921 21.0472 11.5087 18.5811 11.6008V1.20472ZM18.5811 12.7559C21.1465 12.6709 23.6409 12.0402 25.9016 10.9346C26.3764 12.9189 26.6598 15.1087 26.7024 17.4189H18.5811V12.7559ZM18.5811 18.5811H26.7024C26.6598 20.8913 26.3764 23.0811 25.9016 25.0654C23.6195 23.9424 21.1233 23.3213 18.5811 23.2441V18.5811ZM18.5811 34.7953V24.3992C21.0472 24.4843 23.4354 25.1079 25.6039 26.2063C24.2008 31.0465 21.6 34.4126 18.5811 34.7953ZM22.174 34.3063C24.052 32.7047 25.611 30.0543 26.6173 26.7661C27.9213 27.5386 29.1189 28.4953 30.1819 29.6079C27.985 31.911 25.2071 33.5268 22.174 34.3063ZM30.9543 28.7433C29.7638 27.5032 28.4102 26.4543 26.9433 25.611C27.4961 23.4638 27.8221 21.0827 27.8646 18.5811H34.8236C34.6961 22.3158 33.3354 25.8803 30.9543 28.7433Z" fill="#3C72FC" /> <path d="M18 0C10.3961 0 0 5.74724 0 18C0 29.9409 9.99921 36 18 36C31.7268 36 36 23.974 36 18C36 9.18425 29.2535 0 18 0ZM13.826 1.6937C11.948 3.29528 10.389 5.94567 9.38268 9.23386C8.07874 8.46142 6.8811 7.50472 5.81811 6.39213C8.01496 4.08898 10.7929 2.47323 13.826 1.6937ZM5.04567 7.25669C6.23622 8.49685 7.58976 9.55276 9.06378 10.389C8.51102 12.5362 8.18504 14.9173 8.14252 17.4189H1.17638C1.30394 13.6843 2.66457 10.1197 5.04567 7.25669ZM5.04567 28.7433C2.65748 25.8803 1.30394 22.3158 1.17638 18.5811H8.14252C8.18504 21.0898 8.51102 23.4638 9.06378 25.611C7.59685 26.4543 6.24331 27.5032 5.04567 28.7433ZM5.81811 29.615C6.8811 28.5024 8.07874 27.5457 9.38268 26.7732C10.389 30.0543 11.948 32.7118 13.826 34.3134C10.7929 33.5268 8.01496 31.911 5.81811 29.615ZM17.4189 34.7953C14.4 34.4126 11.7992 31.0394 10.3961 26.2063C12.5646 25.1079 14.9598 24.4913 17.4189 24.3992V34.7953ZM17.4189 23.2441C14.8535 23.3291 12.3591 23.9598 10.0984 25.0654C9.62362 23.0811 9.34016 20.8913 9.29764 18.5811H17.4189V23.2441ZM17.4189 17.4189H9.29764C9.34016 15.1087 9.62362 12.9189 10.0984 10.9346C12.3661 12.0402 14.8606 12.6709 17.4189 12.7559V17.4189ZM17.4189 11.6008C14.9528 11.5157 12.5646 10.8921 10.3961 9.7937C11.7992 4.95354 14.4 1.5874 17.4189 1.20472V11.6008ZM30.9543 7.25669C33.3354 10.1197 34.6961 13.6843 34.8236 17.4189H27.8646C27.8221 14.9102 27.4961 12.5362 26.9433 10.389C28.4102 9.54567 29.7638 8.49685 30.9543 7.25669ZM30.1819 6.38504C29.1189 7.49764 27.9213 8.45433 26.6173 9.22677C25.611 5.94567 24.052 3.29528 22.174 1.68661C25.2071 2.47323 27.985 4.08898 30.1819 6.38504ZM18.5811 1.20472C21.6 1.5874 24.2008 4.96063 25.6039 9.7937C23.4354 10.8921 21.0472 11.5087 18.5811 11.6008V1.20472ZM18.5811 12.7559C21.1465 12.6709 23.6409 12.0402 25.9016 10.9346C26.3764 12.9189 26.6598 15.1087 26.7024 17.4189H18.5811V12.7559ZM18.5811 18.5811H26.7024C26.6598 20.8913 26.3764 23.0811 25.9016 25.0654C23.6195 23.9424 21.1233 23.3213 18.5811 23.2441V18.5811ZM18.5811 34.7953V24.3992C21.0472 24.4843 23.4354 25.1079 25.6039 26.2063C24.2008 31.0465 21.6 34.4126 18.5811 34.7953ZM22.174 34.3063C24.052 32.7047 25.611 30.0543 26.6173 26.7661C27.9213 27.5386 29.1189 28.4953 30.1819 29.6079C27.985 31.911 25.2071 33.5268 22.174 34.3063ZM30.9543 28.7433C29.7638 27.5032 28.4102 26.4543 26.9433 25.611C27.4961 23.4638 27.8221 21.0827 27.8646 18.5811H34.8236C34.6961 22.3158 33.3354 25.8803 30.9543 28.7433Z" fill="#3779b9" />
</svg> </svg>
); );
const IconAndroid = () => ( const IconAndroid = () => (
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.3329 3.58535L23.91 0.956761C23.9526 0.885641 23.9809 0.806813 23.9931 0.724776C24.0053 0.64274 24.0012 0.559103 23.9811 0.47864C23.961 0.398177 23.9252 0.322464 23.8758 0.255824C23.8265 0.189184 23.7644 0.132922 23.6933 0.0902496C23.6222 0.0475777 23.5434 0.0193317 23.4613 0.00712437C23.3793 -0.00508296 23.2957 -0.00101255 23.2152 0.0191032C23.1347 0.039219 23.059 0.0749861 22.9924 0.124362C22.9257 0.173739 22.8695 0.235758 22.8268 0.306877L21.1626 3.08072C20.1717 2.72831 19.1107 2.52621 18.0004 2.52621C16.8901 2.52621 15.829 2.72831 14.8381 3.08072L13.1739 0.306877C13.0878 0.163244 12.948 0.0597288 12.7855 0.0191032C12.623 -0.0215224 12.4511 0.00406979 12.3074 0.0902497C12.1638 0.17643 12.0603 0.316138 12.0196 0.47864C11.979 0.641142 12.0046 0.813128 12.0908 0.956761L13.6678 3.58535C10.6192 5.16111 8.52686 8.33789 8.52686 12.0004C8.52686 12.1679 8.59339 12.3285 8.71184 12.4469C8.83028 12.5654 8.99092 12.6319 9.15842 12.6319H26.8423C27.0098 12.6319 27.1705 12.5654 27.2889 12.4469C27.4074 12.3285 27.4739 12.1679 27.4739 12.0004C27.4733 8.33853 25.3815 5.16174 22.3329 3.58535ZM9.81399 11.3688C10.1374 7.13539 13.6855 3.78997 18.0004 3.78997C22.3152 3.78997 25.8634 7.13539 26.1868 11.3688H9.81399Z" fill="#3C72FC" /> <path d="M22.3329 3.58535L23.91 0.956761C23.9526 0.885641 23.9809 0.806813 23.9931 0.724776C24.0053 0.64274 24.0012 0.559103 23.9811 0.47864C23.961 0.398177 23.9252 0.322464 23.8758 0.255824C23.8265 0.189184 23.7644 0.132922 23.6933 0.0902496C23.6222 0.0475777 23.5434 0.0193317 23.4613 0.00712437C23.3793 -0.00508296 23.2957 -0.00101255 23.2152 0.0191032C23.1347 0.039219 23.059 0.0749861 22.9924 0.124362C22.9257 0.173739 22.8695 0.235758 22.8268 0.306877L21.1626 3.08072C20.1717 2.72831 19.1107 2.52621 18.0004 2.52621C16.8901 2.52621 15.829 2.72831 14.8381 3.08072L13.1739 0.306877C13.0878 0.163244 12.948 0.0597288 12.7855 0.0191032C12.623 -0.0215224 12.4511 0.00406979 12.3074 0.0902497C12.1638 0.17643 12.0603 0.316138 12.0196 0.47864C11.979 0.641142 12.0046 0.813128 12.0908 0.956761L13.6678 3.58535C10.6192 5.16111 8.52686 8.33789 8.52686 12.0004C8.52686 12.1679 8.59339 12.3285 8.71184 12.4469C8.83028 12.5654 8.99092 12.6319 9.15842 12.6319H26.8423C27.0098 12.6319 27.1705 12.5654 27.2889 12.4469C27.4074 12.3285 27.4739 12.1679 27.4739 12.0004C27.4733 8.33853 25.3815 5.16174 22.3329 3.58535ZM9.81399 11.3688C10.1374 7.13539 13.6855 3.78997 18.0004 3.78997C22.3152 3.78997 25.8634 7.13539 26.1868 11.3688H9.81399Z" fill="#3779b9" />
<path d="M26.8416 13.2634H9.15774C8.99024 13.2634 8.8296 13.33 8.71116 13.4484C8.59272 13.5668 8.52618 13.7275 8.52618 13.895V26.6343C8.52751 27.4433 8.8497 28.2188 9.42205 28.7905C9.9944 29.3623 10.7702 29.6837 11.5792 29.6842H12.3156V33.4774C12.3156 34.8681 13.4486 35.9999 14.8419 35.9999C16.2351 35.9999 17.3681 34.8681 17.3681 33.4774V29.6842H18.6313V33.4774C18.6313 34.8681 19.7643 35.9999 21.1575 35.9999C22.5508 35.9999 23.6838 34.8681 23.6838 33.4774V29.6842H24.4202C25.2293 29.6839 26.0051 29.3625 26.5775 28.7907C27.1499 28.2189 27.472 27.4434 27.4732 26.6343V13.895C27.4732 13.7275 27.4067 13.5668 27.2882 13.4484C27.1698 13.33 27.0091 13.2634 26.8416 13.2634ZM30.3153 13.2634C29.0963 13.2634 28.1048 14.2562 28.1048 15.4764V24.3133C28.1048 25.5335 29.0963 26.5263 30.3153 26.5263C31.5342 26.5263 32.5258 25.5335 32.5258 24.3133V15.4764C32.5254 14.89 32.2925 14.3277 31.8781 13.9129C31.4637 13.498 30.9017 13.2644 30.3153 13.2634ZM5.68412 13.2634C4.46519 13.2634 3.47363 14.2562 3.47363 15.4764V24.3133C3.47363 25.5335 4.46519 26.5263 5.68412 26.5263C6.90305 26.5263 7.89461 25.5335 7.89461 24.3133V15.4764C7.89427 14.89 7.66136 14.3277 7.24696 13.9129C6.83255 13.498 6.27051 13.2644 5.68412 13.2634Z" fill="#3C72FC" /> <path d="M26.8416 13.2634H9.15774C8.99024 13.2634 8.8296 13.33 8.71116 13.4484C8.59272 13.5668 8.52618 13.7275 8.52618 13.895V26.6343C8.52751 27.4433 8.8497 28.2188 9.42205 28.7905C9.9944 29.3623 10.7702 29.6837 11.5792 29.6842H12.3156V33.4774C12.3156 34.8681 13.4486 35.9999 14.8419 35.9999C16.2351 35.9999 17.3681 34.8681 17.3681 33.4774V29.6842H18.6313V33.4774C18.6313 34.8681 19.7643 35.9999 21.1575 35.9999C22.5508 35.9999 23.6838 34.8681 23.6838 33.4774V29.6842H24.4202C25.2293 29.6839 26.0051 29.3625 26.5775 28.7907C27.1499 28.2189 27.472 27.4434 27.4732 26.6343V13.895C27.4732 13.7275 27.4067 13.5668 27.2882 13.4484C27.1698 13.33 27.0091 13.2634 26.8416 13.2634ZM30.3153 13.2634C29.0963 13.2634 28.1048 14.2562 28.1048 15.4764V24.3133C28.1048 25.5335 29.0963 26.5263 30.3153 26.5263C31.5342 26.5263 32.5258 25.5335 32.5258 24.3133V15.4764C32.5254 14.89 32.2925 14.3277 31.8781 13.9129C31.4637 13.498 30.9017 13.2644 30.3153 13.2634ZM5.68412 13.2634C4.46519 13.2634 3.47363 14.2562 3.47363 15.4764V24.3133C3.47363 25.5335 4.46519 26.5263 5.68412 26.5263C6.90305 26.5263 7.89461 25.5335 7.89461 24.3133V15.4764C7.89427 14.89 7.66136 14.3277 7.24696 13.9129C6.83255 13.498 6.27051 13.2644 5.68412 13.2634Z" fill="#3779b9" />
</svg> </svg>
); );
const IconIOS = () => ( const IconIOS = () => (
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_ios)"> <g clipPath="url(#clip0_ios)">
<path d="M25.368 0.727224L25.3301 0L24.6063 0.0778922C24.5353 0.0854747 17.5395 0.928503 17.0597 8.75012L17.0115 9.53318L17.7945 9.48011C17.8745 9.47459 25.7981 8.84249 25.368 0.727224ZM24.0025 1.60058C23.8708 6.3141 20.2037 7.62517 18.5204 7.97878C19.1614 3.39831 22.4832 2.00245 24.0025 1.60058Z" fill="#3C72FC" /> <path d="M25.368 0.727224L25.3301 0L24.6063 0.0778922C24.5353 0.0854747 17.5395 0.928503 17.0597 8.75012L17.0115 9.53318L17.7945 9.48011C17.8745 9.47459 25.7981 8.84249 25.368 0.727224ZM24.0025 1.60058C23.8708 6.3141 20.2037 7.62517 18.5204 7.97878C19.1614 3.39831 22.4832 2.00245 24.0025 1.60058Z" fill="#3779b9" />
<path d="M32.1109 25.8609L31.6704 25.7182C29.0048 24.8566 27.2147 22.415 27.2147 19.6426C27.2147 17.1763 28.6092 14.9705 30.8549 13.8855L31.525 13.5622L31.1514 12.9191C30.9914 12.6434 29.4963 10.2011 26.3379 9.39256C23.8329 8.7515 21.0164 9.31881 17.9634 11.0793C16.671 10.2949 12.3779 8.03393 8.9624 10.3004C8.29377 10.6699 1.20696 14.9153 4.89546 26.3703C5.00369 26.6267 7.57551 32.652 10.6188 34.9088C11.4398 35.6933 13.5394 36.6735 15.9389 35.0377C16.3546 34.8661 19.136 33.7956 20.9006 35.0494C21.552 35.4954 22.6894 36.0007 23.8908 36.0007C24.8021 36.0007 25.7499 35.7105 26.5509 34.8833C26.9245 34.56 30.3373 31.514 32.1109 26.6888L32.1626 26.5482L32.1109 25.8609Z" fill="#3C72FC" /> <path d="M32.1109 25.8609L31.6704 25.7182C29.0048 24.8566 27.2147 22.415 27.2147 19.6426C27.2147 17.1763 28.6092 14.9705 30.8549 13.8855L31.525 13.5622L31.1514 12.9191C30.9914 12.6434 29.4963 10.2011 26.3379 9.39256C23.8329 8.7515 21.0164 9.31881 17.9634 11.0793C16.671 10.2949 12.3779 8.03393 8.9624 10.3004C8.29377 10.6699 1.20696 14.9153 4.89546 26.3703C5.00369 26.6267 7.57551 32.652 10.6188 34.9088C11.4398 35.6933 13.5394 36.6735 15.9389 35.0377C16.3546 34.8661 19.136 33.7956 20.9006 35.0494C21.552 35.4954 22.6894 36.0007 23.8908 36.0007C24.8021 36.0007 25.7499 35.7105 26.5509 34.8833C26.9245 34.56 30.3373 31.514 32.1109 26.6888L32.1626 26.5482L32.1109 25.8609Z" fill="#3779b9" />
</g> </g>
<defs><clipPath id="clip0_ios"><rect width="36" height="36" fill="white" /></clipPath></defs> <defs><clipPath id="clip0_ios"><rect width="36" height="36" fill="white" /></clipPath></defs>
</svg> </svg>
@ -27,18 +27,18 @@ const IconIOS = () => (
const IconWatch = () => ( const IconWatch = () => (
<svg width="26" height="36" viewBox="0 0 26 36" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="26" height="36" viewBox="0 0 26 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.4282 8.14719H4.2927C3.43931 8.14719 2.74512 8.84146 2.74512 9.69477V26.3054C2.74512 27.1587 3.43938 27.853 4.2927 27.853H19.4282C20.2815 27.853 20.9757 27.1587 20.9757 26.3054V9.69477C20.9757 8.84146 20.2814 8.14719 19.4282 8.14719Z" fill="#3C72FC" fillOpacity="0.2" /> <path d="M19.4282 8.14719H4.2927C3.43931 8.14719 2.74512 8.84146 2.74512 9.69477V26.3054C2.74512 27.1587 3.43938 27.853 4.2927 27.853H19.4282C20.2815 27.853 20.9757 27.1587 20.9757 26.3054V9.69477C20.9757 8.84146 20.2814 8.14719 19.4282 8.14719Z" fill="#3779b9" fillOpacity="0.2" />
<path d="M23.6774 11.9782H23.0853V9.28238C23.0853 7.59677 21.7931 6.20775 20.1474 6.05271L19.2545 2.08153C18.9789 0.855914 17.9092 0 16.653 0H7.0679C5.81176 0 4.74196 0.855914 4.4664 2.08153L3.57351 6.05271C1.92777 6.20775 0.635498 7.59677 0.635498 9.28238V26.7176C0.635498 28.5067 2.09104 29.9622 3.88007 29.9622H19.063L18.2255 33.6871C18.0589 34.428 17.4123 34.9453 16.653 34.9453H7.0679C6.30859 34.9453 5.662 34.428 5.49543 33.6871L5.0834 31.8545C5.0834 31.5633 4.84731 31.3272 4.55606 31.3272C4.26481 31.3272 4.02872 31.5633 4.02872 31.8545L4.4664 33.9185C4.74196 35.1441 5.81169 36 7.0679 36H16.653C17.9092 36 18.9789 35.1441 19.2545 33.9185L20.1474 29.9473C21.7931 29.7922 23.0853 28.4032 23.0853 26.7176V18.4657H23.6774C24.6077 18.4657 25.3646 17.7088 25.3646 16.7785V13.6654C25.3646 12.7351 24.6078 11.9782 23.6774 11.9782Z" fill="#3C72FC" /> <path d="M23.6774 11.9782H23.0853V9.28238C23.0853 7.59677 21.7931 6.20775 20.1474 6.05271L19.2545 2.08153C18.9789 0.855914 17.9092 0 16.653 0H7.0679C5.81176 0 4.74196 0.855914 4.4664 2.08153L3.57351 6.05271C1.92777 6.20775 0.635498 7.59677 0.635498 9.28238V26.7176C0.635498 28.5067 2.09104 29.9622 3.88007 29.9622H19.063L18.2255 33.6871C18.0589 34.428 17.4123 34.9453 16.653 34.9453H7.0679C6.30859 34.9453 5.662 34.428 5.49543 33.6871L5.0834 31.8545C5.0834 31.5633 4.84731 31.3272 4.55606 31.3272C4.26481 31.3272 4.02872 31.5633 4.02872 31.8545L4.4664 33.9185C4.74196 35.1441 5.81169 36 7.0679 36H16.653C17.9092 36 18.9789 35.1441 19.2545 33.9185L20.1474 29.9473C21.7931 29.7922 23.0853 28.4032 23.0853 26.7176V18.4657H23.6774C24.6077 18.4657 25.3646 17.7088 25.3646 16.7785V13.6654C25.3646 12.7351 24.6078 11.9782 23.6774 11.9782Z" fill="#3779b9" />
<path d="M13.001 2.48169H10.7086C10.4174 2.48169 10.1812 2.7178 10.1812 3.00903C10.1812 3.30027 10.4174 3.53638 10.7086 3.53638H13.0122C13.3035 3.53638 13.5396 3.30027 13.5396 3.00903C13.5396 2.7178 13.3035 2.48169 13.0123 2.48169Z" fill="#3C72FC" /> <path d="M13.001 2.48169H10.7086C10.4174 2.48169 10.1812 2.7178 10.1812 3.00903C10.1812 3.30027 10.4174 3.53638 10.7086 3.53638H13.0122C13.3035 3.53638 13.5396 3.30027 13.5396 3.00903C13.5396 2.7178 13.3035 2.48169 13.0123 2.48169Z" fill="#3779b9" />
</svg> </svg>
); );
const IconTv = () => ( const IconTv = () => (
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_tv)"> <g clipPath="url(#clip0_tv)">
<path d="M28.5331 13.0602H33.0025C33.2979 13.0602 33.5371 12.8208 33.5371 12.5254C33.5371 12.2301 33.2979 11.9907 33.0025 11.9907H28.5331C28.2377 11.9907 27.9985 12.2301 27.9985 12.5254C27.9985 12.8208 28.2377 13.0602 28.5331 13.0602ZM28.5331 14.9672H33.0025C33.2977 14.9672 33.537 14.7278 33.537 14.4325C33.537 14.1372 33.2977 13.8978 33.0025 13.8978H28.5331C28.2377 13.8978 27.9985 14.1372 27.9985 14.4325C27.9985 14.7278 28.2377 14.9672 28.5331 14.9672ZM28.5331 16.8741H33.0025C33.2977 16.8741 33.537 16.6347 33.537 16.3394C33.537 16.0441 33.2977 15.8047 33.0025 15.8047H28.5331C28.2377 15.8047 27.9985 16.0441 27.9985 16.3394C27.9985 16.6347 28.2377 16.8741 28.5331 16.8741Z" fill="#3C72FC" /> <path d="M28.5331 13.0602H33.0025C33.2979 13.0602 33.5371 12.8208 33.5371 12.5254C33.5371 12.2301 33.2979 11.9907 33.0025 11.9907H28.5331C28.2377 11.9907 27.9985 12.2301 27.9985 12.5254C27.9985 12.8208 28.2377 13.0602 28.5331 13.0602ZM28.5331 14.9672H33.0025C33.2977 14.9672 33.537 14.7278 33.537 14.4325C33.537 14.1372 33.2977 13.8978 33.0025 13.8978H28.5331C28.2377 13.8978 27.9985 14.1372 27.9985 14.4325C27.9985 14.7278 28.2377 14.9672 28.5331 14.9672ZM28.5331 16.8741H33.0025C33.2977 16.8741 33.537 16.6347 33.537 16.3394C33.537 16.0441 33.2977 15.8047 33.0025 15.8047H28.5331C28.2377 15.8047 27.9985 16.0441 27.9985 16.3394C27.9985 16.6347 28.2377 16.8741 28.5331 16.8741Z" fill="#3779b9" />
<path d="M8.09721 30.1764C10.3632 30.4112 12.6399 30.5287 14.9181 30.5285C17.1969 30.5285 19.4763 30.4112 21.7392 30.1764C23.0383 30.0412 24.2682 29.4631 25.2021 28.5479C26.1362 27.6325 26.7388 26.4147 26.8995 25.1185C27.3389 21.5631 27.3389 17.9672 26.8995 14.4118C26.7388 13.1157 26.1362 11.8979 25.2021 10.9824C24.2682 10.0673 23.0383 9.4891 21.7392 9.35396C17.204 8.88429 12.6324 8.88429 8.09721 9.35396C6.79811 9.48882 5.56814 10.0673 4.63432 10.9824C3.70021 11.8979 3.09728 13.1157 2.93697 14.4118C2.49725 17.9672 2.49725 21.5632 2.93697 25.1185C3.09728 26.4147 3.70021 27.6325 4.63432 28.5479C5.56814 29.4631 6.79783 30.0412 8.09721 30.1764Z" fill="#3C72FC" fillOpacity="0.2" /> <path d="M8.09721 30.1764C10.3632 30.4112 12.6399 30.5287 14.9181 30.5285C17.1969 30.5285 19.4763 30.4112 21.7392 30.1764C23.0383 30.0412 24.2682 29.4631 25.2021 28.5479C26.1362 27.6325 26.7388 26.4147 26.8995 25.1185C27.3389 21.5631 27.3389 17.9672 26.8995 14.4118C26.7388 13.1157 26.1362 11.8979 25.2021 10.9824C24.2682 10.0673 23.0383 9.4891 21.7392 9.35396C17.204 8.88429 12.6324 8.88429 8.09721 9.35396C6.79811 9.48882 5.56814 10.0673 4.63432 10.9824C3.70021 11.8979 3.09728 13.1157 2.93697 14.4118C2.49725 17.9672 2.49725 21.5632 2.93697 25.1185C3.09728 26.4147 3.70021 27.6325 4.63432 28.5479C5.56814 29.4631 6.79783 30.0412 8.09721 30.1764Z" fill="#3779b9" fillOpacity="0.2" />
<path d="M31.3294 6.27253H21.8985C21.8109 5.64497 21.5645 5.05016 21.1827 4.54446L24.8145 0.912619C24.9135 0.813379 24.9698 0.677319 24.9698 0.535541C24.9698 0.393763 24.9135 0.257703 24.8145 0.158463C24.7153 0.0592237 24.5792 0 24.4374 0C24.2957 0 24.1596 0.0592237 24.0603 0.158463L20.4261 3.7891C19.0907 2.78694 17.2373 2.78694 15.9022 3.78889L12.2698 0.15655C12.1695 0.0563102 12.0335 0 11.8918 0C11.75 0 11.614 0.0563102 11.5137 0.15655C11.4135 0.258007 11.3572 0.394295 11.3572 0.536419C11.3572 0.678542 11.4135 0.81483 11.5137 0.916287L15.1455 4.54446C14.7637 5.05022 14.5173 5.64499 14.4295 6.27253H4.6706C2.09506 6.27253 0 8.3677 0 10.9432V28.5871C0 31.1623 2.09513 33.2574 4.6706 33.2574H6.24602L6.48192 34.1267C6.73188 35.0468 7.57233 35.6895 8.5259 35.6895C9.47948 35.6895 10.32 35.0469 10.57 34.1267L10.8059 33.2574H25.1941L25.43 34.1267C25.68 35.0468 26.5207 35.6895 27.474 35.6895C28.4277 35.6895 29.2681 35.0469 29.518 34.1267L29.754 33.2574H31.3297C33.9049 33.2574 36 31.1623 36 28.5871V10.9432C36 8.36763 33.9049 6.27253 31.3294 6.27253ZM16.2532 4.89581C17.3071 3.84225 19.0214 3.84225 20.0751 4.89609C20.4579 5.2781 20.7114 5.75461 20.8147 6.27267H15.5135C15.6166 5.75468 15.8702 5.2781 16.2532 4.89581ZM34.9307 28.5871C34.9307 30.5726 33.3152 32.1882 31.3294 32.1882H4.6706C2.68484 32.1882 1.06928 30.5726 1.06928 28.5871V10.9432C1.06928 8.95741 2.68484 7.34184 4.6706 7.34184H31.3297C33.3152 7.34184 34.9307 8.95741 34.9307 10.9432V28.5871ZM9.53805 33.8462C9.41423 34.3018 8.99805 34.6202 8.52597 34.6202C8.05382 34.6202 7.63772 34.3019 7.51382 33.8462L7.354 33.2574H9.69794L9.53805 33.8462ZM28.4862 33.8462C28.3623 34.3018 27.9462 34.6202 27.474 34.6202C27.0019 34.6202 26.5858 34.3019 26.4622 33.8462L26.3023 33.2574H28.646L28.4862 33.8462Z" fill="#3C72FC" /> <path d="M31.3294 6.27253H21.8985C21.8109 5.64497 21.5645 5.05016 21.1827 4.54446L24.8145 0.912619C24.9135 0.813379 24.9698 0.677319 24.9698 0.535541C24.9698 0.393763 24.9135 0.257703 24.8145 0.158463C24.7153 0.0592237 24.5792 0 24.4374 0C24.2957 0 24.1596 0.0592237 24.0603 0.158463L20.4261 3.7891C19.0907 2.78694 17.2373 2.78694 15.9022 3.78889L12.2698 0.15655C12.1695 0.0563102 12.0335 0 11.8918 0C11.75 0 11.614 0.0563102 11.5137 0.15655C11.4135 0.258007 11.3572 0.394295 11.3572 0.536419C11.3572 0.678542 11.4135 0.81483 11.5137 0.916287L15.1455 4.54446C14.7637 5.05022 14.5173 5.64499 14.4295 6.27253H4.6706C2.09506 6.27253 0 8.3677 0 10.9432V28.5871C0 31.1623 2.09513 33.2574 4.6706 33.2574H6.24602L6.48192 34.1267C6.73188 35.0468 7.57233 35.6895 8.5259 35.6895C9.47948 35.6895 10.32 35.0469 10.57 34.1267L10.8059 33.2574H25.1941L25.43 34.1267C25.68 35.0468 26.5207 35.6895 27.474 35.6895C28.4277 35.6895 29.2681 35.0469 29.518 34.1267L29.754 33.2574H31.3297C33.9049 33.2574 36 31.1623 36 28.5871V10.9432C36 8.36763 33.9049 6.27253 31.3294 6.27253ZM16.2532 4.89581C17.3071 3.84225 19.0214 3.84225 20.0751 4.89609C20.4579 5.2781 20.7114 5.75461 20.8147 6.27267H15.5135C15.6166 5.75468 15.8702 5.2781 16.2532 4.89581ZM34.9307 28.5871C34.9307 30.5726 33.3152 32.1882 31.3294 32.1882H4.6706C2.68484 32.1882 1.06928 30.5726 1.06928 28.5871V10.9432C1.06928 8.95741 2.68484 7.34184 4.6706 7.34184H31.3297C33.3152 7.34184 34.9307 8.95741 34.9307 10.9432V28.5871ZM9.53805 33.8462C9.41423 34.3018 8.99805 34.6202 8.52597 34.6202C8.05382 34.6202 7.63772 34.3019 7.51382 33.8462L7.354 33.2574H9.69794L9.53805 33.8462ZM28.4862 33.8462C28.3623 34.3018 27.9462 34.6202 27.474 34.6202C27.0019 34.6202 26.5858 34.3019 26.4622 33.8462L26.3023 33.2574H28.646L28.4862 33.8462Z" fill="#3779b9" />
</g> </g>
<defs><clipPath id="clip0_tv"><rect width="36" height="36" fill="white" /></clipPath></defs> <defs><clipPath id="clip0_tv"><rect width="36" height="36" fill="white" /></clipPath></defs>
</svg> </svg>
@ -46,9 +46,9 @@ const IconTv = () => (
const IconIOT = () => ( const IconIOT = () => (
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.9999 10.2061C15.6829 10.2061 13.7979 12.0901 13.7979 14.406C13.7979 16.722 15.6828 18.606 17.9999 18.606C20.317 18.606 22.202 16.7219 22.202 14.406C22.202 12.0901 20.317 10.2061 17.9999 10.2061ZM17.9999 17.4061C16.3446 17.4061 14.9979 16.0601 14.9979 14.406C14.9979 12.7519 16.3446 11.406 17.9999 11.406C19.6552 11.406 21.002 12.7519 21.002 14.406C21.002 16.0601 19.6552 17.4061 17.9999 17.4061Z" fill="#3C72FC" /> <path d="M17.9999 10.2061C15.6829 10.2061 13.7979 12.0901 13.7979 14.406C13.7979 16.722 15.6828 18.606 17.9999 18.606C20.317 18.606 22.202 16.7219 22.202 14.406C22.202 12.0901 20.317 10.2061 17.9999 10.2061ZM17.9999 17.4061C16.3446 17.4061 14.9979 16.0601 14.9979 14.406C14.9979 12.7519 16.3446 11.406 17.9999 11.406C19.6552 11.406 21.002 12.7519 21.002 14.406C21.002 16.0601 19.6552 17.4061 17.9999 17.4061Z" fill="#3779b9" />
<path d="M25.1903 18.0102C25.192 17.882 25.2001 17.7544 25.2001 17.626C25.2001 10.7685 22.7292 4.40667 18.4208 0.171803C18.1574 0 17.8427 0 17.5793 0.171803C13.2709 4.40667 10.8 10.7685 10.8 17.626C10.8 17.7544 10.8081 17.882 10.8098 18.0102C7.91877 19.5144 6 23.5346 6 28.1996C6 28.3587 6.06321 28.5113 6.17573 28.6238C6.28825 28.7364 6.44085 28.7996 6.59998 28.7996H29.4001C29.5592 28.7996 29.7118 28.7364 29.8243 28.6238C29.9369 28.5113 30.0001 28.3587 30.0001 28.1996C30.0001 23.5347 28.0814 19.5144 25.1903 18.0102ZM18.0001 1.45473C19.2677 2.78406 20.3501 4.32033 21.2367 6.00572H14.7634C15.6501 4.32026 16.7325 2.78399 18.0001 1.45473ZM7.21177 27.5996C7.35472 23.9749 8.78488 20.794 10.8614 19.374C11.0423 22.2454 11.6673 25.0445 12.6977 27.5996H7.21177ZM22.0117 27.5999H13.9884C12.6868 24.5589 12.0001 21.1194 12.0001 17.626C12.0001 13.8965 12.767 10.3296 14.1786 7.20568H21.8216C23.2332 10.3296 24.0001 13.8965 24.0001 17.626C24.0001 21.1195 23.3134 24.5589 22.0117 27.5999ZM23.3024 27.5996C24.3329 25.0445 24.9579 22.2454 25.1387 19.374C27.2153 20.794 28.6454 23.9749 28.7884 27.5996H23.3024Z" fill="#3C72FC" /> <path d="M25.1903 18.0102C25.192 17.882 25.2001 17.7544 25.2001 17.626C25.2001 10.7685 22.7292 4.40667 18.4208 0.171803C18.1574 0 17.8427 0 17.5793 0.171803C13.2709 4.40667 10.8 10.7685 10.8 17.626C10.8 17.7544 10.8081 17.882 10.8098 18.0102C7.91877 19.5144 6 23.5346 6 28.1996C6 28.3587 6.06321 28.5113 6.17573 28.6238C6.28825 28.7364 6.44085 28.7996 6.59998 28.7996H29.4001C29.5592 28.7996 29.7118 28.7364 29.8243 28.6238C29.9369 28.5113 30.0001 28.3587 30.0001 28.1996C30.0001 23.5347 28.0814 19.5144 25.1903 18.0102ZM18.0001 1.45473C19.2677 2.78406 20.3501 4.32033 21.2367 6.00572H14.7634C15.6501 4.32026 16.7325 2.78399 18.0001 1.45473ZM7.21177 27.5996C7.35472 23.9749 8.78488 20.794 10.8614 19.374C11.0423 22.2454 11.6673 25.0445 12.6977 27.5996H7.21177ZM22.0117 27.5999H13.9884C12.6868 24.5589 12.0001 21.1194 12.0001 17.626C12.0001 13.8965 12.767 10.3296 14.1786 7.20568H21.8216C23.2332 10.3296 24.0001 13.8965 24.0001 17.626C24.0001 21.1195 23.3134 24.5589 22.0117 27.5999ZM23.3024 27.5996C24.3329 25.0445 24.9579 22.2454 25.1387 19.374C27.2153 20.794 28.6454 23.9749 28.7884 27.5996H23.3024Z" fill="#3779b9" />
<path d="M18.0001 32.4005C17.6409 32.4005 17.4001 32.6993 17.4001 33.0005V35.3999C17.4001 35.7591 17.6409 35.9999 18.0001 35.9999C18.3593 35.9999 18.6001 35.7591 18.6001 35.3999V33.0006C18.6001 32.6993 18.3593 32.4005 18.0001 32.4005ZM14.9969 32.4005C14.6377 32.4005 14.3969 32.6993 14.3969 33.0005V34.1993C14.3969 34.5585 14.6377 34.7993 14.9969 34.7993C15.3561 34.7993 15.5969 34.5585 15.5969 34.1993V33.0005C15.5968 32.6993 15.3561 32.4005 14.9969 32.4005ZM21.0033 32.4005C20.6441 32.4005 20.4034 32.6993 20.4034 33.0005V34.1993C20.4034 34.5585 20.6441 34.7993 21.0033 34.7993C21.3625 34.7993 21.6033 34.5585 21.6033 34.1993V33.0005C21.6033 32.6993 21.3625 32.4005 21.0033 32.4005Z" fill="#3C72FC" /> <path d="M18.0001 32.4005C17.6409 32.4005 17.4001 32.6993 17.4001 33.0005V35.3999C17.4001 35.7591 17.6409 35.9999 18.0001 35.9999C18.3593 35.9999 18.6001 35.7591 18.6001 35.3999V33.0006C18.6001 32.6993 18.3593 32.4005 18.0001 32.4005ZM14.9969 32.4005C14.6377 32.4005 14.3969 32.6993 14.3969 33.0005V34.1993C14.3969 34.5585 14.6377 34.7993 14.9969 34.7993C15.3561 34.7993 15.5969 34.5585 15.5969 34.1993V33.0005C15.5968 32.6993 15.3561 32.4005 14.9969 32.4005ZM21.0033 32.4005C20.6441 32.4005 20.4034 32.6993 20.4034 33.0005V34.1993C20.4034 34.5585 20.6441 34.7993 21.0033 34.7993C21.3625 34.7993 21.6033 34.5585 21.6033 34.1993V33.0005C21.6033 32.6993 21.3625 32.4005 21.0033 32.4005Z" fill="#3779b9" />
</svg> </svg>
); );

38
src/components/home/SharedComponents.tsx
View File

@ -41,7 +41,7 @@ export const SearchOverlay = () => (
<form action="#"> <form action="#">
<div className="df-search-input mb-10"> <div className="df-search-input mb-10">
<input type="text" placeholder="Search here..." /> <input type="text" placeholder="Search here..." />
<button type="submit"><i className="icon-search"></i></button> <button type="submit"><i className="fa-solid fa-magnifying-glass"></i></button>
</div> </div>
<div className="df-search-category"> <div className="df-search-category">
<span>Search by : </span> <span>Search by : </span>
@ -72,7 +72,7 @@ export const Offcanvas = () => (
<a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="Header Logo" /></a> <a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="Header Logo" /></a>
</div> </div>
<div className="offcanvas__close"> <div className="offcanvas__close">
<button><i className="fal fa-times"></i></button> <button><i className="fa-solid fa-xmark"></i></button>
</div> </div>
</div> </div>
<div className="offcanvas__search mb-25"> <div className="offcanvas__search mb-25">
@ -84,7 +84,7 @@ export const Offcanvas = () => (
<ul> <ul>
<li className="d-flex align-items-center"> <li className="d-flex align-items-center">
<div className="offcanvas__contact-icon mr-15"> <div className="offcanvas__contact-icon mr-15">
<i className="fal fa-map-marker-alt"></i> <i className="fa-solid fa-location-dot"></i>
</div> </div>
<div className="offcanvas__contact-text"> <div className="offcanvas__contact-text">
<a target="_blank" href="#">31 Park End St, Brockhampton, UK</a> <a target="_blank" href="#">31 Park End St, Brockhampton, UK</a>
@ -92,7 +92,7 @@ export const Offcanvas = () => (
</li> </li>
<li className="d-flex align-items-center"> <li className="d-flex align-items-center">
<div className="offcanvas__contact-icon mr-15"> <div className="offcanvas__contact-icon mr-15">
<i className="far fa-phone"></i> <i className="fa-solid fa-phone"></i>
</div> </div>
<div className="offcanvas__contact-text"> <div className="offcanvas__contact-text">
<a href="tel:+00112233665">+00112233665</a> <a href="tel:+00112233665">+00112233665</a>
@ -100,7 +100,7 @@ export const Offcanvas = () => (
</li> </li>
<li className="d-flex align-items-center"> <li className="d-flex align-items-center">
<div className="offcanvas__contact-icon mr-15"> <div className="offcanvas__contact-icon mr-15">
<i className="fal fa-envelope"></i> <i className="fa-solid fa-envelope"></i>
</div> </div>
<div className="offcanvas__contact-text"> <div className="offcanvas__contact-text">
<a href="mailto:support@example.com">support@example.com</a> <a href="mailto:support@example.com">support@example.com</a>
@ -206,22 +206,22 @@ export const Header1 = () => (
</div> </div>
</div> </div>
<div className="search-toggle-open header-search my-auto"> <div className="search-toggle-open header-search my-auto">
<div className="search-icon"><i className="icon-search"></i></div> <div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
</div> </div>
<div className="header-shopping-cart my-auto"> <div className="header-shopping-cart my-auto">
<div className="cart-icon"><a href="#"><i className="icon-shopping-cart"></i></a></div> <div className="cart-icon"><a href="#"><i className="fa-solid fa-cart-shopping"></i></a></div>
</div> </div>
<div className="header-action d-none d-xl-inline-flex gap-5"> <div className="header-action d-none d-xl-inline-flex gap-5">
<div className="header-link"> <div className="header-link">
<a className="primary-btn-1 btn-hover" href="/contact"> <a className="primary-btn-1 btn-hover" href="/contact">
GET A QUOTE &nbsp; | <i className="icon-right-arrow"></i> GET A QUOTE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
</div> </div>
</div> </div>
<div className="header-action"> <div className="header-action">
<div className="header-link-1"> <div className="header-link-1">
<div className="icon"><i className="fal fa-phone-volume"></i></div> <div className="icon"><i className="fa-solid fa-phone-volume"></i></div>
<div className="content"> <div className="content">
<span>Call Us Now</span> <span>Call Us Now</span>
<h6><a href="tel:2085550112">+208-555-0112</a></h6> <h6><a href="tel:2085550112">+208-555-0112</a></h6>
@ -231,7 +231,7 @@ export const Header1 = () => (
<div className="header__hamburger d-xl-none my-auto"> <div className="header__hamburger d-xl-none my-auto">
<div className="sidebar__toggle"> <div className="sidebar__toggle">
<a className="bar-icon" href="javascript:void(0)"> <a className="bar-icon" href="javascript:void(0)">
<i className="fa-light fa-bars-sort"></i> <i className="fa-solid fa-bars"></i>
</a> </a>
</div> </div>
</div> </div>
@ -262,22 +262,22 @@ export const Header2 = () => (
</div> </div>
</div> </div>
<div className="search-toggle-open header-search my-auto"> <div className="search-toggle-open header-search my-auto">
<div className="search-icon"><i className="icon-search"></i></div> <div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
</div> </div>
<div className="header-shopping-cart my-auto"> <div className="header-shopping-cart my-auto">
<div className="cart-icon"><a href="#"><i className="icon-shopping-cart"></i></a></div> <div className="cart-icon"><a href="#"><i className="fa-solid fa-cart-shopping"></i></a></div>
</div> </div>
<div className="header-action d-none d-xl-inline-flex gap-5"> <div className="header-action d-none d-xl-inline-flex gap-5">
<div className="header-link"> <div className="header-link">
<a className="primary-btn-2 btn-hover" href="/contact"> <a className="primary-btn-2 btn-hover" href="/contact">
GET A QUOTE &nbsp; | <i className="icon-right-arrow"></i> GET A QUOTE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
</div> </div>
</div> </div>
<div className="header-action"> <div className="header-action">
<div className="header-link-1"> <div className="header-link-1">
<div className="icon text-white"><i className="fal fa-phone-volume"></i></div> <div className="icon text-white"><i className="fa-solid fa-phone-volume"></i></div>
<div className="content"> <div className="content">
<span className="text-white">Call Us Now</span> <span className="text-white">Call Us Now</span>
<h6><a href="tel:2085550112" className="text-white">+208-555-0112</a></h6> <h6><a href="tel:2085550112" className="text-white">+208-555-0112</a></h6>
@ -287,7 +287,7 @@ export const Header2 = () => (
<div className="header__hamburger d-xl-none my-auto"> <div className="header__hamburger d-xl-none my-auto">
<div className="sidebar__toggle"> <div className="sidebar__toggle">
<a className="bar-icon" href="javascript:void(0)"> <a className="bar-icon" href="javascript:void(0)">
<i className="fa-light fa-bars-sort"></i> <i className="fa-solid fa-bars"></i>
</a> </a>
</div> </div>
</div> </div>
@ -332,15 +332,15 @@ export const Header3 = () => (
</div> </div>
</div> </div>
<div className="search-toggle-open header-search my-auto"> <div className="search-toggle-open header-search my-auto">
<div className="search-icon"><i className="icon-search"></i></div> <div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
</div> </div>
<div className="header-shopping-cart my-auto"> <div className="header-shopping-cart my-auto">
<div className="cart-icon"><a href="/shop"><i className="icon-shopping-cart"></i></a></div> <div className="cart-icon"><a href="/shop"><i className="fa-solid fa-cart-shopping"></i></a></div>
</div> </div>
<div className="header__hamburger d-xl-block my-auto"> <div className="header__hamburger d-xl-block my-auto">
<div className="sidebar__toggle"> <div className="sidebar__toggle">
<a className="bar-icon" href="javascript:void(0)"> <a className="bar-icon" href="javascript:void(0)">
<i className="fa-light fa-bars-sort"></i> <i className="fa-solid fa-bars"></i>
</a> </a>
</div> </div>
</div> </div>
@ -577,7 +577,7 @@ export const Footer3 = () => (
].map((item, i) => ( ].map((item, i) => (
<li key={i}> <li key={i}>
<div className="icon"> <div className="icon">
<i className={`fa-light fa-${item.icon}`}></i> <i className={`fa-solid fa-${item.icon}`}></i>
</div> </div>
<div className="info-details"> <div className="info-details">
<h6 className="mb-10 text-white">{item.title} </h6> <h6 className="mb-10 text-white">{item.title} </h6>

6
src/components/home/home-1/AboutSection.tsx
View File

@ -21,7 +21,7 @@ const AboutSection = () => {
<img src="/assets/img/about/about-img7.png" alt="" /> <img src="/assets/img/about/about-img7.png" alt="" />
<div className="play-btn"> <div className="play-btn">
<div className="video_player_btn"> <div className="video_player_btn">
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="icon-play"></i></a> <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
</div> </div>
</div> </div>
</div> </div>
@ -29,7 +29,7 @@ const AboutSection = () => {
<div className="working-area float-bob-y"> <div className="working-area float-bob-y">
<div className="inner p-relative"> <div className="inner p-relative">
<div className="icon-box"> <div className="icon-box">
<i className="icon-prize"></i> <i className="fa-solid fa-award"></i>
<h4><span className="counter">25</span> Years</h4> <h4><span className="counter">25</span> Years</h4>
<p>Working Experience</p> <p>Working Experience</p>
</div> </div>
@ -64,7 +64,7 @@ const AboutSection = () => {
</div> </div>
<div className="about-btn-box wow fadeInLeft" data-wow-delay="1s"> <div className="about-btn-box wow fadeInLeft" data-wow-delay="1s">
<a className="primary-btn-1 btn-hover" href="/about"> <a className="primary-btn-1 btn-hover" href="/about">
about us &nbsp; | <i className="icon-right-arrow"></i> about us &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
</div> </div>

4
src/components/home/home-1/BannerSection.tsx
View File

@ -13,11 +13,11 @@ const BannerSection = () => {
<p className="banner-text">We denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure.</p> <p className="banner-text">We denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure.</p>
<div className="banner-btn-area"> <div className="banner-btn-area">
<a className="primary-btn-1 btn-hover" href="/services"> <a className="primary-btn-1 btn-hover" href="/services">
eXPLORE mORE &nbsp; | <i className="icon-right-arrow"></i> eXPLORE mORE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="play-btn popup-video"> <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="play-btn popup-video">
<div className="icon-1"><i className="icon-play"></i></div> <div className="icon-1"><i className="fa-solid fa-play"></i></div>
<span>How It Works</span> <span>How It Works</span>
</a> </a>
</div> </div>

6
src/components/home/home-1/BlogSection.tsx
View File

@ -14,14 +14,14 @@ const BlogSection = () => (
<a className="blog-image w-img" href="#"><img src={blog.image} alt="" /></a> <a className="blog-image w-img" href="#"><img src={blog.image} alt="" /></a>
<div className="blog-content"> <div className="blog-content">
<div className="post-meta"> <div className="post-meta">
<span className="p-relative"><a href="#"><i className="fal fa-user"></i> By {blog.authorName}</a></span> <span className="p-relative"><a href="#"><i className="fa-solid fa-user"></i> By {blog.authorName}</a></span>
<span className="p-relative"><a href="#"><i className="fal fa-calendar-alt"></i>{blog.date}</a></span> <span className="p-relative"><a href="#"><i className="fa-solid fa-calendar-days"></i>{blog.date}</a></span>
</div> </div>
<hr /> <hr />
<h5 className="blog-title mb-30"><a href="#">{blog.title}</a></h5> <h5 className="blog-title mb-30"><a href="#">{blog.title}</a></h5>
<div className="blog-link"> <div className="blog-link">
<a className="primary-btn-5 btn-hover" href="#"> <a className="primary-btn-5 btn-hover" href="#">
Read MORE &nbsp; | <i className="icon-right-arrow"></i> Read MORE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
</div> </div>

6
src/components/home/home-1/ChooseSection.tsx
View File

@ -12,9 +12,9 @@ const ChooseSection = () => (
<h3 className="section-title mt-10">What's Make Us Different</h3> <h3 className="section-title mt-10">What's Make Us Different</h3>
</div> </div>
{[ {[
{ icon: "icon-roof-4", title: "Commercial Service", delay: ".5s" }, { icon: "fa-solid fa-building", title: "Commercial Service", delay: ".5s" },
{ icon: "icon-target", title: "Mission Statement Metatron", delay: ".7s" }, { icon: "fa-solid fa-bullseye", title: "Mission Statement Metatron", delay: ".7s" },
{ icon: "icon-help", title: "Safety And Reliability", delay: ".9s" } { icon: "fa-solid fa-handshake-angle", title: "Safety And Reliability", delay: ".9s" }
].map((item, i) => ( ].map((item, i) => (
<React.Fragment key={i}> <React.Fragment key={i}>
<div className={`choose-area-icon-box mb-15 wow fadeInRight`} data-wow-delay={item.delay}> <div className={`choose-area-icon-box mb-15 wow fadeInRight`} data-wow-delay={item.delay}>

2
src/components/home/home-1/CtaSection.tsx
View File

@ -10,7 +10,7 @@ const CtaSection = () => (
<div className="col-xxl-6 col-lg-6"> <div className="col-xxl-6 col-lg-6">
<div className="content p-relative"> <div className="content p-relative">
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-12.png)" }}></div> <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-12.png)" }}></div>
<div className="icon-box"><i className="fal fa-phone-volume"></i></div> <div className="icon-box"><i className="fa-solid fa-phone-volume"></i></div>
<h3 className="mb-15">Need Any Help?</h3> <h3 className="mb-15">Need Any Help?</h3>
<h5><a href="tel:2085550112">+208-555-0112</a></h5> <h5><a href="tel:2085550112">+208-555-0112</a></h5>
</div> </div>

6
src/components/home/home-1/ProjectsSection.tsx
View File

@ -15,8 +15,8 @@ const ProjectsSection = () => {
<div className="col-xxl-6"> <div className="col-xxl-6">
<div className="project_1_navigation__wrapprer position-relative z-1 text-end mt-30"> <div className="project_1_navigation__wrapprer position-relative z-1 text-end mt-30">
<div className="common-slider-navigation"> <div className="common-slider-navigation">
<button className="project-1-button-prev"><i className="icon-arrow-left-angle"></i></button> <button className="project-1-button-prev"><i className="fa-solid fa-chevron-left"></i></button>
<button className="project-1-button-next"><i className="icon-arrow-right-angle"></i></button> <button className="project-1-button-next"><i className="fa-solid fa-chevron-right"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -33,7 +33,7 @@ const ProjectsSection = () => {
<h6 className="mb-5">{project.tag}</h6> <h6 className="mb-5">{project.tag}</h6>
<h5><a href="#">{project.title}</a></h5> <h5><a href="#">{project.title}</a></h5>
</div> </div>
<div className="icon-area"><a href="#"><i className="icon-arrow-up"></i></a></div> <div className="icon-area"><a href="#"><i className="fa-solid fa-arrow-right"></i></a></div>
</div> </div>
</div> </div>
</div> </div>

6
src/components/home/home-1/ServiceSliderSection.tsx
View File

@ -24,8 +24,8 @@ const ServiceSliderSection = () => {
<div className="col-xxl-6"> <div className="col-xxl-6">
<div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30"> <div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30">
<div className="common-slider-navigation"> <div className="common-slider-navigation">
<button className="service-1-button-prev"><i className="icon-arrow-left-angle"></i></button> <button className="service-1-button-prev"><i className="fa-solid fa-chevron-left"></i></button>
<button className="service-1-button-next"><i className="icon-arrow-right-angle"></i></button> <button className="service-1-button-next"><i className="fa-solid fa-chevron-right"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -42,7 +42,7 @@ const ServiceSliderSection = () => {
</div> </div>
<h4 className="mb-15"><a href="#">{service.title}</a></h4> <h4 className="mb-15"><a href="#">{service.title}</a></h4>
<p className="mb-25">{service.description}</p> <p className="mb-25">{service.description}</p>
<a href="#" className="service-btn">Read More <i className="icon-arrow-right-double"></i></a> <a href="#" className="service-btn">Read More <i className="fa-solid fa-angles-right"></i></a>
</div> </div>
</div> </div>
</div> </div>

186
src/components/home/home-1/ServiceThreeSlider.tsx Normal file
View File

@ -0,0 +1,186 @@
"use client";
import React from "react";
import Link from "next/link";
const ServiceThreeSlider = () => {
const services = [
{
title: "Network Infrastructure",
text: "Solution the connection, we create platforms business Solution",
icon: "fa-solid fa-network-wired",
image: "/assets/img/about/about-img14.png",
link: "/services"
},
{
title: "Data Management",
text: "Solution the connection, we create platforms business Solution",
icon: "fa-solid fa-database",
image: "/assets/img/about/about-img15.png",
link: "/services"
},
{
title: "Technology Solution",
text: "Solution the connection, we create platforms business Solution",
icon: "fa-solid fa-microchip",
image: "/assets/img/about/about-img13.png",
link: "/services"
},
{
title: "Cloud Computing",
text: "Solution the connection, we create platforms business Solution",
icon: "fa-solid fa-cloud",
image: "/assets/img/about/about-img14.png",
link: "/services"
},
{
title: "Cyber Security",
text: "Solution the connection, we create platforms business Solution",
icon: "fa-solid fa-shield-halved",
image: "/assets/img/about/about-img15.png",
link: "/services"
},
{
title: "IT Consultancy",
text: "Solution the connection, we create platforms business Solution",
icon: "fa-solid fa-user-tie",
image: "/assets/img/about/about-img13.png",
link: "/services"
}
];
return (
<section className="service-slider-section service-three section-space dark-bg p-relative" style={{ background: "#07172b" }}>
<div className="shape-1 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-10.png)" }}></div>
<div className="shape-2 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-9.png)" }}></div>
<div className="shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-11.png)" }}></div>
<div className="small-container">
<div className="row align-items-end">
<div className="col-xxl-6 col-xl-6">
<div className="title-box mb-50 wow fadeInLeft" data-wow-delay=".5s">
<span className="section-sub-title no-border text-white">OUR BEST SERVICE</span>
<h3 className="section-title mt-10 text-white">We Are Service Your Business</h3>
</div>
</div>
<div className="col-xxl-6 col-xl-6">
<div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30 mb-50">
<div className="common-slider-navigation">
<button className="service-1-button-prev slider-nav-btn"><i className="fa-solid fa-chevron-left"></i></button>
<button className="service-1-button-next slider-nav-btn"><i className="fa-solid fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div className="swiper service-active-1">
<div className="swiper-wrapper">
{services.map((service, index) => (
<div key={index} className="swiper-slide">
<div className="service-three__item text-center">
<div className="service-three__item__content">
<div className="service-three__item__icon">
<span className={service.icon}></span>
</div>
<h3 className="service-three__item__title">
<Link href={service.link}>{service.title}</Link>
</h3>
<p className="service-three__item__text text-black">{service.text}</p>
</div>
<div className="service-three__item__image">
<img src={service.image} alt={service.title} className="service-img-fixed" />
</div>
</div>
</div>
))}
</div>
</div>
</div>
<style jsx>{`
.dark-bg {
background: #07172b !important;
}
.text-white {
color: #ffffff !important;
}
.section-sub-title.text-white::before {
background-color: #ffffff;
}
.service-three__item {
margin-top: 40px;
// background: #fff;
border-radius: 20px;
overflow: hidden;
transition: all 500ms ease;
}
.service-three__item__content {
padding: 0 28px 30px;
}
.service-three__item__icon {
position: relative;
top: -40px;
width: 84px;
height: 84px;
background-color: #f1f5f9;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto -20px;
color: #3779b9;
font-size: 36px;
transition: all 500ms ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.service-three__item:hover .service-three__item__icon {
background-color: #3779b9;
color: #fff;
}
.service-three__item__title {
font-size: 22px;
font-weight: 700;
margin-bottom: 12px;
}
.service-three__item__title a {
color: #1a1f2b !important;
}
.service-three__item__text {
font-size: 15px;
color: #64748b;
line-height: 1.6;
margin-bottom: 0;
}
.service-three__item__image {
position: relative;
overflow: hidden;
line-height: 0;
}
.service-img-fixed {
width: 100%;
height: 250px !important;
object-fit: cover;
clip-path: polygon(0% 0%, 100% 0, 100% 69%, 50% 100%, 0 69%);
transition: all 500ms ease;
}
.service-three__item:hover .service-img-fixed {
transform: scale(1.05);
}
.slider-nav-btn {
border: 1px solid rgba(255, 255, 255, 0.2);
background: transparent;
color: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
transition: all 0.3s ease;
}
.slider-nav-btn:hover {
background: #3779b9;
border-color: #3779b9;
}
`}</style>
</section>
);
};
export default ServiceThreeSlider;

2
src/components/home/home-1/TeamSection.tsx
View File

@ -20,7 +20,7 @@ const TeamSection = () => (
<span>{member.role}</span> <span>{member.role}</span>
</div> </div>
<div className="social-links p-relative"> <div className="social-links p-relative">
<span><i className="icon-share"></i></span> <span><i className="fa-solid fa-share-nodes"></i></span>
<ul> <ul>
<li><a href="#"><i className="fab fa-facebook-f"></i></a></li> <li><a href="#"><i className="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i className="fab fa-linkedin-in"></i></a></li> <li><a href="#"><i className="fab fa-linkedin-in"></i></a></li>

6
src/components/home/home-1/TestimonialsSection.tsx
View File

@ -10,7 +10,7 @@ const TestimonialsSection = () => (
<figure className="image w-img"><img src="/assets/imgs/resources/video-1.jpg" alt="" /></figure> <figure className="image w-img"><img src="/assets/imgs/resources/video-1.jpg" alt="" /></figure>
<div className="play-btn"> <div className="play-btn">
<div className="video_player_btn"> <div className="video_player_btn">
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="icon-play"></i></a> <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
</div> </div>
</div> </div>
</div> </div>
@ -28,11 +28,11 @@ const TestimonialsSection = () => (
<div key={i} className="swiper-slide"> <div key={i} className="swiper-slide">
<div className="testimonials-two-box"> <div className="testimonials-two-box">
<div className="author-image"><img src={`/assets/imgs/resources/testimonials-${num}.png`} alt="" /></div> <div className="author-image"><img src={`/assets/imgs/resources/testimonials-${num}.png`} alt="" /></div>
<div className="icon-1"><i className="icon-comma-double"></i></div> <div className="icon-1"><i className="fa-solid fa-quote-right"></i></div>
<h4>Kathryn Murphy</h4> <h4>Kathryn Murphy</h4>
<span>Engineering</span> <span>Engineering</span>
<ul className="ratings"> <ul className="ratings">
{[1, 2, 3, 4, 5].map((r) => <li key={r}><i className="fa fa-star"></i></li>)} {[1, 2, 3, 4, 5].map((r) => <li key={r}><i className="fa-solid fa-star"></i></li>)}
</ul> </ul>
<p>“ Consectetur adipiscing elit. Integer is nunc viverra laoreet est the is porta pretium metus aliquam eget maecenas porta is nunc viverra Aenean ”</p> <p>“ Consectetur adipiscing elit. Integer is nunc viverra laoreet est the is porta pretium metus aliquam eget maecenas porta is nunc viverra Aenean ”</p>
</div> </div>

6
src/components/home/home-2/About2Section.tsx
View File

@ -16,7 +16,7 @@ const About2Section = () => (
</div> </div>
<div className="icon-box"> <div className="icon-box">
<div className="icon"> <div className="icon">
<i className="icon-prize-1"></i> <i className="fa-solid fa-award"></i>
</div> </div>
<div className="content"> <div className="content">
<h3 className="mb-10"><span className="counter">10</span>+</h3> <h3 className="mb-10"><span className="counter">10</span>+</h3>
@ -51,12 +51,12 @@ const About2Section = () => (
</div> </div>
<div className="about-2-btn-area"> <div className="about-2-btn-area">
<a className="primary-btn-1 btn-hover" href="/about"> <a className="primary-btn-1 btn-hover" href="/about">
about us &nbsp; | <i className="icon-right-arrow"></i> about us &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
<div className="call-us"> <div className="call-us">
<div className="icon-1"> <div className="icon-1">
<i className="fal fa-phone-volume"></i> <i className="fa-solid fa-phone-volume"></i>
</div> </div>
<div className="content p-relative"> <div className="content p-relative">
<span>Call Us Now</span> <span>Call Us Now</span>

2
src/components/home/home-2/BannerSection.tsx
View File

@ -15,7 +15,7 @@ const BannerSection = () => {
<p className="banner-text">We denounce with righteous indignation and dislike men who are so<br /> beguiled and demoralized by the charms of pleasure.</p> <p className="banner-text">We denounce with righteous indignation and dislike men who are so<br /> beguiled and demoralized by the charms of pleasure.</p>
<div className="banner-btn-area-2"> <div className="banner-btn-area-2">
<a className="primary-btn-1 btn-hover" href="/services"> <a className="primary-btn-1 btn-hover" href="/services">
VIEW SERVICES &nbsp; | <i className="icon-right-arrow"></i> VIEW SERVICES &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
<div className="round-image-area"> <div className="round-image-area">

14
src/components/home/home-2/Blog2Section.tsx
View File

@ -9,7 +9,7 @@ const Blog2Section = () => (
<h3 className="section-title mt-10">Explore Blogs And News</h3> <h3 className="section-title mt-10">Explore Blogs And News</h3>
</div> </div>
<a className="primary-btn-1 btn-hover" href="#"> <a className="primary-btn-1 btn-hover" href="#">
view all &nbsp; | <i className="icon-right-arrow"></i> view all &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
</div> </div>
@ -22,14 +22,14 @@ const Blog2Section = () => (
</a> </a>
<div className="blog-content-area"> <div className="blog-content-area">
<div className="post-meta"> <div className="post-meta">
<span className="p-relative"><a href="#"><i className="fal fa-user"></i> By Admin</a></span> <span className="p-relative"><a href="#"><i className="fa-solid fa-user"></i> By Admin</a></span>
<span className="p-relative"><a href="#"><i className="fal fa-calendar-alt"></i>{blogs2[0].date}</a></span> <span className="p-relative"><a href="#"><i className="fa-solid fa-calendar-days"></i>{blogs2[0].date}</a></span>
</div> </div>
<hr /> <hr />
<h5 className="blog-title"><a href="#">{blogs2[0].title}</a></h5> <h5 className="blog-title"><a href="#">{blogs2[0].title}</a></h5>
<p className="blog-text">Lorem ipsum dolor sit amet consectetur the adipiscing elit Morbi is sodales consequat</p> <p className="blog-text">Lorem ipsum dolor sit amet consectetur the adipiscing elit Morbi is sodales consequat</p>
<a className="primary-btn-5 btn-hover" href="#"> <a className="primary-btn-5 btn-hover" href="#">
Read MORE &nbsp; | <i className="icon-right-arrow"></i> Read MORE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
</div> </div>
@ -41,14 +41,14 @@ const Blog2Section = () => (
<div key={blog.id} className="blog-style-two d-block"> <div key={blog.id} className="blog-style-two d-block">
<div className="blog-content-area"> <div className="blog-content-area">
<div className="post-meta"> <div className="post-meta">
<span className="p-relative"><a href="#"><i className="fal fa-user"></i> By Admin</a></span> <span className="p-relative"><a href="#"><i className="fa-solid fa-user"></i> By Admin</a></span>
<span className="p-relative"><a href="#"><i className="fal fa-calendar-alt"></i>{blog.date}</a></span> <span className="p-relative"><a href="#"><i className="fa-solid fa-calendar-days"></i>{blog.date}</a></span>
</div> </div>
<hr /> <hr />
<h5 className="blog-title"><a href="#">{blog.title}</a></h5> <h5 className="blog-title"><a href="#">{blog.title}</a></h5>
<p className="blog-text">Lorem ipsum dolor sit amet consectetur the adipiscing elit Morbi is sodales consequat</p> <p className="blog-text">Lorem ipsum dolor sit amet consectetur the adipiscing elit Morbi is sodales consequat</p>
<a className="primary-btn-5 btn-hover" href="#"> <a className="primary-btn-5 btn-hover" href="#">
Read MORE &nbsp; | <i className="icon-right-arrow"></i> Read MORE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
</div> </div>

4
src/components/home/home-2/FeaturesSection.tsx
View File

@ -1,6 +1,6 @@
import { features2 } from "@/utils/data"; import { features2 } from "@/utils/data";
const FeaturesSection = () => ( const FeaturesSection2 = () => (
<section className="features-section pt-80 pb-80 bg-color-1 p-relative mb-120"> <section className="features-section pt-80 pb-80 bg-color-1 p-relative mb-120">
<div className="bg-shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-27.png)" }}></div> <div className="bg-shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-27.png)" }}></div>
<div className="bg-shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-28.png)" }}></div> <div className="bg-shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-28.png)" }}></div>
@ -24,4 +24,4 @@ const FeaturesSection = () => (
</section> </section>
); );
export default FeaturesSection; export default FeaturesSection2;

4
src/components/home/home-2/ProjectSlider2Section.tsx
View File

@ -12,7 +12,7 @@ const ProjectSlider2Section = () => {
<h3 className="section-title mt-10">Our Latest Projects</h3> <h3 className="section-title mt-10">Our Latest Projects</h3>
</div> </div>
<a className="primary-btn-1 btn-hover" href="#"> <a className="primary-btn-1 btn-hover" href="#">
all PROJECTS &nbsp; | <i className="icon-right-arrow"></i> all PROJECTS &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
</div> </div>
@ -32,7 +32,7 @@ const ProjectSlider2Section = () => {
<h5><a href="#">{project.title}</a></h5> <h5><a href="#">{project.title}</a></h5>
</div> </div>
<a className="icon-1" href="#"> <a className="icon-1" href="#">
<i className="icon-arrow-up"></i> <i className="fa-solid fa-arrow-right"></i>
</a> </a>
</div> </div>
</div> </div>

4
src/components/home/home-2/ServiceTabSection.tsx
View File

@ -20,7 +20,7 @@ const ServiceTabSection = () => {
<h3 className="section-title mt-10 text-white p-relative">Exclusive IT Services</h3> <h3 className="section-title mt-10 text-white p-relative">Exclusive IT Services</h3>
</div> </div>
<a className="primary-btn-4 btn-hover mt-20" href="/services"> <a className="primary-btn-4 btn-hover mt-20" href="/services">
all services &nbsp; | <i className="icon-right-arrow"></i> all services &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
</div> </div>
@ -60,7 +60,7 @@ const ServiceTabSection = () => {
<li>Award Winning Company</li> <li>Award Winning Company</li>
</ul> </ul>
<a className="primary-btn-1 btn-hover mt-20" href="/services"> <a className="primary-btn-1 btn-hover mt-20" href="/services">
Read more &nbsp; | <i className="icon-right-arrow"></i> Read more &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
</div> </div>

8
src/components/home/home-2/TestimonialsSection.tsx
View File

@ -81,13 +81,13 @@ const TestimonialsSection = () => {
<img src={`/assets/imgs/resources/testimonials-${num}.png`} alt="" /> <img src={`/assets/imgs/resources/testimonials-${num}.png`} alt="" />
</figure> </figure>
<div className="icon-1"> <div className="icon-1">
<i className="icon-comma-double"></i> <i className="fa-solid fa-quote-right"></i>
</div> </div>
<div className="author-info"> <div className="author-info">
<h5>Kathryn Murphy</h5> <h5>Kathryn Murphy</h5>
<span>Engineering</span> <span>Engineering</span>
<ul className="rating-list"> <ul className="rating-list">
{[1, 2, 3, 4, 5].map((s) => <li key={s}><i className="fa fa-star"></i></li>)} {[1, 2, 3, 4, 5].map((s) => <li key={s}><i className="fa-solid fa-star"></i></li>)}
</ul> </ul>
</div> </div>
</div> </div>
@ -101,8 +101,8 @@ const TestimonialsSection = () => {
</div> </div>
<div className="testimonials_1_navigation__wrapprer position-relative z-1 text-center mt-40"> <div className="testimonials_1_navigation__wrapprer position-relative z-1 text-center mt-40">
<div className="common-slider-navigation"> <div className="common-slider-navigation">
<button className="testimonial-1-button-prev p-relative"><i className="icon-arrow-left-angle"></i></button> <button className="testimonial-1-button-prev p-relative"><i className="fa-solid fa-chevron-left"></i></button>
<button className="testimonial-1-button-next p-relative"><i className="icon-arrow-right-angle"></i></button> <button className="testimonial-1-button-next p-relative"><i className="fa-solid fa-chevron-right"></i></button>
</div> </div>
</div> </div>
</div> </div>

2
src/components/home/home-2/TextSliderSection.tsx
View File

@ -7,7 +7,7 @@ const TextSliderSection = () => (
{[1, 2, 3, 4, 5, 6].map((i) => ( {[1, 2, 3, 4, 5, 6].map((i) => (
<div key={i} className="slide-box"> <div key={i} className="slide-box">
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30 0L38.1027 21.8973L60 30L38.1027 38.1027L30 60L21.8973 38.1027L0 30L21.8973 21.8973L30 0Z" fill="#3c72fc" /> <path d="M30 0L38.1027 21.8973L60 30L38.1027 38.1027L30 60L21.8973 38.1027L0 30L21.8973 21.8973L30 0Z" fill="#3779b9" />
</svg> </svg>
<h1>{["Smart Solutions", "expert guidance", "strategic insights", "personalized advice", "comprehensive planning", "Transform Ideas"][i - 1]}</h1> <h1>{["Smart Solutions", "expert guidance", "strategic insights", "personalized advice", "comprehensive planning", "Transform Ideas"][i - 1]}</h1>
</div> </div>

2
src/components/home/home-3/AboutSection.tsx
View File

@ -43,7 +43,7 @@ const AboutSection = () => (
<span className="progress-count">95%</span> <span className="progress-count">95%</span>
</div> </div>
<a className="primary-btn-1 btn-hover" href="/about"> <a className="primary-btn-1 btn-hover" href="/about">
about us &nbsp; | <i className="icon-right-arrow"></i> about us &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
</div> </div>

2
src/components/home/home-3/BannerSection.tsx
View File

@ -16,7 +16,7 @@ const BannerSection = () => (
<div className="header-action d-none d-xl-inline-flex gap-5"> <div className="header-action d-none d-xl-inline-flex gap-5">
<div className="header-link"> <div className="header-link">
<a className="primary-btn-1 btn-hover" href="/contact"> <a className="primary-btn-1 btn-hover" href="/contact">
GET A QUOTE &nbsp; | <i className="icon-right-arrow"></i> GET A QUOTE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
</div> </div>

8
src/components/home/home-3/BlogSection.tsx
View File

@ -9,7 +9,7 @@ const BlogSection = () => (
<h3 className="section-title mt-10">Explore Blogs and News</h3> <h3 className="section-title mt-10">Explore Blogs and News</h3>
</div> </div>
<a className="primary-btn-1 btn-hover" href="#"> <a className="primary-btn-1 btn-hover" href="#">
view all &nbsp; | <i className="icon-right-arrow"></i> view all &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
</div> </div>
@ -22,14 +22,14 @@ const BlogSection = () => (
</a> </a>
<div className="blog-content"> <div className="blog-content">
<div className="post-meta"> <div className="post-meta">
<span className="p-relative"><a href="#"><i className="fal fa-user"></i> By {blog.authorName}</a></span> <span className="p-relative"><a href="#"><i className="fa-solid fa-user"></i> By {blog.authorName}</a></span>
<span className="p-relative"><a href="#"><i className="fal fa-calendar-alt"></i>{blog.date}</a></span> <span className="p-relative"><a href="#"><i className="fa-solid fa-calendar-days"></i>{blog.date}</a></span>
</div> </div>
<hr /> <hr />
<h5 className="blog-title mb-30"><a href="#">{blog.title}</a></h5> <h5 className="blog-title mb-30"><a href="#">{blog.title}</a></h5>
<div className="blog-link"> <div className="blog-link">
<a className="primary-btn-1 btn-hover" href="#"> <a className="primary-btn-1 btn-hover" href="#">
Read MORE &nbsp; | <i className="icon-right-arrow"></i> Read MORE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</a> </a>
</div> </div>

8
src/components/home/home-3/ChooseSection.tsx
View File

@ -16,7 +16,7 @@ const ChooseSection = () => (
<img src="/assets/imgs/about/about-2.jpg" alt="" /> <img src="/assets/imgs/about/about-2.jpg" alt="" />
<div className="play-btn"> <div className="play-btn">
<div className="video_player_btn"> <div className="video_player_btn">
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="icon-play"></i></a> <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
</div> </div>
</div> </div>
</div> </div>
@ -33,10 +33,10 @@ const ChooseSection = () => (
<p>It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p> <p>It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
<div className="row g-4 pt-35"> <div className="row g-4 pt-35">
{[ {[
{ icon: "icon-roof-7", label: "Quality Materials", isIcon: true }, { icon: "fa-solid fa-microchip", label: "Quality Materials", isIcon: true },
{ icon: "icon-8.png", label: "Best Services", isIcon: false }, { icon: "icon-8.png", label: "Best Services", isIcon: false },
{ icon: "icon-help", label: "24/7 Call Support", isIcon: true }, { icon: "fa-solid fa-headset", label: "24/7 Call Support", isIcon: true },
{ icon: "icon-prize", label: "Award Winning", isIcon: true } { icon: "fa-solid fa-award", label: "Award Winning", isIcon: true }
].map((item, i) => ( ].map((item, i) => (
<div key={i} className="col-lg-6"> <div key={i} className="col-lg-6">
<div className="icon-box-area"> <div className="icon-box-area">

6
src/components/home/home-3/ProjectsSection.tsx
View File

@ -15,8 +15,8 @@ const ProjectsSection = () => {
<div className="col-xxl-6"> <div className="col-xxl-6">
<div className="project_1_navigation__wrapprer position-relative z-1 text-end mt-30"> <div className="project_1_navigation__wrapprer position-relative z-1 text-end mt-30">
<div className="common-slider-navigation"> <div className="common-slider-navigation">
<button className="project-1-button-prev p-relative"><i className="icon-arrow-left-angle"></i></button> <button className="project-1-button-prev p-relative"><i className="fa-solid fa-chevron-left"></i></button>
<button className="project-1-button-next p-relative"><i className="icon-arrow-right-angle"></i></button> <button className="project-1-button-next p-relative"><i className="fa-solid fa-chevron-right"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -36,7 +36,7 @@ const ProjectsSection = () => {
<h5><a href="#">{project.title}</a></h5> <h5><a href="#">{project.title}</a></h5>
</div> </div>
<div className="icon-area"> <div className="icon-area">
<a href="#"><i className="icon-arrow-up"></i></a> <a href="#"><i className="fa-solid fa-arrow-right"></i></a>
</div> </div>
</div> </div>
</div> </div>

6
src/components/home/home-3/ServiceSection.tsx
View File

@ -43,8 +43,8 @@ const ServiceSection = () => {
</div> </div>
<div className="service_1_navigation__wrapprer position-relative z-1"> <div className="service_1_navigation__wrapprer position-relative z-1">
<div className="common-slider-navigation"> <div className="common-slider-navigation">
<button className="service-active-2-button-prev p-relative"><i className="icon-arrow-left-angle"></i></button> <button className="service-active-2-button-prev p-relative"><i className="fa-solid fa-chevron-left"></i></button>
<button className="service-active-2-button-next p-relative"><i className="icon-arrow-right-angle"></i></button> <button className="service-active-2-button-next p-relative"><i className="fa-solid fa-chevron-right"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -65,7 +65,7 @@ const ServiceSection = () => {
<p className="mb-25">{service.description}</p> <p className="mb-25">{service.description}</p>
</div> </div>
<div className="btn-area"> <div className="btn-area">
<a href="#">services details <i className="icon-arrow-right-double"></i></a> <a href="#">services details <i className="fa-solid fa-angles-right"></i></a>
</div> </div>
</div> </div>
</div> </div>

8
src/components/layout/Footer1.tsx
View File

@ -14,10 +14,10 @@ const Footer1 = () => (
</figure> </figure>
<p className="mt-40 mb-40">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p> <p className="mt-40 mb-40">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p>
<div className="footer-socials"> <div className="footer-socials">
<span><a href="#"><i className="fab fa-facebook-f"></i></a></span> <span><a href="#"><i className="fa-brands fa-facebook-f"></i></a></span>
<span><a href="#"><i className="fab fa-twitter"></i></a></span> <span><a href="#"><i className="fa-brands fa-twitter"></i></a></span>
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span> <span><a href="#"><i className="fa-brands fa-linkedin-in"></i></a></span>
<span><a href="#"><i className="fab fa-youtube"></i></a></span> <span><a href="#"><i className="fa-brands fa-youtube"></i></a></span>
</div> </div>
</div> </div>
</div> </div>

8
src/components/layout/Footer2.tsx
View File

@ -68,10 +68,10 @@ const Footer2 = () => (
<span>© All Copyright 2024 by <a href="#">Metatron</a></span> <span>© All Copyright 2024 by <a href="#">Metatron</a></span>
</div> </div>
<div className="footer-socials p-relative"> <div className="footer-socials p-relative">
<span><a href="#"><i className="fab fa-facebook-f"></i></a></span> <span><a href="#"><i className="fa-brands fa-facebook-f"></i></a></span>
<span><a href="#"><i className="fab fa-twitter"></i></a></span> <span><a href="#"><i className="fa-brands fa-twitter"></i></a></span>
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span> <span><a href="#"><i className="fa-brands fa-linkedin-in"></i></a></span>
<span><a href="#"><i className="fab fa-youtube"></i></a></span> <span><a href="#"><i className="fa-brands fa-youtube"></i></a></span>
</div> </div>
<div className="right-area p-relative"> <div className="right-area p-relative">
<span><Link href="#">Terms & Condition</Link></span> <span><Link href="#">Terms & Condition</Link></span>

10
src/components/layout/Footer3.tsx
View File

@ -16,10 +16,10 @@ const Footer3 = () => (
</figure> </figure>
<p className="mt-40 mb-40 text-white">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p> <p className="mt-40 mb-40 text-white">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p>
<div className="footer-socials p-relative"> <div className="footer-socials p-relative">
<span><a href="#"><i className="fab fa-facebook-f"></i></a></span> <span><a href="#"><i className="fa-brands fa-facebook-f"></i></a></span>
<span><a href="#"><i className="fab fa-twitter"></i></a></span> <span><a href="#"><i className="fa-brands fa-twitter"></i></a></span>
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span> <span><a href="#"><i className="fa-brands fa-linkedin-in"></i></a></span>
<span><a href="#"><i className="fab fa-youtube"></i></a></span> <span><a href="#"><i className="fa-brands fa-youtube"></i></a></span>
</div> </div>
</div> </div>
</div> </div>
@ -58,7 +58,7 @@ const Footer3 = () => (
].map((item, i) => ( ].map((item, i) => (
<li key={i}> <li key={i}>
<div className="icon"> <div className="icon">
<i className={`fa-light fa-${item.icon}`}></i> <i className={`fa-solid fa-${item.icon === 'phone-alt' ? 'phone' : item.icon}`}></i>
</div> </div>
<div className="info-details"> <div className="info-details">
<h6 className="mb-10 text-white">{item.title} </h6> <h6 className="mb-10 text-white">{item.title} </h6>

13
src/components/layout/Header/MobileMenu.tsx
View File

@ -11,12 +11,13 @@ interface MobileMenuProps {
} }
const navItems = [ const navItems = [
{ title: 'Home', link: '#home' }, { title: 'Home', link: '/' },
{ title: 'About', link: '#about' }, { title: 'About', link: '/about-us' },
{ title: 'Services', link: '#services' }, { title: 'Services', link: '/services' },
{ title: 'Portfolio', link: '#portfolio' }, { title: 'Careers', link: '/careers' },
{ title: 'FAQ', link: '#faq' }, { title: 'FAQ', link: '/faq' },
{ title: 'Contact', link: '#contact-trigger' }, { title: 'Blog', link: '/blog' },
{ title: 'Contact', link: '/contact' },
]; ];
const MobileMenu: React.FC<MobileMenuProps> = ({ isMobileMenuOpen, toggleMobileMenu }) => { const MobileMenu: React.FC<MobileMenuProps> = ({ isMobileMenuOpen, toggleMobileMenu }) => {

13
src/components/layout/Header/NavItems.tsx
View File

@ -9,12 +9,13 @@ interface NavItemsProps {
} }
const navItems = [ const navItems = [
{ title: 'Home', link: '#home' }, { title: 'Home', link: '/' },
{ title: 'About', link: '#about' }, { title: 'About', link: '/about-us' },
{ title: 'Services', link: '#services' }, { title: 'Services', link: '/services' },
{ title: 'Portfolio', link: '#portfolio' }, { title: 'Careers', link: '/careers' },
{ title: 'FAQ', link: '#faq' }, { title: 'FAQ', link: '/faq' },
{ title: 'Contact', link: '#contact-trigger' }, { title: 'Blog', link: '/blog' },
{ title: 'Contact', link: '/contact' },
]; ];
const NavItems: React.FC<NavItemsProps> = () => { const NavItems: React.FC<NavItemsProps> = () => {

32
src/components/layout/Header1.tsx
View File

@ -21,14 +21,20 @@ const Header1 = () => {
<div className="container-fluid bg-color-1"> <div className="container-fluid bg-color-1">
<div className="header-top"> <div className="header-top">
<div className="header-top-contact-info"> <div className="header-top-contact-info">
<span className="email p-relative"><a href="mailto:info@Metatron.com">info@Metatron.com</a></span> <span className="p-relative d-inline-flex align-items-center me-4" style={{ gap: '10px', paddingLeft: 0 }}>
<span className="time p-relative">Hours: Mon - Sat: 10.00 AM - 4.00 PM</span> <i className="fa-solid fa-envelope" style={{ position: 'static', transform: 'none' }}></i>
<a href="mailto:info@Metatron.com">info@Metatron.com</a>
</span>
<span className="p-relative d-inline-flex align-items-center" style={{ gap: '10px', paddingLeft: 0 }}>
<i className="fa-solid fa-clock" style={{ position: 'static', transform: 'none' }}></i>
Hours: Mon - Sat: 10.00 AM - 4.00 PM
</span>
</div> </div>
<div className="header-top-socials"> <div className="header-top-socials">
<span><a href="#"><i className="fab fa-facebook-f"></i></a></span> <span><a href="#"><i className="fa-brands fa-facebook-f"></i></a></span>
<span><a href="#"><i className="fab fa-twitter"></i></a></span> <span><a href="#"><i className="fa-brands fa-twitter"></i></a></span>
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span> <span><a href="#"><i className="fa-brands fa-linkedin-in"></i></a></span>
<span><a href="#"><i className="fab fa-youtube"></i></a></span> <span><a href="#"><i className="fa-brands fa-youtube"></i></a></span>
</div> </div>
</div> </div>
</div> </div>
@ -47,26 +53,26 @@ const Header1 = () => {
<nav id="mobile-menu"><NavMenu /></nav> <nav id="mobile-menu"><NavMenu /></nav>
</div> </div>
</div> </div>
<div {/* <div
className="search-toggle-open header-search my-auto" className="search-toggle-open header-search my-auto"
onClick={openSearch} onClick={openSearch}
> >
<div className="search-icon"><i className="icon-search"></i></div> <div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
</div> </div>
<div className="header-shopping-cart my-auto"> <div className="header-shopping-cart my-auto">
<div className="cart-icon"><a href="#"><i className="icon-shopping-cart"></i></a></div> <div className="cart-icon"><a href="#"><i className="fa-solid fa-cart-shopping"></i></a></div>
</div> </div> */}
<div className="header-action d-none d-xl-inline-flex gap-5"> <div className="header-action d-none d-xl-inline-flex gap-5">
<div className="header-link"> <div className="header-link">
<Link className="primary-btn-1 btn-hover" href="/contact"> <Link className="primary-btn-1 btn-hover" href="/contact">
GET A QUOTE &nbsp; | <i className="icon-right-arrow"></i> GET A QUOTE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</Link> </Link>
</div> </div>
</div> </div>
<div className="header-action"> <div className="header-action">
<div className="header-link-1"> <div className="header-link-1">
<div className="icon"><i className="fal fa-phone-volume"></i></div> <div className="icon"><i className="fa-solid fa-phone-volume"></i></div>
<div className="content"> <div className="content">
<span>Call Us Now</span> <span>Call Us Now</span>
<h6><a href="tel:2085550112">+208-555-0112</a></h6> <h6><a href="tel:2085550112">+208-555-0112</a></h6>
@ -79,7 +85,7 @@ const Header1 = () => {
> >
<div className="sidebar__toggle"> <div className="sidebar__toggle">
<a className="bar-icon" href="javascript:void(0)"> <a className="bar-icon" href="javascript:void(0)">
<i className="fa-light fa-bars-sort"></i> <i className="fa-solid fa-bars"></i>
</a> </a>
</div> </div>
</div> </div>

10
src/components/layout/Header2.tsx
View File

@ -37,22 +37,22 @@ const Header2 = () => {
className="search-toggle-open header-search my-auto" className="search-toggle-open header-search my-auto"
onClick={openSearch} onClick={openSearch}
> >
<div className="search-icon"><i className="icon-search"></i></div> <div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
</div> </div>
<div className="header-shopping-cart my-auto"> <div className="header-shopping-cart my-auto">
<div className="cart-icon"><a href="#"><i className="icon-shopping-cart"></i></a></div> <div className="cart-icon"><a href="#"><i className="fa-solid fa-cart-shopping"></i></a></div>
</div> </div>
<div className="header-action d-none d-xl-inline-flex gap-5"> <div className="header-action d-none d-xl-inline-flex gap-5">
<div className="header-link"> <div className="header-link">
<Link className="primary-btn-2 btn-hover" href="/contact"> <Link className="primary-btn-2 btn-hover" href="/contact">
GET A QUOTE &nbsp; | <i className="icon-right-arrow"></i> GET A QUOTE &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</Link> </Link>
</div> </div>
</div> </div>
<div className="header-action"> <div className="header-action">
<div className="header-link-1"> <div className="header-link-1">
<div className="icon text-white"><i className="fal fa-phone-volume"></i></div> <div className="icon text-white"><i className="fa-solid fa-phone-volume"></i></div>
<div className="content"> <div className="content">
<span className="text-white">Call Us Now</span> <span className="text-white">Call Us Now</span>
<h6><a href="tel:2085550112" className="text-white">+208-555-0112</a></h6> <h6><a href="tel:2085550112" className="text-white">+208-555-0112</a></h6>
@ -65,7 +65,7 @@ const Header2 = () => {
> >
<div className="sidebar__toggle"> <div className="sidebar__toggle">
<a className="bar-icon" href="javascript:void(0)"> <a className="bar-icon" href="javascript:void(0)">
<i className="fa-light fa-bars-sort"></i> <i className="fa-solid fa-bars"></i>
</a> </a>
</div> </div>
</div> </div>

24
src/components/layout/Header3.tsx
View File

@ -21,14 +21,20 @@ const Header3 = () => {
<div className="container-fluid bg-color-1"> <div className="container-fluid bg-color-1">
<div className="header-top"> <div className="header-top">
<div className="header-top-contact-info"> <div className="header-top-contact-info">
<span className="email p-relative"><a href="mailto:info@Metatron.com">info@Metatron.com</a></span> <span className="email p-relative d-inline-flex align-items-center me-4" style={{ gap: '10px', paddingLeft: 0 }}>
<span className="time p-relative">Hours: Mon - Sat: 10.00 AM - 4.00 PM</span> <i className="fa-solid fa-envelope" style={{ position: 'static', transform: 'none' }}></i>
<a href="mailto:info@Metatron.com">info@Metatron.com</a>
</span>
<span className="time p-relative d-inline-flex align-items-center" style={{ gap: '10px', paddingLeft: 0 }}>
<i className="fa-solid fa-clock" style={{ position: 'static', transform: 'none' }}></i>
Hours: Mon - Sat: 10.00 AM - 4.00 PM
</span>
</div> </div>
<div className="header-top-socials"> <div className="header-top-socials">
<span><a href="#"><i className="fab fa-facebook-f"></i></a></span> <span><a href="#"><i className="fa-brands fa-facebook-f"></i></a></span>
<span><a href="#"><i className="fab fa-twitter"></i></a></span> <span><a href="#"><i className="fa-brands fa-twitter"></i></a></span>
<span><a href="#"><i className="fab fa-linkedin-in"></i></a></span> <span><a href="#"><i className="fa-brands fa-linkedin-in"></i></a></span>
<span><a href="#"><i className="fab fa-youtube"></i></a></span> <span><a href="#"><i className="fa-brands fa-youtube"></i></a></span>
</div> </div>
</div> </div>
</div> </div>
@ -51,10 +57,10 @@ const Header3 = () => {
className="search-toggle-open header-search my-auto" className="search-toggle-open header-search my-auto"
onClick={openSearch} onClick={openSearch}
> >
<div className="search-icon"><i className="icon-search"></i></div> <div className="search-icon"><i className="fa-solid fa-magnifying-glass"></i></div>
</div> </div>
<div className="header-shopping-cart my-auto"> <div className="header-shopping-cart my-auto">
<div className="cart-icon"><Link href="/shop"><i className="icon-shopping-cart"></i></Link></div> <div className="cart-icon"><Link href="/shop"><i className="fa-solid fa-cart-shopping"></i></Link></div>
</div> </div>
<div <div
className="header__hamburger d-xl-block my-auto" className="header__hamburger d-xl-block my-auto"
@ -62,7 +68,7 @@ const Header3 = () => {
> >
<div className="sidebar__toggle"> <div className="sidebar__toggle">
<a className="bar-icon" href="javascript:void(0)"> <a className="bar-icon" href="javascript:void(0)">
<i className="fa-light fa-bars-sort"></i> <i className="fa-solid fa-bars"></i>
</a> </a>
</div> </div>
</div> </div>

16
src/components/layout/NavMenu.tsx
View File

@ -3,18 +3,12 @@ import Link from "next/link";
const NavMenu = () => ( const NavMenu = () => (
<ul> <ul>
<li className="has-dropdown active"> <li><Link href="/">Home</Link></li>
<Link href="/">Home</Link>
</li>
<li><Link href="/about-us">About</Link></li> <li><Link href="/about-us">About</Link></li>
<li className="has-dropdown"> <li><Link href="/services">Services</Link></li>
<Link href="/services">Services</Link> <li><Link href="/careers">Careers</Link></li>
</li> <li><Link href="/faq">FAQ</Link></li>
<li><Link href="/blog">Blog</Link></li>
<li className="has-dropdown">
<Link href="/blog">Blog</Link>
</li>
<li><Link href="/contact">Contact</Link></li> <li><Link href="/contact">Contact</Link></li>
</ul> </ul>
); );

275
src/components/services/AboutService.tsx Normal file
View File

@ -0,0 +1,275 @@
import React from "react";
const AboutService = () => {
return (
<section className="about-service section-space">
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6">
<div className="about-image-stack p-relative">
{/* Experience Box */}
{/* <div className="experience-box animate-bounce-y">
<h3>37+</h3>
<span>Years Experience</span>
</div> */}
{/* Background Image */}
<div className="main-img-wrap">
<img src="/assets/img/about/about-img1.png" alt="Office Meeting" />
</div>
{/* Foreground Curved Image */}
<div className="curved-img-wrap">
<img src="/assets/img/about/about-img13.png" alt="Collaborative Work" />
</div>
{/* Decorative Dots */}
<div className="dots-shape">
<img src="/assets/imgs/shapes/shape-6.png" alt="dots" />
</div>
</div>
</div>
<div className="col-lg-6">
<div className="content-area pl-60">
<div className="section-title-wrapper mb-30">
<span className="section-subtitle">
<i className="fa-solid fa-play rotate-triangle"></i> OUR ABOUT US
</span>
<h2 className="section-title">
We Provide Professional Advice About This Business.
</h2>
<p className="section-desc">
Business tailored design, management & support services Business business agency elit,
sed do eiusmod tempor majority have in some we form, by injected humour solution.
</p>
</div>
<div className="single-format-content mb-40">
<div className="format-row d-flex align-items-start gap-4">
{/* <div className="small-feature-img">
<img src="/assets/img/about/about-img10.png" alt="Team" className="rounded-3" />
</div> */}
<div className="feature-bullets">
<div className="bullet-item d-flex align-items-center mb-15">
<i className="fa-solid fa-circle-check maroon-icon"></i>
<span>Great solution for your business growth.</span>
</div>
<div className="bullet-item d-flex align-items-center">
<i className="fa-solid fa-circle-check maroon-icon"></i>
<span>Remind yourself Business know fact.</span>
</div>
</div>
</div>
</div>
<div className="btn-wrapper">
<a href="/about-us" className="about-more-btn">
<span>ABOUT MORE</span>
<div className="icon-circle">
<i className="fa-solid fa-chevron-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<style jsx>{`
.about-service {
padding: 80px 0;
background: #fff;
overflow: hidden;
}
@media (max-width: 767px) {
.about-service {
padding: 60px 0;
}
}
.about-image-stack {
padding-top: 50px;
padding-left: 30px;
}
.experience-box {
position: absolute;
top: 0;
left: 0;
background: #3779b9;
color: #fff;
padding: 40px 30px;
z-index: 3;
text-align: center;
border-radius: 4px;
box-shadow: 0 10px 30px rgba(60, 114, 252, 0.3);
}
.experience-box h3 {
font-size: 54px;
font-weight: 800;
margin: 0;
line-height: 1;
}
.experience-box span {
font-size: 16px;
font-weight: 600;
display: block;
margin-top: 5px;
line-height: 1.2;
}
.main-img-wrap {
width: 100%;
max-width: 450px;
border-radius: 10px;
overflow: hidden;
margin-left: auto;
box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}
.main-img-wrap img {
width: 100%;
display: block;
}
.curved-img-wrap {
position: absolute;
bottom: -40px;
left: -20px;
width: 320px;
height: 320px;
border-radius: 100px 30px 100px 100px;
overflow: hidden;
border: 8px solid #fff;
z-index: 2;
box-shadow: 0 15px 45px rgba(0,0,0,0.12);
}
.curved-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dots-shape {
position: absolute;
top: 80px;
left: -40px;
z-index: 1;
opacity: 0.4;
}
.section-subtitle {
color: #3779b9;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.rotate-triangle {
font-size: 14px;
transform: rotate(-30deg);
}
.section-title {
font-size: 46px;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
margin-bottom: 25px;
}
.section-desc {
font-size: 16px;
color: #64748b;
line-height: 1.8;
margin-bottom: 35px;
}
.small-feature-img {
width: 140px;
flex-shrink: 0;
}
.small-feature-img img {
width: 100%;
}
.maroon-icon {
color: #0f172a;
font-size: 18px;
margin-right: 12px;
}
.bullet-item span {
font-size: 16px;
font-weight: 600;
color: #0f172a;
}
.about-more-btn {
display: inline-flex;
align-items: center;
background: #3779b9;
color: #fff;
padding: 8px 8px 8px 25px;
border-radius: 6px;
text-decoration: none;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.about-more-btn:hover {
background: #2563eb;
transform: translateY(-2px);
}
.icon-circle {
width: 40px;
height: 40px;
background: #fff;
color: #3779b9;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 20px;
}
.animate-bounce-y {
animation: bounceY 4s infinite ease-in-out;
}
@keyframes bounceY {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
@media (max-width: 1199px) {
.content-area {
padding-left: 30px;
}
.section-title {
font-size: 38px;
}
.curved-img-wrap {
width: 260px;
height: 260px;
}
}
@media (max-width: 991px) {
.about-image-stack {
margin-bottom: 80px;
padding-left: 0;
}
.content-area {
padding-left: 0;
}
}
@media (max-width: 575px) {
.curved-img-wrap {
width: 200px;
height: 200px;
bottom: -20px;
left: 0;
}
.experience-box {
padding: 25px 20px;
}
.experience-box h3 {
font-size: 40px;
}
}
`}</style>
</section>
);
};
export default AboutService;