improvements and fixes: update Dockerfile and docker-compose for impr…

…oved configuration; add FAQ component and enhance About section

Dockerfile

@@ -1,26 +1,24 @@
 # syntax=docker.io/docker/dockerfile:1
 
-FROM node:23-alpine AS base
+FROM node:21-alpine AS base
 
 FROM base AS deps
+RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
 COPY package.json package-lock.json* ./
-RUN npm ci --omit=dev
+RUN npm ci --omit-dev
 
-FROM node:23-alpine AS builder
+FROM base AS builder
 WORKDIR /app
-
-COPY . .
 COPY --from=deps /app/node_modules ./node_modules
+COPY . .
 
 ENV NEXT_TELEMETRY_DISABLED=1
 
 RUN npm run build
 
-RUN rm -rf /app/.next/diagnostics
-
-FROM node:23-alpine AS runner
+FROM base AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production
@@ -29,9 +27,8 @@ ENV NEXT_TELEMETRY_DISABLED=1
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
-COPY --from=builder /app/package.json ./
-COPY --from=builder --chown=nextjs:nodejs /app/node_modules ./node_modules
-COPY --from=builder --chown=nextjs:nodejs /app/public ./public
-COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
 USER nextjs

docker-compose.yml

@@ -9,15 +9,18 @@ services:
     volumes:
       # - qualitylab_node_modules:/app/node_modules
       - qualitylab_public:/app/public
+      - quality_lab_images:/app/.next/static
+
     stdin_open: true
     tty: true
-    command: ['npm', 'start']
-    # command: ['node', 'server.js']
+    # command: ['npm', 'start']
+    command: ['node', 'server.js']
     networks:
       - qualitylab-net
 
 volumes:
   qualitylab_node_modules:
+  quality_lab_images:
   qualitylab_public:
 
 networks:

next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: process.env.NODE_ENV === 'development',
+  output: 'standalone',
   eslint: {
     ignoreDuringBuilds: true,
   },

src/components/about/components/AboutNavbar.tsx

