63 lines
3.7 KiB
TypeScript
63 lines
3.7 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="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-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" />
|
|
<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>
|
|
|
|
<p className="text-slate-600 text-lg md:text-xl max-w-xl mx-auto md:mx-0 leading-relaxed mb-8">
|
|
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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|