Initial commit for website

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

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;