matthias/Dev-Landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Professionalize landing page design

Browse Source
This commit is contained in:
Matthias Meister
2026-05-05 22:20:09 +02:00
parent add89b0f92
commit 117839058b
13 changed files with 628 additions and 576 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/components/footer27.tsx
View File

@@ -1,10 +1,6 @@
"use client";
import { motion } from "framer-motion";
import { ArrowUpRight } from "lucide-react";
import { ArrowRight, Mail, Phone } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
interface Footer27Props {
@@ -12,137 +8,65 @@ interface Footer27Props {
}
const Footer27 = ({ className }: Footer27Props) => {
const socialLinks = [
{ name: "E-Mail", href: "#" },
{ name: "LinkedIn", href: "#" },
];
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
duration: 0.6,
staggerChildren: 0.1,
},
},
};
const itemVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.5 },
},
};
return (
<section className={cn("py-32", className)}>
<div className="container">
<footer>
<footer className={cn("px-4 pb-10 sm:px-6 lg:px-8", className)}>
<div className="mx-auto max-w-6xl border-t border-border/80 pt-8">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
<div>
<motion.div
variants={containerVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
className="flex flex-col justify-between md:flex-row md:items-center"
>
<div className="space-y-8">
<motion.div variants={itemVariants} className="space-y-6">
<h2 className="text-4xl leading-tight font-bold text-foreground lg:text-5xl">
Bereit für eine Website, die Kunden bringt?
</h2>
<p className="max-w-md text-lg leading-relaxed text-muted-foreground">
Erzählen Sie mir kurz von Ihrem Unternehmen — ich melde mich innerhalb von 24 Stunden mit einem unverbindlichen Angebot.
</p>
</motion.div>
<motion.div variants={itemVariants}>
<Button size="lg">Kostenloses Angebot anfordern</Button>
</motion.div>
</div>
<div className="mt-5 space-y-8 md:mt-0">
<motion.div variants={itemVariants}>
<div className="space-y-6">
{socialLinks.map((link) => (
<motion.div
key={link.name}
variants={itemVariants}
whileHover={{ x: 4 }}
transition={{
type: "spring",
stiffness: 300,
damping: 20,
}}
>
<a
href={link.href}
className="group flex items-center gap-2 py-2 text-foreground transition-colors hover:text-foreground/80"
>
<span className="text-xl font-medium">
{link.name}
</span>
<ArrowUpRight className="h-6 w-6 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</a>
</motion.div>
))}
</div>
</motion.div>
</div>
</motion.div>
<motion.div
variants={containerVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
className="mt-16"
>
<motion.div variants={itemVariants}>
<Separator className="mb-8" />
</motion.div>
<motion.div
variants={itemVariants}
className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center"
>
<p className="text-sm text-muted-foreground">
© 2025 Matthias Meister Webdesign — Crimmitschau
</p>
<div className="flex items-center gap-6 text-sm">
<span className="text-muted-foreground">
Kontakt:{" "}
<a href="mailto:info@matthias-meister-webdesign.de" className="underline underline-offset-4 transition-colors hover:text-foreground">
info@matthias-meister-webdesign.de
</a>
</span>
<span className="text-muted-foreground">
Tel:{" "}
<a href="tel:037627984400" className="underline underline-offset-4 transition-colors hover:text-foreground">
03762 798 4400
</a>
</span>
<span className="text-muted-foreground">
<a href="/impressum" className="underline underline-offset-4 transition-colors hover:text-foreground">
Impressum
</a>
</span>
<span className="text-muted-foreground">
<a href="/datenschutz" className="underline underline-offset-4 transition-colors hover:text-foreground">
Datenschutz
</a>
</span>
</div>
</motion.div>
</motion.div>
<h2 className="max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
Bereit für eine Website, die Ihr Unternehmen klarer erklärt?
</h2>
<p className="mt-4 max-w-xl text-base leading-7 text-muted-foreground">
Eine kurze Nachricht reicht. Ich prüfe, welcher Weg sinnvoll ist,
und melde mich mit einer ehrlichen Einschätzung.
</p>
<Button asChild size="lg" className="mt-6 h-11 rounded-md px-5">
<a href="#kontakt">
Kostenloses Angebot anfordern
<ArrowRight className="shrink-0" aria-hidden />
</a>
</Button>
</div>
</footer>
<address className="not-italic">
<div className="space-y-3 text-sm text-muted-foreground">
<a
href="mailto:info@matthias-meister-webdesign.de"
className="flex items-center gap-2 transition-colors hover:text-foreground"
>
<Mail className="size-4" aria-hidden />
info@matthias-meister-webdesign.de
</a>
<a
href="tel:037627984400"
className="flex items-center gap-2 transition-colors hover:text-foreground"
>
<Phone className="size-4" aria-hidden />
03762 798 4400
</a>
</div>
</address>
</div>
<div className="mt-10 flex flex-col gap-4 border-t border-border/80 pt-6 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
<p>© 2026 Matthias Meister Webdesign — Crimmitschau</p>
<div className="flex flex-wrap items-center gap-x-5 gap-y-2">
<a
href="/impressum"
className="underline underline-offset-4 transition-colors hover:text-foreground"
>
Impressum
</a>
<a
href="/datenschutz"
className="underline underline-offset-4 transition-colors hover:text-foreground"
>
Datenschutz
</a>
</div>
</div>
</div>
</section>
</footer>
);
};