mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 2 Packages Projects Releases Wiki Activity

font sizes
Some checks failed
Build & Deploy KLZ Cables / deploy (push) Failing after 1m1s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-24 23:09:00 +01:00
parent 72711c74ba
commit 807a604e39
22 changed files with 148 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/Footer.tsx
View File

@@ -27,7 +27,7 @@ export default function Footer() {
unoptimized
/>
</Link>
<p className="text-white/60 text-lg leading-relaxed max-w-sm">
<p className="text-white/60 text-base md:text-lg leading-relaxed max-w-sm">
{t('tagline')}
</p>
<div className="flex gap-4">
@@ -42,7 +42,7 @@ export default function Footer() {
{/* Links Columns */}
<div className="lg:col-span-2">
<h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">{t('legal')}</h4>
<h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('legal')}</h4>
<ul className="space-y-4 text-white/70">
<li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="hover:text-white transition-colors">{t('legalNotice')}</Link></li>
<li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="hover:text-white transition-colors">{t('privacyPolicy')}</Link></li>
@@ -51,7 +51,7 @@ export default function Footer() {
</div>
<div className="lg:col-span-2">
<h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">{t('company')}</h4>
<h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('company')}</h4>
<ul className="space-y-4 text-white/70">
<li><Link href={`/${locale}/team`} className="hover:text-white transition-colors">{navT('team')}</Link></li>
<li><Link href={`/${locale}/products`} className="hover:text-white transition-colors">{navT('products')}</Link></li>
@@ -62,7 +62,7 @@ export default function Footer() {
{/* Recent Posts Column */}
<div className="lg:col-span-4">
<h4 className="text-accent font-bold uppercase tracking-widest text-sm mb-8">{t('recentPosts')}</h4>
<h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('recentPosts')}</h4>
<ul className="space-y-6">
{[
"Focus on wind farm construction: three typical cable challenges",
@@ -70,7 +70,7 @@ export default function Footer() {
].map((post, i) => (
<li key={i}>
<Link href="#" className="group block">
<p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2">
<p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2 text-base md:text-base">
{post}
</p>
<span className="text-xs text-white/40 uppercase tracking-widest">{t('readArticle')} &rarr;</span>
@@ -81,7 +81,7 @@ export default function Footer() {
</div>
</div>
<div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/40 text-sm font-medium">
<div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/40 text-xs md:text-sm font-medium">
<p>{t('copyright', { year: currentYear })}</p>
<div className="flex gap-8">
<Link href="/en" className="hover:text-white transition-colors">English</Link>

12
components/Header.tsx
View File

@@ -91,8 +91,8 @@ export default function Header() {
key={item.href}
href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
className={cn(
textColorClass,
"hover:text-accent font-bold transition-all text-lg tracking-tight relative group"
textColorClass,
"hover:text-accent font-bold transition-all text-base md:text-lg tracking-tight relative group"
)}
>
{item.label}
@@ -102,7 +102,7 @@ export default function Header() {
</nav>
<div className={cn("hidden lg:flex items-center space-x-8", textColorClass)}>
<div className="flex items-center space-x-4 text-sm font-extrabold tracking-widest uppercase">
<div className="flex items-center space-x-4 text-xs md:text-sm font-extrabold tracking-widest uppercase">
<Link
href={getPathForLocale('en')}
className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
@@ -156,7 +156,7 @@ export default function Header() {
key={item.href}
href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
className={cn(
"text-3xl font-extrabold text-white hover:text-accent transition-all transform",
"text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform",
isMobileMenuOpen ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
)}
style={{ transitionDelay: `${idx * 100}ms` }}
@@ -169,7 +169,7 @@ export default function Header() {
"pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8 transition-all duration-500 delay-500",
isMobileMenuOpen ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
)}>
<div className="flex items-center space-x-8 text-xl font-extrabold tracking-widest uppercase text-white">
<div className="flex items-center space-x-8 text-lg md:text-xl font-extrabold tracking-widest uppercase text-white">
<Link
href={getPathForLocale('en')}
className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
@@ -189,7 +189,7 @@ export default function Header() {
href={`/${currentLocale}/contact`}
variant="accent"
size="lg"
className="w-full max-w-xs py-6 text-xl shadow-2xl"
className="w-full max-w-xs py-6 text-lg md:text-xl shadow-2xl"
>
{t('contact')}
</Button>

8
components/ProductSidebar.tsx
View File

@@ -42,7 +42,7 @@ export default function ProductSidebar({ productName, productImage, datasheetPat
<div className="relative z-10">
<div className="inline-block relative mb-2">
<h3 className="text-xl font-heading font-black m-0 tracking-tighter uppercase leading-none">
<h3 className="text-lg md:text-xl font-heading font-black m-0 tracking-tighter uppercase leading-none">
{t('requestQuote')}
</h3>
<Scribble
@@ -51,7 +51,7 @@ export default function ProductSidebar({ productName, productImage, datasheetPat
color="var(--color-accent)"
/>
</div>
<p className="text-white/60 text-xs m-0 mt-2 leading-relaxed font-medium max-w-[90%]">
<p className="text-white/60 text-xs md:text-sm m-0 mt-2 leading-relaxed font-medium max-w-[90%]">
{t('requestQuoteDesc')}
</p>
</div>
@@ -77,10 +77,10 @@ export default function ProductSidebar({ productName, productImage, datasheetPat
</svg>
</div>
<div className="flex-1 min-w-0">
<h3 className="text-sm font-heading font-black text-neutral-dark m-0 uppercase tracking-tighter leading-tight group-hover:text-saturated transition-colors duration-300">
<h3 className="text-sm md:text-base font-heading font-black text-neutral-dark m-0 uppercase tracking-tighter leading-tight group-hover:text-saturated transition-colors duration-300">
{t('downloadDatasheet')}
</h3>
<p className="text-text-secondary text-[10px] m-0 mt-0.5 font-semibold leading-tight truncate uppercase tracking-widest opacity-60">
<p className="text-text-secondary text-[10px] md:text-xs m-0 mt-0.5 font-semibold leading-tight truncate uppercase tracking-widest opacity-60">
{t('downloadDatasheetDesc')}
</p>
</div>

2
components/ProductTabs.tsx
View File

@@ -31,7 +31,7 @@ export default function ProductTabs({ children, technicalData, sidebar }: Produc
{technicalData && (
<div className="pt-24 border-t-2 border-neutral-dark/5">
<div className="mb-16">
<h2 className="text-4xl md:text-5xl font-black text-primary tracking-tighter uppercase mb-4">Technical Specifications</h2>
<h2 className="text-3xl md:text-4xl font-black text-primary tracking-tighter uppercase mb-4">Technical Specifications</h2>
<div className="h-1.5 w-24 bg-accent rounded-full" />
</div>
<div className="not-prose">

6
components/blog/ChatBubble.tsx
View File

@@ -41,8 +41,8 @@ export default function ChatBubble({
{/* Message Bubble */}
<div className={`flex flex-col max-w-[85%] ${isRight ? 'items-end' : 'items-start'}`}>
<div className="flex items-baseline gap-2 mb-1">
<span className="text-sm font-bold text-text-primary">{author}</span>
{role && <span className="text-xs text-text-secondary">{role}</span>}
<span className="text-sm md:text-base font-bold text-text-primary">{author}</span>
{role && <span className="text-xs md:text-sm text-text-secondary">{role}</span>}
</div>
<div className={`
@@ -52,7 +52,7 @@ export default function ChatBubble({
: 'bg-white text-text-primary rounded-tl-none border-neutral-200'
}
`}>
<div className={`prose prose-lg max-w-none ${isRight ? 'prose-invert' : ''}`}>
<div className={`prose prose-base md:prose-lg max-w-none ${isRight ? 'prose-invert' : ''}`}>
{children}
</div>

4
components/blog/HighlightBox.tsx
View File

@@ -20,7 +20,7 @@ export default function HighlightBox({ title, children, color = 'primary' }: Hig
<div className="absolute top-0 right-0 w-16 h-16 bg-primary/5 -mr-8 -mt-8 rotate-45 transition-transform group-hover:scale-110" />
{title && (
<h3 className="text-2xl font-bold text-text-primary mb-6 flex items-center gap-4 relative">
<h3 className="text-xl md:text-2xl font-bold text-text-primary mb-6 flex items-center gap-4 relative">
<span className="relative">
{title}
{color === 'accent' && (
@@ -32,7 +32,7 @@ export default function HighlightBox({ title, children, color = 'primary' }: Hig
</span>
</h3>
)}
<div className="prose prose-lg max-w-none relative z-10">
<div className="prose prose-base md:prose-lg max-w-none relative z-10">
{children}
</div>
</div>

2
components/blog/SplitHeading.tsx
View File

@@ -14,7 +14,7 @@ export default function SplitHeading({ children, className = '', id }: SplitHead
id={id}
className={className}
>
<h2 className="text-2xl md:text-3xl font-bold leading-tight text-text-primary">
<h2 className="text-xl md:text-2xl font-bold leading-tight text-text-primary">
{children}
</h2>
</div>

4
components/blog/TableOfContents.tsx
View File

@@ -44,7 +44,7 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
return (
<nav className="hidden lg:block w-full ml-12">
<div className="relative pl-6 border-l border-neutral-200">
<h4 className="text-xs font-bold uppercase tracking-[0.2em] text-text-primary/50 mb-6">
<h4 className="text-xs md:text-sm font-bold uppercase tracking-[0.2em] text-text-primary/50 mb-6">
{locale === 'de' ? 'Inhalt' : 'Table of Contents'}
</h4>
<ul className="space-y-4">
@@ -60,7 +60,7 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
<a
href={`#${heading.id}`}
className={cn(
"text-sm transition-all duration-300 hover:text-primary block leading-snug",
"text-sm md:text-base transition-all duration-300 hover:text-primary block leading-snug",
activeId === heading.id
? "text-primary font-bold translate-x-1"
: "text-text-secondary font-medium hover:translate-x-1"

2
components/home/CTA.tsx
View File

@@ -17,7 +17,7 @@ export default function CTA() {
<Heading level={2} subtitle={t('subtitle')} className="text-white mb-6">
<span className="text-white">{t('title')}</span>
</Heading>
<p className="text-xl text-white/70 leading-relaxed">
<p className="text-lg md:text-xl text-white/70 leading-relaxed">
{t('description')}
</p>
</div>

10
components/home/Experience.tsx
View File

@@ -25,7 +25,7 @@ export default function Experience() {
<Heading level={2} subtitle={t('subtitle')} className="text-white">
<span className="text-white">{t('title')}</span>
</Heading>
<div className="space-y-8 text-xl text-white/90 leading-relaxed font-medium">
<div className="space-y-8 text-lg md:text-xl text-white/90 leading-relaxed font-medium">
<p className="border-l-4 border-accent pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-xl">
{t('p1')}
</p>
@@ -36,12 +36,12 @@ export default function Experience() {
<div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12">
<div className="animate-fade-in">
<div className="text-4xl font-extrabold text-accent mb-4">{t('certifiedQuality')}</div>
<div className="text-lg font-bold uppercase tracking-widest text-white/60">{t('vdeApproved')}</div>
<div className="text-3xl md:text-4xl font-extrabold text-accent mb-4">{t('certifiedQuality')}</div>
<div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">{t('vdeApproved')}</div>
</div>
<div className="animate-fade-in" style={{ animationDelay: '100ms' }}>
<div className="text-4xl font-extrabold text-accent mb-4">{t('fullSpectrum')}</div>
<div className="text-lg font-bold uppercase tracking-widest text-white/60">{t('solutionsRange')}</div>
<div className="text-3xl md:text-4xl font-extrabold text-accent mb-4">{t('fullSpectrum')}</div>
<div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">{t('solutionsRange')}</div>
</div>
</div>
</div>

8
components/home/Hero.tsx
View File

@@ -13,7 +13,7 @@ export default function Hero() {
<Container className="relative z-10 text-left text-white w-full">
<div className="max-w-5xl animate-slide-up">
<Heading level={1} className="mb-4 md:mb-8 tracking-tight leading-[1.05] max-w-[15ch] md:max-w-none text-white">
<Heading level={1} className="mb-4 md:mb-8 max-w-[15ch] md:max-w-none text-white">
{t.rich('title', {
green: (chunks) => (
<span className="relative inline-block">
@@ -23,15 +23,15 @@ export default function Hero() {
)
})}
</Heading>
<p className="text-lg md:text-2xl text-white leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
<p className="text-lg md:text-xl text-white leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
{t('subtitle')}
</p>
<div className="flex flex-col md:flex-row gap-3 md:gap-6">
<Button href="/contact" variant="accent" size="lg" className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl">
<Button href="/contact" variant="accent" size="lg" className="group w-full md:w-auto md:h-16 md:px-10 md:text-lg">
{t('cta')}
<span className="ml-3 transition-transform group-hover:translate-x-1">&rarr;</span>
</Button>
<Button href="/products" variant="ghost" size="lg" className="group w-full md:w-auto text-white hover:bg-white/10 md:bg-white md:text-saturated md:hover:bg-neutral-light md:h-16 md:px-10 md:text-xl">
<Button href="/products" variant="ghost" size="lg" className="group w-full md:w-auto text-white hover:bg-white/10 md:bg-white md:text-saturated md:hover:bg-neutral-light md:h-16 md:px-10 md:text-lg">
{t('exploreProducts')}
</Button>
</div>

4
components/home/MeetTheTeam.tsx
View File

@@ -30,7 +30,7 @@ export default function MeetTheTeam() {
<div className="relative mb-12">
<div className="absolute -left-8 top-0 bottom-0 w-1 bg-accent rounded-full" />
<p className="text-2xl md:text-3xl leading-relaxed font-medium italic text-white/90 pl-8">
<p className="text-xl md:text-2xl leading-relaxed font-medium italic text-white/90 pl-8">
"{t('description')}"
</p>
</div>
@@ -50,7 +50,7 @@ export default function MeetTheTeam() {
<Image src="/uploads/2024/12/DSC07963-Large.webp" alt={teamT('klaus.name')} fill className="object-cover" />
</div>
</div>
<span className="text-white/60 font-bold text-sm uppercase tracking-widest">
<span className="text-white/60 font-bold text-xs md:text-sm uppercase tracking-widest">
{t('andNetwork')}
</span>
</div>

6
components/home/ProductCategories.tsx
View File

@@ -58,12 +58,12 @@ export default function ProductCategories() {
<div className="w-12 h-12 md:w-16 md:h-16 bg-white/10 backdrop-blur-md rounded-xl flex items-center justify-center mb-4 md:mb-6 border border-white/20">
<Image src={category.icon} alt="" width={40} height={40} className="w-8 h-8 md:w-10 md:h-10 brightness-0 invert" unoptimized />
</div>
<h3 className="text-2xl md:text-3xl font-bold mb-2 md:mb-4 leading-tight">{category.title}</h3>
<p className="text-white/80 text-base md:text-lg line-clamp-3 opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 max-h-24 md:max-h-0 group-hover:max-h-32">
<h3 className="text-xl md:text-2xl font-bold mb-2 md:mb-4 leading-tight">{category.title}</h3>
<p className="text-white/80 text-sm md:text-base line-clamp-3 opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 max-h-24 md:max-h-0 group-hover:max-h-32">
{category.desc}
</p>
</div>
<div className="flex items-center text-accent font-bold tracking-wider uppercase text-xs md:text-sm opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 delay-100">
<div className="flex items-center text-accent font-bold tracking-wider uppercase text-xs md:text-xs opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 delay-100">
{t('exploreCategory')} <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
</div>
</div>

4
components/home/RecentPosts.tsx
View File

@@ -22,7 +22,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
<Heading level={2} subtitle={t('latestNews')} className="mb-0">
{t('allArticles')}
</Heading>
<Link href={`/${locale}/blog`} className="group flex items-center text-primary font-bold text-lg touch-target">
<Link href={`/${locale}/blog`} className="group flex items-center text-primary font-bold text-base md:text-lg touch-target">
{t('allArticles')}
<span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
</Link>
@@ -56,7 +56,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
day: 'numeric'
})}
</div>
<h3 className="text-xl md:text-2xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
<h3 className="text-lg md:text-xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
{post.frontmatter.title}
</h3>
<div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">

2
components/home/VideoSection.tsx
View File

@@ -17,7 +17,7 @@ export default function VideoSection() {
</video>
<div className="absolute inset-0 bg-gradient-to-b from-primary/60 via-transparent to-primary/60 flex items-center justify-center">
<div className="max-w-5xl px-6 text-center animate-slide-up">
<h2 className="text-4xl md:text-6xl lg:text-7xl font-extrabold text-white leading-[1.1]">
<h2 className="text-3xl md:text-5xl lg:text-6xl font-extrabold text-white leading-[1.1]">
{t.rich('title', {
future: (chunks) => (
<span className="relative inline-block mx-2">

8
components/home/WhatWeDo.tsx
View File

@@ -14,11 +14,11 @@ export default function WhatWeDo() {
<Heading level={2} subtitle={t('expertise')}>
{t('title')}
</Heading>
<p className="text-lg md:text-xl text-text-secondary leading-relaxed">
<p className="text-base md:text-lg text-text-secondary leading-relaxed">
{t('subtitle')}
</p>
<div className="mt-8 md:mt-12 p-6 md:p-8 bg-saturated/10 rounded-2xl border border-saturated/10">
<p className="text-saturated font-bold text-base md:text-lg italic">
<p className="text-saturated font-bold text-base md:text-base italic">
"{t('quote')}"
</p>
</div>
@@ -33,8 +33,8 @@ export default function WhatWeDo() {
</span>
<div className="h-px flex-grow bg-neutral-medium" />
</div>
<h3 className="text-xl md:text-2xl font-bold mb-3 md:mb-4 text-saturated group-hover:text-accent-dark transition-colors">{t(`items.${idx}.title`)}</h3>
<p className="text-text-secondary text-base md:text-lg leading-relaxed">{t(`items.${idx}.description`)}</p>
<h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 text-saturated group-hover:text-accent-dark transition-colors">{t(`items.${idx}.title`)}</h3>
<p className="text-text-secondary text-base md:text-base leading-relaxed">{t(`items.${idx}.description`)}</p>
</div>
))}
</div>

10
components/home/WhyChooseUs.tsx
View File

@@ -14,7 +14,7 @@ export default function WhyChooseUs() {
<Heading level={2} subtitle={t('whyKlz')}>
{t('title')}
</Heading>
<p className="text-xl text-text-secondary leading-relaxed">
<p className="text-base md:text-lg text-text-secondary leading-relaxed">
{t('subtitle')}
</p>
@@ -26,7 +26,7 @@ export default function WhyChooseUs() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</svg>
</div>
<span className="font-bold text-saturated">{t(`features.${i}`)}</span>
<span className="font-bold text-saturated text-base md:text-base">{t(`features.${i}`)}</span>
</div>
))}
</div>
@@ -36,10 +36,10 @@ export default function WhyChooseUs() {
{[0, 1, 2, 3].map((idx) => (
<div key={idx} className="p-10 bg-white rounded-3xl border border-neutral-medium hover:border-accent transition-all duration-500 hover:shadow-xl group">
<div className="w-14 h-14 bg-saturated/10 rounded-2xl flex items-center justify-center mb-8 group-hover:bg-accent transition-colors duration-500">
<span className="text-saturated font-bold text-xl group-hover:text-primary-dark">0{idx + 1}</span>
<span className="text-saturated font-bold text-lg group-hover:text-primary-dark">0{idx + 1}</span>
</div>
<h3 className="text-2xl font-bold mb-4 text-saturated">{t(`items.${idx}.title`)}</h3>
<p className="text-text-secondary text-lg leading-relaxed">{t(`items.${idx}.description`)}</p>
<h3 className="text-xl font-bold mb-4 text-saturated">{t(`items.${idx}.title`)}</h3>
<p className="text-text-secondary text-base md:text-base leading-relaxed">{t(`items.${idx}.description`)}</p>
</div>
))}
</div>

8
components/ui/Button.tsx
View File

@@ -24,10 +24,10 @@ export function Button({ className, variant = 'primary', size = 'md', href, ...p
};
const sizes = {
sm: 'h-9 px-4 text-sm',
md: 'h-11 px-6 text-base',
lg: 'h-14 px-8 text-lg',
xl: 'h-16 px-10 text-xl',
sm: 'h-9 px-4 text-sm md:text-base',
md: 'h-11 px-6 text-base md:text-lg',
lg: 'h-14 px-8 text-base md:text-lg',
xl: 'h-16 px-10 text-lg md:text-xl',
};
const styles = cn(baseStyles, variants[variant], sizes[size], className);

4
components/ui/Callout.tsx
View File

@@ -54,9 +54,9 @@ export function Callout({ type = 'info', title, children, className }: CalloutPr
</div>
<div className="flex-1">
{title && (
<h4 className="font-bold text-lg mb-2">{title}</h4>
<h4 className="font-bold text-base md:text-lg mb-2">{title}</h4>
)}
<div className="prose prose-sm max-w-none">
<div className="prose prose-sm md:prose-base max-w-none">
{children}
</div>
</div>

26
components/ui/Heading.tsx
View File

@@ -1,15 +1,15 @@
import React from 'react';
import { cn } from './utils';
export function Heading({
level = 2,
children,
className,
export function Heading({
level = 2,
children,
className,
subtitle,
align = 'left'
}: {
level?: 1 | 2 | 3 | 4;
children: React.ReactNode;
}: {
level?: 1 | 2 | 3 | 4 | 5 | 6;
children: React.ReactNode;
className?: string;
subtitle?: string;
align?: 'left' | 'center' | 'right';
@@ -17,10 +17,12 @@ export function Heading({
const Tag = `h${level}` as any;
const sizes = {
1: 'text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold leading-[1.1]',
2: 'text-3xl md:text-5xl lg:text-6xl font-bold leading-tight',
3: 'text-2xl md:text-3xl lg:text-4xl font-bold',
4: 'text-xl md:text-2xl font-bold',
1: 'text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold leading-[1.1] tracking-tight',
2: 'text-3xl md:text-5xl lg:text-6xl font-bold leading-[1.2] tracking-tight',
3: 'text-2xl md:text-3xl lg:text-4xl font-bold leading-[1.3] tracking-tight',
4: 'text-xl md:text-2xl font-bold leading-[1.4]',
5: 'text-lg md:text-xl font-bold leading-[1.5]',
6: 'text-base md:text-lg font-semibold leading-[1.6]',
};
const alignments = {
@@ -30,7 +32,7 @@ export function Heading({
};
return (
<div className={cn('mb-8 md:mb-16 text-primary', alignments[align], className)}>
<div className={cn('mb-6 md:mb-12 text-primary', alignments[align], className)}>
{subtitle && (
<span className="inline-block text-accent font-bold tracking-widest uppercase text-xs md:text-sm mb-3 md:mb-4 animate-fade-in">
{subtitle}

71
styles/globals.css
View File

@@ -62,20 +62,73 @@
@layer base {
body {
@apply text-text-primary bg-neutral-light antialiased selection:bg-accent selection:text-primary-dark;
@apply text-base md:text-lg text-text-primary bg-neutral-light antialiased selection:bg-accent selection:text-primary-dark;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
@apply font-heading font-bold tracking-tight;
line-height: 1.7;
}
/* Mobile-first typography hierarchy */
h1 { @apply text-3xl md:text-6xl lg:text-7xl xl:text-8xl; }
h2 { @apply text-2xl md:text-5xl lg:text-6xl; }
h3 { @apply text-xl md:text-3xl lg:text-4xl; }
h4 { @apply text-lg md:text-2xl; }
h1, h2, h3, h4, h5, h6 {
@apply font-heading font-bold tracking-tight text-primary;
line-height: 1.2;
}
/* Enhanced Mobile-first typography hierarchy with fluid sizing */
h1 { @apply text-3xl md:text-6xl lg:text-7xl xl:text-8xl leading-[1.1]; }
h2 { @apply text-2xl md:text-5xl lg:text-6xl leading-[1.2]; }
h3 { @apply text-xl md:text-3xl lg:text-4xl leading-[1.3]; }
h4 { @apply text-lg md:text-2xl leading-[1.4]; }
h5 { @apply text-base md:text-xl leading-[1.5]; }
h6 { @apply text-sm md:text-lg leading-[1.6]; }
/* Paragraph and text styles */
p {
@apply mb-4 leading-relaxed;
}
/* Link styles */
a {
@apply text-primary hover:text-accent transition-colors duration-200 underline-offset-2 hover:underline;
}
/* List styles */
ul, ol {
@apply my-4 ml-6;
}
li {
@apply mb-2 leading-relaxed;
}
/* Small text */
small {
@apply text-sm md:text-base text-text-secondary;
}
/* Strong and emphasis */
strong {
@apply font-bold text-primary;
}
em {
@apply italic;
}
/* Blockquote */
blockquote {
@apply border-l-4 border-accent pl-6 my-6 italic text-text-secondary;
}
/* Code */
code {
@apply bg-neutral-medium/30 px-2 py-1 rounded font-mono text-sm;
}
/* Horizontal rule */
hr {
@apply border-neutral-medium my-8;
}
}
@layer components {

25
tailwind.config.js
View File

@@ -55,18 +55,21 @@ module.exports = {
heading: ['Inter', 'system-ui', 'sans-serif'],
body: ['Inter', 'system-ui', 'sans-serif'],
},
// Fluid Typography with CSS Clamp
// Enhanced Fluid Typography with CSS Clamp
// Improved readability with better line heights and spacing
fontSize: {
'xs': ['clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem)', { lineHeight: '1.5' }],
'sm': ['clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem)', { lineHeight: '1.5' }],
'base': ['clamp(0.9rem, 0.85rem + 0.3vw, 1rem)', { lineHeight: '1.6' }],
'lg': ['clamp(1rem, 0.95rem + 0.35vw, 1.125rem)', { lineHeight: '1.6' }],
'xl': ['clamp(1.1rem, 1rem + 0.5vw, 1.25rem)', { lineHeight: '1.5' }],
'2xl': ['clamp(1.3rem, 1.15rem + 0.75vw, 1.5rem)', { lineHeight: '1.4' }],
'3xl': ['clamp(1.6rem, 1.4rem + 1vw, 1.875rem)', { lineHeight: '1.3' }],
'4xl': ['clamp(1.9rem, 1.65rem + 1.25vw, 2.25rem)', { lineHeight: '1.3' }],
'5xl': ['clamp(2.4rem, 2rem + 2vw, 3rem)', { lineHeight: '1.2' }],
'6xl': ['clamp(3rem, 2.5rem + 2.5vw, 3.75rem)', { lineHeight: '1.2' }],
'xs': ['clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem)', { lineHeight: '1.6' }],
'sm': ['clamp(0.875rem, 0.8rem + 0.25vw, 1rem)', { lineHeight: '1.6' }],
'base': ['clamp(1rem, 0.9rem + 0.35vw, 1.125rem)', { lineHeight: '1.7' }],
'lg': ['clamp(1.125rem, 1rem + 0.4vw, 1.25rem)', { lineHeight: '1.7' }],
'xl': ['clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem)', { lineHeight: '1.6' }],
'2xl': ['clamp(1.5rem, 1.3rem + 0.75vw, 1.875rem)', { lineHeight: '1.5' }],
'3xl': ['clamp(1.875rem, 1.6rem + 1vw, 2.25rem)', { lineHeight: '1.4' }],
'4xl': ['clamp(2.25rem, 1.9rem + 1.25vw, 3rem)', { lineHeight: '1.3' }],
'5xl': ['clamp(3rem, 2.5rem + 2vw, 3.75rem)', { lineHeight: '1.25' }],
'6xl': ['clamp(3.75rem, 3rem + 2.5vw, 4.5rem)', { lineHeight: '1.2' }],
'7xl': ['clamp(4.5rem, 3.5rem + 3vw, 5.5rem)', { lineHeight: '1.15' }],
'8xl': ['clamp(5.5rem, 4rem + 4vw, 7rem)', { lineHeight: '1.1' }],
},
fontWeight: {
regular: '400',