UI styling update

This commit is contained in:
mukesh13
2025-08-21 10:31:21 +05:30
parent 92a935f753
commit 543e21d2e2
3 changed files with 71 additions and 73 deletions

View File

@ -1,7 +1,12 @@
// components/PackagingShipping/DNASamples.jsx
import React from 'react';
const DNASamples = () => {
const guidelines = [
"Picogreen quantification is advised from the client, in absence of which an agarose Gel Electrophoresis and Nanodrop quantification must be shared. Samples with A260/280 ratio values of ~1.8 are considered \"pure\" for DNA and will be accepted for processing further.",
"For large-scale projects, please submit DNA samples in strip tubes or in well-sealed 96-well PCR plates with semi- or fully-skirted edges (we recommend Eppendorf twin.tec PCR plate 96 LoBind). Arrange samples in a column format (e.g., A1, B1, C1, D1, ..., A2, B2, C2, D2, ...) in contiguous wells. Avoid skipping wells, rows, or columns.",
"DNA samples in 70% ethanol can be transported at room temperature, while samples in H2O or TE buffer should be transported with ice packs (e.g., \"blue ice\")."
];
return (
<div className="space-y-6">
<div>
@ -10,26 +15,19 @@ const DNASamples = () => {
<div className="flex flex-col lg:flex-row gap-6">
<div className="flex-1 space-y-4">
<p className="text-gray-600 leading-relaxed">
Picogreen quantification is advised from the client, in absence of which
an agarose Gel Electrophoresis and Nanodrop quantification must be
shared. Samples with A260/280 ratio values of ~1.8 are considered "pure"
for DNA and will be accepted for processing further.
</p>
<p className="text-gray-600 leading-relaxed">
For large-scale projects, please submit DNA samples in strip tubes or in
well-sealed 96-well PCR plates with semi- or fully-skirted edges (we
recommend Eppendorf twin.tec PCR plate 96 LoBind). Arrange samples in a
column format (e.g., A1, B1, C1, D1, ..., A2, B2, C2, D2, ...) in
contiguous wells. Avoid skipping wells, rows, or columns.
</p>
<p className="text-gray-600 leading-relaxed">
DNA samples in 70% ethanol can be transported at room temperature, while
samples in H2O or TE buffer should be transported with ice packs (e.g.,
"blue ice").
</p>
<ul className="space-y-4">
{guidelines.map((guideline, idx) => (
<li key={idx} className="flex items-start">
<span
className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<p className="text-gray-600 leading-relaxed">
{guideline}
</p>
</li>
))}
</ul>
</div>
<div className="lg:w-96 flex justify-center">

View File

@ -1,6 +1,13 @@
import React from 'react';
const PackagingGuideline = () => {
const guidelines = [
"Seal the tubes with parafilm for transportation. To prevent the tubes from being crushed and broken during transit (leading to sample loss), insert sample tubes into 50 ml centrifuge tubes (or other rigid supports), which can also be packed with cotton, foam, etc.",
"To prevent sample loss and/or cross-contamination, tightly seal all wells of the plate with an adhesive sheet or foil. Protect the plates or strip tubes in a sturdy box with plenty of cushioning. Sample shipments of plates should be carried out on frozen blue ice or dry ice to ensure that the samples remain frozen during shipment.",
"To prevent sample loss and cross-contamination, we recommend securely sealing all wells of the plate with an adhesive sheet or foil. Place the plates or strip tubes in a sturdy box with ample cushioning. Ship the samples with a surplus of frozen blue ice blocks or dry ice to ensure they remain frozen throughout shipment.",
"For leak prevention and to avoid cross-contamination, use one of the following sealing methods:\n(a) Cap the wells with matching 8-strip caps, ensuring a tight seal. These caps are typically ordered separately from the plates.\n(b) For foil seals, use a heat seal (preferred method) like \"Thermo Scientific Easy Peel Heat Sealing Foil\" that allows for resealing, or adhesive aluminum foil seals such as \"AlumaSeal CS Film.\""
];
return (
<div className="space-y-6">
<div>
@ -8,39 +15,31 @@ const PackagingGuideline = () => {
</div>
<div className="space-y-6">
<p className="leading-relaxed" style={{ color: '#555555' }}>
Seal the tubes with parafilm for transportation. To prevent the tubes from
being crushed and broken during transit (leading to sample loss), insert
sample tubes into 50 ml centrifuge tubes (or other rigid supports), which
can also be packed with cotton, foam, etc.
</p>
<p className="leading-relaxed" style={{ color: '#555555' }}>
To prevent sample loss and/or cross-contamination, tightly seal all wells of
the plate with an adhesive sheet or foil. Protect the plates or strip tubes
in a sturdy box with plenty of cushioning. Sample shipments of plates should
be carried out on frozen blue ice or dry ice to ensure that the samples
remain frozen during shipment.
</p>
<p className="leading-relaxed" style={{ color: '#555555' }}>
To prevent sample loss and cross-contamination, we recommend securely
sealing all wells of the plate with an adhesive sheet or foil. Place the
plates or strip tubes in a sturdy box with ample cushioning. Ship the
samples with a surplus of frozen blue ice blocks or dry ice to ensure they
remain frozen throughout shipment.
</p>
<p className="leading-relaxed" style={{ color: '#555555' }}>
For leak prevention and to avoid cross-contamination, use one of the
following sealing methods:<br />
<span className="font-medium">(a)</span> Cap the wells with matching 8-strip
caps, ensuring a tight seal. These caps are typically ordered separately
from the plates.<br />
<span className="font-medium">(b)</span> For foil seals, use a heat seal (preferred method)
like "Thermo Scientific Easy Peel Heat Sealing Foil" that allows for
resealing, or adhesive aluminum foil seals such as "AlumaSeal CS Film."
</p>
<ul className="space-y-4">
{guidelines.map((guideline, idx) => (
<li key={idx} className="flex items-start">
<span
className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<p className="leading-relaxed" style={{ color: '#555555' }}>
{guideline.split('\n').map((line, lineIdx) => (
<React.Fragment key={lineIdx}>
{lineIdx > 0 && <br />}
{line.startsWith('(a)') || line.startsWith('(b)') ? (
<>
<span className="font-medium">{line.substring(0, 3)}</span>
{line.substring(3)}
</>
) : (
line
)}
</React.Fragment>
))}
</p>
</li>
))}
</ul>
</div>
</div>
);

View File

@ -1,6 +1,12 @@
import React from 'react';
const ShippingSchedule = () => {
const guidelines = [
"Before sending your samples, please notify us promptly by mail or by completing the form online, including the Sample Initiation Form. This helps us register and process your samples efficiently upon arrival. As we do not receive packages on weekends, ensure your samples arrive on a weekday. Avoid shipping samples just before weekends (e.g., on a Thursday for Friday arrival) or the day before a holiday.",
"We highly recommend using \"Priority Overnight Shipping\" for morning deliveries, as it is generally more reliable.",
"We can pick up the sample from your institution (additional logistic charges will be applicable) or you can ship/drop samples at the mentioned address:"
];
return (
<div className="space-y-6">
<div>
@ -8,26 +14,21 @@ const ShippingSchedule = () => {
</div>
<div className="space-y-6">
<p className="leading-relaxed" style={{ color: '#555555' }}>
Before sending your samples, please notify us promptly by mail or by
completing the form online, including the Sample Initiation Form. This helps
us register and process your samples efficiently upon arrival. As we do not
receive packages on weekends, ensure your samples arrive on a weekday. Avoid
shipping samples just before weekends (e.g., on a Thursday for Friday
arrival) or the day before a holiday.
</p>
<ul className="space-y-4">
{guidelines.map((guideline, idx) => (
<li key={idx} className="flex items-start">
<span
className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<p className={`leading-relaxed ${idx === 1 ? 'font-medium' : ''}`} style={{ color: '#555555' }}>
{guideline}
</p>
</li>
))}
</ul>
<p className="leading-relaxed font-medium" style={{ color: '#555555' }}>
We highly recommend using "Priority Overnight Shipping" for morning
deliveries, as it is generally more reliable.
</p>
<p className="leading-relaxed" style={{ color: '#555555' }}>
We can pick up the sample from your institution (additional logistic charges
will be applicable) or you can ship/drop samples at the mentioned address:
</p>
<div >
<div>
<div className="leading-relaxed" style={{ color: '#555555' }}>
<div className="font-semibold text-lg text-teal-700 mb-3">
Operify Tech Pvt.Ltd.