Update intro sections

gatsby-node.ts

@@ -197,7 +197,6 @@ export const createPages: GatsbyNode['createPages'] = ({ actions }) => {
     isPermanent: true,
     force: true,
   });
-
   createRedirect({
     fromPath: '/how-to/*',
     toPath: '/verify/how-to/:splat',
@@ -210,6 +209,66 @@ export const createPages: GatsbyNode['createPages'] = ({ actions }) => {
     isPermanent: true,
     force: true,
   });
+  createRedirect({
+    fromPath: '/verify/getting-started/overview/*',
+    toPath: '/verify/how-it-works/overview/:splat',
+    isPermanent: true,
+    force: true,
+  });
+  createRedirect({
+    fromPath: '/verify/articles/custom-ui-css',
+    toPath: '/verify/guides/custom-styling/#custom-css-adding-a-stylesheet',
+    isPermanent: true,
+    force: true,
+  });
+  createRedirect({
+    fromPath: '/verify',
+    toPath: '/verify/getting-started/',
+    isPermanent: true,
+    force: true,
+  });
+  createRedirect({
+    fromPath: '/verify/articles/custom-ui-css',
+    toPath: '/verify/guides/custom-styling/#custom-css-adding-a-stylesheet',
+    isPermanent: true,
+    force: true,
+  });
+  createRedirect({
+    fromPath: '/verify/guides/test-users/',
+    toPath: '/verify/getting-started/test-users/',
+    isPermanent: true,
+    force: true,
+  });
+  createRedirect({
+    fromPath: '/verify/getting-started/overview/*',
+    toPath: '/verify/how-it-works/overview/:splat',
+    isPermanent: true,
+    force: true,
+  });
+  createRedirect({
+    fromPath: '/verify/getting-started/basics/*',
+    toPath: '/verify/how-it-works/core-concepts/:splat',
+    isPermanent: true,
+    force: true,
+  });
+  createRedirect({
+    fromPath: '/verify/getting-started/oidc-intro/*',
+    toPath: '/verify/how-it-works/oidc-intro/:splat',
+    isPermanent: true,
+    force: true,
+  });
+  createRedirect({
+    fromPath: '/verify/getting-started/best-security-practices/*',
+    toPath: '/verify/how-it-works/best-security-practices/:splat',
+    isPermanent: true,
+    force: true,
+  });
+  createRedirect({
+    fromPath: '/verify/guides/production/*',
+    toPath: '/verify/getting-started/production/:splat',
+    isPermanent: true,
+    force: true,
+  });
 };
 
 // https://www.gatsbyjs.com/docs/conceptual/data-fetching/#source-data-to-be-queried-at-build-time

src/Homepage/SignaturesIntegrationCards.tsx

@@ -1,9 +1,9 @@
 import React, { ReactElement } from 'react';
 import { LogoCard } from '../components/LogoCard/LogoCard';
