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

Initial commit for website

Browse Source
This commit is contained in:
Timo Knuth
2026-03-16 21:38:49 +01:00
parent 609e3eb0ae
commit f0c19fbbfa
15 changed files with 65 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
Pottery-website/components/Footer.tsx
View File

@@ -2,7 +2,33 @@ 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">
@@ -11,7 +37,7 @@ const Footer: React.FC = () => {
<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">
HOTSCHPOTSH
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.
@@ -43,9 +69,7 @@ const Footer: React.FC = () => {
<ul className="space-y-6">
{FOOTER_LINKS[0].links.map((link) => (
<li key={link.label}>
<Link className="text-lg font-light hover:text-stone-400 hover:pl-2 transition-all duration-300 block" to={link.href}>
{link.label}
</Link>
{renderFooterLink(link)}
</li>
))}
</ul>
@@ -55,9 +79,7 @@ const Footer: React.FC = () => {
<ul className="space-y-6">
{FOOTER_LINKS[1].links.map((link) => (
<li key={link.label}>
<Link className="text-lg font-light hover:text-stone-400 hover:pl-2 transition-all duration-300 block" to={link.href}>
{link.label}
</Link>
{renderFooterLink(link)}
</li>
))}
</ul>
@@ -67,9 +89,7 @@ const Footer: React.FC = () => {
<ul className="space-y-6">
{FOOTER_LINKS[2].links.map((link) => (
<li key={link.label}>
<Link className="text-lg font-light hover:text-stone-400 hover:pl-2 transition-all duration-300 block" to={link.href}>
{link.label}
</Link>
{renderFooterLink(link)}
</li>
))}
</ul>
@@ -79,7 +99,7 @@ const Footer: React.FC = () => {
{/* 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 HOTSCHPOTSH Ceramics. All rights reserved.</p>
<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>
@@ -92,4 +112,4 @@ const Footer: React.FC = () => {
);
};
export default Footer;
export default Footer;

12
Pottery-website/components/GallerySection.tsx
View File

@@ -29,11 +29,11 @@ const GallerySection: React.FC = () => {
<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">H</span>
<span className="font-display text-lg">K</span>
</div>
</div>
<div>
<h4 className="font-display text-xl text-text-main dark:text-white">@hotchpotsh_ceramics</h4>
<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>
@@ -126,16 +126,16 @@ const GallerySection: React.FC = () => {
<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">H</span>
<span className="font-display text-sm">K</span>
</div>
</div>
<span className="font-bold text-sm text-text-main dark:text-white">hotchpotsh_ceramics</span>
<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">hotchpotsh_ceramics</span> {selectedImage.caption}
<span className="font-bold">knuth_ceramics</span> {selectedImage.caption}
</p>
</div>
@@ -176,4 +176,4 @@ const GallerySection: React.FC = () => {
);
};
export default GallerySection;
export default GallerySection;

8
Pottery-website/components/Header.tsx
View File

@@ -39,11 +39,11 @@ const Header: React.FC = () => {
{/* Logo */}
<div className="flex-shrink-0 relative group cursor-pointer">
<Link className="font-display text-4xl md:text-5xl font-light tracking-widest uppercase text-text-main dark:text-white" to="/">
HOTSCHPOTSH
<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" />
<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 */}
@@ -116,4 +116,4 @@ const Header: React.FC = () => {
);
};
export default Header;
export default Header;