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

reveals

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 01:16:43 +01:00
parent 0e0f25e476
commit 100d656f91
5 changed files with 405 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
components/AboutContent.tsx
View File

@@ -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"
>
<div className="text-left">
<Reveal delay={0.1}>
<span 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"
>
</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
</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>
</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,32 +43,23 @@ 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"
>
<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>
</motion.div>
<motion.div
variants={stagger}
initial="initial"
whileInView="animate"
viewport={{ once: true }}
className="grid grid-cols-1 sm:grid-cols-2 gap-6"
>
</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">
<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">
@@ -98,9 +67,10 @@ export default function About() {
</a>
</div>
<p className="text-accent text-sm font-bold uppercase tracking-wider">{person.role}</p>
</motion.div>
</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,33 +93,26 @@ 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"
>
<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>
</motion.div>
</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">
<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>
@@ -173,7 +124,8 @@ export default function About() {
<ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
</Link>
</div>
</motion.div>
</div>
</Reveal>
</div>
</section>
</div>

97
components/ContactContent.tsx
View File

@@ -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,44 +47,30 @@ 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"
>
<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>
</motion.h1>
<motion.p
variants={fadeInUp}
className="text-slate-600 text-xl md:text-2xl leading-relaxed"
>
</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.
</motion.p>
</motion.div>
</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="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>
@@ -108,13 +80,11 @@ export default function Contact() {
info@mb-grid-solutions.com
</a>
</div>
</motion.div>
</div>
</Reveal>
<motion.div
variants={fadeInUp}
whileHover={{ x: 5 }}
className="card-modern !p-8 flex gap-6 items-start"
>
<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>
@@ -126,22 +96,14 @@ export default function Contact() {
73630 Remshalden
</p>
</div>
</motion.div>
</motion.div>
</div>
</Reveal>
</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"
>
<Reveal delay={0.3}>
<div 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="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>
@@ -155,7 +117,7 @@ export default function Contact() {
>
Weitere Nachricht
</button>
</motion.div>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -224,7 +186,8 @@ export default function Contact() {
</p>
</form>
)}
</motion.div>
</div>
</Reveal>
</div>
</div>
</section>

181
components/HomeContent.tsx
View File

@@ -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,41 +61,31 @@ 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"
>
<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
</motion.span>
</span>
</Reveal>
<motion.h1
variants={fadeInUp}
className="text-5xl md:text-7xl font-extrabold text-primary mb-8 leading-[1.1]"
>
<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>
</motion.h1>
</h1>
</Reveal>
<motion.p
variants={fadeInUp}
className="text-slate-600 text-xl md:text-2xl leading-relaxed mb-12 max-w-2xl"
>
<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.
</motion.p>
</p>
</Reveal>
<motion.div
variants={fadeInUp}
className="flex flex-wrap gap-4"
>
<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} />
@@ -117,21 +93,16 @@ export default function Home() {
<Link href="/ueber-uns" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200">
Mehr erfahren
</Link>
</motion.div>
</motion.div>
</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,11 +133,8 @@ 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"
>
<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>
@@ -180,9 +142,10 @@ export default function Home() {
<p className="text-slate-600 leading-relaxed">
{item.desc}
</p>
</motion.div>
</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"
>
<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"
/>
</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">
</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.
</motion.p>
<motion.div
variants={stagger}
className="grid grid-cols-1 sm:grid-cols-2 gap-4"
>
</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"
>
<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>
</motion.div>
</div>
</Reveal>
))}
</motion.div>
</motion.div>
</div>
</div>
</div>
</div>
</section>
@@ -256,34 +207,19 @@ 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"
>
<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>
@@ -293,22 +229,18 @@ export default function Home() {
<p className="text-slate-400 leading-relaxed">
{item.desc}
</p>
</motion.div>
</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"
>
<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" />
@@ -329,7 +261,8 @@ export default function Home() {
<ArrowRight className="ml-3 transition-transform group-hover:translate-x-2" size={24} />
</Link>
</div>
</motion.div>
</div>
</Reveal>
</div>
</section>
</div>

24
components/Layout.tsx
View File

@@ -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,11 +40,9 @@ 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 ${
<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'
@@ -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
View 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>
);
};