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

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>