tknuth/QR-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Impeccable

Browse Source
This commit is contained in:
Timo Knuth
2026-04-29 20:34:09 +02:00
parent 9b31e77daa
commit aab808c553
22 changed files with 1827 additions and 684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/marketing/ReprintCalculatorTeaser.tsx
View File

@@ -9,48 +9,41 @@ export const ReprintCalculatorTeaser: React.FC = () => {
return (
<section className="py-24 bg-white relative overflow-hidden">
<div className="container mx-auto px-4 relative z-10">
<div className="bg-gradient-to-br from-indigo-50 to-white border border-indigo-100 rounded-3xl p-8 md:p-12 lg:p-16 flex flex-col md:flex-row items-center justify-between gap-12 shadow-sm hover:shadow-md transition-shadow duration-500">
<div className="flex flex-col md:flex-row items-center justify-between gap-12 bg-white border border-[#e5edf5] rounded-lg p-8 md:p-12 lg:p-16" style={{boxShadow:'rgba(50,50,93,0.12) 0px 8px 20px -8px'}}>
<div className="flex-1 text-center md:text-left">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-100 text-indigo-700 text-sm font-medium mb-6">
<TrendingUp className="w-4 h-4" />
<div className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded border border-[rgba(83,58,253,0.15)] mb-5" style={{background:'oklch(0.94 0.02 270)',color:'#533afd',fontSize:11,fontWeight:500,letterSpacing:'0.06em',textTransform:'uppercase'}}>
<TrendingUp style={{width:12,height:12}} aria-hidden="true" />
<span>ROI Calculator</span>
</div>
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-900 mb-6 leading-tight">
Are you burning budget on <br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-600">Static Reprints?</span>
<h2 style={{fontSize:'clamp(1.875rem,4vw,3rem)',fontWeight:700,lineHeight:1.1,color:'#061b31',marginBottom:'1.25rem',letterSpacing:'-0.02em'}}>
Are you burning budget on{' '}
<span style={{color:'#533afd'}}>Static Reprints?</span>
</h2>
<p className="text-slate-600 text-lg md:text-xl max-w-xl mx-auto md:mx-0 leading-relaxed mb-8">
<p style={{color:'#64748d',fontSize:'1.0625rem',lineHeight:1.6,maxWidth:'52ch',margin:'0 auto 2rem'}}>
Find out exactly how much you can save by switching to dynamic QR codes. Our calculator reveals your savings potential in seconds.
</p>
<Link href="/reprint-calculator">
<Button
size="lg"
variant="primary"
className="h-14 px-8 text-lg hover:translate-x-1 transition-transform"
>
Calculate Savings <ArrowRight className="w-5 h-5 ml-2" />
<Button size="lg" className="h-14 px-8">
Calculate Savings <ArrowRight className="w-4 h-4 ml-2" aria-hidden="true" />
</Button>
</Link>
</div>
<div className="flex-shrink-0 w-full md:w-auto flex justify-center md:justify-end">
<div className="relative group">
<div className="absolute -inset-1 bg-gradient-to-r from-indigo-500 to-blue-500 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-1000 group-hover:duration-200"></div>
<div className="relative bg-white rounded-xl p-8 border border-slate-100 w-full max-w-xs text-center shadow-lg">
<div className="w-16 h-16 bg-indigo-50 rounded-2xl flex items-center justify-center mx-auto mb-6 text-indigo-600">
<Calculator className="w-8 h-8" />
</div>
<h3 className="text-lg font-bold text-slate-900 mb-2">Cost Analysis</h3>
<p className="text-slate-500 text-sm mb-6">
Enter your print volume and update frequency to see your hidden costs.
</p>
<div className="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
<div className="h-full w-2/3 bg-indigo-500 rounded-full animate-pulse"></div>
</div>
<div className="bg-white border border-[#e5edf5] rounded-lg p-7 w-full max-w-[260px] text-center" style={{boxShadow:'rgba(50,50,93,0.25) 0px 20px 40px -20px,rgba(0,0,0,0.08) 0px 10px 20px -10px'}}>
<div className="flex items-center justify-center mx-auto mb-4 text-[#533afd]" style={{width:44,height:44,background:'oklch(0.94 0.02 270)',borderRadius:6}}>
<Calculator style={{width:22,height:22}} aria-hidden="true" />
</div>
<h3 className="font-semibold text-[#061b31] mb-2" style={{fontSize:'0.9375rem'}}>Cost Analysis</h3>
<p className="text-[#64748d] leading-relaxed" style={{fontSize:'0.8125rem'}}>
Enter your print volume and update frequency to see your hidden costs.
</p>
<div className="mt-5 h-0.5 w-full bg-[#e5edf5] rounded-sm overflow-hidden">
<div className="h-full w-2/3 bg-[#533afd] rounded-sm" />
</div>
</div>
</div>