Archived
rootandClaude Sonnet 5.5
897d594dde
Die BorderGlow-Karten in Values, Kontaktabschnitt und Über uns hatten dunkle Hintergründe fest verdrahtet, ihr Text nutzt aber Theme-Farben (Kontrast 1,07:1 im hellen Modus). BorderGlow kennt jetzt lightBackgroundColor und wählt die Kartenfarbe per CSS nach Theme (--card-bg-dark / --card-bg-light, html:not(.dark)), ohne Flackern beim Laden. Dunkel behält exakt die bisherigen Farben (hsl(0 0% 6%), #120F17, hsl(0 0% 4%)); hell nutzt hsl(0 0% 96%) mit sichtbarem Rand. Der Kantenschein wird im hellen Modus normal statt mit plus-lighter gemischt und in Violett gezeichnet, sonst wäre er auf Weiß unsichtbar. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
import { Link } from "react-router-dom";
|
||
import { Button } from "@/components/ui/button";
|
||
import { ArrowRight, Mail, Phone } from "lucide-react";
|
||
import BorderGlow from "@/components/BorderGlow";
|
||
|
||
const Contact = () => {
|
||
return (
|
||
<section id="contact" className="py-24 md:py-32 bg-background relative">
|
||
<div className="container mx-auto px-6">
|
||
<div className="max-w-6xl mx-auto">
|
||
<BorderGlow
|
||
edgeSensitivity={30}
|
||
glowColor="40 80 80"
|
||
backgroundColor="#120F17"
|
||
lightBackgroundColor="hsl(0 0% 96%)"
|
||
borderRadius={28}
|
||
glowRadius={40}
|
||
glowIntensity={1}
|
||
coneSpread={25}
|
||
animated
|
||
colors={['#c084fc', '#f472b6', '#38bdf8']}
|
||
>
|
||
<div className="p-8 md:p-12 lg:p-16">
|
||
<div className="mb-12">
|
||
<div className="label-tag mb-4">Kontakt</div>
|
||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-6">
|
||
Der nächste Schritt<br />
|
||
<span className="text-muted-foreground">ist ein Gespräch</span>
|
||
</h2>
|
||
<p className="text-muted-foreground text-lg max-w-xl">
|
||
In 15 Minuten klären wir, ob und wie WEBklar Ihr Unternehmen digital
|
||
voranbringt – kostenlos und ohne Verpflichtung.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 mb-16">
|
||
<Link
|
||
to="/kontakt"
|
||
data-analytics-cta="Potenzialanalyse starten"
|
||
data-analytics-location="contact_section"
|
||
>
|
||
<Button
|
||
size="lg"
|
||
className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
|
||
>
|
||
Potenzialanalyse starten
|
||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="divider mb-12" />
|
||
<div className="flex flex-col sm:flex-row gap-8 text-muted-foreground">
|
||
<a href="mailto:support@webklar.com" className="flex items-center gap-3 hover:text-foreground transition-colors group">
|
||
<Mail className="w-5 h-5" />
|
||
<span>support@webklar.com</span>
|
||
</a>
|
||
<a href="tel:+4917623726355" className="flex items-center gap-3 hover:text-foreground transition-colors group">
|
||
<Phone className="w-5 h-5" />
|
||
<span>0176 23726355</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</BorderGlow>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default Contact;
|