From 0b837e337674e6c2b13cb720fa044fda02aefa58 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Wed, 13 May 2026 11:08:31 +0200
Subject: [PATCH] fix: subcompany tiles layout and active states for 4 items

---
 components/blocks/SubCompanyTiles.tsx | 33 ++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/components/blocks/SubCompanyTiles.tsx b/components/blocks/SubCompanyTiles.tsx
index eea21755a..18a69fe9b 100644
--- a/components/blocks/SubCompanyTiles.tsx
+++ b/components/blocks/SubCompanyTiles.tsx
@@ -78,31 +78,36 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
         )}
         
         <motion.div 
-          className="grid grid-cols-1 md:grid-cols-3 gap-6"
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
           variants={containerVariants}
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true, margin: "-50px" }}
         >
           {companiesData.map((company: any, index: number) => {
-            const isCurrent = !company.url;
-            const CardWrapper = isCurrent ? 'div' : 'a';
-            const wrapperProps = !isCurrent ? { href: company.url, target: "_blank", rel: "noopener noreferrer" } : {};
+            const isCurrent = company.title.toUpperCase() === 'E-TIB GMBH';
+            const hasUrl = !!company.url;
+            const CardWrapper = hasUrl ? 'a' : 'div';
+            const wrapperProps = hasUrl ? { href: company.url, target: "_blank", rel: "noopener noreferrer" } : {};
             
             // Generate logo representation based on title
             const isEtib = company.title.includes('E-TIB');
             const isIng = company.title.includes('Ingenieur');
+            const isVerwaltung = company.title.includes('Verwaltung');
+            const isBohrtechnik = company.title.includes('Bohrtechnik');
             const isNemo = company.title.includes('NEMO');
 
             const bgPositionClasses = [
               "-bottom-[30%] -right-[30%]",
               "-top-[30%] -left-[30%]",
-              "-bottom-[30%] -left-[30%]"
+              "-bottom-[30%] -left-[30%]",
+              "-top-[30%] -right-[30%]"
             ];
             const animationClasses = [
               "animate-[spin_60s_linear_infinite]",
               "animate-[spin_80s_linear_infinite]",
-              "animate-[spin_100s_linear_infinite]"
+              "animate-[spin_100s_linear_infinite]",
+              "animate-[spin_120s_linear_infinite]"
             ];
             const positionClass = bgPositionClasses[index % bgPositionClasses.length];
             const animationClass = animationClasses[index % animationClasses.length];
@@ -118,7 +123,9 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
                   className={`group relative overflow-hidden aspect-[4/3] flex flex-col justify-center items-center shadow-xl transition-all duration-500 bg-neutral-dark block w-full h-full sm:rounded-xl select-none ${
                     isCurrent 
                       ? 'border-2 border-primary shadow-[0_0_30px_rgba(17,124,97,0.15)] cursor-default' 
-                      : 'border border-white/5 hover:shadow-2xl hover:-translate-y-1 hover:border-white/10 cursor-pointer'
+                      : hasUrl 
+                        ? 'border border-white/5 hover:shadow-2xl hover:-translate-y-1 hover:border-white/10 cursor-pointer'
+                        : 'border border-white/5 shadow-md cursor-default'
                   }`}
                 >
                   <div className="absolute inset-0 bg-[#0a192f] z-0">
@@ -186,10 +193,20 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
                           />
                         </div>
                         {isIng && (
-                          <div className="text-white/80 tracking-[0.3em] text-xs font-semibold uppercase mt-1">
+                          <div className="text-white/80 tracking-[0.2em] text-[10px] sm:text-xs font-semibold uppercase mt-1 text-center">
                             Ingenieurgesellschaft
                           </div>
                         )}
+                        {isVerwaltung && (
+                          <div className="text-white/80 tracking-[0.2em] text-[10px] sm:text-xs font-semibold uppercase mt-1 text-center">
+                            Verwaltung GmbH
+                          </div>
+                        )}
+                        {isBohrtechnik && (
+                          <div className="text-white/80 tracking-[0.2em] text-[10px] sm:text-xs font-semibold uppercase mt-1 text-center">
+                            Bohrtechnik GmbH
+                          </div>
+                        )}
                       </div>
                     ) : isNemo ? (
                       <div className="flex flex-col items-center">