Marketing Website

frontend/src/marketing/pages/Resources.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+import SectionHeading from "../components/SectionHeading";
+import CTASection from "../components/CTASection";
+
+const articles = [
+  {
+    title: "AI + SEO: Building topical authority at scale",
+    description:
+      "How Igny8 customers map thousands of keywords into authoritative clusters that rank faster.",
+    date: "October 2025",
+  },
+  {
+    title: "Automating the content supply chain",
+    description:
+      "A playbook for connecting keyword research, briefs, writing, and imagery without human bottlenecks.",
+    date: "September 2025",
+  },
+  {
+    title: "Measuring AI-generated content quality",
+    description:
+      "Frameworks for tracking performance, editorial standards, and compliance across large AI programs.",
+    date: "August 2025",
+  },
+];
+
+const webinars = [
+  {
+    title: "Building an automation-first content ops team",
+    description: "Live strategy session with Igny8 specialists and customer panel.",
+    date: "November 21, 2025",
+  },
+  {
+    title: "From keywords to conversions: dashboards that prove ROI",
+    description: "Hands-on walkthrough of Igny8 dashboards and reporting exports.",
+    date: "On-demand replay",
+  },
+];
+
+const Resources: React.FC = () => {
+  return (
+    <div className="bg-[#050913] text-white">
+      <section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-6">
+        <SectionHeading
+          eyebrow="Resources"
+          title="Insights, playbooks, and events for AI-led growth teams."
+          description="Stay ahead of the curve with strategic content, live sessions, and practical guides built by the Igny8 team."
+        />
+      </section>
+
+      <section className="max-w-6xl mx-auto px-6 pb-24 grid grid-cols-1 md:grid-cols-3 gap-6">
+        {articles.map((article) => (
+          <article
+            key={article.title}
+            className="rounded-3xl border border-white/10 bg-white/5 p-8 flex flex-col gap-6"
+          >
+            <span className="text-xs uppercase tracking-[0.3em] text-white/40">
+              {article.date}
+            </span>
+            <h3 className="text-xl font-semibold text-white">{article.title}</h3>
+            <p className="text-sm text-white/70 leading-relaxed">{article.description}</p>
+            <div className="rounded-2xl border border-white/10 bg-slate-900 h-40 flex items-center justify-center text-xs text-white/40">
+              Article cover placeholder (800×600) → /marketing/images/resource-hero.png
+            </div>
+          </article>
+        ))}
+      </section>
+
+      <section className="bg-slate-950/70 border-y border-white/5">
+        <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-8">
+          {webinars.map((webinar) => (
+            <div
+              key={webinar.title}
+              className="rounded-3xl border border-white/10 bg-white/5 p-8 flex flex-col gap-4"
+            >
+              <span className="text-xs uppercase tracking-[0.3em] text-white/40">
+                {webinar.date}
+              </span>
+              <h3 className="text-lg font-semibold text-white">{webinar.title}</h3>
+              <p className="text-sm text-white/70">{webinar.description}</p>
+              <button className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-5 py-2 text-sm font-semibold">
+                Save my seat
+              </button>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+        <div className="space-y-4">
+          <SectionHeading
+            eyebrow="Help center"
+            title="Get instant answers and product walkthroughs."
+            description="Dive into documentation, watch quickstart videos, or join live onboarding cohorts."
+            align="left"
+          />
+          <ul className="space-y-3 text-sm text-white/70">
+            <li className="flex gap-3">
+              <span className="mt-1 size-1.5 rounded-full bg-brand-300" />
+              Help Center → `/help`
+            </li>
+            <li className="flex gap-3">
+              <span className="mt-1 size-1.5 rounded-full bg-brand-300" />
+              Documentation → `/help#docs`
+            </li>
+            <li className="flex gap-3">
+              <span className="mt-1 size-1.5 rounded-full bg-brand-300" />
+              API Reference → `/partners#api`
+            </li>
+          </ul>
+        </div>
+        <div className="rounded-3xl border border-white/10 bg-white/5 p-10 space-y-6">
+          <h3 className="text-2xl font-semibold text-white">Join the Igny8 newsletter</h3>
+          <p className="text-sm text-white/60">
+            Monthly insights on AI, SEO, and automation. No fluff—just tactical guidance and event invites.
+          </p>
+          <form className="flex flex-col sm:flex-row gap-3">
+            <input
+              type="email"
+              placeholder="you@company.com"
+              className="flex-1 rounded-full border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400"
+            />
+            <button
+              type="submit"
+              className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-6 py-3 text-sm font-semibold"
+            >
+              Subscribe
+            </button>
+          </form>
+        </div>
+      </section>
+
+      <CTASection
+        title="Want deeper access? Join our monthly live strategy lab."
+        description="Reserve your seat for upcoming webinars and office hours to learn how teams automate their growth pipeline with Igny8."
+        primaryCta={{ label: "Reserve seat", href: "/contact" }}
+        secondaryCta={{ label: "Browse articles", href: "/resources" }}
+      />
+    </div>
+  );
+};
+
+export default Resources;
+