Initial commit for website
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user