diff --git a/docs/intro.mdx b/docs/intro.mdx
new file mode 100644
index 000000000..b7df2e4f9
--- /dev/null
+++ b/docs/intro.mdx
@@ -0,0 +1,135 @@
+---
+id: intro
+title: Ory Overview
+sidebar_label: Overview
+slug: intro
+---
+
+Ory is a software infrastructure provider building a global zero-trust network for humans, robots, devices, and software services.
+Ory develops open-source software on [GitHub](https://github.com/ory) and publishes open standards such as the
+[Ory Permission Language](https://github.com/ory/keto/blob/master/docs/ory_permission_language_spec.md).
+[The Ory Network](https://console.ory.sh/) uses cloud-native open-source technologies (Kubernetes, Crossplane, Cockroach, Linux,
+Ory) and standards (OAuth 2.0/2.1, OpenID Connect, MITREid, WebAuthn, TOTP, FIDO3) to deliver a low-latency, planet-scale
+zero-trust infrastructure. Ory combines centuries of open source, security, operational, and industry expertise with a
+user-centric and security-first mindset.
+
+Core infrastructure components of [Ory Network](https://console.ory.sh) are open source to foster collaboration, reduce supply
+chain risk, broaden access to secure services, and introduce the open standard for internet security. Being open source Ory
+improves the safety of everyone:
+
+- Ory Identities offers a secure and modern central identity management solution with MFA, passwordless, WebAuthn, and more. It's
+ based on the open-source [Ory Kratos Identity Server](https://github.com/ory/kratos).
+- Ory OAuth2 & OpenID Connect implements 15+ IETF and OpenID standards to facilitate single sign-on (SSO), delegation, and API
+ access authorization. It's based on the open-source [Ory Hydra Federation Server](https://github.com/ory/hydra).
+- Ory Permissions is a low-latency, high-performance, relationship-based authorization system that enables fine-grained access
+ control (incl. RBAC and ABAC models) in any application. It's based on the open-source
+ [Ory Keto Permission Server](https://github.com/ory/keto), which implements
+ [Zanzibar: Google’s Consistent, Global Authorization System](https://research.google/pubs/pub48190/).
+
+Ory develops and maintains many additional open-source projects. From an Ory Zero Trust Identity & Access Proxy
+[Ory Oathkeeper](https://github.com/ory/oathkeeper) to developer tooling [Ory Dockertest](https://github.com/ory/dockertest) to
+language-specific libraries [Ory Ladon](https://github.com/ory/ladon). Ory has
+[170+ open source repositories](https://github.com/orgs/ory/repositories) and over 35.000 GitHub stars.
+
+Ory secures billions of requests each month, runs in over 50,000 live deployments, and improves hourly.
+
+## Why Ory is different
+
+Ory differentiates from other vendors in the following key areas:
+
+- Ory core services and APIs are developed and licensed under Apache 2.0, allowing you to participate, collaborate, and understand
+ the inner workings of Ory.
+- You can bring your UI, in the programming language of your choosing, with the user experience that you like.
+- From designing Identity Schemas using JSON Schema, to webhooks, to advanced configuration options - Ory is the most customizable
+ platform out there.
+- Ory spans the whole authentication and authorization universe with well-designed products and APIs:
+ - Identity Management with session management & flows for login, registration, recovery, verification, MFA, and more.
+ - Permission and Role Management.
+ - Delegation via OAuth2 and OpenID Connect.
+ - Zero Trust Networking.
+ - Modern API design with partial support for gRPC.
+
+## Ory Network
+
+The Ory Network is the commercial offering of Ory and is built on top of Ory Open Source software. The goal with Ory Network is to
+offer a planet-scale, low-latency, resilient, and secure service that's easy to use and set up.
+
+In short: Ory Network is the most convenient way to run Ory. [Sign up](https://console.ory.sh/registration) and create a free
+developer project.
+
+## Components
+
+Each project in Ory Network is an isolated tenant and uses many components providing functionality, user interfaces, and APIs
+around identities, sessions, login, OAuth2, permissions, and more. The core components of projects in Ory Network are
+[Ory Open Source servers](https://github.com/ory/).
+
+### Identities and sessions
+
+Ory Network incorporates the open-source [Ory Kratos Identity Server](https://www.ory.sh/kratos) and offers:
+
+- **Self-service** flows are everything users do on their own / without the help of others:
+- Registration with passwords, social sign-in, OpenID Connect, ...
+- Login with passwords, social sign-in, OpenID Connect, ...
+- Updating the profile, email, changing the password, un/linking with social sign-in providers, ...
+- Recovering the account by resetting the password.
+- Verifying email addresses, phone numbers,...
+- Multi-factor authentication flows and recovery processes.
+- **Administrative identity management** to get, create, update, and delete identities (users) and their data.
+- **Headless APIs and data models** allow you to fully customize Identity Schemas (for example adding fields like first name,
+ accept tos, shipping address, gender, ...) and create your login, registration, profile settings, recovery, and verification
+ screen using SDKs and REST APIs.
+
+### Permissions and relationships
+
+Ory Network incorporates the open-source [Ory Keto Permission Server](https://www.ory.sh/keto) and offers:
+
+- **Permission management** to get, create, update, and delete permissions.
+- **Permission checking** to check if a user has a permission.
+
+### OAuth2 and OIDC
+
+Ory Network incorporates the open-source [Ory Hydra OAuth2 & OpenID Server](https://www.ory.sh/hydra) and offers:
+
+- **Fully featured OAuth2 & [OpenID Certified](https://openid.net/developers/certified/)® OIDC Provider**
+
+### Ory Console
+
+Ory Console is the management UI of Ory Network.
+
+### Ory Account Experience
+
+Ory Account Experience implements screens such as login, registration, account recovery, account setting, and account verification
+for fast adoption of Ory.
+
+Contrary to other vendors, Ory allows you to implement your own (login, registration, ...) UI by offering simple, headless APIs.
+Use the open-source [Ory Elements](https://github.com/ory/elements) components library for fast integration with frameworks like
+ExpressJS, React, or Preact.
+
+### Ory Actions
+
+[Ory Actions](https://www.ory.sh/docs/kratos/hooks/configure-hooks) provide a flexible way to extend the capabilities of the Ory
+Network by defining custom business logic, automating system behavior in response to events, and integrating with third-party
+services such as CRM platforms, payment gateways, business analytics tools, and integration platforms.
+
+## Ory Open Source
+
+Ory is the largest open-source ecosystem in the area of authentication, authorization, access control, and zero-trust networking
+in the world. Ory is not another company "greenwashing" with open source by publishing SDKs under open-source licenses. Instead,
+all Ory core systems are available as Apache 2.0 licensed software without enterprise or open-core models.
+
+Head over to the [Ory Open Source Overview](./open-source.mdx) for an introduction to the different projects.
+
+### Is open source taking a back seat?
+
+**No!**
+
+Ory Network is the commercial offering which generates revenue to sustain high quality development and add more features to Ory
+Open Source. The value proposition and vision for Ory Network is to incorporate and advance the open-source ecosystem and add
+additional services which aren't possible to open source (for example analytics, SLAs, SRE, low-latency).
+
+The Ory Network and Ory Open Source software are interlinked. Ory Network is using the [Ory Open Source](https://github.com/ory/)
+code base, APIs, features, and configurations to provide services. Ory Network features modifications to better support the custom
+multi-tenant environment and operational (SRE) mode.
+
+In the future, Ory will continue to increase its open-source footprint. and make the projects easier to modify, use, access, and
+distribute. The biggest impact Ory Network will have is that it will accelerate and sustain the development of Ory Open Source.
diff --git a/docs/welcome.mdx b/docs/welcome.mdx
index 4eb18b1fa..b4c09efe0 100644
--- a/docs/welcome.mdx
+++ b/docs/welcome.mdx
@@ -5,131 +5,22 @@ sidebar_label: Introduction
slug: welcome
---
-Ory is a software infrastructure provider building a global zero-trust network for humans, robots, devices, and software services.
-Ory develops open-source software on [GitHub](https://github.com/ory) and publishes open standards such as the
-[Ory Permission Language](https://github.com/ory/keto/blob/master/docs/ory_permission_language_spec.md).
-[The Ory Network](https://console.ory.sh/) uses cloud-native open-source technologies (Kubernetes, Crossplane, Cockroach, Linux,
-Ory) and standards (OAuth 2.0/2.1, OpenID Connect, MITREid, WebAuthn, TOTP, FIDO3) to deliver a low-latency, planet-scale
-zero-trust infrastructure. Ory combines centuries of open source, security, operational, and industry expertise with a
-user-centric and security-first mindset.
+Find all the guides and resources you need to develop with Ory.
-Core infrastructure components of [Ory Network](https://console.ory.sh) are open source to foster collaboration, reduce supply
-chain risk, broaden access to secure services, and introduce the open standard for internet security. Being open source Ory
-improves the safety of everyone:
+```mdx-code-block
+import WelcomeCard from "@site/src/components/WelcomeCard/welcome-card";
+import * as welcomeContent from "@site/src/pages/_assets/welcome-content";
+import ExampleList from "@site/src/components/Examples/example-list"
+import * as content from "@site/src/pages/_assets/examples-content"
-- Ory Identities offers a secure and modern central identity management solution with MFA, passwordless, WebAuthn, and more. It's
- based on the open-source [Ory Kratos Identity Server](https://github.com/ory/kratos).
-- Ory OAuth2 & OpenID Connect implements 15+ IETF and OpenID standards to facilitate single sign-on (SSO), delegation, and API
- access authorization. It's based on the open-source [Ory Hydra Federation Server](https://github.com/ory/hydra).
-- Ory Permissions is a low-latency, high-performance, relationship-based authorization system that enables fine-grained access
- control (incl. RBAC and ABAC models) in any application. It's based on the open-source
- [Ory Keto Permission Server](https://github.com/ory/keto), which implements
- [Zanzibar: Google’s Consistent, Global Authorization System](https://research.google/pubs/pub48190/).
+
-Ory develops and maintains many additional open-source projects. From an Ory Zero Trust Identity & Access Proxy
-[Ory Oathkeeper](https://github.com/ory/oathkeeper) to developer tooling [Ory Dockertest](https://github.com/ory/dockertest) to
-language-specific libraries [Ory Ladon](https://github.com/ory/ladon). Ory has
-[170+ open source repositories](https://github.com/orgs/ory/repositories) and over 35.000 GitHub stars.
+
-Ory secures billions of requests each month, runs in over 50,000 live deployments, and improves hourly.
+
-## Why Ory is different
+
-Ory differentiates from other vendors in the following key areas:
-- Ory core services and APIs are developed and licensed under Apache 2.0, allowing you to participate, collaborate, and understand
- the inner workings of Ory.
-- You can bring your UI, in the programming language of your choosing, with the user experience that you like.
-- From designing Identity Schemas using JSON Schema, to webhooks, to advanced configuration options - Ory is the most customizable
- platform out there.
-- Ory spans the whole authentication and authorization universe with well-designed products and APIs:
- - Identity Management with session management & flows for login, registration, recovery, verification, MFA, and more.
- - Permission and Role Management.
- - Delegation via OAuth2 and OpenID Connect.
- - Zero Trust Networking.
- - Modern API design with partial support for gRPC.
-
-## Ory Network
-
-The Ory Network is the commercial offering of Ory and is built on top of Ory Open Source software. The goal with Ory Network is to
-offer a planet-scale, low-latency, resilient, and secure service that's easy to use and set up.
-
-In short: Ory Network is the most convenient way to run Ory. [Sign up](https://console.ory.sh/registration) and create a free
-developer project.
-
-## Components
-
-Each project in Ory Network is an isolated tenant and uses many components providing functionality, user interfaces, and APIs
-around identities, sessions, login, OAuth2, permissions, and more. The core components of projects in Ory Network are
-[Ory Open Source servers](https://github.com/ory/).
-
-### Identities and sessions
-
-Ory Network incorporates the open-source [Ory Kratos Identity Server](https://www.ory.sh/kratos) and offers:
-
-- **Self-service** flows are everything users do on their own / without the help of others:
-- Registration with passwords, social sign-in, OpenID Connect, ...
-- Login with passwords, social sign-in, OpenID Connect, ...
-- Updating the profile, email, changing the password, un/linking with social sign-in providers, ...
-- Recovering the account by resetting the password.
-- Verifying email addresses, phone numbers,...
-- Multi-factor authentication flows and recovery processes.
-- **Administrative identity management** to get, create, update, and delete identities (users) and their data.
-- **Headless APIs and data models** allow you to fully customize Identity Schemas (for example adding fields like first name,
- accept tos, shipping address, gender, ...) and create your login, registration, profile settings, recovery, and verification
- screen using SDKs and REST APIs.
-
-### Permissions and relationships
-
-Ory Network incorporates the open-source [Ory Keto Permission Server](https://www.ory.sh/keto) and offers:
-
-- **Permission management** to get, create, update, and delete permissions.
-- **Permission checking** to check if a user has a permission.
-
-### OAuth2 and OIDC
-
-Ory Network incorporates the open-source [Ory Hydra OAuth2 & OpenID Server](https://www.ory.sh/hydra) and offers:
-
-- **Fully featured OAuth2 & [OpenID Certified](https://openid.net/developers/certified/)® OIDC Provider**
-
-### Ory Console
-
-Ory Console is the management UI of Ory Network.
-
-### Ory Account Experience
-
-Ory Account Experience implements screens such as login, registration, account recovery, account setting, and account verification
-for fast adoption of Ory.
-
-Contrary to other vendors, Ory allows you to implement your own (login, registration, ...) UI by offering simple, headless APIs.
-Use the open-source [Ory Elements](https://github.com/ory/elements) components library for fast integration with frameworks like
-ExpressJS, React, or Preact.
-
-### Ory Actions
-
-[Ory Actions](https://www.ory.sh/docs/kratos/hooks/configure-hooks) provide a flexible way to extend the capabilities of the Ory
-Network by defining custom business logic, automating system behavior in response to events, and integrating with third-party
-services such as CRM platforms, payment gateways, business analytics tools, and integration platforms.
-
-## Ory Open Source
-
-Ory is the largest open-source ecosystem in the area of authentication, authorization, access control, and zero-trust networking
-in the world. Ory is not another company "greenwashing" with open source by publishing SDKs under open-source licenses. Instead,
-all Ory core systems are available as Apache 2.0 licensed software without enterprise or open-core models.
-
-Head over to the [Ory Open Source Overview](./open-source.mdx) for an introduction to the different projects.
-
-### Is open source taking a back seat?
-
-**No!**
-
-Ory Network is the commercial offering which generates revenue to sustain high quality development and add more features to Ory
-Open Source. The value proposition and vision for Ory Network is to incorporate and advance the open-source ecosystem and add
-additional services which aren't possible to open source (for example analytics, SLAs, SRE, low-latency).
-
-The Ory Network and Ory Open Source software are interlinked. Ory Network is using the [Ory Open Source](https://github.com/ory/)
-code base, APIs, features, and configurations to provide services. Ory Network features modifications to better support the custom
-multi-tenant environment and operational (SRE) mode.
-
-In the future, Ory will continue to increase its open-source footprint. and make the projects easier to modify, use, access, and
-distribute. The biggest impact Ory Network will have is that it will accelerate and sustain the development of Ory Open Source.
+
+```
diff --git a/src/components/Examples/example-list.module.css b/src/components/Examples/example-list.module.css
index 97a0eab48..72411eea3 100644
--- a/src/components/Examples/example-list.module.css
+++ b/src/components/Examples/example-list.module.css
@@ -8,6 +8,15 @@
grid-template-rows: 1fr;
gap: 1rem;
grid-template-areas: "logo-img content";
+ border-radius: 8px;
+ border: 1px solid var(--ifm-color-emphasis-200);
+ transition: all 0.2s ease;
+}
+
+.card:hover {
+ border-color: var(--ifm-color-emphasis-300);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+ transform: translateY(-2px);
}
.cardcontent {
@@ -36,14 +45,18 @@
display: flex;
align-items: center;
background-color: transparent;
- border: 1px solid rgba(128, 128, 128, 0.32);
+ border: 1px solid var(--ifm-color-emphasis-300);
color: inherit;
padding: 8px 12px;
cursor: pointer;
+ border-radius: 4px;
+ transition: all 0.2s ease;
}
.cardbutton:hover {
- background-color: rgba(128, 128, 128, 0.32);
+ background-color: var(--ifm-color-emphasis-200);
+ border-color: var(--ifm-color-emphasis-400);
+ transform: translateY(-1px);
}
.cardbutton:first-child {
diff --git a/src/components/WelcomeCard/welcome-card.module.css b/src/components/WelcomeCard/welcome-card.module.css
new file mode 100644
index 000000000..c068fa16a
--- /dev/null
+++ b/src/components/WelcomeCard/welcome-card.module.css
@@ -0,0 +1,212 @@
+/* Section Styles */
+.section {
+ max-width: var(--ifm-container-width-xl);
+ margin: 0 auto;
+ padding: 3rem 0;
+ width: 100%;
+}
+
+.sectionHeading {
+ margin-bottom: 2.5rem;
+}
+
+.sectionTitle {
+ font-size: var(--ifm-h2-font-size);
+ margin-bottom: 0.75rem;
+}
+
+.sectionDescription {
+ font-size: var(--ifm-font-size-lg);
+ margin-bottom: 0;
+ color: var(--ifm-color-emphasis-700);
+}
+
+/* Card Grid */
+.cardGrid {
+ display: grid;
+ gap: 2rem;
+ grid-template-columns: 1fr;
+ width: 100%;
+}
+
+@media screen and (min-width: 600px) {
+ .cardGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media screen and (min-width: 996px) {
+ .cardGrid {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 3rem;
+ }
+}
+
+/* Card Link (wrapper) */
+.cardLink {
+ text-decoration: none !important;
+ color: inherit;
+ transition: transform 0.2s ease;
+ display: block;
+ height: 100%;
+}
+
+.cardLink:hover .cardLarge {
+ transform: translateY(-4px);
+}
+
+.cardLink:hover .card:not(.cardLarge) {
+ transform: translateX(4px);
+}
+
+/* Base Card Styles */
+.card {
+ height: 100%;
+ position: relative;
+ transition: all 0.2s ease;
+}
+
+/* Large Card (feature card) - Column layout */
+.cardLarge {
+ background-color: var(--ifm-pre-background);
+ border-radius: 8px;
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.cardLarge:hover {
+ border-color: var(--ifm-color-emphasis-300);
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
+}
+
+/* Framework Card (non-large) - Row layout */
+.card:not(.cardLarge) {
+ background-color: transparent;
+ border: none;
+ padding: 1rem 0;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ gap: 1rem;
+}
+
+/* Grid span for large cards */
+.cardLarge {
+ grid-column: span 1;
+}
+
+@media screen and (min-width: 600px) {
+ .cardLarge {
+ grid-column: span 2;
+ }
+}
+
+@media screen and (min-width: 996px) {
+ .cardLarge {
+ grid-column: span 3;
+ }
+}
+
+/* Icon Container */
+.iconContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* Icon Container for Large cards */
+.cardLarge .iconContainer {
+ background-color: var(--ifm-color-emphasis-100);
+ border-radius: 8px;
+ padding: 0.75rem;
+ width: 60px;
+ height: 60px;
+ margin-bottom: 1.25rem;
+}
+
+/* Icon Container for Framework cards */
+.card:not(.cardLarge) .iconContainer {
+ background-color: var(--ifm-color-emphasis-200);
+ border-radius: 8px;
+ padding: 0.75rem;
+ width: 40px;
+ height: 40px;
+ margin-bottom: 0;
+ transition: all 0.2s ease;
+}
+
+/* Icon container hover effect */
+.cardLink:hover .card:not(.cardLarge) .iconContainer {
+ background-color: var(--ifm-color-emphasis-300);
+}
+
+/* Icon */
+.icon {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+/* Card Content */
+.cardContent {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+/* Card Title */
+.cardTitle {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+/* Large Card Title */
+.cardLarge .cardTitle {
+ font-size: var(--ifm-h3-font-size);
+}
+
+/* Framework Card Title */
+.card:not(.cardLarge) .cardTitle {
+ color: var(--ifm-color-primary);
+ font-size: var(--ifm-h5-font-size);
+ transition: color 0.2s ease;
+}
+
+.cardLink:hover .card:not(.cardLarge) .cardTitle {
+ color: var(--ifm-color-primary-darker);
+}
+
+/* Card Description */
+.cardDescription {
+ margin-bottom: 0;
+ color: var(--ifm-color-emphasis-700);
+ line-height: 1.5;
+}
+
+/* Large Card Description */
+.cardLarge .cardDescription {
+ font-size: var(--ifm-font-size-base);
+}
+
+/* Framework Card Description */
+.card:not(.cardLarge) .cardDescription {
+ font-size: 0.875rem;
+}
+
+/* Card Arrow (only for large cards) */
+.cardArrow {
+ position: absolute;
+ bottom: 1.5rem;
+ right: 1.5rem;
+ font-size: 1.25rem;
+ opacity: 0;
+ transform: translateX(-8px);
+ transition: all 0.2s ease;
+}
+
+.cardLink:hover .cardArrow {
+ opacity: 1;
+ transform: translateX(0);
+}
diff --git a/src/components/WelcomeCard/welcome-card.tsx b/src/components/WelcomeCard/welcome-card.tsx
new file mode 100644
index 000000000..b8e6dc1d8
--- /dev/null
+++ b/src/components/WelcomeCard/welcome-card.tsx
@@ -0,0 +1,108 @@
+import React from "react"
+import Link from "@docusaurus/Link"
+import clsx from "clsx"
+import styles from "./welcome-card.module.css"
+
+// Using the existing example card structure
+export interface CardItem {
+ title: string
+ description?: string
+ language?: string
+ languageLogoAlt?: string
+ author?: string
+ tested?: boolean
+ repo?: string
+ docs?: string
+ isLarge?: boolean
+}
+
+// Interface for the section props
+export interface WelcomeCardProps {
+ id: string
+ title?: string
+ description?: string
+ cards: Array
+}
+
+// Card Component that works with the existing structure
+const Card: React.FC = ({
+ title,
+ description,
+ language,
+ languageLogoAlt,
+ repo,
+ docs,
+ isLarge,
+}) => {
+ // Determine which link to use (docs preferred, then repo)
+ const link = docs || repo || ""
+
+ // Generate language logo path based on language prop
+ const logoPath = language ? `/docs/img/examples/${language}.svg` : null
+
+ const cardContent = (
+
+ )}
+