mmintel/mb-grid-solutions.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile
All checks were successful
Build & Deploy MB Grid Solutions / build-and-deploy (push) Successful in 1m49s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 17:00:06 +01:00
parent 44d4ac38b6
commit e033fd6290
7 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/AboutContent.tsx
View File

@@ -30,12 +30,12 @@ export default function About() {
</span> </span>
</Reveal> </Reveal>
<Reveal delay={0.2}> <Reveal delay={0.2}>
<h1 className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight"> <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold text-primary mb-6 md:mb-8 leading-tight">
Wir gestalten die <span className="text-accent">Infrastruktur</span> der Zukunft Wir gestalten die <span className="text-accent">Infrastruktur</span> der Zukunft
</h1> </h1>
</Reveal> </Reveal>
<Reveal delay={0.3}> <Reveal delay={0.3}>
<p className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-8"> <p className="text-slate-600 text-lg md:text-2xl leading-relaxed mb-8">
MB Grid Solution steht for technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse. MB Grid Solution steht for technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse.
</p> </p>
</Reveal> </Reveal>
@@ -89,8 +89,8 @@ export default function About() {
<Counter value={3} className="section-number !text-white/5" /> <Counter value={3} className="section-number !text-white/5" />
<Reveal className="mb-20"> <Reveal className="mb-20">
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Werte</span> <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Werte</span>
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Unser Manifest</h2> <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">Unser Manifest</h2>
<p className="text-slate-400 text-lg">Werte, die unsere tägliche Arbeit leiten und den Erfolg Ihrer Projekte sichern.</p> <p className="text-slate-400 text-base md:text-lg">Werte, die unsere tägliche Arbeit leiten und den Erfolg Ihrer Projekte sichern.</p>
</Reveal> </Reveal>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -123,17 +123,17 @@ export default function About() {
<div className="container-custom relative z-10"> <div className="container-custom relative z-10">
<div className="section-number">04</div> <div className="section-number">04</div>
<Reveal> <Reveal>
<div className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden group"> <div className="relative rounded-3xl md:rounded-[2.5rem] bg-slate-900 p-8 md:p-24 overflow-hidden group">
<div className="tech-corner top-8 left-8 border-t-2 border-l-2" /> <div className="tech-corner top-8 left-8 border-t-2 border-l-2" />
<div className="tech-corner bottom-8 right-8 border-b-2 border-r-2" /> <div className="tech-corner bottom-8 right-8 border-b-2 border-r-2" />
<div className="relative z-10 max-w-2xl"> <div className="relative z-10 max-w-2xl">
<h2 className="text-4xl md:text-5xl font-bold text-white mb-8"> <h2 className="text-3xl md:text-5xl font-bold text-white mb-6 md:mb-8">
Bereit für Ihr nächstes Projekt? Bereit für Ihr nächstes Projekt?
</h2> </h2>
<p className="text-slate-400 text-xl mb-12"> <p className="text-slate-400 text-lg md:text-xl mb-8 md:mb-12">
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden. Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
</p> </p>
<Button href="/kontakt" variant="accent" showArrow className="!px-10 !py-5 text-lg"> <Button href="/kontakt" variant="accent" showArrow className="w-full sm:w-auto !px-10 !py-5 text-lg">
Jetzt Kontakt aufnehmen Jetzt Kontakt aufnehmen
</Button> </Button>
</div> </div>

2
components/Button.tsx
View File

@@ -37,7 +37,7 @@ export const Button = ({
}); });
}; };
const baseStyles = "inline-flex items-center justify-center px-10 py-5 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] transition-all duration-500 relative group disabled:opacity-50 disabled:cursor-not-allowed select-none overflow-hidden"; const baseStyles = "inline-flex items-center justify-center px-6 py-4 md:px-10 md:py-5 rounded-xl md:rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] transition-all duration-500 relative group disabled:opacity-50 disabled:cursor-not-allowed select-none overflow-hidden";
const variants = { const variants = {
primary: "bg-primary text-white shadow-lg", primary: "bg-primary text-white shadow-lg",

22
components/ContactContent.tsx
View File

@@ -56,12 +56,12 @@ export default function Contact() {
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</span> <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</span>
</Reveal> </Reveal>
<Reveal delay={0.2}> <Reveal delay={0.2}>
<h1 className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight"> <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold text-primary mb-6 md:mb-8 leading-tight">
Lassen Sie uns <span className="text-accent">sprechen</span> Lassen Sie uns <span className="text-accent">sprechen</span>
</h1> </h1>
</Reveal> </Reveal>
<Reveal delay={0.3}> <Reveal delay={0.3}>
<p className="text-slate-600 text-xl md:text-2xl leading-relaxed"> <p className="text-slate-600 text-lg md:text-2xl leading-relaxed">
Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht. Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
</p> </p>
</Reveal> </Reveal>
@@ -76,13 +76,13 @@ export default function Contact() {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 md:gap-24"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 md:gap-24">
<div className="space-y-8"> <div className="space-y-8">
<Reveal delay={0.1}> <Reveal delay={0.1}>
<div className="bg-white/5 p-8 rounded-2xl border border-white/10 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300 relative overflow-hidden"> <div className="bg-white/5 p-6 md:p-8 rounded-2xl border border-white/10 flex flex-col sm:flex-row gap-4 sm:gap-6 items-start hover:translate-x-1 transition-transform duration-300 relative overflow-hidden">
<div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0 relative z-10"> <div className="w-12 h-12 md:w-14 md:h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0 relative z-10">
<Mail size={24} /> <Mail size={24} />
</div> </div>
<div className="relative z-10"> <div className="relative z-10">
<h4 className="text-slate-400 font-bold text-xs uppercase tracking-widest mb-2">E-Mail</h4> <h4 className="text-slate-400 font-bold text-xs uppercase tracking-widest mb-1 md:mb-2">E-Mail</h4>
<a href="mailto:info@mb-grid-solutions.com" className="text-white text-xl font-bold hover:text-accent transition-colors"> <a href="mailto:info@mb-grid-solutions.com" className="text-white text-lg md:text-xl font-bold hover:text-accent transition-colors break-all">
info@mb-grid-solutions.com info@mb-grid-solutions.com
</a> </a>
</div> </div>
@@ -90,13 +90,13 @@ export default function Contact() {
</Reveal> </Reveal>
<Reveal delay={0.2}> <Reveal delay={0.2}>
<div className="bg-white/5 p-8 rounded-2xl border border-white/10 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300 relative overflow-hidden"> <div className="bg-white/5 p-6 md:p-8 rounded-2xl border border-white/10 flex flex-col sm:flex-row gap-4 sm:gap-6 items-start hover:translate-x-1 transition-transform duration-300 relative overflow-hidden">
<div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0 relative z-10"> <div className="w-12 h-12 md:w-14 md:h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0 relative z-10">
<MapPin size={24} /> <MapPin size={24} />
</div> </div>
<div className="relative z-10"> <div className="relative z-10">
<h4 className="text-slate-400 font-bold text-xs uppercase tracking-widest mb-2">Anschrift</h4> <h4 className="text-slate-400 font-bold text-xs uppercase tracking-widest mb-1 md:mb-2">Anschrift</h4>
<p className="text-white text-xl font-bold leading-relaxed"> <p className="text-white text-lg md:text-xl font-bold leading-relaxed">
MB Grid Solutions & Services GmbH<br /> MB Grid Solutions & Services GmbH<br />
Raiffeisenstraße 22<br /> Raiffeisenstraße 22<br />
73630 Remshalden 73630 Remshalden
@@ -122,7 +122,7 @@ export default function Contact() {
</div> </div>
<Reveal delay={0.4}> <Reveal delay={0.4}>
<div className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl relative overflow-hidden group"> <div className="bg-white p-6 md:p-12 rounded-3xl md:rounded-[2.5rem] border border-slate-100 shadow-xl relative overflow-hidden group">
<div className="tech-corner top-6 left-6 border-t-2 border-l-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500" /> <div className="tech-corner top-6 left-6 border-t-2 border-l-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<div className="tech-corner bottom-6 right-6 border-b-2 border-r-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500" /> <div className="tech-corner bottom-6 right-6 border-b-2 border-r-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

24
components/HomeContent.tsx
View File

@@ -82,13 +82,13 @@ export default function Home() {
</Reveal> </Reveal>
<Reveal delay={0.2}> <Reveal delay={0.2}>
<h1 className="text-5xl md:text-7xl font-extrabold text-primary mb-8 leading-[1.1]"> <h1 className="text-4xl sm:text-5xl md:text-7xl font-extrabold text-primary mb-6 md:mb-8 leading-[1.1]">
Spezialisierter Partner für <span className="text-accent">Energiekabelprojekte</span> Spezialisierter Partner für <span className="text-accent">Energiekabelprojekte</span>
</h1> </h1>
</Reveal> </Reveal>
<Reveal delay={0.3}> <Reveal delay={0.3}>
<p className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-12 max-w-2xl"> <p className="text-slate-600 text-lg md:text-2xl leading-relaxed mb-8 md:mb-12 max-w-2xl">
Herstellerneutrale technische Beratung für Ihre Projekte in Mittel- und Hochspannungsnetzen bis zu 110 kV. Herstellerneutrale technische Beratung für Ihre Projekte in Mittel- und Hochspannungsnetzen bis zu 110 kV.
</p> </p>
</Reveal> </Reveal>
@@ -115,8 +115,8 @@ export default function Home() {
<Reveal className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16"> <Reveal className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
<div> <div>
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Portfolio</span> <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Portfolio</span>
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Unsere Leistungen</h2> <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">Unsere Leistungen</h2>
<p className="text-slate-400 text-lg md:text-xl"> <p className="text-slate-400 text-base md:text-xl">
Beratung durch unabhängige Experten mit jahrzehntelanger Erfahrung aus Engineering, Normengremien, Planung und Produktion. Beratung durch unabhängige Experten mit jahrzehntelanger Erfahrung aus Engineering, Normengremien, Planung und Produktion.
</p> </p>
</div> </div>
@@ -181,8 +181,8 @@ export default function Home() {
<div> <div>
<Reveal> <Reveal>
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Expertise</span> <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Expertise</span>
<h2 className="text-4xl md:text-5xl font-bold text-primary mb-8">Anwendungen & Zielgruppen</h2> <h2 className="text-3xl md:text-5xl font-bold text-primary mb-6 md:mb-8">Anwendungen & Zielgruppen</h2>
<p className="text-slate-600 text-lg md:text-xl mb-12"> <p className="text-slate-600 text-base md:text-xl mb-8 md:mb-12">
Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte mit höchster Präzision. Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte mit höchster Präzision.
</p> </p>
</Reveal> </Reveal>
@@ -231,10 +231,10 @@ export default function Home() {
<Reveal className="mb-20"> <Reveal className="mb-20">
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Spezifikationen</span> <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Spezifikationen</span>
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Technische Expertise</h2> <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">Technische Expertise</h2>
</Reveal> </Reveal>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
{[ {[
{ label: 'Kabeltypen', value: 'N2XS(FL)2Y, N2X(F)KLD2Y...', desc: 'Umfassende Expertise im Design gängiger Hochspannungskabel.' }, { label: 'Kabeltypen', value: 'N2XS(FL)2Y, N2X(F)KLD2Y...', desc: 'Umfassende Expertise im Design gängiger Hochspannungskabel.' },
{ label: 'Spannungsebenen', value: '64/110 kV & Mittelspannung', desc: 'Spezialisierte Beratung für komplexe Infrastrukturprojekte.' }, { label: 'Spannungsebenen', value: '64/110 kV & Mittelspannung', desc: 'Spezialisierte Beratung für komplexe Infrastrukturprojekte.' },
@@ -269,7 +269,7 @@ export default function Home() {
<div className="container-custom relative z-10"> <div className="container-custom relative z-10">
<Counter value={5} className="section-number" /> <Counter value={5} className="section-number" />
<Reveal> <Reveal>
<div className="relative rounded-[2.5rem] bg-primary p-12 md:p-24 overflow-hidden group"> <div className="relative rounded-3xl md:rounded-[2.5rem] bg-primary p-8 md:p-24 overflow-hidden group">
{/* Corner Accents */} {/* Corner Accents */}
<div className="tech-corner top-8 left-8 border-t-2 border-l-2" /> <div className="tech-corner top-8 left-8 border-t-2 border-l-2" />
<div className="tech-corner top-8 right-8 border-t-2 border-r-2" /> <div className="tech-corner top-8 right-8 border-t-2 border-r-2" />
@@ -297,13 +297,13 @@ export default function Home() {
</div> </div>
<div className="relative z-10"> <div className="relative z-10">
<h2 className="text-4xl md:text-6xl font-bold text-white mb-8 leading-tight"> <h2 className="text-3xl md:text-6xl font-bold text-white mb-6 md:mb-8 leading-tight">
Bereit für Ihr nächstes Projekt? Bereit für Ihr nächstes Projekt?
</h2> </h2>
<p className="text-slate-300 text-xl mb-12 leading-relaxed"> <p className="text-slate-300 text-lg md:text-xl mb-8 md:mb-12 leading-relaxed">
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden. Wir beraten Sie herstellerneutral und kompetent. Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden. Wir beraten Sie herstellerneutral und kompetent.
</p> </p>
<Button href="/kontakt" variant="accent" showArrow className="!px-10 !py-5 text-lg"> <Button href="/kontakt" variant="accent" showArrow className="w-full sm:w-auto !px-10 !py-5 text-lg">
Jetzt Kontakt aufnehmen Jetzt Kontakt aufnehmen
</Button> </Button>
</div> </div>

14
components/Layout.tsx
View File

@@ -58,7 +58,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
<img <img
src="/assets/logo.png" src="/assets/logo.png"
alt="MB Grid Solutions" alt="MB Grid Solutions"
className={`transition-all duration-300 object-contain ${isScrolled ? 'h-[60px] md:h-[80px] my-[-5px]' : 'h-[100px] md:h-[140px] my-[-20px]'}`} className={`transition-all duration-300 object-contain ${isScrolled ? 'h-[50px] md:h-[80px] my-[-5px]' : 'h-[80px] md:h-[140px] my-[-10px] md:my-[-20px]'}`}
loading="eager" loading="eager"
/> />
</Link> </Link>
@@ -169,13 +169,13 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
<div className="tech-corner bottom-8 right-8 border-b border-r border-white/10 group-hover:border-accent/30 transition-colors duration-700" /> <div className="tech-corner bottom-8 right-8 border-b border-r border-white/10 group-hover:border-accent/30 transition-colors duration-700" />
<div className="container-custom relative z-10"> <div className="container-custom relative z-10">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 md:gap-12 mb-12 md:mb-16">
<div className="lg:col-span-2"> <div className="lg:col-span-2">
<Link href="/" className="inline-block mb-8 group"> <Link href="/" className="inline-block mb-6 md:mb-8 group">
<img <img
src="/assets/logo.png" src="/assets/logo.png"
alt="MB Grid Solutions" alt="MB Grid Solutions"
className="h-20 brightness-0 invert opacity-80 group-hover:opacity-100 transition-opacity" className="h-16 md:h-20 brightness-0 invert opacity-80 group-hover:opacity-100 transition-opacity"
loading="lazy" loading="lazy"
/> />
</Link> </Link>
@@ -209,9 +209,9 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
</div> </div>
</div> </div>
<div className="pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-slate-500 relative"> <div className="pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-6 md:gap-4 text-sm text-slate-500 relative text-center md:text-left">
<div className="absolute -top-px left-0 w-12 h-px bg-accent/50" /> <div className="absolute -top-px left-1/2 -translate-x-1/2 md:left-0 md:translate-x-0 w-12 h-px bg-accent/50" />
<p>&copy; {new Date().getFullYear()} MB Grid Solutions & Services GmbH. Alle Rechte vorbehalten.</p> <p>&copy; {new Date().getFullYear()} MB Grid Solutions & Services GmbH. <br className="md:hidden" /> Alle Rechte vorbehalten.</p>
<p className="flex items-center gap-2"> <p className="flex items-center gap-2">
<span className="relative flex h-2 w-2"> <span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span> <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>

2
components/TileGrid.tsx
View File

@@ -40,7 +40,7 @@ export const TileGrid = () => {
delay: Math.random() * 20, delay: Math.random() * 20,
ease: "easeInOut" ease: "easeInOut"
}} }}
className="w-32 h-32 md:w-40 md:h-40 bg-white/10 backdrop-blur-[2px] rounded-3xl border border-white/20 shadow-[0_8px_32px_0_rgba(31,38,135,0.07)] shrink-0" className="w-24 h-24 md:w-40 md:h-40 bg-white/10 backdrop-blur-[2px] rounded-2xl md:rounded-3xl border border-white/20 shadow-[0_8px_32px_0_rgba(31,38,135,0.07)] shrink-0"
/> />
))} ))}
</div> </div>

2
next-env.d.ts vendored
View File

@@ -1,6 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts"; import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.