Merge pull request #1 from yll0rd/leo-v2

package.json

@@ -13,6 +13,8 @@
     "@hookform/resolvers": "^3.3.2",
     "@reduxjs/toolkit": "^2.0.1",
     "@types/react-router-dom": "^5.3.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.3",
@@ -22,6 +24,7 @@
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "swiper": "^11.0.7",
+    "tailwind-merge": "^2.5.2",
     "yup": "^1.3.3"
   },
   "devDependencies": {

src/assets/images/avatars/avatars.ts

@@ -12,6 +12,7 @@ import avatar11 from '/images/home/avatars/Rectangle 75.svg';
 import avatar12 from '/images/home/avatars/Rectangle 76.svg';
 import avatar13 from '/images/home/avatars/Rectangle 77.svg';
 import avatar14 from '/images/home/avatars/Rectangle 78.svg';
+import avatarList from '/images/home/avatars/avatarlist.svg';
 
 
 export {
@@ -28,6 +29,7 @@ export {
     avatar11,
     avatar12,
     avatar13,
-    avatar14
+    avatar14,
+    avatarList
 }
 

src/assets/images/home/home.ts

@@ -1,21 +1,26 @@
 import arrow from '/images/home/arrow.svg';
 import bird from '/images/home/bird.svg';
+import blueDjango from '/images/home/bluedjango.svg';
+import blueMap from '/images/home/bluemap.svg';
 import channel from '/images/home/channel.png';
 import connect from '/images/home/connect.svg';
 import curlArrow from '/images/home/curl-arrow.svg';
+import curlyGrid from '/images/home/curlygrid.png';
 import getStarted from '/images/home/get-started.svg';
 import greenBackBg from '/images/home/greenbackbg.svg';
 import greenBg from '/images/home/greenbg.svg';
 import Group from '/images/home/Group 131.svg';
+import HeaderImage from '/images/home/Group 130.svg';
 import Logo from '/images/home/logo-girls.svg';
 import mankaa from '/images/home/mankaa.svg';
 import map from '/images/home/map.svg';
 import projectBg from '/images/home/projectbg.svg';
 import spaceShip from '/images/home/space-ship.svg';
+import teamGoals from '/images/home/team-goals.svg';
 import whyJoin from '/images/home/whyjoin.svg';
 import youtubeThumbnail from '/images/home/youtube-thumbnail.svg';
 
 
 
 
-export { arrow, bird,connect, curlArrow, getStarted, greenBackBg, greenBg, Group, Logo, mankaa, map, projectBg, spaceShip, whyJoin, youtubeThumbnail, channel };
+export { arrow, bird, blueDjango, blueMap, connect, curlArrow, curlyGrid, getStarted, greenBackBg, greenBg, Group, HeaderImage, Logo, mankaa, map, projectBg, spaceShip, teamGoals, whyJoin, youtubeThumbnail, channel };

src/components/AvatarUsers.tsx

@@ -1,68 +1,89 @@
 import { Avatars } from '../assets';
 
-const AvatarUsers = () => {
+const AvatarUsers = (
+  // { amount }: { amount?: number }
+) => {
   return (
     <div className=''>
-      <div className='-z-10 flex items-center relative'>
-        <img
-          src={Avatars.avatar1}
-          className='z-[100] rounded-full w-9 h-9 bg-purple-500 border border-primary2'
-          alt='avatar'
-        />
-        <img
-          src={Avatars.avatar10}
-          className='z-[200] absolute left-6 rounded-full w-9 h-9 border border-primary2'
-          alt='avatar'
-        />
-        <img
-          src={Avatars.avatar12}
-          className='z-[300] absolute left-12  rounded-full w-9 h-9 border border-primary2'
-          alt='avatar'
-        />
-        <img
-          src={Avatars.avatar2}
-          className='z-[400] absolute left-16 rounded-full w-9 h-9 border border-primary2'
-          alt='avatar'
-        />
-        <img
-          src={Avatars.avatar3}
-          className='z-[500] absolute left-20  rounded-full w-9 h-9 border border-primary2'
-          alt='avatar'
-        />
-        <img
-          src={Avatars.avatar4}
-          className='z-[600] absolute left-24  rounded-full w-9 h-9 border border-primary2'
-          alt='avatar'
-        />
-        <img
-          src={Avatars.avatar5}
-          className='z-[700] absolute left-28  rounded-full w-9 h-9 border border-primary2'
-          alt='avatar'
-        />
-        <img
-          src={Avatars.avatar6}
-          className='z-[800] absolute left-32  rounded-full w-9 h-9 border border-primary2'
-          alt='avatar'
-        />
-        <img
-          src={Avatars.avatar7}
-          className='z-[900] absolute left-36  rounded-full w-9 h-9 border border-primary2'
-          alt='avatar'
-        />
-        <img
-          src={Avatars.avatar8}
-          className='z-[1000] absolute left-40  rounded-full w-9 h-9 border border-primary2'
-          alt='avatar'
-        />
-        <img
-          src={Avatars.avatar9}
-          className='z-[1100] absolute left-44  rounded-full w-9 h-9 border border-primary2'
-          alt='avatar'
-        />
+      <img src={Avatars.avatarList} alt='avatars' className=''/>
+      {/* <div className='-z-10 flex items-center relative'>
+        {amount ? (
+          <>
+            {Array.from({ length: amount }, (_, index) => (
+                <img
+                  key={index}
+                  src="https://avatar.iran.liara.run/public"
+                  className={`z-[${(index+1)*100}] rounded-full w-9 h-9 bg-purple-500 border border-primary2 ${index === 0 ? "" : `-ml-5`}`}
+                  alt='avatar'
+                  />
+                
+              ))}
+            
+          </>
+        ) : (
+          <>
+            <img
+              src={Avatars.avatar1}
+              className='z-[100] rounded-full w-9 h-9 bg-purple-500 border border-primary2'
+              alt='avatar'
+            />
+            <img
+              src={Avatars.avatar10}
+              className='z-[200] absolute left-6 rounded-full w-9 h-9 border border-primary2'
+              alt='avatar'
+            />
+            <img
+              src={Avatars.avatar12}
+              className='z-[300] absolute left-12  rounded-full w-9 h-9 border border-primary2'
+              alt='avatar'
+            />
+            <img
+              src={Avatars.avatar2}
+              className='z-[400] absolute left-16 rounded-full w-9 h-9 border border-primary2'
+              alt='avatar'
+            />
+            <img
+              src={Avatars.avatar3}
+              className='z-[500] absolute left-20  rounded-full w-9 h-9 border border-primary2'
+              alt='avatar'
+            />
+            <img
+              src={Avatars.avatar4}
+              className='z-[600] absolute left-24  rounded-full w-9 h-9 border border-primary2'
+              alt='avatar'
+            />
+            <img
+              src={Avatars.avatar5}
+              className='z-[700] absolute left-28  rounded-full w-9 h-9 border border-primary2'
+              alt='avatar'
+            />
+            <img
+              src={Avatars.avatar6}
+              className='z-[800] absolute left-32  rounded-full w-9 h-9 border border-primary2'
+              alt='avatar'
+            />
+            <img
+              src={Avatars.avatar7}
+              className='z-[900] absolute left-36  rounded-full w-9 h-9 border border-primary2'
+              alt='avatar'
+            />
+            <img
+              src={Avatars.avatar8}
+              className='z-[1000] absolute left-40  rounded-full w-9 h-9 border border-primary2'
+              alt='avatar'
+            />
+            <img
+              src={Avatars.avatar9}
+              className='z-[1100] absolute left-44  rounded-full w-9 h-9 border border-primary2'
+              alt='avatar'
+            />
+          </>
+        ) }
+        
         <div className='z-[1200] absolute left-48 w-9 h-9 text-text-color text-sm font-semibold rounded-full bg-secondary/60 flex justify-center items-center'>
           +10K
         </div>
-      </div>
+      </div> */}
     </div>
   );
 };