99 lines
4.2 KiB
TypeScript
99 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import SmallHero from '@/components/Helper/SmallHero';
|
|
import React from 'react';
|
|
import {motion} from 'framer-motion';
|
|
|
|
const TermsOfUseComp = () => {
|
|
return (
|
|
<div className="overflow-hidden bg-background text-foreground">
|
|
{/* Hero Section */}
|
|
<div className="mt-[10vh]">
|
|
<SmallHero
|
|
title="AGB"
|
|
subtitle=""
|
|
backgroundImage="/images/contact.png"
|
|
/>
|
|
</div>
|
|
|
|
{/* Contact Form */}
|
|
<div className="mt-16 w-[90%] sm:w-[80%] mx-auto py-12">
|
|
<motion.h2
|
|
className="text-2xl md:text-3xl font-bold text-center"
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.6}}
|
|
>
|
|
Schreib uns eine Nachricht
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
className="text-center mt-3 text-muted-foreground"
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.2}}
|
|
>
|
|
Wir melden uns schnellstmöglich bei dir!
|
|
</motion.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) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: index * 0.2}}
|
|
>
|
|
<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 border border-border bg-card text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Message */}
|
|
<motion.div
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.5}}
|
|
>
|
|
<label className="block font-semibold">Deine Nachricht</label>
|
|
<textarea
|
|
rows={4}
|
|
placeholder="Schreibe deine Nachricht..."
|
|
className="w-full p-3 rounded-lg border border-border bg-card text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
|
|
/>
|
|
</motion.div>
|
|
|
|
{/* Submit Button */}
|
|
<motion.div
|
|
className="text-center"
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.7}}
|
|
>
|
|
<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>
|
|
</motion.div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TermsOfUseComp;
|