gitea
1 month ago
parent
af620613d9
commit
925acad1ce
@ -0,0 +1,147 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import Navigation from '@/components/Navigation';
|
||||||
|
import Footer from '@/components/Footer';
|
||||||
|
|
||||||
|
export default function FeedbackPage() {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
message: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsSubmitting(true);
|
||||||
|
|
||||||
|
// Handle form submission here
|
||||||
|
console.log('Feedback submitted:', formData);
|
||||||
|
|
||||||
|
// Simulate API call
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 500));
|
||||||
|
|
||||||
|
alert('Thank you for your feedback! We appreciate your input.');
|
||||||
|
setFormData({
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
message: '',
|
||||||
|
});
|
||||||
|
setIsSubmitting(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
|
setFormData({
|
||||||
|
...formData,
|
||||||
|
[e.target.name]: e.target.value,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen">
|
||||||
|
<Navigation />
|
||||||
|
<section className="py-20 md:py-32" style={{ backgroundColor: '#FBF7F4' }}>
|
||||||
|
<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
|
||||||
|
className="text-center mb-12"
|
||||||
|
>
|
||||||
|
<h1 style={{ color: '#00171F' }} className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
|
||||||
|
Share Your Feedback
|
||||||
|
</h1>
|
||||||
|
<p style={{ color: '#00171F' }} className="text-lg md:text-xl opacity-90">
|
||||||
|
I value your thoughts and suggestions. Your feedback helps me improve my work and services.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
className="space-y-6"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="name" className="block text-sm font-medium mb-2" style={{ color: '#00171F' }}>
|
||||||
|
Name <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
required
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-3 border rounded-lg outline-none transition-all focus:ring-2 focus:ring-opacity-50"
|
||||||
|
style={{
|
||||||
|
borderColor: '#EED2CC',
|
||||||
|
color: '#00171F',
|
||||||
|
backgroundColor: '#FBF7F4'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium mb-2" style={{ color: '#00171F' }}>
|
||||||
|
Email (optional)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-3 border rounded-lg outline-none transition-all focus:ring-2 focus:ring-opacity-50"
|
||||||
|
style={{
|
||||||
|
borderColor: '#EED2CC',
|
||||||
|
color: '#00171F',
|
||||||
|
backgroundColor: '#FBF7F4'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="message" className="block text-sm font-medium mb-2" style={{ color: '#00171F' }}>
|
||||||
|
Message <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="message"
|
||||||
|
name="message"
|
||||||
|
rows={6}
|
||||||
|
required
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-3 border rounded-lg outline-none transition-all resize-none focus:ring-2 focus:ring-opacity-50"
|
||||||
|
style={{
|
||||||
|
borderColor: '#EED2CC',
|
||||||
|
color: '#00171F',
|
||||||
|
backgroundColor: '#FBF7F4'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
style={{ backgroundColor: '#00171F' }}
|
||||||
|
className="w-full text-white px-8 py-4 rounded-full text-lg font-semibold hover:opacity-90 transition-all transform hover:scale-105 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
|
||||||
|
>
|
||||||
|
{isSubmitting ? 'Sending...' : 'Send Feedback'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<Footer />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in new issue