UI styling update

Dockerfile

@@ -1,75 +1,50 @@
-# Base image for all stages
-FROM node:20-alpine AS base
+# Use smaller base image
+FROM node:18-alpine AS base
 
-### Dependencies Stage ###
+# Install dependencies only when needed
 FROM base AS deps
-# Set a fast and reliable Alpine mirror
-# Check if 'git' is needed (only required if package.json has Git-based dependencies)
-RUN echo "https://mirrors.tuna.tsinghua.edu.cn/alpine/v3.22/main" > /etc/apk/repositories && \
-    echo "https://mirrors.tuna.tsinghua.edu.cn/alpine/v3.22/community" >> /etc/apk/repositories && \
-    apk update --verbose && \
-    apk add --no-cache --verbose libc6-compat git
-
-# Setup pnpm environment
-ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack enable
-RUN corepack prepare pnpm@latest --activate
-
+RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
-# Install dependencies with pnpm
-COPY package.json pnpm-lock.yaml ./
-RUN pnpm install --frozen-lockfile --prefer-frozen-lockfile
+# Copy package files
+COPY package.json pnpm-lock.yaml* ./
+RUN corepack enable pnpm && pnpm install --frozen-lockfile --production=false
 
-### Builder Stage ###
+# Build the source code
 FROM base AS builder
-# Enable pnpm
-RUN corepack enable
-RUN corepack prepare pnpm@latest --activate
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
 
+# Optimize build process
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NODE_ENV=production
+
+# Build with optimizations
+RUN corepack enable pnpm && \
+    pnpm build && \
+    pnpm prune --production
+
+# Production image
+FROM base AS runner
 WORKDIR /app
 
-# Copy node_modules from deps stage
-COPY --from=deps /app/node_modules ./node_modules
-# Copy all source files
-COPY . .
-# Debug: List files in components/research to verify presence
-# RUN ls -l /app/components/research/
-# Build the Next.js application
-RUN pnpm build
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
 
-### Production Runner Stage ###
-FROM base AS runner
-# Set production environment
-ENV NODE_ENV production
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
 
-# Disable Next.js telemetry
-# Learn more: https://nextjs.org/telemetry
-ENV NEXT_TELEMETRY_DISABLED 1
-
-# Create non-root user and set permissions
-RUN addgroup nodejs
-RUN adduser -SDH nextjs
-RUN mkdir .next
-RUN chown nextjs:nodejs .next
-
-# Copy built artifacts with correct ownership
+# Copy built application
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 COPY --from=builder --chown=nextjs:nodejs /app/public ./public
 
-# Switch to non-root user
 USER nextjs
 
-# Expose port for the application
 EXPOSE 3000
-ENV PORT 3000
-ENV HOSTNAME "0.0.0.0"
 
-# Healthcheck using curl (available in node:20-alpine, unlike wget)
-HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
-    CMD curl -f http://localhost:3000/health || exit 1
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
 
-# Start the Next.js application
 CMD ["node", "server.js"]

app/api/forms/route.js

