tknuth/hotschpotsh
0
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Final

Browse Source
This commit is contained in:
Timo Knuth
2026-03-23 19:00:17 -05:00
parent f0c19fbbfa
commit 92676e652a
94 changed files with 9558 additions and 6871 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
Pottery-website/pages/Atelier.tsx
View File

@@ -1,73 +1,106 @@
import React from 'react';
import { motion } from 'framer-motion';
const Atelier: React.FC = () => {
return (
<div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
<div className="max-w-[1920px] mx-auto px-6 md:px-12">
{/* Intro */}
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 mb-32 items-center">
<div className="md:col-span-5 md:col-start-2">
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
>
The Studio
</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"
>
Formed by<br />Hand & Fire
</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 max-w-lg"
>
Our atelier is a sanctuary of slow creation. Located in the heart of Corpus Christi, we practice the ancient art of wheel-throwing, honoring the raw beauty of the Texas Coast.
</motion.p>
</div>
<div className="md:col-span-12 lg:col-span-6 relative h-[600px] lg:h-[800px] w-full">
<motion.div
initial={{ clipPath: 'inset(100% 0 0 0)' }}
animate={{ clipPath: 'inset(0% 0 0 0)' }}
transition={{ delay: 0.2, duration: 1.5, ease: "easeOut" }}
className="h-full w-full"
>
<img src="/pottery-studio.png" alt="Pottery Studio in Corpus Christi" className="w-full h-full object-cover" />
</motion.div>
</div>
</div>
{/* Philosophy Section */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 border-t border-stone-200 dark:border-stone-800 pt-24">
{[
{ title: "Coastal Clay", text: "We work with stoneware clay bodies that reflect the sandy textures of the Gulf Coast." },
{ title: "Electric Firing", text: "Fired in oxidation to cone 6, creating durable surfaces that mimic the bleached colors of driftwood and shell." },
{ title: "Functional Art", text: "Designed to be used and loved. Our ceramics are durable, dishwasher safe, and meant for daily coastal living." }
].map((item, idx) => (
<motion.div
key={item.title}
initial={{ y: 20, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
viewport={{ once: true }}
transition={{ delay: idx * 0.2, duration: 0.8 }}
className="p-8 hover:bg-white dark:hover:bg-black transition-colors duration-500"
>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">{item.title}</h3>
<p className="font-body font-light text-stone-500 leading-relaxed">{item.text}</p>
</motion.div>
))}
</div>
</div>
</div>
);
};
export default Atelier;
import React from 'react';
import { motion } from 'framer-motion';
import InstagramFeed from '../components/InstagramFeed';
import SEO, { SITE_URL } from '../components/SEO';
const atelierSchema = {
"@context": "https://schema.org",
"@type": "AboutPage",
"name": "The Studio | KNUTH Ceramics — Pottery in Corpus Christi, TX",
"description": "Discover the KNUTH Ceramics atelier in Corpus Christi, Texas. Claudia Knuth creates wheel-thrown stoneware inspired by the raw textures and colors of the Texas Gulf Coast.",
"url": `${SITE_URL}/atelier`,
"breadcrumb": {
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": `${SITE_URL}/` },
{ "@type": "ListItem", "position": 2, "name": "Atelier", "item": `${SITE_URL}/atelier` }
]
},
"about": {
"@type": "Person",
"name": "Claudia Knuth",
"jobTitle": "Ceramic Artist & Potter",
"email": "knuth.claudia@gmail.com",
"knowsAbout": ["Wheel-throwing", "Stoneware pottery", "Coastal ceramics", "Custom dinnerware"]
}
};
const Atelier: React.FC = () => {
return (
<>
<SEO
title="The Studio — Pottery in Corpus Christi, TX | KNUTH Ceramics"
description="The KNUTH Ceramics atelier in Corpus Christi, Texas. Claudia Knuth creates wheel-thrown stoneware inspired by the Gulf Coast — fired to cone 6, designed for daily coastal living."
canonical={`${SITE_URL}/atelier`}
schema={atelierSchema}
/>
<div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
<div className="max-w-[1920px] mx-auto px-6 md:px-12">
{/* Intro */}
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 mb-32 items-center">
<div className="md:col-span-5 md:col-start-2">
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
>
The Studio
</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"
>
Formed by<br />Hand & Fire
</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 max-w-lg"
>
Our atelier is a sanctuary of slow creation. Located in the heart of Corpus Christi, we practice the ancient art of wheel-throwing, honoring the raw beauty of the Texas Coast.
</motion.p>
</div>
<div className="md:col-span-12 lg:col-span-6 relative h-[600px] lg:h-[800px] w-full">
<motion.div
initial={{ clipPath: 'inset(100% 0 0 0)' }}
animate={{ clipPath: 'inset(0% 0 0 0)' }}
transition={{ delay: 0.2, duration: 1.5, ease: "easeOut" }}
className="h-full w-full"
>
<img src="/landingpage/artelier.png" alt="Pottery Studio in Corpus Christi" className="w-full h-full object-cover" />
</motion.div>
</div>
</div>
{/* Philosophy Section */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 border-t border-stone-200 dark:border-stone-800 pt-24">
{[
{ title: "Coastal Clay", text: "We work with stoneware clay bodies that reflect the sandy textures of the Gulf Coast." },
{ title: "Electric Firing", text: "Fired in an electric kiln, creating durable surfaces that mimic the bleached colors of driftwood and shell." },
{ title: "Functional Art", text: "Designed to be used and loved. Our ceramics are durable, dishwasher safe, and meant for daily coastal living." }
].map((item, idx) => (
<motion.div
key={item.title}
initial={{ y: 20, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
viewport={{ once: true }}
transition={{ delay: idx * 0.2, duration: 0.8 }}
className="p-8 hover:bg-white dark:hover:bg-black transition-colors duration-500"
>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">{item.title}</h3>
<p className="font-body font-light text-stone-500 leading-relaxed">{item.text}</p>
</motion.div>
))}
</div>
</div>
</div>
<InstagramFeed />
</>
);
};
export default Atelier;

216
Pottery-website/pages/Collections.tsx
View File

@@ -1,73 +1,143 @@
import React from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { useStore } from '../src/context/StoreContext';
const Collections: React.FC = () => {
const { products } = useStore();
return (
<section className="pt-32 pb-24 px-6 md:px-12 bg-stone-50 dark:bg-stone-900 min-h-screen">
<div className="max-w-[1920px] mx-auto">
{/* Header */}
<div className="mb-24 text-center">
<motion.h1
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.5, duration: 0.8 }}
className="font-display text-5xl md:text-7xl font-light mb-6 text-text-main dark:text-white"
>
Shop Collection
</motion.h1>
<motion.p
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.7, duration: 0.8 }}
className="font-body text-stone-500 max-w-xl mx-auto text-lg font-light leading-relaxed"
>
Curated series of functional objects. From our 'Sandstone' mugs to 'Seafoam' vases, each collection celebrates the palette of the Texas coast.
</motion.p>
</div>
{/* Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-16 lg:gap-x-16 px-4">
{products.map((collection, index) => (
<Link to={`/collections/${collection.slug}`} key={collection.id} className="block group cursor-pointer">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: index * 0.1 }}
>
<div className="relative overflow-hidden mb-6 aspect-[4/5] bg-stone-100">
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-500 z-10" />
<img
src={collection.image}
alt={collection.title}
className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
/>
{/* Quick overlay info */}
<div className="absolute bottom-6 left-6 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span className="bg-white dark:bg-black px-4 py-2 text-xs uppercase tracking-widest text-text-main dark:text-white">View Item</span>
</div>
</div>
<div className="flex justify-between items-baseline pr-2">
<div>
<h2 className="font-display text-3xl font-light text-text-main dark:text-white mb-1 group-hover:underline decoration-1 underline-offset-4">
{collection.title}
</h2>
</div>
<span className="text-lg font-light text-text-main dark:text-white">
${collection.price}
</span>
</div>
</motion.div>
</Link>
))}
</div>
</div>
</section>
);
};
export default Collections;
import React from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { useStore } from '../src/context/StoreContext';
import { CollectionItem } from '../types';
import SEO, { SITE_URL } from '../components/SEO';
const Collections: React.FC = () => {
const { products } = useStore();
const [selectedProduct, setSelectedProduct] = React.useState<CollectionItem | null>(null);
React.useEffect(() => {
if (!selectedProduct) {
return undefined;
}
const handleEscape = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
setSelectedProduct(null);
}
};
window.addEventListener('keydown', handleEscape);
return () => window.removeEventListener('keydown', handleEscape);
}, [selectedProduct]);
const collectionsSchema = {
"@context": "https://schema.org",
"@type": "CollectionPage",
"name": "Handcrafted Ceramic Collection | KNUTH Ceramics",
"description": "Browse KNUTH Ceramics' handcrafted stoneware collection. Each piece is wheel-thrown in Corpus Christi, Texas, inspired by the Gulf Coast. Vases, bowls, tableware, and more from $45.",
"url": `${SITE_URL}/collections`,
"breadcrumb": {
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": `${SITE_URL}/` },
{ "@type": "ListItem", "position": 2, "name": "Collections", "item": `${SITE_URL}/collections` }
]
},
"numberOfItems": products.length,
"itemListElement": products.map((p, i) => ({
"@type": "ListItem",
"position": i + 1,
"url": `${SITE_URL}/collections/${p.slug}`,
"name": p.title
}))
};
return (
<>
<SEO
title="Handcrafted Ceramic Collection | KNUTH Ceramics"
description="Browse KNUTH Ceramics' handcrafted stoneware collection. Each piece is wheel-thrown in Corpus Christi, Texas. Vases, bowls, and tableware from $45 — made in the Gulf Coast tradition."
canonical={`${SITE_URL}/collections`}
schema={collectionsSchema}
/>
<section className="pt-32 pb-24 px-6 md:px-12 bg-stone-50 dark:bg-stone-900 min-h-screen">
<div className="max-w-[1920px] mx-auto">
{/* Header */}
<div className="mb-24 text-center">
<motion.h1
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.5, duration: 0.8 }}
className="font-display text-5xl md:text-7xl font-light mb-6 text-text-main dark:text-white"
>
Collection
</motion.h1>
<motion.p
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.7, duration: 0.8 }}
className="font-body text-stone-500 max-w-xl mx-auto text-lg font-light leading-relaxed"
>
A gallery of handmade objects. Select any piece to view it larger, then close when you are done.
</motion.p>
</div>
{/* Grid */}
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-6 gap-y-10 lg:gap-x-10 px-4">
{products.map((collection, index) => (
<motion.button
key={collection.id}
type="button"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: index * 0.1 }}
onClick={() => setSelectedProduct(collection)}
className="group block cursor-pointer text-left"
>
<div className="relative overflow-hidden mb-6 aspect-[4/5] bg-stone-100">
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-500 z-10" />
<img
src={collection.image}
alt={collection.title}
className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
/>
</div>
</motion.button>
))}
</div>
</div>
</section>
<AnimatePresence>
{selectedProduct && (
<motion.div
className="fixed inset-0 z-[70] bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 sm:p-8"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={() => setSelectedProduct(null)}
>
<motion.div
className="relative flex w-full max-w-6xl items-center justify-center"
initial={{ scale: 0.96, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.96, opacity: 0 }}
transition={{ duration: 0.2 }}
onClick={(event) => event.stopPropagation()}
>
<img
src={selectedProduct.image}
alt={selectedProduct.title}
className="max-h-[92vh] max-w-full object-contain"
/>
<button
type="button"
onClick={() => setSelectedProduct(null)}
className="absolute right-3 top-3 text-4xl font-normal leading-none text-red-500 transition-colors hover:text-red-400"
aria-label="Close image preview"
>
x
</button>
</motion.div>
</motion.div>
)}
</AnimatePresence>
</>
);
};
export default Collections;

430
Pottery-website/pages/Contact.tsx
View File

@@ -1,218 +1,212 @@
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@knuthceramics.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/knuthceramics"
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/knuthceramics"
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;
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: "knuth.claudia@gmail.com",
description: "For commissions, inquiries, and custom orders. We reply within 1–2 business days."
},
{
icon: "📍",
title: "Location",
detail: "Corpus Christi, Texas",
description: "Our studio is based on the Gulf Coast of South Texas."
}
];
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/knuth.ceramics"
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/knuthceramics"
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;

388
Pottery-website/pages/Cookies.tsx
View File

