diff --git a/client/src/App.tsx b/client/src/App.tsx index f4083b7..397f1d5 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -16,6 +16,7 @@ import EmpfangPage from "@/pages/empfang"; import AboutPage from "@/pages/about"; import ImpressumPage from "@/pages/impressum"; import DatenschutzPage from "@/pages/datenschutz"; +import KontaktPage from "@/pages/kontakt"; import AdminGalleryPage from "@/pages/admin-gallery"; import CookieConsent from "@/components/cookie-consent"; @@ -35,6 +36,7 @@ function Router() { + diff --git a/client/src/components/footer.tsx b/client/src/components/footer.tsx index 0109448..cfea553 100644 --- a/client/src/components/footer.tsx +++ b/client/src/components/footer.tsx @@ -93,6 +93,9 @@ export default function Footer() { Über uns + + Kontakt + Impressum diff --git a/client/src/pages/kontakt.tsx b/client/src/pages/kontakt.tsx new file mode 100644 index 0000000..7e7f4ec --- /dev/null +++ b/client/src/pages/kontakt.tsx @@ -0,0 +1,241 @@ +import { useState } from "react"; +import { Mail, Phone, MapPin, Send, CheckCircle, AlertCircle } from "lucide-react"; +import { SiFacebook, SiInstagram, SiYoutube, SiTiktok } from "react-icons/si"; +import Header from "@/components/header"; +import Footer from "@/components/footer"; +import { usePageMeta } from "@/hooks/use-page-meta"; +import { PageSideAds } from "@/components/adsense"; +import { apiRequest } from "@/lib/queryClient"; + +export default function KontaktPage() { + usePageMeta("Kontakt - FOLX TV", "Kontaktieren Sie FOLX TV – Ihr Fernsehsender für Volksmusik und Schlager."); + + const [formData, setFormData] = useState({ name: "", email: "", subject: "", message: "" }); + const [status, setStatus] = useState<"idle" | "sending" | "success" | "error">("idle"); + const [errorMsg, setErrorMsg] = useState(""); + + const handleChange = (e: React.ChangeEvent) => { + setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value })); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + if (!formData.name || !formData.email || !formData.message) { + setErrorMsg("Bitte füllen Sie alle Pflichtfelder aus."); + setStatus("error"); + return; + } + setStatus("sending"); + setErrorMsg(""); + try { + await apiRequest("POST", "/api/contact", formData); + setStatus("success"); + setFormData({ name: "", email: "", subject: "", message: "" }); + } catch (err: any) { + setErrorMsg(err.message || "Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut."); + setStatus("error"); + } + }; + + return ( +
+
+ +
+
+ +

+ Kontakt +

+
+ +
+
+

+ Haben Sie Fragen, Anregungen oder möchten Sie mit uns in Kontakt treten? Wir freuen uns auf Ihre Nachricht! +

+ +
+ +
+ +
+
+

Telefon

+

+49 172 567 58 00

+
+
+ + +
+ +
+
+

E-Mail

+

office@folx.tv

+
+
+ +
+
+ +
+
+

Adresse

+

BoldFrame Productions d.o.o.

+

Sokolska ulica 46

+

2000 Maribor, Slowenien

+
+
+
+ +
+

Folgen Sie uns

+
+ {[ + { href: "https://www.facebook.com/folxtv/", icon: SiFacebook, label: "Facebook" }, + { href: "https://www.instagram.com/folxtv/", icon: SiInstagram, label: "Instagram" }, + { href: "https://www.youtube.com/@folxmtv", icon: SiYoutube, label: "YouTube" }, + { href: "https://www.tiktok.com/@folxtv", icon: SiTiktok, label: "TikTok" }, + ].map((s) => ( + + + + ))} +
+
+
+ +
+

Nachricht senden

+ + {status === "success" ? ( +
+ +

Vielen Dank!

+

Ihre Nachricht wurde erfolgreich gesendet. Wir melden uns so schnell wie möglich bei Ihnen.

+ +
+ ) : ( +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +