diff --git a/src/pages/home1.tsx b/src/pages/home1.tsx new file mode 100644 index 000000000..28845c5b0 --- /dev/null +++ b/src/pages/home1.tsx @@ -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 ( + +
+
+
+

+ Home iteration 1 +

+

+ Build flags once. Run them everywhere. +

+

+ OpenFeature gives teams a single feature flagging contract that works across providers, SDKs, and + environments. +

+
+ + Explore docs + + + Browse ecosystem + +
+
+
+ +
+ {metricItems.map((metric) => ( +
+

{metric.value}

+

{metric.label}

+
+ ))} +
+ +
+

A migration-friendly path for every team

+
+ {journeyItems.map((journey) => ( +
+

{journey.title}

+

{journey.detail}

+
+ ))} +
+
+ +
+
+
+

Start with a five-minute walkthrough

+

+ Use the quick tutorial to wire your first provider and start evaluating flags. +

+
+ + Start tutorial + +
+
+
+ + ); +} diff --git a/src/pages/home2.tsx b/src/pages/home2.tsx new file mode 100644 index 000000000..2d566ff6b --- /dev/null +++ b/src/pages/home2.tsx @@ -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 ( + +
+
+
+
+

+ Home iteration 2 +

+

Standardize feature delivery across teams

+

+ Turn fragmented feature-flag integrations into one shared contract that product, platform, and + application teams all understand. +

+
+ + Read the reference + + + Join the community + +
+
+
+

Release playbook

+
    + {releaseSteps.map((step) => ( +
  1. + + {step.id} + +
    +

    {step.title}

    +

    {step.detail}

    +
    +
    2. + ))} +
+
+
+
+ +
+
+ {highlightItems.map((highlight) => ( +
+

{highlight.title}

+

{highlight.detail}

+
+ ))} +
+
+ +
+
+
+

Want real-world integrations?

+

Explore SDKs, providers, and tooling in the ecosystem catalog.

+
+ + View ecosystem + +
+
+
+ + ); +} diff --git a/src/pages/home3.tsx b/src/pages/home3.tsx new file mode 100644 index 000000000..2b6cf0cc2 --- /dev/null +++ b/src/pages/home3.tsx @@ -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 ( + +
+
+
+

Home iteration 3

+

+ A developer-first homepage concept with docs-ready context +

+

+ This version emphasizes implementation clarity by pairing value messaging with an immediate SDK example. +

+
+ + Open docs + + + Read specification + +
+
+
+ +
+
+
+

Who this helps

+
    + {scenarioItems.map((scenario) => ( +
  • +

    {scenario.team}

    +

    {scenario.outcome}

    +
    • + ))} +
+
+ +
+
+

Server SDK example

+ + JavaScript SDK + +
+ 
+                {codeExample}
+
+
+
+
+ +
+
+ +

Hooks

+

Extend evaluation flow with lifecycle callbacks and policy checks.

+ + +

Providers

+

Connect your preferred feature management backend through one API.

+ + +

Stories

+

Learn how teams roll out safely with standards-based flagging.

+ +
+
+
+ + ); +}