@@ -1,194 +1,194 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
const Cookies: React.FC = () => {
const cookieTypes = [
{
type: "Essential Cookies",
icon: "🔒",
description: "These are necessary for basic site functions (like keeping items in your cart, secure login, etc.) and cannot be turned off without affecting the site.",
canDisable: false
},
{
type: "Analytics Cookies",
icon: "📊",
description: "We use Google Analytics to learn how customers find and use our site. These cookies help us improve content, layout, and functionality.",
canDisable: true,
example: "Google Analytics"
},
{
type: "Marketing Cookies",
icon: "🎯",
description: "If you opt-in, we may use cookies to show you personalized ads or to measure ad performance (e.g. Facebook Pixel, Google AdWords). No personal information is stored – just anonymous data to track which ads work best.",
canDisable: true,
example: "Facebook Pixel, Google AdWords"
}
];
return (
<div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
<div className="max-w-[1200px] mx-auto px-6 md:px-12">
{/* Header */}
<div className="mb-24">
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
>
Legal Information
</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"
>
Cookie<br />Policy
</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 max-w-3xl"
>
We use cookies and similar technologies to make our website work better for you. Cookies are small text files stored on your device. Here's how we use them and how you can control them.
</motion.p>
<motion.p
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.5, duration: 0.8 }}
className="font-body text-sm font-light text-stone-400 mt-4"
>
Last Updated: February 2, 2025
</motion.p>
</div>
{/* What Are Cookies */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.6, duration: 0.6 }}
className="mb-16 p-8 bg-amber-50 dark:bg-amber-900/10 border-l-4 border-amber-500"
>
<h2 className="font-display text-2xl mb-4 text-text-main dark:text-white">
What Are Cookies?
</h2>
<p className="font-body font-light text-stone-700 dark:text-stone-300 leading-relaxed">
Cookies are small text files that websites store on your computer or mobile device when you visit them. They help the website remember information about your visit, like your preferred language, items in your shopping cart, and other settings. This makes your next visit easier and the site more useful to you.
</p>
</motion.div>
{/* Cookie Types */}
<div className="mb-24">
<h2 className="font-display text-4xl md:text-5xl mb-12 text-text-main dark:text-white">
Types of Cookies We Use
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{cookieTypes.map((cookie, index) => (
<motion.div
key={cookie.type}
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.7 + 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-5xl mb-6">{cookie.icon}</div>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">
{cookie.type}
</h3>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed mb-4">
{cookie.description}
</p>
{cookie.example && (
<p className="font-body text-sm text-stone-500 italic">
Examples: {cookie.example}
</p>
)}
<div className="mt-6 pt-6 border-t border-stone-200 dark:border-stone-800">
<span className={`inline-block px-4 py-2 text-xs font-bold uppercase tracking-widest ${cookie.canDisable ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400' : 'bg-stone-200 dark:bg-stone-800 text-stone-600 dark:text-stone-400'}`}>
{cookie.canDisable ? 'Can be disabled' : 'Always active'}
</span>
</div>
</motion.div>
))}
</div>
</div>
{/* Managing Cookies */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1, duration: 0.6 }}
className="mb-16 border-l-2 border-stone-300 dark:border-stone-700 pl-8"
>
<h2 className="font-display text-3xl md:text-4xl mb-6 text-text-main dark:text-white">
Managing Your Cookie Preferences
</h2>
<div className="space-y-4 font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
<p>
You can control or disable cookies in your browser settings. However, disabling cookies may limit your ability to use some features (like staying logged in or completing a purchase).
</p>
<p>
By continuing to use our site without changing your settings, you consent to the use of cookies as described in this policy.
</p>
<p className="font-semibold text-text-main dark:text-white">
Browser Cookie Settings:
</p>
<ul className="list-disc list-inside space-y-2 ml-4">
<li><strong>Chrome:</strong> Settings → Privacy and security → Cookies and other site data</li>
<li><strong>Firefox:</strong> Preferences → Privacy & Security → Cookies and Site Data</li>
<li><strong>Safari:</strong> Preferences → Privacy → Manage Website Data</li>
<li><strong>Edge:</strong> Settings → Cookies and site permissions → Manage and delete cookies</li>
</ul>
</div>
</motion.div>
{/* Third-Party Cookies */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1.2, duration: 0.6 }}
className="mb-16 p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
>
<h2 className="font-display text-3xl mb-4 text-text-main dark:text-white">
Third-Party Cookies
</h2>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed mb-4">
Some cookies on our site are set by third-party services we use, such as:
</p>
<ul className="list-disc list-inside space-y-2 font-body font-light text-stone-600 dark:text-stone-400 ml-4">
<li><strong>Google Analytics:</strong> To understand how visitors use our site</li>
<li><strong>Payment Processors:</strong> To securely process transactions</li>
<li><strong>Social Media Platforms:</strong> If you interact with embedded social media content</li>
</ul>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed mt-4">
These third parties have their own privacy policies governing their use of your information. We recommend reviewing their policies to understand how they use cookies.
</p>
</motion.div>
{/* Contact */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1.4, duration: 0.8 }}
className="p-12 bg-primary dark:bg-black text-white text-center border border-stone-800"
>
<h2 className="font-display text-3xl mb-4">Questions About Cookies?</h2>
<p className="font-body font-light text-stone-300 mb-8 max-w-2xl mx-auto">
For any questions about cookies or to opt-out of analytics tracking, please contact us at <strong>support@knuthceramics.com</strong>
</p>
<Link
to="/contact"
className="inline-block bg-white text-black px-10 py-4 text-xs font-bold uppercase tracking-widest hover:bg-stone-200 transition-colors"
>
Contact Us
</Link>
</motion.div>
</div>
</div>
);
};
export default Cookies;
import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
const Cookies: React.FC = () => {
const cookieTypes = [
{
type: "Essential Cookies",
icon: "🔒",
description: "These are necessary for basic site functions (like keeping items in your cart, secure login, etc.) and cannot be turned off without affecting the site.",
canDisable: false
},
{
type: "Analytics Cookies",
icon: "📊",
description: "We use Google Analytics to learn how customers find and use our site. These cookies help us improve content, layout, and functionality.",
canDisable: true,
example: "Google Analytics"
},
{
type: "Marketing Cookies",
icon: "🎯",
description: "If you opt-in, we may use cookies to show you personalized ads or to measure ad performance (e.g. Facebook Pixel, Google AdWords). No personal information is stored – just anonymous data to track which ads work best.",
canDisable: true,
example: "Facebook Pixel, Google AdWords"
}
];
return (
<div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
<div className="max-w-[1200px] mx-auto px-6 md:px-12">
{/* Header */}
<div className="mb-24">
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
>
Legal Information
</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"
>
Cookie<br />Policy
</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 max-w-3xl"
>
We use cookies and similar technologies to make our website work better for you. Cookies are small text files stored on your device. Here's how we use them and how you can control them.
</motion.p>
<motion.p
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.5, duration: 0.8 }}
className="font-body text-sm font-light text-stone-400 mt-4"
>
Last Updated: February 2, 2025
</motion.p>
</div>
{/* What Are Cookies */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.6, duration: 0.6 }}
className="mb-16 p-8 bg-amber-50 dark:bg-amber-900/10 border-l-4 border-amber-500"
>
<h2 className="font-display text-2xl mb-4 text-text-main dark:text-white">
What Are Cookies?
</h2>
<p className="font-body font-light text-stone-700 dark:text-stone-300 leading-relaxed">
Cookies are small text files that websites store on your computer or mobile device when you visit them. They help the website remember information about your visit, like your preferred language, items in your shopping cart, and other settings. This makes your next visit easier and the site more useful to you.
</p>
</motion.div>
{/* Cookie Types */}
<div className="mb-24">
<h2 className="font-display text-4xl md:text-5xl mb-12 text-text-main dark:text-white">
Types of Cookies We Use
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{cookieTypes.map((cookie, index) => (
<motion.div
key={cookie.type}
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.7 + 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-5xl mb-6">{cookie.icon}</div>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">
{cookie.type}
</h3>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed mb-4">
{cookie.description}
</p>
{cookie.example && (
<p className="font-body text-sm text-stone-500 italic">
Examples: {cookie.example}
</p>
)}
<div className="mt-6 pt-6 border-t border-stone-200 dark:border-stone-800">
<span className={`inline-block px-4 py-2 text-xs font-bold uppercase tracking-widest ${cookie.canDisable ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400' : 'bg-stone-200 dark:bg-stone-800 text-stone-600 dark:text-stone-400'}`}>
{cookie.canDisable ? 'Can be disabled' : 'Always active'}
</span>
</div>
</motion.div>
))}
</div>
</div>
{/* Managing Cookies */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1, duration: 0.6 }}
className="mb-16 border-l-2 border-stone-300 dark:border-stone-700 pl-8"
>
<h2 className="font-display text-3xl md:text-4xl mb-6 text-text-main dark:text-white">
Managing Your Cookie Preferences
</h2>
<div className="space-y-4 font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
<p>
You can control or disable cookies in your browser settings. However, disabling cookies may limit your ability to use some features (like staying logged in or completing a purchase).
</p>
<p>
By continuing to use our site without changing your settings, you consent to the use of cookies as described in this policy.
</p>
<p className="font-semibold text-text-main dark:text-white">
Browser Cookie Settings:
</p>
<ul className="list-disc list-inside space-y-2 ml-4">
<li><strong>Chrome:</strong> Settings → Privacy and security → Cookies and other site data</li>
<li><strong>Firefox:</strong> Preferences → Privacy & Security → Cookies and Site Data</li>
<li><strong>Safari:</strong> Preferences → Privacy → Manage Website Data</li>
<li><strong>Edge:</strong> Settings → Cookies and site permissions → Manage and delete cookies</li>
</ul>
</div>
</motion.div>
{/* Third-Party Cookies */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1.2, duration: 0.6 }}
className="mb-16 p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
>
<h2 className="font-display text-3xl mb-4 text-text-main dark:text-white">
Third-Party Cookies
</h2>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed mb-4">
Some cookies on our site are set by third-party services we use, such as:
</p>
<ul className="list-disc list-inside space-y-2 font-body font-light text-stone-600 dark:text-stone-400 ml-4">
<li><strong>Google Analytics:</strong> To understand how visitors use our site</li>
<li><strong>Payment Processors:</strong> To securely process transactions</li>
<li><strong>Social Media Platforms:</strong> If you interact with embedded social media content</li>
</ul>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed mt-4">
These third parties have their own privacy policies governing their use of your information. We recommend reviewing their policies to understand how they use cookies.
</p>
</motion.div>
{/* Contact */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1.4, duration: 0.8 }}
className="p-12 bg-primary dark:bg-black text-white text-center border border-stone-800"
>
<h2 className="font-display text-3xl mb-4">Questions About Cookies?</h2>
<p className="font-body font-light text-stone-300 mb-8 max-w-2xl mx-auto">
For any questions about cookies or to opt-out of analytics tracking, please contact us at <strong>support@knuthceramics.com</strong>
</p>
<Link
to="/contact"
className="inline-block bg-white text-black px-10 py-4 text-xs font-bold uppercase tracking-widest hover:bg-stone-200 transition-colors"
>
Contact Us
</Link>
</motion.div>
</div>
</div>
);
};
export default Cookies;

11
Pottery-website/pages/Editorial.tsx
View File

