fix conflicts and check on website
This commit is contained in:
Moaz Dawalibi
parent
eb7cdda70a
commit
ecf8535fc6
14
index.html
14
index.html
|
|
@ -12,22 +12,10 @@
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="./App/Logo.svg" />
|
<link rel="icon" type="image/png" sizes="32x32" href="./App/Logo.svg" />
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="./App/Logo.svg" />
|
<link rel="icon" type="image/png" sizes="16x16" href="./App/Logo.svg" />
|
||||||
<link rel="manifest" href="./site.webmanifest" />
|
<link rel="manifest" href="./site.webmanifest" />
|
||||||
<meta
|
|
||||||
name="description"
|
|
||||||
content="Landing Page About My Work and Includ My Cv As Front End Developer Use Reactjs In Syria"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<meta property="og:title" content="My LandingPage" />
|
|
||||||
<meta
|
|
||||||
property="og:description"
|
|
||||||
content="Landing Page About My Work and Includ My Cv As Front End Developer Use Reactjs In Syria"
|
|
||||||
/>
|
|
||||||
<meta property="og:image" content="./App/Logo.svg" />
|
|
||||||
<meta property="og:url" content="https://karimalden.vercel.app" />
|
|
||||||
<meta property="og:type" content="website" />
|
|
||||||
<script type="module" src="/src/index.tsx"></script>
|
<script type="module" src="/src/index.tsx"></script>
|
||||||
|
|
||||||
<title>React-Start-App</title>
|
<title>DM Ecommerce</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 430 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 456 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 21 3 C 11.621094 3 4 10.621094 4 20 C 4 29.378906 11.621094 37 21 37 C 24.710938 37 28.140625 35.804688 30.9375 33.78125 L 44.09375 46.90625 L 46.90625 44.09375 L 33.90625 31.0625 C 36.460938 28.085938 38 24.222656 38 20 C 38 10.621094 30.378906 3 21 3 Z M 21 5 C 29.296875 5 36 11.703125 36 20 C 36 28.296875 29.296875 35 21 35 C 12.703125 35 6 28.296875 6 20 C 6 11.703125 12.703125 5 21 5 Z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 501 B |
Binary file not shown.
|
Before Width: | Height: | Size: 363 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 729 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 951 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
|
|
@ -1,27 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg class="Logo" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1367 766.99">
|
|
||||||
<defs>
|
|
||||||
<style>
|
|
||||||
.cls-2 {
|
|
||||||
fill:white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cls-3 {
|
|
||||||
fill: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</defs>
|
|
||||||
<g id="Layer_1-2" data-name="Layer 1-2">
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path class="cls-2" d="M540.42,301c0-7.67,0-15.33,.96-22.04,0-1.92,.96-1.92,1.92-2.87,33.54-15.33,54.62-42.17,69-75.71,4.79-11.5,7.67-22.04,8.62-34.5,.96-7.67,0-15.33-2.87-23-4.79-10.54-16.29-15.33-28.75-12.46-16.29,3.83-26.83,15.33-36.42,28.75-11.5,17.25-16.29,37.37-20.12,56.54-6.71,31.62-8.62,63.25-10.54,94.87-1.92,26.83-3.83,53.67-7.67,80.5-.96,4.79-1.92,9.58-2.87,14.37-.96,4.79,0,4.79,3.83,3.83,16.29-3.83,31.62-8.62,46-16.29,31.62-15.33,59.42-35.46,84.33-58.46,45.04-43.12,81.46-92,105.41-149.5,13.42-31.62,21.08-65.17,18.21-99.66,0-3.83,0-8.62-.96-12.46-.96-4.79,.96-6.71,4.79-8.62,8.62-3.83,18.21-4.79,27.79-4.79,6.71,0,13.42,.96,21.08,2.87,14.37,2.87,24.92,12.46,32.58,23.96,.96,.96,1.92,2.87,.96,3.83s-2.87,0-3.83,0c-5.75-1.92-11.5-3.83-18.21-2.87-13.42,.96-22.04,8.62-24.92,23-2.87,10.54-2.87,22.04-2.87,33.54,.96,20.12,3.83,40.25,3.83,60.37,0,5.75-1.92,11.5-4.79,17.25-43.12,71.87-98.71,130.33-172.5,171.54-39.29,22.04-79.54,37.37-123.62,47.92-3.83,.96-5.75,1.92-6.71,5.75-14.37,56.54-39.29,107.33-77.62,151.41-25.87,30.67-56.54,54.62-93.92,69.96-18.21,7.67-37.37,11.5-57.5,6.71-26.83-6.71-42.17-24.92-49.83-50.79-14.37-48.87,8.62-104.46,53.67-132.25,17.25-10.54,35.46-18.21,56.54-17.25,5.75,0,10.54,.96,16.29,1.92,4.79,.96,6.71,3.83,6.71,7.67,.96,13.42-4.79,24.92-14.37,33.54-3.83,3.83-7.67,3.83-12.46,0-4.79-3.83-9.58-7.67-14.37-9.58-18.21-9.58-35.46-5.75-48.87,9.58-13.42,15.33-20.12,33.54-24.92,52.71-3.83,17.25-4.79,34.5-3.83,51.75,.96,10.54,2.87,21.08,8.62,30.67,6.71,10.54,16.29,13.42,27.79,10.54,10.54-2.87,20.12-9.58,27.79-18.21,31.62-31.62,56.54-68.04,73.79-110.21,22.04-55.58,39.29-113.08,47.92-172.5,4.79-33.54,10.54-67.08,20.12-99.66,12.46-42.17,28.75-82.42,56.54-116.91,17.25-21.08,36.42-39.29,63.25-46.96,23-6.71,44.08-3.83,61.33,14.37,10.54,10.54,14.37,23.96,15.33,38.33,1.92,25.87-6.71,48.87-18.21,71.87-18.21,35.46-46,61.33-82.42,77.62q1.92,0,.96,0h0Z"/>
|
|
||||||
<path class="cls-2" d="M1056.95,437.08c-2.87-2.87-6.71-5.75-9.58-8.62s-3.83-2.87-5.75,.96c-10.54,24.92-22.04,49.83-34.5,74.75-11.5,21.08-23,42.17-39.29,59.42-5.75,6.71-12.46,12.46-20.12,16.29-15.33,7.67-29.71,1.92-36.42-13.42-3.83-7.67-3.83-15.33-3.83-23.96,0-21.08,5.75-41.21,12.46-60.37,7.67-21.08,15.33-41.21,29.71-58.46,9.58-11.5,21.08-22.04,36.42-25.87,6.71-1.92,13.42-.96,19.17,0,1.92,0,2.87,.96,3.83-1.92,9.58-23.96,19.17-48.87,26.83-73.79-3.83,3.83-7.67,8.62-11.5,12.46-9.58,10.54-21.08,21.08-33.54,27.79-27.79,17.25-56.54,13.42-80.5-9.58-14.37-13.42-23-30.67-29.71-48.87-1.92-4.79-3.83-9.58-6.71-15.33-.96,8.62-.96,16.29-2.87,24.92-6.71,46-15.33,92-40.25,132.25-15.33,25.87-37.37,45.04-67.08,53.67-.96,0-1.92,0-2.87,.96-.96,0-1.92,.96-1.92-.96,32.58-10.54,52.71-34.5,66.12-65.17,8.62-20.12,13.42-41.21,17.25-63.25,5.75-38.33,4.79-76.67,4.79-115,0-12.46-1.92-24.92,0-36.42,.96-8.62,4.79-15.33,13.42-19.17,5.75-2.87,10.54-1.92,16.29,.96,7.67,5.75,12.46,13.42,16.29,21.08,9.58,17.25,15.33,36.42,23,54.62,4.79,12.46,10.54,24.92,18.21,36.42,12.46,18.21,24.92,20.12,42.17,6.71,17.25-13.42,30.67-30.67,42.17-48.87,27.79-41.21,50.79-86.25,70.92-132.25,5.75-13.42,11.5-26.83,18.21-39.29,4.79-8.62,12.46-12.46,22.04-11.5,8.62,.96,14.37,6.71,16.29,15.33,1.92,6.71,.96,12.46-.96,19.17-12.46,43.12-26.83,86.25-40.25,128.41-18.21,55.58-37.37,111.16-59.42,164.83-.96,2.87-.96,3.83,.96,5.75,3.83,3.83,6.71,7.67,10.54,12.46q.96,2.87,0,2.87h0Z"/>
|
|
||||||
<path class="cls-2" d="M561.5,456.25c1.92,3.83,.96,8.62,.96,12.46-.96,44.08,4.79,87.21,22.04,127.46,4.79,12.46,11.5,23,21.08,32.58,17.25,18.21,40.25,23,63.25,12.46,20.12-9.58,35.46-23.96,50.79-40.25,2.87-2.87,5.75-5.75,7.67-9.58,1.92-2.87,4.79-2.87,7.67-1.92,16.29,5.75,28.75,15.33,37.37,29.71,2.87,4.79,2.87,9.58-.96,14.37-15.33,20.12-34.5,35.46-59.42,41.21-22.04,4.79-43.12,.96-63.25-9.58-27.79-14.37-48.87-36.42-66.12-62.29-19.17-29.71-31.62-62.29-38.33-96.79-1.92-8.62-1.92-17.25-2.87-25.87,0-1.92,0-2.87,.96-3.83,5.75-6.71,12.46-13.42,19.17-20.12h0Z"/>
|
|
||||||
<path class="cls-2" d="M844.21,140.96c0-6.71,4.79-11.5,10.54-11.5s11.5,5.75,11.5,11.5-4.79,11.5-11.5,11.5c-5.75,0-10.54-4.79-10.54-11.5h0Z"/>
|
|
||||||
</g>
|
|
||||||
<path class="cls-3" d="M935.25,547.29c-.96-4.79-1.92-8.62-1.92-12.46,.96-32.58,6.71-64.21,21.08-93.91,6.71-12.46,14.37-23.96,27.79-31.62,5.75-2.87,12.46-4.79,19.17-3.83,2.87,0,2.87,.96,1.92,2.87-17.25,41.21-33.54,83.37-55.58,121.71-2.88,6.71-7.67,11.5-12.46,17.25h0Z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.6 KiB |
|
|
@ -1,54 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
const KarimLogo = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<svg
|
|
||||||
className="KarimLogo"
|
|
||||||
id="Layer_1"
|
|
||||||
data-name="Layer 1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 1367 766.99"
|
|
||||||
>
|
|
||||||
<defs>
|
|
||||||
<style
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html:
|
|
||||||
"\n .cls-2 {\n fill:white;\n }\n\n .cls-3 {\n fill: transparent;\n }\n ",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</defs>
|
|
||||||
<g id="Layer_1-2" data-name="Layer 1-2">
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path
|
|
||||||
className="cls-2"
|
|
||||||
d="M540.42,301c0-7.67,0-15.33,.96-22.04,0-1.92,.96-1.92,1.92-2.87,33.54-15.33,54.62-42.17,69-75.71,4.79-11.5,7.67-22.04,8.62-34.5,.96-7.67,0-15.33-2.87-23-4.79-10.54-16.29-15.33-28.75-12.46-16.29,3.83-26.83,15.33-36.42,28.75-11.5,17.25-16.29,37.37-20.12,56.54-6.71,31.62-8.62,63.25-10.54,94.87-1.92,26.83-3.83,53.67-7.67,80.5-.96,4.79-1.92,9.58-2.87,14.37-.96,4.79,0,4.79,3.83,3.83,16.29-3.83,31.62-8.62,46-16.29,31.62-15.33,59.42-35.46,84.33-58.46,45.04-43.12,81.46-92,105.41-149.5,13.42-31.62,21.08-65.17,18.21-99.66,0-3.83,0-8.62-.96-12.46-.96-4.79,.96-6.71,4.79-8.62,8.62-3.83,18.21-4.79,27.79-4.79,6.71,0,13.42,.96,21.08,2.87,14.37,2.87,24.92,12.46,32.58,23.96,.96,.96,1.92,2.87,.96,3.83s-2.87,0-3.83,0c-5.75-1.92-11.5-3.83-18.21-2.87-13.42,.96-22.04,8.62-24.92,23-2.87,10.54-2.87,22.04-2.87,33.54,.96,20.12,3.83,40.25,3.83,60.37,0,5.75-1.92,11.5-4.79,17.25-43.12,71.87-98.71,130.33-172.5,171.54-39.29,22.04-79.54,37.37-123.62,47.92-3.83,.96-5.75,1.92-6.71,5.75-14.37,56.54-39.29,107.33-77.62,151.41-25.87,30.67-56.54,54.62-93.92,69.96-18.21,7.67-37.37,11.5-57.5,6.71-26.83-6.71-42.17-24.92-49.83-50.79-14.37-48.87,8.62-104.46,53.67-132.25,17.25-10.54,35.46-18.21,56.54-17.25,5.75,0,10.54,.96,16.29,1.92,4.79,.96,6.71,3.83,6.71,7.67,.96,13.42-4.79,24.92-14.37,33.54-3.83,3.83-7.67,3.83-12.46,0-4.79-3.83-9.58-7.67-14.37-9.58-18.21-9.58-35.46-5.75-48.87,9.58-13.42,15.33-20.12,33.54-24.92,52.71-3.83,17.25-4.79,34.5-3.83,51.75,.96,10.54,2.87,21.08,8.62,30.67,6.71,10.54,16.29,13.42,27.79,10.54,10.54-2.87,20.12-9.58,27.79-18.21,31.62-31.62,56.54-68.04,73.79-110.21,22.04-55.58,39.29-113.08,47.92-172.5,4.79-33.54,10.54-67.08,20.12-99.66,12.46-42.17,28.75-82.42,56.54-116.91,17.25-21.08,36.42-39.29,63.25-46.96,23-6.71,44.08-3.83,61.33,14.37,10.54,10.54,14.37,23.96,15.33,38.33,1.92,25.87-6.71,48.87-18.21,71.87-18.21,35.46-46,61.33-82.42,77.62q1.92,0,.96,0h0Z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
className="cls-2"
|
|
||||||
d="M1056.95,437.08c-2.87-2.87-6.71-5.75-9.58-8.62s-3.83-2.87-5.75,.96c-10.54,24.92-22.04,49.83-34.5,74.75-11.5,21.08-23,42.17-39.29,59.42-5.75,6.71-12.46,12.46-20.12,16.29-15.33,7.67-29.71,1.92-36.42-13.42-3.83-7.67-3.83-15.33-3.83-23.96,0-21.08,5.75-41.21,12.46-60.37,7.67-21.08,15.33-41.21,29.71-58.46,9.58-11.5,21.08-22.04,36.42-25.87,6.71-1.92,13.42-.96,19.17,0,1.92,0,2.87,.96,3.83-1.92,9.58-23.96,19.17-48.87,26.83-73.79-3.83,3.83-7.67,8.62-11.5,12.46-9.58,10.54-21.08,21.08-33.54,27.79-27.79,17.25-56.54,13.42-80.5-9.58-14.37-13.42-23-30.67-29.71-48.87-1.92-4.79-3.83-9.58-6.71-15.33-.96,8.62-.96,16.29-2.87,24.92-6.71,46-15.33,92-40.25,132.25-15.33,25.87-37.37,45.04-67.08,53.67-.96,0-1.92,0-2.87,.96-.96,0-1.92,.96-1.92-.96,32.58-10.54,52.71-34.5,66.12-65.17,8.62-20.12,13.42-41.21,17.25-63.25,5.75-38.33,4.79-76.67,4.79-115,0-12.46-1.92-24.92,0-36.42,.96-8.62,4.79-15.33,13.42-19.17,5.75-2.87,10.54-1.92,16.29,.96,7.67,5.75,12.46,13.42,16.29,21.08,9.58,17.25,15.33,36.42,23,54.62,4.79,12.46,10.54,24.92,18.21,36.42,12.46,18.21,24.92,20.12,42.17,6.71,17.25-13.42,30.67-30.67,42.17-48.87,27.79-41.21,50.79-86.25,70.92-132.25,5.75-13.42,11.5-26.83,18.21-39.29,4.79-8.62,12.46-12.46,22.04-11.5,8.62,.96,14.37,6.71,16.29,15.33,1.92,6.71,.96,12.46-.96,19.17-12.46,43.12-26.83,86.25-40.25,128.41-18.21,55.58-37.37,111.16-59.42,164.83-.96,2.87-.96,3.83,.96,5.75,3.83,3.83,6.71,7.67,10.54,12.46q.96,2.87,0,2.87h0Z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
className="cls-2"
|
|
||||||
d="M561.5,456.25c1.92,3.83,.96,8.62,.96,12.46-.96,44.08,4.79,87.21,22.04,127.46,4.79,12.46,11.5,23,21.08,32.58,17.25,18.21,40.25,23,63.25,12.46,20.12-9.58,35.46-23.96,50.79-40.25,2.87-2.87,5.75-5.75,7.67-9.58,1.92-2.87,4.79-2.87,7.67-1.92,16.29,5.75,28.75,15.33,37.37,29.71,2.87,4.79,2.87,9.58-.96,14.37-15.33,20.12-34.5,35.46-59.42,41.21-22.04,4.79-43.12,.96-63.25-9.58-27.79-14.37-48.87-36.42-66.12-62.29-19.17-29.71-31.62-62.29-38.33-96.79-1.92-8.62-1.92-17.25-2.87-25.87,0-1.92,0-2.87,.96-3.83,5.75-6.71,12.46-13.42,19.17-20.12h0Z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
className="cls-2"
|
|
||||||
d="M844.21,140.96c0-6.71,4.79-11.5,10.54-11.5s11.5,5.75,11.5,11.5-4.79,11.5-11.5,11.5c-5.75,0-10.54-4.79-10.54-11.5h0Z"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<path
|
|
||||||
className="cls-3"
|
|
||||||
d="M935.25,547.29c-.96-4.79-1.92-8.62-1.92-12.46,.96-32.58,6.71-64.21,21.08-93.91,6.71-12.46,14.37-23.96,27.79-31.62,5.75-2.87,12.46-4.79,19.17-3.83,2.87,0,2.87,.96,1.92,2.87-17.25,41.21-33.54,83.37-55.58,121.71-2.88,6.71-7.67,11.5-12.46,17.25h0Z"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default KarimLogo;
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
|
|
@ -12,22 +12,10 @@
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="./App/Logo.svg" />
|
<link rel="icon" type="image/png" sizes="32x32" href="./App/Logo.svg" />
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="./App/Logo.svg" />
|
<link rel="icon" type="image/png" sizes="16x16" href="./App/Logo.svg" />
|
||||||
<link rel="manifest" href="./site.webmanifest" />
|
<link rel="manifest" href="./site.webmanifest" />
|
||||||
<meta
|
|
||||||
name="description"
|
|
||||||
content="Landing Page About My Work and Includ My Cv As Front End Developer Use Reactjs In Syria"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<meta property="og:title" content="My LandingPage" />
|
|
||||||
<meta
|
|
||||||
property="og:description"
|
|
||||||
content="Landing Page About My Work and Includ My Cv As Front End Developer Use Reactjs In Syria"
|
|
||||||
/>
|
|
||||||
<meta property="og:image" content="./App/Logo.svg" />
|
|
||||||
<meta property="og:url" content="https://karimalden.vercel.app" />
|
|
||||||
<meta property="og:type" content="website" />
|
|
||||||
<script type="module" src="/src/index.tsx"></script>
|
<script type="module" src="/src/index.tsx"></script>
|
||||||
|
|
||||||
<title>React-Start-App</title>
|
<title>DM Ecommerce</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name": "ReactStart-App",
|
"name": "DM Ecommerce",
|
||||||
"short_name": "RS",
|
"short_name": "RS",
|
||||||
"description": "A social networking platform with automated content moderation and context-based authentication system.",
|
"description": "A social networking platform with automated content moderation and context-based authentication system.",
|
||||||
"start_url": "/",
|
"start_url": "/",
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@ const CardItem: React.FC<CartItemProps> = ({ data }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const price = (data?.quantity ?? 1) * data?.price;
|
const price = (data?.quantity ?? 1) * data?.price;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Skeleton
|
<Skeleton
|
||||||
key={data?.id}
|
key={data?.id}
|
||||||
|
|
|
||||||
|
|
@ -72,7 +72,7 @@ const CartWithDrawer = () => {
|
||||||
|
|
||||||
<div className="Drawer_Body">
|
<div className="Drawer_Body">
|
||||||
<div className="Card_Items">
|
<div className="Card_Items">
|
||||||
{Cart.map((item: any, index: number) => (
|
{Cart?.map((item: any, index: number) => (
|
||||||
<CardItem key={index} data={item} />
|
<CardItem key={index} data={item} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { GoArrowUpRight } from "react-icons/go";
|
import { RiArrowRightUpFill } from "react-icons/ri";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
const BoseHeadphones = () => {
|
const BoseHeadphones = () => {
|
||||||
const {t} = useTranslation();
|
const {t} = useTranslation();
|
||||||
|
|
@ -10,10 +11,12 @@ const BoseHeadphones = () => {
|
||||||
<div>
|
<div>
|
||||||
<h6>{t("Bose Headphones")}</h6>
|
<h6>{t("Bose Headphones")}</h6>
|
||||||
<h1>{t("Smarter than your average headphones")}</h1>
|
<h1>{t("Smarter than your average headphones")}</h1>
|
||||||
<button className="button">
|
<Link to="/categories" >
|
||||||
{t("Shop now")}
|
<button className="button">
|
||||||
<GoArrowUpRight />
|
{t("Shop now")}
|
||||||
</button>
|
<RiArrowRightUpFill />
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -26,24 +26,24 @@ const CategoriesSlider = () => {
|
||||||
<div className="CategoriesSlider">
|
<div className="CategoriesSlider">
|
||||||
<Swiper
|
<Swiper
|
||||||
modules={[Navigation, A11y]}
|
modules={[Navigation, A11y]}
|
||||||
spaceBetween={20}
|
spaceBetween={10}
|
||||||
slidesPerView={5}
|
// slidesPerView={5}
|
||||||
navigation
|
navigation
|
||||||
breakpoints={{
|
breakpoints={{
|
||||||
320: {
|
320: {
|
||||||
slidesPerView: 1,
|
slidesPerView: 2,
|
||||||
},
|
},
|
||||||
480: {
|
480: {
|
||||||
slidesPerView: 2,
|
slidesPerView: 3,
|
||||||
},
|
},
|
||||||
640: {
|
640: {
|
||||||
slidesPerView: 3,
|
slidesPerView: 3,
|
||||||
},
|
},
|
||||||
768: {
|
768: {
|
||||||
slidesPerView: 3,
|
slidesPerView: 4,
|
||||||
},
|
},
|
||||||
1024: {
|
1024: {
|
||||||
slidesPerView: 4,
|
slidesPerView: 5,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
65
src/Components/Products/ProductSlider.tsx
Normal file
65
src/Components/Products/ProductSlider.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
// import Swiper core and required modules
|
||||||
|
import { Navigation, A11y } from "swiper/modules";
|
||||||
|
import { Swiper, SwiperSlide } from "swiper/react";
|
||||||
|
|
||||||
|
// Import Swiper styles
|
||||||
|
import "swiper/css";
|
||||||
|
import "swiper/css/navigation";
|
||||||
|
import "swiper/css/pagination";
|
||||||
|
import "swiper/css/scrollbar";
|
||||||
|
import CustomImage from "../../ui/CustomImage";
|
||||||
|
import React, { Key } from "react";
|
||||||
|
|
||||||
|
interface ProductSliderProps {
|
||||||
|
data: any;
|
||||||
|
onImageClick: (imagePath: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProductSlider: React.FC<ProductSliderProps> = ({ data, onImageClick }) => {
|
||||||
|
return (
|
||||||
|
<div className="product_images_swiper">
|
||||||
|
<Swiper
|
||||||
|
modules={[Navigation, A11y]}
|
||||||
|
spaceBetween={10}
|
||||||
|
slidesPerView={4}
|
||||||
|
breakpoints={{
|
||||||
|
320: {
|
||||||
|
slidesPerView: 3,
|
||||||
|
},
|
||||||
|
480: {
|
||||||
|
slidesPerView: 4,
|
||||||
|
},
|
||||||
|
640: {
|
||||||
|
slidesPerView: 4,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
navigation
|
||||||
|
>
|
||||||
|
{/* main image */}
|
||||||
|
<SwiperSlide>
|
||||||
|
<span onClick={() => onImageClick(data.main_photo)}>
|
||||||
|
<CustomImage
|
||||||
|
className="product_multi_image main_image"
|
||||||
|
src={data.main_photo}
|
||||||
|
alt="Main Image"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</SwiperSlide>
|
||||||
|
{data?.images?.map((item: { path: string; },index: Key | null | undefined)=>{
|
||||||
|
return (
|
||||||
|
<SwiperSlide key={index}>
|
||||||
|
<span key={index} onClick={() => onImageClick(item.path)} >
|
||||||
|
<CustomImage
|
||||||
|
className="product_multi_image"
|
||||||
|
src={item?.path}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</SwiperSlide>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Swiper>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default ProductSlider;
|
||||||
|
|
@ -57,10 +57,10 @@ const Footer = () => {
|
||||||
<div className="footer_last_section">
|
<div className="footer_last_section">
|
||||||
<h6>{t("Sign up for News and updates")}</h6>
|
<h6>{t("Sign up for News and updates")}</h6>
|
||||||
<div>
|
<div>
|
||||||
<FaFacebook />
|
<Link to={'https://www.facebook.com/'}><FaFacebook /></Link>
|
||||||
<FaTwitter />
|
<Link to={'https://www.twitter.com/'}><FaTwitter /></Link>
|
||||||
<FaInstagram />
|
<Link to={'https://www.instagram.com/'}><FaInstagram /></Link>
|
||||||
<FaYoutube />
|
<Link to={'https://www.youtube.com/'}><FaYoutube /></Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ const Page = () => {
|
||||||
const [type, setType] = useState(type_param);
|
const [type, setType] = useState(type_param);
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [totalItems, setTotalItems] = useState(0);
|
const [totalItems, setTotalItems] = useState(0);
|
||||||
console.log(totalItems);
|
const [perPage, setPerPage] = useState(10);
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -75,6 +75,9 @@ const Page = () => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (data?.meta) {
|
if (data?.meta) {
|
||||||
setTotalItems(data.meta?.total);
|
setTotalItems(data.meta?.total);
|
||||||
|
setPerPage(data.meta?.per_page);
|
||||||
|
console.log(data.meta);
|
||||||
|
|
||||||
}
|
}
|
||||||
}, [data]);
|
}, [data]);
|
||||||
|
|
||||||
|
|
@ -148,7 +151,7 @@ const Page = () => {
|
||||||
<Pagination
|
<Pagination
|
||||||
current={currentPage}
|
current={currentPage}
|
||||||
total={totalItems}
|
total={totalItems}
|
||||||
pageSize={10}
|
pageSize={perPage}
|
||||||
onChange={handlePageChange}
|
onChange={handlePageChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { IoIosArrowForward } from "react-icons/io";
|
import { IoIosArrowForward } from "react-icons/io";
|
||||||
import { Currency } from "../../Layout/app/Const";
|
import { Currency } from "../../Layout/app/Const";
|
||||||
|
|
@ -12,11 +12,25 @@ import { languageObject } from "../../utils/languageObject";
|
||||||
import { jsonObjectToArray } from "../../utils/jsonObjectToArray";
|
import { jsonObjectToArray } from "../../utils/jsonObjectToArray";
|
||||||
import HeaderLink from "../../Components/Ui/HeaderLink";
|
import HeaderLink from "../../Components/Ui/HeaderLink";
|
||||||
import { BaseURL } from "../../api/utils/config";
|
import { BaseURL } from "../../api/utils/config";
|
||||||
|
import ProductTabs from "../../Components/Products/ProductsTabs";
|
||||||
|
import { IoHeartOutline } from "react-icons/io5";
|
||||||
|
import { useAddFavorite, useDeleteFavorite } from "../../api/Favorite";
|
||||||
|
import { useQueryClient } from "react-query";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import { FaCartPlus } from "react-icons/fa";
|
||||||
|
import { useCartState } from "../../state/CartState";
|
||||||
|
import useAuthState from "../../state/AuthState";
|
||||||
|
import ProductSlider from "../../Components/Products/ProductSlider";
|
||||||
|
|
||||||
const Page = () => {
|
const Page = () => {
|
||||||
|
|
||||||
const [t] = useTranslation();
|
const [t] = useTranslation();
|
||||||
const {product_id} = useParams()
|
const {product_id} = useParams()
|
||||||
|
const { Cart, setCart } = useCartState();
|
||||||
|
const { isAuthenticated } = useAuthState();
|
||||||
|
const { mutate: addToFavorite, isSuccess: Add } = useAddFavorite();
|
||||||
|
const { mutate: deleteToFavorite, isSuccess: Delete } = useDeleteFavorite();
|
||||||
|
|
||||||
const {data,isLoading} = useGetSingleBaseProduct({
|
const {data,isLoading} = useGetSingleBaseProduct({
|
||||||
show:product_id
|
show:product_id
|
||||||
})
|
})
|
||||||
|
|
@ -28,10 +42,55 @@ const Page = () => {
|
||||||
const handelImage = (item: any) => {
|
const handelImage = (item: any) => {
|
||||||
// setMainImage(item);
|
// setMainImage(item);
|
||||||
};
|
};
|
||||||
console.log(product?.images);
|
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const handelChangeFavorite = (item: Product) => {
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
toast.error("sorry you need to be authenticated");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (item?.favorite) {
|
||||||
|
|
||||||
|
deleteToFavorite({
|
||||||
|
id: item?.id,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addToFavorite({
|
||||||
|
id: item?.id,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
queryClient.invalidateQueries('mainProduct');
|
||||||
|
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
if (Add) {
|
||||||
|
toast.success("added to favorite successfully");
|
||||||
|
queryClient.invalidateQueries("mainProduct");
|
||||||
|
}
|
||||||
|
}, [Add]);
|
||||||
|
useEffect(() => {
|
||||||
|
if (Delete) {
|
||||||
|
toast.success("removed from favorite successfully");
|
||||||
|
queryClient.invalidateQueries("mainProduct");
|
||||||
|
}
|
||||||
|
}, [Delete]);
|
||||||
|
const handelAddToCart = (item: Product) => {
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
|
||||||
|
toast.error("sorry you need to be authenticated");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setCart(item);
|
||||||
|
|
||||||
|
|
||||||
|
toast.success(`${languageObject(item?.name)}` + " added to cart");
|
||||||
|
};
|
||||||
|
|
||||||
const info = jsonObjectToArray(product?.info)
|
const info = jsonObjectToArray(product?.info)
|
||||||
|
const handleChangeImage = (imagePath: string) => {
|
||||||
|
setMainImage(imagePath);
|
||||||
|
};
|
||||||
if(isLoading){
|
if(isLoading){
|
||||||
return <div className="loading_state"> <Spin/> </div>
|
return <div className="loading_state"> <Spin/> </div>
|
||||||
}
|
}
|
||||||
|
|
@ -42,59 +101,28 @@ const Page = () => {
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<div className="Product_left">
|
<div className="Product_left">
|
||||||
<span>
|
<span className="Product_left_container">
|
||||||
|
<div className="fav_icon">
|
||||||
|
<IoHeartOutline
|
||||||
|
onClick={() => handelChangeFavorite(product)}
|
||||||
|
className={product?.favorite ? "" : "not_favorite"}
|
||||||
|
/>
|
||||||
|
<FaCartPlus
|
||||||
|
onClick={() => handelAddToCart(product)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<CustomImage src={MainImage ?? product?.main_photo} alt="" />
|
<CustomImage src={MainImage ?? product?.main_photo} alt="" />
|
||||||
<div className="gallery_product">
|
<div className="gallery_product">
|
||||||
{product?.images?.map((item,index)=>{
|
<ProductSlider data={product} onImageClick={handleChangeImage} />
|
||||||
return (
|
|
||||||
<span key={index} onClick={() => handelImage(item?.path)} >
|
|
||||||
<CustomImage
|
|
||||||
|
|
||||||
src={item?.path}
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
<span>
|
|
||||||
<img
|
|
||||||
onClick={() => handelImage('/Home/p1.png')}
|
|
||||||
// src={}
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="Product_Right">
|
<div className="Product_Right">
|
||||||
<h1> {languageObject(product?.name)} </h1>
|
<ProductTabs data={product}/>
|
||||||
<div>
|
</div>
|
||||||
|
|
||||||
<span>
|
|
||||||
<h6>category</h6> <h5>{languageObject(product?.category?.name)}</h5>
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
<h6>price</h6> <h5>{product?.price}</h5>
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
<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>
|
|
||||||
</main>
|
</main>
|
||||||
<Similar/>
|
<Similar category_id={product?.category?.id} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -23,9 +23,7 @@ function ProviderContainer({ children }: Tchildren) {
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* <ToastProvider> */}
|
|
||||||
{children}
|
{children}
|
||||||
{/* </ToastProvider> */}
|
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
</QueryProvider>
|
</QueryProvider>
|
||||||
</ToastProvider>
|
</ToastProvider>
|
||||||
|
|
|
||||||
|
|
@ -46,9 +46,9 @@
|
||||||
@include Flex;
|
@include Flex;
|
||||||
}
|
}
|
||||||
.ViewCart_Button{
|
.ViewCart_Button{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 20px;
|
display: flex;justify-content: space-between;
|
||||||
display: flex;justify-content: space-between;
|
margin-top: 20px;
|
||||||
p{
|
p{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1\6px;
|
font-size: 1\6px;
|
||||||
|
|
@ -69,7 +69,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Drawer_Body{
|
||||||
|
height: 70vh;
|
||||||
|
display: flex; flex-direction: column; justify-content: space-between;align-items: center;
|
||||||
|
}
|
||||||
.ar{
|
.ar{
|
||||||
.cart_first_section{
|
.cart_first_section{
|
||||||
display: flex;justify-content: space-between;
|
display: flex;justify-content: space-between;
|
||||||
|
|
@ -95,8 +98,27 @@
|
||||||
p{
|
p{
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
.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);
|
||||||
|
}
|
||||||
.cart_checkout_button{
|
.cart_checkout_button{
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
@ -10,8 +10,8 @@
|
||||||
&::after {
|
&::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: "";
|
content: "";
|
||||||
right: 0;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
|
right: 0;
|
||||||
background: url("../../../public/Home/HeroShape.svg");
|
background: url("../../../public/Home/HeroShape.svg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 4vw;
|
font-size: 4.4vw;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -64,7 +64,8 @@
|
||||||
|
|
||||||
.CategoriesSlider_image {
|
.CategoriesSlider_image {
|
||||||
padding: 10px 30px;
|
padding: 10px 30px;
|
||||||
|
width: 152px;
|
||||||
|
height: 160px;
|
||||||
border: 1px solid #d9d9d9;
|
border: 1px solid #d9d9d9;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -75,6 +76,7 @@
|
||||||
min-width: 140px;
|
min-width: 140px;
|
||||||
max-width: 140px;
|
max-width: 140px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -256,26 +258,25 @@
|
||||||
|
|
||||||
.BatteryLife,
|
.BatteryLife,
|
||||||
.PerfectSound {
|
.PerfectSound {
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
img{
|
||||||
|
width: 54%;
|
||||||
> div {
|
}
|
||||||
width: 40%;
|
div {
|
||||||
|
width: 46%;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 5vw;
|
font-size: 5vw;
|
||||||
font-weight: bold;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 1vw;
|
font-size: 1.24vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> img {
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.PerfectSound {
|
.PerfectSound {
|
||||||
|
|
@ -289,6 +290,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.BatteryLife{
|
||||||
|
width: 84%;
|
||||||
|
margin-inline: auto;
|
||||||
|
p{
|
||||||
|
font-size: 1.38vw !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1000px) {
|
@media screen and (max-width: 1000px) {
|
||||||
|
|
@ -335,15 +343,15 @@
|
||||||
> div {
|
> div {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 30px;
|
gap: 10px;
|
||||||
display: none;
|
// display: none;
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
font-size: 30px;
|
font-size: 20px;
|
||||||
padding-inline: 10%;
|
padding-inline: 10%;
|
||||||
border-radius: 2vw;
|
border-radius: 2vw;
|
||||||
}
|
}
|
||||||
|
|
@ -352,7 +360,7 @@
|
||||||
|
|
||||||
> span {
|
> span {
|
||||||
img {
|
img {
|
||||||
width: 50vw;
|
width: 50VW;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -365,7 +373,9 @@
|
||||||
[role="button"] {
|
[role="button"] {
|
||||||
color: var(--text) !important;
|
color: var(--text) !important;
|
||||||
}
|
}
|
||||||
|
.swiper-slide{
|
||||||
|
min-width: 150px;
|
||||||
|
}
|
||||||
.CategoriesSlider_image {
|
.CategoriesSlider_image {
|
||||||
padding: 4% 10%;
|
padding: 4% 10%;
|
||||||
border: 1px solid #d9d9d9;
|
border: 1px solid #d9d9d9;
|
||||||
|
|
@ -373,7 +383,8 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
width: 110px;
|
||||||
|
height: 110px;
|
||||||
img {
|
img {
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
|
|
@ -497,7 +508,9 @@
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
> div {
|
> div {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
|
||||||
|
|
@ -537,60 +550,35 @@
|
||||||
|
|
||||||
.home_page{
|
.home_page{
|
||||||
.HeroSection {
|
.HeroSection {
|
||||||
display: flex;
|
&::after{
|
||||||
padding: 10% 6%;
|
scale: -1;
|
||||||
position: relative;
|
right: auto;
|
||||||
width: 100%;
|
left: 0 !important;
|
||||||
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 {
|
> div {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 45%;
|
width: 60%;
|
||||||
gap: 20px;
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 4vw;
|
font-size: 6vw;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 30px;
|
gap: 30px
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
padding-inline: 10%;
|
|
||||||
border-radius: 2vw;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> span {
|
|
||||||
img {
|
|
||||||
width: 25vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-button-prev:after, .swiper-button-next:after{
|
||||||
|
background: var(--white);
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
@ -21,63 +21,137 @@
|
||||||
.Product_left {
|
.Product_left {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
> span {
|
.fav_icon{
|
||||||
|
svg{
|
||||||
|
font-size: 25px;
|
||||||
|
transition: ease-in-out .3s;
|
||||||
|
margin-inline: 5px;
|
||||||
|
&:hover{
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.Product_left_container {
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
> img {
|
> img {
|
||||||
width: 50%;
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
object-fit: contain;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
.gallery_product {
|
.gallery_product {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
// max-width: 40vw;
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
span {
|
|
||||||
padding: 10px 15px;
|
|
||||||
border: 2px solid rgba(128, 128, 128, 0.1);
|
|
||||||
width: 100%;
|
|
||||||
> img {
|
|
||||||
width: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.Product_info {
|
||||||
.Product_Right {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 5px;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
padding-top: 2%;
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 4vw;
|
font-size: 4vw;
|
||||||
}
|
}
|
||||||
> div {
|
> div {
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 10px;
|
||||||
> span {
|
> span {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
width: 80%;
|
width: 100%;
|
||||||
|
padding: 10px 15px 0px 15px;
|
||||||
|
&:nth-child(odd){
|
||||||
|
background: var(--whiteOpacity) !important;
|
||||||
|
}
|
||||||
h6 {
|
h6 {
|
||||||
color: gray;
|
color: var(--whiteGray);
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 80px;
|
width: 50%;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
h5{
|
||||||
|
height: 100%;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
.product_images_swiper{
|
||||||
|
width: 100%;
|
||||||
|
.swiper-button-prev:after, .swiper-button-next:after{
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 20px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.swiper-backface-hidden .swiper-slide{
|
||||||
|
padding-inline: 10px;
|
||||||
|
min-width: 50px !important;
|
||||||
|
}
|
||||||
|
> span{
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
.product_multi_image{
|
||||||
|
width: 60px !important;
|
||||||
|
height: 50px;
|
||||||
|
object-fit: fill;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.Product_Right{
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.product_tab{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.product_description{
|
||||||
|
width: 100%;
|
||||||
|
p{
|
||||||
|
padding-inline: 15px;
|
||||||
|
width: 95%;
|
||||||
|
background: var(--whiteOpacity);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.product_additional_info{
|
||||||
|
> span {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 20px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 15px 0px 15px;
|
||||||
|
&:nth-child(even){
|
||||||
|
background: var(--whiteOpacity) !important;
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
color: var(--text);
|
||||||
|
position: relative;
|
||||||
|
width: 50%;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
h5{
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.Products {
|
.Products {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -89,23 +163,25 @@
|
||||||
> header {
|
> header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
h1{
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ProductCards {
|
.ProductCards {
|
||||||
max-width: 90vw;
|
max-width: 90vw;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
// gap: 40px;
|
|
||||||
// overflow-x: scroll;
|
|
||||||
|
|
||||||
// &::-webkit-scrollbar {
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width:850px) {
|
||||||
@media screen and (max-width:700px) {
|
.ant-tabs .ant-tabs-tab-btn{
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
.ant-tabs >.ant-tabs-nav .ant-tabs-nav-wrap,.ant-tabs >div>.ant-tabs-nav .ant-tabs-nav-wrap{
|
||||||
|
justify-content: center !important;align-items: center !important;
|
||||||
|
}
|
||||||
.Product {
|
.Product {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
@ -114,40 +190,27 @@
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
> main {
|
> main {
|
||||||
padding-inline: 10%;
|
padding-inline: 4%;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
display: flex;flex-direction: column;
|
display: flex;flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
gap: 10%;
|
gap: 10%;
|
||||||
}
|
}
|
||||||
.Product_left {
|
.Product_left {
|
||||||
display: flex;
|
display: flex;justify-content: center;align-items: center;
|
||||||
width: 90%;
|
width: 100%;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
> span {
|
> span {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
> img {
|
> img {
|
||||||
width: 60%;
|
width: 50%;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
.gallery_product {
|
.gallery_product {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
// overflow-x: scroll;
|
|
||||||
// &::-webkit-scrollbar {
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
span {
|
|
||||||
padding: 10px 10px;
|
|
||||||
border: 2px solid rgba(128, 128, 128, 0.1);
|
|
||||||
width: 100%;
|
|
||||||
> img {
|
|
||||||
width: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -180,4 +243,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width:450px) {
|
||||||
|
.ant-tabs >.ant-tabs-nav .ant-tabs-nav-wrap,.ant-tabs >div>.ant-tabs-nav .ant-tabs-nav-wrap{
|
||||||
|
justify-content: flex-start !important;align-items: flex-start !important;
|
||||||
|
}
|
||||||
|
.ant-tabs .ant-tabs-tab-btn{
|
||||||
|
font-size: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-pagination .ant-pagination-item a{
|
||||||
|
color: var(--text);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.main_image {
|
||||||
|
margin-left: 10px;
|
||||||
|
border: 2px solid var(--primary); /* or any color that fits your design */
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
|
min-width: 400px;
|
||||||
.ant-card-body {
|
.ant-card-body {
|
||||||
@include Flex;
|
@include Flex;
|
||||||
padding: 10px 5px;
|
padding: 10px 5px;
|
||||||
|
|
@ -136,3 +137,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width:450px) {
|
||||||
|
.CardItem{
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -2,7 +2,13 @@ import React from "react";
|
||||||
import { QueryClient, QueryClientProvider } from "react-query";
|
import { QueryClient, QueryClientProvider } from "react-query";
|
||||||
|
|
||||||
function QueryProvider({ children }: any) {
|
function QueryProvider({ children }: any) {
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
refetchOnWindowFocus:false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,6 @@ const useAuthState = create<AuthStore>((set) => {
|
||||||
Guest: storedGuest,
|
Guest: storedGuest,
|
||||||
setGuest: (Guest: string) => {
|
setGuest: (Guest: string) => {
|
||||||
localStorage.setItem(LocalStorageEnum.GUEST_KEY, Guest);
|
localStorage.setItem(LocalStorageEnum.GUEST_KEY, Guest);
|
||||||
|
|
||||||
set(() => ({
|
set(() => ({
|
||||||
Guest: Guest,
|
Guest: Guest,
|
||||||
}));
|
}));
|
||||||
|
|
|
||||||
|
|
@ -380,13 +380,26 @@
|
||||||
"Verify": "تحقق",
|
"Verify": "تحقق",
|
||||||
"Create Your Account": "أنشئ حسابك",
|
"Create Your Account": "أنشئ حسابك",
|
||||||
"Log In To DM": "تسجيل الدخول إلى DM",
|
"Log In To DM": "تسجيل الدخول إلى DM",
|
||||||
|
"Login / Sign Up": "تسجيل الدخول / الاشتراك",
|
||||||
"Verify Your Account": "تحقق من حسابك",
|
"Verify Your Account": "تحقق من حسابك",
|
||||||
"E-mail": "البريد الإلكتروني",
|
"E-mail": "البريد الإلكتروني",
|
||||||
"Full Name": "الاسم الكامل",
|
"Full Name": "الاسم الكامل",
|
||||||
"verify code": "تحقق من الرمز",
|
"verify code": "تحقق من الرمز",
|
||||||
"verify": "تحقق",
|
"verify": "تحقق",
|
||||||
"sub_categories": "الفئات الفرعية",
|
"sub_categories": "الفئات الفرعية",
|
||||||
"Clear_All": "مسح الكل"
|
"Clear_All": "مسح الكل",
|
||||||
|
"Track, return or purchase items":"تتبع أو إرجاع أو شراء العناصر",
|
||||||
|
"Order History":"تاريخ الطلب",
|
||||||
|
"Please try using other keywords to find the product name":"يرجى محاولة استخدام كلمات رئيسية أخرى للعثور على اسم المنتج",
|
||||||
|
"There are no suitable products":"لا توجد منتجات مناسبة",
|
||||||
|
|
||||||
|
"product_info":"معلومات المنتج",
|
||||||
|
"additional information":"معلومات إضافية",
|
||||||
|
"description":"الوصف",
|
||||||
|
"Info":"معلومات",
|
||||||
|
"Additional Info":"معلومات إضافية",
|
||||||
|
"Product info is empty":"معلومات المنتج فارغة",
|
||||||
|
"We are DM company, which has been working for two decades. We are active in the United Arab Emirates in the field of stock laptops, computer parts, RAM, hard drives, etc. We are currently working with Europe, Africa and the Middle East.We provide you the best services with the shortest time and the highest quality":"نحن شركة DM، التي تعمل منذ عقدين من الزمن. نحن نشطون في دولة الإمارات العربية المتحدة في مجال أجهزة الكمبيوتر المحمولة، وقطع الكمبيوتر، وذاكرة الوصول العشوائي، والأقراص الصلبة، وما إلى ذلك. ونعمل حاليًا مع أوروبا وأفريقيا والشرق الأوسط. نقدم لك أفضل الخدمات في أقصر وقت وبأقل تكلفة. اعلى جودة",
|
||||||
|
"":""
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -67,6 +67,7 @@ export interface Product {
|
||||||
total_quantity_ordered: number;
|
total_quantity_ordered: number;
|
||||||
attributes: ProductAttribute[];
|
attributes: ProductAttribute[];
|
||||||
other_attributes: any | null; // Adjust this type based on the actual structure if available
|
other_attributes: any | null; // Adjust this type based on the actual structure if available
|
||||||
|
quantity:number
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface MainData {
|
export interface MainData {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user