update styling
This commit is contained in:
mukesh13
@ -37,14 +37,31 @@ export default function RareIntro() {
|
||||
};
|
||||
|
||||
return (
|
||||
<section>
|
||||
<section className="bg-teal-700">
|
||||
<div className="flex min-h-[350px]">
|
||||
{/* Left Side - Content */}
|
||||
<div className="w-full lg:w-3/4 bg-white">
|
||||
{/* Left Side - Image */}
|
||||
<div className="hidden lg:block w-1/2 relative">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1559757175-0eb30cd8c063"
|
||||
alt="DNA sequencing and genetic analysis in modern laboratory"
|
||||
fill
|
||||
className="object-cover grayscale-[20%]"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-slate-900/10"></div>
|
||||
</div>
|
||||
|
||||
{/* Subtle border */}
|
||||
<div className="absolute right-0 top-0 w-px h-full bg-teal-600"></div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Content */}
|
||||
<div className="w-full lg:w-3/4">
|
||||
<div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
|
||||
{/* Brand/Title */}
|
||||
<div className="mb-4">
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">
|
||||
<span>Transforming</span>
|
||||
<span className="ml-2">Delays into Diagnoses</span>
|
||||
</h2>
|
||||
@ -53,7 +70,7 @@ export default function RareIntro() {
|
||||
|
||||
{/* Content Slider */}
|
||||
<div className="mb-4 max-w-3xl">
|
||||
<div className="text-gray-600 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
|
||||
<div className="text-gray-200 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
|
||||
{slides[currentSlide].content}
|
||||
</div>
|
||||
</div>
|
||||
@ -65,18 +82,18 @@ export default function RareIntro() {
|
||||
onClick={prevSlide}
|
||||
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
|
||||
style={{
|
||||
borderColor: '#555555',
|
||||
color: '#555555'
|
||||
borderColor: '#ffffff',
|
||||
color: '#ffffff'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.borderColor = '#faae31';
|
||||
e.target.style.backgroundColor = '#faae31';
|
||||
e.target.style.color = '#2a6564';
|
||||
e.target.style.color = '#0f766e';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.borderColor = '#555555';
|
||||
e.target.style.borderColor = '#ffffff';
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
e.target.style.color = '#555555';
|
||||
e.target.style.color = '#ffffff';
|
||||
}}
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
@ -89,18 +106,18 @@ export default function RareIntro() {
|
||||
onClick={nextSlide}
|
||||
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
|
||||
style={{
|
||||
borderColor: '#555555',
|
||||
color: '#555555'
|
||||
borderColor: '#ffffff',
|
||||
color: '#ffffff'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.borderColor = '#faae31';
|
||||
e.target.style.backgroundColor = '#faae31';
|
||||
e.target.style.color = '#2a6564';
|
||||
e.target.style.color = '#0f766e';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.borderColor = '#555555';
|
||||
e.target.style.borderColor = '#ffffff';
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
e.target.style.color = '#555555';
|
||||
e.target.style.color = '#ffffff';
|
||||
}}
|
||||
aria-label="Next slide"
|
||||
>
|
||||
@ -119,16 +136,16 @@ export default function RareIntro() {
|
||||
style={{
|
||||
width: index === currentSlide ? '24px' : '6px',
|
||||
height: '6px',
|
||||
backgroundColor: index === currentSlide ? '#faae31' : '#555555'
|
||||
backgroundColor: index === currentSlide ? '#faae31' : '#ffffff'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (index !== currentSlide) {
|
||||
e.target.style.backgroundColor = '#2a6564';
|
||||
e.target.style.backgroundColor = '#f1f5f9';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (index !== currentSlide) {
|
||||
e.target.style.backgroundColor = '#555555';
|
||||
e.target.style.backgroundColor = '#ffffff';
|
||||
}
|
||||
}}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
@ -139,23 +156,6 @@ export default function RareIntro() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Image */}
|
||||
<div className="hidden lg:block w-1/2 relative">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
|
||||
alt="DNA sequencing and genetic analysis in modern laboratory"
|
||||
fill
|
||||
className="object-cover grayscale-[20%]"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-slate-900/10"></div>
|
||||
</div>
|
||||
|
||||
{/* Subtle border */}
|
||||
<div className="absolute left-0 top-0 w-px h-full bg-slate-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -1,12 +1,58 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
const FeatureCard = ({ icon, title, description }) => (
|
||||
<div className="p-6 rounded-2xl shadow-sm border-0 h-full transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-lg group" style={{ backgroundColor: '#f2fcfc' }}>
|
||||
<div className="flex items-center space-x-4 mb-4">
|
||||
<div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<Image src={icon} alt={title} width={24} height={24} />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-teal-700 leading-tight">{title}</h3>
|
||||
</div>
|
||||
<div className="relative w-full h-px bg-gray-300 mb-4 overflow-hidden">
|
||||
<div className="absolute top-0 left-0 h-full bg-gray-600 w-0 group-hover:w-full transition-all duration-500 ease-in-out"></div>
|
||||
</div>
|
||||
<p className="text-gray-600 leading-relaxed text-sm text-justify">{description}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default function OperifyExome() {
|
||||
const features = [
|
||||
{ title: "Deep Coverage", desc: "≥100X average depth for high accuracy." },
|
||||
{ title: "Superior Data Quality", desc: "≥90% bases with Q30 score." },
|
||||
{ title: "Comprehensive Variant Detection", desc: "Identifies SNVs, Indels, and CNVs." },
|
||||
{ title: "Uniparental Disomy Analysis", desc: "Detects UPD regions for imprinting disorders." },
|
||||
{ title: "Coverage of Complex Genes", desc: "Includes SMN1, SMN2, and DMD." },
|
||||
{ title: "Chromosomal Assessment", desc: "Detects aneuploidies and determines chromosomal sex." },
|
||||
{ title: "Dynamic Reanalysis", desc: "Reanalysis as scientific knowledge evolves." }
|
||||
{
|
||||
title: "Deep Coverage",
|
||||
desc: "≥100X average depth for high accuracy.",
|
||||
icon: "/images/icons/deep-coverage.png"
|
||||
},
|
||||
{
|
||||
title: "Superior Data Quality",
|
||||
desc: "≥90% bases with Q30 score.",
|
||||
icon: "/images/icons/data-quality.png"
|
||||
},
|
||||
{
|
||||
title: "Comprehensive Variant Detection",
|
||||
desc: "Identifies SNVs, Indels, and CNVs.",
|
||||
icon: "/images/icons/variant-detection.png"
|
||||
},
|
||||
{
|
||||
title: "Uniparental Disomy Analysis",
|
||||
desc: "Detects UPD regions for imprinting disorders.",
|
||||
icon: "/images/icons/upd-analysis.png"
|
||||
},
|
||||
{
|
||||
title: "Coverage of Complex Genes",
|
||||
desc: "Includes SMN1, SMN2, and DMD.",
|
||||
icon: "/images/icons/complex-genes.png"
|
||||
},
|
||||
{
|
||||
title: "Chromosomal Assessment",
|
||||
desc: "Detects aneuploidies and determines chromosomal sex.",
|
||||
icon: "/images/icons/chromosomal.png"
|
||||
},
|
||||
{
|
||||
title: "Dynamic Reanalysis",
|
||||
desc: "Reanalysis as scientific knowledge evolves.",
|
||||
icon: "/images/icons/reanalysis.png"
|
||||
}
|
||||
];
|
||||
|
||||
const points = [
|
||||
@ -36,24 +82,17 @@ export default function OperifyExome() {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-semibold text-teal-700 mb-4">Key Features</h3>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse border border-gray-300 rounded-lg">
|
||||
<thead>
|
||||
<tr className="bg-teal-50">
|
||||
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Feature</th>
|
||||
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{features.map((feature, idx) => (
|
||||
<tr key={idx} className="hover:bg-teal-50">
|
||||
<td className="border border-gray-300 px-6 py-3 text-gray-700 font-medium">{feature.title}</td>
|
||||
<td className="border border-gray-300 px-6 py-3 text-gray-600">{feature.desc}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 className="text-3xl font-bold text-teal-700 mb-6 leading-tight">Key Features</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{features.map((feature, index) => (
|
||||
<FeatureCard
|
||||
key={index}
|
||||
icon={feature.icon}
|
||||
title={feature.title}
|
||||
description={feature.desc}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -1,12 +1,58 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
const FeatureCard = ({ icon, title, description }) => (
|
||||
<div className="p-6 rounded-2xl shadow-sm border-0 h-full transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-lg group" style={{ backgroundColor: '#f2fcfc' }}>
|
||||
<div className="flex items-center space-x-4 mb-4">
|
||||
<div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<Image src={icon} alt={title} width={24} height={24} />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-teal-700 leading-tight">{title}</h3>
|
||||
</div>
|
||||
<div className="relative w-full h-px bg-gray-300 mb-4 overflow-hidden">
|
||||
<div className="absolute top-0 left-0 h-full bg-gray-600 w-0 group-hover:w-full transition-all duration-500 ease-in-out"></div>
|
||||
</div>
|
||||
<p className="text-gray-600 leading-relaxed text-sm text-justify">{description}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default function OperifyExomeMito() {
|
||||
const features = [
|
||||
{ title: "High Mean Target Depth", desc: "≥100X coverage for reliable detection." },
|
||||
{ title: "High Base Quality", desc: "≥90% of bases with Q30 score." },
|
||||
{ title: "Scope of Test", desc: "Covers SNVs/Indels, CNVs in nuclear and mitochondrial genome." },
|
||||
{ title: "Uniparental Disomy", desc: "Detects regions important in rare recessive conditions." },
|
||||
{ title: "Homologous Gene Analysis", desc: "Includes SMN1, SMN2, DMD." },
|
||||
{ title: "Aneuploidy & Ploidy Estimation", desc: "Detects abnormal chromosome numbers and sex karyotype." },
|
||||
{ title: "Reanalysis & Reclassification", desc: "Updates based on latest scientific knowledge." }
|
||||
{
|
||||
title: "High Mean Target Depth",
|
||||
desc: "≥100X coverage for reliable detection.",
|
||||
icon: "/images/icons/deep-coverage.png"
|
||||
},
|
||||
{
|
||||
title: "High Base Quality",
|
||||
desc: "≥90% of bases with Q30 score.",
|
||||
icon: "/images/icons/data-quality.png"
|
||||
},
|
||||
{
|
||||
title: "Scope of Test",
|
||||
desc: "Covers SNVs/Indels, CNVs in nuclear and mitochondrial genome.",
|
||||
icon: "/images/icons/scope-test.png"
|
||||
},
|
||||
{
|
||||
title: "Uniparental Disomy",
|
||||
desc: "Detects regions important in rare recessive conditions.",
|
||||
icon: "/images/icons/variant-detection.png"
|
||||
},
|
||||
{
|
||||
title: "Homologous Gene Analysis",
|
||||
desc: "Includes SMN1, SMN2, DMD.",
|
||||
icon: "/images/icons/functional-genomics.png"
|
||||
},
|
||||
{
|
||||
title: "Aneuploidy & Ploidy Estimation",
|
||||
desc: "Detects abnormal chromosome numbers and sex karyotype.",
|
||||
icon: "/images/icons/chromosomal.png"
|
||||
},
|
||||
{
|
||||
title: "Reanalysis & Reclassification",
|
||||
desc: "Updates based on latest scientific knowledge.",
|
||||
icon: "/images/icons/reanalysis.png"
|
||||
}
|
||||
];
|
||||
|
||||
const genomeCoverage = [
|
||||
@ -27,7 +73,7 @@ export default function OperifyExomeMito() {
|
||||
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify ExomeMito</h2>
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-4">Boost diagnostic yield with Exome + Mito Sequencing</h3>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="mb-8">
|
||||
<ul className="space-y-4">
|
||||
{points.map((point, idx) => (
|
||||
<li key={idx} className="flex items-start">
|
||||
@ -65,24 +111,17 @@ export default function OperifyExomeMito() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-semibold text-teal-700 mb-4">Key Features</h3>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse border border-gray-300 rounded-lg">
|
||||
<thead>
|
||||
<tr className="bg-teal-50">
|
||||
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Feature</th>
|
||||
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{features.map((feature, idx) => (
|
||||
<tr key={idx} className="hover:bg-teal-50">
|
||||
<td className="border border-gray-300 px-6 py-3 text-gray-700 font-medium">{feature.title}</td>
|
||||
<td className="border border-gray-300 px-6 py-3 text-gray-600">{feature.desc}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 className="text-3xl font-bold text-teal-700 mb-6 leading-tight">Key Features</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{features.map((feature, index) => (
|
||||
<FeatureCard
|
||||
key={index}
|
||||
icon={feature.icon}
|
||||
title={feature.title}
|
||||
description={feature.desc}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user