coockies und so
This commit is contained in:
218
Pottery-website/pages/Contact.tsx
Normal file
218
Pottery-website/pages/Contact.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const Contact: React.FC = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: ''
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Handle form submission
|
||||
console.log('Form submitted:', formData);
|
||||
alert('Thank you for your message! We\'ll get back to you within 1-2 business days.');
|
||||
setFormData({ name: '', email: '', subject: '', message: '' });
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
const contactInfo = [
|
||||
{
|
||||
icon: "📧",
|
||||
title: "Email",
|
||||
detail: "support@hotchpotshceramics.com",
|
||||
description: "Best for order inquiries or detailed questions"
|
||||
},
|
||||
{
|
||||
icon: "📞",
|
||||
title: "Phone",
|
||||
detail: "(361) 555-1234",
|
||||
description: "Mon–Fri, 9am–5pm CST"
|
||||
},
|
||||
{
|
||||
icon: "📍",
|
||||
title: "Workshop",
|
||||
detail: "123 Artisan Lane, Corpus Christi, TX 78401",
|
||||
description: "Please note: this is our workshop, not a retail store"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
|
||||
<div className="max-w-[1400px] mx-auto px-6 md:px-12">
|
||||
{/* Header */}
|
||||
<div className="mb-24 max-w-3xl">
|
||||
<motion.span
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1 }}
|
||||
className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
|
||||
>
|
||||
Get in Touch
|
||||
</motion.span>
|
||||
<motion.h1
|
||||
initial={{ y: 30, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.2, duration: 0.8 }}
|
||||
className="font-display text-5xl md:text-7xl lg:text-8xl leading-none text-text-main dark:text-white mb-8"
|
||||
>
|
||||
Contact<br />Us
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
initial={{ y: 30, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.4, duration: 0.8 }}
|
||||
className="font-body text-lg font-light text-stone-500 leading-relaxed"
|
||||
>
|
||||
We're happy to help with any questions, custom requests, or feedback. We usually reply to emails within 1–2 business days.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 mb-24">
|
||||
{/* Contact Form */}
|
||||
<motion.div
|
||||
initial={{ y: 30, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.5, duration: 0.8 }}
|
||||
>
|
||||
<h2 className="font-display text-3xl mb-8 text-text-main dark:text-white">
|
||||
Send us a message
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-xs uppercase tracking-widest text-stone-500 mb-3">
|
||||
Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-6 py-4 bg-white dark:bg-black border border-stone-200 dark:border-stone-800 focus:border-stone-400 dark:focus:border-stone-600 outline-none transition-colors text-text-main dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs uppercase tracking-widest text-stone-500 mb-3">
|
||||
Email *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-6 py-4 bg-white dark:bg-black border border-stone-200 dark:border-stone-800 focus:border-stone-400 dark:focus:border-stone-600 outline-none transition-colors text-text-main dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs uppercase tracking-widest text-stone-500 mb-3">
|
||||
Subject
|
||||
</label>
|
||||
<select
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
onChange={handleChange}
|
||||
className="w-full px-6 py-4 bg-white dark:bg-black border border-stone-200 dark:border-stone-800 focus:border-stone-400 dark:focus:border-stone-600 outline-none transition-colors text-text-main dark:text-white"
|
||||
>
|
||||
<option value="">Select a subject</option>
|
||||
<option value="order">Order Inquiry</option>
|
||||
<option value="custom">Custom Request</option>
|
||||
<option value="shipping">Shipping Question</option>
|
||||
<option value="return">Return/Exchange</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs uppercase tracking-widest text-stone-500 mb-3">
|
||||
Message *
|
||||
</label>
|
||||
<textarea
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
required
|
||||
rows={6}
|
||||
className="w-full px-6 py-4 bg-white dark:bg-black border border-stone-200 dark:border-stone-800 focus:border-stone-400 dark:focus:border-stone-600 outline-none transition-colors resize-none text-text-main dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-primary dark:bg-white text-white dark:text-black px-10 py-4 text-xs font-bold uppercase tracking-widest hover:bg-stone-800 dark:hover:bg-stone-200 transition-colors"
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="space-y-8">
|
||||
{contactInfo.map((info, index) => (
|
||||
<motion.div
|
||||
key={info.title}
|
||||
initial={{ y: 20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.6 + index * 0.1, duration: 0.6 }}
|
||||
className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
|
||||
>
|
||||
<div className="text-4xl mb-4">{info.icon}</div>
|
||||
<h3 className="font-display text-2xl mb-2 text-text-main dark:text-white">
|
||||
{info.title}
|
||||
</h3>
|
||||
<p className="font-body text-lg text-text-main dark:text-white mb-2">
|
||||
{info.detail}
|
||||
</p>
|
||||
<p className="font-body font-light text-sm text-stone-500">
|
||||
{info.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Media */}
|
||||
<motion.div
|
||||
initial={{ y: 30, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 1, duration: 0.8 }}
|
||||
className="text-center p-12 bg-stone-100 dark:bg-black border border-stone-200 dark:border-stone-800"
|
||||
>
|
||||
<h3 className="font-display text-3xl mb-4 text-text-main dark:text-white">
|
||||
Follow Our Journey
|
||||
</h3>
|
||||
<p className="font-body font-light text-stone-500 mb-8">
|
||||
Connect with us on Instagram or Facebook for new releases and behind-the-scenes peeks.
|
||||
</p>
|
||||
<div className="flex justify-center gap-6">
|
||||
<a
|
||||
href="https://instagram.com/hotchpotshceramics"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-8 py-3 bg-white dark:bg-stone-900 text-black dark:text-white border border-stone-300 dark:border-stone-700 text-xs font-bold uppercase tracking-widest hover:bg-stone-100 dark:hover:bg-stone-800 transition-colors"
|
||||
>
|
||||
Instagram
|
||||
</a>
|
||||
<a
|
||||
href="https://facebook.com/hotchpotshceramics"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-8 py-3 bg-white dark:bg-stone-900 text-black dark:text-white border border-stone-300 dark:border-stone-700 text-xs font-bold uppercase tracking-widest hover:bg-stone-100 dark:hover:bg-stone-800 transition-colors"
|
||||
>
|
||||
Facebook
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
Reference in New Issue
Block a user