feature: new docs welcome page

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.

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/).
+<WelcomeCard {...welcomeContent.mainFeatures} />
 
-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.
+<WelcomeCard {...welcomeContent.features} />
 
-Ory secures billions of requests each month, runs in over 50,000 live deployments, and improves hourly.
+<WelcomeCard {...welcomeContent.frontendFrameworks} />
 
-## Why Ory is different
+<WelcomeCard {...welcomeContent.backendFrameworks} />
 
-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.
+<ExampleList {...content.community} />
+```

src/components/Examples/example-list.module.css

@@ -1,84 +1,97 @@
 .card {
-  background-color: var(--ifm-pre-background);
-  color: inherit;
-  padding: 1rem;
-  display: grid;
-  height: 100%;
-  grid-template-columns: 2rem 1.75fr;
-  grid-template-rows: 1fr;
-  gap: 1rem;
-  grid-template-areas: "logo-img content";
-}
+    background-color: var(--ifm-pre-background);
+    color: inherit;
+    padding: 1rem;
+    display: grid;
+    height: 100%;
+    grid-template-columns: 2rem 1.75fr;
+    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;
+  }
 
-.cardcontent {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-}
+  .card:hover {
+    border-color: var(--ifm-color-emphasis-300);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    transform: translateY(-2px);
+  }
 
-.cardimage {
-  grid-area: logo-img;
-  width: 2rem;
-}
+  .cardcontent {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+  }
 
-.cardtitle {
-  margin-bottom: 0.25rem;
-  font-size: var(--ifm-h4-font-size);
-}
+  .cardimage {
+    grid-area: logo-img;
+    width: 2rem;
+  }
 
-.cardbuttongroup {
-  grid-area: buttons;
-  display: flex;
-  flex-direction: row;
-}
+  .cardtitle {
+    margin-bottom: 0.25rem;
+    font-size: var(--ifm-h4-font-size);
+  }
 
-.cardbutton {
-  display: flex;
-  align-items: center;
-  background-color: transparent;
-  border: 1px solid rgba(128, 128, 128, 0.32);
-  color: inherit;
-  padding: 8px 12px;
-  cursor: pointer;
-}
+  .cardbuttongroup {
+    grid-area: buttons;
+    display: flex;
+    flex-direction: row;
+  }
 
-.cardbutton:hover {
-  background-color: rgba(128, 128, 128, 0.32);
-}
+  .cardbutton {
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    border: 1px solid var(--ifm-color-emphasis-300);
+    color: inherit;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+  }
 
-.cardbutton:first-child {
-  margin-right: 0.5rem;
-}
+  .cardbutton:hover {
+    background-color: var(--ifm-color-emphasis-200);
+    border-color: var(--ifm-color-emphasis-400);
+    transform: translateY(-1px);
+  }
 
-.cardbuttonimg {
-  fill: var(--ifm-font-color-base);
-  margin-right: 0.25rem;
-}
+  .cardbutton:first-child {
+    margin-right: 0.5rem;
+  }
 
-.examplesection {
-  max-width: var(--ifm-container-width-xl);
-  margin: 0 auto;
-  padding: 0rem 0rem 3rem;
-}
+  .cardbuttonimg {
+    fill: var(--ifm-font-color-base);
+    margin-right: 0.25rem;
+  }
 
-.examplesectionheading {
-  padding-bottom: 1rem;
-}
+  .examplesection {
+    max-width: var(--ifm-container-width-xl);
+    margin: 0 auto;
+    padding: 0rem 0rem 3rem;
+  }
 
-.cardgrid {
-  margin: 0 auto;
-  display: grid;
-  gap: 1rem;
-}
+  .examplesectionheading {
+    padding-bottom: 1rem;
+  }
 
-@media screen and (min-width: 600px) {
   .cardgrid {
-    grid-template-columns: repeat(2, 1fr);
+    margin: 0 auto;
+    display: grid;
+    gap: 1rem;
   }
-}
 
-@media screen and (min-width: 996px) {
-  .cardgrid {
-    grid-template-columns: repeat(3, 1fr);
+  @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, 1fr);
+    }
   }
-}

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);
+  }

src/components/WelcomeCard/welcome-card.tsx

@@ -0,0 +1,104 @@
+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<CardItem>;
+}
+
+// Card Component that works with the existing structure
+const Card: React.FC<CardItem> = ({
+    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 = (
+        <div className={clsx(styles.card, isLarge && styles.cardLarge)}>
+            <div className={styles.iconContainer}>
+                {logoPath && (
+                    <img
+                        className={styles.icon}
+                        src={logoPath}
+                        alt={languageLogoAlt || `${language} logo`}
+                    />
+                )}
+            </div>
+            <div className={styles.cardContent}>
+                <div>
+                    <h3 className={styles.cardTitle}>{title}</h3>
+                    {description && <p className={styles.cardDescription}>{description}</p>}
+                </div>
+                {link && isLarge && <div className={styles.cardArrow}>→</div>}
+            </div>
+        </div>
+    );
+
+    if (link) {
+        return (
+            <Link to={link} className={styles.cardLink}>
+                {cardContent}
+            </Link>
+        );
+    }
+
+    return cardContent;
+};
+
+// Card Grid Component
+const CardGrid: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    return <div className={styles.cardGrid}>{children}</div>;
+};
+
+// Main WelcomeCard Component
+const WelcomeCard: React.FC<WelcomeCardProps> = ({
+    id,
+    title,
+    description,
+    cards,
+}) => {
+    return (
+        <section id={id} className={styles.section}>
+            {(title || description) && (
+                <div className={styles.sectionHeading}>
+                    {title && <h2 className={styles.sectionTitle}>{title}</h2>}
+                    {description && <p className={styles.sectionDescription}>{description}</p>}
+                </div>
+            )}
+            <CardGrid>
+                {cards.map((card, index) => (
+                    <Card key={index} {...card} />
+                ))}
+            </CardGrid>
+        </section>
+    );
+};
+
+export default WelcomeCard;

src/pages/_assets/welcome-content.tsx

@@ -0,0 +1,192 @@
+import { WelcomeCardProps } from "../../components/WelcomeCard/welcome-card";
+
+export const mainFeatures: WelcomeCardProps = {
+  id: "main-features",
+  cards: [
+    {
+      title: "Authentication",
+      description: "Ory Kratos provides a secure and scalable identity management system with email and password authentication flows.",
+      language: "auth",
+      languageLogoAlt: "Authentication",
+      docs: "/docs/guides/authentication",
+      isLarge: true,
+    },
+
+    {
+      title: "2FA",
+      description: "Ory Kratos supports two-factor authentication (2FA) with TOTP, WebAuthn, and recovery codes.",
+      language: "identity",
+      languageLogoAlt: "Identity",
+      docs: "/docs/kratos/bring-your-own-ui/custom-ui-advanced-integration#two-factor-authentication",
+      isLarge: true,
+    },
+    {
+      title: "Magic Links",
+      description: "Ory Kratos supports passwordless authentication with magic links.",
+      language: "magic",
+      languageLogoAlt: "Magic",
+      docs: "/docs/kratos/manage-identities/account-recovery#magic-links",
+      isLarge: true,
+    },
+    {
+      title: "Social Sign-In",
+      description: "Out of the box, Ory comes with custom-tailored connectors for 15+ social sign-in providers such as GitHub, Google, or Facebook.",
+      language: "social",
+      docs: "/docs/kratos/social-signin/overview",
+      isLarge: true,
+    },
+    {
+      title: "Ory Enterprise License",
+      description: "Support for mission-critical environments with optimized code, on-prem deployment options, and tailored security updates.",
+      language: "enterprise",
+      docs: "/docs/self-hosted/deployment",
+      isLarge: true,
+    },
+
+  ],
+};
+
+// Features content
+export const features: WelcomeCardProps = {
+  id: "features",
+  title: "Core Features",
+  description: "Explore Ory's core features.",
+  cards: [
+    {
+      title: "Identities",
+      description: "Ory Kratos provides advanced identity management with passwordless options, MFA, social sign-in, and progressive profiling.",
+      language: "identity",
+      docs: "/docs/identities",
+    },
+    {
+      title: "OAuth & OIDC",
+      description: "Ory Hydra delivers high-performance OAuth2 and OpenID Connect provider that integrates with existing identity systems.",
+      language: "auth",
+      docs: "/docs/getting-started/ory-network-oauth2",
+    },
+    {
+      title: "Permissions",
+      description: "Ory Keto implements fine-grained permission management with relationship-based access control (ReBAC) for scalable authorization.",
+      language: "permission",
+      docs: "/docs/guides/permissions/overview",
+    },
+  ],
+};
+
+// Backend frameworks content
+export const backendFrameworks: WelcomeCardProps = {
+  id: "backend-frameworks",
+  title: "Backend Frameworks",
+  description: "Explore how to integrate Ory into your favorite backend frameworks and libraries.",
+  cards: [
+    {
+      title: "Node/Express",
+      description: "The Ory Node.js SDK allows you to integrate authentication into your Express.js application.",
+      language: "typescript",
+      languageLogoAlt: "TypeScript logo",
+      author: "ory",
+      tested: true,
+      repo: "https://github.com/ory/docs/tree/master/code-examples/protect-page-login/expressjs",
+      docs: "/docs/getting-started/integrate-auth/expressjs",
+    },
+    {
+      title: "Go",
+      description: "The Ory Go SDK allows you to easily integrate authentication into your Go application.",
+      language: "go",
+      languageLogoAlt: "Go logo",
+      author: "ory",
+      tested: true,
+      repo: "https://github.com/ory/docs/tree/master/code-examples/protect-page-login/go",
+      docs: "/docs/getting-started/integrate-auth/go",
+    },
+    {
+      title: "PHP",
+      description: "The Ory PHP SDK allows you to integrate authentication into your PHP application.",
+      language: "php",
+      languageLogoAlt: "PHP logo",
+      author: "ory",
+      tested: true,
+      repo: "https://github.com/ory/docs/tree/master/code-examples/protect-page-login/php",
+      docs: "/docs/getting-started/integrate-auth/php",
+    },
+    {
+      title: "Python",
+      description: "Python SDK for Ory Kratos and Ory Keto with Flask.",
+      language: "python",
+      languageLogoAlt: "Python logo",
+      author: "ory",
+      tested: true,
+      repo: "https://github.com/ory/examples/tree/master/kratos-keto-flask",
+      docs: "https://www.ory.sh/blog/securing-flask-application-using-kratos-and-keto",
+    },
+    {
+      title: ".NET Core",
+      description: "The Ory .NET Core SDK allows you to integrate authentication into your .NET Core application.",
+      language: "dotnet",
+      languageLogoAlt: ".NET Core logo",
+      author: "ory",
+      tested: true,
+      repo: "https://github.com/ory/docs/tree/master/code-examples/protect-page-login/dotnet",
+      docs: "/docs/getting-started/integrate-auth/dotnet",
+    },
+  ],
+};
+
+// Frontend frameworks content
+export const frontendFrameworks: WelcomeCardProps = {
+  id: "frontend-frameworks",
+  title: "Frontend Frameworks",
+  description: "Explore how to integrate Ory into your favorite frontend frameworks and libraries.",
+  cards: [
+    {
+      title: "React",
+      description: "Integrate authentication into your React + Vite application with Ory.",
+      language: "react",
+      languageLogoAlt: "React logo",
+      author: "ory",
+      tested: true,
+      repo: "https://github.com/ory/docs/tree/master/code-examples/protect-page-login/react",
+      docs: "/docs/getting-started/integrate-auth/react",
+    },
+    {
+      title: "Next.js",
+      description: "Integrate authentication into your Next.js application with Ory.",
+      language: "nextjs",
+      languageLogoAlt: "Next.js logo",
+      author: "ory",
+      tested: true,
+      repo: "https://github.com/ory/docs/tree/master/code-examples/protect-page-login/nextjs",
+      docs: "/docs/getting-started/integrate-auth/nextjs",
+    },
+    {
+      title: "Vue.js",
+      description: "Get started with Ory and Vue.js to protect a page with login.",
+      language: "vue",
+      languageLogoAlt: "Vue.js logo",
+      author: "ory",
+      tested: true,
+      repo: "https://github.com/ory/docs/tree/master/code-examples/protect-page-login/vuejs",
+      docs: "/docs/getting-started/integrate-auth/vue",
+    },
+    {
+      title: "React Native",
+      description: "The Ory React Native SDK allows you to integrate authentication into your React Native application.",
+      language: "react",
+      languageLogoAlt: "React logo",
+      author: "ory",
+      tested: true,
+      repo: "https://github.com/ory/kratos-selfservice-ui-react-native",
+      docs: "/docs/getting-started/integrate-auth/react-native",
+    },
+    {
+      title: "Flutter",
+      description: "Easily add authentication to your Flutter web application with Ory.",
+      language: "flutter",
+      languageLogoAlt: "Flutter logo",
+      author: "ory",
+      tested: true,
+      repo: "https://github.com/ory/docs/tree/master/code-examples/protect-page-login/flutter_web_redirect",
+      docs: "/docs/getting-started/integrate-auth/flutter-web-redirect",
+    },
+  ],
+};