107 lines
5.9 KiB
TypeScript
107 lines
5.9 KiB
TypeScript
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;
|