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:34:31 +01:00
parent 22e49faa16
commit 95833e2865
7 changed files with 219 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/ContactContent.tsx
View File

@@ -1,11 +1,11 @@
'use client';
import { CheckCircle, Mail, MapPin, Send, ArrowRight } from 'lucide-react';
import { CheckCircle, Mail, MapPin, Send } 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';
import { Button } from './Button';
export default function Contact() {
const [submitted, setSubmitted] = useState(false);
@@ -51,7 +51,7 @@ export default function Contact() {
<div className="container-custom relative z-10">
<div className="text-left relative">
<Counter value={1} className="section-number" />
<div className="section-number">01</div>
<Reveal delay={0.1}>
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</span>
</Reveal>
@@ -69,20 +69,20 @@ export default function Contact() {
</div>
</section>
<section className="bg-slate-50 relative overflow-hidden">
<section className="bg-slate-950 text-accent relative overflow-hidden">
<TechBackground />
<div className="container-custom relative z-10">
<Counter value={2} className="section-number" />
<Counter value={2} className="section-number !text-white/5" />
<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 relative overflow-hidden tech-card-border">
<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="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 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">
<h4 className="text-slate-400 font-bold text-xs uppercase tracking-widest 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">
info@mb-grid-solutions.com
</a>
</div>
@@ -90,13 +90,13 @@ 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 relative overflow-hidden tech-card-border">
<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="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 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">
<h4 className="text-slate-400 font-bold text-xs uppercase tracking-widest mb-2">Anschrift</h4>
<p className="text-white text-xl font-bold leading-relaxed">
MB Grid Solutions GmbH<br />
Raiffeisenstraße 22<br />
73630 Remshalden
@@ -106,7 +106,7 @@ 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 relative group">
<div className="w-full h-[300px] rounded-[2.5rem] overflow-hidden border border-white/10 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%"
@@ -135,12 +135,9 @@ export default function Contact() {
<p className="text-slate-600 text-lg mb-10">
Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.
</p>
<button
onClick={() => setSubmitted(false)}
className="btn-primary"
>
<Button onClick={() => setSubmitted(false)}>
Weitere Nachricht
</button>
</Button>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-6 relative z-10">
@@ -192,20 +189,15 @@ export default function Contact() {
></textarea>
</div>
<button
type="submit"
disabled={loading}
className="btn-accent w-full py-5 text-lg group"
>
<Button type="submit" variant="accent" disabled={loading} className="w-full py-5 text-lg" showArrow>
{loading ? 'Wird gesendet...' : 'Nachricht senden'}
<Send className="ml-3 transition-transform group-hover:translate-x-1 group-hover:-translate-y-1" size={20} />
</button>
</Button>
<p className="text-xs text-slate-400 text-center">
* Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
<Link href="/datenschutz" className="text-accent hover:underline font-semibold">
<a href="/datenschutz" className="text-accent hover:underline font-semibold">
Datenschutzerklärung
</Link>{' '}
</a>{' '}
einverstanden.
</p>
</form>