@@ -30,21 +30,14 @@ const configs = {
   sample: {
     subject: 'SIF Form received for Project',
     fields: [
-      // Customer Information
       'Principal_Investigator', 'Email', 'Company_Institution', 'Contact_Number', 'Address', 'City', 'State', 'Pin',
       'Secondary_Contact', 'Secondary_Email', 'Secondary_Company_Institution', 'Secondary_Contact_Number',
-      
-      // Sample Information
       'Project_Title', 'Number_of_Samples', 'Sample_Type', 'Sample_Type_Other', 'Sample_Source', 'Sample_Source_Other',
       'Pathogenicity', 'Sample_Remarks',
-      
-      // Service Information
       'Service_Requested', 'Service_Requested_Other', 'Type_of_Library', 'Type_of_Library_Other',
       'Required_Library_Size', 'Required_Library_Size_Other', 'Index_Information', 'Kit_Information',
       'Sequencing_Platform', 'Sequencing_Platform_Other', 'Sequencing_Read_Length', 'Sequencing_Read_Length_Other',
       'Total_Data_Requirement', 'Service_Remarks',
-      
-      // Bioinformatics Information
       'Analysis_Requested', 'Analysis_Details', 'Reference_Genome_Available', 'Genome_Size', 'Special_Consideration'
     ],
     required: [
@@ -58,6 +51,24 @@ const configs = {
   }
 };
 
+// Serial number tracker
+let serialTracker = {};
+function generateSerialNumber() {
+  const today = new Date();
+  const dateKey = today.toISOString().slice(0, 10); // "YYYY-MM-DD"
+  if (!serialTracker[dateKey]) {
+    serialTracker[dateKey] = 1;
+  } else {
+    serialTracker[dateKey] += 1;
+  }
+  const serialNum = String(serialTracker[dateKey]).padStart(2, '0');
+  return {
+    serialNum,
+    formatted: `Operify Tech. ${today.getFullYear()}.${String(today.getMonth() + 1).padStart(2, '0')}.${String(today.getDate()).padStart(2, '0')}.${serialNum}`,
+    dateString: dateKey
+  };
+}
+
 // Utility functions
 function isValidEmail(email) {
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -77,7 +88,6 @@ export async function GET() {
 
 export async function POST(request) {
   try {
-    // Parse form data
     const formData = await request.formData();
     const data = {};
     const files = {};
@@ -92,7 +102,6 @@ export async function POST(request) {
 
     const form_type = data.form_type;
     
-    // Validate form type
     if (!form_type || !configs[form_type]) {
       return NextResponse.json({ 
         error: 'Invalid form type: ' + (form_type || 'missing') 
@@ -102,7 +111,6 @@ export async function POST(request) {
     const config = configs[form_type];
     const errors = [];
 
-    // Validate required fields
     for (const required_field of config.required) {
       if (!data[required_field] || String(data[required_field]).trim() === '') {
         errors.push(`The "${fieldName(required_field)}" field is required.`);
@@ -111,37 +119,28 @@ export async function POST(request) {
       }
     }
 
-    // Validate file upload for career form
     if (form_type === 'career') {
       const fileField = config.file_field;
       const uploadedFile = files[fileField];
-      
       if (!uploadedFile || uploadedFile.size === 0) {
         errors.push('Please upload your resume.');
       } else {
         const allowedExtensions = ['pdf', 'doc', 'docx'];
-        const fileName = uploadedFile.name.toLowerCase();
-        const fileExtension = fileName.split('.').pop();
-        
+        const fileExtension = uploadedFile.name.toLowerCase().split('.').pop();
         if (!allowedExtensions.includes(fileExtension)) {
           errors.push('Invalid file type. Please upload a PDF, DOC, or DOCX file.');
         }
-        
-        if (uploadedFile.size > 10 * 1024 * 1024) { // 10MB limit
+        if (uploadedFile.size > 10 * 1024 * 1024) {
           errors.push('File is too large. Maximum size is 10MB.');
         }
       }
     }
 
     if (errors.length > 0) {
-      return NextResponse.json({ 
-        error: errors.join(' ') 
-      }, { status: 400 });
+      return NextResponse.json({ error: errors.join(' ') }, { status: 400 });
     }
 
-    // Construct email body
     let emailBody = `<h2>${config.subject}</h2><table style="border: 1px solid #b5b5b5; padding: 5px;">`;
-    
     for (const [key, value] of Object.entries(data)) {
       if (config.fields.includes(key) && key !== 'form_type' && key !== 'sample_details') {
         emailBody += `<tr>
@@ -151,7 +150,6 @@ export async function POST(request) {
       }
     }
 
-    // Add file info if uploaded
     if (form_type === 'career' && files.resume) {
       emailBody += `<tr>
         <td style="border: 1px solid #b5b5b5; padding: 5px;"><strong>Resume</strong></td>
@@ -159,20 +157,17 @@ export async function POST(request) {
       </tr>`;
     }
 
-    // Add sample details for sample form
     if (form_type === 'sample' && data.sample_details) {
       try {
         const sampleDetails = JSON.parse(data.sample_details);
-        if (sampleDetails && sampleDetails.length > 0) {
+        if (sampleDetails.length > 0) {
           emailBody += `<tr>
             <td colspan="2" style="border: 1px solid #b5b5b5; padding: 10px; background-color: #e8f5f3; text-align: center;"><strong>SAMPLE DETAILS</strong></td>
           </tr>`;
-          
           sampleDetails.forEach((sample, index) => {
             emailBody += `<tr>
               <td colspan="2" style="border: 1px solid #b5b5b5; padding: 8px; background-color: #f0f8f5; font-weight: bold;">Sample ${index + 1}</td>
             </tr>`;
-            
             Object.entries(sample).forEach(([key, value]) => {
               if (value && String(value).trim() !== '') {
                 emailBody += `<tr>
@@ -183,25 +178,16 @@ export async function POST(request) {
             });
           });
         }
-      } catch (error) {
-        console.error('Error parsing sample details:', error);
+      } catch {
         emailBody += `<tr>
           <td colspan="2" style="border: 1px solid #b5b5b5; padding: 5px; color: red;">Error: Could not parse sample details</td>
         </tr>`;
       }
     }
-
     emailBody += '</table>';
 
-    // Determine reply-to email based on form type
-    let replyToEmail;
-    if (form_type === 'sample') {
-      replyToEmail = data.Email;
-    } else {
-      replyToEmail = data.email;
-    }
+    let replyToEmail = form_type === 'sample' ? data.Email : data.email;
 
-    // Create transporter
     const transporter = nodemailer.createTransport({
       host: 'smtp.gmail.com',
       port: 587,
@@ -212,17 +198,24 @@ export async function POST(request) {
       },
     });
 
-    // Prepare email options
+    // SERIAL NUMBER LOGIC
+    let serialInfo;
+    if (form_type === 'sample') {
+      serialInfo = generateSerialNumber();
+    }
+
+    // Internal mail
     const mailOptions = {
       from: `${emailConfig.from_email_name} <${emailConfig.from_email}>`,
       to: `${emailConfig.to_email_name} <${emailConfig.to_email}>`,
       replyTo: replyToEmail || emailConfig.from_email,
-      subject: config.subject,
+      subject: form_type === 'sample'
+        ? `${data.Company_Institution} | ${data.Principal_Investigator} | ${serialInfo.dateString} | ${serialInfo.formatted}`
+        : config.subject,
       html: emailBody,
-      text: emailBody.replace(/<[^>]*>/g, ''), // Strip HTML for text version
+      text: emailBody.replace(/<[^>]*>/g, '')
     };
 
-    // Add attachment for career form
     if (form_type === 'career' && files.resume) {
       const fileBuffer = await files.resume.arrayBuffer();
       mailOptions.attachments = [{
@@ -231,18 +224,24 @@ export async function POST(request) {
       }];
     }
 
-    // Send email
     await transporter.sendMail(mailOptions);
 
-    return NextResponse.json({ 
-      success: true, 
-      message: config.successMessage
-    });
+    // PI email for sample form
+    if (form_type === 'sample') {
+      const piMailOptions = {
+        from: `${emailConfig.from_email_name} <${emailConfig.from_email}>`,
+        to: `${data.Principal_Investigator} <${data.Email}>`,
+        subject: `SIF Form received for Project with - ${serialInfo.formatted}`,
+        html: emailBody,
+        text: emailBody.replace(/<[^>]*>/g, '')
+      };
+      await transporter.sendMail(piMailOptions);
+    }
+
+    return NextResponse.json({ success: true, message: config.successMessage });
 
   } catch (error) {
     console.error('Email sending error:', error);
-    return NextResponse.json({ 
-      error: 'Error sending email. Please try again later.' 
-    }, { status: 500 });
+    return NextResponse.json({ error: 'Error sending email. Please try again later.' }, { status: 500 });
   }
-}
+}

app/components/About/NGSSection.jsx

@@ -45,7 +45,7 @@ const NGSSection = () => {
       description: "Rapid sequencing of large genetic material be completed within a comparatively short duration, thereby yielding quick results."
     },
     {
-      icon: "/images/homepage-1/service/Advantages-NGS-Icons-24.svg",
+      icon: "/images/homepage-1/service/BioinformaticsAnalysis.svg",
       title: "Bioinformatics Analysis",
       description: "NGS produces vast amounts of data, supporting complex research through advanced bioinformatic analysis."
     }

app/components/Career/CareerPage.jsx

@@ -6,7 +6,7 @@ const CareerPage = () => {
   return (
     <div className="page-content contact-us">
         <CareerHero />
-      <div className="h-6"></div>
+      {/* <div className="h-2"></div> */}
       <CareerSection />
     </div>
   );

app/components/Career/CareerSection.jsx

@@ -4,7 +4,7 @@ import CareerInfo from './CareerInfo';
 
 const CareerSection = () => {
   return (
-    <section className="py-10 md:py-16 lg:py-6">
+    <section className="py-10 md:py-16 lg:py-2">
       <div className="container mx-auto max-w-none px-4">
         <div className="flex flex-col lg:flex-row gap-6">
           <CareerInfo />

app/components/Company/CompanyHero.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const CompanyHero = () => {
   return (
     <section 
-      className="relative bg-cover bg-center py-6 h-24" 
+      className="relative bg-cover bg-center py-6 h-26" 
       style={{ backgroundImage: "url('images/bredcrumb.jpg')" }}
     >
       {/* Breadcrumb */}

app/components/ContactPage/ContactPage.js

@@ -7,7 +7,7 @@ const ContactPage = () => {
   return (
     <div className="page-content contact-us">
       <PageTitle />
-      <div className="h-6"></div>
+      {/* <div className="h-6"></div> */}
       <ContactSection />
       <ContactMap />
     </div>

app/components/Layout/Footer.jsx

@@ -39,7 +39,7 @@ const Footer = () => {
             </address>
 
             {/* Social Links */}
-            <div className="flex space-x-4 mt-8">
+            <div className="flex mt-8">
               <a 
                 href="#" 
                 target="_blank" 
@@ -136,7 +136,7 @@ const Footer = () => {
         <div className="container mx-auto px-4 py-4">
           <div className="flex flex-col md:flex-row justify-between items-center text-sm">
             <p>
-              Copyright © 2024 <span className="text-gray-800 font-medium">Operify</span> All Rights Reserved.
+              Copyright © 2025 <span className="text-gray-800 font-medium">Operify</span> All Rights Reserved.
             </p>
             <ul className="flex space-x-6 mt-3 md:mt-0">
               <li><Link href="#" className="hover:text-gray-800 transition-colors">Privacy Policy</Link></li>

app/components/Layout/Header.jsx

@@ -57,7 +57,7 @@ const Header = () => {
                 >
                   Research
                 </Link>
-                {/* <ul className="absolute top-full left-0 bg-white shadow-lg rounded-md py-2 w-48 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
+                <ul className="absolute top-full left-0 bg-white shadow-lg rounded-md py-2 w-48 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
                   <li className="relative group/dna">
                     <Link
                       href="/dna-sequencing"
@@ -80,14 +80,14 @@ const Header = () => {
                           </svg>
                         </Link>
                         <ul className="absolute top-0 left-full bg-white shadow-xl rounded-md py-2 w-72 opacity-0 invisible group-hover/wgs:opacity-100 group-hover/wgs:visible transition-all duration-300 z-50 border border-gray-100 ml-1">
-                          <li>
+                          {/* <li>
                             <Link
                               href="/dna-sequencing/whole-genome-sequencing"
                               className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
                             >
                               Whole Genome Sequencing
                             </Link>
-                          </li>
+                          </li> */}
                           <li>
                             <Link
                               href="/dna-sequencing/whole-genome-sequencing/denovo"
@@ -117,14 +117,14 @@ const Header = () => {
                           </svg>
                         </Link>
                         <ul className="absolute top-0 left-full bg-white shadow-xl rounded-md py-2 w-72 opacity-0 invisible group-hover/enrichment:opacity-100 group-hover/enrichment:visible transition-all duration-300 z-50 border border-gray-100 ml-1">
-                          <li>
+                          {/* <li>
                             <Link
                               href="/dna-sequencing/enrichment-sequencing"
                               className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
                             >
                               Enrichment Sequencing
                             </Link>
-                          </li>
+                          </li> */}
                           <li>
                             <Link
                               href="/dna-sequencing/enrichment-sequencing/whole-exome"
@@ -178,14 +178,14 @@ const Header = () => {
                           </svg>
                         </Link>
                         <ul className="absolute top-0 left-full bg-white shadow-xl rounded-md py-2 w-72 opacity-0 invisible group-hover/epigenomics:opacity-100 group-hover/epigenomics:visible transition-all duration-300 z-50 border border-gray-100 ml-1">
-                          <li>
+                          {/* <li>
                             <Link
                               href="/dna-sequencing/epigenomics-sequencing"
                               className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
                             >
                               Epigenomics Sequencing
                             </Link>
-                          </li>
+                          </li> */}
                           <li>
                             <Link
                               href="/dna-sequencing/epigenomics-sequencing/wgbs"
@@ -223,14 +223,14 @@ const Header = () => {
                           </svg>
                         </Link>
                         <ul className="absolute top-0 left-full bg-white shadow-xl rounded-md py-2 w-72 opacity-0 invisible group-hover/genome-mapping:opacity-100 group-hover/genome-mapping:visible transition-all duration-300 z-50 border border-gray-100 ml-1">
-                          <li>
+                          {/* <li>
                             <Link
                               href="/dna-sequencing/genome-mapping"
                               className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
                             >
                               Genome Mapping
                             </Link>
-                          </li>
+                          </li> */}
                           <li>
                             <Link
                               href="/dna-sequencing/genome-mapping/hi-c-mapping"
@@ -285,7 +285,7 @@ const Header = () => {
                   </li>
                   <li className="relative group/rna">
                     <Link
-                      href="/rna-sequencing"
+                      href="rna-sequencing"
                       className="flex items-center justify-between px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
                     >
                       <span className="font-medium">RNA Sequencing</span>
@@ -368,16 +368,34 @@ const Header = () => {
                       </li>
                     </ul>
                   </li>
-                </ul> */}
+                </ul>
               </li>
-              <li>
+              <li className="relative group">
                 <Link
-                  href="/#"
+                  href="/health"
                   className="font-semibold text-lg py-2 hover:text-teal-700 transition-colors"
                   style={{ color: '#2a6564' }}
                 >
                   Health
                 </Link>
+                <ul className="absolute top-full left-0 bg-white shadow-lg rounded-md py-2 w-64 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
+                  <li>
+                    <Link
+                      href="/health/rare-disorders"
+                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
+                    >
+                      Rare Disorders
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      href="/health/oncology"
+                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
+                    >
+                      Oncology
+                    </Link>
+                  </li>
+                </ul>
               </li>
               <li className="relative group">
                 <Link

app/components/PackagingShipping/DNASamples.jsx

@@ -1,35 +1,33 @@
-// 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>
-        <h3 className="text-2xl font-semibold text-gray-700 mb-6">Shipping of DNA Samples</h3>
+        <h3 className="text-3xl font-bold text-teal-700 mb-4">Shipping of DNA Samples</h3>
       </div>
       
       <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">

app/components/PackagingShipping/GeneralGuidelines.jsx

@@ -4,7 +4,7 @@ const GeneralGuidelines = () => {
   return (
     <div className="space-y-6">
       <div>
-        <h3 className="text-2xl font-semibold mb-6" style={{ color: '#555555' }}>General Guidelines</h3>
+        <h3 className="text-3xl font-bold text-teal-700 mb-4">General Guidelines</h3>
       </div>
       
       <div className="space-y-6">

app/components/PackagingShipping/PackagingGuideline.jsx

@@ -1,46 +1,45 @@
 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>
-        <h3 className="text-2xl font-semibold mb-6" style={{ color: '#555555' }}>Packaging Guideline</h3>
+        <h3 className="text-3xl font-bold text-teal-700 mb-4">Packaging Guideline</h3>
       </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>
   );

app/components/PackagingShipping/PageTitle.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const PageTitle = () => {
   return (
     <section 
-      className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-24 min-h-[120px] sm:min-h-[140px]" 
+      className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-24 min-h-[120px] sm:min-h-[120px]" 
       style={{ backgroundImage: "url('images/bredcrumb.jpg')" }}
     >
       {/* Breadcrumb */}

app/components/PackagingShipping/RNASamples.jsx

@@ -4,40 +4,50 @@ const RNASamples = () => {
   return (
     <div className="space-y-6">
       <div>
-        <h3 className="text-2xl font-semibold mb-6" style={{ color: '#555555' }}>Shipping of RNA Samples</h3>
+        <h3 className="text-3xl font-bold text-teal-700 mb-4">Shipping of RNA Samples</h3>
       </div>
       
       <div className="space-y-6">
-        <p className="leading-relaxed" style={{ color: '#555555' }}>
-          Bioanalyzer QC report is advised to be shared from the client's end, in the
-          absence of which an agarose Gel Electrophoresis and Nanodrop quantification
-          to confirm the integrity of RNA 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="leading-relaxed" style={{ color: '#555555' }}>
-          We require Bioanalyzer traces (or similar) for all customer-submitted
-          sequencing libraries and total RNA samples. If traces are not provided, we
-          will perform Bioanalyzer QC for an additional fee. If you can supply traces,
-          please include them into the shipment in hard copy. Also, ensure that your
-          samples meet the specified sample or library requirements [LINK].
-        </p>
-        
-        <p className="leading-relaxed" style={{ color: '#555555' }}>
-          For large-scale projects, RNA samples can be submitted in strip tubes with
-          individually attached RNase-free caps. Pack the strips into racks (e.g.,
-          empty pipet tip boxes) and ensure they are secured to prevent movement
-          during transport.
-        </p>
-        
-        <p className="leading-relaxed" style={{ color: '#555555' }}>
-          RNA, cells, bacteria, and frozen tissue samples should be stored in liquid
-          nitrogen for rapid freezing and then transported with dry ice. For longer
-          shipments, RNA samples can also be successfully shipped dry at room
-          temperature after LiCl/ethanol precipitation and ethanol washes; make sure
-          to mark the pellet's position on the tubes.
-        </p>
+        <ul className="list-disc list-inside space-y-4 leading-relaxed pl-4">
+          <li className="text-justify" style={{color: '#faae31'}}>
+            <span style={{color: '#555555'}}>
+              Bioanalyzer QC report is advised to be shared from the client's end, in the
+              absence of which an agarose Gel Electrophoresis and Nanodrop quantification
+              to confirm the integrity of RNA must be shared. Samples with A260/280 ratio
+              values of ~1.8 are considered "pure" for DNA and will be accepted for
+              processing further.
+            </span>
+          </li>
+          
+          <li className="text-justify" style={{color: '#faae31'}}>
+            <span style={{color: '#555555'}}>
+              We require Bioanalyzer traces (or similar) for all customer-submitted
+              sequencing libraries and total RNA samples. If traces are not provided, we
+              will perform Bioanalyzer QC for an additional fee. If you can supply traces,
+              please include them into the shipment in hard copy. Also, ensure that your
+              samples meet the specified sample or library requirements [LINK].
+            </span>
+          </li>
+          
+          <li className="text-justify" style={{color: '#faae31'}}>
+            <span style={{color: '#555555'}}>
+              For large-scale projects, RNA samples can be submitted in strip tubes with
+              individually attached RNase-free caps. Pack the strips into racks (e.g.,
+              empty pipet tip boxes) and ensure they are secured to prevent movement
+              during transport.
+            </span>
+          </li>
+          
+          <li className="text-justify" style={{color: '#faae31'}}>
+            <span style={{color: '#555555'}}>
+              RNA, cells, bacteria, and frozen tissue samples should be stored in liquid
+              nitrogen for rapid freezing and then transported with dry ice. For longer
+              shipments, RNA samples can also be successfully shipped dry at room
+              temperature after LiCl/ethanol precipitation and ethanol washes; make sure
+              to mark the pellet's position on the tubes.
+            </span>
+          </li>
+        </ul>
       </div>
     </div>
   );

app/components/PackagingShipping/ShippingSchedule.jsx

@@ -1,33 +1,34 @@
 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>
-        <h3 className="text-2xl font-semibold mb-6" style={{ color: '#555555' }}>Shipping Schedule and Address</h3>
+        <h3 className="text-3xl font-bold text-teal-700 mb-4">Shipping Schedule and Address</h3>
       </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.

app/components/PackagingShipping/ShippingTemperatureTable.jsx

@@ -129,7 +129,7 @@ const ShippingTemperatureTable = () => {
   return (
     <div className="space-y-6">
       <div>
-        <h3 className="text-2xl font-semibold text-gray-700 mb-6">Shipping Temperature and Condition</h3>
+        <h3 className="text-3xl font-bold text-teal-700 mb-4">Shipping Temperature and Condition</h3>
       </div>
       
       <div className="space-y-6">
@@ -142,8 +142,8 @@ const ShippingTemperatureTable = () => {
           <table className="w-full border-collapse border border-gray-300 text-sm">
             <colgroup>
               <col style={{width: '25%'}} />
-              <col style={{width: '25%'}} />
-              <col style={{width: '50%'}} />
+              <col style={{width: '40%'}} />
+              <col style={{width: '35%'}} />
             </colgroup>
             <thead>
               <tr className="bg-teal-50">

app/components/SampleForm/PageTitle.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const PageTitle = () => {
   return (
     <section 
-      className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-24 min-h-[120px] sm:min-h-[140px]" 
+      className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-24 min-h-[120px] sm:min-h-[120px]" 
       style={{ backgroundImage: "url('images/bredcrumb.jpg')" }}
     >
       {/* Breadcrumb */}

app/components/SampleForm/SampleFormContainer.jsx

@@ -8,70 +8,29 @@ import SampleDetailsSection from './SampleDetailsSection';
 
 const SampleFormContainer = () => {
   const [formData, setFormData] = useState({
-    // Customer Information
-    Principal_Investigator: '',
-    Email: '',
-    Company_Institution: '',
-    Contact_Number: '',
-    Address: '',
-    City: '',
-    State: '',
-    Pin: '',
-    Secondary_Contact: '',
-    Secondary_Email: '',
-    Secondary_Company_Institution: '',
-    Secondary_Contact_Number: '',
-    
-    // Sample Information
-    Project_Title: '',
-    Number_of_Samples: '',
-    Sample_Type: '',
-    Sample_Type_Other: '',
-    Sample_Source: '',
-    Sample_Source_Other: '',
-    Pathogenicity: '',
-    Sample_Remarks: '',
-    
-    // Service Information
-    Service_Requested: '',
-    Service_Requested_Other: '',
-    Type_of_Library: '',
-    Type_of_Library_Other: '',
-    Required_Library_Size: '',
-    Required_Library_Size_Other: '',
-    Index_Information: '',
-    Kit_Information: '',
-    Sequencing_Platform: '',
-    Sequencing_Platform_Other: '',
-    Sequencing_Read_Length: '',
-    Sequencing_Read_Length_Other: '',
-    Total_Data_Requirement: '',
-    Service_Remarks: '',
-    
-    // Bioinformatics Information
-    Analysis_Requested: '',
-    Analysis_Details: '',
-    Reference_Genome_Available: '',
-    Genome_Size: '',
-    Special_Consideration: '',
+    Principal_Investigator: '', Email: '', Company_Institution: '', Contact_Number: '',
+    Address: '', City: '', State: '', Pin: '', Secondary_Contact: '', Secondary_Email: '',
+    Secondary_Company_Institution: '', Secondary_Contact_Number: '', Project_Title: '',
+    Number_of_Samples: '', Sample_Type: '', Sample_Type_Other: '', Sample_Source: '',
+    Sample_Source_Other: '', Pathogenicity: '', Sample_Remarks: '', Service_Requested: '',
+    Service_Requested_Other: '', Type_of_Library: '', Type_of_Library_Other: '',
+    Required_Library_Size: '', Required_Library_Size_Other: '', Index_Information: '',
+    Kit_Information: '', Sequencing_Platform: '', Sequencing_Platform_Other: '',
+    Sequencing_Read_Length: '', Sequencing_Read_Length_Other: '', Total_Data_Requirement: '',
+    Service_Remarks: '', Analysis_Requested: '', Analysis_Details: '',
+    Reference_Genome_Available: '', Genome_Size: '', Special_Consideration: ''
   });
 
-  const [sampleDetails, setSampleDetails] = useState([
-    {
-      Serial_Number: '',
-      Sample_Name: '',
-      Storage_Temp: '',
-      Preservative_Reagent: '',
-      Temp_Information: '',
-      Comments: ''
-    }
-  ]);
+  const [sampleDetails, setSampleDetails] = useState([{
+    Serial_Number: '', Sample_Name: '', Storage_Temp: '',
+    Preservative_Reagent: '', Temp_Information: '', Comments: ''
+  }]);
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [message, setMessage] = useState('');
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
 
   useEffect(() => {
-    // Check for Excel data in sessionStorage
     const excelData = sessionStorage.getItem('excelData');
     const uploadedFileName = sessionStorage.getItem('uploadedFileName');
 
@@ -79,11 +38,8 @@ const SampleFormContainer = () => {
       try {
         const jsonData = JSON.parse(excelData);
         autoFillForm(jsonData);
-        
-        // Clear stored data
         sessionStorage.removeItem('excelData');
         sessionStorage.removeItem('uploadedFileName');
-        
         setMessage(`Form auto-filled from uploaded file: ${uploadedFileName}`);
       } catch (error) {
         console.error('Error parsing Excel data:', error);
@@ -93,14 +49,10 @@ const SampleFormContainer = () => {
 
   const autoFillForm = (jsonData) => {
     if (jsonData.length === 0) return;
-
     const data = jsonData[0];
     const newFormData = { ...formData };
-
-    // Helper function to safely get value
     const getValue = (key) => data[key] ? data[key].toString().trim() : '';
 
-    // Customer Information
     newFormData.Principal_Investigator = getValue('Principal Investigator');
     newFormData.Email = getValue('Email');
     newFormData.Company_Institution = getValue('Company/Institution');
@@ -114,7 +66,6 @@ const SampleFormContainer = () => {
     newFormData.Secondary_Company_Institution = getValue('Secondary Company/Institution');
     newFormData.Secondary_Contact_Number = getValue('Secondary Contact Number');
 
-    // Sample Information
     newFormData.Project_Title = getValue('Project Title');
     newFormData.Number_of_Samples = getValue('Number of Samples');
     newFormData.Sample_Type = getValue('Sample Type');
@@ -124,7 +75,6 @@ const SampleFormContainer = () => {
     newFormData.Pathogenicity = getValue('Pathogenicity');
     newFormData.Sample_Remarks = getValue('Sample Remarks');
 
-    // Service Information
     newFormData.Service_Requested = getValue('Service Requested');
     newFormData.Service_Requested_Other = getValue('Service Requested Other');
     newFormData.Type_of_Library = getValue('Type of Library');
@@ -140,7 +90,6 @@ const SampleFormContainer = () => {
     newFormData.Total_Data_Requirement = getValue('Total Data Requirement');
     newFormData.Service_Remarks = getValue('Service Remarks');
 
-    // Bioinformatics Information
     newFormData.Analysis_Requested = getValue('Analysis Requested');
     newFormData.Analysis_Details = getValue('Analysis Details');
     newFormData.Reference_Genome_Available = getValue('Reference Genome Available');
@@ -149,21 +98,20 @@ const SampleFormContainer = () => {
 
     setFormData(newFormData);
 
-    // Handle Sample Details
-    const sampleDetailsData = jsonData.filter(row => 
-      row['Serial Number'] || row['Sample Name'] || 
-      row['Storage Temp'] || row['Preservative Reagent'] || 
+    const sampleDetailsData = jsonData.filter(row =>
+      row['Serial Number'] || row['Sample Name'] ||
+      row['Storage Temp'] || row['Preservative Reagent'] ||
       row['Temp Information'] || row['Comments']
     );
 
     if (sampleDetailsData.length > 0) {
       const newSampleDetails = sampleDetailsData.map(sample => ({
-        Serial_Number: getValue('Serial Number'),
-        Sample_Name: getValue('Sample Name'),
-        Storage_Temp: getValue('Storage Temp'),
-        Preservative_Reagent: getValue('Preservative Reagent'),
-        Temp_Information: getValue('Temp Information'),
-        Comments: getValue('Comments')
+        Serial_Number: sample['Serial Number'] || '',
+        Sample_Name: sample['Sample Name'] || '',
+        Storage_Temp: sample['Storage Temp'] || '',
+        Preservative_Reagent: sample['Preservative Reagent'] || '',
+        Temp_Information: sample['Temp Information'] || '',
+        Comments: sample['Comments'] || ''
       }));
       setSampleDetails(newSampleDetails);
     }
@@ -179,37 +127,28 @@ const SampleFormContainer = () => {
   const handleSubmit = async (e) => {
     e.preventDefault();
     setIsSubmitting(true);
-    setMessage(''); // Clear previous messages
-    
+    setMessage('');
     try {
       const formDataToSend = new FormData();
-      
-      // Add form data
       Object.keys(formData).forEach(key => {
         if (formData[key]) {
           formDataToSend.append(key, formData[key]);
         }
       });
-      
-      // Add sample details as JSON string
       formDataToSend.append('sample_details', JSON.stringify(sampleDetails));
       formDataToSend.append('form_type', 'sample');
 
-      console.log('Submitting form data:', formData);
-      console.log('Sample details:', sampleDetails);
-
       const response = await fetch('/api/forms', {
         method: 'POST',
         body: formDataToSend,
       });
 
       const result = await response.json();
-      console.log('API Response:', result);
-      
+
       if (response.ok) {
         setMessage(result.message);
-        
-        // Reset form after successful submission
+        setShowSuccessModal(true); // show modal instead of green alert
+
         setFormData({
           Principal_Investigator: '', Email: '', Company_Institution: '', Contact_Number: '',
           Address: '', City: '', State: '', Pin: '', Secondary_Contact: '', Secondary_Email: '',
@@ -223,7 +162,6 @@ const SampleFormContainer = () => {
           Service_Remarks: '', Analysis_Requested: '', Analysis_Details: '',
           Reference_Genome_Available: '', Genome_Size: '', Special_Consideration: ''
         });
-        
         setSampleDetails([{
           Serial_Number: '', Sample_Name: '', Storage_Temp: '',
           Preservative_Reagent: '', Temp_Information: '', Comments: ''
@@ -231,7 +169,6 @@ const SampleFormContainer = () => {
       } else {
         setMessage('Error: ' + (result.error || 'Form submission failed'));
       }
-      
     } catch (error) {
       console.error('Error submitting form:', error);
       setMessage('Error: Network error. Please check your connection and try again.');
@@ -244,41 +181,22 @@ const SampleFormContainer = () => {
     <div className="bg-teal-50 min-h-screen py-8">
       <div className="max-w-4xl mx-auto bg-teal-50 shadow-lg border border-gray-300 font-arial text-xs">
         <form onSubmit={handleSubmit} className="space-y-6">
-          {/* Show message if exists */}
-          {message && (
+
+          {/* Only show red alert for errors */}
+          {message && message.includes('Error') && (
             <div className="mx-6 mt-6">
-              <div className={`p-4 rounded ${message.includes('Error') ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'}`}>
+              <div className="p-4 rounded bg-red-100 text-red-800">
                 {message}
               </div>
             </div>
           )}
 
-          <CustomerInfoSection 
-            formData={formData} 
-            onInputChange={handleInputChange} 
-          />
-          
-          <SampleInfoSection 
-            formData={formData} 
-            onInputChange={handleInputChange} 
-          />
-          
-          <ServiceInfoSection 
-            formData={formData} 
-            onInputChange={handleInputChange} 
-          />
-          
-          <BioinformaticsSection 
-            formData={formData} 
-            onInputChange={handleInputChange} 
-          />
-          
-          <SampleDetailsSection 
-            sampleDetails={sampleDetails}
-            setSampleDetails={setSampleDetails}
-          />
+          <CustomerInfoSection formData={formData} onInputChange={handleInputChange} />
+          <SampleInfoSection formData={formData} onInputChange={handleInputChange} />
+          <ServiceInfoSection formData={formData} onInputChange={handleInputChange} />
+          <BioinformaticsSection formData={formData} onInputChange={handleInputChange} />
+          <SampleDetailsSection sampleDetails={sampleDetails} setSampleDetails={setSampleDetails} />
 
-          {/* Submit Button */}
           <div className="text-center py-6">
             <button
               type="submit"
@@ -290,8 +208,50 @@ const SampleFormContainer = () => {
           </div>
         </form>
       </div>
+
+      {/* Success Modal */}
+      {/* Success Modal */}
+      {showSuccessModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full text-center animate-pulse">
+            {/* Animated Check Circle */}
+            <div className="flex justify-center mb-4">
+              <div className="relative">
+                {/* Outer ring animation */}
+                <div className="w-20 h-20 border-4 border-green-200 rounded-full animate-ping absolute"></div>
+                <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center animate-bounce relative z-10">
+                  {/* Checkmark */}
+                  <svg
+                    className="w-10 h-10 text-white animate-pulse"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="4"
+                      d="M5 13l4 4L19 7"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+
+            <h2 className="text-lg font-semibold text-green-700 mb-4 animate-pulse">Submitted Successfully!</h2>
+            <p className="text-gray-700 mb-6">{message}</p>
+            <button
+              onClick={() => setShowSuccessModal(false)}
+              className="bg-teal-600 hover:bg-teal-700 text-white py-2 px-4 rounded transition-all duration-200 transform hover:scale-105"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
 
-export default SampleFormContainer;
+export default SampleFormContainer;

app/components/SampleGuideline/ContentSection.jsx

@@ -18,7 +18,7 @@ const ContentSection = () => {
 
   return (
     <section className="pt-4 pb-8">
-      <div className="container mx-auto max-w-none px-4">
+      <div className="container max-w-none px-4">
         <div className="grid xl:grid-cols-[280px_1fr] gap-8">
           {/* LEFT SIDEBAR */}
           <div className="xl:sticky xl:top-8">

app/components/SampleGuideline/GeneralGuidelines.jsx

@@ -4,46 +4,58 @@ const GeneralGuidelines = () => {
   return (
     <div className="space-y-6">
       <div className="mb-6">
-        <h3 className="text-2xl font-semibold text-gray-600 mb-4">General Guidelines</h3>
+        <h3 className="text-3xl font-bold text-teal-700 mb-4">General Guidelines</h3>
       </div>
       
       <div className="prose max-w-none">
-        <ul className="space-y-4 text-gray-700 leading-relaxed pl-5">
-          <li className="list-disc">
-            Please complete the Sample Initiation Form (SIF), ensuring that the
-            sample names on the form match the labels on the sample tubes. We also
-            request that you send an electronic copy of the form and any required QC
-            data via email.
+        <ul className="space-y-4 text-gray-700 leading-relaxed pl-5" style={{listStyleType: 'disc'}}>
+          <li className="list-disc" style={{color: '#faae31'}}>
+            <span style={{color: '#374151'}}>
+              Please complete the Sample Initiation Form (SIF), ensuring that the
+              sample names on the form match the labels on the sample tubes. We also
+              request that you send an electronic copy of the form and any required QC
+              data via email.
+            </span>
           </li>
-          <li className="list-disc">
-            Each tube should be labeled on the lid with a maximum of 4-6
-            alphanumeric characters (e.g., 4B0001). Use a black permanent marker to
-            write sample names on the top and side of each tube. Avoid writing
-            directly on the tube wall or cover with an oil pen.
+          <li className="list-disc" style={{color: '#faae31'}}>
+            <span style={{color: '#374151'}}>
+              Each tube should be labeled on the lid with a maximum of 4-6
+              alphanumeric characters (e.g., 4B0001). Use a black permanent marker to
+              write sample names on the top and side of each tube. Avoid writing
+              directly on the tube wall or cover with an oil pen.
+            </span>
           </li>
-          <li className="list-disc">
-            DNA can be submitted in DNase-free water, Elution Buffer, or 10mM Tris
-            pH 8.0. DNA samples should have an OD260/280 ratio as close to 1.8~2.0
-            as possible. All DNA should be RNase-treated and free from degradation
-            or contamination. Ship with ice packs. The total amount of DNA required
-            depends on the specific application.
+          <li className="list-disc" style={{color: '#faae31'}}>
+            <span style={{color: '#374151'}}>
+              DNA can be submitted in DNase-free water, Elution Buffer, or 10mM Tris
+              pH 8.0. DNA samples should have an OD260/280 ratio as close to 1.8~2.0
+              as possible. All DNA should be RNase-treated and free from degradation
+              or contamination. Ship with ice packs. The total amount of DNA required
+              depends on the specific application.
+            </span>
           </li>
-          <li className="list-disc">
-            RNA can be submitted in RNase-free water, RNA Stabilization Reagent, or
-            10mM Tris pH 8.0. All total RNA samples should be DNA-free, with an OD
-            A260/A280 ratio ≥ 1.8, A260/230 ratio ≥ 1.8, and a RIN ≥ 6. Ship with
-            dry ice. The total amount of RNA required depends on the specific
-            application. For Long Read Sequencing, RNA samples should have a RIN ≥
-            8.
+          <li className="list-disc" style={{color: '#faae31'}}>
+            <span style={{color: '#374151'}}>
+              RNA can be submitted in RNase-free water, RNA Stabilization Reagent, or
+              10mM Tris pH 8.0. All total RNA samples should be DNA-free, with an OD
+              A260/A280 ratio ≥ 1.8, A260/230 ratio ≥ 1.8, and a RIN ≥ 6. Ship with
+              dry ice. The total amount of RNA required depends on the specific
+              application. For Long Read Sequencing, RNA samples should have a RIN ≥
+              8.
+            </span>
           </li>
-          <li className="list-disc">
-            The listed concentrations should be determined by fluorometry (e.g.,
-            PicoGreen/Qubit/RiboGreen). If using spectrophotometry (e.g., Nanodrop),
-            increase concentrations by approximately twofold.
+          <li className="list-disc" style={{color: '#faae31'}}>
+            <span style={{color: '#374151'}}>
+              The listed concentrations should be determined by fluorometry (e.g.,
+              PicoGreen/Qubit/RiboGreen). If using spectrophotometry (e.g., Nanodrop),
+              increase concentrations by approximately twofold.
+            </span>
           </li>
-          <li className="list-disc">
-            The quality inspection method for the sizes and concentrations of the
-            Ready To Run Library is Qubit and Agilent Bioanalyzer.
+          <li className="list-disc" style={{color: '#faae31'}}>
+            <span style={{color: '#374151'}}>
+              The quality inspection method for the sizes and concentrations of the
+              Ready To Run Library is Qubit and Agilent Bioanalyzer.
+            </span>
           </li>
         </ul>
       </div>

app/components/SampleGuideline/IntroSection.jsx

@@ -2,11 +2,11 @@ import React from 'react';
 
 const IntroSection = () => {
   return (
-    <section className="bg-white mx-4 md:mx-8  mt-4 mb-4 py-4">
-      <div className="container mx-auto max-w-none px-4">
-        <div className="text-gray-600 max-w-none leading-relaxed text-center">
-          <div className="text-base text-justify">
-            <p className="m-0">
+    <section className="py-0">
+      <div className="container-fluid">
+        <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8  flex items-center">
+          <div className="w-full">
+            <p className="leading-relaxed text-base text-justify m-0">
               We humbly offer a wide range of services, including genomics, transcriptomics,
               metagenomics, epigenomics, single-cell sequencing, genotyping, microarray,
               bioinformatics, and more. To help us deliver the best results for you, we request you to

app/components/SampleGuideline/PageTitle.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const PageTitle = () => {
   return (
     <section 
-      className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-24 min-h-[120px] sm:min-h-[140px]" 
+      className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-24 min-h-[120px] sm:min-h-[120px]" 
       style={{ backgroundImage: "url('images/bredcrumb.jpg')" }}
     >
       {/* Breadcrumb */}

app/components/SampleGuideline/SearchSampleRequirements.jsx

@@ -67,7 +67,7 @@ const SearchSampleRequirements = () => {
   return (
     <div className="space-y-6">
       <div className="mb-6">
-        <h3 className="text-2xl font-semibold text-gray-600">Search Sample Requirements</h3>
+        <h3 className="text-3xl font-bold text-teal-700 mb-4">Search Sample Requirements</h3>
       </div>
       
       <SearchFilters

app/components/SampleInitiation/PageTitle.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const PageTitle = () => {
   return (
     <section 
-      className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-24 min-h-[120px] sm:min-h-[140px]" 
+      className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-24 min-h-[120px] sm:min-h-[120px]" 
       style={{ backgroundImage: "url('images/bredcrumb.jpg')" }}
     >
       {/* Breadcrumb */}

app/components/SampleInitiation/ProcessSection.jsx

@@ -5,11 +5,11 @@ import SubmissionOptions from './SubmissionOptions';
 const ProcessSection = () => {
   return (
     <section className="bg-white">
-      <div className="container mx-auto max-w-none px-4">
+      <div className="container max-w-none">
         <div className="bg-white p-4 md:p-6">
           {/* Main Title */}
           <div className="text-left mb-4">
-            <h2 className="text-2xl md:text-4xl text-gray-600 font-normal">
+            <h2 className="text-3xl font-bold text-teal-700 mb-4">
               Welcome to Our Online Submission Portal!
             </h2>
           </div>

app/components/SampleInitiation/ProcessSteps.jsx

@@ -46,8 +46,10 @@ const ProcessSteps = () => {
             </h3>
             <ul className="list-disc list-inside space-y-2 text-gray-700 leading-relaxed pl-4">
               {step.items.map((item, index) => (
-                <li key={index} className="text-justify">
-                  {item}
+                <li key={index} className="text-justify" style={{color: '#faae31'}}>
+                  <span style={{color: '#374151'}}>
+                    {item}
+                  </span>
                 </li>
               ))}
             </ul>

app/components/SampleInitiation/SampleInitiationPage.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import PageTitle from './PageTitle';
 import ProcessSection from './ProcessSection';
-import ContactNote from './ContactNote';
+// import ContactNote from './ContactNote';
 
 const SampleInitiationPage = () => {
   return (
     <div className="page-content">
       <PageTitle />
       <ProcessSection />
-      <ContactNote />
+      {/* <ContactNote /> */}
     </div>
   );
 };

app/components/shared/ApplicationsLayout.jsx

@@ -3,20 +3,24 @@
 const ApplicationsLayout = ({ 
   title = "Applications",
   applicationItems = [],
-  backgroundColor = "bg-gray-50",
+  backgroundColor = "bg-teal-50",
   titleColor = "text-gray-700"
 }) => {
   return (
-    <section className={`py-5 lg:py-8 ${backgroundColor}`}>
+    <section className={`py-5 lg:py-5 ${backgroundColor}`}>
       <div className="container-fluid px-4 lg:px-6">
-        <h2 className={`text-2xl lg:text-3xl ${titleColor} text-left pb-2 mb-6 lg:mb-6`}>
+        <h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
           {title}
         </h2>
         
-        <ul className="list-disc list-inside space-y-4 text-gray-600 leading-relaxed lg:px-10">
+        <ul className="space-y-4 text-gray-600 leading-relaxed lg:px-6">
           {applicationItems.map((item, index) => (
-            <li key={index} className="text-base">
-              {item}
+            <li key={index} 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>
+              <span className="text-base">{item}</span>
             </li>
           ))}
         </ul>

app/components/shared/BioinformaticsLayout.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
+
+const BioinformaticsLayout = ({ 
+  title = "Bioinformatics Pipeline",
+  pipelineSteps = [],
+  sectionBackground = "bg-gray-50",
+  cardBackground = "bg-white",
+  titleColor = "text-gray-600",
+  stepBackground = "bg-[#e8f5f3]",
+  stepTextColor = "text-teal-600",
+  arrowColor = "text-gray-600"
+}) => {
+  // For two-column layout, split steps appropriately
+  const leftColumnSteps = pipelineSteps.slice(0, 4);
+  const rightColumnSteps = pipelineSteps.slice(4).reverse();
+
+  return (
+    <section className={`py-6 sm:py-8 lg:py-8 ${sectionBackground}`}>
+      <div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
+        <h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
+          {title}
+        </h2>
+
+        {/* Pipeline Flowchart */}
+        <div className={`${cardBackground} rounded-xl shadow-lg p-4 sm:p-6 lg:p-8`}>
+          <div className="flex justify-center">
+            <div className="w-full max-w-5xl">
+              <div className="relative">
+                {/* Mobile Layout - Single Column */}
+                <div className="block sm:hidden">
+                  <div className="flex flex-col items-center space-y-3">
+                    {pipelineSteps.map((step, index) => (
+                      <React.Fragment key={index}>
+                        <div className={`${stepBackground} rounded-lg p-3 w-full text-center`}>
+                          <h3 className={`text-xs font-medium ${stepTextColor}`}>{step}</h3>
+                        </div>
+                        {index < pipelineSteps.length - 1 && (
+                          <ArrowDown className={`w-5 h-5 ${arrowColor}`} />
+                        )}
+                      </React.Fragment>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Tablet and Desktop Layout - Two Columns */}
+                <div className="hidden sm:block">
+                  <div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+                    {/* Left Column */}
+                    <div className="flex flex-col items-center space-y-2 sm:space-y-3">
+                      {leftColumnSteps.map((step, index) => (
+                        <React.Fragment key={index}>
+                          <div className={`${stepBackground} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center`}>
+                            <h3 className={`text-xs sm:text-sm font-medium ${stepTextColor}`}>{step}</h3>
+                          </div>
+                          {index < leftColumnSteps.length - 1 && (
+                            <ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </div>
+
+                    {/* Right Column */}
+                    <div className="flex flex-col items-center space-y-2 sm:space-y-3">
+                      {rightColumnSteps.map((step, index) => (
+                        <React.Fragment key={index}>
+                          <div className={`${stepBackground} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center`}>
+                            <h3 className={`text-xs sm:text-sm font-medium ${stepTextColor}`}>{step}</h3>
+                          </div>
+                          {index < rightColumnSteps.length - 1 && (
+                            <ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Horizontal Arrow positioned between Primary and Secondary Assembly */}
+                  <div className="absolute bottom-2 sm:bottom-4 lg:bottom-[0.7rem] left-1/2 transform -translate-x-1/2 flex items-center justify-center">
+                    <ArrowRight className={`w-6 h-6 sm:w-8 sm:h-8 ${arrowColor}`} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default BioinformaticsLayout;

app/components/shared/DNATitleBar.jsx

@@ -0,0 +1,56 @@
+// components/shared/TitleBar.jsx
+import React from 'react';
+import Link from 'next/link';
+
+const DNATitleBar = ({ title, desc, breadcrumbs, backgroundImage = "/images/bredcrumb.jpg" }) => {
+  return (
+    <section
+      className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-[10rem] min-h-[120px] sm:min-h-[140px]"
+      style={{ backgroundImage: `url('${backgroundImage}')` }}
+    >
+      {/* Breadcrumb */}
+      <div className="relative z-10 mb-6 sm:mb-5 pt-2 sm:pt-0 sm:-mt-3 lg:-mt-3">
+        <div className="container mx-auto max-w-none px-4">
+          <nav className="flex flex-wrap items-center gap-1 sm:gap-2 text-xs sm:text-sm lg:text-sm">
+            {breadcrumbs.map((crumb, index) => (
+              <React.Fragment key={index}>
+                {crumb.current ? (
+                  <span className="text-white whitespace-nowrap">
+                    {crumb.label}
+                  </span>
+                ) : (
+                  <Link
+                    href={crumb.href}
+                    className="text-white hover:text-yellow-400 underline whitespace-nowrap"
+                  >
+                    {crumb.label}
+                  </Link>
+                )}
+                {index < breadcrumbs.length - 1 && (
+                  <span className="text-white flex-shrink-0">
+                    <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+                    </svg>
+                  </span>
+                )}
+              </React.Fragment>
+            ))}
+          </nav>
+        </div>
+      </div>
+
+      {/* Page Title */}
+      <div className="relative z-10 text-center pb-2 sm:pb-0 sm:-mt-2 lg:mt-2">
+        <h1 className="text-base sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl font-bold text-white mb-2 px-4 leading-tight">
+          {title}
+        </h1>
+        <h3 className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-xl font-medium text-white/90 mb-4 px-4 leading-relaxed">
+          {desc}
+        </h3>
+        <div className="w-12 sm:w-14 md:w-16 lg:w-16 h-1 bg-yellow-400 mx-auto"></div>
+      </div>
+    </section>
+  );
+};
+
+export default DNATitleBar;

app/components/shared/IntroductionLayout.jsx

@@ -1,45 +1,75 @@
-// components/shared/IntroductionLayout.jsx
+import React from 'react';
 
-const IntroductionLayout = ({ 
-  title = "Introduction and Workflow",
-  contentItems = [],
+const CombinedWorkflowLayout = ({ 
+  introTitle = "Introduction and Workflow",
+  advantageTitle = "Advantage",
+  introItems = [],
+  advantageItems = [],
   imageUrl,
-  imageAlt = "",
-  badgeText,
-  badgeSubtext,
-  backgroundColor = "#f8f9fa",
-  badgeColor = "bg-teal-600"
+  imageAlt = "Workflow diagram"
 }) => {
   return (
-    <section className="py-0 md:py-12 lg:py-10">
-      <div className="container-fluid px-0">
-        <h2 className="text-2xl lg:text-3xl text-gray-700 text-left pb-2 px-4 lg:px-8 mb-4">
-          {title}
-        </h2>
+    <div className="w-full bg-white">
+      {/* Main container with two columns */}
+      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
         
-        {/* Two column layout */}
-        <div className="grid grid-cols-1 lg:grid-cols-[1.14fr_1fr] min-h-[140px] lg:min-h-[280px]">
-          {/* Left side content */}
-          <div className="px-6 lg:px-9 py-6 lg:py-0">
-            <ul className="list-disc list-inside space-y-3 text-gray-600 leading-relaxed lg:px-10 text-justify-center">
-              {contentItems.map((item, index) => (
-                <li key={index}>{item}</li>
+        {/* Left Column - Content */}
+        <div className="px-6 lg:px-12 py-8">
+          {/* Introduction Section */}
+          <section className="mb-8">
+            <h2 className="text-3xl font-bold text-teal-700 mb-4">
+              {introTitle}
+            </h2>
+            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
+              {introItems.map((item, index) => (
+                <li key={index} className="flex items-start">
+                  <span 
+                    className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
+                    style={{backgroundColor: '#faae31'}}
+                  ></span>
+                  <span className="text-justify">{item}</span>
+                </li>
               ))}
             </ul>
-          </div>
-          
-          {/* Right side image */}
-          <div 
-            style={{ 
-              backgroundImage: imageUrl ? `url('${imageUrl}')` : 'none',
-              backgroundColor: backgroundColor
-            }}
-          >
-          </div>
+          </section>
+
+          {/* Advantage Section */}
+          <section>
+            <h2 className="text-3xl font-bold text-teal-700 mb-4">
+              {advantageTitle}
+            </h2>
+            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
+              {advantageItems.map((item, index) => (
+                <li key={index} className="flex items-start">
+                  <span 
+                    className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
+                    style={{backgroundColor: '#faae31'}}
+                  ></span>
+                  <span className="text-justify">{item}</span>
+                </li>
+              ))}
+            </ul>
+          </section>
+        </div>
+
+        {/* Right Column - Workflow Image */}
+        <div className="relative flex items-center justify-center p-4">
+          {imageUrl ? (
+            <img 
+              src={imageUrl}
+              alt={imageAlt}
+              className="max-w-full max-h-full object-contain"
+            />
+          ) : (
+            <div className="text-gray-400 text-center">
+              <p>Workflow image will appear here</p>
+              <p className="text-sm mt-2">Please provide the imageUrl prop</p>
+            </div>
+          )}
         </div>
       </div>
-    </section>
+    </div>
   );
 };
 
-export default IntroductionLayout;
+export default CombinedWorkflowLayout;

app/components/shared/SpecificationsLayout.jsx

@@ -3,17 +3,16 @@ import Link from 'next/link';
 
 const SpecificationsLayout = ({ 
   title = "Service Specifications",
-  titleColor = "text-gray-800",
   specificationItems = [],
   backgroundColor = "#e8f5f3",
   iconBackgroundColor = "bg-teal-600"
 }) => {
   return (
-    <section className="py-8 lg:py-12">
+    <section className="py-8 lg:py-6">
       <div className="container-fluid px-4 lg:px-6">
         {/* Section Header */}
         <div className="text-left mb-8">
-          <h2 className={`text-2xl lg:text-3xl ${titleColor} text-left pb-2 mb-6 lg:mb-6`}>
+          <h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
             {title}
           </h2>
         </div>

app/components/shared/TitleBar.jsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 const TitleBar = ({ title, desc, breadcrumbs, backgroundImage = "/images/bredcrumb.jpg" }) => {
   return (
     <section 
-      className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-[12rem] min-h-[120px] sm:min-h-[140px]" 
+      className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-24 min-h-[120px] sm:min-h-[140px]" 
       style={{ backgroundImage: `url('${backgroundImage}')` }}
     >
       {/* Breadcrumb */}

app/dna-sequencing/components/AboutDNA.jsx

@@ -0,0 +1,28 @@
+'use client';
+import React from 'react';
+
+const AboutDNA = () => {
+  return (
+    <section className="pt-6 bg-white">
+      <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-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>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AboutDNA;

app/dna-sequencing/components/DNATable.jsx

@@ -0,0 +1,172 @@
+'use client';
+import React from 'react';
+
+const DNATable = () => {
+  const sequencingData = [
+    {
+      approach: { name: 'Whole-Genome Sequencing (WGS)', link: '/dna-sequencing/whole-genome-sequencing' },
+      description: (
+        <>
+          Sequencing of the entire genome to provide comprehensive genetic data. It includes{' '}
+          <a href="/dna-sequencing/whole-genome-sequencing/denovo" className="text-teal-600 hover:underline">
+            WGS-DeNovo
+          </a>{' '}
+          and{' '}
+          <a href="/dna-sequencing/whole-genome-sequencing/resequencing" className="text-teal-600 hover:underline">
+            WGS-ReSequencing
+          </a>
+        </>
+      ),
+      platform: 'Illumina, PacBio SMRT, Oxford Nanopore',
+      applications: 'Mapping genetic diversity, disease research, evolutionary studies'
+    },
+    {
+      approach: { name: 'Enrichment Sequencing', link: '/dna-sequencing/enrichment-sequencing' },
+      description: (
+        <>
+          Sequencing of the regions of interest of the genome to provide comprehensive genetic data. It includes{' '}
+          <a href="/dna-sequencing/enrichment-sequencing/whole-exome" className="text-teal-600 hover:underline">
+            Whole-Exome
+          </a>,{' '}
+          <a href="/dna-sequencing/enrichment-sequencing/amplicon-sequencing" className="text-teal-600 hover:underline">
+            Amplicon
+          </a>{' '}
+          and{' '}
+          <a href="/dna-sequencing/enrichment-sequencing/targeted-sequencing" className="text-teal-600 hover:underline">
+            Targeted Sequencing
+          </a>
+        </>
+      ),
+      platform: 'Illumina',
+      applications: 'Disease gene identification, rare disorders, clinical genomics'
+    },
+    {
+      approach: { name: 'Single Cell DNA Sequencing', link: '/dna-sequencing/single-cell-dna-sequencing' },
+      description: 'Analyzes DNA from individual cells to study cellular heterogeneity, copy number variations, and genetic diversity at single-cell resolution.',
+      platform: '10X Genomics Chromium System followed by Illumina Sequencer',
+      applications: 'Cancer research, developmental biology, rare cell analysis'
+    },
+    {
+      approach: { name: 'Metagenomics Sequencing', link: '/dna-sequencing/metagenomics-sequencing' },
+      description: 'Studies genetic material recovered directly from environmental samples to explore microbial diversity.',
+      platform: 'Illumina, PacBio SMRT',
+      applications: 'Microbial community analysis, pathogen detection, environmental research'
+    },
+    {
+      approach: { name: 'Epigenomics Sequencing', link: '/dna-sequencing/epigenomics-sequencing' },
+      description: (
+        <>
+          Studies the epigenetic modifications (e.g., DNA methylation, histone modification) of the genome. It includes{' '}
+          <a href="/dna-sequencing/epigenomics-sequencing/wgbs" className="text-teal-600 hover:underline">
+            Whole Genome Bisulphite Sequencing (WGBS)
+          </a>,{' '}
+          <a href="/dna-sequencing/epigenomics-sequencing/chip-sequencing" className="text-teal-600 hover:underline">
+            ChIP Sequencing
+          </a>,{' '}
+          <a href="/dna-sequencing/epigenomics-sequencing/atac-sequencing" className="text-teal-600 hover:underline">
+            ATAC Sequencing
+          </a>
+        </>
+      ),
+      platform: 'Illumina',
+      applications: 'Epigenetic research, cancer studies, imprinting disorders'
+    },
+    {
+      approach: { name: 'Genome Mapping', link: '/dna-sequencing/genome-mapping' },
+      description: (
+        <>
+          Focuses on determining the structure and order of genes within a genome. It includes{' '}
+          <a href="/dna-sequencing/genome-mapping/hi-c-mapping" className="text-teal-600 hover:underline">
+            Hi-C Mapping
+          </a>{' '}
+          and{' '}
+          <a href="/dna-sequencing/genome-mapping/optical-mapping" className="text-teal-600 hover:underline">
+            Optical Mapping
+          </a>
+        </>
+      ),
+      platform: 'Illumina',
+      applications: 'Structural variant detection, genomic rearrangements'
+    },
+    {
+      approach: { name: 'Whole Genome Long Read Sequencing', link: '/dna-sequencing/long-read-sequencing' },
+      description: 'Sequencing technologies that provide long DNA reads, suitable for de novo assembly and complex regions.',
+      platform: 'PacBio SMRT, Oxford Nanopore',
+      applications: 'De novo assembly, complex genome sequencing, repetitive region analysis'
+    },
+    {
+      approach: { name: 'Hybrid Genome Sequencing', link: '/dna-sequencing/hybrid-genome-sequencing' },
+      description: 'Combines short-read and long-read sequencing to optimize accuracy and genome assembly.',
+      platform: 'Illumina and Oxford Nanopore or PacBio SMRT',
+      applications: 'Comprehensive genome analysis, structural variation studies, complex genome sequencing'
+    },
+    {
+      approach: { name: 'SNP-based Genotyping', link: '/dna-sequencing/snp-genotyping' },
+      description: 'Genotyping is the process of determining the genetic constitution (genotype) of an individual by analyzing their DNA. It identifies genetic variations, such as single nucleotide variants (SNVs), insertions, deletions, or other mutations.',
+      platform: 'PCR-Based, Microarray-Based, NGS-Based Genotyping',
+      applications: 'Genetic variation analysis, disease association studies, population genetics'
+    },
+    {
+      approach: { name: 'Microsatellites (SSR/STR) Genotyping', link: '/dna-sequencing/microsatellites-ssr-str' },
+      description: 'Analyzes short tandem repeats (STRs) or simple sequence repeats (SSRs) to study genetic diversity, population structure, and individual identification.',
+      platform: 'Capillary electrophoresis, NGS-based approaches',
+      applications: 'Population genetics, breeding programs, forensic analysis, paternity testing'
+    }
+  ];
+
+  return (
+    <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 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">
+                  Sequencing Approach
+                </th>
+                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
+                  Description
+                </th>
+                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
+                  Sequencing Platform
+                </th>
+                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
+                  Applications
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {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-gray-600 hover:underline font-medium text-base">
+                      {row.approach.name}
+                    </a>
+                  </td>
+                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
+                    {row.description}
+                  </td>
+                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 font-medium">
+                    {row.platform}
+                  </td>
+                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
+                    {row.applications}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default DNATable;

app/dna-sequencing/enrichment-sequencing/amplicon-sequencing/components/AmpliconIntroduction.jsx

@@ -9,12 +9,20 @@ const AmpliconIntroduction = () => {
     "This multiplexing enables the simultaneous targeting of hundreds of genes from various libraries in a single run.",
     "This method is particularly useful for studying genetic variation, microbial communities, and evolutionary relationships. By selectively amplifying regions of interest, such as 16S rRNA for bacteria or ITS regions for fungi."
   ];
+  const advantageItems = [
+    "Unlike targeted or exome sequencing, amplicon sequencing narrows down to even smaller, highly specific regions, resulting in a more efficient and focused approach for certain applications, such as microbial diversity studies or detecting rare variants.",
+    "Capable of detecting low-abundance species or genetic variants, providing specific resolution of target regions.",
+    "Focuses on specific genomic regions, allowing for detailed and precise analysis.",
+    "Provides quick insights into genetic composition and diversity, facilitating timely research and diagnostics."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
-      imageUrl="/images/amplicon-workflow.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/amplicon_seq.png"
       imageAlt="Amplicon Workflow"
       badgeText="AMPLICON SEQUENCING"
       badgeSubtext="Brochure to be modified from Amplicon Sequencing"

app/dna-sequencing/enrichment-sequencing/amplicon-sequencing/page.js

@@ -1,6 +1,5 @@
-import TitleBar from '../../../components/shared/TitleBar';
+import DNATitleBar from '../../../components/shared/DNATitleBar';
 import AmpliconIntroduction from './components/AmpliconIntroduction';
-import AmpliconAdvantages from './components/AmpliconAdvantages';
 import AmpliconApplications from './components/AmpliconApplications';
 import AmpliconSpecifications from './components/AmpliconSpecifications';
 import PageLayout from '../../../components/Layout/PageLayout';
@@ -8,14 +7,14 @@ import PageLayout from '../../../components/Layout/PageLayout';
 export default function AmpliconSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Enrichment Sequencing', href: '/dna-sequencing/enrichment-sequencing' },
     { label: 'Amplicon Sequencing (16S/18S/ITS)', current: true }
   ];
 
   return (
     <PageLayout fixedHeader={true}>
-      <TitleBar
+      <DNATitleBar
         title="Amplicon Sequencing (16S/18S/ITS)"
         desc="Explore Genetic Diversity at the Molecular Level"
         breadcrumbs={breadcrumbs}
@@ -23,7 +22,6 @@ export default function AmpliconSequencingPage() {
       
       <div className="page-content">
         <AmpliconIntroduction />
-        <AmpliconAdvantages />
         <AmpliconApplications />
         <AmpliconSpecifications />
       </div>

app/dna-sequencing/enrichment-sequencing/components/EnrichmentIntroduction.jsx

@@ -9,6 +9,12 @@ const EnrichmentIntroduction = () => {
     "In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations.",
     "It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
   ];
+  const advantageItems = [
+    "Provides a more affordable alternative to Whole Genome Sequencing (WGS), making it accessible to a wider range of researchers and clinicians.",
+    "Enhances detection of single-nucleotide variants (SNVs), copy number variants (CNVs), and insertions/deletions (InDels) with sensitivity and accuracy comparable to WGS, particularly in exonic regions.",
+    "Produces smaller data sets compared to WGS, allowing for quicker and more straightforward data analysis, which accelerates research and diagnostics.",
+    "Focuses on exonic regions, which are more likely to harbor disease-causing variants, leading to a more efficient and targeted approach in identifying genetic variants."
+  ];
 
   const customBadgeContent = (
     <div className="text-center">
@@ -31,9 +37,11 @@ const EnrichmentIntroduction = () => {
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
-      imageUrl="/images/enrichment-overview.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/enrichment-overview.png"
       imageAlt="Enrichment Overview"
       backgroundColor="#f8f9fa"
       customBadgeContent={customBadgeContent}

app/dna-sequencing/enrichment-sequencing/components/EnrichmentPipeline.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+const EnrichmentPipeline = ({
+  title = "Bioinformatics Pipeline",
+  svgContent = null, // Pass your SVG content here as JSX
+  svgUrl = "/images/flowchart/resequencing.svg",
+  backgroundColor = "bg-gray-50",
+  className = "",
+  titleClassName = "",
+  svgClassName = "",
+  containerClassName = ""
+}) => {
+  return (
+    <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={"text-3xl font-bold text-teal-700 mb-4"}>
+          {title}
+        </h2>
+
+        {/* SVG Flowchart Container */}
+        <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 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 max-h-100"
+                  />
+                ) : svgContent ? (
+                  // If SVG content is provided as JSX
+                  <div className="w-full max-h-100">
+                    <div className="w-full max-h-100 overflow-hidden">
+                      {svgContent}
+                    </div>
+                  </div>
+                ) : (
+                  // Fallback message
+                  <div className="flex items-center justify-center h-40 text-gray-500">
+                    <p>Please provide SVG content or URL</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default EnrichmentPipeline;

app/dna-sequencing/enrichment-sequencing/page.js

@@ -1,19 +1,19 @@
 import PageLayout from '../../components/Layout/PageLayout';
-import TitleBar from '../../components/shared/TitleBar';
+import DNATitleBar from '../../components/shared/DNATitleBar';
 import EnrichmentIntroduction from './components/EnrichmentIntroduction';
-import EnrichmentAdvantages from './components/EnrichmentAdvantages';
 import EnrichmentSpecifications from './components/EnrichmentSpecifications';
+import EnrichmentPipeline from './components/EnrichmentPipeline';
 
 export default function EnrichmentSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Enrichment Sequencing', current: true }
   ];
 
   return (
     <PageLayout fixedHeader={true}>
-      <TitleBar
+      <DNATitleBar
         title="Enrichment Sequencing"
         desc="Enriched Genome, Enriched Insights"
         breadcrumbs={breadcrumbs}
@@ -21,7 +21,7 @@ export default function EnrichmentSequencingPage() {
       
       <div className="page-content">
         <EnrichmentIntroduction />
-        <EnrichmentAdvantages />
+        <EnrichmentPipeline/>
         <EnrichmentSpecifications />
       </div>
     </PageLayout>

app/dna-sequencing/enrichment-sequencing/targeted-sequencing/components/TargetedIntroduction.jsx

@@ -9,12 +9,20 @@ const TargetedIntroduction = () => {
     "Advanced bioinformatics tools are employed to analyze the sequencing data, providing detailed insights into genetic variants, their potential impact, and relevance to disease.",
     "Targeted sequencing is widely used in clinical settings for the diagnosis of genetic disorders, personalized medicine, and cancer genomics, providing actionable insights that can directly impact patient care."
   ];
+  const advantageItems = [
+    "Focuses on specific genes or genomic regions, providing high-resolution analysis of mutations that are most relevant to particular diseases or conditions.",
+    "Delivers deep coverage of targeted regions, increasing the likelihood of detecting low-frequency variants and rare mutations.",
+    "The streamlined workflow and reduced data set enable quicker data processing and analysis, allowing for more rapid diagnostic and research outcomes.",
+    "Widely used in clinical settings, targeted sequencing enables the identification of actionable genetic variants that can guide personalized treatment strategies."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
-      imageUrl="/images/targeted-sequencing-overview.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/whole_exome_seq_targeted_dna_seq.png"
       imageAlt="Targeted Sequencing Overview"
       badgeText="TARGETED SEQUENCING"
       badgeSubtext="Targeted Region of Interest"

app/dna-sequencing/enrichment-sequencing/targeted-sequencing/page.js

@@ -1,6 +1,5 @@
-import TitleBar from '../../../components/shared/TitleBar';
+import DNATitleBar from '../../../components/shared/DNATitleBar';
 import TargetedIntroduction from './components/TargetedIntroduction';
-import TargetedAdvantages from './components/TargetedAdvantages';
 import TargetedApplications from './components/TargetedApplications';
 import TargetedSpecifications from './components/TargetedSpecifications';
 import PageLayout from '../../../components/Layout/PageLayout';
@@ -8,14 +7,14 @@ import PageLayout from '../../../components/Layout/PageLayout';
 export default function TargetedSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Enrichment Sequencing', href: '/dna-sequencing/enrichment-sequencing' },
     { label: 'Targeted DNA Sequencing', current: true }
   ];
 
   return (
     <PageLayout fixedHeader={true}>
-      <TitleBar
+      <DNATitleBar
         title="Targeted DNA Sequencing"
         desc="Pinpoint Precision for Your Genetic Insights"
         breadcrumbs={breadcrumbs}
@@ -23,7 +22,6 @@ export default function TargetedSequencingPage() {
       
       <div className="page-content">
         <TargetedIntroduction />
-        <TargetedAdvantages />
         <TargetedApplications />
         <TargetedSpecifications />
       </div>

app/dna-sequencing/enrichment-sequencing/whole-exome/components/ExomeIntroduction.jsx

@@ -9,12 +9,20 @@ const ExomeIntroduction = () => {
     "Pinpoints potential disease-causing mutations, providing valuable insights for population genetics, genetic disease research, and cancer studies.",
     "Extensively utilized in diagnostic setting to detect clinically relevant genomic alterations associated with phenotype of the patient."
   ];
+  const advantageItems = [
+    "Cost-effective as compared to Whole Genome Sequencing (WGS), making it accessible to a broader range of researchers and clinicians.",
+    "WES offers extensive sequencing of exonic regions, improving the detection of single-nucleotide variants (SNVs), copy number variants (CNVs), and insertions/deletions (InDels) with a sensitivity comparable to WGS, ensuring high accuracy in identifying genetic variants.",
+    "WES generates a smaller data set compared to WGS, facilitating faster and easier data analysis, which can expedite research and diagnostic processes.",
+    "WES is widely used in both medical and agricultural fields, supporting advancements in disease diagnosis, personalized medicine, and crop improvement. Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
-      imageUrl="/images/dna.jpg"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/whole_exome_seq_targeted_dna_seq.png"
       imageAlt="DNA Structure"
       useParagraphs={true}
     />

app/dna-sequencing/enrichment-sequencing/whole-exome/page.js

@@ -1,7 +1,6 @@
 // app/dna-sequencing/enrichment-sequencing/whole-exome/page.js
-import TitleBar from '../../../components/shared/TitleBar';
+import DNATitleBar from '../../../components/shared/DNATitleBar';
 import ExomeIntroduction from './components/ExomeIntroduction';
-import ExomeAdvantages from './components/ExomeAdvantages';
 import ExomeApplications from './components/ExomeApplications';
 import ExomeSpecifications from './components/ExomeSpecifications';
 import PageLayout from '../../../components/Layout/PageLayout';
@@ -17,7 +16,7 @@ export default function WholeExomeSequencingPage() {
   return (
     <PageLayout fixedHeader={true}>
       <div className="page-wrapper">
-        <TitleBar 
+        <DNATitleBar 
           title="Whole Exome Sequencing"
           desc="Focused Insights, Comprehensive Impact"
           breadcrumbs={breadcrumbs}
@@ -26,7 +25,6 @@ export default function WholeExomeSequencingPage() {
         
         <div className="page-content">
           <ExomeIntroduction />
-          <ExomeAdvantages />
           <ExomeApplications />
           <ExomeSpecifications />
         </div>

app/dna-sequencing/epigenomics-sequencing/atac-sequencing/components/ATACIntroduction.jsx

@@ -9,12 +9,20 @@ 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}
-      imageUrl="/images/atac-workflow.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/atac_sequencin.png"
       imageAlt="ATAC Workflow"
       badgeText="ATAC WORKFLOW"
       badgeSubtext="Workflow from Assay for Transposase-Accessible Chromatin (ATAC) Sequencing"

app/dna-sequencing/epigenomics-sequencing/atac-sequencing/page.js

@@ -1,7 +1,5 @@
-import TitleBar from '../../../components/shared/TitleBar';
+import DNATitleBar from '../../../components/shared/DNATitleBar';
 import ATACIntroduction from './components/ATACIntroduction';
-import ATACAdvantages from './components/ATACAdvantages';
-import ATACBioinformatics from './components/ATACBioinformatics';
 import ATACApplications from './components/ATACApplications';
 import ATACSpecifications from './components/ATACSpecifications';
 import PageLayout from '../../../components/Layout/PageLayout';
@@ -9,14 +7,14 @@ import PageLayout from '../../../components/Layout/PageLayout';
 export default function ATACSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Epigenomics Sequencing', href: '/dna-sequencing/epigenomics-sequencing' },
     { label: 'ATAC (Assay for Transposase-Accessible Chromatin) Sequencing', current: true }
   ];
 
   return (
     <PageLayout fixedHeader={true}>
-      <TitleBar
+      <DNATitleBar
         title="ATAC (Assay for Transposase-Accessible Chromatin) Sequencing"
         desc="Chromatin for Gene Regulation Insights"
         breadcrumbs={breadcrumbs}
@@ -24,8 +22,6 @@ export default function ATACSequencingPage() {
       
       <div className="page-content">
         <ATACIntroduction />
-        <ATACAdvantages />
-        <ATACBioinformatics />
         <ATACApplications />
         <ATACSpecifications />
       </div>

app/dna-sequencing/epigenomics-sequencing/chip-sequencing/components/ChIPIntroduction.jsx

@@ -9,12 +9,20 @@ 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}
-      imageUrl="/images/chip-workflow.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/ChIP-sequencing.png"
       imageAlt="ChIP Workflow"
       badgeText="ChIP WORKFLOW"
       badgeSubtext="Workflow from Chromatin Immunoprecipitation (ChIP) Sequencing"

app/dna-sequencing/epigenomics-sequencing/chip-sequencing/page.js

@@ -1,7 +1,5 @@
-import TitleBar from '../../../components/shared/TitleBar';
+import DNATitleBar from '../../../components/shared/DNATitleBar';
 import ChIPIntroduction from './components/ChIPIntroduction';
-import ChIPAdvantages from './components/ChIPAdvantages';
-import ChIPBioinformatics from './components/ChIPBioinformatics';
 import ChIPApplications from './components/ChIPApplications';
 import ChIPSpecifications from './components/ChIPSpecifications';
 import PageLayout from '../../../components/Layout/PageLayout';
@@ -9,14 +7,14 @@ import PageLayout from '../../../components/Layout/PageLayout';
 export default function ChIPSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Epigenomics Sequencing', href: '/dna-sequencing/epigenomics-sequencing' },
     { label: 'ChIP (Chromatin immunoprecipitation) Sequencing', current: true }
   ];
 
   return (
     <PageLayout fixedHeader={true}>
-      <TitleBar
+      <DNATitleBar
         title="ChIP (Chromatin immunoprecipitation) Sequencing"
         desc="Dissecting Gene Regulation with ChIP-Seq"
         breadcrumbs={breadcrumbs}
@@ -24,8 +22,6 @@ export default function ChIPSequencingPage() {
       
       <div className="page-content">
         <ChIPIntroduction />
-        <ChIPAdvantages />
-        <ChIPBioinformatics />
         <ChIPApplications />
         <ChIPSpecifications />
       </div>

app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsIntroduction.jsx

@@ -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"

app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsPipeline.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+const EpigenomicsPipeline = ({
+  title = "Bioinformatics Pipeline",
+  svgContent = null, // Pass your SVG content here as JSX
+  svgUrl = "/images/flowchart/epigenomics.svg",
+  backgroundColor = "bg-gray-50",
+  className = "",
+  titleClassName = "",
+  svgClassName = "",
+  containerClassName = ""
+}) => {
+  return (
+    <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={"text-3xl font-bold text-teal-700 mb-4"}>
+          {title}
+        </h2>
+
+        {/* SVG Flowchart Container */}
+        <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 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 max-h-100"
+                  />
+                ) : svgContent ? (
+                  // If SVG content is provided as JSX
+                  <div className="w-full max-h-100">
+                    <div className="w-full max-h-100 overflow-hidden">
+                      {svgContent}
+                    </div>
+                  </div>
+                ) : (
+                  // Fallback message
+                  <div className="flex items-center justify-center h-40 text-gray-500">
+                    <p>Please provide SVG content or URL</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default EpigenomicsPipeline;

app/dna-sequencing/epigenomics-sequencing/page.js

@@ -1,19 +1,19 @@
-import TitleBar from '../../components/shared/TitleBar';
+import DNATitleBar from '../../components/shared/DNATitleBar';
 import EpigenomicsIntroduction from './components/EpigenomicsIntroduction';
-import EpigenomicsAdvantages from './components/EpigenomicsAdvantages';
 import EpigenomicsSpecifications from './components/EpigenomicsSpecifications';
+import EpigenomicsPipeline from './components/EpigenomicsPipeline';
 import PageLayout from '../../components/Layout/PageLayout';
 
 export default function EpigenomicsSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Epigenomics Sequencing', current: true }
   ];
 
   return (
     <PageLayout fixedHeader={true}>
-      <TitleBar
+      <DNATitleBar
         title="Epigenomics Sequencing"
         desc="Explore Cellular Memory"
         breadcrumbs={breadcrumbs}
@@ -21,7 +21,7 @@ export default function EpigenomicsSequencingPage() {
       
       <div className="page-content">
         <EpigenomicsIntroduction />
-        <EpigenomicsAdvantages />
+        <EpigenomicsPipeline/>
         <EpigenomicsSpecifications />
       </div>
     </PageLayout>

app/dna-sequencing/epigenomics-sequencing/wgbs/components/WGBSApplications.jsx

@@ -1,5 +1,5 @@
 // WGBSApplications.jsx
-import ApplicationsLayout from '../../../../components/shared/AdvantagesLayout';
+import ApplicationsLayout from '../../../../components/shared/ApplicationsLayout';
 
 const WGBSApplications = () => {
   const applicationItems = [

app/dna-sequencing/epigenomics-sequencing/wgbs/components/WGBSIntroduction.jsx

@@ -9,12 +9,21 @@ 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}
-      imageUrl="/images/wgbs-workflow.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/whole_genome_bisulphate_sequencing.png"
       imageAlt="WGBS Workflow"
       badgeText="WGBS WORKFLOW"
       badgeSubtext="Workflow from Whole Genome Bisulfite Sequencing (WGBS)"

app/dna-sequencing/epigenomics-sequencing/wgbs/page.js

@@ -1,7 +1,5 @@
-import TitleBar from '../../../components/shared/TitleBar';
+import DNATitleBar from '../../../components/shared/DNATitleBar';
 import WGBSIntroduction from './components/WGBSIntroduction';
-import WGBSAdvantages from './components/WGBSAdvantages';
-import WGBSBioinformatics from './components/WGBSBioinformatics';
 import WGBSApplications from './components/WGBSApplications';
 import WGBSSpecifications from './components/WGBSSpecifications';
 import PageLayout from '../../../components/Layout/PageLayout';
@@ -9,14 +7,14 @@ import PageLayout from '../../../components/Layout/PageLayout';
 export default function WGBSPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Epigenomics Sequencing', href: '/dna-sequencing/epigenomics-sequencing' },
     { label: 'Whole Genome Bisulphite Sequencing', current: true }
   ];
 
   return (
     <PageLayout fixedHeader={true}>
-      <TitleBar
+      <DNATitleBar
         title="Whole Genome Bisulphite Sequencing (WGBS)"
         desc="Comprehensive DNA Methylation Profiling"
         breadcrumbs={breadcrumbs}
@@ -24,8 +22,6 @@ export default function WGBSPage() {
       
       <div className="page-content">
         <WGBSIntroduction />
-        <WGBSAdvantages />
-        <WGBSBioinformatics />
         <WGBSApplications />
         <WGBSSpecifications />
       </div>

app/dna-sequencing/genome-mapping/components/GenomeMappingIntroduction.jsx

@@ -8,6 +8,12 @@ const GenomeMappingIntroduction = () => {
     "In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations and structural arrangements.",
     "It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
   ];
+  const advantageItems = [
+    "Provides detailed structural variant detection and genomic rearrangements, offering comprehensive insights into complex genomic architecture.",
+    "Enables high-resolution analysis of large eukaryotic genomes and their structural features, facilitating better understanding of genome organization.",
+    "Offers comprehensive mapping capabilities that reveal the three-dimensional structure of chromosomes and identify regulatory interactions between distant genomic regions.",
+    "Supports multiple research applications including cancer research, developmental biology, and evolutionary studies by providing detailed genomic structural information."
+  ];
 
   const serviceTypes = [
     "HiC Mapping",
@@ -16,8 +22,10 @@ const GenomeMappingIntroduction = () => {
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
       imageUrl="/images/genome-mapping-overview.png"
       imageAlt="Genome Mapping Overview"
       badgeText="GENOME MAPPING"

app/dna-sequencing/genome-mapping/components/GenomeMappingPipeline.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+const GenomeMappingPipeline = ({
+  title = "Bioinformatics Pipeline",
+  svgContent = null, // Pass your SVG content here as JSX
+  svgUrl = "/images/flowchart/genoemapping.svg",
+  backgroundColor = "bg-gray-50",
+  className = "",
+  titleClassName = "",
+  svgClassName = "",
+  containerClassName = ""
+}) => {
+  return (
+    <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={"text-3xl font-bold text-teal-700 mb-4"}>
+          {title}
+        </h2>
+
+        {/* SVG Flowchart Container */}
+        <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 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 max-h-100"
+                  />
+                ) : svgContent ? (
+                  // If SVG content is provided as JSX
+                  <div className="w-full max-h-100">
+                    <div className="w-full max-h-100 overflow-hidden">
+                      {svgContent}
+                    </div>
+                  </div>
+                ) : (
+                  // Fallback message
+                  <div className="flex items-center justify-center h-40 text-gray-500">
+                    <p>Please provide SVG content or URL</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default GenomeMappingPipeline;

app/dna-sequencing/genome-mapping/hi-c-mapping/components/HiCMappingIntroduction.jsx

@@ -10,12 +10,20 @@ const HiCMappingIntroduction = () => {
     "The sequenced reads are processed using advanced bioinformatics tools, starting with alignment to a reference genome, followed by the identification of chromatin loops and the construction of 3D models of genome organization.",
     "Plays pivotal role in multiple applications, including identifying promoter-enhancer interactions for gene regulation studies, detecting structural rearrangements, scaffolding contigs to define chromosomes de novo, and revealing structural errors while accurately reintegrating mis-joined contigs during genome assembly processes."
   ];
+  const advantageItems = [
+    "Quantifies interactions between closely located genomic loci in 3-D space, despite being separated by many nucleotides in the linear genome.",
+    "Provides a detailed view of the 3D architecture of the genome, helping researchers understand how chromatin folding impacts gene regulation, genome organization, and cellular function.",
+    "Captures interactions between distant regions of DNA, enabling the mapping of chromatin loops, topologically associated domains (TADs), and other structural features at high resolution.",
+    "By revealing interactions between regulatory elements, such as enhancers and promoters, Hi-C mapping sheds light on how gene expression is controlled at the epigenetic and transcriptional levels."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
-      imageUrl="/images/hic-mapping-workflow.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/hic-sequencing.png"
       imageAlt="Hi-C Mapping Workflow"
       useParagraphs={true}
     />

app/dna-sequencing/genome-mapping/hi-c-mapping/page.js

@@ -1,7 +1,6 @@
 // app/dna-sequencing/genome-mapping/hi-c-mapping/page.js
-import TitleBar from '../../../components/shared/TitleBar';
+import DNATitleBar from '../../../components/shared/DNATitleBar';
 import HiCMappingIntroduction from './components/HiCMappingIntroduction';
-import HiCMappingAdvantages from './components/HiCMappingAdvantages';
 import HiCMappingApplications from './components/HiCMappingApplications';
 import HiCMappingSpecifications from './components/HiCMappingSpecifications';
 import PageLayout from '../../../components/Layout/PageLayout';
@@ -20,7 +19,7 @@ export default function HiCMappingPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },
@@ -39,7 +38,7 @@ export default function HiCMappingPage() {
   return (
     <PageLayout fixedHeader={true}>
       {/* Title Bar */}
-      <TitleBar 
+      <DNATitleBar 
         title="High-throughput Chromosome Conformation Capture (Hi-C) Mapping"
         desc="Unravel the 3D Genome"
         breadcrumbs={breadcrumbs}
@@ -51,8 +50,6 @@ export default function HiCMappingPage() {
         {/* Introduction Section */}
         <HiCMappingIntroduction />
 
-        {/* Advantages Section */}
-        <HiCMappingAdvantages />
 
         {/* Applications Section */}
         <HiCMappingApplications />

app/dna-sequencing/genome-mapping/optical-mapping/components/OpticalMappingIntroduction.jsx

@@ -10,12 +10,20 @@ const OpticalMappingIntroduction = () => {
     "This allows for the comparison of genomic maps, identification of rearrangements, and integration with other sequencing data for comprehensive genome analysis.",
     "With the application in clinical and discovery research, the technique is improving genomics assembly, understanding of genetic disease and cancer by detecting CNVs, chromosomal aberrations and structural variants. Enables high-resolution analysis of large eukaryotic genomes and their structural features."
   ];
+  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}
-      imageUrl="/images/optical-mapping-workflow.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/optical_mapping.png"
       imageAlt="Optical Mapping Workflow"
       useParagraphs={true}
     />

app/dna-sequencing/genome-mapping/optical-mapping/page.js

@@ -1,7 +1,6 @@
 // app/dna-sequencing/genome-mapping/optical-mapping/page.js
-import TitleBar from '../../../components/shared/TitleBar';
+import DNATitleBar from '../../../components/shared/DNATitleBar';
 import OpticalMappingIntroduction from './components/OpticalMappingIntroduction';
-import OpticalMappingAdvantages from './components/OpticalMappingAdvantages';
 import OpticalMappingApplications from './components/OpticalMappingApplications';
 import OpticalMappingSpecifications from './components/OpticalMappingSpecifications';
 import PageLayout from '../../../components/Layout/PageLayout';
@@ -20,7 +19,7 @@ export default function OpticalMappingPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },
@@ -39,7 +38,7 @@ export default function OpticalMappingPage() {
   return (
     <PageLayout fixedHeader={true}>
       {/* Title Bar */}
-      <TitleBar 
+      <DNATitleBar 
         title="Optical Mapping"
         desc="Dissecting Gene Regulation with Advanced Optical Mapping"
         breadcrumbs={breadcrumbs}
@@ -51,9 +50,6 @@ export default function OpticalMappingPage() {
         {/* Introduction Section */}
         <OpticalMappingIntroduction />
 
-        {/* Advantages Section */}
-        <OpticalMappingAdvantages />
-
         {/* Applications Section */}
         <OpticalMappingApplications />
 

app/dna-sequencing/genome-mapping/page.js

@@ -1,7 +1,7 @@
 // app/dna-sequencing/genome-mapping/page.js
-import TitleBar from '../../components/shared/TitleBar';
+import DNATitleBar from '../../components/shared/DNATitleBar';
 import GenomeMappingIntroduction from './components/GenomeMappingIntroduction';
-import GenomeMappingAdvantages from './components/GenomeMappingAdvantages';
+import GenomeMappingPipeline from './components/GenomeMappingPipeline';
 import GenomeMappingSpecifications from './components/GenomeMappingSpecifications';
 import PageLayout from '../../components/Layout/PageLayout';
 
@@ -19,7 +19,7 @@ export default function GenomeMappingPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },
@@ -33,7 +33,7 @@ export default function GenomeMappingPage() {
   return (
     <PageLayout fixedHeader={true}>
       {/* Title Bar */}
-      <TitleBar 
+      <DNATitleBar 
         title="Genome Mapping"
         desc="Unlocking Genomic Secrets, One Map at a Time"
         breadcrumbs={breadcrumbs}
@@ -45,8 +45,7 @@ export default function GenomeMappingPage() {
         {/* Introduction Section */}
         <GenomeMappingIntroduction />
 
-        {/* Advantages Section */}
-        <GenomeMappingAdvantages />
+        <GenomeMappingPipeline/>
 
         {/* Specifications Section */}
         <GenomeMappingSpecifications />

app/dna-sequencing/hybrid-genome-sequencing/components/HybridBioinformatics.jsx

@@ -1,26 +0,0 @@
-// app/dna-sequencing/hybrid-genome-sequencing/components/HybridBioinformatics.jsx
-
-const HybridBioinformatics = () => {
-  return (
-    <section className="py-8 lg:py-12 bg-gray-50">
-      <div className="container mx-auto max-w-none px-4 lg:px-6">
-        <h2 className="text-gray-600 text-left pb-6 text-2xl lg:text-3xl font-normal mb-8">
-          Bioinformatics Pipeline
-        </h2>
-        
-        {/* Pipeline Image */}
-        <div className="bg-white rounded-xl shadow-lg p-6 lg:p-8">
-          <div className="flex justify-center">
-            <img 
-              src="/images/bioinformatics-pipeline.jpg" 
-              alt="Bioinformatics Pipeline Workflow"
-              className="max-w-full h-auto rounded-lg"
-            />
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default HybridBioinformatics;

app/dna-sequencing/hybrid-genome-sequencing/components/HybridIntroduction.jsx

@@ -8,12 +8,20 @@ const HybridIntroduction = () => {
     "Following sequencing, advanced bioinformatics tools are used to align and integrate the long and short reads, enhancing variant detection and improving the resolution of complex genomic regions.",
     "Hybrid sequencing is applicable to a wide range of research areas, from complex genome assemblies to resolving repetitive regions and improving the quality of reference genomes."
   ];
+  const advantageItems = [
+    "Combines long-read and short-read sequencing for more complete and accurate genome assemblies, effectively resolving complex regions and reducing gaps.",
+    "Balances the cost efficiency of short-read sequencing with the detailed resolution of long-read sequencing, making it a budget-friendly choice for comprehensive genome analysis.",
+    "Enhances detection of structural variants, such as large insertions and deletions, improving the understanding of genetic diversity and disease mechanisms.",
+    "Provides better coverage of challenging genomic features, like high GC content and repetitive sequences, by leveraging the strengths of both sequencing technologies."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
-      imageUrl="/images/sample-process-steps.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/hybrid_genome_seq.png"
       imageAlt="Sample Process Steps"
       useParagraphs={true}
     />

app/dna-sequencing/hybrid-genome-sequencing/components/HybridSequencingPipeline.jsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
+
+const HybridSequencingPipeline = ({
+  title = "Hybrid Sequencing",
+  leftSteps = [
+    "Raw Sequencing Data from Short Read (fastq files)",
+    "Quality Control and Preprocessing of Data", 
+    "High Quality Sequencing Data (fastq file)",
+    "Assembly of reads"
+  ],
+  rightSteps = [
+    "Annotation & Downstream Advanced Analysis",
+    "Scaffolds of the genome",
+    "Contigs from short reads and mapped to long reads", 
+    "Genome Assembly (Contigs from short reads)"
+  ],
+  backgroundColor = "bg-gray-50",
+  cardColor = "bg-blue-200",
+  textColor = "text-blue-800",
+  arrowColor = "text-gray-600",
+  className = "",
+  cardClassName = "",
+  titleClassName = ""
+}) => {
+  return (
+    <section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
+      <div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
+        <h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
+          {title}
+        </h2>
+
+        {/* Pipeline Flowchart */}
+        <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-7xl">
+              <div className="relative">
+                {/* Mobile Layout - Single Column */}
+                <div className="block sm:hidden">
+                  <div className="flex flex-col items-center space-y-3">
+                    {/* Left side steps */}
+                    {leftSteps.map((step, index) => (
+                      <React.Fragment key={`left-${index}`}>
+                        <div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
+                          <h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
+                        </div>
+                        {index < leftSteps.length - 1 && (
+                          <ArrowDown className={`w-5 h-5 ${arrowColor}`} />
+                        )}
+                      </React.Fragment>
+                    ))}
+                    
+                    <ArrowRight className={`w-5 h-5 ${arrowColor} my-2`} />
+                    
+                    {/* Right side steps in reverse order */}
+                    {[...rightSteps].reverse().map((step, index) => (
+                      <React.Fragment key={`right-${index}`}>
+                        <div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
+                          <h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
+                        </div>
+                        {index < rightSteps.length - 1 && (
+                          <ArrowUp className={`w-5 h-5 ${arrowColor}`} />
+                        )}
+                      </React.Fragment>
+                    ))}
+                    
+                    {/* Long Read Data Box for mobile */}
+                    <div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName} mt-4`}>
+                      <h3 className={`text-xs font-medium ${textColor}`}>Raw Sequencing Data from Long Read (fastq file)</h3>
+                    </div>
+                    <div className="text-xs text-gray-500 text-center">↑ connects to Scaffolds & Contigs</div>
+                  </div>
+                </div>
+
+                {/* Desktop Layout - Two Columns with Long Read positioned correctly */}
+                <div className="hidden sm:block">
+                  <div className="grid grid-cols-2 gap-8 lg:gap-12">
+                    {/* Left Column */}
+                    <div className="flex flex-col items-center space-y-4">
+                      {leftSteps.map((step, index) => (
+                        <React.Fragment key={`left-${index}`}>
+                          <div className={`${cardColor} rounded-lg p-4 w-full max-w-80 text-center border ${cardClassName}`}>
+                            <h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
+                          </div>
+                          {index < leftSteps.length - 1 && (
+                            <ArrowDown className={`w-6 h-6 ${arrowColor}`} />
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </div>
+
+                    {/* Right Column */}
+                    <div className="flex flex-col items-center space-y-4">
+                      {rightSteps.map((step, index) => (
+                        <React.Fragment key={`right-${index}`}>
+                          <div className={`${cardColor} rounded-lg p-4 w-full max-w-80 text-center border ${cardClassName}`}>
+                            <h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
+                          </div>
+                          {index < rightSteps.length - 1 && (
+                            <ArrowUp className={`w-6 h-6 ${arrowColor}`} />
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Horizontal Arrow from Assembly of reads to Genome Assembly */}
+                  <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
+                    <ArrowRight className={`w-8 h-8 ${arrowColor}`} />
+                  </div>
+
+                  {/* Long Read Data Box positioned to the right of Genome Assembly (same level) */}
+                  <div className="absolute bottom-4 right-0 transform translate-x-72">
+                    <div className={`${cardColor} rounded-lg p-4 w-80 text-center border ${cardClassName}`}>
+                      <h3 className={`text-sm font-medium ${textColor}`}>Raw Sequencing Data from Long Read (fastq file)</h3>
+                    </div>
+                    
+                    {/* Direct vertical line and arrow to Scaffolds */}
+                    <div className="absolute left-1/2 transform -translate-x-1/2 -top-44">
+                      <div className="flex flex-col items-center">
+                        <ArrowUp className={`w-6 h-6 ${arrowColor}`} />
+                        <div className="w-0.5 h-36 bg-gray-400"></div>
+                        <ArrowUp className={`w-6 h-6 ${arrowColor}`} />
+                      </div>
+                    </div>
+                  </div>
+
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HybridSequencingPipeline;

app/dna-sequencing/hybrid-genome-sequencing/page.js

@@ -1,8 +1,7 @@
 // app/dna-sequencing/snp-genotyping/page.js
-import TitleBar from '../../components/shared/TitleBar';
+import DNATitleBar from '../../components/shared/DNATitleBar';
 import HybridIntroduction from './components/HybridIntroduction';
-import HybridAdvantages from './components/HybridAdvantages';
-import HybridBioinformatics from './components/HybridBioinformatics';
+// import HybridSequencingPipeline from './components/HybridSequencingPipeline'
 import HybridApplications from './components/HybridApplications';
 import HybridSpecifications from './components/HybridSpecifications';
 import PageLayout from '../../components/Layout/PageLayout';
@@ -21,7 +20,7 @@ export default function HybridGenomeSequencingPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },
@@ -35,7 +34,7 @@ export default function HybridGenomeSequencingPage() {
   return (
     <PageLayout fixedHeader={true}>
       {/* Title Bar */}
-      <TitleBar 
+      <DNATitleBar 
         title="Hybrid Genome Sequencing"
         desc="Unifying Technologies for Deeper Genomic Clarity"
         breadcrumbs={breadcrumbs}
@@ -47,11 +46,8 @@ export default function HybridGenomeSequencingPage() {
         {/* Introduction Section */}
         <HybridIntroduction />
 
-        {/* Advantages Section */}
-        <HybridAdvantages />
-
         {/* Bioinformatics Pipeline Section */}
-        <HybridBioinformatics />
+        {/* <HybridSequencingPipeline /> */}
 
         {/* Applications Section */}
         <HybridApplications />

app/dna-sequencing/long-read-sequencing/components/LongReadComparison.jsx

@@ -32,12 +32,12 @@ const LongReadComparison = () => {
     }
   ];
 
-  const formatContent = (content, isHighlighted = false) => {
+  const formatContent = (content) => {
     if (content.includes("Long Read Length")) {
       return (
         <div>
-          <span className="text-blue-600 font-medium">Long Read Length with High Accuracy</span>
-          {content.replace("Long Read Length with High Accuracy", "")}
+          <span className="text-blue-600 font-medium">Long Read Length with High Accuracy:</span>
+          {content.replace("Long Read Length with High Accuracy:", "")}
         </div>
       );
     } else if (content.includes("NO GC Bias")) {
@@ -59,9 +59,9 @@ const LongReadComparison = () => {
   };
 
   return (
-    <section className="py-12 bg-white">
-      <div className="container-fluid px-4 lg:px-12">
-        <h2 className="text-2xl lg:text-3xl text-gray-700 mb-8">
+    <section className="py-4 bg-gray-50">
+      <div className="container max-w-none px-6">
+        <h2 className="text-3xl font-bold text-teal-700 mb-8">
           Comparison of Sequencers
         </h2>
         
@@ -69,7 +69,7 @@ const LongReadComparison = () => {
         <div className="mb-12">
           <div className="text-center">
             <img
-              src="/images/long-read-comparison.jpg"
+              src="/images/comparison-sequencers.png"
               alt="Long Read Comparison Chart"
               className="w-full max-w-4xl mx-auto rounded-lg border shadow-md"
             />
@@ -77,137 +77,112 @@ const LongReadComparison = () => {
         </div>
 
         {/* Detailed Comparison Table Section */}
-        <div className="mb-8">
-          <h3 className="text-xl lg:text-2xl text-gray-700 mb-6 text-center">
+        <div className="mb-6">
+          <h3 className="text-lg font-semibold text-gray-600 mb-4">
             Comparison and specification of sequencing platforms between short-read and long-read sequencing on WGS
           </h3>
+          <div className="mb-6 text-justify">
+            <p className="text-gray-600 leading-relaxed text-base">
+              Different sequencing platforms have unique characteristics and applications. The comparison below highlights key differences:
+            </p>
+          </div>
         </div>
         
-        <div className="flex flex-col xl:flex-row gap-8">
-          {/* Mobile Card Layout (hidden on desktop) */}
-          <div className="xl:hidden space-y-6">
-            {/* Mobile Table Header */}
-            <div className="bg-gray-100 rounded-lg p-4 mb-6">
-              <div className="grid grid-cols-1 gap-3">
-                <div className="font-semibold text-gray-700 text-center text-lg">Platform Types</div>
-                <div className="grid grid-cols-3 gap-2 text-center">
-                  <div className="font-medium text-gray-600 text-sm">Illumina NovaSeq 6000</div>
-                  <div className="font-medium text-gray-600 text-sm">PacBio Sequel II/IIe</div>
-                  <div className="font-medium text-gray-600 text-sm">Nanopore PromethION</div>
-                </div>
-              </div>
-            </div>
-
-            {comparisonData.map((row, index) => (
-              <div key={index} className="bg-white border border-gray-300 rounded-lg shadow-sm">
-                <div className="bg-gray-100 px-4 py-3 rounded-t-lg">
-                  <h4 className="font-semibold text-gray-700">{row.category}</h4>
-                </div>
-                <div className="p-4 space-y-4">
-                  <div className="border-b border-gray-200 pb-3">
-                    <h5 className="font-medium text-sm text-gray-600 mb-2">Illumina NovaSeq 6000</h5>
-                    <div className="text-sm text-gray-600 whitespace-pre-line leading-relaxed">
+        <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">
+                  Platform Types
+                </th>
+                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
+                  Illumina NovaSeq 6000
+                </th>
+                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
+                  PacBio Sequel II/IIe
+                </th>
+                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
+                  Nanopore PromethION
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {comparisonData.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 text-gray-600 font-medium text-base">
+                    {row.category}
+                  </td>
+                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
+                    <div className="whitespace-pre-line">
                       {row.illumina}
                     </div>
-                  </div>
-                  <div className="border-b border-gray-200 pb-3">
-                    <h5 className="font-medium text-sm text-gray-600 mb-2">PacBio Sequel II/IIe</h5>
-                    <div className="text-sm text-gray-600 whitespace-pre-line leading-relaxed">
+                  </td>
+                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
+                    <div className="whitespace-pre-line">
                       {formatContent(row.pacbio)}
                     </div>
-                  </div>
-                  <div>
-                    <h5 className="font-medium text-sm text-gray-600 mb-2">Nanopore PromethION</h5>
-                    <div className="text-sm text-gray-600 whitespace-pre-line leading-relaxed">
+                  </td>
+                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
+                    <div className="whitespace-pre-line">
                       {formatContent(row.nanopore)}
                     </div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          {/* Desktop Table Layout (hidden on mobile) */}
-          <div className="hidden xl:flex flex-1">
-            <table className="w-full border-collapse border border-gray-300 bg-white shadow-lg rounded-lg">
-              <thead>
-                <tr className="bg-gray-100">
-                  <th className="border border-gray-300 p-3 text-left font-semibold text-gray-700">
-                    Platform Types
-                  </th>
-                  <th className="border border-gray-300 p-3 text-center font-semibold text-gray-700">
-                    Illumina NovaSeq 6000
-                  </th>
-                  <th className="border border-gray-300 p-3 text-center font-semibold text-gray-700">
-                    PacBio Sequel II/IIe
-                  </th>
-                  <th className="border border-gray-300 p-3 text-center font-semibold text-gray-700">
-                    Nanopore PromethION
-                  </th>
+                  </td>
                 </tr>
-              </thead>
-              <tbody>
-                {comparisonData.map((row, index) => (
-                  <tr key={index} className={index % 2 === 0 ? "bg-white" : "bg-gray-50"}>
-                    <td className="border border-gray-300 p-3 font-medium text-gray-700 bg-gray-50">
-                      {row.category}
-                    </td>
-                    <td className="border border-gray-300 p-3 text-sm text-gray-600">
-                      <div className="whitespace-pre-line leading-relaxed">
-                        {row.illumina}
-                      </div>
-                    </td>
-                    <td className="border border-gray-300 p-3 text-sm text-gray-600">
-                      <div className="whitespace-pre-line leading-relaxed">
-                        {formatContent(row.pacbio)}
-                      </div>
-                    </td>
-                    <td className="border border-gray-300 p-3 text-sm text-gray-600">
-                      <div className="whitespace-pre-line leading-relaxed">
-                        {formatContent(row.nanopore)}
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+              ))}
+            </tbody>
+          </table>
+        </div>
 
-          {/* Right side - Key Highlights */}
-          <div className="xl:w-80 flex-shrink-0">
-            <div className="bg-gradient-to-br from-teal-50 to-blue-50 rounded-lg p-6 h-full">
-              <h3 className="text-lg font-semibold text-gray-700 mb-4 border-b border-teal-200 pb-2">
-                Key Technology Highlights
-              </h3>
-              
-              <div className="space-y-4">
-                <div className="bg-white rounded-lg p-4 shadow-sm">
-                  <h4 className="font-medium text-green-600 mb-2">Oxford Nanopore</h4>
-                  <ul className="text-sm text-gray-600 space-y-1">
-                    <li>• Real-time sequencing via protein nanopores</li>
-                    <li>• Portable devices for field diagnostics</li>
-                    <li>• Direct base modification detection</li>
-                  </ul>
-                </div>
-                
-                <div className="bg-white rounded-lg p-4 shadow-sm">
-                  <h4 className="font-medium text-green-600 mb-2">PacBio SMRT</h4>
-                  <ul className="text-sm text-gray-600 space-y-1">
-                    <li>• Hi-Fi reads with 99.9% accuracy</li>
-                    <li>• Excellent for complex genomes</li>
-                    <li>• Haplotype resolution in polyploids</li>
-                  </ul>
-                </div>
-                
-                <div className="bg-white rounded-lg p-4 shadow-sm">
-                  <h4 className="font-medium text-green-600 mb-2">Illumina</h4>
-                  <ul className="text-sm text-gray-600 space-y-1">
-                    <li>• High accuracy for SNVs and InDels</li>
-                    <li>• Cost-effective for large studies</li>
-                    <li>• Mature bioinformatics tools</li>
-                  </ul>
-                </div>
-              </div>
+        {/* Key Technology Highlights */}
+        <div className="bg-gradient-to-br from-teal-50 to-blue-50 rounded-lg p-6">
+          <h3 className="text-lg font-semibold text-gray-600 mb-4 border-b border-teal-200 pb-2">
+            Key Technology Highlights
+          </h3>
+          
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="bg-white rounded-lg p-4 shadow-sm">
+              <h4 className="font-medium text-teal-600 mb-2">Oxford Nanopore</h4>
+              <ul className="space-y-1">
+                {["Real-time sequencing via protein nanopores", "Portable devices for field diagnostics", "Direct base modification detection"].map((item, index) => (
+                  <li key={index} className="flex items-start">
+                    <span 
+                      className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
+                      style={{backgroundColor: '#faae31'}}
+                    ></span>
+                    <span className="text-sm text-gray-600">{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            
+            <div className="bg-white rounded-lg p-4 shadow-sm">
+              <h4 className="font-medium text-teal-600 mb-2">PacBio SMRT</h4>
+              <ul className="space-y-1">
+                {["Hi-Fi reads with 99.9% accuracy", "Excellent for complex genomes", "Haplotype resolution in polyploids"].map((item, index) => (
+                  <li key={index} className="flex items-start">
+                    <span 
+                      className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
+                      style={{backgroundColor: '#faae31'}}
+                    ></span>
+                    <span className="text-sm text-gray-600">{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            
+            <div className="bg-white rounded-lg p-4 shadow-sm">
+              <h4 className="font-medium text-teal-600 mb-2">Illumina</h4>
+              <ul className="space-y-1">
+                {["High accuracy for SNVs and InDels", "Cost-effective for large studies", "Mature bioinformatics tools"].map((item, index) => (
+                  <li key={index} className="flex items-start">
+                    <span 
+                      className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
+                      style={{backgroundColor: '#faae31'}}
+                    ></span>
+                    <span className="text-sm text-gray-600">{item}</span>
+                  </li>
+                ))}
+              </ul>
             </div>
           </div>
         </div>

app/dna-sequencing/long-read-sequencing/components/LongReadIntroduction.jsx

@@ -7,12 +7,20 @@ const LongReadIntroduction = () => {
     "Technologies like Oxford Nanopore and PacBio enable real-time sequencing with high accuracy. The process involves DNA isolation, fragmentation, and advanced bioinformatics analysis for accurate variant detection.",
     "This workflow supports sequencing for humans, animals, plants, bacteria, and disease-related microbes using long continuous reads for better genome assembly."
   ];
+  const advantageItems = [
+    "Captures long DNA strands in a single read, providing complete and accurate genome representation.",
+    "Reduces gaps and errors, enabling precise detection of large structural variants.",
+    "Facilitates high-quality de novo genome assembly.",
+    "Real-time sequencing allows faster insights and decision-making, especially in clinical settings."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
-      imageUrl="/images/long-read-intro.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/whole_genome_long_read_seq.png"
       imageAlt="Long Read Sequencing"
       badgeText="LONG READ SEQUENCING"
       badgeSubtext="Oxford Nanopore & PacBio Platforms"

app/dna-sequencing/long-read-sequencing/components/LongReadNanopore.jsx

@@ -1,14 +1,28 @@
 // 7c - LongReadNanopore.jsx
 const LongReadNanopore = () => {
+  const nanoporeItems = [
+    "Long-read Sequencing using Oxford Nanopore Technologies (ONT) delivers longer, continuous, and unambiguously assembled sequences, resulting in fewer contigs and enhancing overlap for accurate genome assembly.",
+    "Helps in sequencing long stretches of DNA for complete genome assemblies of microbial, human, animal and plant species.",
+    "Enables direct, real-time analysis of long DNA or RNA fragments by measuring changes in electric current as they pass through a nanopore embedded in a flow cell.",
+    "Nanopore sequencing offers advantages across multiple research areas, including genome assembly, full-length transcript detection, base modification detection, and specialized applications like rapid clinical diagnoses and outbreak surveillance."
+  ];
+
+  const pacbioItems = [
+    "PCR-free SMRT technology producing Hi-Fi reads via circular consensus sequencing (CCS) mode, yielding long reads up to 25 kb with 99.9% base level accuracy.",
+    "Enables rapid and cost-effective generation of contiguous, complete, and accurate de novo genome assemblies, even for complex genomes.",
+    "Allows the haplotype resolution of complex polyploids, particularly in plants.",
+    "The technology can be utilized to provide a comprehensive view of the epigenome and transcriptome, as well as uncover different variants such as SNPs, homopolymer repeats, translocations, structural variants, and copy number variants."
+  ];
+
   return (
-    <section className="py-0 md:py-12 lg:py-16">
+    <section className="py-0 md:py-12 lg:py-8">
       <div className="container-fluid px-0">
-        <h2 className="text-2xl lg:text-3xl text-gray-700 text-left pb-2 px-4 lg:px-8 mb-8">
+        <h2 className="text-3xl font-bold text-teal-700 pb-2 px-4 lg:px-8 mb-4">
           Long Read Sequencing Technologies
         </h2>
 
         {/* Oxford Nanopore Technology Section */}
-        <div className="mb-12">
+        <div className="mb-4">
           <h3 className="text-xl lg:text-2xl text-gray-700 text-left pb-2 px-4 lg:px-8 mb-4">
             Long Read Sequencing using Oxford Nanopore Technology
           </h3>
@@ -32,11 +46,16 @@ const LongReadNanopore = () => {
             </div>
 
             <div className="px-6 lg:px-9 py-6 lg:py-0 order-1 lg:order-2">
-              <ul className="list-disc list-inside space-y-3 text-gray-600 leading-relaxed">
-                <li>Long-read Sequencing using Oxford Nanopore Technologies (ONT) delivers longer, continuous, and unambiguously assembled sequences, resulting in fewer contigs and enhancing overlap for accurate genome assembly.</li>
-                <li>Helps in sequencing long stretches of DNA for complete genome assemblies of microbial, human, animal and plant species.</li>
-                <li>Enables direct, real-time analysis of long DNA or RNA fragments by measuring changes in electric current as they pass through a nanopore embedded in a flow cell.</li>
-                <li>Nanopore sequencing offers advantages across multiple research areas, including genome assembly, full-length transcript detection, base modification detection, and specialized applications like rapid clinical diagnoses and outbreak surveillance.</li>
+              <ul className="space-y-3 text-gray-600 leading-relaxed">
+                {nanoporeItems.map((item, index) => (
+                  <li key={index} 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>
+                    <span>{item}</span>
+                  </li>
+                ))}
               </ul>
             </div>
           </div>
@@ -50,11 +69,16 @@ const LongReadNanopore = () => {
           
           <div className="grid grid-cols-1 lg:grid-cols-[1.14fr_1fr] min-h-[140px] lg:min-h-[280px]">
             <div className="px-6 lg:px-9 py-6 lg:py-0">
-              <ul className="list-disc list-inside space-y-3 text-gray-600 leading-relaxed">
-                <li>PCR-free SMRT technology producing Hi-Fi reads via circular consensus sequencing (CCS) mode, yielding long reads up to 25 kb with 99.9% base level accuracy.</li>
-                <li>Enables rapid and cost-effective generation of contiguous, complete, and accurate de novo genome assemblies, even for complex genomes.</li>
-                <li>Allows the haplotype resolution of complex polyploids, particularly in plants.</li>
-                <li>The technology can be utilized to provide a comprehensive view of the epigenome and transcriptome, as well as uncover different variants such as SNPs, homopolymer repeats, translocations, structural variants, and copy number variants.</li>
+              <ul className="space-y-3 text-gray-600 leading-relaxed">
+                {pacbioItems.map((item, index) => (
+                  <li key={index} 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>
+                    <span>{item}</span>
+                  </li>
+                ))}
               </ul>
             </div>
 

app/dna-sequencing/long-read-sequencing/page.js

@@ -1,8 +1,7 @@
-import TitleBar from '../../components/shared/TitleBar';
+import DNATitleBar from '../../components/shared/DNATitleBar';
 import LongReadIntroduction from './components/LongReadIntroduction';
 import LongReadComparison from './components/LongReadComparison';
 import LongReadNanopore from './components/LongReadNanopore';
-import LongReadAdvantages from './components/LongReadAdvantages';
 import LongReadApplications from './components/LongReadApplications';
 import LongReadSpecifications from './components/LongReadSpecifications';
 import PageLayout from '../../components/Layout/PageLayout';
@@ -10,14 +9,13 @@ import PageLayout from '../../components/Layout/PageLayout';
 export default function LongReadSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
     { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Whole Genome Long Read Sequencing', current: true }
   ];
 
   return (
     <PageLayout fixedHeader={true}>
-      <TitleBar
+      <DNATitleBar
         title="Whole Genome Long Read Sequencing"
         desc="Sequencing the Complete Genome, Long and Clear"
         breadcrumbs={breadcrumbs}
@@ -26,8 +24,7 @@ export default function LongReadSequencingPage() {
       <div className="page-content">
         <LongReadIntroduction /> {/* 7a */}
         <LongReadComparison />   
-        <LongReadNanopore />     
-        <LongReadAdvantages />   
+        <LongReadNanopore />        
         <LongReadApplications /> 
         <LongReadSpecifications /> 
       </div>

app/dna-sequencing/metagenomics-sequencing/components/MetagenomicsIntroduction.jsx

@@ -8,11 +8,19 @@ const MetagenomicsIntroduction = () => {
     "Bioinformatics analysis encompasses sequence alignment, taxonomy identification, and phylogenetic analysis. Additional analyses may involve functional annotation, comparative genomics, and statistical evaluations.",
     "Can be used to study diverse environmental samples like water, soil, and fecal matter, providing valuable insights into microbial diversity and host-microbiome interactions."
   ];
+  const advantageItems = [
+    "Offers a comprehensive view of microbial diversity in complex samples, capturing both known and novel species. NGS enables the parallel sequencing of thousands of organisms in a single run, providing high sequence coverage and detecting low-abundance microbes that may be missed or are cost-prohibitive with other techniques.",
+    "Analyzes genomes directly from environmental samples without prior isolation or cultivation, overcoming the limitations of traditional culture-based methods. This approach is effective for studying microbial communities in their natural habitats.",
+    "Reveals the metabolic capabilities and functional diversity of microbial communities, enhancing our understanding of ecosystem processes and microbial roles within various environments.",
+    "Facilitates detailed genetic and ecological analysis, supporting studies on microbial interactions, evolution, and adaptation, with broad applications in environmental monitoring, biotechnology, agriculture, and human health."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
       imageUrl="/images/metagenomics-sequencing.png"
       imageAlt="Metagenomics Sequencing"
       useParagraphs={true}

app/dna-sequencing/metagenomics-sequencing/components/MetagenomicsPipeline.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+const MetagenomicsPipeline = ({
+  title = "Bioinformatics Pipeline",
+  svgContent = null, // Pass your SVG content here as JSX
+  svgUrl = "/images/flowchart/metagenomics.svg",
+  backgroundColor = "bg-gray-50",
+  className = "",
+  titleClassName = "",
+  svgClassName = "",
+  containerClassName = ""
+}) => {
+  return (
+    <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={"text-3xl font-bold text-teal-700 mb-4"}>
+          {title}
+        </h2>
+
+        {/* SVG Flowchart Container */}
+        <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 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 max-h-100"
+                  />
+                ) : svgContent ? (
+                  // If SVG content is provided as JSX
+                  <div className="w-full max-h-100">
+                    <div className="w-full max-h-100 overflow-hidden">
+                      {svgContent}
+                    </div>
+                  </div>
+                ) : (
+                  // Fallback message
+                  <div className="flex items-center justify-center h-40 text-gray-500">
+                    <p>Please provide SVG content or URL</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default MetagenomicsPipeline;

app/dna-sequencing/metagenomics-sequencing/page.js

@@ -1,9 +1,9 @@
 // app/dna-sequencing/metagenomics-sequencing/page.js
-import TitleBar from '../../components/shared/TitleBar';
+import DNATitleBar from '../../components/shared/DNATitleBar';
 import MetagenomicsIntroduction from './components/MetagenomicsIntroduction';
-import MetagenomicsAdvantages from './components/MetagenomicsAdvantages';
 import MetagenomicsApplications from './components/MetagenomicsApplications';
 import MetagenomicsSpecifications from './components/MetagenomicsSpecifications';
+import MetagenomicsPipeline from './components/MetagenomicsPipeline';
 import PageLayout from '../../components/Layout/PageLayout';
 
 export const metadata = {
@@ -20,7 +20,7 @@ export default function MetagenomicsSequencingPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },
@@ -34,7 +34,7 @@ export default function MetagenomicsSequencingPage() {
   return (
     <PageLayout fixedHeader={true}>
       {/* Title Bar */}
-      <TitleBar 
+      <DNATitleBar 
         title="Metagenomics Sequencing"
         desc="Exploring Earth's Microbial Frontiers from Soil to Ocean"
         breadcrumbs={breadcrumbs}
@@ -46,8 +46,8 @@ export default function MetagenomicsSequencingPage() {
         {/* Introduction Section */}
         <MetagenomicsIntroduction />
 
-        {/* Advantages Section */}
-        <MetagenomicsAdvantages />
+        
+        <MetagenomicsPipeline/>
 
         {/* Applications Section */}
         <MetagenomicsApplications />

app/dna-sequencing/microsatellites-ssr-str/components/MicrosatellitesIntroduction.jsx

@@ -9,11 +9,20 @@ const MicrosatellitesIntroduction = () => {
     "Electropherogram data is converted into allele calls, allowing allele size analysis, frequency distribution, and individual or population-level genotype matching.",
     "Microsatellite-based genotyping is widely applied in fields like conservation genetics, forensic science, and agriculture."
   ];
+  const advantageItems = [
+    "Highly variable in repeat number among individuals, making them effective for distinguishing genetic differences within and between populations.",
+    "Unlike multi-locus markers like minisatellites, microsatellites are locus-specific, providing precise, targeted genetic information for detailed genotyping and genetic mapping.",
+    "Highly reproducible across labs, making it a reliable method for studies requiring consistent and repeatable results, such as population genetics and forensic analysis.",
+    "Show co-dominant inheritance, allowing the detection of both alleles at a locus for accurate identification of heterozygous and homozygous genotypes."
+  ];
+
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
       imageUrl="/images/microsatellites-sequencing.png"
       imageAlt="Microsatellites Sequencing"
       useParagraphs={true}

app/dna-sequencing/microsatellites-ssr-str/page.js

@@ -1,7 +1,6 @@
 // app/dna-sequencing/microsatellites-ssr-str/page.js
-import TitleBar from '../../components/shared/TitleBar';
+import DNATitleBar from '../../components/shared/DNATitleBar';
 import MicrosatellitesIntroduction from './components/MicrosatellitesIntroduction';
-import MicrosatellitesAdvantages from './components/MicrosatellitesAdvantages';
 import MicrosatellitesApplications from './components/MicrosatellitesApplications';
 import MicrosatellitesSpecifications from './components/MicrosatellitesSpecifications';
 import PageLayout from '../../components/Layout/PageLayout';
@@ -20,7 +19,7 @@ export default function MicrosatellitesSSRSTRPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },
@@ -34,7 +33,7 @@ export default function MicrosatellitesSSRSTRPage() {
   return (
     <PageLayout fixedHeader={true}>
       {/* Title Bar */}
-      <TitleBar 
+      <DNATitleBar 
         title="Microsatellites (SSR/STR)"
         desc="Empowering Research with Microsatellite Markers"
         breadcrumbs={breadcrumbs}
@@ -46,9 +45,6 @@ export default function MicrosatellitesSSRSTRPage() {
         {/* Introduction Section */}
         <MicrosatellitesIntroduction />
 
-        {/* Advantages Section */}
-        <MicrosatellitesAdvantages />
-
         {/* Applications Section */}
         <MicrosatellitesApplications />
 

app/dna-sequencing/page.js

@@ -0,0 +1,23 @@
+// app/rna-sequencing/whole-transcriptome-sequencing/page.js
+import TitleBar from '../components/shared/TitleBar'
+import AboutDNA from './components/AboutDNA';
+import DNATable from './components/DNATable';
+import PageLayout from '../components/Layout/PageLayout';
+
+export default function DNAPage() {
+  const breadcrumbs = [
+    { label: 'Home', href: '/', current: false },
+    { label: 'DNA Sequencing', href: '#', current: true }
+  ];
+
+  return (
+    <PageLayout fixedHeader={true}>
+      <TitleBar 
+        title="DNA Sequencing"
+        breadcrumbs={breadcrumbs}
+      />
+      <AboutDNA />
+      <DNATable />
+    </PageLayout>
+  );
+}

app/dna-sequencing/single-cell-dna-sequencing/components/SingleCellIntroduction.jsx

@@ -9,12 +9,21 @@ const SingleCellIntroduction = () => {
     "During sequencing, the barcode identifiers enable precise tracking of data to its specific cell or nucleus of origin, thereby providing comprehensive genetic insights for individual cells.",
     "This technique enables researchers to unravel unique genetic characteristics and variations present within individual cells, providing unprecedented insights into cellular diversity and function."
   ];
+  const advantageItems = [
+    "DNA exhibits greater stability compared to RNA, ensuring ample time for sample processing without degradation.",
+    "Capable of detecting rare mutation-bearing cell clones with sensitivity levels as low as 0.1%, enabling direct analysis of rare cell types or primary cells even with limited samples.",
+    "Reveals the diversity of genetic profiles within cell populations, aiding in the study of complex biological processes and enabling precise profiling of subpopulations like cancer cell evolution or DNA copy number variations in neurons.",
+    "Allows for the tracking of genetic changes over time within individual cells, crucial for understanding disease progression and evolution."
+  ];
+
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
-      imageUrl="/images/single-cell-dna-sequencing.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/single_cell_dna_sequencing.png"
       imageAlt="Single Cell DNA Sequencing"
       useParagraphs={true}
     />

app/dna-sequencing/single-cell-dna-sequencing/components/SingleCellPipeline.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+const SingleCellPipeline = ({
+  title = "Bioinformatics Pipeline",
+  svgContent = null, // Pass your SVG content here as JSX
+  svgUrl = "/images/flowchart/singlecell.svg",
+  backgroundColor = "bg-gray-50",
+  className = "",
+  titleClassName = "",
+  svgClassName = "",
+  containerClassName = ""
+}) => {
+  return (
+    <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={"text-3xl font-bold text-teal-700 mb-4"}>
+          {title}
+        </h2>
+
+        {/* SVG Flowchart Container */}
+        <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 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 max-h-100"
+                  />
+                ) : svgContent ? (
+                  // If SVG content is provided as JSX
+                  <div className="w-full max-h-100">
+                    <div className="w-full max-h-100 overflow-hidden">
+                      {svgContent}
+                    </div>
+                  </div>
+                ) : (
+                  // Fallback message
+                  <div className="flex items-center justify-center h-40 text-gray-500">
+                    <p>Please provide SVG content or URL</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SingleCellPipeline;

app/dna-sequencing/single-cell-dna-sequencing/page.js

@@ -1,8 +1,8 @@
 // app/dna-sequencing/single-cell-dna-sequencing/page.js
-import TitleBar from '../../components/shared/TitleBar';
+import DNATitleBar from '../../components/shared/DNATitleBar';
 import SingleCellIntroduction from './components/SingleCellIntroduction';
-import SingleCellAdvantages from './components/SingleCellAdvantages';
 import SingleCellApplications from './components/SingleCellApplications';
+import SingleCellPipeline from './components/SingleCellPipeline';
 import SingleCellSpecifications from './components/SingleCellSpecifications';
 import PageLayout from '../../components/Layout/PageLayout';
 
@@ -20,7 +20,7 @@ export default function SingleCellDNASequencingPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },
@@ -34,7 +34,7 @@ export default function SingleCellDNASequencingPage() {
   return (
     <PageLayout fixedHeader={true}>
       {/* Title Bar */}
-      <TitleBar 
+      <DNATitleBar 
         title="Single Cell DNA Sequencing"
         desc="Mapping Genetic Diversity Cell by Cell"
         breadcrumbs={breadcrumbs}
@@ -46,8 +46,7 @@ export default function SingleCellDNASequencingPage() {
         {/* Introduction Section */}
         <SingleCellIntroduction />
 
-        {/* Advantages Section */}
-        <SingleCellAdvantages />
+        <SingleCellPipeline/>
 
         {/* Applications Section */}
         <SingleCellApplications />

app/dna-sequencing/snp-genotyping/components/SNPIntroduction.jsx

@@ -5,6 +5,13 @@ const SNPIntroduction = () => {
   const contentItems = [
     "SNP-based genotyping identifies single nucleotide polymorphisms (SNPs) across the genome, offering insights into genetic diversity, disease associations, and trait inheritance. It is widely applied in population genetics, evolutionary biology, and plant and animal breeding."
   ];
+  const advantageItems = [
+    "Allows for precise identification of genetic variations at a single nucleotide level, enabling detailed mapping of genetic diversity.",
+    "Provides an efficient, cost-effective solution for analyzing thousands of SNPs across large populations, ideal for high-throughput studies.",
+    "SNP markers are stable and abundant across genomes, providing high data quality, reproducibility, and scalability, which are essential for reliable genetic studies, comparative analyses across multiple populations or species, and make SNP-based genotyping a powerful tool for both research and applied genomics.",
+    "Can reveal associations between genetic variations and complex traits, allowing researchers to identify genetic contributors to health, disease, or productivity in agriculture."
+  ];
+
 
   const serviceTypes = [
     "DNA Sequencing",
@@ -14,9 +21,11 @@ const SNPIntroduction = () => {
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
-      imageUrl="/images/snp-genotyping-overview.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/SNP-based_genotyping_(ddRAD).png"
       imageAlt="SNP Genotyping Overview"
       badgeText="ISO CERTIFIED"
       serviceTypes={serviceTypes}

app/dna-sequencing/snp-genotyping/page.js

@@ -1,7 +1,6 @@
 // app/dna-sequencing/snp-genotyping/page.js
-import TitleBar from '../../components/shared/TitleBar';
+import DNATitleBar from '../../components/shared/DNATitleBar';
 import SNPIntroduction from './components/SNPIntroduction';
-import SNPAdvantages from './components/SNPAdvantages';
 import SNPApplications from './components/SNPApplications';
 import SNPSpecifications from './components/SNPSpecifications';
 import PageLayout from '../../components/Layout/PageLayout';
@@ -16,7 +15,7 @@ export default function SNPGenotypingPage() {
   return (
     <PageLayout fixedHeader={true}>
       <div className="page-wrapper">
-        <TitleBar 
+        <DNATitleBar 
           title="SNP-based Genotyping"
           desc="From Genomes to Traits: Precision through SNPs"
           breadcrumbs={breadcrumbs}
@@ -25,7 +24,6 @@ export default function SNPGenotypingPage() {
         
         <div className="page-content">
           <SNPIntroduction />
-          <SNPAdvantages />
           <SNPApplications />
           <SNPSpecifications />
         </div>

app/dna-sequencing/whole-genome-sequencing/components/WGSIntroduction.jsx

@@ -9,12 +9,20 @@ const WGSIntroduction = () => {
     "In the bioinformatics analysis, these reads are then assembled to construct the genome or aligned to a known reference genome.",
     "It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
   ];
+  const advantageItems = [
+    "Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing.",
+    "Identifies both small (SNVs, CNVs, InDels) and large structural variants that may be missed with targeted approaches, offering valuable insights into inherited genetic conditions and characterizing mutations driving cancer progression.",
+    "Generates large volumes of data quickly, facilitating the assembly of novel genomes.",
+    "Uncovers genomic diversity, taxonomic classifications, and evolutionary relationships, enhancing our understanding of biological complexity."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
-      imageUrl="/images/denovo-workflow.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/whole_genome_seq-normal_denovo.png"
       imageAlt="Sample Process Steps"
       useParagraphs={true}
     />

app/dna-sequencing/whole-genome-sequencing/denovo/components/DenovoIntroduction.jsx

@@ -3,18 +3,26 @@
 import IntroductionLayout from '../../../../components/shared/IntroductionLayout';
 
 const DenovoIntroduction = () => {
-  const contentItems = [
+  const introItems = [
     "Whole Genome Denovo Sequencing involves sequencing an organism's entire genome from scratch, without a reference genome. This approach is essential for species with unsequenced or incomplete genomes.",
     "The workflow includes isolating DNA, fragmenting it, and sequencing to produce millions of short reads.",
     "These reads are then assembled into longer sequences, called contigs, using bioinformatics tools in the genome assembly process.",
     "It can be used for sequencing diverse species, such as agriculturally important livestock, plants, bacteria, or disease-related microbes."
   ];
+  const advantageItems = [
+    "Eliminates the need for pre-existing reference genomes, which allows for the discovery of novel genetic elements and variations that may not be present in other genomes, providing a truly unbiased view of the genome.",
+    "Identifies new genes and genetic variations that may be missed by relying on reference genomes alone.",
+    "Offers high-resolution insights into the genome, including complex regions such as repetitive sequences and heterochromatic regions, which are often challenging to assemble with other sequencing approaches.",
+    "Enhances our understanding of genetic diversity, facilitates comparative genomics, and contributes significantly to advancements in genomic research across various fields."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
-      imageUrl="/images/denovo-workflow.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={introItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/whole_genome_seq-normal_denovo.png"
       imageAlt="De Novo Assembly Workflow"
       badgeText="DE NOVO ASSEMBLY"
       badgeSubtext="Brochure from whole genome"

app/dna-sequencing/whole-genome-sequencing/denovo/components/WGSDeNovoPipeline.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+const WGSDeNovoPipeline = ({
+  title = "Bioinformatics Pipeline",
+  svgContent = null, // Pass your SVG content here as JSX
+  svgUrl = "/images/flowchart/denovo.svg",
+  backgroundColor = "bg-gray-50",
+  className = "",
+  titleClassName = "",
+  svgClassName = "",
+  containerClassName = ""
+}) => {
+  return (
+    <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={"text-3xl font-bold text-teal-700 mb-4"}>
+          {title}
+        </h2>
+
+        {/* SVG Flowchart Container */}
+        <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 and reduced height */}
+              <div className={`w-full max-h-180 overflow-hidden ${svgClassName}`}>
+                {svgUrl ? (
+                  // If SVG URL/path is provided
+                  <img 
+                    src={svgUrl} 
+                    alt="Flowchart diagram"
+                    className="w-full h-auto object-contain max-h-180"
+                  />
+                ) : svgContent ? (
+                  // If SVG content is provided as JSX
+                  <div className="w-full max-h-180">
+                    <div className="w-full max-h-180 overflow-hidden">
+                      {svgContent}
+                    </div>
+                  </div>
+                ) : (
+                  // Fallback message
+                  <div className="flex items-center justify-center h-40 text-gray-500">
+                    <p>Please provide SVG content or URL</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WGSDeNovoPipeline;

app/dna-sequencing/whole-genome-sequencing/denovo/page.js

@@ -1,21 +1,21 @@
-import TitleBar from '../../../components/shared/TitleBar';
+import DNATitleBar from '../../../components/shared/DNATitleBar';
 import DenovoIntroduction from './components/DenovoIntroduction';
-import DenovoAdvantages from './components/DenovoAdvantages';
 import DenovoApplications from './components/DenovoApplications';
 import DenovoSpecifications from './components/DenovoSpecifications';
+import WGSDeNovoPipeline from './components/WGSDeNovoPipeline';
 import PageLayout from '../../../components/Layout/PageLayout';
 
 export default function WholeGenomeDenovoPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Whole Genome Sequencing', href: '/dna-sequencing/whole-genome-sequencing' },
     { label: 'Whole Genome Denovo Sequencing', current: true }
   ];
 
   return (
     <PageLayout fixedHeader={true}>
-      <TitleBar
+      <DNATitleBar
         title="Whole Genome Denovo Sequencing"
         desc="Unlocking Genomes, Discovering Diversity"
         breadcrumbs={breadcrumbs}
@@ -23,7 +23,7 @@ export default function WholeGenomeDenovoPage() {
       
       <div className="page-content">
         <DenovoIntroduction />
-        <DenovoAdvantages />
+        <WGSDeNovoPipeline/>
         <DenovoApplications />
         <DenovoSpecifications />
       </div>

app/dna-sequencing/whole-genome-sequencing/page.js

@@ -1,20 +1,19 @@
 // app/dna-sequencing/whole-genome-sequencing/page.js (Updated)
-import TitleBar from '../../components/shared/TitleBar';
+import DNATitleBar from '../../components/shared/DNATitleBar';
 import WGSIntroduction from './components/WGSIntroduction';
-import WGSAdvantages from './components/WGSAdvantages';
 import WGSSpecifications from './components/WGSSpecifications';
 import PageLayout from '@/app/components/Layout/PageLayout';
 
 export default function WholeGenomeSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Whole Genome Sequencing', current: true }
   ];
 
   return (
     <PageLayout fixedHeader={true}>
-      <TitleBar
+      <DNATitleBar
         title="Whole Genome Sequencing"
         desc="Whole Genome, Whole Insights"
         breadcrumbs={breadcrumbs}
@@ -22,7 +21,6 @@ export default function WholeGenomeSequencingPage() {
       
       <div className="page-content">
         <WGSIntroduction />
-        <WGSAdvantages />
         <WGSSpecifications />
       </div>
     </PageLayout>

app/dna-sequencing/whole-genome-sequencing/resequencing/components/ResequencingIntroduction.jsx

@@ -9,12 +9,20 @@ const ResequencingIntroduction = () => {
     "These reads undergo alignment to a reference genome, followed by the analysis of genetic variations using advanced bioinformatics tools.",
     "It enables detailed analysis of genetic variations across diverse species like humans, plants, and bacteria."
   ];
+  const advantageItems = [
+    "Provides a detailed examination of an organism's entire genome, revealing all genetic variations compared to a reference genome.",
+    "Enables accurate identification of single nucleotide polymorphisms (SNPs), insertions, deletions, and structural variants, crucial for understanding genetic diversity and disease mechanisms.",
+    "Facilitates the discovery of genetic markers associated with diseases, guiding personalized treatment approaches.",
+    "Supports diverse studies including evolutionary biology, agricultural genetics, and microbial genomics, enhancing insights into genetic adaptations and relationships across species."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
-      imageUrl="/images/resequencing-workflow.png"
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
+      imageUrl="/images/dna/resequencing-workflow.png"
       imageAlt="Resequencing Workflow"
       badgeText="RESEQUENCING"
       badgeSubtext="Change only sequencing and analysis by adding it from whole exome"

app/dna-sequencing/whole-genome-sequencing/resequencing/components/WGSResequencingPipeline.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+const WGSResequencingPipeline = ({
+  title = "Bioinformatics Pipeline",
+  svgContent = null, // Pass your SVG content here as JSX
+  svgUrl = "/images/flowchart/resequencing.svg",
+  backgroundColor = "bg-gray-50",
+  className = "",
+  titleClassName = "",
+  svgClassName = "",
+  containerClassName = ""
+}) => {
+  return (
+    <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={"text-3xl font-bold text-teal-700 mb-4"}>
+          {title}
+        </h2>
+
+        {/* SVG Flowchart Container */}
+        <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 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 max-h-100"
+                  />
+                ) : svgContent ? (
+                  // If SVG content is provided as JSX
+                  <div className="w-full max-h-100">
+                    <div className="w-full max-h-100 overflow-hidden">
+                      {svgContent}
+                    </div>
+                  </div>
+                ) : (
+                  // Fallback message
+                  <div className="flex items-center justify-center h-40 text-gray-500">
+                    <p>Please provide SVG content or URL</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WGSResequencingPipeline;

app/dna-sequencing/whole-genome-sequencing/resequencing/page.js

@@ -1,21 +1,21 @@
-import TitleBar from '../../../components/shared/TitleBar';
+import DNATitleBar from '../../../components/shared/DNATitleBar';
 import ResequencingIntroduction from './components/ResequencingIntroduction';
-import ResequencingAdvantages from './components/ResequencingAdvantages';
 import ResequencingApplications from './components/ResequencingApplications';
 import ResequencingSpecifications from './components/ResequencingSpecifications';
+import WGSResequencingPipeline from './components/WGSResequencingPipeline';
 import PageLayout from '../../../components/Layout/PageLayout';
 
 export default function WholeGenomeResequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Whole Genome Sequencing', href: '/dna-sequencing/whole-genome-sequencing' },
     { label: 'Whole Genome ReSequencing', current: true }
   ];
 
   return (
     <PageLayout fixedHeader={true}>
-      <TitleBar
+      <DNATitleBar
         title="Whole Genome ReSequencing"
         desc="Unraveling Genomic Complexity with Re-Sequencing"
         breadcrumbs={breadcrumbs}
@@ -23,7 +23,7 @@ export default function WholeGenomeResequencingPage() {
       
       <div className="page-content">
         <ResequencingIntroduction />
-        <ResequencingAdvantages />
+        <WGSResequencingPipeline/>
         <ResequencingApplications />
         <ResequencingSpecifications />
       </div>

app/health/Components/ClinicalAreas.jsx

@@ -0,0 +1,71 @@
+// components/ClinicalAreas.js
+import Link from "next/link";
+import Image from "next/image";
+
+export default function ClinicalAreas() {
+  return (
+    <div className="mx-auto px-10 py-4">
+      {/* Heading */}
+      <h2 className="text-3xl font-bold text-teal-700 mb-4">
+        Precise Solutions for Clinical Areas
+      </h2>
+
+      {/* Subtext */}
+      <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+        Empowering you with precise, tailored approaches to diagnostics and care — 
+        addressing the unique needs of each clinical area to improve patient outcomes.
+      </p>
+
+      {/* Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        {/* Rare Disorders */}
+        <Link href="/health/rare-disorders">
+          <div className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
+            <div className="flex items-start gap-4">
+              {/* Icon */}
+              <div className="flex-shrink-0 mt-1">
+                <Image
+                  src="/images/icons/disorder.png"
+                  alt="Rare Disorders"
+                  width={40}
+                  height={40}
+                  className="object-contain"
+                />
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">Rare Disorders</h3>
+                <p className="text-gray-500 text-sm leading-relaxed">
+                  Advancing diagnostics and treatments for rare genetic conditions.
+                </p>
+              </div>
+            </div>
+          </div>
+        </Link>
+
+        {/* Oncology */}
+        <Link href="/health/oncology">
+          <div className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
+            <div className="flex items-start gap-4">
+              {/* Icon */}
+              <div className="flex-shrink-0 mt-1">
+                <Image
+                  src="/images/icons/oncology.png"
+                  alt="Oncology"
+                  width={40}
+                  height={40}
+                  className="object-contain"
+                />
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">Oncology</h3>
+                <p className="text-gray-500 text-sm leading-relaxed">
+                  Revolutionizing cancer care with targeted therapies and early detection.
+                </p>
+              </div>
+            </div>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+}

app/health/Components/HealthIntro.jsx

@@ -0,0 +1,43 @@
+// components/AboutHealth.js
+import Image from "next/image";
+import Link from "next/link";
+
+export default function AboutHealth() {
+  return (
+    <section className="py-0">
+      <div className="container-fluid">
+        <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
+          <div className="w-full">
+            <ul className="list-disc list-inside space-y-4 leading-relaxed pl-4">
+              <li className="text-justify" style={{color: '#faae31'}}>
+                <span style={{color: '#ffffff'}}>
+                  At Operify Health, we believe every patient deserves answers that are not only
+                  accurate — but actionable. By harnessing the power of Next Generation Sequencing
+                  (NGS), we transform patient samples into rich genomic insights that enable
+                  clinicians and oncologists to make informed, personalized decisions. From rare
+                  genetic disorders to complex oncological cases, our solutions help uncover what
+                  traditional diagnostics often miss.
+                </span>
+              </li>
+              <li className="text-justify" style={{color: '#faae31'}}>
+                <span style={{color: '#ffffff'}}>
+                  Our strength lies in our multidisciplinary team of researchers, bioinformaticians,
+                  and data scientists who use custom-built algorithms and cutting-edge analytics to
+                  interpret genetic data with unmatched depth. Backed by curated scientific evidence
+                  and real-world clinical findings, we deliver recommendations that are current,
+                  relevant, and patient-focused.
+                </span>
+              </li>
+              <li className="text-justify" style={{color: '#faae31'}}>
+                <span style={{color: '#ffffff'}}>
+                  With every genome we decode, we move closer to truly personalized medicine —
+                  bridging data and care, science and life.
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

app/health/Components/HealthTitle.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const HealthTitle = () => {
+  return (
+    <section 
+      className="relative bg-cover bg-center py-6 h-[7rem]" 
+      style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
+    >
+      {/* Breadcrumb */}
+      <div className="relative z-10 mb-1 -mt-3">
+        <div className="container mx-auto max-w-none px-4">
+          <nav className="flex items-center space-x-2 text-sm">
+            <a href="/" className="text-white hover:text-yellow-400 underline">Home</a>
+            <span className="text-white">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <a href="/about-us" className="text-white hover:text-yellow-400 underline">Health</a>
+            {/* <span className="text-white">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <span className="text-white">Career</span> */}
+          </nav>
+        </div>
+      </div>
+      
+      {/* Page Title */}
+      <div className="relative z-10 text-center -mt-2">
+        <h1 className="text-4xl md:text-4xl font-bold text-white mb-2">
+          About Health
+        </h1>
+        <div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
+      </div>
+    </section>
+  );
+};
+
+export default HealthTitle;

app/health/components/ClinicalAreas.jsx

@@ -0,0 +1,71 @@
+// components/ClinicalAreas.js
+import Link from "next/link";
+import Image from "next/image";
+
+export default function ClinicalAreas() {
+  return (
+    <div className="mx-auto px-10 py-4">
+      {/* Heading */}
+      <h2 className="text-3xl font-bold text-teal-700 mb-4">
+        Precise Solutions for Clinical Areas
+      </h2>
+
+      {/* Subtext */}
+      <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+        Empowering you with precise, tailored approaches to diagnostics and care — 
+        addressing the unique needs of each clinical area to improve patient outcomes.
+      </p>
+
+      {/* Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        {/* Rare Disorders */}
+        <Link href="/health/rare-disorders">
+          <div className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
+            <div className="flex items-start gap-4">
+              {/* Icon */}
+              <div className="flex-shrink-0 mt-1">
+                <Image
+                  src="/images/icons/disorder.png"
+                  alt="Rare Disorders"
+                  width={40}
+                  height={40}
+                  className="object-contain"
+                />
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">Rare Disorders</h3>
+                <p className="text-gray-500 text-sm leading-relaxed">
+                  Advancing diagnostics and treatments for rare genetic conditions.
+                </p>
+              </div>
+            </div>
+          </div>
+        </Link>
+
+        {/* Oncology */}
+        <Link href="/health/oncology">
+          <div className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
+            <div className="flex items-start gap-4">
+              {/* Icon */}
+              <div className="flex-shrink-0 mt-1">
+                <Image
+                  src="/images/icons/oncology.png"
+                  alt="Oncology"
+                  width={40}
+                  height={40}
+                  className="object-contain"
+                />
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">Oncology</h3>
+                <p className="text-gray-500 text-sm leading-relaxed">
+                  Revolutionizing cancer care with targeted therapies and early detection.
+                </p>
+              </div>
+            </div>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+}

app/health/components/HealthIntro.jsx

@@ -0,0 +1,43 @@
+// components/AboutHealth.js
+import Image from "next/image";
+import Link from "next/link";
+
+export default function AboutHealth() {
+  return (
+    <section className="py-0">
+      <div className="container-fluid">
+        <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
+          <div className="w-full">
+            <ul className="list-disc list-inside space-y-4 leading-relaxed pl-4">
+              <li className="text-justify" style={{color: '#faae31'}}>
+                <span style={{color: '#ffffff'}}>
+                  At Operify Health, we believe every patient deserves answers that are not only
+                  accurate — but actionable. By harnessing the power of Next Generation Sequencing
+                  (NGS), we transform patient samples into rich genomic insights that enable
+                  clinicians and oncologists to make informed, personalized decisions. From rare
+                  genetic disorders to complex oncological cases, our solutions help uncover what
+                  traditional diagnostics often miss.
+                </span>
+              </li>
+              <li className="text-justify" style={{color: '#faae31'}}>
+                <span style={{color: '#ffffff'}}>
+                  Our strength lies in our multidisciplinary team of researchers, bioinformaticians,
+                  and data scientists who use custom-built algorithms and cutting-edge analytics to
+                  interpret genetic data with unmatched depth. Backed by curated scientific evidence
+                  and real-world clinical findings, we deliver recommendations that are current,
+                  relevant, and patient-focused.
+                </span>
+              </li>
+              <li className="text-justify" style={{color: '#faae31'}}>
+                <span style={{color: '#ffffff'}}>
+                  With every genome we decode, we move closer to truly personalized medicine —
+                  bridging data and care, science and life.
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

app/health/components/HealthTitle.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const HealthTitle = () => {
+  return (
+    <section 
+      className="relative bg-cover bg-center py-6 h-[7rem]" 
+      style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
+    >
+      {/* Breadcrumb */}
+      <div className="relative z-10 mb-1 -mt-3">
+        <div className="container mx-auto max-w-none px-4">
+          <nav className="flex items-center space-x-2 text-sm">
+            <a href="/" className="text-white hover:text-yellow-400 underline">Home</a>
+            <span className="text-white">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <a href="/about-us" className="text-white hover:text-yellow-400 underline">Health</a>
+            {/* <span className="text-white">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <span className="text-white">Career</span> */}
+          </nav>
+        </div>
+      </div>
+      
+      {/* Page Title */}
+      <div className="relative z-10 text-center -mt-2">
+        <h1 className="text-4xl md:text-4xl font-bold text-white mb-2">
+          About Health
+        </h1>
+        <div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
+      </div>
+    </section>
+  );
+};
+
+export default HealthTitle;

app/health/oncology/Components/CancerKeyFeatures.jsx

@@ -0,0 +1,25 @@
+export default function CancerKeyFeatures() {
+  const features = [
+    { title: "Comprehensive Gene Coverage", desc: "Includes high- and moderate-risk genes such as BRCA1, BRCA2, TP53, MLH1, MSH2, APC, and others." },
+    { title: "Germline Variant Detection", desc: "Accurately detects SNVs, Indels, and selected CNVs in genes associated with inherited cancer risk." },
+    { title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." },
+    { title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." },
+    { title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." },
+    { title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." },
+    { title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
+  ];
+
+  return (
+    <section className="p-10">
+      <h3 className="text-lg font-semibold mb-4">Key Features</h3>
+      <div className="grid md:grid-cols-2 gap-4">
+        {features.map((f, idx) => (
+          <div key={idx} className="border p-4 rounded-lg hover:shadow-lg transition-shadow">
+            <h4 className="font-semibold">{f.title}</h4>
+            <p className="text-gray-600">{f.desc}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

app/health/oncology/Components/HereditaryCancerPanel.jsx

@@ -0,0 +1,61 @@
+export default function HereditaryCancerPanel() {
+  const features = [
+    { title: "Comprehensive Gene Coverage", desc: "Includes high- and moderate-risk genes such as BRCA1, BRCA2, TP53, MLH1, MSH2, APC, and others." },
+    { title: "Germline Variant Detection", desc: "Accurately detects SNVs, Indels, and selected CNVs in genes associated with inherited cancer risk." },
+    { title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." },
+    { title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." },
+    { title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." },
+    { title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." },
+    { title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
+  ];
+
+  const points = [
+    "About 5-10% of all cancers are linked to inherited genetic mutations, often going undetected until late stages or after multiple family members are affected.",
+    "The Operify Hereditary Cancer Panel screens key high- and moderate-risk genes associated with hereditary cancer syndromes like HBOC, Lynch Syndrome (LS), Li Fraumeni Syndrome (LFS), Familial Adenomatous Polyposis (FAP), Cowden Syndrome (CS), Peutz-Jeghers Syndrome (PJS), Neurofibromatosis (NF) etc.",
+    "Early identification of germline mutations enables proactive clinical decisions, including risk-reducing strategies, targeted surveillance, and family cascade testing.",
+    "Studies show that genetic testing in hereditary cancer cases improves outcomes and informs care for both patients and at-risk relatives."
+  ];
+
+  return (
+    <section className="mx-auto px-8 pt-8">
+      <h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify Hereditary Cancer Panel</h2>
+      
+      <div className="mb-8">
+        <ul className="space-y-4">
+          {points.map((point, idx) => (
+            <li key={idx} className="flex items-start">
+              <span 
+                className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
+                style={{backgroundColor: '#faae31'}}
+              ></span>
+              <p className="text-gray-600 leading-relaxed text-base text-justify">
+                <strong>{idx === 0 ? "About 5-10% of all cancers are linked to inherited genetic mutations" : ""}</strong>
+                {idx === 0 ? ", often going undetected until late stages or after multiple family members are affected." : point}
+              </p>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <h3 className="text-2xl font-semibold text-gray-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>
+      </div>
+    </section>
+  );
+}

app/health/oncology/Components/OncologyIntro.jsx

@@ -0,0 +1,52 @@
+export default function OncologyIntro() {
+  return (
+    <section className="py-0">
+      <div className="container-fluid">
+        <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
+          <div className="w-full">
+            <h2 className="text-3xl font-bold text-white mb-6 leading-tight">
+              Turning Complexity into Clarity
+            </h2>
+            <ul className="space-y-4">
+              <li className="flex items-start gap-3">
+                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
+                <span className="leading-relaxed text-justify">
+                  Cancer is not a single disease—it's a highly complex and dynamic group of disorders, 
+                  often driven by a multitude of genomic alterations. Despite advancements in treatment, 
+                  many patients still face uncertainty due to incomplete or delayed molecular diagnoses.
+                </span>
+              </li>
+              <li className="flex items-start gap-3">
+                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
+                <span className="leading-relaxed text-justify">
+                  At Operify Health, we recognize that behind every tumor is a unique genetic story waiting 
+                  to be told. Our precision oncology solutions utilize high-throughput Next Generation 
+                  Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians 
+                  with actionable insights that inform targeted therapies, immunotherapy decisions, and 
+                  hereditary cancer risk assessments.
+                </span>
+              </li>
+              <li className="flex items-start gap-3">
+                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
+                <span className="leading-relaxed text-justify">
+                  This genomic-driven approach is especially critical in advanced and treatment-resistant 
+                  cancers, where conventional methods often fall short. Studies have shown that integrating 
+                  broad-panel NGS into cancer care can impact clinical decision-making in up to 30% of cases, 
+                  leading to more personalized and effective treatment strategies.
+                </span>
+              </li>
+              <li className="flex items-start gap-3">
+                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
+                <span className="leading-relaxed text-justify">
+                  By combining cutting-edge sequencing, advanced bioinformatics, and curated clinical evidence, 
+                  Operify Health empowers oncologists to move from uncertainty to precision—ensuring every cancer 
+                  patient's care is as individualized as their diagnosis.
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

app/health/oncology/Components/OncologyTitle.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const OncologyTitle = () => {
+  return (
+    <section 
+      className="relative bg-cover bg-center py-6 h-24" 
+      style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
+    >
+      {/* Breadcrumb */}
+      <div className="relative z-10 mb-1 -mt-3">
+        <div className="container mx-auto max-w-none px-4">
+          <nav className="flex items-center space-x-2 text-sm">
+            <a href="/" className="text-white hover:text-yellow-400 underline">Home</a>
+            <span className="text-white">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <a href="/about-us" className="text-white hover:text-yellow-400 underline">Health</a>
+            <span className="text-white">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <span className="text-white">Oncology</span>
+          </nav>
+        </div>
+      </div>
+      
+      {/* Page Title */}
+      <div className="relative z-10 text-center -mt-2">
+        <h1 className="text-4xl md:text-4xl font-bold text-white mb-2">
+          Oncology
+        </h1>
+        <div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
+      </div>
+    </section>
+  );
+};
+
+export default OncologyTitle;

app/health/oncology/Components/SampleRequirements.jsx

@@ -0,0 +1,12 @@
+export default function SampleRequirements({ title, items }) {
+  return (
+    <section className="p-8">
+      <h3 className="text-lg font-semibold mb-4">Sample Requirements – {title}</h3>
+      <ul className="list-disc list-inside text-gray-700 space-y-2">
+        {items.map((item, idx) => (
+          <li key={idx}>{item}</li>
+        ))}
+      </ul>
+    </section>
+  );
+}

app/health/oncology/components/CancerKeyFeatures.jsx

@@ -0,0 +1,25 @@
+export default function CancerKeyFeatures() {
+  const features = [
+    { title: "Comprehensive Gene Coverage", desc: "Includes high- and moderate-risk genes such as BRCA1, BRCA2, TP53, MLH1, MSH2, APC, and others." },
+    { title: "Germline Variant Detection", desc: "Accurately detects SNVs, Indels, and selected CNVs in genes associated with inherited cancer risk." },
+    { title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." },
+    { title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." },
+    { title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." },
+    { title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." },
+    { title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
+  ];
+
+  return (
+    <section className="p-10">
+      <h3 className="text-lg font-semibold mb-4">Key Features</h3>
+      <div className="grid md:grid-cols-2 gap-4">
+        {features.map((f, idx) => (
+          <div key={idx} className="border p-4 rounded-lg hover:shadow-lg transition-shadow">
+            <h4 className="font-semibold">{f.title}</h4>
+            <p className="text-gray-600">{f.desc}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}