fix(components): revert subcompany tiles to real high-fidelity image tiles and center actual logos inside them without title text
Former-commit-id: 54efe2ead3fdd0aca1d722a4fad078764239430e
This commit is contained in:
@@ -3,20 +3,14 @@
|
||||
import * as React from 'react';
|
||||
import { motion, Variants } from 'framer-motion';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface SubCompanyTilesProps {
|
||||
badge?: string;
|
||||
title?: string;
|
||||
companies?: {
|
||||
title?: string;
|
||||
description?: string;
|
||||
icon?: string;
|
||||
url?: string;
|
||||
backgroundImage?: {
|
||||
url?: string;
|
||||
alt?: string;
|
||||
} | any;
|
||||
backgroundImage?: string;
|
||||
}[];
|
||||
data?: any;
|
||||
}
|
||||
@@ -24,18 +18,18 @@ interface SubCompanyTilesProps {
|
||||
const defaultCompanies = [
|
||||
{
|
||||
title: 'E-TIB GmbH',
|
||||
icon: 'M13 10V3L4 14h7v7l9-11h-7z',
|
||||
url: 'https://www.e-tib.com/',
|
||||
backgroundImage: '/assets/photos/DJI_0243.JPG',
|
||||
},
|
||||
{
|
||||
title: 'E-TIB Ingenieurgesellschaft mbH',
|
||||
icon: 'M14 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V8l-6-6z M14 3v5h5 M16 13H8 M16 17H8 M10 9H8',
|
||||
url: 'https://www.etib-ing.com/',
|
||||
backgroundImage: '/assets/photos/DSC01137.JPG',
|
||||
},
|
||||
{
|
||||
title: 'NEMO GmbH',
|
||||
icon: 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z',
|
||||
url: 'https://www.nemo-gmbh.de/',
|
||||
backgroundImage: '/assets/photos/DJI_0048.JPG',
|
||||
}
|
||||
];
|
||||
|
||||
@@ -44,28 +38,38 @@ const containerVariants: Variants = {
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
staggerChildren: 0.15,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants: Variants = {
|
||||
hidden: { opacity: 0, y: 15 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] } },
|
||||
};
|
||||
|
||||
export function SubCompanyTiles(props: SubCompanyTilesProps) {
|
||||
const { data } = props;
|
||||
const badge = props.badge || data?.badge;
|
||||
const title = props.title || data?.title;
|
||||
const rawCompanies = props.companies || data?.companies;
|
||||
const companiesData = rawCompanies?.map((c: any) => ({
|
||||
title: c.title,
|
||||
url: c.url,
|
||||
icon: c.icon || 'M13 10V3L4 14h7v7l9-11h-7z',
|
||||
backgroundImage: c.backgroundImage?.url || c.backgroundImage || '/assets/photos/DJI_0243.JPG',
|
||||
})) || defaultCompanies;
|
||||
|
||||
return (
|
||||
<section id="unternehmen" className="py-8 bg-neutral-50 border-b border-neutral-100">
|
||||
<div className="container relative z-10">
|
||||
<section id="unternehmen" className="py-24 bg-neutral-dark border-b border-neutral-800">
|
||||
<div className="container relative z-10 px-4">
|
||||
|
||||
{(badge || title) && (
|
||||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||
{badge && <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>}
|
||||
{title && <h3 className="font-heading text-4xl md:text-5xl font-extrabold text-white">{title}</h3>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
className="grid grid-cols-1 md:grid-cols-3 gap-6"
|
||||
variants={containerVariants}
|
||||
@@ -77,6 +81,11 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
|
||||
const CardWrapper = company.url ? 'a' : 'div';
|
||||
const wrapperProps = company.url ? { 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 isNemo = company.title.includes('NEMO');
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
@@ -85,16 +94,67 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
|
||||
>
|
||||
<CardWrapper
|
||||
{...wrapperProps}
|
||||
className="group flex items-center justify-center gap-4 bg-white rounded-xl p-6 shadow-sm border border-neutral-100 transition-all duration-300 hover:shadow-md hover:border-primary/30 cursor-pointer h-full"
|
||||
className="group relative overflow-hidden aspect-[4/3] flex flex-col justify-center items-center shadow-xl border border-white/5 transition-all duration-500 hover:shadow-2xl hover:-translate-y-1 bg-neutral-dark cursor-pointer block w-full h-full sm:rounded-xl"
|
||||
>
|
||||
<div className="w-10 h-10 shrink-0 text-primary group-hover:scale-110 transition-transform duration-300 flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d={company.icon} />
|
||||
</svg>
|
||||
<div className="absolute inset-0 bg-[#0a192f] z-0">
|
||||
<Image
|
||||
src={company.backgroundImage}
|
||||
alt="Background"
|
||||
fill
|
||||
className="object-cover opacity-40 group-hover:opacity-30 group-hover:scale-110 transition-all duration-1000 ease-out grayscale-[50%] group-hover:grayscale-0"
|
||||
sizes="(max-width: 768px) 100vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
<h4 className="font-heading font-bold text-lg text-neutral-dark group-hover:text-primary transition-colors">
|
||||
{company.title}
|
||||
</h4>
|
||||
|
||||
{/* Heavy dark gradient overlay to make logos pop */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#0a192f]/90 via-[#0a192f]/60 to-[#0a192f]/40 z-0 group-hover:from-primary/90 group-hover:to-primary/20 transition-colors duration-700 mix-blend-multiply" />
|
||||
|
||||
<div className="relative z-10 flex flex-col items-center justify-center w-full h-full p-8 transform group-hover:scale-105 transition-transform duration-500">
|
||||
|
||||
{/* LOGO RENDERING */}
|
||||
{isEtib ? (
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="relative w-48 h-14 mb-2">
|
||||
<Image
|
||||
src="/assets/logo-white.png"
|
||||
alt="E-TIB Logo"
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
{isIng && (
|
||||
<div className="text-white/80 tracking-[0.3em] text-xs font-semibold uppercase mt-1">
|
||||
Ingenieurgesellschaft
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : isNemo ? (
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="text-5xl font-heading font-black text-white tracking-tight">
|
||||
NEMO
|
||||
</div>
|
||||
<div className="text-white/60 tracking-widest text-xs font-semibold uppercase mt-1">
|
||||
GmbH
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-2xl font-heading font-bold text-white uppercase text-center">
|
||||
{company.title}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{/* Subtle Link Indicator */}
|
||||
{company.url && (
|
||||
<div className="absolute bottom-6 left-0 right-0 flex justify-center opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-500 z-20">
|
||||
<div className="flex items-center text-white font-bold uppercase text-xs tracking-widest bg-white/10 backdrop-blur-md px-4 py-2 rounded-full border border-white/20">
|
||||
Website Besuchen
|
||||
<svg className="w-4 h-4 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</CardWrapper>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user