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

components

Browse Source
This commit is contained in:
Marc Mintel
2026-01-19 01:46:07 +01:00
parent ac2add1984
commit 46266a7bbc
20 changed files with 234 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[locale]/blog/[slug]/page.tsx
View File

@@ -38,7 +38,7 @@ export async function generateMetadata({ params: { locale, slug } }: BlogPostPro
import Link from 'next/link';
import VisualLinkPreview from '@/components/blog/VisualLinkPreview';
import Callout from '@/components/blog/Callout';
import { Callout } from '@/components/ui';
import HighlightBox from '@/components/blog/HighlightBox';
import Stats from '@/components/blog/Stats';
import AnimatedImage from '@/components/blog/AnimatedImage';

19
app/[locale]/contact/page.tsx
View File

@@ -1,5 +1,5 @@
import { useTranslations } from 'next-intl';
import { Section, Container, Button, Heading, Card } from '@/components/ui';
import { Section, Container, Button, Heading, Card, Input, Textarea, Label } from '@/components/ui';
export default function ContactPage() {
const t = useTranslations('Contact');
@@ -97,43 +97,40 @@ export default function ContactPage() {
</Heading>
<form className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
<div className="space-y-1 md:space-y-2">
<label htmlFor="name" className="text-[10px] md:text-xs font-extrabold text-primary uppercase tracking-widest">{t('form.name')}</label>
<input
<Label htmlFor="name">{t('form.name')}</Label>
<Input
type="text"
id="name"
name="name"
autoComplete="name"
enterKeyHint="next"
className="w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral rounded-xl md:rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-sm md:text-lg"
placeholder={t('form.namePlaceholder')}
required
/>
</div>
<div className="space-y-1 md:space-y-2">
<label htmlFor="email" className="text-[10px] md:text-xs font-extrabold text-primary uppercase tracking-widest">{t('form.email')}</label>
<input
<Label htmlFor="email">{t('form.email')}</Label>
<Input
type="email"
id="email"
name="email"
autoComplete="email"
inputMode="email"
enterKeyHint="next"
className="w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral rounded-xl md:rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-sm md:text-lg"
placeholder={t('form.emailPlaceholder')}
required
/>
</div>
<div className="md:col-span-2 space-y-1 md:space-y-2">
<label htmlFor="message" className="text-[10px] md:text-xs font-extrabold text-primary uppercase tracking-widest">{t('form.message')}</label>
<textarea
<Label htmlFor="message">{t('form.message')}</Label>
<Textarea
id="message"
name="message"
rows={4}
enterKeyHint="send"
className="w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral rounded-xl md:rounded-2xl border-2 border-transparent focus:border-primary focus:bg-white transition-all outline-none text-sm md:text-lg resize-none"
placeholder={t('form.messagePlaceholder')}
required
></textarea>
/>
</div>
<div className="md:col-span-2 pt-2 md:pt-4">
<Button type="submit" size="lg" className="w-full shadow-xl shadow-primary/20 md:h-16 md:px-10 md:text-xl active:scale-[0.98] transition-transform">

1
app/[locale]/page.tsx
View File

@@ -1,4 +1,3 @@
import { useTranslations } from 'next-intl';
import Hero from '@/components/home/Hero';
import ProductCategories from '@/components/home/ProductCategories';
import WhatWeDo from '@/components/home/WhatWeDo';

3
app/[locale]/products/[slug]/page.tsx
View File

@@ -8,8 +8,7 @@ import RelatedProducts from '@/components/RelatedProducts';
import Link from 'next/link';
import Image from 'next/image';
import { getTranslations } from 'next-intl/server';
import { Section, Container, Heading, Badge, Button } from '@/components/ui';
import Scribble from '@/components/Scribble';
import { Section, Container, Badge } from '@/components/ui';
import { Metadata } from 'next';
interface ProductPageProps {

13
components/RequestQuoteForm.tsx
View File

@@ -2,6 +2,7 @@
import React, { useState } from 'react';
import { useTranslations } from 'next-intl';
import { Input, Textarea, Button } from '@/components/ui';
interface RequestQuoteFormProps {
productName: string;
@@ -56,35 +57,33 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
<form onSubmit={handleSubmit} className="space-y-6">
<div className="space-y-4">
<div className="space-y-1.5">
<input
<Input
type="email"
id="email"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-4 py-3 bg-neutral-light/50 border border-neutral-dark/10 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent focus:bg-white transition-all duration-300 placeholder:text-neutral-dark/40 text-sm"
placeholder={t('email')}
/>
</div>
<div className="space-y-1.5">
<textarea
<Textarea
id="request"
required
rows={4}
value={request}
onChange={(e) => setRequest(e.target.value)}
className="w-full px-4 py-3 bg-neutral-light/50 border border-neutral-dark/10 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent focus:bg-white transition-all duration-300 placeholder:text-neutral-dark/40 text-sm resize-none"
placeholder={t('message')}
/>
</div>
</div>
<div className="space-y-4">
<button
<Button
type="submit"
disabled={status === 'submitting'}
className="w-full bg-primary text-white font-bold py-3.5 px-6 rounded-xl hover:bg-primary-dark hover:shadow-lg active:scale-[0.98] transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 group"
className="w-full py-3.5 rounded-xl flex items-center justify-center gap-2 group"
>
{status === 'submitting' ? (
<>
@@ -102,7 +101,7 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
</svg>
</>
)}
</button>
</Button>
<p className="text-[8px] text-center text-text-secondary/40 uppercase tracking-[0.15em] font-medium px-2">
{t('privacyNote')}

10
components/home/Hero.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { useTranslations } from 'next-intl';
import { Container, Button } from '@/components/ui';
import { Container, Button, Section, Heading } from '@/components/ui';
import Scribble from '@/components/Scribble';
import HeroIllustration from './HeroIllustration';
@@ -8,12 +8,12 @@ export default function Hero() {
const t = useTranslations('Home.hero');
return (
<section className="relative h-[70vh] md:h-[90vh] flex items-center justify-center overflow-hidden bg-primary-dark">
<Section className="relative h-[70vh] md:h-[90vh] flex items-center justify-center overflow-hidden bg-primary-dark py-0 md:py-0 lg:py-0">
<HeroIllustration />
<Container className="relative z-10 text-left text-white w-full">
<div className="max-w-5xl animate-slide-up">
<h1 className="text-4xl md:text-7xl lg:text-8xl font-extrabold mb-4 md:mb-8 tracking-tight leading-[1.05] max-w-[15ch] md:max-w-none">
<Heading level={1} className="mb-4 md:mb-8 tracking-tight leading-[1.05] max-w-[15ch] md:max-w-none">
{t.rich('title', {
green: (chunks) => (
<span className="relative inline-block">
@@ -22,7 +22,7 @@ export default function Hero() {
</span>
)
})}
</h1>
</Heading>
<p className="text-lg md:text-2xl text-white/70 leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
{t('subtitle')}
</p>
@@ -43,6 +43,6 @@ export default function Hero() {
<div className="w-1 h-2 bg-white rounded-full" />
</div>
</div>
</section>
</Section>
);
}

131
components/ui.tsx
View File

@@ -1,130 +1 @@
import React from 'react';
import Link from 'next/link';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost' | 'white';
size?: 'sm' | 'md' | 'lg' | 'xl';
href?: string;
className?: string;
children?: React.ReactNode;
}
export function Button({ className, variant = 'primary', size = 'md', href, ...props }: ButtonProps) {
const baseStyles = 'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95';
const variants = {
primary: 'bg-primary text-white hover:bg-primary-dark shadow-md hover:shadow-lg',
secondary: 'bg-secondary text-white hover:bg-secondary-light shadow-md hover:shadow-lg',
accent: 'bg-accent text-primary-dark hover:bg-accent-dark shadow-md hover:shadow-lg',
outline: 'border-2 border-primary bg-transparent hover:bg-primary hover:text-white text-primary',
ghost: 'hover:bg-primary-light text-primary',
white: 'bg-white text-primary hover:bg-neutral-light shadow-md hover:shadow-lg',
};
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',
};
const styles = cn(baseStyles, variants[variant], sizes[size], className);
if (href) {
return (
<Link href={href} className={styles}>
{props.children}
</Link>
);
}
return (
<button className={styles} {...props} />
);
}
export function Section({ className, children, ...props }: React.HTMLAttributes<HTMLElement>) {
return (
<section className={cn('py-16 md:py-28 lg:py-36 overflow-hidden content-visibility-auto', className)} {...props}>
{children}
</section>
);
}
export function Container({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
return (
<div className={cn('container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl', className)} {...props}>
{children}
</div>
);
}
export function Heading({
level = 2,
children,
className,
subtitle,
align = 'left'
}: {
level?: 1 | 2 | 3 | 4;
children: React.ReactNode;
className?: string;
subtitle?: string;
align?: 'left' | 'center' | 'right';
}) {
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',
};
const alignments = {
left: 'text-left',
center: 'text-center mx-auto',
right: 'text-right',
};
return (
<div className={cn('mb-8 md:mb-16', 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}
</span>
)}
<Tag className={cn(sizes[level as keyof typeof sizes], 'text-primary')}>
{children}
</Tag>
</div>
);
}
export function Card({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
return (
<div className={cn('premium-card overflow-hidden', className)} {...props}>
{children}
</div>
);
}
export function Badge({ children, className, variant = 'primary' }: { children: React.ReactNode, className?: string, variant?: 'primary' | 'accent' | 'neutral' }) {
const variants = {
primary: 'bg-primary-light text-primary',
accent: 'bg-accent-light text-accent-dark',
neutral: 'bg-neutral-medium text-text-secondary',
};
return (
<span className={cn('inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider', variants[variant], className)}>
{children}
</span>
);
}
export * from './ui/index';

16
components/ui/Badge.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import { cn } from './utils';
export function Badge({ children, className, variant = 'primary' }: { children: React.ReactNode, className?: string, variant?: 'primary' | 'accent' | 'neutral' }) {
const variants = {
primary: 'bg-primary-light text-primary',
accent: 'bg-accent-light text-accent-dark',
neutral: 'bg-neutral-medium text-text-secondary',
};
return (
<span className={cn('inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider', variants[variant], className)}>
{children}
</span>
);
}

45
components/ui/Button.tsx Normal file
View File

@@ -0,0 +1,45 @@
import React from 'react';
import Link from 'next/link';
import { cn } from './utils';
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost' | 'white';
size?: 'sm' | 'md' | 'lg' | 'xl';
href?: string;
className?: string;
children?: React.ReactNode;
}
export function Button({ className, variant = 'primary', size = 'md', href, ...props }: ButtonProps) {
const baseStyles = 'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95';
const variants = {
primary: 'bg-primary text-white hover:bg-primary-dark shadow-md hover:shadow-lg',
secondary: 'bg-secondary text-white hover:bg-secondary-light shadow-md hover:shadow-lg',
accent: 'bg-accent text-primary-dark hover:bg-accent-dark shadow-md hover:shadow-lg',
outline: 'border-2 border-primary bg-transparent hover:bg-primary hover:text-white text-primary',
ghost: 'hover:bg-primary-light text-primary',
white: 'bg-white text-primary hover:bg-neutral-light shadow-md hover:shadow-lg',
};
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',
};
const styles = cn(baseStyles, variants[variant], sizes[size], className);
if (href) {
return (
<Link href={href} className={styles}>
{props.children}
</Link>
);
}
return (
<button className={styles} {...props} />
);
}

8
components/blog/Callout.tsx → components/ui/Callout.tsx
View File

@@ -1,9 +1,11 @@
import React from 'react';
import { cn } from './utils';
interface CalloutProps {
type?: 'info' | 'warning' | 'success' | 'tip';
title?: string;
children: React.ReactNode;
className?: string;
}
const icons = {
@@ -43,11 +45,11 @@ const iconColors = {
tip: 'text-purple-500',
};
export default function Callout({ type = 'info', title, children }: CalloutProps) {
export function Callout({ type = 'info', title, children, className }: CalloutProps) {
return (
<div className={`my-8 p-6 rounded-xl border-2 ${styles[type]}`}>
<div className={cn('my-8 p-6 rounded-xl border-2', styles[type], className)}>
<div className="flex gap-4">
<div className={`flex-shrink-0 ${iconColors[type]}`}>
<div className={cn('flex-shrink-0', iconColors[type])}>
{icons[type]}
</div>
<div className="flex-1">

10
components/ui/Card.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
import { cn } from './utils';
export function Card({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
return (
<div className={cn('premium-card overflow-hidden', className)} {...props}>
{children}
</div>
);
}

10
components/ui/Container.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
import { cn } from './utils';
export function Container({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
return (
<div className={cn('container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl', className)} {...props}>
{children}
</div>
);
}

44
components/ui/Heading.tsx Normal file
View File

@@ -0,0 +1,44 @@
import React from 'react';
import { cn } from './utils';
export function Heading({
level = 2,
children,
className,
subtitle,
align = 'left'
}: {
level?: 1 | 2 | 3 | 4;
children: React.ReactNode;
className?: string;
subtitle?: string;
align?: 'left' | 'center' | 'right';
}) {
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',
};
const alignments = {
left: 'text-left',
center: 'text-center mx-auto',
right: 'text-right',
};
return (
<div className={cn('mb-8 md:mb-16', 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}
</span>
)}
<Tag className={cn(sizes[level as keyof typeof sizes], 'text-primary')}>
{children}
</Tag>
</div>
);
}

18
components/ui/Input.tsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react';
import { cn } from './utils';
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
className?: string;
}
export function Input({ className, ...props }: InputProps) {
return (
<input
className={cn(
'w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral-light/50 border border-neutral-dark/10 rounded-xl md:rounded-2xl focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent focus:bg-white transition-all duration-300 placeholder:text-neutral-dark/40 text-sm md:text-lg',
className
)}
{...props}
/>
);
}

18
components/ui/Label.tsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react';
import { cn } from './utils';
export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
className?: string;
}
export function Label({ className, ...props }: LabelProps) {
return (
<label
className={cn(
'text-[10px] md:text-xs font-extrabold text-primary uppercase tracking-widest',
className
)}
{...props}
/>
);
}

10
components/ui/Section.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
import { cn } from './utils';
export function Section({ className, children, ...props }: React.HTMLAttributes<HTMLElement>) {
return (
<section className={cn('py-16 md:py-28 lg:py-36 overflow-hidden content-visibility-auto', className)} {...props}>
{children}
</section>
);
}

18
components/ui/Textarea.tsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react';
import { cn } from './utils';
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
className?: string;
}
export function Textarea({ className, ...props }: TextareaProps) {
return (
<textarea
className={cn(
'w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral-light/50 border border-neutral-dark/10 rounded-xl md:rounded-2xl focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent focus:bg-white transition-all duration-300 placeholder:text-neutral-dark/40 text-sm md:text-lg resize-none',
className
)}
{...props}
/>
);
}

11
components/ui/index.ts Normal file
View File

@@ -0,0 +1,11 @@
export * from './utils';
export * from './Button';
export * from './Section';
export * from './Container';
export * from './Heading';
export * from './Card';
export * from './Badge';
export * from './Input';
export * from './Textarea';
export * from './Label';
export * from './Callout';

6
components/ui/utils.ts Normal file
View File

@@ -0,0 +1,6 @@
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

2
tsconfig.tsbuildinfo
View File

File diff suppressed because one or more lines are too long