-import PythonLogo from './logos/integrations/python.svg';
-import NodejsLogo from './logos/integrations/nodejs.svg';
-import PhpLogo from './logos/integrations/php.svg';
-import CsharpLogo from './logos/integrations/csharp.svg';
+import PythonLogo from '../images/logos/integrations/python.svg';
+import NodejsLogo from '../images/logos/integrations/nodejs.svg';
+import PhpLogo from '../images/logos/integrations/php.svg';
+import CsharpLogo from '../images/logos/integrations/csharp.svg';
 
 const guides = [
   {

src/Homepage/eIDCards.tsx

@@ -1,14 +1,14 @@
 import React, { ReactElement } from 'react';
 import { LogoCard } from '../components/LogoCard/LogoCard';
-import MitIDLogo from './logos/eids/mitid.svg';
-import NoBankIDLogo from './logos/eids/no-bankid.svg';
-import SeBankIDLogo from './logos/eids/se-bankid.svg';
-import FtnLogo from './logos/eids/ftn.svg';
-import FrejaIDLogo from './logos/eids/freja.svg';
-import VippsLogo from './logos/eids/vipps.svg';
-import iDinLogo from './logos/eids/idin.svg';
-import MitIDErhvervLogo from './logos/eids/mitid-erhverv.svg';
-import PersonalausweisLogo from './logos/eids/personalausweis.svg';
+import MitIDLogo from '../images/logos/eids/mitid.svg';
+import NoBankIDLogo from '../images/logos/eids/no-bankid.svg';
+import SeBankIDLogo from '../images/logos/eids/se-bankid.svg';
+import FtnLogo from '../images/logos/eids/ftn.svg';
+import FrejaIDLogo from '../images/logos/eids/freja.svg';
+import VippsLogo from '../images/logos/eids/vipps.svg';
+import iDinLogo from '../images/logos/eids/idin.svg';
+import MitIDErhvervLogo from '../images/logos/eids/mitid-erhverv.svg';
+import PersonalausweisLogo from '../images/logos/eids/personalausweis.svg';
 
 const eids = [
   {

src/components/AuthorizeURLBuilder.tsx

@@ -485,10 +485,7 @@ export default function AuthorizeURLBuilder(props: {
           helpText={
             <span>
               Also known as{' '}
-              <a
-                href="/verify/reference/glossary/#redirect-uri-callback-url"
-                className="text-primary-600"
-              >
+              <a href="/verify/reference/glossary/#redirect-uri" className="text-primary-600">
                 <i>callback URL</i>
               </a>
               .

src/components/Navigation.tsx

@@ -18,6 +18,7 @@ const VERIFY_CATEGORIES = [
   'eIDs',
   'Guides & Tools',
   'Integrations',
+  'How it works',
   'Reference',
 ];
 

src/Homepage/VerifyIntegrationCards.tsx → src/components/VerifyIntegrationCards.tsx

@@ -1,116 +1,134 @@
 import React, { ReactElement } from 'react';
-import { LogoCard } from '../components/LogoCard/LogoCard';
+import { LogoCard } from './LogoCard/LogoCard';
 
-import Auth0Logo from './logos/integrations/auth0.svg';
-import JavaScriptLogo from './logos/integrations/javascript.svg';
-import ReactLogo from './logos/integrations/react.svg';
-import NodejsLogo from './logos/integrations/nodejs.svg';
-import VuejsLogo from './logos/integrations/vuejs.svg';
-import ExpoLogo from './logos/integrations/expo.svg';
-import WordpressLogo from './logos/integrations/wordpress.svg';
-import AwsCognitoLogo from './logos/integrations/aws-cognito.svg';
-import FirebaseLogo from './logos/integrations/firebase.svg';
-import OktaLogo from './logos/integrations/okta.svg';
-import PingFederateLogo from './logos/integrations/ping-identity.svg';
-import PhpLogo from './logos/integrations/php.svg';
-import DotnetLogo from './logos/integrations/dotnet.svg';
-import OneLoginLogo from './logos/integrations/onelogin.svg';
-import KotlinLogo from './logos/integrations/kotlin.svg';
-import SwiftLogo from './logos/integrations/swift.svg';
+import Auth0Logo from '../images/logos/integrations/auth0.svg';
+import JavaScriptLogo from '../images/logos/integrations/javascript.svg';
+import ReactLogo from '../images/logos/integrations/react.svg';
+import NodejsLogo from '../images/logos/integrations/nodejs.svg';
+import VuejsLogo from '../images/logos/integrations/vuejs.svg';
+import ExpoLogo from '../images/logos/integrations/expo.svg';
+import WordpressLogo from '../images/logos/integrations/wordpress.svg';
+import AwsCognitoLogo from '../images/logos/integrations/aws-cognito.svg';
+import FirebaseLogo from '../images/logos/integrations/firebase.svg';
+import OktaLogo from '../images/logos/integrations/okta.svg';
+import PingFederateLogo from '../images/logos/integrations/ping-identity.svg';
+import PhpLogo from '../images/logos/integrations/php.svg';
+import DotnetLogo from '../images/logos/integrations/dotnet.svg';
+import OneLoginLogo from '../images/logos/integrations/onelogin.svg';
+import KotlinLogo from '../images/logos/integrations/kotlin.svg';
+import SwiftLogo from '../images/logos/integrations/swift.svg';
 
 const guides = [
   {
     href: 'react',
     header: 'React',
     logo: { src: ReactLogo, width: 46, alt: 'React logo' },
+    category: 'SPA/Native',
   },
   {
     href: 'javascript',
     header: 'JavaScript',
     logo: { src: JavaScriptLogo, alt: 'JavaScript logo' },
+    category: 'SPA/Native',
   },
   {
     href: 'nodejs-express',
     header: 'Node.js (Express)',
     logo: { src: NodejsLogo, width: 70, height: 42, alt: 'Node.js (Express) logo' },
+    category: 'Web',
   },
   {
     href: 'vuejs',
     header: 'Vue.js',
     logo: { src: VuejsLogo, height: 46, alt: 'Vue.js logo' },
+    category: 'SPA/Native',
   },
   {
     href: 'kotlin',
     header: 'Kotlin (Android)',
     logo: { src: KotlinLogo, alt: 'Kotlin logo' },
+    category: 'SPA/Native',
   },
   {
     href: 'react-native-expo',
     header: 'Expo (React Native)',
     logo: { src: ExpoLogo, height: 42, width: 38, alt: 'Expo logo' },
+    category: 'SPA/Native',
   },
 
   {
     href: 'swift',
     header: 'Swift (iOS)',
     logo: { src: SwiftLogo, alt: 'Swift logo' },
+    category: 'SPA/Native',
   },
   {
     href: 'wordpress',
     header: 'Wordpress',
     logo: { src: WordpressLogo, width: 42, height: 42, alt: 'Wordpress logo' },
+    category: 'Web',
   },
   {
     href: 'auth0',
     header: 'Auth0',
     logo: { src: Auth0Logo, height: 36, alt: 'Auth0 logo' },
+    category: 'CIAM',
   },
   {
     href: 'aws-cognito',
     header: 'AWS Cognito',
     logo: { src: AwsCognitoLogo, width: 38, height: 44, alt: 'AWS Cognito logo' },
+    category: 'CIAM',
   },
   {
     href: 'firebase',
     header: 'Firebase',
     logo: { src: FirebaseLogo, width: 32, height: 44, alt: 'Firebase logo' },
+    category: 'CIAM',
   },
   {
     href: 'okta',
     header: 'Okta',
     logo: { src: OktaLogo, width: 69, height: 23, alt: 'Okta logo' },
+    category: 'CIAM',
   },
   {
     href: 'onelogin',
     header: 'OneLogin',
     logo: { src: OneLoginLogo, width: 42, height: 42, alt: 'OneLogin logo' },
+    category: 'CIAM',
   },
   {
     href: 'pingfederate',
     header: 'PingFederate',
     logo: { src: PingFederateLogo, alt: 'PingFederate logo' },
+    category: 'CIAM',
   },
   {
     href: 'PHP',
     header: 'PHP',
     logo: { src: PhpLogo, width: 64, height: 34, alt: 'PHP logo' },
+    category: 'Web',
   },
   {
     href: 'aspnet-core-v6',
     header: 'ASP.NET Core 6.0',
     logo: { src: DotnetLogo, alt: 'Dotnet logo' },
+    category: 'Web',
   },
   {
     href: 'aspnet-core-v3',
     header: 'ASP.NET Core 3.1',
     logo: { src: DotnetLogo, alt: 'Dotnet logo' },
+    category: 'Web',
   },
 ];
 
-export function VerifyIntegrationCards(): ReactElement {
+function IntegrationCardsList({ category }: { category?: string }): ReactElement {
+  const displayGuides = category ? guides.filter(g => g.category === category) : guides;
   return (
     <div className="flex flex-wrap gap-4 not-prose">
-      {guides.map(guide => (
+      {displayGuides.map(guide => (
         <LogoCard
           key={guide.href}
           className="h-[104px] w-[152px]"
@@ -123,3 +141,8 @@ export function VerifyIntegrationCards(): ReactElement {
     </div>
   );
 }
+
+export const VerifyIntegrationCards = () => <IntegrationCardsList />;
+export const VerifyIntegrationCardsWeb = () => <IntegrationCardsList category="Web" />;
+export const VerifyIntegrationCardsSpa = () => <IntegrationCardsList category="SPA/Native" />;
+export const VerifyIntegrationCardsCiam = () => <IntegrationCardsList category="CIAM" />;

src/pages/index.mdx

@@ -4,7 +4,7 @@ subtitle: Welcome to the API documentation for Idura Verify & Idura Document Sig
 ---
 
 import { ProductCards } from '../Homepage/ProductCards';
-import { VerifyIntegrationCards } from '../Homepage/VerifyIntegrationCards';
+import { VerifyIntegrationCards } from '../components/VerifyIntegrationCards';
 import { SignaturesIntegrationCards } from '../Homepage/SignaturesIntegrationCards';
 import { EidCards } from '../Homepage/eIDCards';
 import { DeveloperToolsCards } from '../Homepage/DeveloperToolsCards';
@@ -15,7 +15,7 @@ import { DeveloperToolsCards } from '../Homepage/DeveloperToolsCards';
 
 ## Integrate Idura Verify
 
-Idura Verify can be integrated with any tech stack using the standard [OpenID Connect (OIDC) protocol](/verify/getting-started/oidc-intro/).
+Idura Verify can be integrated with any tech stack using the standard [OpenID Connect (OIDC) protocol](/verify/how-it-works/oidc-intro/).
 You don't need to be an identity expert to integrate Idura: a trusted OIDC client library or one of our dedicated SDKs will handle most of the complexity for you.
 Idura can also easily connect to your existing CIAM system, such as Auth0, AWS Cognito, or Firebase.
 

src/pages/verify/getting-started/dashboard-setup.mdx

@@ -0,0 +1,65 @@
+---
+product: verify
+category: Getting Started
+sort: 1
+title: Set up the Dashboard
+subtitle: Create a tenant, register an application, and generate client credentials.
+---
+
+Before you can integrate Idura Verify into your application, you need to configure your environment in the Idura Dashboard.
+This takes about two minutes and will give you the client credentials required to build your own eID-based login flows.
+
+## Create a tenant
+
+A [tenant](/verify/how-it-works/core-concepts/#tenants) represents your organization's isolated environment at Idura.
+
+1. [Sign up for a free test account](https://dashboard.idura.app/signup) to access the Idura Dashboard.
+2. You will be prompted to create your first tenant.
+
+<Highlight>
+  **Risk-free testing**: Your free account includes a sandbox environment with unlimited test
+  logins, allowing you to build and test your integration without any obligations or unexpected
+  costs.
+</Highlight>
+
+## Register a domain
+
+Everything you do with Idura requires a [domain](/verify/how-it-works/core-concepts/#domains) to route your authentication requests.
+
+1. Go to the [**Domains** tab](https://dashboard.idura.app/domains) in your dashboard.
+2. Click **Register domain**.
+3. Select your domain type. We recommend starting with a standard `.test.idura.broker` domain for your local development and testing.
+4. Type your domain name in the **Domain settings** field. If your company name is Acme Corp, your first domain may look somethig like `acme-corp.test.idura.broker`.
+
+## Register an application
+
+An [application](/verify/how-it-works/core-concepts/#applications) represents the software you are building (e.g., your React frontend or Node.js backend).
+Registering an application generates the client credentials you will use in your code to configure your software to communicate with Idura Verify.
+
+1. Add a [new login application](https://dashboard.idura.app/applications/add/) from the **Applications** tab of your dashboard.
+2. Configure your new application:
+
+- **Name:** Choose a recognizable name.
+- **Domain:** Select the domain you registered in the previous step.
+- **Client ID / Realm:** You can use the auto-generated identifier (e.g., `urn:my:application:identifier:123`) or create a custom one.
+- **Redirect URL(s):** Enter the [callback URL](/verify/reference/glossary/#redirect-uri) where Idura should send users after they log in (e.g., `http://localhost:3000/api/auth/callback` for local development).
+  _Note: Wildcards are not supported, but you can always add more URLs to the list._
+- **Application Type:** Select the option that matches your tech stack (e.g., Single Page Application -> React, Regular Web Application -> Node.js). This will point you to the right integration guide once the application is created.
+
+3. Click **Create Application** to save the initial configurations.
+   Your application settings will now display the **Client ID / Realm**. You will need to paste it in your code once ready to integrate.
+
+### Generate a client secret
+
+import GenerateClientSecretSnippet from '../../../snippets/generate-client-secret.mdx';
+
+<GenerateClientSecretSnippet />
+
+## What's next?
+
+Your dashboard is configured and your API credentials are ready to use.
+
+To be able to run test logins, you need to create a test user for the eID(s) you're planning to use.
+Note that you can't use your real, personal eID in a test environment.
+
+[Create test users →](/verify/getting-started/test-users/)