[homepage] improve quotes

resources/css/app.scss

@@ -241,14 +241,6 @@ h4 {
     font-weight: bold;
 }
 
-.img-face-smaller-right {
-    max-width: 5em;
-}
-
-.img-face-smaller-left {
-    max-width: 7rem;
-    margin: .1em auto 1.6em auto;
-}
 
 .blockquote {
     font-size: 1.4em;

resources/json-database/references.json

@@ -12,7 +12,7 @@
         "picture": "/assets/images/faces/adam_gleiss.jpg"
     },
     {
-        "testimonial": "Tomas' deep expertise and tools-driven approach allowed us to modernize a significantly large legacy PHP codebase while teaching us best practices. Rector team <strong>worked around our schedule to ensure minimal disruption</strong>.</p><p>I highly recommend Rector team for legacy PHP code modernization!",
+        "testimonial": "Tomas' deep expertise and tools-driven approach allowed us to modernize a significantly large legacy PHP codebase while teaching us best practices. Rector team <strong>worked around our schedule to ensure minimal disruption</strong>. I highly recommend Rector team for legacy PHP code modernization!",
         "name": "Eric Molitor",
         "position": "CTO at Curve",
         "picture": "/assets/images/faces/eric_molitor.jpg"

resources/views/_snippets/javascripts.blade.php

@@ -78,3 +78,23 @@
     </style>
 
 @endif
+
+
+<script>
+    // you've found an easter egg!
+
+    // press "f" to go to "/find-rule"
+    document.addEventListener('keydown', (event) => {
+        if ((event.key === 'f' || event.key === 'F') && !event.ctrlKey && !event.target.isContentEditable && event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') {
+            window.location.href = '/find-rule';
+        }
+
+        if ((event.key === 'd' || event.key === 'D') && !event.ctrlKey && !event.target.isContentEditable && event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') {
+            window.location.href = '/documentation';
+        }
+
+        if ((event.key === 'b' || event.key === 'B') && !event.ctrlKey && !event.target.isContentEditable && event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') {
+            window.location.href = '/blog';
+        }
+    });
+</script>

resources/views/hire_team/references.blade.php

@@ -7,14 +7,15 @@
         overflow: hidden;
         position: relative;
         padding-bottom: 1em;
+        max-width: 50em;
+        user-select: none; /* Prevent text selection during drag */
     }
 
     .testimonial-carousel__track {
         display: flex;
         transition-property: transform;
         transition-duration: .5s;
         transition-timing-function: ease-in-out;
-        align-items: flex-start;
     }
 
     .testimonial-carousel__item {
@@ -31,27 +32,54 @@
         max-width: 56rem;
     }
 
