JUSN/Webklar
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

H

Browse Source
This commit is contained in:
JUSN
2026-01-30 00:25:07 +01:00
parent 03cd75576c
commit 593df01f0b
92 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/pages/Contact.tsx Normal file
View File

@@ -0,0 +1,198 @@
import { useState } from "react";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { ArrowLeft, Send } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
const Contact = () => {
const { toast } = useToast();
const [isSubmitting, setIsSubmitting] = useState(false);
const [formData, setFormData] = useState({
name: "",
email: "",
company: "",
message: "",
});
const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
setFormData((prev) => ({
...prev,
[e.target.name]: e.target.value,
}));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
// Simulate form submission
await new Promise((resolve) => setTimeout(resolve, 1000));
toast({
title: "Nachricht gesendet!",
description: "Wir melden uns innerhalb von 24 Stunden bei Ihnen.",
});
setFormData({ name: "", email: "", company: "", message: "" });
setIsSubmitting(false);
};
return (
<div className="min-h-screen bg-background">
{/* Header */}
<header className="fixed top-0 left-0 right-0 z-50 glass-nav py-4">
<div className="container mx-auto px-6">
<div className="flex items-center justify-between">
<Link to="/" className="flex items-center gap-2 group">
<span className="text-xl font-display font-medium text-foreground tracking-tight">
Webklar
</span>
</Link>
<Link to="/">
<Button
variant="ghost"
className="text-muted-foreground hover:text-foreground"
>
<ArrowLeft className="w-4 h-4 mr-2" />
Zurück
</Button>
</Link>
</div>
</div>
</header>
{/* Main Content */}
<main className="pt-32 pb-24">
<div className="container mx-auto px-6">
<div className="max-w-2xl mx-auto">
{/* Header */}
<div className="mb-12">
<div className="label-tag mb-4">Kontakt</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-6">
Lassen Sie uns
<br />
<span className="text-muted-foreground">sprechen</span>
</h1>
<p className="text-muted-foreground text-lg">
Erzählen Sie uns von Ihrem Projekt. Wir melden uns innerhalb von
24 Stunden bei Ihnen.
</p>
</div>
{/* Contact Form */}
<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 uppercase tracking-wider text-muted-foreground">
Name *
</Label>
<Input
id="name"
name="name"
type="text"
required
value={formData.name}
onChange={handleChange}
className="bg-card border-border focus:border-foreground transition-colors h-12"
placeholder="Ihr Name"
/>
</div>
<div className="space-y-2">
<Label htmlFor="email" className="text-sm uppercase tracking-wider text-muted-foreground">
E-Mail *
</Label>
<Input
id="email"
name="email"
type="email"
required
value={formData.email}
onChange={handleChange}
className="bg-card border-border focus:border-foreground transition-colors h-12"
placeholder="ihre@email.de"
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="company" className="text-sm uppercase tracking-wider text-muted-foreground">
Unternehmen
</Label>
<Input
id="company"
name="company"
type="text"
value={formData.company}
onChange={handleChange}
className="bg-card border-border focus:border-foreground transition-colors h-12"
placeholder="Ihr Unternehmen (optional)"
/>
</div>
<div className="space-y-2">
<Label htmlFor="message" className="text-sm uppercase tracking-wider text-muted-foreground">
Nachricht *
</Label>
<Textarea
id="message"
name="message"
required
value={formData.message}
onChange={handleChange}
className="bg-card border-border focus:border-foreground transition-colors min-h-[180px] resize-none"
placeholder="Erzählen Sie uns von Ihrem Projekt..."
/>
</div>
<Button
type="submit"
disabled={isSubmitting}
className="btn-minimal rounded-full px-8 py-6 text-base font-medium group w-full md:w-auto"
>
{isSubmitting ? (
"Wird gesendet..."
) : (
<>
Nachricht senden
<Send className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
</>
)}
</Button>
</form>
{/* Contact Info */}
<div className="mt-16 pt-12 border-t border-border">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<div className="label-tag mb-2">E-Mail</div>
<a
href="mailto:hello@webklar.de"
className="text-foreground hover:text-muted-foreground transition-colors"
>
hello@webklar.de
</a>
</div>
<div>
<div className="label-tag mb-2">Telefon</div>
<a
href="tel:+4912345678"
className="text-foreground hover:text-muted-foreground transition-colors"
>
+49 123 456 78
</a>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
);
};
export default Contact;