fixed unclickable speaker links

Author: shansitads

src/components/Speakers/Speakers.js

@@ -6,21 +6,24 @@ import './speakers.css';
 
 const SpeakerRow = ({ speaker, isEven }) => {
     const Content = (
-        <Row className={`speaker-content ${isEven ? 'flex-row-reverse' : ''}`}>
-            <Col md={4} className="speaker-img-col">
-                <img
-                    src={speaker.imgPath}
-                    alt={speaker.name}
-                    className="speaker-img"
-                />
-            </Col>
-            <Col md={8} className="speaker-info-col">
-                <div className={`speaker-info ${isEven ? 'text-end' : 'text-start'}`}>
-                    <h2 className="speaker-name">{speaker.name}</h2>
-                    <p className="speaker-bio">{speaker.bio}</p>
-                </div>
-            </Col>
-        </Row>
+        <>
+            <Row className={`speaker-content ${isEven ? 'flex-row-reverse' : ''}`}>
+                <Col md={4} className="speaker-img-col">
+                    <img
+                        src={speaker.imgPath}
+                        alt={speaker.name}
+                        className="speaker-img"
+                    />
+                </Col>
+                <Col md={8} className="speaker-info-col">
+                    <div className={`speaker-info ${isEven ? 'text-end' : 'text-start'}`}>
+                        <h2 className="speaker-name">{speaker.name}</h2>
+                        <p className="speaker-bio">{speaker.bio}</p>
+                    </div>
+                </Col>
+            </Row>
+            {speaker.link && <div className="view-profile-text">View Profile →</div>}
+        </>
     );
 
     if (speaker.link) {

src/components/Speakers/speakers.css

@@ -26,6 +26,7 @@
     background-color: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
     transition: all 0.3s ease;
+    position: relative;
 }
 
 .speaker-row.clickable {
@@ -36,6 +37,7 @@
     text-decoration: none !important;
     color: inherit !important;
     display: block;
+    position: relative;
 }
 
 .speaker-row:hover {
@@ -44,14 +46,18 @@
     background-color: rgba(255, 255, 255, 0.08);
 }
 
-.speaker-row.clickable:hover::after {
-    content: "View Profile →";
-    position: absolute;
-    bottom: 20px;
-    right: 40px;
+.view-profile-text {
+    display: none;
     color: var(--imp-text-color);
     font-size: 0.9em;
     opacity: 0.8;
+    position: absolute;
+    bottom: 20px;
+    right: 40px;
+}
+
+.speaker-row.clickable:hover .view-profile-text {
+    display: block;
 }
 
 .speaker-content {
@@ -113,7 +119,7 @@
         font-size: 1em;
     }
 
-    .speaker-row.clickable:hover::after {
+    .view-profile-text {
         position: static;
         display: block;
         text-align: center;