@@ -3,8 +3,11 @@ import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { useStore } from '../src/context/StoreContext';
const Editorial: React.FC = () => {
const { articles, isLoading } = useStore();
const Editorial: React.FC = () => {
const { articles, isLoading } = useStore();
const getArticleHref = (slug: string) => (
slug.startsWith('/editorial/') ? slug : `/editorial/${slug}`
);
if (isLoading) return <div className="min-h-screen flex items-center justify-center pt-24 font-light text-stone-400">Loading Journal...</div>;
if (!articles || articles.length === 0) {
@@ -25,7 +28,7 @@ const Editorial: React.FC = () => {
{/* Featured Post */}
<section className="px-6 mb-32">
<div className="max-w-[1400px] mx-auto">
<Link to={`/editorial/${featuredArticle.slug}`} className="group block">
<Link to={getArticleHref(featuredArticle.slug)} className="group block">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
<div className="lg:col-span-8 overflow-hidden rounded-sm aspect-[16/9]">
<motion.img
@@ -66,7 +69,7 @@ const Editorial: React.FC = () => {
<div className="max-w-[1400px] mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
{otherArticles.map((entry, idx) => (
<Link key={entry.id} to={`/editorial/${entry.slug}`} className="group block">
<Link key={entry.id} to={getArticleHref(entry.slug)} className="group block">
<motion.div
initial={{ y: 20, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}

347
Pottery-website/pages/FAQ.tsx
View File

@@ -1,161 +1,186 @@
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
interface FAQItem {
question: string;
answer: string;
}
const faqData: FAQItem[] = [
{
question: "Are your ceramics safe for food, oven, and dishwasher use?",
answer: "Yes – all our pottery is glazed and food-safe. We use durable, non-toxic glazes that are oven-, microwave-, and dishwasher-safe. To extend their life, we still recommend hand-washing and avoiding harsh scrubbing. Treat your ceramicware gently (like any quality dishware) to keep the colors vibrant and the glaze strong."
},
{
question: "How unique is each piece?",
answer: "Every piece in our shop is designed and handcrafted in small batches. That means no two pieces are exactly alike. You will see slight variations and unique markings that make each item one-of-a-kind. We do our best to photograph products accurately, but please allow for some artisanal differences. These natural imperfections are a sign of true craftsmanship."
},
{
question: "How long will it take to receive my order?",
answer: "Once you place an order, please allow 1–3 business days for us to carefully prepare and package your item (handmade pottery takes a bit of extra time). After that, standard shipping via USPS usually takes 3–5 business days within the U.S. You'll receive a tracking number by email as soon as your order ships."
},
{
question: "Do you ship outside the USA?",
answer: "Currently we ship nationwide within the U.S. only. We do not offer international shipping at this time. Orders ship from Corpus Christi, Texas. We focus on providing fast, reliable delivery to Texas and all U.S. customers."
},
{
question: "What if my order arrives damaged?",
answer: "We take great care in packaging each piece using recyclable and padded materials. Still, accidents happen. If any item arrives broken or damaged, please contact us immediately. Take a photo of the damage (and packaging, if possible), and email us within 7 days of receipt. All orders are fully insured during transit. Once we review the details, we'll be happy to repair, replace, or refund damaged items at no additional cost to you."
},
{
question: "What is your return/exchange policy?",
answer: "We want you to love your purchase. Because each piece is handmade and unique, all sales are final except in cases of damage or defect. If something isn't right with your order, please let us know. We handle returns or exchanges for defective items (typically within 14 days of delivery). You'll just need to return the piece unused, in its original condition and packaging. (Sorry, we cannot accept returns on change-of-mind or carelessly broken items.) See our Returns page for full details."
},
{
question: "How do I contact you with questions?",
answer: "We're here to help! Feel free to reach out anytime. You can email our customer support at support@knuthceramics.com or use the contact form on our site. We aim to respond within 1–2 business days. Thank you for choosing KNUTH Ceramics – we love answering your questions and hearing your feedback!"
}
];
const FAQ: React.FC = () => {
const [openIndex, setOpenIndex] = useState<number | null>(null);
const toggleFAQ = (index: number) => {
setOpenIndex(openIndex === index ? null : index);
};
return (
<div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
<div className="max-w-[1200px] mx-auto px-6 md:px-12">
{/* Header */}
<div className="mb-24">
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
>
Help Center
</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"
>
Frequently Asked<br />Questions
</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 max-w-2xl"
>
Find answers to common questions about our handcrafted ceramics, shipping, care instructions, and more.
</motion.p>
</div>
{/* FAQ Items */}
<div className="space-y-4">
{faqData.map((item, index) => (
<motion.div
key={index}
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: index * 0.1, duration: 0.6 }}
className="border border-stone-200 dark:border-stone-800 bg-white dark:bg-black"
>
<button
onClick={() => toggleFAQ(index)}
className="w-full px-8 py-6 flex justify-between items-center hover:bg-stone-50 dark:hover:bg-stone-900 transition-colors"
>
<h3 className="font-body text-lg md:text-xl text-left text-text-main dark:text-white pr-8">
{item.question}
</h3>
<motion.div
animate={{ rotate: openIndex === index ? 45 : 0 }}
transition={{ duration: 0.3 }}
className="flex-shrink-0"
>
<svg
className="w-6 h-6 text-stone-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M12 4v16m8-8H4"
/>
</svg>
</motion.div>
</button>
<AnimatePresence>
{openIndex === index && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: "auto", opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.3 }}
className="overflow-hidden"
>
<div className="px-8 pb-6 border-t border-stone-100 dark:border-stone-800 pt-6">
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
{item.answer}
</p>
</div>
</motion.div>
)}
</AnimatePresence>
</motion.div>
))}
</div>
{/* Contact CTA */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.8, duration: 0.8 }}
className="mt-24 p-12 bg-primary dark:bg-black text-white text-center border border-stone-800"
>
<h2 className="font-display text-3xl md:text-4xl mb-4">Still have questions?</h2>
<p className="font-body font-light text-stone-400 mb-8 max-w-xl mx-auto">
We're here to help. Reach out to our customer support team.
</p>
<Link
to="/contact"
className="inline-block bg-white text-black px-10 py-4 text-xs font-bold uppercase tracking-widest hover:bg-stone-200 transition-colors"
>
Contact Us
</Link>
</motion.div>
</div>
</div>
);
};
export default FAQ;
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import SEO, { SITE_URL } from '../components/SEO';
interface FAQItem {
question: string;
answer: string;
}
const faqData: FAQItem[] = [
{
question: "Are your ceramics safe for food, oven, and dishwasher use?",
answer: "Yes – all our pottery is glazed and food-safe. We use durable, non-toxic glazes that are oven-, microwave-, and dishwasher-safe. To extend their life, we still recommend hand-washing and avoiding harsh scrubbing. Treat your ceramicware gently (like any quality dishware) to keep the colors vibrant and the glaze strong."
},
{
question: "How unique is each piece?",
answer: "Every piece we create is handcrafted in small batches at our Corpus Christi studio. No two pieces are exactly alike — you will see slight variations and unique markings that make each item one-of-a-kind. These natural imperfections are a sign of true craftsmanship and the human hand behind every piece."
},
{
question: "Is the online shop currently open?",
answer: "Our online shop is temporarily closed while we focus on new collections and studio work. You can still reach us directly for custom commissions or inquiries. Sign up for our newsletter or follow us on Instagram to be the first to know when the shop reopens."
},
{
question: "Do you take custom orders or commissions?",
answer: "Yes — we accept a limited number of custom commissions each year. Claudia's work is rooted in the Art Center of Corpus Christi community. Whether you are looking for a bespoke dinnerware set or a one-of-a-kind gift, reach out directly at knuth.claudia@gmail.com to discuss your vision, timeline, and pricing."
},
{
question: "Do you offer pottery classes or workshops?",
answer: "Pottery classes and wheel-throwing workshops are available through the Art Center of Corpus Christi. Visit the Art Center for current class schedules and registration."
},
{
question: "How do I contact you with questions?",
answer: "We are here to help! You can reach us directly at knuth.claudia@gmail.com or use the contact form on our site. We aim to respond within 1–2 business days. Thank you for your interest in KNUTH Ceramics — we love hearing from you."
}
];
const faqSchema = {
"@context": "https://schema.org",
"@type": "FAQPage",
"name": "FAQ | KNUTH Ceramics — Handcrafted Pottery Corpus Christi",
"url": `${SITE_URL}/faq`,
"breadcrumb": {
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": `${SITE_URL}/` },
{ "@type": "ListItem", "position": 2, "name": "FAQ", "item": `${SITE_URL}/faq` }
]
},
"mainEntity": faqData.map(item => ({
"@type": "Question",
"name": item.question,
"acceptedAnswer": {
"@type": "Answer",
"text": item.answer
}
}))
};
const FAQ: React.FC = () => {
const [openIndex, setOpenIndex] = useState<number | null>(null);
const toggleFAQ = (index: number) => {
setOpenIndex(openIndex === index ? null : index);
};
return (
<div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
<SEO
title="FAQ — Handcrafted Ceramics & Pottery Classes | KNUTH Ceramics"
description="Answers to common questions about KNUTH Ceramics: food safety, custom commissions, pottery classes in Corpus Christi TX, clay bodies, glazes, and how to order."
canonical={`${SITE_URL}/faq`}
schema={faqSchema}
/>
<div className="max-w-[1200px] mx-auto px-6 md:px-12">
{/* Header */}
<div className="mb-24">
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
>
Help Center
</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"
>
Frequently Asked<br />Questions
</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 max-w-2xl"
>
Find answers to common questions about our handcrafted ceramics, shipping, care instructions, and more.
</motion.p>
</div>
{/* FAQ Items */}
<div className="space-y-4">
{faqData.map((item, index) => (
<motion.div
key={index}
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: index * 0.1, duration: 0.6 }}
className="border border-stone-200 dark:border-stone-800 bg-white dark:bg-black"
>
<button
onClick={() => toggleFAQ(index)}
className="w-full px-8 py-6 flex justify-between items-center hover:bg-stone-50 dark:hover:bg-stone-900 transition-colors"
>
<h3 className="font-body text-lg md:text-xl text-left text-text-main dark:text-white pr-8">
{item.question}
</h3>
<motion.div
animate={{ rotate: openIndex === index ? 45 : 0 }}
transition={{ duration: 0.3 }}
className="flex-shrink-0"
>
<svg
className="w-6 h-6 text-stone-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M12 4v16m8-8H4"
/>
</svg>
</motion.div>
</button>
<AnimatePresence>
{openIndex === index && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: "auto", opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.3 }}
className="overflow-hidden"
>
<div className="px-8 pb-6 border-t border-stone-100 dark:border-stone-800 pt-6">
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
{item.answer}
</p>
</div>
</motion.div>
)}
</AnimatePresence>
</motion.div>
))}
</div>
{/* Contact CTA */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.8, duration: 0.8 }}
className="mt-24 p-12 bg-primary dark:bg-black text-white text-center border border-stone-800"
>
<h2 className="font-display text-3xl md:text-4xl mb-4">Still have questions?</h2>
<p className="font-body font-light text-stone-400 mb-8 max-w-xl mx-auto">
We're here to help. Reach out to our customer support team.
</p>
<Link
to="/contact"
className="inline-block bg-white text-black px-10 py-4 text-xs font-bold uppercase tracking-widest hover:bg-stone-200 transition-colors"
>
Contact Us
</Link>
</motion.div>
</div>
</div>
);
};
export default FAQ;

81
Pottery-website/pages/Home.tsx
View File

