+
+ )
+}
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
new file mode 100644
index 0000000..57ae942
--- /dev/null
+++ b/client/src/pages/Home.tsx
@@ -0,0 +1,84 @@
+import { Link } from 'react-router-dom'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+
+const CATEGORIES = [
+ { key: 'ceramics', label: '陶芸・陶磁器', english: 'Ceramics', emoji: '🏺' },
+ { key: 'lacquerware', label: '漆器', english: 'Lacquerware', emoji: '🏮' },
+ { key: 'textiles', label: '織物・染物', english: 'Textiles', emoji: '🧵' },
+ { key: 'woodwork_bamboo', label: '木工・竹工芸', english: 'Wood & Bamboo', emoji: '🪵' },
+ { key: 'washi_calligraphy', label: '和紙・書道具', english: 'Washi & Calligraphy', emoji: '📜' },
+ { key: 'metalwork', label: '金工・鍛冶', english: 'Metalwork', emoji: '⚒️' },
+ { key: 'food', label: '食品・特産品', english: 'Food Specialties', emoji: '🍱' },
+ { key: 'dolls_toys', label: '人形・玩具', english: 'Dolls & Toys', emoji: '🎎' },
+ { key: 'other', label: 'その他工芸', english: 'Other Crafts', emoji: '🎨' },
+]
+
+export function Home() {
+ return (
+ Master Craftsmen
+職人たちに会いましょう
+ + {loading ? ( +
+ {Array(6).fill(0).map((_, i) => )}
+
+ ) : craftsmen.length === 0 ? (
+ No craftsmen found yet
+ ) : ( +
+ {craftsmen.map((c) => (
+
+
+
+
+
+
+ ))}
+
+ )}
+
+
+ {c.bio &&
+ {c.profile_image_url ? (
+ 
+ ) : '🧑🎨'}
+
+
+ {c.meti_certified && 伝統的工芸品 }
+
+ {c.shop_name}
+ {c.prefecture &&{c.prefecture}
} + {c.craft_category &&{c.craft_category}
} +{c.bio}
} + {c.rating && c.rating > 0 && ( +⭐ {c.rating.toFixed(1)}
+ )} +
+ {/* Hero */}
+
+
+
+ {/* Category Grid */}
+
+
+
+ {/* METI Certification Feature */}
+
+
+
+ {/* Footer */}
+
+
+ )
+}
diff --git a/client/src/pages/Login.tsx b/client/src/pages/Login.tsx
new file mode 100644
index 0000000..f376de4
--- /dev/null
+++ b/client/src/pages/Login.tsx
@@ -0,0 +1,77 @@
+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useAuthStore } from '@/store/auth'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+
+export function Login() {
+ const [email, setEmail] = useState('')
+ const [password, setPassword] = useState('')
+ const [error, setError] = useState('')
+ const { login, isLoading } = useAuthStore()
+ const navigate = useNavigate()
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ setError('')
+ try {
+ await login(email, password)
+ navigate('/')
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Login failed')
+ }
+ }
+
+ return (
+
+ Authentic Japanese Crafts
+
+ + 職人マルシェ +
+Discover Handcrafted Treasures from Japan's Master Artisans
+直接職人から — Direct from the craftsman's hands
+
+
+
+
+
+
+
+
+ Browse by Craft
+伝統工芸のカテゴリー
+
+ {CATEGORIES.map((cat) => (
+
+
+
+
+
+
+ ))}
+
+ {cat.emoji}
+ {cat.english}
+ {cat.label}
+
+ 伝統的工芸品
+
+ METI Certified Traditional Crafts
++ Products bearing the 伝統的工芸品 (Traditional Craft) certification are recognized by Japan's Ministry of Economy, Trade and Industry for exceptional quality and authentic traditional techniques. +
+ + + +
+
+
+ 職人マルシェ
+ Sign in to your account
+
+
+
+
+ )
+}
diff --git a/client/src/pages/Products.tsx b/client/src/pages/Products.tsx
new file mode 100644
index 0000000..20658f8
--- /dev/null
+++ b/client/src/pages/Products.tsx
@@ -0,0 +1,123 @@
+import { useEffect, useState } from 'react'
+import { useSearchParams, Link } from 'react-router-dom'
+import { api } from '@/lib/api'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+
+interface Product {
+ id: string
+ name: string
+ name_ja?: string
+ price: number
+ craft_category?: string
+ images?: string[]
+ meti_certified?: boolean
+ craftsman_meti?: boolean
+ shop_name?: string
+}
+
+const CATEGORIES = [
+ { key: '', label: 'All' },
+ { key: 'ceramics', label: 'Ceramics 陶芸' },
+ { key: 'lacquerware', label: 'Lacquerware 漆器' },
+ { key: 'textiles', label: 'Textiles 織物' },
+ { key: 'woodwork_bamboo', label: 'Wood & Bamboo 木工' },
+ { key: 'washi_calligraphy', label: 'Washi 和紙' },
+ { key: 'metalwork', label: 'Metalwork 金工' },
+ { key: 'food', label: 'Food 食品' },
+ { key: 'dolls_toys', label: 'Dolls 人形' },
+ { key: 'other', label: 'Other その他' },
+]
+
+export function Products() {
+ const [searchParams, setSearchParams] = useSearchParams()
+ const [products, setProducts] = useState
+
+ )
+}
diff --git a/client/src/pages/Register.tsx b/client/src/pages/Register.tsx
new file mode 100644
index 0000000..b3a39e0
--- /dev/null
+++ b/client/src/pages/Register.tsx
@@ -0,0 +1,101 @@
+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useAuthStore } from '@/store/auth'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+
+export function Register() {
+ const [formData, setFormData] = useState({ email: '', password: '', display_name: '', role: 'buyer' })
+ const [error, setError] = useState('')
+ const { register, isLoading } = useAuthStore()
+ const navigate = useNavigate()
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ setError('')
+ if (formData.password.length < 8) {
+ setError('Password must be at least 8 characters')
+ return
+ }
+ try {
+ await register(formData)
+ navigate('/')
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Registration failed')
+ }
+ }
+
+ return (
+ Japanese Craft Products
+伝統工芸品
+ + {/* Filters */} +
+ {CATEGORIES.map((cat) => (
+
+ ))}
+
+
+
+ {loading ? (
+
+ {Array(8).fill(0).map((_, i) => (
+
+ ))}
+
+ ) : products.length === 0 ? (
+
+
+ ) : (
+ No products found
+Try a different category or filter
+
+ {products.map((product) => (
+
+
+
+ {(product.meti_certified || product.craftsman_meti) && (
+ 伝統的工芸品
+ )}
+
+
+
+ ))}
+
+ )}
+
+ {product.images?.[0] ? (
+ 
+ ) : (
+
+ 🏺
+ )}
+ {product.name}
+ {product.name_ja &&{product.name_ja}
} +{product.shop_name}
+¥{product.price.toLocaleString()}
+
+
+
+ Join 職人マルシェ
+ Create your account to start shopping
+
+
+
+
+ )
+}
diff --git a/client/src/store/auth.ts b/client/src/store/auth.ts
new file mode 100644
index 0000000..e102b33
--- /dev/null
+++ b/client/src/store/auth.ts
@@ -0,0 +1,69 @@
+import { create } from 'zustand'
+import { api } from '@/lib/api'
+
+interface User {
+ id: string
+ email: string
+ role: string
+ first_name?: string
+ last_name?: string
+ display_name?: string
+ avatar_url?: string
+}
+
+interface AuthState {
+ user: User | null
+ token: string | null
+ isLoading: boolean
+ login: (email: string, password: string) => Promise