56 lines
3.5 KiB
TypeScript
56 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { ArrowRight, Calculator, TrendingUp } from 'lucide-react';
|
|
|
|
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="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-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 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 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" 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="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>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|