65 lines
2.9 KiB
TypeScript
65 lines
2.9 KiB
TypeScript
import ArrowRightIcon from "@/assets/home/arrow-right.svg?react";
|
|
import {
|
|
CTA_BUTTON_LABEL,
|
|
CTA_DESCRIPTION,
|
|
CTA_FOOTNOTE,
|
|
CTA_HEADLINE,
|
|
CTA_URL_PLACEHOLDER,
|
|
} from "@/features/home/content/cta";
|
|
import { useAnalyze } from "@/features/home/hooks/useAnalyze";
|
|
import { useInView } from "@/hooks/useInView";
|
|
|
|
export function CTASection() {
|
|
const { ref, inView } = useInView<HTMLElement>();
|
|
const { url, setUrl, handleAnalyze } = useAnalyze();
|
|
|
|
return (
|
|
<section ref={ref} className="py-20 md:py-24 bg-navy-900 text-white px-6 relative overflow-hidden">
|
|
<div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-navy-800 via-navy-900 to-navy-900 opacity-80" />
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-violet-500/20 rounded-full blur-[100px] pointer-events-none" />
|
|
|
|
<div className="max-w-4xl mx-auto text-center relative z-10">
|
|
<h2
|
|
className={`display-36 md:display-48 mb-4 leading-tight text-transparent bg-clip-text bg-gradient-to-r from-marketing-cream via-marketing-lilac to-marketing-ice break-keep ${
|
|
inView ? "animate-fade-in-up" : "opacity-0"
|
|
}`}
|
|
>
|
|
{CTA_HEADLINE}
|
|
</h2>
|
|
|
|
<p
|
|
className={`body-18-md-20 font-light text-lavender-200 mb-10 max-w-2xl mx-auto break-keep ${
|
|
inView ? "animate-fade-in-up animation-delay-100" : "opacity-0"
|
|
}`}
|
|
>
|
|
{CTA_DESCRIPTION}
|
|
</p>
|
|
|
|
<div
|
|
className={`flex flex-col items-center justify-center gap-4 max-w-md mx-auto ${
|
|
inView ? "animate-fade-in-up animation-delay-200" : "opacity-0"
|
|
}`}
|
|
>
|
|
<input
|
|
type="url"
|
|
placeholder={CTA_URL_PLACEHOLDER}
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && handleAnalyze()}
|
|
className="w-full px-8 py-4 body-16-medium bg-gradient-to-r from-marketing-cream via-marketing-lilac to-marketing-ice border border-white/20 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50 shadow-sm text-center text-navy-900 placeholder:text-navy-900/60 break-keep"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={handleAnalyze}
|
|
className="w-full px-10 py-4 body-18 font-medium text-white rounded-full transition-all shadow-xl hover:shadow-2xl flex items-center justify-center gap-2 group cursor-pointer bg-gradient-to-r from-violet-700 to-navy-950 hover:from-violet-hover hover:to-violet-hover break-keep"
|
|
>
|
|
{CTA_BUTTON_LABEL}
|
|
<ArrowRightIcon aria-hidden="true" className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</button>
|
|
<p className="label-12 text-lavender-200/80 mt-2 break-keep">{CTA_FOOTNOTE}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|