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

design

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 01:26:21 +01:00
parent 8f97e62016
commit 22e49faa16
7 changed files with 285 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
components/ContactContent.tsx
View File

@@ -4,6 +4,8 @@ import { CheckCircle, Mail, MapPin, Send, ArrowRight } from 'lucide-react';
import React, { useState } from 'react';
import Link from 'next/link';
import { Reveal } from './Reveal';
import { TechBackground } from './TechBackground';
import { Counter } from './Counter';
export default function Contact() {
const [submitted, setSubmitted] = useState(false);
@@ -35,19 +37,21 @@ export default function Contact() {
};
return (
<div className="overflow-hidden">
<div className="overflow-hidden relative">
{/* Hero Section */}
<section className="relative min-h-[40vh] flex items-center pt-32 pb-20">
<section className="relative min-h-[40vh] flex items-center pt-32 pb-20 overflow-hidden">
<div className="absolute inset-0 z-0">
<div
className="absolute inset-0 bg-cover bg-center"
style={{ backgroundImage: 'url("/media/laying/iStock-1282259999.jpg")' }}
/>
<div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
<TechBackground />
</div>
<div className="container-custom relative z-10">
<div className="text-left">
<div className="text-left relative">
<Counter value={1} className="section-number" />
<Reveal delay={0.1}>
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</span>
</Reveal>
@@ -65,16 +69,18 @@ export default function Contact() {
</div>
</section>
<section className="bg-slate-50">
<div className="container-custom">
<section className="bg-slate-50 relative overflow-hidden">
<TechBackground />
<div className="container-custom relative z-10">
<Counter value={2} className="section-number" />
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 md:gap-24">
<div className="space-y-8">
<Reveal delay={0.1}>
<div className="card-modern !p-8 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300">
<div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
<div className="card-modern !p-8 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300 relative overflow-hidden tech-card-border">
<div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0 relative z-10">
<Mail size={24} />
</div>
<div>
<div className="relative z-10">
<h4 className="text-slate-500 font-bold text-xs uppercase tracking-widest mb-2">E-Mail</h4>
<a href="mailto:info@mb-grid-solutions.com" className="text-primary text-xl font-bold hover:text-accent transition-colors">
info@mb-grid-solutions.com
@@ -84,11 +90,11 @@ export default function Contact() {
</Reveal>
<Reveal delay={0.2}>
<div className="card-modern !p-8 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300">
<div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
<div className="card-modern !p-8 flex gap-6 items-start hover:translate-x-1 transition-transform duration-300 relative overflow-hidden tech-card-border">
<div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0 relative z-10">
<MapPin size={24} />
</div>
<div>
<div className="relative z-10">
<h4 className="text-slate-500 font-bold text-xs uppercase tracking-widest mb-2">Anschrift</h4>
<p className="text-primary text-xl font-bold leading-relaxed">
MB Grid Solutions GmbH<br />
@@ -100,14 +106,15 @@ export default function Contact() {
</Reveal>
<Reveal delay={0.3}>
<div className="w-full h-[300px] rounded-[2.5rem] overflow-hidden border border-slate-100 shadow-sm grayscale hover:grayscale-0 transition-all duration-700">
<iframe
width="100%"
height="100%"
frameBorder="0"
scrolling="no"
marginHeight={0}
marginWidth={0}
<div className="w-full h-[300px] rounded-[2.5rem] overflow-hidden border border-slate-100 shadow-sm grayscale hover:grayscale-0 transition-all duration-700 relative group">
<div className="absolute inset-0 border-2 border-accent/0 group-hover:border-accent/20 transition-all duration-500 z-10 pointer-events-none rounded-[2.5rem]" />
<iframe
width="100%"
height="100%"
frameBorder="0"
scrolling="no"
marginHeight={0}
marginWidth={0}
src="https://www.openstreetmap.org/export/embed.html?bbox=9.445,48.815,9.465,48.825&layer=mapnik&marker=48.8198,9.4552"
></iframe>
</div>
@@ -115,7 +122,10 @@ export default function Contact() {
</div>
<Reveal delay={0.4}>
<div className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl">
<div className="bg-white p-8 md:p-12 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 bottom-6 right-6 border-b-2 border-r-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
{submitted ? (
<div className="text-center py-12">
<div className="w-20 h-20 rounded-full bg-accent/10 text-accent flex items-center justify-center mx-auto mb-8">
@@ -133,7 +143,7 @@ export default function Contact() {
</button>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-6">
<form onSubmit={handleSubmit} className="space-y-6 relative z-10">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<label htmlFor="name" className="text-sm font-bold text-slate-700 ml-1">Name *</label>
@@ -195,7 +205,7 @@ export default function Contact() {
* Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
<Link href="/datenschutz" className="text-accent hover:underline font-semibold">
Datenschutzerklärung
</Link>{' '}
</Link>{' '}
einverstanden.
</p>
</form>