UI styling update

app/components/PackagingShipping/DNASamples.jsx

@@ -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">
+          <ul className="space-y-4">
-            Picogreen quantification is advised from the client, in absence of which
+            {guidelines.map((guideline, idx) => (
-            an agarose Gel Electrophoresis and Nanodrop quantification must be
+              <li key={idx} className="flex items-start">
-            shared. Samples with A260/280 ratio values of ~1.8 are considered "pure"
+                <span 
-            for DNA and will be accepted for processing further.
+                  className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
-          </p>
+                  style={{backgroundColor: '#faae31'}}
-          
+                ></span>
-          <p className="text-gray-600 leading-relaxed">
+                <p className="text-gray-600 leading-relaxed">
-            For large-scale projects, please submit DNA samples in strip tubes or in
+                  {guideline}
-            well-sealed 96-well PCR plates with semi- or fully-skirted edges (we
+                </p>
-            recommend Eppendorf twin.tec PCR plate 96 LoBind). Arrange samples in a
+              </li>
-            column format (e.g., A1, B1, C1, D1, ..., A2, B2, C2, D2, ...) in
+            ))}
-            contiguous wells. Avoid skipping wells, rows, or columns.
+          </ul>
-          </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>
         </div>
         
         <div className="lg:w-96 flex justify-center">

app/components/PackagingShipping/PackagingGuideline.jsx

@@ -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' }}>
+        <ul className="space-y-4">
-          Seal the tubes with parafilm for transportation. To prevent the tubes from
+          {guidelines.map((guideline, idx) => (
-          being crushed and broken during transit (leading to sample loss), insert
+            <li key={idx} className="flex items-start">
-          sample tubes into 50 ml centrifuge tubes (or other rigid supports), which
+              <span 
-          can also be packed with cotton, foam, etc.
+                className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
-        </p>
+                style={{backgroundColor: '#faae31'}}
-        
+              ></span>
-        <p className="leading-relaxed" style={{ color: '#555555' }}>
+              <p className="leading-relaxed" style={{ color: '#555555' }}>
-          To prevent sample loss and/or cross-contamination, tightly seal all wells of
+                {guideline.split('\n').map((line, lineIdx) => (
-          the plate with an adhesive sheet or foil. Protect the plates or strip tubes
+                  <React.Fragment key={lineIdx}>
-          in a sturdy box with plenty of cushioning. Sample shipments of plates should
+                    {lineIdx > 0 && <br />}
-          be carried out on frozen blue ice or dry ice to ensure that the samples
+                    {line.startsWith('(a)') || line.startsWith('(b)') ? (
-          remain frozen during shipment.
+                      <>
-        </p>
+                        <span className="font-medium">{line.substring(0, 3)}</span>
-        
+                        {line.substring(3)}
-        <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
+                      line
-          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
+                  </React.Fragment>
-          remain frozen throughout shipment.
+                ))}
-        </p>
+              </p>
-        
+            </li>
-        <p className="leading-relaxed" style={{ color: '#555555' }}>
+          ))}
-          For leak prevention and to avoid cross-contamination, use one of the
+        </ul>
-          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>
       </div>
     </div>
   );

app/components/PackagingShipping/ShippingSchedule.jsx

@@ -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' }}>
+        <ul className="space-y-4">
-          Before sending your samples, please notify us promptly by mail or by
+          {guidelines.map((guideline, idx) => (
-          completing the form online, including the Sample Initiation Form. This helps
+            <li key={idx} className="flex items-start">
-          us register and process your samples efficiently upon arrival. As we do not
+              <span 
-          receive packages on weekends, ensure your samples arrive on a weekday. Avoid
+                className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
-          shipping samples just before weekends (e.g., on a Thursday for Friday
+                style={{backgroundColor: '#faae31'}}
-          arrival) or the day before a holiday.
+              ></span>
-        </p>
+              <p className={`leading-relaxed ${idx === 1 ? 'font-medium' : ''}`} style={{ color: '#555555' }}>
+                {guideline}
+              </p>
+            </li>
+          ))}
+        </ul>
         
-        <p className="leading-relaxed font-medium" style={{ color: '#555555' }}>
+        <div>
-          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 className="leading-relaxed" style={{ color: '#555555' }}>
             <div className="font-semibold text-lg text-teal-700 mb-3">
               Operify Tech Pvt.Ltd.