Marketing Website

frontend/src/marketing/components/HeroSection.tsx

@@ -0,0 +1,74 @@
+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,
+}) => {
+  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">
+            <Link
+              to={primaryCta.href}
+              className="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"
+            >
+              {primaryCta.label}
+            </Link>
+            {secondaryCta && (
+              <Link
+                to={secondaryCta.href}
+                className="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"
+              >
+                {secondaryCta.label}
+              </Link>
+            )}
+          </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;
+