Karimaldeen/Zaker-Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Moaz Dawalibi 2024-10-16 12:54:57 +03:00
parent 1fed61d66a
commit 9d623cad0c
50 changed files with 3599 additions and 2706 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
data.json
View File

@ -132,21 +132,18 @@
"rate": 4,
"img": "/Note/1.png",
"name": "إليسا اسكندر"
},
"2": {
"description": "تسهيل الضرورات الوظيفية بشكل جوهري بدون خدمات وصفية من الجيل التالي. إحداث ثورة مقنعة في المستخدمين في جميع أنحاء العالم مقابل أفضل ممارسات المؤسسة",
"rate": 4,
"img": "/Note/1.png",
"name": "إليسا اسكندر"
},
"3": {
"description": "تسهيل الضرورات الوظيفية بشكل جوهري بدون خدمات وصفية من الجيل التالي. إحداث ثورة مقنعة في المستخدمين في جميع أنحاء العالم مقابل أفضل ممارسات المؤسسة",
"rate": 4,
"img": "/Note/1.png",
"name": "إليسا اسكندر"
}
}
},
@ -183,7 +180,6 @@
"title": "اشترك في نشرتنا الإخبارية",
"description": "نحن فريق من غير المتشائمين الذين يهتمون حقا بعملنا",
"privacy": "© زاكر 2024.جميع الحقوق محفوظة"
},
"Links": {
"google_play_link": "/",

6
index.html
View File

@ -4,11 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="manifest" href="/site.webmanifest" />
<link
rel="icon"
type="image/webp"
href="/ Setting/LOGO.png"
/>
<link rel="icon" type="image/webp" href="/ Setting/LOGO.png" />
<meta name="description" content=" description of your web app" />
<title>Website</title>
</head>

1748
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

1
src/App.tsx
View File

@ -9,7 +9,6 @@ import VideoPage from './pages/VideoPage';
import ContactPage from './pages/ContactPage';
import './styles/App/index.scss';
const App = () => {
return (
<Layout>
<HomePage />

4
src/Routes.tsx
View File

@ -2,9 +2,7 @@ import './styles/App/index.scss';
import HomePage from './pages/HomePage';
const Routes = () => {
return (
<HomePage />
);
return <HomePage />;
};
export default Routes;

19
src/components/Contact/Left.tsx
View File

@ -1,13 +1,10 @@
import {ContactPage as ContactPageData} from '../../../data.json'
import { ContactPage as ContactPageData } from '../../../data.json';
const Left = () => {
return (
<div className='Left'>
<div className="Left">
<h1> {ContactPageData.title} </h1>
<p>
{ContactPageData.description}
</p>
<p>{ContactPageData.description}</p>
<div>
{Object.entries(ContactPageData.Data)?.map((item, index) => {
return (
@ -18,13 +15,11 @@ const Left = () => {
</div>
<p> {item[1].value} </p>
</span>
)
);
})}
</div>
</div>
);
};
)
}
export default Left
export default Left;

37
src/components/Contact/Right.tsx
View File

@ -1,32 +1,27 @@
import { Form, Formik } from 'formik'
import React from 'react'
import InputField from '../Field/InputField'
import TextAreaField from '../Field/TextAreaField'
import { Form, Formik } from 'formik';
import React from 'react';
import InputField from '../Field/InputField';
import TextAreaField from '../Field/TextAreaField';
const Right = () => {
const handleSubmit = ()=>{
}
const handleSubmit = () => {};
return (
<div className='Right'>
<div className="Right">
<h1>تواصل معنا بسرعة</h1>
<Formik initialValues={handleSubmit} onSubmit={handleSubmit}>
<Form>
<div className='Forms'>
<InputField name='name' placeholder='أدخل الاسم' />
<InputField name='email' placeholder='أدخل البريد الإلكتروني' />
<InputField name='number' placeholder='هاتفك' />
<InputField name='company' placeholder='شركتك' />
<TextAreaField name='message' placeholder='رسالة' />
<div className="Forms">
<InputField name="name" placeholder="أدخل الاسم" />
<InputField name="email" placeholder="أدخل البريد الإلكتروني" />
<InputField name="number" placeholder="هاتفك" />
<InputField name="company" placeholder="شركتك" />
<TextAreaField name="message" placeholder="رسالة" />
</div>
<button className='scale' >
ارسل رسالة
</button>
<button className="scale">ارسل رسالة</button>
</Form>
</Formik>
</div>
)
}
);
};
export default Right
export default Right;

