-
- - {item[1].title} -
-- {item[1].description} -
-{ContactPageData.title}
- {ContactPageData.description} + {ContactPageData.description}
{Object.entries(ContactPageData.Data)?.map((item, index) => {
diff --git a/src/components/SwiperScreenShoot.tsx b/src/components/SwiperScreenShoot.tsx
index 40ddc7c..a8f01ca 100644
--- a/src/components/SwiperScreenShoot.tsx
+++ b/src/components/SwiperScreenShoot.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
// Import Swiper React components
import { Pagination, A11y ,Autoplay} from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
@@ -9,34 +8,17 @@ import 'swiper/css/scrollbar';
import {ScreenShoot as ScreenShootData} from '../../data.json'
const SwipeScreenShoot = () => {
- const SwipeScreenShoot = [
- { image: "/SwipeScreenShoot/1.png" },
- { image: "/SwipeScreenShoot/2.png" },
- { image: "/SwipeScreenShoot/3.png" },
- { image: "/SwipeScreenShoot/4.png" },
- { image: "/SwipeScreenShoot/1.png" },
- { image: "/SwipeScreenShoot/2.png" },
- { image: "/SwipeScreenShoot/3.png" },
- { image: "/SwipeScreenShoot/1.png" },
- { image: "/SwipeScreenShoot/2.png" },
- { image: "/SwipeScreenShoot/3.png" },
- { image: "/SwipeScreenShoot/4.png" },
- { image: "/SwipeScreenShoot/1.png" },
- { image: "/SwipeScreenShoot/2.png" },
- { image: "/SwipeScreenShoot/3.png" },
-
- ];
return (
console.log(swiper)}
- onSlideChange={() => console.log('slide change')}
+ // onSwiper={(swiper) => console.log(swiper)}
+ // onSlideChange={() => console.log('slide change')}
breakpoints={{
400: {
slidesPerView: 1,
diff --git a/src/components/layout/BackToTop.tsx b/src/components/layout/BackToTop.tsx
new file mode 100644
index 0000000..320477d
--- /dev/null
+++ b/src/components/layout/BackToTop.tsx
@@ -0,0 +1,25 @@
+import { Button } from 'antd';
+import { FaHandPointUp } from "react-icons/fa";
+import useScroll from '../../hooks/useScroll';
+
+const BackToTopButton = () => {
+ const showButton = useScroll(100);
+
+ const scrollToTop = () => {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ };
+
+ return (
+
+ );
+};
+
+export default BackToTopButton;
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 50f04fc..51f8597 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import NavBar from './NavBar';
import Footer from './Footer';
+import BackToTopButton from './BackToTop';
const Layout = ({ children }: { children: React.ReactNode }) => {
return (
@@ -8,6 +9,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
);
};
diff --git a/src/components/layout/NavBar.tsx b/src/components/layout/NavBar.tsx
index 23fbdef..88033e9 100644
--- a/src/components/layout/NavBar.tsx
+++ b/src/components/layout/NavBar.tsx
@@ -48,7 +48,6 @@ const NavBarContent = (
const [Active, setActive] = useState(location.hash)
- console.log(Active);
return (
diff --git a/src/hooks/useScroll.tsx b/src/hooks/useScroll.tsx
new file mode 100644
index 0000000..43f638c
--- /dev/null
+++ b/src/hooks/useScroll.tsx
@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+
+function useScroll(threshold = 100): boolean {
+ const [isVisible, setIsVisible] = useState
{Object.entries(HowItWorkData.Data).slice(0,2).map((item, index) => {
- return (
-
- 
-
- )
- })}
+ return (
+
+
+
+ )
+ })}
diff --git a/src/pages/NotePage.tsx b/src/pages/NotePage.tsx
index 7956648..3151abf 100644
--- a/src/pages/NotePage.tsx
+++ b/src/pages/NotePage.tsx
@@ -14,6 +14,7 @@ const NotePage = () => {
return (
+
+ + {item[1].title} +
++ {item[1].description} +
+
diff --git a/src/pages/NotePage.tsx b/src/pages/NotePage.tsx
index 7956648..3151abf 100644
--- a/src/pages/NotePage.tsx
+++ b/src/pages/NotePage.tsx
@@ -14,6 +14,7 @@ const NotePage = () => {
return (
+ 
{item[1].description}
diff --git a/src/styles/App/Variables.scss b/src/styles/App/Variables.scss index af677f5..5ca30ad 100644 --- a/src/styles/App/Variables.scss +++ b/src/styles/App/Variables.scss @@ -1,8 +1,10 @@ :root { --primary: #222838; - --secondary: #55B9E3; + --secondary: #fdba2d; + --thirdly:#0093d4; --white:white; - --text: #4C5462; + --text: #000; + --black:#000; --placeholder: rgb(0, 0, 0, 0.3); --bg: rgb(245 247 251); --bg2: white; diff --git a/src/styles/App/classNames.scss b/src/styles/App/classNames.scss index 5d42914..84d0df2 100644 --- a/src/styles/App/classNames.scss +++ b/src/styles/App/classNames.scss @@ -16,4 +16,4 @@ } .spinner{ -} \ No newline at end of file +} diff --git a/src/styles/components/BackToTop.scss b/src/styles/components/BackToTop.scss new file mode 100644 index 0000000..fce53ab --- /dev/null +++ b/src/styles/components/BackToTop.scss @@ -0,0 +1,36 @@ +.back_to_top { + width: 50px; + height: 50px; + // border-radius: 50%; + position: fixed; + background-color: var(--thirdly) !important; + color: var(--white); + bottom: 30px; + right: 20px; + padding: 10px; + opacity: 0; + transition: + opacity 0.5s, + transform; + transform: translateY(100%); + transition: all 0.3s ease-in-out; + border: none; + z-index: 9999 !important; + svg { + font-size: 26px; + color: var(--white); + } + &:hover { + scale: 1.05; + } +} + +.back_to_top.show { + opacity: 1; + transform: translateY(0); +} + +.back_to_top.hide { + opacity: 0; + transform: translateY(100%); +} diff --git a/src/styles/components/Footer.scss b/src/styles/components/Footer.scss index c35f6eb..b9f6f1b 100644 --- a/src/styles/components/Footer.scss +++ b/src/styles/components/Footer.scss @@ -1,6 +1,6 @@ .Footer{ background: var(--primary); - height: 300px; + height: 350px; display: flex; flex-direction: column; justify-content: center; @@ -18,7 +18,7 @@ display: flex; align-items: center; justify-content: center; - gap: 20px; + gap: 10px; svg{ font-size: 20px; color: var(--white); @@ -29,14 +29,15 @@ } p{ - font-size: 14px; + font-size: 16px; + color: var(--white); } } .FooterHeader{ position: absolute; - top: -40%; - background-image: var(--gradient); + top: -25%; + background: var(--thirdly); width: 70%; height: 150px; display: flex; @@ -45,6 +46,7 @@ padding-inline: 5%; color: var(--white); + border-radius: 6px; >span{ display: flex; flex-direction: column; @@ -71,13 +73,17 @@ } } div{ - background-image: var(--gradient); + background: var(--thirdly); width: 50px; display: flex; justify-content: center; align-items: center; border-radius: 5px; cursor: pointer; + svg{ + font-size: 30px; + width: 30px; + } } } @@ -89,17 +95,17 @@ .Footer{ background: var(--primary); - height: 400px; + height: 330px; display: flex; flex-direction: column; - justify-content: center; + justify-content: end; align-items: center; gap: 30px; margin-top: 250px; width: 100%; z-index: 999; position: relative; - + padding-bottom: 30px; img{ width: 100px; @@ -126,7 +132,7 @@ .FooterHeader{ position: absolute; top: -40%; - background-image: var(--gradient); + background: var(--thirdly); width: 60%; height: fit-content; padding-block: 20px; @@ -168,7 +174,7 @@ } } div{ - background-image: var(--gradient); + background: var(--thirdly); width: 50px; display: flex; justify-content: center; diff --git a/src/styles/components/NavBar.scss b/src/styles/components/NavBar.scss index 2b3575e..11ed5b8 100644 --- a/src/styles/components/NavBar.scss +++ b/src/styles/components/NavBar.scss @@ -34,6 +34,8 @@ 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; @@ -43,7 +45,7 @@ } .activeLink{ a{ - color: var(--secondary) !important; + color: var(--thirdly) !important; opacity: 1; } } @@ -81,7 +83,7 @@ .NavBarContent{ position: relative; z-index: 9999999999; - background-image: var(--gradient); + background: var(--thirdly); width: 150px; min-height: 200px; padding-top: 20px; diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss index 09e13f5..969bc33 100644 --- a/src/styles/components/index.scss +++ b/src/styles/components/index.scss @@ -2,4 +2,5 @@ @import './Layout.scss'; @import "./PageTransition.scss"; @import './NavBar.scss'; -@import './Footer.scss'; \ No newline at end of file +@import './Footer.scss'; +@import './BackToTop.scss'; \ No newline at end of file diff --git a/src/styles/pages/ContactPage.scss b/src/styles/pages/ContactPage.scss index 9421b18..4bff2b1 100644 --- a/src/styles/pages/ContactPage.scss +++ b/src/styles/pages/ContactPage.scss @@ -39,7 +39,8 @@ color: var(--white); border: 1px solid var(--white); border-radius: 7px; - background-image: linear-gradient(45deg, #55B9E3, #5262E3); + // background-image: linear-gradient(45deg, #55B9E3, #5262E3); + background: var(--thirdly); cursor: pointer; transition: .5s ease-in-out; &:hover{ @@ -62,21 +63,21 @@ >span{ display: flex; flex-direction: column; - gap: 10px; + gap: 2px; >div{ display: flex; align-items: center; gap: 10px; h6{ - font-size: 18px; + font-size: 20px; } img{ - width: 15px; + width: 18px; } } p{ - font-size: 14px; + font-size: 16px; font-weight: normal; } } @@ -91,15 +92,14 @@ display: flex; flex-direction: column; padding-inline: 5%; - gap: 30px; - width: 80%; - margin-block: 100px; + width: 90%; + margin-block: 0 100px; margin-inline: auto; - gap: 30px; + gap: 10px; .Right{ display: flex; flex-direction: column; - gap: 40px; + gap: 20px; .Forms{ display: flex; flex-wrap: wrap; @@ -127,7 +127,8 @@ color: var(--white); border: 1px solid var(--white); border-radius: 7px; - background-image: linear-gradient(45deg, #55B9E3, #5262E3); + background: var(--thirdly); + // background-image: linear-gradient(45deg, #55B9E3, #5262E3); } } .Left{ @@ -140,11 +141,11 @@ >div{ display: flex; flex-direction: column; - gap: 20px; + gap: 10px; >span{ display: flex; flex-direction: column; - gap: 10px; + gap: 0px; >div{ display: flex; align-items: center; diff --git a/src/styles/pages/DownloadPage.scss b/src/styles/pages/DownloadPage.scss index cfe4dd7..d988b19 100644 --- a/src/styles/pages/DownloadPage.scss +++ b/src/styles/pages/DownloadPage.scss @@ -46,7 +46,7 @@ transition: .5s ease-in-out; padding-block: 10px; &:hover{ - background: var(--gradient); + background: var(--thirdly); scale: 1.1; } h6{ @@ -102,9 +102,9 @@ .DownloadPage{ background: var(--bg); display: flex; - gap: 50px; + gap: 40px; width: 100%; - padding-block: 100px; + padding-block: 50px; position: relative; flex-direction: column; @@ -114,22 +114,22 @@ display: flex; flex-direction: column; align-items: center; - gap: max(2vh,25px); + gap: max(2vh,15px); text-align: center; z-index: 99; - padding-top: 0px ; + padding-top: 50px ; >h1{ display: flex; align-items: center; - gap: 20px; + gap: 10px; color: var(--white); - font-size: max(4vw,50px); + font-size: 6vw; } p{ color: var(--white); - font-size: max(1.3vw,15px); - width: 50%; + font-size: 4vw; + width: 80%; } >div{ display: flex; @@ -164,7 +164,7 @@ z-index: 1; top: 0; width: 100%; - height: 700px; + height: 630px; background: var(--primary); overflow: hidden; .circle{ @@ -173,14 +173,14 @@ top: 0%; left: 50%; transform: translate(-50%,0%); - z-index: 9999; + z-index: 1; } } .main{ position: relative; - z-index: 99999; + z-index: 3; // margin-top: 300px; width: 100%; object-fit: contain; diff --git a/src/styles/pages/FeaturesPage.scss b/src/styles/pages/FeaturesPage.scss index 6b722fa..9205b61 100644 --- a/src/styles/pages/FeaturesPage.scss +++ b/src/styles/pages/FeaturesPage.scss @@ -4,18 +4,18 @@ flex-direction: column; align-items: center; justify-content: center; - gap: 30px; + gap: 20px; width: 100%; margin-bottom: 100px; >h1{ - font-size: 4vw; - color: var(--text); + font-size: 3vw; + color: #000; } >p{ font-weight: 500; - font-size: 1.5vw; + font-size: 1.2vw; text-wrap: pretty; - width: 60%; + width: 52%; text-align: center; color: var(--text); } @@ -31,7 +31,7 @@ >span{ display: flex; flex-wrap: wrap; - max-width: 45%; + max-width: 45%; gap: 50px; article{ display: flex; @@ -39,16 +39,18 @@ gap: 20px; max-width: 40%; img{ - width: 50px; + width: 55px; object-fit: contain; } div{ h4{ font-size: max(1.2vw,16px); + color: var(--black); } p{ font-weight: normal; - font-size: max(1vw,14px); + font-size: max(.8vw,16px); + line-height:30px; } } @@ -91,9 +93,10 @@ width: 300px; } >span{ - display: flex; + display: flex;align-items: center;justify-content: center; flex-wrap: wrap; - width: 250px; + width: 100% !important; + max-width: 90%; gap: 50px; article{ @@ -102,7 +105,7 @@ flex-direction: column; justify-content: center; gap: 20px; - max-width: 80%; + max-width: 90% !important; img{ width: 50px; object-fit: contain; diff --git a/src/styles/pages/HomePage.scss b/src/styles/pages/HomePage.scss index 88e5505..3c9cba0 100644 --- a/src/styles/pages/HomePage.scss +++ b/src/styles/pages/HomePage.scss @@ -47,7 +47,7 @@ transition: .5s ease-in-out; padding-block: 10px; &:hover{ - background: var(--gradient); + background: var(--thirdly); scale: 1.1; } h6{ @@ -111,7 +111,8 @@ padding-bottom: 120px; >main{ position: relative; - width: 100%; + width: 90%; + margin-inline: auto; display: flex; flex-direction: column; align-items: center; @@ -125,18 +126,18 @@ flex-wrap: wrap; align-items: center; justify-content: center; - gap: 20px; + gap: 0px; color: var(--white); font-size: max(4vw,20px); h2{ color: var(--secondary); - font-size: max(4vw,20px); + font-size: max(4vw,22px); } } p{ color: var(--white); - font-size: max(3vw,15px); - width: 70%; + font-size: max(3vw,14px); + width: 94%; text-align: center; } >div{ @@ -144,7 +145,7 @@ gap: max(1vw,10px); button{ all: unset; - padding: max(.5vw,8px) max(1.5vw,30px); + padding: max(.5vw,8px) max(1.5vw,20px); display: flex; align-items: center; gap: max(1vw,10px); @@ -154,8 +155,9 @@ cursor: pointer; transition: .5s ease-in-out; padding-block: 8px; + // width: 90% !important; &:hover{ - background: var(--gradient); + background: var(--thirdly); scale: 1.1; } h6{ @@ -195,7 +197,7 @@ } .slider{ position: absolute; - width: 800px; + width: 600px; top: 600px; } diff --git a/src/styles/pages/HowItWork.scss b/src/styles/pages/HowItWork.scss index 76302ec..2a49f47 100644 --- a/src/styles/pages/HowItWork.scss +++ b/src/styles/pages/HowItWork.scss @@ -4,19 +4,19 @@ flex-direction: column; align-items: center; justify-content: center; - gap: 30px; + gap: 20px; width: 100%; margin-bottom: 100px; >h1{ - font-size: 4vw; - color: var(--text); + font-size: 3vw; + color: #000; } >p{ font-weight: 500; - font-size: 1.5vw; + font-size: 1.2vw; text-wrap: pretty; - width: 60%; + width: 52%; text-align: center; color: var(--text); } @@ -48,6 +48,7 @@ object-fit: contain; } div{ + width: 100% !important; h4{ font-size: max(1.2vw,16px); } @@ -55,7 +56,6 @@ font-weight: normal; font-size: max(1vw,14px); width: 100%; - } } } @@ -119,7 +119,7 @@ gap: 20px; max-width: 100%; background: var(--bg2); - padding:30px; + padding:20px; img{ width: 50px; object-fit: contain; diff --git a/src/styles/pages/NotePage.scss b/src/styles/pages/NotePage.scss index a9cc465..218d4e8 100644 --- a/src/styles/pages/NotePage.scss +++ b/src/styles/pages/NotePage.scss @@ -4,18 +4,18 @@ flex-direction: column; align-items: center; justify-content: center; - gap: 50px; + gap: 20px; width: 100%; padding-block: 100px; >h1{ - font-size: 4vw; - color: var(--text); + font-size: 3vw; + color: #000; } >p{ font-weight: 500; - font-size: 1.5vw; + font-size: 1.2vw; text-wrap: pretty; - width: 60%; + width: 52%; text-align: center; color: var(--text); } @@ -28,8 +28,8 @@ gap: 40px; padding-block: 30px; article{ - width: 20vw; - max-width: 300px; + width: 40vw; + max-width: 450px; display: flex; flex-direction: column; gap: 30px; @@ -39,6 +39,11 @@ flex-direction: column; padding: 30px 10px; background: var(--bg); + position: relative; + .message_form{ + position: absolute; + bottom: -10% ; + } } >span{ display: flex; @@ -60,18 +65,18 @@ flex-direction: column; align-items: center; justify-content: center; - gap: 20px; + gap: 0px; width: 100%; padding-block: 50px; >h1{ - font-size: 6vw; + font-size: 5vw; color: var(--text); } >p{ font-weight: 500; font-size: 3vw; text-wrap: pretty; - width: 60%; + width: 80%; text-align: center; color: var(--text); } @@ -81,8 +86,7 @@ justify-content: center; align-items: center; flex-direction: column; - width: 100%; - + width: 90%; gap: 40px; padding-block: 30px; article{ @@ -96,6 +100,11 @@ flex-direction: column; padding: 30px 10px; background: var(--bg); + position: relative; + .message_form{ + position: absolute; + bottom: -8% ; + } } >span{ display: flex; diff --git a/src/styles/pages/ScreenShoot.scss b/src/styles/pages/ScreenShoot.scss index d2f64f6..2ac95ef 100644 --- a/src/styles/pages/ScreenShoot.scss +++ b/src/styles/pages/ScreenShoot.scss @@ -4,30 +4,30 @@ flex-direction: column; align-items: center; justify-content: center; - gap: 30px; + gap: 20px; width: 100%; margin-bottom: 100px; position: relative; >h1{ - font-size: 4vw; - color: var(--text); - } - >p{ - font-weight: 500; - font-size: 1.5vw; - text-wrap: pretty; - width: 60%; - text-align: center; - color: var(--text); - } + font-size: 3vw; + color: #000; + } + >p{ + font-weight: 500; + font-size: 1.2vw; + text-wrap: pretty; + width: 52%; + text-align: center; + color: var(--text); + } .SwipeScreenShoot{ color: white; - width: 80%; + width: 88%; margin-inline: auto; img{ - width: 200px; + width: 250px; margin-inline: auto; } @@ -52,22 +52,23 @@ flex-direction: column; align-items: center; justify-content: center; - gap: 30px; + gap: 0px; width: 100%; margin-block: 50px; position: relative; >h1{ - font-size: 8vw; + font-size: 6vw; color: var(--text); } >p{ font-weight: 500; - font-size: 3vw; + font-size: 12px; text-wrap: pretty; - width: 60%; + width: 80%; text-align: center; color: var(--text); + margin-bottom: 20px; } .SwipeScreenShoot{ color: white; @@ -75,7 +76,7 @@ margin-inline: auto; img{ - width: 200px; + width: 280px; margin-inline: auto; } diff --git a/src/styles/pages/VideoPage.scss b/src/styles/pages/VideoPage.scss index 2cb4b0f..078a71c 100644 --- a/src/styles/pages/VideoPage.scss +++ b/src/styles/pages/VideoPage.scss @@ -6,13 +6,12 @@ justify-content: center; gap: 30px; width: 100%; - margin-bottom: 100px; + margin-bottom: 130px; position: relative; >img{ - width: 80%; - height: 500px; + width: 100%; object-fit: cover; } @@ -28,11 +27,12 @@ flex-direction: column; align-items: center; text-align: center; - gap: 20px; + // gap: 10px ; h1{ font-size: 3vw; } p{ + margin-bottom: 30px; font-weight: normal; } img{ @@ -43,15 +43,15 @@ } >span{ position: absolute; - bottom: -10%; + bottom: -13%; display: flex; justify-content: space-around; align-items: center; background:var(--white); border-radius: 10px; - width: 70%; + width: 80%; z-index: 99; - min-height: 200px; + min-height: 230px; article{ display: flex; flex-direction: column; @@ -71,15 +71,15 @@ flex-direction: column; align-items: center; justify-content: center; - gap: 30px; + gap: 20px; width: 100%; margin-bottom: 100px; position: relative; >img{ - width: 80%; - height: 700px; + width: 100%; + height: 600px; object-fit: cover; } @@ -95,13 +95,14 @@ flex-direction: column; align-items: center; text-align: center; - gap: 20px; + gap: 0px; + width: 80%; h1{ font-size: 5vw; } p{ font-weight: normal; - line-height: 20px; + line-height: 30px; font-size: 3vw; } img{ @@ -123,7 +124,7 @@ z-index: 99; min-height: 200px; padding: 40px 20px; - gap: 0px; + gap: 20px; article{ display: flex; flex-direction: column;