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

chore: completely remove all decorative animations as requested

Browse Source 
Former-commit-id: 1efd9a9ae1d934a64375765f984740af874dd1a9
This commit is contained in:
Marc Mintel
2026-05-11 22:30:01 +02:00
parent 2e1e34a617
commit 9ed690c53f
10 changed files with 0 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/blocks/CompetenceBentoGrid.tsx
View File

@@ -6,9 +6,6 @@ import { motion } from 'framer-motion';
import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/Button';
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
import { StratumLines } from '@/components/ui/decorations/StratumLines';
import { HDDBoreAnimation } from '@/components/ui/decorations/HDDBoreAnimation';
import { TrenchLayingAnimation } from '@/components/ui/decorations/TrenchLayingAnimation';
interface CompetenceBentoGridProps {
badge?: string;
@@ -170,10 +167,6 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
})}
</div>
</div>
{/* Content-Aware Animation: HDD Drilling */}
<HDDBoreAnimation className="top-1/4 opacity-40" invert />
{/* Content-Aware Animation: Trenching */}
<TrenchLayingAnimation className="bottom-0 opacity-40" invert />
</section>
);
}

6
components/blocks/HeroSection.tsx
View File

@@ -3,8 +3,6 @@ import Image from 'next/image';
import Reveal from '@/components/Reveal';
import { Badge, Container, Heading } from '@/components/ui';
import { Button } from '@/components/ui/Button';
import { HDDBoreAnimation } from '@/components/ui/decorations/HDDBoreAnimation';
import { TrenchLayingAnimation } from '@/components/ui/decorations/TrenchLayingAnimation';
export interface HeroSectionProps {
title: string;
@@ -72,10 +70,6 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
)}
</div>
</Container>
{/* Content-Aware Animation: HDD Drilling & Pipe Pullback */}
<HDDBoreAnimation className="top-1/3 -translate-y-1/2 opacity-60" />
{/* Content-Aware Animation: Trench Cutting & Pipe Laying */}
<TrenchLayingAnimation className="bottom-0 opacity-60" />
</section>
</Reveal>
);

3
components/blocks/HeroVideo.tsx
View File

@@ -4,7 +4,6 @@ import { Button } from '@/components/ui/Button';
import Image from 'next/image';
import { motion, AnimatePresence } from 'framer-motion';
import { useState, useEffect } from 'react';
import { HDDBoreAnimation } from '@/components/ui/decorations/HDDBoreAnimation';
interface HeroVideoProps {
data?: any;
@@ -109,8 +108,6 @@ export function HeroVideo(props: HeroVideoProps) {
</div>
</motion.div>
</div>
{/* Content-Aware Animation: HDD Drilling */}
<HDDBoreAnimation className="bottom-0 opacity-40 z-[5]" />
</div>
);
}

6
components/blocks/ReferencesSlider.tsx
View File

@@ -5,8 +5,6 @@ import { motion } from 'framer-motion';
import Link from 'next/link';
import Image from 'next/image';
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
import { HDDBoreAnimation } from '@/components/ui/decorations/HDDBoreAnimation';
import { TrenchLayingAnimation } from '@/components/ui/decorations/TrenchLayingAnimation';
export interface Reference {
id: string;
@@ -153,10 +151,6 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
<svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</Link>
</div>
{/* Content-Aware Animation: HDD Drilling */}
<HDDBoreAnimation className="top-1/4 opacity-30" />
{/* Content-Aware Animation: Trenching */}
<TrenchLayingAnimation className="bottom-0 opacity-30" />
</section>
);
}

3
components/blocks/ServiceDetailGrid.tsx
View File

@@ -3,7 +3,6 @@
import * as React from 'react';
import { motion, Variants } from 'framer-motion';
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
import { TrenchLayingAnimation } from '@/components/ui/decorations/TrenchLayingAnimation';
export interface ServicePanelData {
id: string;
@@ -230,8 +229,6 @@ export function ServiceDetailGrid({
})}
</motion.div>
</div>
{/* Content-Aware Animation: Trenching */}
<TrenchLayingAnimation className="bottom-0 opacity-20" invert />
</section>
);
}

6
components/blocks/SubCompanyTiles.tsx
View File

@@ -4,8 +4,6 @@ import * as React from 'react';
import { motion, Variants } from 'framer-motion';
import Image from 'next/image';
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
import { HDDBoreAnimation } from '@/components/ui/decorations/HDDBoreAnimation';
import { TrenchLayingAnimation } from '@/components/ui/decorations/TrenchLayingAnimation';
interface SubCompanyTilesProps {
badge?: string;
@@ -199,10 +197,6 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
})}
</motion.div>
</div>
{/* Content-Aware Animation: HDD Drilling */}
<HDDBoreAnimation className="top-1/4 opacity-40" />
{/* Content-Aware Animation: Trenching */}
<TrenchLayingAnimation className="bottom-0 opacity-40" />
</section>
);
}

