Hugging Face's logo

Spaces:
i-darrshan
/
Genomatics-react-modularised-vite
Sleeping

App Files Community
Genomatics-react-modularised-vite
File size: 3,650 Bytes 
62c3fe0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
import React from "react";
import styled from "styled-components";
import { FaLinkedin, FaXTwitter } from "react-icons/fa6"; // Correct social media icons

import leaders from "../../data/leaders"; // Import leader data

// Styled components for the Organization Leaders section
const LeadersContainer = styled.section`
  padding: 4rem 2rem;
  background-color: #121212; // Dark background
  color: white;
  text-align: center;
`;

const LeadersTitle = styled.h2`
  font-size: 3rem;
  font-weight: bold;
  background-clip: text;
  -webkit-background-clip: text;
  color: #3267B9;  // Blue color for the title
  margin-bottom: 2rem;
`;

const LeadersWrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 1024px) {
    grid-template-columns: repeat(4, 1fr);
  }
`;

const LeaderCard = styled.div`
  background-color: #2d3748;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  border: 3px solid #3267B9;
  border-radius: 12px;  
`;

const LeaderImage = styled.div`
  width: 100%;
  padding-top: 100%; // 16:9 aspect ratio
  position: relative;
  background-image: url(${(props) => props.src});
  background-size: cover;
  background-position: center;
  border-radius: 12px 12px 0 0; // Rounded top corners
`;

const LeaderContent = styled.div`
  padding: 2rem;
  text-align: left; // Align text to the left
  flex-grow: 1; // Allow content to grow
  display:flex-column;
  justify-content:center;
  align-items: center;
`;

const LeaderName = styled.h3`
  font-size: 1.75rem;
  flex-grow: 1;
  color: #e2e8f0;
  font-weight: bold;
  margin-bottom: 0.5rem;
`;

const LeaderTitle = styled.p`
  font-size: 1rem;
  background-clip: text;
  -webkit-background-clip: text;
  color: #3267B9;  // Blue color for the title
  font-weight: 500;
  margin-bottom: 1rem;
`;

const LeaderBio = styled.p`
  font-size: 0.875rem;  // Reduced text size
  color: #e2e8f0;
  line-height: 1.5;
  margin-bottom: 1.5rem;
`;

const SocialLinks = styled.div`
  display: flex;
  justify-content: center;
  gap: 1rem;

  a {
    color: #d5d5d5;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    svg {
      fill: #d5d5d5; // Default icon color
      transition: fill 0.3s ease;
    }

    &:hover svg {
      fill: #3267B9; // Apply gradient on hover
    }
  }
`;


const OrganizationLeaders = () => {

  return (
    <LeadersContainer>
      <LeadersTitle>Meet Our Visionaries</LeadersTitle>
      <LeadersWrapper>
        {leaders.map((leader, index) => (
          <LeaderCard key={index} data-testid={`leader-card-${index}`}>
          <LeaderImage src={leader.image} role="img" />
          <LeaderContent>
            <LeaderName>{leader.name}</LeaderName>
            <LeaderTitle>{leader.title}</LeaderTitle>
            <LeaderBio>{leader.bio}</LeaderBio>
            <SocialLinks>
              {leader.social.linkedin && (
                <a
                  href={leader.social.linkedin}
                  target="_blank"
                  rel="noopener noreferrer"
                  data-testid={`linkedin-link-${index}`}
                >
                  <FaLinkedin />
                </a>
              )}
            </SocialLinks>
          </LeaderContent>
        </LeaderCard>
        
        ))}
      </LeadersWrapper>
    </LeadersContainer>
  );
};

export default OrganizationLeaders;