add colors on icons, fix testimonial

resources/css/app.css

@@ -39,3 +39,25 @@
 .nav-item{
   justify-content: center;
 }
+.tech-icon{
+  filter: grayscale(100%);
+  height: 75px;
+  width: auto;
+  transition: transform .2s;
+}
+.tech-icon:hover,
+.tech-icon:active {
+  filter: grayscale(0%);
+  transform: scale(1.2);
+}
+.client-icon{
+  filter: grayscale(100%);
+  height: auto;
+  width: 176px;
+  transition: transform .2s;
+}
+.client-icon:hover,
+.client-icon:active {
+  filter: grayscale(0%);
+  transform: scale(1.2);
+}

resources/views/components/testimonial.blade.php

@@ -10,7 +10,7 @@
     <div class="mb-6 flex justify-center relative">
         <div class="relative">
             <img src="{{ $photoUrl }}" class="w-32 rounded-full shadow-lg relative z-10" alt=""/>
-            <img src="gifs/quote.gif" alt="gif" class="w-32 shrink absolute justify-center  -left-[70%] -top-12"/>
+            <img src="gifs/quote.gif" alt="gif" class="w-24 shrink absolute justify-center  -left-[35%] -top-12"/>
 
         </div>
     </div>

resources/views/home.blade.php

@@ -61,26 +61,26 @@ class="text-website-normal">zadowolonych klientów Blumilk</span>
 
             <div class="flex flex-col md:flex-row pb-12 text-gray-400 items-center justify-center mt-6">
                 <div class="m-6">
-                    <img src="images/clients/cwup.png" class="h-auto w-44" alt="Collegium Witelona"/>
+                    <img src="images/clients/cwup.png" class="client-icon" alt="Collegium Witelona"/>
                 </div>
                 <div class="m-6">
-                    <img src="images/clients/insly.png" class="h-auto w-44" alt="Insly"/>
+                    <img src="images/clients/insly.png" class="client-icon" alt="Insly"/>
                 </div>
                 <div class="m-6">
-                    <img src="images/clients/kghm.png" class="h-auto w-44" alt="KGHM"/>
+                    <img src="images/clients/kghm.png" class="client-icon" alt="KGHM"/>
                 </div>
                 <div class="m-6">
-                    <img src="images/clients/vitaplus.png" class="h-auto w-44" alt="Vita Plus"/>
+                    <img src="images/clients/vitaplus.png" class="client-icon" alt="Vita Plus"/>
                 </div>
             </div>
         </section>
 
         <section class="bg-gradient-to-r from-gray-light to-white">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 90">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
                 <path fill="#ffffff" fill-opacity="1"
                       d="M0,64L80,69.3C160,75,320,85,480,90.7C640,96,800,96,960,80C1120,64,1280,32,1360,16L1440,0L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"></path>
             </svg>
-            <div class="flex flex-col lg:flex-row section-padding lg:pr-[0%] py-24 overflow-hidden">
+            <div class="flex flex-col lg:flex-row section-padding lg:pr-[0%] pt-24">
                 <div class="flex basis-2/5 flex-col lg:pr-8">
                     <h2 class="text-3xl md:text-4xl lg:text-6xl font-semibold text-gray-900 mb-4"> Jak możemy Ci
                         pomóc? </h2>
@@ -182,33 +182,37 @@ class="font-medium">skuteczne rozwiązania</span></span>
                 <div class="absolute hidden lg:block rotate-3 z-20 rounded-2xl h-52 w-80 -left-[10%] bottom-16 bg-[url('graphics/code-snippet.png')] bg-cover">
                 </div>
                 <div class="relative flex left-[5%] overflow-hidden rounded-2xl bg-white shadow-md rotate-3">
-                    <img src="graphics/vita.png" class="max-w-[1149px] max-h-[645px]" alt="Vita homepage"/>
+                    <img src="graphics/vita.png" class="w-full" alt="Vita homepage"/>
                 </div>
             </div>
+
         </section>
-        <section class="bg-gray-light bg-binary my-12 py-12 section-padding text-center z-10">
-            <h2 class="text-3xl md:text-4xl lg:text-6xl font-semibold text-gray-900 my-6">Tech stack</h2>
+        <section class="bg-gray-light my-12 py-32 text-center z-10 relative">
+            <div class="hidden md:block bg-binary z-20 absolute w-[4000px] h-[1000px] -top-60 opacity-30 overflow-hidden bg-cover"></div>
+            <div class="section-padding">
+            <h2 class="text-3xl md:text-5xl lg:text-6xl font-semibold text-gray-900 my-6">Tech stack</h2>
             <span class="subtitle">PHP i Laravel to nasze główne narzędzie pracy. GitHub stanowi naszą centralną platformę, umożliwiającą code review oraz CI/CD za pomocą GitHub Actions. Frontend budujemy z użyciem Vue.js, a także korzystamy z różnych systemów zarządzania bazami danych, tj. MySQL i PostgreSQL.</span>
