diff --git a/docs/welcome.mdx b/docs/welcome.mdx
index b4c09efe0..0919dc874 100644
--- a/docs/welcome.mdx
+++ b/docs/welcome.mdx
@@ -1,6 +1,6 @@
---
id: welcome
-title: Welcome to Ory!
+title: Welcome to Ory
sidebar_label: Introduction
slug: welcome
---
@@ -10,17 +10,12 @@ Find all the guides and resources you need to develop with Ory.
```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"
-
+
+
-
+
-
+
-
-
-
-
```
diff --git a/src/components/WelcomeCard/welcome-card.module.css b/src/components/WelcomeCard/welcome-card.module.css
index c068fa16a..5419d4528 100644
--- a/src/components/WelcomeCard/welcome-card.module.css
+++ b/src/components/WelcomeCard/welcome-card.module.css
@@ -1,44 +1,81 @@
-/* Section Styles */
-.section {
- max-width: var(--ifm-container-width-xl);
- margin: 0 auto;
- padding: 3rem 0;
+/* Container for all welcome sections */
+.welcomeContainer {
width: 100%;
+ max-width: 100%;
+ margin: 0 auto;
+ padding: 0 1rem;
}
+/* Section Styles */
+
.sectionHeading {
- margin-bottom: 2.5rem;
+ width: 250px;
+ margin-right: 1.5rem;
+ margin-bottom: 1.5rem;
+ margin-top: 3rem;
}
.sectionTitle {
- font-size: var(--ifm-h2-font-size);
- margin-bottom: 0.75rem;
+ font-size: var(--ifm-h3-font-size);
+ margin-bottom: 0.5rem;
}
.sectionDescription {
font-size: var(--ifm-font-size-lg);
margin-bottom: 0;
color: var(--ifm-color-emphasis-700);
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
}
-/* Card Grid */
+/* Card Grid - Grid layout */
.cardGrid {
display: grid;
- gap: 2rem;
- grid-template-columns: 1fr;
- width: 100%;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 1.5rem;
+ flex: 1;
}
-@media screen and (min-width: 600px) {
- .cardGrid {
+/* Apply specific grid layouts for each section */
+#authentication-section .cardGrid {
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+
+#oauth-section .cardGrid {
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
+
+#permission-section .cardGrid {
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
+
+#use-ory-section .cardGrid {
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+
+/* Responsive adjustments for specific sections */
+@media screen and (min-width: 992px) {
+ #authentication-section .cardGrid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ #oauth-section .cardGrid {
grid-template-columns: repeat(2, 1fr);
}
+
+ #permission-section .cardGrid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ #use-ory-section .cardGrid {
+ grid-template-columns: repeat(3, 1fr);
+ }
}
-@media screen and (min-width: 996px) {
- .cardGrid {
- grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 3rem;
+@media screen and (min-width: 1200px) {
+ #authentication-section .cardGrid {
+ grid-template-columns: repeat(6, 1fr);
}
}
@@ -51,62 +88,24 @@
height: 100%;
}
-.cardLink:hover .cardLarge {
- transform: translateY(-4px);
-}
-
-.cardLink:hover .card:not(.cardLarge) {
- transform: translateX(4px);
-}
-
/* Base Card Styles */
.card {
- height: 100%;
+ height: 200px; /* Fixed height for all cards */
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);
+ width: 100%;
+ overflow: hidden;
}
-.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;
- }
+.card:hover {
+ border-color: var(--ifm-color-primary);
+ transform: translateY(-4px);
}
/* Icon Container */
@@ -114,32 +113,12 @@
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);
+ padding: 0.5rem;
+ width: 36px;
+ height: 36px;
+ margin-bottom: 1rem;
}
/* Icon */
@@ -158,55 +137,62 @@
/* Card Title */
.cardTitle {
- margin-bottom: 0.5rem;
+ margin-bottom: 0.25rem;
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);
+ font-size: 1rem;
}
/* Card Description */
.cardDescription {
margin-bottom: 0;
color: var(--ifm-color-emphasis-700);
- line-height: 1.5;
+ line-height: 1.4;
+ font-size: 0.875rem;
+ display: -webkit-box;
+ -webkit-line-clamp: 5;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
}
-/* Large Card Description */
-.cardLarge .cardDescription {
- font-size: var(--ifm-font-size-base);
+/* Dark mode styling for cards */
+:global([data-theme="dark"]) .card {
+ background-color: #1a1a2e;
+ border-color: #2a2a4a;
}
-/* Framework Card Description */
-.card:not(.cardLarge) .cardDescription {
- font-size: 0.875rem;
+:global([data-theme="dark"]) .iconContainer {
+ background-color: rgba(255, 255, 255, 0.1);
}
-/* 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;
+/* Better visibility for SVG icons in dark mode */
+:global([data-theme="dark"]) .iconContainer svg {
+ stroke-width: 2.5;
+ filter: brightness(1.3);
}
-.cardLink:hover .cardArrow {
- opacity: 1;
- transform: translateX(0);
+/* Mobile view adjustments */
+@media screen and (max-width: 768px) {
+ .section {
+ flex-direction: column;
+ }
+
+ .sectionHeading {
+ width: 100%;
+ margin-right: 0;
+ }
+
+ .cardGrid {
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 1rem;
+ width: 100%;
+ }
+
+ .card {
+ height: 180px;
+ padding: 1.25rem;
+ }
+
+ .cardDescription {
+ -webkit-line-clamp: 4;
+ }
}
diff --git a/src/pages/_assets/welcome-content.tsx b/src/pages/_assets/welcome-content.tsx
index e29a1a07c..20f1473b8 100644
--- a/src/pages/_assets/welcome-content.tsx
+++ b/src/pages/_assets/welcome-content.tsx
@@ -1,210 +1,113 @@
import { WelcomeCardProps } from "../../components/WelcomeCard/welcome-card"
-export const mainFeatures: WelcomeCardProps = {
- id: "main-features",
+// Authentication section cards
+export const authenticationCards: WelcomeCardProps = {
+ id: "authentication-section",
+ title: "Authentication",
cards: [
{
- title: "Authentication",
+ title: "Email & Password",
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,
+ "Secure authentication with username/email and password, with advanced password policies.",
+ language: "mail",
+ languageLogoAlt: "Email & Password logo",
+ docs: "/docs/kratos/passwordless/one-time-code",
},
{
- title: "Magic Links",
+ title: "Magic Link",
description:
"Ory Kratos supports passwordless authentication with magic links.",
language: "magic",
- languageLogoAlt: "Magic",
+ languageLogoAlt: "Magic Link logo",
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",
+ title: "Passkey",
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,
+ "Implement WebAuthn/FIDO2 passkeys for a secure and passwordless experience.",
+ language: "lock",
+ languageLogoAlt: "Passkey logo",
+ docs: "/docs/kratos/passwordless/passkeys",
},
],
}
-// Features content
-export const features: WelcomeCardProps = {
- id: "features",
- title: "Core Features",
- description: "Explore Ory's core features.",
+// OAuth2 section cards
+export const oauthCards: WelcomeCardProps = {
+ id: "oauth-section",
+ title: "OAuth 2",
cards: [
{
- title: "Identities",
+ title: "Social Sign-in",
description:
- "Ory Kratos provides advanced identity management with passwordless options, MFA, social sign-in, and progressive profiling.",
- language: "identity",
- docs: "/docs/identities",
+ "Ory includes custom connectors for 15+ social sign-in providers, such as GitHub, Google, and Facebook.",
+ language: "contact",
+ languageLogoAlt: "Social Sign-in logo",
+ docs: "/docs/kratos/social-signin/overview",
},
{
- title: "OAuth & OIDC",
+ title: "FedCM",
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",
+ "FedCM is a browser API that allows websites to authenticate users via third-party identity providers.",
+ language: "contact",
+ languageLogoAlt: "FedCM logo",
+ docs: "/docs/kratos/social-signin/fedcm",
},
],
}
-// 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.",
+// Permission section cards
+export const permissionCards: WelcomeCardProps = {
+ id: "permission-section",
+ title: "Permission",
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",
+ title: "Permissions",
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",
+ "Ory provides fine-grained permissions with relationship-based access control (ReBAC) for scalable authorization.",
+ language: "shield",
+ languageLogoAlt: "Permissions logo",
+ docs: "/docs/guides/permissions/overview",
},
{
- title: ".NET Core",
+ title: "RBAC",
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",
+ "Explore all permission and authorization features provided by Ory.",
+ language: "shield-user",
+ languageLogoAlt: "Permissions logo",
+ docs: "/docs/keto/guides/rbac",
},
],
}
-// 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.",
+// Use Ory section cards
+export const useOryCards: WelcomeCardProps = {
+ id: "use-ory-section",
+ title: "Use Ory",
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",
+ title: "Ory Network",
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",
+ "The Ory Network is the most convenient way to run Ory. Sign up and create a free developer project.",
+ language: "ory",
+ languageLogoAlt: "Ory Network logo",
+ docs: "https://console.ory.sh/registration",
},
{
- title: "React Native",
+ title: "Ory Enterprise",
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",
+ "Enterprise-grade support and features for your self-hosted Ory deployment.",
+ language: "ory",
+ languageLogoAlt: "Ory Enterprise logo",
+ docs: "/docs/self-hosted/oel/quickstart",
},
{
- title: "Flutter",
+ title: "Open Source",
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",
+ "Ory is open source first. We believe in the power of open source to build a better internet.",
+ language: "github",
+ languageLogoAlt: "Open Source logo",
+ docs: "/docs/open-source",
},
],
}
diff --git a/src/static/img/examples/contact.svg b/src/static/img/examples/contact.svg
new file mode 100644
index 000000000..9bcd6364c
--- /dev/null
+++ b/src/static/img/examples/contact.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/static/img/examples/flows.svg b/src/static/img/examples/flows.svg
new file mode 100644
index 000000000..399eb2c4f
--- /dev/null
+++ b/src/static/img/examples/flows.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/static/img/examples/github.svg b/src/static/img/examples/github.svg
new file mode 100644
index 000000000..bb378fe64
--- /dev/null
+++ b/src/static/img/examples/github.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/static/img/examples/lock.svg b/src/static/img/examples/lock.svg
new file mode 100644
index 000000000..3e3b6a2df
--- /dev/null
+++ b/src/static/img/examples/lock.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/static/img/examples/mail.svg b/src/static/img/examples/mail.svg
new file mode 100644
index 000000000..3c76f9a2c
--- /dev/null
+++ b/src/static/img/examples/mail.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/static/img/examples/shield-user.svg b/src/static/img/examples/shield-user.svg
new file mode 100644
index 000000000..7fc3c0b02
--- /dev/null
+++ b/src/static/img/examples/shield-user.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/static/img/examples/shield.svg b/src/static/img/examples/shield.svg
new file mode 100644
index 000000000..d03a74cb1
--- /dev/null
+++ b/src/static/img/examples/shield.svg
@@ -0,0 +1,5 @@
+