379 lines
28 KiB
HTML
379 lines
28 KiB
HTML
<!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> |