final version

complete redesign
2025-02-24 23:40:35 +01:00 · 2025-02-24 23:40:35 +01:00 · c7d4b95631
commit c7d4b95631
parent 6553b1c880
78 changed files with 7105 additions and 0 deletions
--- a/frontend/README.md
+++ b/frontend/README.md
@ -0,0 +1,9 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+# imk
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <!-- <link rel="icon" type="image/svg+xml" href="/logo.svg" /> -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>IMK</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,37 @@
+{
+  "name": "imk",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.7.19",
+    "@heroicons/react": "^2.2.0",
+    "axios": "^1.7.7",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^11.18.2",
+    "jwt-decode": "^4.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^6.15.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "vite": "^4.4.5"
+  }
+}
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/frontend/public/1.jpg
+++ b/frontend/public/1.jpg
--- a/frontend/public/10.jpg
+++ b/frontend/public/10.jpg
--- a/frontend/public/2.jpg
+++ b/frontend/public/2.jpg
--- a/frontend/public/3.jpg
+++ b/frontend/public/3.jpg
--- a/frontend/public/4.jpg
+++ b/frontend/public/4.jpg
--- a/frontend/public/5.jpg
+++ b/frontend/public/5.jpg
--- a/frontend/public/6.jpg
+++ b/frontend/public/6.jpg
--- a/frontend/public/7.jpg
+++ b/frontend/public/7.jpg
--- a/frontend/public/8.jpg
+++ b/frontend/public/8.jpg
--- a/frontend/public/9.jpg
+++ b/frontend/public/9.jpg
--- a/frontend/public/armatura.jpg
+++ b/frontend/public/armatura.jpg
--- a/frontend/public/background.jpg
+++ b/frontend/public/background.jpg
--- a/frontend/public/consalting.webp
+++ b/frontend/public/consalting.webp
--- a/frontend/public/consalting1.jpg
+++ b/frontend/public/consalting1.jpg
--- a/frontend/public/consulting2.jpg
+++ b/frontend/public/consulting2.jpg
--- a/frontend/public/ekstrakcija.jpg
+++ b/frontend/public/ekstrakcija.jpg
--- a/frontend/public/geotehnika.webp
+++ b/frontend/public/geotehnika.webp
--- a/frontend/public/imklogorgb.png
+++ b/frontend/public/imklogorgb.png
--- a/frontend/public/kinenje.jpg
+++ b/frontend/public/kinenje.jpg
--- a/frontend/public/kocka.webp
+++ b/frontend/public/kocka.webp
--- a/frontend/public/kocki.webp
+++ b/frontend/public/kocki.webp
--- a/frontend/public/lab.jpg
+++ b/frontend/public/lab.jpg
--- a/frontend/public/lab.webp
+++ b/frontend/public/lab.webp
--- a/frontend/public/labFinal.jpg
+++ b/frontend/public/labFinal.jpg
--- a/frontend/public/labfinal.webp
+++ b/frontend/public/labfinal.webp
--- a/frontend/public/logo.jpg
+++ b/frontend/public/logo.jpg
--- a/frontend/public/naum1.webp
+++ b/frontend/public/naum1.webp
--- a/frontend/public/naum2.webp
+++ b/frontend/public/naum2.webp
--- a/frontend/public/profili.jpg
+++ b/frontend/public/profili.jpg
--- a/frontend/public/sertifikat1.jpg
+++ b/frontend/public/sertifikat1.jpg
--- a/frontend/public/sertifikat2.jpg
+++ b/frontend/public/sertifikat2.jpg
--- a/frontend/public/sertifikat3.jpg
+++ b/frontend/public/sertifikat3.jpg
--- a/frontend/public/sertifikat4.jpg
+++ b/frontend/public/sertifikat4.jpg
--- a/frontend/public/tuf.png
+++ b/frontend/public/tuf.png
--- a/frontend/public/wallscener.jpeg
+++ b/frontend/public/wallscener.jpeg
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@ -0,0 +1,60 @@
+// import './App.css'
+import { AuthProvider } from './hooks/useAuth';
+import Navbar from './components/navbar/Navbar'
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Home from './pages/homepage/Home'
+import About from './pages/aboutpage/About'
+import Contact from './pages/contactpage/Contact.jsx'
+import Consulting from './components/consalting/consulting';
+import Lab from './components/lab/lab';
+import Footer from './components/footer/footer';
+import UltraSound from './components/ultrasound/ultraSound';
+import Gallery from './components/gallery/Gallery.jsx';
+import Certificates from './components/Certificates/Certificates.jsx';
+import Clients from './components/clients/clients';
+import AdminPanel from './components/adminPanel/AdminPanel';
+import Dashboard from './components/dashboard/Dashboard';
+import Login from './components/login/login';
+import ProtectedRoute from './components/protectedRoute/ProtectedRoute';
+
+function App() {
+
+  return (
+    <AuthProvider>
+      <div >
+        <BrowserRouter >
+        <Navbar />
+        <Routes>
+          <Route path='/' element={<Home />} />
+          <Route path='/contact' element={<Contact />} />
+          <Route path='/about' element={<About />} />
+          <Route path='/consulting' element={<Consulting />} />
+          <Route path='/lab' element={<Lab />} />
+          <Route path='/ultrasound' element={<UltraSound />} />
+          <Route path='/gallery' element={<Gallery />} />
+          <Route path='/certificates' element={<Certificates />} />
+          <Route path='/clients' element={
+            <ProtectedRoute>
+              <Clients />
+            </ProtectedRoute>
+          } />
+          <Route path='/admin' element={
+            <ProtectedRoute>
+              <AdminPanel />
+            </ProtectedRoute>
+          } />
+          <Route path='/login' element={<Login />} />
+          <Route path='/dashboard' element={
+            <ProtectedRoute>
+              <Dashboard />
+            </ProtectedRoute>
+          } />
+        </Routes>
+        <Footer />
+        </BrowserRouter>
+      </div>
+    </AuthProvider>
+  )
+}
+
+export default App
--- a/frontend/src/assets/consalting1.jpg
+++ b/frontend/src/assets/consalting1.jpg
--- a/frontend/src/assets/consulting2.jpg
+++ b/frontend/src/assets/consulting2.jpg
--- a/frontend/src/assets/imklogorgb.png
+++ b/frontend/src/assets/imklogorgb.png
--- a/frontend/src/assets/lab.jpg
+++ b/frontend/src/assets/lab.jpg
--- a/frontend/src/assets/logo.jpg
+++ b/frontend/src/assets/logo.jpg
--- a/frontend/src/components/Certificates/Certificates.jsx
+++ b/frontend/src/components/Certificates/Certificates.jsx
@ -0,0 +1,32 @@
+import React, { useEffect } from 'react'
+function Certificates() {
+
+    useEffect(() => {
+        window.scrollTo({ top: 0, behavior: "smooth" })
+    }, [])
+
+
+    return (
+        <>
+            <div className="cert-container">
+                <div className="img-container1">
+                    <img src="/sertifikat1.jpg" alt="Image 1" />
+                </div>
+                <div className="img-container1">
+                    <img src="sertifikat2.jpg" alt="Image 2" />
+                </div>
+                {/* <div className="img-container1">
+                    <img src="sertifikat3.jpg" alt="Image 3" />
+                </div>
+                <div className="img-container1">
+                    <img src="sertifikat4" alt="Image 4" />
+                </div> */}
+
+            </div>
+
+
+        </>
+    )
+}
+
+export default Certificates
--- a/frontend/src/components/UserCreate.jsx
+++ b/frontend/src/components/UserCreate.jsx
@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { createUser } from '../services/api';
+
+// eslint-disable-next-line react/prop-types
+function UserCreate({ onUserCreated }) {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    password: '',
+  });
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      await createUser(formData);
+      setFormData({ name: '', email: '', password: '' });
+      if (onUserCreated) onUserCreated();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to create user');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-white p-6 rounded-lg shadow">
+      <h3 className="text-lg font-medium mb-4">Create New User</h3>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Name</label>
+          <input
+            type="text"
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            required
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Email</label>
+          <input
+            type="email"
+            value={formData.email}
+            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            required
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Password</label>
+          <input
+            type="password"
+            value={formData.password}
+            onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            required
+          />
+        </div>
+
+        {error && (
+          <div className="text-red-500 text-sm">{error}</div>
+        )}
+
+        <button
+          type="submit"
+          disabled={loading}
+          className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white 
+            ${loading ? 'bg-gray-400' : 'bg-indigo-600 hover:bg-indigo-700'}`}
+        >
+          {loading ? 'Creating...' : 'Create User'}
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default UserCreate;
--- a/frontend/src/components/adminPanel/AdminPanel.jsx
+++ b/frontend/src/components/adminPanel/AdminPanel.jsx
@ -0,0 +1,274 @@
+import { useState, useEffect } from 'react';
+import { getAllUsers, getAllDocuments, getUserInfo, createUser } from '../../services/api';
+import DocumentUpload from '../documentUpload/DocumentUpload';
+import { useNavigate } from 'react-router-dom';
+import { FiUsers, FiFile, FiUpload, FiUserPlus, FiLoader } from 'react-icons/fi';
+
+function AdminPanel() {
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState('documents');
+  const [users, setUsers] = useState([]);
+  const [documents, setDocuments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [newUser, setNewUser] = useState({
+    name: '',
+    email: '',
+    password: '',
+    isAdmin: false
+  });
+
+  useEffect(() => {
+    checkAdminStatus();
+  }, []);
+
+  useEffect(() => {
+    if (isAdmin) {
+      fetchData();
+    }
+  }, [activeTab, isAdmin]);
+
+  const checkAdminStatus = async () => {
+    try {
+      const response = await getUserInfo();
+      if (!response?.data?.isAdmin) {
+        navigate('/');
+      } else {
+        setIsAdmin(true);
+        await fetchData();
+      }
+    } catch (error) {
+      console.error('Admin check failed:', error);
+      navigate('/');
+    }
+  };
+
+  const fetchData = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      if (activeTab === 'users') {
+        const response = await getAllUsers();
+        setUsers(response.data);
+      } else if (activeTab === 'documents') {
+        const response = await getAllDocuments();
+        console.log('Documents data:', response.data);
+        setDocuments(response.data);
+      }
+    } catch (err) {
+      console.error('Fetch error:', err);
+      setError('Failed to fetch data. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreateUser = async (e) => {
+    e.preventDefault();
+    try {
+      await createUser(newUser);
+      setNewUser({
+        name: '',
+        email: '',
+        password: '',
+        isAdmin: false
+      });
+      fetchData();
+    } catch (err) {
+      setError('Failed to create user');
+    }
+  };
+
+  if (!isAdmin) return null;
+
+  const tabs = [
+    { id: 'documents', name: 'Documents', icon: FiFile },
+    { id: 'users', name: 'Users', icon: FiUsers },
+    { id: 'upload', name: 'Upload Document', icon: FiUpload }
+  ];
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-900">
+        <div className="flex items-center space-x-3 text-blue-500">
+          <FiLoader className="w-6 h-6 animate-spin" />
+          <span className="text-lg font-medium">Loading...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 p-6">
+      <div className="max-w-7xl mx-auto">
+        <header className="mb-8 mt-20">
+          <h1 className="text-3xl font-bold text-white mb-2">Admin Dashboard</h1>
+          <p className="text-gray-400">Manage users and documents</p>
+        </header>
+
+        {/* Tabs */}
+        <div className="flex space-x-4 mb-6">
+          {tabs.map(({ id, name, icon: Icon }) => (
+            <button
+              key={id}
+              onClick={() => setActiveTab(id)}
+              className={`
+                px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors
+                ${activeTab === id 
+                  ? 'bg-white/10 text-white' 
+                  : 'text-gray-400 hover:bg-white/5 hover:text-white'}
+              `}
+            >
+              <Icon className="w-4 h-4" />
+              <span>{name}</span>
+            </button>
+          ))}
+        </div>
+
+        {error && (
+          <div className="mb-6 p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-200">
+            {error}
+          </div>
+        )}
+
+        <div className="grid gap-6">
+          {activeTab === 'documents' && (
+            <div className="bg-white/5 backdrop-blur-lg rounded-xl overflow-hidden">
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b border-gray-700">
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Title</th>
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Status</th>
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Uploaded By</th>
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Shared With</th>
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Created At</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {documents.map((doc) => (
+                      <tr key={doc.id} className="border-b border-gray-700/50 hover:bg-white/5">
+                        <td className="px-6 py-4 text-gray-200">{doc.title}</td>
+                        <td className="px-6 py-4">
+                          <span className={`px-3 py-1 rounded-full text-xs font-medium ${
+                            doc.status === 'completed' ? 'bg-green-500/10 text-green-400' :
+                            doc.status === 'pending' ? 'bg-yellow-500/10 text-yellow-400' :
+                            doc.status === 'uploading' ? 'bg-blue-500/10 text-blue-400' :
+                            'bg-gray-500/10 text-gray-400'
+                          }`}>
+                            {doc.status}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 text-gray-400">
+                          {doc.uploadedBy?.name} ({doc.uploadedBy?.email})
+                        </td>
+                        <td className="px-6 py-4 text-gray-400">
+                          {doc.sharedWith && doc.sharedWith.length > 0 
+                            ? doc.sharedWith.map(user => (
+                                <div key={user.id} className="whitespace-nowrap">
+                                  {user.name} ({user.email})
+                                </div>
+                              ))
+                            : 'None'}
+                        </td>
+                        <td className="px-6 py-4 text-gray-400">
+                          {new Date(doc.createdAt).toLocaleString()}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'users' && (
+            <>
+              <div className="bg-white/5 backdrop-blur-lg rounded-xl p-6 mb-6">
+                <h2 className="text-xl font-bold text-white mb-4">Create New User</h2>
+                <form onSubmit={handleCreateUser} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                  <input
+                    type="text"
+                    placeholder="Name"
+                    value={newUser.name}
+                    onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
+                    className="bg-white/5 border border-gray-700 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
+                    required
+                  />
+                  <input
+                    type="email"
+                    placeholder="Email"
+                    value={newUser.email}
+                    onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
+                    className="bg-white/5 border border-gray-700 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
+                    required
+                  />
+                  <input
+                    type="password"
+                    placeholder="Password"
+                    value={newUser.password}
+                    onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
+                    className="bg-white/5 border border-gray-700 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
+                    required
+                  />
+                  <div className="flex items-center space-x-2">
+                    <input
+                      type="checkbox"
+                      id="isAdmin"
+                      checked={newUser.isAdmin}
+                      onChange={(e) => setNewUser({ ...newUser, isAdmin: e.target.checked })}
+                      className="rounded border-gray-700 bg-white/5 text-blue-500 focus:ring-blue-500"
+                    />
+                    <label htmlFor="isAdmin" className="text-gray-200">Is Admin</label>
+                  </div>
+                  <button
+                    type="submit"
+                    className="flex items-center justify-center space-x-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
+                  >
+                    <FiUserPlus className="w-4 h-4" />
+                    <span>Create User</span>
+                  </button>
+                </form>
+              </div>
+
+              <div className="bg-white/5 backdrop-blur-lg rounded-xl overflow-hidden">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b border-gray-700">
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Name</th>
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Email</th>
+                      <th className="px-6 py-4 text-left text-sm text-gray-400">Role</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {users.map((user) => (
+                      <tr key={user.id} className="border-b border-gray-700/50 hover:bg-white/5">
+                        <td className="px-6 py-4 text-gray-200">{user.name}</td>
+                        <td className="px-6 py-4 text-gray-200">{user.email}</td>
+                        <td className="px-6 py-4">
+                          <span className={`px-3 py-1 rounded-full text-xs font-medium
+                            ${user.isAdmin ? 'bg-purple-500/10 text-purple-400' : 'bg-gray-500/10 text-gray-400'}`}>
+                            {user.isAdmin ? 'Admin' : 'User'}
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </>
+          )}
+
+          {activeTab === 'upload' && (
+            <div className="bg-white/5 backdrop-blur-lg rounded-xl p-6">
+              <DocumentUpload />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AdminPanel;
--- a/frontend/src/components/clients/clients.jsx
+++ b/frontend/src/components/clients/clients.jsx
@ -0,0 +1,93 @@
+import { useState, useEffect } from 'react'
+import { useAuth } from '../../hooks/useAuth';
+import { getSharedDocuments } from '../../services/api';
+
+function Clients() {
+  const [documents, setDocuments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const { user } = useAuth();
+
+  useEffect(() => {
+    const fetchDocuments = async () => {
+      try {
+        const response = await getSharedDocuments(user.id);
+        setDocuments(response.data);
+      } catch (err) {
+        setError('Failed to fetch documents');
+        console.error('Error fetching documents:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (user) {
+      fetchDocuments();
+    }
+  }, [user]);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-screen">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center text-red-600 p-4">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold mb-6">Your Documents</h1>
+      
+      {documents.length === 0 ? (
+        <p className="text-gray-600">No documents have been shared with you yet.</p>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {documents.map((doc) => (
+            <div 
+              key={doc.id} 
+              className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow"
+            >
+              <div className="flex justify-between items-start mb-4">
+                <h2 className="text-xl font-semibold">{doc.title}</h2>
+                <span className={`px-2 py-1 text-xs rounded-full ${
+                  doc.status === 'completed' 
+                    ? 'bg-green-100 text-green-800' 
+                    : 'bg-yellow-100 text-yellow-800'
+                }`}>
+                  {doc.status}
+                </span>
+              </div>
+              
+              <div className="text-sm text-gray-600">
+                <p>Created: {new Date(doc.createdAt).toLocaleDateString()}</p>
+                {doc.content && (
+                  <p className="mt-2">{doc.content}</p>
+                )}
+              </div>
+              
+              <div className="mt-4 flex justify-end">
+                <button 
+                  onClick={() => window.open(`/api/documents/download/${doc.s3Key}`, '_blank')}
+                  className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors"
+                >
+                  Download
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Clients;
+
--- a/frontend/src/components/consalting/consulting.jsx
+++ b/frontend/src/components/consalting/consulting.jsx
@ -0,0 +1,27 @@
+import { useEffect } from 'react'
+
+export default function Consulting() {
+    useEffect(() => {
+        window.scrollTo({ top: 0, behavior: "smooth" })
+    }, [])
+    return (
+        <>
+            <div className="constaltingContainer">
+                <h1 className="text-4xl text-center mt-32 font-bold tracking-tight text-gray-900 sm:text-3xl">Преглед на консултантски услуги</h1>
+                <div className="anotherContainer text-center">
+                    <p className="tracking-tight text-gray-900 text-center sm:text-3xl mt-16">
+                        ИМК нуди низа консултантски услуги, предлагајќи комплексен пристап за поддршка на различни аспекти на индустриските операции. Услугите вклучуваат изработка на интегрирани дозволи, проценки на влијанието врз животната средина, проектна документација и студии за финансиска исплатливост на индустриските процеси.
+
+                    </p>
+                    <ul className="tracking-tight text-gray-900  sm:text-2xl mt-16 text-center md:text-justify">
+                        <li><strong>Интегрирани Дозволи (А и Б):</strong> Компанијата нуди услуги поврзани со изработка на интегрирани дозволи. Ова покажува експертиза во справувањето со регулаторните рамки и обезбедување на согласност со лиценцните барања. Интегрираните дозволи се суштински за индустриските операции, што укажува на фокус на оптимизација на правните и регулаторни процеси.</li>
+                        <li><strong>Проценка на Влијанието врз Животната Средина:</strong> Консултантот обезбедува услуги за проценка на влијанието врз животната средина. Ова вклучува систематска евалуација на тоа како индустриските активности можат да влијаат на околната средина. Таквите проценки се суштински за обезбедување на одржливи практики и согласност со еколошките регулативи.</li>
+                        <li><strong>Проектна Документација за Производствени Објекти:</strong> ИМК нуди изработка на проектна документација специфично дизајнирана за производствени објекти, земајки ги предвид различните аспекти на дизајнирање и оптимизација на индустриските операции.</li>
+                        <li><strong>Проекти за Финасиска Ефикасност за Производствени Објекти:</strong> ИМК нуди експертиза во креирање на  ценовна ефикасност за производствени капацитети. Ова вклучува анализа на постоечките процеси и идентификација на можностите за оптимизација за подобрување на продуктивноста и намалување на оперативните трошоци. Фокусот на ценовната ефикасност покажува посветеност кон подобрување на општата финансиска перформанса на индустриските операции.</li>
+                        <li><strong>Елаборати за Финансиска Исплатливост на Производствени Процеси:</strong> ИМК изработува елаборати (детални извештаи) фокусирани на проценка на финансиската исплатливост на производствените процеси. Тие ги вклучуваат економските можности и оправданоста/одржливоста на проектираните или постоечките производствени процеси.</li>
+                    </ul>
+                </div>
+            </div>
+        </>
+    )
+}
--- a/frontend/src/components/dashboard/Dashboard.jsx
+++ b/frontend/src/components/dashboard/Dashboard.jsx
@ -0,0 +1,154 @@
+import { useState, useEffect } from 'react';
+import { useAuth } from '../../hooks/useAuth';
+import { getSharedDocuments } from '../../services/api';
+import { format } from 'date-fns';
+import { FiFolder, FiFile, FiDownload, FiChevronRight, FiLoader } from 'react-icons/fi';
+import { downloadDocument } from '../../services/api';
+
+function Dashboard() {
+  const [documents, setDocuments] = useState({});
+  const [expandedFolders, setExpandedFolders] = useState({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const { user } = useAuth();
+
+  useEffect(() => {
+    const fetchDocuments = async () => {
+      try {
+        if (!user?.id) return;
+        
+        const response = await getSharedDocuments(user.id);
+        // Group the documents by company and date
+        const groupedDocs = groupDocumentsByCompanyAndDate(response.data);
+        setDocuments(groupedDocs);
+      } catch (err) {
+        console.error('Error fetching documents:', err);
+        setError('Failed to fetch documents');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchDocuments();
+  }, [user]);
+
+  const groupDocumentsByCompanyAndDate = (docs) => {
+    if (!Array.isArray(docs)) {
+      console.error('Expected array of documents, received:', docs);
+      return {};
+    }
+
+    return docs.reduce((acc, doc) => {
+      const folderName = `${doc.sharedWith?.name || 'Unknown'}-${format(new Date(doc.createdAt), 'yyyy-MM-dd')}`;
+      if (!acc[folderName]) {
+        acc[folderName] = [];
+      }
+      acc[folderName].push(doc);
+      return acc;
+    }, {});
+  };
+
+  const handleDownload = async (s3Key, fileName) => {
+    try {
+      await downloadDocument(s3Key);
+    } catch (err) {
+      console.error('Error downloading document:', err);
+      alert('Failed to download document. Please try again.');
+    }
+  };
+
+  const toggleFolder = (folderName) => {
+    setExpandedFolders(prev => ({
+      ...prev,
+      [folderName]: !prev[folderName]
+    }));
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-900">
+        <div className="flex items-center space-x-3 text-blue-500">
+          <FiLoader className="w-6 h-6 animate-spin" />
+          <span className="text-lg font-medium">Loading documents...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-900">
+        <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-200">
+          {error}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 p-6">
+      <div className="max-w-7xl mx-auto">
+        <header className="mb-8 mt-20">
+          <h1 className="text-3xl font-bold text-white mb-2">Your Documents</h1>
+          <p className="text-gray-400">Access and manage your shared documents</p>
+        </header>
+
+        <div className="grid gap-6">
+          {Object.entries(documents).length > 0 ? (
+            Object.entries(documents).map(([folderName, docs]) => (
+              <div
+                key={folderName}
+                className="bg-white/5 backdrop-blur-lg rounded-xl overflow-hidden transition-all duration-200 hover:bg-white/10"
+              >
+                <button
+                  onClick={() => toggleFolder(folderName)}
+                  className="w-full px-6 py-4 flex items-center justify-between text-white hover:bg-white/5 transition-colors"
+                >
+                  <div className="flex items-center space-x-3">
+                    <FiFolder className="w-5 h-5 text-blue-400" />
+                    <span className="font-medium">{folderName}</span>
+                    <span className="text-sm text-gray-400">({docs.length} files)</span>
+                  </div>
+                  <FiChevronRight
+                    className={`w-5 h-5 transition-transform duration-200 ${
+                      expandedFolders[folderName] ? 'rotate-90' : ''
+                    }`}
+                  />
+                </button>
+
+                {expandedFolders[folderName] && (
+                  <div className="border-t border-gray-700">
+                    {docs.map((doc) => (
+                      <div
+                        key={doc.id}
+                        className="px-6 py-3 flex items-center justify-between hover:bg-white/5 transition-colors"
+                      >
+                        <div className="flex items-center space-x-3">
+                          <FiFile className="w-4 h-4 text-gray-400" />
+                          <span className="text-gray-200">{doc.title}</span>
+                        </div>
+                        <button
+                          onClick={() => handleDownload(doc.s3Key)}
+                          className="p-2 text-gray-400 hover:text-blue-400 rounded-lg hover:bg-blue-500/10 transition-colors"
+                          title="Download document"
+                        >
+                          <FiDownload className="w-4 h-4" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))
+          ) : (
+            <div className="text-center py-12">
+              <p className="text-gray-400">No documents available</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Dashboard;
--- a/frontend/src/components/documentUpload/DocumentUpload.jsx
+++ b/frontend/src/components/documentUpload/DocumentUpload.jsx
@ -0,0 +1,174 @@
+import { useState, useEffect } from 'react';
+import { uploadDocument, getAllUsers, getUserInfo } from '../../services/api';
+
+function DocumentUpload() {
+  const [file, setFile] = useState(null);
+  const [title, setTitle] = useState('');
+  const [selectedUsers, setSelectedUsers] = useState([]);
+  const [availableUsers, setAvailableUsers] = useState([]);
+  const [status, setStatus] = useState('idle'); // idle, uploading, completed, failed
+  const [errorMessage, setErrorMessage] = useState('');
+  const [currentUser, setCurrentUser] = useState(null);
+
+  useEffect(() => {
+    fetchUsers();
+    getCurrentUser();
+  }, []);
+
+  const fetchUsers = async () => {
+    try {
+      const response = await getAllUsers();
+      setAvailableUsers(response.data.filter(user => !user.isAdmin));
+    } catch (error) {
+      setErrorMessage('Failed to load users');
+    }
+  };
+
+  const getCurrentUser = async () => {
+    try {
+      const response = await getUserInfo();
+      console.log('Current user data:', response.data); // Debug log
+      setCurrentUser(response.data);
+    } catch (error) {
+      console.error('Failed to get current user:', error);
+      setErrorMessage('Failed to get current user info');
+    }
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    
+    if (!file || !title || selectedUsers.length === 0 || !currentUser) {
+      setErrorMessage('Please provide all required information');
+      return;
+    }
+  
+    setStatus('uploading');
+    setErrorMessage('');
+  
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('title', title);
+    formData.append('sharedWithId', selectedUsers[0]); // Remove toString()
+    formData.append('uploadedById', currentUser.id); // Remove toString()
+  
+    // Debug log
+    console.log('Form Data Contents:', {
+      file: formData.get('file'),
+      title: formData.get('title'),
+      sharedWithId: formData.get('sharedWithId'),
+      uploadedById: formData.get('uploadedById')
+    });
+  
+    try {
+      const response = await uploadDocument(formData);
+      console.log('Upload response:', response);
+      
+      setStatus('completed');
+      setTitle('');
+      setFile(null);
+      setSelectedUsers([]);
+      event.target.reset();
+    } catch (error) {
+      console.error('Upload error:', error);
+      setStatus('failed');
+      setErrorMessage(error.response?.data?.message || 'Upload failed');
+    }
+  };
+
+  function handleFileChange(e) {
+    setFile(e.target.files[0]);
+  }
+
+  const handleUserSelect = (e) => {
+    const values = Array.from(e.target.selectedOptions, option => option.value);
+    console.log('Selected user values:', values);
+    setSelectedUsers(values);
+  };
+
+  return (
+    <div className="max-w-md mx-auto mt-8 p-6 bg-white rounded-lg shadow-md">
+      <h2 className="text-2xl font-bold mb-6">Upload Document</h2>
+      
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">
+            Document Title
+          </label>
+          <input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            required
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">
+            File
+          </label>
+          <input
+            type="file"
+            onChange={handleFileChange}
+            className="mt-1 block w-full"
+            required
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">
+            Share with Users
+          </label>
+          <select
+            multiple
+            value={selectedUsers}
+            onChange={handleUserSelect}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            required
+          >
+            {availableUsers.map(user => (
+              <option key={user.id} value={user.id}>
+                {user.name} ({user.email})
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {errorMessage && (
+          <div className="text-red-500 text-sm mt-2">
+            {errorMessage}
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={status === 'uploading'}
+          className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white 
+            ${status === 'uploading' 
+              ? 'bg-gray-400 cursor-not-allowed' 
+              : 'bg-indigo-600 hover:bg-indigo-700'
+            }`}
+        >
+          {status === 'uploading' ? (
+            <>
+              <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              Uploading...
+            </>
+          ) : 'Upload Document'}
+        </button>
+
+        {status === 'completed' && (
+          <div className="text-green-500 text-sm mt-2">
+            Document uploaded successfully!
+          </div>
+        )}
+      </form>
+    </div>
+  );
+}
+
+export default DocumentUpload;
--- a/frontend/src/components/footer/footer.css
+++ b/frontend/src/components/footer/footer.css
@ -0,0 +1,4 @@
+footer {
+    position: relative;
+    bottom: 0;
+}
--- a/frontend/src/components/footer/footer.jsx
+++ b/frontend/src/components/footer/footer.jsx
@ -0,0 +1,148 @@
+import { NavLink } from 'react-router-dom'
+import './footer.css'
+
+const Footer = () => {
+    return (
+        <>
+            <footer
+                className="text-center text-white bg-gradient-to-b from-cyan-900 to-cyan-800 lg:text-left">
+
+
+                <div className="mx-6 py-10 text-center md:text-left">
+                    <div className="grid-1 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+                        <div className="">
+                            <h6
+                                className="mb-4 flex items-center justify-center font-semibold uppercase md:justify-start">
+
+                                Испитување материјали и консултантство
+                            </h6>
+                            <p>
+                                Вашиот партнер во контролата на безбедно градење и квалитетно живеење
+                            </p>
+                        </div>
+                        <div className="">
+                            <h6
+                                className="mb-4 flex justify-center font-semibold uppercase md:justify-start">
+                                Услуги
+                            </h6>
+                            <NavLink to={'lab'}>
+                                <p className="mb-4">
+                                    <a href="#!" className="text-neutral-600 dark:text-neutral-200"
+                                    >Лабораториски анализи</a
+                                    >
+                                </p>
+                            </NavLink>
+                            <NavLink to={'ultrasound'}>
+                                <p className="mb-4">
+                                    <a href="#!" className="text-neutral-600 dark:text-neutral-200"
+                                    >Испитување со ултразвук</a
+                                    >
+                                </p>
+                            </NavLink>
+                            <NavLink to={'consulting'}>
+                                <p className="mb-4">
+                                    <a href="#!" className="text-neutral-600 dark:text-neutral-200"
+                                    >Консултатски услуги</a
+                                    >
+                                </p>
+                            </NavLink>
+                        </div>
+                        <div className="">
+                            <h6
+                                className="mb-4 flex justify-center font-semibold uppercase md:justify-start">
+                                Корисни линкови
+                            </h6>
+                            <p className="mb-4">
+                                <a href="#!" className="text-neutral-600 dark:text-neutral-200"
+                                >Безбедно градење</a
+                                >
+                            </p>
+                            <p className="mb-4">
+                                <a href="#!" className="text-neutral-600 dark:text-neutral-200"
+                                >Контрола на квалитет</a
+                                >
+                            </p>
+                            <NavLink to="/certificates" >
+                                <p className="mb-4">
+                                    <a>Сертификати</a>
+                                </p>
+                            </NavLink>
+
+                        </div>
+                        <div>
+                            <h6
+                                className="mb-4 flex justify-center font-semibold uppercase md:justify-start">
+                                Контакт
+                            </h6>
+                            <p className="mb-4 flex items-center justify-center md:justify-start">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 24 24"
+                                    fill="currentColor"
+                                    className="mr-3 h-5 w-5">
+                                    <path
+                                        d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" />
+                                    <path
+                                        d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" />
+                                </svg>
+                                16-та Македонска бригада бр. 18
+                            </p>
+                            <p className="mb-4 flex items-center justify-center md:justify-start">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 24 24"
+                                    fill="currentColor"
+                                    className="mr-3 h-5 w-5">
+                                    <path
+                                        d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
+                                    <path
+                                        d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
+                                </svg>
+                                stanko@imk.mk
+                            </p>
+                            <p className="mb-4 flex items-center justify-center md:justify-start">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 24 24"
+                                    fill="currentColor"
+                                    className="mr-3 h-5 w-5">
+                                    <path
+                                        d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
+                                    <path
+                                        d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
+                                </svg>
+                                info.imkmk@gmail.com
+                            </p>
+                            <p className="mb-4 flex items-center justify-center md:justify-start">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 24 24"
+                                    fill="currentColor"
+                                    className="mr-3 h-5 w-5">
+                                    <path
+                                        fillRule="evenodd"
+                                        d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z"
+                                        clipRule="evenodd" />
+                                </svg>
+                                + 389 70 279 877
+                            </p>
+
+                        </div>
+                    </div>
+                </div>
+
+                <div className="bg-neutral-200 p-6 text-center dark:bg-neutral-700">
+                    <span>© 2023 Copyright:</span>
+                    <a
+                        className="font-semibold text-neutral-600 dark:text-neutral-400"
+                        href="https://tailwind-elements.com/"
+                    > IMK</a
+                    >
+                </div>
+            </footer >
+
+        </>
+    )
+}
+
+export default Footer
--- a/frontend/src/components/gallery/Gallery.jsx
+++ b/frontend/src/components/gallery/Gallery.jsx
@ -0,0 +1,146 @@
+import React from 'react'
+import './gallery.css'
+import { useEffect, useState } from 'react';
+// import { FiZoomIn } from 'react-icons/fi';
+import { motion } from 'framer-motion';
+
+function Gallery() {
+    const [selectedImage, setSelectedImage] = useState(null);
+    const [loading, setLoading] = useState(true);
+
+    const images = [
+        { id: 1, src: "1.jpg", alt: "Laboratory Equipment 1", category: "Lab" },
+        { id: 2, src: "2.jpg", alt: "Laboratory Equipment 2", category: "Lab" },
+        { id: 3, src: "3.jpg", alt: "Laboratory Equipment 3", category: "Lab" },
+        { id: 4, src: "4.jpg", alt: "Testing Process 1", category: "Testing" },
+        { id: 5, src: "5.jpg", alt: "Testing Process 2", category: "Testing" },
+        { id: 6, src: "6.jpg", alt: "Testing Process 3", category: "Testing" },
+        { id: 8, src: "8.jpg", alt: "Results 1", category: "Results" },
+        { id: 9, src: "9.jpg", alt: "Results 2", category: "Results" },
+        { id: 10, src: "10.jpg", alt: "Results 3", category: "Results" }
+    ];
+
+    useEffect(() => {
+        window.scrollTo({ top: 0, behavior: "smooth" })
+        // Simulate images loading
+        const loadImages = async () => {
+            await Promise.all(
+                images.map(img => {
+                    return new Promise((resolve) => {
+                        const image = new Image();
+                        image.src = img.src;
+                        image.onload = resolve;
+                    });
+                })
+            );
+            setLoading(false);
+        };
+        loadImages();
+    }, [])
+
+    const containerVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.1
+            }
+        }
+    };
+
+    const itemVariants = {
+        hidden: { opacity: 0, y: 20 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: {
+                duration: 0.5
+            }
+        }
+    };
+
+    return (
+        <div className="min-h-screen bg-gradient-to-b from-cyan-900 to-cyan-800 py-20">
+            {/* Hero Section */}
+            <div className="container mx-auto px-4 mb-16 my-20">
+                <div className="text-center">
+                    <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
+                        Нашата Галерија
+                    </h1>
+                    <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+                        Погледнете ја нашата опрема и работен процес преку слики
+                    </p>
+                </div>
+            </div>
+
+            {loading ? (
+                <div className="flex justify-center items-center h-64">
+                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+                </div>
+            ) : (
+                <motion.div 
+                    className="container mx-auto px-4"
+                    variants={containerVariants}
+                    initial="hidden"
+                    animate="visible"
+                >
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                        {images.map((image) => (
+                            <motion.div
+                                key={image.id}
+                                className=""
+                                variants={itemVariants}
+                            >
+                                <div className="aspect-w-16 aspect-h-12 rounded-xl overflow-hidden bg-white/10 backdrop-blur-lg">
+                                    <img
+                                        src={image.src}
+                                        alt={image.alt}
+                                        className="w-full h-full object-cover transition-transform duration-300"
+                                    />
+                                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                                        <div className="absolute bottom-0 left-0 right-0 p-4">
+                                            <p className="text-white text-sm">{image.alt}</p>
+                                            <span className="text-blue-400 text-xs">{image.category}</span>
+                                        </div>
+                                    </div>
+                                    <button
+                                        onClick={() => setSelectedImage(image)}
+                                        className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-blue-500 p-3 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                                    >
+                                        {/* <FiZoomIn className="w-6 h-6 text-white" /> */}
+                                    </button>
+                                </div>
+                            </motion.div>
+                        ))}
+                    </div>
+                </motion.div>
+            )}
+
+            {/* Image Modal */}
+            {selectedImage && (
+                <div 
+                    className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4"
+                    onClick={() => setSelectedImage(null)}
+                >
+                    <div className="relative max-w-4xl w-full">
+                        <img
+                            src={selectedImage.src}
+                            alt={selectedImage.alt}
+                            className="w-full h-auto rounded-xl"
+                        />
+                        <button
+                            onClick={() => setSelectedImage(null)}
+                            className="absolute top-4 right-4 text-white hover:text-blue-400"
+                        >
+                            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default Gallery
--- a/frontend/src/components/gallery/gallery.css
+++ b/frontend/src/components/gallery/gallery.css
@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.aspect-w-16 {
+  position: relative;
+  padding-bottom: 75%;
+}
+
+.aspect-w-16 > * {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
--- a/frontend/src/components/lab/lab.jsx
+++ b/frontend/src/components/lab/lab.jsx
@ -0,0 +1,122 @@
+import { useEffect } from 'react';
+
+export default function Lab() {
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: "smooth" })
+  }, [])
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto px-4 py-12">
+        {/* Header */}
+        <div className="mt-8 mb-16 text-center">
+          <h1 className="text-3xl md:text-4xl font-semibold capitalize text-gray-800 mb-4">
+            во нашата лабораторија се вршат
+          </h1>
+          <div className="w-24 h-1 bg-blue-500 mx-auto"></div>
+        </div>
+
+        {/* Main Content */}
+        <div className="space-y-16">
+          {/* Concrete Testing Section */}
+          <div className="flex flex-col md:flex-row items-center gap-8 md:gap-16">
+            <div className="w-full md:w-1/2 p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
+              <h2 className="text-2xl font-bold text-gray-800 mb-4">
+                Испитувањето на бетон
+              </h2>
+              <div className="space-y-4 text-gray-600">
+                <p>
+                  е важен процес кој се користи за да се оцени квалитетот и издржливоста на бетонски конструкции.
+                </p>
+                <p>
+                  Испитувањето на бетонот е неопходен процес за осигурување на квалитет и безбедност на градежните проекти и инфраструктурата воопшто. 
+                  Тоа помага во отстранивање на недостатоците и намалување на ризиците од евентуални пропаднувања на конструкциите.
+                </p>
+              </div>
+            </div>
+            <div className="w-full md:w-1/2">
+              <img 
+                src="/kocki.webp" 
+                alt="Испитување на бетон" 
+                loading="lazy"
+                className="rounded-xl shadow-lg w-full h-[400px] object-cover hover:scale-105 transition-transform duration-300" 
+              />
+            </div>
+          </div>
+
+          {/* Ore and Metal Testing Section */}
+          <div className="flex flex-col md:flex-row-reverse items-center gap-8 md:gap-16">
+            <div className="w-full md:w-1/2 p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
+              <h2 className="text-2xl font-bold text-gray-800 mb-4">
+                Испитувањето на руди, метали и троски
+              </h2>
+              <div className="space-y-4 text-gray-600">
+                <p>
+                  е важен процес во областа на геолошкото и металуршко инженерство, со цел да се анализираат и одредат својствата и составот на суровините и производите.
+                </p>
+                <p>
+                  Овие испитувања се изведуваат за да се осигура квалитетот и спецификациите на материјалите, како и за да се обезбеди безбедно и ефикасно користење и обработка на руди, метали и троски во различни индустрии и апликации.
+                </p>
+              </div>
+            </div>
+            <div className="w-full md:w-1/2">
+              <img 
+                src="/lab.webp" 
+                alt="Испитување на руди и метали" 
+                loading="lazy"
+                className="rounded-xl shadow-lg w-full h-[400px] object-cover hover:scale-105 transition-transform duration-300" 
+              />
+            </div>
+          </div>
+
+          {/* Steel Testing Section */}
+          <div className="flex flex-col md:flex-row items-center gap-8 md:gap-16">
+            <div className="w-full md:w-1/2 p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
+              <h2 className="text-2xl font-bold text-gray-800 mb-4">
+                Испитувањето на челик
+              </h2>
+              <div className="space-y-4 text-gray-600">
+                <p>
+                  е важен процес за одредување на квалитетот, издржливоста и други механички својства на челикот, кој се користи во разни индустрии и конструкции.
+                </p>
+                <p>
+                  Испитувањето на челик е неопходен процес за да се обезбеди квалитетот и безбедноста на производите и конструкциите кои го користат, како и за да се уверите дека челикот одговара на спецификациите и стандардите.
+                </p>
+              </div>
+            </div>
+            <div className="w-full md:w-1/2">
+              <img 
+                src="/armatura.jpg" 
+                alt="Испитување на челик" 
+                loading="lazy"
+                className="rounded-xl shadow-lg w-full h-[400px] object-cover hover:scale-105 transition-transform duration-300" 
+              />
+            </div>
+          </div>
+
+          {/* Laboratory Extraction Section */}
+          <div className="flex flex-col md:flex-row-reverse items-center gap-8 md:gap-16">
+            <div className="w-full md:w-1/2 p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
+              <h2 className="text-2xl font-bold text-gray-800 mb-4">
+                Лабораториската екстракција
+              </h2>
+              <div className="space-y-4 text-gray-600">
+                <p>
+                  на метали или неметали од руди и троски е процес кој се користи за да се изолираат и оддели материјалите од суровините или отпадните производи, како што се рудите или троските, со цел да се добие чист метал или неметал.
+                </p>
+              </div>
+            </div>
+            <div className="w-full md:w-1/2">
+              <img 
+                src="/geotehnika.webp" 
+                alt="Лабораториска екстракција" 
+                loading="lazy"
+                className="rounded-xl shadow-lg w-full h-[400px] object-cover hover:scale-105 transition-transform duration-300" 
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/login/login.jsx
+++ b/frontend/src/components/login/login.jsx
@ -0,0 +1,168 @@
+// import { useState } from 'react';
+// import { useAuth } from '../../hooks/useAuth';
+// import { useNavigate } from 'react-router-dom';
+
+// const Login = () => {
+//   const [username, setUsername] = useState(''); // Changed from email to username
+//   const [password, setPassword] = useState('');
+//   const [error, setError] = useState('');
+//   const { login } = useAuth();
+//   const navigate = useNavigate();
+
+//   const handleSubmit = async (e) => {
+//     e.preventDefault();
+//     setError('');
+    
+//     try {
+//       const userData = await login(username, password);
+//       console.log('Login result:', userData);
+//       if (userData?.isAdmin) { 
+//         navigate('/admin');
+//       } else {
+//         navigate('/dashboard');
+//       }
+//     } catch (err) {
+//       setError('Invalid credentials');
+//     }
+//   };
+
+//   return (
+//     <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+//       <div className="max-w-md w-full space-y-8">
+//         <div>
+//           <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+//             Sign in to your account
+//           </h2>
+//         </div>
+//         <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+//           {error && (
+//             <div className="text-red-500 text-center text-sm">
+//               {error}
+//             </div>
+//           )}
+//           <div className="rounded-md shadow-sm -space-y-px">
+//             <div>
+//               <input
+//                 type="text"
+//                 required
+//                 className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+//                 placeholder="Username"
+//                 value={username}
+//                 onChange={(e) => setUsername(e.target.value)}
+//               />
+//             </div>
+//             <div>
+//               <input
+//                 type="password"
+//                 required
+//                 className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+//                 placeholder="Password"
+//                 value={password}
+//                 onChange={(e) => setPassword(e.target.value)}
+//               />
+//             </div>
+//           </div>
+
+//           <div>
+//             <button
+//               type="submit"
+//               className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+//             >
+//               Sign in
+//             </button>
+//           </div>
+//         </form>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default Login;
+import { useState } from 'react';
+import { useAuth } from '../../hooks/useAuth';
+import { useNavigate } from 'react-router-dom';
+import { FiUser, FiLock } from 'react-icons/fi'; // Import icons
+
+const Login = () => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    
+    try {
+      const userData = await login(username, password);
+      if (userData?.isAdmin) {
+        navigate('/admin');
+      } else {
+        navigate('/dashboard');
+      }
+    } catch (err) {
+      setError('Invalid credentials');
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 to-gray-800">
+      <div className="w-full max-w-md px-8 py-10 bg-white/5 backdrop-blur-lg rounded-2xl shadow-2xl">
+        <div className="mb-10 text-center">
+          <h1 className="text-3xl font-bold text-white mb-2">Welcome Back</h1>
+          <p className="text-gray-400">Please sign in to continue</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {error && (
+            <div className="p-3 text-sm text-red-200 bg-red-500/10 border border-red-500/20 rounded-lg">
+              {error}
+            </div>
+          )}
+
+          <div className="space-y-4">
+            <div className="relative">
+              <FiUser className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+              <input
+                type="text"
+                required
+                className="w-full px-10 py-3 bg-white/5 border border-gray-700 rounded-lg focus:outline-none focus:border-blue-500 text-white placeholder-gray-400 transition-colors"
+                placeholder="Username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+            </div>
+
+            <div className="relative">
+              <FiLock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+              <input
+                type="password"
+                required
+                className="w-full px-10 py-3 bg-white/5 border border-gray-700 rounded-lg focus:outline-none focus:border-blue-500 text-white placeholder-gray-400 transition-colors"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            className="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200 flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+          >
+            Sign In
+          </button>
+
+          <div className="mt-6 text-center">
+            <p className="text-sm text-gray-400">
+              Need help? Contact your administrator
+            </p>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
--- a/frontend/src/components/navbar/Navbar.jsx
+++ b/frontend/src/components/navbar/Navbar.jsx
@ -0,0 +1,133 @@
+import { useState } from "react";
+import { Dialog } from "@headlessui/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import { NavLink } from "react-router-dom";
+
+const navigation = [
+  { name: "Дома", href: "/" },
+  { name: "За нас", href: "/about" },
+  { name: "Галерија", href: "/gallery" },
+  { name: "Контакт", href: "/contact" },
+  // { name: "Клиенти", href: "/clients" },
+  { name: "Админ", href: "/admin" },
+  { name: "Логин", href: "/login" },
+];
+
+export default function Navbar() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <div className="absolute w-full z-50 py-10">
+      <header className="relative bg-transparent">
+        <nav
+          className="container mx-auto flex items-center justify-between p-6 lg:px-8"
+          aria-label="Global"
+        >
+          {/* Logo */}
+          <div className="flex lg:flex-1">
+            <a href="/" className="flex items-center -m-1.5 p-1.5">
+              <img
+                className="h-12 w-auto hover:scale-105 transition-transform duration-300"
+                src="/imklogorgb.png"
+                alt="IMK logo"
+              />
+            </a>
+          </div>
+
+          {/* Mobile menu button */}
+          <div className="flex lg:hidden">
+            <button
+              type="button"
+              className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-white hover:bg-white/10 transition-colors duration-300"
+              onClick={() => setMobileMenuOpen(true)}
+            >
+              <span className="sr-only">Open main menu</span>
+              <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+            </button>
+          </div>
+
+          {/* Desktop navigation */}
+          <div className="hidden lg:flex lg:gap-x-12">
+            {navigation.map((item) => (
+              <NavLink
+                key={item.name}
+                to={item.href}
+                className={({ isActive }) =>
+                  `text-base font-semibold leading-6 transition-all duration-300
+                  ${isActive 
+                    ? 'text-white border-b-2 border-white' 
+                    : 'text-gray-200 hover:text-white hover:border-b-2 hover:border-white/50'
+                  }`
+                }
+              >
+                {item.name}
+              </NavLink>
+            ))}
+          </div>
+
+          {/* TUF Logo */}
+          <div className="hidden lg:flex lg:flex-1 lg:justify-end">
+            <a href="/" className="flex items-center -m-1.5 p-1.5">
+              <img
+                className="h-12 w-auto hover:scale-105 transition-transform duration-300"
+                src="/tuf.png"
+                alt="TUF logo"
+              />
+            </a>
+          </div>
+        </nav>
+
+        {/* Mobile menu */}
+        <Dialog
+          as="div"
+          className="lg:hidden"
+          open={mobileMenuOpen}
+          onClose={setMobileMenuOpen}
+        >
+          <div className="fixed inset-0 z-50" />
+          <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gradient-to-b from-blue-900 to-blue-800 px-6 py-6 sm:max-w-sm">
+            <div className="flex items-center justify-between">
+              <a href="/" className="-m-1.5 p-1.5">
+                <img
+                  className="h-8 w-auto"
+                  src="/imklogorgb.png"
+                  alt="IMK logo"
+                />
+              </a>
+              <button
+                type="button"
+                className="-m-2.5 rounded-md p-2.5 text-white hover:bg-white/10 transition-colors duration-300"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                <span className="sr-only">Close menu</span>
+                <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+              </button>
+            </div>
+            <div className="mt-6 flow-root">
+              <div className="-my-6 divide-y divide-white/10">
+                <div className="space-y-2 py-6">
+                  {navigation.map((item) => (
+                    <NavLink
+                      key={item.name}
+                      to={item.href}
+                      className={({ isActive }) =>
+                        `-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 transition-colors duration-300
+                        ${isActive
+                          ? 'text-white bg-white/10'
+                          : 'text-gray-200 hover:bg-white/5 hover:text-white'
+                        }`
+                      }
+                      onClick={() => setMobileMenuOpen(false)}
+                    >
+                      {item.name}
+                    </NavLink>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </Dialog.Panel>
+        </Dialog>
+      </header>
+    </div>
+  );
+}
--- a/frontend/src/components/protectedRoute/ProtectedRoute.jsx
+++ b/frontend/src/components/protectedRoute/ProtectedRoute.jsx
@ -0,0 +1,22 @@
+import { useAuth } from '../../hooks/useAuth';
+import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+
+const ProtectedRoute = ({ children }) => {
+  const { user, isLoading } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!isLoading && !user) {
+      navigate('/login');
+    }
+  }, [user, isLoading, navigate]);
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  return user ? children : null;
+};
+
+export default ProtectedRoute;
--- a/frontend/src/components/ultrasound/ultraSound.jsx
+++ b/frontend/src/components/ultrasound/ultraSound.jsx
@ -0,0 +1,15 @@
+import React, { useEffect } from 'react'
+
+export default function UltraSound() {
+    useEffect(() => {
+        window.scrollTo({ top: -100, behavior: "smooth" })
+    }, [])
+
+    return (
+        <>
+            <div className="ultraSoundContainer flex justify-around mt-40">
+                <iframe width="1120" height="630" src="https://www.youtube.com/embed/WGjG8XWS9RQ?si=fE2aL5eZ-5ivuuxV" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+            </div>
+        </>
+    )
+}
--- a/frontend/src/hooks/useAuth.jsx
+++ b/frontend/src/hooks/useAuth.jsx
@ -0,0 +1,85 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+import api from '../services/api';
+
+const AuthContext = createContext(null);
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        const token = localStorage.getItem('token');
+        if (!token) {
+          setIsLoading(false);
+          return;
+        }
+
+        const response = await api.get('/auth/user-info'); // Updated endpoint
+        setUser(response.data);
+      } catch (error) {
+        console.error('Failed to fetch user info:', error);
+        localStorage.removeItem('token');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchUser();
+  }, []);
+  // const login = async (username, password) => {
+  //   try {
+  //     const response = await api.post('/auth/login', { username, password });
+  //     const { access_token, user } = response.data; // Make sure this matches your backend response
+      
+  //     localStorage.setItem('token', access_token);
+  //     setUser(user);
+  //     return user;
+  //   } catch (error) {
+  //     console.error('Login error:', error);
+  //     throw error;
+  //   }
+  // };
+  const login = async (username, password) => {
+    try {
+      const response = await api.post('/auth/login', { username, password });
+      console.log('Login response:', response.data); // Debug log
+      
+      const { access_token } = response.data;
+      localStorage.setItem('token', access_token);
+      
+      // Fetch user info after login
+      const userResponse = await api.get('/auth/user-info');
+      const userData = userResponse.data;
+      
+      setUser(userData);
+      return userData; // Return the user data for redirect logic
+    } catch (error) {
+      console.error('Login error:', error);
+      throw error;
+    }
+  };
+
+
+ 
+
+  const logout = () => {
+    localStorage.removeItem('token');
+    setUser(null);
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, isLoading, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/frontend/src/pages/aboutpage/About.jsx
+++ b/frontend/src/pages/aboutpage/About.jsx
@ -0,0 +1,131 @@
+import { NavLink } from "react-router-dom";
+import { motion } from "framer-motion";
+import { SectionHeader } from "../../shared/SectionHeader";
+import { FiTrendingUp, FiAward, FiCheckCircle } from "react-icons/fi";
+
+const milestones = [
+  { year: "2008", title: "Основање на компанијата" },
+  { year: "2012", title: "Проширување на лабораторијата" },
+  { year: "2015", title: "ISO сертификација" },
+  { year: "2018", title: "Воведување на нови услуги" },
+  { year: "2020", title: "Модернизација на опремата" },
+  { year: "2023", title: "Проширување на тимот" },
+];
+
+export default function About() {
+  return (
+    <div className="isolate bg-graymin-h-screen bg-gradient-to-b from-cyan-900 to-cyan-400">
+      {/* Hero Section */}
+      <div className="relative h-screen overflow-hidden">
+        <div className="absolute inset-0">
+          <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
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 1, ease: "easeInOut" }}
+              className="text-4xl md:text-6xl font-bold text-white mb-6"
+            >
+              За Нас
+            </motion.h1>
+            <motion.p
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 1, delay: 0.2, ease: "easeIn" }}
+              className="text-xl text-gray-200 mb-8"
+            >
+              Повеќе од 15 години искуство во обезбедување квалитет
+            </motion.p>
+          </div>
+        </div>
+      </div>
+
+      {/* Vision & Values Section */}
+      <div className="bg-white py-24">
+        <div className="container bg-gradient-to-b from-cyan-900 to-cyan-400 rounded-xl mx-auto p-20">
+          <SectionHeader
+            title="Нашата Мисија"
+            subtitle="Посветени сме на обезбедување највисок квалитет во нашата работа"
+            className="text-white"
+          />
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+            <div className="bg-white/10 backdrop-blur-lg rounded-xl p-8">
+              <div className="flex items-center mb-4">
+                <FiTrendingUp className="w-6 h-6 text-white mr-3" />
+                <h3 className="text-2xl font-semibold text-white">Визија</h3>
+              </div>
+              <p className="text-white text-xl">
+                Нашата визија е да бидеме водечка компанија во областа на
+                испитување на материјали и контрола на квалитет во Македонија.
+                Стремиме кон постојано унапредување на нашите услуги преку
+                имплементација на најсовремени технологии и методологии. Сакаме
+                да воспоставиме нови стандарди во индустријата и да допринесеме
+                за развојот на градежништвото и инженерството во регионот.
+              </p>
+            </div>
+            <div className="bg-white/10 backdrop-blur-lg rounded-xl p-8">
+              <div className="flex items-center mb-4">
+                <FiAward className="w-6 h-6 text-white mr-3" />
+                <h3 className="text-2xl font-semibold text-white">Вредности</h3>
+              </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>
+        </div>
+      </div>
+
+      {/* CTA Section */}
+      <div className="isolate bg-gray bg-gradient-to-b from-blue-700 to-blue-500 text-white py-24">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-3xl md:text-4xl font-bold mb-8">
+            Започнете го вашиот проект со нас
+          </h2>
+          <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"
+          >
+            Контактирајте нѐ
+          </NavLink>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/cloud/Cloud.jsx
+++ b/frontend/src/pages/cloud/Cloud.jsx
@ -0,0 +1,13 @@
+import React from 'react';
+
+const Cloud = () => {
+    return (
+        <div>
+            <h1>Cloud Page</h1>
+            <link rel="stylesheet" href="https://example.com/styles.css" />
+            {/* Rest of your code */}
+        </div>
+    );
+};
+
+export default Cloud;
--- a/frontend/src/pages/contactpage/Contact.jsx
+++ b/frontend/src/pages/contactpage/Contact.jsx
@ -0,0 +1,115 @@
+
+import { useState } from 'react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { Switch } from '@headlessui/react'
+
+function classNames(...classes) {
+    return classes.filter(Boolean).join(' ')
+}
+
+export default function Contact() {
+    const [agreed, setAgreed] = useState(false)
+
+    return (
+        <div className="isolate bg-gray px-6 bg-gradient-to-b from-cyan-900 to-cyan-800 sm:py-32 lg:px-8">
+            <div
+                aria-hidden="true"
+            >
+
+            </div>
+            <div className="mx-auto max-w-2xl text-center mt-10">
+                <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-3xl">Пишете ни порака | Закажете средба</h2>
+                {/* <p className="mt-2 text-lg leading-8 text-gray-600">
+                    take a wheel or let it slide
+
+                </p> */}
+            </div>
+            <form action="https://formsubmit.co/taratur@gmail.com" 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-white">
+                            Име
+                        </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-white">
+                            Презиме
+                        </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="company" className="block text-sm font-semibold leading-6 text-white">
+                            Компанија
+                        </label>
+                        <div className="mt-2.5">
+                            <input
+                                type="text"
+                                name="company"
+                                id="company"
+                                autoComplete="organization"
+                                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-white">
+                            Мејл
+                        </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-white">
+                            Порака
+                        </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>
+                    <Switch.Group as="div" className="flex gap-x-4 sm:col-span-2">
+                    </Switch.Group>
+                </div>
+                <input type="hidden" name="_next" value="https://imk.mk/"></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>
+    )
+}
--- a/frontend/src/pages/homepage/Home.jsx
+++ b/frontend/src/pages/homepage/Home.jsx
@ -0,0 +1,217 @@
+import { NavLink } from "react-router-dom";
+import { motion } from "framer-motion";
+import { ArrowRightIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
+import { SectionHeader } from "../../shared/SectionHeader";
+const serviceCards = [
+  {
+    title: "Лабораториски услуги",
+    description:
+      "Професионални лабораториски испитувања со најсовремена опрема",
+    image: "labfinal.webp",
+    link: "/lab",
+    services: [
+      "Испитување на бетон",
+      "Геотехнички испитувања",
+      "Испитување на челик",
+      "Испитување на руди, метали и троски",
+      "Лабораториска екстракција од руди и троски",
+    ],
+  },
+  {
+    title: "Ултразвучни испитувања",
+    description: "Неразорувачки испитувања со најсовремена ултразвучна опрема",
+    image: "wallscener.jpeg",
+    link: "/ultrasound",
+    services: [
+      "Испитување на заварени споеви",
+      "Дебелометрија",
+      "Испитување на дефекти",
+      "Контрола на квалитет",
+      "Анализа и известување",
+    ],
+  },
+  {
+    title: "Консалтинг услуги",
+    description: "Експертски совети и консултации во градежништвото",
+    image: "consulting2.jpg",
+    link: "/consulting",
+    services: [
+      "Градежно советување",
+      "Проектен менаџмент",
+      "Надзор на градба",
+      "Техничка документација",
+      "Анализа на материјали",
+    ],
+  },
+];
+
+export default function Home() {
+  return (
+    <div className="isolate bg-graymin-h-screen bg-gradient-to-b from-cyan-900 to-cyan-400">
+      {/* Hero Section with Parallax */}
+      <div className="relative h-screen overflow-hidden">
+        <div className="absolute inset-0">
+          <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
+              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
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.2 }}
+              className="text-xl text-gray-200 mb-8"
+            >
+              Професионални лабораториски услуги со најсовремена опрема и
+              експертиза
+            </motion.p>
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.4 }}
+              className="flex gap-4"
+            >
+              <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
+                to="/about"
+                className="bg-white/10 hover:bg-white/20 text-white px-8 py-3 rounded-full font-semibold transition-colors duration-300"
+              >
+                Дознајте повеќе
+              </NavLink>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+
+      {/* Stats Section */}
+      {/* <div className="container mx-auto px-4 py-16 ">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          {[
+            { number: "15+", label: "Години искуство" },
+            { number: "1000+", label: "Задоволни клиенти" },
+            { number: "5000+", label: "Завршени проекти" },
+            { number: "100%", label: "Задоволство" },
+          ].map((stat) => (
+            <div key={stat.label} className="text-center">
+              <div className="text-4xl font-bold text-white mb-2">{stat.number}</div>
+              <div className="text-white">{stat.label}</div>
+            </div>
+          ))}
+        </div>
+      </div> */}
+
+      {/* Services Section */}
+      <div className="bg-white py-24">
+        <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">
+            <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> */}
+          <SectionHeader
+            title="Нашите Услуги"
+            subtitle="Нашиот тим е спремен да ви помогне со нашите услуги"
+            className="text-white"
+          />
+          <div className="grid grid-cols-1  md:grid-cols-3 gap-10">
+            {serviceCards.map((card) => (
+              <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"
+              >
+                <div className="relative h-56 overflow-hidden">
+                  <img
+                    src={card.image}
+                    alt={card.title}
+                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
+                  <h3 className="absolute bottom-4 left-4 text-xl font-semibold text-white">
+                    {card.title}
+                  </h3>
+                </div>
+                <div className="p-6">
+                  <p className="text-gray-600 mb-4">{card.description}</p>
+                  <ul className="space-y-2">
+                    {card.services.slice(0, 3).map((service, index) => (
+                      <li
+                        key={index}
+                        className="flex items-center text-gray-700"
+                      >
+                        <CheckCircleIcon className="h-5 w-5 text-blue-500 mr-2" />
+                        {service}
+                      </li>
+                    ))}
+                  </ul>
+                  <div className="mt-4 flex items-center text-blue-500 font-semibold">
+                    Дознајте повеќе
+                    <ArrowRightIcon className="h-5 w-5 ml-2 group-hover:translate-x-2 transition-transform duration-300" />
+                  </div>
+                </div>
+              </NavLink>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 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-white mb-4">
+            Наши Клиенти
+          </h2>
+          <div className="w-24 h-1 bg-blue-500 mx-auto mb-8"></div>
+          <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
+              key={index}
+              className="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
+            >
+              <img
+                src={`/client-${index}.png`}
+                alt={`Client ${index}`}
+                className="w-full h-20 object-contain grayscale hover:grayscale-0 transition-all duration-300"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* CTA Section */}
+      <div className="isolate bg-gray bg-gradient-to-b from-blue-700 to-blue-500 text-white py-24">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-3xl md:text-4xl font-bold mb-8">
+            Спремни сме да ви помогнеме во вашиот следен проект
+          </h2>
+          <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"
+          >
+            Контактирајте нѐ
+          </NavLink>
+        </div>
+      </div>
+    </div>
+  );
+}
+
--- a/frontend/src/services/api.js
+++ b/frontend/src/services/api.js
@ -0,0 +1,102 @@
+import axios from 'axios';
+
+
+const API_URL = 'http://localhost:3000';
+
+const api = axios.create({
+  baseURL: API_URL,
+  // withCredentials: true,
+});
+
+// Add authorization header to all requests
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers['Authorization'] = `Bearer ${token}`;  // Make sure this matches your backend expectation
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export const getSharedDocuments = (userId) => {
+  return api.get(`/documents/shared/${userId}`);
+};
+
+
+const getToken = () => localStorage.getItem('token');
+export const downloadDocument = async (key) => {
+  try {
+    const response = await api.get(`/documents/download/${encodeURIComponent(key)}`, {
+      responseType: 'blob',
+      headers: {
+        'Accept': 'application/octet-stream',
+      }
+    });
+
+    // Create blob URL and trigger download
+    const blob = new Blob([response.data]);
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    
+    // Extract filename from key
+    const fileName = key.split('/').pop();
+    link.download = fileName;
+    
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+    
+    return response;
+  } catch (error) {
+    console.error('Download error:', error);
+    throw error;
+  }
+};
+
+
+export const createUser = (userData) => {
+  return api.post('/admin/users', {
+    name: userData.name,
+    email: userData.email,
+    password: userData.password,
+    isAdmin: userData.isAdmin  
+  });
+};
+export const login = (username, password) => api.post('/auth/login', { username, password });
+export const shareDocument = (documentId, userIds) => api.post(`/admin/documents/${documentId}/share`, { userIds });
+export const updateDocumentStatus = (documentId, status) => api.put(`/admin/documents/${documentId}/status`, { status });
+
+export const uploadDocument = async (formData) => {
+  try {
+    // Debug log
+    console.log('Sending to server:', {
+      title: formData.get('title'),
+      sharedWithId: formData.get('sharedWithId'),
+      uploadedById: formData.get('uploadedById')
+    });
+
+    const response = await api.post('/admin/documents', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.error('API Error:', error.response?.data);
+    throw error;
+  }
+};
+export const getUserInfo = () => api.get('/auth/user-info');
+
+
+export const getAllDocuments = () => api.get('/admin/documents');
+// export const getSharedDocuments = (userId) => api.get(`/documents/shared/${userId}`);
+export const getAllUsers = () => api.get('/admin/users');
+
+export default api;
--- a/frontend/src/services/xxFileUpload.jsx
+++ b/frontend/src/services/xxFileUpload.jsx
@ -0,0 +1,56 @@
+import { useState } from 'react';
+import axios from 'axios';
+
+const FileUpload = () => {
+  const [file, setFile] = useState(null);
+  const [progress, setProgress] = useState(0);
+
+  const handleFileChange = (event) => {
+    if (event.target.files) {
+      setFile(event.target.files[0]);
+    }
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (!file) return;
+
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('title', 'Your document title');
+    // Add other fields as needed
+
+    try {
+      await axios.post('/api/admin/document', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        onUploadProgress: (progressEvent) => {
+          const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+          setProgress(percentCompleted);
+        },
+      });
+
+      console.log('Upload successful');
+      setProgress(0);
+    } catch (error) {
+      console.error('Upload failed:', error);
+      setProgress(0);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input type="file" onChange={handleFileChange} />
+      <button type="submit">Upload</button>
+      {progress > 0 && (
+        <div>
+          <progress value={progress} max="100" />
+          <p>{progress}% uploaded</p>
+        </div>
+      )}
+    </form>
+  );
+};
+
+export default FileUpload;
--- a/frontend/src/shared/Button.jsx
+++ b/frontend/src/shared/Button.jsx
@ -0,0 +1,18 @@
+// Reusable button component
+export function Button({ variant = 'primary', children, ...props }) {
+    const baseStyles = "px-8 py-3 rounded-full font-semibold transition-colors duration-300";
+    const variants = {
+      primary: "bg-blue-600 hover:bg-blue-700 text-white",
+      secondary: "bg-white/10 hover:bg-white/20 text-white",
+      outline: "border-2 border-blue-600 text-blue-600 hover:bg-blue-50"
+    };
+  
+    return (
+      <button 
+        className={`${baseStyles} ${variants[variant]}`} 
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
--- a/frontend/src/shared/SectionHeader.jsx
+++ b/frontend/src/shared/SectionHeader.jsx
@ -0,0 +1,17 @@
+// Reusable section header component
+// eslint-disable-next-line react/prop-types
+export function SectionHeader({ title, subtitle, className }) {
+    return (
+      <div className={`text-center mb-16 text-white ${className}`}>
+        <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-xl max-w-2xl mx-auto">
+            {subtitle}
+          </p>
+        )}
+      </div>
+    );
+  }
--- a/frontend/src/shared/colors.js
+++ b/frontend/src/shared/colors.js
@ -0,0 +1,20 @@
+export const colors = {
+    primary: {
+      light: '#3B82F6',   // blue-500
+      DEFAULT: '#2563EB', // blue-600
+      dark: '#1D4ED8',    // blue-700
+      darker: '#1E40AF'   // blue-800
+    },
+    background: {
+      light: '#F9FAFB',   // gray-50
+      DEFAULT: '#F3F4F6', // gray-100
+      dark: '#E5E7EB'     // gray-200
+    },
+    text: {
+      primary: '#1F2937', // gray-800
+      secondary: '#4B5563', // gray-600
+      light: '#9CA3AF'    // gray-400
+    },
+    white: '#FFFFFF',
+    black: '#000000'
+  }
--- a/frontend/src/shared/common.js
+++ b/frontend/src/shared/common.js
@ -0,0 +1,25 @@
+export const commonStyles = {
+    // Container
+    container: "container mx-auto px-4",
+    
+    // Section Headers
+    sectionHeader: "text-center mb-16",
+    sectionTitle: "text-3xl md:text-4xl font-bold text-gray-800 mb-4",
+    sectionDivider: "w-24 h-1 bg-blue-600 mx-auto",
+    
+    // Cards
+    card: "bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300",
+    
+    // Buttons
+    primaryButton: "bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-semibold transition-colors duration-300",
+    secondaryButton: "bg-white/10 hover:bg-white/20 text-white px-8 py-3 rounded-full font-semibold transition-colors duration-300",
+    
+    // Gradients
+    primaryGradient: "bg-gradient-to-r from-blue-900/90 to-blue-600/80",
+    
+    // Text
+    heading1: "text-4xl md:text-6xl font-bold",
+    heading2: "text-3xl md:text-4xl font-bold",
+    heading3: "text-2xl font-semibold",
+    paragraph: "text-gray-600"
+  }
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})