15
src/components/Field/InputField.tsx
View File

@ -1,21 +1,16 @@
import { Input, InputProps } from "antd";
import React from "react";
import { Field } from "formik";
const InputField = ({
name,
...props
}: InputProps) => {
import { Input, InputProps } from 'antd';
import React from 'react';
import { Field } from 'formik';
const InputField = ({ name, ...props }: InputProps) => {
return (
<div className="ValidationField w-100">
<Field
as={Input}
name={name}
id={name}
size="large"
styles={{width:"100%"}}
styles={{ width: '100%' }}
{...props}
/>
</div>

17
src/components/Field/TextAreaField.tsx
View File

@ -1,22 +1,17 @@
import { InputProps } from "antd";
import React from "react";
import { Field } from "formik";
import TextArea from "antd/es/input/TextArea";
const TextAreaField = ({
name,
...props
}: InputProps) => {
import { InputProps } from 'antd';
import React from 'react';
import { Field } from 'formik';
import TextArea from 'antd/es/input/TextArea';
const TextAreaField = ({ name, ...props }: InputProps) => {
return (
<div className="ValidationField TextAreaField">
<Field
as={TextArea}
name={name}
id={name}
size="large"
styles={{width:"100%"}}
styles={{ width: '100%' }}
autoSize={{ minRows: 4, maxRows: 10 }}
{...props}
/>

11
src/components/SwiperScreenShoot.tsx
View File

@ -5,17 +5,15 @@ import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import {ScreenShoot as ScreenShootData} from '../../data.json'
import { ScreenShoot as ScreenShootData } from '../../data.json';
const SwipeScreenShoot = () => {
return (
<div className='SwipeScreenShoot'>
<div className="SwipeScreenShoot">
<Swiper
modules={[Pagination, A11y, Autoplay]}
spaceBetween={20}
autoplay={{ delay: 3000 }} // Configure autoplay options
pagination={{ clickable: true }}
// onSwiper={(swiper) => console.log(swiper)}
// onSlideChange={() => console.log('slide change')}
@ -38,16 +36,15 @@ const SwipeScreenShoot = () => {
}}
>
{ScreenShootData.Data.map((item, index) => {
return (
<SwiperSlide key={index}>
<img loading="lazy" src={item} alt={`Screenshot ${index + 1}`} />
</SwiperSlide>
)
);
})}
</Swiper>
</div>
);
}
};
export default SwipeScreenShoot;

2
src/components/layout/BackToTop.tsx
View File

@ -1,5 +1,5 @@
import { Button } from 'antd';
import { FaHandPointUp } from "react-icons/fa";
import { FaHandPointUp } from 'react-icons/fa';
import useScroll from '../../hooks/useScroll';
const BackToTopButton = () => {

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

@ -1,11 +1,11 @@
import { Input } from "antd";
import { FaFacebook, FaInstagram, FaTelegram, FaTwitter } from "react-icons/fa";
import {Footer as FooterData,Links,Setting} from '../../../data.json'
import { Input } from 'antd';
import { FaFacebook, FaInstagram, FaTelegram, FaTwitter } from 'react-icons/fa';
import { Footer as FooterData, Links, Setting } from '../../../data.json';
const Footer = () => {
const handleClick = (href: string) => {
window.location.href = href
}
window.location.href = href;
};
return (
<div className="Footer">
<img loading="lazy" src={Setting.Logo} alt="logo" />
@ -15,9 +15,7 @@ const Footer = () => {
<FaInstagram onClick={() => handleClick(Links.instagram)} />
<FaTwitter onClick={() => handleClick(Links.twitter)} />
</div>
<p>
{FooterData.privacy}
</p>
<p>{FooterData.privacy}</p>
<span className="FooterHeader">
<span>
<h1>{FooterData.title}</h1>
@ -31,7 +29,7 @@ const Footer = () => {
</div>
</span>
</div>
)
);
};
export default Footer;

53
src/components/layout/NavBar.tsx
View File

@ -1,13 +1,12 @@
// NavBar.tsx
import React, { useState } from 'react';
import { RoutesEnums } from '../../enums/RoutesEnums';
import { MdLanguage } from "react-icons/md";
import { MdLanguage } from 'react-icons/md';
import { FaEllipsis } from 'react-icons/fa6';
import { Popover } from 'antd';
import {navBar as navBarData,Setting} from '../../../data.json'
import { navBar as navBarData, Setting } from '../../../data.json';
// Define an enum for the routes
// Define a type for the link objects
interface NavLink {
path: RoutesEnums;
@ -24,47 +23,50 @@ const NavBar: React.FC = () => {
{ path: RoutesEnums.NOTE, label: navBarData.link5 },
{ path: RoutesEnums.CONTACT, label: navBarData.link6 },
];
const [Open, setOpen] = useState(false)
const [Open, setOpen] = useState(false);
const handleToggle = () => {
setOpen(!Open)
}
setOpen(!Open);
};
const NavBarContent = (
<div className='NavBarContent'>
<ul className='NavBarLinks'>
<div className="NavBarContent">
<ul className="NavBarLinks">
{links.map((link) => {
return (
<li onClick={handleToggle} key={link.path} className={`${"activeLink"}`}>
<li
onClick={handleToggle}
key={link.path}
className={`${'activeLink'}`}
>
<a href={link.path}>{link.label}</a>
</li>
)
);
})}
</ul>
</div>
);
const [Active, setActive] = useState(location.hash)
const [Active, setActive] = useState(location.hash);
return (
<nav className='NavBar'>
<img loading="lazy" src={Setting.Logo} className='scale' alt="" />
<ul className='NavBarLinks'>
<nav className="NavBar">
<img loading="lazy" src={Setting.Logo} className="scale" alt="" />
<ul className="NavBarLinks">
{links.map((link) => {
const handleClick = () => {
setActive(link.path)
}
const isActive = Active === "" && link.path === "#" ? true : Active === link.path;
setActive(link.path);
};
const isActive =
Active === '' && link.path === '#' ? true : Active === link.path;
return (
<li key={link.path} onClick={handleClick} className={`${isActive ? "activeLink" : ""}`}>
<li
key={link.path}
onClick={handleClick}
className={`${isActive ? 'activeLink' : ''}`}
>
<a href={link.path}>{link.label}</a>
</li>
)
);
})}
</ul>
@ -75,7 +77,6 @@ const NavBarContent = (
<FaEllipsis onClick={handleToggle} />
</Popover>
</article>
</div>
</nav>
);

4
src/components/layout/PageTransition.tsx
View File

@ -37,9 +37,7 @@ const PageTransition: React.FC<PageTransitionProps> = ({ to, children }) => {
<div
className={`transition-overlay ${transitioning ? (reversed ? 'enter' : 'exit') : ''}`}
/>
<div onClick={handleClick}>
{children}
</div>
<div onClick={handleClick}>{children}</div>
</>
);
};

3
src/components/layout/SpinContainer.tsx
View File

@ -2,11 +2,10 @@ import React from 'react';
const SpinContainer: React.FC = () => {
return (
<div className='full-screen-center'>
<div className="full-screen-center">
<div className="loader"></div>
</div>
);
};
export default SpinContainer;

12
src/design-system/FirstLoading.tsx
View File

@ -41,18 +41,12 @@ const FirstLoading: React.FC<FirstLoadingProps> = ({ seconds,children }) => {
<>
<div className={`FirstLoading ${pageUp ? 'PageUp' : ''}`}>
<div>
<img loading="lazy" src={Logo} className='Logo' alt="" />
<div className={`Info`}>
[{currentNumber} %]
<img loading="lazy" src={Logo} className="Logo" alt="" />
<div className={`Info`}>[{currentNumber} %]</div>
</div>
</div>
</div>
{
pageUp && children
}
{pageUp && children}
</>
);
};

