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

Compare commits

base: Karimaldeen:c9713a6e89a892e76eece537c73c7affc18e3c80
Branches Tags
Karimaldeen:main
Karimaldeen:master
..
compare: Karimaldeen:d5ad2a68ff78201e88b0909d3a44c8159f41cba8
Branches Tags
Karimaldeen:main
Karimaldeen:master

No commits in common. "c9713a6e89a892e76eece537c73c7affc18e3c80" and "d5ad2a68ff78201e88b0909d3a44c8159f41cba8" have entirely different histories.
c9713a6e89 ... d5ad2a68ff

30 changed files with 363 additions and 324 deletions
Show Stats Expand all files Collapse all files

2
src/Components/HOC/CartWithDrawer.tsx
View File

@ -64,7 +64,7 @@ const CartWithDrawer = () => {
onClose={() => setOpen(false)}
open={open}
key={placement}
width={450}
width={550}
style={{maxHeight:"60%", minHeight:"500px"}}
>
<div className="cart_first_section">

2
src/Components/HOC/ChangeMode.tsx
View File

@ -16,7 +16,7 @@ export const ChangeModeComp = ({onClickFunction, src, modeText,icon, isImage = t
const ModeContainer = memo(() => (
<div className="MenuChange" onClick={onClickFunction}>
{isImage
? <img className="mode_image" alt='ModeImage' src={src} width={20} height={20} />
? <img alt='ModeImage' src={src} width={20} height={20} />
: icon
}
{t(modeText)}

45
src/Components/HOC/SearchWithDrawer.tsx
View File

@ -1,23 +1,33 @@
import { useState } from 'react';
import React, { useState, ReactNode } from 'react';
import type { DrawerProps } from 'antd';
import { Drawer, Space } from 'antd';
import { Badge, Button, Drawer, Space } from 'antd';
import CardItem from '../Cart/CardItem';
import { BsArrowLeft, BsCart, BsSearch } from 'react-icons/bs';
import { Link } from 'react-router-dom';
import { ShoppingCartOutlined } from '@ant-design/icons';
import { useCartData } from '../../Redux/DispatchData';
import { useTranslation } from 'react-i18next';
import { TiDeleteOutline } from "react-icons/ti";
import SearchButton from '../Utils/Search/SearchButton';
import { RiSearchLine } from "react-icons/ri";
import Empty from '../Utils/Search/Empty';
import { GoClock } from "react-icons/go";
import { FiDelete } from "react-icons/fi";
import { RiSearch2Line, RiSearchLine } from "react-icons/ri";
const SearchWithDrawer = () => {
const [open, setOpen] = useState(false);
const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
const [noDataFound, setNoDataFound] = useState(true);
console.log(noDataFound);
const { DataCart,count} = useCartData()
const {t} = useTranslation();
return (
<>
<Space>
<div onClick={() => setOpen(true)} className="icon_navbar">
<RiSearchLine />
</div>
<div onClick={()=>setOpen(true)} className="icon_navbar">
<RiSearchLine />
</div>
</Space>
<Drawer
@ -27,19 +37,20 @@ const SearchWithDrawer = () => {
onClose={() => setOpen(false)}
open={open}
key={placement}
width={720}
style={{ maxHeight: "40%" }}
width ={700}
style={{maxHeight:"40%"}}
>
<div className="search_first_section">
<SearchButton setOpen={setOpen} setNoDataFound={setNoDataFound} />
<span className='delete_icon' onClick={() => setOpen(false)}><TiDeleteOutline /></span>
</div>
<div className='not_found_section'>
{noDataFound && <Empty />}
<SearchButton/>
<span className='delete_icon' onClick={()=>setOpen(false)}><TiDeleteOutline/></span>
</div>
</Drawer>
</>
);
};
export default SearchWithDrawer;

5
src/Components/Home/BoseHeadphones.tsx
View File

@ -1,5 +1,6 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { RiArrowRightUpFill } from "react-icons/ri";
import { GoArrowUpRight } from "react-icons/go";
const BoseHeadphones = () => {
const {t} = useTranslation();
@ -11,7 +12,7 @@ const BoseHeadphones = () => {
<h1>{t("Smarter than your average headphones")}</h1>
<button className="button">
{t("Shop now")}
<RiArrowRightUpFill />
<GoArrowUpRight />
</button>
</div>
</div>

11
src/Components/Home/CategoriesSlider.tsx
View File

@ -1,5 +1,5 @@
// import Swiper core and required modules
import { Navigation, A11y } from "swiper/modules";
import { Navigation, Pagination, Scrollbar, A11y } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
@ -31,7 +31,7 @@ const CategoriesSlider = () => {
navigation
breakpoints={{
320: {
slidesPerView: 1,
slidesPerView: 2,
},
480: {
slidesPerView: 2,
@ -40,12 +40,13 @@ const CategoriesSlider = () => {
slidesPerView: 3,
},
768: {
slidesPerView: 3,
},
1024: {
slidesPerView: 4,
},
1024: {
slidesPerView: 5,
},
}}
>
{categories?.map((item: Category, index: number) => {
return (

7
src/Components/Home/HeroSection.tsx
View File

@ -1,13 +1,8 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom";
const HeroSection = () => {
const [t] = useTranslation();
const Navigate = useNavigate();
const handleNavigate = () =>{
Navigate('/categories');
}
return (
<div className="HeroSection">
<div>
@ -15,7 +10,7 @@ const HeroSection = () => {
<div>
{/* <h3> $229.50 </h3> */}
<button className="button" onClick={handleNavigate}>{t("Buy Now")}</button>
<button className="button">{t("Buy Now")}</button>
</div>
</div>
<span>

7
src/Components/Home/ProductSwiper.tsx
View File

@ -1,10 +1,11 @@
import { useRef, useState } from 'react';
import React, { useRef, useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/pagination';
import ProductCard from './ProductCard';
import { Product } from '../../types/item';
import { useGetBaseProduct } from '../../api/baseProduct';
import { A11y, Autoplay, Navigation, Pagination, Scrollbar } from 'swiper/modules';
import { Spin } from 'antd';
@ -12,10 +13,12 @@ import { Spin } from 'antd';
const ProductSwiper = ({data,isLoading}:any) => {
const language = localStorage.getItem('language') ;
console.log(language);
const [swiperDirection, setSwiperDirection] = useState(language === "ar" ? "rtl" : "ltr");
const swiperRef = useRef<any>(null);
const BaseProducts = (data?.products as Product[]) || ([] as []);
return (
@ -26,7 +29,7 @@ const ProductSwiper = ({data,isLoading}:any) => {
spaceBetween={50}
breakpoints={{
0: { slidesPerView: 1 },
400: { slidesPerView: 1 },
400: { slidesPerView: 2 },
600: { slidesPerView: 2 },
900: { slidesPerView: 4 },
1200: { slidesPerView: 4 },

4
src/Components/Ui/HeaderLink.tsx
View File

@ -9,12 +9,12 @@ const HeaderLink = ({text,isMulti,extraText,extraLink}:THeaderLink) => {
return (
<div className='header_link'>
<Link to={"/"} className='first_link'>{t("Home")}</Link>
<Link to={"/"}>{t("Home")}</Link>
<FaChevronRight/>
{
isMulti ?
<>
<Link to={`/${extraLink}`} className='first_link'>{ t(extraText || "")}</Link>
<Link to={`/${extraLink}`}>{ t(extraText || "")}</Link>
<FaChevronRight/>
</>
: ""

26
src/Components/Utils/Search/SearchButton.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import { Select, Spin } from 'antd';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
@ -6,12 +6,7 @@ import { LuSearch } from 'react-icons/lu';
import { useGetBaseProduct } from '../../../api/baseProduct';
import { Product } from '../../../types/item';
interface SearchButtonProps {
setOpen: (open: boolean) => void;
setNoDataFound: (noData: boolean) => void;
}
const SearchButton: React.FC<SearchButtonProps> = ({ setOpen, setNoDataFound }) => {
const SearchButton: React.FC = () => {
const navigate = useNavigate();
const { t } = useTranslation();
const [searchParams] = useSearchParams();
@ -22,13 +17,9 @@ const SearchButton: React.FC<SearchButtonProps> = ({ setOpen, setNoDataFound })
});
const BaseProducts = (data?.products as Product[]) || [];
useEffect(() => {
setNoDataFound(!isLoading && BaseProducts.length <= 0);
}, [isLoading, BaseProducts, setNoDataFound]);
const options = BaseProducts.map((product: any) => ({
value: product.base_product_id,
label: product?.name as string,
label: product?.name as string, // Ensuring the label is a string
}));
const handleSearchChange = (value: string) => {
@ -41,21 +32,22 @@ const SearchButton: React.FC<SearchButtonProps> = ({ setOpen, setNoDataFound })
const handleSelectChange = (value: number) => {
const selectedProduct = BaseProducts.find(product => product.base_product_id === value);
if (selectedProduct) {
setOpen(false);
navigate(`/product/${selectedProduct.base_product_id}`);
}
};
const filterOption = (input: string, option?: { label: string }) => {
if (!option) return false;
return option?.label.toLowerCase().includes(input.toLowerCase());
const filteredData = option?.label.toLowerCase().includes(input.toLowerCase());
return filteredData;
};
return (
<Select
className='InputAutoComplete'
suffixIcon={<LuSearch />}
placeholder={t('Search Product Name') as string}
placeholder={t('Search Product Name') as string} // Ensuring the placeholder is a string
allowClear
showSearch
loading={isLoading}
@ -64,7 +56,9 @@ const SearchButton: React.FC<SearchButtonProps> = ({ setOpen, setNoDataFound })
options={options}
optionFilterProp="label"
filterOption={filterOption}
notFoundContent={isLoading ? <Spin /> : null}
notFoundContent={
isLoading ? <Spin/> : "not found data"
}
/>
);
};

35
src/Components/Utils/SearchBar/SearchBar.scss
View File

@ -35,7 +35,7 @@
.InputAutoComplete{
width: 78%;
height: 48px;
margin-top: 12px;margin-bottom: 38px;
margin-top: 0px;margin-bottom: 38px;
.ant-select-arrow{
font-size: 32px;
color: var(--DarkGray) !important;
@ -95,23 +95,18 @@
}
}
}
.not_found_section{
@include Flex;
.Empty{
@include Flex; flex-direction: column;
}
}
.ViewSearch{
.ant-drawer .ant-drawer-content {
height: 50% !important ;width: 100% ;
min-height: 50% !important;
display: flex; flex-direction: column;
border-radius: 5px 0 0 5px;
}
}
.ViewSearch{
.ant-drawer .ant-drawer-content {
height: 50% !important ;width: 100% ;
min-height: 50% !important;
display: flex; flex-direction: column;
border-radius: 5px 0 0 5px;
}
}
.search_comp{
display: flex;
flex-direction: column;
}
.search_comp{
display: flex;
flex-direction: column;
}

41
src/Pages/Faqs/CollapseGroup.tsx
View File

@ -1,20 +1,11 @@
import type { CollapseProps } from "antd";
import { Collapse } from "antd";
import React, { useState } from 'react';
import React from 'react'
import { useTranslation } from "react-i18next";
import classNames from 'classnames';
const CollapseGroup = () => {
const { t } = useTranslation();
const [activeKey, setActiveKey] = useState<string[]>(["1"]);
const onChange = (key: string | string[]) => {
if (typeof key === 'string') {
setActiveKey([key]);
} else {
setActiveKey(key);
}
};
const {t} = useTranslation();
const items: CollapseProps["items"] = [
{
@ -31,7 +22,7 @@ const CollapseGroup = () => {
label: t("How can I engage with the magazine content on DM?"),
children: (
<p>
{t("You can actively engage with the magazine content by leaving comments and participating in the question-and-answer section. Feel free to share your thoughts, ask questions, and interact with enthusiasts in the community")}.
{t("You can actively engage with the magazine content by leaving comments and participating in the question-and-answer section. Feel free to share your thoughts, ask questions, and interact with enthusiastsin the community")}.
</p>
),
},
@ -58,7 +49,7 @@ const CollapseGroup = () => {
label: t("How can I get assistance with my purchase or any other inquiries?"),
children: (
<p>
{t("If you need assistance with your purchase or have any questions, our dedicated customer support is here to help. You can reach out to us through the contact page on our website, and we'll be happy to assist you promptly")}.
{t("If you need assistance with your purchase or have any questions, our dicated customer is here to help. You out to us through the contact page on our website, and we'll be happy to assist you promptly")}.
</p>
),
},
@ -66,26 +57,12 @@ const CollapseGroup = () => {
return (
<Collapse
className="faqs_collaps"
defaultActiveKey={["1"]}
expandIconPosition="right"
bordered={false}
activeKey={activeKey}
onChange={onChange}
items={items.map(item => ({
...item,
label: (
<span
className={classNames({
'label-active': activeKey.includes(item.key as string)
})}
>
{item.label}
</span>
)
}))}
items={items}
/>
);
};
)
}
export default CollapseGroup;
export default CollapseGroup

17
src/Pages/Product/Page.tsx
View File

@ -72,13 +72,24 @@ const Page = () => {
<div>
<span>
<h6>{t("Category")}</h6> <h5>{languageObject(product?.category?.name)}</h5>
<h6>category</h6> <h5>{languageObject(product?.category?.name)}</h5>
</span>
<span>
<h6>{t("Price")}</h6> <h5>{product?.price}</h5>
<h6>price</h6> <h5>{product?.price}</h5>
</span>
<span>
<h6>{t("Description")}</h6> <h5>{languageObject(product?.description)}</h5>
<h6>brand</h6> <h5>SAMSUNG</h5>
</span>
{info?.map((item:any)=>{
return (
<span>
<h6>item</h6> <h5>SAMSUNG</h5>
</span>
)
})}
<span>
<h6>description</h6> <h5>{languageObject(product?.description)}</h5>
</span>
</div>
</div>

8
src/Pages/Product/Similar.tsx
View File

@ -1,17 +1,15 @@
import { useTranslation } from "react-i18next";
import { useGetBaseProduct } from "../../api/baseProduct";
import ProductSwiper from "../../Components/Home/ProductSwiper";
const Similar = ({category_id}:any) => {
const { data,isLoading } = useGetBaseProduct({
category_id:[category_id]
category_id:category_id
});
const {t} = useTranslation();
return (
<div className="Products">
<header>
<h1>{t("Similar Products")}</h1>
<h1>Similar Products</h1>
</header>
<main className="ProductCards">
<ProductSwiper data={data} isLoading={isLoading} />

5
src/Styles/App/Mixing.scss
View File

@ -112,17 +112,16 @@
}
}
@mixin Scrollbar() {
@mixin Scrollbar($color) {
scroll-behavior: smooth;
scroll-padding: 10rem;
&::-webkit-scrollbar {
width: 8px;
height: 5px;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background-color: var(--primary);
background-color: $color;
border-radius: 3px; /* Adjust border-radius as needed */
}

4
src/Styles/App/className.scss
View File

@ -29,8 +29,8 @@
justify-content: center;
gap: 15px;
padding-inline: 2vw;
font-size: 1.2vw;
font-weight: 500;
font-size: 1vw;
font-weight: bold;
}
@media screen and (max-width: 1000px) {

17
src/Styles/Auth/Auth.scss
View File

@ -5,23 +5,24 @@
border-radius: var(--border-radius);
width: fit-content;
white-space: nowrap;
background: var(--white);
color: var(--primary);
background: var(--secondary);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
padding-inline: 10px;
padding-inline: 1vw;
padding-block: 20px;
font-size: 1vw;
&:hover{
background: var(--DarkPrimary) !important;
}
}
}
.ant-drawer .ant-drawer-content {
display: flex; flex-direction: column;
border-radius: 5px 0 0 5px;
}
}
.ant-drawer .ant-drawer-content {
display: flex; flex-direction: column;
border-radius: 5px 0 0 5px;
}
.auth_first_section{
width: 100%;
display: flex;justify-content: end;align-items: end;

36
src/Styles/Layout/Layout.scss
View File

@ -21,13 +21,6 @@
font-size: 20px;
letter-spacing: .7px;
cursor: pointer;
.first_link{
transition: ease-in-out .1s;
&:hover{
color: var(--primary);
border-bottom: 2px solid var(--primary);
}
}
.page_title_link{
color: var(--primary);
border-bottom: 2px solid var(--primary);
@ -49,10 +42,16 @@
}
}
a:hover{
@media screen and (max-width:600px) {
.header_link{
font-size: 12px;
}
}
a:hover{
color: var(--primary);
}
}
.Translate{
border-color: transparent;
font-weight: 500;
@ -68,20 +67,3 @@ a:hover{
.pointer{
cursor: pointer;
}
.mode_image{
margin-inline: 5px;
}
@media screen and (max-width:600px) {
.header_link{
font-size: 12px;
}
}
@media screen and (max-width:450px) {
.Translate{
font-size: 14px !important;
margin-bottom: -5px !important;
}
.MenuButton{
font-size: 10px !important;
}
}

50
src/Styles/Layout/NavBar.scss
View File

@ -2,6 +2,7 @@
.navbar{
position: absolute;
border: none;
}
}
@ -10,28 +11,38 @@
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text);
color: var(--secondary);
padding-inline: 5.5vw;
height: var(--navbar-height);
width: 100%;
z-index: 999;
border-bottom: .8px solid var(--primary);
>img{
width: 4.7vw;
}
.navbar_links{
display: flex;
gap: 3vw;
.navbar_link{
color: var(--text);
// opacity: .5;
opacity: .5;
// font-weight: bold;
cursor: pointer;
&:hover{
opacity: 1;
}
}
.active{
opacity: 1;
border-bottom: .1vw solid var(--primary);
color: var(--primary);
}
}
@ -43,13 +54,14 @@
.menu{
display: none;
}
article{
display: flex;
gap: 5%;
align-items: center;
>.icon_navbar{
padding: 10px;
// background: var(--primary);
@include Flex;
border-radius: 50%;
width: 30px;
@ -68,18 +80,18 @@
@media screen and (max-width: 1000px) {
.navbar{
img{
>img{
width: 50px;
}
.navbar_links{
display: none;
}
article{
// display: none;
gap: 10px;
}
.menu{
display: inline;
margin-inline: 10px;
svg{
color: var(--text);
}
@ -87,14 +99,15 @@
}
}
.menu_navbar_links{
display: flex;
flex-direction: column;
gap: 10px;
.menu_navbar_link{
cursor: pointer;
}
}
.menu_navbar_links{
display: flex;
flex-direction: column;
gap: 10px;
.menu_navbar_link{
cursor: pointer;
}
}
}
@media screen and (max-width:450px) {
@ -102,14 +115,13 @@
article{
gap: 2px !important;
svg{
font-size: 16px !important;
font-size: 10px !important;
}
.icon_navbar{
font-size: 10px !important;
}
}
.icon_navbar{
width: 6px;
font-size: 14px !important;
}
}
}
}
.ant-drawer .ant-drawer-header-title {

3
src/Styles/Page/About.scss
View File

@ -68,9 +68,6 @@
color: var(--primary);
font-size: 4vw;
}
h6{
font-weight: 400 !important;
}
p {
color: var(--secondary);
font-size: 2vw;

36
src/Styles/Page/Cart.scss
View File

@ -10,6 +10,8 @@
.ant-drawer-body{
height: 100% !important;
>div{
}
}
.Cart_Icon{
@ -17,9 +19,16 @@
height: 50px;
border-radius: 50%;
@include Flex;
svg{
}
}
.Badge_Button{
margin-inline: 10px;
// svg{
// height: 30px;
// color: var(--white);
// font-size: 20px !important;
// }
}
}
@ -47,6 +56,7 @@
}
.ViewCart_Button{
width: 100%;
margin-top: 20px;
display: flex;justify-content: space-between;
p{
text-align: center;
@ -63,15 +73,12 @@
font-weight: 500;
text-transform:capitalize ;
&:hover{
background: var(--DarkPrimary) !important;
background: var(--DarkPrimary);
}
}
}
.Drawer_Body{
height: 70vh;
display: flex; flex-direction: column; justify-content: space-between;align-items: center;
}
.ar{
.cart_first_section{
display: flex;justify-content: space-between;
@ -85,22 +92,26 @@
}
}
}
}
}
}
@media screen and (max-width:650px) {
.cart_first_section{
span{
font-size: 13px;
}
}
.ViewCart_Button{
p{
font-size: 12px;
}
.cart_checkout_button{
font-size: 15px;
padding: 20px 10px;
}
.cart_checkout_button_container{
.cart_checkout_button{
font-size: 15px;
padding: 20px 10px;
}
}
}
}
@ -117,7 +128,4 @@
p{
font-size: max(1.5vw,15px);
}
.cart_checkout_button{
font-size: 15px;
}
}
}

19
src/Styles/Page/Categories.scss
View File

@ -18,15 +18,18 @@
display: flex;
flex-direction: column;
background: var(--bg);
// gap: 20px;
padding: 10px;
> header {
display: flex;
justify-content: space-between;
align-items: center;
// height: 40px;
padding-inline: 16px;
// margin-inline: auto;
h4 {
font-size: 1.4vw;
font-weight: 500;
font-weight: bold;
color: var(--text);
}
h6 {
@ -54,7 +57,7 @@
}
.ant-collapse-item{
font-weight: 500 !important;
}
}
}
@ -106,6 +109,7 @@
}
> main {
display: flex;
// justify-content: center;
flex-wrap: wrap;
gap: 40px;
}
@ -125,16 +129,7 @@
.show_on_responsive {
display: none;
}
.ant-collapse-header-text{
font-weight: 500 !important;
}
.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector{
padding: 0px 28px ;
}
.ant-pagination .ant-pagination-item a{
color: var(--white);
}
@media screen and (max-width: 1000px) {
.show_on_responsive {
display: inline;
@ -166,7 +161,7 @@
height: 40px;
h4 {
font-size: 1.7vw;
font-weight: 500;
font-weight: bold;
color: var(--text);
}
h6 {

155
src/Styles/Page/Faqs.scss
View File

@ -1,83 +1,122 @@
.faqs_container {
display: flex;
flex-direction: column;
.faqs_container{
display: flex;flex-direction: column;
width: 90vw;
margin-inline: auto;
.faqs_image_section {
width: 100%;
margin-top: 50px;
position: relative;
z-index: 0;
img {
.faqs_image_section{
width: 100%;
border-radius: 10px;
}
h6 {
position: absolute;
top: 43%;
left: 50px;
color: #021736;
font-size: 3vw;
}
margin-top: 50px;
position: relative;
z-index: 0;
img{
width: 100%;
border-radius: 10px;
}
h6{
position: absolute;
top: 43%;
left: 50px;
color: #021736;
font-size: 3vw;
}
}
.faqs_body {
width: 100%;
display: flex;
justify-content: space-between;
margin-block: 40px;
.left {
width: 20%;
h1 {
font-size: 18px;
color: #0c0c0c;
margin-bottom: 20px;
}
p {
color: #0c0c0c;
font-size: 16px;
&:nth-child(2) {
color: var(--primary) !important;
.faqs_body{
width: 100%;
display: flex;justify-content: space-between;
margin-block:40px;
.left{
width: 20%;
h1{
font-size: 27px;
color: #0C0C0C;
margin-bottom: 20px;
}
p{
color: #0C0C0C;
font-size: 20px;
&:nth-child(2) {
color: var(--primary) !important;
}
}
}
}
.right {
width: 80%;
}
.right{
width: 80%;
}
}
}
.ant-collapse [class^="ant-collapse"],
.ant-collapse [class*=" ant-collapse"] {
.ant-collapse [class^="ant-collapse"], .ant-collapse [class*=" ant-collapse"]{
background: #fff;
}
.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-header-text {
.ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-header-text{
font-size: 1.8vw;
font-weight: 500;
}
.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow svg {
.ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-arrow svg{
font-size: 1.7vw;
}
.ant-collapse .ant-collapse-content {
p {
font-size: 1.4vw;
color: var(--text);
margin-bottom: 0;
.ant-collapse .ant-collapse-content{
p{
font-size: 1.4vw;
color: var(--primary);
margin-bottom: 0;
}
}
.label-active {
color: var(--primary);
transition: ease-in-out .4s;
}
@media screen and (max-width:800px) {
.faqs_container{
.faqs_image_section{
margin-top: 30px;
h6{
width: 50%;
left: 20px;
font-size: 3.5vw;
}
}
.faqs_body{
@include Flex; flex-direction: column;
width: 100%;
.left{
text-align: center;
width: 90%;
h1{
font-size: 22px;
margin-bottom: 12px;
}
p{
font-size: 18px;
}
}
.right{
width: 95%;
}
}
}
.ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-header-text{
font-size: 20px;
}
.ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-arrow svg{
font-size: 15px;
}
.ant-collapse .ant-collapse-content{
p{
font-size: 16px;
}
}
}

89
src/Styles/Page/Home.scss
View File

@ -27,7 +27,7 @@
gap: 20px;
h1 {
font-size: 4.4vw;
font-size: 4vw;
font-weight: bold;
}
@ -72,8 +72,7 @@
align-items: center;
img {
min-width: 140px;
max-width: 140px;
width: 150px;
height: 150px;
}
}
@ -172,7 +171,7 @@
display: flex;
gap: 20px;
overflow-x: scroll;
&::-webkit-scrollbar {
display: none;
}
@ -256,25 +255,26 @@
.BatteryLife,
.PerfectSound {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
img{
width: 54%;
}
div {
width: 46%;
justify-content: center;
> div {
width: 40%;
h1 {
font-size: 5vw;
font-weight: 500;
font-weight: bold;
}
p {
font-size: 1.24vw;
font-size: 1vw;
}
}
> img {
}
}
.PerfectSound {
@ -288,13 +288,6 @@
}
}
}
.BatteryLife{
width: 84%;
margin-inline: auto;
p{
font-size: 1.38vw !important;
}
}
}
@media screen and (max-width: 1000px) {
@ -341,15 +334,15 @@
> div {
display: flex;
flex-direction: column;
gap: 10px;
// display: none;
gap: 30px;
display: none;
h3 {
font-weight: bold;
}
button {
font-size: 20px;
font-size: 30px;
padding-inline: 10%;
border-radius: 2vw;
}
@ -358,7 +351,7 @@
> span {
img {
width: 50VW;
width: 50vw;
}
}
}
@ -381,8 +374,7 @@
align-items: center;
img {
min-width: 100px;
max-width: 100px;
width: 100px;
height: 100px;
}
@ -503,9 +495,7 @@
max-width: 100vw;
flex-wrap: wrap;
text-align: center;
img{
width: 100%;
}
> div {
width: 80%;
@ -545,22 +535,59 @@
.home_page{
.HeroSection {
display: flex;
padding: 10% 6%;
position: relative;
width: 100%;
z-index: 99;
min-height: 100vh;
&::after {
position: absolute;
content: "";
right: auto;
scale: -1;
left: 0;
top: 0;
background: url("../../../public/Home/HeroShape.svg");
background-size: cover;
background-repeat: no-repeat;
width: 40%;
height: 100%;
z-index: -1;
}
> div {
display: flex;
flex-direction: column;
width: 60%;
width: 45%;
gap: 20px;
h1 {
font-size: 6vw;
font-size: 4vw;
font-weight: bold;
}
> div {
display: flex;
gap: 30px
gap: 30px;
h3 {
font-weight: bold;
}
button {
padding-inline: 10%;
border-radius: 2vw;
}
}
}
> span {
img {
width: 25vw;
}
}
}
}

18
src/Styles/Page/setting.scss
View File

@ -26,7 +26,7 @@
width: 100%;
.ant-tabs .ant-tabs-tab{
justify-content: start;align-items: start;
font-size: 20px;
font-size: 24px;
width: 100% !important;
color: #717171;
@ -36,7 +36,7 @@
justify-content: space-around !important;
margin-bottom: 50px;
.left{
width: 36%;height: 400px !important;
width: 36%;height: 500px !important;
.social_info{
.Single_info{
span{
@ -80,7 +80,7 @@
}
.personl_data_form_button{
width: 20% !important;
padding: 10px 0 !important;
padding: 12px 0 !important;
background: var(--primary);
color: var(--white);
font-size: 20px;
@ -101,11 +101,11 @@
}
}
.personl_data_form_button{
width: 16% !important;
padding: 5px 0 !important;
width: 20% !important;
padding: 12px 0 !important;
background: var(--primary);
color: var(--white);
font-size: 16px;
font-size: 20px;
border: none;
&:hover{
background: var(--DarkPrimary);
@ -241,6 +241,12 @@
display: flex;flex-direction: row-reverse;align-items: center;
}
}
.personl_data_form{
span{
// display: flex;align-items: end;justify-content: end;
// text-align: end;
}
}
}
@media screen and (max-width:1100px) {

16
src/Styles/components/Card.scss
View File

@ -5,20 +5,21 @@
align-items: center;
border-radius: 7px;
.ant-card-body {
display: flex;justify-content: space-between;align-items: center;
@include Flex;
padding: 10px 5px;
width: 100%;
box-shadow: 10px 10px 20px 15px rgba(0, 0, 0, 0.1);
border-radius: 7px;
}
.Card_Img {
width: 20%;
width: 40%;
img {
width: 80%;
transform: translateX(-6px);
width: 40%;
}
}
.Card_Info {
width: 70%;
width: 50%;
h5 {
font-size: 14px;
text-wrap: nowrap;
@ -72,16 +73,17 @@
@media screen and (max-width: 650px) {
.CardItem {
.ant-card-body {
// @include Flex;
@include Flex;
padding: 10px 0px;
width: 100%;
box-shadow: 10px 10px 20px 15px rgba(0, 0, 0, 0.1);
border-radius: 7px;
}
.Card_Img {
width: 20%;
width: 30%;
img {
width: 80%;
width: 100%;
// transform: translateX(-6px);
}
}
.Card_Info {

2
src/Styles/components/ProductCard.scss
View File

@ -11,7 +11,7 @@
position: relative;
height: fit-content;
@include Shadow;
margin-inline: auto;
h4 {
font-size: 16px;
margin-bottom: 0px;

11
src/Styles/components/antd.scss
View File

@ -14,15 +14,4 @@
box-shadow: none !important;
}.ant-collapse>.ant-collapse-item:last-child,.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header{
border-radius: 0;
}
.setting_container .ant-tabs > .ant-tabs-nav .ant-tabs-nav-list, .setting_container .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-list{
overflow-x: auto ;
@include Scrollbar;
}
.ant-tabs-tab.ant-tabs-tab-active.ant-tabs-tab-disabled{
}

5
src/translate/ar.json
View File

@ -386,8 +386,7 @@
"verify code": "تحقق من الرمز",
"verify": "تحقق",
"sub_categories": "الفئات الفرعية",
"Clear_All": "مسح الكل",
"Track, return or purchase items":"تتبع أو إرجاع أو شراء العناصر",
"Order History":"تاريخ الطلب"
"Clear_All": "مسح الكل"
}

4
src/translate/ch.json
View File

@ -372,7 +372,5 @@
"verify code": "验证代码",
"verify": "验证",
"sub_categories": "子类别",
"Clear_All": "清除所有",
"Track, return or purchase items":"跟踪、退货或购买物品",
"Order History":"订单历史"
"Clear_All": "清除所有"
}

7
src/translate/en.json
View File

@ -371,7 +371,8 @@
"Security settings":"Security settings",
"See your favorites list here":"See your favorites list here",
"Change Password":"Change Password",
"Quite Comfort 35 wireless headphones II":"QuiteComfort 35 wireless headphones II",
"Quite Comfort 35 wireless headphones II":"Quite Comfort 35 wireless headphones II",
"Verify":"Verify",
"Create Your Account":"Create Your Account",
@ -383,9 +384,7 @@
"verify":"Verify",
"Login / Sign Up":"Login / Sign Up",
"sub_categories": "sub categories",
"Clear_All": "Clear All",
"Track, return or purchase items":"Track, return or purchase items",
"Order History":"Order History"
"Clear_All": "Clear All"
}