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

fix: mobile layout and visual polishing based on review
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 31s
Details
Build & Deploy / 🧪 QA (push) Successful in 1m31s
Details
Build & Deploy / 🏗️ Build (push) Successful in 2m54s
Details
Build & Deploy / 🚀 Deploy (push) Successful in 36s
Details
Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 1m0s
Details
Build & Deploy / 🔔 Notify (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-06-19 22:34:53 +02:00
parent d00a4e29ff
commit 41158697fd
19 changed files with 99 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/blocks/BenefitGrid.tsx
View File

@@ -99,7 +99,7 @@ export function BenefitGrid({ badge, title, description, benefits }: BenefitGrid
variants={containerVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-50px" }}
viewport={{ once: true, amount: 0.1 }}
>
{benefits.map((benefit, index) => {
const bgPositionClasses = [

10
components/blocks/CompetenceBentoGrid.tsx
View File

@@ -127,8 +127,8 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
<HoverShineOverlay shineColor="via-white/30" />
<AnimatedGlossyBorder color="white" className="opacity-0 group-hover:opacity-100 transition-opacity duration-700" borderWidth={1} />
<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>}
<h4 className="font-heading font-extrabold text-2xl md:text-3xl relative z-10 leading-snug">{item.title}</h4>
{item.description && <p className="text-white/80 text-base md:text-lg mt-3 relative z-10 font-medium">{item.description}</p>}
</motion.div>
);
}
@@ -159,7 +159,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
sizes={isLarge ? "(max-width: 768px) 100vw, 50vw" : "(max-width: 768px) 100vw, 25vw"}
/>
</div>
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-90 transition-opacity duration-500 z-0" />
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/60 to-black/30 opacity-100 transition-opacity duration-500 z-0 group-hover:from-black/80 group-hover:via-black/50 group-hover:to-black/20" />
</>
)}
@@ -177,11 +177,11 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
{item.tag}
</span>
)}
<h4 className={`font-heading font-extrabold mb-2 ${isLarge ? 'text-2xl md:text-5xl' : 'text-xl md:text-2xl'}`}>
<h4 className="font-heading font-extrabold mb-2 text-2xl md:text-3xl">
{item.title}
</h4>
{item.description && (
<p className={`text-white/80 ${isLarge ? 'text-lg md:text-xl max-w-sm' : 'text-sm'}`}>
<p className="text-white/90 text-sm md:text-base max-w-md">
{item.description}
</p>
)}

4
components/blocks/ContactSection.tsx
View File