3
src/lib/I18nProvider.tsx
View File

@ -10,7 +10,8 @@ interface I18nProviderProps {
const I18nProvider: React.FC<I18nProviderProps> = ({ children }) => {
useEffect(() => {
const currentLanguage =(LocalStorageManager.getItem(LocalStorageEnum.LANGUAGE_KEY) as string) ===
const currentLanguage =
(LocalStorageManager.getItem(LocalStorageEnum.LANGUAGE_KEY) as string) ===
'en'
? 'en'
: 'ar';

10
src/pages/AboutUs.tsx
View File

@ -1,9 +1,7 @@
import React from 'react'
import React from 'react';
const AboutUs = () => {
return (
<div className='AboutUs'>AboutUs</div>
)
}
return <div className="AboutUs">AboutUs</div>;
};
export default AboutUs
export default AboutUs;

15
src/pages/ContactPage.tsx
View File

@ -1,15 +1,14 @@
import React from 'react'
import Left from '../components/Contact/Left'
import Right from '../components/Contact/Right'
import React from 'react';
import Left from '../components/Contact/Left';
import Right from '../components/Contact/Right';
const ContactPage = () => {
return (
<div className='ContactPage' id='contact_us'>
<div className="ContactPage" id="contact_us">
<Left />
<Right />
</div>
)
}
);
};
export default ContactPage
export default ContactPage;

36
src/pages/DownloadPage.tsx
View File

@ -1,16 +1,14 @@
import { BsGooglePlay } from 'react-icons/bs'
import { FaApple } from 'react-icons/fa'
import {DownloadPage as DownloadPageData,Links} from '../../data.json'
import { BsGooglePlay } from 'react-icons/bs';
import { FaApple } from 'react-icons/fa';
import { DownloadPage as DownloadPageData, Links } from '../../data.json';
const DownloadPage = () => {
const handleClick = (href: string) => {
window.location.href = href
}
window.location.href = href;
};
return (
<div className='DownloadPage' >
<div className="DownloadPage">
<main>
<h1> {DownloadPageData.title} </h1>
<p> {DownloadPageData.description} </p>
@ -37,14 +35,22 @@ const DownloadPage = () => {
</main>
<div>
<img loading="lazy" className='circle' src="/Setting/circle.png" alt="" />
<img
loading="lazy"
className="circle"
src="/Setting/circle.png"
alt=""
/>
</div>
<img loading="lazy" className='main scale' src={DownloadPageData.img} alt="" />
<img
loading="lazy"
className="main scale"
src={DownloadPageData.img}
alt=""
/>
</div>
);
};
)
}
export default DownloadPage
export default DownloadPage;

