mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 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 unoptimized
/> />
</Link> </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')} {t('tagline')}
</p> </p>
<div className="flex gap-4"> <div className="flex gap-4">
@@ -42,7 +42,7 @@ export default function Footer() {
{/* Links Columns */} {/* Links Columns */}
<div className="lg:col-span-2"> <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"> <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('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> <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>
<div className="lg:col-span-2"> <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"> <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}/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> <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 */} {/* Recent Posts Column */}
<div className="lg:col-span-4"> <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"> <ul className="space-y-6">
{[ {[
"Focus on wind farm construction: three typical cable challenges", "Focus on wind farm construction: three typical cable challenges",
@@ -70,7 +70,7 @@ export default function Footer() {
].map((post, i) => ( ].map((post, i) => (
<li key={i}> <li key={i}>
<Link href="#" className="group block"> <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} {post}
</p> </p>
<span className="text-xs text-white/40 uppercase tracking-widest">{t('readArticle')} &rarr;</span> <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> </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> <p>{t('copyright', { year: currentYear })}</p>
<div className="flex gap-8"> <div className="flex gap-8">
<Link href="/en" className="hover:text-white transition-colors">English</Link> <Link href="/en" className="hover:text-white transition-colors">English</Link>

10
components/Header.tsx
View File

@@ -92,7 +92,7 @@ export default function Header() {
href={`/${currentLocale}${item.href === '/' ? '' : item.href}`} href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
className={cn( className={cn(
textColorClass, textColorClass,
"hover:text-accent font-bold transition-all text-lg tracking-tight relative group" "hover:text-accent font-bold transition-all text-base md:text-lg tracking-tight relative group"
)} )}
> >
{item.label} {item.label}
@@ -102,7 +102,7 @@ export default function Header() {
</nav> </nav>
<div className={cn("hidden lg:flex items-center space-x-8", textColorClass)}> <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 <Link
href={getPathForLocale('en')} href={getPathForLocale('en')}
className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`} 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} key={item.href}
href={`/${currentLocale}${item.href === '/' ? '' : item.href}`} href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
className={cn( 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" isMobileMenuOpen ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
)} )}
style={{ transitionDelay: `${idx * 100}ms` }} 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", "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" 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 <Link
href={getPathForLocale('en')} href={getPathForLocale('en')}
className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`} className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
@@ -189,7 +189,7 @@ export default function Header() {
href={`/${currentLocale}/contact`} href={`/${currentLocale}/contact`}
variant="accent" variant="accent"
size="lg" 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')} {t('contact')}
</Button> </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="relative z-10">
<div className="inline-block relative mb-2"> <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')} {t('requestQuote')}
</h3> </h3>
<Scribble <Scribble
@@ -51,7 +51,7 @@ export default function ProductSidebar({ productName, productImage, datasheetPat
color="var(--color-accent)" color="var(--color-accent)"
/> />
</div> </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')} {t('requestQuoteDesc')}
</p> </p>
</div> </div>
@@ -77,10 +77,10 @@ export default function ProductSidebar({ productName, productImage, datasheetPat
</svg> </svg>
</div> </div>
<div className="flex-1 min-w-0"> <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')} {t('downloadDatasheet')}
</h3> </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')} {t('downloadDatasheetDesc')}
</p> </p>
</div> </div>

2
components/ProductTabs.tsx
View File

@@ -31,7 +31,7 @@ export default function ProductTabs({ children, technicalData, sidebar }: Produc
{technicalData && ( {technicalData && (
<div className="pt-24 border-t-2 border-neutral-dark/5"> <div className="pt-24 border-t-2 border-neutral-dark/5">
<div className="mb-16"> <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 className="h-1.5 w-24 bg-accent rounded-full" />
</div> </div>
<div className="not-prose"> <div className="not-prose">

6
components/blog/ChatBubble.tsx
View File

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

2
components/blog/SplitHeading.tsx
View File

@@ -14,7 +14,7 @@ export default function SplitHeading({ children, className = '', id }: SplitHead
id={id} id={id}
className={className} 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} {children}
</h2> </h2>
</div> </div>

4
components/blog/TableOfContents.tsx
View File

@@ -44,7 +44,7 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
return ( return (
<nav className="hidden lg:block w-full ml-12"> <nav className="hidden lg:block w-full ml-12">
<div className="relative pl-6 border-l border-neutral-200"> <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'} {locale === 'de' ? 'Inhalt' : 'Table of Contents'}
</h4> </h4>
<ul className="space-y-4"> <ul className="space-y-4">
@@ -60,7 +60,7 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
<a <a
href={`#${heading.id}`} href={`#${heading.id}`}
className={cn( 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 activeId === heading.id
? "text-primary font-bold translate-x-1" ? "text-primary font-bold translate-x-1"
: "text-text-secondary font-medium hover: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"> <Heading level={2} subtitle={t('subtitle')} className="text-white mb-6">
<span className="text-white">{t('title')}</span> <span className="text-white">{t('title')}</span>
</Heading> </Heading>
<p className="text-xl text-white/70 leading-relaxed"> <p className="text-lg md:text-xl text-white/70 leading-relaxed">
{t('description')} {t('description')}
</p> </p>
</div> </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"> <Heading level={2} subtitle={t('subtitle')} className="text-white">
<span className="text-white">{t('title')}</span> <span className="text-white">{t('title')}</span>
</Heading> </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"> <p className="border-l-4 border-accent pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-xl">
{t('p1')} {t('p1')}
</p> </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="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12">
<div className="animate-fade-in"> <div className="animate-fade-in">
<div className="text-4xl font-extrabold text-accent mb-4">{t('certifiedQuality')}</div> <div className="text-3xl md: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-base md:text-lg font-bold uppercase tracking-widest text-white/60">{t('vdeApproved')}</div>
</div> </div>
<div className="animate-fade-in" style={{ animationDelay: '100ms' }}> <div className="animate-fade-in" style={{ animationDelay: '100ms' }}>
<div className="text-4xl font-extrabold text-accent mb-4">{t('fullSpectrum')}</div> <div className="text-3xl md: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-base md:text-lg font-bold uppercase tracking-widest text-white/60">{t('solutionsRange')}</div>
</div> </div>
</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"> <Container className="relative z-10 text-left text-white w-full">
<div className="max-w-5xl animate-slide-up"> <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', { {t.rich('title', {
green: (chunks) => ( green: (chunks) => (
<span className="relative inline-block"> <span className="relative inline-block">
@@ -23,15 +23,15 @@ export default function Hero() {
) )
})} })}
</Heading> </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')} {t('subtitle')}
</p> </p>
<div className="flex flex-col md:flex-row gap-3 md:gap-6"> <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')} {t('cta')}
<span className="ml-3 transition-transform group-hover:translate-x-1">&rarr;</span> <span className="ml-3 transition-transform group-hover:translate-x-1">&rarr;</span>
</Button> </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')} {t('exploreProducts')}
</Button> </Button>
</div> </div>

4
components/home/MeetTheTeam.tsx
View File

@@ -30,7 +30,7 @@ export default function MeetTheTeam() {
<div className="relative mb-12"> <div className="relative mb-12">
<div className="absolute -left-8 top-0 bottom-0 w-1 bg-accent rounded-full" /> <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')}" "{t('description')}"
</p> </p>
</div> </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" /> <Image src="/uploads/2024/12/DSC07963-Large.webp" alt={teamT('klaus.name')} fill className="object-cover" />
</div> </div>
</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')} {t('andNetwork')}
</span> </span>
</div> </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"> <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 /> <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> </div>
<h3 className="text-2xl md:text-3xl font-bold mb-2 md:mb-4 leading-tight">{category.title}</h3> <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-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"> <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} {category.desc}
</p> </p>
</div> </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> {t('exploreCategory')} <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
</div> </div>
</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"> <Heading level={2} subtitle={t('latestNews')} className="mb-0">
{t('allArticles')} {t('allArticles')}
</Heading> </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')} {t('allArticles')}
<span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span> <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
</Link> </Link>
@@ -56,7 +56,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
day: 'numeric' day: 'numeric'
})} })}
</div> </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} {post.frontmatter.title}
</h3> </h3>
<div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4"> <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> </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="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"> <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', { {t.rich('title', {
future: (chunks) => ( future: (chunks) => (
<span className="relative inline-block mx-2"> <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')}> <Heading level={2} subtitle={t('expertise')}>
{t('title')} {t('title')}
</Heading> </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')} {t('subtitle')}
</p> </p>
<div className="mt-8 md:mt-12 p-6 md:p-8 bg-saturated/10 rounded-2xl border border-saturated/10"> <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')}" "{t('quote')}"
</p> </p>
</div> </div>
@@ -33,8 +33,8 @@ export default function WhatWeDo() {
</span> </span>
<div className="h-px flex-grow bg-neutral-medium" /> <div className="h-px flex-grow bg-neutral-medium" />
</div> </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> <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-lg leading-relaxed">{t(`items.${idx}.description`)}</p> <p className="text-text-secondary text-base md:text-base leading-relaxed">{t(`items.${idx}.description`)}</p>
</div> </div>
))} ))}
</div> </div>

10
components/home/WhyChooseUs.tsx
View File

@@ -14,7 +14,7 @@ export default function WhyChooseUs() {
<Heading level={2} subtitle={t('whyKlz')}> <Heading level={2} subtitle={t('whyKlz')}>
{t('title')} {t('title')}
</Heading> </Heading>
<p className="text-xl text-text-secondary leading-relaxed"> <p className="text-base md:text-lg text-text-secondary leading-relaxed">
{t('subtitle')} {t('subtitle')}
</p> </p>
@@ -26,7 +26,7 @@ export default function WhyChooseUs() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</svg> </svg>
</div> </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>
))} ))}
</div> </div>
@@ -36,10 +36,10 @@ export default function WhyChooseUs() {
{[0, 1, 2, 3].map((idx) => ( {[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 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"> <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> </div>
<h3 className="text-2xl font-bold mb-4 text-saturated">{t(`items.${idx}.title`)}</h3> <h3 className="text-xl 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> <p className="text-text-secondary text-base md:text-base leading-relaxed">{t(`items.${idx}.description`)}</p>
</div> </div>
))} ))}
</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 = { const sizes = {
sm: 'h-9 px-4 text-sm', sm: 'h-9 px-4 text-sm md:text-base',
md: 'h-11 px-6 text-base', md: 'h-11 px-6 text-base md:text-lg',
lg: 'h-14 px-8 text-lg', lg: 'h-14 px-8 text-base md:text-lg',
xl: 'h-16 px-10 text-xl', xl: 'h-16 px-10 text-lg md:text-xl',
}; };
const styles = cn(baseStyles, variants[variant], sizes[size], className); 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>
<div className="flex-1"> <div className="flex-1">
{title && ( {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} {children}
</div> </div>
</div> </div>

14
components/ui/Heading.tsx
View File

@@ -8,7 +8,7 @@ export function Heading({
subtitle, subtitle,
align = 'left' align = 'left'
}: { }: {
level?: 1 | 2 | 3 | 4; level?: 1 | 2 | 3 | 4 | 5 | 6;
children: React.ReactNode; children: React.ReactNode;
className?: string; className?: string;
subtitle?: string; subtitle?: string;
@@ -17,10 +17,12 @@ export function Heading({
const Tag = `h${level}` as any; const Tag = `h${level}` as any;
const sizes = { const sizes = {
1: 'text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold leading-[1.1]', 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-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', 3: 'text-2xl md:text-3xl lg:text-4xl font-bold leading-[1.3] tracking-tight',
4: 'text-xl md:text-2xl font-bold', 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 = { const alignments = {
@@ -30,7 +32,7 @@ export function Heading({
}; };
return ( 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 && ( {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"> <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} {subtitle}

71
styles/globals.css
View File

@@ -62,20 +62,73 @@
@layer base { @layer base {
body { 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; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} line-height: 1.7;
h1, h2, h3, h4, h5, h6 {
@apply font-heading font-bold tracking-tight;
} }
/* Mobile-first typography hierarchy */ h1, h2, h3, h4, h5, h6 {
h1 { @apply text-3xl md:text-6xl lg:text-7xl xl:text-8xl; } @apply font-heading font-bold tracking-tight text-primary;
h2 { @apply text-2xl md:text-5xl lg:text-6xl; } line-height: 1.2;
h3 { @apply text-xl md:text-3xl lg:text-4xl; } }
h4 { @apply text-lg md:text-2xl; }
/* 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 { @layer components {

25
tailwind.config.js
View File

@@ -55,18 +55,21 @@ module.exports = {
heading: ['Inter', 'system-ui', 'sans-serif'], heading: ['Inter', 'system-ui', 'sans-serif'],
body: ['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: { fontSize: {
'xs': ['clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem)', { lineHeight: '1.5' }], 'xs': ['clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem)', { lineHeight: '1.6' }],
'sm': ['clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem)', { lineHeight: '1.5' }], 'sm': ['clamp(0.875rem, 0.8rem + 0.25vw, 1rem)', { lineHeight: '1.6' }],
'base': ['clamp(0.9rem, 0.85rem + 0.3vw, 1rem)', { lineHeight: '1.6' }], 'base': ['clamp(1rem, 0.9rem + 0.35vw, 1.125rem)', { lineHeight: '1.7' }],
'lg': ['clamp(1rem, 0.95rem + 0.35vw, 1.125rem)', { lineHeight: '1.6' }], 'lg': ['clamp(1.125rem, 1rem + 0.4vw, 1.25rem)', { lineHeight: '1.7' }],
'xl': ['clamp(1.1rem, 1rem + 0.5vw, 1.25rem)', { lineHeight: '1.5' }], 'xl': ['clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem)', { lineHeight: '1.6' }],
'2xl': ['clamp(1.3rem, 1.15rem + 0.75vw, 1.5rem)', { lineHeight: '1.4' }], '2xl': ['clamp(1.5rem, 1.3rem + 0.75vw, 1.875rem)', { lineHeight: '1.5' }],
'3xl': ['clamp(1.6rem, 1.4rem + 1vw, 1.875rem)', { lineHeight: '1.3' }], '3xl': ['clamp(1.875rem, 1.6rem + 1vw, 2.25rem)', { lineHeight: '1.4' }],
'4xl': ['clamp(1.9rem, 1.65rem + 1.25vw, 2.25rem)', { lineHeight: '1.3' }], '4xl': ['clamp(2.25rem, 1.9rem + 1.25vw, 3rem)', { lineHeight: '1.3' }],
'5xl': ['clamp(2.4rem, 2rem + 2vw, 3rem)', { lineHeight: '1.2' }], '5xl': ['clamp(3rem, 2.5rem + 2vw, 3.75rem)', { lineHeight: '1.25' }],
'6xl': ['clamp(3rem, 2.5rem + 2.5vw, 3.75rem)', { lineHeight: '1.2' }], '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: { fontWeight: {
regular: '400', regular: '400',