93 lines
4.5 KiB
TypeScript
93 lines
4.5 KiB
TypeScript
import React, { useRef } from 'react';
|
|
import { useScrollFadeIn } from '../hooks/useScrollAnimations';
|
|
|
|
interface FAQItemProps {
|
|
question: string;
|
|
answer: string;
|
|
}
|
|
|
|
const FAQItem: React.FC<FAQItemProps> = ({ question, answer }) => {
|
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
|
|
return (
|
|
<div className="border-b border-stone-200 dark:border-stone-700">
|
|
<button
|
|
className="w-full py-6 flex justify-between items-center text-left focus:outline-none"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
aria-expanded={isOpen}
|
|
>
|
|
<h3 className="text-lg font-display text-text-main dark:text-white">{question}</h3>
|
|
<span className={`transform transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`}>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<div
|
|
className={`overflow-hidden transition-all duration-500 ease-in-out ${isOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'}`}
|
|
>
|
|
<p className="pb-6 text-text-muted dark:text-gray-400 font-body leading-relaxed max-w-2xl">
|
|
{answer}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const FAQ: React.FC = () => {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
useScrollFadeIn(containerRef);
|
|
|
|
const faqs = [
|
|
{
|
|
question: "Do you ship your ceramics internationally?",
|
|
answer: "Currently, we ship our handmade pottery mainly within Texas and the United States. We occasionally open international shipping spots for specific drops. Sign up for our newsletter to be notified."
|
|
},
|
|
{
|
|
question: "Are your pieces dishwasher and microwave safe?",
|
|
answer: "Yes! Our functional stoneware, including mugs, plates, and bowls, is fired to cone 6 oxidation, making it durable for daily use. However, hand washing is always recommended to prolong the life of your unique handmade ceramics."
|
|
},
|
|
{
|
|
question: "Where is your studio located?",
|
|
answer: "Our studio is based in the heart of Corpus Christi, Texas. We take inspiration from the Gulf Coast landscape. We offer local pickup for our Corpus Christi neighbors!"
|
|
},
|
|
{
|
|
question: "Do you offer pottery classes in Corpus Christi?",
|
|
answer: "We are working on bringing intimate wheel-throwing workshops to our Corpus Christi studio soon. Check our 'Atelier' page or follow us on Instagram for announcements."
|
|
},
|
|
{
|
|
question: "Do you take custom orders or commissions?",
|
|
answer: "We accept a limited number of custom dinnerware commissions each year. If you are looking for a bespoke set for your home or restaurant, please contact us directly."
|
|
},
|
|
{
|
|
question: "How often do you restock the shop?",
|
|
answer: "We work in small batches and typically release a new 'Sandstone' or 'Seafoam' collection every 4-6 weeks. Join our email list to get early access to the next kiln opening."
|
|
},
|
|
{
|
|
question: "What clay bodies and glazes do you use?",
|
|
answer: "We use a proprietary blend of stoneware clay that mimics the texture of Texas limestone. Our glazes are formulated in-house to reflect colors of the sea and sand."
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section ref={containerRef} className="py-24 px-6 md:px-20 bg-stone-50 dark:bg-stone-900/50">
|
|
<div className="max-w-4xl mx-auto">
|
|
<span className="block font-body text-xs uppercase tracking-[0.2em] text-text-muted mb-8">
|
|
Common Questions
|
|
</span>
|
|
<h2 className="font-display text-4xl md:text-5xl text-text-main dark:text-white mb-16">
|
|
Studio FAQ
|
|
</h2>
|
|
<div className="flex flex-col">
|
|
{faqs.map((faq, index) => (
|
|
<FAQItem key={index} question={faq.question} answer={faq.answer} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default FAQ;
|