34
src/pages/FeaturesPage.tsx
View File

@ -1,39 +1,37 @@
import {Features} from '../../data.json'
import { Features } from '../../data.json';
const FeaturesPage = () => {
console.log();
return (
<div className='FeaturesPage' id='features'>
<div className="FeaturesPage" id="features">
<h1> {Features.title} </h1>
<p> {Features.description}</p>
<div>
<span>
{Object.entries(Features.Data).map((item, index) => {
console.log(item,"item");
console.log(item, 'item');
return (
<article key={index}>
<img loading="lazy" className='scale' src={item[1].img} alt={`${index}`} />
<img
loading="lazy"
className="scale"
src={item[1].img}
alt={`${index}`}
/>
<div>
<h4>
{item[1].title}
</h4>
<p>
{item[1].description}
</p>
<h4>{item[1].title}</h4>
<p>{item[1].description}</p>
</div>
</article>
)
);
})}
</span>
<img loading="lazy" className='scale' src={Features.mainImage} alt="" />
<img loading="lazy" className="scale" src={Features.mainImage} alt="" />
</div>
</div>
)
}
);
};
export default FeaturesPage
export default FeaturesPage;

29
src/pages/HomePage.tsx
View File

@ -1,17 +1,18 @@
import { BsGooglePlay } from 'react-icons/bs'
import { FaApple } from 'react-icons/fa'
import {Home,Links} from '../../data.json'
import { BsGooglePlay } from 'react-icons/bs';
import { FaApple } from 'react-icons/fa';
import { Home, Links } from '../../data.json';
const HomePage = () => {
const handleClick = (href: string) => {
window.location.href = href
}
window.location.href = href;
};
return (
<div className='HomePage' id='#'>
<div className="HomePage" id="#">
<main>
<h1>{Home.title} <h2> {Home.ApplicationName} </h2></h1>
<h1>
{Home.title} <h2> {Home.ApplicationName} </h2>
</h1>
<p>{Home.description}</p>
<div>
<button onClick={() => handleClick(Links.google_play_link)}>
@ -34,11 +35,11 @@ const HomePage = () => {
</button>
</div>
</main>
<img loading="lazy" className='circle' src="/Setting/circle.png" alt="" />
<img loading="lazy" className='shape' src="/Setting/shape.svg" alt="" />
<img loading="lazy" className='slider' src={Home.mainImage} alt="" />
<img loading="lazy" className="circle" src="/Setting/circle.png" alt="" />
<img loading="lazy" className="shape" src="/Setting/shape.svg" alt="" />
<img loading="lazy" className="slider" src={Home.mainImage} alt="" />
</div>
)
}
);
};
export default HomePage
export default HomePage;

