64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
import { motion } from "framer-motion"
|
|
import { Button } from "@/components/ui/button"
|
|
import { useSite } from "@/context/SiteContext"
|
|
import { MessageCircle } from "lucide-react"
|
|
|
|
export default function CTA() {
|
|
const { data } = useSite()
|
|
|
|
const scrollToPaket = () => {
|
|
const el = document.querySelector("#paket")
|
|
if (el) el.scrollIntoView({ behavior: "smooth" })
|
|
}
|
|
|
|
const openWhatsApp = () => {
|
|
window.open(`https://wa.me/${data.contact.whatsapp}`, "_blank")
|
|
}
|
|
|
|
return (
|
|
<section id="kontak" className="relative bg-orange-400 border-b-4 border-black py-16 sm:py-20 overflow-hidden">
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div className="absolute top-5 left-10 w-32 h-32 bg-black rounded-full" />
|
|
<div className="absolute bottom-10 right-10 w-40 h-40 bg-black rounded-full" />
|
|
<div className="absolute top-1/2 left-1/2 w-20 h-20 bg-black rounded-full" />
|
|
</div>
|
|
|
|
<div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
viewport={{ once: true }}
|
|
className="max-w-2xl mx-auto space-y-6"
|
|
>
|
|
<h2 className="text-3xl sm:text-5xl font-black text-white leading-tight">
|
|
Siap Pasang Internet{" "}
|
|
<span className="bg-black text-orange-400 px-2">Cepat & Stabil?</span>
|
|
</h2>
|
|
<p className="text-lg font-bold text-white/90">
|
|
Daftar sekarang dan nikmati internet tanpa batas dengan harga terjangkau.
|
|
</p>
|
|
<div className="flex flex-wrap justify-center gap-4 pt-2">
|
|
<Button
|
|
variant="brutal"
|
|
size="lg"
|
|
className="bg-white hover:bg-gray-100 text-black text-base font-black"
|
|
onClick={scrollToPaket}
|
|
>
|
|
Daftar Sekarang
|
|
</Button>
|
|
<Button
|
|
variant="brutal"
|
|
size="lg"
|
|
className="bg-green-500 hover:bg-green-600 text-white text-base font-black"
|
|
onClick={openWhatsApp}
|
|
>
|
|
<MessageCircle className="h-5 w-5 mr-2" />
|
|
Hubungi WhatsApp
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |