Skip to content

Home page iterations #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
jonathannorris wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Home page iterations #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b17e39f
Add three new homepage iteration routes
cursoragent Feb 25, 2026
f2d5a70
Fix home3 docs CTA route
cursoragent Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 99 additions & 0 deletions src/pages/home1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import React from 'react';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';

const metricItems = [
{ label: 'SDKs and integrations', value: '30+' },
{ label: 'Providers and hooks', value: '80+' },
{ label: 'Community contributors', value: '500+' },
];

const journeyItems = [
{
title: 'Adopt once',
detail: 'Integrate the OpenFeature API in your app and keep provider selection decoupled from product code.',
},
{
title: 'Switch safely',
detail: 'Move between in-house and vendor tooling without rewriting evaluation logic.',
},
{
title: 'Scale confidently',
detail: 'Share flagging patterns across teams, languages, and environments with one consistent contract.',
},
];

export default function Home1(): JSX.Element {
const { siteConfig } = useDocusaurusContext();

return (
<Layout title="Home iteration 1" description={siteConfig.customFields.description as string}>
<main className="min-h-screen bg-slate-950 text-slate-100">
<section className="mx-auto max-w-6xl px-4 pb-14 pt-20 sm:px-6 md:pt-28">
<div className="rounded-3xl border border-slate-800 bg-gradient-to-br from-slate-900 via-slate-900 to-violet-950 p-8 md:p-12">
<p className="mb-4 inline-flex rounded-full border border-violet-500/40 bg-violet-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-violet-200">
Home iteration 1
</p>
<h1 className="mb-4 text-4xl font-bold leading-tight md:text-6xl">
Build flags once. Run them everywhere.
</h1>
<p className="max-w-2xl text-lg text-slate-300">
OpenFeature gives teams a single feature flagging contract that works across providers, SDKs, and
environments.
</p>
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
<Link
className="btn border-0 bg-violet-500 text-white hover:bg-violet-400 hover:text-white"
to="/docs/reference/intro"
>
Explore docs
</Link>
<Link className="btn border border-slate-600 bg-slate-900 text-slate-100 hover:text-white" to="/ecosystem">
Browse ecosystem
</Link>
</div>
</div>
</section>

<section className="mx-auto grid max-w-6xl gap-4 px-4 sm:grid-cols-3 sm:px-6">
{metricItems.map((metric) => (
<div key={metric.label} className="rounded-2xl border border-slate-800 bg-slate-900/80 p-6">
<p className="text-3xl font-bold text-violet-300">{metric.value}</p>
<p className="mt-2 text-sm text-slate-300">{metric.label}</p>
</div>
))}
</section>

<section className="mx-auto max-w-6xl px-4 py-16 sm:px-6">
<h2 className="mb-8 text-3xl font-semibold">A migration-friendly path for every team</h2>
<div className="grid gap-5 md:grid-cols-3">
{journeyItems.map((journey) => (
<article key={journey.title} className="rounded-2xl border border-slate-800 bg-slate-900 p-6">
<h3 className="text-xl font-semibold">{journey.title}</h3>
<p className="mt-3 text-sm leading-6 text-slate-300">{journey.detail}</p>
</article>
))}
</div>
</section>

<section className="mx-auto max-w-6xl px-4 pb-20 sm:px-6">
<div className="rounded-3xl border border-violet-700/30 bg-violet-900/20 p-8 md:flex md:items-center md:justify-between">
<div>
<h2 className="text-2xl font-semibold">Start with a five-minute walkthrough</h2>
<p className="mt-2 text-slate-300">
Use the quick tutorial to wire your first provider and start evaluating flags.
</p>
</div>
<Link
className="btn mt-5 border-0 bg-violet-500 text-white hover:bg-violet-400 hover:text-white md:mt-0"
to="/docs/tutorials/five-minutes-to-feature-flags"
>
Start tutorial
</Link>
</div>
</section>
</main>
</Layout>
);
}
103 changes: 103 additions & 0 deletions src/pages/home2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import React from 'react';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';

