+
+ From zero to registered user in minutes
+
- {hasRun && !isRunning && (
-
- )}
-
- {/* Caption */}
-
From zero to registered user in minutes.
)
}
diff --git a/src/components/QuickStarts/constants.ts b/src/components/QuickStarts/constants.ts
index f652c92e3..897d840c8 100644
--- a/src/components/QuickStarts/constants.ts
+++ b/src/components/QuickStarts/constants.ts
@@ -21,11 +21,10 @@ export const CATEGORIES: QuickstartCategory[] = [
{
label: "Get started with identity management",
to: "/docs/kratos/manage-identities/overview",
- description:
- "Identity management and authentication.",
+ description: "Identity management and authentication.",
deploymentModes: ["network", "oel", "oss"],
},
- {
+ {
label: "Get started with authentication",
to: "/docs/guides/authentication",
description:
@@ -35,8 +34,7 @@ export const CATEGORIES: QuickstartCategory[] = [
{
label: "Get started with multi-factor authentication",
to: "/docs/kratos/mfa/overview",
- description:
- "Multi-factor authentication.",
+ description: "Multi-factor authentication.",
deploymentModes: ["network", "oel", "oss"],
},
],
@@ -48,23 +46,21 @@ export const CATEGORIES: QuickstartCategory[] = [
{
label: "Introduction to Ory Hydra",
to: "/docs/oauth2-oidc",
- description:
- "OAuth2 & OpenID Connect social sign-in concepts.",
- deploymentModes: ["network", "oel", "oss"],
+ description: "OAuth2 & OpenID Connect social sign-in concepts.",
+ deploymentModes: ["network", "oel", "oss"],
},
{
label: "Get started with Ory Hydra",
to: "/docs/getting-started/ory-network-oauth2",
- description:
- "Client credential and authorization code grant.",
- deploymentModes: ["network"],
+ description: "Client credential and authorization code grant.",
+ deploymentModes: ["network"],
},
{
label: "Get started with Ory Hydra",
to: "/docs/hydra/self-hosted/quickstart",
description:
"Run Ory Hydra locally and try the most important OAuth2 flows.",
- deploymentModes: ["oel", "oss"],
+ deploymentModes: ["oel", "oss"],
},
],
},
@@ -83,7 +79,7 @@ export const CATEGORIES: QuickstartCategory[] = [
to: "/docs/keto/quickstart",
description:
"Quickstart for understanding relationships and permission checks.",
- deploymentModes: ["oel", "oss"],
+ deploymentModes: ["oel", "oss"],
},
],
},
@@ -112,7 +108,8 @@ export const CATEGORIES: QuickstartCategory[] = [
{
label: "Introduction to Ory Polis",
to: "/docs/polis",
- description: "Enterprise SSO for SAML and OIDC identity providers and SCIM provising.",
+ description:
+ "Enterprise SSO for SAML and OIDC identity providers and SCIM provising.",
deploymentModes: ["network", "oel", "oss"],
},
{
@@ -120,7 +117,7 @@ export const CATEGORIES: QuickstartCategory[] = [
to: "/docs/polis/quickstart",
description:
"Quickstart for Enterprise SSO authentication and SCIM provisioning.",
- deploymentModes: ["oel", "oss"],
+ deploymentModes: ["oel", "oss"],
},
],
},
diff --git a/src/components/welcomePage/DeploymentAndFrameworkSection.tsx b/src/components/welcomePage/DeploymentAndFrameworkSection.tsx
new file mode 100644
index 000000000..c04d1ad94
--- /dev/null
+++ b/src/components/welcomePage/DeploymentAndFrameworkSection.tsx
@@ -0,0 +1,812 @@
+import React, { useState } from "react"
+import Link from "@docusaurus/Link"
+import Mermaid from "@theme/Mermaid"
+import IconTerminal from "@site/src/static/img/icons/terminal.svg"
+import IconTypescript from "@site/src/static/img/icons/typescript.svg"
+import IconNextjs from "@site/src/static/img/icons/nextjs.svg"
+import IconVue from "@site/src/static/img/icons/vue.svg"
+import IconGo from "@site/src/static/img/icons/go.svg"
+import IconCopy from "@site/src/static/img/icons/copy.svg"
+import { StepBadge } from "./StepBadge"
+import { colors, radius, spacing, typography } from "./tokens"
+
+const MermaidAny = Mermaid as any
+
+export function DeploymentAndFrameworkSection() {
+ type FrameworkValue = "typescript" | "nextjs" | "vue" | "go"
+ const [selectedFramework, setSelectedFramework] =
+ useState("nextjs")
+
+ const cards = [
+ {
+ label: "Ory Network",
+ description:
+ "Managed identity, OAuth2/OIDC, and permissions. Best choice for new projects.",
+ to: "/network/getting-started",
+ tags: ["Cloud", "Multi-region", "Production ready"],
+ },
+ {
+ label: "Ory Enterprise License",
+ description:
+ "Self-host Ory with enterprise support, SLAs, and advanced compliance options.",
+ to: "/oel/getting-started",
+ tags: ["Self-hosted", "Enterprise"],
+ },
+ {
+ label: "Open Source",
+ description:
+ "Use the individual Ory projects directly and run everything yourself.",
+ to: "/oss/getting-started",
+ tags: ["Open Source", "Multi-region"],
+ },
+ ]
+
+ const langs: Array<{
+ value: FrameworkValue
+ label: string
+ Icon: React.ComponentType>
+ snippet: string
+ }> = [
+ {
+ value: "typescript",
+ label: "Typescript",
+ Icon: IconTypescript as React.ComponentType<
+ React.SVGProps
+ >,
+ snippet: `npm install @ory/elements-react @ory/nextjs`,
+ },
+ {
+ value: "nextjs",
+ label: "Next.js",
+ Icon: IconNextjs as React.ComponentType>,
+ snippet: `npm install @ory/elements-react @ory/nextjs`,
+ },
+ {
+ value: "vue",
+ label: "Vue",
+ Icon: IconVue as React.ComponentType>,
+ snippet: `npm install @ory/elements-react @ory/nextjs`,
+ },
+ {
+ value: "go",
+ label: "Go",
+ Icon: IconGo as React.ComponentType>,
+ snippet: `npm install @ory/elements-react @ory/nextjs`,
+ },
+ ]
+
+ const selectedLang =
+ langs.find((l) => l.value === selectedFramework) ?? langs[1]
+ const selectedSnippet = selectedLang.snippet
+ const snippetPrefix = selectedSnippet.startsWith("npm install ")
+ ? "npm install "
+ : ""
+ const snippetRest = snippetPrefix
+ ? selectedSnippet.slice(snippetPrefix.length)
+ : selectedSnippet
+
+ return (
+
+
+
+ {/* Choose a deployment option */}
+
+
+
+
+ Choose a deployment option
+
+
+ Choose the deployment option that fits your organization and
+ build secure IAM into your apps. You can switch later — the core
+ concepts stay the same.
+
+
+ )
+}
diff --git a/src/components/welcomePage/HowToUseSection.tsx b/src/components/welcomePage/HowToUseSection.tsx
new file mode 100644
index 000000000..dea8a388a
--- /dev/null
+++ b/src/components/welcomePage/HowToUseSection.tsx
@@ -0,0 +1,163 @@
+import React from "react"
+import Link from "@docusaurus/Link"
+import { colors, spacing, typography } from "./tokens"
+import styles from "@site/src/pages/welcome.module.css"
+
+export function HowToUseSection() {
+ const guides = [
+ {
+ title: "Want to learn more about a specific product suite",
+ description: "Go directly to product specific information.",
+ link: { label: "Products", to: "/products/products-overview" },
+ },
+ {
+ title: "Want to learn more about a specific solution suite",
+ description: "Go directly to solution specific information.",
+ link: { label: "Solutions", to: "/solutions/solutions-overview" },
+ },
+ {
+ title: "Start coding with an example",
+ description:
+ "Take a look in the Quickstarts to find the framework and language you want to use.",
+ link: { label: "Quickstarts", to: "/getting-started/overview" },
+ },
+ {
+ title: "Find the right API to use",
+ description: "Go directly to the REST API, SDKs, or CLI references.",
+ link: { label: "API reference", to: "/reference/reference-overview" },
+ },
+ ]
+
+ return (
+
+
+
+
+ How to use the Ory Developer Portal
+
+
+ Not sure where to start? Follow our guided paths—structured journeys
+ that walk you through Ory's products and solutions so you can learn
+ and build faster.
+
+
+
+ {/* Horizontal separator */}
+
+
+
+ {guides.map((guide, index) => (
+
+
+ {guide.title}
+
+
+ {guide.description}
+
+
+ {guide.link.label}
+
+ →
+
+
+
+ ))}
+
+
+
+ )
+}
diff --git a/src/components/welcomePage/OtherGuides.tsx b/src/components/welcomePage/OtherGuides.tsx
new file mode 100644
index 000000000..ed781a6e4
--- /dev/null
+++ b/src/components/welcomePage/OtherGuides.tsx
@@ -0,0 +1,220 @@
+import React from "react"
+import Link from "@docusaurus/Link"
+import { colors, radius, spacing, typography } from "./tokens"
+
+export function OtherGuides() {
+ const guides = [
+ {
+ label: "Installl from green-field",
+ to: "/getting-started/overview",
+ description: "What Ory Identities (Kratos) is and when to use it",
+ },
+ {
+ label: "Migrate to Ory",
+ to: "/kratos/self-service/flows/user-login-user-registration",
+ description: "Day 1 essentials for browser-based authentication",
+ },
+ {
+ label: "Ory Architecture",
+ to: "/kratos/self-service/flows/user-login-user-registration",
+ description: "What Ory Identities (Kratos) is and when to use it",
+ tags: ["Ory / Kratos", "Tutorial"],
+ },
+ ]
+
+ return (
+
+
+
+
+ Other guides
+
+
+ Opinionated, end-to-end walkthroughs to help you ship real features,
+ not just hello-world demos.
+
+
+
+
+
+ {guides.slice(0, 2).map((guide) => (
+
+
+
+
+
+ {guide.label}
+
+
+
+ {guide.description}
+
+
+
+ ))}
+
+
+ {guides.slice(2).map((guide) => (
+
+
+
+
+
+
+ {guide.label}
+
+
+ {guide.tags?.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+ {guide.description}
+
+
+
+ ))}
+
+
+
+
+ )
+}
diff --git a/src/components/welcomePage/StartHeading.tsx b/src/components/welcomePage/StartHeading.tsx
new file mode 100644
index 000000000..fe6d151fb
--- /dev/null
+++ b/src/components/welcomePage/StartHeading.tsx
@@ -0,0 +1,43 @@
+import React from "react"
+import useBaseUrl from "@docusaurus/useBaseUrl"
+import OryHeroDemo from "@site/src/components/OryHeroDemo"
+import { colors, spacing } from "./tokens"
+import styles from "@site/src/pages/welcome.module.css"
+
+export function StartHeading() {
+ const backgroundPattern = useBaseUrl("/img/home-bg-grid.svg")
+
+ return (
+
+
+
+
+
Welcome to the Ory Developer Portal
+
+ Ory gives you authentication, authorization, and user management
+ APIs designed for modern applications.
+
+
+ Start fast, scale to millions, and keep security best practices
+ baked in.
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/welcomePage/StepBadge.tsx b/src/components/welcomePage/StepBadge.tsx
new file mode 100644
index 000000000..af0298bfe
--- /dev/null
+++ b/src/components/welcomePage/StepBadge.tsx
@@ -0,0 +1,34 @@
+import React from "react"
+import { colors, radius, typography } from "./tokens"
+
+export function StepBadge({ step }: { step: number }) {
+ return (
+
- Ory gives you authentication, authorization, and user management
- APIs designed for modern applications.{" "}
-
-
- Start fast, scale to millions, and keep security best practices
- baked in.
-
-
-
-
-
-
-
-
-
- How to use the Ory Developer Portal
-
-
-
-
- Not sure where to start? Follow our guided
- paths—structured journeys that walk you through Ory's products and
- solutions so you can learn and build faster.
-
-
-
-
- {guides.map((guide, index) => (
-
-
- {index === 0 && (
-
-
-
- Want to learn more about a specific product suite or
- solution?
- {" "}
- Go directly to product and solution specific information.
-
-
- )}
- {index === 1 && (
-
-
- Want to start coding and need an example?{" "}
- Take a look in the Quickstarts to find the framework and
- language you want to use.
-
-
- )}
- {index === 2 && (
-
-
- Want to find the right API to use? Go
- directly to the REST API, SDKs, or CLI references.
-
-
- )
-}
-
-function Hero() {
- const cards = [
- {
- label: "Ory Network",
- description:
- "Managed identity, OAuth2/OIDC, and permissions. Best choice for new projects.",
- to: "/network/getting-started",
- meta: "Cloud · multi-region · production-ready",
- },
- {
- label: "Ory Enterprise License",
- description:
- "Self-host Ory with enterprise support, SLAs, and advanced compliance options.",
- to: "/oel/getting-started",
- meta: "Self-hosted · enterprise",
- },
- {
- label: "Ory Open Source",
- description:
- "Use the individual Ory projects directly and run everything yourself.",
- to: "/oss/getting-started",
- meta: "Open source · fully self-managed",
- },
- ]
-
- return (
-
-
- {/* Heading row above cards */}
-
-
- Choose a deployment option
-
- Choose the deployment option that fits your organization and build
- secure IAM into your apps. You can switch later — the core
- concepts stay the same.
-