- )
-}
+ );
+};
-export default NotePage
\ No newline at end of file
+export default NotePage;
diff --git a/src/pages/ScreenShoot.tsx b/src/pages/ScreenShoot.tsx
index 2d1cf98..6b88cf2 100644
--- a/src/pages/ScreenShoot.tsx
+++ b/src/pages/ScreenShoot.tsx
@@ -1,21 +1,17 @@
-import React from 'react'
-import SwipeScreenShoot from '../components/SwiperScreenShoot'
-
-import {ScreenShoot as ScreenShootData} from '../../data.json'
+import React from 'react';
+import SwipeScreenShoot from '../components/SwiperScreenShoot';
+import { ScreenShoot as ScreenShootData } from '../../data.json';
const ScreenShoot = () => {
return (
-
+
+
{ScreenShootData.title}
+
{ScreenShootData.description}
-
{ScreenShootData.title}
-
- {ScreenShootData.description}
-
-
-
+
- )
-}
+ );
+};
-export default ScreenShoot
\ No newline at end of file
+export default ScreenShoot;
diff --git a/src/pages/VideoPage.tsx b/src/pages/VideoPage.tsx
index 1c6f0c3..fe0b339 100644
--- a/src/pages/VideoPage.tsx
+++ b/src/pages/VideoPage.tsx
@@ -1,41 +1,39 @@
import React, { useState } from 'react';
-import {VideoPage as VideoPageData} from '../../data.json'
+import { VideoPage as VideoPageData } from '../../data.json';
const VideoPage = () => {
- const [isPlaying, setIsPlaying] = useState(false);
+ const [isPlaying, setIsPlaying] = useState(false);
+ const handlePlayPause = () => {
+ setIsPlaying(!isPlaying);
+ };
- const handlePlayPause = () => {
- setIsPlaying(!isPlaying);
- };
+ return (
+
+
- return (
-
-
-
-
-
- {VideoPageData.title}
-
- {VideoPageData.description}
-
- 
-
+
+ {VideoPageData.title}
+ {VideoPageData.description}
+
+
-
- {Object.entries(VideoPageData.Data).map((item, index) => (
-
- 
-
- {item[1].number}
- {item[1].title}
-
-
- ))}
-
-
-
- );
+
+ {Object.entries(VideoPageData.Data).map((item, index) => (
+
+
+
+ {item[1].number}
+ {item[1].title}
+
+ ))}
+
+
+ );
};
-export default VideoPage;
\ No newline at end of file
+export default VideoPage;
diff --git a/src/styles/App/App.scss b/src/styles/App/App.scss
index 5b78a14..4d7c6b2 100644
--- a/src/styles/App/App.scss
+++ b/src/styles/App/App.scss
@@ -1,7 +1,5 @@
-
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&display=swap');
-
html,
body {
background: var(--bg);
@@ -22,7 +20,7 @@ body {
// line-height: normal;
// font-size: 16px;
}
-p{
+p {
font-weight: normal;
}
h1,
@@ -68,20 +66,19 @@ input:-webkit-autofill:active {
box-shadow: inset 0 0 20px 20px #23232329;
}
-
-button{
+button {
cursor: pointer;
- transition: .5s ease-in-out;
- &:hover{
- scale: 1.02;
- }
+ transition: 0.5s ease-in-out;
+ &:hover {
+ scale: 1.02;
+ }
}
-
-svg,.scale{
+svg,
+.scale {
cursor: pointer;
- transition: .5s ease-in-out;
- &:hover{
+ transition: 0.5s ease-in-out;
+ &:hover {
scale: 1.1;
}
}
diff --git a/src/styles/App/Variables.scss b/src/styles/App/Variables.scss
index 5ca30ad..79ae338 100644
--- a/src/styles/App/Variables.scss
+++ b/src/styles/App/Variables.scss
@@ -1,15 +1,14 @@
:root {
--primary: #222838;
--secondary: #fdba2d;
- --thirdly:#0093d4;
- --white:white;
+ --thirdly: #0093d4;
+ --white: white;
--text: #000;
- --black:#000;
+ --black: #000;
--placeholder: rgb(0, 0, 0, 0.3);
--bg: rgb(245 247 251);
- --bg2: white;
- --gradient : linear-gradient(45deg, #55B9E3, #5262E3);
-
+ --bg2: white;
+ --gradient: linear-gradient(45deg, #55b9e3, #5262e3);
}
:root:has(.dark) {
diff --git a/src/styles/App/classNames.scss b/src/styles/App/classNames.scss
index 84d0df2..47fcfb4 100644
--- a/src/styles/App/classNames.scss
+++ b/src/styles/App/classNames.scss
@@ -3,7 +3,7 @@
background-color: red;
}
-.full-screen-center{
+.full-screen-center {
position: absolute;
z-index: 999;
height: 100vh;
@@ -11,9 +11,6 @@
display: flex;
align-items: center;
justify-content: center;
-
-
}
-.spinner{
-
+.spinner {
}
diff --git a/src/styles/components/FirstLoading.scss b/src/styles/components/FirstLoading.scss
index 9271b75..00a1cce 100644
--- a/src/styles/components/FirstLoading.scss
+++ b/src/styles/components/FirstLoading.scss
@@ -1,43 +1,45 @@
.FirstLoading {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- width: 100vw;
- height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- background: black;
- color: white;
- z-index: 9999999999;
- overflow: hidden;
- transition: transform 1s cubic-bezier(.25,1,.5,1), visibility 1ms linear 1s;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ background: black;
+ color: white;
+ z-index: 9999999999;
+ overflow: hidden;
+ transition:
+ transform 1s cubic-bezier(0.25, 1, 0.5, 1),
+ visibility 1ms linear 1s;
}
.Logo {
- width: 30vw;
- mix-blend-mode: difference;
- margin-bottom: 1rem;
+ width: 30vw;
+ mix-blend-mode: difference;
+ margin-bottom: 1rem;
}
.Info {
- font-size: 1vw;
- transition: transform 0.5s ease;
+ font-size: 1vw;
+ transition: transform 0.5s ease;
}
/* New animation for page movement */
@keyframes pageUp {
- 0% {
- transform: translate3d(0, 0, 0);
- }
- 100% {
- transform: translate3d(0, -100vh, 0);
- visibility: hidden;
- }
+ 0% {
+ transform: translate3d(0, 0, 0);
+ }
+ 100% {
+ transform: translate3d(0, -100vh, 0);
+ visibility: hidden;
+ }
}
.PageUp {
- animation: pageUp 0.8s ease-in-out forwards;
-}
\ No newline at end of file
+ animation: pageUp 0.8s ease-in-out forwards;
+}
diff --git a/src/styles/components/Footer.scss b/src/styles/components/Footer.scss
index b9f6f1b..0080931 100644
--- a/src/styles/components/Footer.scss
+++ b/src/styles/components/Footer.scss
@@ -1,190 +1,179 @@
-.Footer{
- background: var(--primary);
- height: 350px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: 30px;
- margin-top: 250px;
- width: 100%;
- z-index: 999;
- position: relative;
- img{
+.Footer {
+ background: var(--primary);
+ height: 350px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 30px;
+ margin-top: 250px;
+ width: 100%;
+ z-index: 999;
+ position: relative;
+ img {
width: 100px;
-
- }
- >div{
+ }
+ > div {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
- svg{
+ svg {
+ font-size: 20px;
+ color: var(--white);
+ padding: 10px;
+ border: 1px solid var(--white);
+ border-radius: 50%;
+ }
+ }
+ p {
+ font-size: 16px;
+ color: var(--white);
+ }
+}
+
+.FooterHeader {
+ position: absolute;
+ top: -25%;
+ background: var(--thirdly);
+ width: 70%;
+ height: 150px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ padding-inline: 5%;
+ color: var(--white);
+ border-radius: 6px;
+ > span {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ p {
+ font-weight: normal;
+ }
+ }
+ > div {
+ background: var(--white);
+ width: 300px;
+ height: 40px;
+ display: flex;
+ padding: 5px;
+ gap: 10px;
+ .ant-input {
+ border: none;
+ height: 40px;
+ all: unset;
+ min-width: 240px;
+ color: var(--text);
+ &::placeholder {
+ font-size: 10px;
+ }
+ }
+ div {
+ background: var(--thirdly);
+ width: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 5px;
+ cursor: pointer;
+ svg {
+ font-size: 30px;
+ width: 30px;
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 900px) {
+ .Footer {
+ background: var(--primary);
+ height: 330px;
+ display: flex;
+ flex-direction: column;
+ justify-content: end;
+ align-items: center;
+ gap: 30px;
+ margin-top: 250px;
+ width: 100%;
+ z-index: 999;
+ position: relative;
+ padding-bottom: 30px;
+ img {
+ width: 100px;
+ }
+ > div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+ svg {
font-size: 20px;
color: var(--white);
padding: 10px;
border: 1px solid var(--white);
border-radius: 50%;
+ }
}
-
- }
- p{
- font-size: 16px;
- color: var(--white);
- }
-}
+ p {
+ font-size: 14px;
+ }
+ }
-.FooterHeader{
+ .FooterHeader {
position: absolute;
- top: -25%;
+ top: -40%;
background: var(--thirdly);
- width: 70%;
- height: 150px;
+ width: 60%;
+ height: fit-content;
+ padding-block: 20px;
display: flex;
- justify-content: space-between;
+ justify-content: center;
+ gap: 30px;
align-items: center;
+ flex-direction: column;
- padding-inline: 5%;
+ padding-inline: 10%;
color: var(--white);
- border-radius: 6px;
- >span{
- display: flex;
- flex-direction: column;
- gap: 10px;
- p{
- font-weight: normal;
- }
+ > span {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ h1 {
+ font-size: 20px;
+ }
+ p {
+ font-size: 14px;
+ font-weight: normal;
+ }
}
- >div{
- background: var(--white);
- width: 300px;
+ > div {
+ background: var(--white);
+ width: 200px;
+ height: 40px;
+ display: flex;
+ padding: 5px;
+ gap: 10px;
+ .ant-input {
+ border: none;
height: 40px;
- display: flex;
- padding: 5px;
- gap: 10px;
- .ant-input{
- border: none;
- height: 40px;
- all: unset;
- min-width: 240px;
- color: var(--text);
- &::placeholder{
- font-size: 10px;
- }
+ all: unset;
+ min-width: 140px;
+ color: var(--text);
+ &::placeholder {
+ font-size: 10px;
}
- div{
- background: var(--thirdly);
- width: 50px;
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 5px;
- cursor: pointer;
- svg{
- font-size: 30px;
- width: 30px;
- }
- }
- }
-
-
-}
-
-
-@media screen and (max-width:900px) {
-
- .Footer{
- background: var(--primary);
- height: 330px;
+ }
+ div {
+ background: var(--thirdly);
+ width: 50px;
display: flex;
- flex-direction: column;
- justify-content: end;
+ justify-content: center;
align-items: center;
- gap: 30px;
- margin-top: 250px;
- width: 100%;
- z-index: 999;
- position: relative;
- padding-bottom: 30px;
- img{
- width: 100px;
-
- }
- >div{
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 20px;
- svg{
- font-size: 20px;
- color: var(--white);
- padding: 10px;
- border: 1px solid var(--white);
- border-radius: 50%;
- }
-
- }
- p{
- font-size: 14px;
- }
- }
-
- .FooterHeader{
- position: absolute;
- top: -40%;
- background: var(--thirdly);
- width: 60%;
- height: fit-content;
- padding-block: 20px;
- display: flex;
- justify-content: center;
- gap: 30px;
- align-items: center;
- flex-direction: column;
-
- padding-inline: 10%;
- color: var(--white);
- >span{
- display: flex;
- flex-direction: column;
- gap: 10px;
- h1{
- font-size: 20px;
- }
- p{
- font-size: 14px;
- font-weight: normal;
- }
- }
- >div{
- background: var(--white);
- width: 200px;
- height: 40px;
- display: flex;
- padding: 5px;
- gap: 10px;
- .ant-input{
- border: none;
- height: 40px;
- all: unset;
- min-width: 140px;
- color: var(--text);
- &::placeholder{
- font-size: 10px;
- }
- }
- div{
- background: var(--thirdly);
- width: 50px;
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 5px;
- cursor: pointer;
- }
- }
-
-
- }
-
-}
\ No newline at end of file
+ border-radius: 5px;
+ cursor: pointer;
+ }
+ }
+ }
+}
diff --git a/src/styles/components/Layout.scss b/src/styles/components/Layout.scss
index b4a9b6b..7b0cf20 100644
--- a/src/styles/components/Layout.scss
+++ b/src/styles/components/Layout.scss
@@ -11,6 +11,3 @@
// z-index: 1000;
// background: black;
// }
-
-
-
diff --git a/src/styles/components/NavBar.scss b/src/styles/components/NavBar.scss
index 11ed5b8..982d097 100644
--- a/src/styles/components/NavBar.scss
+++ b/src/styles/components/NavBar.scss
@@ -1,111 +1,103 @@
-.NavBar{
- background-color: var(--primary);
- color: var(--white);
+.NavBar {
+ background-color: var(--primary);
+ color: var(--white);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: max(3vh, 10px) max(50px, 4vw);
+ position: fixed;
+ width: calc(100% - 100px);
+ z-index: 999999999;
+ font-size: max(20px, 1.5vw);
+ img,
+ svg {
+ width: 60px;
+ font-size: 30px;
+ }
+ > ul {
display: flex;
- justify-content: space-between;
- align-items: center;
- padding: max(3vh,10px) max(50px,4vw);
- position: fixed;
- width: calc(100% - 100px);
- z-index: 999999999;
- font-size: max(20px , 1.5vw);
- img,svg{
- width: 60px;
- font-size: 30px;
+ li {
+ all: unset;
+ cursor: pointer;
+ transition: 0.5s ease-in-out;
+ &:hover {
+ scale: 1.1;
+ }
}
- >ul{
+ }
+ .NavBarLinks {
+ display: flex;
+ gap: max(20px, 2vw);
- display: flex;
- li{
- all: unset;
- cursor: pointer;
- transition: .5s ease-in-out;
- &:hover{
- scale: 1.1;
-
- }
- }
+ a {
+ color: var(--white) !important;
+ opacity: 0.6;
+ transition: 0.5s ease-in-out;
+ font-weight: normal;
+ font-size: 18px;
+ &:hover {
+ color: var(--secondary) !important;
+ scale: 1.1;
+ opacity: 1;
+ }
}
- .NavBarLinks{
- display: flex;
- gap: max(20px,2vw);
-
- a{
- color: var(--white) !important;
- opacity: .6;
- transition: .5s ease-in-out;
- font-weight: normal;
- font-size: 18px;
- &:hover{
- color: var(--secondary) !important;
- scale: 1.1;
- opacity: 1;
-
- }
- }
- .activeLink{
- a{
- color: var(--thirdly) !important;
- opacity: 1;
- }
- }
+ .activeLink {
+ a {
+ color: var(--thirdly) !important;
+ opacity: 1;
+ }
}
- >div{
- article{
- &:nth-child(2){
- display: none;
- }
- }
+ }
+ > div {
+ article {
+ &:nth-child(2) {
+ display: none;
+ }
}
+ }
}
-
-
-@media screen and (max-width:900px) {
- .NavBar{
-
- .NavBarLinks{
- display: none !important;
-
- }
- >div{
- display: flex;
- article{
- &:nth-child(2){
- display: block;
-
- }
- }
- }
+@media screen and (max-width: 900px) {
+ .NavBar {
+ .NavBarLinks {
+ display: none !important;
}
+ > div {
+ display: flex;
+ article {
+ &:nth-child(2) {
+ display: block;
+ }
+ }
+ }
+ }
}
-.NavBarContent{
- position: relative;
- z-index: 9999999999;
- background: var(--thirdly);
- width: 150px;
- min-height: 200px;
- padding-top: 20px;
- .NavBarLinks{
- all: unset;
- display: flex;
- flex-direction: column;
- width: 100%;
- color: var(--white);
- li{
- border-bottom: 1px solid var(--white);
- padding: 10px;
- &:last-child{
- border: none;
- }
- }
+.NavBarContent {
+ position: relative;
+ z-index: 9999999999;
+ background: var(--thirdly);
+ width: 150px;
+ min-height: 200px;
+ padding-top: 20px;
+ .NavBarLinks {
+ all: unset;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ color: var(--white);
+ li {
+ border-bottom: 1px solid var(--white);
+ padding: 10px;
+ &:last-child {
+ border: none;
+ }
}
-
+ }
+}
+.ant-popover,
+.ant-popover-inner {
+ padding: 0 !important;
+ z-index: 999;
+ margin-inline: 30px;
}
-.ant-popover,.ant-popover-inner{
- padding: 0 !important;
- z-index: 999;
- margin-inline: 30px;
-
-}
\ No newline at end of file
diff --git a/src/styles/components/PageTransition.scss b/src/styles/components/PageTransition.scss
index 21ae978..d6bbf1b 100644
--- a/src/styles/components/PageTransition.scss
+++ b/src/styles/components/PageTransition.scss
@@ -1,25 +1,23 @@
.transition-overlay {
- position: fixed;
- top: 100%;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: red;
- z-index: 1000;
- pointer-events: none;
- transition: top 1s ease-in-out;
+ position: fixed;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: red;
+ z-index: 1000;
+ pointer-events: none;
+ transition: top 1s ease-in-out;
}
/* Exit Animation: Moves up */
.transition-overlay.exit {
- top: 0;
+ top: 0;
}
/* Entrance Animation: Moves down */
.transition-overlay.enter {
- top: -100%;
- transition: top 1s ease-in-out;
- top: 100%;
+ top: -100%;
+ transition: top 1s ease-in-out;
+ top: 100%;
}
-
-
diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss
index 969bc33..2340e11 100644
--- a/src/styles/components/index.scss
+++ b/src/styles/components/index.scss
@@ -1,6 +1,6 @@
@import './FirstLoading.scss';
@import './Layout.scss';
-@import "./PageTransition.scss";
+@import './PageTransition.scss';
@import './NavBar.scss';
@import './Footer.scss';
-@import './BackToTop.scss';
\ No newline at end of file
+@import './BackToTop.scss';
diff --git a/src/styles/pages/ContactPage.scss b/src/styles/pages/ContactPage.scss
index 4bff2b1..7adfe2a 100644
--- a/src/styles/pages/ContactPage.scss
+++ b/src/styles/pages/ContactPage.scss
@@ -1,170 +1,162 @@
-.ContactPage{
- background: var(--bg);
+.ContactPage {
+ background: var(--bg);
+ display: flex;
+
+ padding-inline: 5%;
+ gap: 30px;
+ width: 80%;
+ margin-bottom: 100px;
+ margin-inline: auto;
+ .Right {
display: flex;
-
- padding-inline: 5%;
- gap: 30px;
- width: 80%;
- margin-bottom: 100px;
- margin-inline: auto;
- .Right{
+ flex-direction: column;
+ gap: 10px;
+
+ .Forms {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1%;
+ max-width: 100%;
+ .ValidationField {
+ min-width: 48%;
+ margin-bottom: 20px;
+ .ant-input {
+ min-height: 50px;
+ }
+ }
+ .TextAreaField {
+ min-width: 97%;
+ }
+ }
+ button {
+ all: unset;
+ padding: 14px 30px;
+ display: flex;
+ align-items: center;
+ gap: max(1vw, 10px);
+ color: var(--white);
+ border: 1px solid var(--white);
+ border-radius: 7px;
+ // background-image: linear-gradient(45deg, #55B9E3, #5262E3);
+ background: var(--thirdly);
+ cursor: pointer;
+ transition: 0.5s ease-in-out;
+ &:hover {
+ scale: 1.1;
+ }
+ }
+ }
+ .Left {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ min-width: 40vw;
+ p {
+ color: var(--text);
+ }
+ > div {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ > span {
display: flex;
flex-direction: column;
- gap: 10px;
-
- .Forms{
- display: flex;
- flex-wrap: wrap;
- gap: 1%;
- max-width: 100%;
- .ValidationField{
- min-width: 48%;
- margin-bottom: 20px;
- .ant-input{
- min-height: 50px;
-
- }
- }
- .TextAreaField{
- min-width: 97%;
- }
-
+ gap: 2px;
+ > div {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ h6 {
+ font-size: 20px;
+ }
+ img {
+ width: 18px;
+ }
}
- button{
- all: unset;
- padding: 14px 30px;
- display: flex;
- align-items: center;
- gap: max(1vw,10px);
- color: var(--white);
- border: 1px solid var(--white);
- border-radius: 7px;
- // background-image: linear-gradient(45deg, #55B9E3, #5262E3);
- background: var(--thirdly);
- cursor: pointer;
- transition: .5s ease-in-out;
- &:hover{
- scale: 1.1;
- }
- }
- }
- .Left{
- display: flex;
- flex-direction: column;
- gap: 20px;
- min-width: 40vw;
- p{
- color: var(--text);
- }
- >div{
- display: flex;
- flex-direction: column;
- gap: 20px;
- >span{
- display: flex;
- flex-direction: column;
- gap: 2px;
- >div{
- display: flex;
- align-items: center;
- gap: 10px;
- h6{
- font-size: 20px;
- }
- img{
- width: 18px;
- }
-
- }
- p{
- font-size: 16px;
- font-weight: normal;
- }
- }
+ p {
+ font-size: 16px;
+ font-weight: normal;
}
+ }
}
+ }
}
-
-@media screen and (max-width:900px) {
- .ContactPage{
- background: var(--bg);
+@media screen and (max-width: 900px) {
+ .ContactPage {
+ background: var(--bg);
+ display: flex;
+ flex-direction: column;
+ padding-inline: 5%;
+ width: 90%;
+ margin-block: 0 100px;
+ margin-inline: auto;
+ gap: 10px;
+ .Right {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ .Forms {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1%;
+ max-width: 100%;
+ .ValidationField {
+ min-width: 100%;
+ margin-bottom: 20px;
+ .ant-input {
+ min-height: 50px;
+ }
+ }
+ .TextAreaField {
+ min-width: 100%;
+ }
+ }
+ button {
+ all: unset;
+ padding: 14px 30px;
+ display: flex;
+ align-items: center;
+ gap: max(1vw, 10px);
+ color: var(--white);
+ border: 1px solid var(--white);
+ border-radius: 7px;
+ background: var(--thirdly);
+ // background-image: linear-gradient(45deg, #55B9E3, #5262E3);
+ }
+ }
+ .Left {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ p {
+ color: var(--text);
+ }
+ > div {
display: flex;
flex-direction: column;
- padding-inline: 5%;
- width: 90%;
- margin-block: 0 100px;
- margin-inline: auto;
gap: 10px;
- .Right{
+ > span {
+ display: flex;
+ flex-direction: column;
+ gap: 0px;
+ > div {
display: flex;
- flex-direction: column;
- gap: 20px;
- .Forms{
- display: flex;
- flex-wrap: wrap;
- gap: 1%;
- max-width: 100%;
- .ValidationField{
- min-width: 100%;
- margin-bottom: 20px;
- .ant-input{
- min-height: 50px;
-
- }
- }
- .TextAreaField{
- min-width: 100%;
- }
-
+ align-items: center;
+ gap: 10px;
+ h6 {
+ font-size: 18px;
}
- button{
- all: unset;
- padding: 14px 30px;
- display: flex;
- align-items: center;
- gap: max(1vw,10px);
- color: var(--white);
- border: 1px solid var(--white);
- border-radius: 7px;
- background: var(--thirdly);
- // background-image: linear-gradient(45deg, #55B9E3, #5262E3);
- }
- }
- .Left{
- display: flex;
- flex-direction: column;
- gap: 20px;
- p{
- color: var(--text);
- }
- >div{
- display: flex;
- flex-direction: column;
- gap: 10px;
- >span{
- display: flex;
- flex-direction: column;
- gap: 0px;
- >div{
- display: flex;
- align-items: center;
- gap: 10px;
- h6{
- font-size: 18px;
- }
- img{
- width: 15px;
- }
-
- }
- p{
- font-size: 14px;
- font-weight: normal;
- }
- }
+ img {
+ width: 15px;
}
+ }
+ p {
+ font-size: 14px;
+ font-weight: normal;
+ }
}
+ }
}
-
-}
\ No newline at end of file
+ }
+}
diff --git a/src/styles/pages/DownloadPage.scss b/src/styles/pages/DownloadPage.scss
index d988b19..697b24f 100644
--- a/src/styles/pages/DownloadPage.scss
+++ b/src/styles/pages/DownloadPage.scss
@@ -1,193 +1,178 @@
-.DownloadPage{
+.DownloadPage {
+ background: var(--bg);
+ display: flex;
+ gap: 50px;
+ width: 100%;
+ padding-block: 100px;
+ position: relative;
+ flex-direction: column;
+
+ > main {
+ position: relative;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: max(2vh, 25px);
+ text-align: center;
+ z-index: 99;
+ padding-top: 0px;
+ > h1 {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ color: var(--white);
+ font-size: max(4vw, 50px);
+ }
+ p {
+ color: var(--white);
+ font-size: max(1.3vw, 15px);
+ width: 50%;
+ }
+ > div {
+ display: flex;
+ gap: max(1vw, 10px);
+ button {
+ all: unset;
+ padding: max(0.5vw, 8px) max(1.5vw, 30px);
+ display: flex;
+ align-items: center;
+ gap: max(1vw, 10px);
+ color: var(--white);
+ border: 1px solid var(--white);
+ border-radius: 10px;
+ cursor: pointer;
+ transition: 0.5s ease-in-out;
+ padding-block: 10px;
+ &:hover {
+ background: var(--thirdly);
+ scale: 1.1;
+ }
+ h6 {
+ font-size: max(10px, 1vw);
+ font-weight: normal;
+ line-height: 21px;
+ }
+ h5 {
+ font-weight: bold;
+ font-size: max(12px, 1vw);
+ line-height: 21px;
+ }
+ svg {
+ font-size: max(20px, 1.3vw);
+ }
+ }
+ }
+ }
+ > div {
+ position: absolute;
+ z-index: 1;
+ top: 0;
+ width: 100%;
+ height: 700px;
+ background: var(--primary);
+ overflow: hidden;
+ .circle {
+ position: absolute;
+ width: 66%;
+ top: 0%;
+ left: 50%;
+ transform: translate(-50%, 0%);
+ z-index: 9999;
+ }
+ }
+ .main {
+ position: relative;
+ z-index: 99999;
+ // margin-top: 300px;
+ width: 80%;
+ object-fit: contain;
+ margin-inline: auto;
+ }
+}
+
+@media screen and (max-width: 900px) {
+ .DownloadPage {
background: var(--bg);
display: flex;
- gap: 50px;
+ gap: 40px;
width: 100%;
- padding-block: 100px;
+ padding-block: 50px;
position: relative;
flex-direction: column;
- >main{
- position: relative;
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: max(2vh,25px);
- text-align: center;
- z-index: 99;
- padding-top: 0px ;
- >h1{
- display: flex;
- align-items: center;
- gap: 20px;
- color: var(--white);
- font-size: max(4vw,50px);
-
- }
- p{
- color: var(--white);
- font-size: max(1.3vw,15px);
- width: 50%;
- }
- >div{
- display: flex;
- gap: max(1vw,10px);
- button{
- all: unset;
- padding: max(.5vw,8px) max(1.5vw,30px);
- display: flex;
- align-items: center;
- gap: max(1vw,10px);
- color: var(--white);
- border: 1px solid var(--white);
- border-radius: 10px;
- cursor: pointer;
- transition: .5s ease-in-out;
- padding-block: 10px;
- &:hover{
- background: var(--thirdly);
- scale: 1.1;
- }
- h6{
- font-size: max(10px,1vw);
- font-weight: normal;
- line-height: 21px;
- }
- h5{
- font-weight: bold;
- font-size: max(12px,1vw);
- line-height: 21px;
- }
- svg{
- font-size: max(20px,1.3vw);
- }
- }
- }
-
-
- }
- >div{
- position: absolute;
- z-index: 1;
- top: 0;
- width: 100%;
- height: 700px;
- background: var(--primary);
- overflow: hidden;
- .circle{
- position: absolute;
- width: 66%;
- top: 0%;
- left: 50%;
- transform: translate(-50%,0%);
- z-index: 9999;
-
- }
-
- }
- .main{
- position: relative;
- z-index: 99999;
- // margin-top: 300px;
- width: 80%;
- object-fit: contain;
- margin-inline: auto;
-
- }
-
-}
-
-@media screen and (max-width:900px) {
- .DownloadPage{
- background: var(--bg);
+ > main {
+ position: relative;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: max(2vh, 15px);
+ text-align: center;
+ z-index: 99;
+ padding-top: 50px;
+ > h1 {
display: flex;
- gap: 40px;
- width: 100%;
- padding-block: 50px;
- position: relative;
- flex-direction: column;
-
- >main{
- position: relative;
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: max(2vh,15px);
- text-align: center;
- z-index: 99;
- padding-top: 50px ;
- >h1{
- display: flex;
- align-items: center;
- gap: 10px;
- color: var(--white);
- font-size: 6vw;
-
- }
- p{
- color: var(--white);
- font-size: 4vw;
- width: 80%;
- }
- >div{
- display: flex;
- gap: max(1vw,10px);
- button{
- all: unset;
- padding: max(.5vw,8px) max(1.5vw,30px);
- display: flex;
- align-items: center;
- gap: max(1vw,10px);
- color: var(--white);
- border: 1px solid var(--white);
- border-radius: 10px;
- cursor: pointer;
- h6{
- font-size: max(12px,1vw);
- }
- h5{
- font-weight: bold;
- font-size: max(14px,1vw);
- }
- svg{
- font-size: max(20px,1.3vw);
- }
- }
- }
-
-
+ align-items: center;
+ gap: 10px;
+ color: var(--white);
+ font-size: 6vw;
+ }
+ p {
+ color: var(--white);
+ font-size: 4vw;
+ width: 80%;
+ }
+ > div {
+ display: flex;
+ gap: max(1vw, 10px);
+ button {
+ all: unset;
+ padding: max(0.5vw, 8px) max(1.5vw, 30px);
+ display: flex;
+ align-items: center;
+ gap: max(1vw, 10px);
+ color: var(--white);
+ border: 1px solid var(--white);
+ border-radius: 10px;
+ cursor: pointer;
+ h6 {
+ font-size: max(12px, 1vw);
+ }
+ h5 {
+ font-weight: bold;
+ font-size: max(14px, 1vw);
+ }
+ svg {
+ font-size: max(20px, 1.3vw);
+ }
}
- >div{
- position: absolute;
- z-index: 1;
- top: 0;
- width: 100%;
- height: 630px;
- background: var(--primary);
- overflow: hidden;
- .circle{
- position: absolute;
- width: 800px;
- top: 0%;
- left: 50%;
- transform: translate(-50%,0%);
- z-index: 1;
-
- }
-
- }
- .main{
- position: relative;
- z-index: 3;
- // margin-top: 300px;
- width: 100%;
- object-fit: contain;
- margin-inline: auto;
-
- }
-
+ }
}
-
-}
\ No newline at end of file
+ > div {
+ position: absolute;
+ z-index: 1;
+ top: 0;
+ width: 100%;
+ height: 630px;
+ background: var(--primary);
+ overflow: hidden;
+ .circle {
+ position: absolute;
+ width: 800px;
+ top: 0%;
+ left: 50%;
+ transform: translate(-50%, 0%);
+ z-index: 1;
+ }
+ }
+ .main {
+ position: relative;
+ z-index: 3;
+ // margin-top: 300px;
+ width: 100%;
+ object-fit: contain;
+ margin-inline: auto;
+ }
+ }
+}
diff --git a/src/styles/pages/FeaturesPage.scss b/src/styles/pages/FeaturesPage.scss
index 9205b61..ae09209 100644
--- a/src/styles/pages/FeaturesPage.scss
+++ b/src/styles/pages/FeaturesPage.scss
@@ -1,130 +1,127 @@
-.FeaturesPage{
+.FeaturesPage {
+ background: var(--bg);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+ width: 100%;
+ margin-bottom: 100px;
+ > h1 {
+ font-size: 3vw;
+ color: #000;
+ }
+ > p {
+ font-weight: 500;
+ font-size: 1.2vw;
+ text-wrap: pretty;
+ width: 52%;
+ text-align: center;
+ color: var(--text);
+ }
+ > div {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ gap: 40px;
+ > img {
+ width: 400px;
+ }
+ > span {
+ display: flex;
+ flex-wrap: wrap;
+ max-width: 45%;
+ gap: 50px;
+ article {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ max-width: 40%;
+ img {
+ width: 55px;
+ object-fit: contain;
+ }
+ div {
+ h4 {
+ font-size: max(1.2vw, 16px);
+ color: var(--black);
+ }
+ p {
+ font-weight: normal;
+ font-size: max(0.8vw, 16px);
+ line-height: 30px;
+ }
+ }
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 900px) {
+ .FeaturesPage {
background: var(--bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- gap: 20px;
+ gap: 30px;
width: 100%;
- margin-bottom: 100px;
- >h1{
- font-size: 3vw;
- color: #000;
+ margin-block: 50px;
+ > h1 {
+ font-size: 8vw;
+ color: var(--text);
}
- >p{
- font-weight: 500;
- font-size: 1.2vw;
- text-wrap: pretty;
- width: 52%;
- text-align: center;
- color: var(--text);
+ > p {
+ font-weight: 500;
+ font-size: 3vw;
+ text-wrap: pretty;
+ width: 60%;
+ text-align: center;
+ color: var(--text);
}
- >div{
+ > div {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column-reverse;
+ width: 100%;
+ gap: 40px;
+ > img {
+ width: 300px;
+ }
+ > span {
display: flex;
- justify-content: center;
align-items: center;
- width: 100%;
- gap: 40px;
- >img{
- width: 400px;
- }
- >span{
- display: flex;
- flex-wrap: wrap;
- max-width: 45%;
- gap: 50px;
- article{
- display: flex;
- align-items: center;
- gap: 20px;
- max-width: 40%;
- img{
- width: 55px;
- object-fit: contain;
- }
- div{
- h4{
- font-size: max(1.2vw,16px);
- color: var(--black);
- }
- p{
- font-weight: normal;
- font-size: max(.8vw,16px);
- line-height:30px;
-
- }
- }
- }
- }
-
- }
-}
+ justify-content: center;
+ flex-wrap: wrap;
+ width: 100% !important;
+ max-width: 90%;
-@media screen and (max-width:900px) {
- .FeaturesPage{
- background: var(--bg);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 30px;
- width: 100%;
- margin-block: 50px;
- >h1{
- font-size: 8vw;
- color: var(--text);
- }
- >p{
- font-weight: 500;
- font-size: 3vw;
- text-wrap: pretty;
- width: 60%;
+ gap: 50px;
+ article {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ gap: 20px;
+ max-width: 90% !important;
+ img {
+ width: 50px;
+ object-fit: contain;
+ }
+ div {
text-align: center;
- color: var(--text);
- }
- >div{
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column-reverse;
- width: 100%;
- gap: 40px;
- >img{
- width: 300px;
+ h4 {
+ font-size: max(1.2vw, 16px);
}
- >span{
- display: flex;align-items: center;justify-content: center;
- flex-wrap: wrap;
- width: 100% !important;
- max-width: 90%;
-
- gap: 50px;
- article{
- display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- gap: 20px;
- max-width: 90% !important;
- img{
- width: 50px;
- object-fit: contain;
- }
- div{
- text-align: center;
- h4{
- font-size: max(1.2vw,16px);
- }
- p{
- font-weight: normal;
- font-size: max(1vw,14px);
-
- }
- }
- }
+ p {
+ font-weight: normal;
+ font-size: max(1vw, 14px);
}
-
+ }
}
+ }
}
-
-}
\ No newline at end of file
+ }
+}
diff --git a/src/styles/pages/HomePage.scss b/src/styles/pages/HomePage.scss
index 3c9cba0..71c9a4c 100644
--- a/src/styles/pages/HomePage.scss
+++ b/src/styles/pages/HomePage.scss
@@ -1,209 +1,187 @@
-.HomePage{
+.HomePage {
+ min-height: 100vh;
+ background: var(--primary);
+ position: relative;
+ overflow: hidden;
+ margin-bottom: 20px;
+ > main {
+ position: relative;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: max(12vh, 120px);
+ gap: 0px;
+
+ z-index: 99;
+ > h1 {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ color: var(--white);
+ font-size: max(3vw, 40px);
+ h2 {
+ color: var(--secondary);
+ font-size: max(3vw, 40px);
+ }
+ }
+ p {
+ color: var(--white);
+ font-size: max(1.5vw, 15px);
+ margin-bottom: 10px;
+ }
+ > div {
+ display: flex;
+ gap: max(1vw, 10px);
+ button {
+ all: unset;
+ padding: max(0.5vw, 8px) max(1.5vw, 30px);
+ display: flex;
+ align-items: center;
+ gap: max(1vw, 10px);
+ color: var(--white);
+ border: 1px solid var(--white);
+ border-radius: 10px;
+ cursor: pointer;
+ transition: 0.5s ease-in-out;
+ padding-block: 10px;
+ &:hover {
+ background: var(--thirdly);
+ scale: 1.1;
+ }
+ h6 {
+ font-size: max(10px, 1vw);
+ font-weight: normal;
+ line-height: 21px;
+ }
+ h5 {
+ font-weight: bold;
+ font-size: max(12px, 1vw);
+ line-height: 21px;
+ }
+ svg {
+ font-size: max(20px, 1.3vw);
+ }
+ }
+ }
+ }
+ .shape {
+ position: absolute;
+ bottom: -18%;
+ width: 100%;
+ height: 300px;
+ min-height: 60vh;
+
+ object-fit: cover;
+ }
+ .circle {
+ position: absolute;
+ width: 66%;
+ top: 73%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ .slider {
+ position: absolute;
+ width: 50%;
+ top: 74%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+}
+
+@media screen and (max-width: 900px) {
+ .HomePage {
min-height: 100vh;
background: var(--primary);
position: relative;
overflow: hidden;
- margin-bottom: 20px;
- >main{
- position: relative;
- width: 100%;
+ padding-bottom: 120px;
+ > main {
+ position: relative;
+ width: 90%;
+ margin-inline: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: max(11vh, 100px);
+ gap: 0px;
+
+ z-index: 99;
+ > h1 {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 0px;
+ color: var(--white);
+ font-size: max(4vw, 20px);
+ h2 {
+ color: var(--secondary);
+ font-size: max(4vw, 22px);
+ }
+ }
+ p {
+ color: var(--white);
+ font-size: max(3vw, 14px);
+ width: 94%;
+ text-align: center;
+ }
+ > div {
+ display: flex;
+ gap: max(1vw, 10px);
+ button {
+ all: unset;
+ padding: max(0.5vw, 8px) max(1.5vw, 20px);
+ display: flex;
+ align-items: center;
+ gap: max(1vw, 10px);
+ color: var(--white);
+ border: 1px solid var(--white);
+ border-radius: 10px;
+ cursor: pointer;
+ transition: 0.5s ease-in-out;
+ padding-block: 8px;
+ // width: 90% !important;
+ &:hover {
+ background: var(--thirdly);
+ scale: 1.1;
+ }
+ h6 {
+ font-size: max(10px, 1vw);
+ font-weight: normal;
+ line-height: 15px;
+ }
+ h5 {
+ font-weight: bold;
+ font-size: max(12px, 1vw);
+ line-height: 15px;
+ }
+ div:has(svg) {
display: flex;
- flex-direction: column;
- align-items: center;
justify-content: center;
- margin-top: max(12vh,120px);
- gap:0px;
-
- z-index: 99;
- >h1{
- display: flex;
- align-items: center;
- gap: 20px;
- color: var(--white);
- font-size: max(3vw,40px);
- h2{
- color: var(--secondary);
- font-size: max(3vw,40px);
- }
- }
- p{
- color: var(--white);
- font-size: max(1.5vw,15px);
- margin-bottom: 10px;
- }
- >div{
- display: flex;
- gap: max(1vw,10px);
- button{
- all: unset;
- padding: max(.5vw,8px) max(1.5vw,30px);
- display: flex;
- align-items: center;
- gap: max(1vw,10px);
- color: var(--white);
- border: 1px solid var(--white);
- border-radius: 10px;
- cursor: pointer;
- transition: .5s ease-in-out;
- padding-block: 10px;
- &:hover{
- background: var(--thirdly);
- scale: 1.1;
- }
- h6{
- font-size: max(10px,1vw);
- font-weight: normal;
- line-height: 21px;
- }
- h5{
- font-weight: bold;
- font-size: max(12px,1vw);
- line-height: 21px;
- }
- svg{
- font-size: max(20px,1.3vw);
- }
- }
- }
-
-
+ align-items: center;
+ }
+ svg {
+ font-size: max(20px, 1.3vw);
+ }
+ }
+ }
}
- .shape{
- position: absolute;
- bottom: -18%;
- width: 100%;
- height: 300px;
- min-height: 60vh;
-
- object-fit: cover;
-
-
- }
- .circle{
- position: absolute;
- width: 66%;
- top: 73%;
- left: 50%;
- transform: translate(-50%,-50%);
-
-
- }
- .slider{
- position: absolute;
- width: 50%;
- top: 74%;
- left: 50%;
- transform: translate(-50%,-50%);
- }
-
-
-
+ .shape {
+ display: none;
+ }
+ .circle {
+ position: absolute;
+ width: 800px;
+ top: 500px;
+ }
+ .slider {
+ position: absolute;
+ width: 600px;
+ top: 600px;
+ }
+ }
}
-
-
-
-@media screen and (max-width:900px) {
- .HomePage{
- min-height: 100vh;
- background: var(--primary);
- position: relative;
- overflow: hidden;
- padding-bottom: 120px;
- >main{
- position: relative;
- width: 90%;
- margin-inline: auto;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin-top: max(11vh,100px);
- gap: 0px;
-
- z-index: 99;
- >h1{
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- gap: 0px;
- color: var(--white);
- font-size: max(4vw,20px);
- h2{
- color: var(--secondary);
- font-size: max(4vw,22px);
- }
- }
- p{
- color: var(--white);
- font-size: max(3vw,14px);
- width: 94%;
- text-align: center;
- }
- >div{
- display: flex;
- gap: max(1vw,10px);
- button{
- all: unset;
- padding: max(.5vw,8px) max(1.5vw,20px);
- display: flex;
- align-items: center;
- gap: max(1vw,10px);
- color: var(--white);
- border: 1px solid var(--white);
- border-radius: 10px;
- cursor: pointer;
- transition: .5s ease-in-out;
- padding-block: 8px;
- // width: 90% !important;
- &:hover{
- background: var(--thirdly);
- scale: 1.1;
- }
- h6{
- font-size: max(10px,1vw);
- font-weight: normal;
- line-height: 15px;
- }
- h5{
- font-weight: bold;
- font-size: max(12px,1vw);
- line-height: 15px;
- }
- div:has(svg){
- display: flex;
- justify-content: center;
- align-items: center;
- }
- svg{
- font-size: max(20px,1.3vw);
-
- }
- }
- }
-
-
- }
- .shape{
- display: none;
-
- }
- .circle{
- position: absolute;
- width: 800px;
- top: 500px;
-
-
- }
- .slider{
- position: absolute;
- width: 600px;
- top: 600px;
-
- }
-
-
-
- }
-
-}
\ No newline at end of file
diff --git a/src/styles/pages/HowItWork.scss b/src/styles/pages/HowItWork.scss
index 2a49f47..61bc107 100644
--- a/src/styles/pages/HowItWork.scss
+++ b/src/styles/pages/HowItWork.scss
@@ -1,145 +1,138 @@
-.HowItWork{
+.HowItWork {
+ background: var(--bg);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+ width: 100%;
+ margin-bottom: 100px;
+
+ > h1 {
+ font-size: 3vw;
+ color: #000;
+ }
+ > p {
+ font-weight: 500;
+ font-size: 1.2vw;
+ text-wrap: pretty;
+ width: 52%;
+ text-align: center;
+ color: var(--text);
+ }
+ > div {
+ display: flex;
+ justify-content: center;
+
+ width: 80%;
+ gap: 40px;
+ margin-top: 40px;
+ > img {
+ width: 600px;
+ }
+ > span {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ max-width: 100%;
+ height: 100%;
+ gap: 100px;
+ padding-block: 10%;
+ article {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ max-width: 100%;
+ img {
+ width: 50px;
+ object-fit: contain;
+ }
+ div {
+ width: 100% !important;
+ h4 {
+ font-size: max(1.2vw, 16px);
+ }
+ p {
+ font-weight: normal;
+ font-size: max(1vw, 14px);
+ width: 100%;
+ }
+ }
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 900px) {
+ .HowItWork {
background: var(--bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- gap: 20px;
+ gap: 30px;
width: 100%;
- margin-bottom: 100px;
+ margin-block: 100px;
- >h1{
- font-size: 3vw;
- color: #000;
+ > h1 {
+ font-size: 7vw;
+ color: var(--text);
}
- >p{
- font-weight: 500;
- font-size: 1.2vw;
- text-wrap: pretty;
- width: 52%;
- text-align: center;
- color: var(--text);
+ > p {
+ font-weight: 500;
+ font-size: 3vw;
+ text-wrap: pretty;
+ width: 60%;
+ text-align: center;
+ color: var(--text);
}
- >div{
- display: flex;
- justify-content: center;
-
- width: 80%;
- gap: 40px;
- margin-top: 40px;
- >img{
- width: 600px;
- }
- >span{
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- max-width: 100%;
- height: 100%;
- gap: 100px;
- padding-block: 10%;
- article{
- display: flex;
- align-items: center;
- gap: 20px;
- max-width: 100%;
- img{
- width: 50px;
- object-fit: contain;
- }
- div{
- width: 100% !important;
- h4{
- font-size: max(1.2vw,16px);
- }
- p{
- font-weight: normal;
- font-size: max(1vw,14px);
- width: 100%;
- }
- }
- }
- }
-
- }
-}
-
-
-@media screen and (max-width:900px) {
-
- .HowItWork{
- background: var(--bg);
+ > div {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ width: 80%;
+ gap: 40px;
+ margin-top: 40px;
+ > img {
+ width: 300px;
+ order: 0;
+ }
+ > span {
+ order: 2;
display: flex;
flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 30px;
- width: 100%;
- margin-block: 100px;
-
- >h1{
- font-size: 7vw;
- color: var(--text);
- }
- >p{
- font-weight: 500;
- font-size: 3vw;
- text-wrap: pretty;
- width: 60%;
- text-align: center;
- color: var(--text);
- }
- >div{
- display: flex;
- justify-content: center;
- flex-direction: column;
- align-items: center;
+ justify-content: space-between;
+ min-width: 100%;
+ height: 100%;
+ gap: 20px;
+ padding-block: 0%;
+
+ article {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ max-width: 100%;
+ background: var(--bg2);
+ padding: 20px;
+ img {
+ width: 50px;
+ object-fit: contain;
+ }
+ div {
width: 80%;
- gap: 40px;
- margin-top: 40px;
- >img{
- width: 300px;
- order: 0;
-
+ h4 {
+ font-size: max(1.2vw, 16px);
}
- >span{
- order: 2;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- min-width: 100%;
- height: 100%;
- gap: 20px;
- padding-block: 0%;
-
- article{
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- gap: 20px;
- max-width: 100%;
- background: var(--bg2);
- padding:20px;
- img{
- width: 50px;
- object-fit: contain;
- }
- div{
- width: 80%;
- h4{
- font-size: max(1.2vw,16px);
- }
- p{
- font-weight: normal;
- font-size: max(1vw,14px);
- width: 100%;
-
- }
- }
- }
+ p {
+ font-weight: normal;
+ font-size: max(1vw, 14px);
+ width: 100%;
}
-
+ }
}
-
+ }
}
-}
\ No newline at end of file
+ }
+}
diff --git a/src/styles/pages/NotePage.scss b/src/styles/pages/NotePage.scss
index 218d4e8..6ffd64d 100644
--- a/src/styles/pages/NotePage.scss
+++ b/src/styles/pages/NotePage.scss
@@ -1,122 +1,119 @@
-.NotePage{
+.NotePage {
+ background: var(--bg2);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+ width: 100%;
+ padding-block: 100px;
+ > h1 {
+ font-size: 3vw;
+ color: #000;
+ }
+ > p {
+ font-weight: 500;
+ font-size: 1.2vw;
+ text-wrap: pretty;
+ width: 52%;
+ text-align: center;
+ color: var(--text);
+ }
+
+ > div {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ gap: 40px;
+ padding-block: 30px;
+ article {
+ width: 40vw;
+ max-width: 450px;
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+ > div {
+ display: flex;
+ gap: 10px;
+ flex-direction: column;
+ padding: 30px 10px;
+ background: var(--bg);
+ position: relative;
+ .message_form {
+ position: absolute;
+ bottom: -10%;
+ }
+ }
+ > span {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ img {
+ width: 50px;
+ }
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 900px) {
+ .NotePage {
background: var(--bg2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- gap: 20px;
+ gap: 0px;
width: 100%;
- padding-block: 100px;
- >h1{
- font-size: 3vw;
- color: #000;
+ padding-block: 50px;
+ > h1 {
+ font-size: 5vw;
+ color: var(--text);
}
- >p{
- font-weight: 500;
- font-size: 1.2vw;
- text-wrap: pretty;
- width: 52%;
- text-align: center;
- color: var(--text);
+ > p {
+ font-weight: 500;
+ font-size: 3vw;
+ text-wrap: pretty;
+ width: 80%;
+ text-align: center;
+ color: var(--text);
}
->div{
- display: flex;
- justify-content: center;
- align-items: center;
-
- gap: 40px;
- padding-block: 30px;
- article{
- width: 40vw;
- max-width: 450px;
+ > div {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ width: 90%;
+ gap: 40px;
+ padding-block: 30px;
+ article {
+ width: 100%;
display: flex;
flex-direction: column;
gap: 30px;
- >div{
- display: flex;
- gap: 10px;
- flex-direction: column;
- padding: 30px 10px;
- background: var(--bg);
- position: relative;
- .message_form{
- position: absolute;
- bottom: -10% ;
- }
+ > div {
+ display: flex;
+ gap: 10px;
+ flex-direction: column;
+ padding: 30px 10px;
+ background: var(--bg);
+ position: relative;
+ .message_form {
+ position: absolute;
+ bottom: -8%;
+ }
}
- >span{
- display: flex;
- align-items: center;
- gap: 20px;
- img{
- width: 50px;
- }
+ > span {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ img {
+ width: 50px;
+ }
}
+ }
}
+ }
}
-}
-
-@media screen and (max-width:900px) {
-
- .NotePage{
- background: var(--bg2);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 0px;
- width: 100%;
- padding-block: 50px;
- >h1{
- font-size: 5vw;
- color: var(--text);
- }
- >p{
- font-weight: 500;
- font-size: 3vw;
- text-wrap: pretty;
- width: 80%;
- text-align: center;
- color: var(--text);
- }
-
- >div{
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- width: 90%;
- gap: 40px;
- padding-block: 30px;
- article{
- width: 100%;
- display: flex;
- flex-direction: column;
- gap: 30px;
- >div{
- display: flex;
- gap: 10px;
- flex-direction: column;
- padding: 30px 10px;
- background: var(--bg);
- position: relative;
- .message_form{
- position: absolute;
- bottom: -8% ;
- }
- }
- >span{
- display: flex;
- align-items: center;
- gap: 20px;
- img{
- width: 50px;
- }
- }
- }
- }
- }
-
-
-}
\ No newline at end of file
diff --git a/src/styles/pages/ScreenShoot.scss b/src/styles/pages/ScreenShoot.scss
index 2ac95ef..f83709c 100644
--- a/src/styles/pages/ScreenShoot.scss
+++ b/src/styles/pages/ScreenShoot.scss
@@ -1,52 +1,47 @@
-.ScreenShoot{
- background: var(--bg);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 20px;
- width: 100%;
- margin-bottom: 100px;
- position: relative;
-
- >h1{
- font-size: 3vw;
- color: #000;
+.ScreenShoot {
+ background: var(--bg);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+ width: 100%;
+ margin-bottom: 100px;
+ position: relative;
+
+ > h1 {
+ font-size: 3vw;
+ color: #000;
}
- >p{
- font-weight: 500;
- font-size: 1.2vw;
- text-wrap: pretty;
- width: 52%;
- text-align: center;
- color: var(--text);
+ > p {
+ font-weight: 500;
+ font-size: 1.2vw;
+ text-wrap: pretty;
+ width: 52%;
+ text-align: center;
+ color: var(--text);
}
- .SwipeScreenShoot{
+ .SwipeScreenShoot {
color: white;
width: 88%;
margin-inline: auto;
- img{
- width: 250px;
- margin-inline: auto;
+ img {
+ width: 250px;
+ margin-inline: auto;
}
-
-
}
}
-.swiper-pagination-bullets.swiper-pagination-horizontal{
- transform: translateY(10px);
+.swiper-pagination-bullets.swiper-pagination-horizontal {
+ transform: translateY(10px);
}
-.swiper-slide{
+.swiper-slide {
display: flex;
}
-
-
-@media screen and (max-width:900px) {
-
- .ScreenShoot{
+@media screen and (max-width: 900px) {
+ .ScreenShoot {
background: var(--bg);
display: flex;
flex-direction: column;
@@ -56,40 +51,36 @@
width: 100%;
margin-block: 50px;
position: relative;
-
- >h1{
- font-size: 6vw;
- color: var(--text);
- }
- >p{
- font-weight: 500;
- font-size: 12px;
- text-wrap: pretty;
- width: 80%;
- text-align: center;
- color: var(--text);
- margin-bottom: 20px;
- }
- .SwipeScreenShoot{
- color: white;
- width: 80%;
- margin-inline: auto;
- img{
+ > h1 {
+ font-size: 6vw;
+ color: var(--text);
+ }
+ > p {
+ font-weight: 500;
+ font-size: 12px;
+ text-wrap: pretty;
+ width: 80%;
+ text-align: center;
+ color: var(--text);
+ margin-bottom: 20px;
+ }
+ .SwipeScreenShoot {
+ color: white;
+ width: 80%;
+
+ margin-inline: auto;
+ img {
width: 280px;
margin-inline: auto;
+ }
}
+ }
-
+ .swiper-pagination-bullets.swiper-pagination-horizontal {
+ transform: translateY(10px);
+ }
+ .swiper-slide {
+ display: flex;
}
}
-
-.swiper-pagination-bullets.swiper-pagination-horizontal{
- transform: translateY(10px);
-}
-.swiper-slide{
- display: flex;
-}
-
-
-}
\ No newline at end of file
diff --git a/src/styles/pages/VideoPage.scss b/src/styles/pages/VideoPage.scss
index 078a71c..35e64a4 100644
--- a/src/styles/pages/VideoPage.scss
+++ b/src/styles/pages/VideoPage.scss
@@ -1,150 +1,139 @@
-.VideoPage{
+.VideoPage {
+ background: var(--bg);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 30px;
+ width: 100%;
+ margin-bottom: 130px;
+ position: relative;
+
+ > img {
+ width: 100%;
+ object-fit: cover;
+ }
+
+ main {
+ position: absolute;
+ top: 30%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: var(--white);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ // gap: 10px ;
+ h1 {
+ font-size: 3vw;
+ }
+ p {
+ margin-bottom: 30px;
+ font-weight: normal;
+ }
+ img {
+ width: 80px;
+ object-fit: contain;
+ cursor: pointer;
+ }
+ }
+ > span {
+ position: absolute;
+ bottom: -13%;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ background: var(--white);
+ border-radius: 10px;
+ width: 80%;
+ z-index: 99;
+ min-height: 230px;
+ article {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ gap: 10px;
+ }
+ }
+}
+
+@media screen and (max-width: 900px) {
+ .VideoPage {
background: var(--bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- gap: 30px;
+ gap: 20px;
width: 100%;
- margin-bottom: 130px;
+ margin-bottom: 100px;
position: relative;
- >img{
-
- width: 100%;
- object-fit: cover;
-
- }
-
-
- main{
- position: absolute;
- top:30%;
- left: 50%;
- transform: translate(-50%,-50%);
- color: var(--white);
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- // gap: 10px ;
- h1{
- font-size: 3vw;
- }
- p{
- margin-bottom: 30px;
- font-weight: normal;
- }
- img{
- width: 80px;
- object-fit: contain;
- cursor: pointer;
- }
+ > img {
+ width: 100%;
+ height: 600px;
+ object-fit: cover;
}
- >span{
- position: absolute;
- bottom: -13%;
- display: flex;
- justify-content: space-around;
- align-items: center;
- background:var(--white);
- border-radius: 10px;
- width: 80%;
- z-index: 99;
- min-height: 230px;
- article{
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- gap: 10px;
- }
+
+ main {
+ position: absolute;
+ top: 30%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: var(--white);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ gap: 0px;
+ width: 80%;
+ h1 {
+ font-size: 5vw;
+ }
+ p {
+ font-weight: normal;
+ line-height: 30px;
+ font-size: 3vw;
+ }
+ img {
+ width: 80px;
+ object-fit: contain;
+ cursor: pointer;
+ }
}
-}
-
-
-@media screen and (max-width:900px) {
-
- .VideoPage{
- background: var(--bg);
+ > span {
+ position: absolute;
+ bottom: -10%;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ flex-wrap: wrap;
+ background: var(--white);
+ border-radius: 10px;
+ width: 60%;
+ z-index: 99;
+ min-height: 200px;
+ padding: 40px 20px;
+ gap: 20px;
+ article {
display: flex;
flex-direction: column;
align-items: center;
- justify-content: center;
- gap: 20px;
- width: 100%;
- margin-bottom: 100px;
- position: relative;
-
- >img{
-
- width: 100%;
- height: 600px;
- object-fit: cover;
-
- }
-
-
- main{
- position: absolute;
- top:30%;
- left: 50%;
- transform: translate(-50%,-50%);
- color: var(--white);
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- gap: 0px;
- width: 80%;
- h1{
- font-size: 5vw;
- }
- p{
- font-weight: normal;
- line-height: 30px;
- font-size: 3vw;
- }
- img{
- width: 80px;
- object-fit: contain;
- cursor: pointer;
- }
+ text-align: center;
+ gap: 10px;
+ min-width: 30%;
+ img {
+ width: 30px;
}
- >span{
- position: absolute;
- bottom: -10%;
- display: flex;
- justify-content: space-around;
- align-items: center;
- flex-wrap: wrap;
- background:var(--white);
- border-radius: 10px;
- width: 60%;
- z-index: 99;
- min-height: 200px;
- padding: 40px 20px;
- gap: 20px;
- article{
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- gap: 10px;
- min-width: 30%;
- img{
- width: 30px;
- }
- h4{
- font-size: 16px;
- }
- p{
- font-size: 13px;
- }
-
- }
+ h4 {
+ font-size: 16px;
}
+ p {
+ font-size: 13px;
+ }
+ }
}
-
-
-}
\ No newline at end of file
+ }
+}
diff --git a/src/styles/pages/index.scss b/src/styles/pages/index.scss
index 90e69df..d01a583 100644
--- a/src/styles/pages/index.scss
+++ b/src/styles/pages/index.scss
@@ -5,4 +5,4 @@
@import './ScreenShoot.scss';
@import './NotePage.scss';
@import './DownloadPage.scss';
-@import './ContactPage.scss'
\ No newline at end of file
+@import './ContactPage.scss';
diff --git a/src/translate/ar.json b/src/translate/ar.json
index 471b6b0..612c804 100644
--- a/src/translate/ar.json
+++ b/src/translate/ar.json
@@ -14,19 +14,19 @@
"available_on": "متاح على",
"google_play": "جوجل بلاي",
"Friendly_Online_Support": "دعم ودود عبر الإنترنت",
- "Providing_round_the_clock_technical_support_to_assist_you_with_any_inquiries": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات.",
- "Unlimited_Features": "ميزات غير محدودة",
- "Enjoy_limitless_possibilities_to_customize_your_experience": "استمتع بإمكانيات غير محدودة لتخصيص تجربتك.",
- "Modular_and_Switchable_Component": "مكون معياري وقابل للتبديل",
- "Easily_switch_between_layouts_and_even_demos": "تبديل بين التخطيطات وحتى العروض التوضيحية بسهولة.",
- "High_Resolution": "دقة عالية",
- "Get_high_quality_images_and_videos": "احصل على جودة صور وفيديو عالية الدقة.",
- "Social_Sharing": "مشاركة اجتماعية",
- "Easily_share_content_across_social_media_platforms": "سهولة مشاركة المحتوى عبر منصات التواصل الاجتماعي.",
- "Use_on_Any_Device": "استخدم على أي جهاز",
- "Compatibility_with_all_devices_for_a_seamless_experience": "توافق مع جميع الأجهزة لضمان تجربة سلسة.",
- "Creative_Design": "التصميم الإبداعي",
- "Attractive_and_innovative_design_that_meets_your_needs": "تصميم جذاب وابتكاري يلبي احتياجاتك.",
- "Providing_professional_value_objectively_with_varied_web_readiness_Collaborative_wireless_customer_service_without_targeted_incentives_for_change_Collaboration" :"تقديم قيمة احترافية بموضوعية مع جاهزية متنوعة للويب. نقل خدمة العملاء اللاسلكية بشكل تعاوني دون محفزات موجهة نحو الهدف للتغيير. التعاون.",
- "Application_Features":"ميزات التطبيق"
+ "Providing_round_the_clock_technical_support_to_assist_you_with_any_inquiries": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات.",
+ "Unlimited_Features": "ميزات غير محدودة",
+ "Enjoy_limitless_possibilities_to_customize_your_experience": "استمتع بإمكانيات غير محدودة لتخصيص تجربتك.",
+ "Modular_and_Switchable_Component": "مكون معياري وقابل للتبديل",
+ "Easily_switch_between_layouts_and_even_demos": "تبديل بين التخطيطات وحتى العروض التوضيحية بسهولة.",
+ "High_Resolution": "دقة عالية",
+ "Get_high_quality_images_and_videos": "احصل على جودة صور وفيديو عالية الدقة.",
+ "Social_Sharing": "مشاركة اجتماعية",
+ "Easily_share_content_across_social_media_platforms": "سهولة مشاركة المحتوى عبر منصات التواصل الاجتماعي.",
+ "Use_on_Any_Device": "استخدم على أي جهاز",
+ "Compatibility_with_all_devices_for_a_seamless_experience": "توافق مع جميع الأجهزة لضمان تجربة سلسة.",
+ "Creative_Design": "التصميم الإبداعي",
+ "Attractive_and_innovative_design_that_meets_your_needs": "تصميم جذاب وابتكاري يلبي احتياجاتك.",
+ "Providing_professional_value_objectively_with_varied_web_readiness_Collaborative_wireless_customer_service_without_targeted_incentives_for_change_Collaboration": "تقديم قيمة احترافية بموضوعية مع جاهزية متنوعة للويب. نقل خدمة العملاء اللاسلكية بشكل تعاوني دون محفزات موجهة نحو الهدف للتغيير. التعاون.",
+ "Application_Features": "ميزات التطبيق"
}
diff --git a/src/translate/en.json b/src/translate/en.json
index 66b79a7..0bb5911 100644
--- a/src/translate/en.json
+++ b/src/translate/en.json
@@ -8,20 +8,20 @@
"available_on": "Available on",
"google_play": "Google Play",
"Friendly_Online_Support": "Friendly Online Support",
- "Providing_round_the_clock_technical_support_to_assist_you_with_any_inquiries": "Providing round-the-clock technical support to assist you with any inquiries.",
- "Unlimited_Features": "Unlimited Features",
- "Enjoy_limitless_possibilities_to_customize_your_experience": "Enjoy limitless possibilities to customize your experience.",
- "Modular_and_Switchable_Component": "Modular and Switchable Component",
- "Easily_switch_between_layouts_and_even_demos": "Easily switch between layouts and even demos.",
- "High_Resolution": "High Resolution",
- "Get_high_quality_images_and_videos": "Get high-quality images and videos.",
- "Social_Sharing": "Social Sharing",
- "Easily_share_content_across_social_media_platforms": "Easily share content across social media platforms.",
- "Use_on_Any_Device": "Use on Any Device",
- "Compatibility_with_all_devices_for_a_seamless_experience": "Compatibility with all devices for a seamless experience.",
- "Creative_Design": "Creative Design",
- "Attractive_and_innovative_design_that_meets_your_needs": "Attractive and innovative design that meets your needs.",
- "Application_Features": "Features of the Application",
- "Providing_professional_value_objectively_with_varied_web_readiness_Collaborative_wireless_customer_service_without_targeted_incentives_for_change_Collaboration": "Providing professional value objectively with diverse web readiness Transferring wireless customer service collaboratively without targeted incentives for change Collaboration",
- "":""
+ "Providing_round_the_clock_technical_support_to_assist_you_with_any_inquiries": "Providing round-the-clock technical support to assist you with any inquiries.",
+ "Unlimited_Features": "Unlimited Features",
+ "Enjoy_limitless_possibilities_to_customize_your_experience": "Enjoy limitless possibilities to customize your experience.",
+ "Modular_and_Switchable_Component": "Modular and Switchable Component",
+ "Easily_switch_between_layouts_and_even_demos": "Easily switch between layouts and even demos.",
+ "High_Resolution": "High Resolution",
+ "Get_high_quality_images_and_videos": "Get high-quality images and videos.",
+ "Social_Sharing": "Social Sharing",
+ "Easily_share_content_across_social_media_platforms": "Easily share content across social media platforms.",
+ "Use_on_Any_Device": "Use on Any Device",
+ "Compatibility_with_all_devices_for_a_seamless_experience": "Compatibility with all devices for a seamless experience.",
+ "Creative_Design": "Creative Design",
+ "Attractive_and_innovative_design_that_meets_your_needs": "Attractive and innovative design that meets your needs.",
+ "Application_Features": "Features of the Application",
+ "Providing_professional_value_objectively_with_varied_web_readiness_Collaborative_wireless_customer_service_without_targeted_incentives_for_change_Collaboration": "Providing professional value objectively with diverse web readiness Transferring wireless customer service collaboratively without targeted incentives for change Collaboration",
+ "": ""
}
diff --git a/src/utils/index.tsx b/src/utils/index.tsx
index bd28c41..3b8a4c6 100644
--- a/src/utils/index.tsx
+++ b/src/utils/index.tsx
@@ -1,6 +1,3 @@
-import Logo from '../assets/core/logo.svg'
+import Logo from '../assets/core/logo.svg';
-
-export {
- Logo
-}
\ No newline at end of file
+export { Logo };
+