const highlightItems = [
{
title: 'Unified flag API',
detail: 'One app integration model across languages and runtimes, regardless of provider backend.',
},
{
title: 'Portable evaluation',
detail: 'Keep targeting and rollout strategy stable while changing infrastructure around it.',
},
{
title: 'CNCF ecosystem',
detail: 'Adopt standards-first tooling with community governance and implementation transparency.',
},
];

const releaseSteps = [
{ id: '01', title: 'Model flag behavior', detail: 'Define context and expected variants for each rollout path.' },
{ id: '02', title: 'Connect a provider', detail: 'Bind your chosen vendor or in-house engine through OpenFeature.' },
{ id: '03', title: 'Ship with confidence', detail: 'Use hooks, events, and observability to validate releases.' },
];

export default function Home2(): JSX.Element {
const { siteConfig } = useDocusaurusContext();

return (
<Layout title="Home iteration 2" description={siteConfig.customFields.description as string}>
<main className="min-h-screen bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100">
<section className="mx-auto max-w-6xl px-4 pb-12 pt-16 sm:px-6 md:pt-24">
<div className="grid gap-8 rounded-3xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-800 dark:bg-slate-900 md:grid-cols-2 md:p-12">
<div>
<p className="mb-3 text-sm font-semibold uppercase tracking-wide text-violet-600 dark:text-violet-300">
Home iteration 2
</p>
<h1 className="text-4xl font-bold leading-tight md:text-5xl">Standardize feature delivery across teams</h1>
<p className="mt-4 text-base leading-7 text-slate-600 dark:text-slate-300">
Turn fragmented feature-flag integrations into one shared contract that product, platform, and
application teams all understand.
</p>
<div className="mt-7 flex flex-col gap-3 sm:flex-row">
<Link
className="btn border-0 bg-violet-600 text-white hover:bg-violet-500 hover:text-white"
to="/docs/reference/intro"
>
Read the reference
</Link>
<Link className="btn border border-slate-300 bg-transparent text-slate-900 dark:text-slate-100" to="/community">
Join the community
</Link>
</div>
</div>
<div className="rounded-2xl border border-slate-200 bg-slate-50 p-6 dark:border-slate-700 dark:bg-slate-950">
<h2 className="text-lg font-semibold">Release playbook</h2>
<ol className="mt-4 space-y-4">
{releaseSteps.map((step) => (
<li key={step.id} className="flex gap-4">
<span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-violet-100 text-xs font-bold text-violet-700 dark:bg-violet-900/50 dark:text-violet-200">
{step.id}
</span>
<div>
<p className="font-semibold">{step.title}</p>
<p className="text-sm text-slate-600 dark:text-slate-300">{step.detail}</p>
</div>
</li>
))}
</ol>
</div>
</div>
</section>

<section className="mx-auto max-w-6xl px-4 pb-16 sm:px-6">
<div className="grid gap-5 md:grid-cols-3">
{highlightItems.map((highlight) => (
<article key={highlight.title} className="rounded-2xl border border-slate-200 p-6 dark:border-slate-800">
<h2 className="text-xl font-semibold">{highlight.title}</h2>
<p className="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">{highlight.detail}</p>
</article>
))}
</div>
</section>

<section className="mx-auto max-w-6xl px-4 pb-20 sm:px-6">
<div className="rounded-3xl bg-violet-600 p-8 text-white md:flex md:items-center md:justify-between">
<div>
<h2 className="text-2xl font-semibold">Want real-world integrations?</h2>
<p className="mt-2 text-violet-100">Explore SDKs, providers, and tooling in the ecosystem catalog.</p>
</div>
<Link
className="btn mt-5 border-0 bg-white text-violet-700 hover:bg-violet-100 hover:text-violet-800 md:mt-0"
to="/ecosystem"
>
View ecosystem
</Link>
</div>
</section>
</main>
</Layout>
);
}
114 changes: 114 additions & 0 deletions src/pages/home3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
import React from 'react';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';

const scenarioItems = [
{
team: 'Platform engineering',
outcome: 'Ships a reusable flagging contract to every service without vendor lock-in.',
},
{
team: 'Application teams',
outcome: 'Moves from release branches to progressive rollout controls in normal workflows.',
},
{
team: 'Security and compliance',
outcome: 'Tracks behavior through consistent evaluation APIs and centralized policy hooks.',
},
];

