itsamejms
38 lines
1.7 KiB
TypeScript
38 lines
1.7 KiB
TypeScript
import { motion } from 'motion/react';
|
|
import StoreButtons from './StoreButtons';
|
|
|
|
const CTA = () => {
|
|
return (
|
|
<section className="py-20">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="glass rounded-[48px] p-8 md:p-20 text-center relative overflow-hidden border border-border-subtle">
|
|
<div className="absolute top-0 left-0 w-full h-full bg-brand/5 -z-10" />
|
|
<div className="absolute -top-24 -right-24 w-64 h-64 bg-brand/10 blur-[80px] rounded-full" />
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ type: "spring", stiffness: 100, damping: 20 }}
|
|
>
|
|
<h2 className="text-4xl md:text-6xl font-display font-extrabold mb-6 text-text-primary tracking-tight">
|
|
Ready to Start Your <br />
|
|
<span className="text-brand">Walking Journey?</span>
|
|
</h2>
|
|
<p className="text-text-secondary text-lg md:text-xl max-w-2xl mx-auto mb-10">
|
|
Join thousands of dog owners who are making every walk count. TailTrails is completely free — download it today!
|
|
</p>
|
|
|
|
<StoreButtons className="max-w-md mx-auto" />
|
|
<p className="text-sm text-text-muted font-medium mt-5 flex items-center justify-center gap-2">
|
|
<span className="inline-flex items-center px-2.5 py-1 rounded-full bg-brand/15 text-brand text-xs font-bold uppercase tracking-wider">Free</span>
|
|
100% free — no subscription, no ads, no catch.
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default CTA; |