9
components/layout/Footer.tsx
View File

@@ -3,9 +3,6 @@ import Image from 'next/image';
import { useLocale } from 'next-intl';
import { ShieldCheck, Leaf, Lock, Accessibility, Zap } from 'lucide-react';
import { LanguageSwitcher } from './LanguageSwitcher';
import { StratumLines } from '@/components/ui/decorations/StratumLines';
import { HDDBoreAnimation } from '@/components/ui/decorations/HDDBoreAnimation';
import { TrenchLayingAnimation } from '@/components/ui/decorations/TrenchLayingAnimation';
interface CompanyInfo {
contactEmail: string;
@@ -153,12 +150,6 @@ export function Footer({ companyInfo }: FooterProps) {
<div className="flex items-center gap-2"><Zap className="w-4 h-4 text-white/40" /><span>High Performance</span></div>
</div>
</div>
{/* Content-Aware Animation: HDD Drilling */}
<HDDBoreAnimation className="top-0 opacity-20" invert />
{/* Content-Aware Animation: Trenching */}
<TrenchLayingAnimation className="bottom-0 opacity-20" invert />
{/* Abstract earth strata */}
<StratumLines placement="bottom-right" />
</footer>
);
}

20
components/providers/PageTransitionShutter.tsx
View File

@@ -23,10 +23,6 @@ export function PageTransitionShutter() {
top: '0',
}}
>
{/* Bottom massive Drill Bit Teeth edge (leading edge cutting down) */}
<svg viewBox="0 0 1000 100" preserveAspectRatio="none" className="absolute bottom-0 translate-y-full left-0 w-full h-[clamp(40px,8vw,120px)] text-[#050B14]">
<path d="M0,0 L1000,0 L1000,10 L960,100 L920,10 L880,100 L840,10 L800,100 L760,10 L720,100 L680,10 L640,100 L600,10 L560,100 L520,10 L480,100 L440,10 L400,100 L360,10 L320,100 L280,10 L240,100 L200,10 L160,100 L120,10 L80,100 L40,10 L0,100 Z" fill="currentColor" />
</svg>
{/* Subtle grid background */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
@@ -151,22 +147,6 @@ export function PageTransitionShutter() {
)
)}
</AnimatePresence>
{/* ── Abstract horizontal energy pulse (Loader) ── */}
<motion.div
className="mt-12 relative flex items-center justify-center w-48 h-[2px] bg-white/10 overflow-hidden rounded-full"
initial={{ opacity: 0, scaleX: 0 }}
animate={{ opacity: 1, scaleX: 1 }}
exit={{ opacity: 0, scaleX: 0 }}
transition={{ duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1] }}
>
<motion.div
className="absolute left-0 top-0 bottom-0 bg-primary w-1/3 rounded-full blur-[1px]"
animate={{ x: ['-100%', '300%'] }}
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
/>
</motion.div>
</motion.div>
</motion.div>
)}

93
components/ui/decorations/HDDBoreAnimation.tsx
View File

@@ -1,93 +0,0 @@
'use client';
import { motion } from 'framer-motion';
interface HDDBoreAnimationProps {
className?: string;
invert?: boolean;
}
/**
* HDDBoreAnimation
*
* Visualizes Horizontal Directional Drilling (Spülbohren).
* 1. A segmented drill rod (Gestänge) pushes through a subterranean arc (Pilotbohrung).
* 2. It pulls back a thick, solid orange pipe (Rohreinzug).
*
* This directly ties to E-TIB's core services, visually representing the
* physical act of laying a conduit pipe under an obstacle.
*/
export function HDDBoreAnimation({ className = '', invert = false }: HDDBoreAnimationProps) {
// Track color
const color = invert ? '#0a3d28' : '#0e7a5c';
// Bright orange for the conduit pipe (Kabelschutzrohr)
const pipeColor = '#ff6b00';
// Parabolic path under an implied obstacle
const pathD = "M 50 100 C 300 100 400 250 600 250 C 800 250 900 100 1150 100";
// Length of this cubic bezier is approx 1300
const pathLen = 1300;
return (
<svg
viewBox="0 0 1200 300"
preserveAspectRatio="none"
className={`absolute pointer-events-none select-none w-full ${className}`}
aria-hidden="true"
>
{/* Planned path (subtle) */}
<path
d={pathD}
stroke={color}
strokeWidth="2"
strokeDasharray="5 15"
fill="none"
opacity={0.15}
/>
{/* Step 1: Drill Rod (Pilotbohrung) pushing Left -> Right */}
<motion.path
d={pathD}
stroke={color}
strokeWidth="4"
fill="none"
strokeLinecap="round"
// Segmented rod look (40px rod, 5px gap)
strokeDasharray={`40 5 ${pathLen}`}
animate={{
strokeDashoffset: [pathLen, 0, 0, 0, pathLen],
opacity: [0, 1, 1, 0, 0]
}}
transition={{
duration: 10,
repeat: Infinity,
ease: "easeInOut",
times: [0, 0.4, 0.45, 0.46, 1] // 0-4s: push, 4-4.5s: pause, 4.6s: vanish
}}
/>
{/* Step 2: Cable/Pipe Pullback (Rohreinzug) Right -> Left */}
<motion.path
d={pathD}
stroke={pipeColor}
strokeWidth="8"
fill="none"
strokeLinecap="round"
// Solid pipe
strokeDasharray={`${pathLen} ${pathLen}`}
animate={{
// Starts hidden at the right (offset = -pathLen)
// Pulls back to left (offset = 0)
strokeDashoffset: [-pathLen, -pathLen, 0, 0, -pathLen],
opacity: [0, 0, 1, 1, 0]
}}
transition={{
duration: 10,
repeat: Infinity,
ease: "easeInOut",
times: [0, 0.45, 0.85, 0.95, 1] // 0-4.5s: hidden, 4.5-8.5s: pull back, 8.5-9.5s: rest, 10s: reset
}}
/>
</svg>
);
}

