92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
import React from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
interface HeroSectionProps {
|
|
image: string;
|
|
headline: string;
|
|
subheadline: string;
|
|
primaryCta: { label: string; href: string };
|
|
secondaryCta?: { label: string; href: string };
|
|
}
|
|
|
|
const HeroSection: React.FC<HeroSectionProps> = ({
|
|
image,
|
|
headline,
|
|
subheadline,
|
|
primaryCta,
|
|
secondaryCta,
|
|
}) => {
|
|
const renderCta = (cta: { label: string; href: string }, className: string) => {
|
|
const isExternal = cta.href.startsWith("http");
|
|
|
|
if (isExternal) {
|
|
return (
|
|
<a
|
|
href={cta.href}
|
|
className={className}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{cta.label}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link to={cta.href} className={className}>
|
|
{cta.label}
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<section className="relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(66,133,244,0.25),_rgba(9,14,26,0.9))]" />
|
|
<div className="relative max-w-6xl mx-auto px-6 py-24 md:py-32 flex flex-col lg:flex-row gap-16 items-center">
|
|
<div className="flex-1 flex flex-col gap-6">
|
|
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-brand-200">
|
|
AI + SEO PLATFORM
|
|
</span>
|
|
<h1 className="text-4xl md:text-6xl font-semibold leading-tight text-white">
|
|
{headline}
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-white/70 leading-relaxed max-w-xl">
|
|
{subheadline}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
{renderCta(
|
|
primaryCta,
|
|
"inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-6 py-3 text-sm md:text-base font-semibold transition"
|
|
)}
|
|
{secondaryCta && renderCta(
|
|
secondaryCta,
|
|
"inline-flex items-center justify-center rounded-full border border-white/20 px-6 py-3 text-sm md:text-base font-semibold text-white/80 hover:text-white hover:border-white/40 transition"
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 w-full">
|
|
<div className="relative rounded-3xl border border-white/10 bg-white/5 shadow-[0_0_60px_rgba(88,166,255,0.1)]">
|
|
<div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-white/10 via-transparent to-white/0 pointer-events-none" />
|
|
<img
|
|
src={`/marketing/images/${image}`}
|
|
alt="Igny8 dashboard preview"
|
|
className="w-full h-full object-cover rounded-3xl"
|
|
/>
|
|
<div className="absolute bottom-6 left-6 bg-slate-950/70 backdrop-blur-lg border border-white/10 rounded-2xl px-6 py-4 flex flex-col gap-1">
|
|
<span className="text-xs uppercase tracking-[0.2em] text-white/50">
|
|
End-to-end automation
|
|
</span>
|
|
<span className="text-lg font-semibold text-white">
|
|
Keywords ➝ Ideas ➝ Tasks ➝ Content ➝ Images
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default HeroSection;
|
|
|