99 lines
4.1 KiB
TypeScript
99 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import SmallHero from "@/components/Helper/SmallHero";
|
|
import React, {useContext, useEffect} from "react";
|
|
import {ThemeContext} from "@/components/provider/ThemeProvider";
|
|
import {themeColors} from "@/components/Helper/ThemeColors";
|
|
import AOS from "aos";
|
|
|
|
const ImprintComp = () => {
|
|
const {theme} = useContext(ThemeContext);
|
|
const colors = themeColors[theme];
|
|
|
|
useEffect(() => {
|
|
AOS.init({
|
|
duration: 1000,
|
|
easing: "ease",
|
|
once: true,
|
|
anchorPlacement: "top-bottom",
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="overflow-hidden transition-colors duration-500"
|
|
style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}>
|
|
|
|
{/* Hero Section */}
|
|
<div className="mt-[10vh]">
|
|
<SmallHero
|
|
title="Impressum"
|
|
subtitle=""
|
|
backgroundImage="/images/contact.png"
|
|
/>
|
|
</div>
|
|
|
|
|
|
{/* Contact Form */}
|
|
<div className="mt-16 w-[90%] sm:w-[80%] mx-auto py-12">
|
|
<h2 className="text-2xl md:text-3xl font-bold text-center"
|
|
data-aos="fade-up"
|
|
data-aos-delay="400"
|
|
>
|
|
Schreib uns eine Nachricht
|
|
</h2>
|
|
<p data-aos="fade-up" data-aos-delay="600"
|
|
className="text-center mt-3 text-[var(--secondary-text)]">
|
|
Wir melden uns schnellstmöglich bei dir!
|
|
</p>
|
|
|
|
<form className="mt-8 max-w-2xl mx-auto space-y-6">
|
|
{/* Name & Email */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{["Dein Name", "Deine E-Mail"].map((label, index) => (
|
|
<div key={index} data-aos="fade-up" data-aos-delay={index * 100}>
|
|
<label className="block font-semibold">{label}</label>
|
|
<input
|
|
type={index === 0 ? "text" : "email"}
|
|
placeholder={index === 0 ? "Max Mustermann" : "max@example.com"}
|
|
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
|
|
style={{
|
|
backgroundColor: colors.inputFieldBg,
|
|
border: `1px solid ${colors.inputBorder}`,
|
|
color: colors.primaryText
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Message */}
|
|
<div data-aos="fade-up" data-aos-delay="300">
|
|
<label className="block font-semibold">Deine Nachricht</label>
|
|
<textarea
|
|
rows={4}
|
|
placeholder="Schreibe deine Nachricht..."
|
|
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
|
|
style={{
|
|
backgroundColor: colors.inputFieldBg,
|
|
border: `1px solid ${colors.inputBorder}`,
|
|
color: colors.primaryText
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<div className="text-center" data-aos="fade-up" data-aos-delay="400">
|
|
<button
|
|
type="submit"
|
|
className="px-6 py-3 bg-blue-600 text-white text-lg font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-all"
|
|
>
|
|
📩 Nachricht senden
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ImprintComp; |