const codeExample = `import { OpenFeature } from '@openfeature/server-sdk';

const client = OpenFeature.getClient();
const enabled = await client.getBooleanValue('beta-checkout', false, {
targetingKey: 'user-123',
});
`;

export default function Home3(): JSX.Element {
const { siteConfig } = useDocusaurusContext();

return (
<Layout title="Home iteration 3" description={siteConfig.customFields.description as string}>
<main className="min-h-screen bg-slate-900 text-slate-100">
<section className="mx-auto max-w-6xl px-4 pb-10 pt-16 sm:px-6 md:pt-24">
<div className="rounded-3xl border border-slate-700 bg-slate-950 p-8 md:p-10">
<p className="mb-3 text-sm font-semibold uppercase tracking-wide text-cyan-300">Home iteration 3</p>
<h1 className="max-w-3xl text-4xl font-bold leading-tight md:text-5xl">
A developer-first homepage concept with docs-ready context
</h1>
<p className="mt-4 max-w-2xl text-base text-slate-300">
This version emphasizes implementation clarity by pairing value messaging with an immediate SDK example.
</p>
<div className="mt-7 flex flex-col gap-3 sm:flex-row">
<Link
className="btn border-0 bg-cyan-400 text-slate-900 hover:bg-cyan-300 hover:text-slate-900"
to="/docs/reference/intro"
>
Open docs
</Link>
<Link className="btn border border-slate-500 bg-transparent text-slate-100 hover:text-white" to="/specification">
Read specification
</Link>
</div>
</div>
</section>

<section className="mx-auto max-w-6xl px-4 pb-10 sm:px-6">
<div className="grid gap-6 lg:grid-cols-5">
<div className="rounded-2xl border border-slate-700 bg-slate-950 p-6 lg:col-span-2">
<h2 className="text-xl font-semibold text-cyan-300">Who this helps</h2>
<ul className="mt-5 space-y-5">
{scenarioItems.map((scenario) => (
<li key={scenario.team}>
<p className="font-semibold">{scenario.team}</p>
<p className="mt-1 text-sm leading-6 text-slate-300">{scenario.outcome}</p>
</li>
))}
</ul>
</div>

<div className="overflow-hidden rounded-2xl border border-slate-700 bg-slate-950 lg:col-span-3">
<div className="flex items-center justify-between border-b border-slate-700 px-5 py-3">
<p className="text-sm font-medium text-slate-300">Server SDK example</p>
<Link className="text-sm text-cyan-300 hover:text-cyan-200" to="/docs/reference/technologies/server/javascript">
JavaScript SDK
</Link>
</div>
<pre className="m-0 overflow-x-auto px-5 py-6 text-sm leading-6 text-slate-100">
<code>{codeExample}</code>
</pre>
</div>
</div>
</section>

<section className="mx-auto max-w-6xl px-4 pb-20 sm:px-6">
<div className="grid gap-4 md:grid-cols-3">
<Link
className="rounded-2xl border border-slate-700 bg-slate-950 p-6 text-slate-100 no-underline hover:text-white"
to="/docs/reference/concepts/hooks"
>
<p className="text-lg font-semibold text-cyan-300">Hooks</p>
<p className="mt-2 text-sm text-slate-300">Extend evaluation flow with lifecycle callbacks and policy checks.</p>
</Link>
<Link
className="rounded-2xl border border-slate-700 bg-slate-950 p-6 text-slate-100 no-underline hover:text-white"
to="/docs/reference/concepts/provider"
>
<p className="text-lg font-semibold text-cyan-300">Providers</p>
<p className="mt-2 text-sm text-slate-300">Connect your preferred feature management backend through one API.</p>
</Link>
<Link
className="rounded-2xl border border-slate-700 bg-slate-950 p-6 text-slate-100 no-underline hover:text-white"
to="/blog"
>
<p className="text-lg font-semibold text-cyan-300">Stories</p>
<p className="mt-2 text-sm text-slate-300">Learn how teams roll out safely with standards-based flagging.</p>
</Link>
</div>
</section>
</main>
</Layout>
);
}