phase 1-3 css refactor
This commit is contained in:
Desktop
@@ -1,5 +1,7 @@
|
||||
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;
|
||||
@@ -16,38 +18,59 @@ const HeroSection: React.FC<HeroSectionProps> = ({
|
||||
primaryCta,
|
||||
secondaryCta,
|
||||
}) => {
|
||||
const renderCta = (cta: { label: string; href: string }, className: string) => {
|
||||
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 (
|
||||
<a
|
||||
<Button
|
||||
as="a"
|
||||
href={cta.href}
|
||||
className={className}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
variant={isPrimary ? "gradient" : "outline"}
|
||||
tone={isPrimary ? "brand" : "neutral"}
|
||||
shape="pill"
|
||||
size="lg"
|
||||
className={buttonClasses}
|
||||
>
|
||||
{cta.label}
|
||||
</a>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link to={cta.href} className={className}>
|
||||
<Button
|
||||
as={Link}
|
||||
to={cta.href}
|
||||
variant={isPrimary ? "gradient" : "outline"}
|
||||
tone={isPrimary ? "brand" : "neutral"}
|
||||
shape="pill"
|
||||
size="lg"
|
||||
className={buttonClasses}
|
||||
>
|
||||
{cta.label}
|
||||
</Link>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[#0d1b2a] via-[#142b3f] to-[#1a3a5a]">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[var(--igny8-blue)]/10 via-transparent to-[var(--igny8-purple)]/10" />
|
||||
<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">
|
||||
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-[var(--igny8-blue)] bg-[var(--igny8-blue)]/10 px-4 py-2 rounded-full border border-[var(--igny8-blue)]/20">
|
||||
<Badge
|
||||
variant="soft"
|
||||
tone="primary"
|
||||
size="sm"
|
||||
className="uppercase tracking-[0.28em] border border-[var(--color-primary)]/20"
|
||||
>
|
||||
AI + SEO PLATFORM
|
||||
</span>
|
||||
</Badge>
|
||||
<h1 className="text-4xl md:text-6xl font-semibold leading-tight text-white">
|
||||
{headline}
|
||||
</h1>
|
||||
@@ -55,26 +78,20 @@ const HeroSection: React.FC<HeroSectionProps> = ({
|
||||
{subheadline}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
{renderCta(
|
||||
primaryCta,
|
||||
"inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] hover:from-[var(--igny8-blue-dark)] hover:to-[var(--igny8-blue)] text-white px-6 py-3 text-sm md:text-base font-semibold transition shadow-lg shadow-[var(--igny8-blue)]/30"
|
||||
)}
|
||||
{secondaryCta && renderCta(
|
||||
secondaryCta,
|
||||
"inline-flex items-center justify-center rounded-full border-2 border-white/30 bg-white/5 backdrop-blur-sm px-6 py-3 text-sm md:text-base font-semibold text-white hover:bg-white/10 hover:border-white/50 transition"
|
||||
)}
|
||||
{renderCta(primaryCta, true)}
|
||||
{secondaryCta && renderCta(secondaryCta, false)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 w-full">
|
||||
<div className="relative rounded-3xl border-2 border-[var(--igny8-blue)]/30 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm shadow-2xl shadow-[var(--igny8-blue)]/20">
|
||||
<div className="absolute -inset-1 bg-gradient-to-r from-[#0693e3]/20 via-[var(--igny8-purple)]/20 to-[var(--igny8-green)]/20 rounded-3xl blur-xl -z-10" />
|
||||
<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(--igny8-blue)]/30 rounded-2xl px-6 py-4 flex flex-col gap-1 shadow-xl">
|
||||
<span className="text-xs uppercase tracking-[0.2em] text-[var(--igny8-blue)]">
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user