Hugging Face's logo

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

App Files Community
Genomatics-react-modularised-v3
File size: 4,247 Bytes 
8b105ad
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c049d8c
 
 
 
 
8b105ad
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
import React from 'react';
import styled from 'styled-components';
import { Dr_giridharan } from '../../utils';
import { Dr_rajasekaran } from '../../utils';
import { Dr_thangaraj } from '../../utils';

// Styled Components
const Section = styled.section`
  background-color: #0a0a0a; /* Dark background */
  color: #fff;
  padding: 60px 20px;
  text-align: center;
`;

const Heading = styled.h2`
  font-size: 2.5rem;
  font-weight: bold;
  color: #3267B9;
  margin-bottom: 16px;
`;

// const Subheading = styled.p`
//   font-size: 1.125rem;
//   color: #ccc;
//   margin-bottom: 40px;
// `;

const CardList = styled.ul`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
`;

const Card = styled.li`
  padding: 30px;
  border-radius: 20px; /* Rounded corners for the card */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Align content towards the bottom */
  position: relative;
  min-height: 300px; /* Set minimum height to ensure space for text */
  
  /* Gradient border */
  border: 3px solid #3267B9;
  
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
`;



const QuoteIcon = styled.svg`
  position: absolute;
  top: -20px;
  left: 20px;
  width: 40px;
  height: 40px;
  opacity: 0.8;

  /* Gradient in the QuoteIcon */
  & path {
    fill: #3267B9; /* Referencing gradient from <defs> */
  }
`;

const CardText = styled.p`
  font-size: 1rem;
  color: #fff; /* White text for readability */
  margin-bottom: 20px;
`;

const CardFooter = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the author info */
  justify-content: center;
  margin-top: 20px;
`;

const Avatar = styled.img`
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 10px; /* Space between avatar and name */
`;

const Name = styled.div`
  font-weight: bold;
  background: #3267B9;
  -webkit-background-clip: text;
  color: transparent;
`;

const Position = styled.div`
  font-size: 0.875rem;
  color: #bbb; /* Light gray for position */
`;

const Testimonials = () => {
  // Testimonial data
  const testimonialData = [
    {
      text: 'A very useful product in Medical Genetics!',
      name: 'Dr. K. Thangaraj',
      position: 'Chief Scientist, Evolutionary and Medical Genetics, CCMB, Hyderabad, India',
      avatar: Dr_thangaraj
    },
    {
      text: 'Flexibly done to serve our Clinical Genomics needs!',
      name: 'Prof. S. Rajasekaran',
      position: 'Chairman, Dept of Orthopaedic, Trauma & Spine Surgery, Ganga Hospital, Coimbatore, India',
      avatar: Dr_rajasekaran
    },
    {
      text: 'Awesome product which serves as a collection of variants of all diseases, not just the rare ones!',
      name: 'Dr. Giridharan Periasamy',
      position: 'Platform Leader, High Throughput Phenomics, GIS, Singapore',
      avatar: Dr_giridharan
    }
  ];

  return (
    <Section>
      <Heading>Testimonials</Heading>
      {/* <Subheading>Here are what some of our amazing customers are saying...</Subheading> */}
      <CardList>
        {testimonialData.map((testimonial, index) => (
          <Card key={index}>
            <QuoteIcon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
              <path d="M557.133 561.704H442.128c-44.256 0-80.458-36.19-80.458-80.446 0-165.58-42.32-347.485 160.656-399.418 91.95-23.516 115.915 77.753 18.119 84.745-59.647 4.276-71.293 42.804-73.147 101.068h92.269c44.256 0 80.458 36.201 80.458 80.458v130.702c0 45.591-37.3 82.89-82.891 82.89zm-358.032 0H84.096c-44.256 0-80.446-36.19-80.446-80.446 0-165.58-42.331-347.485 160.644-399.418 91.95-23.516 115.915 77.753 18.118 84.745-59.646 4.276-71.292 42.804-73.146 101.068h92.269c44.256 0 80.457 36.201 80.457 80.458v130.702c0 45.591-37.3 82.89-82.89 82.89z" />
            </QuoteIcon>
            <CardText>{testimonial.text}</CardText>
            <CardFooter>
              <Avatar src={testimonial.avatar} alt={testimonial.name} />
              <Name>{testimonial.name}</Name>
              <Position>{testimonial.position}</Position>
            </CardFooter>
          </Card>
        ))}
      </CardList>
    </Section>
  );
};

export default Testimonials;