100
components/ui/decorations/TrenchLayingAnimation.tsx
View File

@@ -1,100 +0,0 @@
'use client';
import { motion } from 'framer-motion';
interface TrenchLayingAnimationProps {
className?: string;
invert?: boolean;
}
/**
* TrenchLayingAnimation
*
* Visualizes open trench construction (Offene Bauweise / Graben).
* 1. A trench is cut into the earth line.
* 2. A thick orange conduit pipe (Leerrohr) is laid into the trench.
* 3. The trench is backfilled with earth.
*
* This directly ties to E-TIB's core services, showing the process
* of laying cables rather than just abstract geometry.
*/
export function TrenchLayingAnimation({ className = '', invert = false }: TrenchLayingAnimationProps) {
const color = invert ? '#0a3d28' : '#0e7a5c';
const earthColor = invert ? 'rgba(10, 61, 40, 0.4)' : 'rgba(14, 122, 92, 0.4)';
const pipeColor = '#ff6b00';
// The trench profile: flat, 45-deg drop, flat bottom, 45-deg rise, flat
const trenchPath = "M 50 100 L 300 100 L 350 200 L 850 200 L 900 100 L 1150 100";
// The dug out area (used for the backfill animation)
const trenchFill = "M 300 100 L 350 200 L 850 200 L 900 100 Z";
// Length of the polyline is approx 1300
const pathLen = 1300;
return (
<svg
viewBox="0 0 1200 300"
preserveAspectRatio="none"
className={`absolute pointer-events-none select-none w-full ${className}`}
aria-hidden="true"
>
{/* Ground surface line (always visible outside the trench) */}
<line x1="0" y1="100" x2="1200" y2="100" stroke={color} strokeWidth="2" opacity={0.3} />
{/* Step 1: Trench cutting Left -> Right */}
<motion.path
d={trenchPath}
stroke={color}
strokeWidth="3"
fill="none"
strokeLinejoin="round"
strokeDasharray={`${pathLen} ${pathLen}`}
animate={{
strokeDashoffset: [pathLen, 0, 0, 0, pathLen]
}}
transition={{
duration: 10,
repeat: Infinity,
times: [0, 0.25, 0.8, 0.9, 1], // Cuts quickly (0-2.5s), stays open, closes at 9s
ease: "linear"
}}
/>
{/* Step 2: Pipe Laying (Drops into trench closely behind the cut) */}
<motion.path
d={trenchPath}
stroke={pipeColor}
strokeWidth="6"
fill="none"
strokeLinejoin="round"
strokeLinecap="round"
strokeDasharray={`${pathLen} ${pathLen}`}
animate={{
strokeDashoffset: [pathLen, pathLen, 0, 0, pathLen],
opacity: [0, 1, 1, 0, 0]
}}
transition={{
duration: 10,
repeat: Infinity,
times: [0, 0.1, 0.4, 0.8, 1], // Starts unspooling at 1s, finishes laying at 4s
ease: "linear"
}}
/>
{/* Step 3: Sand/Earth backfill (Fades in over the pipe) */}
<motion.path
d={trenchFill}
fill={earthColor}
initial={{ opacity: 0 }}
animate={{
opacity: [0, 0, 1, 1, 0]
}}
transition={{
duration: 10,
repeat: Infinity,
times: [0, 0.4, 0.5, 0.8, 1], // Fades in between 4s and 5s, covers the pipe
ease: "easeInOut"
}}
/>
</svg>
);
}