-            <div class="flex gid-cols-5 pb-6 text-gray-400 items-center justify-center mt-6 gap-8">
+            <div class="lg:flex grid grid-cols-3 md:flex-row relative z-30 pb-6 text-gray-400 items-center justify-center mt-6 gap-24">
                 <div class="">
-                    <img src="images/tech/laravel.png" class="h-auto w-14" alt="laravel"/>
+                    <img src="images/tech/laravel.png" class="tech-icon" alt="laravel"/>
                 </div>
                 <div>
-                    <img src="images/tech/php.png" class="h-auto w-14" alt="php"/>
+                    <img src="images/tech/php.png" class="tech-icon" alt="php"/>
                 </div>
                 <div class="">
-                    <img src="images/tech/postgresql.png" class="h-auto w-14" alt="postgresql"/>
+                    <img src="images/tech/postgresql.png" class="tech-icon" alt="postgresql"/>
                 </div>
-                <div class="">
-                    <img src="images/tech/docker.png" class="h-auto w-14" alt="docker"/>
+                <div>
+                    <img src="images/tech/docker.png" class="tech-icon" alt="docker"/>
                 </div>
                 <div class="">
-                    <img src="images/tech/vue.png" class="h-auto w-14" alt="vue"/>
+                    <img src="images/tech/vue.png" class="tech-icon" alt="vue"/>
                 </div>
             </div>
+            </div>
         </section>
-        <section class="section-padding text-center items-center">
-            <h2 class="text-3xl md:text-4xl lg:text-6xl font-semibold text-gray-900 my-6">Co mówią o nas inni</h2>
+        <section class="section-padding text-center items-center py-24">
+            <h2 class="text-3xl md:text-4xl lg:text-6xl font-semibold text-gray-900 mb-6">Co mówią o nas inni</h2>
             <x-badge>opinie</x-badge>
             <span class="subtitle">Opinie naszych klientów są bardzo ważne, <span class="font-semibold">świadczą o jakości naszych usług</span> i inspirują nas do nieustannego doskonalenia.</span>
             <div class="grid gap-6 text-center lg:grid-cols-3 lg:gap-12">
@@ -224,7 +228,7 @@ class="font-medium">skuteczne rozwiązania</span></span>
 
             </div>
         </section>
-        <section class="section-padding pt-24">
+        <section class="section-padding">
             <div class="flex flex-row items-center justify-between">
                 <h2 class="text-3xl md:text-4xl lg:text-6xl font-semibold text-gray-900">Nasze aktywności</h2>
                 <div class="hidden sm:block">

resources/views/layout/footer.blade.php

@@ -1,7 +1,7 @@
 <footer class="bg-gradient-to-t from-footer-dark to-footer-light">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 230">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 150">
         <path fill="#ffffff" fill-opacity="1"
-              d="M0,128L80,149.3C160,171,320,213,480,224C640,235,800,213,960,176C1120,139,1280,85,1360,58.7L1440,32L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"></path>
+              d="M0,96L120,106.7C240,117,480,139,720,122.7C960,107,1200,53,1320,26.7L1440,0L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z"></path>
     </svg>
     <div class="text-white section-padding py-16 flex flex-col justify-between lg:flex-row items-center gap-8">
         <section class="hidden md:flex flex-col md:basis-1/2">
@@ -51,7 +51,8 @@ class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring
             </div>
         </section>
         <section class="flex flex-col lg:h-[500px] justify-between md:basis-1/2">
-            <div class="hidden md:flex bg-footer-light p-8 lg:p-12 lg:min-w-[400px] lg:max-w-[600px] self-center rounded-3xl bg-opacity-80">
+            <div
+                class="hidden md:flex bg-footer-light p-8 lg:p-12 lg:min-w-[400px] lg:max-w-[600px] self-center rounded-3xl bg-opacity-80">
                 <div class="flex gap-4">
                     <img src="images/kasia.jpeg" alt="" class="h-24 w-24 flex-none rounded-full">
                     <div class="gap-12">