@@ -5,18 +5,93 @@ import HorizontalScrollSection from '../components/HorizontalScrollSection';
import Collections from '../components/Collections';
import QuoteSection from '../components/QuoteSection';
import JournalSection from '../components/JournalSection';
import GallerySection from '../components/GallerySection';
import InstagramFeed from '../components/InstagramFeed';
import FAQ from '../components/FAQ';
import SEO, { SITE_URL } from '../components/SEO';
const homeSchema = {
"@context": "https://schema.org",
"@type": "WebPage",
"name": "KNUTH Ceramics — Handcrafted Pottery from Corpus Christi, Texas",
"description": "KNUTH Ceramics crafts small-batch stoneware pottery in Corpus Christi, Texas. Shop handmade vases, bowls, tableware, and dinnerware inspired by the Gulf Coast. Custom commissions welcome.",
"url": `${SITE_URL}/`,
"breadcrumb": {
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": `${SITE_URL}/` }
]
}
};
const faqSchema = {
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Is the online shop currently open?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Our online shop is temporarily closed while we focus on new collections and studio work. Follow us on Instagram @knuth.ceramics or email knuth.claudia@gmail.com for commissions and updates."
}
},
{
"@type": "Question",
"name": "Are your ceramics dishwasher and microwave safe?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Our functional stoneware — including mugs, plates, and bowls — is fired to cone 6 oxidation, making it durable for daily use. Hand washing is recommended to extend the life of your piece."
}
},
{
"@type": "Question",
"name": "Where is KNUTH Ceramics located?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Our studio is rooted in Corpus Christi, Texas, inspired by the colors and textures of the Gulf Coast."
}
},
{
"@type": "Question",
"name": "Do you offer pottery classes in Corpus Christi?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Pottery classes and wheel-throwing workshops are available through the Art Center of Corpus Christi. Visit the Art Center for current schedules and registration."
}
},
{
"@type": "Question",
"name": "Do you accept custom ceramic commissions?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. We accept a limited number of custom dinnerware commissions each year. Contact Claudia at knuth.claudia@gmail.com to discuss your vision, timeline, and pricing."
}
},
{
"@type": "Question",
"name": "What clay and glazes does KNUTH Ceramics use?",
"acceptedAnswer": {
"@type": "Answer",
"text": "We use a stoneware clay body that reflects the sandy textures of the Texas Gulf Coast. Our glazes are formulated in-house to capture the colors of the sea and sand along the Corpus Christi shoreline."
}
}
]
};
const Home: React.FC = () => {
return (
<main>
<SEO
title="Handcrafted Pottery from Corpus Christi, Texas | KNUTH Ceramics"
description="KNUTH Ceramics creates small-batch stoneware pottery in Corpus Christi, TX. Shop handmade vases, bowls, and tableware inspired by the Texas Gulf Coast. Custom commissions welcome."
canonical={`${SITE_URL}/`}
schema={[homeSchema, faqSchema]}
/>
<Hero />
<FeatureSection />
<HorizontalScrollSection />
<Collections />
<GallerySection />
<InstagramFeed />
<JournalSection />
<QuoteSection />
<FAQ />

237
Pottery-website/pages/Journal/MotivationInClay.tsx
View File

@@ -1,96 +1,143 @@
import React from 'react';
import { Link } from 'react-router-dom';
import BlogPostLayout from '../../components/BlogPostLayout';
const MotivationInClay: React.FC = () => {
React.useEffect(() => {
document.title = "Creative Block for Potters: 10 Tips for Motivation | KNUTH Ceramics";
let meta = document.querySelector('meta[name="description"]');
if (!meta) {
meta = document.createElement('meta');
meta.setAttribute('name', 'description');
document.head.appendChild(meta);
}
meta.setAttribute('content', 'Overcoming Creative Block for Potters is possible. Use these 10 gentle, practical tips to rediscover your motivation and love for clay. Read more now.');
}, []);
return (
<BlogPostLayout
title="Creative Block for Potters: 10 Tips for Motivation"
category="Wellness"
date="Jun 11"
image="https://lh3.googleusercontent.com/aida-public/AB6AXuB8NOE5fGfN4d87cbcB27_Sh-nrlZlqxsTlYKbCZk98SoL-gHsPSWFNuxd1DxBq0g8Qysh0RBZ_btu-_WaH68UjV8SXPUalyxREvUqao4oXmra--pWAsaooWwKvWCzReYZ8kj7G-KIYIAo5mqudzB8n9C6-HVTNPPx9QgZHr_YsojMxlmmVcQ5bqk7-Lp0KtSAiVIPD2-1UE1dMGnkVSLUXKdgA65JIh8M3TtNkaJTGONuFKoTERrYOWe7u2BILnqyukTzlNcvK7Sc"
imageAlt="Creative Block for Potters tips"
>
<p className="lead text-xl text-stone-600 dark:text-stone-300 italic mb-8">
Dealing with <strong>Creative Block for Potters</strong> (and finding new <strong>Pottery Inspiration</strong>) is a common struggle in the studio. Where the physical labor is intense and the failure rate is high, burnout is real. Whether you are facing general exhaustion or a specific artistic wall, know that this season is part of the cycle.
</p>
<p className="mb-6">
Here is how to overcome <strong>Creative Block for Potters</strong> and find your flow again.
</p>
<img
src="https://images.unsplash.com/photo-1459156212016-c812468e2115?q=80&w=2574&auto=format&fit=crop"
alt="Creative Block for Potters guide"
className="w-full my-12 shadow-lg"
/>
<h2 className="mt-16 mb-8 text-3xl">1. Play without Purpose</h2>
<p className="mb-6">
Stop making <Link to="/collections">Collections</Link>. Stop thinking about what will sell. Grab a lump of clay and just <em>pinch</em>. When you remove the pressure, you often solve the <strong>Creative Block for Potters</strong> naturally.
</p>
<h2 className="mt-16 mb-8 text-3xl">2. Switch Your Technique</h2>
<p className="mb-6">
If you are a wheel thrower, try <strong>hand building</strong>. Changing your physical movements can unlock new neural pathways.
</p>
<h2 className="mt-16 mb-8 text-3xl">3. The "100 Pattern" Challenge</h2>
<p className="mb-6">
Commit to making 100 small test tiles. Constraints actually breed creativity.
</p>
<h2 className="mt-16 mb-8 text-3xl">4. Clean Your Studio (Reset)</h2>
<p className="mb-6">
A cluttered space leads to a cluttered mind. Spend a day organizing your <Link to="/atelier">Atelier</Link>. A fresh, clean bat on the wheel is an invitation.
</p>
<h2 className="mt-16 mb-8 text-3xl">5. Look Outside of Pottery</h2>
<p className="mb-6">
Don't look at other potters on Instagram. That leads to comparison. instead, look at:
</p>
<ul className="mb-12 space-y-4">
<li><strong>Architecture</strong>: for structural shapes.</li>
<li><strong>Nature</strong>: for textures (tree bark, river stones).</li>
</ul>
<h2 className="mt-16 mb-8 text-3xl">6. Take a Class</h2>
<p className="mb-6">
Even masters are students. Taking a workshop puts you back in the "beginner's mind," which is a fertile place for ideas.
</p>
<h2 className="mt-16 mb-8 text-3xl">7. Revisit Your "Why"</h2>
<p className="mb-6">
Look at the very first pot you ever kept. Reconnecting with your origin story can fuel your current practice.
</p>
<h2 className="mt-16 mb-8 text-3xl">8. Limit Your Time</h2>
<p className="mb-6">
Tell yourself, "I will only work for 20 minutes." Often, the hardest part is just starting.
</p>
<h2 className="mt-16 mb-8 text-3xl">9. Embrace functionality</h2>
<p className="mb-6">
Make something you <em>need</em>. A spoon rest. A soap dish. Solving a simple, functional problem is a great way to handle <strong>Creative Block for Potters</strong>.
</p>
<h2 className="mt-16 mb-8 text-3xl">10. Rest</h2>
<p className="mb-6">
Sometimes, the block isn't mental; it's physical. Take a week off. The clay will be there when you get back.
</p>
</BlogPostLayout>
);
};
import React from 'react';
import { Link } from 'react-router-dom';
import BlogPostLayout from '../../components/BlogPostLayout';
import SEO, { SITE_URL } from '../../components/SEO';
const HERO_IMAGE = 'https://lh3.googleusercontent.com/aida-public/AB6AXuB8NOE5fGfN4d87cbcB27_Sh-nrlZlqxsTlYKbCZk98SoL-gHsPSWFNuxd1DxBq0g8Qysh0RBZ_btu-_WaH68UjV8SXPUalyxREvUqao4oXmra--pWAsaooWwKvWCzReYZ8kj7G-KIYIAo5mqudzB8n9C6-HVTNPPx9QgZHr_YsojMxlmmVcQ5bqk7-Lp0KtSAiVIPD2-1UE1dMGnkVSLUXKdgA65JIh8M3TtNkaJTGONuFKoTERrYOWe7u2BILnqyukTzlNcvK7Sc';
const SOURCES = [
{
label: 'IKKAI Ceramics - Pottery Motivation: 10 Tips for When You Are Feeling Stuck',
href: 'https://ikkaiceramics.nl/blogs/welcome-to-my-journal/10-gentle-tips-for-pottery-motivation-when-youre-feeling-stuck',
},
{
label: 'Ceramic Arts Network - Ceramics Monthly',
href: 'https://ceramicartsnetwork.org/ceramics-monthly/',
},
];
const articleSchema = {
'@context': 'https://schema.org',
'@type': 'Article',
headline: 'Finding Motivation in Clay',
description: 'Finding motivation in clay during slow seasons and creative blocks. Ten gentle, practical ideas for potters who need a steadier way back into the studio.',
author: { '@type': 'Person', name: 'Claudia Knuth' },
publisher: { '@type': 'Organization', name: 'KNUTH Ceramics', url: SITE_URL },
datePublished: '2024-06-11',
url: `${SITE_URL}/editorial/finding-motivation-in-clay`,
image: HERO_IMAGE,
mainEntityOfPage: `${SITE_URL}/editorial/finding-motivation-in-clay`,
keywords: 'finding motivation in clay, pottery motivation, creative block potters, ceramic artist inspiration, potter burnout',
};
const MotivationInClay: React.FC = () => {
return (
<>
<SEO
title="Finding Motivation in Clay"
description="Finding motivation in clay during slow seasons and creative blocks. Ten gentle, practical ideas for potters who need a steadier way back into the studio."
canonical={`${SITE_URL}/editorial/finding-motivation-in-clay`}
schema={articleSchema}
ogType="article"
ogImage={HERO_IMAGE}
/>
<BlogPostLayout
title="Finding Motivation in Clay"
category="Wellness"
date="Jun 11"
image={HERO_IMAGE}
imageAlt="Finding motivation in clay - a potter's hands resting beside an unfinished ceramic piece"
>
<p className="lead text-xl text-stone-600 dark:text-stone-300 italic mb-8">
<strong>Finding motivation in clay</strong> is part of the work. Every potter knows the feeling of walking into the studio, seeing the wheel ready, and still thinking: maybe tomorrow.
</p>
<p className="mb-6">
Sometimes the block is exhaustion. Sometimes it is perfectionism. Sometimes it is the quieter anxiety of not knowing what to make next. The tips below are not a cure-all. They are gentler than that. They are ways back in.
</p>
<img
src="/product_images/motivation_pottery_mid_v4.png"
alt="Finding motivation in clay - hands working with wet clay at a pottery wheel"
className="w-full my-12 shadow-lg rounded-sm"
/>
<p className="text-sm text-center text-stone-500 -mt-8 mb-12 italic">
Sometimes the most useful goal is simply getting your hands back into clay.
</p>
<h2 className="mt-16 mb-4 text-3xl">1. Make something just because</h2>
<p className="mb-8">
Stop trying to make the saleable version of yourself for an hour. Make a crooked cup. Make something too small. Make something experimental. The pressure to be good can freeze the hands; curiosity usually unfreezes them.
</p>
<h2 className="mt-16 mb-4 text-3xl">2. Choose quantity over perfection</h2>
<p className="mb-8">
Potters learn by volume. Ten quick cylinders can teach more than one overworked perfect mug. On difficult days, make the goal output rather than excellence. The body often remembers how to keep going before the mind does.
</p>
<h2 className="mt-16 mb-4 text-3xl">3. Separate practice from production</h2>
<p className="mb-8">
Not every studio session needs to produce something worth selling. Protect a few sessions as research days. Use them to test forms, glaze ideas, trimming decisions, or scale. Failure feels different when failure is part of the brief.
</p>
<h2 className="mt-16 mb-4 text-3xl">4. Notice your studio self-talk</h2>
<p className="mb-8">
Replace &quot;I am terrible at this&quot; with &quot;this part is still new for me.&quot; Replace &quot;that failed&quot; with &quot;that taught me something.&quot; Motivation rarely grows in a studio ruled by contempt.
</p>
<h2 className="mt-16 mb-4 text-3xl">5. Tend to the space before the work</h2>
<p className="mb-8">
Wipe the table. Sweep the floor. Put on music. Bring something in from outside. The studio does not need to be perfect, but it helps when it feels intentional. We pay attention to that on the <Link to="/atelier">atelier page</Link> because atmosphere changes how the body arrives to work.
</p>
<h2 className="mt-16 mb-4 text-3xl">6. Let clay be grounding, not only productive</h2>
<p className="mb-8">
Clay asks for presence. Your hands are wet. Your phone is useless. Your attention has to come back to pressure, speed, breath, and touch. On low-motivation days, that may be enough. The point does not have to be output. The point can be contact.
</p>
<h2 className="mt-16 mb-4 text-3xl">7. Go outward before you force ideas</h2>
<p className="mb-8">
Visit a gallery. Walk near water. Look at bark, shells, stone, weathered wood, old handles, old bowls. Texture and form have to go in before they can come back out through your hands. Along the coast here, those cues are everywhere, and they show up in our <Link to="/collections">glazes and forms</Link> whether we mean them to or not.
</p>
<h2 className="mt-16 mb-4 text-3xl">8. Let community carry some of the weight</h2>
<p className="mb-8">
Pottery can be solitary, but it does not have to be isolating. A class, guild, open studio, or workshop can reset your energy quickly. Being around other people making things changes the room inside your head.
</p>
<h2 className="mt-16 mb-4 text-3xl">9. Protect creative time from business time</h2>
<p className="mb-8">
Pricing, shipping, social media, and orders can quietly consume the same mental space that used to belong to making. Sometimes motivation returns not because you found it, but because you protected it structurally. Put business tasks somewhere else in the week.
</p>
<h2 className="mt-16 mb-4 text-3xl">10. Set one small goal and let it count</h2>
<p className="mb-8">
Pull one taller wall. Trim one foot cleanly. Test one glaze combination. Small goals create traction because they can actually be finished. And when you finish them, name that. Momentum grows faster when it is noticed.
</p>
<h2 className="mt-16 mb-6 text-3xl">A note on the clay itself</h2>
<p className="mb-6">
What runs through all of this is simpler than any technique. Working with clay is one of the most human forms of grounding we have. The hand pressing into soft material and receiving a response is not incidental to the art. It is the art.
</p>
<p className="mb-12">
When motivation feels far away, come back to the smallest version of the practice. Wedge. Pinch. Press your thumb into a ball of clay. Start there.
</p>
<div className="mt-20 pt-12 border-t border-stone-200 dark:border-stone-800">
<h3 className="font-display text-xl mb-6 text-stone-500 dark:text-stone-400 uppercase tracking-widest text-sm">Sources & Further Reading</h3>
<ul className="space-y-2 text-sm text-stone-500 dark:text-stone-400 font-light">
{SOURCES.map((source) => (
<li key={source.href}>
<a href={source.href} target="_blank" rel="noreferrer" className="underline decoration-stone-300 underline-offset-4 hover:text-stone-700 dark:hover:text-stone-200">
{source.label}
</a>
</li>
))}
<li>Bayles &amp; Orland - <em>Art and Fear</em></li>
</ul>
</div>
</BlogPostLayout>
</>
);
};
export default MotivationInClay;

246
Pottery-website/pages/Journal/PackagingGuide.tsx
View File

@@ -1,90 +1,158 @@
import React from 'react';
import { Link } from 'react-router-dom';
import BlogPostLayout from '../../components/BlogPostLayout';
const PackagingGuide: React.FC = () => {
React.useEffect(() => {
document.title = "How to Package Pottery for Shipping: A Safe Guide | KNUTH Ceramics";
let meta = document.querySelector('meta[name="description"]');
if (!meta) {
meta = document.createElement('meta');
meta.setAttribute('name', 'description');
document.head.appendChild(meta);
}
meta.setAttribute('content', 'Learn how to package pottery for shipping safely. Use our double-box method and sustainable tips to ensure your handmade ceramics arrive intact. Read now.');
}, []);
return (
<BlogPostLayout
title="How to Package Pottery for Shipping"
category="Guide"
date="Jul 15"
image="https://lh3.googleusercontent.com/aida-public/AB6AXuAaWGnX_NYT3S_lOflL2NJZGbWge4AAkvra4ymvF8ag-c1UKsOAIB-rsLVQXW5xIlPZipDiK8-ysPyv22xdgsvzs4EOXSSCcrT4Lb2YCe0u5orxRaZEA5TgxeoKq15zaWKSlmnHyPGjPd_7yglpfO13eZmbU5KaxFJ1KGO0UAxoO9BpsyCYgbgINMoSz3epGe5ZdwBWRH-5KCzjoLuXimFTLcd5bqg9T1YofTxgy2hWBMJzKkafyEniq8dP6hMmfNCLVcCHHHx0hRU"
imageAlt="How to Package Pottery for Shipping Safely guide"
>
<p className="lead text-xl text-stone-600 dark:text-stone-300 italic mb-8">
<strong>How to Package Pottery for Shipping</strong> safely is the most important skill for a small business owner. There is nothing more heartbreaking than a shattered creation, so mastering this art form ensures your hard work survives the journey.
</p>
<p className="mb-6">
Here is your comprehensive guide on shipping handmade art so it arrives safely every single time.
</p>
<h2 className="mt-16 mb-8 text-3xl">1. The Double-Box Method (The Golden Rule)</h2>
<p className="mb-6">
When considering safe delivery—especially for large items—the <strong>double-box method</strong> is the industry standard.
</p>
<ul className="mb-12 space-y-4">
<li><strong>Inner Box</strong>: Wrap your <Link to="/collections">Collections</Link> piece and place it in a small box. It should fit snugly.</li>
<li><strong>Outer Box</strong>: Place the small box inside a larger shipping box, with at least 2 inches of padding on all sides.</li>
<li><em>Why?</em> The outer box absorbs the shock, keeping your art safe.</li>
</ul>
<h2 className="mt-16 mb-8 text-3xl">2. Wrapping Materials: Layers Matter</h2>
<p className="mb-6">
Don't rely on just one material when you plan your packing strategy.
</p>
<ul className="mb-12 space-y-4">
<li><strong>Layer 1: Tissue Paper</strong>: Protects the glaze.</li>
<li><strong>Layer 2: Bubble Wrap</strong>: The workhorse. Wrap the piece <em>tightly</em> in small-bubble wrap.</li>
<li><strong>The Shake Test</strong>: Shake the box hard. If you hear movement, add tougher filler.</li>
</ul>
<div className="my-16">
<img
src="/assets/images/packaging_guide.png"
alt="Sustainable pottery packaging materials including honeycomb paper and packing peanuts"
className="w-full shadow-lg rounded-sm"
/>
<p className="text-sm text-center text-stone-500 mt-4 italic">Eco-friendly packaging materials ready for use.</p>
</div>
<h2 className="mt-16 mb-8 text-3xl">3. Sustainable Packaging Alternatives</h2>
<p className="mb-6">
Many customers value sustainability in our <Link to="/atelier">Atelier</Link>.
</p>
<ul>
<li><strong>Honeycomb Paper</strong>: A biodegradable alternative.</li>
<li><strong>Corn Starch Peanuts</strong>: Dissolve in water.</li>
<li><strong>Cardboard Scraps</strong>: Excellent dense filler.</li>
</ul>
<h2 className="mt-16 mb-8 text-3xl">4. Branding Your Unboxing Experience</h2>
<ul className="mb-12 space-y-4">
<li><strong>The "Thank You" Note</strong>: Builds a connection.</li>
<li><strong>Care Instructions</strong>: Explain microwave/dishwasher safety.</li>
<li><strong>Stickers</strong>: Build anticipation.</li>
</ul>
<h2 className="mt-16 mb-8 text-3xl">5. Insurance and labeling</h2>
<ul className="mb-12 space-y-4">
<li><strong>Fragile Stickers</strong>: Helpful, but not a guarantee.</li>
<li><strong>Shipping Insurance</strong>: Always pay the extra few dollars for peace of mind.</li>
</ul>
</BlogPostLayout>
);
};
import React from 'react';
import { Link } from 'react-router-dom';
import BlogPostLayout from '../../components/BlogPostLayout';
import SEO, { SITE_URL } from '../../components/SEO';
const HERO_IMAGE = 'https://lh3.googleusercontent.com/aida-public/AB6AXuAaWGnX_NYT3S_lOflL2NJZGbWge4AAkvra4ymvF8ag-c1UKsOAIB-rsLVQXW5xIlPZipDiK8-ysPyv22xdgsvzs4EOXSSCcrT4Lb2YCe0u5orxRaZEA5TgxeoKq15zaWKSlmnHyPGjPd_7yglpfO13eZmbU5KaxFJ1KGO0UAxoO9BpsyCYgbgINMoSz3epGe5ZdwBWRH-5KCzjoLuXimFTLcd5bqg9T1YofTxgy2hWBMJzKkafyEniq8dP6hMmfNCLVcCHHHx0hRU';
const SOURCES = [
{
label: 'The Pottery Wheel - Is Pottery Dishwasher Safe? Washing Handmade Ceramics',
href: 'https://thepotterywheel.com/is-pottery-dishwasher-safe/',
},
{
label: 'Mayco Colors - Dinnerware and Food Safety',
href: 'https://www.maycocolors.com/resources/dinnerware-food-safety/',
},
{
label: 'Mayco Colors - Stoneware Bisque',
href: 'https://www.maycocolors.com/forms/stoneware-bisque',
},
{
label: 'FDA - Questions and Answers on Lead-Glazed Traditional Pottery',
href: 'https://www.fda.gov/food/environmental-contaminants-food/questions-and-answers-lead-glazed-traditional-pottery',
},
];
const articleSchema = {
'@context': 'https://schema.org',
'@type': 'Article',
headline: 'How to Care for Handmade Ceramics',
description: 'How to care for handmade ceramics: a practical daily care guide for mugs, bowls, and plates, including dishwasher, microwave, crazing, and cleaning tips.',
author: { '@type': 'Person', name: 'Claudia Knuth' },
publisher: { '@type': 'Organization', name: 'KNUTH Ceramics', url: SITE_URL },
datePublished: '2024-07-15',
url: `${SITE_URL}/editorial/how-to-care-for-handmade-ceramics`,
image: HERO_IMAGE,
mainEntityOfPage: `${SITE_URL}/editorial/how-to-care-for-handmade-ceramics`,
keywords: 'how to care for handmade ceramics, pottery care, handmade pottery care, ceramic care guide',
};
const PackagingGuide: React.FC = () => {
return (
<>
<SEO
title="How to Care for Handmade Ceramics | Daily Care Guide"
description="How to care for handmade ceramics: a practical daily care guide for mugs, bowls, and plates, including dishwasher, microwave, crazing, and cleaning tips."
canonical={`${SITE_URL}/editorial/how-to-care-for-handmade-ceramics`}
schema={articleSchema}
ogType="article"
ogImage={HERO_IMAGE}
/>
<BlogPostLayout
title="How to Care for Handmade Ceramics"
category="Guide"
date="Jul 15"
image={HERO_IMAGE}
imageAlt="how to care for handmade ceramics - handmade pottery drying after washing"
>
<p className="lead text-xl text-stone-600 dark:text-stone-300 italic mb-8">
<strong>How to care for handmade ceramics</strong> is one of the most important questions to answer when pottery becomes part of daily life. Handmade mugs, bowls, and plates are meant to be used and loved often, but they do last better when they are treated with a little attention.
</p>
<p className="mb-6">
There is something different about living with handmade work. A mug becomes part of a morning ritual. A bowl begins to hold fruit, soup, or sea salt on the kitchen counter. A plate starts to feel less like an object and more like part of the rhythm of the home. That is exactly why learning how to care for handmade ceramics matters.
</p>
<p className="mb-6">
Good pottery does not need fussy care. It needs thoughtful care. If you understand a few basics about cleaning, temperature changes, glaze surfaces, and daily use, your favorite pieces can stay beautiful and functional for years.
</p>
<h2 className="mt-16 mb-6 text-3xl">Start with the maker&apos;s care instructions</h2>
<p className="mb-6">
The first rule in how to care for handmade ceramics is simple: trust the maker first. Whether a piece is dishwasher-safe, microwave-safe, or oven-safe depends on the clay body, the glaze fit, and the firing temperature. Properly fired stoneware and porcelain are often more durable than earthenware, but not every handmade ceramic piece should be treated the same way.
</p>
<p className="mb-6">
If the potter recommends hand washing, hand wash it. If the potter says a piece is decorative only, keep it out of food use. That guidance matters more than assumptions.
</p>
<h2 className="mt-16 mb-6 text-3xl">Dishwasher-safe does not always mean best in the dishwasher</h2>
<p className="mb-6">
A big part of how to care for handmade ceramics is understanding the difference between safe and ideal. Some handmade pottery can go in the dishwasher, especially vitrified stoneware or porcelain, but repeated dishwasher cycles can still dull glossy glazes, discolor unglazed foot rings, and expose pieces to small knocks from other dishes.
</p>
<p className="mb-6">
For everyday care, hand washing is often the gentler choice. Warm water, mild soap, and a soft sponge are usually enough. If you want a favorite mug or bowl to age well, hand washing is usually the safer long-term habit.
</p>
<img
src="/product_images/care_guide_mid_v2.png"
alt="how to care for handmade ceramics - handmade pottery drying after washing"
className="w-full my-12 shadow-lg rounded-sm"
/>
<p className="text-sm text-center text-stone-500 -mt-8 mb-12 italic">
Handmade ceramics last best when daily care is gentle, consistent, and suited to the way they were made.
</p>
<h2 className="mt-16 mb-6 text-3xl">Watch for crazing, cracks, and chips</h2>
<p className="mb-6">
Another important part of how to care for handmade ceramics is paying attention when a piece changes. Fine crack lines in the glaze, called crazing, may affect how easy a surface is to clean. Chips on rims or cracks that catch your fingernail are signs that a functional piece may no longer be ideal for food use.
</p>
<p className="mb-6">
That does not mean the piece has to be discarded. A cracked mug can become a pencil cup. A crazed bowl can hold keys, shells, or dried flowers. But damaged foodware is often better retired from the table.
</p>
<h2 className="mt-16 mb-6 text-3xl">Be careful with sudden temperature changes</h2>
<p className="mb-6">
If you are learning how to care for handmade ceramics, thermal shock is worth remembering. Ceramics do not like abrupt changes in temperature. A cold bowl moved straight into a hot oven, or a hot mug rinsed immediately under cold water, can crack from stress.
</p>
<p className="mb-6">
It is always safer to warm pottery gradually and let it cool naturally. Even if a piece is microwave- or oven-friendly, gentle handling helps it last longer.
</p>
<h2 className="mt-16 mb-6 text-3xl">Know what should and should not touch food</h2>
<p className="mb-6">
Food safety is part of how to care for handmade ceramics too. Handmade pottery from a reliable studio is very different from older decorative ware or uncertain imports. FDA guidance continues to warn that some traditional pottery may contain unsafe levels of lead, especially when the source and intended use are unclear.
</p>
<p className="mb-6">
For that reason, it is always best to buy functional pottery from makers who understand food-safe surfaces and can clearly tell you how the piece is intended to be used.
</p>
<h2 className="mt-16 mb-6 text-3xl">A few everyday habits help a lot</h2>
<ul className="mb-8 space-y-4 list-none pl-0">
<li><strong>Store pieces fully dry.</strong> Moisture trapped in stacked pottery can lead to marks and odor.</li>
<li><strong>Avoid metal scouring pads.</strong> Soft sponges are safer for glaze surfaces.</li>
<li><strong>Stack with care.</strong> Handmade rims and feet do not love rough contact.</li>
<li><strong>Lift larger mugs by the body when possible.</strong> It is simply gentler over time.</li>
<li><strong>Pay attention to unusual heat in the microwave.</strong> If a piece gets very hot quickly, stop using it that way.</li>
</ul>
<p className="mb-6">
If you want to see how our functional work is made and presented, browse the <Link to="/collections">collection</Link>, visit the <Link to="/atelier">atelier</Link>, or read more through the <Link to="/editorial">editorial archive</Link>. For practical buying questions, the <Link to="/faq">FAQ</Link> is a useful next stop too.
</p>
<h2 className="mt-16 mb-6 text-3xl">Handmade pottery is meant to be used</h2>
<p className="mb-6">
The heart of how to care for handmade ceramics is not perfection. It is attention. Use your pottery often. Wash it kindly. Store it dry. Notice when a piece needs a softer kind of use.
</p>
<p className="mb-12">
The best handmade ceramics are not the ones hidden away in a cabinet. They are the ones that become part of daily life. Knowing how to care for handmade ceramics simply helps those pieces stay with you longer.
</p>
<div className="mt-20 pt-12 border-t border-stone-200 dark:border-stone-800">
<h3 className="font-display text-xl mb-6 text-stone-500 dark:text-stone-400 uppercase tracking-widest text-sm">Sources & Further Reading</h3>
<ul className="space-y-2 text-sm text-stone-500 dark:text-stone-400 font-light">
{SOURCES.map((source) => (
<li key={source.href}>
<a href={source.href} target="_blank" rel="noreferrer" className="underline decoration-stone-300 underline-offset-4 hover:text-stone-700 dark:hover:text-stone-200">
{source.label}
</a>
</li>
))}
</ul>
</div>
</BlogPostLayout>
</>
);
};
export default PackagingGuide;

246
Pottery-website/pages/Journal/ProductPhotography.tsx
View File

@@ -1,93 +1,155 @@
import React from 'react';
import { Link } from 'react-router-dom';
import BlogPostLayout from '../../components/BlogPostLayout';
// Wait, I don't know if react-helmet is installed. Checking package.json... it was not.
// I will adhere to the "no new dependencies" rule unless necessary. I'll just render the meta tags usually, but without Helmet they won't lift to head.
// The user asked for "Meta Title" and "Meta Description" implementation. I will add a helper to update document.title.
const ProductPhotography: React.FC = () => {
React.useEffect(() => {
document.title = "Product Photography for Pottery: Tips for Sales | KNUTH Ceramics";
// Simple meta description update for basic SPA
let meta = document.querySelector('meta[name="description"]');
if (!meta) {
meta = document.createElement('meta');
meta.setAttribute('name', 'description');
document.head.appendChild(meta);
}
meta.setAttribute('content', 'Master Product Photography for Pottery with our DIY guide. Learn lighting and styling tips to boost your handmade ceramic sales online. Read more now.');
}, []);
return (
<BlogPostLayout
title="Product Photography for Pottery"
category="Studio"
date="Oct 03"
image="https://lh3.googleusercontent.com/aida-public/AB6AXuAipMlYLTcRT_hdc3VePfFIlrA56VzZ5G2y3gcRfmIZMERwGFKq2N19Gqo6mw7uZowXmjl2eJ89TI3Mcud2OyOfadO3mPVF_v0sI0OHupqM49WEFcWzH-Wbu3DL6bQ46F2Y8SIAk-NUQy8psjcIdBKRrM8fqdn4eOPANYTXpVxkLMAm4R0Axy4aEKNdmj917ZKKTxvXB-J8nGlITJkJ-ua7XcZOwGnfK5ttzyWW35A0oOSffCf972gmpV27wrVQgYJNLS7UyDdyQIQ"
imageAlt="DIY Product Photography for Pottery setup with natural light"
>
<p className="lead text-xl text-stone-600 dark:text-stone-300 italic mb-8">
Mastering <strong>Product Photography for Pottery</strong> is essential because in the world of handmade business, your work is only as good as the photo that represents it. Since customers can't touch your mugs online, your photos must bridge the gap between browsing and buying.
</p>
<p>
Here is how to elevate your <strong>Product Photography for Pottery</strong> without expensive gear.
</p>
<img
src="https://images.unsplash.com/photo-1516483638261-f4dbaf036963?q=80&w=2574&auto=format&fit=crop"
alt="Product Photography for Pottery setup"
title="DIY Setup"
className="w-full my-12 shadow-lg"
/>
<h2 className="mt-16 mb-8 text-3xl">1. Treasure the Natural Light</h2>
<p className="mb-6">
Lighting is the single most critical element of successful <strong>Product Photography for Pottery</strong>. Avoid the harsh, yellow glow of indoor lamps. Instead, set up your "studio" next to a large North or South-facing window, similar to the natural light in our <Link to="/atelier">Atelier</Link>.
</p>
<ul className="mb-12 space-y-4">
<li><strong>Diffused Light is Best</strong>: If the sun is beaming directly in, tape a sheet of white parchment paper over the window. This creates soft shadows that highlight the curves of your <strong>ceramic vessels</strong> without blinding glare.</li>
<li><strong>The Golden Hour</strong>: For lifestyle shots, try shooting during the hour after sunrise or before sunset for a warm, magical glow.</li>
</ul>
<h2 className="mt-16 mb-8 text-3xl">2. Master the "Hero Shot"</h2>
<p className="mb-6">
Every listing needs a clear shot. When mastering <strong>Product Photography for Pottery</strong>, the "Hero Shot" usually requires a clean background for your <Link to="/collections">Collections</Link>.
</p>
<ul className="mb-12 space-y-4">
<li><strong>The Infinite Curve</strong>: Use a large sheet of white poster board. Tape one end to the wall and let it curve gently down onto the table. This seamless background eliminates distracting horizon lines.</li>
<li><strong>Tripod Stability</strong>: Blurry photos are a dealbreaker. If you don't have a tripod, prop your phone up against a stack of books.</li>
</ul>
<h2 className="mt-16 mb-8 text-3xl">3. Tell a Story with Props</h2>
<p className="mb-6">
While a clean background shows the details, lifestyle **Product Photography for Pottery** sells the <em>dream</em>.
</p>
<ul className="mb-12 space-y-4">
<li><strong>Context matters</strong>: Don't just show a mug; show it steaming with coffee next to a half-read book.</li>
<li><strong>Keep it subtle</strong>: Your props should never compete with your work. Neutral linens complement the vibrant <strong>glaze colors</strong> of your <Link to="/collections">Collections</Link>.</li>
</ul>
<h2 className="mt-16 mb-8 text-3xl">4. Angles & Details</h2>
<p className="mb-6">
Don't stop at one angle. Online buyers need to see everything.
</p>
<ul className="mb-12 space-y-4">
<li><strong>The Eye-Level Shot</strong>: Perfect for showing the profile of a vase.</li>
<li><strong>The Top-Down Shot</strong>: Ideal for plates and bowls.</li>
<li><strong>The Detail Macro</strong>: Get close. Show the texture of the raw clay body.</li>
</ul>
<h2 className="mt-16 mb-8 text-3xl">5. Editing: Less is More</h2>
<p className="mb-6">
You don't need Photoshop. Free apps like <strong>Snapseed</strong> or <strong>Lightroom Mobile</strong> are powerful tools for editing <strong>Product Photography for Pottery</strong>.
</p>
<ul className="mb-12 space-y-4">
<li><strong>Correction, not Alteration</strong>: Adjust brightness, contrast, and white balance.</li>
<li><strong>True-to-Life Color</strong>: Be very careful not to over-saturate.</li>
</ul>
</BlogPostLayout>
);
};
import React from 'react';
import { Link } from 'react-router-dom';
import BlogPostLayout from '../../components/BlogPostLayout';
import SEO, { SITE_URL } from '../../components/SEO';
const HERO_IMAGE = 'https://lh3.googleusercontent.com/aida-public/AB6AXuAipMlYLTcRT_hdc3VePfFIlrA56VzZ5G2y3gcRfmIZMERwGFKq2N19Gqo6mw7uZowXmjl2eJ89TI3Mcud2OyOfadO3mPVF_v0sI0OHupqM49WEFcWzH-Wbu3DL6bQ46F2Y8SIAk-NUQy8psjcIdBKRrM8fqdn4eOPANYTXpVxkLMAm4R0Axy4aEKNdmj917ZKKTxvXB-J8nGlITJkJ-ua7XcZOwGnfK5ttzyWW35A0oOSffCf972gmpV27wrVQgYJNLS7UyDdyQIQ';
const SOURCES = [
{
label: 'Ceramic Arts Network - A Guide to Pottery Photography That Will Make Your Work Pop',
href: 'https://ceramicartsnetwork.org/daily/article/A-Guide-to-Pottery-Photography-That-Will-Make-Your-Work-Pop',
},
{
label: "Etsy Seller Handbook - The Ultimate Guide to Telling Your Etsy Shop's Visual Story",
href: 'https://www.etsy.com/seller-handbook/article/the-ultimate-guide-to-telling-your-etsy/22722480541',
},
{
label: 'ClayShare - Photographing Your Pottery',
href: 'https://www.clayshare.com/photographing-your-pottery',
},
];
const articleSchema = {
'@context': 'https://schema.org',
'@type': 'Article',
headline: 'Product Photography for Small Businesses',
description: 'Product photography for small businesses selling handmade ceramics. Learn light, angles, styling, and listing-photo essentials that help convert browsers into buyers.',
author: { '@type': 'Person', name: 'Claudia Knuth' },
publisher: { '@type': 'Organization', name: 'KNUTH Ceramics', url: SITE_URL },
datePublished: '2024-10-03',
url: `${SITE_URL}/editorial/product-photography-for-small-businesses`,
image: HERO_IMAGE,
mainEntityOfPage: `${SITE_URL}/editorial/product-photography-for-small-businesses`,
keywords: 'product photography for small businesses, pottery photography, ceramic product photos, handmade business photography',
};
const ProductPhotography: React.FC = () => {
return (
<>
<SEO
title="Product Photography for Small Businesses"
description="Product photography for small businesses selling handmade ceramics. Learn light, angles, styling, and listing-photo essentials that help convert browsers into buyers."
canonical={`${SITE_URL}/editorial/product-photography-for-small-businesses`}
schema={articleSchema}
ogType="article"
ogImage={HERO_IMAGE}
/>
<BlogPostLayout
title="Product Photography for Small Businesses"
category="Studio"
date="Oct 03"
image={HERO_IMAGE}
imageAlt="Product photography for small businesses - handmade pottery styled near a window with natural light"
>
<p className="lead text-xl text-stone-600 dark:text-stone-300 italic mb-8">
<strong>Product photography for small businesses</strong> is one of the most powerful tools a maker has, and one of the most overlooked. Beautiful pots are not enough on their own. You also need beautiful photos to tell the story.
</p>
<p className="mb-6">
I remember a specific moment clearly. I had just finished a batch of Gulf-glazed mugs - soft seafoam bleeding into sandy cream, exactly the way the water looks near the shore on a quiet morning. I listed them on my shop within the hour, took a quick photo on my kitchen counter, and waited. Nothing.
</p>
<p className="mb-6">
A few weeks later I was scrolling through another potter&apos;s shop. The work was technically similar to mine, but her photos stopped me mid-scroll. Soft light across the throwing lines. A hand around a mug. A top-down shot that showed glaze pooling at the center of a bowl. I bought something without even meaning to.
</p>
<p className="mb-6">
That was the lesson: I was not selling bad pots. I was telling a bad story.
</p>
<h2 className="mt-16 mb-6 text-3xl">Why product photography matters so much</h2>
<p className="mb-6">
The strongest seller education on Etsy, Ceramic Arts Network, and ClayShare keeps circling the same truth: online buyers decide visually, and they decide quickly. For handmade ceramics, photos carry even more weight because customers cannot feel the clay body, read the glaze surface, or judge scale with their hands. Your images have to do that work for them.
</p>
<p className="mb-6">
Your job is to give the customer&apos;s hands something to imagine.
</p>
<h2 className="mt-16 mb-6 text-3xl">1. Start with light, not your camera</h2>
<p className="mb-6">
The camera matters less than the light. The most effective setup I know costs almost nothing: a large window, an overcast day, and a sheet of white foam board placed opposite the light source to lift the shadows.
</p>
<p className="mb-6">
What you want to avoid is direct sunlight. It creates harsh hotspots, flattens matte glazes, and blows out glossy surfaces. Soft directional light does the opposite. It reveals form, texture, and the subtle transitions that make handmade work feel alive.
</p>
<p className="mb-6">
If you need consistency year-round, two daylight-balanced LED lights with diffusion are enough for a small studio setup. But if you are just beginning, use the window first. Learn to see light before you spend money.
</p>
<img
src="/product_images/product_photography_mid_v2.png"
alt="Product photography for small businesses - ceramics styled near a window with soft natural light"
className="w-full my-12 shadow-lg rounded-sm"
/>
<p className="text-sm text-center text-stone-500 -mt-8 mb-12 italic">
Natural window light is still the easiest and most flattering starting point for pottery photography.
</p>
<h2 className="mt-16 mb-6 text-3xl">2. The six photos every listing needs</h2>
<p className="mb-6">
You do not need twenty angles. You need the right six:
</p>
<ul className="mb-8 space-y-4 list-none pl-0">
<li><strong>The hero shot.</strong> Slightly elevated, clean background, the image that carries the listing.</li>
<li><strong>The front profile.</strong> Shows silhouette, proportion, and handle placement.</li>
<li><strong>The top-down.</strong> Essential for bowls and plates because the interior matters.</li>
<li><strong>The detail shot.</strong> Throwing lines, glaze breaks, clay texture. This is where handmade work wins.</li>
<li><strong>The scale shot.</strong> A hand, spoon, or book nearby so size is unmistakable.</li>
<li><strong>The in-use shot.</strong> A mug with coffee, a bowl with fruit, a vase with something from outside. This is where people start seeing the piece in their own life.</li>
</ul>
<h2 className="mt-16 mb-6 text-3xl">3. Backgrounds and props should support the pot</h2>
<p className="mb-6">
For listing images, stay neutral: white paper, linen, stone, raw wood. For lifestyle images, use props that feel like they come from the same world as the clay. In my studio here in Corpus Christi, that often means weathered wood, natural fiber cloth, and something gathered from outside.
</p>
<p className="mb-6">
The rule I keep coming back to is simple: props support the pot. They do not perform alongside it. If someone remembers the eucalyptus stem more than the bowl, pull the eucalyptus.
</p>
<h2 className="mt-16 mb-6 text-3xl">4. A few phone-camera habits matter more than gear</h2>
<ul className="mb-8 space-y-4 list-none pl-0">
<li><strong>Lock focus and exposure.</strong> Let the composition stay stable from shot to shot.</li>
<li><strong>Do not use digital zoom.</strong> Move closer instead.</li>
<li><strong>Use a tripod.</strong> Even a small tabletop phone tripod makes a visible difference.</li>
<li><strong>Keep white balance consistent.</strong> One glaze should not look like three different colors across one listing.</li>
<li><strong>Photograph details intentionally.</strong> Texture is part of the value of handmade work.</li>
</ul>
<p className="mb-6">
You can browse our <Link to="/collections">current collection</Link> to see how we approach consistency across listings, and our <Link to="/atelier">atelier page</Link> for the studio atmosphere those images grow out of.
</p>
<h2 className="mt-16 mb-6 text-3xl">This is craft, too</h2>
<p className="mb-6">
Product photography for small businesses is a craft skill the same way trimming or pulling a handle is a craft skill. It takes repetition. It takes attention. And it gets better when you treat it as part of the work rather than something separate from it.
</p>
<p className="mb-12">
Beautiful pots deserve an audience. Good photographs are often how they find one.
</p>
<div className="mt-20 pt-12 border-t border-stone-200 dark:border-stone-800">
<h3 className="font-display text-xl mb-6 text-stone-500 dark:text-stone-400 uppercase tracking-widest text-sm">Sources & Further Reading</h3>
<ul className="space-y-2 text-sm text-stone-500 dark:text-stone-400 font-light">
{SOURCES.map((source) => (
<li key={source.href}>
<a href={source.href} target="_blank" rel="noreferrer" className="underline decoration-stone-300 underline-offset-4 hover:text-stone-700 dark:hover:text-stone-200">
{source.label}
</a>
</li>
))}
</ul>
</div>
</BlogPostLayout>
</>
);
};
export default ProductPhotography;

412
Pottery-website/pages/Privacy.tsx
View File

@@ -1,206 +1,206 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
const Privacy: React.FC = () => {
const sections = [
{
title: "Information We Collect",
content: [
{
subtitle: "Account & Order Information",
text: "When you make a purchase or create an account, we collect your name, billing and shipping address, email, phone number, and payment information (handled securely by our payment processor)."
},
{
subtitle: "Site Usage",
text: "We may collect data about how you use our website (such as pages visited, items viewed) through cookies and analytics tools. This is non-identifying information to help us improve our site."
},
{
subtitle: "Communications",
text: "If you contact us by email or fill out our contact form, we collect your message and contact details to respond to you."
}
]
},
{
title: "How We Use Information",
content: [
{
subtitle: "To fulfill orders",
text: "Processing payments, shipping purchases, and sending order confirmations and updates."
},
{
subtitle: "Customer service",
text: "Answering your inquiries, providing support, and improving our products and services."
},
{
subtitle: "Marketing (with consent)",
text: "Sending you newsletters or promotional offers if you opt-in. You can unsubscribe at any time."
},
{
subtitle: "Site improvement",
text: "Analyzing site usage trends to enhance our website and customer experience."
}
]
},
{
title: "Sharing & Third Parties",
content: [
{
subtitle: "We do not sell your personal information",
text: "However, we share limited data with trusted third parties as needed:"
},
{
subtitle: "Shipping and Fulfillment",
text: "We provide your address and order details to USPS or other carriers to deliver your items."
},
{
subtitle: "Payment Processors",
text: "Secure payment details (e.g. credit card) are handled by Stripe/PayPal (your full card number is not stored on our site)."
},
{
subtitle: "Marketing Services",
text: "If you subscribe to our newsletter, we use email marketing platforms (e.g. Mailchimp) to send updates."
},
{
subtitle: "Analytics",
text: "We use Google Analytics to understand website traffic. This service may set cookies and collect usage data, but it does not identify you personally."
}
]
},
{
title: "Your Rights",
content: [
{
subtitle: "Data Access & Control",
text: "Depending on where you live (such as California), you may have certain rights regarding your data. Generally, you can: Access or correct the personal information we hold about you; Request deletion of your data (for example, if you delete your account or unsubscribe from communications); Opt-out of certain uses of your data, like marketing emails."
},
{
subtitle: "Exercise Your Rights",
text: "To exercise any of these rights or with questions about your data, contact us at privacy@knuthceramics.com. We will respond within 30 days."
}
]
},
{
title: "Data Security",
content: [
{
subtitle: "Protection Measures",
text: "We take data security seriously. We use HTTPS/SSL for secure data transmission and follow industry-standard practices to protect your data. Only authorized staff have access to order details, and we never store sensitive payment data on our servers. If a data breach occurs, we will notify affected users in accordance with applicable laws."
}
]
},
{
title: "Children's Privacy",
content: [
{
subtitle: "Age Restrictions",
text: "Our site and products are not intended for children under 13. We do not knowingly collect information from children under 13. If we learn that we have collected such data, we will promptly delete it. If you are a parent or guardian and believe we have information about your child, please contact us."
}
]
}
];
return (
<div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
<div className="max-w-[1200px] mx-auto px-6 md:px-12">
{/* Header */}
<div className="mb-24">
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
>
Legal Information
</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"
>
Privacy<br />Policy
</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 max-w-3xl"
>
At KNUTH Ceramics, your privacy and trust are important to us. We collect and handle your information responsibly, because 60% of people are more likely to trust brands that protect their data. This policy explains what data we collect, how we use it, and your rights.
</motion.p>
<motion.p
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.5, duration: 0.8 }}
className="font-body text-sm font-light text-stone-400 mt-4"
>
Last Updated: February 2, 2025
</motion.p>
</div>
{/* Policy Sections */}
<div className="space-y-16">
{sections.map((section, index) => (
<motion.div
key={section.title}
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.6 + index * 0.1, duration: 0.6 }}
className="border-l-2 border-stone-300 dark:border-stone-700 pl-8"
>
<h2 className="font-display text-3xl md:text-4xl mb-8 text-text-main dark:text-white">
{section.title}
</h2>
<div className="space-y-6">
{section.content.map((item, idx) => (
<div key={idx}>
<h3 className="font-body font-semibold text-lg text-text-main dark:text-white mb-2">
{item.subtitle}
</h3>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
{item.text}
</p>
</div>
))}
</div>
</motion.div>
))}
</div>
{/* Contact & Updates */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1.2, duration: 0.8 }}
className="mt-24 p-12 bg-primary dark:bg-black text-white border border-stone-800"
>
<h2 className="font-display text-3xl mb-4">Contact & Updates</h2>
<p className="font-body font-light text-stone-300 leading-relaxed mb-6 max-w-3xl">
If you have any privacy questions, or if you want to request or update your personal data, please contact us at <strong>privacy@knuthceramics.com</strong> or use our contact page. We may update this Privacy Policy occasionally to reflect changes in our practices; the latest version will always be posted here with an updated date.
</p>
<p className="font-body font-light text-stone-400 text-sm">
By shopping with us, you acknowledge you have read and agree to this Privacy Policy.
</p>
</motion.div>
{/* Additional Contact */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1.4, duration: 0.8 }}
className="mt-12 text-center"
>
<Link
to="/contact"
className="inline-block bg-white dark:bg-stone-800 text-black dark:text-white px-10 py-4 text-xs font-bold uppercase tracking-widest border border-stone-300 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700 transition-colors"
>
Contact Us
</Link>
</motion.div>
</div>
</div>
);
};
export default Privacy;
import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
const Privacy: React.FC = () => {
const sections = [
{
title: "Information We Collect",
content: [
{
subtitle: "Account & Order Information",
text: "When you make a purchase or create an account, we collect your name, billing and shipping address, email, phone number, and payment information (handled securely by our payment processor)."
},
{
subtitle: "Site Usage",
text: "We may collect data about how you use our website (such as pages visited, items viewed) through cookies and analytics tools. This is non-identifying information to help us improve our site."
},
{
subtitle: "Communications",
text: "If you contact us by email or fill out our contact form, we collect your message and contact details to respond to you."
}
]
},
{
title: "How We Use Information",
content: [
{
subtitle: "To fulfill orders",
text: "Processing payments, shipping purchases, and sending order confirmations and updates."
},
{
subtitle: "Customer service",
text: "Answering your inquiries, providing support, and improving our products and services."
},
{
subtitle: "Marketing (with consent)",
text: "Sending you newsletters or promotional offers if you opt-in. You can unsubscribe at any time."
},
{
subtitle: "Site improvement",
text: "Analyzing site usage trends to enhance our website and customer experience."
}
]
},
{
title: "Sharing & Third Parties",
content: [
{
subtitle: "We do not sell your personal information",
text: "However, we share limited data with trusted third parties as needed:"
},
{
subtitle: "Shipping and Fulfillment",
text: "We provide your address and order details to USPS or other carriers to deliver your items."
},
{
subtitle: "Payment Processors",
text: "Secure payment details (e.g. credit card) are handled by Stripe/PayPal (your full card number is not stored on our site)."
},
{
subtitle: "Marketing Services",
text: "If you subscribe to our newsletter, we use email marketing platforms (e.g. Mailchimp) to send updates."
},
{
subtitle: "Analytics",
text: "We use Google Analytics to understand website traffic. This service may set cookies and collect usage data, but it does not identify you personally."
}
]
},
{
title: "Your Rights",
content: [
{
subtitle: "Data Access & Control",
text: "Depending on where you live (such as California), you may have certain rights regarding your data. Generally, you can: Access or correct the personal information we hold about you; Request deletion of your data (for example, if you delete your account or unsubscribe from communications); Opt-out of certain uses of your data, like marketing emails."
},
{
subtitle: "Exercise Your Rights",
text: "To exercise any of these rights or with questions about your data, contact us at privacy@knuthceramics.com. We will respond within 30 days."
}
]
},
{
title: "Data Security",
content: [
{
subtitle: "Protection Measures",
text: "We take data security seriously. We use HTTPS/SSL for secure data transmission and follow industry-standard practices to protect your data. Only authorized staff have access to order details, and we never store sensitive payment data on our servers. If a data breach occurs, we will notify affected users in accordance with applicable laws."
}
]
},
{
title: "Children's Privacy",
content: [
{
subtitle: "Age Restrictions",
text: "Our site and products are not intended for children under 13. We do not knowingly collect information from children under 13. If we learn that we have collected such data, we will promptly delete it. If you are a parent or guardian and believe we have information about your child, please contact us."
}
]
}
];
return (
<div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
<div className="max-w-[1200px] mx-auto px-6 md:px-12">
{/* Header */}
<div className="mb-24">
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
>
Legal Information
</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"
>
Privacy<br />Policy
</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 max-w-3xl"
>
At KNUTH Ceramics, your privacy and trust are important to us. We collect and handle your information responsibly, because 60% of people are more likely to trust brands that protect their data. This policy explains what data we collect, how we use it, and your rights.
</motion.p>
<motion.p
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.5, duration: 0.8 }}
className="font-body text-sm font-light text-stone-400 mt-4"
>
Last Updated: February 2, 2025
</motion.p>
</div>
{/* Policy Sections */}
<div className="space-y-16">
{sections.map((section, index) => (
<motion.div
key={section.title}
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.6 + index * 0.1, duration: 0.6 }}
className="border-l-2 border-stone-300 dark:border-stone-700 pl-8"
>
<h2 className="font-display text-3xl md:text-4xl mb-8 text-text-main dark:text-white">
{section.title}
</h2>
<div className="space-y-6">
{section.content.map((item, idx) => (
<div key={idx}>
<h3 className="font-body font-semibold text-lg text-text-main dark:text-white mb-2">
{item.subtitle}
</h3>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
{item.text}
</p>
</div>
))}
</div>
</motion.div>
))}
</div>
{/* Contact & Updates */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1.2, duration: 0.8 }}
className="mt-24 p-12 bg-primary dark:bg-black text-white border border-stone-800"
>
<h2 className="font-display text-3xl mb-4">Contact & Updates</h2>
<p className="font-body font-light text-stone-300 leading-relaxed mb-6 max-w-3xl">
If you have any privacy questions, or if you want to request or update your personal data, please contact us at <strong>privacy@knuthceramics.com</strong> or use our contact page. We may update this Privacy Policy occasionally to reflect changes in our practices; the latest version will always be posted here with an updated date.
</p>
<p className="font-body font-light text-stone-400 text-sm">
By shopping with us, you acknowledge you have read and agree to this Privacy Policy.
</p>
</motion.div>
{/* Additional Contact */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1.4, duration: 0.8 }}
className="mt-12 text-center"
>
<Link
to="/contact"
className="inline-block bg-white dark:bg-stone-800 text-black dark:text-white px-10 py-4 text-xs font-bold uppercase tracking-widest border border-stone-300 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700 transition-colors"
>
Contact Us
</Link>
</motion.div>
</div>
</div>
);
};
export default Privacy;

