Merge branch 'main' of https://github.com/dev-triangle/Wanderlust-fro…

…ntend

src/pages/Dashboard/Dashboard.css

@@ -178,16 +178,6 @@ background: linear-gradient(45deg, rgba(16,115,149,0.8608485630580357) 95%, rgba
 @media only screen and (max-width: 1300px) {
 
 }
-@media (min-device-width: 20px) and (max-device-width: 500px){
-   .profile__main{
-    flex-direction: column;
-    gap: 2rem;
-   }
-}
-@media only screen and (max-width: 1200px) {
-
-}
-
 @media only screen and (max-width: 1100px) {
 
 }

src/pages/Dashboard/Dashboard.js

@@ -8,7 +8,7 @@ import baseUrl from '../../utils/Urls'
 import { useNavigate } from 'react-router-dom'
 import Lottie from 'react-lottie'
 import train_anim from '../../animations/88977-metro-rail.json'
-import { AiFillEdit } from 'react-icons/ai'
+import { FaEdit } from 'react-icons/fa'
 import Editprofileform from '../../components/Editprofileform/Editprofileform'
 import {Modal,Button} from 'react-bootstrap'
 const Dashboard = () => {
@@ -72,7 +72,7 @@ const Dashboard = () => {
           <div className="each_detail_profile"><div className='profile_name'>Phone no: </div><p className='profile_name_content'>{phno}</p></div>
           <div className="each_detail_profile"><div className='profile_name'>Username: </div><p className='profile_name_content'>{curr_username}</p></div>
           <div className="each_detail_profile"><div className='profile_name'>Email: </div><p className='profile_name_content'>{currEmail}</p></div>
-          <AiFillEdit  onClick={()=>{ setShow(true) }}/>
+          <FaEdit size={30} onClick={()=>{ setShow(true) }}/>
         </div>
         <Lottie options={parachuteEffect} style={{width:'20%' ,height:'30%'}}/>
         </div>

src/pages/Teams/TeamCard.js

@@ -1,20 +1,17 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import './Teams.css'
-
+import Aos from 'aos'
 const TeamCard = ({id, name, image}) => {
-    if(id%2===0){
-        return(
-            <div className="team_card team_up">
-            <img src={image} className='team_person_image' alt="" />
-            <p className='team_person_name'> {name} </p>     
-             </div>
-        )
-    }
+  useEffect(()=>{
+    Aos.init({duration:1100})
+  },[])
   return (
-    <div  className="team_card">
-            <img src={image} className='team_person_image' alt="" />
-            <p className='team_person_name'> {name} </p>
+    <div class="card 1" data-aos="zoom-in">
+    <div class="card_image"> <img src={image} alt="team_member"/> </div>
+    <div class="card_title title-white">
+      <p>{name}</p>
     </div>
+  </div>
   )
 }
 

src/pages/Teams/Teams.css

@@ -20,4 +20,62 @@
     border-radius: 3rem;
     width: 10rem;
     height: 10rem;
-}
+}
+
+
+
+/* new */
+
+.card {
+    margin: 30px auto;
+    width: 300px;
+    height: 300px;
+    border-radius: 40px;
+  box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
+    cursor: pointer;
+    transition: 0.4s;
+  }
+
+  .card .card_image {
+    width: inherit;
+    height: inherit;
+    border-radius: 40px;
+  }
+
+  .card .card_image img {
+    width: inherit;
+    height: inherit;
+    border-radius: 40px;
+    object-fit: cover;
+  }
+
+  .card .card_title {
+    text-align: center;
+    /* border-radius: 0px 0px 40px 40px; */
+    border-radius: 10px ;
+    font-family: sans-serif;
+    font-weight: bold;
+    font-size: 30px;
+    margin-top: -80px;
+    height: 40px;
+    opacity: 100px;
+
+  }
+
+  .card:hover {
+    transform: scale(0.9, 0.9);
+    box-shadow: 5px 5px 30px 15px rgba(0,0,0,0.25), 
+      -5px -5px 30px 15px rgba(0,0,0,0.22);
+  }
+
+  .title-white {
+    color: #ffff;
+    display: flex;
+    background: linear-gradient(180deg,rgba(20, 131, 222, 0.97),#21b8cb),#efffec;
+    padding: 2px 3px 2px 3px;
+    width: fit-content;
+    justify-content: center;
+    height: fit-content;
+    font-family: 'Robotto';
+  }
+