diff --git a/frontend/marketing.html b/frontend/marketing.html new file mode 100644 index 00000000..b4fe7461 --- /dev/null +++ b/frontend/marketing.html @@ -0,0 +1,14 @@ + + + + + + + Igny8 · AI Growth Engine + + +
+ + + + diff --git a/frontend/src/marketing/MarketingApp.tsx b/frontend/src/marketing/MarketingApp.tsx new file mode 100644 index 00000000..83ac86ad --- /dev/null +++ b/frontend/src/marketing/MarketingApp.tsx @@ -0,0 +1,39 @@ +import React, { Suspense, lazy } from "react"; +import { Route, Routes } from "react-router-dom"; +import MarketingLayout from "./layout/MarketingLayout"; +import LoadingPage from "./components/LoadingPage"; + +const Home = lazy(() => import("./pages/Home")); +const Product = lazy(() => import("./pages/Product")); +const Solutions = lazy(() => import("./pages/Solutions")); +const Pricing = lazy(() => import("./pages/Pricing")); +const Tour = lazy(() => import("./pages/Tour")); +const Resources = lazy(() => import("./pages/Resources")); +const CaseStudies = lazy(() => import("./pages/CaseStudies")); +const Partners = lazy(() => import("./pages/Partners")); +const Contact = lazy(() => import("./pages/Contact")); +const Waitlist = lazy(() => import("./pages/Waitlist")); + +const MarketingApp: React.FC = () => { + return ( + + }> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + + ); +}; + +export default MarketingApp; + diff --git a/frontend/src/marketing/components/CTASection.tsx b/frontend/src/marketing/components/CTASection.tsx new file mode 100644 index 00000000..aa38b4b9 --- /dev/null +++ b/frontend/src/marketing/components/CTASection.tsx @@ -0,0 +1,73 @@ +import React from "react"; +interface CTASectionProps { + title: string; + description: string; + primaryCta: { label: string; href: string }; + secondaryCta?: { label: string; href: string }; +} + +const CTASection: React.FC = ({ + title, + description, + primaryCta, + secondaryCta, +}) => { + const renderAnchor = (label: string, href: string, className: string) => { + const isExternal = href.startsWith("http"); + + if (isExternal) { + return ( + + {label} + + ); + } + + return ( + + {label} + + ); + }; + + return ( +
+
+
+
+
+

+ {title} +

+

+ {description} +

+
+ {renderAnchor( + primaryCta.label, + primaryCta.href, + "inline-flex items-center justify-center rounded-full bg-white text-slate-950 px-6 py-3 text-sm md:text-base font-semibold hover:bg-brand-100 transition" + )} + {secondaryCta && ( + renderAnchor( + secondaryCta.label, + secondaryCta.href, + "inline-flex items-center justify-center rounded-full border border-white/40 px-6 py-3 text-sm md:text-base font-semibold text-white hover:border-white/60 transition" + ) + )} +
+
+
+
+
+ ); +}; + +export default CTASection; + diff --git a/frontend/src/marketing/components/FeatureGrid.tsx b/frontend/src/marketing/components/FeatureGrid.tsx new file mode 100644 index 00000000..df3fba3e --- /dev/null +++ b/frontend/src/marketing/components/FeatureGrid.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import { ArrowUpRightIcon } from "@heroicons/react/24/outline"; + +interface FeatureItem { + title: string; + description: string; + icon: React.ReactNode; + link?: { label: string; href: string }; +} + +interface FeatureGridProps { + features: FeatureItem[]; +} + +const FeatureGrid: React.FC = ({ features }) => { + return ( +
+
+ {features.map((feature) => ( +
+
+ {feature.icon} +
+

{feature.title}

+

+ {feature.description} +

+ {feature.link && ( + + {feature.link.label} + + + )} +
+
+ ))} +
+
+ ); +}; + +export default FeatureGrid; + diff --git a/frontend/src/marketing/components/HeroSection.tsx b/frontend/src/marketing/components/HeroSection.tsx new file mode 100644 index 00000000..335f5414 --- /dev/null +++ b/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 = ({ + image, + headline, + subheadline, + primaryCta, + secondaryCta, +}) => { + return ( +
+
+
+
+ + AI + SEO PLATFORM + +

+ {headline} +

+

+ {subheadline} +

+
+ + {primaryCta.label} + + {secondaryCta && ( + + {secondaryCta.label} + + )} +
+
+
+
+
+ Igny8 dashboard preview +
+ + End-to-end automation + + + Keywords ➝ Ideas ➝ Tasks ➝ Content ➝ Images + +
+
+
+
+
+ ); +}; + +export default HeroSection; + diff --git a/frontend/src/marketing/components/LoadingPage.tsx b/frontend/src/marketing/components/LoadingPage.tsx new file mode 100644 index 00000000..8cf83289 --- /dev/null +++ b/frontend/src/marketing/components/LoadingPage.tsx @@ -0,0 +1,15 @@ +import React from "react"; + +const LoadingPage: React.FC = () => { + return ( +
+
+ + Loading experience… +
+
+ ); +}; + +export default LoadingPage; + diff --git a/frontend/src/marketing/components/LogoCloud.tsx b/frontend/src/marketing/components/LogoCloud.tsx new file mode 100644 index 00000000..e615a19a --- /dev/null +++ b/frontend/src/marketing/components/LogoCloud.tsx @@ -0,0 +1,39 @@ +import React from "react"; + +const logos = [ + "launchpad", + "northbeam", + "scaleops", + "pathfinder", + "catalyst", + "orbit", +]; + +const LogoCloud: React.FC = () => { + return ( +
+
+ + Trusted by modern SEO + content teams + +
+ {logos.map((name) => ( +
+ {`${name} +
+ ))} +
+
+
+ ); +}; + +export default LogoCloud; + diff --git a/frontend/src/marketing/components/MetricsBar.tsx b/frontend/src/marketing/components/MetricsBar.tsx new file mode 100644 index 00000000..006a3cc0 --- /dev/null +++ b/frontend/src/marketing/components/MetricsBar.tsx @@ -0,0 +1,30 @@ +import React from "react"; + +interface Metric { + label: string; + value: string; +} + +interface MetricsBarProps { + metrics: Metric[]; +} + +const MetricsBar: React.FC = ({ metrics }) => { + return ( +
+
+ {metrics.map((metric) => ( +
+
{metric.value}
+
+ {metric.label} +
+
+ ))} +
+
+ ); +}; + +export default MetricsBar; + diff --git a/frontend/src/marketing/components/SectionHeading.tsx b/frontend/src/marketing/components/SectionHeading.tsx new file mode 100644 index 00000000..2a21a16e --- /dev/null +++ b/frontend/src/marketing/components/SectionHeading.tsx @@ -0,0 +1,38 @@ +import React from "react"; + +interface SectionHeadingProps { + eyebrow?: string; + title: string; + description?: string; + align?: "left" | "center"; +} + +const SectionHeading: React.FC = ({ + eyebrow, + title, + description, + align = "center", +}) => { + return ( +
+ {eyebrow && ( + + {eyebrow} + + )} +

+ {title} +

+ {description && ( +

+ {description} +

+ )} +
+ ); +}; + +export default SectionHeading; + diff --git a/frontend/src/marketing/components/TestimonialSlider.tsx b/frontend/src/marketing/components/TestimonialSlider.tsx new file mode 100644 index 00000000..e6d22cd3 --- /dev/null +++ b/frontend/src/marketing/components/TestimonialSlider.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import { testimonials } from "../data/testimonials"; + +const TestimonialSlider: React.FC = () => { + return ( +
+
+
+ + Loved by scaling teams + +

+ Teams ship more content, capture more demand, and see faster ROI with Igny8. +

+
+
+ {testimonials.map((testimonial) => ( +
+
+

+ “{testimonial.quote}” +

+
+ {testimonial.name} + + {testimonial.title} · {testimonial.company} + +
+
+ ))} +
+
+
+ ); +}; + +export default TestimonialSlider; + diff --git a/frontend/src/marketing/components/WorkflowSteps.tsx b/frontend/src/marketing/components/WorkflowSteps.tsx new file mode 100644 index 00000000..17f64c86 --- /dev/null +++ b/frontend/src/marketing/components/WorkflowSteps.tsx @@ -0,0 +1,38 @@ +import React from "react"; + +interface WorkflowStep { + title: string; + subtitle: string; +} + +interface WorkflowStepsProps { + steps: WorkflowStep[]; +} + +const WorkflowSteps: React.FC = ({ steps }) => { + return ( +
+
+ {steps.map((step, index) => ( +
+
+ {index + 1} +
+

+ {step.title} +

+

+ {step.subtitle} +

+
+ ))} +
+
+ ); +}; + +export default WorkflowSteps; + diff --git a/frontend/src/marketing/data/metrics.ts b/frontend/src/marketing/data/metrics.ts new file mode 100644 index 00000000..32a7ae92 --- /dev/null +++ b/frontend/src/marketing/data/metrics.ts @@ -0,0 +1,25 @@ +export const heroMetrics = [ + { label: "Content velocity", value: "6× faster" }, + { label: "SERP lift", value: "+132%" }, + { label: "Automation coverage", value: "85%" }, +]; + +export const workflowSteps = [ + { + title: "Capture search intent", + subtitle: "Import keywords or pull from the global database with one click.", + }, + { + title: "Cluster automatically", + subtitle: "Group related queries using Igny8 AI to map topical authority.", + }, + { + title: "Generate briefs", + subtitle: "Turn clusters into on-brand, SEO-rich content briefs instantly.", + }, + { + title: "Produce content", + subtitle: "Draft long-form content tailored to your tone, guidelines, and SERP data.", + }, +]; + diff --git a/frontend/src/marketing/data/navLinks.ts b/frontend/src/marketing/data/navLinks.ts new file mode 100644 index 00000000..f7cdbc8a --- /dev/null +++ b/frontend/src/marketing/data/navLinks.ts @@ -0,0 +1,42 @@ +export interface NavLinkItem { + name: string; + path: string; +} + +export const primaryNav: NavLinkItem[] = [ + { name: "Product", path: "/product" }, + { name: "Solutions", path: "/solutions" }, + { name: "Pricing", path: "/pricing" }, + { name: "Tour", path: "/tour" }, + { name: "Resources", path: "/resources" }, + { name: "Case Studies", path: "/case-studies" }, + { name: "Partners", path: "/partners" }, +]; + +export const footerNavGroups: { title: string; links: NavLinkItem[] }[] = [ + { + title: "Platform", + links: [ + { name: "Planner", path: "/product#planner" }, + { name: "Writer", path: "/product#writer" }, + { name: "Automation", path: "/product#automation" }, + ], + }, + { + title: "Company", + links: [ + { name: "Case Studies", path: "/case-studies" }, + { name: "Partners", path: "/partners" }, + { name: "Contact", path: "/contact" }, + ], + }, + { + title: "Resources", + links: [ + { name: "Help Center", path: "/resources#help" }, + { name: "Documentation", path: "/resources#docs" }, + { name: "Partner Program", path: "/partners" }, + ], + }, +]; + diff --git a/frontend/src/marketing/data/testimonials.ts b/frontend/src/marketing/data/testimonials.ts new file mode 100644 index 00000000..d7ae12f8 --- /dev/null +++ b/frontend/src/marketing/data/testimonials.ts @@ -0,0 +1,31 @@ +export interface Testimonial { + quote: string; + name: string; + title: string; + company: string; +} + +export const testimonials: Testimonial[] = [ + { + quote: + "Igny8 replaced four tools for our content team. We now go from keywords to published content in hours, not weeks.", + name: "Maria Lopez", + title: "Head of Content", + company: "ScaleOps", + }, + { + quote: + "Cluster automation plus AI writing gave us a 3× lift in organic traffic. Igny8 is an unfair advantage.", + name: "James Patel", + title: "SEO Director", + company: "BrightOrbit", + }, + { + quote: + "From briefs to images, everything is automated. Our clients feel the impact every single month.", + name: "Lena Morris", + title: "Agency Founder", + company: "Northbeam Digital", + }, +]; + diff --git a/frontend/src/marketing/index.tsx b/frontend/src/marketing/index.tsx new file mode 100644 index 00000000..86062bfd --- /dev/null +++ b/frontend/src/marketing/index.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; +import MarketingApp from "./MarketingApp"; +import "../styles/global.css"; + +const container = document.getElementById("root"); + +if (!container) { + throw new Error("Marketing root element not found"); +} + +const root = ReactDOM.createRoot(container); + +root.render( + + + + + +); + diff --git a/frontend/src/marketing/layout/MarketingLayout.tsx b/frontend/src/marketing/layout/MarketingLayout.tsx new file mode 100644 index 00000000..7684a798 --- /dev/null +++ b/frontend/src/marketing/layout/MarketingLayout.tsx @@ -0,0 +1,158 @@ +import React, { useState } from "react"; +import { Link, useLocation } from "react-router-dom"; +import { primaryNav, footerNavGroups } from "../data/navLinks"; +import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; + +interface MarketingLayoutProps { + children: React.ReactNode; +} + +const MarketingLayout: React.FC = ({ children }) => { + const [mobileOpen, setMobileOpen] = useState(false); + const location = useLocation(); + + const toggleMobile = () => setMobileOpen((prev) => !prev); + const closeMobile = () => setMobileOpen(false); + + return ( +
+
+
+ + + IG + +
+ + Igny8 + + AI growth engine +
+ + + + + + + +
+ + {mobileOpen && ( +
+ + +
+ )} +
+ +
{children}
+ +
+
+
+ + + IG + +
+ + Igny8 + + + AI + SEO automation suite + +
+ +

+ Automate keyword intelligence, clustering, content production, and image creation in one unified growth engine. +

+
+ © {new Date().getFullYear()} Igny8 Labs. All rights reserved. +
+
+ + {footerNavGroups.map((group) => ( +
+

+ {group.title} +

+
    + {group.links.map((link) => ( +
  • + + {link.name} + +
    • + ))} +
+
+ ))} +
+
+ Built for marketers who automate growth with AI. +
+
+
+ ); +}; + +export default MarketingLayout; + diff --git a/frontend/src/marketing/pages/CaseStudies.tsx b/frontend/src/marketing/pages/CaseStudies.tsx new file mode 100644 index 00000000..f33b51c4 --- /dev/null +++ b/frontend/src/marketing/pages/CaseStudies.tsx @@ -0,0 +1,136 @@ +import React from "react"; +import SectionHeading from "../components/SectionHeading"; +import CTASection from "../components/CTASection"; + +const caseStudies = [ + { + company: "Lumen Publishing", + headline: "From 40 to 220 articles/month with 3× SERP visibility.", + metrics: [ + { label: "Organic traffic", value: "+210%" }, + { label: "Time-to-publish", value: "-58%" }, + { label: "Cost per article", value: "-34%" }, + ], + summary: + "Publisher running 6 niche brands used Igny8 to centralize research, briefs, and AI-assisted writing. Automation recipes ensured every keyword moved to published content with minimal handoff friction.", + image: "case-lumen.png", + }, + { + company: "Northbeam Digital", + headline: "Agency tripled client output without adding headcount.", + metrics: [ + { label: "Client satisfaction", value: "98%" }, + { label: "Deliverables/mo", value: "+175%" }, + { label: "Margin lift", value: "+22%" }, + ], + summary: + "Multi-client agency adopted Igny8 to standardize workflows, automate reporting, and launch custom Thinker playbooks. Teams now produce keyword research, content, and images for 20+ clients simultaneously.", + image: "case-northbeam.png", + }, + { + company: "Arcadia SaaS", + headline: "In-house team built a 7-stage automation pipeline.", + metrics: [ + { label: "New keywords ranked", value: "1,040" }, + { label: "Automation coverage", value: "82%" }, + { label: "Time saved monthly", value: "120 hrs" }, + ], + summary: + "Arcadia used Igny8 to align SEO, product marketing, and design. Thinker libraries ensured every asset matched product messaging; automation pushed approved content directly into WordPress and HubSpot.", + image: "case-arcadia.png", + }, +]; + +const CaseStudies: React.FC = () => { + return ( +
+
+ +
+ +
+ {caseStudies.map((cs) => ( +
+
+ + {cs.company} + +

{cs.headline}

+

{cs.summary}

+
+ {cs.metrics.map((metric) => ( +
+
+ {metric.value} +
+
+ {metric.label} +
+
+ ))} +
+
+
+ {`${cs.company} +
+
+ ))} +
+ +
+
+
+

Results you can expect

+
    +
  • + + 30-60 day onboarding to deploy automation and Thinker governance. +
    • +
  • + + 3-5× increase in content throughput without sacrificing editorial quality. +
    • +
  • + + Clear ROI dashboards tying automation to revenue outcomes. +
    • +
+
+
+

Customer advisory board

+

+ Igny8’s roadmap is shaped by an active community of customer strategists, agency partners, and product marketers. Join and get early access to features, template libraries, and industry benchmarks. +

+ +
+
+
+ + +
+ ); +}; + +export default CaseStudies; + diff --git a/frontend/src/marketing/pages/Contact.tsx b/frontend/src/marketing/pages/Contact.tsx new file mode 100644 index 00000000..3b1fee01 --- /dev/null +++ b/frontend/src/marketing/pages/Contact.tsx @@ -0,0 +1,118 @@ +import React from "react"; +import SectionHeading from "../components/SectionHeading"; +import CTASection from "../components/CTASection"; + +const Contact: React.FC = () => { + return ( +
+
+ +
+ +
+
+
+ + +
+ + + + + +