110 lines
3.9 KiB
TypeScript
110 lines
3.9 KiB
TypeScript
import React from "react";
|
|
import { Link } from "react-router-dom";
|
|
import Button from "../../components/ui/button/Button";
|
|
import Badge from "../../components/ui/badge/Badge";
|
|
|
|
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 }, isPrimary: boolean) => {
|
|
const isExternal = cta.href.startsWith("http");
|
|
const buttonClasses = isPrimary
|
|
? "shadow-lg shadow-[var(--color-primary)]/30"
|
|
: "border-white/30 bg-white/5 backdrop-blur-sm text-white hover:bg-white/10 hover:border-white/50";
|
|
|
|
if (isExternal) {
|
|
return (
|
|
<Button
|
|
as="a"
|
|
href={cta.href}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
variant={isPrimary ? "gradient" : "outline"}
|
|
tone={isPrimary ? "brand" : "neutral"}
|
|
shape="pill"
|
|
size="lg"
|
|
className={buttonClasses}
|
|
>
|
|
{cta.label}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
as={Link}
|
|
to={cta.href}
|
|
variant={isPrimary ? "gradient" : "outline"}
|
|
tone={isPrimary ? "brand" : "neutral"}
|
|
shape="pill"
|
|
size="lg"
|
|
className={buttonClasses}
|
|
>
|
|
{cta.label}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<section className="relative overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-[var(--color-primary)]/10 via-transparent to-[var(--color-purple)]/10" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(6,147,227,0.15),transparent_50%)]" />
|
|
<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">
|
|
<Badge
|
|
variant="soft"
|
|
tone="primary"
|
|
size="sm"
|
|
className="uppercase tracking-[0.28em] border border-[var(--color-primary)]/20"
|
|
>
|
|
AI + SEO PLATFORM
|
|
</Badge>
|
|
<h1 className="text-4xl md:text-6xl font-semibold leading-tight text-white">
|
|
{headline}
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-gray-300 leading-relaxed max-w-xl">
|
|
{subheadline}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
{renderCta(primaryCta, true)}
|
|
{secondaryCta && renderCta(secondaryCta, false)}
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 w-full">
|
|
<div className="relative rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm shadow-2xl shadow-[var(--color-primary)]/20">
|
|
<div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-purple)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10" />
|
|
<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-gradient-to-br from-[#0d1b2a]/95 to-[#142b3f]/95 backdrop-blur-lg border border-[var(--color-primary)]/30 rounded-2xl px-6 py-4 flex flex-col gap-1 shadow-xl">
|
|
<span className="text-xs uppercase tracking-[0.2em] text-[var(--color-primary)]">
|
|
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;
|
|
|