Marc Mintel
34bb91c04b
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 8s
Build & Deploy / 🧪 QA (push) Failing after 1m53s
Build & Deploy / 🏗️ Build (push) Has been skipped
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 1s
CI - Lint, Typecheck & Test / quality-assurance (pull_request) Failing after 2m3s
89 lines
3.4 KiB
TypeScript
89 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { cn } from '@/components/ui/utils';
|
|
import dynamic from 'next/dynamic';
|
|
|
|
const BrochureModal = dynamic(() => import('./BrochureModal'), { ssr: false });
|
|
|
|
interface Props {
|
|
className?: string;
|
|
compact?: boolean;
|
|
}
|
|
|
|
/**
|
|
* BrochureCTA — Shows a button that opens a modal asking for an email address.
|
|
* The full-catalog PDF is ONLY revealed after email submission.
|
|
* No direct download link is exposed anywhere.
|
|
*/
|
|
export default function BrochureCTA({ className, compact = false }: Props) {
|
|
const t = useTranslations('Brochure');
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<div className={cn(className)}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(true)}
|
|
className={cn(
|
|
'group relative flex w-full items-center gap-4 overflow-hidden rounded-[28px] bg-[#000d26] border border-white/[0.08] text-left cursor-pointer',
|
|
'transition-all duration-300 hover:border-[#82ed20]/30 hover:shadow-[0_8px_30px_rgba(0,0,0,0.3)]',
|
|
compact ? 'p-4 md:p-5' : 'p-6 md:p-8',
|
|
)}
|
|
>
|
|
{/* Green top accent */}
|
|
<span className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#82ed20]/50 to-transparent" />
|
|
|
|
{/* Icon */}
|
|
<span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#82ed20]/10 border border-[#82ed20]/20 group-hover:bg-[#82ed20] transition-colors duration-300">
|
|
<svg
|
|
className="h-5 w-5 text-[#82ed20] group-hover:text-[#000d26] transition-colors duration-300"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={1.5}
|
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
|
|
{/* Labels */}
|
|
<span className="flex-1 min-w-0">
|
|
<span className="block text-[9px] font-black uppercase tracking-[0.2em] text-[#82ed20] mb-0.5">
|
|
PDF Katalog
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
'block font-black text-white uppercase tracking-tight group-hover:text-[#82ed20] transition-colors duration-200',
|
|
compact ? 'text-base' : 'text-lg md:text-xl',
|
|
)}
|
|
>
|
|
{t('ctaTitle')}
|
|
</span>
|
|
</span>
|
|
|
|
{/* Arrow */}
|
|
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-[#82ed20] group-hover:text-[#000d26] transition-all duration-300">
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2.5}
|
|
d="M9 5l7 7-7 7"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<BrochureModal isOpen={open} onClose={() => setOpen(false)} />
|
|
</>
|
|
);
|
|
}
|