66
src/pages/HowItWork.tsx
View File

@ -1,54 +1,60 @@
import React from 'react'
import {HowItWork as HowItWorkData} from '../../data.json'
import React from 'react';
import { HowItWork as HowItWorkData } from '../../data.json';
const HowItWork = () => {
return (
<div className='HowItWork' id='how_it_work'>
<div className="HowItWork" id="how_it_work">
<h1> {HowItWorkData.title}</h1>
<p>
{HowItWorkData.description}
</p>
<p>{HowItWorkData.description}</p>
<div>
<span>
{Object.entries(HowItWorkData.Data).slice(0,2).map((item, index) => {
{Object.entries(HowItWorkData.Data)
.slice(0, 2)
.map((item, index) => {
return (
<article key={index}>
<img loading="lazy" className='scale' src={item[1].img} alt={`${index}`} />
<img
loading="lazy"
className="scale"
src={item[1].img}
alt={`${index}`}
/>
<div>
<h4>
{item[1].title}
</h4>
<p>
{item[1].description}
</p>
<h4>{item[1].title}</h4>
<p>{item[1].description}</p>
</div>
</article>
)
);
})}
</span>
<img loading="lazy" className='scale' src="/HowItWorks/main.png" alt="" />
<img
loading="lazy"
className="scale"
src="/HowItWorks/main.png"
alt=""
/>
<span>
{Object.entries(HowItWorkData.Data).slice(2,4).map((item, index) => {
{Object.entries(HowItWorkData.Data)
.slice(2, 4)
.map((item, index) => {
return (
<article key={index}>
<img loading="lazy" src={item[1].img} alt={`${item[1].img}`} />
<img
loading="lazy"
src={item[1].img}
alt={`${item[1].img}`}
/>
<div>
<h4>
{item[1].title}
</h4>
<p>
{item[1].description}
</p>
<h4>{item[1].title}</h4>
<p>{item[1].description}</p>
</div>
</article>
)
);
})}
</span>
</div>
</div>
)
}
);
};
export default HowItWork
export default HowItWork;

30
src/pages/NotePage.tsx
View File

@ -1,23 +1,24 @@
import React from 'react'
import React from 'react';
import { Rate } from 'antd';
import {NotePage as NotePageData} from '../../data.json'
import { NotePage as NotePageData } from '../../data.json';
const NotePage = () => {
return (
<div className='NotePage' id='note' >
<div className="NotePage" id="note">
<h1> {NotePageData.title} </h1>
<p>
{NotePageData.description}
</p>
<p>{NotePageData.description}</p>
<div>
{Object.entries(NotePageData.Data).map((item, index: number) => {
return (
<article key={index}>
<div>
<img className='message_form' src="/Note/message.png" alt="" width={20}/>
<p>
{item[1].description}
</p>
<img
className="message_form"
src="/Note/message.png"
alt=""
width={20}
/>
<p>{item[1].description}</p>
<Rate value={item[1].rate} />
</div>
<span>
@ -25,12 +26,11 @@ const NotePage = () => {
<h5> {item[1].name} </h5>
</span>
</article>
)
);
})}
</div>
</div>
)
}
);
};
export default NotePage
export default NotePage;

20
src/pages/ScreenShoot.tsx
View File

@ -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 (
<div className='ScreenShoot' id='screen_shoot'>
<div className="ScreenShoot" id="screen_shoot">
<h1> {ScreenShootData.title} </h1>
<p>
{ScreenShootData.description}
</p>
<p>{ScreenShootData.description}</p>
<SwipeScreenShoot />
</div>
)
}
);
};
export default ScreenShoot
export default ScreenShoot;

