Feature/service centre

controllers/CustomerController.php

@@ -46,6 +46,18 @@ public function customerTechnicians()
         return $this->render('/customer/customer-technicians');
     }
 
+    public function customerServiceCenter()
+    {
+        $this->setLayout('auth');
+        return $this->render('/customer/customer-serviceCenter');
+    }
+
+    public function serviceCenterProfile()
+    {
+        $this->setLayout('auth');
+        return $this->render('/customer/service-center-profile');
+    }
+
     public function customerMap()
     {
         $this->setLayout('auth');

public/css/customer/service-center-profile.css

@@ -0,0 +1,111 @@
+/* Profile Cards */
+.cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: center;
+    margin: 20px 0;
+}
+
+.card {
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    width: 300px;
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
+}
+
+.card-image img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+}
+
+.card-content {
+    padding: 15px;
+    text-align: center;
+}
+
+.card-content h3 {
+    margin: 10px 0;
+    font-size: 1.5rem;
+    color: #333333;
+}
+
+.card-content p {
+    font-size: 1rem;
+    color: #666666;
+    margin: 5px 0;
+}
+
+.card-content small {
+    display: block;
+    margin-top: 10px;
+    color: #888888;
+}
+
+.message-btn {
+    background: #4CAF50;
+    color: #ffffff;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    font-size: 1rem;
+    cursor: pointer;
+    margin: 10px 0;
+    transition: background-color 0.3s ease;
+}
+
+.message-btn:hover {
+    background: #45a049;
+}
+
+/* Feedback Section */
+.feedback-section {
+    margin: 30px 0;
+    padding: 20px;
+    background: #f9f9f9;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.feedback-section h2 {
+    text-align: center;
+    font-size: 2rem;
+    margin-bottom: 20px;
+    color: #333333;
+}
+
+.feedback-card {
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 10px;
+    padding: 15px;
+    margin-bottom: 15px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.feedback-card h4 {
+    margin-bottom: 10px;
+    font-size: 1.25rem;
+    color: #333333;
+}
+
+.feedback-card p {
+    font-size: 1rem;
+    color: #666666;
+    margin: 5px 0;
+}
+
+.feedback-card small {
+    display: block;
+    margin-top: 10px;
+    color: #888888;
+}

public/css/home/home.css

@@ -138,106 +138,101 @@
     border-color: #c3e6cb;
 }
 
+/* Section 3 Styles */
 .section-2 {
-    /*background-image: url('/assets/homepage3.webp');*/
-    /*background-color: #010336;*/
-    background-color: white;
+    background-color: #03042C;
     margin-top: 50px;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    height: 100vh;
-    max-height: 800px;
-    color: black;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-    display: grid;
-    grid-template-columns: 1fr 1fr ;
+    height: 50vh;
+    display: flex;
+    /*place-items: center;*/
 }
 
 .box-2 {
     display: flex;
+    /*grid-template-columns: 1fr 1fr; !* Two equal columns *!*/
     flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 0 2rem;
+    height: 100%;
+    align-items: center; /* Vertically center content */
+    width: 100%; /* Constrain overall width */
+    /*max-width: 1200px; !* Prevent the layout from being too wide *!*/
+    /*gap: 10rem; !* Add spacing between columns *!*/
 }
 
-.box-2-container {
-    border-radius: 0.5rem;
-    background-color: rgba(255, 255, 255, 0.192);
-    backdrop-filter: blur(8px);
-
-}
-
-
 .box-2-content {
+    direction: inherit;
     color: white;
-    margin-top: 70px;
-}
-
-.box-2-video{
-    margin-left: 500px;
+    text-align: left;
+    align-items: flex-start;
+    margin: 85px;
+    /*padding-left: 80px;*/
+    /*margin-left: 90%;*/
+    /*padding: 1rem; !* Add padding for spacing *!*/
 }
 
 .box-2-title {
-    font-size: 2rem;
+    font-size: 3.5rem;
     font-weight: 500;
-    margin: 1rem auto 0.5rem;
-    padding: 0 2rem;
+    margin-bottom: 1rem;
 }
 
 .box-2-desc {
-    font-size: 0.8rem;
+    font-size: 0.9rem;
     font-weight: 300;
-    margin: 1rem auto 0.5rem;
-    padding: 0 2rem;
+    margin-bottom: 1.5rem;
 }
 
 .box-2-btn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     padding: 1rem 2rem;
-    margin: 2rem 0 6rem 2rem;
     color: white;
     background-color: #010336;
     border-radius: 2.4rem;
     border: none;
