Tail-Trails/tt-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updating website copy and adding new ProblemSolution.tsx

Browse Source
This commit is contained in:
itsamejms
2026-05-28 15:40:57 +01:00
parent b8bb2ede70
commit c5f4221c8d
8 changed files with 293 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/landing/CTA.tsx
+50 -8
View File
@@ -4,7 +4,7 @@ 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">
<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" />
@@ -12,18 +12,60 @@ const CTA = () => {
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">
<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-primary/70 text-lg md:text-xl max-w-2xl mx-auto mb-10">
Join thousands of dog owners who are making every walk count. It's free to get started!
<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. Download the app today!
</p>
<a href="/waitlist" className="bg-brand hover:bg-brand-light text-bg-primary px-12 py-6 rounded-2xl font-extrabold text-xl transition-all transform hover:scale-105 active:scale-95 mb-6 inline-flex items-center justify-center">
Join Waitlist
</a>
{/* Download Buttons Container */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 max-w-md mx-auto">
{/* App Store Active Link */}
<motion.a
href="https://apps.apple.com/us/app/tail-trails-club/id6758676111"
target="_blank"
rel="noopener noreferrer"
whileHover={{ scale: 1.03, y: -2 }}
whileTap={{ scale: 0.98 }}
className="w-full sm:w-auto min-w-[200px] bg-brand text-zinc-950 px-6 py-4 rounded-2xl font-bold flex items-center justify-center gap-3 transition-colors shadow-lg shadow-brand/10"
>
{/* Apple SVG Icon */}
<svg className="w-6 h-6 fill-current" viewBox="0 0 24 24">
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 4.17c.66-.81 1.11-1.93.99-3.06-1 .04-2.21.67-2.93 1.49-.62.69-1.16 1.84-1.01 2.96 1.12.09 2.27-.58 2.95-1.39z"/>
</svg>
<div className="text-left leading-tight">
<p className="text-[11px] uppercase opacity-80 font-medium">Download on the</p>
<p className="text-base font-extrabold -mt-0.5">App Store</p>
</div>
</motion.a>
{/* Play Store Disabled / Coming Soon Button */}
<div
className="w-full sm:w-auto min-w-[200px] bg-zinc-900 border border-zinc-800 text-zinc-400 px-6 py-4 rounded-2xl font-bold flex items-center justify-center gap-3 relative group"
title="Android version coming soon!"
>
{/* Play Store SVG Icon */}
<svg className="w-6 h-6 fill-current opacity-50" viewBox="0 0 24 24">
<path d="M5,3.14V20.86c0,0.5,0.4,0.92,0.91,0.85l9.92-9.92L5.91,2.29C5.4,2.22,5,2.64,5,3.14Z"/>
<path d="M17.23,10.37,6.83,4.41a0.39,0.39,0,0,0-.41,0L15.8,13.8Z"/>
<path d="M15.8,13.8l-9.38,9.38a0.39,0.39,0,0,0,.41,0l10.4-5.96A2.16,2.16,0,0,0,17.23,13.63,2.18,2.18,0,0,0,17.23,10.37Z"/>
</svg>
<div className="text-left leading-tight">
<p className="text-[11px] uppercase opacity-60 font-medium">Get it on</p>
<p className="text-base font-extrabold -mt-0.5 whitespace-nowrap">Google Play</p>
</div>
{/* Absolute overlay badge indicating "Coming Soon" */}
<span className="absolute -top-2.5 right-3 bg-zinc-800 text-zinc-400 text-[10px] uppercase font-black px-2 py-0.5 rounded-full tracking-wider border border-zinc-700">
Soon
</span>
</div>
</div>
</motion.div>
</div>
@@ -32,4 +74,4 @@ const CTA = () => {
);
};
export default CTA;
export default CTA;