DNA SNP update

Dockerfile

@@ -1,75 +1,50 @@
-# Base image for all stages
+# Use smaller base image
-FROM node:20-alpine AS base
+FROM node:18-alpine AS base
 
-### Dependencies Stage ###
+# Install dependencies only when needed
 FROM base AS deps
-# Set a fast and reliable Alpine mirror
+RUN apk add --no-cache libc6-compat
-# 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
-
 WORKDIR /app
 
-# Install dependencies with pnpm
+# Copy package files
-COPY package.json pnpm-lock.yaml ./
+COPY package.json pnpm-lock.yaml* ./
-RUN pnpm install --frozen-lockfile --prefer-frozen-lockfile
+RUN corepack enable pnpm && pnpm install --frozen-lockfile --production=false
 
-### Builder Stage ###
+# Build the source code
 FROM base AS builder
-# Enable pnpm
+WORKDIR /app
-RUN corepack enable
+COPY --from=deps /app/node_modules ./node_modules
-RUN corepack prepare pnpm@latest --activate
+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
+ENV NODE_ENV=production
-COPY --from=deps /app/node_modules ./node_modules
+ENV NEXT_TELEMETRY_DISABLED=1
-# 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
 
-### Production Runner Stage ###
+RUN addgroup --system --gid 1001 nodejs
-FROM base AS runner
+RUN adduser --system --uid 1001 nextjs
-# Set production environment
-ENV NODE_ENV production
 
-# Disable Next.js telemetry
+# Copy built application
-# 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 --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)
+ENV PORT=3000
-HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
+ENV HOSTNAME="0.0.0.0"
-    CMD curl -f http://localhost:3000/health || exit 1
 
