reveals
This commit is contained in:
@@ -2,22 +2,8 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Award, Clock, Lightbulb, Linkedin, MessageSquare, ShieldCheck, Truck, ArrowRight } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Link from 'next/link';
|
||||
|
||||
const fadeInUp = {
|
||||
initial: { opacity: 0, y: 20 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1] }
|
||||
};
|
||||
|
||||
const stagger = {
|
||||
animate: {
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
import { Reveal } from './Reveal';
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
@@ -33,31 +19,23 @@ export default function About() {
|
||||
</div>
|
||||
|
||||
<div className="container-custom relative z-10">
|
||||
<motion.div
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
variants={stagger}
|
||||
className="text-left"
|
||||
>
|
||||
<motion.span
|
||||
variants={fadeInUp}
|
||||
className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block"
|
||||
>
|
||||
Über uns
|
||||
</motion.span>
|
||||
<motion.h1
|
||||
variants={fadeInUp}
|
||||
className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight"
|
||||
>
|
||||
Wir gestalten die <span className="text-accent">Infrastruktur</span> der Zukunft
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
variants={fadeInUp}
|
||||
className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-8"
|
||||
>
|
||||
MB Grid Solution steht für technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse.
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
<div className="text-left">
|
||||
<Reveal delay={0.1}>
|
||||
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
|
||||
Über uns
|
||||
</span>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<h1 className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight">
|
||||
Wir gestalten die <span className="text-accent">Infrastruktur</span> der Zukunft
|
||||
</h1>
|
||||
</Reveal>
|
||||
<Reveal delay={0.3}>
|
||||
<p className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-8">
|
||||
MB Grid Solution steht for technische Exzellenz in der Energiekabeltechnologie. Wir verstehen uns als Ihr technischer Lotse.
|
||||
</p>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -65,42 +43,34 @@ export default function About() {
|
||||
<section className="bg-white">
|
||||
<div className="container-custom">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="space-y-6 text-lg text-slate-600 leading-relaxed"
|
||||
>
|
||||
<p>
|
||||
Unsere Wurzeln liegen in der tiefen praktischen Erfahrung unserer technischen Berater und unserer Netzwerke im globalem Kabelmarkt. Wir vereinen Tradition mit modernster Innovation, um zuverlässige Energielösungen für Projekte bis 110 kV zu realisieren.
|
||||
</p>
|
||||
<p>
|
||||
Wir verstehen die Herausforderungen der Energiewende und bieten herstellerneutrale Beratung, die auf Fakten, Normen und jahrzehntelanger Erfahrung basiert.
|
||||
</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
variants={stagger}
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
className="grid grid-cols-1 sm:grid-cols-2 gap-6"
|
||||
>
|
||||
<Reveal direction="right">
|
||||
<div className="space-y-6 text-lg text-slate-600 leading-relaxed">
|
||||
<p>
|
||||
Unsere Wurzeln liegen in der tiefen praktischen Erfahrung unserer technischen Berater und unserer Netzwerke im globalem Kabelmarkt. Wir vereinen Tradition mit modernster Innovation, um zuverlässige Energielösungen für Projekte bis 110 kV zu realisieren.
|
||||
</p>
|
||||
<p>
|
||||
Wir verstehen die Herausforderungen der Energiewende und bieten herstellerneutrale Beratung, die auf Fakten, Normen und jahrzehntelanger Erfahrung basiert.
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{[
|
||||
{ name: 'Michael Bodemer', role: 'Geschäftsführung & Inhaber', linkedin: 'https://www.linkedin.com/in/michael-bodemer-33b493122/' },
|
||||
{ name: 'Klaus Mintel', role: 'Geschäftsführung', linkedin: 'https://www.linkedin.com/in/klaus-mintel-b80a8b193/' }
|
||||
].map((person, i) => (
|
||||
<motion.div key={i} variants={fadeInUp} className="card-modern !p-6">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<h3 className="text-xl font-bold text-primary">{person.name}</h3>
|
||||
<a href={person.linkedin} target="_blank" rel="noopener noreferrer" className="text-[#0077b5] hover:scale-110 transition-transform">
|
||||
<Linkedin size={20} />
|
||||
</a>
|
||||
<Reveal key={i} delay={i * 0.1}>
|
||||
<div className="card-modern !p-6 hover:-translate-y-1 transition-[box-shadow,transform] duration-300">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<h3 className="text-xl font-bold text-primary">{person.name}</h3>
|
||||
<a href={person.linkedin} target="_blank" rel="noopener noreferrer" className="text-[#0077b5] hover:scale-110 transition-transform">
|
||||
<Linkedin size={20} />
|
||||
</a>
|
||||
</div>
|
||||
<p className="text-accent text-sm font-bold uppercase tracking-wider">{person.role}</p>
|
||||
</div>
|
||||
<p className="text-accent text-sm font-bold uppercase tracking-wider">{person.role}</p>
|
||||
</motion.div>
|
||||
</Reveal>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -108,25 +78,13 @@ export default function About() {
|
||||
{/* Manifest Section */}
|
||||
<section className="bg-slate-50">
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
variants={fadeInUp}
|
||||
className="mb-20"
|
||||
>
|
||||
<Reveal className="mb-20">
|
||||
<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-primary mb-6">Unser Manifest</h2>
|
||||
<p className="text-slate-600 text-lg">Werte, die unsere tägliche Arbeit leiten und den Erfolg Ihrer Projekte sichern.</p>
|
||||
</motion.div>
|
||||
</Reveal>
|
||||
|
||||
<motion.div
|
||||
variants={stagger}
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
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">
|
||||
{[
|
||||
{ icon: Award, title: 'Kompetenz', desc: 'Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how in modernsten Anlagen.' },
|
||||
{ icon: Clock, title: 'Verfügbarkeit', desc: 'Schnelle und verlässliche Unterstützung ohne unnötige Verzögerungen.' },
|
||||
@@ -135,45 +93,39 @@ export default function About() {
|
||||
{ icon: MessageSquare, title: 'Offenheit', desc: 'Wir hören zu und passen unsere Prozesse kontinuierlich an Ihren Erfolg an.' },
|
||||
{ icon: ShieldCheck, title: 'Zuverlässigkeit', desc: 'Wir halten, was wir versprechen – ohne Ausnahme. Verbindlichkeit ist unser Fundament.' }
|
||||
].map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
variants={fadeInUp}
|
||||
className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all motion-fix"
|
||||
>
|
||||
<div className="text-accent mb-6">
|
||||
<item.icon size={32} />
|
||||
<Reveal key={i} delay={i * 0.1}>
|
||||
<div className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md hover:-translate-y-1 transition-[box-shadow,transform] duration-300 h-full motion-fix">
|
||||
<div className="text-accent mb-6">
|
||||
<item.icon size={32} />
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-primary mb-4">{i + 1}. {item.title}</h4>
|
||||
<p className="text-slate-600 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-primary mb-4">{i + 1}. {item.title}</h4>
|
||||
<p className="text-slate-600 leading-relaxed">{item.desc}</p>
|
||||
</motion.div>
|
||||
</Reveal>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="bg-white">
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden"
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-8">
|
||||
Bereit für Ihr nächstes Projekt?
|
||||
</h2>
|
||||
<p className="text-slate-400 text-xl mb-12">
|
||||
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn-accent !px-10 !py-5 text-lg group">
|
||||
Jetzt Kontakt aufnehmen
|
||||
<ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
|
||||
</Link>
|
||||
<Reveal>
|
||||
<div className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden">
|
||||
<div className="relative z-10 max-w-2xl">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-8">
|
||||
Bereit für Ihr nächstes Projekt?
|
||||
</h2>
|
||||
<p className="text-slate-400 text-xl mb-12">
|
||||
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn-accent !px-10 !py-5 text-lg group">
|
||||
Jetzt Kontakt aufnehmen
|
||||
<ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -3,21 +3,7 @@
|
||||
import { CheckCircle, Mail, MapPin, Send, ArrowRight } from 'lucide-react';
|
||||
import React, { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const fadeInUp = {
|
||||
initial: { opacity: 0, y: 20 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
|
||||
};
|
||||
|
||||
const stagger = {
|
||||
animate: {
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
import { Reveal } from './Reveal';
|
||||
|
||||
export default function Contact() {
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
@@ -61,170 +47,147 @@ export default function Contact() {
|
||||
</div>
|
||||
|
||||
<div className="container-custom relative z-10">
|
||||
<motion.div
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
variants={stagger}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<motion.span variants={fadeInUp} className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</motion.span>
|
||||
<motion.h1
|
||||
variants={fadeInUp}
|
||||
className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight"
|
||||
>
|
||||
Lassen Sie uns <span className="text-accent">sprechen</span>
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
variants={fadeInUp}
|
||||
className="text-slate-600 text-xl md:text-2xl leading-relaxed"
|
||||
>
|
||||
Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
<div className="text-left">
|
||||
<Reveal delay={0.1}>
|
||||
<span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</span>
|
||||
</Reveal>
|
||||
<Reveal delay={0.2}>
|
||||
<h1 className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight">
|
||||
Lassen Sie uns <span className="text-accent">sprechen</span>
|
||||
</h1>
|
||||
</Reveal>
|
||||
<Reveal delay={0.3}>
|
||||
<p className="text-slate-600 text-xl md:text-2xl leading-relaxed">
|
||||
Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
|
||||
</p>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-slate-50">
|
||||
<div className="container-custom">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 md:gap-24">
|
||||
<motion.div
|
||||
variants={stagger}
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
className="space-y-8"
|
||||
>
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
whileHover={{ x: 5 }}
|
||||
className="card-modern !p-8 flex gap-6 items-start"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
|
||||
<Mail size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<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
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
whileHover={{ x: 5 }}
|
||||
className="card-modern !p-8 flex gap-6 items-start"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
|
||||
<MapPin size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<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 />
|
||||
Raiffeisenstraße 22<br />
|
||||
73630 Remshalden
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl"
|
||||
>
|
||||
{submitted ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
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">
|
||||
<CheckCircle size={40} />
|
||||
<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">
|
||||
<Mail size={24} />
|
||||
</div>
|
||||
<h3 className="text-3xl font-bold text-primary mb-4">Nachricht gesendet</h3>
|
||||
<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"
|
||||
>
|
||||
Weitere Nachricht
|
||||
</button>
|
||||
</motion.div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<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
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<MapPin size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<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 />
|
||||
Raiffeisenstraße 22<br />
|
||||
73630 Remshalden
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
<Reveal delay={0.3}>
|
||||
<div className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl">
|
||||
{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">
|
||||
<CheckCircle size={40} />
|
||||
</div>
|
||||
<h3 className="text-3xl font-bold text-primary mb-4">Nachricht gesendet</h3>
|
||||
<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"
|
||||
>
|
||||
Weitere Nachricht
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<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>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
placeholder="Ihr Name"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="company" className="text-sm font-bold text-slate-700 ml-1">Firma</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
placeholder="Ihr Unternehmen"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-bold text-slate-700 ml-1">Name *</label>
|
||||
<label htmlFor="email" className="text-sm font-bold text-slate-700 ml-1">E-Mail *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
placeholder="Ihr Name"
|
||||
placeholder="ihre@email.de"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="company" className="text-sm font-bold text-slate-700 ml-1">Firma</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
placeholder="Ihr Unternehmen"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
|
||||
/>
|
||||
<label htmlFor="message" className="text-sm font-bold text-slate-700 ml-1">Nachricht *</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
required
|
||||
rows={5}
|
||||
placeholder="Wie können wir Ihnen helfen?"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="text-sm font-bold text-slate-700 ml-1">E-Mail *</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
placeholder="ihre@email.de"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="message" className="text-sm font-bold text-slate-700 ml-1">Nachricht *</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
required
|
||||
rows={5}
|
||||
placeholder="Wie können wir Ihnen helfen?"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="btn-accent w-full py-5 text-lg group"
|
||||
>
|
||||
{loading ? 'Wird gesendet...' : 'Nachricht senden'}
|
||||
<Send className="ml-3 transition-transform group-hover:translate-x-1 group-hover:-translate-y-1" size={20} />
|
||||
</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">
|
||||
Datenschutzerklärung
|
||||
</Link>{' '}
|
||||
einverstanden.
|
||||
</p>
|
||||
</form>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="btn-accent w-full py-5 text-lg group"
|
||||
>
|
||||
{loading ? 'Wird gesendet...' : 'Nachricht senden'}
|
||||
<Send className="ml-3 transition-transform group-hover:translate-x-1 group-hover:-translate-y-1" size={20} />
|
||||
</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">
|
||||
Datenschutzerklärung
|
||||
</Link>{' '}
|
||||
einverstanden.
|
||||
</p>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -2,21 +2,7 @@
|
||||
|
||||
import Link from 'next/link';
|
||||
import { ArrowRight, Shield, Zap, BarChart3, CheckCircle2, ChevronRight } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const fadeInUp = {
|
||||
initial: { opacity: 0, y: 20 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1] }
|
||||
};
|
||||
|
||||
const stagger = {
|
||||
animate: {
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
import { Reveal, Stagger } from './Reveal';
|
||||
|
||||
export default function Home() {
|
||||
const serviceJsonLd = {
|
||||
@@ -75,63 +61,48 @@ export default function Home() {
|
||||
</div>
|
||||
|
||||
<div className="container-custom relative z-10">
|
||||
<motion.div
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
variants={stagger}
|
||||
className="text-left"
|
||||
>
|
||||
<motion.span
|
||||
variants={fadeInUp}
|
||||
className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-bold uppercase tracking-wider mb-6"
|
||||
>
|
||||
<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="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
|
||||
<div className="text-left">
|
||||
<Reveal delay={0.1}>
|
||||
<span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-bold uppercase tracking-wider mb-6">
|
||||
<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="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
|
||||
</span>
|
||||
Engineering Excellence
|
||||
</span>
|
||||
Engineering Excellence
|
||||
</motion.span>
|
||||
</Reveal>
|
||||
|
||||
<motion.h1
|
||||
variants={fadeInUp}
|
||||
className="text-5xl md:text-7xl font-extrabold text-primary mb-8 leading-[1.1]"
|
||||
>
|
||||
Spezialisierter Partner für <span className="text-accent">Energiekabelprojekte</span>
|
||||
</motion.h1>
|
||||
<Reveal delay={0.2}>
|
||||
<h1 className="text-5xl md:text-7xl font-extrabold text-primary mb-8 leading-[1.1]">
|
||||
Spezialisierter Partner für <span className="text-accent">Energiekabelprojekte</span>
|
||||
</h1>
|
||||
</Reveal>
|
||||
|
||||
<motion.p
|
||||
variants={fadeInUp}
|
||||
className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-12 max-w-2xl"
|
||||
>
|
||||
Herstellerneutrale technische Beratung für Ihre Projekte in Mittel- und Hochspannungsnetzen bis zu 110 kV.
|
||||
</motion.p>
|
||||
<Reveal delay={0.3}>
|
||||
<p className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-12 max-w-2xl">
|
||||
Herstellerneutrale technische Beratung für Ihre Projekte in Mittel- und Hochspannungsnetzen bis zu 110 kV.
|
||||
</p>
|
||||
</Reveal>
|
||||
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
className="flex flex-wrap gap-4"
|
||||
>
|
||||
<Link href="/kontakt" className="btn-accent group">
|
||||
Projekt anfragen
|
||||
<ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} />
|
||||
</Link>
|
||||
<Link href="/ueber-uns" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200">
|
||||
Mehr erfahren
|
||||
</Link>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
<Reveal delay={0.4}>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Link href="/kontakt" className="btn-accent group">
|
||||
Projekt anfragen
|
||||
<ArrowRight className="ml-2 transition-transform group-hover:translate-x-1" size={20} />
|
||||
</Link>
|
||||
<Link href="/ueber-uns" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200">
|
||||
Mehr erfahren
|
||||
</Link>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Portfolio Section */}
|
||||
<section className="bg-slate-50">
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
variants={fadeInUp}
|
||||
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>
|
||||
<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-primary mb-6">Unsere Leistungen</h2>
|
||||
@@ -142,15 +113,9 @@ export default function Home() {
|
||||
<Link href="/ueber-uns" className="text-primary font-bold flex items-center gap-2 hover:text-accent transition-colors group">
|
||||
Alle Details ansehen <ChevronRight className="transition-transform group-hover:translate-x-1" size={20} />
|
||||
</Link>
|
||||
</motion.div>
|
||||
</Reveal>
|
||||
|
||||
<motion.div
|
||||
variants={stagger}
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
className="grid grid-cols-1 md:grid-cols-3 gap-8 motion-fix"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{
|
||||
icon: <Zap size={32} />,
|
||||
@@ -168,21 +133,19 @@ export default function Home() {
|
||||
desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl hinsichtlich Qualität und Preis.'
|
||||
}
|
||||
].map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
variants={fadeInUp}
|
||||
className="card-modern group motion-fix hover:-translate-y-2 transition-transform duration-300"
|
||||
>
|
||||
<div className="w-16 h-16 rounded-2xl bg-accent/10 text-accent flex items-center justify-center mb-8 group-hover:bg-accent group-hover:text-white transition-colors">
|
||||
{item.icon}
|
||||
<Reveal key={i} delay={i * 0.1}>
|
||||
<div className="card-modern group hover:-translate-y-2 transition-[box-shadow,transform] duration-300 h-full">
|
||||
<div className="w-16 h-16 rounded-2xl bg-accent/10 text-accent flex items-center justify-center mb-8 group-hover:bg-accent group-hover:text-white transition-colors">
|
||||
{item.icon}
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-primary mb-4">{item.title}</h3>
|
||||
<p className="text-slate-600 leading-relaxed">
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-primary mb-4">{item.title}</h3>
|
||||
<p className="text-slate-600 leading-relaxed">
|
||||
{item.desc}
|
||||
</p>
|
||||
</motion.div>
|
||||
</Reveal>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -190,35 +153,25 @@ export default function Home() {
|
||||
<section className="bg-white">
|
||||
<div className="container-custom">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-16 md:gap-24">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="absolute -inset-4 bg-accent/10 rounded-3xl -rotate-2 z-0" />
|
||||
<img
|
||||
src="/media/cables/HS Kabel.png"
|
||||
alt="Technical Engineering"
|
||||
className="relative z-10 w-full h-[400px] md:h-[500px] object-cover rounded-2xl shadow-2xl"
|
||||
/>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
variants={stagger}
|
||||
>
|
||||
<motion.span variants={fadeInUp} className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Expertise</motion.span>
|
||||
<motion.h2 variants={fadeInUp} className="text-4xl md:text-5xl font-bold text-primary mb-8">Anwendungen & Zielgruppen</motion.h2>
|
||||
<motion.p variants={fadeInUp} className="text-slate-600 text-lg md:text-xl mb-12">
|
||||
Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte mit höchster Präzision.
|
||||
</motion.p>
|
||||
<motion.div
|
||||
variants={stagger}
|
||||
className="grid grid-cols-1 sm:grid-cols-2 gap-4"
|
||||
>
|
||||
<Reveal direction="right">
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-4 bg-accent/10 rounded-3xl -rotate-2 z-0" />
|
||||
<img
|
||||
src="/media/cables/HS Kabel.png"
|
||||
alt="Technical Engineering"
|
||||
className="relative z-10 w-full h-[400px] md:h-[500px] object-cover rounded-2xl shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
</Reveal>
|
||||
<div>
|
||||
<Reveal>
|
||||
<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>
|
||||
<p className="text-slate-600 text-lg md:text-xl mb-12">
|
||||
Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte mit höchster Präzision.
|
||||
</p>
|
||||
</Reveal>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{[
|
||||
'Energieversorger',
|
||||
'Ingenieurbüros',
|
||||
@@ -227,19 +180,17 @@ export default function Home() {
|
||||
'Projektierer EE',
|
||||
'Planungsbüros'
|
||||
].map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
variants={fadeInUp}
|
||||
className="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:border-accent/30 transition-colors group"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full bg-white flex items-center justify-center shadow-sm group-hover:bg-accent group-hover:text-white transition-colors">
|
||||
<CheckCircle2 size={16} />
|
||||
<Reveal key={i} delay={i * 0.05}>
|
||||
<div className="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:border-accent/30 transition-colors group">
|
||||
<div className="w-8 h-8 rounded-full bg-white flex items-center justify-center shadow-sm group-hover:bg-accent group-hover:text-white transition-colors">
|
||||
<CheckCircle2 size={16} />
|
||||
</div>
|
||||
<span className="text-primary font-semibold">{item}</span>
|
||||
</div>
|
||||
<span className="text-primary font-semibold">{item}</span>
|
||||
</motion.div>
|
||||
</Reveal>
|
||||
))}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -256,80 +207,62 @@ export default function Home() {
|
||||
</div>
|
||||
|
||||
<div className="container-custom relative z-10">
|
||||
<motion.div
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
variants={fadeInUp}
|
||||
className="mb-20"
|
||||
>
|
||||
<Reveal className="mb-20">
|
||||
<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>
|
||||
</motion.div>
|
||||
</Reveal>
|
||||
|
||||
<motion.div
|
||||
variants={stagger}
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true }}
|
||||
className="grid grid-cols-1 md:grid-cols-3 gap-8"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ 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: 'Leitertechnologie', value: 'Massiv-, Mehrdraht- & Milliken', desc: 'Optimierung des Leiterdesigns hinsichtlich Stromtragfähigkeit.' }
|
||||
].map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
variants={fadeInUp}
|
||||
className="p-10 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors"
|
||||
>
|
||||
<h4 className="text-accent font-bold text-xs uppercase tracking-widest mb-6">
|
||||
{item.label}
|
||||
</h4>
|
||||
<p className="text-2xl font-bold text-white mb-4 leading-tight">
|
||||
{item.value}
|
||||
</p>
|
||||
<p className="text-slate-400 leading-relaxed">
|
||||
{item.desc}
|
||||
</p>
|
||||
</motion.div>
|
||||
<Reveal key={i} delay={i * 0.1}>
|
||||
<div className="p-10 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors h-full">
|
||||
<h4 className="text-accent font-bold text-xs uppercase tracking-widest mb-6">
|
||||
{item.label}
|
||||
</h4>
|
||||
<p className="text-2xl font-bold text-white mb-4 leading-tight">
|
||||
{item.value}
|
||||
</p>
|
||||
<p className="text-slate-400 leading-relaxed">
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="bg-white">
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative rounded-[2.5rem] bg-primary p-12 md:p-24 overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
|
||||
<svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="400" cy="0" r="400" stroke="white" strokeWidth="2" />
|
||||
<circle cx="400" cy="0" r="300" stroke="white" strokeWidth="2" />
|
||||
<circle cx="400" cy="0" r="200" stroke="white" strokeWidth="2" />
|
||||
</svg>
|
||||
<Reveal>
|
||||
<div className="relative rounded-[2.5rem] bg-primary p-12 md:p-24 overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
|
||||
<svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="400" cy="0" r="400" stroke="white" strokeWidth="2" />
|
||||
<circle cx="400" cy="0" r="300" stroke="white" strokeWidth="2" />
|
||||
<circle cx="400" cy="0" r="200" stroke="white" strokeWidth="2" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<h2 className="text-4xl md:text-6xl font-bold text-white mb-8 leading-tight">
|
||||
Bereit für Ihr nächstes Projekt?
|
||||
</h2>
|
||||
<p className="text-slate-300 text-xl mb-12 leading-relaxed">
|
||||
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden. Wir beraten Sie herstellerneutral und kompetent.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn-accent !px-10 !py-5 text-lg group">
|
||||
Jetzt Kontakt aufnehmen
|
||||
<ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<h2 className="text-4xl md:text-6xl font-bold text-white mb-8 leading-tight">
|
||||
Bereit für Ihr nächstes Projekt?
|
||||
</h2>
|
||||
<p className="text-slate-300 text-xl mb-12 leading-relaxed">
|
||||
Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden. Wir beraten Sie herstellerneutral und kompetent.
|
||||
</p>
|
||||
<Link href="/kontakt" className="btn-accent !px-10 !py-5 text-lg group">
|
||||
Jetzt Kontakt aufnehmen
|
||||
<ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -5,6 +5,7 @@ import React, { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Reveal } from './Reveal';
|
||||
|
||||
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||
const pathname = usePathname();
|
||||
@@ -39,16 +40,14 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col font-sans">
|
||||
<motion.header
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
|
||||
className={`fixed top-0 left-0 right-0 z-[100] transition-all duration-300 flex items-center py-1 ${
|
||||
isScrolled
|
||||
? 'bg-white/90 backdrop-blur-lg border-b border-slate-200 shadow-sm'
|
||||
: 'bg-gradient-to-b from-white/80 via-white/40 to-transparent'
|
||||
}`}
|
||||
>
|
||||
<Reveal direction="down" fullWidth className="fixed top-0 left-0 right-0 z-[100]">
|
||||
<header
|
||||
className={`transition-all duration-300 flex items-center py-1 ${
|
||||
isScrolled
|
||||
? 'bg-white/90 backdrop-blur-lg border-b border-slate-200 shadow-sm'
|
||||
: 'bg-gradient-to-b from-white/80 via-white/40 to-transparent'
|
||||
}`}
|
||||
>
|
||||
<div className="container-custom flex justify-between items-center w-full relative z-10">
|
||||
<Link
|
||||
href="/"
|
||||
@@ -96,7 +95,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
</motion.header>
|
||||
</header>
|
||||
</Reveal>
|
||||
|
||||
{/* Mobile Menu Overlay */}
|
||||
<AnimatePresence>
|
||||
@@ -147,13 +147,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||
<ArrowUp size={20} strokeWidth={2.5} />
|
||||
</button>
|
||||
|
||||
<motion.footer
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1 }}
|
||||
className="bg-slate-900 text-slate-300 py-16 md:py-24"
|
||||
>
|
||||
<Reveal fullWidth>
|
||||
<footer className="bg-slate-900 text-slate-300 py-16 md:py-24">
|
||||
<div className="container-custom">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
|
||||
<div className="lg:col-span-2">
|
||||
@@ -200,7 +195,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.footer>
|
||||
</footer>
|
||||
</Reveal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
82
components/Reveal.tsx
Normal file
82
components/Reveal.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
interface RevealProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
delay?: number;
|
||||
direction?: 'up' | 'down' | 'left' | 'right';
|
||||
fullWidth?: boolean;
|
||||
}
|
||||
|
||||
export const Reveal = ({
|
||||
children,
|
||||
className = '',
|
||||
delay = 0,
|
||||
direction = 'up',
|
||||
fullWidth = false
|
||||
}: RevealProps) => {
|
||||
const directions = {
|
||||
up: { y: 30 },
|
||||
down: { y: -30 },
|
||||
left: { x: 30 },
|
||||
right: { x: -30 },
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{
|
||||
opacity: 0,
|
||||
...directions[direction]
|
||||
}}
|
||||
whileInView={{
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
y: 0
|
||||
}}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 50,
|
||||
damping: 20,
|
||||
mass: 1,
|
||||
delay: delay
|
||||
}}
|
||||
className={`${fullWidth ? 'w-full' : ''} ${className} motion-fix`}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
interface StaggerProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
staggerDelay?: number;
|
||||
}
|
||||
|
||||
export const Stagger = ({
|
||||
children,
|
||||
className = '',
|
||||
staggerDelay = 0.1
|
||||
}: StaggerProps) => {
|
||||
return (
|
||||
<motion.div
|
||||
initial="initial"
|
||||
whileInView="animate"
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
variants={{
|
||||
animate: {
|
||||
transition: {
|
||||
staggerChildren: staggerDelay,
|
||||
},
|
||||
},
|
||||
}}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user