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

UI styling update

Browse Source
This commit is contained in:
mukesh13
2025-08-21 10:21:32 +05:30
parent 04a9f5689b
commit 92a935f753
36 changed files with 501 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/dna-sequencing/components/AboutDNA.jsx
View File

@ -4,24 +4,21 @@ import React from 'react';
const AboutDNA = () => {
return (
<section className="pt-6 bg-white">
<div className="container mx-auto px-6">
<h2 className="text-4xl font-bold text-gray-700 text-left pb-2">
<div className="container max-w-none px-6">
<h2 className="text-4xl font-bold text-teal-700 mb-4">
About DNA Sequencing
</h2>
<h2 className="text-lg font-semibold text-gray-600 mb-4">
Exploring Life's Blueprint with Every Sequence
</h2>
<div className="mb-6 text-justify">
<div className="mb-4 text-justify">
<p className="text-gray-600 leading-relaxed text-base mb-4">
DNA sequencing is a method used to determine the precise order of nucleotides
(adenine, thymine, cytosine, and guanine) in a DNA molecule. This information is
critical for understanding genetic information, mutations, and their roles in disease,
evolution, and various biological processes.
</p>
<p className="text-gray-600 leading-relaxed text-base">
Different DNA sequencing approaches using Next Generation sequencing are listed below:
</p>
</div>
</div>
</section>

12
app/dna-sequencing/components/DNATable.jsx
View File

@ -115,17 +115,17 @@ const DNATable = () => {
];
return (
<section className="pt-6 bg-white">
<div className="container mx-auto px-6">
<h3 className="text-2xl font-semibold text-gray-700 mb-6">DNA Sequencing Approaches</h3>
<section className="pt-4 bg-white">
<div className="container max-w-none px-6">
<h3 className="text-lg font-semibold text-gray-600 mb-4">DNA Sequencing Approaches</h3>
<div className="mb-6 text-justify">
<p className="text-gray-600 leading-relaxed text-base">
Different DNA sequencing approaches and their applications are summarized below:
</p>
</div>
<div className="overflow-x-auto mb-8">
<table className="w-full border-collapse border border-gray-300 text-sm bg-white shadow-sm">
<div className="overflow-x-auto mb-8 justify-center">
<table className="w-full border-collapse border border-gray-300 text-sm bg-white shadow-sm ">
<thead>
<tr className="bg-teal-50">
<th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
@ -146,7 +146,7 @@ const DNATable = () => {
{sequencingData.map((row, index) => (
<tr key={index} className={`${index % 2 === 1 ? 'bg-gray-50' : 'bg-white'} hover:bg-teal-25 transition-colors`}>
<td className="border border-gray-300 px-4 py-3 align-top">
<a href={row.approach.link} className="text-teal-600 hover:underline font-medium text-base">
<a href={row.approach.link} className="text-gray-600 hover:underline font-medium text-base">
{row.approach.name}
</a>
</td>