Hugging Face's logo

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

App Files Community
Genomatics-react-modularised-v3
File size: 3,665 Bytes 
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
 
import React from "react";
import styled from "styled-components";
import { FaCheckCircle } from "react-icons/fa"; // Tick mark icon for bullets

// Styled components for the VarDiG section
const VarDiGContainer = styled.section`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background-color: #121212; // Dark background
  color: white;
  gap: 4rem; // Adds space between sections

  @media (min-width: 768px) {
    flex-direction: row-reverse;  // Swapped the position to have image on the left
    justify-content: space-between;
    padding: 4rem 5rem;
  }
`;

const VarDiGTextContainer = styled.div`
  flex: 0 0 60%; // Takes up 60% of the width
  text-align: center;

  @media (min-width: 768px) {
    text-align: left;
  }
`;

const VarDiGTitle = styled.h2`
  font-size: 3.5rem;
  font-weight: bold;
  background-clip: text;
  -webkit-background-clip: text;
  color: #3267B9;
  margin-bottom: 1.5rem;
`;

const VarDiGParagraph = styled.p`
  font-size: 1rem; // Smaller font size
  color: #e2e8f0;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 2rem;
  text-align: justify; // Justified text
`;

const BulletPoints = styled.ul`
  display: grid;
  grid-template-columns: repeat(2, 1fr); // Two columns
  gap: 2rem;
  list-style-type: none;
  padding: 0;
  text-align: left;
  margin: 0 auto;
  max-width: 600px;
`;

const BulletPoint = styled.li`
  font-size: 1.25rem;
  color: #e2e8f0;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
`;

const ImageSection = styled.div`
  flex: 0 0 40%;  // Takes up 40% of the width
  display: flex;
  justify-content: center;
  margin-top: 2rem;

  @media (min-width: 768px) {
    margin-top: 0;
  }

  img {
    width: 100%;
    height: auto;
    max-width: 400px; // Single image, medium size
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
`;

const VarDiGSection = () => {
  return (
    <VarDiGContainer role="region">
      {/* Right Section: Text */}
      <VarDiGTextContainer>
        <VarDiGTitle>VarDiG® - Unlocking the Power of Genomic Data</VarDiGTitle>
        <VarDiGParagraph>
          VarDiG® is your gateway to actionable genomic data. Powered by advanced AI and curated by experts, our platform provides real-time access to over 800,000 verified genetic variants, diseases, and gene relationships, ensuring every insight is precise and reliable. With continuous AI-driven cross-verification, VarDiG® guarantees data integrity, empowering researchers and clinicians to make confident, data-backed decisions for precision medicine and advanced discoveries.
        </VarDiGParagraph>

        {/* Bullet Points Section */}
        <BulletPoints>
          <BulletPoint>
            <FaCheckCircle style={{ color: "#3267B9" }} /> AI-Verified, Expert-Curated Data
          </BulletPoint>
          <BulletPoint>
            <FaCheckCircle style={{ color: "#3267B9" }} /> Comprehensive Variant-Disease-Gene Mapping
          </BulletPoint>
          <BulletPoint>
            <FaCheckCircle style={{ color: "#3267B9" }} /> Advanced Search Engine with Flexible Filters
          </BulletPoint>
          <BulletPoint>
            <FaCheckCircle style={{ color: "#3267B9" }} /> Seamless VCF File Upload & Visualization
          </BulletPoint>
        </BulletPoints>
      </VarDiGTextContainer>

      {/* Left Section: Image */}
      <ImageSection>
        <img src="https://via.placeholder.com/350x350" alt="VarDiG Platform Visualization" />
      </ImageSection>
    </VarDiGContainer>
  );
};

export default VarDiGSection;