51
Pottery-website/pages/ProductDetail.tsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { useParams, Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { useStore } from '../src/context/StoreContext';
import SEO, { SITE_URL } from '../components/SEO';
const ProductDetail: React.FC = () => {
const { slug } = useParams<{ slug: string }>();
@@ -17,8 +18,56 @@ const ProductDetail: React.FC = () => {
);
}
const productSchema = {
"@context": "https://schema.org",
"@type": "Product",
"name": product.title,
"description": `${product.description} Handcrafted in Corpus Christi, TX by Claudia Knuth. Made in small batches using stoneware clay inspired by the Texas Gulf Coast.`,
"image": `${SITE_URL}${product.image}`,
"url": `${SITE_URL}/collections/${product.slug}`,
"brand": {
"@type": "Brand",
"name": "KNUTH Ceramics"
},
"manufacturer": {
"@type": "LocalBusiness",
"name": "KNUTH Ceramics",
"address": {
"@type": "PostalAddress",
"addressLocality": "Corpus Christi",
"addressRegion": "TX",
"addressCountry": "US"
}
},
"offers": {
"@type": "Offer",
"availability": "https://schema.org/InStock",
"priceCurrency": "USD",
"seller": {
"@type": "Organization",
"name": "KNUTH Ceramics"
}
},
"breadcrumb": {
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": `${SITE_URL}/` },
{ "@type": "ListItem", "position": 2, "name": "Collections", "item": `${SITE_URL}/collections` },
{ "@type": "ListItem", "position": 3, "name": product.title, "item": `${SITE_URL}/collections/${product.slug}` }
]
}
};
return (
<div className="bg-white dark:bg-stone-950 min-h-screen pt-32 pb-24">
<SEO
title={`${product.title} — Handmade Ceramic | KNUTH Ceramics`}
description={`${product.description} Handcrafted in Corpus Christi, TX. $${product.price} — free shipping on orders over $150.`}
canonical={`${SITE_URL}/collections/${product.slug}`}
ogImage={`${SITE_URL}${product.image}`}
ogType="product"
schema={productSchema}
/>
<div className="max-w-[1920px] mx-auto px-6 md:px-12">
{/* Breadcrumb */}
<div className="mb-12 text-sm uppercase tracking-widest text-stone-500">
@@ -91,6 +140,7 @@ const ProductDetail: React.FC = () => {
</ul>
</motion.div>
{/*
<motion.button
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
@@ -101,6 +151,7 @@ const ProductDetail: React.FC = () => {
>
Add to Cart
</motion.button>
*/}
<div className="mt-12 pt-12 border-t border-stone-200 dark:border-stone-800 text-sm text-stone-500 font-light space-y-2">
<p>Free shipping on orders over $150</p>

328
Pottery-website/pages/Returns.tsx
View File

@@ -1,164 +1,164 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
const Returns: React.FC = () => {
const returnSteps = [
{
step: "01",
title: "Contact Us",
description: "Email support@knuthceramics.com within 14 days of delivery with your order number and photos of the item and packaging."
},
{
step: "02",
title: "Receive Instructions",
description: "Our team will review your request and provide detailed return instructions and a return authorization if approved."
},
{
step: "03",
title: "Ship Back",
description: "Carefully package the item with at least 1\" of padding around each piece. Use insured shipping and retain your tracking number."
},
{
step: "04",
title: "Get Refund",
description: "Once we receive and inspect the returned item, we'll process your exchange or refund within 5–7 business days."
}
];
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"
>
Customer Care
</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"
>
Returns &<br />Exchanges
</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 understand that buying handmade ceramics is different than buying mass-produced goods. Because each piece is made just for you, returns are limited. Please review our policy carefully.
</motion.p>
</div>
{/* Policy Details */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-24">
<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.5, duration: 0.6 }}
className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">Eligibility</h3>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
We only accept returns for items that are <strong>defective, damaged, or incorrect</strong>. If your item arrived damaged, see the Damaged Items section below. For a refund or exchange, contact us within 14 days of delivery.
</p>
</motion.div>
<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.6, duration: 0.6 }}
className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">Condition</h3>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
Returned items must be <strong>unused and in their original packaging</strong> (minus the damage, if any). We reserve the right to refuse returns for pieces showing signs of use or abuse.
</p>
</motion.div>
<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.7, duration: 0.6 }}
className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">Return Shipping</h3>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
The customer is responsible for return shipping costs, <strong>except in the case of our error or damage</strong>. We strongly recommend insured shipping and adequate packaging.
</p>
</motion.div>
<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.8, duration: 0.6 }}
className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">Exchanges & Refunds</h3>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
Once we receive and inspect the returned item, we will process an exchange or refund promptly. Refunds are issued to the original payment method. Please allow 5–7 business days for the credit to appear.
</p>
</motion.div>
</div>
{/* Return Process */}
<div className="mb-24">
<h2 className="font-display text-4xl md:text-5xl mb-12 text-text-main dark:text-white">
Return Process
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{returnSteps.map((item, index) => (
<motion.div
key={item.step}
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.9 + index * 0.1, duration: 0.6 }}
className="relative"
>
<div className="absolute top-0 left-0 font-display text-6xl text-stone-200 dark:text-stone-800 -z-10">
{item.step}
</div>
<div className="pt-16">
<h4 className="font-display text-xl mb-3 text-text-main dark:text-white">
{item.title}
</h4>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed text-sm">
{item.description}
</p>
</div>
</motion.div>
))}
</div>
</div>
{/* Damaged Items */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1.3, duration: 0.8 }}
className="p-8 md:p-12 bg-primary dark:bg-black text-white border border-stone-800"
>
<h3 className="font-display text-3xl mb-4">Damaged Items</h3>
<p className="font-body font-light text-stone-300 leading-relaxed max-w-3xl mb-6">
If your item arrived broken, please contact us immediately. Take a photo of the damage (and packaging, if possible), and email us within 7 days of receipt. All orders are fully insured during transit. We will cover shipping costs to replace or refund damaged goods.
</p>
<Link
to="/contact"
className="inline-block bg-white text-black px-8 py-3 text-xs font-bold uppercase tracking-widest hover:bg-stone-200 transition-colors"
>
Report Damage
</Link>
</motion.div>
</div>
</div>
);
};
export default Returns;
import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
const Returns: React.FC = () => {
const returnSteps = [
{
step: "01",
title: "Contact Us",
description: "Email support@knuthceramics.com within 14 days of delivery with your order number and photos of the item and packaging."
},
{
step: "02",
title: "Receive Instructions",
description: "Our team will review your request and provide detailed return instructions and a return authorization if approved."
},
{
step: "03",
title: "Ship Back",
description: "Carefully package the item with at least 1\" of padding around each piece. Use insured shipping and retain your tracking number."
},
{
step: "04",
title: "Get Refund",
description: "Once we receive and inspect the returned item, we'll process your exchange or refund within 5–7 business days."
}
];
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"
>
Customer Care
</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"
>
Returns &<br />Exchanges
</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 understand that buying handmade ceramics is different than buying mass-produced goods. Because each piece is made just for you, returns are limited. Please review our policy carefully.
</motion.p>
</div>
{/* Policy Details */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-24">
<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.5, duration: 0.6 }}
className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">Eligibility</h3>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
We only accept returns for items that are <strong>defective, damaged, or incorrect</strong>. If your item arrived damaged, see the Damaged Items section below. For a refund or exchange, contact us within 14 days of delivery.
</p>
</motion.div>
<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.6, duration: 0.6 }}
className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">Condition</h3>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
Returned items must be <strong>unused and in their original packaging</strong> (minus the damage, if any). We reserve the right to refuse returns for pieces showing signs of use or abuse.
</p>
</motion.div>
<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.7, duration: 0.6 }}
className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">Return Shipping</h3>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
The customer is responsible for return shipping costs, <strong>except in the case of our error or damage</strong>. We strongly recommend insured shipping and adequate packaging.
</p>
</motion.div>
<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.8, duration: 0.6 }}
className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">Exchanges & Refunds</h3>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
Once we receive and inspect the returned item, we will process an exchange or refund promptly. Refunds are issued to the original payment method. Please allow 5–7 business days for the credit to appear.
</p>
</motion.div>
</div>
{/* Return Process */}
<div className="mb-24">
<h2 className="font-display text-4xl md:text-5xl mb-12 text-text-main dark:text-white">
Return Process
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{returnSteps.map((item, index) => (
<motion.div
key={item.step}
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.9 + index * 0.1, duration: 0.6 }}
className="relative"
>
<div className="absolute top-0 left-0 font-display text-6xl text-stone-200 dark:text-stone-800 -z-10">
{item.step}
</div>
<div className="pt-16">
<h4 className="font-display text-xl mb-3 text-text-main dark:text-white">
{item.title}
</h4>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed text-sm">
{item.description}
</p>
</div>
</motion.div>
))}
</div>
</div>
{/* Damaged Items */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1.3, duration: 0.8 }}
className="p-8 md:p-12 bg-primary dark:bg-black text-white border border-stone-800"
>
<h3 className="font-display text-3xl mb-4">Damaged Items</h3>
<p className="font-body font-light text-stone-300 leading-relaxed max-w-3xl mb-6">
If your item arrived broken, please contact us immediately. Take a photo of the damage (and packaging, if possible), and email us within 7 days of receipt. All orders are fully insured during transit. We will cover shipping costs to replace or refund damaged goods.
</p>
<Link
to="/contact"
className="inline-block bg-white text-black px-8 py-3 text-xs font-bold uppercase tracking-widest hover:bg-stone-200 transition-colors"
>
Report Damage
</Link>
</motion.div>
</div>
</div>
);
};
export default Returns;

