mukeshs/operify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive check

Browse Source
This commit is contained in:
mukesh13
2025-09-12 11:17:42 +05:30
parent e925b985f2
commit b85ec3d929
14 changed files with 102 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
app/dna-sequencing/whole-genome-sequencing/components/WGSIntroduction.jsx
View File

@ -10,51 +10,33 @@ const WGSIntroduction = () => {
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
];
const advantageItems = [
"Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing.",
"Identifies both small (SNVs, CNVs, InDels) and large structural variants that may be missed with targeted approaches, offering valuable insights into inherited genetic conditions and characterizing mutations driving cancer progression.",
"Generates large volumes of data quickly, facilitating the assembly of novel genomes.",
"Uncovers genomic diversity, taxonomic classifications, and evolutionary relationships, enhancing our understanding of biological complexity."
];
// const advantageItems = [
// "Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing.",
// "Identifies both small (SNVs, CNVs, InDels) and large structural variants that may be missed with targeted approaches, offering valuable insights into inherited genetic conditions and characterizing mutations driving cancer progression.",
// "Generates large volumes of data quickly, facilitating the assembly of novel genomes.",
// "Uncovers genomic diversity, taxonomic classifications, and evolutionary relationships, enhancing our understanding of biological complexity."
// ];
return (
<div className="w-full bg-white">
<div className="w-full min-w-0 bg-white">
{/* Main container with two columns */}
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] gap-0">
{/* Left Column - Content using existing IntroductionLayout structure */}
<div className="px-6 lg:px-12 py-8">
<div className="w-full min-w-0 px-4 sm:px-6 lg:px-6 py-6">
{/* Introduction Section */}
<section className="mb-8">
<h2 className="text-3xl font-bold text-teal-700 mb-4">
<section>
<h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
Introduction and Workflow
</h2>
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
{contentItems.map((item, index) => (
<li key={index} className="flex items-start">
<span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<span className="text-justify">{item}</span>
</li>
))}
</ul>
</section>
{/* Advantage Section */}
<section>
<h2 className="text-3xl font-bold text-teal-700 mb-4">
Advantage
</h2>
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
{advantageItems.map((item, index) => (
<li key={index} className="flex items-start">
<span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<span className="text-justify">{item}</span>
<span className="text-justify break-words" style={{ fontSize: 'inherit' }}>{item}</span>
</li>
))}
</ul>
@ -62,11 +44,11 @@ const WGSIntroduction = () => {
</div>
{/* Right Column - Custom Content with Image and SVG */}
<div className="relative p-4">
<div className="flex flex-col h-full space-y-4">
<div className="w-full min-w-0 relative p-4 lg:p-6">
<div className="flex flex-col">
{/* Top Section - Flowchart with larger fixed width */}
<div className="w-full flex items-center justify-center py-6">
<div className="w-full max-w-md flex items-center justify-center">
<div className="w-full flex items-center justify-center">
<div className="w-full max-w-md">
<img
src="/images/flowchart/WGS_flow.svg"
alt="WGS Process Flow"
@ -77,7 +59,7 @@ const WGSIntroduction = () => {
{/* Bottom Section - Image with same width */}
{/* <div className="flex items-center justify-center">
<div className="w-full max-w-md flex items-center justify-center">
<div className="w-full max-w-md">
<img
src="/images/dna/whole_genome_seq-normal_denovo.png"
alt="WGS Overview"