working on style, removing css files

frontend/imk/src/App.css

@@ -1,56 +0,0 @@
- #root {
-   /* max-width: 1280px; */
-   margin: 0 auto;
-   padding: 2rem;
-   /* text-align: center; */
-   /* background-color: papayawhip; */
-   background-color: rgb(228, 237, 240);
-   /* background-image: url('../public/plocki.jpg'); */
- }
-
-
- /*
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-*/
-
- /* .logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
- */
- body {
-   background-color: rgb(255, 253, 253);
- }

frontend/imk/src/components/Certificates/Certificates.jsx

@@ -1,6 +1,4 @@
 import React, { useEffect } from 'react'
-import './certificates.css'
-
 function Certificates() {
 
     useEffect(() => {

frontend/imk/src/components/Certificates/certificates.css

@@ -1,30 +0,0 @@
-.cert-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    margin-top: 150px;
-}
-
-.img-container1 {
-    width: 40vw;
-    margin-bottom: 30px;
-}
-
-@media screen and (max-width: 1050px) {
-    .cert-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        /* gap: 50px; */
-        flex-wrap: wrap;
-        margin-top: 50px;
-        margin-left: 3vw;
-    }
-
-    .img-container1 {
-        width: 80vw;
-        height: 40vh;
-        /* margin-top: 20px; */
-        margin-bottom: 30px;
-    }
-}

frontend/imk/src/components/consalting/consalting.css

@@ -1,23 +0,0 @@
-.anotherContainer {
-    width: 80vw;
-    margin-left: 10vw;
-    text-align: justify;
-    /* text-align: center; */
-    /* font-size: 1.3rem; */
-}
-
-
-
-@media screen and (max-width: 1050px) {
-
-    .constaltingContainer {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .anotherContainer {
-        width: 100%;
-        margin-left: 0;
-        margin-top: 2rem;
-    }
-}

frontend/imk/src/components/consalting/consulting.jsx

@@ -1,5 +1,4 @@
 import { useEffect } from 'react'
-import './consalting.css'
 
 export default function Consulting() {
     useEffect(() => {

frontend/imk/src/components/lab/lab.css

@@ -1,83 +0,0 @@
-.textBox {
-  margin-top: 120px;
-  margin-bottom: 50px;
-  padding: 70px;
-  width: 40vw;
-  box-shadow: -1px 5px 20px 1px rgba(0, 0, 0, 0.34);
-  -webkit-box-shadow: -1px 5px 20px 1px rgba(0, 0, 0, 0.34);
-  -moz-box-shadow: -1px 5px 20px 1px rgba(0, 0, 0, 0.34);
-  /*  text-align: left;*/
-}
-
-.imgBox {
-  width: 30vw;
-  box-shadow: -1px 5px 20px 1px rgba(0, 0, 0, 0.34);
-  -webkit-box-shadow: -1px 5px 20px 1px rgba(0, 0, 0, 0.34);
-  -moz-box-shadow: -1px 5px 20px 1px rgba(0, 0, 0, 0.34);
-}
-
-
-.text {
-  /* margin-bottom: 10px; */
-  display: flex;
-  flex-wrap: wrap;
-  gap: 50px;
-  justify-content: space-around;
-}
-
-.text h1 {
-  font-size: 1.5rem;
-  text-decoration: underline;
-}
-
-.textContainer {
-  /* display: flex; */
-  background-image: url("../../../public/background.jpg");
-}
-
-.heading {
-  text-transform: capitalize;
-  text-align: center;
-  font-size: 1.7rem;
-  margin-top: 100px;
-}
-
-strong {
-  font-size: 1.3rem;
-}
-
-@media screen and (max-width: 1050px) {
-  .imgBox {
-    display: none;
-    /* width: 100vw; */
-  }
-
-  .textBox {
-    display: block;
-    width: 80vw;
-    margin-bottom: -150px;
-    text-align: center;
-    padding: 30px;
-  }
-
-  .group {
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-.group {
-  display: flex;
-  justify-content: space-between;
-  gap: 300px;
-  align-items: center;
-  margin-bottom: 75px;
-}
-
-#geotehnika {
-  width: inherit;
-}
-
-footer {
-  margin-top: 250px;
-}

frontend/imk/src/components/lab/lab.jsx

@@ -1,118 +1,3 @@
-// import { useEffect } from 'react';
-
-// export default function Lab() {
-//   useEffect(() => {
-//     window.scrollTo({ top: 0, behavior: "smooth" })
-//   }, [])
-
-//   return (
-//     <div className="container mx-auto px-4">
-//       {/* Header */}
-//       <div className="mt-24 mb-5 md:mb-32 text-center">
-//         <h1 className="text-2xl capitalize underline">
-//           во нашата лабораторија се вршат
-//         </h1>
-//       </div>
-
-//       {/* Main Content */}
-//       <div className="flex flex-wrap gap-12 justify-around">
-//         {/* Concrete Testing Section */}
-//         <div className="flex flex-col md:flex-row justify-between items-center gap-4 md:gap-72 mb-20 w-full">
-//           <div className="w-full md:w-1/2 px-8 py-6 text-center md:text-left bg-slate-100">
-//             <p className="mb-4">
-//               <strong className="text-xl block mb-2">
-//                 Испитувањето на бетон
-//               </strong>
-//               е важен процес кој се користи за да се оцени квалитетот и издржливоста на бетонски конструкции.
-//             </p>
-//             <p>
-//               Испитувањето на бетонот е неопходен процес за осигурување на квалитет и безбедност на градежните проекти и инфраструктурата воопшто. 
-//               Тоа помага во отстранивање на недостатоците и намалување на ризиците од евентуални пропаднувања на конструкциите.
-//             </p>
-//           </div>
-//           <div className="hidden md:block w-1/2">
-//             <img 
-//               src="/kocki.webp" 
-//               alt="Испитување на бетон" 
-//               loading="lazy"
-//               className="max-w-full h-auto" 
-//             />
-//           </div>
-//         </div>
-
-//         {/* Ore and Metal Testing Section */}
-//         <div className="flex flex-col md:flex-row justify-between items-center gap-4 md:gap-72 mb-20 w-full">
-//         <div className="hidden md:block w-1/2">
-//             <img 
-//               src="/lab.webp" 
-//               alt="Испитување на руди и метали" 
-//               loading="lazy"
-//               className="max-w-full h-auto" 
-//             />
-//           </div>
-//           <div className="w-full md:w-1/2 px-8 py-6 text-center md:text-left bg-slate-100">
-//             <p className="mb-4">
-//               <strong className="text-xl block mb-2">
-//                 Испитувањето на руди, метали и троски
-//               </strong>
-//               е важен процес во областа на геолошкото и металуршко инженерство, со цел да се анализираат и одредат својствата и составот на суровините и производите.
-//             </p>
-//             <p>
-//               Овие испитувања се изведуваат за да се осигура квалитетот и спецификациите на материјалите, како и за да се обезбеди безбедно и ефикасно користење и обработка на руди, метали и троски во различни индустрии и апликации.
-//             </p>
-//           </div>
-          
-//         </div>
-
-//         {/* Steel Testing Section */}
-//         <div className="flex flex-col md:flex-row justify-between items-center gap-4 md:gap-72 mb-20 w-full">
-          
-//           <div className="w-full md:w-1/2 px-8 py-6 text-center md:text-left bg-slate-100">
-//             <p className="mb-4">
-//               <strong className="text-xl block mb-2">
-//                 Испитувањето на челик
-//               </strong>
-//               е важен процес за одредување на квалитетот, издржливоста и други механички својства на челикот, кој се користи во разни индустрии и конструкции.
-//             </p>
-//             <p>
-//               Испитувањето на челик е неопходен процес за да се обезбеди квалитетот и безбедноста на производите и конструкциите кои го користат, како и за да се уверите дека челикот одговара на спецификациите и стандардите.
-//             </p>
-//           </div>
-          
-//           <div className="hidden md:block w-1/2">
-//             <img 
-//               src="/armatura.jpg" 
-//               alt="Испитување на челик" 
-//               loading="lazy"
-//               className="max-w-full h-auto" 
-//             />
-//           </div>
-//         </div>
-
-//         {/* Laboratory Extraction Section */}
-//         <div className="flex flex-col md:flex-row justify-between items-center gap-4 md:gap-72 mb-20 w-full">
-//         <div className="hidden md:block w-1/2">
-//             <img 
-//               src="/geotehnika.webp" 
-//               alt="Лабораториска екстракција" 
-//               loading="lazy"
-//               className="max-w-full h-auto" 
-//             />
-//           </div>
-//           <div className="w-full md:w-1/2 px-8 py-6 text-center md:text-left bg-slate-100">
-//             <p className="mb-4">
-//               <strong className="text-xl block mb-2">
-//                 Лабораториската екстракција
-//               </strong>
-//               на метали или неметали од руди и троски е процес кој се користи за да се изолираат и оддели материјалите од суровините или отпадните производи, како што се рудите или троските, со цел да се добие чист метал или неметал.
-//             </p>
-//           </div>
-          
-//         </div>
-//       </div>
-//     </div>
-//   );
-// }
 import { useEffect } from 'react';
 
 export default function Lab() {

frontend/imk/src/components/navbar/Navbar.jsx

@@ -8,7 +8,7 @@ const navigation = [
   { name: "За нас", href: "/about" },
   { name: "Галерија", href: "/gallery" },
   { name: "Контакт", href: "/contact" },
-  { name: "Клиенти", href: "/clients" },
+  // { name: "Клиенти", href: "/clients" },
   { name: "Админ", href: "/admin" },
   { name: "Логин", href: "/login" },
 ];

frontend/imk/src/components/navbar/navbar.css

@@ -1,39 +0,0 @@
-.nav {
-  background-color: rgb(228, 237, 240);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.34);
-  -webkit-box-shadow: -1px 5px 20px 1px rgba(0, 0, 0, 0.34);
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.34);
-  background-image: url("../public/background.jpg");
-}
-
-/* #logo {
-  margin-left: 10px;
-} */
-
-/* #logo-tuf {
-margin-right: 20px;
-} */
-
-a:hover {
-  border-bottom: 1px solid gray;
-}
-
-.navitems {
-  /* margin-right: 100px; */
-  margin-left: 100px;
-}
-
-@media screen and (max-width: 1050px) {
-  #logo {
-    margin-left: 0px;
-  }
-
-  #logo img {
-    width: 70px;
-    height: auto;
-  }
-
-  #logo-tuf {
-    display: none;
-  }
-}

frontend/imk/src/components/ultrasound/ultraSound.css

@@ -1,3 +0,0 @@
-.insuranceContainer {
-    height: 100vh;
-}

frontend/imk/src/components/ultrasound/ultraSound.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react'
-import './ultraSound.css'
 
 export default function UltraSound() {
     useEffect(() => {

frontend/imk/src/pages/aboutpage/About.jsx

@@ -1,139 +1,32 @@
-// import './about.css'
-
-
-
-// export default function About() {
-
-
-//     return (
-//         <>
-//             <div className="aboutGroup">
-
-
-//                 {/* <div className="container"> */}
-//                 <div className="aboutContainer">
-//                     <h1 className="text-2xl text-center mt-32 font-bold tracking-tight text-gray-900 sm:text-4xl">За нас</h1>
-//                     <p className="tracking-tight text-gray-900 sm:text-4xl mt-16">Компанијата Испитување на материјали и консултантство ДООЕЛ е основана во 2021 година. Главната дејност на ИМК ДООЕЛ е лабораториски испитувања во
-//                         областа на градежништвото и индустријата, како и консултантски услуги во областа на индустријата. Со успешното работење во своите области и
-//                         стручниот кадар кој компанијата го поседува, во 2022 година за компанијата интерес пројавува потенцијален партнер од Швајцарија. Во 2023
-//                         година компанијата ИМК ДООЕЛ од домашна компанија прераснува во интернационална компанија со добивање на партнер од Швајцарија и
-//                         прераснува во ИМК ДОО. Во истата година компанијата добива финансиска поддршка од старт ап фондот СЕКО, фонд кој го препозна квалитетот и
-//                         визијата кој го поседуваат двајца млади претпиемачи. Лабораторијата е комплетно опремена да одговори на секој предизвик во областа на
-//                         испитувањето на квалитетот на материјалите во градежната индсутрија со најмодерни инструменти за теренско и лабораториско испитување.
-//                         Испитувањето на материјалите се врши според најнови EN и МКС стандарди.</p>
-//                 </div>
-
-
-
-
-
-
-//                 <div className="form-container">
-//                     <div className="mx-auto max-w-2xl text-center">
-//                         <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Станете дел од нашиот тим</h2>
-
-//                     </div>
-//                     <form action="https://formsubmit.co/taratur@gmail.com"
-//                         enctype='multipart/form-data'
-//                         method="POST" className="mx-auto mt-16 max-w-xl sm:mt-20">
-//                         <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
-//                             <div>
-//                                 <label htmlFor="first-name" className="block text-sm font-semibold leading-6 text-gray-900">
-//                                     Име
-//                                 </label>
-//                                 <div className="mt-2.5">
-//                                     <input
-//                                         type="text"
-//                                         name="first-name"
-//                                         id="first-name"
-//                                         autoComplete="given-name"
-//                                         className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-//                                     />
-//                                 </div>
-//                             </div>
-//                             <div>
-//                                 <label htmlFor="last-name" className="block text-sm font-semibold leading-6 text-gray-900">
-//                                     Презиме
-//                                 </label>
-//                                 <div className="mt-2.5">
-//                                     <input
-//                                         type="text"
-//                                         name="last-name"
-//                                         id="last-name"
-//                                         autoComplete="family-name"
-//                                         className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-//                                     />
-//                                 </div>
-//                             </div>
-//                             <div className="sm:col-span-2">
-//                                 <label htmlFor="email" className="block text-sm font-semibold leading-6 text-gray-900">
-//                                     Мејл
-//                                 </label>
-//                                 <div className="mt-2.5">
-//                                     <input
-//                                         type="email"
-//                                         name="email"
-//                                         id="email"
-//                                         autoComplete="email"
-//                                         className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-//                                     />
-//                                 </div>
-//                             </div>
-
-//                             <div className="sm:col-span-2">
-//                                 <label htmlFor="message" className="block text-sm font-semibold leading-6 text-gray-900">
-//                                     Порака
-//                                 </label>
-//                                 <div className="mt-2.5">
-//                                     <textarea
-//                                         name="message"
-//                                         id="message"
-//                                         rows={4}
-//                                         className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-//                                         defaultValue={''}
-//                                     />
-//                                 </div>
-//                             </div>
-//                             <div className="sm:col-span-2">
-//                                 <label htmlFor="attachment" className="block text-lg font-semibold leading-6 text-gray-900 mb-4">
-//                                     Прокачетего вашето CV (5mb max)
-//                                 </label>
-//                                 <input type="file" name="attachment" id='attachment' accept=".pdf, image/jpeg, .doc, .odt" />
-//                             </div>
-//                             {/* <Switch.Group as="div" className="flex gap-x-4 sm:col-span-2">
-//                             </Switch.Group> */}
-//                         </div>
-//                         <input type="hidden" name="_next" value="https://imk-azure.vercel.app/"></input>
-//                         <div className="mt-10">
-//                             <button
-//                                 type="submit"
-//                                 className="block w-full rounded-md bg-gray-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500"
-//                             >
-//                                 Испрати
-//                             </button>
-//                         </div>
-//                     </form>
-//                     {/* </div > */}
-//                 </div>
-//             </div>
-
-
-
-//         </>
-//     )
-// }
 import { SectionHeader } from '../../shared/SectionHeader';
 import { Button } from '../../shared/Button';
+import { FiUsers, FiAward, FiCheckCircle, FiTrendingUp } from 'react-icons/fi';
 
 export default function About() {
+  const stats = [
+    { label: 'Години искуство', value: '15+' },
+    { label: 'Задоволни клиенти', value: '500+' },
+    { label: 'Завршени проекти', value: '1000+' },
+    { label: 'Експерти во тимот', value: '20+' }
+  ];
+
+  const milestones = [
+    { year: '2008', title: 'Основање на компанијата' },
+    { year: '2012', title: 'Проширување на лабораторијата' },
+    { year: '2015', title: 'ISO сертификација' },
+    { year: '2018', title: 'Воведување на нови услуги' },
+    { year: '2020', title: 'Модернизација на опремата' },
+    { year: '2023', title: 'Проширување на тимот' }
+  ];
+
   return (
-    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
+    <div className="min-h-screen bg-gradient-to-b from-cyan-700/80 to-cyan-400">
       {/* Hero Section */}
       <div className="relative h-[60vh] overflow-hidden">
         <div className="absolute inset-0">
-          <img 
+          <img
-            src="/about-hero.jpg" 
+            src="/about-hero.webp"
-            alt="About Us"
+            alt="Laboratory equipment"
             className="w-full h-full object-cover"
           />
           <div className="absolute inset-0 bg-gradient-to-r from-blue-900/90 to-blue-600/80" />
@@ -151,41 +44,133 @@ export default function About() {
         </div>
       </div>
 
-      {/* Content Sections */}
+      {/* Stats Section */}
+      {/* <div className="container mx-auto px-4 py-16 -mt-20">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8">
+          {stats.map((stat, index) => (
+            <div key={index} className="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-center">
+              <div className="text-3xl font-bold text-blue-400 mb-2">{stat.value}</div>
+              <div className="text-gray-300">{stat.label}</div>
+            </div>
+          ))}
+        </div>
+      </div> */}
+
+      {/* Vision & Values Section */}
       <div className="container mx-auto px-4 py-16">
         <SectionHeader 
           title="Нашата Мисија" 
           subtitle="Посветени сме на обезбедување највисок квалитет во нашата работа"
+          className="text-white"
         />
         
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
-          <div className="bg-white rounded-xl shadow-lg p-8">
+          <div className="bg-white/10 backdrop-blur-lg rounded-xl p-8">
-            <h3 className="text-2xl font-semibold text-gray-800 mb-4">
+            <div className="flex items-center mb-4">
-              Визија
+              <FiTrendingUp className="w-6 h-6 text-white mr-3" />
-            </h3>
+              <h3 className="text-2xl font-semibold text-white">
-            <p className="text-gray-600">
+                Визија
-              Да бидеме водечка компанија во обезбедување на квалитет и сигурност во градежништвото.
+              </h3>
+            </div>
+            <p className="text-white text-xl">
+              Нашата визија е да бидеме водечка компанија во областа на испитување на материјали и контрола на квалитет во Македонија. Стремиме кон постојано унапредување на нашите услуги преку имплементација на најсовремени технологии и методологии. Сакаме да воспоставиме нови стандарди во индустријата и да допринесеме за развојот на градежништвото и инженерството во регионот.
             </p>
           </div>
           
-          <div className="bg-white rounded-xl shadow-lg p-8">
+          <div className="bg-white/10 backdrop-blur-lg rounded-xl p-8">
-            <h3 className="text-2xl font-semibold text-gray-800 mb-4">
+            <div className="flex items-center mb-4">
-              Вредности
+              <FiAward className="w-6 h-6 text-white mr-3" />
-            </h3>
+              <h3 className="text-2xl font-semibold text-white">
-            <p className="text-gray-600">
+                Вредности
-              Професионалност, посветеност и иновација во секој проект.
+              </h3>
-            </p>
+            </div>
+            <ul className="text-gray-300 space-y-3">
+              <li className="flex items-start text-xl">
+                <FiCheckCircle className="w-5 h-5 text-red mr-2 mt-1" />
+                <div>
+                  <strong className="text-white">Квалитет</strong> - Посветени сме на обезбедување највисок квалитет во сите наши услуги
+                </div>
+              </li>
+              <li className="flex items-start">
+                <FiCheckCircle className="w-5 h-5 text-blue-400 mr-2 mt-1" />
+                <div>
+                  <strong className="text-white">Интегритет</strong> - Работиме со целосна транспарентност и професионална етика
+                </div>
+              </li>
+              <li className="flex items-start">
+                <FiCheckCircle className="w-5 h-5 text-blue-400 mr-2 mt-1" />
+                <div>
+                  <strong className="text-white">Иновација</strong> - Постојано инвестираме во нови технологии и методи
+                </div>
+              </li>
+              <li className="flex items-start">
+                <FiCheckCircle className="w-5 h-5 text-blue-400 mr-2 mt-1" />
+                <div>
+                  <strong className="text-white">Експертиза</strong> - Нашиот тим се состои од високо квалификувани професионалци
+                </div>
+              </li>
+              <li className="flex items-start">
+                <FiCheckCircle className="w-5 h-5 text-blue-400 mr-2 mt-1" />
+                <div>
+                  <strong className="text-white">Одговорност</strong> - Преземаме целосна одговорност за квалитетот на нашата работа
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Timeline Section */}
+        <div className="mb-16 border rounded-xl border-red-900/20 p-10 bg-white/10 backdrop-blur-lg">
+          <SectionHeader 
+            title="Нашиот Развој" 
+            subtitle="Клучни моменти во нашата историја"
+            className="text-white"
+          />
+          <div className="relative">
+            <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-px"></div>
+            <div className="space-y-8">
+              {milestones.map((milestone, index) => (
+                <div key={index} className={`flex items-center ${index % 2 === 0 ? 'justify-start' : 'justify-end'}`}>
+                  <div className={`w-1/2 ${index % 2 === 0 ? 'pr-8 text-right' : 'pl-8'}`}>
+                    <div className="bg-white/80 backdrop-blur-lg rounded-xl p-6 text-blue-800">
+                      <div className="text-blue-400 font-bold text-xl mb-2">{milestone.year}</div>
+                      <div className="text-blue-700 text-xl">{milestone.title}</div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Team Section */}
+        <div className="mb-16">
+          <SectionHeader 
+            title="Нашиот Тим" 
+            subtitle="Запознајте се со нашите експерти"
+            className="text-white"
+          />
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {[1, 2, 3].map((member) => (
+              <div key={member} className="bg-white backdrop-blur-lg rounded-xl p-6 text-center">
+                <div className="w-24 h-24 mx-auto mb-4 rounded-full bg-blue-400/20 flex items-center justify-center">
+                  <FiUsers className="w-12 h-12 text-blue-400" />
+                </div>
+                <h4 className="text-white font-semibold mb-2">Име Презиме</h4>
+                <p className="text-gray-400">Позиција</p>
+              </div>
+            ))}
           </div>
         </div>
       </div>
 
       {/* CTA Section */}
-      <div className="bg-blue-600 text-white py-24">
+      <div className="bg-blue-600/20 backdrop-blur-lg py-24">
         <div className="container mx-auto px-4 text-center">
-          <h2 className="text-3xl md:text-4xl font-bold mb-8">
+          <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
             Започнете го вашиот проект со нас
           </h2>
-          <Button variant="secondary">
+          <Button variant="outline">
             Контактирајте нѐ
           </Button>
         </div>

frontend/imk/src/pages/aboutpage/about.css

@@ -1,34 +0,0 @@
-.aboutGroup {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-}
-
-.aboutContainer {
-    width: 40vw;
-    text-align: justify;
-}
-
-.aboutContainer p {
-    font-size: 1.3rem;
-}
-
-
-@media screen and (max-width: 1050px) {
-    .aboutGroup {
-        display: block;
-
-    }
-
-    .aboutContainer {
-        width: 80vw;
-        text-align: center;
-        margin: 0;
-
-    }
-
-    .form-container {
-        margin-top: 150px;
-
-    }
-}

frontend/imk/src/pages/homepage/Home.jsx

@@ -1,12 +1,12 @@
 import { NavLink } from "react-router-dom";
 import { motion } from "framer-motion"; // You'll need to install framer-motion
 import { ArrowRightIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
-
+import { SectionHeader } from "../../shared/SectionHeader";
 const serviceCards = [
   {
     title: "Лабораториски услуги",
     description: "Професионални лабораториски испитувања со најсовремена опрема",
-    image: "/labfinal.webp",
+    image: "labfinal.webp",
     link: "/lab",
     services: [
       "Испитување на бетон",
@@ -16,33 +16,54 @@ const serviceCards = [
       "Лабораториска екстракција од руди и троски"
     ]
   },
-  // ... other service cards
+  {
+    title: "Ултразвучни испитувања",
+    description: "Неразорувачки испитувања со најсовремена ултразвучна опрема",
+    image: "wallscener.jpeg",
+    link: "/ultrasound",
+    services: [
+      "Испитување на заварени споеви",
+      "Дебелометрија",
+      "Испитување на дефекти",
+      "Контрола на квалитет",
+      "Анализа и известување"
+    ]
+  },
+  {
+    title: "Консалтинг услуги",
+    description: "Експертски совети и консултации во градежништвото",
+    image: "consulting2.jpg",
+    link: "/consulting",
+    services: [
+      "Градежно советување",
+      "Проектен менаџмент",
+      "Надзор на градба",
+      "Техничка документација",
+      "Анализа на материјали"
+    ]
+  }
 ];
 
 export default function Home() {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
+    <div className="min-h-screen bg-gradient-to-b from-cyan-900 to-cyan-400">
       {/* Hero Section with Parallax */}
       <div className="relative h-[90vh] overflow-hidden">
-  <div className="absolute inset-0">
+        <div className="absolute inset-0">
-    <img 
+
-      src="/hero-background.jpg" 
-      alt="Laboratory Background"
-      className="w-full h-full object-cover"
-    />
           <div className="absolute inset-0 bg-gradient-to-r from-blue-900/90 to-blue-600/80" />
         </div>
-        
+
         <div className="relative container mx-auto px-4 h-full flex items-center">
           <div className="max-w-3xl">
-            <motion.h1 
+            <motion.h1
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               className="text-4xl md:text-6xl font-bold text-white mb-6"
             >
               Вашиот партнер во контролата на безбедно градење
             </motion.h1>
-            <motion.p 
+            <motion.p
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.2 }}
@@ -50,19 +71,19 @@ export default function Home() {
             >
               Професионални лабораториски услуги со најсовремена опрема и експертиза
             </motion.p>
-            <motion.div 
+            <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.4 }}
               className="flex gap-4"
             >
-              <NavLink 
+              <NavLink
                 to="/contact"
                 className="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-full font-semibold transition-colors duration-300"
               >
                 Контактирајте нѐ
               </NavLink>
-              <NavLink 
+              <NavLink
                 to="/services"
                 className="bg-white/10 hover:bg-white/20 text-white px-8 py-3 rounded-full font-semibold transition-colors duration-300"
               >
@@ -74,7 +95,7 @@ export default function Home() {
       </div>
 
       {/* Stats Section */}
-      <div className="container mx-auto px-4 py-16">
+      {/* <div className="container mx-auto px-4 py-16 ">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
           {[
             { number: "15+", label: "Години искуство" },
@@ -83,26 +104,30 @@ export default function Home() {
             { number: "100%", label: "Задоволство" },
           ].map((stat) => (
             <div key={stat.label} className="text-center">
-              <div className="text-4xl font-bold text-blue-600 mb-2">{stat.number}</div>
+              <div className="text-4xl font-bold text-white mb-2">{stat.number}</div>
-              <div className="text-gray-600">{stat.label}</div>
+              <div className="text-white">{stat.label}</div>
             </div>
           ))}
         </div>
-      </div>
+      </div> */}
 
       {/* Services Section */}
-      <div className="bg-gray-100 py-24">
+      <div className="bg-white py-24">
-        <div className="container mx-auto px-4">
+        <div className="container  bg-gradient-to-b from-cyan-900 to-cyan-400 rounded-xl mx-auto p-20">
-          <div className="text-center mb-16">
+          {/* <div className="text-center mb-16">
             <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
               Нашите Услуги
             </h2>
             <div className="w-24 h-1 bg-blue-500 mx-auto"></div>
-          </div>
+          </div> */}
-          
+          <SectionHeader
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            title="Нашите Услуги"
+            subtitle="Нашиот тим е спремен да ви помогне со нашите услуги"
+            className="text-white"
+          /> 
+          <div className="grid grid-cols-1  md:grid-cols-3 gap-10">
             {serviceCards.map((card) => (
-              <NavLink 
+              <NavLink
                 key={card.title}
                 to={card.link}
                 className="group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
@@ -122,7 +147,7 @@ export default function Home() {
                   <p className="text-gray-600 mb-4">{card.description}</p>
                   <ul className="space-y-2">
                     {card.services.slice(0, 3).map((service, index) => (
-                      <li 
+                      <li
                         key={index}
                         className="flex items-center text-gray-700"
                       >
@@ -145,23 +170,23 @@ export default function Home() {
       {/* Featured Projects/Clients */}
       <div className="container mx-auto px-4 py-24">
         <div className="text-center mb-16">
-          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
             Наши Клиенти
           </h2>
           <div className="w-24 h-1 bg-blue-500 mx-auto mb-8"></div>
-          <p className="text-gray-600 max-w-2xl mx-auto">
+          <p className="text-white text-xl max-w-2xl mx-auto">
             Горди сме на довербата која ни ја укажуваат нашите клиенти
           </p>
         </div>
-        
+
         <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
           {/* Add client logos here */}
           {[1, 2, 3, 4].map((index) => (
-            <div 
+            <div
               key={index}
               className="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
             >
-              <img 
+              <img
                 src={`/client-${index}.png`}
                 alt={`Client ${index}`}
                 className="w-full h-20 object-contain grayscale hover:grayscale-0 transition-all duration-300"
@@ -177,7 +202,7 @@ export default function Home() {
           <h2 className="text-3xl md:text-4xl font-bold mb-8">
             Спремни сме да ви помогнеме во вашиот следен проект
           </h2>
-          <NavLink 
+          <NavLink
             to="/contact"
             className="inline-block bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors duration-300"
           >

frontend/imk/src/pages/homepage/home.css

@@ -1,105 +0,0 @@
-.homeContainer {
-  width: 80vw;
-  margin-left: 10vw;
-}
-
-.bannerTop {
-  padding: 50px;
-  font-size: 1.5rem;
-  text-align: center;
-  display: flex;
-  justify-content: space-around;
-  margin-top: 50px;
-}
-
-.bannerBottom h2 {
-  font-size: 1.5rem;
-  text-align: center;
-  padding: 50px;
-}
-
-.someclass {
-  margin-top: 50px;
-  margin-bottom: 30px;
-  display: flex;
-  justify-content: space-around;
-  margin-bottom: 150px;
-}
-
-.someclass img {
-  width: 70vw;
-  /* height: 500px; */
-}
-
-.someclass h1 {
-  font-size: 1.5rem;
-  padding: 20px;
-}
-
-.listCards {
-  display: flex;
-  justify-content: space-around;
-  gap: 20px;
-  /* flex-wrap: wrap; */
-}
-
-.serviceCard {
-  margin-top: 30px;
-  margin-bottom: 100px;
-  width: 25vw;
-  border: 1px solid black;
-  padding: 20px;
-  border-radius: 30px;
-  cursor: pointer;
-}
-
-
-
-
-
-.serviceCard h1 {
-  /* border-bottom: 1px solid black; */
-  font-size: 1.5rem;
-  padding: 10px;
-  /* text-decoration: underline; */
-}
-
-.imgHelper img {
-  height: 300px !important;
-  /* width: fit-content; */
-}
-
-li {
-  list-style: inside;
-  padding-left: 10px;
-  padding-bottom: 5px;
-}
-
-.slogan {
-  margin-top: 50px;
-}
-
-@media screen and (max-width: 1050px) {
-  .listCards {
-    display: block;
-    /* width: 80vw; */
-  }
-
-  .serviceCard {
-    width: 80vw;
-    margin-left: 0.5vw;
-  }
-
-  .imgHelper img {
-    width: fit;
-  }
-
-  .homeContainer {
-    width: 80vw;
-    margin-left: 3vw;
-  }
-
-  .bannerTop {
-    margin-top: -20px;
-  }
-}

frontend/imk/src/shared/SectionHeader.jsx

@@ -1,14 +1,14 @@
 // Reusable section header component
 // eslint-disable-next-line react/prop-types
-export function SectionHeader({ title, subtitle }) {
+export function SectionHeader({ title, subtitle, className }) {
     return (
-      <div className="text-center mb-16">
+      <div className={`text-center mb-16 text-white ${className}`}>
-        <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
+        <h2 className="text-3xl md:text-4xl font-bold mb-4">
           {title}
         </h2>
         <div className="w-24 h-1 bg-blue-600 mx-auto mb-8"></div>
         {subtitle && (
-          <p className="text-gray-600 max-w-2xl mx-auto">
+          <p className="text-xl max-w-2xl mx-auto">
             {subtitle}
           </p>
         )}