18
src/pages/VideoPage.tsx
View File

@ -1,39 +1,37 @@
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 handlePlayPause = () => {
setIsPlaying(!isPlaying);
};
return (
<div className='VideoPage'>
<div className="VideoPage">
<img loading="lazy" src="/Video/video.png" alt="" />
<main>
<h1>{VideoPageData.title}</h1>
<p>
{VideoPageData.description}
</p>
<p>{VideoPageData.description}</p>
<img loading="lazy" src={VideoPageData.mainImage} alt="" />
</main>
<span>
{Object.entries(VideoPageData.Data).map((item, index) => (
<article key={index}>
<img loading="lazy" src={`/Video/${item[1].img}.png`} alt={`${index}`} />
<img
loading="lazy"
src={`/Video/${item[1].img}.png`}
alt={`${index}`}
/>
<h4>{item[1].number}</h4>
<p>{item[1].title}</p>
</article>
))}
</span>
</div>
);
};

11
src/styles/App/App.scss
View File

@ -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);
@ -68,19 +66,18 @@ input:-webkit-autofill:active {
box-shadow: inset 0 0 20px 20px #23232329;
}
button {
cursor: pointer;
transition: .5s ease-in-out;
transition: 0.5s ease-in-out;
&:hover {
scale: 1.02;
}
}
svg,.scale{
svg,
.scale {
cursor: pointer;
transition: .5s ease-in-out;
transition: 0.5s ease-in-out;
&:hover {
scale: 1.1;
}

3
src/styles/App/Variables.scss
View File

@ -8,8 +8,7 @@
--placeholder: rgb(0, 0, 0, 0.3);
--bg: rgb(245 247 251);
--bg2: white;
--gradient : linear-gradient(45deg, #55B9E3, #5262E3);
--gradient: linear-gradient(45deg, #55b9e3, #5262e3);
}
:root:has(.dark) {

3
src/styles/App/classNames.scss
View File

@ -11,9 +11,6 @@
display: flex;
align-items: center;
justify-content: center;
}
.spinner {
}

4
src/styles/components/FirstLoading.scss
View File

@ -13,7 +13,9 @@
color: white;
z-index: 9999999999;
overflow: hidden;
transition: transform 1s cubic-bezier(.25,1,.5,1), visibility 1ms linear 1s;
transition:
transform 1s cubic-bezier(0.25, 1, 0.5, 1),
visibility 1ms linear 1s;
}
.Logo {

11
src/styles/components/Footer.scss
View File

@ -12,7 +12,6 @@
position: relative;
img {
width: 100px;
}
> div {
display: flex;
@ -26,7 +25,6 @@
border: 1px solid var(--white);
border-radius: 50%;
}
}
p {
font-size: 16px;
@ -86,13 +84,9 @@
}
}
}
}
@media screen and (max-width: 900px) {
.Footer {
background: var(--primary);
height: 330px;
@ -108,7 +102,6 @@
padding-bottom: 30px;
img {
width: 100px;
}
> div {
display: flex;
@ -122,7 +115,6 @@
border: 1px solid var(--white);
border-radius: 50%;
}
}
p {
font-size: 14px;
@ -183,8 +175,5 @@
cursor: pointer;
}
}
}
}

3
src/styles/components/Layout.scss
View File

@ -11,6 +11,3 @@
// z-index: 1000;
// background: black;
// }

22
src/styles/components/NavBar.scss
View File

@ -9,20 +9,19 @@
width: calc(100% - 100px);
z-index: 999999999;
font-size: max(20px, 1.5vw);
img,svg{
img,
svg {
width: 60px;
font-size: 30px;
}
> ul {
display: flex;
li {
all: unset;
cursor: pointer;
transition: .5s ease-in-out;
transition: 0.5s ease-in-out;
&:hover {
scale: 1.1;
}
}
}
@ -32,15 +31,14 @@
a {
color: var(--white) !important;
opacity: .6;
transition: .5s ease-in-out;
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;
}
}
.activeLink {
@ -59,21 +57,16 @@
}
}
@media screen and (max-width: 900px) {
.NavBar {
.NavBarLinks {
display: none !important;
}
> div {
display: flex;
article {
&:nth-child(2) {
display: block;
}
}
}
@ -101,11 +94,10 @@
}
}
}
}
.ant-popover,.ant-popover-inner{
.ant-popover,
.ant-popover-inner {
padding: 0 !important;
z-index: 999;
margin-inline: 30px;
}

2
src/styles/components/PageTransition.scss
View File

@ -21,5 +21,3 @@
transition: top 1s ease-in-out;
top: 100%;
}

