landing page basic styling and info, missing tommys info fully

oslabs-beta · Jul 27, 2024 · d5b4d35 · d5b4d35
1 parent 48ea841
commit d5b4d35
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/flake-guard-app/src/client/components/LandingPage/MeetTheTeam.tsx b/flake-guard-app/src/client/components/LandingPage/MeetTheTeam.tsx
@@ -6,54 +6,68 @@ import ashley from '../../assets/ashley.png';
 import paloma from '../../assets/paloma.png';
 import will from '../../assets/will.png';
 import brendan from '../../assets/brendan.png';
+import linkedInLogo from '../../assets/linkedinlogo.png'; 
+//NEEDING TOMMY INFO -> LINKEDIN AND IMAGE
+//STRETCH FEATURES -> WHEN CLICKING OUR TEAM -> GET DIRECTED TO THIS SPOT ON THE PAGE]
+
 
 const TeamMember = () => {
     const name= ["Ashley", "Paloma", "Tommy", "Brendan", "Will"];
     const role="Full Stack Developer"
     return (
         <>
-      <div className="team-member">
+      <div className="team-member" id="avatars">
         <img src={ashley} alt={name[0]} className="team-member-image" />
         <h2>{name[0]}</h2>
         <p>{role}</p>
         <div className="social-links">
-            <p>https://www.linkedin.com/in/ashley-hannigan-88-/</p>
+            <a href="https://www.linkedin.com/in/ashley-hannigan-88-/" target="_blank" rel="noopener noreferrer">
+                <img src={linkedInLogo} alt="LinkedIn" id="linkedinlogo"/>
+            </a> 
           {/* Add social links here */}
         </div>
       </div>
-        <div className="team-member">
+        <div className="team-member" id="avatars">
         <img src={paloma} alt={name[1]} className="team-member-image" />
         <h2>{name[1]}</h2>
         <p>{role}</p>
         <div className="social-links">
-            <p>https://www.linkedin.com/in/palomareynolds/</p>
+            <a href="https://www.linkedin.com/in/palomareynolds/" target="_blank" rel="noopener noreferrer">
+                <img src={linkedInLogo} alt="LinkedIn" id="linkedinlogo"/>
+            </a> 
           {/* Add social links here */}
         </div>
       </div>
-        <div className="team-member">
+        <div className="team-member" id="avatars">
         <img src={ashley} alt={name[2]} className="team-member-image" />
         <h2>{name[2]}</h2>
         <p>{role}</p>
         <div className="social-links">
-            <p>https://www.linkedin.com/in/ashley-hannigan-88-/</p>
+            <a href="https://www.linkedin.com/in/palomareynolds/" target="_blank" rel="noopener noreferrer">
+                <img src={linkedInLogo} alt="LinkedIn" id="linkedinlogo"/>
+            </a> 
           {/* Add social links here */}
         </div>
       </div>
-      <div className="team-member">
+      <div className="team-member" id="avatars">
         <img src={brendan} alt={name[3]} className="team-member-image" />
         <h2>{name[3]}</h2>
         <p>{role}</p>
         <div className="social-links">
-            <p>https://www.linkedin.com/in/ashley-hannigan-88-/</p>
+            <a href="https://www.linkedin.com/in/brendanxiong/" target="_blank" rel="noopener noreferrer">
+                <img src={linkedInLogo} alt="LinkedIn" id="linkedinlogo"/>
+            </a> 
           {/* Add social links here */}
         </div>
       </div>
-      <div className="team-member">
+      <div className="team-member" id="avatars">
         <img src={will} alt={name[4]} className="team-member-image" />
         <h2>{name[4]}</h2>
         <p>{role}</p>
         <div className="social-links">
-            <p>https://www.linkedin.com/in/willsuto/</p>
+            <a href="https://www.linkedin.com/in/willsuto/" target="_blank" rel="noopener noreferrer">
+                <img src={linkedInLogo} alt="LinkedIn" id="linkedinlogo"/>
+            </a> 
           {/* Add social links here */}
         </div>
       </div>

diff --git a/flake-guard-app/src/styles/landingPage.css b/flake-guard-app/src/styles/landingPage.css
@@ -73,12 +73,12 @@
 
 /*TEAM CSS*/
 
-#ashley-avatar:hover, #paloma-avatar:hover, #will-avatar:hover, #brendan-avatar:hover, #tommy-avatar:hover{
-transform: scale(1.2);
-
+#avatars:hover{
+    background-color: #457f3e;
+    border-radius: 10px;
+    box-shadow: 5px 5px 5px #457f3e;
 }
 
-
 .team {
     text-align: center;
     padding: 50px 0;
@@ -106,4 +106,9 @@ transform: scale(1.2);
     border-radius: 50%;
     object-fit: cover;
   }
+
+  #linkedinlogo{
+    width: 2rem;
+    height: 2rem;
+  }