63 lines
3.0 KiB
TypeScript
63 lines
3.0 KiB
TypeScript
import { motion, useInView } from "framer-motion";
|
|
import { useRef } from "react";
|
|
import { MessageCircle, Route } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
const CTASection = () => {
|
|
const ref = useRef(null);
|
|
const inView = useInView(ref, { once: true, margin: "-100px" });
|
|
|
|
return (
|
|
<section className="relative section-padding overflow-hidden" ref={ref}>
|
|
<div className="absolute inset-0 gradient-primary opacity-90" />
|
|
<div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23000%22%20fill-opacity%3D%220.05%22%3E%3Cpath%20d%3D%22M36%2034v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6%2034v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6%204V0H4v4H0v2h4v4h2V6h4V4H6z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E')] opacity-30" />
|
|
|
|
{/* Road animation */}
|
|
<div className="absolute bottom-0 left-0 right-0 h-16 overflow-hidden opacity-10">
|
|
<motion.div
|
|
animate={{ x: ["-50%", "0%"] }}
|
|
transition={{ repeat: Infinity, duration: 3, ease: "linear" }}
|
|
className="absolute bottom-6 left-0 w-[200%] h-[2px]"
|
|
style={{ backgroundImage: "repeating-linear-gradient(90deg, white, white 40px, transparent 40px, transparent 80px)" }}
|
|
/>
|
|
</div>
|
|
|
|
<div className="container mx-auto relative z-10 text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={inView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={inView ? { scale: 1 } : {}}
|
|
transition={{ duration: 0.5, type: "spring" }}
|
|
className="w-20 h-20 rounded-full bg-primary-foreground/10 flex items-center justify-center mx-auto mb-8"
|
|
>
|
|
<Route className="w-10 h-10 text-primary-foreground" />
|
|
</motion.div>
|
|
|
|
<h2 className="font-display text-4xl md:text-5xl lg:text-6xl font-bold tracking-wider text-primary-foreground mb-6">
|
|
QUER FAZER PARTE?
|
|
</h2>
|
|
<p className="text-lg md:text-xl text-primary-foreground/80 mb-8 max-w-2xl mx-auto">
|
|
Gostou do ITAROTA79? Venha acelerar com a gente e faça parte dessa irmandade.
|
|
A estrada está esperando por você.
|
|
</p>
|
|
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeDhmum1QRAj56HDdkw2w1ZtA7ulZOoXht5fbfPTaSbWGsu9A/viewform" target="_blank" rel="noopener noreferrer">
|
|
<Button
|
|
size="lg"
|
|
className="bg-secondary text-secondary-foreground hover:bg-secondary/90 font-display tracking-wider text-base px-10 py-6 gap-2 shadow-2xl"
|
|
>
|
|
<MessageCircle className="w-5 h-5" />
|
|
Falar no WhatsApp
|
|
</Button>
|
|
</a>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default CTASection;
|