2
src/styles/components/index.scss
View File

@ -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';

10
src/styles/pages/ContactPage.scss
View File

@ -22,13 +22,11 @@
margin-bottom: 20px;
.ant-input {
min-height: 50px;
}
}
.TextAreaField {
min-width: 97%;
}
}
button {
all: unset;
@ -42,7 +40,7 @@
// background-image: linear-gradient(45deg, #55B9E3, #5262E3);
background: var(--thirdly);
cursor: pointer;
transition: .5s ease-in-out;
transition: 0.5s ease-in-out;
&:hover {
scale: 1.1;
}
@ -74,7 +72,6 @@
img {
width: 18px;
}
}
p {
font-size: 16px;
@ -85,7 +82,6 @@
}
}
@media screen and (max-width: 900px) {
.ContactPage {
background: var(--bg);
@ -110,13 +106,11 @@
margin-bottom: 20px;
.ant-input {
min-height: 50px;
}
}
.TextAreaField {
min-width: 100%;
}
}
button {
all: unset;
@ -156,7 +150,6 @@
img {
width: 15px;
}
}
p {
font-size: 14px;
@ -166,5 +159,4 @@
}
}
}
}

21
src/styles/pages/DownloadPage.scss
View File

@ -23,7 +23,6 @@
gap: 20px;
color: var(--white);
font-size: max(4vw, 50px);
}
p {
color: var(--white);
@ -35,7 +34,7 @@
gap: max(1vw, 10px);
button {
all: unset;
padding: max(.5vw,8px) max(1.5vw,30px);
padding: max(0.5vw, 8px) max(1.5vw, 30px);
display: flex;
align-items: center;
gap: max(1vw, 10px);
@ -43,7 +42,7 @@
border: 1px solid var(--white);
border-radius: 10px;
cursor: pointer;
transition: .5s ease-in-out;
transition: 0.5s ease-in-out;
padding-block: 10px;
&:hover {
background: var(--thirdly);
@ -64,8 +63,6 @@
}
}
}
}
> div {
position: absolute;
@ -82,9 +79,7 @@
left: 50%;
transform: translate(-50%, 0%);
z-index: 9999;
}
}
.main {
position: relative;
@ -93,9 +88,7 @@
width: 80%;
object-fit: contain;
margin-inline: auto;
}
}
@media screen and (max-width: 900px) {
@ -124,7 +117,6 @@
gap: 10px;
color: var(--white);
font-size: 6vw;
}
p {
color: var(--white);
@ -136,7 +128,7 @@
gap: max(1vw, 10px);
button {
all: unset;
padding: max(.5vw,8px) max(1.5vw,30px);
padding: max(0.5vw, 8px) max(1.5vw, 30px);
display: flex;
align-items: center;
gap: max(1vw, 10px);
@ -156,8 +148,6 @@
}
}
}
}
> div {
position: absolute;
@ -174,9 +164,7 @@
left: 50%;
transform: translate(-50%, 0%);
z-index: 1;
}
}
.main {
position: relative;
@ -185,9 +173,6 @@
width: 100%;
object-fit: contain;
margin-inline: auto;
}
}
}

11
src/styles/pages/FeaturesPage.scss
View File

@ -49,14 +49,12 @@
}
p {
font-weight: normal;
font-size: max(.8vw,16px);
font-size: max(0.8vw, 16px);
line-height: 30px;
}
}
}
}
}
}
@ -93,7 +91,9 @@
width: 300px;
}
> span {
display: flex;align-items: center;justify-content: center;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 100% !important;
max-width: 90%;
@ -118,13 +118,10 @@
p {
font-weight: normal;
font-size: max(1vw, 14px);
}
}
}
}
}
}
}

30
src/styles/pages/HomePage.scss
View File

