diff --git a/src/Components/Home/CategoriesSlider.tsx b/src/Components/Home/CategoriesSlider.tsx index fb2917f..f3eff1b 100644 --- a/src/Components/Home/CategoriesSlider.tsx +++ b/src/Components/Home/CategoriesSlider.tsx @@ -1,5 +1,5 @@ // import Swiper core and required modules -import { Navigation, Pagination, Scrollbar, A11y } from "swiper/modules"; +import { Navigation, A11y } from "swiper/modules"; import { Swiper, SwiperSlide } from "swiper/react"; @@ -31,7 +31,7 @@ const CategoriesSlider = () => { navigation breakpoints={{ 320: { - slidesPerView: 2, + slidesPerView: 1, }, 480: { slidesPerView: 2, @@ -40,13 +40,12 @@ const CategoriesSlider = () => { slidesPerView: 3, }, 768: { - slidesPerView: 4, + slidesPerView: 3, }, 1024: { - slidesPerView: 5, + slidesPerView: 4, }, }} - > {categories?.map((item: Category, index: number) => { return ( diff --git a/src/Components/Home/HeroSection.tsx b/src/Components/Home/HeroSection.tsx index ca30d61..b4cdc65 100644 --- a/src/Components/Home/HeroSection.tsx +++ b/src/Components/Home/HeroSection.tsx @@ -1,8 +1,13 @@ 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 (
@@ -10,7 +15,7 @@ const HeroSection = () => {
{/*

$229.50

*/} - +
diff --git a/src/Components/Home/ProductSwiper.tsx b/src/Components/Home/ProductSwiper.tsx index 8365734..d749813 100644 --- a/src/Components/Home/ProductSwiper.tsx +++ b/src/Components/Home/ProductSwiper.tsx @@ -18,7 +18,6 @@ const ProductSwiper = ({data,isLoading}:any) => { const [swiperDirection, setSwiperDirection] = useState(language === "ar" ? "rtl" : "ltr"); const swiperRef = useRef(null); - const BaseProducts = (data?.products as Product[]) || ([] as []); return ( diff --git a/src/Components/Ui/HeaderLink.tsx b/src/Components/Ui/HeaderLink.tsx index 062107b..bd8cfa3 100644 --- a/src/Components/Ui/HeaderLink.tsx +++ b/src/Components/Ui/HeaderLink.tsx @@ -9,12 +9,12 @@ const HeaderLink = ({text,isMulti,extraText,extraLink}:THeaderLink) => { return (
- {t("Home")} + {t("Home")} { isMulti ? <> - { t(extraText || "")} + { t(extraText || "")} : "" diff --git a/src/Styles/Auth/Auth.scss b/src/Styles/Auth/Auth.scss index b5c220e..0fb1698 100644 --- a/src/Styles/Auth/Auth.scss +++ b/src/Styles/Auth/Auth.scss @@ -5,14 +5,13 @@ border-radius: var(--border-radius); width: fit-content; white-space: nowrap; - background: var(--secondary); - color: var(--text); + background: var(--primary); + color: var(--white); display: flex; align-items: center; justify-content: center; gap: 15px; - padding-inline: 1vw; - padding-block: 20px; + padding-inline: 10px; font-size: 1vw; &:hover{ background: var(--DarkPrimary) !important; diff --git a/src/Styles/Layout/Layout.scss b/src/Styles/Layout/Layout.scss index f712592..7e411af 100755 --- a/src/Styles/Layout/Layout.scss +++ b/src/Styles/Layout/Layout.scss @@ -21,6 +21,13 @@ 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); @@ -42,16 +49,10 @@ } } -@media screen and (max-width:600px) { - .header_link{ - font-size: 12px; - } -} - - a:hover{ +a:hover{ color: var(--primary); -} - + } + .Translate{ border-color: transparent; font-weight: 500; @@ -67,3 +68,18 @@ .pointer{ cursor: pointer; } + +@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; + } +} diff --git a/src/Styles/Layout/NavBar.scss b/src/Styles/Layout/NavBar.scss index dc05cec..99f92cc 100755 --- a/src/Styles/Layout/NavBar.scss +++ b/src/Styles/Layout/NavBar.scss @@ -29,7 +29,6 @@ .navbar_link{ color: var(--text); opacity: .5; - // font-weight: bold; cursor: pointer; &:hover{ @@ -42,7 +41,7 @@ .active{ opacity: 1; - border-bottom: .1vw solid var(--primary); + // border-bottom: .1vw solid var(--primary); color: var(--primary); } } @@ -80,14 +79,13 @@ @media screen and (max-width: 1000px) { .navbar{ - >img{ + img{ width: 50px; } .navbar_links{ display: none; } article{ - // display: none; gap: 10px; } .menu{ @@ -99,15 +97,14 @@ } } - .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) { @@ -115,13 +112,14 @@ article{ gap: 2px !important; svg{ - font-size: 10px !important; - } - .icon_navbar{ - font-size: 10px !important; - } + font-size: 16px !important; } + .icon_navbar{ + width: 6px; + font-size: 14px !important; } + } + } } .ant-drawer .ant-drawer-header-title { diff --git a/src/Styles/Page/Cart.scss b/src/Styles/Page/Cart.scss index a12a8ab..0b20900 100644 --- a/src/Styles/Page/Cart.scss +++ b/src/Styles/Page/Cart.scss @@ -10,8 +10,6 @@ .ant-drawer-body{ height: 100% !important; - >div{ - } } .Cart_Icon{ @@ -19,16 +17,9 @@ height: 50px; border-radius: 50%; @include Flex; - svg{ - } } .Badge_Button{ margin-inline: 10px; - // svg{ - // height: 30px; - // color: var(--white); - // font-size: 20px !important; - // } } } @@ -73,7 +64,7 @@ font-weight: 500; text-transform:capitalize ; &:hover{ - background: var(--DarkPrimary); + background: var(--DarkPrimary) !important; } } } @@ -92,40 +83,20 @@ } } } - - } + } } @media screen and (max-width:650px) { .cart_first_section{ span{ font-size: 13px; } - } .ViewCart_Button{ p{ font-size: 12px; } - .cart_checkout_button_container{ .cart_checkout_button{ font-size: 15px; - padding: 20px 10px; } - } } -} - -.EmptyCard{ - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-top: 5%; - gap: 20px; - img{ - width: 40%; - } - p{ - font-size: max(1.5vw,15px); - } } \ No newline at end of file diff --git a/src/Styles/Page/Home.scss b/src/Styles/Page/Home.scss index 48b9f14..02d30d5 100644 --- a/src/Styles/Page/Home.scss +++ b/src/Styles/Page/Home.scss @@ -72,7 +72,8 @@ align-items: center; img { - width: 150px; + min-width: 140px; + max-width: 140px; height: 150px; } } @@ -171,7 +172,7 @@ display: flex; gap: 20px; overflow-x: scroll; - + &::-webkit-scrollbar { display: none; } @@ -374,7 +375,8 @@ align-items: center; img { - width: 100px; + min-width: 100px; + max-width: 100px; height: 100px; } diff --git a/src/Styles/components/Card.scss b/src/Styles/components/Card.scss index e98fd98..c2af35f 100644 --- a/src/Styles/components/Card.scss +++ b/src/Styles/components/Card.scss @@ -14,7 +14,6 @@ .Card_Img { width: 40%; img { - transform: translateX(-6px); width: 40%; } } @@ -80,10 +79,9 @@ border-radius: 7px; } .Card_Img { - width: 30%; + width: 20%; img { - width: 100%; - // transform: translateX(-6px); + width: 80%; } } .Card_Info { diff --git a/src/Styles/components/ProductCard.scss b/src/Styles/components/ProductCard.scss index 7bd4f20..7017c08 100644 --- a/src/Styles/components/ProductCard.scss +++ b/src/Styles/components/ProductCard.scss @@ -11,7 +11,7 @@ position: relative; height: fit-content; @include Shadow; - + margin-inline: auto; h4 { font-size: 16px; margin-bottom: 0px;