Rasyid
6e78b49731
* feat: integrate payload cms to landing page * feat: add payload configuration and update TypeScript target * fix: update TypeScript paths for payload configuration * refactor: update config import paths to use local payload.config * fix: update quotation marks for testimonials to use HTML entities * fix: include withPayload in Next.js plugins for proper configuration
67 lines
2.7 KiB
TypeScript
67 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms';
|
|
import { motion, useInView } from 'framer-motion';
|
|
import { useRef } from 'react';
|
|
|
|
export function CallToAction() {
|
|
const ref = useRef(null);
|
|
const isInView = useInView(ref, { once: true, amount: 0.2 });
|
|
|
|
return (
|
|
<section className="w-full py-20 md:py-32 relative overflow-hidden">
|
|
{/* Background Elements */}
|
|
<div className="absolute inset-0 -z-10">
|
|
<div className="absolute inset-0 bg-gradient-to-b from-background to-primary/20" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.2),transparent_70%)]" />
|
|
</div>
|
|
|
|
<div className="container px-4 md:px-6" ref={ref}>
|
|
<motion.div
|
|
className="max-w-4xl mx-auto rounded-2xl overflow-hidden border shadow-lg"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<div className="relative p-8 md:p-12 lg:p-16 bg-background">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-blue-400/5" />
|
|
|
|
<div className="relative z-10 text-center">
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
|
|
Siap Menjadi{' '}
|
|
<span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
|
|
Programmer Handal?
|
|
</span>
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
|
|
Bergabunglah dengan komunitas IMPHNEN sekarang dan mulai
|
|
perjalanan programming mu dengan cara yang menyenangkan!
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
size="lg"
|
|
className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90"
|
|
>
|
|
Gabung Discord
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="border-primary hover:bg-primary/10"
|
|
>
|
|
Join Facebook Group
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Decorative Elements */}
|
|
<div className="absolute -top-12 -left-12 w-24 h-24 rounded-full bg-primary/10 blur-2xl" />
|
|
<div className="absolute -bottom-12 -right-12 w-24 h-24 rounded-full bg-blue-400/10 blur-2xl" />
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|