@ -36,7 +36,7 @@
gap: max(1vw, 10px);
button {
all: unset;
padding: max(.5vw,8px) max(1.5vw,30px);
padding: max(0.5vw, 8px) max(1.5vw, 30px);
display: flex;
align-items: center;
gap: max(1vw, 10px);
@ -44,7 +44,7 @@
border: 1px solid var(--white);
border-radius: 10px;
cursor: pointer;
transition: .5s ease-in-out;
transition: 0.5s ease-in-out;
padding-block: 10px;
&:hover {
background: var(--thirdly);
@ -65,8 +65,6 @@
}
}
}
}
.shape {
position: absolute;
@ -76,8 +74,6 @@
min-height: 60vh;
object-fit: cover;
}
.circle {
position: absolute;
@ -85,8 +81,6 @@
top: 73%;
left: 50%;
transform: translate(-50%, -50%);
}
.slider {
position: absolute;
@ -95,13 +89,8 @@
left: 50%;
transform: translate(-50%, -50%);
}
}
@media screen and (max-width: 900px) {
.HomePage {
min-height: 100vh;
@ -145,7 +134,7 @@
gap: max(1vw, 10px);
button {
all: unset;
padding: max(.5vw,8px) max(1.5vw,20px);
padding: max(0.5vw, 8px) max(1.5vw, 20px);
display: flex;
align-items: center;
gap: max(1vw, 10px);
@ -153,7 +142,7 @@
border: 1px solid var(--white);
border-radius: 10px;
cursor: pointer;
transition: .5s ease-in-out;
transition: 0.5s ease-in-out;
padding-block: 8px;
// width: 90% !important;
&:hover {
@ -177,33 +166,22 @@
}
svg {
font-size: max(20px, 1.3vw);
}
}
}
}
.shape {
display: none;
}
.circle {
position: absolute;
width: 800px;
top: 500px;
}
.slider {
position: absolute;
width: 600px;
top: 600px;
}
}
}

9
src/styles/pages/HowItWork.scss
View File

@ -60,13 +60,10 @@
}
}
}
}
}
@media screen and (max-width: 900px) {
.HowItWork {
background: var(--bg);
display: flex;
@ -100,7 +97,6 @@
> img {
width: 300px;
order: 0;
}
> span {
order: 2;
@ -133,13 +129,10 @@
font-weight: normal;
font-size: max(1vw, 14px);
width: 100%;
}
}
}
}
}
}
}
}

3
src/styles/pages/NotePage.scss
View File

@ -58,7 +58,6 @@
}
@media screen and (max-width: 900px) {
.NotePage {
background: var(--bg2);
display: flex;
@ -117,6 +116,4 @@
}
}
}
}

9
src/styles/pages/ScreenShoot.scss
View File

@ -30,8 +30,6 @@
width: 250px;
margin-inline: auto;
}
}
}
@ -42,10 +40,7 @@
display: flex;
}
@media screen and (max-width: 900px) {
.ScreenShoot {
background: var(--bg);
display: flex;
@ -79,8 +74,6 @@
width: 280px;
margin-inline: auto;
}
}
}
@ -90,6 +83,4 @@
.swiper-slide {
display: flex;
}
}

11
src/styles/pages/VideoPage.scss
View File

@ -10,13 +10,10 @@
position: relative;
> img {
width: 100%;
object-fit: cover;
}
main {
position: absolute;
top: 30%;
@ -62,9 +59,7 @@
}
}
@media screen and (max-width: 900px) {
.VideoPage {
background: var(--bg);
display: flex;
@ -77,14 +72,11 @@
position: relative;
> img {
width: 100%;
height: 600px;
object-fit: cover;
}
main {
position: absolute;
top: 30%;
@ -141,10 +133,7 @@
p {
font-size: 13px;
}
}
}
}
}

2
src/styles/pages/index.scss
View File

@ -5,4 +5,4 @@
@import './ScreenShoot.scss';
@import './NotePage.scss';
@import './DownloadPage.scss';
@import './ContactPage.scss'
@import './ContactPage.scss';

7
src/utils/index.tsx
View File

@ -1,6 +1,3 @@
import Logo from '../assets/core/logo.svg'
import Logo from '../assets/core/logo.svg';
export {
Logo
}
export { Logo };