From 1003ffd171aad301feff51b1ac26abd119c83c75 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 19 Mar 2026 09:19:35 +0000 Subject: [PATCH 1/2] Initial plan From bf60fe883b0652874f655b6de25b169b84a35056 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 19 Mar 2026 09:41:55 +0000 Subject: [PATCH 2/2] Add KITs by Role overview page with role-based KIT filtering Co-authored-by: matbmoser <71728767+matbmoser@users.noreply.github.com> --- data/kitsData.js | 102 +++++ docusaurus.config.js | 5 + src/pages/Kits-Role-Overview/index.js | 141 +++++++ .../Kits-Role-Overview/styles.module.scss | 359 ++++++++++++++++++ 4 files changed, 607 insertions(+) create mode 100644 src/pages/Kits-Role-Overview/index.js create mode 100644 src/pages/Kits-Role-Overview/styles.module.scss diff --git a/data/kitsData.js b/data/kitsData.js index 4e14fb6a30a8..1b06fb562423 100644 --- a/data/kitsData.js +++ b/data/kitsData.js @@ -108,6 +108,12 @@ import PrecisionManufacturing from '@mui/icons-material/PrecisionManufacturing'; import Memory from '@mui/icons-material/Memory'; import ApartmentIcon from '@mui/icons-material/Apartment'; import Science from '@mui/icons-material/Science'; +import BusinessIcon from '@mui/icons-material/Business'; +import CodeIcon from '@mui/icons-material/Code'; +import BuildIcon from '@mui/icons-material/Build'; +import StorageIcon from '@mui/icons-material/Storage'; +import SchoolIcon from '@mui/icons-material/School'; +import AccountBalanceIcon from '@mui/icons-material/AccountBalance'; // Categories with their corresponding CSS class names and colors @@ -118,6 +124,64 @@ export const licenses = { "MIT": "https://opensource.org/licenses/MIT" } +// Role definitions for the KIT role overview page +export const kitRoles = [ + { + id: 'sme', + name: 'SME', + label: 'Small & Medium Enterprise', + description: 'Small and medium enterprises that want to participate in data spaces as data providers or consumers, enabling collaboration and business value creation.', + icon: BusinessIcon, + gradient: 'linear-gradient(135deg, #1976D2 0%, #0D47A1 100%)', + color: '#1976D2', + }, + { + id: 'service-provider', + name: 'Service Provider', + label: 'Enablement Service Provider', + description: 'Companies that operate decentralized services enabling sovereign participation and data exchange for data providers and consumers in the data space.', + icon: StorageIcon, + gradient: 'linear-gradient(135deg, #7B1FA2 0%, #4A148C 100%)', + color: '#7B1FA2', + }, + { + id: 'app-provider', + name: 'App Provider', + label: 'Business Application Provider', + description: 'Companies building interoperable business applications on top of KIT standards, delivering value to data providers and consumers across use cases.', + icon: BuildIcon, + gradient: 'linear-gradient(135deg, #388E3C 0%, #1B5E20 100%)', + color: '#388E3C', + }, + { + id: 'developer', + name: 'Developer', + label: 'Software Developer', + description: 'Software engineers implementing KIT integrations, building connectors, and developing solutions that interact with Tractus-X data space infrastructure.', + icon: CodeIcon, + gradient: 'linear-gradient(135deg, #F57C00 0%, #E65100 100%)', + color: '#F57C00', + }, + { + id: 'researcher', + name: 'Researcher', + label: 'Researcher & Academia', + description: 'Academic institutions and researchers studying data space technologies, governance models, AI integrations, and industry use cases.', + icon: SchoolIcon, + gradient: 'linear-gradient(135deg, #0097A7 0%, #006064 100%)', + color: '#0097A7', + }, + { + id: 'operator', + name: 'Operator', + label: 'Core Service Operator', + description: 'Organizations operating core services that enable the basic functionality of the data space, including identity providers, marketplaces, and onboarding services.', + icon: AccountBalanceIcon, + gradient: 'linear-gradient(135deg, #C62828 0%, #7F0000 100%)', + color: '#C62828', + }, +]; + // Kit data with their respective logos, routes, industries, and descriptions export const kitsData = { dataspaceFoundation: [ @@ -144,6 +208,7 @@ export const kitsData = { }, deprecated: false, domain: "Enablement Service", + roles: ['service-provider', 'developer', 'operator'], description: 'The EDC as a connector implements a framework agreement for sovereign, cross-organizational data exchange.', metadata: { created: '2022-08-01', @@ -176,6 +241,7 @@ export const kitsData = { }, deprecated: true, domain: "Governance", + roles: ['service-provider', 'developer', 'operator', 'researcher'], description: 'Enable and simplify data governance.', metadata: { created: '2024-03-08', @@ -207,6 +273,7 @@ export const kitsData = { }, deprecated: false, domain: "Security", + roles: ['service-provider', 'developer', 'operator'], description: 'Enable content validation, certification and verification for any use case semantic data.', metadata: { created: '2025-09-30', @@ -238,6 +305,7 @@ export const kitsData = { }, deprecated: false, domain: "Participant Management", + roles: ['sme', 'service-provider', 'developer', 'operator'], description: 'Get high-quality data business partner data records including the unique identifier.', metadata: { created: '2023-03-01', @@ -269,6 +337,7 @@ export const kitsData = { }, deprecated: false, domain: "Enablement Service", + roles: ['sme', 'service-provider', 'app-provider', 'developer'], description: 'Digital Twins enable data-level interoperability - even between parties previously unknown to each other.', metadata: { created: '2023-07-12', @@ -302,6 +371,7 @@ export const kitsData = { }, deprecated: false, domain: "Use Case Platform", + roles: ['sme', 'app-provider', 'developer'], description: 'Connceting Use-Cases with Core Services', metadata: { created: '2024-02-28', @@ -333,6 +403,7 @@ export const kitsData = { }, deprecated: false, domain: "Traceability", + roles: ['sme', 'app-provider', 'developer'], description: 'Data Chain KIT is made for apps and services to access connected data distributed between organizations.', metadata: { created: '2023-03-01', @@ -364,6 +435,7 @@ export const kitsData = { }, deprecated: false, domain: "Traceability", + roles: ['sme', 'app-provider', 'developer'], description: 'Trace parts and materials across the entire value chain to enable data driven use cases over all n-tier levels.', metadata: { created: '2023-04-12', @@ -395,6 +467,7 @@ export const kitsData = { }, deprecated: false, domain: 'Supply Chain', + roles: ['sme', 'app-provider'], description: 'Inform partners about disruptions in the supply chain.', metadata: { created: '2024-08-01', @@ -426,6 +499,7 @@ export const kitsData = { }, deprecated: false, domain: "Enablement Service", + roles: ['service-provider', 'developer', 'researcher'], description: 'Generate Knowledge from Data. Scalable & Efficient Semantic Dataspace Federation.', metadata: { created: '2023-09-04', @@ -458,6 +532,7 @@ export const kitsData = { }, deprecated: false, domain: 'Artificial Intelligence (AI)', + roles: ['app-provider', 'developer', 'researcher'], description: 'Defines standard ways to expose and use AI Services.', metadata: { created: '2025-12-19', @@ -492,6 +567,7 @@ export const kitsData = { deprecated: false, domain: 'Sustainability', industries: ['automotive', 'construction'], + roles: ['sme', 'app-provider', 'researcher'], description: 'Environmental and Social Standards Incident Management in supply chains.', metadata: { created: '2024-03-06', @@ -524,6 +600,7 @@ export const kitsData = { deprecated: false, domain: 'Sustainability', industries: ['automotive', 'manufacturing', 'construction', 'semiconductor'], + roles: ['sme', 'app-provider', 'researcher'], description: 'Product-specific CO2 footprint.', metadata: { created: '2023-08-23', @@ -556,6 +633,7 @@ export const kitsData = { deprecated: false, domain: 'Sustainability', industries: ['automotive'], + roles: ['sme', 'app-provider', 'researcher'], description: 'Carbon Border Adjustment Mechanism (CBAM) compliance and reporting for cross-border emissions data.', metadata: { created: '2025-08-13', @@ -588,6 +666,7 @@ export const kitsData = { deprecated: false, domain: 'Sustainability', industries: ['automotive', 'manufacturing', 'construction'], + roles: ['sme', 'app-provider', 'researcher'], description: 'Leverage the transparency of digital product passports to strengthen sustainability & compliance.', metadata: { created: '2023-08-11', @@ -620,6 +699,7 @@ export const kitsData = { deprecated: false, domain: 'Sustainability', industries: ['automotive', 'manufacturing'], + roles: ['sme', 'app-provider', 'researcher'], description: 'Enable circular economy business models with data exchange across company boundaries.', metadata: { created: '2023-12-08', @@ -653,6 +733,7 @@ export const kitsData = { deprecated: false, domain: 'Sustainability', industries: ['automotive', 'chemical'], + roles: ['sme', 'app-provider', 'researcher'], description: 'Facilitate due diligence processes by providing standardized data exchange for risk assessment and compliance check.', metadata: { created: '2026-02-23', @@ -685,6 +766,7 @@ export const kitsData = { deprecated: false, domain: 'Supply Chain', industries: ['automotive', 'semiconductor'], + roles: ['sme', 'app-provider'], description: 'Quick build of solutions for companies of any size to engage a collaborative capacity management.', metadata: { created: '2023-03-01', @@ -717,6 +799,7 @@ export const kitsData = { deprecated: false, domain: 'Supply Chain', industries: ['automotive', 'construction'], + roles: ['sme', 'app-provider'], description: 'Provide packing information, transport data and customs topics.', metadata: { created: '2025-02-12', @@ -749,6 +832,7 @@ export const kitsData = { deprecated: false, domain: 'Supply Chain', industries: ['automotive'], + roles: ['sme', 'app-provider'], description: 'Basis for a more efficient customs process and ensure a robust preference calculation result.', metadata: { created: '2025-02-25', @@ -781,6 +865,7 @@ export const kitsData = { deprecated: false, domain: 'Supply Chain', industries: ['automotive'], + roles: ['sme', 'app-provider', 'researcher'], description: 'Gain increased supply chain transparency through collaborative simulation across all stakeholders.', metadata: { created: '2023-08-18', @@ -813,6 +898,7 @@ export const kitsData = { deprecated: false, domain: 'Supply Chain', industries: ['automotive'], + roles: ['sme', 'app-provider'], description: 'Predictive Unit Realtime Information Service', metadata: { created: '2023-11-29', @@ -845,6 +931,7 @@ export const kitsData = { deprecated: false, domain: 'Engineering', industries: ['automotive'], + roles: ['sme', 'app-provider', 'developer'], description: 'Federated simulation and data processing.', metadata: { created: '2023-12-08', @@ -877,6 +964,7 @@ export const kitsData = { deprecated: false, domain: "Simulations", industries: ['automotive'], + roles: ['app-provider', 'developer', 'researcher'], description: 'Maximize the potential of usage data through calculation services and simulations.', metadata: { created: '2024-05-16', @@ -909,6 +997,7 @@ export const kitsData = { deprecated: false, domain: 'Quality', industries: ['automotive'], + roles: ['sme', 'app-provider'], description: 'Data driven quality management enables data provider and consumer to exchange and analyse existing data across company boundaries.', metadata: { created: '2023-08-18', @@ -941,6 +1030,7 @@ export const kitsData = { deprecated: false, domain: 'Engineering', industries: ['automotive'], + roles: ['sme', 'app-provider', 'developer'], description: 'Cross company requirements management to enable quick information access and multiple company collaboration.', metadata: { created: '2025-09-29', @@ -973,6 +1063,7 @@ export const kitsData = { deprecated: false, domain: 'Engineering', industries: ['automotive'], + roles: ['sme', 'app-provider', 'developer'], description: 'Enable secure and sovereign exchange of engineering geometry information across the entire value chain.', metadata: { created: '2025-11-28', @@ -1005,6 +1096,7 @@ export const kitsData = { deprecated: false, domain: 'Master Data Management', industries: ['automotive', 'manufacturing'], + roles: ['sme', 'service-provider', 'operator'], description: 'Manage and exchange in a decentralized manner company certificates across the supply chain to ensure compliance and quality standards.', metadata: { created: '2026-03-17', @@ -1041,6 +1133,7 @@ export const kitsData = { deprecated: false, domain: 'Production', industries: ['automotive', 'manufacturing'], + roles: ['sme', 'app-provider'], description: 'Create a federated network of networks to connect manufacturing supply and demand.', metadata: { created: '2024-03-29', @@ -1073,6 +1166,7 @@ export const kitsData = { deprecated: false, domain: 'Production', industries: ['manufacturing'], + roles: ['sme', 'app-provider', 'developer'], description: 'Enable customized production (batch size 1) without significant increase of costs.', metadata: { created: '2023-11-20', @@ -1109,6 +1203,7 @@ export const kitsData = { deprecated: false, domain: 'Engineering', industries: ['automotive'], + roles: ['sme', 'app-provider', 'developer'], description: 'Defines standard ways for the orchestration of engineering activities in federated development ecosystems.', metadata: { created: '2026-02-13', @@ -1142,6 +1237,7 @@ export const kitsData = { deprecated: false, domain: 'Engineering', industries: ['automotive'], + roles: ['sme', 'app-provider', 'developer'], description: 'Defines the minimum viable logic for federated engineering service brokerage.', metadata: { created: '2026-02-13', @@ -1429,3 +1525,9 @@ export const getDataspaceStats = () => { return stats; }; + +// Get all KITs relevant for a specific role +export const getKitsByRole = (roleId) => { + const allKits = getAllKits(); + return allKits.filter(kit => kit.roles && kit.roles.includes(roleId)); +}; diff --git a/docusaurus.config.js b/docusaurus.config.js index 5583b8ed356d..85a15f481f7c 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -306,6 +306,11 @@ const config = { label: 'KIT Master Data', className: 'kit-nav-item' }, + { + to: '/Kits-Role-Overview', + label: 'KITs by Role', + className: 'kit-nav-item' + }, // Dynamically generated from kitsData ...generateKitNavItems(), ], diff --git a/src/pages/Kits-Role-Overview/index.js b/src/pages/Kits-Role-Overview/index.js new file mode 100644 index 000000000000..80f2e52a1dd1 --- /dev/null +++ b/src/pages/Kits-Role-Overview/index.js @@ -0,0 +1,141 @@ +/********************************************************************************* + * Eclipse Tractus-X - eclipse-tractusx.github.io + * + * Copyright (c) 2026 Contributors to the Eclipse Foundation + * + * See the NOTICE file(s) distributed with this work for additional + * information regarding copyright ownership. + * + * This program and the accompanying materials are made available under the + * terms of the Apache License, Version 2.0 which is available at + * https://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * SPDX-License-Identifier: Apache-2.0 + ********************************************************************************/ + +import React, { useState } from 'react'; +import Layout from '@theme/Layout'; +import Link from '@docusaurus/Link'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { kitRoles, getKitsByRole } from '@site/data/kitsData'; +import ExpandedKitsGrid from '@site/src/components/2.0/ExpandedKitsGrid'; +import styles from './styles.module.scss'; + +export default function KitsRoleOverviewPage() { + const { siteConfig } = useDocusaurusContext(); + const [selectedRole, setSelectedRole] = useState(null); + + const handleRoleSelect = (roleId) => { + setSelectedRole(roleId === selectedRole ? null : roleId); + }; + + const activeRole = kitRoles.find(r => r.id === selectedRole); + const filteredKits = selectedRole ? getKitsByRole(selectedRole) : []; + + return ( + + {/* Page Header */} +
+
+ + ← Back to All KITs + +