@@ -8,6 +8,8 @@ const NAVIGATION_ITEMS: NavigationItem[] = [
   { id: 'overview', label: 'OVERVIEW' },
   { id: 'features', label: 'FEATURES' },
   { id: 'contact', label: 'CONTACT' },
+  { id: 'faq', label: 'FAQ' },
+  { id: 'team', label: 'TEAM' },
 ];
 
 const AboutNavbar: React.FC = () => {
@@ -24,10 +26,11 @@ const AboutNavbar: React.FC = () => {
         <div className='flex justify-between items-center py-4'>
           <div className='flex flex-col'>
             <h1 className='text-2xl sm:text-4xl font-semibold text-primary italic tracking-tight'>
-              &lt;LabGraph&gt; <span className='text-xs sm:text-sm opacity-90 align-top'>®</span>
+              &lt;LabGraph&gt;{' '}
+              <span className='text-[8px] sm:text-xs opacity-90 align-top'>®</span>
             </h1>
-            <p className='text-xs sm:text-sm text-textPrimary opacity-70 italic'>
-              Quality Management Made Simple
+            <p className='text-[8px] text-center sm:text-sm text-textPrimary opacity-70 italic'>
+              Quality Management System
             </p>
           </div>
 
@@ -47,7 +50,7 @@ const AboutNavbar: React.FC = () => {
               <li>
                 <Link
                   href='/auth/signup'
-                  className='px-4 py-2 bg-secondary text-white rounded-lg hover:bg-secondaryHover transition-colors duration-300 italic font-medium'
+                  className='px-4 py-2 bg-secondary text-white rounded-lg hover:bg-secondaryHover transition-colors duration-300 italic font-light'
                 >
                   TRY DEMO
                 </Link>
@@ -62,7 +65,7 @@ const AboutNavbar: React.FC = () => {
           <div className='lg:hidden flex items-center gap-4'>
             <Link
               href='/auth/signup'
-              className='px-3 py-1.5 bg-primary text-white text-sm rounded-lg hover:bg-accent transition-colors duration-300 italic font-medium'
+              className='px-3 py-1.5 bg-secondary text-white text-sm rounded-lg hover:bg-secondaryHover transition-colors duration-300 italic font-light'
             >
               DEMO
             </Link>

src/components/about/components/AvailableFeatures.tsx

@@ -52,7 +52,7 @@ const FeatureCard: React.FC<Feature> = ({ title, description, icon }) => (
 );
 
 const AvailableFeatures: React.FC = () => (
-  <div id='features' className='py-12'>
+  <div className='py-12'>
     <h2 className='text-3xl font-semibold text-textPrimary text-center mb-12'>
       Available Features
     </h2>

src/components/about/components/Contacts.tsx

@@ -21,7 +21,7 @@ const CONTACT_ITEMS = [
 
 const Contacts: React.FC = () => {
   return (
-    <div id='contact' className='w-full max-w-5xl mx-auto py-12'>
+    <div className='w-full max-w-5xl mx-auto py-12'>
       <h2 className='text-3xl font-semibold text-textPrimary text-center mb-12'>Contacts</h2>
       <div className='grid grid-cols-1 md:grid-cols-3 gap-8'>
         {CONTACT_ITEMS.map((item, index) => (

src/components/about/components/FrequentlyAskedQuestions.tsx

@@ -0,0 +1,67 @@
+import { FC } from 'react';
+import { BiHelpCircle } from 'react-icons/bi';
+
+interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+const FAQS: FAQItem[] = [
+  {
+    question: 'What is Quality Control in Laboratory?',
+    answer:
+      'Laboratory Quality Control is a set of procedures designed to monitor and evaluate testing processes to ensure accurate and reliable test results.',
+  },
+  {
+    question: 'What are Westgard Rules?',
+    answer:
+      'Westgard Rules are a set of statistical rules used to validate quality control data in clinical laboratories, helping detect both random and systematic errors.',
+  },
+  {
+    question: 'How often should QC be performed?',
+    answer:
+      'QC should be performed at least once every 24 hours, before patient testing begins, after major maintenance, or when accuracy of results is questioned.',
+  },
+  {
+    question: 'What is a Levey-Jennings chart?',
+    answer:
+      'A Levey-Jennings chart is a graphical tool that plots quality control values over time, helping visualize trends and shifts in laboratory testing processes.',
+  },
+  {
+    question: 'How do I interpret control limits?',
+    answer:
+      'Control limits typically represent ±2SD and ±3SD from the mean. Values outside these limits may indicate problems with the testing process.',
+  },
+  {
+    question: 'Can I export my QC data?',
+    answer:
+      'Yes, our system allows you to export quality control data in various formats for further analysis or documentation purposes.',
+  },
+];
+
+const FAQCard: FC<FAQItem> = ({ question, answer }) => (
+  <div className='card-hover p-6 bg-surface rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 border border-borderColor group'>
+    <div className='flex items-center mb-4 space-x-3'>
+      <div className='text-primary group-hover:text-accent transition-colors duration-300'>
+        <BiHelpCircle size={24} />
+      </div>
+      <h3 className='text-lg font-semibold text-textPrimary'>{question}</h3>
+    </div>
+    <p className='text-textSecondary text-sm leading-relaxed'>{answer}</p>
+  </div>
+);
+
+const FrequentlyAskedQuestions: FC = () => (
+  <div id='faq' className='py-12'>
+    <h2 className='text-3xl font-semibold text-textPrimary text-center mb-12'>
+      Frequently Asked Questions
+    </h2>
+    <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8'>
+      {FAQS.map((faq, index) => (
+        <FAQCard key={index} {...faq} />
+      ))}
+    </div>
+  </div>
+);
+
+export default FrequentlyAskedQuestions;

src/components/about/index.tsx

@@ -3,6 +3,7 @@ import AboutNavbar from './components/AboutNavbar';
 import AvailableFeatures from './components/AvailableFeatures';
 import Carousel from './components/Carousel';
 import Contacts from './components/Contacts';
+import FrequentlyAskedQuestions from './components/FrequentlyAskedQuestions';
 
 const AboutUs = () => {
   const carouselImages = [
@@ -25,7 +26,7 @@ const AboutUs = () => {
   ];
 
   return (
-    <div className='flex flex-col bg-background min-h-screen'>
+    <div id='overview' className='flex flex-col bg-background min-h-screen'>
       <AboutNavbar />
       <div className='flex flex-col items-center max-w-7xl mx-auto w-full px-4 py-8 space-y-2'>
         <main className='flex flex-col w-full border-borderColor border bg-surface backdrop-blur rounded-2xl shadow-lg transition-all duration-300 p-6 space-y-8'>
@@ -34,20 +35,21 @@ const AboutUs = () => {
           </section>
 
           <section className='flex flex-col items-center'>
-            <p className='text-base sm:text-lg text-textSecondary leading-relaxed max-w-3xl text-center font-light'>
+            <p className='text-base sm:text-lg text-textSecondary leading-relaxed max-w-3xl justify-center text-center font-light'>
               Welcome to our free and open source solution for laboratory quality control.
               We&apos;re here to simplify your daily lab operations and help you maintain
               high-quality standards. Together with our growing community, we&apos;re making quality
               control accessible to labs everywhere.
             </p>
           </section>
         </main>
-
-        <section className='w-full'>
+        <section id='features' className='w-full'>
           <AvailableFeatures />
         </section>
-
         <section className='w-full'>
+          <FrequentlyAskedQuestions />
+        </section>
+        <section id='contact' className='w-full'>
           <Contacts />
         </section>
       </div>

src/styles/globals.css

@@ -105,16 +105,14 @@
   * {
     @apply m-0 p-0 no-underline outline-none;
     font-family: 'Inter', sans-serif;
-    padding: 0;
-    margin: 0;
   }
 
   body {
     @apply antialiased;
   }
 
   html {
-    @apply scroll-smooth bg-background;
+    @apply scroll-smooth bg-background text-xs;
   }
 }