-    /* Navigation buttons */
+    .company-quote-card-body {
+        padding: 1.5em 1em 0 2em;
+    }
+
+    .profile-section {
+        display: flex;
+        margin-top: 2em; /* Reduced from mt-5 for better spacing */
+    }
+
+    .profile-image {
+        height: 5em;
+        border-radius: 50%;
+        margin: 0 1em 1em 0; /* Adjusted to remove extra bottom margin */
+    }
+
+    .profile-info {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .profile-info .name {
+        font-size: 1.5em;
+    }
+
     .testimonial-carousel__button {
-        position: absolute;
-        top: 43%;
-        transform: translateY(-50%);
+        text-align: right;
         background: rgba(0, 0, 0, 0.5);
         color: white;
         border: none;
-        padding: .5rem 1rem .7rem 1rem;
         cursor: pointer;
-        border-radius: 0.3125rem; /* 5px */
         transition: background 0.3s;
+        width: 2.5rem; /* Circular button size */
+        height: 2.5rem;
+        border-radius: 50%; /* Make buttons circular */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: static; /* Remove absolute positioning */
+        margin: 1rem .3em auto; /* Add spacing between buttons and above */
     }
 
-    .company-quote-card-body {
-        display: flex;
-        padding: 1.5em 1em 0 2em;
+    .testimonial-carousel__button svg {
+        width: 1.2rem;
+        height: 1.2rem;
+        fill: white;
     }
 
-    .testimonial-carousel__button:hover,
-    .testimonial-carousel__button:focus {
+    .testimonial-carousel__button:hover, .testimonial-carousel__button:focus {
         background: rgba(0, 0, 0, 0.8);
         outline: none;
     }
@@ -76,60 +104,78 @@
     }
 </style>
 
+
 <div id="references" class="testimonial-carousel">
     <div class="testimonial-carousel__track">
         @foreach ($references as $reference)
             <div class="testimonial-carousel__item">
                 <div class="card shadow mt-3 pb-2">
                     <div class="card-body company-quote-card-body">
-                        <div>
-                            <img
-                                src="{{ $reference['picture'] }}"
-                                class="rounded-circle img-face-smaller-left me-4 mb-3 mb-sm-0"
-                                alt="{{ $reference['name'] }}"
-                            >
-                        </div>
                         <blockquote class="blockquote company-quote me-4">
                             <p>
                                 "{!! $reference['testimonial'] !!}"
                             </p>
-
-                            <footer class="blockquote-footer mt-1">
-                                {{ $reference['name'] }}, {{ $reference['position'] }}
-                            </footer>
                         </blockquote>
+
+                        <div class="profile-section">
+                            <img
+                                src="{{ $reference['picture'] }}"
+                                class="rounded-circle profile-image"
+                                alt="{{ $reference['name'] }}"
+                            >
+
+                            <div class="profile-info">
+                                <div class="name">
+                                    {{ $reference['name'] }}
+                                </div>
+
+                                <div class="text-secondary position">
+                                    {{ $reference['position'] }}
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         @endforeach
     </div>
 
-    <button class="testimonial-carousel__button testimonial-carousel__button--prev" onclick="moveSlide(-1)">←</button>
-    <button class="testimonial-carousel__button testimonial-carousel__button--next" onclick="moveSlide(1)">→</button>
+    <div class="text-center d-flex ms-2">
+        <button class="testimonial-carousel__button testimonial-carousel__button--prev" onclick="moveSlide(-1)">
+            <svg viewBox="0 0 24 24">
+                <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+            </svg>
+        </button>
+        <button class="testimonial-carousel__button testimonial-carousel__button--next" onclick="moveSlide(1)">
+            <svg viewBox="0 0 24 24">
+                <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"/>
+            </svg>
+        </button>
+    </div>
 </div>
 
 
 <script type="text/javascript">
     let currentIndex = 0;
+    const track = document.querySelector('.testimonial-carousel__track');
     const items = document.querySelectorAll('.testimonial-carousel__item');
     const totalItems = items.length;
 
+    // Button slide movement
     function moveSlide(direction) {
         currentIndex += direction;
         if (currentIndex < 0) {
             currentIndex = 0;
         } else if (currentIndex >= totalItems) {
             currentIndex = totalItems - 1;
         }
-        const offset = -currentIndex * 100;
-        document.querySelector('.testimonial-carousel__track').style.transform = `translateX(${offset}%)`;
+        updateCarousel();
     }
 
-    document.addEventListener('keydown', (event) => {
-        if (event.key === 'ArrowLeft') {
-            moveSlide(-1);
-        } else if (event.key === 'ArrowRight') {
-            moveSlide(1);
-        }
-    });
+    // Update carousel position
+    function updateCarousel() {
+        const offset = -currentIndex * 100;
+        track.style.transition = 'transform 0.5s ease-in-out';
+        track.style.transform = `translateX(${offset}%)`;
+    }
 </script>

resources/views/homepage/_parts/faq.blade.php

@@ -1,7 +1,7 @@
 <style>
     .faq-container {
         max-width: 50em;
-        margin:auto;
+        margin: auto;
     }
 
     .faq-item {

resources/views/homepage/homepage.blade.php

@@ -139,31 +139,18 @@ class="img-fluid img-thumbnail">
             @endif
 
             @include('homepage/_parts/posts')
-
             @include('_snippets/homepage_separator')
 
             <h2>
                 What do CTOs <span class="text-rector-green">Love&nbsp;about&nbsp;Rector</span>?
             </h2>
 
             @include('hire_team/references')
-
             @include('_snippets/homepage_separator')
 
             <h2>FAQ</h2>
 
             @include('homepage/_parts/faq')
         </div>
     </div>
-
-    <script>
-        // you've found an easter egg!
-
-        // press "f" to go to "/find-rule"
-        document.addEventListener('keydown', (event) => {
-            if ((event.key === 'f' || event.key === 'F') && !event.ctrlKey && !event.target.isContentEditable && event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') {
-                window.location.href = '/find-rule';
-            }
-        });
-    </script>
 @endsection