-    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    transition: background-color 0.3s ease-in-out;
 }
 
 .box-2-btn:hover {
     background-color: #0d6efd;
     cursor: pointer;
 }
 
-/* For larger screens, increase height and maintain 1fr 1fr layout */
-@media (min-width: 1024px) {
-    .section-2 {
-        height: 100vh;
-        max-height: 500px;
-    }
-}
+.box-2-video {
+    display: flex;
+    /*justify-content: center;*/
+    height: 100%;
 
-/* For tablet screens, reduce height slightly and adjust padding */
-@media (max-width: 1023px) and (min-width: 768px) {
-    .section-2 {
-        height: 45vh;
-        max-height: 450px;
-        padding: 15px;
-    }
 }
 
-/* For mobile screens, make it a single column and reduce height */
-@media (max-width: 767px) {
-    .section-2 {
-        height: 35vh; /* Reduced height for smaller screens */
-        max-height: 300px;
-        grid-template-columns: 1fr; /* Single column layout */
-        padding: 10px;
+.box-2-video video {
+    width: 100%;
+    max-width: 500px; /* Constrain the video size */
+    height: 100%;
+    margin: 50px;
+    /*border-radius: 10px;*/
+    /* Optional: Add rounded corners */
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .box-2 {
+        grid-template-columns: 1fr; /* Stack columns for smaller screens */
+        gap: 1rem;
+    }
+    .box-2-video {
+        margin-top: 1rem;
+    }
+    .box-2-content {
+        text-align: center; /* Center text for small screens */
+    }
+    .box-2-btn {
+        margin: 0 auto; /* Center the button */
     }
 }
 
+
+
 /* Section 3 Styling */
 
 body {
@@ -254,20 +249,31 @@ body {
 .section-3 {
     background-color: rgba(255, 255, 255, 0.61);
     padding: 6rem;
+    display: flex; /* Ensure the section centers the row */
+    justify-content: center;
+    align-items: center;
 }
 
-.section-3 .heading-container {
-    display: flex;
+.heading-container {
+
     justify-content: center;
-    align-items: center;
+    /*align-items: flex-start;*/
     text-align: center;
     margin-bottom: 40px;
 }
 
 .section-3 .heading-container h2 {
-    font-size: 1.5rem;
+    font-size: 3rem;
     font-weight: bold;
     position: relative;
+    margin-right: 15%;
+}
+
+.row {
+    display: flex;
+    flex-wrap: wrap; /* Allow wrapping for responsive design */
+    justify-content: center; /* Center the containers horizontally */
+    gap: 5px; /* Add a 5px gap between containers */
 }
 
 .section-3 .box-3 {
@@ -277,7 +283,14 @@ body {
     border-radius: 5px;
     overflow: hidden;
     justify-content: flex-start;
-    width: 50%;
+    width: 100%;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+}
+
+.box-3:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
 }
 
 .section-3 .box-3 .img-box-3 {
@@ -310,22 +323,23 @@ body {
     margin-bottom: 20px;
 }
 
-.row {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 30px;
-}
 
-.box-3-container {
-    /*flex: 1 1 ;*/
-    /*!*max-width: 100%;*!*/
-}
+
+/*.box-3-container {*/
+/*    align-items: flex-start;*/
+/*}*/
 
 @media (min-width: 768px) {
     .box-3-container {
         flex: 1 1;
-        max-width: 50%;
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 767px) {
+    .box-3-container {
+        width: 100%; /* Full width for small screens */
+        max-width: 100%; /* Ensure proper scaling */
     }
 }
 

public/index.php

@@ -112,6 +112,9 @@
 $app->router->get('/technician-profile/{id}', [TechnicianController::class, 'viewTechnicianProfile']);
 $app->router->post('/cus-tech-req', [CustomerController::class, 'cusTechReq']);
 $app->router->post('/delete-cus-tech-req', [CustomerController::class, 'deleteCusTechReq']);
+$app->router->get('/customer-serviceCenter', [CustomerController::class, 'customerServiceCenter']);
+$app->router->get('/service-center-profile', [CustomerController::class, 'serviceCenterProfile']);
+
 
 /* Admin Routes */
 $app->router->get('/admin-dashboard', [AdminController::class, 'adminDashboard']);

views/customer/components/sidebar.php

@@ -28,7 +28,7 @@
                 </a>
             </li>
             <li>
-                <a href="#">
+                <a href="/customer-serviceCenter">
                     <span class="icon">
                         <ion-icon name="car-outline"></ion-icon>
                     </span>