@@ -49,7 +49,7 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
variants={containerVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-50px" }}
viewport={{ once: true, amount: 0.1 }}
>
<motion.h2 variants={itemVariants} className="text-primary font-bold tracking-wider uppercase text-sm mb-3">Direktkontakt</motion.h2>
<motion.h3 variants={itemVariants} className="font-heading text-3xl md:text-4xl font-extrabold text-neutral-dark mb-6">Wir sind für Sie da.</motion.h3>
@@ -104,7 +104,7 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
variants={formVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-50px" }}
viewport={{ once: true, amount: 0.1 }}
>
<Suspense
fallback={

6
components/blocks/GrowthChart.tsx
View File

@@ -45,7 +45,7 @@ export function GrowthChart() {
<motion.div
initial={{ width: 0 }}
whileInView={{ width: `${kabelWidth}%` }}
viewport={{ once: true, margin: "-50px" }}
viewport={{ once: true, amount: 0.1 }}
transition={{ duration: 1.5, delay: 0.1 * index, ease: "easeOut" }}
className="absolute top-0 left-0 h-full bg-primary rounded-full"
/>
@@ -61,7 +61,7 @@ export function GrowthChart() {
<motion.div
initial={{ width: 0 }}
whileInView={{ width: `${offenerWidth}%` }}
viewport={{ once: true, margin: "-50px" }}
viewport={{ once: true, amount: 0.1 }}
transition={{ duration: 1.5, delay: 0.15 + 0.1 * index, ease: "easeOut" }}
className="absolute top-0 left-0 h-full bg-neutral-300 rounded-full"
/>
@@ -77,7 +77,7 @@ export function GrowthChart() {
<motion.div
initial={{ width: 0 }}
whileInView={{ width: `${hddWidth}%` }}
viewport={{ once: true, margin: "-50px" }}
viewport={{ once: true, amount: 0.1 }}
transition={{ duration: 1.5, delay: 0.2 + 0.1 * index, ease: "easeOut" }}
className="absolute top-0 left-0 h-full bg-neutral-dark rounded-full"
/>

4
components/blocks/HeroSection.tsx
View File

@@ -92,7 +92,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
</motion.div>
)}
<motion.div variants={itemVariants}>
<Heading level={1} variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
<Heading level={1} size="section" variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
{title}
</Heading>
</motion.div>
@@ -104,7 +104,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
</motion.div>
)}
{ctaLabel && ctaHref && (
<motion.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex justify-center' : ''}`}>
<motion.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`}>
<Button
href={ctaHref}
variant="accent"

2
components/blocks/HeroVideo.tsx
View File

@@ -96,7 +96,7 @@ export function HeroVideo(props: HeroVideoProps) {
{subtitle}
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-6">
<div className="flex flex-wrap items-center justify-center gap-4 md:gap-6">
<Button
href={ctaHref}
variant="primary"

10
components/blocks/JobListingBlock.tsx
View File

@@ -75,7 +75,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
<motion.h3
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, margin: "-100px" }}
viewport={{ once: true, amount: 0.1 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }}
className="font-heading font-extrabold text-3xl md:text-4xl text-neutral-dark mb-8 md:mb-12 flex items-center gap-4"
>
@@ -86,7 +86,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
variants={containerVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
viewport={{ once: true, amount: 0.1 }}
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
>
{fairs.map((messe, idx) => {
@@ -180,7 +180,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
<motion.h2
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, margin: "-100px" }}
viewport={{ once: true, amount: 0.1 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }}
className="font-heading font-extrabold text-3xl md:text-4xl text-neutral-dark mb-6 md:mb-8"
>
@@ -192,7 +192,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
variants={containerVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
viewport={{ once: true, amount: 0.1 }}
className="grid gap-6"
>
{jobs.map((job: any) => (
@@ -221,7 +221,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
viewport={{ once: true, amount: 0.1 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }}
className="bg-neutral-50 border border-neutral-100 rounded-2xl p-12 text-center"
>

4
components/blocks/ReferencesSlider.tsx
View File

@@ -94,7 +94,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
return (
<section id="referenzen" className="py-16 md:py-24 lg:py-32 bg-neutral-dark text-white relative overflow-hidden">
<section id="referenzen" className="pt-16 pb-8 md:py-24 lg:py-32 bg-neutral-dark text-white relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-b from-neutral-dark via-neutral-900 to-neutral-dark z-0" />
<div className="container relative z-10 mb-12 flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
@@ -115,7 +115,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
onMouseLeave={onMouseLeave}
onMouseUp={onMouseUp}
onMouseMove={onMouseMove}
className={`select-none flex gap-6 overflow-x-auto pb-12 pt-4 px-[max(1rem,calc((100vw-1280px)/2))] md:px-[max(2rem,calc((100vw-1280px)/2))] lg:px-[max(2.5rem,calc((100vw-1280px)/2))] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 px-6 md:px-[max(2rem,calc((100vw-1280px)/2))] lg:px-[max(2.5rem,calc((100vw-1280px)/2))] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
>
{references.map((ref, i) => {
const imgSrc = (ref.image && typeof ref.image === 'object' && ref.image.url)

2
components/blocks/ScaleOfImpact.tsx
View File

@@ -38,7 +38,7 @@ export function ScaleOfImpact() {
{/* Foreground Content */}
<div className="relative z-10 container max-w-7xl mx-auto px-4 flex flex-col items-center text-center">
<h2 className="text-2xl md:text-5xl font-heading font-extrabold text-white mb-6 tracking-tight">
<h2 className="text-3xl sm:text-4xl md:text-5xl font-heading font-extrabold text-white mb-6 tracking-tight leading-tight">
{locale === 'en' ? (
<>An infrastructure <br className="md:hidden"/> that connects the country.</>
) : (

4
components/blocks/ServiceDetailGrid.tsx
View File

@@ -136,7 +136,7 @@ export function ServiceDetailGrid({
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-50px" }}
viewport={{ once: true, amount: 0.1 }}
transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
className="max-w-4xl mx-auto mb-20 grid md:grid-cols-2 gap-0 bg-white rounded-2xl overflow-hidden shadow-lg border border-neutral-200 text-left"
>
@@ -173,7 +173,7 @@ export function ServiceDetailGrid({
variants={containerVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-50px" }}
viewport={{ once: true, amount: 0.1 }}
>
{panels.map((panel, idx) => {
const isFullWidth = panel.fullWidth;

2
components/blocks/SubCompanyTiles.tsx
View File

@@ -68,7 +68,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
})) || defaultCompanies;
return (
<section id="unternehmen" className="py-16 md:py-24 lg:py-32 bg-neutral-dark border-b border-neutral-800 relative overflow-hidden">
<section id="unternehmen" className="pt-12 pb-16 md:py-24 lg:py-32 bg-neutral-dark border-b border-neutral-800 relative overflow-hidden">
<div className="container relative z-10 px-4">
{(badge || title) && (

2
components/blocks/TeamGrid.tsx
View File

@@ -44,7 +44,7 @@ export function TeamGrid({ members }: TeamGridProps) {
key={member.id}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-50px" }}
viewport={{ once: true, amount: 0.1 }}
transition={{ delay: i * 0.1, duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
className="group flex flex-col bg-white rounded-[2rem] border border-neutral-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(238,114,3,0.1)] transition-all duration-500 hover:-translate-y-2 overflow-hidden"
>