Final
This commit is contained in:
48
Pottery-website/.gitignore
vendored
48
Pottery-website/.gitignore
vendored
@@ -1,24 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
@@ -1,66 +1,68 @@
|
||||
import React, { Suspense, lazy } from 'react';
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import Header from './components/Header';
|
||||
import Footer from './components/Footer';
|
||||
import Cart from './components/Cart';
|
||||
import ScrollToTop from './components/ScrollToTop';
|
||||
import RouteTransition from './components/RouteTransition';
|
||||
import { StoreProvider } from './src/context/StoreContext';
|
||||
|
||||
// Lazy load pages for better performance
|
||||
const Home = lazy(() => import('./pages/Home'));
|
||||
const Collections = lazy(() => import('./pages/Collections'));
|
||||
const Atelier = lazy(() => import('./pages/Atelier'));
|
||||
const Editorial = lazy(() => import('./pages/Editorial'));
|
||||
const ProductPhotography = lazy(() => import('./pages/Journal/ProductPhotography'));
|
||||
const PackagingGuide = lazy(() => import('./pages/Journal/PackagingGuide'));
|
||||
const MotivationInClay = lazy(() => import('./pages/Journal/MotivationInClay'));
|
||||
const ProductDetail = lazy(() => import('./pages/ProductDetail'));
|
||||
const ArticleDetail = lazy(() => import('./pages/ArticleDetail'));
|
||||
const Checkout = lazy(() => import('./pages/Checkout'));
|
||||
const MockPayment = lazy(() => import('./pages/MockPayment'));
|
||||
const Success = lazy(() => import('./pages/Success'));
|
||||
const Admin = lazy(() => import('./pages/Admin'));
|
||||
const FAQ = lazy(() => import('./pages/FAQ'));
|
||||
const Shipping = lazy(() => import('./pages/Shipping'));
|
||||
const Returns = lazy(() => import('./pages/Returns'));
|
||||
const Contact = lazy(() => import('./pages/Contact'));
|
||||
const Privacy = lazy(() => import('./pages/Privacy'));
|
||||
const Cookies = lazy(() => import('./pages/Cookies'));
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<StoreProvider>
|
||||
<ScrollToTop />
|
||||
<Header />
|
||||
<Cart />
|
||||
<RouteTransition>
|
||||
<Suspense fallback={null}>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/collections" element={<Collections />} />
|
||||
import React, { Suspense, lazy } from 'react';
|
||||
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import Header from './components/Header';
|
||||
import Footer from './components/Footer';
|
||||
import Cart from './components/Cart';
|
||||
import ScrollToTop from './components/ScrollToTop';
|
||||
import RouteTransition from './components/RouteTransition';
|
||||
import { StoreProvider } from './src/context/StoreContext';
|
||||
|
||||
// Lazy load pages for better performance
|
||||
const Home = lazy(() => import('./pages/Home'));
|
||||
const Collections = lazy(() => import('./pages/Collections'));
|
||||
const Atelier = lazy(() => import('./pages/Atelier'));
|
||||
const Editorial = lazy(() => import('./pages/Editorial'));
|
||||
const ProductPhotography = lazy(() => import('./pages/Journal/ProductPhotography'));
|
||||
const PackagingGuide = lazy(() => import('./pages/Journal/PackagingGuide'));
|
||||
const MotivationInClay = lazy(() => import('./pages/Journal/MotivationInClay'));
|
||||
const ProductDetail = lazy(() => import('./pages/ProductDetail'));
|
||||
const ArticleDetail = lazy(() => import('./pages/ArticleDetail'));
|
||||
const Checkout = lazy(() => import('./pages/Checkout'));
|
||||
const MockPayment = lazy(() => import('./pages/MockPayment'));
|
||||
const Success = lazy(() => import('./pages/Success'));
|
||||
const FAQ = lazy(() => import('./pages/FAQ'));
|
||||
const Shipping = lazy(() => import('./pages/Shipping'));
|
||||
const Returns = lazy(() => import('./pages/Returns'));
|
||||
const Contact = lazy(() => import('./pages/Contact'));
|
||||
const Privacy = lazy(() => import('./pages/Privacy'));
|
||||
const Cookies = lazy(() => import('./pages/Cookies'));
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<StoreProvider>
|
||||
<ScrollToTop />
|
||||
<Header />
|
||||
<Cart />
|
||||
<RouteTransition>
|
||||
<Suspense fallback={null}>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/collections" element={<Collections />} />
|
||||
<Route path="/collections/:slug" element={<ProductDetail />} />
|
||||
<Route path="/atelier" element={<Atelier />} />
|
||||
<Route path="/editorial" element={<Editorial />} />
|
||||
<Route path="/editorial/product-photography-for-small-businesses" element={<ProductPhotography />} />
|
||||
<Route path="/editorial/how-to-care-for-handmade-ceramics" element={<PackagingGuide />} />
|
||||
<Route path="/editorial/finding-motivation-in-clay" element={<MotivationInClay />} />
|
||||
<Route path="/editorial/:slug" element={<ArticleDetail />} />
|
||||
<Route path="/checkout" element={<Checkout />} />
|
||||
<Route path="/mock-payment" element={<MockPayment />} />
|
||||
<Route path="/success" element={<Success />} />
|
||||
<Route path="/admin" element={<Admin />} />
|
||||
<Route path="/faq" element={<FAQ />} />
|
||||
<Route path="/shipping" element={<Shipping />} />
|
||||
<Route path="/returns" element={<Returns />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
<Route path="/privacy" element={<Privacy />} />
|
||||
<Route path="/cookies" element={<Cookies />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
</RouteTransition>
|
||||
<Footer />
|
||||
</StoreProvider>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
<Route path="/checkout" element={<Checkout />} />
|
||||
<Route path="/mock-payment" element={<MockPayment />} />
|
||||
<Route path="/success" element={<Success />} />
|
||||
<Route path="/admin" element={<Navigate to="/" replace />} />
|
||||
<Route path="/faq" element={<FAQ />} />
|
||||
<Route path="/shipping" element={<Shipping />} />
|
||||
<Route path="/returns" element={<Returns />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
<Route path="/privacy" element={<Privacy />} />
|
||||
<Route path="/cookies" element={<Cookies />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
</RouteTransition>
|
||||
<Footer />
|
||||
</StoreProvider>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -1,118 +1,118 @@
|
||||
# KNUTH Ceramics — Handmade Pottery Atelier
|
||||
|
||||
Welcome to the official repository for **KNUTH Ceramics**, a premium handmade pottery e-commerce platform and editorial site. This project features a React-based frontend, a Node.js/Express backend, and a PostgreSQL database for full content and order management.
|
||||
|
||||
---
|
||||
|
||||
## 🏛️ Project Architecture
|
||||
|
||||
The application is split into two main parts:
|
||||
- **Frontend**: Built with React, Vite, Framer Motion (animations), and Vanilla CSS.
|
||||
- **Backend**: Node.js/Express server providing a RESTful API for products, articles, and orders.
|
||||
- **Database**: PostgreSQL with custom schema and migration scripts.
|
||||
|
||||
---
|
||||
|
||||
## ⚡ Main Features
|
||||
|
||||
- **🛒 Shopping Experience**: Persistent shopping bag (localStorage), quantity management, and a dedicated checkout flow.
|
||||
- **💳 Mock Payment Integration**: A simulated payment system that validates the checkout process and records orders without requiring live Stripe keys.
|
||||
- **📰 Editorial Section**: A "Journal" with rich storytelling, featuring articles with dynamic sections and featured post placement.
|
||||
- **🛠️ Admin Dashboard**: A secure management interface to:
|
||||
- Create, update, and delete products (images, prices, descriptions).
|
||||
- Manage articles (rich content editor, featuring toggle).
|
||||
- **Fulfill Orders**: View customer details and update shipping status (Pending → Shipped → Delivered).
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Getting Started
|
||||
|
||||
### Prerequisites
|
||||
- **Node.js** (v18+ recommended)
|
||||
- **PostgreSQL** instance (Local or Remote)
|
||||
- **npm** or **yarn**
|
||||
|
||||
### 1. Database Setup
|
||||
1. Create a new PostgreSQL database (e.g., `pottery_db`).
|
||||
2. Navigate to the `server` directory:
|
||||
```bash
|
||||
cd server
|
||||
```
|
||||
3. Initialize the schema:
|
||||
```bash
|
||||
# Option A: Run scripts manually using schema.sql
|
||||
# Option B: Run the setup script (requires DB credentials in .env)
|
||||
node db_setup.js
|
||||
```
|
||||
4. Run migrations for the latest features (like the `orders` table):
|
||||
```bash
|
||||
node migrate.js
|
||||
```
|
||||
|
||||
### 2. Backend Configuration
|
||||
1. In the `server` directory, create a `.env` file based on the following template:
|
||||
```env
|
||||
PORT=5000
|
||||
DB_USER=your_username
|
||||
DB_HOST=localhost
|
||||
DB_NAME=pottery_db
|
||||
DB_PASSWORD=your_password
|
||||
DB_PORT=5432
|
||||
```
|
||||
2. Install dependencies:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
3. Start the server:
|
||||
```bash
|
||||
# Development (with nodemon)
|
||||
npm run dev
|
||||
|
||||
# Production
|
||||
npm start
|
||||
```
|
||||
|
||||
### 3. Frontend Configuration
|
||||
1. Return to the project root:
|
||||
```bash
|
||||
cd ..
|
||||
```
|
||||
2. Install dependencies:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
3. Start the development server:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
4. Open your browser at `http://localhost:5173`.
|
||||
|
||||
---
|
||||
|
||||
## 🛡️ Admin Dashboard Usage
|
||||
|
||||
Access the dashboard by navigating to `/admin`.
|
||||
- **Products**: Manage your shop inventory.
|
||||
- **Editorial**: Write and manage blog posts.
|
||||
- **Orders**: Monitor incoming sales. Use the "Visibility" icon to view customer shipment details and update their fulfillment status.
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Important Considerations
|
||||
|
||||
- **Storage Limits**: The shopping cart uses `localStorage`. To avoid the `QuotaExceededError`, only item IDs and quantities are stored. The application automatically hydrates this data from the backend.
|
||||
- **Large Images**: When uploading high-resolution images via the Admin UI, ensure they are optimized. The system supports Base64 encoding for simplicity, but large files may impact performance.
|
||||
- **Mock Checkout**: The "Mock Payment" page is designed for testing. In a production environment, this should be replaced with a live Stripe `CheckoutSession` or equivalent provider.
|
||||
|
||||
---
|
||||
|
||||
## 📦 Directory Structure
|
||||
|
||||
- `/components`: Reusable UI elements (Cart, Header, Footer, etc.).
|
||||
- `/pages`: Main view routes (Home, Collections, Admin, Checkout).
|
||||
- `/server`: Node Express backend and database logic.
|
||||
- `/src/context`: Global state management via `StoreContext`.
|
||||
|
||||
---
|
||||
|
||||
**Crafted with care by Antigravity.**
|
||||
# KNUTH Ceramics — Handmade Pottery Atelier
|
||||
|
||||
Welcome to the official repository for **KNUTH Ceramics**, a premium handmade pottery e-commerce platform and editorial site. This project features a React-based frontend, a Node.js/Express backend, and a PostgreSQL database for full content and order management.
|
||||
|
||||
---
|
||||
|
||||
## 🏛️ Project Architecture
|
||||
|
||||
The application is split into two main parts:
|
||||
- **Frontend**: Built with React, Vite, Framer Motion (animations), and Vanilla CSS.
|
||||
- **Backend**: Node.js/Express server providing a RESTful API for products, articles, and orders.
|
||||
- **Database**: PostgreSQL with custom schema and migration scripts.
|
||||
|
||||
---
|
||||
|
||||
## ⚡ Main Features
|
||||
|
||||
- **🛒 Shopping Experience**: Persistent shopping bag (localStorage), quantity management, and a dedicated checkout flow.
|
||||
- **💳 Mock Payment Integration**: A simulated payment system that validates the checkout process and records orders without requiring live Stripe keys.
|
||||
- **📰 Editorial Section**: A "Journal" with rich storytelling, featuring articles with dynamic sections and featured post placement.
|
||||
- **🛠️ Admin Dashboard**: A secure management interface to:
|
||||
- Create, update, and delete products (images, prices, descriptions).
|
||||
- Manage articles (rich content editor, featuring toggle).
|
||||
- **Fulfill Orders**: View customer details and update shipping status (Pending → Shipped → Delivered).
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Getting Started
|
||||
|
||||
### Prerequisites
|
||||
- **Node.js** (v18+ recommended)
|
||||
- **PostgreSQL** instance (Local or Remote)
|
||||
- **npm** or **yarn**
|
||||
|
||||
### 1. Database Setup
|
||||
1. Create a new PostgreSQL database (e.g., `pottery_db`).
|
||||
2. Navigate to the `server` directory:
|
||||
```bash
|
||||
cd server
|
||||
```
|
||||
3. Initialize the schema:
|
||||
```bash
|
||||
# Option A: Run scripts manually using schema.sql
|
||||
# Option B: Run the setup script (requires DB credentials in .env)
|
||||
node db_setup.js
|
||||
```
|
||||
4. Run migrations for the latest features (like the `orders` table):
|
||||
```bash
|
||||
node migrate.js
|
||||
```
|
||||
|
||||
### 2. Backend Configuration
|
||||
1. In the `server` directory, create a `.env` file based on the following template:
|
||||
```env
|
||||
PORT=5000
|
||||
DB_USER=your_username
|
||||
DB_HOST=localhost
|
||||
DB_NAME=pottery_db
|
||||
DB_PASSWORD=your_password
|
||||
DB_PORT=5432
|
||||
```
|
||||
2. Install dependencies:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
3. Start the server:
|
||||
```bash
|
||||
# Development (with nodemon)
|
||||
npm run dev
|
||||
|
||||
# Production
|
||||
npm start
|
||||
```
|
||||
|
||||
### 3. Frontend Configuration
|
||||
1. Return to the project root:
|
||||
```bash
|
||||
cd ..
|
||||
```
|
||||
2. Install dependencies:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
3. Start the development server:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
4. Open your browser at `http://localhost:5173`.
|
||||
|
||||
---
|
||||
|
||||
## 🛡️ Admin Dashboard Usage
|
||||
|
||||
Access the dashboard by navigating to `/admin`.
|
||||
- **Products**: Manage your shop inventory.
|
||||
- **Editorial**: Write and manage blog posts.
|
||||
- **Orders**: Monitor incoming sales. Use the "Visibility" icon to view customer shipment details and update their fulfillment status.
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Important Considerations
|
||||
|
||||
- **Storage Limits**: The shopping cart uses `localStorage`. To avoid the `QuotaExceededError`, only item IDs and quantities are stored. The application automatically hydrates this data from the backend.
|
||||
- **Large Images**: When uploading high-resolution images via the Admin UI, ensure they are optimized. The system supports Base64 encoding for simplicity, but large files may impact performance.
|
||||
- **Mock Checkout**: The "Mock Payment" page is designed for testing. In a production environment, this should be replaced with a live Stripe `CheckoutSession` or equivalent provider.
|
||||
|
||||
---
|
||||
|
||||
## 📦 Directory Structure
|
||||
|
||||
- `/components`: Reusable UI elements (Cart, Header, Footer, etc.).
|
||||
- `/pages`: Main view routes (Home, Collections, Admin, Checkout).
|
||||
- `/server`: Node Express backend and database logic.
|
||||
- `/src/context`: Global state management via `StoreContext`.
|
||||
|
||||
---
|
||||
|
||||
**Crafted with care by Antigravity.**
|
||||
|
||||
@@ -1,112 +1,110 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useStore } from '../src/context/StoreContext';
|
||||
|
||||
interface BlogPostLayoutProps {
|
||||
title: string;
|
||||
category: string;
|
||||
date: string;
|
||||
image: string;
|
||||
imageAlt: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const BlogPostLayout: React.FC<BlogPostLayoutProps> = ({
|
||||
title,
|
||||
category,
|
||||
date,
|
||||
image,
|
||||
imageAlt,
|
||||
children,
|
||||
}) => {
|
||||
const { articles } = useStore();
|
||||
// Scroll to top on mount
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
const nextArticles = articles.filter(post => post.title !== title).slice(0, 2);
|
||||
|
||||
return (
|
||||
<div className="bg-stone-50 dark:bg-black min-h-screen font-body transition-colors duration-500">
|
||||
|
||||
<main className="pt-32 pb-24">
|
||||
{/* Article Header */}
|
||||
<article className="max-w-4xl mx-auto px-6 md:px-12">
|
||||
<div className="flex items-center space-x-4 mb-8 justify-center">
|
||||
<span className="text-xs uppercase tracking-[0.2em] text-text-muted border border-text-muted/30 px-3 py-1 rounded-full">{category}</span>
|
||||
<span className="text-xs uppercase tracking-[0.2em] text-text-muted">{date}</span>
|
||||
</div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="font-display text-5xl md:text-6xl lg:text-7xl text-center text-text-main dark:text-white mb-16 leading-tight"
|
||||
>
|
||||
{title}
|
||||
</motion.h1>
|
||||
|
||||
{/* Hero Image */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="w-full h-[40vh] md:h-[50vh] relative mb-16 overflow-hidden shadow-xl rounded-sm"
|
||||
>
|
||||
<img
|
||||
src={image}
|
||||
alt={imageAlt}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Content Container */}
|
||||
<div className="prose prose-stone dark:prose-invert max-w-none mx-auto prose-headings:font-display prose-headings:font-light prose-p:font-light prose-p:leading-loose prose-a:text-terracotta hover:prose-a:text-terracotta-dark prose-img:rounded-sm">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{/* Read Next Section */}
|
||||
{nextArticles.length > 0 && (
|
||||
<div className="mt-24 pt-16 border-t border-stone-200 dark:border-stone-800">
|
||||
<h3 className="font-display text-3xl text-center mb-12 text-text-main dark:text-white">Read Next</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{nextArticles.map((post) => (
|
||||
<Link key={post.id} to={`/editorial/${post.slug}`} className="group block">
|
||||
<div className="aspect-[3/2] overflow-hidden bg-stone-100 mb-4">
|
||||
<img
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
<h4 className="font-display text-2xl text-text-main dark:text-white group-hover:underline decoration-1 underline-offset-4 mb-2">
|
||||
{post.title}
|
||||
</h4>
|
||||
<div className="flex items-center space-x-2 text-sm text-stone-500 uppercase tracking-widest">
|
||||
<span>{post.category}</span>
|
||||
<span>—</span>
|
||||
<span>{post.date}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Back Link */}
|
||||
<div className="mt-20 text-center">
|
||||
<Link to="/editorial" className="inline-block border-b border-black dark:border-white pb-1 text-sm uppercase tracking-widest hover:text-stone-500 transition-colors">
|
||||
Back to Editorial
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogPostLayout;
|
||||
import React, { useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useStore } from '../src/context/StoreContext';
|
||||
|
||||
interface BlogPostLayoutProps {
|
||||
title: string;
|
||||
category: string;
|
||||
date: string;
|
||||
image: string;
|
||||
imageAlt: string;
|
||||
children: React.ReactNode;
|
||||
author?: string;
|
||||
}
|
||||
|
||||
const BlogPostLayout: React.FC<BlogPostLayoutProps> = ({
|
||||
title,
|
||||
category,
|
||||
date,
|
||||
image,
|
||||
imageAlt,
|
||||
children,
|
||||
author = 'Claudia Knuth',
|
||||
}) => {
|
||||
const { articles } = useStore();
|
||||
const getArticleHref = (slug: string) => (
|
||||
slug.startsWith('/editorial/') ? slug : `/editorial/${slug}`
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
const nextArticles = articles.filter(post => post.title !== title).slice(0, 2);
|
||||
|
||||
return (
|
||||
<div className="bg-stone-50 dark:bg-black min-h-screen font-body transition-colors duration-500">
|
||||
<main className="pt-32 pb-24">
|
||||
<article className="max-w-4xl mx-auto px-6 md:px-12">
|
||||
<div className="flex items-center space-x-4 mb-8 justify-center flex-wrap gap-y-2">
|
||||
<span className="text-xs uppercase tracking-[0.2em] text-text-muted border border-text-muted/30 px-3 py-1 rounded-full">{category}</span>
|
||||
<span className="text-xs uppercase tracking-[0.2em] text-text-muted">{date}</span>
|
||||
<span className="text-xs text-text-muted">by <span className="font-medium" itemProp="author">{author}</span></span>
|
||||
</div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="font-display text-5xl md:text-6xl lg:text-7xl text-center text-text-main dark:text-white mb-16 leading-tight"
|
||||
>
|
||||
{title}
|
||||
</motion.h1>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="w-full h-[40vh] md:h-[50vh] relative mb-16 overflow-hidden shadow-xl rounded-sm"
|
||||
>
|
||||
<img
|
||||
src={image}
|
||||
alt={imageAlt}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<div className="prose prose-stone dark:prose-invert max-w-none mx-auto prose-headings:font-display prose-headings:font-light prose-p:font-light prose-p:leading-loose prose-a:text-terracotta hover:prose-a:text-terracotta-dark prose-img:rounded-sm">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{nextArticles.length > 0 && (
|
||||
<div className="mt-24 pt-16 border-t border-stone-200 dark:border-stone-800">
|
||||
<h3 className="font-display text-3xl text-center mb-12 text-text-main dark:text-white">Read Next</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{nextArticles.map((post) => (
|
||||
<Link key={post.id} to={getArticleHref(post.slug)} className="group block">
|
||||
<div className="aspect-[3/2] overflow-hidden bg-stone-100 mb-4">
|
||||
<img
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
<h4 className="font-display text-2xl text-text-main dark:text-white group-hover:underline decoration-1 underline-offset-4 mb-2">
|
||||
{post.title}
|
||||
</h4>
|
||||
<div className="flex items-center space-x-2 text-sm text-stone-500 uppercase tracking-widest">
|
||||
<span>{post.category}</span>
|
||||
<span>-</span>
|
||||
<span>{post.date}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-20 text-center">
|
||||
<Link to="/editorial" className="inline-block border-b border-black dark:border-white pb-1 text-sm uppercase tracking-widest hover:text-stone-500 transition-colors">
|
||||
Back to Editorial
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogPostLayout;
|
||||
|
||||
@@ -1,118 +1,106 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { COLLECTIONS } from '../constants';
|
||||
import { CollectionItem } from '../types';
|
||||
|
||||
const cardVariants = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
y: 80,
|
||||
rotateX: 15,
|
||||
},
|
||||
visible: (index: number) => ({
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
rotateX: 0,
|
||||
transition: {
|
||||
delay: index * 0.15,
|
||||
duration: 0.8,
|
||||
ease: [0.25, 0.46, 0.45, 0.94],
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
const Collections: React.FC = () => {
|
||||
const col1 = [COLLECTIONS[0], COLLECTIONS[1]];
|
||||
const col2 = [COLLECTIONS[2], COLLECTIONS[3]];
|
||||
const col3 = [COLLECTIONS[4], COLLECTIONS[5]];
|
||||
|
||||
const renderCard = (item: CollectionItem, index: number) => (
|
||||
<motion.a
|
||||
key={item.id}
|
||||
className="group block cursor-pointer"
|
||||
href="#"
|
||||
variants={cardVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
custom={index}
|
||||
>
|
||||
<div className={`relative overflow-hidden ${item.aspectRatio} mb-6`}>
|
||||
{/* Image with clean hover effect */}
|
||||
<motion.img
|
||||
alt={`${item.title} collection`}
|
||||
className="w-full h-full object-cover"
|
||||
src={item.image}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
transition={{ duration: 0.6, ease: [0.25, 0.46, 0.45, 0.94] }}
|
||||
/>
|
||||
{/* Subtle overlay that fades out on hover */}
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-black/5"
|
||||
initial={{ opacity: 1 }}
|
||||
whileHover={{ opacity: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
/>
|
||||
{/* Clean reveal line effect on hover */}
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-0 right-0 h-1 bg-white/80"
|
||||
initial={{ scaleX: 0 }}
|
||||
whileHover={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.5, ease: "easeOut" }}
|
||||
style={{ transformOrigin: "left" }}
|
||||
/>
|
||||
</div>
|
||||
<motion.div
|
||||
className="flex justify-between items-center border-t border-gray-400/50 dark:border-gray-800 pt-4"
|
||||
initial={{ opacity: 0.8 }}
|
||||
whileHover={{ opacity: 1 }}
|
||||
>
|
||||
<h3 className="font-display text-3xl font-light text-text-main dark:text-white group-hover:italic transition-all duration-300">
|
||||
{item.title}
|
||||
</h3>
|
||||
<motion.span
|
||||
className="text-xs uppercase tracking-widest text-text-muted"
|
||||
whileHover={{ x: 5 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{item.number}
|
||||
</motion.span>
|
||||
</motion.div>
|
||||
</motion.a>
|
||||
);
|
||||
|
||||
return (
|
||||
<section className="py-32 bg-warm-grey dark:bg-[#141210] transition-colors duration-500">
|
||||
<div className="max-w-[1920px] mx-auto px-6 md:px-12">
|
||||
<motion.div
|
||||
className="flex flex-col md:flex-row justify-between items-end mb-20 md:mb-32 px-4"
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
>
|
||||
<h2 className="font-display text-5xl md:text-7xl font-thin text-text-main dark:text-white">
|
||||
Curated <span className="italic text-text-muted">Editions</span>
|
||||
</h2>
|
||||
<p className="hidden md:block font-body text-sm text-text-muted max-w-xs leading-relaxed text-right">
|
||||
Explore our seasonal collections, fired in small batches.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-16">
|
||||
<div className="flex flex-col space-y-16 md:space-y-32">
|
||||
{col1.map((item, idx) => renderCard(item, idx))}
|
||||
</div>
|
||||
<div className="flex flex-col space-y-16 md:space-y-32 md:pt-32">
|
||||
{col2.map((item, idx) => renderCard(item, idx + 2))}
|
||||
</div>
|
||||
<div className="flex flex-col space-y-16 md:space-y-32 md:pt-16 lg:pt-0">
|
||||
{col3.map((item, idx) => renderCard(item, idx + 4))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { COLLECTIONS } from '../constants';
|
||||
import { CollectionItem } from '../types';
|
||||
|
||||
const cardVariants = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
y: 80,
|
||||
rotateX: 15,
|
||||
},
|
||||
visible: (index: number) => ({
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
rotateX: 0,
|
||||
transition: {
|
||||
delay: index * 0.15,
|
||||
duration: 0.8,
|
||||
ease: [0.25, 0.46, 0.45, 0.94],
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
const Collections: React.FC = () => {
|
||||
const col1 = COLLECTIONS.filter((_, i) => i % 4 === 0);
|
||||
const col2 = COLLECTIONS.filter((_, i) => i % 4 === 1);
|
||||
const col3 = COLLECTIONS.filter((_, i) => i % 4 === 2);
|
||||
const col4 = COLLECTIONS.filter((_, i) => i % 4 === 3);
|
||||
|
||||
const renderCard = (item: CollectionItem, index: number) => (
|
||||
<motion.a
|
||||
key={item.id}
|
||||
className="group block cursor-pointer"
|
||||
href="#"
|
||||
variants={cardVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
custom={index}
|
||||
>
|
||||
<div className={`relative overflow-hidden ${item.aspectRatio} mb-6`}>
|
||||
{/* Image with clean hover effect */}
|
||||
<motion.img
|
||||
alt={`${item.title} collection`}
|
||||
className="w-full h-full object-cover"
|
||||
src={item.image}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
transition={{ duration: 0.6, ease: [0.25, 0.46, 0.45, 0.94] }}
|
||||
/>
|
||||
{/* Subtle overlay that fades out on hover */}
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-black/5"
|
||||
initial={{ opacity: 1 }}
|
||||
whileHover={{ opacity: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
/>
|
||||
{/* Clean reveal line effect on hover */}
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-0 right-0 h-1 bg-white/80"
|
||||
initial={{ scaleX: 0 }}
|
||||
whileHover={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.5, ease: "easeOut" }}
|
||||
style={{ transformOrigin: "left" }}
|
||||
/>
|
||||
</div>
|
||||
</motion.a>
|
||||
);
|
||||
|
||||
return (
|
||||
<section className="py-32 bg-warm-grey dark:bg-[#141210] transition-colors duration-500">
|
||||
<div className="max-w-[1920px] mx-auto px-6 md:px-12">
|
||||
<motion.div
|
||||
className="flex flex-col md:flex-row justify-between items-end mb-20 md:mb-32 px-4"
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
>
|
||||
<h2 className="font-display text-5xl md:text-7xl font-thin text-text-main dark:text-white">
|
||||
Curated <span className="italic text-text-muted">Editions</span>
|
||||
</h2>
|
||||
<p className="hidden md:block font-body text-sm text-text-muted max-w-xs leading-relaxed text-right">
|
||||
Explore our seasonal collections, fired in small batches.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-8 lg:gap-12">
|
||||
<div className="flex flex-col space-y-8 md:space-y-16">
|
||||
{col1.map((item, idx) => renderCard(item, idx))}
|
||||
</div>
|
||||
<div className="flex flex-col space-y-8 md:space-y-16 pt-16 md:pt-24">
|
||||
{col2.map((item, idx) => renderCard(item, idx + 2))}
|
||||
</div>
|
||||
<div className="flex flex-col space-y-8 md:space-y-16 pt-8 md:pt-12 lg:pt-0">
|
||||
{col3.map((item, idx) => renderCard(item, idx + 4))}
|
||||
</div>
|
||||
<div className="flex flex-col space-y-8 md:space-y-16 pt-24 md:pt-32 lg:pt-24">
|
||||
{col4.map((item, idx) => renderCard(item, idx + 6))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Collections;
|
||||
@@ -41,28 +41,24 @@ const FAQ: React.FC = () => {
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
question: "Do you ship your ceramics internationally?",
|
||||
answer: "Currently, we ship our handmade pottery mainly within Texas and the United States. We occasionally open international shipping spots for specific drops. Sign up for our newsletter to be notified."
|
||||
question: "Is the online shop currently open?",
|
||||
answer: "Our online shop is temporarily closed while we focus on new collections and studio work. Follow us on Instagram or sign up for our newsletter to be the first to know when it reopens. For commissions, reach out directly at knuth.claudia@gmail.com."
|
||||
},
|
||||
{
|
||||
question: "Are your pieces dishwasher and microwave safe?",
|
||||
answer: "Yes! Our functional stoneware, including mugs, plates, and bowls, is fired to cone 6 oxidation, making it durable for daily use. However, hand washing is always recommended to prolong the life of your unique handmade ceramics."
|
||||
answer: "Yes! Our functional stoneware, including mugs, plates, and bowls, is high-fire kiln fired, making it durable for daily use. However, hand washing is always recommended to prolong the life of your unique handmade ceramics."
|
||||
},
|
||||
{
|
||||
question: "Where is your studio located?",
|
||||
answer: "Our studio is based in the heart of Corpus Christi, Texas. We take inspiration from the Gulf Coast landscape. We offer local pickup for our Corpus Christi neighbors!"
|
||||
answer: "Our work is rooted in Corpus Christi, Texas, inspired by the colors and textures of the Gulf Coast."
|
||||
},
|
||||
{
|
||||
question: "Do you offer pottery classes in Corpus Christi?",
|
||||
answer: "We are working on bringing intimate wheel-throwing workshops to our Corpus Christi studio soon. Check our 'Atelier' page or follow us on Instagram for announcements."
|
||||
answer: "Pottery classes and wheel-throwing workshops are available through the Art Center of Corpus Christi. Visit the Art Center for current schedules and registration."
|
||||
},
|
||||
{
|
||||
question: "Do you take custom orders or commissions?",
|
||||
answer: "We accept a limited number of custom dinnerware commissions each year. If you are looking for a bespoke set for your home or restaurant, please contact us directly."
|
||||
},
|
||||
{
|
||||
question: "How often do you restock the shop?",
|
||||
answer: "We work in small batches and typically release a new 'Sandstone' or 'Seafoam' collection every 4-6 weeks. Join our email list to get early access to the next kiln opening."
|
||||
answer: "We accept a limited number of custom dinnerware commissions each year. If you are looking for a bespoke set for your home or restaurant, reach out directly at knuth.claudia@gmail.com."
|
||||
},
|
||||
{
|
||||
question: "What clay bodies and glazes do you use?",
|
||||
|
||||
@@ -1,89 +1,93 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { gsap } from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const FeatureSection: React.FC = () => {
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
const imageRef = useRef<HTMLDivElement>(null);
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const section = sectionRef.current;
|
||||
const image = imageRef.current;
|
||||
const content = contentRef.current;
|
||||
|
||||
if (!section || !image || !content) return;
|
||||
|
||||
// Image reveal animation
|
||||
gsap.fromTo(
|
||||
image,
|
||||
{ clipPath: 'inset(100% 0 0 0)', opacity: 0 },
|
||||
{
|
||||
clipPath: 'inset(0% 0 0 0)',
|
||||
opacity: 1,
|
||||
duration: 1.2,
|
||||
ease: 'power3.out',
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
start: 'top 60%',
|
||||
toggleActions: 'play none none reverse',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
// Content fade in animation
|
||||
gsap.fromTo(
|
||||
content,
|
||||
{ x: -60, opacity: 0 },
|
||||
{
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
duration: 1,
|
||||
ease: 'power3.out',
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
start: 'top 50%',
|
||||
toggleActions: 'play none none reverse',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
return () => {
|
||||
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section ref={sectionRef} className="py-32 md:py-48 bg-sage dark:bg-stone-900 overflow-hidden relative transition-colors duration-500">
|
||||
<div className="max-w-[1800px] mx-auto px-6">
|
||||
<div className="relative flex flex-col md:block">
|
||||
<div className="hidden md:block absolute -top-24 left-10 z-0 select-none opacity-[0.03] dark:opacity-[0.05] pointer-events-none">
|
||||
<span className="font-display text-[20rem] leading-none text-black dark:text-white">CRAFT</span>
|
||||
</div>
|
||||
<div
|
||||
ref={imageRef}
|
||||
className="w-full md:w-3/5 h-[600px] md:h-[800px] ml-auto relative z-10 shadow-2xl bg-center bg-cover bg-no-repeat"
|
||||
style={{ backgroundImage: "url('/ceramic-cups.png')" }}
|
||||
>
|
||||
</div>
|
||||
<div ref={contentRef} className="relative z-20 mt-[-100px] md:mt-0 md:absolute md:top-1/2 md:left-20 md:-translate-y-1/2 bg-white dark:bg-stone-900 p-12 md:p-20 shadow-xl max-w-xl mx-auto md:mx-0">
|
||||
<span className="block w-12 h-[1px] bg-text-main mb-8"></span>
|
||||
<h2 className="font-display text-4xl md:text-5xl font-light mb-8 text-text-main dark:text-white leading-tight">
|
||||
The Art of <br /><i className="font-thin">Slow Living</i>
|
||||
</h2>
|
||||
<p className="font-body font-light text-text-muted dark:text-gray-400 mb-10 leading-loose text-sm">
|
||||
We believe in the beauty of handmade objects. Our collection features a curated selection of ceramics designed to elevate the everyday. From sturdy mugs for your morning coffee to elegant vases that breathe life into a room, each piece is crafted with patience and intention.
|
||||
</p>
|
||||
<a className="group inline-flex items-center text-xs uppercase tracking-[0.2em] text-text-main dark:text-white font-medium" href="#">
|
||||
Read Our Story <span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { gsap } from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const FeatureSection: React.FC = () => {
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
const imageRef = useRef<HTMLDivElement>(null);
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const section = sectionRef.current;
|
||||
const image = imageRef.current;
|
||||
const content = contentRef.current;
|
||||
|
||||
if (!section || !image || !content) return;
|
||||
|
||||
// Image reveal animation
|
||||
gsap.fromTo(
|
||||
image,
|
||||
{ clipPath: 'inset(100% 0 0 0)', opacity: 0 },
|
||||
{
|
||||
clipPath: 'inset(0% 0 0 0)',
|
||||
opacity: 1,
|
||||
duration: 1.2,
|
||||
ease: 'power3.out',
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
start: 'top 60%',
|
||||
toggleActions: 'play none none reverse',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
// Content fade in animation
|
||||
gsap.fromTo(
|
||||
content,
|
||||
{ x: -60, opacity: 0 },
|
||||
{
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
duration: 1,
|
||||
ease: 'power3.out',
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
start: 'top 50%',
|
||||
toggleActions: 'play none none reverse',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
return () => {
|
||||
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section ref={sectionRef} className="py-32 md:py-48 bg-sage dark:bg-stone-900 overflow-hidden relative transition-colors duration-500">
|
||||
<div className="max-w-[1800px] mx-auto px-6">
|
||||
<div className="relative flex flex-col md:block">
|
||||
<div className="hidden md:block absolute -top-24 left-10 z-0 select-none opacity-10 dark:opacity-20 pointer-events-none">
|
||||
<span className="font-display text-[20rem] leading-none text-black dark:text-white">CRAFT</span>
|
||||
</div>
|
||||
<div
|
||||
ref={imageRef}
|
||||
className="w-full md:w-3/5 h-[400px] md:h-[600px] ml-auto relative z-10 shadow-2xl overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src="/landingpage/2.png"
|
||||
alt="Handcrafted stoneware ceramics by KNUTH Ceramics — slow-made pottery from Corpus Christi, Texas"
|
||||
className="w-full h-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<div ref={contentRef} className="relative z-20 mt-[-100px] md:mt-0 md:absolute md:top-1/2 md:left-20 md:-translate-y-1/2 bg-white dark:bg-stone-900 p-12 md:p-20 shadow-xl max-w-xl mx-auto md:mx-0">
|
||||
<span className="block w-12 h-[1px] bg-text-main mb-8"></span>
|
||||
<h2 className="font-display text-4xl md:text-5xl font-light mb-8 text-text-main dark:text-white leading-tight">
|
||||
The Art of <br /><i className="font-thin">Slow Living</i>
|
||||
</h2>
|
||||
<p className="font-body font-light text-text-muted dark:text-gray-400 mb-10 leading-loose text-sm">
|
||||
We believe in the beauty of handmade objects. Our collection features a curated selection of ceramics designed to elevate the everyday. From sturdy mugs for your morning coffee to elegant vases that breathe life into a room, each piece is crafted with patience and intention.
|
||||
</p>
|
||||
<a className="group inline-flex items-center text-xs uppercase tracking-[0.2em] text-text-main dark:text-white font-medium" href="#">
|
||||
Read Our Story <span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeatureSection;
|
||||
@@ -1,115 +1,125 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { FOOTER_LINKS } from '../constants';
|
||||
|
||||
const DISABLED_FOOTER_LINKS = new Set([
|
||||
'Best Sellers',
|
||||
'Gift Cards',
|
||||
'Sustainability',
|
||||
'Careers',
|
||||
'Press',
|
||||
]);
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
const renderFooterLink = (link: { label: string; href: string }) => {
|
||||
const baseClassName = 'text-lg font-light transition-all duration-300 block';
|
||||
|
||||
if (DISABLED_FOOTER_LINKS.has(link.label)) {
|
||||
return (
|
||||
<span className={`${baseClassName} text-stone-500 cursor-not-allowed`} aria-disabled="true">
|
||||
{link.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link className={`${baseClassName} hover:text-stone-400 hover:pl-2`} to={link.href}>
|
||||
{link.label}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="bg-primary dark:bg-black text-white pt-32 pb-12 px-6 md:px-12 border-t border-stone-800">
|
||||
<div className="max-w-[1920px] mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 mb-32">
|
||||
{/* Brand & Mission */}
|
||||
<div className="lg:col-span-5 flex flex-col justify-between h-full">
|
||||
<div>
|
||||
<h2 className="font-display text-6xl md:text-8xl leading-none tracking-tighter mb-8 bg-gradient-to-br from-white to-stone-400 bg-clip-text text-transparent">
|
||||
KNUTH Ceramics
|
||||
</h2>
|
||||
<p className="font-body text-lg font-light text-stone-400 leading-relaxed max-w-md">
|
||||
Handcrafted ceramics for the modern home. Created with intention, fired with patience, and delivered with care.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 lg:mt-0">
|
||||
<h4 className="text-sm font-bold uppercase tracking-widest mb-6">Join our newsletter</h4>
|
||||
<form className="flex flex-col sm:flex-row gap-4 max-w-md" onSubmit={(e) => e.preventDefault()}>
|
||||
<input
|
||||
className="bg-white/5 border border-white/10 text-white placeholder-stone-500 focus:outline-none focus:border-white/30 text-sm px-6 py-4 w-full transition-colors"
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
/>
|
||||
<button
|
||||
className="bg-white text-black px-8 py-4 text-xs font-bold uppercase tracking-widest hover:bg-stone-200 transition-colors"
|
||||
type="submit"
|
||||
>
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Links Columns */}
|
||||
<div className="lg:col-span-7 grid grid-cols-2 md:grid-cols-3 gap-12 pt-4">
|
||||
<div>
|
||||
<h4 className="text-xs font-bold uppercase tracking-widest mb-8 text-stone-500">{FOOTER_LINKS[0].title}</h4>
|
||||
<ul className="space-y-6">
|
||||
{FOOTER_LINKS[0].links.map((link) => (
|
||||
<li key={link.label}>
|
||||
{renderFooterLink(link)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xs font-bold uppercase tracking-widest mb-8 text-stone-500">{FOOTER_LINKS[1].title}</h4>
|
||||
<ul className="space-y-6">
|
||||
{FOOTER_LINKS[1].links.map((link) => (
|
||||
<li key={link.label}>
|
||||
{renderFooterLink(link)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xs font-bold uppercase tracking-widest mb-8 text-stone-500">{FOOTER_LINKS[2].title}</h4>
|
||||
<ul className="space-y-6">
|
||||
{FOOTER_LINKS[2].links.map((link) => (
|
||||
<li key={link.label}>
|
||||
{renderFooterLink(link)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-white/10 pt-12 flex flex-col md:flex-row justify-between items-center text-xs text-stone-500 tracking-widest uppercase font-light">
|
||||
<p>© 2025 KNUTH Ceramics. All rights reserved.</p>
|
||||
<div className="flex space-x-8 mt-6 md:mt-0">
|
||||
<Link className="hover:text-white transition-colors" to="/privacy">Privacy</Link>
|
||||
<Link className="hover:text-white transition-colors" to="/returns">Terms</Link>
|
||||
<Link className="hover:text-white transition-colors" to="/cookies">Cookies</Link>
|
||||
<Link className="hover:text-white transition-colors" to="/admin">Admin</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { FOOTER_LINKS } from '../constants';
|
||||
|
||||
const DISABLED_FOOTER_LINKS = new Set([
|
||||
'Best Sellers',
|
||||
'Gift Cards',
|
||||
'Sustainability',
|
||||
'Careers',
|
||||
'Press',
|
||||
'Shipping',
|
||||
'Returns',
|
||||
]);
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
const renderFooterLink = (link: { label: string; href: string }) => {
|
||||
const baseClassName = 'text-lg font-light transition-all duration-300 block';
|
||||
|
||||
if (DISABLED_FOOTER_LINKS.has(link.label)) {
|
||||
return (
|
||||
<span className={`${baseClassName} text-stone-500 cursor-not-allowed`} aria-disabled="true">
|
||||
{link.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link className={`${baseClassName} hover:text-stone-400 hover:pl-2`} to={link.href}>
|
||||
{link.label}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="bg-primary dark:bg-black text-white pt-32 pb-12 px-6 md:px-12 border-t border-stone-800">
|
||||
<div className="max-w-[1920px] mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 mb-32">
|
||||
{/* Brand & Mission */}
|
||||
<div className="lg:col-span-5 flex flex-col justify-between h-full">
|
||||
<div>
|
||||
<h2 className="font-display text-6xl md:text-8xl leading-none tracking-tighter mb-6 bg-gradient-to-br from-white to-stone-400 bg-clip-text text-transparent">
|
||||
KNUTH Ceramics
|
||||
</h2>
|
||||
<div className="mb-8">
|
||||
<span className="font-body text-[0.7rem] uppercase tracking-[0.2em] border border-stone-800 px-3 py-1.5 inline-block text-stone-300 bg-stone-900/40">
|
||||
Online Shop Opening — Coming Soon
|
||||
</span>
|
||||
</div>
|
||||
<p className="font-body text-lg font-light text-stone-400 leading-relaxed max-w-md">
|
||||
Handcrafted ceramics for the modern home. Created with intention, fired with patience, and delivered with care.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 lg:mt-0">
|
||||
<h4 className="text-sm font-bold uppercase tracking-widest mb-4">Get in touch</h4>
|
||||
<a
|
||||
href="mailto:knuth.claudia@gmail.com"
|
||||
className="font-body text-stone-400 hover:text-white transition-colors text-base block mb-2"
|
||||
>
|
||||
knuth.claudia@gmail.com
|
||||
</a>
|
||||
<a
|
||||
href="https://www.instagram.com/knuth.ceramics"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-body text-stone-400 hover:text-white transition-colors text-base block"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Links Columns */}
|
||||
<div className="lg:col-span-7 grid grid-cols-2 md:grid-cols-3 gap-12 pt-4">
|
||||
<div>
|
||||
<h4 className="text-xs font-bold uppercase tracking-widest mb-8 text-stone-500">{FOOTER_LINKS[0].title}</h4>
|
||||
<ul className="space-y-6">
|
||||
{FOOTER_LINKS[0].links.map((link) => (
|
||||
<li key={link.label}>
|
||||
{renderFooterLink(link)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xs font-bold uppercase tracking-widest mb-8 text-stone-500">{FOOTER_LINKS[1].title}</h4>
|
||||
<ul className="space-y-6">
|
||||
{FOOTER_LINKS[1].links.map((link) => (
|
||||
<li key={link.label}>
|
||||
{renderFooterLink(link)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xs font-bold uppercase tracking-widest mb-8 text-stone-500">{FOOTER_LINKS[2].title}</h4>
|
||||
<ul className="space-y-6">
|
||||
{FOOTER_LINKS[2].links.map((link) => (
|
||||
<li key={link.label}>
|
||||
{renderFooterLink(link)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-white/10 pt-12 flex flex-col md:flex-row justify-between items-center text-xs text-stone-500 tracking-widest uppercase font-light">
|
||||
<p>© 2026 KNUTH Ceramics. All rights reserved.</p>
|
||||
<div className="flex space-x-8 mt-6 md:mt-0">
|
||||
<Link className="hover:text-white transition-colors" to="/privacy">Privacy</Link>
|
||||
<Link className="hover:text-white transition-colors" to="/returns">Terms</Link>
|
||||
<Link className="hover:text-white transition-colors" to="/cookies">Cookies</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
||||
@@ -1,179 +1,179 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { GALLERY_IMAGES } from '../constants';
|
||||
|
||||
interface GalleryImage {
|
||||
src: string;
|
||||
likes: number;
|
||||
comments: number;
|
||||
caption: string;
|
||||
}
|
||||
|
||||
const GallerySection: React.FC = () => {
|
||||
const [selectedImage, setSelectedImage] = useState<GalleryImage | null>(null);
|
||||
|
||||
// Double the images for seamless infinite scroll
|
||||
const duplicatedImages = [...GALLERY_IMAGES, ...GALLERY_IMAGES] as GalleryImage[];
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="py-20 bg-white dark:bg-background-dark overflow-hidden">
|
||||
<div className="max-w-[1920px] mx-auto px-4">
|
||||
<motion.div
|
||||
className="flex justify-between items-center mb-8 px-2"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-400 p-[2px]">
|
||||
<div className="w-full h-full rounded-full bg-white dark:bg-background-dark flex items-center justify-center">
|
||||
<span className="font-display text-lg">K</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-display text-xl text-text-main dark:text-white">@knuth_ceramics</h4>
|
||||
<p className="text-xs text-text-muted">24.8k followers</p>
|
||||
</div>
|
||||
</div>
|
||||
<a className="px-6 py-2 border border-text-main dark:border-white text-xs uppercase tracking-widest text-text-main dark:text-white hover:bg-text-main hover:text-white dark:hover:bg-white dark:hover:text-black transition-all duration-300 rounded-full" href="#">
|
||||
Follow
|
||||
</a>
|
||||
</motion.div>
|
||||
|
||||
{/* Infinite Carousel */}
|
||||
<div className="relative group overflow-hidden">
|
||||
<style>{`
|
||||
@keyframes marquee {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-${GALLERY_IMAGES.length * 304}px); }
|
||||
}
|
||||
.animate-marquee {
|
||||
animation: marquee 40s linear infinite;
|
||||
}
|
||||
.animate-marquee:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
`}</style>
|
||||
<div className="flex gap-4 animate-marquee w-max py-4">
|
||||
{duplicatedImages.map((img, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
className="relative flex-shrink-0 w-72 h-72 overflow-hidden cursor-pointer rounded-lg"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
onClick={() => setSelectedImage(img)}
|
||||
>
|
||||
<img
|
||||
alt={img.caption}
|
||||
className="w-full h-full object-cover"
|
||||
src={img.src}
|
||||
/>
|
||||
{/* Instagram-style hover overlay */}
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-black/50 flex items-center justify-center gap-8 text-white"
|
||||
initial={{ opacity: 0 }}
|
||||
whileHover={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>favorite</span>
|
||||
<span className="font-bold">{img.likes.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="material-symbols-outlined">chat_bubble</span>
|
||||
<span className="font-bold">{img.comments}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Lightbox Modal */}
|
||||
<AnimatePresence>
|
||||
{
|
||||
selectedImage && (
|
||||
<motion.div
|
||||
className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setSelectedImage(null)}
|
||||
>
|
||||
<motion.div
|
||||
className="relative max-w-4xl w-full bg-white dark:bg-stone-900 rounded-xl overflow-hidden flex flex-col md:flex-row"
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
transition={{ type: 'spring', damping: 25, stiffness: 300 }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="md:w-2/3 aspect-square md:aspect-auto">
|
||||
<img
|
||||
src={selectedImage.src}
|
||||
alt={selectedImage.caption}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Side panel */}
|
||||
<div className="md:w-1/3 p-6 flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 pb-4 border-b border-stone-200 dark:border-stone-700">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-400 p-[2px]">
|
||||
<div className="w-full h-full rounded-full bg-white dark:bg-stone-900 flex items-center justify-center">
|
||||
<span className="font-display text-sm">K</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="font-bold text-sm text-text-main dark:text-white">knuth_ceramics</span>
|
||||
</div>
|
||||
|
||||
{/* Caption */}
|
||||
<div className="flex-1 py-4">
|
||||
<p className="text-sm text-text-main dark:text-white">
|
||||
<span className="font-bold">knuth_ceramics</span> {selectedImage.caption}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="border-t border-stone-200 dark:border-stone-700 pt-4">
|
||||
<div className="flex gap-4 mb-4">
|
||||
<button className="hover:scale-110 transition-transform">
|
||||
<span className="material-symbols-outlined text-2xl text-text-main dark:text-white" style={{ fontVariationSettings: "'FILL' 1" }}>favorite</span>
|
||||
</button>
|
||||
<button className="hover:scale-110 transition-transform">
|
||||
<span className="material-symbols-outlined text-2xl text-text-main dark:text-white">chat_bubble</span>
|
||||
</button>
|
||||
<button className="hover:scale-110 transition-transform">
|
||||
<span className="material-symbols-outlined text-2xl text-text-main dark:text-white">send</span>
|
||||
</button>
|
||||
<button className="hover:scale-110 transition-transform ml-auto">
|
||||
<span className="material-symbols-outlined text-2xl text-text-main dark:text-white">bookmark</span>
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-text-main dark:text-white">{selectedImage.likes.toLocaleString()} likes</p>
|
||||
<p className="text-xs text-text-muted mt-1">{selectedImage.comments} comments</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Close button */}
|
||||
<button
|
||||
className="absolute top-4 right-4 text-white bg-black/50 rounded-full p-2 hover:bg-black/70 transition-colors"
|
||||
onClick={() => setSelectedImage(null)}
|
||||
>
|
||||
<span className="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
</AnimatePresence >
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default GallerySection;
|
||||
import React, { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { GALLERY_IMAGES } from '../constants';
|
||||
|
||||
interface GalleryImage {
|
||||
src: string;
|
||||
likes: number;
|
||||
comments: number;
|
||||
caption: string;
|
||||
}
|
||||
|
||||
const GallerySection: React.FC = () => {
|
||||
const [selectedImage, setSelectedImage] = useState<GalleryImage | null>(null);
|
||||
|
||||
// Double the images for seamless infinite scroll
|
||||
const duplicatedImages = [...GALLERY_IMAGES, ...GALLERY_IMAGES] as GalleryImage[];
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="py-20 bg-white dark:bg-background-dark overflow-hidden">
|
||||
<div className="max-w-[1920px] mx-auto px-4">
|
||||
<motion.div
|
||||
className="flex justify-between items-center mb-8 px-2"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<a href="https://www.instagram.com/knuth.ceramics" target="_blank" rel="noopener noreferrer" className="flex items-center gap-4 group cursor-pointer">
|
||||
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-400 p-[2px] transition-transform group-hover:scale-105 duration-300">
|
||||
<div className="w-full h-full rounded-full bg-white dark:bg-background-dark flex items-center justify-center">
|
||||
<span className="font-display text-lg">K</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-display text-xl text-text-main dark:text-white group-hover:underline">@knuth_ceramics</h4>
|
||||
<p className="text-xs text-text-muted">24.8k followers</p>
|
||||
</div>
|
||||
</a>
|
||||
<a className="px-6 py-2 border border-text-main dark:border-white text-xs uppercase tracking-widest text-text-main dark:text-white hover:bg-text-main hover:text-white dark:hover:bg-white dark:hover:text-black transition-all duration-300 rounded-full" href="https://www.instagram.com/knuth.ceramics" target="_blank" rel="noopener noreferrer">
|
||||
Follow
|
||||
</a>
|
||||
</motion.div>
|
||||
|
||||
{/* Infinite Carousel */}
|
||||
<div className="relative group overflow-hidden">
|
||||
<style>{`
|
||||
@keyframes marquee {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-${GALLERY_IMAGES.length * 304}px); }
|
||||
}
|
||||
.animate-marquee {
|
||||
animation: marquee 40s linear infinite;
|
||||
}
|
||||
.animate-marquee:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
`}</style>
|
||||
<div className="flex gap-4 animate-marquee w-max py-4">
|
||||
{duplicatedImages.map((img, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
className="relative flex-shrink-0 w-72 h-72 overflow-hidden cursor-pointer rounded-lg"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
onClick={() => setSelectedImage(img)}
|
||||
>
|
||||
<img
|
||||
alt={img.caption}
|
||||
className="w-full h-full object-cover"
|
||||
src={img.src}
|
||||
/>
|
||||
{/* Instagram-style hover overlay */}
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-black/50 flex items-center justify-center gap-8 text-white"
|
||||
initial={{ opacity: 0 }}
|
||||
whileHover={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>favorite</span>
|
||||
<span className="font-bold">{img.likes.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="material-symbols-outlined">chat_bubble</span>
|
||||
<span className="font-bold">{img.comments}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Lightbox Modal */}
|
||||
<AnimatePresence>
|
||||
{
|
||||
selectedImage && (
|
||||
<motion.div
|
||||
className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setSelectedImage(null)}
|
||||
>
|
||||
<motion.div
|
||||
className="relative max-w-4xl w-full bg-white dark:bg-stone-900 rounded-xl overflow-hidden flex flex-col md:flex-row"
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
transition={{ type: 'spring', damping: 25, stiffness: 300 }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="md:w-2/3 aspect-square md:aspect-auto">
|
||||
<img
|
||||
src={selectedImage.src}
|
||||
alt={selectedImage.caption}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Side panel */}
|
||||
<div className="md:w-1/3 p-6 flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 pb-4 border-b border-stone-200 dark:border-stone-700">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-400 p-[2px]">
|
||||
<div className="w-full h-full rounded-full bg-white dark:bg-stone-900 flex items-center justify-center">
|
||||
<span className="font-display text-sm">K</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="font-bold text-sm text-text-main dark:text-white">knuth_ceramics</span>
|
||||
</div>
|
||||
|
||||
{/* Caption */}
|
||||
<div className="flex-1 py-4">
|
||||
<p className="text-sm text-text-main dark:text-white">
|
||||
<span className="font-bold">knuth_ceramics</span> {selectedImage.caption}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="border-t border-stone-200 dark:border-stone-700 pt-4">
|
||||
<div className="flex gap-4 mb-4">
|
||||
<button className="hover:scale-110 transition-transform">
|
||||
<span className="material-symbols-outlined text-2xl text-text-main dark:text-white" style={{ fontVariationSettings: "'FILL' 1" }}>favorite</span>
|
||||
</button>
|
||||
<button className="hover:scale-110 transition-transform">
|
||||
<span className="material-symbols-outlined text-2xl text-text-main dark:text-white">chat_bubble</span>
|
||||
</button>
|
||||
<button className="hover:scale-110 transition-transform">
|
||||
<span className="material-symbols-outlined text-2xl text-text-main dark:text-white">send</span>
|
||||
</button>
|
||||
<button className="hover:scale-110 transition-transform ml-auto">
|
||||
<span className="material-symbols-outlined text-2xl text-text-main dark:text-white">bookmark</span>
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-text-main dark:text-white">{selectedImage.likes.toLocaleString()} likes</p>
|
||||
<p className="text-xs text-text-muted mt-1">{selectedImage.comments} comments</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Close button */}
|
||||
<button
|
||||
className="absolute top-4 right-4 text-white bg-black/50 rounded-full p-2 hover:bg-black/70 transition-colors"
|
||||
onClick={() => setSelectedImage(null)}
|
||||
>
|
||||
<span className="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
</AnimatePresence >
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default GallerySection;
|
||||
|
||||
@@ -1,119 +1,118 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { NAV_ITEMS } from '../constants';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useStore } from '../src/context/StoreContext';
|
||||
|
||||
const Header: React.FC = () => {
|
||||
const { cart, setCartOpen } = useStore();
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setScrolled(window.scrollY > 50);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header
|
||||
className={`fixed top-0 w-full z-50 transition-all duration-500 ${scrolled
|
||||
? 'bg-white/80 dark:bg-black/80 backdrop-blur-xl py-2 border-b border-stone-200/50 dark:border-stone-800/50'
|
||||
: 'bg-transparent py-6'
|
||||
}`}
|
||||
>
|
||||
<div className="max-w-[1920px] mx-auto px-6 md:px-12">
|
||||
<div className="flex justify-between items-center h-20">
|
||||
{/* Mobile Menu Button */}
|
||||
<div className="flex items-center md:hidden">
|
||||
<button
|
||||
className="text-text-main dark:text-white p-2 hover:bg-stone-100 dark:hover:bg-stone-800 rounded-full transition-colors"
|
||||
type="button"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
<span className="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Logo */}
|
||||
<div className="flex-shrink-0 relative group cursor-pointer">
|
||||
<Link className="relative z-10 font-display text-4xl md:text-5xl font-light tracking-widest uppercase text-text-main dark:text-white" to="/">
|
||||
KNUTH Ceramics
|
||||
</Link>
|
||||
{/* Subtle glow effect on hover */}
|
||||
<div className="absolute -inset-4 bg-white/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-full pointer-events-none" />
|
||||
</div>
|
||||
|
||||
{/* Desktop Nav */}
|
||||
<nav className="hidden md:flex space-x-12">
|
||||
{NAV_ITEMS.map((item) => (
|
||||
<Link
|
||||
key={item.label}
|
||||
className="group relative text-xs uppercase tracking-[0.2em] text-text-main dark:text-white hover:text-black dark:hover:text-white transition-colors duration-300 py-2"
|
||||
to={item.label === 'Collections' ? '/collections' : item.label === 'Atelier' ? '/atelier' : '/editorial'}
|
||||
>
|
||||
{item.label}
|
||||
{/* Underline Reveal Animation */}
|
||||
<span className="absolute bottom-0 left-0 w-0 h-[1px] bg-black dark:bg-white transition-all duration-300 group-hover:w-full" />
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Icons */}
|
||||
<div className="flex items-center space-x-6 text-text-main dark:text-white">
|
||||
<button className="hover:scale-110 transition-transform duration-300 hidden sm:block p-2">
|
||||
<span className="material-symbols-outlined text-xl font-light">search</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCartOpen(true)}
|
||||
className="hover:scale-110 transition-transform duration-300 relative group p-2"
|
||||
type="button"
|
||||
>
|
||||
<span className="material-symbols-outlined text-xl font-light">shopping_bag</span>
|
||||
{cart.length > 0 && (
|
||||
<span className="absolute top-0 right-0 bg-black dark:bg-white text-white dark:text-black text-[9px] w-4 h-4 flex items-center justify-center rounded-full opacity-100 scale-100 transition-all duration-300">
|
||||
{cart.reduce((total, item) => total + item.quantity, 0)}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Overlay */}
|
||||
<AnimatePresence>
|
||||
{isMenuOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="md:hidden absolute top-full left-0 w-full bg-white/95 dark:bg-black/95 backdrop-blur-xl border-b border-stone-200 dark:border-stone-800 shadow-2xl overflow-hidden"
|
||||
>
|
||||
<div className="flex flex-col p-8 space-y-6">
|
||||
{NAV_ITEMS.map((item, idx) => (
|
||||
<Link
|
||||
key={item.label}
|
||||
to={item.label === 'Collections' ? '/collections' : item.label === 'Atelier' ? '/atelier' : '/editorial'}
|
||||
className="text-lg uppercase tracking-[0.2em] text-text-main dark:text-white hover:pl-4 transition-all duration-300 border-l-2 border-transparent hover:border-black dark:hover:border-white"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<motion.span
|
||||
initial={{ x: -20, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
>
|
||||
{item.label}
|
||||
</motion.span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { NAV_ITEMS } from '../constants';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useStore } from '../src/context/StoreContext';
|
||||
|
||||
const Header: React.FC = () => {
|
||||
const { cart, setCartOpen } = useStore();
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setScrolled(window.scrollY > 50);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header
|
||||
className={`fixed top-0 w-full z-50 transition-all duration-500 ${scrolled
|
||||
? 'bg-white/80 dark:bg-black/80 backdrop-blur-xl py-2 border-b border-stone-200/50 dark:border-stone-800/50'
|
||||
: 'bg-transparent py-6'
|
||||
}`}
|
||||
>
|
||||
<div className="max-w-[1920px] mx-auto px-6 md:px-12">
|
||||
<div className="flex justify-between items-center h-20">
|
||||
{/* Mobile Menu Button */}
|
||||
<div className="flex items-center md:hidden">
|
||||
<button
|
||||
className="text-text-main dark:text-white p-2 hover:bg-stone-100 dark:hover:bg-stone-800 rounded-full transition-colors"
|
||||
type="button"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
<span className="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Logo */}
|
||||
<div className="flex-shrink-0 relative group cursor-pointer">
|
||||
<Link className="relative z-10 font-display text-4xl md:text-5xl font-light tracking-widest uppercase text-text-main dark:text-white" to="/">
|
||||
KNUTH Ceramics
|
||||
</Link>
|
||||
{/* Subtle glow effect on hover */}
|
||||
<div className="absolute -inset-4 bg-white/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-full pointer-events-none" />
|
||||
</div>
|
||||
|
||||
{/* Desktop Nav */}
|
||||
<nav className="hidden md:flex space-x-12">
|
||||
{NAV_ITEMS.map((item) => (
|
||||
<Link
|
||||
key={item.label}
|
||||
className="group relative text-xs uppercase tracking-[0.2em] text-text-main dark:text-white hover:text-black dark:hover:text-white transition-colors duration-300 py-2"
|
||||
to={item.label === 'Collections' ? '/collections' : item.label === 'Atelier' ? '/atelier' : '/editorial'}
|
||||
>
|
||||
{item.label}
|
||||
{/* Underline Reveal Animation */}
|
||||
<span className="absolute bottom-0 left-0 w-0 h-[1px] bg-black dark:bg-white transition-all duration-300 group-hover:w-full" />
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Icons */}
|
||||
<div className="flex items-center space-x-6 text-text-main dark:text-white">
|
||||
{/*
|
||||
<button
|
||||
onClick={() => setCartOpen(true)}
|
||||
className="hover:scale-110 transition-transform duration-300 relative group p-2"
|
||||
type="button"
|
||||
>
|
||||
<span className="material-symbols-outlined text-xl font-light">shopping_bag</span>
|
||||
{cart.length > 0 && (
|
||||
<span className="absolute top-0 right-0 bg-black dark:bg-white text-white dark:text-black text-[9px] w-4 h-4 flex items-center justify-center rounded-full opacity-100 scale-100 transition-all duration-300">
|
||||
{cart.reduce((total, item) => total + item.quantity, 0)}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Overlay */}
|
||||
<AnimatePresence>
|
||||
{isMenuOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="md:hidden absolute top-full left-0 w-full bg-white/95 dark:bg-black/95 backdrop-blur-xl border-b border-stone-200 dark:border-stone-800 shadow-2xl overflow-hidden"
|
||||
>
|
||||
<div className="flex flex-col p-8 space-y-6">
|
||||
{NAV_ITEMS.map((item, idx) => (
|
||||
<Link
|
||||
key={item.label}
|
||||
to={item.label === 'Collections' ? '/collections' : item.label === 'Atelier' ? '/atelier' : '/editorial'}
|
||||
className="text-lg uppercase tracking-[0.2em] text-text-main dark:text-white hover:pl-4 transition-all duration-300 border-l-2 border-transparent hover:border-black dark:hover:border-white"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<motion.span
|
||||
initial={{ x: -20, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
>
|
||||
{item.label}
|
||||
</motion.span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
||||
@@ -1,40 +1,44 @@
|
||||
import React from 'react';
|
||||
|
||||
const Hero: React.FC = () => {
|
||||
return (
|
||||
<section className="relative min-h-screen pt-24 w-full flex flex-col md:flex-row items-center overflow-hidden bg-background-light dark:bg-background-dark">
|
||||
<div className="w-full md:w-5/12 h-full flex flex-col justify-center px-6 md:pl-20 md:pr-12 py-20 z-10">
|
||||
<span className="font-body text-xs uppercase tracking-[0.3em] text-text-muted mb-8 ml-1 block">
|
||||
New Collection 2024
|
||||
</span>
|
||||
<h1 className="font-display text-6xl md:text-7xl lg:text-8xl xl:text-9xl text-text-main dark:text-white font-thin leading-[0.9] mb-10">
|
||||
Earth <br /><span className="italic pl-12 md:pl-20 text-text-muted">of</span> Ocean
|
||||
</h1>
|
||||
<p className="font-body text-text-muted dark:text-gray-400 text-sm md:text-base font-light mb-12 max-w-sm leading-loose ml-1">
|
||||
Handcrafted ceramics from the Texas Coast. Functional art inspired by the raw textures and colors of Corpus Christi. Small batch, slow-made.
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Hero: React.FC = () => {
|
||||
return (
|
||||
<section className="relative min-h-[85vh] pt-24 pb-12 w-full flex flex-col md:flex-row items-center overflow-hidden bg-background-light dark:bg-background-dark">
|
||||
<div className="w-full md:w-1/2 h-full flex flex-col justify-center px-6 md:pl-20 md:pr-12 py-12 z-10">
|
||||
<span className="font-body text-xs uppercase tracking-[0.3em] text-text-muted mb-12 ml-1 block">
|
||||
New Collection 2026
|
||||
</span>
|
||||
<span className="font-body text-[0.7rem] uppercase tracking-[0.2em] border border-stone-300 dark:border-stone-700 px-3 py-1.5 inline-block text-stone-700 dark:text-stone-300 mt-4">
|
||||
Online Shop Opening — Coming Soon
|
||||
</span>
|
||||
<h1 className="font-display text-5xl md:text-6xl lg:text-7xl xl:text-8xl text-text-main dark:text-white font-thin leading-[0.9] mb-8">
|
||||
<span className="whitespace-nowrap">German Craft.</span><br /><span className="italic pl-8 md:pl-16 text-text-muted whitespace-nowrap">Coastal Soul.</span>
|
||||
</h1>
|
||||
<p className="font-body text-text-muted dark:text-gray-400 text-sm font-light mb-8 max-w-sm leading-relaxed ml-1">
|
||||
Handcrafted ceramics from the Texas Coast. Functional art inspired by the raw textures and colors of Corpus Christi. Small batch, slow-made.
|
||||
</p>
|
||||
<div className="ml-1">
|
||||
<a className="inline-block border-b border-text-main dark:border-white pb-1 text-text-main dark:text-white font-body text-xs uppercase tracking-[0.2em] hover:text-text-muted transition-colors duration-300" href="#">
|
||||
<div className="ml-1 mt-8">
|
||||
<Link className="inline-block border-b border-text-main dark:border-white pb-1 text-text-main dark:text-white font-body text-xs uppercase tracking-[0.2em] hover:text-text-muted transition-colors duration-300" to="/collections">
|
||||
View The Collection
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-7/12 h-[60vh] md:h-screen relative">
|
||||
<div className="absolute inset-0 bg-stone-200 dark:bg-stone-800">
|
||||
<img
|
||||
alt="Minimalist ceramic vase with single branch"
|
||||
className="w-full h-full object-cover object-center brightness-95"
|
||||
src="/pottery-studio.png"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-10 left-10 md:left-auto md:right-20 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur p-6 max-w-xs hidden md:block shadow-sm">
|
||||
<p className="font-display italic text-xl text-text-main dark:text-gray-200">
|
||||
"In emptiness, there is fullness."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
<div className="w-full md:w-1/2 h-[50vh] md:h-[75vh] relative mt-12 md:mt-0">
|
||||
<div className="absolute inset-0 bg-stone-200 dark:bg-stone-800">
|
||||
<img
|
||||
alt="Minimalist ceramic vase with single branch"
|
||||
className="w-full h-full object-cover object-center brightness-95"
|
||||
src="/landingpage/1.png"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-16 left-10 md:left-auto md:right-20 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur p-6 max-w-xs hidden md:block shadow-sm">
|
||||
<p className="font-display italic text-lg text-text-main dark:text-gray-200">
|
||||
"In emptiness, there is fullness."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
|
||||
@@ -1,84 +1,91 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { gsap } from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const horizontalImages = [
|
||||
{ src: '/pottery-vase.png', title: 'Handcrafted Vases', description: 'Each vase tells a story of patience and craft' },
|
||||
{ src: '/pottery-bowls.png', title: 'Artisan Bowls', description: 'Organic forms inspired by nature' },
|
||||
{ src: '/pottery-plates.png', title: 'Dinner Collection', description: 'Elevate your everyday dining experience' },
|
||||
{ src: '/pottery-studio.png', title: 'Our Studio', description: 'Where creativity meets tradition' },
|
||||
{ src: '/ceramic-cups.png', title: 'Ceramic Cups', description: 'Handmade with love and intention' },
|
||||
];
|
||||
|
||||
const HorizontalScrollSection: React.FC = () => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
const scrollContainer = scrollRef.current;
|
||||
|
||||
if (!container || !scrollContainer) return;
|
||||
|
||||
const scrollWidth = scrollContainer.scrollWidth - window.innerWidth;
|
||||
|
||||
const tween = gsap.to(scrollContainer, {
|
||||
x: -scrollWidth,
|
||||
ease: 'none',
|
||||
scrollTrigger: {
|
||||
trigger: container,
|
||||
start: 'top top',
|
||||
end: () => `+=${scrollWidth * 0.5}`,
|
||||
scrub: 1,
|
||||
pin: true,
|
||||
anticipatePin: 1,
|
||||
},
|
||||
});
|
||||
|
||||
return () => {
|
||||
tween.scrollTrigger?.kill();
|
||||
tween.kill();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section ref={containerRef} className="relative overflow-hidden bg-clay-dark">
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className="flex h-screen items-center"
|
||||
>
|
||||
{horizontalImages.map((image, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="relative flex-shrink-0 w-[90vw] md:w-[75vw] h-screen flex items-center justify-center p-4 md:p-8"
|
||||
>
|
||||
<div className="relative w-full h-full max-w-5xl max-h-[80vh] overflow-hidden rounded-lg shadow-2xl group">
|
||||
<img
|
||||
src={image.src}
|
||||
alt={image.title}
|
||||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 p-12 text-white">
|
||||
<h3 className="font-display text-5xl md:text-6xl font-light mb-4">{image.title}</h3>
|
||||
<p className="font-body text-lg font-light opacity-80 max-w-md">{image.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute top-1/2 right-8 -translate-y-1/2 text-white/20 font-display text-[15rem] leading-none select-none pointer-events-none">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex items-center gap-4 text-white/60">
|
||||
<span className="material-symbols-outlined text-sm">arrow_back</span>
|
||||
<span className="text-xs uppercase tracking-[0.3em] font-light">Scroll to explore</span>
|
||||
<span className="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HorizontalScrollSection;
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { gsap } from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const horizontalImages = [
|
||||
{ src: '/product_images/kitchenware.png', title: 'Coffee Cups', description: 'Wheel-thrown cups for your morning ritual — no two alike' },
|
||||
{ src: '/product_images/lass_das_so_202603231510.png', title: 'Bowls', description: 'Handcrafted stoneware bowls for the table and the kitchen' },
|
||||
{ src: '/product_images/Produkt_foto_studio_202603231654 (1).png', title: 'Tableware', description: 'Small-batch dinnerware made to be used every day' },
|
||||
{ src: '/product_images/Produkt_foto_studio_202603231744.png', title: 'Kitchenware', description: 'Functional ceramics built for the rhythms of daily life' },
|
||||
{ src: '/product_images/Produkt_foto_studio_202603231654 (2).png', title: 'Decoration', description: 'Sculptural pieces inspired by the textures of the Gulf Coast' },
|
||||
];
|
||||
|
||||
const HorizontalScrollSection: React.FC = () => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
const scrollContainer = scrollRef.current;
|
||||
|
||||
if (!container || !scrollContainer) return;
|
||||
|
||||
const cards = Array.from(scrollContainer.children) as HTMLDivElement[];
|
||||
const lastCard = cards[cards.length - 1];
|
||||
|
||||
if (!lastCard) return;
|
||||
|
||||
const lastCardRightEdge = lastCard.offsetLeft + lastCard.offsetWidth;
|
||||
const mobileEndInset = window.innerWidth < 768 ? 24 : 64;
|
||||
const maxScroll = Math.max(lastCardRightEdge - window.innerWidth + mobileEndInset, 0);
|
||||
|
||||
const tween = gsap.to(scrollContainer, {
|
||||
x: -maxScroll,
|
||||
ease: 'none',
|
||||
scrollTrigger: {
|
||||
trigger: container,
|
||||
start: 'top top',
|
||||
end: () => `+=${maxScroll * 0.5}`,
|
||||
scrub: 1,
|
||||
pin: true,
|
||||
anticipatePin: 1,
|
||||
},
|
||||
});
|
||||
|
||||
return () => {
|
||||
tween.scrollTrigger?.kill();
|
||||
tween.kill();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section ref={containerRef} className="relative overflow-hidden bg-clay-dark h-screen w-full">
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className="flex h-screen items-center"
|
||||
>
|
||||
{horizontalImages.map((image, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="relative flex-shrink-0 w-[86vw] md:w-[75vw] h-screen flex items-center justify-center px-4 pr-16 md:p-8"
|
||||
>
|
||||
<div className="relative w-full h-full max-w-4xl max-h-[60vh] overflow-hidden rounded-lg shadow-2xl group">
|
||||
<img
|
||||
src={image.src}
|
||||
alt={image.title}
|
||||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 p-8 md:p-12 text-white">
|
||||
<h3 className="font-display text-4xl md:text-5xl font-light mb-4">{image.title}</h3>
|
||||
<p className="font-body text-base md:text-lg font-light opacity-80 max-w-md">{image.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute top-1/2 right-3 translate-x-[24%] -translate-y-1/2 text-white/20 font-display text-[4.5rem] sm:text-[6rem] md:right-0 md:translate-x-[42%] md:text-[12rem] xl:text-[15rem] leading-none select-none pointer-events-none">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex items-center gap-4 text-white/60">
|
||||
<span className="material-symbols-outlined text-sm">arrow_back</span>
|
||||
<span className="text-xs uppercase tracking-[0.3em] font-light">Scroll to explore</span>
|
||||
<span className="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HorizontalScrollSection;
|
||||
|
||||
176
Pottery-website/components/InstagramFeed.tsx
Normal file
176
Pottery-website/components/InstagramFeed.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
instgrm?: {
|
||||
Embeds: {
|
||||
process: () => void;
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const posts = [
|
||||
'https://www.instagram.com/p/DSOFijljukL/',
|
||||
'https://www.instagram.com/p/DSGh7rMjVes/',
|
||||
'https://www.instagram.com/p/DRIIUECj4f6/',
|
||||
'https://www.instagram.com/p/DJOvmvcIoo7/',
|
||||
'https://www.instagram.com/p/DJOu5b7IL4t/',
|
||||
'https://www.instagram.com/p/DIQnhO0oJgw/',
|
||||
'https://www.instagram.com/p/DIJUVqbI4EH/',
|
||||
'https://www.instagram.com/p/DHlvDNyIDRa/',
|
||||
'https://www.instagram.com/p/DHlub_iojwv/',
|
||||
'https://www.instagram.com/p/DJOvdVLIZpM/',
|
||||
];
|
||||
|
||||
const InstagramFeed: React.FC = () => {
|
||||
const [selectedPost, setSelectedPost] = useState<string | null>(null);
|
||||
|
||||
// Double the list for seamless infinite marquee scroll
|
||||
const duplicatedPosts = [...posts, ...posts];
|
||||
|
||||
useEffect(() => {
|
||||
// Process Instagram embeds whenever the component mounts or the lightbox opens
|
||||
if (window.instgrm) {
|
||||
window.instgrm.Embeds.process();
|
||||
} else {
|
||||
const script = document.createElement('script');
|
||||
script.src = '//www.instagram.com/embed.js';
|
||||
script.async = true;
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
}, [selectedPost]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="py-24 px-6 md:px-12 bg-stone-50 dark:bg-stone-900 overflow-hidden">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
<span className="block font-body text-xs uppercase tracking-[0.3em] text-stone-400 mb-6">
|
||||
Follow Along
|
||||
</span>
|
||||
<div className="flex items-end justify-between mb-16 px-2">
|
||||
<h2 className="font-display text-4xl md:text-5xl text-text-main dark:text-white leading-none">
|
||||
From the Studio
|
||||
</h2>
|
||||
<a
|
||||
href="https://www.instagram.com/knuth.ceramics"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs font-bold uppercase tracking-widest text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
@knuth.ceramics →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Infinite Carousel */}
|
||||
<div className="relative group overflow-hidden">
|
||||
<style>{`
|
||||
@keyframes marquee {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-${posts.length * 342}px); /* 326px width + 16px gap */ }
|
||||
}
|
||||
.animate-marquee {
|
||||
animation: marquee 50s linear infinite;
|
||||
}
|
||||
.animate-marquee:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
`}</style>
|
||||
<div className="flex gap-4 animate-marquee w-max py-4">
|
||||
{duplicatedPosts.map((permalink, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="relative flex-shrink-0 w-[326px] overflow-hidden rounded-[8px] group/item cursor-pointer bg-white"
|
||||
>
|
||||
{/* Invisible Overlay to capture clicks.
|
||||
Because iframes block events, we put a div above it.
|
||||
On hover it reveals a subtle mask to indicate interactivity. */}
|
||||
<div
|
||||
className="absolute inset-0 z-10 bg-black/0 group-hover/item:bg-black/50 transition-colors duration-300 flex flex-col items-center justify-center opacity-0 group-hover/item:opacity-100"
|
||||
onClick={() => setSelectedPost(permalink)}
|
||||
>
|
||||
<p className="text-white font-display text-lg px-4 text-center font-bold drop-shadow-md">
|
||||
View Post
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* The Instagram Embed itself.
|
||||
By omitting data-instgrm-captioned we hide the caption/hashtags directly. */}
|
||||
<div className="pointer-events-none">
|
||||
<blockquote
|
||||
className="instagram-media"
|
||||
data-instgrm-permalink={`${permalink}?utm_source=ig_embed&utm_campaign=loading`}
|
||||
data-instgrm-version="14"
|
||||
style={{
|
||||
background: '#FFF',
|
||||
border: 0,
|
||||
margin: 0,
|
||||
maxWidth: '540px',
|
||||
minWidth: '326px',
|
||||
padding: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Lightbox Modal */}
|
||||
<AnimatePresence>
|
||||
{selectedPost && (
|
||||
<motion.div
|
||||
className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4 overflow-y-auto pt-[100px]"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setSelectedPost(null)}
|
||||
>
|
||||
<motion.div
|
||||
className="relative max-w-lg w-full bg-white dark:bg-stone-900 rounded-xl overflow-hidden my-auto"
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
transition={{ type: 'spring', damping: 25, stiffness: 300 }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Close button inside modal container */}
|
||||
<button
|
||||
className="absolute top-2 right-2 text-stone-500 bg-white border border-stone-200 shadow-md rounded-full w-8 h-8 flex items-center justify-center hover:bg-stone-100 transition-colors z-[60]"
|
||||
onClick={() => setSelectedPost(null)}
|
||||
>
|
||||
<span className="font-bold">×</span>
|
||||
</button>
|
||||
|
||||
{/* Instagram Embed WITH caption shown in the Lightbox */}
|
||||
<div className="w-full bg-white mt-12 pb-4 px-2">
|
||||
<blockquote
|
||||
className="instagram-media"
|
||||
data-instgrm-captioned
|
||||
data-instgrm-permalink={`${selectedPost}?utm_source=ig_embed&utm_campaign=loading`}
|
||||
data-instgrm-version="14"
|
||||
style={{
|
||||
background: '#FFF',
|
||||
border: 0,
|
||||
boxShadow: 'none',
|
||||
margin: '0',
|
||||
maxWidth: '540px',
|
||||
minWidth: '326px',
|
||||
padding: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InstagramFeed;
|
||||
@@ -1,53 +1,57 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { JOURNAL_ENTRIES } from '../constants';
|
||||
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { JOURNAL_ENTRIES } from '../constants';
|
||||
|
||||
const JournalSection: React.FC = () => {
|
||||
return (
|
||||
<section className="relative py-32 bg-terracotta-soft dark:bg-black overflow-hidden transition-colors duration-500">
|
||||
<div className="absolute inset-0 z-0 mix-blend-multiply opacity-30">
|
||||
<img
|
||||
alt="Atmospheric studio background"
|
||||
className="w-full h-full object-cover blur-3xl scale-110 grayscale"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAipMlYLTcRT_hdc3VePfFIlrA56VzZ5G2y3gcRfmIZMERwGFKq2N19Gqo6mw7uZowXmjl2eJ89TI3Mcud2OyOfadO3mPVF_v0sI0OHupqM49WEFcWzH-Wbu3DL6bQ46F2Y8SIAk-NUQy8psjcIdBKRrM8fqdn4eOPANYTXpVxkLMAm4R0Axy4aEKNdmj917ZKKTxvXB-J8nGlITJkJ-ua7XcZOwGnfK5ttzyWW35A0oOSffCf972gmpV27wrVQgYJNLS7UyDdyQIQ"
|
||||
/>
|
||||
</div>
|
||||
<div className="max-w-[1920px] mx-auto px-6 md:px-12 relative z-10">
|
||||
<div className="flex justify-between items-baseline mb-20 border-b border-text-main/20 dark:border-gray-800 pb-6">
|
||||
<h2 className="font-display text-6xl font-thin text-text-main dark:text-white">Editorial</h2>
|
||||
<Link className="text-xs uppercase tracking-[0.2em] text-text-main dark:text-white hover:text-text-muted transition-colors" to="/editorial">View Archive</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||
{JOURNAL_ENTRIES.map((entry) => (
|
||||
<Link key={entry.id} to={entry.slug} className={`group cursor-pointer block ${entry.marginTop ? 'lg:mt-20' : ''}`}>
|
||||
<article>
|
||||
<div className="relative h-[500px] overflow-hidden mb-8 shadow-md">
|
||||
<img
|
||||
alt={entry.title}
|
||||
className="w-full h-full object-cover transition-transform duration-[1.5s] group-hover:scale-105"
|
||||
src={entry.image}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors duration-500"></div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center space-x-4 mb-4">
|
||||
<span className="text-[10px] uppercase tracking-[0.2em] text-text-muted border border-text-muted/30 px-2 py-1 rounded-full">{entry.category}</span>
|
||||
<span className="text-[10px] uppercase tracking-[0.2em] text-text-muted">{entry.date}</span>
|
||||
</div>
|
||||
<h3 className="font-display text-3xl text-text-main dark:text-white mb-4 leading-tight group-hover:underline decoration-1 underline-offset-4">
|
||||
{entry.title}
|
||||
</h3>
|
||||
<p className="text-sm font-light text-text-muted dark:text-gray-400 leading-loose max-w-sm">
|
||||
{entry.description}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
const getArticleHref = (slug: string) => (
|
||||
slug.startsWith('/editorial/') ? slug : `/editorial/${slug}`
|
||||
);
|
||||
};
|
||||
|
||||
export default JournalSection;
|
||||
return (
|
||||
<section className="relative py-32 bg-terracotta-soft dark:bg-black overflow-hidden transition-colors duration-500">
|
||||
<div className="absolute inset-0 z-0 mix-blend-multiply opacity-30">
|
||||
<img
|
||||
alt="Atmospheric studio background"
|
||||
className="w-full h-full object-cover blur-3xl scale-110 grayscale"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAipMlYLTcRT_hdc3VePfFIlrA56VzZ5G2y3gcRfmIZMERwGFKq2N19Gqo6mw7uZowXmjl2eJ89TI3Mcud2OyOfadO3mPVF_v0sI0OHupqM49WEFcWzH-Wbu3DL6bQ46F2Y8SIAk-NUQy8psjcIdBKRrM8fqdn4eOPANYTXpVxkLMAm4R0Axy4aEKNdmj917ZKKTxvXB-J8nGlITJkJ-ua7XcZOwGnfK5ttzyWW35A0oOSffCf972gmpV27wrVQgYJNLS7UyDdyQIQ"
|
||||
/>
|
||||
</div>
|
||||
<div className="max-w-[1920px] mx-auto px-6 md:px-12 relative z-10">
|
||||
<div className="flex justify-between items-baseline mb-20 border-b border-text-main/20 dark:border-gray-800 pb-6">
|
||||
<h2 className="font-display text-6xl font-thin text-text-main dark:text-white">Editorial</h2>
|
||||
<Link className="text-xs uppercase tracking-[0.2em] text-text-main dark:text-white hover:text-text-muted transition-colors" to="/editorial">View Archive</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||
{JOURNAL_ENTRIES.map((entry) => (
|
||||
<Link key={entry.id} to={getArticleHref(entry.slug)} className={`group cursor-pointer block ${entry.marginTop ? 'lg:mt-20' : ''}`}>
|
||||
<article>
|
||||
<div className="relative h-[500px] overflow-hidden mb-8 shadow-md">
|
||||
<img
|
||||
alt={entry.title}
|
||||
className="w-full h-full object-cover transition-transform duration-[1.5s] group-hover:scale-105"
|
||||
src={entry.image}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors duration-500"></div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center space-x-4 mb-4">
|
||||
<span className="text-[10px] uppercase tracking-[0.2em] text-text-muted border border-text-muted/30 px-2 py-1 rounded-full">{entry.category}</span>
|
||||
<span className="text-[10px] uppercase tracking-[0.2em] text-text-muted">{entry.date}</span>
|
||||
</div>
|
||||
<h3 className="font-display text-3xl text-text-main dark:text-white mb-4 leading-tight group-hover:underline decoration-1 underline-offset-4">
|
||||
{entry.title}
|
||||
</h3>
|
||||
<p className="text-sm font-light text-text-muted dark:text-gray-400 leading-loose max-w-sm">
|
||||
{entry.description}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default JournalSection;
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
const QuoteSection: React.FC = () => {
|
||||
return (
|
||||
<section className="py-32 bg-clay-dark dark:bg-black border-y border-stone-800/50 transition-colors duration-500">
|
||||
<div className="max-w-5xl mx-auto px-6 text-center">
|
||||
<span className="material-symbols-outlined text-4xl mb-8 text-stone-500 font-thin">format_quote</span>
|
||||
<h3 className="font-display text-3xl md:text-5xl font-thin leading-snug text-stone-100 dark:text-stone-200 mb-10 italic">
|
||||
"My pottery is designed to be both beautiful and practical. From minimalist vases to durable dinner plates, each piece has its own character."
|
||||
</h3>
|
||||
<p className="font-body text-xs uppercase tracking-[0.2em] text-stone-400">
|
||||
Anonymous — Verified Collector
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
import React from 'react';
|
||||
|
||||
const QuoteSection: React.FC = () => {
|
||||
return (
|
||||
<section className="py-32 bg-clay-dark dark:bg-black border-y border-stone-800/50 transition-colors duration-500">
|
||||
<div className="max-w-5xl mx-auto px-6 text-center">
|
||||
<span className="material-symbols-outlined text-4xl mb-8 text-stone-500 font-thin">format_quote</span>
|
||||
<h3 className="font-display text-3xl md:text-5xl font-thin leading-snug text-stone-100 dark:text-stone-200 mb-10 italic">
|
||||
"My pottery is designed to be both beautiful and practical. From minimalist vases to durable dinner plates, each piece has its own character."
|
||||
</h3>
|
||||
<p className="font-body text-xs uppercase tracking-[0.2em] text-stone-400">
|
||||
Anonymous — Verified Collector
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuoteSection;
|
||||
84
Pottery-website/components/SEO.tsx
Normal file
84
Pottery-website/components/SEO.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
// TODO: Update SITE_URL to your actual domain before deploying
|
||||
export const SITE_URL = 'https://knuthceramics.com';
|
||||
export const SITE_NAME = 'KNUTH Ceramics';
|
||||
const DEFAULT_OG_IMAGE = `${SITE_URL}/landingpage/artelier.png`;
|
||||
|
||||
type Schema = Record<string, unknown>;
|
||||
|
||||
interface SEOProps {
|
||||
title: string;
|
||||
description: string;
|
||||
canonical?: string;
|
||||
schema?: Schema | Schema[];
|
||||
ogImage?: string;
|
||||
ogType?: 'website' | 'article' | 'product';
|
||||
}
|
||||
|
||||
function setMeta(selector: string, attr: string, value: string) {
|
||||
let el = document.querySelector<HTMLMetaElement>(selector);
|
||||
if (!el) {
|
||||
el = document.createElement('meta');
|
||||
const [attrName, attrVal] = selector.replace('meta[', '').replace(']', '').split('="');
|
||||
el.setAttribute(attrName, attrVal.replace('"', ''));
|
||||
document.head.appendChild(el);
|
||||
}
|
||||
el.setAttribute(attr, value);
|
||||
}
|
||||
|
||||
const SEO: React.FC<SEOProps> = ({
|
||||
title,
|
||||
description,
|
||||
canonical,
|
||||
schema,
|
||||
ogImage = DEFAULT_OG_IMAGE,
|
||||
ogType = 'website',
|
||||
}) => {
|
||||
const schemaStr = schema ? JSON.stringify(schema) : null;
|
||||
|
||||
useEffect(() => {
|
||||
const fullTitle = title.includes(SITE_NAME) ? title : `${title} | ${SITE_NAME}`;
|
||||
document.title = fullTitle;
|
||||
|
||||
setMeta('meta[name="description"]', 'content', description);
|
||||
setMeta('meta[property="og:title"]', 'content', fullTitle);
|
||||
setMeta('meta[property="og:description"]', 'content', description);
|
||||
setMeta('meta[property="og:type"]', 'content', ogType);
|
||||
setMeta('meta[property="og:image"]', 'content', ogImage);
|
||||
setMeta('meta[property="og:site_name"]', 'content', SITE_NAME);
|
||||
setMeta('meta[name="twitter:card"]', 'content', 'summary_large_image');
|
||||
setMeta('meta[name="twitter:title"]', 'content', fullTitle);
|
||||
setMeta('meta[name="twitter:description"]', 'content', description);
|
||||
setMeta('meta[name="twitter:image"]', 'content', ogImage);
|
||||
|
||||
let canonicalEl = document.querySelector<HTMLLinkElement>('link[rel="canonical"]');
|
||||
if (!canonicalEl) {
|
||||
canonicalEl = document.createElement('link');
|
||||
canonicalEl.setAttribute('rel', 'canonical');
|
||||
document.head.appendChild(canonicalEl);
|
||||
}
|
||||
canonicalEl.setAttribute('href', canonical ?? `${SITE_URL}${window.location.pathname}`);
|
||||
|
||||
// Remove previous page-level schemas, inject new ones
|
||||
document.querySelectorAll('script[data-seo="page"]').forEach(el => el.remove());
|
||||
if (schemaStr) {
|
||||
const schemas = Array.isArray(JSON.parse(schemaStr)) ? JSON.parse(schemaStr) : [JSON.parse(schemaStr)];
|
||||
schemas.forEach((s: Schema) => {
|
||||
const script = document.createElement('script');
|
||||
script.setAttribute('type', 'application/ld+json');
|
||||
script.setAttribute('data-seo', 'page');
|
||||
script.textContent = JSON.stringify(s);
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.querySelectorAll('script[data-seo="page"]').forEach(el => el.remove());
|
||||
};
|
||||
}, [title, description, canonical, ogImage, ogType, schemaStr]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default SEO;
|
||||
@@ -1,148 +1,295 @@
|
||||
import { NavItem, CollectionItem, JournalEntry, FooterSection } from './types';
|
||||
|
||||
export const NAV_ITEMS: NavItem[] = [
|
||||
{ label: 'Collections', href: '#' },
|
||||
{ label: 'Atelier', href: '#' },
|
||||
{ label: 'Editorial', href: '#' },
|
||||
];
|
||||
|
||||
export const COLLECTIONS: CollectionItem[] = [
|
||||
import { NavItem, CollectionItem, JournalEntry, FooterSection } from './types';
|
||||
|
||||
export const NAV_ITEMS: NavItem[] = [
|
||||
{ label: 'Collections', href: '/collections' },
|
||||
{ label: 'Atelier', href: '/atelier' },
|
||||
{ label: 'Editorial', href: '/editorial' },
|
||||
];
|
||||
|
||||
export const COLLECTIONS: CollectionItem[] = [
|
||||
// --- Tableware ---
|
||||
{
|
||||
id: 1,
|
||||
title: 'Coastal Grey Tableware Set',
|
||||
slug: 'coastal-grey-tableware-set',
|
||||
number: '01',
|
||||
image: '/product_images/Lass_aussehen_produkt_202603231513 (1).png',
|
||||
images: ['/product_images/Lass_aussehen_produkt_202603231513 (1).png'],
|
||||
price: 140,
|
||||
description: 'A wheel-thrown set of cups, bowls, and saucers finished in a speckled coastal grey glaze. Handmade in Corpus Christi, TX. Dishwasher safe.',
|
||||
aspectRatio: 'aspect-[4/3]',
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Ceramic Place Setting',
|
||||
slug: 'ceramic-place-setting',
|
||||
number: '13',
|
||||
image: '/product_images/Produkt_foto_studio_202603231654 (1).png',
|
||||
images: ['/product_images/Produkt_foto_studio_202603231654 (1).png'],
|
||||
price: 120,
|
||||
description: 'A handmade ceramic plate with a small ceramic tree accent piece. A complete place setting for the table, made in small batches in Corpus Christi, TX.',
|
||||
aspectRatio: 'aspect-square',
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
title: 'Textured Floral Plates — Set of Four',
|
||||
slug: 'textured-floral-plates',
|
||||
number: '18',
|
||||
image: '/product_images/Produkt_foto_studio_202603231654 (6).png',
|
||||
images: ['/product_images/Produkt_foto_studio_202603231654 (6).png'],
|
||||
price: 210,
|
||||
description: 'A set of four round stoneware plates with a hand-pressed floral texture. Each plate varies slightly in glaze — soft white and sage tones inspired by the Gulf Coast.',
|
||||
aspectRatio: 'aspect-[3/4]',
|
||||
},
|
||||
// --- Coffee Cups ---
|
||||
{
|
||||
id: 4,
|
||||
title: 'Set of Three Stoneware Cups',
|
||||
slug: 'set-of-three-stoneware-cups',
|
||||
number: '04',
|
||||
image: '/product_images/lass_das_so_202603231510 (3).png',
|
||||
images: ['/product_images/lass_das_so_202603231510 (3).png'],
|
||||
price: 120,
|
||||
description: 'Three wheel-thrown stoneware cups with a layered grey-green interior glaze and dark clay body. No two are alike. Ideal for coffee, tea, or espresso.',
|
||||
aspectRatio: 'aspect-[4/5]',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Dog Mam Cup — Teal',
|
||||
slug: 'dog-mam-cup-teal',
|
||||
number: '05',
|
||||
image: '/product_images/lass_das_so_202603231511.png',
|
||||
images: ['/product_images/lass_das_so_202603231511.png'],
|
||||
price: 65,
|
||||
description: 'A handmade ceramic cup stamped with "Dog Mam" in the clay. Finished in a flowing orange and teal coastal glaze. A one-of-a-kind gift for dog lovers.',
|
||||
aspectRatio: 'aspect-square',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Dog Mam Cup — Blush',
|
||||
slug: 'dog-mam-cup-blush',
|
||||
number: '06',
|
||||
image: '/product_images/lass_das_so_202603231511 (1).png',
|
||||
images: ['/product_images/lass_das_so_202603231511 (1).png'],
|
||||
price: 45,
|
||||
description: 'A handmade ceramic cup stamped with "Dog Mam" in the clay. Finished in a warm blush and amber glaze. A one-of-a-kind gift for dog lovers.',
|
||||
aspectRatio: 'aspect-[3/4]',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Dark Stoneware Cups — Amber Drip',
|
||||
slug: 'dark-stoneware-cups-amber-drip',
|
||||
number: '08',
|
||||
image: '/product_images/lass_das_so_202603231511 (3).png',
|
||||
images: ['/product_images/lass_das_so_202603231511 (3).png'],
|
||||
price: 110,
|
||||
description: 'Five handmade stoneware cups with a dark clay body and flowing amber drip glaze. Small-batch, wheel-thrown in Corpus Christi. Each piece is unique.',
|
||||
aspectRatio: 'aspect-square',
|
||||
},
|
||||
// --- Bowls ---
|
||||
{
|
||||
id: 3,
|
||||
title: 'Dark Stoneware Bowl',
|
||||
slug: 'dark-stoneware-bowl',
|
||||
number: '03',
|
||||
image: '/product_images/lass_das_so_202603231510 (2).png',
|
||||
images: ['/product_images/lass_das_so_202603231510 (2).png'],
|
||||
price: 95,
|
||||
description: 'A single wheel-thrown stoneware bowl with a dark exterior and rich amber interior glaze. Made in Corpus Christi, TX. Dishwasher safe.',
|
||||
aspectRatio: 'aspect-[3/4]',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Pastel Bowl Collection',
|
||||
slug: 'pastel-bowl-collection',
|
||||
number: '07',
|
||||
image: '/product_images/lass_das_so_202603231511 (2).png',
|
||||
images: ['/product_images/lass_das_so_202603231511 (2).png'],
|
||||
price: 150,
|
||||
description: 'A collection of handmade stoneware bowls and cups in soft coastal pastels — blush pink, sky blue, buttercup yellow, and white. Each piece is unique.',
|
||||
aspectRatio: 'aspect-[4/3]',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: 'Coastal Sunset Bowl Set',
|
||||
slug: 'coastal-sunset-bowl-set',
|
||||
number: '10',
|
||||
image: '/product_images/lass_das_so_202603231510.png',
|
||||
images: ['/product_images/lass_das_so_202603231510.png'],
|
||||
price: 185,
|
||||
description: 'Stacked stoneware bowls glazed in warm coastal tones — amber, orange, pink, and teal — inspired by the Gulf Coast sunsets of Corpus Christi.',
|
||||
aspectRatio: 'aspect-[3/4]',
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: 'Handmade Blush Bowl',
|
||||
slug: 'handmade-blush-bowl',
|
||||
number: '11',
|
||||
image: '/product_images/lass_das_so_202603231510 (1).png',
|
||||
images: ['/product_images/lass_das_so_202603231510 (1).png'],
|
||||
price: 240,
|
||||
description: 'A single handmade stoneware bowl with a luminous blush and rose interior glaze. Wheel-thrown and one-of-a-kind. Made in Corpus Christi, TX.',
|
||||
aspectRatio: 'aspect-[4/3]',
|
||||
},
|
||||
// --- Kitchenware ---
|
||||
{
|
||||
id: 12,
|
||||
title: 'Dark Stoneware Vessel',
|
||||
slug: 'dark-stoneware-vessel',
|
||||
number: '12',
|
||||
image: '/product_images/Produkt_foto_studio_202603231654.png',
|
||||
images: ['/product_images/Produkt_foto_studio_202603231654.png'],
|
||||
price: 150,
|
||||
description: 'A squat wheel-thrown stoneware vessel with a textured dark clay body and amber drip glaze. Functional and sculptural — use as a utensil holder or vase.',
|
||||
aspectRatio: 'aspect-[3/4]',
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
title: 'Studio Collection — Mixed Pieces',
|
||||
slug: 'studio-collection-mixed-pieces',
|
||||
number: '16',
|
||||
image: '/product_images/Produkt_foto_studio_202603231654 (4).png',
|
||||
images: ['/product_images/Produkt_foto_studio_202603231654 (4).png'],
|
||||
price: 145,
|
||||
description: 'A curated grouping from the studio — includes small bowls, trinket dishes, a flower frog, and miniature ceramic houses. Each piece handmade in Corpus Christi.',
|
||||
aspectRatio: 'aspect-square',
|
||||
},
|
||||
// --- Decoration ---
|
||||
{
|
||||
id: 2,
|
||||
title: 'Handmade Ceramic Rose',
|
||||
slug: 'handmade-ceramic-rose',
|
||||
number: '02',
|
||||
image: '/product_images/Lass_aussehen_produkt_202603231513 (2).png',
|
||||
images: ['/product_images/Lass_aussehen_produkt_202603231513 (2).png'],
|
||||
price: 160,
|
||||
description: 'A hand-sculpted ceramic rose in unglazed white stoneware. A one-of-a-kind decorative piece — no two petals are the same. Made in Corpus Christi, TX.',
|
||||
aspectRatio: 'aspect-square',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'Hope Bowl with Clay Tokens',
|
||||
slug: 'hope-bowl-with-clay-tokens',
|
||||
number: '09',
|
||||
image: '/product_images/Lass_aussehen_produkt_202603231513.png',
|
||||
images: ['/product_images/Lass_aussehen_produkt_202603231513.png'],
|
||||
price: 130,
|
||||
description: 'A decorative stoneware bowl filled with handmade clay word tokens — small houses and tags stamped with "Hope". An intentional piece for your home.',
|
||||
aspectRatio: 'aspect-[3/4]',
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
title: 'Ceramic House Lanterns — Set of Four',
|
||||
slug: 'ceramic-house-lanterns',
|
||||
number: '14',
|
||||
image: '/product_images/Produkt_foto_studio_202603231654 (2).png',
|
||||
images: ['/product_images/Produkt_foto_studio_202603231654 (2).png'],
|
||||
price: 95,
|
||||
description: 'Four handmade ceramic house lanterns with cut-out windows that glow when lit from inside. Each house has a unique facade — hearts, stars, and arched details.',
|
||||
aspectRatio: 'aspect-[4/3]',
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
title: 'Flower Frog Vase — Gulf Blue',
|
||||
slug: 'flower-frog-vase-gulf-blue',
|
||||
number: '15',
|
||||
image: '/product_images/Produkt_foto_studio_202603231654 (3).png',
|
||||
images: ['/product_images/Produkt_foto_studio_202603231654 (3).png'],
|
||||
price: 180,
|
||||
description: 'A dome-shaped ceramic flower frog glazed in soft Gulf blue. Holds dried or fresh flowers through pin holes on top. Handmade in Corpus Christi, TX.',
|
||||
aspectRatio: 'aspect-[3/4]',
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
title: 'Miniature Ceramic Village',
|
||||
slug: 'miniature-ceramic-village',
|
||||
number: '17',
|
||||
image: '/product_images/Produkt_foto_studio_202603231654 (5).png',
|
||||
images: ['/product_images/Produkt_foto_studio_202603231654 (5).png'],
|
||||
price: 165,
|
||||
description: 'Small ceramic house sculptures arranged on round clay discs — each village is unique. A handmade decorative piece with hand-carved door and window details.',
|
||||
aspectRatio: 'aspect-[4/5]',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'Tableware',
|
||||
slug: 'tableware-set',
|
||||
number: '01',
|
||||
image: '/collection-tableware.png',
|
||||
images: ['/collection-tableware.png', '/pottery-plates.png', '/ceramic-cups.png'],
|
||||
price: 185,
|
||||
description: 'A complete hand-thrown tableware set for four. Finished in our signature matte white glaze with raw clay rims.',
|
||||
id: 19,
|
||||
title: 'Stoneware Kitchen Vessel',
|
||||
slug: 'stoneware-kitchen-vessel',
|
||||
number: '19',
|
||||
image: '/product_images/Produkt_foto_studio_202603231744.png',
|
||||
images: ['/product_images/Produkt_foto_studio_202603231744.png'],
|
||||
price: 135,
|
||||
description: 'A versatile wheel-thrown stoneware vessel designed for kitchen utility. Minimalist form with a responsive glaze.',
|
||||
aspectRatio: 'aspect-[3/4]',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Lighting',
|
||||
slug: 'ceramic-lighting',
|
||||
number: '04',
|
||||
image: '/collection-lighting.png',
|
||||
images: ['/collection-lighting.png', '/pottery-studio.png', '/collection-vases.png'],
|
||||
price: 240,
|
||||
description: 'Sculptural ceramic pendant lights that bring warmth and texture to any space. Each piece is unique.',
|
||||
aspectRatio: 'aspect-[4/3]',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Vases',
|
||||
slug: 'organic-vases',
|
||||
number: '02',
|
||||
image: '/collection-vases.png',
|
||||
images: ['/collection-vases.png', '/pottery-vase.png', '/collection-lighting.png'],
|
||||
price: 95,
|
||||
description: 'Organic forms inspired by the dunes of Padre Island. Perfect for dried stems or fresh bouquets.',
|
||||
aspectRatio: 'aspect-square',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Serving',
|
||||
slug: 'serving-bowls',
|
||||
number: '05',
|
||||
image: '/pottery-bowls.png',
|
||||
images: ['/pottery-bowls.png', '/collection-kitchenware.png', '/pottery-plates.png'],
|
||||
price: 120,
|
||||
description: 'Large, shallow serving bowls designed for communal gatherings. Durable and dishwasher safe.',
|
||||
aspectRatio: 'aspect-[3/4]',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Kitchenware',
|
||||
slug: 'kitchen-essentials',
|
||||
number: '03',
|
||||
image: '/collection-kitchenware.png',
|
||||
images: ['/collection-kitchenware.png', '/ceramic-cups.png', '/pottery-bowls.png'],
|
||||
price: 65,
|
||||
description: 'Everyday essentials including berry bowls, spoon rests, and utensil holders. Functional beauty.',
|
||||
aspectRatio: 'aspect-[3/5]',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Textiles',
|
||||
slug: 'linen-textiles',
|
||||
number: '06',
|
||||
image: '/pottery-plates.png',
|
||||
images: ['/pottery-plates.png', '/collection-tableware.png', '/collection-vases.png'],
|
||||
price: 45,
|
||||
description: 'Natural linen napkins and runners that perfectly complement our stoneware ceramics.',
|
||||
aspectRatio: 'aspect-square',
|
||||
},
|
||||
];
|
||||
|
||||
export const JOURNAL_ENTRIES: JournalEntry[] = [
|
||||
{
|
||||
id: 1,
|
||||
category: 'Studio',
|
||||
date: 'Oct 03',
|
||||
title: 'Product Photography for Small Businesses',
|
||||
slug: '/editorial/product-photography-for-small-businesses',
|
||||
description: "Learning that beautiful products aren't enough on their own — you also need beautiful photos to tell the story.",
|
||||
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAipMlYLTcRT_hdc3VePfFIlrA56VzZ5G2y3gcRfmIZMERwGFKq2N19Gqo6mw7uZowXmjl2eJ89TI3Mcud2OyOfadO3mPVF_v0sI0OHupqM49WEFcWzH-Wbu3DL6bQ46F2Y8SIAk-NUQy8psjcIdBKRrM8fqdn4eOPANYTXpVxkLMAm4R0Axy4aEKNdmj917ZKKTxvXB-J8nGlITJkJ-ua7XcZOwGnfK5ttzyWW35A0oOSffCf972gmpV27wrVQgYJNLS7UyDdyQIQ',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
category: 'Guide',
|
||||
date: 'Jul 15',
|
||||
title: 'How to Care for Handmade Ceramics',
|
||||
slug: '/editorial/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.',
|
||||
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAaWGnX_NYT3S_lOflL2NJZGbWge4AAkvra4ymvF8ag-c1UKsOAIB-rsLVQXW5xIlPZipDiK8-ysPyv22xdgsvzs4EOXSSCcrT4Lb2YCe0u5orxRaZEA5TgxeoKq15zaWKSlmnHyPGjPd_7yglpfO13eZmbU5KaxFJ1KGO0UAxoO9BpsyCYgbgINMoSz3epGe5ZdwBWRH-5KCzjoLuXimFTLcd5bqg9T1YofTxgy2hWBMJzKkafyEniq8dP6hMmfNCLVcCHHHx0hRU',
|
||||
marginTop: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
category: 'Wellness',
|
||||
date: 'Jun 11',
|
||||
title: 'Finding Motivation in Clay',
|
||||
slug: '/editorial/finding-motivation-in-clay',
|
||||
description: "10 gentle, practical tips to help potters find motivation during slow or uncertain moments in the creative process.",
|
||||
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuB8NOE5fGfN4d87cbcB27_Sh-nrlZlqxsTlYKbCZk98SoL-gHsPSWFNuxd1DxBq0g8Qysh0RBZ_btu-_WaH68UjV8SXPUalyxREvUqao4oXmra--pWAsaooWwKvWCzReYZ8kj7G-KIYIAo5mqudzB8n9C6-HVTNPPx9QgZHr_YsojMxlmmVcQ5bqk7-Lp0KtSAiVIPD2-1UE1dMGnkVSLUXKdgA65JIh8M3TtNkaJTGONuFKoTERrYOWe7u2BILnqyukTzlNcvK7Sc',
|
||||
},
|
||||
];
|
||||
|
||||
export const GALLERY_IMAGES = [
|
||||
{ src: '/product_images/kitchenware.png', likes: 2847, comments: 124, caption: 'Morning rituals ☕' },
|
||||
{ src: '/product_images/vases.png', likes: 3521, comments: 89, caption: 'Crafted with intention 🏺' },
|
||||
{ src: '/product_images/serving.png', likes: 1956, comments: 67, caption: 'Wabi-sabi collection' },
|
||||
{ src: '/product_images/textiles.png', likes: 4102, comments: 156, caption: 'Ready for your table ✨' },
|
||||
{ src: '/landingpage/artelier.png', likes: 5234, comments: 203, caption: 'Where the magic happens' },
|
||||
{ src: '/product_images/tableware.png', likes: 2678, comments: 94, caption: 'Stacked with love' },
|
||||
{ src: '/product_images/vases.png', likes: 3189, comments: 112, caption: 'Organic forms' },
|
||||
{ src: '/product_images/kitchenware.png', likes: 1847, comments: 78, caption: 'Matcha time 🍵' },
|
||||
];
|
||||
|
||||
export const FOOTER_LINKS: FooterSection[] = [
|
||||
{
|
||||
title: 'Shop',
|
||||
links: [
|
||||
{ label: 'All Ceramics', href: '/collections' },
|
||||
{ label: 'Best Sellers', href: '#' },
|
||||
{ label: 'Gift Cards', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
links: [
|
||||
{ label: 'Our Story', href: '/atelier' },
|
||||
{ label: 'Sustainability', href: '#' },
|
||||
{ label: 'Careers', href: '#' },
|
||||
{ label: 'Press', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Support',
|
||||
links: [
|
||||
{ label: 'FAQ', href: '/faq' },
|
||||
{ label: 'Shipping', href: '/shipping' },
|
||||
{ label: 'Returns', href: '/returns' },
|
||||
{ label: 'Contact', href: '/contact' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const JOURNAL_ENTRIES: JournalEntry[] = [
|
||||
{
|
||||
id: 1,
|
||||
category: 'Studio',
|
||||
date: 'Oct 03',
|
||||
title: 'Product Photography for Small Businesses',
|
||||
slug: '/editorial/product-photography-for-small-businesses',
|
||||
description: "Learning that beautiful products aren't enough on their own — you also need beautiful photos to tell the story.",
|
||||
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAipMlYLTcRT_hdc3VePfFIlrA56VzZ5G2y3gcRfmIZMERwGFKq2N19Gqo6mw7uZowXmjl2eJ89TI3Mcud2OyOfadO3mPVF_v0sI0OHupqM49WEFcWzH-Wbu3DL6bQ46F2Y8SIAk-NUQy8psjcIdBKRrM8fqdn4eOPANYTXpVxkLMAm4R0Axy4aEKNdmj917ZKKTxvXB-J8nGlITJkJ-ua7XcZOwGnfK5ttzyWW35A0oOSffCf972gmpV27wrVQgYJNLS7UyDdyQIQ',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
category: 'Guide',
|
||||
date: 'Jul 15',
|
||||
title: 'The Art of Packaging',
|
||||
slug: '/editorial/the-art-of-packaging',
|
||||
description: "A practical guide for potters who want to package and send their handmade ceramics with care and confidence.",
|
||||
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAaWGnX_NYT3S_lOflL2NJZGbWge4AAkvra4ymvF8ag-c1UKsOAIB-rsLVQXW5xIlPZipDiK8-ysPyv22xdgsvzs4EOXSSCcrT4Lb2YCe0u5orxRaZEA5TgxeoKq15zaWKSlmnHyPGjPd_7yglpfO13eZmbU5KaxFJ1KGO0UAxoO9BpsyCYgbgINMoSz3epGe5ZdwBWRH-5KCzjoLuXimFTLcd5bqg9T1YofTxgy2hWBMJzKkafyEniq8dP6hMmfNCLVcCHHHx0hRU',
|
||||
marginTop: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
category: 'Wellness',
|
||||
date: 'Jun 11',
|
||||
title: 'Finding Motivation in Clay',
|
||||
slug: '/editorial/finding-motivation-in-clay',
|
||||
description: "10 gentle, practical tips to help potters find motivation during slow or uncertain moments in the creative process.",
|
||||
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuB8NOE5fGfN4d87cbcB27_Sh-nrlZlqxsTlYKbCZk98SoL-gHsPSWFNuxd1DxBq0g8Qysh0RBZ_btu-_WaH68UjV8SXPUalyxREvUqao4oXmra--pWAsaooWwKvWCzReYZ8kj7G-KIYIAo5mqudzB8n9C6-HVTNPPx9QgZHr_YsojMxlmmVcQ5bqk7-Lp0KtSAiVIPD2-1UE1dMGnkVSLUXKdgA65JIh8M3TtNkaJTGONuFKoTERrYOWe7u2BILnqyukTzlNcvK7Sc',
|
||||
},
|
||||
];
|
||||
|
||||
export const GALLERY_IMAGES = [
|
||||
{ src: '/ceramic-cups.png', likes: 2847, comments: 124, caption: 'Morning rituals ☕' },
|
||||
{ src: '/pottery-vase.png', likes: 3521, comments: 89, caption: 'Crafted with intention 🏺' },
|
||||
{ src: '/pottery-bowls.png', likes: 1956, comments: 67, caption: 'Wabi-sabi collection' },
|
||||
{ src: '/pottery-plates.png', likes: 4102, comments: 156, caption: 'Ready for your table ✨' },
|
||||
{ src: '/pottery-studio.png', likes: 5234, comments: 203, caption: 'Where the magic happens' },
|
||||
{ src: '/collection-tableware.png', likes: 2678, comments: 94, caption: 'Stacked with love' },
|
||||
{ src: '/collection-vases.png', likes: 3189, comments: 112, caption: 'Organic forms' },
|
||||
{ src: '/collection-kitchenware.png', likes: 1847, comments: 78, caption: 'Matcha time 🍵' },
|
||||
];
|
||||
|
||||
export const FOOTER_LINKS: FooterSection[] = [
|
||||
{
|
||||
title: 'Shop',
|
||||
links: [
|
||||
{ label: 'All Ceramics', href: '#' },
|
||||
{ label: 'New Arrivals', href: '#' },
|
||||
{ label: 'Best Sellers', href: '#' },
|
||||
{ label: 'Gift Cards', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
links: [
|
||||
{ label: 'Our Story', href: '#' },
|
||||
{ label: 'Sustainability', href: '#' },
|
||||
{ label: 'Careers', href: '#' },
|
||||
{ label: 'Press', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Support',
|
||||
links: [
|
||||
{ label: 'FAQ', href: '/faq' },
|
||||
{ label: 'Shipping', href: '/shipping' },
|
||||
{ label: 'Returns', href: '/returns' },
|
||||
{ label: 'Contact', href: '/contact' },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -1,88 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>KNUTH Ceramics - Editorial Collection</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Manrope:wght@200;300;400;500&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#292524", // Warm Charcoal
|
||||
secondary: "#78716C", // Warm Stone
|
||||
"background-light": "#F5F4F0", // Soft Sand / Alabaster (Hero)
|
||||
"background-dark": "#1C1917", // Dark Warm Grey
|
||||
// New Sectional Colors
|
||||
"sage": "#D4D9D1", // Soft Sage Green
|
||||
"warm-grey": "#DAD7D4", // Warm Grey
|
||||
"clay-dark": "#33302D", // Deep Charcoal / Clay
|
||||
"terracotta-soft": "#E6DDD5", // Pale Ochre / Soft Terracotta
|
||||
"accent-sand": "#E7E5E4",
|
||||
"accent-warm": "#D6D3D1",
|
||||
"text-main": "#1C1917",
|
||||
"text-muted": "#57534E",
|
||||
},
|
||||
fontFamily: {
|
||||
display: ["Cormorant Garamond", "serif"],
|
||||
body: ["Manrope", "sans-serif"],
|
||||
},
|
||||
fontSize: {
|
||||
'10xl': '10rem',
|
||||
},
|
||||
spacing: {
|
||||
'128': '32rem',
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 300,
|
||||
'GRAD' 0,
|
||||
'opsz' 24
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.parallax-bg {
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #F5F4F0;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #D6D3D1;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #78716C;
|
||||
}
|
||||
</style>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"react-dom/": "https://esm.sh/react-dom@^19.2.3/",
|
||||
"react/": "https://esm.sh/react@^19.2.3/",
|
||||
"react": "https://esm.sh/react@^19.2.3"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="font-body bg-background-light dark:bg-background-dark text-text-main dark:text-gray-200 antialiased transition-colors duration-500 selection:bg-stone-200 selection:text-black">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>KNUTH Ceramics — Handcrafted Pottery from Corpus Christi, Texas</title>
|
||||
<meta name="description" content="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."/>
|
||||
<meta name="robots" content="index, follow"/>
|
||||
<link rel="canonical" href="https://knuthceramics.com/"/>
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="KNUTH Ceramics — Handcrafted Pottery from Corpus Christi, Texas"/>
|
||||
<meta property="og:description" content="Small-batch stoneware pottery made in Corpus Christi, TX. Handcrafted vases, bowls, and tableware inspired by the Texas Gulf Coast. Custom dinnerware commissions accepted."/>
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:url" content="https://knuthceramics.com/"/>
|
||||
<meta property="og:image" content="https://knuthceramics.com/landingpage/artelier.png"/>
|
||||
<meta property="og:site_name" content="KNUTH Ceramics"/>
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content="KNUTH Ceramics — Handcrafted Pottery from Corpus Christi, Texas"/>
|
||||
<meta name="twitter:description" content="Small-batch stoneware pottery made in Corpus Christi, TX. Handcrafted vases, bowls, and tableware inspired by the Texas Gulf Coast."/>
|
||||
<meta name="twitter:image" content="https://knuthceramics.com/landingpage/artelier.png"/>
|
||||
|
||||
<!-- Static JSON-LD: Organization + LocalBusiness (visible to crawlers that don't execute JS) -->
|
||||
<script type="application/ld+json" data-seo="site">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": ["LocalBusiness", "ArtGallery"],
|
||||
"name": "KNUTH Ceramics",
|
||||
"alternateName": "Knuth Ceramics",
|
||||
"description": "Handcrafted ceramics by Claudia Knuth. Small-batch stoneware pottery inspired by the raw textures and colors of the Texas Gulf Coast in Corpus Christi, TX. German craft tradition meets coastal soul.",
|
||||
"url": "https://knuthceramics.com",
|
||||
"logo": "https://knuthceramics.com/landingpage/artelier.png",
|
||||
"image": "https://knuthceramics.com/landingpage/artelier.png",
|
||||
"email": "knuth.claudia@gmail.com",
|
||||
"telephone": "",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"addressLocality": "Corpus Christi",
|
||||
"addressRegion": "TX",
|
||||
"addressCountry": "US"
|
||||
},
|
||||
"geo": {
|
||||
"@type": "GeoCoordinates",
|
||||
"latitude": "27.8006",
|
||||
"longitude": "-97.3964"
|
||||
},
|
||||
"sameAs": [
|
||||
"https://www.instagram.com/knuth.ceramics"
|
||||
],
|
||||
"founder": {
|
||||
"@type": "Person",
|
||||
"name": "Claudia Knuth",
|
||||
"email": "knuth.claudia@gmail.com",
|
||||
"jobTitle": "Ceramic Artist & Potter"
|
||||
},
|
||||
"priceRange": "$$",
|
||||
"currenciesAccepted": "USD",
|
||||
"paymentAccepted": "Credit Card",
|
||||
"areaServed": [
|
||||
{
|
||||
"@type": "State",
|
||||
"name": "Texas"
|
||||
},
|
||||
{
|
||||
"@type": "Country",
|
||||
"name": "United States"
|
||||
}
|
||||
],
|
||||
"hasOfferCatalog": {
|
||||
"@type": "OfferCatalog",
|
||||
"name": "Handcrafted Ceramics",
|
||||
"itemListElement": [
|
||||
{"@type": "Offer", "itemOffered": {"@type": "Product", "name": "Handmade Ceramic Vases"}},
|
||||
{"@type": "Offer", "itemOffered": {"@type": "Product", "name": "Handmade Ceramic Bowls"}},
|
||||
{"@type": "Offer", "itemOffered": {"@type": "Product", "name": "Handmade Tableware & Dinnerware"}},
|
||||
{"@type": "Offer", "itemOffered": {"@type": "Product", "name": "Custom Ceramic Commissions"}}
|
||||
]
|
||||
},
|
||||
"knowsAbout": [
|
||||
"Wheel-thrown pottery",
|
||||
"Stoneware ceramics",
|
||||
"Handmade tableware",
|
||||
"Coastal-inspired ceramics",
|
||||
"Custom dinnerware"
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- WebSite schema for sitelinks search -->
|
||||
<script type="application/ld+json" data-seo="site">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
"name": "KNUTH Ceramics",
|
||||
"url": "https://knuthceramics.com",
|
||||
"description": "Handcrafted ceramics from Corpus Christi, Texas"
|
||||
}
|
||||
</script>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Manrope:wght@200;300;400;500&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#292524", // Warm Charcoal
|
||||
secondary: "#78716C", // Warm Stone
|
||||
"background-light": "#F5F4F0", // Soft Sand / Alabaster (Hero)
|
||||
"background-dark": "#1C1917", // Dark Warm Grey
|
||||
// New Sectional Colors
|
||||
"sage": "#D4D9D1", // Soft Sage Green
|
||||
"warm-grey": "#DAD7D4", // Warm Grey
|
||||
"clay-dark": "#33302D", // Deep Charcoal / Clay
|
||||
"terracotta-soft": "#E6DDD5", // Pale Ochre / Soft Terracotta
|
||||
"accent-sand": "#E7E5E4",
|
||||
"accent-warm": "#D6D3D1",
|
||||
"text-main": "#1C1917",
|
||||
"text-muted": "#57534E",
|
||||
},
|
||||
fontFamily: {
|
||||
display: ["Cormorant Garamond", "serif"],
|
||||
body: ["Manrope", "sans-serif"],
|
||||
},
|
||||
fontSize: {
|
||||
'10xl': '10rem',
|
||||
},
|
||||
spacing: {
|
||||
'128': '32rem',
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 300,
|
||||
'GRAD' 0,
|
||||
'opsz' 24
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.parallax-bg {
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #F5F4F0;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #D6D3D1;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #78716C;
|
||||
}
|
||||
</style>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"react-dom/": "https://esm.sh/react-dom@^19.2.3/",
|
||||
"react/": "https://esm.sh/react@^19.2.3/",
|
||||
"react": "https://esm.sh/react@^19.2.3"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="font-body bg-background-light dark:bg-background-dark text-text-main dark:text-gray-200 antialiased transition-colors duration-500 selection:bg-stone-200 selection:text-black">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,15 +1,24 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
if (!rootElement) {
|
||||
throw new Error("Could not find root element to mount to");
|
||||
}
|
||||
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
if (!rootElement) {
|
||||
throw new Error("Could not find root element to mount to");
|
||||
}
|
||||
|
||||
// Use hydrateRoot when react-snap has pre-rendered HTML, createRoot for normal dev/fallback
|
||||
if (rootElement.hasChildNodes()) {
|
||||
ReactDOM.hydrateRoot(
|
||||
rootElement,
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
} else {
|
||||
ReactDOM.createRoot(rootElement).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "KNUTH Ceramics",
|
||||
"description": "A high-fidelity recreation of the KNUTH Ceramics editorial e-commerce website featuring a minimalist design, custom typography, and responsive layout.",
|
||||
"requestFramePermissions": []
|
||||
}
|
||||
{
|
||||
"name": "KNUTH Ceramics",
|
||||
"description": "A high-fidelity recreation of the KNUTH Ceramics editorial e-commerce website featuring a minimalist design, custom typography, and responsive layout.",
|
||||
"requestFramePermissions": []
|
||||
}
|
||||
|
||||
5178
Pottery-website/package-lock.json
generated
5178
Pottery-website/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,24 +1,43 @@
|
||||
{
|
||||
"name": "ikkai-ceramics",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"framer-motion": "^12.26.0",
|
||||
"gsap": "^3.14.2",
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"react-router-dom": "^7.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.14.0",
|
||||
"@vitejs/plugin-react": "^5.0.0",
|
||||
"typescript": "~5.8.2",
|
||||
"vite": "^6.2.0"
|
||||
}
|
||||
}
|
||||
{
|
||||
"name": "ikkai-ceramics",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"postbuild": "react-snap",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"reactSnap": {
|
||||
"source": "dist",
|
||||
"include": [
|
||||
"/",
|
||||
"/collections",
|
||||
"/atelier",
|
||||
"/faq",
|
||||
"/editorial",
|
||||
"/contact",
|
||||
"/shipping",
|
||||
"/returns"
|
||||
],
|
||||
"headless": true,
|
||||
"waitFor": 800,
|
||||
"puppeteerArgs": ["--no-sandbox", "--disable-setuid-sandbox"],
|
||||
"inlineCss": false
|
||||
},
|
||||
"dependencies": {
|
||||
"framer-motion": "^12.26.0",
|
||||
"gsap": "^3.14.2",
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"react-router-dom": "^7.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.14.0",
|
||||
"@vitejs/plugin-react": "^5.0.0",
|
||||
"react-snap": "^1.23.0",
|
||||
"typescript": "~5.8.2",
|
||||
"vite": "^6.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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 "I am terrible at this" with "this part is still new for me." Replace "that failed" with "that taught me something." 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 & Orland - <em>Art and Fear</em></li>
|
||||
</ul>
|
||||
</div>
|
||||
</BlogPostLayout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MotivationInClay;
|
||||
|
||||
@@ -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'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;
|
||||
|
||||
@@ -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'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'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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 622 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 566 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 794 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 808 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 631 KiB |
BIN
Pottery-website/public/landingpage/1.png
Normal file
BIN
Pottery-website/public/landingpage/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
Pottery-website/public/landingpage/2.png
Normal file
BIN
Pottery-website/public/landingpage/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
Pottery-website/public/landingpage/3.png
Normal file
BIN
Pottery-website/public/landingpage/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
Pottery-website/public/landingpage/4.png
Normal file
BIN
Pottery-website/public/landingpage/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
Pottery-website/public/landingpage/artelier.png
Normal file
BIN
Pottery-website/public/landingpage/artelier.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 695 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 696 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 879 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 701 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
Pottery-website/public/product_images/care_guide_mid_v2.png
Normal file
BIN
Pottery-website/public/product_images/care_guide_mid_v2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
Pottery-website/public/product_images/kitchenware.png
Normal file
BIN
Pottery-website/public/product_images/kitchenware.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
Pottery-website/public/product_images/lighting.png
Normal file
BIN
Pottery-website/public/product_images/lighting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
Pottery-website/public/product_images/motivation_pottery_mid.png
Normal file
BIN
Pottery-website/public/product_images/motivation_pottery_mid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
Pottery-website/public/product_images/packaging_guide_mid.png
Normal file
BIN
Pottery-website/public/product_images/packaging_guide_mid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
Pottery-website/public/product_images/serving.png
Normal file
BIN
Pottery-website/public/product_images/serving.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
Pottery-website/public/product_images/tableware.png
Normal file
BIN
Pottery-website/public/product_images/tableware.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
Pottery-website/public/product_images/textiles.png
Normal file
BIN
Pottery-website/public/product_images/textiles.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
Pottery-website/public/product_images/vases.png
Normal file
BIN
Pottery-website/public/product_images/vases.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
37
Pottery-website/public/robots.txt
Normal file
37
Pottery-website/public/robots.txt
Normal file
@@ -0,0 +1,37 @@
|
||||
# KNUTH Ceramics — robots.txt
|
||||
# https://knuthceramics.com
|
||||
|
||||
User-agent: *
|
||||
Allow: /
|
||||
Disallow: /checkout
|
||||
Disallow: /mock-payment
|
||||
Disallow: /success
|
||||
Disallow: /admin
|
||||
|
||||
# AI Search Crawlers — explicitly allowed for citation visibility
|
||||
User-agent: GPTBot
|
||||
Allow: /
|
||||
|
||||
User-agent: ChatGPT-User
|
||||
Allow: /
|
||||
|
||||
User-agent: PerplexityBot
|
||||
Allow: /
|
||||
|
||||
User-agent: ClaudeBot
|
||||
Allow: /
|
||||
|
||||
User-agent: anthropic-ai
|
||||
Allow: /
|
||||
|
||||
User-agent: Google-Extended
|
||||
Allow: /
|
||||
|
||||
User-agent: Bingbot
|
||||
Allow: /
|
||||
|
||||
# Training-only crawlers — blocked (prevents scraping without citation benefit)
|
||||
User-agent: CCBot
|
||||
Disallow: /
|
||||
|
||||
Sitemap: https://knuthceramics.com/sitemap.xml
|
||||
91
Pottery-website/public/sitemap.xml
Normal file
91
Pottery-website/public/sitemap.xml
Normal file
@@ -0,0 +1,91 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
|
||||
<!-- Core pages -->
|
||||
<url>
|
||||
<loc>https://knuthceramics.com/</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://knuthceramics.com/collections</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://knuthceramics.com/atelier</loc>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://knuthceramics.com/editorial</loc>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://knuthceramics.com/faq</loc>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://knuthceramics.com/contact</loc>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://knuthceramics.com/shipping</loc>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.5</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://knuthceramics.com/returns</loc>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.5</priority>
|
||||
</url>
|
||||
|
||||
<!-- Product pages — Tableware -->
|
||||
<url><loc>https://knuthceramics.com/collections/coastal-grey-tableware-set</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://knuthceramics.com/collections/ceramic-place-setting</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://knuthceramics.com/collections/textured-floral-plates</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
|
||||
<!-- Product pages — Coffee Cups -->
|
||||
<url><loc>https://knuthceramics.com/collections/set-of-three-stoneware-cups</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://knuthceramics.com/collections/dog-mam-cup-teal</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://knuthceramics.com/collections/dog-mam-cup-blush</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://knuthceramics.com/collections/dark-stoneware-cups-amber-drip</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
|
||||
<!-- Product pages — Bowls -->
|
||||
<url><loc>https://knuthceramics.com/collections/dark-stoneware-bowl</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://knuthceramics.com/collections/pastel-bowl-collection</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://knuthceramics.com/collections/coastal-sunset-bowl-set</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://knuthceramics.com/collections/handmade-blush-bowl</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
|
||||
<!-- Product pages — Kitchenware -->
|
||||
<url><loc>https://knuthceramics.com/collections/dark-stoneware-vessel</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://knuthceramics.com/collections/studio-collection-mixed-pieces</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
|
||||
<!-- Product pages — Decoration -->
|
||||
<url><loc>https://knuthceramics.com/collections/handmade-ceramic-rose</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://knuthceramics.com/collections/hope-bowl-with-clay-tokens</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://knuthceramics.com/collections/ceramic-house-lanterns</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://knuthceramics.com/collections/flower-frog-vase-gulf-blue</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
<url><loc>https://knuthceramics.com/collections/miniature-ceramic-village</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
|
||||
|
||||
<!-- Journal / Editorial -->
|
||||
<url>
|
||||
<loc>https://knuthceramics.com/editorial/product-photography-for-small-businesses</loc>
|
||||
<changefreq>yearly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://knuthceramics.com/editorial/the-art-of-packaging</loc>
|
||||
<changefreq>yearly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://knuthceramics.com/editorial/finding-motivation-in-clay</loc>
|
||||
<changefreq>yearly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
</url>
|
||||
|
||||
</urlset>
|
||||
@@ -54,9 +54,9 @@ async function setup() {
|
||||
{
|
||||
title: 'Tableware',
|
||||
price: 185,
|
||||
image: '/collection-tableware.png',
|
||||
image: '/product_images/tableware.png',
|
||||
description: 'A complete hand-thrown tableware set for four. Finished in our signature matte white glaze with raw clay rims.',
|
||||
gallery: ['/collection-tableware.png', '/pottery-plates.png', '/ceramic-cups.png'],
|
||||
gallery: ['/product_images/tableware.png', '/product_images/textiles.png', '/product_images/kitchenware.png'],
|
||||
slug: 'tableware-set',
|
||||
number: '01',
|
||||
aspect_ratio: 'aspect-[3/4]'
|
||||
@@ -64,9 +64,9 @@ async function setup() {
|
||||
{
|
||||
title: 'Lighting',
|
||||
price: 240,
|
||||
image: '/collection-lighting.png',
|
||||
image: '/product_images/lighting.png',
|
||||
description: 'Sculptural ceramic pendant lights that bring warmth and texture to any space. Each piece is unique.',
|
||||
gallery: ['/collection-lighting.png', '/pottery-studio.png', '/collection-vases.png'],
|
||||
gallery: ['/product_images/lighting.png', '/landingpage/artelier.png', '/product_images/vases.png'],
|
||||
slug: 'ceramic-lighting',
|
||||
number: '04',
|
||||
aspect_ratio: 'aspect-[4/3]'
|
||||
@@ -74,9 +74,9 @@ async function setup() {
|
||||
{
|
||||
title: 'Vases',
|
||||
price: 95,
|
||||
image: '/collection-vases.png',
|
||||
image: '/product_images/vases.png',
|
||||
description: 'Organic forms inspired by the dunes of Padre Island. Perfect for dried stems or fresh bouquets.',
|
||||
gallery: ['/collection-vases.png', '/pottery-vase.png', '/collection-lighting.png'],
|
||||
gallery: ['/product_images/vases.png', '/product_images/vases.png', '/product_images/lighting.png'],
|
||||
slug: 'organic-vases',
|
||||
number: '02',
|
||||
aspect_ratio: 'aspect-square'
|
||||
|
||||
2722
Pottery-website/server/package-lock.json
generated
2722
Pottery-website/server/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,23 +1,23 @@
|
||||
{
|
||||
"name": "server",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node index.js",
|
||||
"dev": "nodemon index.js",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^17.2.3",
|
||||
"express": "^5.2.1",
|
||||
"pg": "^8.16.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.1.11"
|
||||
}
|
||||
{
|
||||
"name": "server",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node index.js",
|
||||
"dev": "nodemon index.js",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^17.2.3",
|
||||
"express": "^5.2.1",
|
||||
"pg": "^8.16.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.1.11"
|
||||
}
|
||||
}
|
||||
@@ -35,10 +35,11 @@ interface StoreContextType {
|
||||
addProduct: (product: CollectionItem) => void;
|
||||
updateProduct: (product: CollectionItem) => void;
|
||||
deleteProduct: (id: number) => void;
|
||||
addArticle: (article: JournalEntry) => void;
|
||||
updateArticle: (article: JournalEntry) => void;
|
||||
deleteArticle: (id: number) => void;
|
||||
}
|
||||
addArticle: (article: JournalEntry) => void;
|
||||
updateArticle: (article: JournalEntry) => void;
|
||||
deleteArticle: (id: number) => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
const StoreContext = createContext<StoreContextType | undefined>(undefined);
|
||||
|
||||
@@ -264,10 +265,10 @@ export const StoreProvider: React.FC<{ children: ReactNode }> = ({ children }) =
|
||||
};
|
||||
|
||||
return (
|
||||
<StoreContext.Provider value={{
|
||||
products,
|
||||
articles,
|
||||
cart,
|
||||
<StoreContext.Provider value={{
|
||||
products,
|
||||
articles,
|
||||
cart,
|
||||
orders,
|
||||
isCartOpen,
|
||||
setCartOpen,
|
||||
@@ -280,15 +281,16 @@ export const StoreProvider: React.FC<{ children: ReactNode }> = ({ children }) =
|
||||
updateOrderStatus,
|
||||
addProduct,
|
||||
updateProduct,
|
||||
deleteProduct,
|
||||
addArticle,
|
||||
updateArticle,
|
||||
deleteArticle
|
||||
}}>
|
||||
{isLoading ? <div className="fixed inset-0 bg-white z-50 flex items-center justify-center font-display text-xl animate-pulse">Loading Store...</div> : children}
|
||||
</StoreContext.Provider>
|
||||
);
|
||||
};
|
||||
deleteProduct,
|
||||
addArticle,
|
||||
updateArticle,
|
||||
deleteArticle,
|
||||
isLoading
|
||||
}}>
|
||||
{children}
|
||||
</StoreContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useStore = () => {
|
||||
const context = useContext(StoreContext);
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"types": [
|
||||
"node"
|
||||
],
|
||||
"moduleResolution": "bundler",
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"allowJs": true,
|
||||
"jsx": "react-jsx",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
},
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true
|
||||
}
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"types": [
|
||||
"node"
|
||||
],
|
||||
"moduleResolution": "bundler",
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"allowJs": true,
|
||||
"jsx": "react-jsx",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
},
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
@@ -1,38 +1,38 @@
|
||||
export interface NavItem {
|
||||
label: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
export interface CollectionItem {
|
||||
id: number;
|
||||
title: string;
|
||||
price: number;
|
||||
image: string;
|
||||
images: string[];
|
||||
description?: string;
|
||||
slug: string;
|
||||
number: string;
|
||||
aspectRatio: string;
|
||||
details?: string[];
|
||||
}
|
||||
|
||||
export interface JournalEntry {
|
||||
id: number;
|
||||
title: string;
|
||||
date: string;
|
||||
image: string;
|
||||
sections: {
|
||||
id: string;
|
||||
type: 'text' | 'image';
|
||||
content: string;
|
||||
}[];
|
||||
slug: string;
|
||||
category?: string;
|
||||
description?: string;
|
||||
isFeatured?: boolean;
|
||||
}
|
||||
|
||||
export interface FooterSection {
|
||||
title: string;
|
||||
links: NavItem[];
|
||||
export interface NavItem {
|
||||
label: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
export interface CollectionItem {
|
||||
id: number;
|
||||
title: string;
|
||||
price: number;
|
||||
image: string;
|
||||
images: string[];
|
||||
description?: string;
|
||||
slug: string;
|
||||
number: string;
|
||||
aspectRatio: string;
|
||||
details?: string[];
|
||||
}
|
||||
|
||||
export interface JournalEntry {
|
||||
id: number;
|
||||
title: string;
|
||||
date: string;
|
||||
image: string;
|
||||
sections: {
|
||||
id: string;
|
||||
type: 'text' | 'image';
|
||||
content: string;
|
||||
}[];
|
||||
slug: string;
|
||||
category?: string;
|
||||
description?: string;
|
||||
isFeatured?: boolean;
|
||||
}
|
||||
|
||||
export interface FooterSection {
|
||||
title: string;
|
||||
links: NavItem[];
|
||||
}
|
||||
@@ -1,23 +1,23 @@
|
||||
import path from 'path';
|
||||
import { defineConfig, loadEnv } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, '.', '');
|
||||
return {
|
||||
server: {
|
||||
port: 3000,
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
plugins: [react()],
|
||||
define: {
|
||||
'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
|
||||
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, '.'),
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
import path from 'path';
|
||||
import { defineConfig, loadEnv } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, '.', '');
|
||||
return {
|
||||
server: {
|
||||
port: 3000,
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
plugins: [react()],
|
||||
define: {
|
||||
'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
|
||||
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, '.'),
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
756
code.html
756
code.html
@@ -1,379 +1,379 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>IKKAI Ceramics - Editorial Collection</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Manrope:wght@200;300;400;500&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#292524", // Warm Charcoal
|
||||
secondary: "#78716C", // Warm Stone
|
||||
"background-light": "#F5F4F0", // Soft Sand / Alabaster (Hero)
|
||||
"background-dark": "#1C1917", // Dark Warm Grey
|
||||
// New Sectional Colors
|
||||
"sage": "#D4D9D1", // Soft Sage Green
|
||||
"warm-grey": "#DAD7D4", // Warm Grey
|
||||
"clay-dark": "#33302D", // Deep Charcoal / Clay
|
||||
"terracotta-soft": "#E6DDD5", // Pale Ochre / Soft Terracotta
|
||||
"accent-sand": "#E7E5E4",
|
||||
"accent-warm": "#D6D3D1",
|
||||
"text-main": "#1C1917",
|
||||
"text-muted": "#57534E",
|
||||
},
|
||||
fontFamily: {
|
||||
display: ["Cormorant Garamond", "serif"],
|
||||
body: ["Manrope", "sans-serif"],
|
||||
},
|
||||
fontSize: {
|
||||
'10xl': '10rem',
|
||||
},
|
||||
spacing: {
|
||||
'128': '32rem',
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 300,
|
||||
'GRAD' 0,
|
||||
'opsz' 24
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.parallax-bg {
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #F5F4F0;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #D6D3D1;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #78716C;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body bg-background-light dark:bg-background-dark text-text-main dark:text-gray-200 antialiased transition-colors duration-500 selection:bg-stone-200 selection:text-black">
|
||||
<div class="bg-primary dark:bg-black text-white text-[10px] tracking-[0.2em] text-center py-3 uppercase font-light">
|
||||
Complimentary shipping on orders over €200
|
||||
</div>
|
||||
<header class="fixed top-0 w-full z-50 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-stone-200/50 dark:border-stone-800/50 transition-all duration-300">
|
||||
<div class="max-w-[1920px] mx-auto px-6 md:px-12">
|
||||
<div class="flex justify-between items-center h-24">
|
||||
<div class="flex items-center md:hidden">
|
||||
<button class="text-text-main dark:text-white p-2" type="button">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<a class="font-display text-4xl md:text-5xl font-light tracking-widest uppercase text-text-main dark:text-white" href="#">
|
||||
IKKAI
|
||||
</a>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-16">
|
||||
<a class="text-xs uppercase tracking-[0.15em] text-text-muted dark:text-gray-400 hover:text-primary dark:hover:text-white transition-colors duration-300" href="#">Collections</a>
|
||||
<a class="text-xs uppercase tracking-[0.15em] text-text-muted dark:text-gray-400 hover:text-primary dark:hover:text-white transition-colors duration-300" href="#">Atelier</a>
|
||||
<a class="text-xs uppercase tracking-[0.15em] text-text-muted dark:text-gray-400 hover:text-primary dark:hover:text-white transition-colors duration-300" href="#">Editorial</a>
|
||||
</nav>
|
||||
<div class="flex items-center space-x-6 text-text-main dark:text-white">
|
||||
<button class="hover:text-text-muted transition-colors hidden sm:block">
|
||||
<span class="material-symbols-outlined text-xl font-light">search</span>
|
||||
</button>
|
||||
<a class="hover:text-text-muted transition-colors relative group" href="#">
|
||||
<span class="material-symbols-outlined text-xl font-light">shopping_bag</span>
|
||||
<span class="absolute -top-1 -right-2 bg-text-main dark:bg-white text-white dark:text-black text-[9px] w-4 h-4 flex items-center justify-center rounded-full opacity-0 group-hover:opacity-100 transition-opacity">2</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section class="relative min-h-screen pt-24 w-full flex flex-col md:flex-row items-center overflow-hidden bg-background-light dark:bg-background-dark">
|
||||
<div class="w-full md:w-5/12 h-full flex flex-col justify-center px-6 md:pl-20 md:pr-12 py-20 z-10">
|
||||
<span class="font-body text-xs uppercase tracking-[0.3em] text-text-muted mb-8 ml-1 block">New Collection 2024</span>
|
||||
<h1 class="font-display text-6xl md:text-7xl lg:text-8xl xl:text-9xl text-text-main dark:text-white font-thin leading-[0.9] mb-10">
|
||||
Form <br/><span class="italic pl-12 md:pl-20 text-text-muted">of</span> Earth
|
||||
</h1>
|
||||
<p class="font-body text-text-muted dark:text-gray-400 text-sm md:text-base font-light mb-12 max-w-sm leading-loose ml-1">
|
||||
Discover the imperfect perfection of hand-thrown stoneware. Pieces that bring silence and intention to your daily rituals.
|
||||
</p>
|
||||
<div class="ml-1">
|
||||
<a class="inline-block border-b border-text-main dark:border-white pb-1 text-text-main dark:text-white font-body text-xs uppercase tracking-[0.2em] hover:text-text-muted transition-colors duration-300" href="#">
|
||||
View The Collection
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-7/12 h-[60vh] md:h-screen relative">
|
||||
<div class="absolute inset-0 bg-stone-200 dark:bg-stone-800">
|
||||
<img alt="Minimalist ceramic vase with single branch" class="w-full h-full object-cover object-center brightness-95" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBvZAnP7XY-eGn5eL8LHgtIhpGoP7m9sPeESpuqYuRRomwq-VbkWnk3og2Zz3Y008nJOg3m1_HX59c-oDrJrtdXltWuBceYV0538LLAwbtslwnO_7BOuBw5y4v-4m9JtFou3lwflr2jbi_6zW8EZaxmGL6_EqVOkYct5HiXbw0JYTYhxPegtBET_-AeTOqJHvuDJGSzRAImHVh74ucDQgnl6QzlQZ17IKZU8o-1SdfLMvL8EvTb-jAeb7wv-wHpLSPbHK4XwYiVszk"/>
|
||||
</div>
|
||||
<div class="absolute bottom-10 left-10 md:left-auto md:right-20 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur p-6 max-w-xs hidden md:block shadow-sm">
|
||||
<p class="font-display italic text-xl text-text-main dark:text-gray-200">"In emptiness, there is fullness."</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-32 md:py-48 bg-sage dark:bg-stone-900 overflow-hidden relative transition-colors duration-500">
|
||||
<div class="max-w-[1800px] mx-auto px-6">
|
||||
<div class="relative flex flex-col md:block">
|
||||
<div class="hidden md:block absolute -top-24 left-10 z-0 select-none opacity-[0.03] dark:opacity-[0.05] pointer-events-none">
|
||||
<span class="font-display text-[20rem] leading-none text-black dark:text-white">CRAFT</span>
|
||||
</div>
|
||||
<div class="w-full md:w-3/5 h-[600px] md:h-[800px] ml-auto relative z-10 parallax-bg shadow-2xl" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAwcT6-AV8qpFzjZnVg9E60XgAEjN8kSfvJhBviAQySkGqDm950ofKMSXpKUvN44YobZIMvBeV-QcLz_xE7hQKdYdSIjoPasavbYAMbtqN4XySDFYqxgVq34e2R0BJJqX0WAzSFTcTd1WbnDjhlb8Vr8NyVtoB-09ArCsO6ZwnpvplPNHWwqzA0pebI6c32n8BPTMwvL5MuqUV8T5-tEw6MiNVyXJKGX-EIAxboK60MBn0tdYRBneueLDgcjvJ-s7R6yVBe1H4j1kc');">
|
||||
</div>
|
||||
<div class="relative z-20 mt-[-100px] md:mt-0 md:absolute md:top-1/2 md:left-20 md:-translate-y-1/2 bg-white dark:bg-stone-900 p-12 md:p-20 shadow-xl max-w-xl mx-auto md:mx-0">
|
||||
<span class="block w-12 h-[1px] bg-text-main mb-8"></span>
|
||||
<h2 class="font-display text-4xl md:text-5xl font-light mb-8 text-text-main dark:text-white leading-tight">
|
||||
The Art of <br/><i class="font-thin">Slow Living</i>
|
||||
</h2>
|
||||
<p class="font-body font-light text-text-muted dark:text-gray-400 mb-10 leading-loose text-sm">
|
||||
We believe in the beauty of handmade objects. Our collection features a curated selection of ceramics designed to elevate the everyday. From sturdy mugs for your morning coffee to elegant vases that breathe life into a room, each piece is crafted with patience and intention.
|
||||
</p>
|
||||
<a class="group inline-flex items-center text-xs uppercase tracking-[0.2em] text-text-main dark:text-white font-medium" href="#">
|
||||
Read Our Story <span class="ml-2 group-hover:translate-x-1 transition-transform">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-32 bg-warm-grey dark:bg-[#141210] transition-colors duration-500">
|
||||
<div class="max-w-[1920px] mx-auto px-6 md:px-12">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-20 md:mb-32 px-4">
|
||||
<h2 class="font-display text-5xl md:text-7xl font-thin text-text-main dark:text-white">Curated <span class="italic text-text-muted">Editions</span></h2>
|
||||
<p class="hidden md:block font-body text-sm text-text-muted max-w-xs leading-relaxed text-right">
|
||||
Explore our seasonal collections, fired in small batches.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-16">
|
||||
<div class="flex flex-col space-y-16 md:space-y-32">
|
||||
<a class="group block cursor-pointer" href="#">
|
||||
<div class="relative overflow-hidden aspect-[3/4] mb-6">
|
||||
<img alt="Tableware collection" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEMG0U2yN-srAgpA4aSXewbFyRyFWnm181AquAJCRzLwgPHNHbs-fxFKQ8DMbozvyRU-s0LUPRKoZtht1-Lp3RDOfKE3jCrAD_A4tl9BXwHGUcAPWj0jBq3C9plosFkHIzYUDBtbq_Azg3RK2csufB9tH_tIJhMW--_IIfZeAltM9sgTD5wAPRPIUyV-0iemF2eWLZnx0IfTLZSkN930lHZ6aHxWChqHqoVMUTdYxqHPt0tpUW3C082em7_4fuoRpWdf4_flYYoO4"/>
|
||||
<div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors duration-500"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-t border-gray-400/50 dark:border-gray-800 pt-4">
|
||||
<h3 class="font-display text-3xl font-light text-text-main dark:text-white group-hover:italic transition-all">Tableware</h3>
|
||||
<span class="text-xs uppercase tracking-widest text-text-muted">01</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="group block cursor-pointer" href="#">
|
||||
<div class="relative overflow-hidden aspect-[4/3] mb-6">
|
||||
<img alt="Lamp Shades collection" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAz5MOY7i5TxXxrGVaW7nItrMPEhwnNz5VkQ7BwzWHUBMfV3j8A42PekcfAMOXu7nP2pX7m-Trx0lBWwFq4RuDfJMghT-DwyJAP4nT2sTCgX_WosvcMQfj5koFU-CLX7CMboAxAPXWUWe3Q8xU4Zl0kysFKLG34fR_GaRlN0diovvLg1SQ6fLq2dMRg2o523onwafjD0f6XBDxbtWBsnfIp_2U1_0zFahOkW2JyyJhIZFVCTiP61CY2rkwqtmupBjzzY7iKcMtszhE"/>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-t border-gray-400/50 dark:border-gray-800 pt-4">
|
||||
<h3 class="font-display text-3xl font-light text-text-main dark:text-white group-hover:italic transition-all">Lighting</h3>
|
||||
<span class="text-xs uppercase tracking-widest text-text-muted">04</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-16 md:space-y-32 md:pt-32">
|
||||
<a class="group block cursor-pointer" href="#">
|
||||
<div class="relative overflow-hidden aspect-square mb-6">
|
||||
<img alt="Home Decor collection" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBV8jgjafGxXCrSmiIUCN5Zwqv0cl-Ivw5hjQoa5ejFBx3a0C7zgeI_pywBpee7f0scHB_zrYQbI0zryX0P_F2w_xefVbl_8vkvSRMPhsqrs_z9u16FlDVgmXX9_PxhC8oRWZmGbtHsvXhfDEtvAi94tBJeQYTdG2a-XJ7gB0F8GLyvVl7_NHu9iB_TyVhbKIOv354VUmcNAehnGfuK0fTtAjQr0qxaHt8CD9pLJvfTeVJZF2VPRgToY5dN4eqRTRJrQPuLIW2aP9k"/>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-t border-gray-400/50 dark:border-gray-800 pt-4">
|
||||
<h3 class="font-display text-3xl font-light text-text-main dark:text-white group-hover:italic transition-all">Vases</h3>
|
||||
<span class="text-xs uppercase tracking-widest text-text-muted">02</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="group block cursor-pointer" href="#">
|
||||
<div class="relative overflow-hidden aspect-[3/4] mb-6">
|
||||
<img alt="Accessories collection" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDlTM_GLiQWReZzrfgwPZXJ2OjRaelPwrF2URWBLiqQjOdyxy0onUB9FoX4kcIzTnQSRIfRZsg6Dt5BS6j5bE6SYhdkZ60HAOZJNybnBvZqfICwldKNMiTg9-fm4X1otiHO8vO_Hr-DuwsaE818YSDiW2vyVH947T8peRurHz-sYZu9gJgq9R4D3BtLrdbf9R6MaYmqGZ47NAwHV1BHicOSMFGxfhK-p5exDM963E8qBTwl3PEXcRdnAq6-B-ada0XJ3jz8iA4Cavo"/>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-t border-gray-400/50 dark:border-gray-800 pt-4">
|
||||
<h3 class="font-display text-3xl font-light text-text-main dark:text-white group-hover:italic transition-all">Serving</h3>
|
||||
<span class="text-xs uppercase tracking-widest text-text-muted">05</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-16 md:space-y-32 md:pt-16 lg:pt-0">
|
||||
<a class="group block cursor-pointer" href="#">
|
||||
<div class="relative overflow-hidden aspect-[3/5] mb-6">
|
||||
<img alt="Matcha Bowls collection" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD_jVXnz1bLom_g2aBEGMY2fmAe2vuv4pwP_NdhGGqtKhcIr36eQ-BQ5d3cMXXjIDURtvBt9juNVX8kJG1T404125GGwEoQmMCD4IawdGY7hDBeByI8PG9Z8Ioc-skCG9X5bdU9-O4PS6KBglPV8fnkyG6FjPkN0RdGvHWMZQ6iInrJhOqiqX3r-6YvmIpGSi5FoXyFnmcfLnf1faHq8kWIMuv0WgLHSlOFlB5MeIJAQwvuk5Gbk4drXCt2heYy5WRWIdutVdiQOa4"/>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-t border-gray-400/50 dark:border-gray-800 pt-4">
|
||||
<h3 class="font-display text-3xl font-light text-text-main dark:text-white group-hover:italic transition-all">Kitchenware</h3>
|
||||
<span class="text-xs uppercase tracking-widest text-text-muted">03</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="group block cursor-pointer" href="#">
|
||||
<div class="relative overflow-hidden aspect-square mb-6">
|
||||
<img alt="Furoshiki collection" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAI1p48nya5N3xLUE8fx6a0Cwniu_QuS5yo-wq6PE1W77n0orf57QyF1g4426uqGtiv02HHHXd40Sq81usdXnpOqvLiviW_gSGdtlorcOpaSl6R8k23cG_I-5v4pPVJiaTPqrhK1U3VtxLX5Bpj8x7NOtZT4K1jtI4NHt-S1A0GvBjM7jCfH_0y8Xw8L_R5br8I8_KmdbC7ACaNd4OAZUpJdt4UUANVy664jG4m9dZshHpa8Og4aFzZ1CRxmQExSVEzc0CKZ9GSLB0"/>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-t border-gray-400/50 dark:border-gray-800 pt-4">
|
||||
<h3 class="font-display text-3xl font-light text-text-main dark:text-white group-hover:italic transition-all">Textiles</h3>
|
||||
<span class="text-xs uppercase tracking-widest text-text-muted">06</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-32 bg-clay-dark dark:bg-black border-y border-stone-800/50 transition-colors duration-500">
|
||||
<div class="max-w-5xl mx-auto px-6 text-center">
|
||||
<span class="material-symbols-outlined text-4xl mb-8 text-stone-500 font-thin">format_quote</span>
|
||||
<h3 class="font-display text-3xl md:text-5xl font-thin leading-snug text-stone-100 dark:text-stone-200 mb-10 italic">
|
||||
"My pottery is designed to be both beautiful and practical. From minimalist vases to durable dinner plates, each piece has its own character."
|
||||
</h3>
|
||||
<p class="font-body text-xs uppercase tracking-[0.2em] text-stone-400">
|
||||
Anonymous — Verified Collector
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="relative py-32 bg-terracotta-soft dark:bg-black overflow-hidden transition-colors duration-500">
|
||||
<div class="absolute inset-0 z-0 mix-blend-multiply opacity-30">
|
||||
<img alt="Atmospheric studio background" class="w-full h-full object-cover blur-3xl scale-110 grayscale" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAipMlYLTcRT_hdc3VePfFIlrA56VzZ5G2y3gcRfmIZMERwGFKq2N19Gqo6mw7uZowXmjl2eJ89TI3Mcud2OyOfadO3mPVF_v0sI0OHupqM49WEFcWzH-Wbu3DL6bQ46F2Y8SIAk-NUQy8psjcIdBKRrM8fqdn4eOPANYTXpVxkLMAm4R0Axy4aEKNdmj917ZKKTxvXB-J8nGlITJkJ-ua7XcZOwGnfK5ttzyWW35A0oOSffCf972gmpV27wrVQgYJNLS7UyDdyQIQ"/>
|
||||
</div>
|
||||
<div class="max-w-[1920px] mx-auto px-6 md:px-12 relative z-10">
|
||||
<div class="flex justify-between items-baseline mb-20 border-b border-text-main/20 dark:border-gray-800 pb-6">
|
||||
<h2 class="font-display text-6xl font-thin text-text-main dark:text-white">The <span class="italic">Journal</span></h2>
|
||||
<a class="text-xs uppercase tracking-[0.2em] text-text-main dark:text-white hover:text-text-muted transition-colors" href="#">View Archive</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||
<article class="group cursor-pointer">
|
||||
<div class="relative h-[500px] overflow-hidden mb-8 shadow-md">
|
||||
<img alt="Pottery workshop" class="w-full h-full object-cover transition-transform duration-[1.5s] group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAipMlYLTcRT_hdc3VePfFIlrA56VzZ5G2y3gcRfmIZMERwGFKq2N19Gqo6mw7uZowXmjl2eJ89TI3Mcud2OyOfadO3mPVF_v0sI0OHupqM49WEFcWzH-Wbu3DL6bQ46F2Y8SIAk-NUQy8psjcIdBKRrM8fqdn4eOPANYTXpVxkLMAm4R0Axy4aEKNdmj917ZKKTxvXB-J8nGlITJkJ-ua7XcZOwGnfK5ttzyWW35A0oOSffCf972gmpV27wrVQgYJNLS7UyDdyQIQ"/>
|
||||
<div class="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors duration-500"></div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center space-x-4 mb-4">
|
||||
<span class="text-[10px] uppercase tracking-[0.2em] text-text-muted border border-text-muted/30 px-2 py-1 rounded-full">Studio</span>
|
||||
<span class="text-[10px] uppercase tracking-[0.2em] text-text-muted">Oct 03</span>
|
||||
</div>
|
||||
<h3 class="font-display text-3xl text-text-main dark:text-white mb-4 leading-tight group-hover:underline decoration-1 underline-offset-4">Product Photography for Small Businesses</h3>
|
||||
<p class="text-sm font-light text-text-muted dark:text-gray-400 leading-loose max-w-sm">
|
||||
Learning that beautiful products aren't enough on their own — you also need beautiful photos to tell the story.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="group cursor-pointer lg:mt-20">
|
||||
<div class="relative h-[500px] overflow-hidden mb-8 shadow-md">
|
||||
<img alt="Packing ceramics" class="w-full h-full object-cover transition-transform duration-[1.5s] group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAaWGnX_NYT3S_lOflL2NJZGbWge4AAkvra4ymvF8ag-c1UKsOAIB-rsLVQXW5xIlPZipDiK8-ysPyv22xdgsvzs4EOXSSCcrT4Lb2YCe0u5orxRaZEA5TgxeoKq15zaWKSlmnHyPGjPd_7yglpfO13eZmbU5KaxFJ1KGO0UAxoO9BpsyCYgbgINMoSz3epGe5ZdwBWRH-5KCzjoLuXimFTLcd5bqg9T1YofTxgy2hWBMJzKkafyEniq8dP6hMmfNCLVcCHHHx0hRU"/>
|
||||
<div class="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors duration-500"></div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center space-x-4 mb-4">
|
||||
<span class="text-[10px] uppercase tracking-[0.2em] text-text-muted border border-text-muted/30 px-2 py-1 rounded-full">Guide</span>
|
||||
<span class="text-[10px] uppercase tracking-[0.2em] text-text-muted">Jul 15</span>
|
||||
</div>
|
||||
<h3 class="font-display text-3xl text-text-main dark:text-white mb-4 leading-tight group-hover:underline decoration-1 underline-offset-4">The Art of Packaging</h3>
|
||||
<p class="text-sm font-light text-text-muted dark:text-gray-400 leading-loose max-w-sm">
|
||||
A practical guide for potters who want to package and send their handmade ceramics with care and confidence.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="group cursor-pointer">
|
||||
<div class="relative h-[500px] overflow-hidden mb-8 shadow-md">
|
||||
<img alt="Pottery tools" class="w-full h-full object-cover transition-transform duration-[1.5s] group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB8NOE5fGfN4d87cbcB27_Sh-nrlZlqxsTlYKbCZk98SoL-gHsPSWFNuxd1DxBq0g8Qysh0RBZ_btu-_WaH68UjV8SXPUalyxREvUqao4oXmra--pWAsaooWwKvWCzReYZ8kj7G-KIYIAo5mqudzB8n9C6-HVTNPPx9QgZHr_YsojMxlmmVcQ5bqk7-Lp0KtSAiVIPD2-1UE1dMGnkVSLUXKdgA65JIh8M3TtNkaJTGONuFKoTERrYOWe7u2BILnqyukTzlNcvK7Sc"/>
|
||||
<div class="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors duration-500"></div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center space-x-4 mb-4">
|
||||
<span class="text-[10px] uppercase tracking-[0.2em] text-text-muted border border-text-muted/30 px-2 py-1 rounded-full">Wellness</span>
|
||||
<span class="text-[10px] uppercase tracking-[0.2em] text-text-muted">Jun 11</span>
|
||||
</div>
|
||||
<h3 class="font-display text-3xl text-text-main dark:text-white mb-4 leading-tight group-hover:underline decoration-1 underline-offset-4">Finding Motivation in Clay</h3>
|
||||
<p class="text-sm font-light text-text-muted dark:text-gray-400 leading-loose max-w-sm">
|
||||
10 gentle, practical tips to help potters find motivation during slow or uncertain moments in the creative process.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-20 bg-white dark:bg-background-dark">
|
||||
<div class="max-w-[1920px] mx-auto px-4">
|
||||
<div class="flex justify-between items-center mb-8 px-2">
|
||||
<h4 class="font-display text-2xl text-text-main dark:text-white">@ikkai_ceramics</h4>
|
||||
<a class="text-xs uppercase tracking-widest text-text-muted hover:text-primary transition-colors" href="#">Follow</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-6 gap-px bg-stone-100 dark:bg-stone-800 border border-stone-100 dark:border-stone-800">
|
||||
<div class="aspect-square relative group overflow-hidden">
|
||||
<img alt="Gallery image 1" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale hover:grayscale-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGY1PXPxlhIz9qU-XbDrdJjrRnX1pFo8YpH3HM1Crq9C6iVApx-qFkpjTj_MDOXXrX4jprk69hA0fmwR2EdURQyKaBLDAdkIE3vLKCyTRMhgyGerlpsy6_KZkZs-9hiaoWZPBFzvBIGWZ0i7sfbbtkQdBGJfK30yftDOPjI1NJfzBtsKNMbYOnXfmm-6u7uiovrM54rtRNWzsxmcvhRKQebZIUrERvGGYsUvUVARYEzSs4thyJnMYROk0LmoCrJ03_QjDvLzy_zjw"/>
|
||||
</div>
|
||||
<div class="aspect-square relative group overflow-hidden">
|
||||
<img alt="Gallery image 2" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale hover:grayscale-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLafDd9RRuru_JkGfpxms6q-dFwzNrjKIazUT33dREB4eWcGSGtNYEKzTCgaRJYIGNvhE1z1tYSrr3ZMrMSQs_3oIJz2hrlYYq49EJaI8VD2YrM9akd50BsF3voaGW1yZFHM5S36ZbrCx3A8Id2wkDnlJ7TnUYdo76-TErMa6h94HxQYBSwLQESFBrPfDEi5Qf6MDfE-6i3HJNIYGS79zemso4U8mMRi-HA17y4ilifDoI2B4vc3ROE3HFbTVP6JxJxjklnlbMt28"/>
|
||||
</div>
|
||||
<div class="aspect-square relative group overflow-hidden">
|
||||
<img alt="Gallery image 3" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale hover:grayscale-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGyeyp1BDBjdasLDmyEWUfA0eeSJ8qMmrlPS0IgsyNdW_-0NEbFZhO72z3kox8ys3T2PZOprxzbnDwBQfjdwLiISmT3eHil4LQgRNt35AucCh1b-BFmUjXB9vuQ-JAFY122ABF9AmGWIhKCH7HHJj-Pibiz4NlcEGf_-59GAtt_y4g6OzzZpBKzfZAXd2_h-2I3ZbMaNDYEVK9dZSwVSrUNxQEFRFLUoqoNm8_VqgfpwpXmGwSmEZfy-lfjnXDBF1AS3ipD7JR04E"/>
|
||||
</div>
|
||||
<div class="aspect-square relative group overflow-hidden">
|
||||
<img alt="Gallery image 4" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale hover:grayscale-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBxM-yqwsAyWN-4sNS6FCNyry1QP6_yKpP7av1uPQTEArxL29_Ir1vfmlNJ50UMMYBRXHwSYUS9dwgO9hsccM8QKk0DybH5Hsa0k1oA1PSD2fIButt6JbICrrLhqC51S37PtN7vpPxtlqFPXQyaGEQl8r8eZbbROIqtUCGdWks_prak9UNTbeph0gHDa0Xlw8HtXRSgQCqONjRuWVWC9ynnqpqXXgLIeCvCVBUiQuXxCnhLsMDWOcw8sjaVSFKo1tRi9IUFRaXEGu0"/>
|
||||
</div>
|
||||
<div class="aspect-square relative group overflow-hidden">
|
||||
<img alt="Gallery image 5" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale hover:grayscale-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDD63SnScOyJcWSHLRucaOZ46wQpGV0c-ljb4DvnaURof8aTmuMD75dT1UUKXzDwWBUKGqu3nNlUUOXnEfjLE8pwAdvRKHhunOunZW5qbw35eY1vH14HXGqQSe90m7RUxku70QRlVS338tKQEAJ9TasOSte56oSEmKzUC0q9VF9P8GTl-0R8CcmvQ9hfwRIe34s2QUEwE96LYTREHdWZI6RRZojG8MTeV1qGFgFgjwEqnYbIGCFdW5TFMyTvkuPd1R0IBNfWZzhJkM"/>
|
||||
</div>
|
||||
<div class="aspect-square relative group overflow-hidden">
|
||||
<img alt="Gallery image 6" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale hover:grayscale-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBQAOyWAgHl3Uf9zP9-cmp1ZPrAw5wi7GP1div8GHtarOvO68Kn8069PqiCFYs91kLD1YWcb9tk3y9Fm12AmMfRpIIvNTvAWxkZ7xL0BWM_UZ5BPmvSVuRDXKcvg5_qQVXJOy5ub3Yu3oBqKhR617MhwY4F_Am0cNClmSgPaYHALRi-CB3_hlLdgXQhI0dP5j7yNqlrTxHHv34vRQWvg2_Htkum0XcSQHuK9-A89-Cgcz5-V-FzCjxKPzAROoN0OKL9YxjRXHkwQjk"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="bg-primary dark:bg-black text-stone-400 py-24 px-6 md:px-12">
|
||||
<div class="max-w-[1920px] mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-12 border-b border-stone-700 pb-20 mb-12">
|
||||
<div class="md:col-span-4">
|
||||
<a class="font-display text-4xl text-white block mb-8" href="#">IKKAI</a>
|
||||
<p class="font-body text-sm font-light leading-loose max-w-sm mb-8">
|
||||
Handcrafted ceramics for the modern home. Created with intention, fired with patience, and delivered with care.
|
||||
</p>
|
||||
<form class="flex border-b border-stone-600 pb-2 max-w-xs">
|
||||
<input class="bg-transparent border-none text-white placeholder-stone-500 focus:ring-0 text-sm w-full p-0" placeholder="Join our newsletter" type="email"/>
|
||||
<button class="text-xs uppercase tracking-widest text-white hover:text-stone-300" type="submit">Subscribe</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="md:col-span-2 md:col-start-7">
|
||||
<h4 class="text-white text-xs font-bold uppercase tracking-widest mb-8">Shop</h4>
|
||||
<ul class="space-y-4 text-xs font-light tracking-widest uppercase">
|
||||
<li><a class="hover:text-white transition-colors" href="#">All Ceramics</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">New Arrivals</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Best Sellers</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Gift Cards</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<h4 class="text-white text-xs font-bold uppercase tracking-widest mb-8">Company</h4>
|
||||
<ul class="space-y-4 text-xs font-light tracking-widest uppercase">
|
||||
<li><a class="hover:text-white transition-colors" href="#">Our Story</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Sustainability</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Careers</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Press</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<h4 class="text-white text-xs font-bold uppercase tracking-widest mb-8">Support</h4>
|
||||
<ul class="space-y-4 text-xs font-light tracking-widest uppercase">
|
||||
<li><a class="hover:text-white transition-colors" href="#">FAQ</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Shipping</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Returns</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row justify-between items-center text-[10px] tracking-widest uppercase">
|
||||
<p>© 2024 IKKAI Ceramics. All rights reserved.</p>
|
||||
<div class="flex space-x-6 mt-4 md:mt-0">
|
||||
<a class="hover:text-white" href="#">Privacy</a>
|
||||
<a class="hover:text-white" href="#">Terms</a>
|
||||
<a class="hover:text-white" href="#">Cookies</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>IKKAI Ceramics - Editorial Collection</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Manrope:wght@200;300;400;500&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#292524", // Warm Charcoal
|
||||
secondary: "#78716C", // Warm Stone
|
||||
"background-light": "#F5F4F0", // Soft Sand / Alabaster (Hero)
|
||||
"background-dark": "#1C1917", // Dark Warm Grey
|
||||
// New Sectional Colors
|
||||
"sage": "#D4D9D1", // Soft Sage Green
|
||||
"warm-grey": "#DAD7D4", // Warm Grey
|
||||
"clay-dark": "#33302D", // Deep Charcoal / Clay
|
||||
"terracotta-soft": "#E6DDD5", // Pale Ochre / Soft Terracotta
|
||||
"accent-sand": "#E7E5E4",
|
||||
"accent-warm": "#D6D3D1",
|
||||
"text-main": "#1C1917",
|
||||
"text-muted": "#57534E",
|
||||
},
|
||||
fontFamily: {
|
||||
display: ["Cormorant Garamond", "serif"],
|
||||
body: ["Manrope", "sans-serif"],
|
||||
},
|
||||
fontSize: {
|
||||
'10xl': '10rem',
|
||||
},
|
||||
spacing: {
|
||||
'128': '32rem',
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 300,
|
||||
'GRAD' 0,
|
||||
'opsz' 24
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.parallax-bg {
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #F5F4F0;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #D6D3D1;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #78716C;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body bg-background-light dark:bg-background-dark text-text-main dark:text-gray-200 antialiased transition-colors duration-500 selection:bg-stone-200 selection:text-black">
|
||||
<div class="bg-primary dark:bg-black text-white text-[10px] tracking-[0.2em] text-center py-3 uppercase font-light">
|
||||
Complimentary shipping on orders over €200
|
||||
</div>
|
||||
<header class="fixed top-0 w-full z-50 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-stone-200/50 dark:border-stone-800/50 transition-all duration-300">
|
||||
<div class="max-w-[1920px] mx-auto px-6 md:px-12">
|
||||
<div class="flex justify-between items-center h-24">
|
||||
<div class="flex items-center md:hidden">
|
||||
<button class="text-text-main dark:text-white p-2" type="button">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<a class="font-display text-4xl md:text-5xl font-light tracking-widest uppercase text-text-main dark:text-white" href="#">
|
||||
IKKAI
|
||||
</a>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-16">
|
||||
<a class="text-xs uppercase tracking-[0.15em] text-text-muted dark:text-gray-400 hover:text-primary dark:hover:text-white transition-colors duration-300" href="#">Collections</a>
|
||||
<a class="text-xs uppercase tracking-[0.15em] text-text-muted dark:text-gray-400 hover:text-primary dark:hover:text-white transition-colors duration-300" href="#">Atelier</a>
|
||||
<a class="text-xs uppercase tracking-[0.15em] text-text-muted dark:text-gray-400 hover:text-primary dark:hover:text-white transition-colors duration-300" href="#">Editorial</a>
|
||||
</nav>
|
||||
<div class="flex items-center space-x-6 text-text-main dark:text-white">
|
||||
<button class="hover:text-text-muted transition-colors hidden sm:block">
|
||||
<span class="material-symbols-outlined text-xl font-light">search</span>
|
||||
</button>
|
||||
<a class="hover:text-text-muted transition-colors relative group" href="#">
|
||||
<span class="material-symbols-outlined text-xl font-light">shopping_bag</span>
|
||||
<span class="absolute -top-1 -right-2 bg-text-main dark:bg-white text-white dark:text-black text-[9px] w-4 h-4 flex items-center justify-center rounded-full opacity-0 group-hover:opacity-100 transition-opacity">2</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section class="relative min-h-screen pt-24 w-full flex flex-col md:flex-row items-center overflow-hidden bg-background-light dark:bg-background-dark">
|
||||
<div class="w-full md:w-5/12 h-full flex flex-col justify-center px-6 md:pl-20 md:pr-12 py-20 z-10">
|
||||
<span class="font-body text-xs uppercase tracking-[0.3em] text-text-muted mb-8 ml-1 block">New Collection 2024</span>
|
||||
<h1 class="font-display text-6xl md:text-7xl lg:text-8xl xl:text-9xl text-text-main dark:text-white font-thin leading-[0.9] mb-10">
|
||||
Form <br/><span class="italic pl-12 md:pl-20 text-text-muted">of</span> Earth
|
||||
</h1>
|
||||
<p class="font-body text-text-muted dark:text-gray-400 text-sm md:text-base font-light mb-12 max-w-sm leading-loose ml-1">
|
||||
Discover the imperfect perfection of hand-thrown stoneware. Pieces that bring silence and intention to your daily rituals.
|
||||
</p>
|
||||
<div class="ml-1">
|
||||
<a class="inline-block border-b border-text-main dark:border-white pb-1 text-text-main dark:text-white font-body text-xs uppercase tracking-[0.2em] hover:text-text-muted transition-colors duration-300" href="#">
|
||||
View The Collection
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-7/12 h-[60vh] md:h-screen relative">
|
||||
<div class="absolute inset-0 bg-stone-200 dark:bg-stone-800">
|
||||
<img alt="Minimalist ceramic vase with single branch" class="w-full h-full object-cover object-center brightness-95" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBvZAnP7XY-eGn5eL8LHgtIhpGoP7m9sPeESpuqYuRRomwq-VbkWnk3og2Zz3Y008nJOg3m1_HX59c-oDrJrtdXltWuBceYV0538LLAwbtslwnO_7BOuBw5y4v-4m9JtFou3lwflr2jbi_6zW8EZaxmGL6_EqVOkYct5HiXbw0JYTYhxPegtBET_-AeTOqJHvuDJGSzRAImHVh74ucDQgnl6QzlQZ17IKZU8o-1SdfLMvL8EvTb-jAeb7wv-wHpLSPbHK4XwYiVszk"/>
|
||||
</div>
|
||||
<div class="absolute bottom-10 left-10 md:left-auto md:right-20 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur p-6 max-w-xs hidden md:block shadow-sm">
|
||||
<p class="font-display italic text-xl text-text-main dark:text-gray-200">"In emptiness, there is fullness."</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-32 md:py-48 bg-sage dark:bg-stone-900 overflow-hidden relative transition-colors duration-500">
|
||||
<div class="max-w-[1800px] mx-auto px-6">
|
||||
<div class="relative flex flex-col md:block">
|
||||
<div class="hidden md:block absolute -top-24 left-10 z-0 select-none opacity-[0.03] dark:opacity-[0.05] pointer-events-none">
|
||||
<span class="font-display text-[20rem] leading-none text-black dark:text-white">CRAFT</span>
|
||||
</div>
|
||||
<div class="w-full md:w-3/5 h-[600px] md:h-[800px] ml-auto relative z-10 parallax-bg shadow-2xl" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAwcT6-AV8qpFzjZnVg9E60XgAEjN8kSfvJhBviAQySkGqDm950ofKMSXpKUvN44YobZIMvBeV-QcLz_xE7hQKdYdSIjoPasavbYAMbtqN4XySDFYqxgVq34e2R0BJJqX0WAzSFTcTd1WbnDjhlb8Vr8NyVtoB-09ArCsO6ZwnpvplPNHWwqzA0pebI6c32n8BPTMwvL5MuqUV8T5-tEw6MiNVyXJKGX-EIAxboK60MBn0tdYRBneueLDgcjvJ-s7R6yVBe1H4j1kc');">
|
||||
</div>
|
||||
<div class="relative z-20 mt-[-100px] md:mt-0 md:absolute md:top-1/2 md:left-20 md:-translate-y-1/2 bg-white dark:bg-stone-900 p-12 md:p-20 shadow-xl max-w-xl mx-auto md:mx-0">
|
||||
<span class="block w-12 h-[1px] bg-text-main mb-8"></span>
|
||||
<h2 class="font-display text-4xl md:text-5xl font-light mb-8 text-text-main dark:text-white leading-tight">
|
||||
The Art of <br/><i class="font-thin">Slow Living</i>
|
||||
</h2>
|
||||
<p class="font-body font-light text-text-muted dark:text-gray-400 mb-10 leading-loose text-sm">
|
||||
We believe in the beauty of handmade objects. Our collection features a curated selection of ceramics designed to elevate the everyday. From sturdy mugs for your morning coffee to elegant vases that breathe life into a room, each piece is crafted with patience and intention.
|
||||
</p>
|
||||
<a class="group inline-flex items-center text-xs uppercase tracking-[0.2em] text-text-main dark:text-white font-medium" href="#">
|
||||
Read Our Story <span class="ml-2 group-hover:translate-x-1 transition-transform">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-32 bg-warm-grey dark:bg-[#141210] transition-colors duration-500">
|
||||
<div class="max-w-[1920px] mx-auto px-6 md:px-12">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-20 md:mb-32 px-4">
|
||||
<h2 class="font-display text-5xl md:text-7xl font-thin text-text-main dark:text-white">Curated <span class="italic text-text-muted">Editions</span></h2>
|
||||
<p class="hidden md:block font-body text-sm text-text-muted max-w-xs leading-relaxed text-right">
|
||||
Explore our seasonal collections, fired in small batches.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-16">
|
||||
<div class="flex flex-col space-y-16 md:space-y-32">
|
||||
<a class="group block cursor-pointer" href="#">
|
||||
<div class="relative overflow-hidden aspect-[3/4] mb-6">
|
||||
<img alt="Tableware collection" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEMG0U2yN-srAgpA4aSXewbFyRyFWnm181AquAJCRzLwgPHNHbs-fxFKQ8DMbozvyRU-s0LUPRKoZtht1-Lp3RDOfKE3jCrAD_A4tl9BXwHGUcAPWj0jBq3C9plosFkHIzYUDBtbq_Azg3RK2csufB9tH_tIJhMW--_IIfZeAltM9sgTD5wAPRPIUyV-0iemF2eWLZnx0IfTLZSkN930lHZ6aHxWChqHqoVMUTdYxqHPt0tpUW3C082em7_4fuoRpWdf4_flYYoO4"/>
|
||||
<div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors duration-500"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-t border-gray-400/50 dark:border-gray-800 pt-4">
|
||||
<h3 class="font-display text-3xl font-light text-text-main dark:text-white group-hover:italic transition-all">Tableware</h3>
|
||||
<span class="text-xs uppercase tracking-widest text-text-muted">01</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="group block cursor-pointer" href="#">
|
||||
<div class="relative overflow-hidden aspect-[4/3] mb-6">
|
||||
<img alt="Lamp Shades collection" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAz5MOY7i5TxXxrGVaW7nItrMPEhwnNz5VkQ7BwzWHUBMfV3j8A42PekcfAMOXu7nP2pX7m-Trx0lBWwFq4RuDfJMghT-DwyJAP4nT2sTCgX_WosvcMQfj5koFU-CLX7CMboAxAPXWUWe3Q8xU4Zl0kysFKLG34fR_GaRlN0diovvLg1SQ6fLq2dMRg2o523onwafjD0f6XBDxbtWBsnfIp_2U1_0zFahOkW2JyyJhIZFVCTiP61CY2rkwqtmupBjzzY7iKcMtszhE"/>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-t border-gray-400/50 dark:border-gray-800 pt-4">
|
||||
<h3 class="font-display text-3xl font-light text-text-main dark:text-white group-hover:italic transition-all">Lighting</h3>
|
||||
<span class="text-xs uppercase tracking-widest text-text-muted">04</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-16 md:space-y-32 md:pt-32">
|
||||
<a class="group block cursor-pointer" href="#">
|
||||
<div class="relative overflow-hidden aspect-square mb-6">
|
||||
<img alt="Home Decor collection" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBV8jgjafGxXCrSmiIUCN5Zwqv0cl-Ivw5hjQoa5ejFBx3a0C7zgeI_pywBpee7f0scHB_zrYQbI0zryX0P_F2w_xefVbl_8vkvSRMPhsqrs_z9u16FlDVgmXX9_PxhC8oRWZmGbtHsvXhfDEtvAi94tBJeQYTdG2a-XJ7gB0F8GLyvVl7_NHu9iB_TyVhbKIOv354VUmcNAehnGfuK0fTtAjQr0qxaHt8CD9pLJvfTeVJZF2VPRgToY5dN4eqRTRJrQPuLIW2aP9k"/>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-t border-gray-400/50 dark:border-gray-800 pt-4">
|
||||
<h3 class="font-display text-3xl font-light text-text-main dark:text-white group-hover:italic transition-all">Vases</h3>
|
||||
<span class="text-xs uppercase tracking-widest text-text-muted">02</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="group block cursor-pointer" href="#">
|
||||
<div class="relative overflow-hidden aspect-[3/4] mb-6">
|
||||
<img alt="Accessories collection" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDlTM_GLiQWReZzrfgwPZXJ2OjRaelPwrF2URWBLiqQjOdyxy0onUB9FoX4kcIzTnQSRIfRZsg6Dt5BS6j5bE6SYhdkZ60HAOZJNybnBvZqfICwldKNMiTg9-fm4X1otiHO8vO_Hr-DuwsaE818YSDiW2vyVH947T8peRurHz-sYZu9gJgq9R4D3BtLrdbf9R6MaYmqGZ47NAwHV1BHicOSMFGxfhK-p5exDM963E8qBTwl3PEXcRdnAq6-B-ada0XJ3jz8iA4Cavo"/>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-t border-gray-400/50 dark:border-gray-800 pt-4">
|
||||
<h3 class="font-display text-3xl font-light text-text-main dark:text-white group-hover:italic transition-all">Serving</h3>
|
||||
<span class="text-xs uppercase tracking-widest text-text-muted">05</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-16 md:space-y-32 md:pt-16 lg:pt-0">
|
||||
<a class="group block cursor-pointer" href="#">
|
||||
<div class="relative overflow-hidden aspect-[3/5] mb-6">
|
||||
<img alt="Matcha Bowls collection" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD_jVXnz1bLom_g2aBEGMY2fmAe2vuv4pwP_NdhGGqtKhcIr36eQ-BQ5d3cMXXjIDURtvBt9juNVX8kJG1T404125GGwEoQmMCD4IawdGY7hDBeByI8PG9Z8Ioc-skCG9X5bdU9-O4PS6KBglPV8fnkyG6FjPkN0RdGvHWMZQ6iInrJhOqiqX3r-6YvmIpGSi5FoXyFnmcfLnf1faHq8kWIMuv0WgLHSlOFlB5MeIJAQwvuk5Gbk4drXCt2heYy5WRWIdutVdiQOa4"/>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-t border-gray-400/50 dark:border-gray-800 pt-4">
|
||||
<h3 class="font-display text-3xl font-light text-text-main dark:text-white group-hover:italic transition-all">Kitchenware</h3>
|
||||
<span class="text-xs uppercase tracking-widest text-text-muted">03</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="group block cursor-pointer" href="#">
|
||||
<div class="relative overflow-hidden aspect-square mb-6">
|
||||
<img alt="Furoshiki collection" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAI1p48nya5N3xLUE8fx6a0Cwniu_QuS5yo-wq6PE1W77n0orf57QyF1g4426uqGtiv02HHHXd40Sq81usdXnpOqvLiviW_gSGdtlorcOpaSl6R8k23cG_I-5v4pPVJiaTPqrhK1U3VtxLX5Bpj8x7NOtZT4K1jtI4NHt-S1A0GvBjM7jCfH_0y8Xw8L_R5br8I8_KmdbC7ACaNd4OAZUpJdt4UUANVy664jG4m9dZshHpa8Og4aFzZ1CRxmQExSVEzc0CKZ9GSLB0"/>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-t border-gray-400/50 dark:border-gray-800 pt-4">
|
||||
<h3 class="font-display text-3xl font-light text-text-main dark:text-white group-hover:italic transition-all">Textiles</h3>
|
||||
<span class="text-xs uppercase tracking-widest text-text-muted">06</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-32 bg-clay-dark dark:bg-black border-y border-stone-800/50 transition-colors duration-500">
|
||||
<div class="max-w-5xl mx-auto px-6 text-center">
|
||||
<span class="material-symbols-outlined text-4xl mb-8 text-stone-500 font-thin">format_quote</span>
|
||||
<h3 class="font-display text-3xl md:text-5xl font-thin leading-snug text-stone-100 dark:text-stone-200 mb-10 italic">
|
||||
"My pottery is designed to be both beautiful and practical. From minimalist vases to durable dinner plates, each piece has its own character."
|
||||
</h3>
|
||||
<p class="font-body text-xs uppercase tracking-[0.2em] text-stone-400">
|
||||
Anonymous — Verified Collector
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="relative py-32 bg-terracotta-soft dark:bg-black overflow-hidden transition-colors duration-500">
|
||||
<div class="absolute inset-0 z-0 mix-blend-multiply opacity-30">
|
||||
<img alt="Atmospheric studio background" class="w-full h-full object-cover blur-3xl scale-110 grayscale" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAipMlYLTcRT_hdc3VePfFIlrA56VzZ5G2y3gcRfmIZMERwGFKq2N19Gqo6mw7uZowXmjl2eJ89TI3Mcud2OyOfadO3mPVF_v0sI0OHupqM49WEFcWzH-Wbu3DL6bQ46F2Y8SIAk-NUQy8psjcIdBKRrM8fqdn4eOPANYTXpVxkLMAm4R0Axy4aEKNdmj917ZKKTxvXB-J8nGlITJkJ-ua7XcZOwGnfK5ttzyWW35A0oOSffCf972gmpV27wrVQgYJNLS7UyDdyQIQ"/>
|
||||
</div>
|
||||
<div class="max-w-[1920px] mx-auto px-6 md:px-12 relative z-10">
|
||||
<div class="flex justify-between items-baseline mb-20 border-b border-text-main/20 dark:border-gray-800 pb-6">
|
||||
<h2 class="font-display text-6xl font-thin text-text-main dark:text-white">The <span class="italic">Journal</span></h2>
|
||||
<a class="text-xs uppercase tracking-[0.2em] text-text-main dark:text-white hover:text-text-muted transition-colors" href="#">View Archive</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||
<article class="group cursor-pointer">
|
||||
<div class="relative h-[500px] overflow-hidden mb-8 shadow-md">
|
||||
<img alt="Pottery workshop" class="w-full h-full object-cover transition-transform duration-[1.5s] group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAipMlYLTcRT_hdc3VePfFIlrA56VzZ5G2y3gcRfmIZMERwGFKq2N19Gqo6mw7uZowXmjl2eJ89TI3Mcud2OyOfadO3mPVF_v0sI0OHupqM49WEFcWzH-Wbu3DL6bQ46F2Y8SIAk-NUQy8psjcIdBKRrM8fqdn4eOPANYTXpVxkLMAm4R0Axy4aEKNdmj917ZKKTxvXB-J8nGlITJkJ-ua7XcZOwGnfK5ttzyWW35A0oOSffCf972gmpV27wrVQgYJNLS7UyDdyQIQ"/>
|
||||
<div class="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors duration-500"></div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center space-x-4 mb-4">
|
||||
<span class="text-[10px] uppercase tracking-[0.2em] text-text-muted border border-text-muted/30 px-2 py-1 rounded-full">Studio</span>
|
||||
<span class="text-[10px] uppercase tracking-[0.2em] text-text-muted">Oct 03</span>
|
||||
</div>
|
||||
<h3 class="font-display text-3xl text-text-main dark:text-white mb-4 leading-tight group-hover:underline decoration-1 underline-offset-4">Product Photography for Small Businesses</h3>
|
||||
<p class="text-sm font-light text-text-muted dark:text-gray-400 leading-loose max-w-sm">
|
||||
Learning that beautiful products aren't enough on their own — you also need beautiful photos to tell the story.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="group cursor-pointer lg:mt-20">
|
||||
<div class="relative h-[500px] overflow-hidden mb-8 shadow-md">
|
||||
<img alt="Packing ceramics" class="w-full h-full object-cover transition-transform duration-[1.5s] group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAaWGnX_NYT3S_lOflL2NJZGbWge4AAkvra4ymvF8ag-c1UKsOAIB-rsLVQXW5xIlPZipDiK8-ysPyv22xdgsvzs4EOXSSCcrT4Lb2YCe0u5orxRaZEA5TgxeoKq15zaWKSlmnHyPGjPd_7yglpfO13eZmbU5KaxFJ1KGO0UAxoO9BpsyCYgbgINMoSz3epGe5ZdwBWRH-5KCzjoLuXimFTLcd5bqg9T1YofTxgy2hWBMJzKkafyEniq8dP6hMmfNCLVcCHHHx0hRU"/>
|
||||
<div class="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors duration-500"></div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center space-x-4 mb-4">
|
||||
<span class="text-[10px] uppercase tracking-[0.2em] text-text-muted border border-text-muted/30 px-2 py-1 rounded-full">Guide</span>
|
||||
<span class="text-[10px] uppercase tracking-[0.2em] text-text-muted">Jul 15</span>
|
||||
</div>
|
||||
<h3 class="font-display text-3xl text-text-main dark:text-white mb-4 leading-tight group-hover:underline decoration-1 underline-offset-4">The Art of Packaging</h3>
|
||||
<p class="text-sm font-light text-text-muted dark:text-gray-400 leading-loose max-w-sm">
|
||||
A practical guide for potters who want to package and send their handmade ceramics with care and confidence.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="group cursor-pointer">
|
||||
<div class="relative h-[500px] overflow-hidden mb-8 shadow-md">
|
||||
<img alt="Pottery tools" class="w-full h-full object-cover transition-transform duration-[1.5s] group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB8NOE5fGfN4d87cbcB27_Sh-nrlZlqxsTlYKbCZk98SoL-gHsPSWFNuxd1DxBq0g8Qysh0RBZ_btu-_WaH68UjV8SXPUalyxREvUqao4oXmra--pWAsaooWwKvWCzReYZ8kj7G-KIYIAo5mqudzB8n9C6-HVTNPPx9QgZHr_YsojMxlmmVcQ5bqk7-Lp0KtSAiVIPD2-1UE1dMGnkVSLUXKdgA65JIh8M3TtNkaJTGONuFKoTERrYOWe7u2BILnqyukTzlNcvK7Sc"/>
|
||||
<div class="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors duration-500"></div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center space-x-4 mb-4">
|
||||
<span class="text-[10px] uppercase tracking-[0.2em] text-text-muted border border-text-muted/30 px-2 py-1 rounded-full">Wellness</span>
|
||||
<span class="text-[10px] uppercase tracking-[0.2em] text-text-muted">Jun 11</span>
|
||||
</div>
|
||||
<h3 class="font-display text-3xl text-text-main dark:text-white mb-4 leading-tight group-hover:underline decoration-1 underline-offset-4">Finding Motivation in Clay</h3>
|
||||
<p class="text-sm font-light text-text-muted dark:text-gray-400 leading-loose max-w-sm">
|
||||
10 gentle, practical tips to help potters find motivation during slow or uncertain moments in the creative process.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-20 bg-white dark:bg-background-dark">
|
||||
<div class="max-w-[1920px] mx-auto px-4">
|
||||
<div class="flex justify-between items-center mb-8 px-2">
|
||||
<h4 class="font-display text-2xl text-text-main dark:text-white">@ikkai_ceramics</h4>
|
||||
<a class="text-xs uppercase tracking-widest text-text-muted hover:text-primary transition-colors" href="#">Follow</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-6 gap-px bg-stone-100 dark:bg-stone-800 border border-stone-100 dark:border-stone-800">
|
||||
<div class="aspect-square relative group overflow-hidden">
|
||||
<img alt="Gallery image 1" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale hover:grayscale-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGY1PXPxlhIz9qU-XbDrdJjrRnX1pFo8YpH3HM1Crq9C6iVApx-qFkpjTj_MDOXXrX4jprk69hA0fmwR2EdURQyKaBLDAdkIE3vLKCyTRMhgyGerlpsy6_KZkZs-9hiaoWZPBFzvBIGWZ0i7sfbbtkQdBGJfK30yftDOPjI1NJfzBtsKNMbYOnXfmm-6u7uiovrM54rtRNWzsxmcvhRKQebZIUrERvGGYsUvUVARYEzSs4thyJnMYROk0LmoCrJ03_QjDvLzy_zjw"/>
|
||||
</div>
|
||||
<div class="aspect-square relative group overflow-hidden">
|
||||
<img alt="Gallery image 2" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale hover:grayscale-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLafDd9RRuru_JkGfpxms6q-dFwzNrjKIazUT33dREB4eWcGSGtNYEKzTCgaRJYIGNvhE1z1tYSrr3ZMrMSQs_3oIJz2hrlYYq49EJaI8VD2YrM9akd50BsF3voaGW1yZFHM5S36ZbrCx3A8Id2wkDnlJ7TnUYdo76-TErMa6h94HxQYBSwLQESFBrPfDEi5Qf6MDfE-6i3HJNIYGS79zemso4U8mMRi-HA17y4ilifDoI2B4vc3ROE3HFbTVP6JxJxjklnlbMt28"/>
|
||||
</div>
|
||||
<div class="aspect-square relative group overflow-hidden">
|
||||
<img alt="Gallery image 3" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale hover:grayscale-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGyeyp1BDBjdasLDmyEWUfA0eeSJ8qMmrlPS0IgsyNdW_-0NEbFZhO72z3kox8ys3T2PZOprxzbnDwBQfjdwLiISmT3eHil4LQgRNt35AucCh1b-BFmUjXB9vuQ-JAFY122ABF9AmGWIhKCH7HHJj-Pibiz4NlcEGf_-59GAtt_y4g6OzzZpBKzfZAXd2_h-2I3ZbMaNDYEVK9dZSwVSrUNxQEFRFLUoqoNm8_VqgfpwpXmGwSmEZfy-lfjnXDBF1AS3ipD7JR04E"/>
|
||||
</div>
|
||||
<div class="aspect-square relative group overflow-hidden">
|
||||
<img alt="Gallery image 4" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale hover:grayscale-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBxM-yqwsAyWN-4sNS6FCNyry1QP6_yKpP7av1uPQTEArxL29_Ir1vfmlNJ50UMMYBRXHwSYUS9dwgO9hsccM8QKk0DybH5Hsa0k1oA1PSD2fIButt6JbICrrLhqC51S37PtN7vpPxtlqFPXQyaGEQl8r8eZbbROIqtUCGdWks_prak9UNTbeph0gHDa0Xlw8HtXRSgQCqONjRuWVWC9ynnqpqXXgLIeCvCVBUiQuXxCnhLsMDWOcw8sjaVSFKo1tRi9IUFRaXEGu0"/>
|
||||
</div>
|
||||
<div class="aspect-square relative group overflow-hidden">
|
||||
<img alt="Gallery image 5" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale hover:grayscale-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDD63SnScOyJcWSHLRucaOZ46wQpGV0c-ljb4DvnaURof8aTmuMD75dT1UUKXzDwWBUKGqu3nNlUUOXnEfjLE8pwAdvRKHhunOunZW5qbw35eY1vH14HXGqQSe90m7RUxku70QRlVS338tKQEAJ9TasOSte56oSEmKzUC0q9VF9P8GTl-0R8CcmvQ9hfwRIe34s2QUEwE96LYTREHdWZI6RRZojG8MTeV1qGFgFgjwEqnYbIGCFdW5TFMyTvkuPd1R0IBNfWZzhJkM"/>
|
||||
</div>
|
||||
<div class="aspect-square relative group overflow-hidden">
|
||||
<img alt="Gallery image 6" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale hover:grayscale-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBQAOyWAgHl3Uf9zP9-cmp1ZPrAw5wi7GP1div8GHtarOvO68Kn8069PqiCFYs91kLD1YWcb9tk3y9Fm12AmMfRpIIvNTvAWxkZ7xL0BWM_UZ5BPmvSVuRDXKcvg5_qQVXJOy5ub3Yu3oBqKhR617MhwY4F_Am0cNClmSgPaYHALRi-CB3_hlLdgXQhI0dP5j7yNqlrTxHHv34vRQWvg2_Htkum0XcSQHuK9-A89-Cgcz5-V-FzCjxKPzAROoN0OKL9YxjRXHkwQjk"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="bg-primary dark:bg-black text-stone-400 py-24 px-6 md:px-12">
|
||||
<div class="max-w-[1920px] mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-12 border-b border-stone-700 pb-20 mb-12">
|
||||
<div class="md:col-span-4">
|
||||
<a class="font-display text-4xl text-white block mb-8" href="#">IKKAI</a>
|
||||
<p class="font-body text-sm font-light leading-loose max-w-sm mb-8">
|
||||
Handcrafted ceramics for the modern home. Created with intention, fired with patience, and delivered with care.
|
||||
</p>
|
||||
<form class="flex border-b border-stone-600 pb-2 max-w-xs">
|
||||
<input class="bg-transparent border-none text-white placeholder-stone-500 focus:ring-0 text-sm w-full p-0" placeholder="Join our newsletter" type="email"/>
|
||||
<button class="text-xs uppercase tracking-widest text-white hover:text-stone-300" type="submit">Subscribe</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="md:col-span-2 md:col-start-7">
|
||||
<h4 class="text-white text-xs font-bold uppercase tracking-widest mb-8">Shop</h4>
|
||||
<ul class="space-y-4 text-xs font-light tracking-widest uppercase">
|
||||
<li><a class="hover:text-white transition-colors" href="#">All Ceramics</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">New Arrivals</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Best Sellers</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Gift Cards</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<h4 class="text-white text-xs font-bold uppercase tracking-widest mb-8">Company</h4>
|
||||
<ul class="space-y-4 text-xs font-light tracking-widest uppercase">
|
||||
<li><a class="hover:text-white transition-colors" href="#">Our Story</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Sustainability</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Careers</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Press</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<h4 class="text-white text-xs font-bold uppercase tracking-widest mb-8">Support</h4>
|
||||
<ul class="space-y-4 text-xs font-light tracking-widest uppercase">
|
||||
<li><a class="hover:text-white transition-colors" href="#">FAQ</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Shipping</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Returns</a></li>
|
||||
<li><a class="hover:text-white transition-colors" href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row justify-between items-center text-[10px] tracking-widest uppercase">
|
||||
<p>© 2024 IKKAI Ceramics. All rights reserved.</p>
|
||||
<div class="flex space-x-6 mt-4 md:mt-0">
|
||||
<a class="hover:text-white" href="#">Privacy</a>
|
||||
<a class="hover:text-white" href="#">Terms</a>
|
||||
<a class="hover:text-white" href="#">Cookies</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body></html>
|
||||
6
package-lock.json
generated
Normal file
6
package-lock.json
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "hotschpotsh",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user