KITs by Role

+

+ Find the KITs that matter to you. Select your role to see a curated view of the + Eclipse Tractus-X KITs relevant to your work in the data space. +

+
+
+ +
+ {/* Role Selection */} +
+

Select Your Role

+

+ Who are you in the Catena-X / Tractus-X ecosystem? Choose your role below to discover + the KITs that are most relevant for you. +

+
+ {kitRoles.map((role) => { + const RoleIcon = role.icon; + const isActive = selectedRole === role.id; + const kitCount = getKitsByRole(role.id).length; + return ( + + ); + })} +
+
+ + {/* KITs for Selected Role */} + {selectedRole && activeRole && ( +
+
+
+
+ {React.createElement(activeRole.icon, { className: styles.roleHeaderIconSvg })} +
+
+

+ KITs for {activeRole.name} + {filteredKits.length} +

+

{activeRole.label}

+
+
+
+
+ +
+
+ )} + + {/* Prompt when no role selected */} + {!selectedRole && ( +
+
+ 👆 +

Select a role above

+

+ Pick your role to see the KITs tailored for you. Each KIT comes with adoption guidance, + technical specifications, and reference implementations to help you get started quickly. +

+
+
+ )} +
+ + ); +} diff --git a/src/pages/Kits-Role-Overview/styles.module.scss b/src/pages/Kits-Role-Overview/styles.module.scss new file mode 100644 index 000000000000..971b61d3faf3 --- /dev/null +++ b/src/pages/Kits-Role-Overview/styles.module.scss @@ -0,0 +1,359 @@ +/********************************************************************************* + * Eclipse Tractus-X - eclipse-tractusx.github.io + * + * Copyright (c) 2026 Contributors to the Eclipse Foundation + * + * See the NOTICE file(s) distributed with this work for additional + * information regarding copyright ownership. + * + * This program and the accompanying materials are made available under the + * terms of the Apache License, Version 2.0 which is available at + * https://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * SPDX-License-Identifier: Apache-2.0 + ********************************************************************************/ + +/* Page Header */ +.pageHeader { + background: var(--ifm-background-color); + border-bottom: 1px solid var(--ifm-color-emphasis-200); + padding: 2.5rem 1rem 2rem; + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, var(--ifm-color-primary-lightest, rgba(250,160,35,0.08)) 0%, transparent 60%); + pointer-events: none; + } +} + +.headerContent { + max-width: 1200px; + margin: 0 auto; + position: relative; + z-index: 1; +} + +.backLink { + display: inline-flex; + align-items: center; + gap: 0.4rem; + color: var(--ifm-color-primary); + font-size: 0.875rem; + font-weight: 500; + text-decoration: none; + margin-bottom: 1rem; + transition: opacity 0.2s; + + &:hover { + opacity: 0.8; + text-decoration: none; + } +} + +.pageTitle { + font-size: 2.5rem; + font-weight: 700; + margin: 0 0 0.75rem; + color: var(--ifm-font-color-base); + + @media (max-width: 768px) { + font-size: 1.75rem; + } +} + +.pageSubtitle { + font-size: 1.125rem; + color: var(--ifm-color-emphasis-700); + max-width: 680px; + margin: 0; + line-height: 1.6; +} + +/* Main Content */ +.mainContent { + max-width: 1200px; + margin: 0 auto; + padding: 2rem 1rem 4rem; +} + +/* Roles Section */ +.rolesSection { + margin-bottom: 3rem; +} + +.sectionTitle { + font-size: 1.5rem; + font-weight: 700; + color: var(--ifm-font-color-base); + margin: 0 0 0.5rem; +} + +.sectionDescription { + font-size: 1rem; + color: var(--ifm-color-emphasis-700); + margin: 0 0 1.75rem; + line-height: 1.6; +} + +.rolesGrid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; + + @media (max-width: 1024px) { + grid-template-columns: repeat(2, 1fr); + } + + @media (max-width: 600px) { + grid-template-columns: 1fr; + } +} + +/* Role Card */ +.roleCard { + display: flex; + flex-direction: column; + align-items: flex-start; + text-align: left; + background: var(--ifm-background-color); + border: 2px solid var(--ifm-color-emphasis-200); + border-radius: 16px; + padding: 1.5rem; + cursor: pointer; + transition: all 0.25s ease; + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + inset: 0; + background: var(--role-gradient); + opacity: 0; + transition: opacity 0.25s ease; + border-radius: 14px; + } + + &:hover { + border-color: var(--role-color); + transform: translateY(-3px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); + + &::before { + opacity: 0.06; + } + } + + &:focus { + outline: 2px solid var(--role-color); + outline-offset: 2px; + } +} + +.roleCardActive { + border-color: var(--role-color) !important; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important; + transform: translateY(-3px); + + &::before { + opacity: 0.1 !important; + } +} + +.roleIconWrapper { + display: flex; + align-items: center; + justify-content: center; + width: 52px; + height: 52px; + border-radius: 12px; + background: var(--role-gradient); + margin-bottom: 1rem; + position: relative; + z-index: 1; +} + +.roleIcon { + font-size: 1.75rem !important; + color: #fff !important; +} + +.roleInfo { + position: relative; + z-index: 1; + flex: 1; +} + +.roleName { + font-size: 1.125rem; + font-weight: 700; + color: var(--ifm-font-color-base); + margin: 0 0 0.25rem; +} + +.roleLabel { + font-size: 0.8125rem; + font-weight: 600; + color: var(--role-color); + margin: 0 0 0.625rem; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.roleDescription { + font-size: 0.875rem; + color: var(--ifm-color-emphasis-700); + line-height: 1.5; + margin: 0 0 1rem; +} + +.kitCount { + display: inline-flex; + align-items: center; + gap: 0.25rem; + font-size: 0.8125rem; + font-weight: 600; + padding: 0.25rem 0.625rem; + border-radius: 100px; + background: var(--ifm-color-emphasis-100); + color: var(--ifm-color-emphasis-700); + border: 1px solid var(--ifm-color-emphasis-200); +} + +.activeIndicator { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: var(--role-gradient); + border-radius: 14px 14px 0 0; +} + +/* KITs Section */ +.kitsSection { + margin-top: 1rem; +} + +.kitsSectionHeader { + border-radius: 16px; + padding: 1.75rem 2rem; + margin-bottom: 1.5rem; + background: var(--ifm-background-color); + border: 1px solid var(--ifm-color-emphasis-200); + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + inset: 0; + background: var(--role-gradient); + opacity: 0.08; + border-radius: 15px; + } +} + +.kitsSectionHeaderInner { + display: flex; + align-items: center; + gap: 1.25rem; + position: relative; + z-index: 1; +} + +.roleHeaderIcon { + display: flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + border-radius: 14px; + background: var(--role-gradient); + flex-shrink: 0; +} + +.roleHeaderIconSvg { + font-size: 2rem !important; + color: #fff !important; +} + +.kitsSectionTitle { + font-size: 1.5rem; + font-weight: 700; + color: var(--ifm-font-color-base); + margin: 0 0 0.25rem; + display: flex; + align-items: center; + gap: 0.75rem; +} + +.kitsSectionBadge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 28px; + height: 28px; + padding: 0 0.5rem; + border-radius: 100px; + background: var(--ifm-color-primary); + color: #fff; + font-size: 0.875rem; + font-weight: 700; +} + +.kitsSectionSubtitle { + font-size: 0.9375rem; + color: var(--ifm-color-emphasis-700); + margin: 0; +} + +.kitsGrid { + background: var(--ifm-background-color); +} + +/* Prompt Section */ +.promptSection { + display: flex; + justify-content: center; + padding: 3rem 1rem; +} + +.promptCard { + text-align: center; + max-width: 480px; + padding: 3rem 2rem; + background: var(--ifm-background-color); + border: 2px dashed var(--ifm-color-emphasis-300); + border-radius: 20px; +} + +.promptEmoji { + font-size: 3rem; + display: block; + margin-bottom: 1rem; +} + +.promptTitle { + font-size: 1.25rem; + font-weight: 700; + color: var(--ifm-font-color-base); + margin: 0 0 0.75rem; +} + +.promptText { + font-size: 0.9375rem; + color: var(--ifm-color-emphasis-700); + line-height: 1.6; + margin: 0; +}