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

Final

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

74
Pottery-website/components/Hero.tsx
View File

@@ -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;