262
Pottery-website/pages/Shipping.tsx
View File

@@ -1,131 +1,131 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
const Shipping: React.FC = () => {
const shippingDetails = [
{
title: "Order Processing",
description: "Each item is handcrafted and inspected with care. Please allow up to 3 business days for us to prepare and pack your order.",
icon: "📦"
},
{
title: "Shipping Methods",
description: "We offer standard USPS shipping for most orders. For faster delivery, expedited shipping (such as USPS Priority or UPS) is available at checkout. Some oversized or multiple-item orders may ship via UPS Ground.",
icon: "🚚"
},
{
title: "Delivery Time",
description: "After processing, expect 3–5 business days transit time for standard domestic delivery. Expedited options can arrive in 1–2 days. Your order confirmation email will include a tracking number.",
icon: "⏱️"
},
{
title: "Free Shipping",
description: "We offer flat-rate shipping on orders under $75. Free standard shipping is available on all orders over $75. These promotions are subject to change, so check the cart for current offers.",
icon: "✨"
},
{
title: "Packaging",
description: "We reuse packing materials and eco-friendly fillers whenever possible to protect your ceramics and reduce waste. Every package is insured for its full value during transit.",
icon: "♻️"
},
{
title: "Shipping Restrictions",
description: "We do not ship to P.O. boxes. Unfortunately, we cannot ship internationally at this time (U.S. addresses only). If you need a rush order, please contact us – we'll do our best to accommodate.",
icon: "🇺🇸"
}
];
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"
>
Delivery Information
</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"
>
Shipping<br />Policy
</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"
>
KNUTH Ceramics proudly ships nationwide from our Texas studio. We strive to make delivery smooth and transparent for you.
</motion.p>
</div>
{/* Shipping Details Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-24">
{shippingDetails.map((detail, index) => (
<motion.div
key={detail.title}
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: index * 0.1, duration: 0.6 }}
className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800 hover:border-stone-400 dark:hover:border-stone-600 transition-colors"
>
<div className="text-4xl mb-6">{detail.icon}</div>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">
{detail.title}
</h3>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
{detail.description}
</p>
</motion.div>
))}
</div>
{/* Important Notice */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.8, duration: 0.8 }}
className="p-8 md:p-12 bg-amber-50 dark:bg-amber-900/10 border-l-4 border-amber-500"
>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">
Peak Season Notice
</h3>
<p className="font-body font-light text-stone-700 dark:text-stone-300 leading-relaxed">
Peak seasons and holidays may add 1–2 extra days to processing. We'll notify you of any anticipated delays. By having a clear, upfront shipping policy, we aim to boost your confidence and reduce checkout surprises.
</p>
</motion.div>
{/* CTA Section */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1, duration: 0.8 }}
className="mt-24 text-center"
>
<h2 className="font-display text-3xl md:text-4xl mb-6 text-text-main dark:text-white">
Questions about shipping?
</h2>
<p className="font-body font-light text-stone-500 mb-8 max-w-xl mx-auto">
Contact our team for specific shipping inquiries or rush orders.
</p>
<Link
to="/contact"
className="inline-block 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"
>
Get in Touch
</Link>
</motion.div>
</div>
</div>
);
};
export default Shipping;
import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
const Shipping: React.FC = () => {
const shippingDetails = [
{
title: "Order Processing",
description: "Each item is handcrafted and inspected with care. Please allow up to 3 business days for us to prepare and pack your order.",
icon: "📦"
},
{
title: "Shipping Methods",
description: "We offer standard USPS shipping for most orders. For faster delivery, expedited shipping (such as USPS Priority or UPS) is available at checkout. Some oversized or multiple-item orders may ship via UPS Ground.",
icon: "🚚"
},
{
title: "Delivery Time",
description: "After processing, expect 3–5 business days transit time for standard domestic delivery. Expedited options can arrive in 1–2 days. Your order confirmation email will include a tracking number.",
icon: "⏱️"
},
{
title: "Free Shipping",
description: "We offer flat-rate shipping on orders under $75. Free standard shipping is available on all orders over $75. These promotions are subject to change, so check the cart for current offers.",
icon: "✨"
},
{
title: "Packaging",
description: "We reuse packing materials and eco-friendly fillers whenever possible to protect your ceramics and reduce waste. Every package is insured for its full value during transit.",
icon: "♻️"
},
{
title: "Shipping Restrictions",
description: "We do not ship to P.O. boxes. Unfortunately, we cannot ship internationally at this time (U.S. addresses only). If you need a rush order, please contact us – we'll do our best to accommodate.",
icon: "🇺🇸"
}
];
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"
>
Delivery Information
</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"
>
Shipping<br />Policy
</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"
>
KNUTH Ceramics proudly ships nationwide from our Texas studio. We strive to make delivery smooth and transparent for you.
</motion.p>
</div>
{/* Shipping Details Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-24">
{shippingDetails.map((detail, index) => (
<motion.div
key={detail.title}
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: index * 0.1, duration: 0.6 }}
className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800 hover:border-stone-400 dark:hover:border-stone-600 transition-colors"
>
<div className="text-4xl mb-6">{detail.icon}</div>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">
{detail.title}
</h3>
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
{detail.description}
</p>
</motion.div>
))}
</div>
{/* Important Notice */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.8, duration: 0.8 }}
className="p-8 md:p-12 bg-amber-50 dark:bg-amber-900/10 border-l-4 border-amber-500"
>
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">
Peak Season Notice
</h3>
<p className="font-body font-light text-stone-700 dark:text-stone-300 leading-relaxed">
Peak seasons and holidays may add 1–2 extra days to processing. We'll notify you of any anticipated delays. By having a clear, upfront shipping policy, we aim to boost your confidence and reduce checkout surprises.
</p>
</motion.div>
{/* CTA Section */}
<motion.div
initial={{ y: 30, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1, duration: 0.8 }}
className="mt-24 text-center"
>
<h2 className="font-display text-3xl md:text-4xl mb-6 text-text-main dark:text-white">
Questions about shipping?
</h2>
<p className="font-body font-light text-stone-500 mb-8 max-w-xl mx-auto">
Contact our team for specific shipping inquiries or rush orders.
</p>
<Link
to="/contact"
className="inline-block 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"
>
Get in Touch
</Link>
</motion.div>
</div>
</div>
);
};
export default Shipping;