mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

feat: implement minimalist corporate design (Horizontal Bohrung & Graben-Trace)

Browse Source 
Former-commit-id: 7f7c3d20bd6c746ef19140c532a64c518a31802b
This commit is contained in:
Marc Mintel
2026-05-10 11:24:59 +02:00
parent 2ce9ac11e7
commit 1405252701
6 changed files with 149 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/blocks/CompetenceBentoGrid.tsx
View File

@@ -110,8 +110,6 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
transition={{ delay: idx * 0.1 }}
className={gridClasses}
>
<div className="absolute top-0 right-0 w-32 h-32 bg-primary/30 blur-3xl rounded-full -mr-10 -mt-10 group-hover:bg-primary/50 transition-colors duration-500" />
<HoverShineOverlay shineColor="via-white/30" />
<h4 className="font-bold text-xl md:text-2xl relative z-10 leading-snug">{item.title}</h4>
{item.description && <p className="text-white/60 text-sm mt-3 relative z-10">{item.description}</p>}
</motion.div>
@@ -125,14 +123,15 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ delay: idx * 0.1 }}
className={gridClasses}
className={`${gridClasses} group trassen-border border border-white/5 rounded-3xl overflow-hidden`}
>
<div className="trassen-content" />
{!imgSrc && (
<div className="absolute inset-0 bg-neutral-dark z-0 transition-colors duration-500 group-hover:bg-primary-dark" />
<div className="absolute inset-[1px] rounded-[inherit] bg-neutral-dark z-[2] transition-colors duration-500 group-hover:bg-primary-dark" />
)}
{imgSrc && (
<>
<div className="absolute inset-0 bg-white z-0">
<div className="absolute inset-[1px] rounded-[inherit] bg-white z-[2] overflow-hidden">
<Image
src={imgSrc}
alt={item.title || ''}

9
components/blocks/JobListingBlock.tsx
View File

@@ -54,12 +54,9 @@ export const JobListingBlock = async (props: JobListingBlockProps) => {
const isLink = !!messe.url;
const innerContent = (
<>
{/* Glass Background Elements */}
<div className="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
<div className="absolute -top-32 -right-32 w-64 h-64 bg-primary/20 blur-[100px] rounded-full group-hover:bg-primary/30 transition-colors duration-700" />
{/* Minimalist Trassen Content Background */}
<div className="trassen-content border border-white/5" />
<HoverShineOverlay shineColor="via-primary/10" />
<div className="relative z-10 flex-grow flex flex-col">
<div className="flex justify-between items-start mb-6">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/[0.05] border border-white/10 text-xs font-bold uppercase tracking-wider text-primary-light backdrop-blur-sm">
@@ -116,7 +113,7 @@ export const JobListingBlock = async (props: JobListingBlockProps) => {
</>
);
const baseClasses = "group relative bg-[#050B14] rounded-[2rem] p-8 overflow-hidden border border-white/5 shadow-2xl transition-all duration-500 hover:scale-[1.02] hover:shadow-primary/10 flex flex-col h-full";
const baseClasses = "group trassen-border rounded-[2rem] p-8 shadow-2xl transition-all duration-500 hover:scale-[1.02] hover:shadow-primary/10 flex flex-col h-full";
if (isLink) {
return (