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:06:56 +01:00
parent 912e430725
commit 510e1d5332
5 changed files with 135 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/error.tsx Normal file
View File

@@ -0,0 +1,58 @@
'use client';
import { useEffect } from 'react';
import { motion } from 'framer-motion';
import { RefreshCcw, Home } from 'lucide-react';
import Link from 'next/link';
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
console.error(error);
}, [error]);
return (
<div className="min-h-[80vh] flex items-center justify-center px-4">
<div className="text-center">
<motion.div
initial={{ opacity: 0, scale: 0.5 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
className="text-9xl font-extrabold text-slate-200 mb-8"
>
500
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2, duration: 0.5 }}
>
<h1 className="text-4xl font-bold text-primary mb-4">Etwas ist schiefgelaufen</h1>
<p className="text-slate-600 text-lg mb-12 max-w-md mx-auto">
Es gab ein technisches Problem. Wir arbeiten bereits an der Lösung.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<button
onClick={() => reset()}
className="btn-accent flex items-center gap-2"
>
<RefreshCcw size={18} />
Erneut versuchen
</button>
<Link href="/" className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200 flex items-center gap-2">
<Home size={18} />
Zur Startseite
</Link>
</div>
</motion.div>
</div>
</div>
);
}

47
app/not-found.tsx Normal file
View File

@@ -0,0 +1,47 @@
'use client';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { Home, ArrowLeft } from 'lucide-react';
export default function NotFound() {
return (
<div className="min-h-[80vh] flex items-center justify-center px-4">
<div className="text-center">
<motion.div
initial={{ opacity: 0, scale: 0.5 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
className="text-9xl font-extrabold text-slate-200 mb-8"
>
404
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2, duration: 0.5 }}
>
<h1 className="text-4xl font-bold text-primary mb-4">Seite nicht gefunden</h1>
<p className="text-slate-600 text-lg mb-12 max-w-md mx-auto">
Die von Ihnen gesuchte Seite scheint nicht zu existieren oder wurde verschoben.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link href="/" className="btn-primary flex items-center gap-2">
<Home size={18} />
Zur Startseite
</Link>
<button
onClick={() => window.history.back()}
className="btn-primary bg-slate-100 !text-primary hover:bg-slate-200 flex items-center gap-2"
>
<ArrowLeft size={18} />
Zurück
</button>
</div>
</motion.div>
</div>
</div>
);
}

19
app/page.tsx
View File

@@ -32,11 +32,11 @@ export default function Home() {
</div>
<div className="container-custom relative z-10">
<motion.div
<motion.div
initial="initial"
animate="animate"
variants={stagger}
className="max-w-3xl"
className="text-left"
>
<motion.span
variants={fadeInUp}
@@ -82,14 +82,14 @@ export default function Home() {
{/* Portfolio Section */}
<section className="bg-slate-50">
<div className="container-custom">
<motion.div
<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"
>
<div className="max-w-2xl">
<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>
<p className="text-slate-600 text-lg md:text-xl">
@@ -125,11 +125,10 @@ export default function Home() {
desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl hinsichtlich Qualität und Preis.'
}
].map((item, i) => (
<motion.div
<motion.div
key={i}
variants={fadeInUp}
whileHover={{ y: -8 }}
className="card-modern group motion-fix"
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}
@@ -214,12 +213,12 @@ export default function Home() {
</div>
<div className="container-custom relative z-10">
<motion.div
<motion.div
initial="initial"
whileInView="animate"
viewport={{ once: true }}
variants={fadeInUp}
className="text-center max-w-3xl mx-auto mb-20"
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>
@@ -275,7 +274,7 @@ export default function Home() {
</svg>
</div>
<div className="relative z-10 max-w-2xl">
<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>

19
app/ueber-uns/page.tsx
View File

@@ -33,11 +33,11 @@ export default function About() {
</div>
<div className="container-custom relative z-10">
<motion.div
<motion.div
initial="initial"
animate="animate"
variants={stagger}
className="max-w-3xl"
className="text-left"
>
<motion.span
variants={fadeInUp}
@@ -108,12 +108,12 @@ export default function About() {
{/* Manifest Section */}
<section className="bg-slate-50">
<div className="container-custom">
<motion.div
<motion.div
initial="initial"
whileInView="animate"
viewport={{ once: true }}
variants={fadeInUp}
className="text-center max-w-3xl mx-auto mb-20"
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>
@@ -135,11 +135,10 @@ 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
<motion.div
key={i}
variants={fadeInUp}
whileHover={{ y: -5 }}
className="bg-white p-10 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md transition-all motion-fix"
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} />
@@ -155,14 +154,14 @@ export default function About() {
{/* CTA Section */}
<section className="bg-white">
<div className="container-custom">
<motion.div
<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 text-center"
className="relative rounded-[2.5rem] bg-slate-900 p-12 md:p-24 overflow-hidden"
>
<div className="relative z-10 max-w-2xl mx-auto">
<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>