UI styling update
This commit is contained in:
mukesh13
@ -9,11 +9,19 @@ const ATACIntroduction = () => {
|
||||
"The sequenced fragments are analysed using advanced bioinformatics tools to characterize the regulatory landscape, including chromatin accessibility, nucleosome mapping, and transcription factor binding.",
|
||||
"Assist in numerous applications like biomarker discovery, identification of novel enhancer, analysis of cell-type specific regulation, evolutionary studies and comparative epigenomic studies."
|
||||
];
|
||||
const advantageItems = [
|
||||
"ATAC-seq has become the method of choice for studying chromatin accessibility due to its efficiency and robust performance.",
|
||||
"Requires only 50,000 cells per sample, offering high sensitivity and making it ideal for studies with limited cell populations. This technique is versatile, applicable to both bulk tissue and single-cell analysis.",
|
||||
"Features simplified experimental steps, offering good reproducibility and a high success rate in generating reliable data.",
|
||||
"Simultaneously reveals the genomic locations of open chromatin, DNA-binding proteins, and transcription factor binding site interactions, providing a holistic view of chromatin accessibility."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/atac_sequencin.png"
|
||||
imageAlt="ATAC Workflow"
|
||||
badgeText="ATAC WORKFLOW"
|
||||
|
||||
@ -24,8 +24,6 @@ export default function ATACSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<ATACIntroduction />
|
||||
<ATACAdvantages />
|
||||
<ATACBioinformatics />
|
||||
<ATACApplications />
|
||||
<ATACSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,11 +9,19 @@ const ChIPIntroduction = () => {
|
||||
"Following this, NGS libraries are created by adding adapters and amplifying the DNA, which is subsequently sequenced on an Illumina platform.",
|
||||
"It provides valuable insights into gene regulation, revealing dysregulated pathways in cancers, developmental processes, and other biological phenomena."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Offers detailed genome-wide mapping of protein-DNA interactions, identifying binding sites of transcription factors, regulators, and other DNA-associated proteins.",
|
||||
"Utilizes specific antibodies to precisely capture and sequence protein-DNA complexes, providing accurate reflections of in vivo binding events.",
|
||||
"Reveals critical insights into gene regulation and chromatin dynamics, aiding in the understanding of gene expression, regulatory mechanisms, and epigenetic modifications.",
|
||||
"Facilitates studies on gene regulation in various contexts, including developmental processes, cancer research, and other biological phenomena, enhancing our understanding of complex biological systems and diseases."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/ChIP-sequencing.png"
|
||||
imageAlt="ChIP Workflow"
|
||||
badgeText="ChIP WORKFLOW"
|
||||
|
||||
@ -24,8 +24,6 @@ export default function ChIPSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<ChIPIntroduction />
|
||||
<ChIPAdvantages />
|
||||
<ChIPBioinformatics />
|
||||
<ChIPApplications />
|
||||
<ChIPSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,6 +9,13 @@ const EpigenomicsIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations and epigenetic modifications.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides comprehensive analysis of epigenetic modifications including DNA methylation, histone modifications, and chromatin accessibility, offering insights into gene regulation mechanisms.",
|
||||
"Enables single-base resolution mapping of epigenetic marks across the genome, allowing for precise identification of regulatory elements and their modifications.",
|
||||
"Reveals epigenetic alterations associated with diseases, development, and environmental responses, providing insights into cellular memory and inheritance patterns.",
|
||||
"Identifies potential therapeutic targets and biomarkers for epigenetic-based treatments, supporting the development of personalized medicine approaches."
|
||||
];
|
||||
|
||||
|
||||
const serviceTypes = [
|
||||
"Whole Genome Bisulphite Sequencing (WGBS)",
|
||||
@ -18,8 +25,10 @@ const EpigenomicsIntroduction = () => {
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/epigenomics-overview.png"
|
||||
imageAlt="Epigenomics Overview"
|
||||
badgeText="EPIGENOMICS"
|
||||
|
||||
@ -5,16 +5,15 @@ const EpigenomicsPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/epigenomics.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const EpigenomicsPipeline = ({
|
||||
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-full max-w-6xl">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,6 @@ export default function EpigenomicsSequencingPage() {
|
||||
<div className="page-content">
|
||||
<EpigenomicsIntroduction />
|
||||
<EpigenomicsPipeline/>
|
||||
<EpigenomicsAdvantages />
|
||||
<EpigenomicsSpecifications />
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// WGBSApplications.jsx
|
||||
import ApplicationsLayout from '../../../../components/shared/AdvantagesLayout';
|
||||
import ApplicationsLayout from '../../../../components/shared/ApplicationsLayout';
|
||||
|
||||
const WGBSApplications = () => {
|
||||
const applicationItems = [
|
||||
|
||||
@ -9,11 +9,20 @@ const WGBSIntroduction = () => {
|
||||
"In bioinformatics analysis, sequencing data is aligned to a reference genome using advanced bioinformatics tools to determine the methylation status at CpG, CHG, and CHH sites.",
|
||||
"Valuable in epigenetic research for its ability to provide high-resolution insights into the regulatory mechanisms of the genome, offering a deeper understanding of cellular functions and molecular pathways."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides high-resolution mapping of DNA methylation patterns across the genome, including CpG, CHG, and CHH sites, offering detailed insights into epigenetic modifications.",
|
||||
"Enables precise quantification of methylation levels, distinguishing between methylated and unmethylated cytosines based on read counts.",
|
||||
"This technique can detect effective CpG sites reaching over 75% of all CpG sites in the entire genome.",
|
||||
"Provides valuable insights into cell fate determination, genetic reprogramming, gene regulation, developmental epigenetics, disease mechanisms, and the identification of new epigenetic markers and therapeutic targets."
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/whole_genome_bisulphate_sequencing.png"
|
||||
imageAlt="WGBS Workflow"
|
||||
badgeText="WGBS WORKFLOW"
|
||||
|
||||
@ -24,8 +24,6 @@ export default function WGBSPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<WGBSIntroduction />
|
||||
<WGBSAdvantages />
|
||||
<WGBSBioinformatics />
|
||||
<WGBSApplications />
|
||||
<WGBSSpecifications />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user