-# 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 = uploadedFile.name.toLowerCase().split('.').pop();
-        const fileExtension = fileName.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) {
-        if (uploadedFile.size > 10 * 1024 * 1024) { // 10MB limit
           errors.push('File is too large. Maximum size is 10MB.');
         }
       }
     }
 
     if (errors.length > 0) {
-      return NextResponse.json({ 
+      return NextResponse.json({ error: errors.join(' ') }, { status: 400 });
-        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) {
+      } catch {
-        console.error('Error parsing sample details:', error);
         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 = form_type === 'sample' ? data.Email : data.email;
-    let replyToEmail;
-    if (form_type === 'sample') {
-      replyToEmail = data.Email;
-    } else {
-      replyToEmail = 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({ 
+    // PI email for sample form
-      success: true, 
+    if (form_type === 'sample') {
-      message: config.successMessage
+      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({ 
+    return NextResponse.json({ error: 'Error sending email. Please try again later.' }, { status: 500 });
-      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/CTA/CTASection.jsx

@@ -1,7 +1,16 @@
+"use client";
+
 import React from 'react';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 
 const CTASection = () => {
+  const router = useRouter();
+
+  const handleEnquireClick = () => {
+    router.push('/contact-us');
+  };
+
   return (
     <section className="py-6">
       <div className="container mx-auto max-w-none px-6">
@@ -31,7 +40,10 @@ const CTASection = () => {
             your samples, and generate your first NGS dataset.
           </p>
           
-          <button className="bg-yellow-400 text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-yellow-300 transition-colors">
+          <button 
+            onClick={handleEnquireClick}
+            className="bg-yellow-400 text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-yellow-300 transition-colors"
+          >
             Enquire Now
           </button>
         </div>

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

@@ -1,4 +1,5 @@
 // components/Layout/Footer.jsx
+'use client';
 import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
@@ -39,7 +40,7 @@ const Footer = () => {
             </address>
 
             {/* Social Links */}
-            <div className="flex space-x-4 mt-8">
+            <div className="flex mt-8">
               <a 
                 href="#" 
                 target="_blank" 
@@ -71,11 +72,11 @@ const Footer = () => {
           <div>
             <h3 className="text-xl font-semibold mb-6 text-white">Services</h3>
             <ul className="space-y-3 text-teal-100">
-              <li className="hover:text-white transition-colors cursor-pointer">DNA Sequencing</li>
+              <li className="hover:text-[#faae31] transition-colors cursor-pointer">DNA Sequencing</li>
-              <li className="hover:text-white transition-colors cursor-pointer">RNA Sequencing</li>
+              <li className="hover:text-[#faae31] transition-colors cursor-pointer">RNA Sequencing</li>
-              <li className="hover:text-white transition-colors cursor-pointer">Genotyping</li>
+              <li className="hover:text-[#faae31] transition-colors cursor-pointer">Genotyping</li>
-              <li className="hover:text-white transition-colors cursor-pointer">Bioinformatics Services</li>
+              <li className="hover:text-[#faae31] transition-colors cursor-pointer">Bioinformatics Services</li>
-              <li className="hover:text-white transition-colors cursor-pointer">Long Read Sequencing</li>
+              <li className="hover:text-[#faae31] transition-colors cursor-pointer">Long Read Sequencing</li>
             </ul>
           </div>
 
@@ -83,12 +84,12 @@ const Footer = () => {
           <div>
             <h3 className="text-xl font-semibold mb-6 text-white">Useful Link</h3>
             <ul className="space-y-3">
-              <li><Link href="/" className="text-teal-100 hover:text-white transition-colors">Home</Link></li>
+              <li><Link href="/" className="text-teal-100 hover:text-[#faae31] transition-colors">Home</Link></li>
-              <li><Link href="#research" className="text-teal-100 hover:text-white transition-colors">Research</Link></li>
+              <li><Link href="#research" className="text-teal-100 hover:text-[#faae31] transition-colors">Research</Link></li>
-              <li><Link href="#" className="text-teal-100 hover:text-white transition-colors">Health</Link></li>
+              <li><Link href="#" className="text-teal-100 hover:text-[#faae31] transition-colors">Health</Link></li>
-              <li><Link href="/sample-submission-guideline" className="text-teal-100 hover:text-white transition-colors">Knowledge Hub</Link></li>
+              <li><Link href="/sample-submission-guideline" className="text-teal-100 hover:text-[#faae31] transition-colors">Knowledge Hub</Link></li>
-              <li><Link href="/company" className="text-teal-100 hover:text-white transition-colors">About Us</Link></li>
+              <li><Link href="/company" className="text-teal-100 hover:text-[#faae31] transition-colors">About Us</Link></li>
-              <li><Link href="/contact-us" className="text-teal-100 hover:text-white transition-colors">Contact</Link></li>
+              <li><Link href="/contact-us" className="text-teal-100 hover:text-[#faae31] transition-colors">Contact</Link></li>
             </ul>
           </div>
 
@@ -102,7 +103,7 @@ const Footer = () => {
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                   </svg>
                 </div>
-                <a href="mailto:info@operifytech.com" className="hover:text-white transition-colors">
+                <a href="mailto:info@operifytech.com" className="hover:text-[#faae31] transition-colors">
                   Info@operifytech.com
                 </a>
               </div>
@@ -112,7 +113,7 @@ const Footer = () => {
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                   </svg>
                 </div>
-                <a href="tel:01143046242" className="hover:text-white transition-colors">
+                <a href="tel:01143046242" className="hover:text-[#faae31] transition-colors">
                   01143046242
                 </a>
               </div>
@@ -122,7 +123,7 @@ const Footer = () => {
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                   </svg>
                 </div>
-                <a href="tel:9319171176" className="hover:text-white transition-colors">
+                <a href="tel:9319171176" className="hover:text-[#faae31] transition-colors">
                   9319171176
                 </a>
               </div>
@@ -136,14 +137,14 @@ 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>
+              <li><Link href="#" className="transition-colors" style={{ ':hover': { color: '#faae31' } }} onMouseEnter={(e) => e.target.style.color = '#faae31'} onMouseLeave={(e) => e.target.style.color = ''}>Privacy Policy</Link></li>
               <li className="text-gray-400">|</li>
-              <li><Link href="#" className="hover:text-gray-800 transition-colors">Term And Condition</Link></li>
+              <li><Link href="#" className="transition-colors" style={{ ':hover': { color: '#faae31' } }} onMouseEnter={(e) => e.target.style.color = '#faae31'} onMouseLeave={(e) => e.target.style.color = ''}>Term And Condition</Link></li>
               <li className="text-gray-400">|</li>
-              <li><Link href="#" className="hover:text-gray-800 transition-colors">FAQ</Link></li>
+              <li><Link href="#" className="transition-colors" style={{ ':hover': { color: '#faae31' } }} onMouseEnter={(e) => e.target.style.color = '#faae31'} onMouseLeave={(e) => e.target.style.color = ''}>FAQ</Link></li>
             </ul>
           </div>
         </div>

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"
@@ -146,7 +146,7 @@ const Header = () => {
                               href="/dna-sequencing/enrichment-sequencing/targeted-sequencing"
                               className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
                             >
-                              Targeted DNA Sequencing
+                              Custom DNA Sequencing
                             </Link>
                           </li>
                         </ul>
@@ -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"
@@ -265,13 +265,26 @@ const Header = () => {
                           Hybrid Genome Sequencing
                         </Link>
                       </li>
-                      <li>
+                      <li className="relative group/snp-genotyping">
                         <Link
                           href="/dna-sequencing/snp-genotyping"
-                          className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
+                          className="flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
                         >
                           SNP-based Genotyping
+                          <svg className="w-3 h-3 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                          </svg>
                         </Link>
+                        <ul className="absolute top-0 left-full bg-white shadow-xl rounded-md py-2 w-72 opacity-0 invisible group-hover/snp-genotyping:opacity-100 group-hover/snp-genotyping:visible transition-all duration-300 z-50 border border-gray-100 ml-1">
+                          <li>
+                            <Link
+                              href="/dna-sequencing/snp-genotyping/ddRAD-sequencing"
+                              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
+                            >
+                              ddRAD Sequencing
+                            </Link>
+                          </li>
+                        </ul>
                       </li>
                       <li>
                         <Link
@@ -285,7 +298,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 +381,55 @@ 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 className="relative group/rare">
+                    <Link
+                      href="/health/rare-disorders"
+                      className="flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
+                    >
+                      Rare Disorders
+                      <svg className="w-3 h-3 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      </svg>
+                    </Link>
+                    <ul className="absolute top-0 left-full bg-white shadow-xl rounded-md py-2 w-48 opacity-0 invisible group-hover/rare:opacity-100 group-hover/rare:visible transition-all duration-300 z-50 border border-gray-100 ml-1">
+                      <li>
+                        <Link
+                          href="/health/rare-disorders/exome"
+                          className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
+                        >
+                          Exome
+                        </Link>
+                      </li>
+                      <li>
+                        <Link
+                          href="/health/rare-disorders/exomemito"
+                          className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
+                        >
+                          ExomeMito
+                        </Link>
+                      </li>
+                    </ul>
+                  </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
@@ -478,7 +530,7 @@ const Header = () => {
               <span className="hidden md:inline">Get In Touch</span>
               <span className="md:hidden">Contact</span>
               <svg className="w-3 h-3 sm:w-4 sm:h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <path d="M5 12h14M12 5l7 7-7 7"/>
+                <path d="M5 12h14M12 5l7 7-7 7" />
               </svg>
             </Link>
             {/* Mobile menu button */}
@@ -526,8 +578,7 @@ const Header = () => {
                   >
                     <span>Research</span>
                     <svg
-                      className={`w-4 h-4 transition-transform duration-200 ${
+                      className={`w-4 h-4 transition-transform duration-200 ${openDropdown.includes('research') ? 'rotate-180' : ''
-                        openDropdown.includes('research') ? 'rotate-180' : ''
                         }`}
                       fill="none"
                       stroke="currentColor"
@@ -550,8 +601,7 @@ const Header = () => {
                         >
                           <span>DNA Sequencing</span>
                           <svg
-                            className={`w-3 h-3 transition-transform duration-200 ${
+                            className={`w-3 h-3 transition-transform duration-200 ${openDropdown.includes('dna') ? 'rotate-180' : ''
-                              openDropdown.includes('dna') ? 'rotate-180' : ''
                               }`}
                             fill="none"
                             stroke="currentColor"
@@ -662,8 +712,7 @@ const Header = () => {
                         >
                           <span>RNA Sequencing</span>
                           <svg
-                            className={`w-3 h-3 transition-transform duration-200 ${
+                            className={`w-3 h-3 transition-transform duration-200 ${openDropdown.includes('rna') ? 'rotate-180' : ''
-                              openDropdown.includes('rna') ? 'rotate-180' : ''
                               }`}
                             fill="none"
                             stroke="currentColor"
@@ -783,8 +832,7 @@ const Header = () => {
                   >
                     <span>Knowledge Hub</span>
                     <svg
-                      className={`w-4 h-4 transition-transform duration-200 ${
+                      className={`w-4 h-4 transition-transform duration-200 ${openDropdown.includes('knowledge') ? 'rotate-180' : ''
-                        openDropdown.includes('knowledge') ? 'rotate-180' : ''
                         }`}
                       fill="none"
                       stroke="currentColor"
@@ -840,8 +888,7 @@ const Header = () => {
                   >
                     <span>About Us</span>
                     <svg
-                      className={`w-4 h-4 transition-transform duration-200 ${
+                      className={`w-4 h-4 transition-transform duration-200 ${openDropdown.includes('about') ? 'rotate-180' : ''
-                        openDropdown.includes('about') ? 'rotate-180' : ''
                         }`}
                       fill="none"
                       stroke="currentColor"
@@ -898,7 +945,7 @@ const Header = () => {
                   >
                     <span>Get In Touch</span>
                     <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                      <path d="M5 12h14M12 5l7 7-7 7"/>
+                      <path d="M5 12h14M12 5l7 7-7 7" />
                     </svg>
                   </Link>
                 </li>

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">
+          <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">
-            Picogreen quantification is advised from the client, in absence of which
+                  {guideline}
-            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>
+              </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">
+        <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' }}>
-          Seal the tubes with parafilm for transportation. To prevent the tubes from
+                {guideline.split('\n').map((line, lineIdx) => (
-          being crushed and broken during transit (leading to sample loss), insert
+                  <React.Fragment key={lineIdx}>
-          sample tubes into 50 ml centrifuge tubes (or other rigid supports), which
+                    {lineIdx > 0 && <br />}
-          can also be packed with cotton, foam, etc.
+                    {line.startsWith('(a)') || line.startsWith('(b)') ? (
-        </p>
+                      <>
-        
+                        <span className="font-medium">{line.substring(0, 3)}</span>
-        <p className="leading-relaxed" style={{ color: '#555555' }}>
+                        {line.substring(3)}
-          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
+                      line
-          be carried out on frozen blue ice or dry ice to ensure that the samples
+                    )}
-          remain frozen during shipment.
+                  </React.Fragment>
-        </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>
+            </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' }}>
+        <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.
-        </p>
+            </span>
+          </li>
           
-        <p className="leading-relaxed" style={{ color: '#555555' }}>
+          <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].
-        </p>
+            </span>
+          </li>
           
-        <p className="leading-relaxed" style={{ color: '#555555' }}>
+          <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.
-        </p>
+            </span>
+          </li>
           
-        <p className="leading-relaxed" style={{ color: '#555555' }}>
+          <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.
-        </p>
+            </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' }}>
+        <ul className="space-y-4">
-          Before sending your samples, please notify us promptly by mail or by
+          {guidelines.map((guideline, idx) => (
-          completing the form online, including the Sample Initiation Form. This helps
+            <li key={idx} className="flex items-start">
-          us register and process your samples efficiently upon arrival. As we do not
+              <span 
-          receive packages on weekends, ensure your samples arrive on a weekday. Avoid
+                className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
-          shipping samples just before weekends (e.g., on a Thursday for Friday
+                style={{backgroundColor: '#faae31'}}
-          arrival) or the day before a holiday.
+              ></span>
+              <p className={`leading-relaxed ${idx === 1 ? 'font-medium' : ''}`} style={{ color: '#555555' }}>
+                {guideline}
               </p>
+            </li>
+          ))}
+        </ul>
         
-        <p className="leading-relaxed font-medium" style={{ color: '#555555' }}>
+        <div>
-          We highly recommend using "Priority Overnight Shipping" for morning
-          deliveries, as it is generally more reliable.
-        </p>
-        
-        <p className="leading-relaxed" style={{ color: '#555555' }}>
-          We can pick up the sample from your institution (additional logistic charges
-          will be applicable) or you can ship/drop samples at the mentioned address:
-        </p>
-        
-        <div >
           <div className="leading-relaxed" style={{ color: '#555555' }}>
             <div className="font-semibold text-lg text-teal-700 mb-3">
               Operify Tech Pvt.Ltd.

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: '40%'}} />
-              <col style={{width: '50%'}} />
+              <col style={{width: '35%'}} />
             </colgroup>
             <thead>
               <tr className="bg-teal-50">

app/components/Research/AnimalResearch.jsx

@@ -23,7 +23,7 @@ export default function AnimalResearch() {
             Animal genomics plays a vital role in understanding genetic diversity, disease resistance, and the evolutionary relationships of species. Sequencing animal genomes enables researchers to trace ancestry, identify genes responsible for desirable traits, and analyze gene expression patterns across populations. Our NGS-based animal genomics services provide in-depth analysis of genetic diversity, helping researchers and breeders identify genes that contribute to health, behavior, and other important characteristics.
           </p>
           <p className="text-gray-600 mb-4">
-            From wildlife conservation to livestock improvement, we offer comprehensive sequencing solutions that support a wide range of applications. These include whole-genome sequencing, exome sequencing, and targeted sequencing of disease-related genes. Our advanced technologies allow you to study genetic variations with unparalleled precision, offering valuable insights into both domesticated and wild animal populations.
+            From wildlife conservation to livestock improvement, we offer comprehensive sequencing solutions that support a wide range of applications. These include whole-genome sequencing, exome sequencing, and Custom sequencing of disease-related genes. Our advanced technologies allow you to study genetic variations with unparalleled precision, offering valuable insights into both domesticated and wild animal populations.
           </p>
         </div>
       </div>
@@ -33,7 +33,7 @@ export default function AnimalResearch() {
         <tbody>
           <tr className="bg-gray-100">
             <td className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700 w-1/4">DNA Sequencing</td>
-            <td className="border border-gray-300 px-3 py-2 align-top p-2" style={{ color: '#555555' }}>Whole Genome (Short Read, Long Read, Hybrid), Enrichment (Whole Exome, Amplicon and Targeted), Single Cell DNA, Genome Mapping, Genotyping (Based on SNP, ddRAD, Microsatellites)</td>
+            <td className="border border-gray-300 px-3 py-2 align-top p-2" style={{ color: '#555555' }}>Whole Genome (Short Read, Long Read, Hybrid), Enrichment (Whole Exome, Amplicon and Custom), Single Cell DNA, Genome Mapping, Genotyping (Based on SNP, ddRAD, Microsatellites)</td>
           </tr>
           <tr>
             <td className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700 w-1/4">RNA Sequencing</td>

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: '',
-    Principal_Investigator: '',
+    Address: '', City: '', State: '', Pin: '', Secondary_Contact: '', Secondary_Email: '',
-    Email: '',
+    Secondary_Company_Institution: '', Secondary_Contact_Number: '', Project_Title: '',
-    Company_Institution: '',
+    Number_of_Samples: '', Sample_Type: '', Sample_Type_Other: '', Sample_Source: '',
-    Contact_Number: '',
+    Sample_Source_Other: '', Pathogenicity: '', Sample_Remarks: '', Service_Requested: '',
-    Address: '',
+    Service_Requested_Other: '', Type_of_Library: '', Type_of_Library_Other: '',
-    City: '',
+    Required_Library_Size: '', Required_Library_Size_Other: '', Index_Information: '',
-    State: '',
+    Kit_Information: '', Sequencing_Platform: '', Sequencing_Platform_Other: '',
-    Pin: '',
+    Sequencing_Read_Length: '', Sequencing_Read_Length_Other: '', Total_Data_Requirement: '',
-    Secondary_Contact: '',
+    Service_Remarks: '', Analysis_Requested: '', Analysis_Details: '',
-    Secondary_Email: '',
+    Reference_Genome_Available: '', Genome_Size: '', Special_Consideration: ''
-    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: '',
   });
 
-  const [sampleDetails, setSampleDetails] = useState([
+  const [sampleDetails, setSampleDetails] = useState([{
-    {
+    Serial_Number: '', Sample_Name: '', Storage_Temp: '',
-      Serial_Number: '',
+    Preservative_Reagent: '', Temp_Information: '', Comments: ''
-      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,7 +98,6 @@ const SampleFormContainer = () => {
 
     setFormData(newFormData);
 
-    // Handle Sample Details
     const sampleDetailsData = jsonData.filter(row =>
       row['Serial Number'] || row['Sample Name'] ||
       row['Storage Temp'] || row['Preservative Reagent'] ||
@@ -158,12 +106,12 @@ const SampleFormContainer = () => {
 
     if (sampleDetailsData.length > 0) {
       const newSampleDetails = sampleDetailsData.map(sample => ({
-        Serial_Number: getValue('Serial Number'),
+        Serial_Number: sample['Serial Number'] || '',
-        Sample_Name: getValue('Sample Name'),
+        Sample_Name: sample['Sample Name'] || '',
-        Storage_Temp: getValue('Storage Temp'),
+        Storage_Temp: sample['Storage Temp'] || '',
-        Preservative_Reagent: getValue('Preservative Reagent'),
+        Preservative_Reagent: sample['Preservative Reagent'] || '',
-        Temp_Information: getValue('Temp Information'),
+        Temp_Information: sample['Temp Information'] || '',
-        Comments: getValue('Comments')
+        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);
+        setShowSuccessModal(true); // show modal instead of green alert
 
-        // Reset form after successful submission
         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 
+          <CustomerInfoSection formData={formData} onInputChange={handleInputChange} />
-            formData={formData} 
+          <SampleInfoSection formData={formData} onInputChange={handleInputChange} />
-            onInputChange={handleInputChange} 
+          <ServiceInfoSection formData={formData} onInputChange={handleInputChange} />
-          />
+          <BioinformaticsSection formData={formData} onInputChange={handleInputChange} />
+          <SampleDetailsSection sampleDetails={sampleDetails} setSampleDetails={setSampleDetails} />
 
-          <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,6 +208,48 @@ 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>
   );
 };

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">
+        <ul className="space-y-4 text-gray-700 leading-relaxed pl-5" style={{listStyleType: 'disc'}}>
-          <li className="list-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">
+          <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">
+          <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">
+          <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">
+          <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">
+          <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">
+    <section className="py-0">
-      <div className="container mx-auto max-w-none px-4">
+      <div className="container-fluid">
-        <div className="text-gray-600 max-w-none leading-relaxed text-center">
+        <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8  flex items-center">
-          <div className="text-base text-justify">
+          <div className="w-full">
-            <p className="m-0">
+            <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,8 +3,8 @@ 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')" }}
+      style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
     >
       {/* Breadcrumb */}
       <div className="relative z-10 mb-2 sm:mb-1 pt-2 sm:pt-0 sm:-mt-3 lg:-mt-3">

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">
+                <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/Team/TeamGrid.jsx

@@ -21,14 +21,6 @@ const TeamGrid = () => {
     },
     {
       id: 3,
-      image: "/images/team/Frame 6.png",
-      name: "Dr. Divyank Mahajan",
-      position: "Head, Techno-Commercial Strategy",
-      linkedinUrl: "https://in.linkedin.com/in/divyank-mahajan-phd",
-      detailUrl: "/team-member-detail2"
-    },
-    {
-      id: 4,
       image: "/images/team/Frame 4.png",
       name: "Dr. Mohammed Moquitul Haque",
       position: "Lead Scientist - Clinical Genomics",
@@ -36,7 +28,7 @@ const TeamGrid = () => {
       detailUrl: "/team-member-detail3"
     },
     {
-      id: 5,
+      id: 4,
       image: "/images/team/Frame 12.png",
       name: "Richa Malhotra",
       position: "Business Manager - Clinical Genomic",

app/components/Team/TeamHero.jsx

@@ -4,7 +4,7 @@ const TeamHero = () => {
   return (
     <section 
       className="relative bg-cover bg-center py-6 h-24" 
-      style={{ backgroundImage: "url('images/bredcrumb.jpg')" }}
+      style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
     >
       {/* Breadcrumb */}
       <div className="relative z-10 mb-1 -mt-3">

app/components/shared/AdvantagesLayout.jsx

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

app/components/shared/SpecificationsLayout.jsx

@@ -1,56 +1,56 @@
 // components/shared/SpecificationsLayout.jsx
+
 import Link from 'next/link';
 
 const SpecificationsLayout = ({ 
   title = "Service Specifications",
-  titleColor = "text-gray-800",
   specificationItems = [],
   backgroundColor = "#e8f5f3",
-  iconBackgroundColor = "bg-teal-600"
+  iconBackgroundColor = "bg-orange-100"
 }) => {
   return (
-    <section className="py-8 lg:py-12">
+    <section className="w-full min-w-0 py-6 lg:py-8">
-      <div className="container-fluid px-4 lg:px-6">
+      <div className="w-full max-w-none px-4 sm:px-6 lg:px-6">
         {/* Section Header */}
-        <div className="text-left mb-8">
+        <div className="text-left mb-6 lg:mb-8">
-          <h2 className={`text-2xl lg:text-3xl ${titleColor} text-left pb-2 mb-6 lg:mb-6`}>
+          <h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
             {title}
           </h2>
         </div>
 
         {/* Specifications Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 w-full max-w-none">
           {specificationItems.map((spec, index) => (
             <div 
               key={index}
-              className="relative"
+              className="w-full min-w-0"
             >
               {/* Background Card */}
               <div 
-                className="rounded-3xl p-8 h-full min-h-[280px] flex flex-col"
+                className="rounded-3xl p-6 lg:p-8 h-full min-h-[240px] sm:min-h-[280px] flex flex-col"
                 style={{ backgroundColor: backgroundColor }}
               >
                 {/* Icon Circle */}
-                <div className="flex justify-center mb-6">
+                <div className="flex justify-center mb-4 lg:mb-6">
-                  <div className={`w-16 h-16 ${iconBackgroundColor} rounded-full flex items-center justify-center`}>
+                  <div className={`w-12 h-12 sm:w-16 sm:h-16 ${iconBackgroundColor} rounded-full flex items-center justify-center`}>
                     <img 
                       src={spec.icon} 
-                      className="w-14 h-14 object-contain brightness-0 invert" 
+                      className="w-8 h-8 sm:w-10 sm:h-10 object-contain" 
                       alt={`${spec.title} Icon`}
                     />
                   </div>
                 </div>
                 
                 {/* Title */}
-                <h3 className="text-center text-gray-800 text-lg font-semibold mb-4">
+                <h3 className="text-center text-teal-700 text-base sm:text-lg font-semibold mb-3 lg:mb-4">
                   {spec.title}
                 </h3>
                 
                 {/* Content */}
-                <div className="text-gray-700 text-sm leading-relaxed text-center flex-grow flex items-center justify-center">
+                <div className="text-gray-700 text-xs sm:text-sm leading-relaxed text-center flex-grow flex items-start justify-center">
-                  <div className="w-full">
+                  <div className="w-full min-w-0">
                     {spec.renderContent ? spec.renderContent() : (
-                      <div className="text-gray-600">
+                      <div className="text-gray-600 break-words">
                         {spec.content}
                       </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">
+            Custom 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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      advantageTitle="Advantage"
-      imageUrl="/images/amplicon-workflow.png"
+      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

@@ -10,35 +10,80 @@ const EnrichmentIntroduction = () => {
     "It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
   ];
   
-  const customBadgeContent = (
-    <div className="text-center">
-      <div className="bg-teal-600 text-white px-4 py-2 rounded-lg mb-4">
-        <span className="text-sm font-medium">ENRICHMENT SEQUENCING</span>
-      </div>
-      <div className="flex flex-col space-y-2">
-        <div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
-          Whole Exome DNA Sequencing
-        </div>
-        <div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
-          Amplicon Sequencing (16S/18S/ITS)
-        </div>
-        <div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
-          Targeted Sequencing
-        </div>
-      </div>
-    </div>
-  );
 
   return (
-    <IntroductionLayout
+    <div className="w-full bg-white">
-      title="Introduction and Workflow"
+      {/* Main container with two columns */}
-      contentItems={contentItems}
+      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr]">
-      imageUrl="/images/enrichment-overview.png"
+        
-      imageAlt="Enrichment Overview"
+        {/* Left Column - Content using existing IntroductionLayout structure */}
-      backgroundColor="#f8f9fa"
+        <div className="px-6 lg:px-6 py-6">
-      customBadgeContent={customBadgeContent}
+          {/* Introduction Section */}
-      useParagraphs={true}
+          <section>
+            <h2 className="text-3xl font-bold text-teal-700 mb-4">
+              Introduction and Workflow
+            </h2>
+            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
+              {contentItems.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>
+
+          {/* Advantage Section */}
+          {/* <section>
+            <h2 className="text-3xl font-bold text-teal-700 mb-4">
+              Advantage
+            </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 - Custom Content with Image and SVG */}
+        <div className="relative p-4">
+          <div className="flex flex-col h-full space-y-4">
+            {/* Top Section - Flowchart with larger fixed width */}
+            <div className="w-full flex items-center justify-center py-6">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/flowchart/enrichment_flow.svg"
+                  alt="ISO Certified Process Flow"
+                  className="w-full h-auto object-contain"
                 />
+              </div>
+            </div>
+            
+            {/* Bottom Section - Image with same width */}
+            {/* <div className="flex items-center justify-center">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/dna/whole_genome_seq-normal_denovo.png"
+                  alt="Enrichment Overview"
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div> */}
+            
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

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

@@ -0,0 +1,54 @@
+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 = "",
+  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,20 @@
 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 +22,8 @@ export default function EnrichmentSequencingPage() {
       
       <div className="page-content">
         <EnrichmentIntroduction />
-        <EnrichmentAdvantages />
+        <EnrichmentAdvantages/>
+        <EnrichmentPipeline/>
         <EnrichmentSpecifications />
       </div>
     </PageLayout>

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

@@ -12,7 +12,7 @@ const TargetedApplications = () => {
 
   return (
     <ApplicationsLayout
-      title="Applications of Targeted Sequencing"
+      title="Applications of Custom Sequencing"
       applicationItems={applicationItems}
     />
   );

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

@@ -4,17 +4,25 @@ import IntroductionLayout from '../../../../components/shared/IntroductionLayout
 
 const TargetedIntroduction = () => {
   const contentItems = [
-    "Targeted DNA Sequencing (also know as Gene Panel Sequencing) concentrate on specific genes or genomic regions of interest, allowing for in-depth analysis of mutations that are most relevant to particular diseases or conditions.",
+    "Custom DNA Sequencing (also know as Gene Panel Sequencing) concentrate on specific genes or genomic regions of interest, allowing for in-depth analysis of mutations that are most relevant to particular diseases or conditions.",
     "The process begins with the selection of specific genes or regions, followed by the amplification of these targets through PCR. Sequencing is then performed on the amplified regions, ensuring high coverage and accuracy.",
     "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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      advantageTitle="Advantage"
-      imageUrl="/images/targeted-sequencing-overview.png"
+      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,22 +7,21 @@ 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 }
+    { label: 'Custom DNA Sequencing', current: true }
   ];
 
   return (
     <PageLayout fixedHeader={true}>
-      <TitleBar
+      <DNATitleBar
-        title="Targeted DNA Sequencing"
+        title="Custom DNA Sequencing"
         desc="Pinpoint Precision for Your Genetic Insights"
         breadcrumbs={breadcrumbs}
       />
       
       <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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      advantageTitle="Advantage"
-      imageUrl="/images/dna.jpg"
+      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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      advantageTitle="Advantage"
-      imageUrl="/images/atac-workflow.png"
+      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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      advantageTitle="Advantage"
-      imageUrl="/images/chip-workflow.png"
+      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

@@ -10,24 +10,62 @@ const EpigenomicsIntroduction = () => {
     "It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
   ];
 
-  const serviceTypes = [
-    "Whole Genome Bisulphite Sequencing (WGBS)",
-    "Chip Sequencing",
-    "ATAC Sequencing"
-  ];
 
   return (
-    <IntroductionLayout
+    <div className="w-full bg-white">
-      title="Introduction and Workflow"
+      {/* Main container with two columns */}
-      contentItems={contentItems}
+      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr]">
-      imageUrl="/images/epigenomics-overview.png"
+        
-      imageAlt="Epigenomics Overview"
+        {/* Left Column - Content using existing IntroductionLayout structure */}
-      badgeText="EPIGENOMICS"
+        <div className="px-6 lg:px-6 py-8">
-      serviceTypes={serviceTypes}
+          {/* Introduction Section */}
-      backgroundColor="#f8f9fa"
+          <section>
-      badgeColor="bg-teal-600"
+            <h2 className="text-3xl font-bold text-teal-700 mb-4">
-      useParagraphs={true}
+              Introduction and Workflow
+            </h2>
+            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
+              {contentItems.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 - Custom Content with Image and SVG */}
+        <div className="relative p-4">
+          <div className="flex flex-col h-full space-y-4">
+            {/* Top Section - Flowchart with larger fixed width */}
+            <div className="w-full flex items-center justify-center py-6">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/flowchart/epigenomic_flow.svg"
+                  alt="Epigenomics Process Flow"
+                  className="w-full h-auto object-contain"
                 />
+              </div>
+            </div>
+            
+            {/* Bottom Section - Image with same width */}
+            {/* <div className="flex items-center justify-center">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/epigenomics-overview.png"
+                  alt="Epigenomics Overview"
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div> */}
+            
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

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

@@ -0,0 +1,54 @@
+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 = "",
+  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,20 @@
-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 +22,8 @@ export default function EpigenomicsSequencingPage() {
       
       <div className="page-content">
         <EpigenomicsIntroduction />
-        <EpigenomicsAdvantages />
+        <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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      advantageTitle="Advantage"
-      imageUrl="/images/wgbs-workflow.png"
+      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

@@ -1,4 +1,5 @@
 // app/dna-sequencing/genome-mapping/components/GenomeMappingIntroduction.jsx
+
 import IntroductionLayout from '../../../components/shared/IntroductionLayout';
 
 const GenomeMappingIntroduction = () => {
@@ -9,23 +10,62 @@ const GenomeMappingIntroduction = () => {
     "It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
   ];
   
-  const serviceTypes = [
-    "HiC Mapping",
-    "Optical Sequencing"
-  ];
 
   return (
-    <IntroductionLayout
+    <div className="w-full bg-white">
-      title="Introduction and Workflow"
+      {/* Main container with two columns */}
-      contentItems={contentItems}
+      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr]">
-      imageUrl="/images/genome-mapping-overview.png"
+        
-      imageAlt="Genome Mapping Overview"
+        {/* Left Column - Content using existing IntroductionLayout structure */}
-      badgeText="GENOME MAPPING"
+        <div className="px-6 lg:px-6 py-8">
-      serviceTypes={serviceTypes}
+          {/* Introduction Section */}
-      backgroundColor="#f8f9fa"
+          <section>
-      badgeColor="bg-teal-600"
+            <h2 className="text-3xl font-bold text-teal-700 mb-4">
-      useParagraphs={true}
+              Introduction and Workflow
+            </h2>
+            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
+              {contentItems.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 - Custom Content with Image and SVG */}
+        <div className="relative p-4">
+          <div className="flex flex-col h-full space-y-4">
+            {/* Top Section - Flowchart with larger fixed width */}
+            <div className="w-full flex items-center justify-center py-6">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/flowchart/genome_mapping_flow.svg"
+                  alt="Genome Mapping Process Flow"
+                  className="w-full h-auto object-contain"
                 />
+              </div>
+            </div>
+            
+            {/* Bottom Section - Image with same width */}
+            {/* <div className="flex items-center justify-center">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/genome-mapping-overview.png"
+                  alt="Genome Mapping Overview"
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div> */}
+            
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

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 = "",
+
+  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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      advantageTitle="Advantage"
-      imageUrl="/images/hic-mapping-workflow.png"
+      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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      advantageTitle="Advantage"
-      imageUrl="/images/optical-mapping-workflow.png"
+      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,8 @@
 // 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 GenomeMappingAdvantages from './components/GenomeMappingAdvantages'
+import GenomeMappingPipeline from './components/GenomeMappingPipeline';
 import GenomeMappingSpecifications from './components/GenomeMappingSpecifications';
 import PageLayout from '../../components/Layout/PageLayout';
 
@@ -19,7 +20,7 @@ export default function GenomeMappingPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },
@@ -33,7 +34,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}
@@ -44,9 +45,8 @@ export default function GenomeMappingPage() {
       <div className="page-content">
         {/* Introduction Section */}
         <GenomeMappingIntroduction />
-
+        <GenomeMappingAdvantages/>
-        {/* Advantages Section */}
+        <GenomeMappingPipeline/>
-        <GenomeMappingAdvantages />
 
         {/* 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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      advantageTitle="Advantage"
-      imageUrl="/images/sample-process-steps.png"
+      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,55 @@
+import React from 'react';
+
+const HybridSequencingPipeline = ({
+  title = "Bioinformatics Pipeline",
+  svgContent = null, // Pass your SVG content here as JSX
+  svgUrl = "/images/flowchart/hybridseq.svg",
+  backgroundColor = "bg-gray-50",
+  className = "",
+
+  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 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 HybridSequencingPipeline from './components/HybridSequencingPipeline'
-import HybridBioinformatics from './components/HybridBioinformatics';
 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

@@ -2,42 +2,37 @@ const LongReadComparison = () => {
   const comparisonData = [
     {
       category: "Read Length",
-      illumina: "Paired-end 150 bp or 250bp\nHighly accurate (> 99.9%) while Limited to ~500bp",
       pacbio: "Average ≥ 15 kb\nbp to kb",
       nanopore: "Average > 17 kb\nKb to Mb"
     },
     {
       category: "Variant Calling",
-      illumina: "Accurately detect the SNVs and InDels\nWhile Lower accuracy on the complex SVs detection",
       pacbio: "Long Read Length with High Accuracy: Good coverage of highly repetition and complexity area\nDetect SVs with high precision",
       nanopore: "Long Read Length with High Accuracy: Good coverage of highly repetition and complexity area\nDetect SVs with high precision"
     },
     {
       category: "Amplification/GC Bias",
-      illumina: "PCR for cluster generation:\n1.Clonally amplified templates masquerade as variants\n2.Underrepresentation of AT-rich and GC-rich regions",
       pacbio: "NO GC Bias & Amplification Bias\nPCR-free to allow a uniform coverage and High Contiguity",
       nanopore: "NO GC Bias & Amplification Bias\nPCR-free to allow a uniform coverage and High Contiguity"
     },
     {
       category: "Machine Errors",
-      illumina: "Signal Decay and Dephasing:\nGradual consumption of reagent\nSeq error rate increases with the length of reads",
       pacbio: "Relaxed requirement for cycle efficiency",
       nanopore: "Relaxed requirement for cycle efficiency"
     },
     {
       category: "DNA Methylation Detection",
-      illumina: "WGBS or RRBS is required and limited on detection of CpG, CHH, CHG",
       pacbio: "Simultaneous Epigenetic Characterization\nDiverse DNA methylation types: CpG, CHH, CHG, 6mA, 4mC, 5hmc",
       nanopore: "Simultaneous Epigenetic Characterization\nDiverse DNA methylation types: CpG, CHH, CHG, 6mA, 4mC, 5hmc"
     }
   ];
 
-  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>
+          <span className="text-blue-600 font-medium">Long Read Length with High Accuracy:</span>
-          {content.replace("Long Read Length with High Accuracy", "")}
+          {content.replace("Long Read Length with High Accuracy:", "")}
         </div>
       );
     } else if (content.includes("NO GC Bias")) {
@@ -59,9 +54,9 @@ const LongReadComparison = () => {
   };
 
   return (
-    <section className="py-12 bg-white">
+    <section className="py-4 bg-gray-50">
-      <div className="container-fluid px-4 lg:px-12">
+      <div className="container max-w-none px-6">
-        <h2 className="text-2xl lg:text-3xl text-gray-700 mb-8">
+        <h2 className="text-3xl font-bold text-teal-700 mb-8">
           Comparison of Sequencers
         </h2>
         
@@ -69,7 +64,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,93 +72,45 @@ const LongReadComparison = () => {
         </div>
 
         {/* Detailed Comparison Table Section */}
-        <div className="mb-8">
+        <div className="mb-6">
-          <h3 className="text-xl lg:text-2xl text-gray-700 mb-6 text-center">
+          <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>
+          <div className="mb-6 text-justify">
-        
+            <p className="text-gray-600 leading-relaxed text-base">
-        <div className="flex flex-col xl:flex-row gap-8">
+              Different sequencing platforms have unique characteristics and applications. The comparison below highlights key differences:
-          {/* Mobile Card Layout (hidden on desktop) */}
+            </p>
-          <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 className="overflow-x-auto mb-8 justify-center">
-              <div key={index} className="bg-white border border-gray-300 rounded-lg shadow-sm">
+          <table className="w-full border-collapse border border-gray-300 text-sm bg-white 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">
-                      {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">
-                      {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">
-                      {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">
+              <tr className="bg-teal-50">
-                  <th className="border border-gray-300 p-3 text-left font-semibold text-gray-700">
+                <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 p-3 text-center font-semibold text-gray-700">
+                <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 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">
+                <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 === 0 ? "bg-white" : "bg-gray-50"}>
+                <tr key={index} className={`${index % 2 === 1 ? 'bg-gray-50' : 'bg-white'} hover:bg-teal-25 transition-colors`}>
-                    <td className="border border-gray-300 p-3 font-medium text-gray-700 bg-gray-50">
+                  <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 p-3 text-sm text-gray-600">
+                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
-                      <div className="whitespace-pre-line leading-relaxed">
+                    <div className="whitespace-pre-line">
-                        {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">
+                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
-                      <div className="whitespace-pre-line leading-relaxed">
+                    <div className="whitespace-pre-line">
                       {formatContent(row.nanopore)}
                     </div>
                   </td>
@@ -172,45 +119,6 @@ const LongReadComparison = () => {
             </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>
-            </div>
-          </div>
-        </div>
       </div>
     </section>
   );

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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      advantageTitle="Advantage"
-      imageUrl="/images/long-read-intro.png"
+      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">
+              <ul className="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>
+                {nanoporeItems.map((item, index) => (
-                <li>Helps in sequencing long stretches of DNA for complete genome assemblies of microbial, human, animal and plant species.</li>
+                  <li key={index} className="flex items-start">
-                <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>
+                    <span 
-                <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>
+                      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">
+              <ul className="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>
+                {pacbioItems.map((item, index) => (
-                <li>Enables rapid and cost-effective generation of contiguous, complete, and accurate de novo genome assemblies, even for complex genomes.</li>
+                  <li key={index} className="flex items-start">
-                <li>Allows the haplotype resolution of complex polyploids, particularly in plants.</li>
+                    <span 
-                <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>
+                      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}
@@ -27,7 +25,6 @@ export default function LongReadSequencingPage() {
         <LongReadIntroduction /> {/* 7a */}
         <LongReadComparison />   
         <LongReadNanopore />        
-        <LongReadAdvantages />   
         <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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      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,54 @@
+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 = "",
+  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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      advantageTitle="Advantage"
-      imageUrl="/images/single-cell-dna-sequencing.png"
+      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,54 @@
+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 = "",
+  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 */}
+        <SingleCellPipeline/>
-        <SingleCellAdvantages />
 
         {/* Applications Section */}
         <SingleCellApplications />

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

@@ -0,0 +1,57 @@
+const SNPGenotypingTechniques = ({ 
+  title = "Types of SNP-Based Genotyping using technique:",
+  backgroundColor = "bg-teal-50"
+}) => {
+  const techniques = [
+    {
+      name: "PCR:",
+      description: "Utilizes PCR to amplify DNA regions containing SNPs, relying on allele-specific primers, probes, or melting curve differences for SNP detection.",
+      examples: "TaqMan Assay, KASP, ARMS-PCR, qPCR, High-Resolution Melting (HRM)."
+    },
+    {
+      name: "Microarray:",
+      description: "Employs DNA microarrays to detect and analyze SNPs across the genome using hybridization with oligonucleotide probes specific to SNP loci.",
+      examples: "Affymetrix GeneChips, Illumina Infinium Arrays, SNPlex, Axiom Array Platforms, MALDI-TOF Mass Spectrometry Arrays."
+    },
+    {
+      name: "NGS:",
+      description: "Uses Next-Generation Sequencing (NGS) for high-resolution, high-throughput SNP detection and analysis.",
+      examples: "Whole-Genome Sequencing (WGS), Exome Sequencing, Targeted Sequencing, Genotyping-by-Sequencing (GBS), Double Digest Restriction-site Associated DNA (ddRAD) Sequencing."
+    }
+  ];
+
+  return (
+    <section className={`py-5 lg:py-5 mb-6 ${backgroundColor}`}>
+      <div className="container-fluid px-4 lg:px-6">
+        <h2 className="text-3xl font-bold text-teal-700 mb-4">
+          {title}
+        </h2>
+        
+        <ol className="space-y-4 lg:px-6" style={{color: '#555555'}}>
+          {techniques.map((technique, index) => (
+            <li key={index} className="leading-relaxed">
+              <div className="flex items-start">
+                <span 
+                  className="inline-flex items-center justify-center w-6 h-6 rounded-full text-white font-bold text-sm mr-3 flex-shrink-0 mt-0.5"
+                  style={{backgroundColor: '#faae31'}}
+                >
+                  {index + 1}
+                </span>
+                <div className="flex-1">
+                  <span className="font-semibold text-base">{technique.name}</span>
+                  <br />
+                  <span className="text-base">{technique.description}</span>
+                  <br />
+                  <span className="font-semibold" style={{color: '#faae31'}}>Examples: </span>
+                  <span className="text-base italic">{technique.examples}</span>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+  );
+};
+
+export default SNPGenotypingTechniques;

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

@@ -1,29 +1,54 @@
 // app/dna-sequencing/snp-genotyping/components/SNPIntroduction.jsx
-import IntroductionLayout from '../../../components/shared/IntroductionLayout';
+
+import React from 'react';
 
 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."
+    "ddRAD sequencing (Double Digest Restriction-site Associated DNA) is based on the Restriction Fragmentation technique combined with Next-Generation Sequencing (NGS). It is a robust approach for \"genotyping and SNP discovery\" that doesn't require a reference genome.",
-  ];
+    "The ddRAD workflow utilizes the precise cut-site specificity of restriction endonucleases to create library fragments from unique genomic regions. These fragments are then selected and sequenced, capturing data from identical genomic regions across samples.",
-
+    "In the bioinformatics analysis, reads are aligned to either a reference genome or de novo assembly to detect SNVs and other genetic variations. This analysis supports studies on genetic diversity, population structure, and trait associations, with advanced tools enabling the processing of large datasets to achieve high genotyping accuracy.",
-  const serviceTypes = [
+    "With the potential to develop hundreds to tens of thousands of genetic markers, ddRAD is ideal for applications in population genetics, germplasm assessment, marker-trait associations, GWAS, and QTL mapping. Its targeted, reproducible approach makes it a valuable tool for ecological and agricultural genomics."
-    "DNA Sequencing",
-    "RNA Sequencing", 
-    "Genomics Services"
   ];
 
   return (
-    <IntroductionLayout
+    <div className="w-full min-w-0 bg-white">
-      title="Introduction and Workflow"
+      {/* Main container with two columns */}
-      contentItems={contentItems}
+      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] gap-0">
-      imageUrl="/images/snp-genotyping-overview.png"
+        
-      imageAlt="SNP Genotyping Overview"
+        {/* Left Column - Content */}
-      badgeText="ISO CERTIFIED"
+        <div className="w-full min-w-0 px-4 sm:px-6 lg:px-6 py-6">
-      serviceTypes={serviceTypes}
+          <section>
-      backgroundColor="#f8f9fa"
+            <h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
-      badgeColor="bg-teal-600"
+              Introduction and Workflow
-      useParagraphs={true}
+            </h2>
+            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
+              {contentItems.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 break-words" style={{ fontSize: 'inherit' }}>{item}</span>
+                </li>
+              ))}
+            </ul>
+          </section>
+        </div>
+
+        {/* Right Column - Image */}
+        <div className="w-full min-w-0 relative p-4 lg:p-6">
+          <div className="flex flex-col items-center justify-center">
+            <div className="w-full max-w-md">
+              <img 
+                src="/images/dna/SNP-based_genotyping_(ddRAD).png"
+                alt="SNP Genotyping Overview"
+                className="w-full h-auto object-contain"
               />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

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

@@ -0,0 +1,49 @@
+import React from 'react';
+
+const SNPWorkflow = ({ 
+  workflowImage = "/images/flowchart/snp_flow.svg"
+}) => {
+  const introItems = [
+    "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."
+  ];
+
+  return (
+    <div className="w-full bg-white">
+      {/* Main container with two columns */}
+      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr]">
+        
+        {/* Left Column - Content */}
+        <div className="px-6 lg:px-6 py-8">
+          {/* Introduction Section */}
+          <section>
+            <h2 className="text-3xl font-bold text-teal-700 mb-4">
+              Introduction and Workflow
+            </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>
+          </section>
+        </div>
+
+        {/* Right Column - Workflow Image */}
+        <div className="relative flex items-start justify-center p-4">
+          <img 
+            src={workflowImage}
+            alt="SNP Genotyping Workflow"
+            className="max-w-full min-h-90px object-contain"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SNPWorkflow;

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

@@ -0,0 +1,36 @@
+// app/dna-sequencing/snp-genotyping/page.js
+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';
+
+export default function ddRADPage() {
+  const breadcrumbs = [
+    { label: "Home", href: "/" },
+    { label: "Research", href: "/dna-sequencing" },
+    { label: "SNP-based Genotyping", href: "/dna-sequencing/snp-genotyping" },
+    { label: "ddRAD Sequencing", current: true },
+  ];
+
+  return (
+    <PageLayout fixedHeader={true}>
+      <div className="page-wrapper">
+        <DNATitleBar 
+          title="Double Digest Restriction-site Associated DNA (ddRAD) Sequencing"
+          desc="Focused, Cost-Effective Genotyping with ddRAD"
+          breadcrumbs={breadcrumbs}
+          backgroundImage="/images/bredcrumb.jpg"
+        />
+        
+        <div className="page-content">
+          <SNPIntroduction />
+          <SNPAdvantages/>
+          <SNPApplications />
+          <SNPSpecifications />
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

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

@@ -1,9 +1,7 @@
 // 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 SNPWorkflow from './components/SNPWorkflow ';
-import SNPAdvantages from './components/SNPAdvantages';
+import SNPGenotypingTechniques from './components/SNPGenotypingTechniques';
-import SNPApplications from './components/SNPApplications';
-import SNPSpecifications from './components/SNPSpecifications';
 import PageLayout from '../../components/Layout/PageLayout';
 
 export default function SNPGenotypingPage() {
@@ -16,7 +14,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}
@@ -24,10 +22,8 @@ export default function SNPGenotypingPage() {
         />
         
         <div className="page-content">
-          <SNPIntroduction />
+          <SNPWorkflow/>
-          <SNPAdvantages />
+          <SNPGenotypingTechniques/>
-          <SNPApplications />
-          <SNPSpecifications />
         </div>
       </div>
     </PageLayout>

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

@@ -10,14 +10,68 @@ const WGSIntroduction = () => {
     "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
+    <div className="w-full min-w-0 bg-white">
-      title="Introduction and Workflow"
+      {/* Main container with two columns */}
-      contentItems={contentItems}
+      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] gap-0">
-      imageUrl="/images/denovo-workflow.png"
+        
-      imageAlt="Sample Process Steps"
+        {/* Left Column - Content using existing IntroductionLayout structure */}
-      useParagraphs={true}
+        <div className="w-full min-w-0 px-4 sm:px-6 lg:px-6 py-6">
+          {/* Introduction Section */}
+          <section>
+            <h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
+              Introduction and Workflow
+            </h2>
+            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
+              {contentItems.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 break-words" style={{ fontSize: 'inherit' }}>{item}</span>
+                </li>
+              ))}
+            </ul>
+          </section>
+        </div>
+
+        {/* Right Column - Custom Content with Image and SVG */}
+        <div className="w-full min-w-0 relative p-4 lg:p-6">
+          <div className="flex flex-col">
+            {/* Top Section - Flowchart with larger fixed width */}
+            <div className="w-full flex items-center justify-center">
+              <div className="w-full max-w-md">
+                <img 
+                  src="/images/flowchart/WGS_flow.svg"
+                  alt="WGS Process Flow"
+                  className="w-full h-auto object-contain"
                 />
+              </div>
+            </div>
+            
+            {/* Bottom Section - Image with same width */}
+            {/* <div className="flex items-center justify-center">
+              <div className="w-full max-w-md">
+                <img 
+                  src="/images/dna/whole_genome_seq-normal_denovo.png"
+                  alt="WGS Overview"
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div> */}
+            
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

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

@@ -14,7 +14,7 @@ const WGSSpecifications = () => {
           </div>
           <div className="mt-4 text-sm">
             <strong>
-              PLEASE refer to{' '}
+              Please refer to{' '}
               <Link 
                 href="/sample-submission-guideline" 
                 className="text-teal-600 underline hover:text-teal-700"

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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      advantageTitle="Advantage"
-      imageUrl="/images/denovo-workflow.png"
+      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,54 @@
+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 = "",
+  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,5 +1,5 @@
 // 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';
@@ -8,13 +8,13 @@ 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}

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"
+      introTitle="Introduction and Workflow"
-      contentItems={contentItems}
+      advantageTitle="Advantage"
-      imageUrl="/images/resequencing-workflow.png"
+      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,54 @@
+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 = "",
+  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-2xl 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 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
+                <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-teal-700 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-2xl 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 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
+                <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-teal-700 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,49 @@
+// components/AboutHealth.js
+'use client'
+import Image from "next/image";
+
+export default function AboutHealth() {
+  return (
+    <section className="bg-teal-700">
+      <div className="flex min-h-[350px]">
+        {/* Left Side - Image */}
+        <div className="hidden lg:block w-3/4 relative">
+          <div className="absolute inset-0">
+            <Image
+              src="/images/health/health.png"
+              alt="Healthcare professional working in modern laboratory"
+              fill
+              className="object-cover grayscale-[20%]"
+              priority
+            />
+            <div className="absolute inset-0 bg-slate-900/10"></div>
+          </div>
+          
+          {/* Subtle border */}
+          <div className="absolute right-0 top-0 w-px h-full bg-teal-600"></div>
+        </div>
+
+        {/* Right Side - Content */}
+        <div className="w-full lg:w-3/4">
+          <div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
+            {/* Brand/Title */}
+            <div className="mb-4">
+              <h2 className="text-3xl font-bold text-white mb-4">
+                <span>Operify</span>
+                <span className="ml-2">Health</span>
+              </h2>
+              <div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
+            </div>
+
+            {/* Content */}
+            <div className="mb-4 max-w-3xl">
+              <div className="text-gray-200 leading-relaxed text-base text-justify font-light">
+                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.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}