UI styling update

app/components/shared/ApplicationsLayout.jsx

@@ -3,20 +3,24 @@
 const ApplicationsLayout = ({ 
   title = "Applications",
   applicationItems = [],
-  backgroundColor = "bg-gray-50",
+  backgroundColor = "bg-teal-50",
   titleColor = "text-gray-700"
 }) => {
   return (
-    <section className={`py-5 lg:py-8 ${backgroundColor}`}>
+    <section className={`py-5 lg:py-5 ${backgroundColor}`}>
       <div className="container-fluid px-4 lg:px-6">
-        <h2 className={`text-2xl lg:text-3xl ${titleColor} text-left pb-2 mb-6 lg:mb-6`}>
+        <h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
           {title}
         </h2>
         
-        <ul className="list-disc list-inside space-y-4 text-gray-600 leading-relaxed lg:px-10">
+        <ul className="space-y-4 text-gray-600 leading-relaxed lg:px-6">
           {applicationItems.map((item, index) => (
-            <li key={index} className="text-base">
-              {item}
+            <li key={index} className="flex items-start">
+              <span 
+                className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
+                style={{backgroundColor: '#faae31'}}
+              ></span>
+              <span className="text-base">{item}</span>
             </li>
           ))}
         </ul>

app/components/shared/BioinformaticsLayout.jsx

@@ -18,7 +18,7 @@ const BioinformaticsLayout = ({
   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={`${titleColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal`}>
+        <h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
           {title}
         </h2>
 

app/components/shared/DNATitleBar.jsx

@@ -4,8 +4,8 @@ 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]" 
+    <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 */}
@@ -19,8 +19,8 @@ const DNATitleBar = ({ title, desc, breadcrumbs, backgroundImage = "/images/bred
                     {crumb.label}
                   </span>
                 ) : (
-                  <Link 
-                    href={crumb.href} 
+                  <Link
+                    href={crumb.href}
                     className="text-white hover:text-yellow-400 underline whitespace-nowrap"
                   >
                     {crumb.label}
@@ -38,13 +38,13 @@ const DNATitleBar = ({ title, desc, breadcrumbs, backgroundImage = "/images/bred
           </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-base sm:text-xl md:text-2xl lg:text-3xl xl:text-2xl font-bold text-white mb-2 px-4 leading-tight">
+        <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>

app/components/shared/IntroductionLayout.jsx

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

app/components/shared/SpecificationsLayout.jsx

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