Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
4ba5c6b4dd | ||
|
86f3045cce | ||
|
|
174e4ad147 | ||
|
|
174a7b75f5 | ||
|
|
1a73c587c8 | ||
|
|
1621cdf027 | ||
|
|
572b66427e | ||
|
|
ecf8535fc6 |
24
index.html
24
index.html
|
|
@ -4,30 +4,18 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="android-chrome" href="./App/Logo.svg" />
|
||||
<link rel="android-chrome" href="./App/Logo.svg" />
|
||||
<link rel="android-chrome" href="./App/Logo.png" />
|
||||
<link rel="android-chrome" href="./App/Logo.png" />
|
||||
<link rel="canonical" href="https://karimalden.vercel.app/" />
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" 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="apple-touch-icon" sizes="180x180" href="./App/Logo.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./App/Logo.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="./App/Logo.png" />
|
||||
<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>
|
||||
|
||||
<title>React-Start-App</title>
|
||||
<title>DM Ecommerce</title>
|
||||
</head>
|
||||
<body>
|
||||
<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 |
BIN
public/About/about_hand.png
Normal file
BIN
public/About/about_hand.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 430 KiB |
BIN
public/About/about_lap.png
Normal file
BIN
public/About/about_lap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
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: 1.4 KiB After Width: | Height: | Size: 32 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
<svg width="72" height="34" viewBox="0 0 72 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2001_4350)">
|
||||
<path d="M34.9514 12.9924C34.4047 16.0388 33.9491 18.929 33.116 21.6629C31.3456 27.5058 27.9089 31.2239 22.7931 32.6143C21.1138 33.0674 19.4215 33.2236 17.7032 33.2236C12.0406 33.2236 6.37794 33.2236 0.71531 33.2392C0.181591 33.2392 -0.0136719 33.1455 -0.0136719 32.4112C0.0123632 26.2091 0.0123632 20.0226 -0.0136719 13.8204C-0.0136719 13.2268 0.103486 13.0393 0.624188 13.0393C2.99338 13.0706 5.34955 13.0706 7.71875 13.0393C8.23945 13.0393 8.40868 13.1643 8.40868 13.8361C8.36962 17.273 8.40868 20.71 8.38264 24.1469C8.38264 24.7562 8.4998 24.9437 9.03352 24.928C12.0276 24.8968 15.0216 24.9437 18.0156 24.8968C20.3848 24.8656 22.5978 24.2407 24.3812 22.1785C25.3835 21.038 25.7871 19.5539 26.1646 18.0229C27.2451 13.5705 28.3255 9.10244 29.432 4.65003C30.3042 1.18183 32.9598 -0.521025 35.7715 0.556928C37.0863 1.05685 37.9715 2.18167 38.6094 3.57207C41.4862 9.75858 44.5454 15.8201 47.1879 22.1629C47.227 22.2566 47.266 22.3347 47.3571 22.5066C47.6045 21.8973 47.8128 21.3505 48.0471 20.8037C50.6246 14.9453 53.3973 9.2118 56.131 3.46271C57.667 0.244478 60.6871 -0.661628 63.1865 1.19745C64.2539 1.9942 64.8788 3.18151 65.2172 4.58753C66.9616 11.8051 68.6799 19.0071 70.4112 26.2247C70.9189 28.3337 71.4136 30.4428 71.9343 32.5362C72.0514 33.0205 72.0775 33.2392 71.5307 33.2392C69.1225 33.1923 66.7142 33.208 64.306 33.2392C63.8894 33.2392 63.7462 33.0517 63.6551 32.6299C62.3794 26.5997 60.8694 20.6475 59.6848 14.6016C59.5936 14.1329 59.5155 13.6642 59.3984 13.0237C59.1771 13.5236 59.0209 13.8673 58.8777 14.2266C56.6907 19.7101 54.2434 25.0218 51.8742 30.3803C50.4293 33.6454 48.3204 34.2703 45.1962 33.3954C44.0897 33.083 43.3347 32.0675 42.814 30.9115C41.33 27.6776 39.8721 24.4125 38.4401 21.1318C37.3206 18.5384 36.11 16.0076 35.1337 13.3205C35.0816 13.258 35.0556 13.1955 34.9514 12.9924Z" fill="red"/>
|
||||
<path d="M34.9514 12.9924C34.4047 16.0388 33.9491 18.929 33.116 21.6629C31.3456 27.5058 27.9089 31.2239 22.7931 32.6143C21.1138 33.0674 19.4215 33.2236 17.7032 33.2236C12.0406 33.2236 6.37794 33.2236 0.71531 33.2392C0.181591 33.2392 -0.0136719 33.1455 -0.0136719 32.4112C0.0123632 26.2091 0.0123632 20.0226 -0.0136719 13.8204C-0.0136719 13.2268 0.103486 13.0393 0.624188 13.0393C2.99338 13.0706 5.34955 13.0706 7.71875 13.0393C8.23945 13.0393 8.40868 13.1643 8.40868 13.8361C8.36962 17.273 8.40868 20.71 8.38264 24.1469C8.38264 24.7562 8.4998 24.9437 9.03352 24.928C12.0276 24.8968 15.0216 24.9437 18.0156 24.8968C20.3848 24.8656 22.5978 24.2407 24.3812 22.1785C25.3835 21.038 25.7871 19.5539 26.1646 18.0229C27.2451 13.5705 28.3255 9.10244 29.432 4.65003C30.3042 1.18183 32.9598 -0.521025 35.7715 0.556928C37.0863 1.05685 37.9715 2.18167 38.6094 3.57207C41.4862 9.75858 44.5454 15.8201 47.1879 22.1629C47.227 22.2566 47.266 22.3347 47.3571 22.5066C47.6045 21.8973 47.8128 21.3505 48.0471 20.8037C50.6246 14.9453 53.3973 9.2118 56.131 3.46271C57.667 0.244478 60.6871 -0.661628 63.1865 1.19745C64.2539 1.9942 64.8788 3.18151 65.2172 4.58753C66.9616 11.8051 68.6799 19.0071 70.4112 26.2247C70.9189 28.3337 71.4136 30.4428 71.9343 32.5362C72.0514 33.0205 72.0775 33.2392 71.5307 33.2392C69.1225 33.1923 66.7142 33.208 64.306 33.2392C63.8894 33.2392 63.7462 33.0517 63.6551 32.6299C62.3794 26.5997 60.8694 20.6475 59.6848 14.6016C59.5936 14.1329 59.5155 13.6642 59.3984 13.0237C59.1771 13.5236 59.0209 13.8673 58.8777 14.2266C56.6907 19.7101 54.2434 25.0218 51.8742 30.3803C50.4293 33.6454 48.3204 34.2703 45.1962 33.3954C44.0897 33.083 43.3347 32.0675 42.814 30.9115C41.33 27.6776 39.8721 24.4125 38.4401 21.1318C37.3206 18.5384 36.11 16.0076 35.1337 13.3205C35.0816 13.258 35.0556 13.1955 34.9514 12.9924Z" fill="#eb671b"/>
|
||||
<path d="M24.1476 11.8056C22.0778 9.71216 19.6825 9.16537 17.1051 9.181C11.4685 9.22786 5.83188 9.19662 0.078125 9.19662C0.559774 8.43112 0.989353 7.74373 1.41893 7.05634C2.62956 5.13477 3.85321 3.2132 5.05082 1.27601C5.24609 0.963559 5.44135 0.791711 5.79282 0.807334C10.5182 0.869824 15.2436 0.682354 19.9689 0.932314C22.0387 1.04167 24.0434 1.63533 25.983 2.57268C26.3605 2.76015 26.3345 2.94762 26.2434 3.32256C25.5404 6.11899 24.8635 8.89979 24.1476 11.8056Z" fill="#AFB0B6"/>
|
||||
</g>
|
||||
<defs>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
BIN
public/Cart/empty_card.gif
Normal file
BIN
public/Cart/empty_card.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="500" height="695" viewBox="0 0 500 695" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M500 -24H220V-23.9353C194.171 -23.7928 168.277 -10.9011 153.712 17.4919L8.37793 300.812C-2.79264 322.588 -2.79264 348.412 8.37792 370.188L153.712 653.508C168.277 681.901 194.171 694.793 220 694.935V695H500V-24Z" fill="red"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M500 -24H220V-23.9353C194.171 -23.7928 168.277 -10.9011 153.712 17.4919L8.37793 300.812C-2.79264 322.588 -2.79264 348.412 8.37792 370.188L153.712 653.508C168.277 681.901 194.171 694.793 220 694.935V695H500V-24Z" fill="#eb671b"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 381 B After Width: | Height: | Size: 385 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 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 |
BIN
public/Layout/DMlOGO.png
Normal file
BIN
public/Layout/DMlOGO.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 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 |
|
|
@ -18,7 +18,6 @@ firebase.initializeApp(firebaseConfig);
|
|||
const messaging = firebase.messaging();
|
||||
|
||||
messaging.onBackgroundMessage(function (payload) {
|
||||
console.log("Received background message ", payload);
|
||||
|
||||
const notificationTitle = payload.notification.title;
|
||||
const notificationOptions = {
|
||||
|
|
|
|||
BIN
public/icon/notfound_search.png
Normal file
BIN
public/icon/notfound_search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
|
|
@ -4,30 +4,18 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="android-chrome" href="./App/Logo.svg" />
|
||||
<link rel="android-chrome" href="./App/Logo.svg" />
|
||||
<link rel="android-chrome" href="./App/Logo.png" />
|
||||
<link rel="android-chrome" href="./App/Logo.png" />
|
||||
<link rel="canonical" href="https://karimalden.vercel.app/" />
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" 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="apple-touch-icon" sizes="180x180" href="./App/Logo.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./App/Logo.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="./App/Logo.png" />
|
||||
<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>
|
||||
|
||||
<title>React-Start-App</title>
|
||||
<title>DM Ecommerce</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "ReactStart-App",
|
||||
"name": "DM Ecommerce",
|
||||
"short_name": "RS",
|
||||
"description": "A social networking platform with automated content moderation and context-based authentication system.",
|
||||
"start_url": "/",
|
||||
|
|
@ -8,17 +8,17 @@
|
|||
"theme_color": "#000000",
|
||||
"icons": [
|
||||
{
|
||||
"src": "./App/Logo.svg",
|
||||
"src": "./App/Logo.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "./App/Logo.svg",
|
||||
"src": "./App/Logo.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "./App/Logo.svg",
|
||||
"src": "./App/Logo.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
|
|
|
|||
|
|
@ -19,12 +19,12 @@ const App = () => {
|
|||
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
const randomtoken = Math.random()
|
||||
useEffect(() => {
|
||||
const fn_firebase = (async () => {
|
||||
const token = await requestPermission()
|
||||
// const token = await requestPermission()
|
||||
if (!Guest) {
|
||||
mutate({ fcm_token: token });
|
||||
mutate({ fcm_token: randomtoken });
|
||||
}
|
||||
})
|
||||
fn_firebase()
|
||||
|
|
|
|||
|
|
@ -61,14 +61,15 @@ const CardItem: React.FC<CartItemProps> = ({ data }) => {
|
|||
<h6>
|
||||
<FaTruck /> {t("Free Delivery")}
|
||||
</h6>
|
||||
<h6>
|
||||
<MdOutlineVerified /> {t("Guaranteed")}
|
||||
</h6>
|
||||
|
||||
|
||||
<div className="card_price">
|
||||
<p>
|
||||
{/* <p>
|
||||
{price} {Currency}{" "}
|
||||
</p>
|
||||
</p> */}
|
||||
<h6>
|
||||
<MdOutlineVerified /> {t("Guaranteed")}
|
||||
</h6>
|
||||
|
||||
<div className="count_section">
|
||||
<FaRegTrashAlt
|
||||
|
|
|
|||
|
|
@ -13,8 +13,6 @@ const BrandFilter = () => {
|
|||
(Category: Category): CheckboxProps["onChange"] =>
|
||||
(e) => {
|
||||
const checked = e.target.checked;
|
||||
console.log(Category);
|
||||
console.log(languageObject(Category?.name));
|
||||
|
||||
if (checked) {
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const CartWithDrawer = () => {
|
|||
const { t } = useTranslation();
|
||||
const { Cart, calculateTotalPrice, calculateTotalQuantity, removeCart } =
|
||||
useCartState();
|
||||
const { user } = useAuthState();
|
||||
const { user ,isAuthenticated} = useAuthState();
|
||||
const { mutate, isLoading, isSuccess } = useAddOrder();
|
||||
const products = Cart?.map((item: any) => ({
|
||||
quantity: item?.quantity,
|
||||
|
|
@ -27,6 +27,10 @@ const CartWithDrawer = () => {
|
|||
}));
|
||||
|
||||
const addOrder = () => {
|
||||
if (!isAuthenticated) {
|
||||
toast.error("sorry you need to be authenticated");
|
||||
return;
|
||||
}
|
||||
mutate({
|
||||
email: user?.email,
|
||||
products: products,
|
||||
|
|
@ -60,8 +64,8 @@ const CartWithDrawer = () => {
|
|||
onClose={() => setOpen(false)}
|
||||
open={open}
|
||||
key={placement}
|
||||
width={550}
|
||||
style={{maxHeight:"90%"}}
|
||||
width={450}
|
||||
style={{maxHeight:"60%", minHeight:"500px"}}
|
||||
>
|
||||
<div className="cart_first_section">
|
||||
<span>{t("Cart")}</span>
|
||||
|
|
@ -72,20 +76,21 @@ const CartWithDrawer = () => {
|
|||
|
||||
<div className="Drawer_Body">
|
||||
<div className="Card_Items">
|
||||
{Cart.map((item: any, index: number) => (
|
||||
{Cart?.map((item: any, index: number) => (
|
||||
<CardItem key={index} data={item} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
{Cart?.length > 0 ? (
|
||||
<div className="ViewCart_Button">
|
||||
<p>
|
||||
{t("Grand Total")}
|
||||
<br />
|
||||
<span>
|
||||
{/* <span>
|
||||
{" "}
|
||||
{calculateTotalPrice()} {Currency}{" "}
|
||||
</span>
|
||||
</span> */}
|
||||
</p>
|
||||
<Button
|
||||
className="cart_checkout_button"
|
||||
|
|
@ -97,7 +102,10 @@ const CartWithDrawer = () => {
|
|||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div></div>
|
||||
<div className="EmptyCard">
|
||||
<img src="/Cart/empty_card.gif" alt="" />
|
||||
<p>{t('You have not placed any orders yet')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Drawer>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export const ChangeModeComp = ({onClickFunction, src, modeText,icon, isImage = t
|
|||
const ModeContainer = memo(() => (
|
||||
<div className="MenuChange" onClick={onClickFunction}>
|
||||
{isImage
|
||||
? <img alt='ModeImage' src={src} width={20} height={20} />
|
||||
? <img className="mode_image" alt='ModeImage' src={src} width={20} height={20} />
|
||||
: icon
|
||||
}
|
||||
{t(modeText)}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,22 @@
|
|||
import React, { useState, ReactNode } from 'react';
|
||||
import { useState } from 'react';
|
||||
import type { DrawerProps } 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 { Drawer, Space } from 'antd';
|
||||
import { TiDeleteOutline } from "react-icons/ti";
|
||||
import SearchButton from '../Utils/Search/SearchButton';
|
||||
import { GoClock } from "react-icons/go";
|
||||
import { FiDelete } from "react-icons/fi";
|
||||
import { RiSearch2Line, RiSearchLine } from "react-icons/ri";
|
||||
|
||||
|
||||
import { RiSearchLine } from "react-icons/ri";
|
||||
import Empty from '../Utils/Search/Empty';
|
||||
|
||||
const SearchWithDrawer = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
|
||||
const { DataCart,count} = useCartData()
|
||||
const {t} = useTranslation();
|
||||
|
||||
const [noDataFound, setNoDataFound] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Space>
|
||||
<div onClick={()=>setOpen(true)} className="icon_navbar">
|
||||
<RiSearchLine />
|
||||
</div>
|
||||
<div onClick={() => setOpen(true)} className="icon_navbar">
|
||||
<RiSearchLine />
|
||||
</div>
|
||||
</Space>
|
||||
|
||||
<Drawer
|
||||
|
|
@ -37,20 +26,19 @@ const SearchWithDrawer = () => {
|
|||
onClose={() => setOpen(false)}
|
||||
open={open}
|
||||
key={placement}
|
||||
width ={700}
|
||||
style={{maxHeight:"40%"}}
|
||||
width={720}
|
||||
style={{ maxHeight: "40%" }}
|
||||
>
|
||||
<div className="search_first_section">
|
||||
<SearchButton/>
|
||||
<span className='delete_icon' onClick={()=>setOpen(false)}><TiDeleteOutline/></span>
|
||||
<SearchButton setOpen={setOpen} setNoDataFound={setNoDataFound} />
|
||||
<span className='delete_icon' onClick={() => setOpen(false)}><TiDeleteOutline /></span>
|
||||
</div>
|
||||
<div className='not_found_section'>
|
||||
{noDataFound ? <Empty />:"" }
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchWithDrawer;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import ProductSwiper from "./ProductSwiper";
|
||||
import { useGetBaseProduct } from "../../api/baseProduct";
|
||||
|
||||
const Products = () => {
|
||||
const {t} = useTranslation();
|
||||
|
|
@ -9,6 +10,10 @@ const Products = () => {
|
|||
const handelSeeAll = () => {
|
||||
navigate(`/categories?type=best_sale`);
|
||||
};
|
||||
|
||||
const { data,isLoading } = useGetBaseProduct({
|
||||
mostOrderd: "asc",
|
||||
})
|
||||
return (
|
||||
<div className="Products">
|
||||
<header>
|
||||
|
|
@ -16,7 +21,7 @@ const Products = () => {
|
|||
<h5 className="pointer" onClick={handelSeeAll}> {t("View all")} </h5>
|
||||
</header>
|
||||
<main className="ProductCards">
|
||||
<ProductSwiper/>
|
||||
<ProductSwiper data={data} isLoading={isLoading} />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from "react";
|
||||
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 {t} = useTranslation();
|
||||
|
|
@ -10,10 +10,12 @@ const BoseHeadphones = () => {
|
|||
<div>
|
||||
<h6>{t("Bose Headphones")}</h6>
|
||||
<h1>{t("Smarter than your average headphones")}</h1>
|
||||
<button className="button">
|
||||
{t("Shop now")}
|
||||
<GoArrowUpRight />
|
||||
</button>
|
||||
<Link to="/categories" >
|
||||
<button className="button">
|
||||
{t("Shop now")}
|
||||
<RiArrowRightUpFill />
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
15
src/Components/Home/Categories.tsx
Normal file
15
src/Components/Home/Categories.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import HomeSlider from "../../Components/Home/CategoriesSlider";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const Categories = () => {
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
<div className='category_page'>
|
||||
<h1>{t("What do you like")}?</h1>
|
||||
|
||||
<HomeSlider />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Categories
|
||||
|
|
@ -12,42 +12,45 @@ import { useGetCategories } from "../../api/Categories";
|
|||
import { Category } from "../../types/item";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { addBaseUrlToSrc } from "../../utils/addBaseUrlToSrc";
|
||||
import { languageObject } from "../../utils/languageObject";
|
||||
import Loading from "../Utils/Loading/Loading";
|
||||
|
||||
const CategoriesSlider = () => {
|
||||
const { data } = useGetCategories();
|
||||
const { data , isLoading} = useGetCategories();
|
||||
const categories = (data?.categories as Category[]) || ([] as []);
|
||||
const navigate = useNavigate();
|
||||
const handelNavigate = (data: Category) => {
|
||||
navigate(`/categories?category=${data?.id}`);
|
||||
};
|
||||
console.log(categories);
|
||||
|
||||
|
||||
return (
|
||||
<div className="CategoriesSlider">
|
||||
<Swiper
|
||||
modules={[Navigation, A11y]}
|
||||
spaceBetween={20}
|
||||
slidesPerView={5}
|
||||
spaceBetween={10}
|
||||
// slidesPerView={5}
|
||||
navigation
|
||||
breakpoints={{
|
||||
320: {
|
||||
slidesPerView: 1,
|
||||
slidesPerView: 2,
|
||||
},
|
||||
480: {
|
||||
slidesPerView: 2,
|
||||
slidesPerView: 3,
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 3,
|
||||
slidesPerView: 4,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 4,
|
||||
slidesPerView: 5,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{categories?.map((item: Category, index: number) => {
|
||||
{isLoading ?<Loading/> :categories?.map((item: Category, index: number) => {
|
||||
return (
|
||||
<SwiperSlide key={index}>
|
||||
<div className="CategoriesSlider_image">
|
||||
|
|
@ -56,6 +59,7 @@ const CategoriesSlider = () => {
|
|||
src={addBaseUrlToSrc(item?.photo)}
|
||||
alt={`category ${index + 1}`}
|
||||
/>
|
||||
<p className="truncate-text">{languageObject(item?.name)}</p>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { FaHeart, FaStar } from "react-icons/fa";
|
||||
import { FaHeart, FaStar, FaCartPlus } from "react-icons/fa";
|
||||
import { Currency } from "../../Layout/app/Const";
|
||||
import { FaCartPlus } from "react-icons/fa6";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import CustomImage from "../../ui/CustomImage";
|
||||
|
|
@ -17,11 +16,8 @@ const ProductCard = ({ item }: { item: Product }) => {
|
|||
const [t] = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const { isAuthenticated } = useAuthState();
|
||||
// console.log(item);
|
||||
|
||||
const handel_click = (id: number) => {
|
||||
console.log(id);
|
||||
|
||||
const handle_click = (id: number) => {
|
||||
navigate(`/product/${id}`);
|
||||
};
|
||||
|
||||
|
|
@ -36,80 +32,60 @@ const ProductCard = ({ item }: { item: Product }) => {
|
|||
const randomRate = (Math.random() * (max - min) + min)?.toFixed(1);
|
||||
|
||||
const { Cart, setCart } = useCartState();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const handelChangeFavorite = (item: Product) => {
|
||||
const handleChangeFavorite = (item: Product) => {
|
||||
if (!isAuthenticated) {
|
||||
toast.error("sorry you need to be authenticated");
|
||||
toast.error("Sorry, you need to be authenticated");
|
||||
return;
|
||||
}
|
||||
|
||||
if (item?.favorite) {
|
||||
|
||||
deleteToFavorite({
|
||||
id: item?.id,
|
||||
});
|
||||
deleteToFavorite({ id: item?.id });
|
||||
} else {
|
||||
addToFavorite({
|
||||
id: item?.id,
|
||||
});
|
||||
addToFavorite({ id: item?.id });
|
||||
}
|
||||
queryClient.invalidateQueries("mainProduct");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (Add) {
|
||||
toast.success("added success");
|
||||
toast.success("Added successfully");
|
||||
queryClient.invalidateQueries("mainProduct");
|
||||
}
|
||||
}, [Add]);
|
||||
|
||||
useEffect(() => {
|
||||
if (Delete) {
|
||||
toast.success("removed success");
|
||||
toast.success("Removed successfully");
|
||||
queryClient.invalidateQueries("mainProduct");
|
||||
}
|
||||
}, [Delete]);
|
||||
|
||||
const handelAddToCart = (item: Product) => {
|
||||
const handleAddToCart = (item: Product) => {
|
||||
if (!isAuthenticated) {
|
||||
|
||||
toast.error("sorry you need to be authenticated");
|
||||
toast.error("Sorry, you need to be authenticated");
|
||||
return;
|
||||
}
|
||||
setCart(item);
|
||||
|
||||
|
||||
toast.success(`${languageObject(item?.name)}` + " added to cart");
|
||||
toast.success(`${languageObject(item?.name)} added to cart`);
|
||||
};
|
||||
|
||||
|
||||
const Desc :any = item?.description
|
||||
const words = Desc.split(' ');
|
||||
const firstThreeWord = words.slice(0, 2).join(' ');
|
||||
const result = words.length > 2 ? firstThreeWord + '...' : firstThreeWord;
|
||||
return (
|
||||
<div className="ProductCard">
|
||||
<CustomImage src={item?.main_photo} onClick={() => handel_click(item?.base_product_id)} />
|
||||
<h4>{languageObject(item?.name)}</h4>
|
||||
<p>
|
||||
{" "}
|
||||
{Currency} {oldPrice}{" "}
|
||||
</p>
|
||||
<div>
|
||||
<p>
|
||||
{" "}
|
||||
{Currency} {price}
|
||||
</p>
|
||||
<p>
|
||||
{" "}
|
||||
{randomRate} <FaStar />
|
||||
</p>
|
||||
</div>
|
||||
<span>{discountAmount}%</span>
|
||||
|
||||
<CustomImage src={item?.main_photo} onClick={() => handle_click(item?.base_product_id)} />
|
||||
<h4 className="truncate-text">{languageObject(item?.name)}</h4>
|
||||
<h5 className="desc">{t("Description")}: {result}</h5>
|
||||
<article>
|
||||
<button className="button" onClick={() => handelAddToCart(item)}>
|
||||
<button className="button" onClick={() => handleAddToCart(item)}>
|
||||
<FaCartPlus />
|
||||
{t("add to cart")}
|
||||
</button>
|
||||
<FaHeart
|
||||
onClick={() => handelChangeFavorite(item)}
|
||||
onClick={() => handleChangeFavorite(item)}
|
||||
className={item?.favorite ? "" : "not_favorite"}
|
||||
/>
|
||||
</article>
|
||||
|
|
@ -118,3 +94,4 @@ const ProductCard = ({ item }: { item: Product }) => {
|
|||
};
|
||||
|
||||
export default ProductCard;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,58 +1,47 @@
|
|||
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';
|
||||
|
||||
const ProductSwiper = ({ data, isLoading }: any) => {
|
||||
|
||||
|
||||
const ProductSwiper = () => {
|
||||
const language = localStorage.getItem('language') ;
|
||||
console.log(language);
|
||||
|
||||
const [swiperDirection, setSwiperDirection] = useState(language === "ar" ? "rtl" : "ltr");
|
||||
const swiperRef = useRef<any>(null);
|
||||
|
||||
const { data, isLoading } = useGetBaseProduct({
|
||||
mostOrderd: "asc",
|
||||
});
|
||||
const BaseProducts = (data?.products as Product[]) || ([] as []);
|
||||
console.log(BaseProducts);
|
||||
|
||||
return (
|
||||
<div className='productSwiper'>
|
||||
<Swiper
|
||||
dir={swiperDirection}
|
||||
dir={"ltr"}
|
||||
slidesPerView={5}
|
||||
spaceBetween={50}
|
||||
spaceBetween={20}
|
||||
breakpoints={{
|
||||
0: { slidesPerView: 1 },
|
||||
400: { slidesPerView: 2 },
|
||||
400: { slidesPerView: 1 },
|
||||
600: { slidesPerView: 2 },
|
||||
900: { slidesPerView: 4 },
|
||||
1200: { slidesPerView: 4 },
|
||||
1500: { slidesPerView: 4 },
|
||||
1500: { slidesPerView: 4 },
|
||||
}}
|
||||
modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay]}
|
||||
pagination={{ clickable: true }}
|
||||
className="mySwiper"
|
||||
onSwiper={(swiper:any) => (swiperRef.current = swiper)} // Store swiper instance
|
||||
>
|
||||
{
|
||||
isLoading ? <Spin/> :
|
||||
BaseProducts?.map((item:Product, index:number) => (
|
||||
<SwiperSlide key={index}>
|
||||
<ProductCard key={index} item={item} />
|
||||
</SwiperSlide>
|
||||
))
|
||||
isLoading ? <Spin /> :
|
||||
BaseProducts?.map((item: Product, index: number) => (
|
||||
<SwiperSlide key={index}>
|
||||
<ProductCard key={index} item={item} />
|
||||
</SwiperSlide>
|
||||
))
|
||||
}
|
||||
</Swiper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default ProductSwiper;
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import ProductSwiper from "./ProductSwiper";
|
||||
import { useGetBaseProduct } from "../../api/baseProduct";
|
||||
|
||||
const Products = () => {
|
||||
const {t} = useTranslation();
|
||||
|
|
@ -10,6 +11,11 @@ const Products = () => {
|
|||
navigate(`/categories?type=new_product`);
|
||||
};
|
||||
|
||||
const { data,isLoading } = useGetBaseProduct({
|
||||
lastProducts:"asc"
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<div className="Products">
|
||||
<header>
|
||||
|
|
@ -17,7 +23,7 @@ const Products = () => {
|
|||
<h5 className="pointer" onClick={handelSeeAll}> {t("View all")} </h5>
|
||||
</header>
|
||||
<main className="ProductCards">
|
||||
<ProductSwiper/>
|
||||
<ProductSwiper data={data} isLoading={isLoading} />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
27
src/Components/Products/ProductAdditionalInfo.tsx
Normal file
27
src/Components/Products/ProductAdditionalInfo.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { useTranslation } from 'react-i18next';
|
||||
import { languageObject } from '../../utils/languageObject';
|
||||
|
||||
const ProductAdditionalInfo = (data:any) => {
|
||||
|
||||
const ProductAdditionalInfo = data?.data;
|
||||
const { t } = useTranslation();
|
||||
const infoEntries = ProductAdditionalInfo?.info ? Object.entries(ProductAdditionalInfo.info) : [];
|
||||
|
||||
return (
|
||||
<div className='product_additional_info'>
|
||||
<h4>{t("Additional Info")}</h4>
|
||||
{infoEntries.length > 0 ? (
|
||||
infoEntries.map(([key, value]: [any, any]) => (
|
||||
<span key={key}>
|
||||
<h6>{languageObject(key)}</h6>
|
||||
<h5>{languageObject(value)}</h5>
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<p>{t("Product info is empty")}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductAdditionalInfo;
|
||||
14
src/Components/Products/ProductDescription.tsx
Normal file
14
src/Components/Products/ProductDescription.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const ProductDescription = ({data}:any) => {
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
<div className='product_description'>
|
||||
<h4>{t("Description")}</h4>
|
||||
<p>{data?.description}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductDescription
|
||||
31
src/Components/Products/ProductInfo.tsx
Normal file
31
src/Components/Products/ProductInfo.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { languageObject } from '../../utils/languageObject';
|
||||
|
||||
const ProductInfo = (data:any) => {
|
||||
|
||||
const productInfo = data?.data
|
||||
const {t} = useTranslation();
|
||||
|
||||
return (
|
||||
<div className='Product_info'>
|
||||
<h4>{t("Info")}</h4>
|
||||
<div>
|
||||
<span>
|
||||
<h6>{t("name")}</h6> <h5>{languageObject(productInfo?.name)}</h5>
|
||||
</span>
|
||||
<span>
|
||||
<h6>{t("Category")}</h6> <h5>{languageObject(productInfo?.category?.name)}</h5>
|
||||
</span>
|
||||
{/* <span>
|
||||
<h6>{t("Price")}</h6> <h5>{productInfo?.price}</h5>
|
||||
</span> */}
|
||||
<span>
|
||||
<h6>{t("Description")}</h6> <h5>{languageObject(productInfo?.description)}</h5>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductInfo
|
||||
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;
|
||||
36
src/Components/Products/ProductsTabs.tsx
Normal file
36
src/Components/Products/ProductsTabs.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import React from 'react';
|
||||
import { Tabs } from 'antd';
|
||||
import type { TabsProps } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import ProductDescription from './ProductDescription';
|
||||
import ProductInfo from './ProductInfo';
|
||||
import ProductAdditionalInfo from './ProductAdditionalInfo';
|
||||
|
||||
const ProductTabs = ({data}:any) => {
|
||||
|
||||
const {t} = useTranslation();
|
||||
|
||||
const items: TabsProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: t('product_info'),
|
||||
children: <ProductInfo data={data}/>,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: t('description'),
|
||||
children: <ProductDescription data={data}/>,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: t('additional information'),
|
||||
children: <ProductAdditionalInfo data={data}/>,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Tabs className='product_tabs' defaultActiveKey="1" items={items} />
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductTabs
|
||||
|
|
@ -13,20 +13,20 @@ const ContactTab = ({className=""}: {className?: string }) => {
|
|||
const { t } = useTranslation();
|
||||
const {mutate,isSuccess,isLoading} = useAddSupportMessage()
|
||||
|
||||
const SoicalInfo: { icon: any; text: string }[] = [
|
||||
{
|
||||
icon: <IoMailOutline/>,
|
||||
text: "info@yourdomain.com",
|
||||
},
|
||||
{
|
||||
icon: <FiPhone/> ,
|
||||
text: "+1 (378) 400-1234",
|
||||
},
|
||||
{
|
||||
icon: <IoEarthOutline/>,
|
||||
text: "www.yourdomain.com",
|
||||
},
|
||||
];
|
||||
const SoicalInfo: { icon: any; text: string }[] = [
|
||||
{
|
||||
icon: <IoMailOutline/>,
|
||||
text: "info@yourdomain.com",
|
||||
},
|
||||
{
|
||||
icon: <FiPhone/> ,
|
||||
text: "+1 (378) 400-1234",
|
||||
},
|
||||
{
|
||||
icon: <IoEarthOutline/>,
|
||||
text: "www.yourdomain.com",
|
||||
},
|
||||
];
|
||||
|
||||
const SoicalIcons: { icon: any; }[] = [
|
||||
{
|
||||
|
|
|
|||
17
src/Components/Utils/Search/Empty.tsx
Normal file
17
src/Components/Utils/Search/Empty.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const Empty = () => {
|
||||
const [t] = useTranslation()
|
||||
return (
|
||||
<div className='Empty'>
|
||||
<img src="/icon/notfound_search.png" alt="" />
|
||||
<h1>{t("There are no suitable products")}</h1>
|
||||
<p>
|
||||
{t("Please try using other keywords to find the product name")}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Empty
|
||||
|
|
@ -1,53 +1,70 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { Select, Spin } from 'antd';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { LuSearch } from 'react-icons/lu';
|
||||
import { useGetBaseProduct } from '../../../api/baseProduct';
|
||||
import { Product } from '../../../types/item';
|
||||
import _ from 'lodash';
|
||||
|
||||
const SearchButton: React.FC = () => {
|
||||
interface SearchButtonProps {
|
||||
setOpen: (open: boolean) => void;
|
||||
setNoDataFound: (noData: boolean) => void;
|
||||
}
|
||||
|
||||
const SearchButton: React.FC<SearchButtonProps> = ({ setOpen, setNoDataFound }) => {
|
||||
const navigate = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const [query, setQuery] = useState<string | null>(searchParams.get('search'));
|
||||
|
||||
const { data, isLoading } = useGetBaseProduct({
|
||||
name: query,
|
||||
search: query,
|
||||
});
|
||||
|
||||
const BaseProducts = (data?.products as Product[]) || [];
|
||||
|
||||
useEffect(() => {
|
||||
setNoDataFound(!isLoading && BaseProducts.length < 1);
|
||||
}, [isLoading, BaseProducts, setNoDataFound]);
|
||||
|
||||
const options = BaseProducts.map((product: any) => ({
|
||||
value: product.base_product_id,
|
||||
label: product?.name as string, // Ensuring the label is a string
|
||||
label: product?.name as string,
|
||||
}));
|
||||
|
||||
const debouncedSearchChange = useCallback(
|
||||
_.debounce((value: string) => {
|
||||
setQuery(value);
|
||||
navigate(`${window.location.pathname}?search=${value}`, {
|
||||
replace: true,
|
||||
});
|
||||
}, 500), // Adjust the debounce delay (in milliseconds) as needed
|
||||
[]
|
||||
);
|
||||
|
||||
const handleSearchChange = (value: string) => {
|
||||
setQuery(value);
|
||||
navigate(`${window.location.pathname}?search=${value}`, {
|
||||
replace: true,
|
||||
});
|
||||
debouncedSearchChange(value);
|
||||
};
|
||||
|
||||
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;
|
||||
const filteredData = option?.label.toLowerCase().includes(input.toLowerCase());
|
||||
|
||||
return filteredData;
|
||||
return option?.label.toLowerCase().includes(input.toLowerCase());
|
||||
};
|
||||
|
||||
return (
|
||||
<Select
|
||||
className='InputAutoComplete'
|
||||
suffixIcon={<LuSearch />}
|
||||
placeholder={t('Search Product Name') as string} // Ensuring the placeholder is a string
|
||||
placeholder={t('Search Product Name') as string}
|
||||
allowClear
|
||||
showSearch
|
||||
loading={isLoading}
|
||||
|
|
@ -56,9 +73,7 @@ const SearchButton: React.FC = () => {
|
|||
options={options}
|
||||
optionFilterProp="label"
|
||||
filterOption={filterOption}
|
||||
notFoundContent={
|
||||
isLoading ? <Spin/> : "not found data"
|
||||
}
|
||||
notFoundContent={isLoading ? <Spin /> : null}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
.InputAutoComplete{
|
||||
width: 78%;
|
||||
height: 48px;
|
||||
margin-top: 0px;margin-bottom: 38px;
|
||||
margin-top: 12px;margin-bottom: 38px;
|
||||
.ant-select-arrow{
|
||||
font-size: 32px;
|
||||
color: var(--DarkGray) !important;
|
||||
|
|
@ -95,13 +95,38 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.not_found_section{
|
||||
@include Flex;
|
||||
.Empty{
|
||||
@include Flex; flex-direction: column;
|
||||
p,h1{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
.not_found_section{
|
||||
.Empty{
|
||||
h1 , p{
|
||||
text-align: center;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -13,11 +13,11 @@ import { useTranslation } from "react-i18next";
|
|||
import { Link } from "react-router-dom";
|
||||
|
||||
const Footer = () => {
|
||||
const {t} = useTranslation();
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className="Footer">
|
||||
<div className="footer_first_section">
|
||||
<img src="/App/Logo.svg" alt="" />
|
||||
<img src="/App/Logo.png" alt="" />
|
||||
<p>
|
||||
{t("DM is the one of the world’s largest online shops that providing over 1500 headphones for its costumers from over 80 countries")}
|
||||
</p>
|
||||
|
|
@ -57,10 +57,10 @@ const Footer = () => {
|
|||
<div className="footer_last_section">
|
||||
<h6>{t("Sign up for News and updates")}</h6>
|
||||
<div>
|
||||
<FaFacebook />
|
||||
<FaTwitter />
|
||||
<FaInstagram />
|
||||
<FaYoutube />
|
||||
<Link to={'https://www.facebook.com/'}><FaFacebook /></Link>
|
||||
<Link to={'https://www.twitter.com/'}><FaTwitter /></Link>
|
||||
<Link to={'https://www.instagram.com/'}><FaInstagram /></Link>
|
||||
<Link to={'https://www.youtube.com/'}><FaYoutube /></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const NavBar = () => {
|
|||
|
||||
return (
|
||||
<div className="navbar">
|
||||
<Link to={'/'}><img src="/App/Logo.svg" alt="Logo" /></Link>
|
||||
<Link to={'/'}><img src="/App/Logo.png" alt="Logo" /></Link>
|
||||
<div className="navbar_links">
|
||||
{Links?.map((item: item, index: number) => {
|
||||
if (item?.href === "help") {
|
||||
|
|
@ -69,12 +69,12 @@ const NavBar = () => {
|
|||
<article>
|
||||
<div className='icon_navbar search_icon'><ViewSearch /></div>
|
||||
<div className='cart_container icon_navbar'><ViewCart /></div>
|
||||
<Translate/>
|
||||
<Translate />
|
||||
<Auth />
|
||||
</article>
|
||||
<div className="menu">
|
||||
<GiHamburgerMenu onClick={showDrawer} />
|
||||
<Drawer width={200} onClose={onClose} open={open} extra={<img src="/App/Logo.svg" alt="Logo" width={40}/>}>
|
||||
<Drawer width={200} onClose={onClose} open={open} extra={<img src="/App/Logo.png" alt="Logo" width={40} />}>
|
||||
|
||||
<div className="menu_navbar_links">
|
||||
{Links?.map((item: item, index: number) => {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -7,11 +7,11 @@ const Page = () => {
|
|||
const [t] = useTranslation();
|
||||
return (
|
||||
<div className="About">
|
||||
<HeaderLink text='About'/>
|
||||
<HeaderLink text='about'/>
|
||||
|
||||
|
||||
<div className="About_Laptop">
|
||||
<img src="/About/Laptop.png" alt="" />
|
||||
<img src="/About/about_lap.png" alt="" />
|
||||
</div>
|
||||
|
||||
<div className="Dm_Group">
|
||||
|
|
@ -47,7 +47,7 @@ const Page = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="Hands">
|
||||
<img src="/About/Hands.png" alt="" />
|
||||
<img src="/About/about_hand.png" alt="" />
|
||||
</div>
|
||||
|
||||
<img src="/About/line.svg" alt="" />
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ const LoginForm = ({ setOpen }: any) => {
|
|||
const { mutate, isLoading, isSuccess, data } = useLogin();
|
||||
const { login } = useAuthState();
|
||||
const FCM = localStorage.getItem(FCM_TOKEN_KEY)
|
||||
const random_token = Math.random()
|
||||
|
||||
const handelSubmit = (values: any) => {
|
||||
if (!values.email || !values.password) {
|
||||
|
|
@ -25,7 +26,7 @@ const LoginForm = ({ setOpen }: any) => {
|
|||
|
||||
return;
|
||||
}
|
||||
mutate({ ...values, fcm_token: FCM });
|
||||
mutate({ ...values, fcm_token: random_token });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const Page = () => {
|
|||
const [type, setType] = useState(type_param);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalItems, setTotalItems] = useState(0);
|
||||
console.log(totalItems);
|
||||
const [perPage, setPerPage] = useState(10);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -63,18 +63,20 @@ const Page = () => {
|
|||
};
|
||||
|
||||
const categories = Filter?.filter((item:any)=> item.select !== true)?.map((item:any)=> item?.id)
|
||||
console.log(categories,"categories");
|
||||
|
||||
|
||||
const { data , isLoading } = useGetBaseProduct({
|
||||
type: type,
|
||||
page: currentPage,
|
||||
categories_id:categories
|
||||
category_id:categories
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.meta) {
|
||||
setTotalItems(data.meta?.total);
|
||||
setPerPage(data.meta?.per_page);
|
||||
console.log(data.meta);
|
||||
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
|
|
@ -148,7 +150,7 @@ const Page = () => {
|
|||
<Pagination
|
||||
current={currentPage}
|
||||
total={totalItems}
|
||||
pageSize={10}
|
||||
pageSize={perPage}
|
||||
onChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
import React, { useRef, useState } from 'react'
|
||||
import { FaChevronRight, FaInstagram, FaLinkedinIn, FaTwitter } from "react-icons/fa6";
|
||||
import { Button, Form } from 'react-bootstrap';
|
||||
import React, { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { toast } from 'react-toastify';
|
||||
import { IoMailOutline,IoEarthOutline } from "react-icons/io5";
|
||||
import { FiPhone } from "react-icons/fi";
|
||||
import { FaFacebookF } from "react-icons/fa";
|
||||
import ContactTab from '../../Components/Setting/Tabs/ContactTab';
|
||||
import HeaderLink from '../../Components/Ui/HeaderLink';
|
||||
|
||||
const Contact = () => {
|
||||
const form = useRef<any>(null);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
|
|
@ -35,35 +29,6 @@ const Contact = () => {
|
|||
const [Message , setMessage] = useState('')
|
||||
|
||||
|
||||
const SoicalInfo: { icon: any; text: string }[] = [
|
||||
{
|
||||
icon: <IoMailOutline/>,
|
||||
text: "info@yourdomain.com",
|
||||
},
|
||||
{
|
||||
icon: <FiPhone/> ,
|
||||
text: "+1 (378) 400-1234",
|
||||
},
|
||||
{
|
||||
icon: <IoEarthOutline/>,
|
||||
text: "www.yourdomain.com",
|
||||
},
|
||||
];
|
||||
|
||||
const SoicalIcons: { icon: any; }[] = [
|
||||
{
|
||||
icon: <FaFacebookF/>,
|
||||
},
|
||||
{
|
||||
icon: <FaTwitter /> ,
|
||||
},
|
||||
{
|
||||
icon: <FaLinkedinIn />,
|
||||
},
|
||||
{
|
||||
icon: <FaInstagram />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className='contact_container'>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,20 @@
|
|||
import type { CollapseProps } from "antd";
|
||||
import { Collapse } from "antd";
|
||||
import React from 'react'
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
const CollapseGroup = () => {
|
||||
const {t} = useTranslation();
|
||||
const { t } = useTranslation();
|
||||
const [activeKey, setActiveKey] = useState<string[]>(["1"]);
|
||||
|
||||
const onChange = (key: string | string[]) => {
|
||||
if (typeof key === 'string') {
|
||||
setActiveKey([key]);
|
||||
} else {
|
||||
setActiveKey(key);
|
||||
}
|
||||
};
|
||||
|
||||
const items: CollapseProps["items"] = [
|
||||
{
|
||||
|
|
@ -22,7 +31,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 enthusiastsin 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 enthusiasts in the community")}.
|
||||
</p>
|
||||
),
|
||||
},
|
||||
|
|
@ -49,7 +58,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 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")}.
|
||||
{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")}.
|
||||
</p>
|
||||
),
|
||||
},
|
||||
|
|
@ -57,12 +66,26 @@ const CollapseGroup = () => {
|
|||
|
||||
return (
|
||||
<Collapse
|
||||
className="faqs_collaps"
|
||||
defaultActiveKey={["1"]}
|
||||
expandIconPosition="right"
|
||||
bordered={false}
|
||||
items={items}
|
||||
activeKey={activeKey}
|
||||
onChange={onChange}
|
||||
items={items.map(item => ({
|
||||
...item,
|
||||
label: (
|
||||
<span
|
||||
className={classNames({
|
||||
'label-active': activeKey.includes(item.key as string)
|
||||
})}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
)
|
||||
}))}
|
||||
/>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default CollapseGroup
|
||||
export default CollapseGroup;
|
||||
|
|
|
|||
|
|
@ -9,12 +9,13 @@ import NoiseCancellation from "../../Components/Home/NoiseCancellation";
|
|||
import BatteryLife from "../../Components/Home/BatteryLife";
|
||||
import PerfectSound from "../../Components/Home/PerfectSound";
|
||||
import BestSale from "../../Components/Home/BestSale";
|
||||
import Categories from "../../Components/Home/Categories";
|
||||
|
||||
const Page = () => {
|
||||
return (
|
||||
<div className="home_page">
|
||||
<HeroSection />
|
||||
<HomeSlider />
|
||||
<Categories />
|
||||
{/* <ProductsOnSale/> */}
|
||||
<Products />
|
||||
<PremiumDesign />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IoIosArrowForward } from "react-icons/io";
|
||||
import { Currency } from "../../Layout/app/Const";
|
||||
|
|
@ -12,11 +12,25 @@ import { languageObject } from "../../utils/languageObject";
|
|||
import { jsonObjectToArray } from "../../utils/jsonObjectToArray";
|
||||
import HeaderLink from "../../Components/Ui/HeaderLink";
|
||||
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 [t] = useTranslation();
|
||||
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({
|
||||
show:product_id
|
||||
})
|
||||
|
|
@ -24,17 +38,62 @@ const Page = () => {
|
|||
|
||||
|
||||
const [MainImage, setMainImage] = useState(product?.main_photo);
|
||||
useEffect(() => {
|
||||
setMainImage(product?.main_photo)
|
||||
}, [product?.main_photo])
|
||||
|
||||
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');
|
||||
|
||||
const handelImage = (item: any) => {
|
||||
// setMainImage(item);
|
||||
};
|
||||
console.log(product?.images);
|
||||
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) {
|
||||
|
||||
const info = jsonObjectToArray(product?.info)
|
||||
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 handleChangeImage = (imagePath: string) => {
|
||||
setMainImage(imagePath);
|
||||
};
|
||||
if(isLoading){
|
||||
return <div className="loading_state"> <Spin/> </div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="Product">
|
||||
<header>
|
||||
|
|
@ -42,59 +101,28 @@ const Page = () => {
|
|||
</header>
|
||||
<main>
|
||||
<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="" />
|
||||
<div className="gallery_product">
|
||||
{product?.images?.map((item,index)=>{
|
||||
return (
|
||||
<span key={index} onClick={() => handelImage(item?.path)} >
|
||||
<CustomImage
|
||||
|
||||
src={item?.path}
|
||||
alt=""
|
||||
/>
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
<span>
|
||||
<img
|
||||
onClick={() => handelImage('/Home/p1.png')}
|
||||
// src={}
|
||||
alt=""
|
||||
/>
|
||||
</span>
|
||||
<ProductSlider data={product} onImageClick={handleChangeImage} />
|
||||
</div>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div className="Product_Right">
|
||||
<h1> {languageObject(product?.name)} </h1>
|
||||
<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>
|
||||
<ProductTabs data={product}/>
|
||||
</div>
|
||||
</main>
|
||||
<Similar/>
|
||||
<Similar category_id={product?.category?.id} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
import { useTranslation } from "react-i18next";
|
||||
import { useGetBaseProduct } from "../../api/baseProduct";
|
||||
import ProductSwiper from "../../Components/Home/ProductSwiper";
|
||||
|
||||
const Similar = () => {
|
||||
const { data } = useGetBaseProduct();
|
||||
const Similar = ({category_id}:any) => {
|
||||
const { data,isLoading } = useGetBaseProduct({
|
||||
category_id:[category_id]
|
||||
});
|
||||
const {t} = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="Products">
|
||||
<header>
|
||||
<h1>Similar Products</h1>
|
||||
<h1>{t("Similar Products")}</h1>
|
||||
</header>
|
||||
<main className="ProductCards">
|
||||
<ProductSwiper/>
|
||||
<ProductSwiper data={data} isLoading={isLoading} />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -14,18 +14,16 @@ function ProviderContainer({ children }: Tchildren) {
|
|||
<ConfigProvider
|
||||
theme={{
|
||||
token:{
|
||||
colorPrimary:"red"
|
||||
colorPrimary:"#eb671b"
|
||||
},
|
||||
components: {
|
||||
Pagination: {
|
||||
itemActiveBg: "red",
|
||||
itemActiveBg: "#eb671b",
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* <ToastProvider> */}
|
||||
{children}
|
||||
{/* </ToastProvider> */}
|
||||
</ConfigProvider>
|
||||
</QueryProvider>
|
||||
</ToastProvider>
|
||||
|
|
|
|||
|
|
@ -57,3 +57,6 @@ svg {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
|
|
|
|||
|
|
@ -112,16 +112,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin Scrollbar($color) {
|
||||
@mixin Scrollbar() {
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding: 10rem;
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $color;
|
||||
background-color: var(--primary);
|
||||
border-radius: 3px; /* Adjust border-radius as needed */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
:root {
|
||||
--primary: red;
|
||||
--primary: #eb671b;
|
||||
|
||||
--secondary: rgb(255, 255, 255);
|
||||
--text: black;
|
||||
|
||||
--DarkPrimary: rgb(168, 22, 22);
|
||||
--DarkPrimary: #e2571c;
|
||||
|
||||
--bg: white;
|
||||
--bg2: #dcdcdc;
|
||||
--white: white;
|
||||
--whiteOpacity: #f6f6f6;
|
||||
--shadow: rgba(0, 0, 0, 0.15);
|
||||
--gray: rgb(207, 210, 214);
|
||||
--whiteGray: #717171;
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@
|
|||
justify-content: center;
|
||||
gap: 15px;
|
||||
padding-inline: 2vw;
|
||||
font-size: 1vw;
|
||||
font-weight: bold;
|
||||
font-size: 1.2vw;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
border-radius: var(--border-radius);
|
||||
width: fit-content;
|
||||
white-space: nowrap;
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
background: var(--white);
|
||||
color: var(--primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -16,12 +16,12 @@
|
|||
&: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;
|
||||
|
|
|
|||
|
|
@ -68,7 +68,9 @@ a:hover{
|
|||
.pointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mode_image{
|
||||
margin-inline: 5px;
|
||||
}
|
||||
@media screen and (max-width:600px) {
|
||||
.header_link{
|
||||
font-size: 12px;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
.navbar{
|
||||
position: absolute;
|
||||
border: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -11,38 +10,28 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--secondary);
|
||||
color: var(--text);
|
||||
padding-inline: 5.5vw;
|
||||
height: var(--navbar-height);
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
border-bottom: .8px solid var(--primary);
|
||||
|
||||
|
||||
>img{
|
||||
width: 4.7vw;
|
||||
img{
|
||||
width: 45px;
|
||||
}
|
||||
.navbar_links{
|
||||
display: flex;
|
||||
gap: 3vw;
|
||||
|
||||
.navbar_link{
|
||||
color: var(--text);
|
||||
opacity: .5;
|
||||
// font-weight: bold;
|
||||
|
||||
// opacity: .5;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.active{
|
||||
|
||||
opacity: 1;
|
||||
// border-bottom: .1vw solid var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
|
@ -61,7 +50,6 @@
|
|||
align-items: center;
|
||||
>.icon_navbar{
|
||||
padding: 10px;
|
||||
// background: var(--primary);
|
||||
@include Flex;
|
||||
border-radius: 50%;
|
||||
width: 30px;
|
||||
|
|
@ -91,6 +79,7 @@
|
|||
}
|
||||
.menu{
|
||||
display: inline;
|
||||
margin-inline: 10px;
|
||||
svg{
|
||||
color: var(--text);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,6 +68,9 @@
|
|||
color: var(--primary);
|
||||
font-size: 4vw;
|
||||
}
|
||||
h6{
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
p {
|
||||
color: var(--secondary);
|
||||
font-size: 2vw;
|
||||
|
|
|
|||
|
|
@ -46,9 +46,9 @@
|
|||
@include Flex;
|
||||
}
|
||||
.ViewCart_Button{
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
display: flex;justify-content: space-between;
|
||||
width: 100%;
|
||||
display: flex;justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
p{
|
||||
text-align: center;
|
||||
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{
|
||||
.cart_first_section{
|
||||
display: flex;justify-content: space-between;
|
||||
|
|
@ -95,8 +98,27 @@
|
|||
p{
|
||||
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: 10% !important;
|
||||
// gap: 20px;
|
||||
img{
|
||||
width: 40%;
|
||||
}
|
||||
p{
|
||||
font-size: max(1.5vw,15px);
|
||||
}
|
||||
.cart_checkout_button{
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -18,18 +18,15 @@
|
|||
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: bold;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
h6 {
|
||||
|
|
@ -57,7 +54,7 @@
|
|||
}
|
||||
|
||||
.ant-collapse-item{
|
||||
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -109,7 +106,6 @@
|
|||
}
|
||||
> main {
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 40px;
|
||||
}
|
||||
|
|
@ -129,7 +125,19 @@
|
|||
.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);
|
||||
}
|
||||
.swiper{
|
||||
direction: ltr !important;
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
.show_on_responsive {
|
||||
display: inline;
|
||||
|
|
@ -161,7 +169,7 @@
|
|||
height: 40px;
|
||||
h4 {
|
||||
font-size: 1.7vw;
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
h6 {
|
||||
|
|
@ -267,3 +275,14 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
.category_page{
|
||||
@include Flex; flex-direction: column;
|
||||
h1{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.CategoriesSlider{
|
||||
margin-block: 50px !important;
|
||||
}
|
||||
|
|
@ -1,122 +1,83 @@
|
|||
.faqs_container{
|
||||
display: flex;flex-direction: column;
|
||||
.faqs_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90vw;
|
||||
margin-inline: auto;
|
||||
|
||||
.faqs_image_section{
|
||||
.faqs_image_section {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
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: 27px;
|
||||
color: #0C0C0C;
|
||||
margin-bottom: 20px;
|
||||
.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;
|
||||
}
|
||||
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{
|
||||
font-size: 1.8vw;
|
||||
.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-header-text {
|
||||
font-size: max(20px,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(--primary);
|
||||
margin-bottom: 0;
|
||||
.ant-collapse .ant-collapse-content {
|
||||
p {
|
||||
font-size: 1.4vw;
|
||||
color: var(--text);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.label-active {
|
||||
color: var(--primary);
|
||||
transition: ease-in-out .4s;
|
||||
}
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: url("../../../public/Home/HeroShape.svg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
gap: 20px;
|
||||
|
||||
h1 {
|
||||
font-size: 4vw;
|
||||
font-size: 4.4vw;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
}
|
||||
|
||||
.CategoriesSlider {
|
||||
width: var(--padding-page);
|
||||
width: calc(var(--padding-page));
|
||||
margin-inline: auto;
|
||||
margin-block: var(--margin-block);
|
||||
|
||||
|
|
@ -64,17 +64,35 @@
|
|||
|
||||
.CategoriesSlider_image {
|
||||
padding: 10px 30px;
|
||||
|
||||
width: 160px;
|
||||
min-height: 150px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: column;
|
||||
p{
|
||||
font-size: 10px !important;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0 !important;
|
||||
text-align: center !important;
|
||||
padding-top: 3px;
|
||||
color: var(--primary ) !important;
|
||||
}
|
||||
.truncate-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
img {
|
||||
min-width: 140px;
|
||||
max-width: 140px;
|
||||
height: 150px;
|
||||
border-radius: 10px;
|
||||
width: 150px;
|
||||
height: 160px;
|
||||
cursor: pointer;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover !important;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -256,26 +274,25 @@
|
|||
|
||||
.BatteryLife,
|
||||
.PerfectSound {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> div {
|
||||
width: 40%;
|
||||
img{
|
||||
width: 54%;
|
||||
}
|
||||
div {
|
||||
width: 46%;
|
||||
|
||||
h1 {
|
||||
font-size: 5vw;
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1vw;
|
||||
font-size: 1.24vw;
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
}
|
||||
}
|
||||
|
||||
.PerfectSound {
|
||||
|
|
@ -289,6 +306,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.BatteryLife{
|
||||
width: 84%;
|
||||
margin-inline: auto;
|
||||
p{
|
||||
font-size: 1.38vw !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
|
|
@ -335,15 +359,15 @@
|
|||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
display: none;
|
||||
gap: 10px;
|
||||
// display: none;
|
||||
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 30px;
|
||||
font-size: 20px;
|
||||
padding-inline: 10%;
|
||||
border-radius: 2vw;
|
||||
}
|
||||
|
|
@ -352,7 +376,7 @@
|
|||
|
||||
> span {
|
||||
img {
|
||||
width: 50vw;
|
||||
width: 50VW;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -365,7 +389,9 @@
|
|||
[role="button"] {
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
.swiper-slide{
|
||||
min-width: 150px;
|
||||
}
|
||||
.CategoriesSlider_image {
|
||||
padding: 4% 10%;
|
||||
border: 1px solid #d9d9d9;
|
||||
|
|
@ -373,10 +399,10 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
img {
|
||||
min-width: 100px;
|
||||
max-width: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
}
|
||||
|
|
@ -497,7 +523,9 @@
|
|||
max-width: 100vw;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
> div {
|
||||
width: 80%;
|
||||
|
||||
|
|
@ -537,60 +565,41 @@
|
|||
|
||||
.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;
|
||||
}
|
||||
|
||||
&::after{
|
||||
scale: -1;
|
||||
right: auto;
|
||||
left: 0 !important;
|
||||
}
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 45%;
|
||||
gap: 20px;
|
||||
width: 60%;
|
||||
|
||||
h1 {
|
||||
font-size: 4vw;
|
||||
font-size: 6vw;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button {
|
||||
padding-inline: 10%;
|
||||
border-radius: 2vw;
|
||||
}
|
||||
gap: 30px
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
img {
|
||||
width: 25vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.swiper-button-prev:after, .swiper-button-next:after{
|
||||
background: var(--white);
|
||||
padding: 4px;
|
||||
border-radius: 10px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.swiper-button-disabled{
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -21,63 +21,138 @@
|
|||
.Product_left {
|
||||
display: flex;
|
||||
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;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
> img {
|
||||
width: 50%;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: contain;
|
||||
margin-inline: auto;
|
||||
}
|
||||
.gallery_product {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
overflow-x: scroll;
|
||||
// max-width: 40vw;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
span {
|
||||
padding: 10px 15px;
|
||||
border: 2px solid rgba(128, 128, 128, 0.1);
|
||||
width: 100%;
|
||||
> img {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Product_Right {
|
||||
.Product_info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: 5px;
|
||||
align-items: flex-start;
|
||||
padding-top: 2%;
|
||||
h1 {
|
||||
font-size: 4vw;
|
||||
}
|
||||
> div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: 10px;
|
||||
> span {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
padding: 10px 15px 0px 15px;
|
||||
&:nth-child(odd){
|
||||
background: var(--whiteOpacity) !important;
|
||||
}
|
||||
h6 {
|
||||
color: gray;
|
||||
color: var(--whiteGray);
|
||||
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: cover;
|
||||
aspect-ratio: 1;
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -89,23 +164,25 @@
|
|||
> header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
h1{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ProductCards {
|
||||
max-width: 90vw;
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
// gap: 40px;
|
||||
// overflow-x: scroll;
|
||||
|
||||
// &::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:700px) {
|
||||
@media screen and (max-width:850px) {
|
||||
.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 {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
|
|
@ -114,40 +191,27 @@
|
|||
margin-inline: auto;
|
||||
}
|
||||
> main {
|
||||
padding-inline: 10%;
|
||||
padding-inline: 4%;
|
||||
margin-top: 30px;
|
||||
display: flex;flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 10%;
|
||||
}
|
||||
.Product_left {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
display: flex;justify-content: center;align-items: center;
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
> span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
> img {
|
||||
width: 60%;
|
||||
width: 50%;
|
||||
margin-inline: auto;
|
||||
}
|
||||
.gallery_product {
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -181,3 +245,35 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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 */
|
||||
}
|
||||
.truncate-text {
|
||||
width: 90%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%; /* Adjust as needed */
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.desc{
|
||||
font-size: 14px !important;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
width: 100%;
|
||||
.ant-tabs .ant-tabs-tab{
|
||||
justify-content: start;align-items: start;
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
width: 100% !important;
|
||||
color: #717171;
|
||||
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
justify-content: space-around !important;
|
||||
margin-bottom: 50px;
|
||||
.left{
|
||||
width: 36%;height: 500px !important;
|
||||
width: 36%;height: 400px !important;
|
||||
.social_info{
|
||||
.Single_info{
|
||||
span{
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
}
|
||||
.personl_data_form_button{
|
||||
width: 20% !important;
|
||||
padding: 12px 0 !important;
|
||||
padding: 10px 0 !important;
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
font-size: 20px;
|
||||
|
|
@ -101,11 +101,11 @@
|
|||
}
|
||||
}
|
||||
.personl_data_form_button{
|
||||
width: 20% !important;
|
||||
padding: 12px 0 !important;
|
||||
width: 16% !important;
|
||||
padding: 5px 0 !important;
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
&:hover{
|
||||
background: var(--DarkPrimary);
|
||||
|
|
@ -241,12 +241,6 @@
|
|||
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) {
|
||||
|
|
|
|||
|
|
@ -4,21 +4,22 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 7px;
|
||||
min-width: 400px;
|
||||
.ant-card-body {
|
||||
@include Flex;
|
||||
display: flex;justify-content: space-between;align-items: center;
|
||||
padding: 10px 5px;
|
||||
width: 100%;
|
||||
box-shadow: 10px 10px 20px 15px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 7px;
|
||||
}
|
||||
.Card_Img {
|
||||
width: 40%;
|
||||
width: 20%;
|
||||
img {
|
||||
width: 40%;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
.Card_Info {
|
||||
width: 50%;
|
||||
width: 70%;
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
text-wrap: nowrap;
|
||||
|
|
@ -72,7 +73,7 @@
|
|||
@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);
|
||||
|
|
@ -136,3 +137,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:450px) {
|
||||
.CardItem{
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
|
@ -41,6 +41,8 @@
|
|||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
margin-top: 30px;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
div {
|
||||
|
|
@ -95,6 +97,13 @@
|
|||
border: 1px solid var(--primary);
|
||||
font-size: 14px;
|
||||
padding:6px 6px;
|
||||
&:hover{
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
svg{
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
svg {
|
||||
color: var(--primary);
|
||||
|
|
|
|||
|
|
@ -18,5 +18,5 @@
|
|||
|
||||
.swiper-slide{
|
||||
min-width: 220px;
|
||||
margin-inline: auto;
|
||||
// margin-inline: auto;
|
||||
}
|
||||
|
|
@ -15,3 +15,14 @@
|
|||
}.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{
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -7,3 +7,13 @@ const KEY = "product";
|
|||
|
||||
export const useGetProduct = (params?: any) =>
|
||||
useGetQuery(KEY, API.GET, params);
|
||||
|
||||
|
||||
|
||||
const API2 = {
|
||||
GETSimilar: `product`,
|
||||
};
|
||||
const KEY2 = "product_similar";
|
||||
|
||||
export const useGetProductSimilar = (params?: any) =>
|
||||
useGetQuery(KEY2, API2.GETSimilar, params);
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ function useGetQuery(
|
|||
return response?.data ?? [];
|
||||
},
|
||||
options,
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,13 @@ import React from "react";
|
|||
import { QueryClient, QueryClientProvider } from "react-query";
|
||||
|
||||
function QueryProvider({ children }: any) {
|
||||
const queryClient = new QueryClient();
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchOnWindowFocus:false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ const useAuthState = create<AuthStore>((set) => {
|
|||
Guest: storedGuest,
|
||||
setGuest: (Guest: string) => {
|
||||
localStorage.setItem(LocalStorageEnum.GUEST_KEY, Guest);
|
||||
|
||||
set(() => ({
|
||||
Guest: Guest,
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -380,13 +380,26 @@
|
|||
"Verify": "تحقق",
|
||||
"Create Your Account": "أنشئ حسابك",
|
||||
"Log In To DM": "تسجيل الدخول إلى DM",
|
||||
"Login / Sign Up": "تسجيل الدخول / الاشتراك",
|
||||
"Verify Your Account": "تحقق من حسابك",
|
||||
"E-mail": "البريد الإلكتروني",
|
||||
"Full Name": "الاسم الكامل",
|
||||
"verify code": "تحقق من الرمز",
|
||||
"verify": "تحقق",
|
||||
"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، التي تعمل منذ عقدين من الزمن. نحن نشطون في دولة الإمارات العربية المتحدة في مجال أجهزة الكمبيوتر المحمولة، وقطع الكمبيوتر، وذاكرة الوصول العشوائي، والأقراص الصلبة، وما إلى ذلك. ونعمل حاليًا مع أوروبا وأفريقيا والشرق الأوسط. نقدم لك أفضل الخدمات في أقصر وقت وبأقل تكلفة. اعلى جودة",
|
||||
"What do you like":"ماذا تريد"
|
||||
|
||||
}
|
||||
|
|
@ -367,10 +367,23 @@
|
|||
"Create Your Account": "创建您的账户",
|
||||
"Log In To DM": "登录到 DM",
|
||||
"Verify Your Account": "验证您的账户",
|
||||
"Login / Sign Up": "登录 / 注册",
|
||||
"E-mail": "电子邮件",
|
||||
"Full Name": "全名",
|
||||
"verify code": "验证代码",
|
||||
"verify": "验证",
|
||||
"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":"产品信息为空",
|
||||
"What do you like":"你喜欢什么"
|
||||
}
|
||||
|
|
@ -371,8 +371,7 @@
|
|||
"Security settings":"Security settings",
|
||||
"See your favorites list here":"See your favorites list here",
|
||||
"Change Password":"Change Password",
|
||||
"Quite Comfort 35 wireless headphones II":"Quite Comfort 35 wireless headphones II",
|
||||
|
||||
"Quite Comfort 35 wireless headphones II":"QuiteComfort 35 wireless headphones II",
|
||||
|
||||
"Verify":"Verify",
|
||||
"Create Your Account":"Create Your Account",
|
||||
|
|
@ -384,7 +383,18 @@
|
|||
"verify":"Verify",
|
||||
"Login / Sign Up":"Login / Sign Up",
|
||||
"sub_categories": "sub categories",
|
||||
"Clear_All": "Clear All"
|
||||
"Clear_All": "Clear All",
|
||||
"Track, return or purchase items":"Track, return or purchase items",
|
||||
"Order History":"Order History",
|
||||
"Please try using other keywords to find the product name":"Please try using other keywords to find the product name",
|
||||
"There are no suitable products":"There are no suitable products",
|
||||
|
||||
"product_info":"Product info",
|
||||
"additional information":"Additional information",
|
||||
"description":"Description",
|
||||
"Info":"Info",
|
||||
"Additional Info":"Additional Info",
|
||||
"Product info is empty":"Product info is empty"
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
export interface Translation {
|
||||
split(arg0: string): unknown;
|
||||
en: string;
|
||||
ar: string;
|
||||
de: string;
|
||||
|
|
@ -67,6 +68,7 @@ export interface Product {
|
|||
total_quantity_ordered: number;
|
||||
attributes: ProductAttribute[];
|
||||
other_attributes: any | null; // Adjust this type based on the actual structure if available
|
||||
quantity:number
|
||||
}
|
||||
|
||||
export interface MainData {
|
||||
|
|
|
|||
|
|
@ -6,26 +6,23 @@ interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
|
|||
}
|
||||
|
||||
const CustomImage: React.FC<ImageProps> = ({ src, ...props }) => {
|
||||
const addBaseUrlToSrc = (src: string) => {
|
||||
return ImageBaseURL + src?.replace("public", "/storage");
|
||||
};
|
||||
|
||||
const [imgSrc, setImgSrc] = useState(addBaseUrlToSrc(src));
|
||||
const [imgSrc, setImgSrc] = useState<any>(src);
|
||||
|
||||
useEffect(() => {
|
||||
setImgSrc(addBaseUrlToSrc(src));
|
||||
}, [src]);
|
||||
setImgSrc(src);
|
||||
}, [src,props]);
|
||||
|
||||
|
||||
|
||||
const newImage = ImageBaseURL + (imgSrc?.replace("public", "/storage"))
|
||||
|
||||
const handleError = () => {
|
||||
setImgSrc("/Home/p1.png");
|
||||
};
|
||||
|
||||
return (
|
||||
<img
|
||||
src={imgSrc}
|
||||
onError={handleError}
|
||||
src={newImage}
|
||||
{...props}
|
||||
alt={props.alt || "image"}
|
||||
alt="there is no image"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -77,7 +77,6 @@ export const requestPermissionWithLogout = async (logout: () => void): Promise<v
|
|||
localStorage.setItem(KEY_NOTIFICATION_PERMISSION, 'yes');
|
||||
localStorage.setItem(FCM_TOKEN_KEY, currentToken || '');
|
||||
toast.success("Notifications enabled successfully.");
|
||||
console.log('FCM Token:', currentToken);
|
||||
logout();
|
||||
} else {
|
||||
localStorage.setItem(KEY_NOTIFICATION_PERMISSION, 'no');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user