@kitconcept/website 2.0.0-alpha.9 → 2.0.0-beta.2

package/.changelog.draft

@@ -1,3 +1,7 @@
-## 2.0.0-alpha.9 (2026-02-09)
+## 2.0.0-beta.2 (2026-06-25)
+
+### Internal
+
+- Fix tests for Plone 6.2.0 @sneridagh [#43](https://github.com/kitconcept/kitconcept-website/issue/43)
 
 

package/.release-it.json

@@ -6,15 +6,16 @@
     "after:bump": [
       "node -e \"const fs=require('fs');const m=JSON.parse(fs.readFileSync('../../mrs.developer.json','utf8'));if(!m.core||!m.core.tag){console.error('Missing mrs.developer core.tag');process.exit(1);}const p=JSON.parse(fs.readFileSync('package.json','utf8'));p.volto_version=m.core.tag;fs.writeFileSync('package.json',JSON.stringify(p,null,2)+'\\n');\"",
       "git add package.json",
-      "pipx run towncrier build --draft --yes --version ${version} > .changelog.draft",
-      "pipx run towncrier build --yes --version ${version}",
+      "uvx towncrier build --draft --yes --version ${version} > .changelog.draft",
+      "uvx towncrier build --yes --version ${version}",
       "cp ../../README.md ./ && cp CHANGELOG.md ../../CHANGELOG.md",
-      "git add ../../CHANGELOG.md"
+      "python3 -c 'import json; data = json.load(open(\"../../package.json\")); data[\"version\"] = \"${version}\"; json.dump(data, open(\"../../package.json\", \"w\"), indent=2)'",
+      "git add ../../CHANGELOG.md ../../package.json"
     ],
     "after:release": "rm .changelog.draft README.md"
   },
   "git": {
-    "changelog": "pipx run towncrier build --draft --yes --version 0.0.0",
+    "changelog": "uvx towncrier build --draft --yes --version 0.0.0",
     "commit": false,
     "tag": false
   },

package/CHANGELOG.md

@@ -8,6 +8,139 @@
 
 <!-- towncrier release notes start -->
 
+## 2.0.0-beta.2 (2026-06-25)
+
+### Internal
+
+- Fix tests for Plone 6.2.0 @sneridagh [#43](https://github.com/kitconcept/kitconcept-website/issue/43)
+
+## 2.0.0-beta.1 (2026-06-23)
+
+### Feature
+
+- Add Person content type styled @iRohitSingh [#41](https://github.com/kitconcept/kitconcept-website/issue/41)
+- Upgrade kitconcept-core to version 2.0.0-beta.1. @ericof [#66](https://github.com/kitconcept/kitconcept-website/issue/66)
+
+## 2.0.0-alpha.27 (2026-06-12)
+
+### Bugfix
+
+- Removes the "View" select from the "More" menu in the Toolbar.
+  Upgrade to Volto 19.1.4.
+  See https://github.com/plone/volto/releases/tag/19.1.4
+  See https://github.com/kitconcept/volto-light-theme/releases/tag/8.0.0a30 @sneridagh 
+- Update to VLT and Volto 19.1.2. @sneridagh
+
+  See https://github.com/plone/volto/releases/tag/19.1.2
+  See https://github.com/kitconcept/volto-light-theme/releases/tag/8.0.0a29 
+
+## 2.0.0-alpha.26 (2026-06-08)
+
+### Bugfix
+
+- Fixed accordion does not work with the "Order" tab. Use `@eea/volto-accordion-block` 12.0.0. @Tishasoumya-02 
+- Upgrade Volto 19.1.0 @sneridagh 
+
+### Internal
+
+- Added acceptance tests infrastructure. @sneridagh [#30](https://github.com/kitconcept/kitconcept-website/issue/30)
+
+## 2.0.0-alpha.25 (2026-05-26)
+
+## 2.0.0-alpha.24 (2026-05-15)
+
+### Bugfix
+
+- Update to core 2a18 and VLT 2a28. @sneridagh 
+
+## 2.0.0-alpha.23 (2026-05-06)
+
+### Internal
+
+- Update to @kitconcept/core 2.0.0a18 (no significant frontend changes). @davisagli 
+
+## 2.0.0-alpha.22 (2026-05-06)
+
+### Bugfix
+
+- Update to k.core 2a16.
+  https://github.com/kitconcept/kitconcept-core/releases/tag/2.0.0a15
+  https://github.com/kitconcept/kitconcept-core/releases/tag/2.0.0a16 @sneridagh 
+
+## 2.0.0-alpha.21 (2026-05-04)
+
+### Bugfix
+
+- Upgrade to Volto 19a33.
+  Language fix. @sneridagh 
+
+## 2.0.0-alpha.20 (2026-04-30)
+
+### Bugfix
+
+- Update to Volto 19a32.
+  https://github.com/plone/volto/releases/tag/19.0.0-alpha.32 @sneridagh 
+
+## 2.0.0-alpha.19 (2026-04-30)
+
+### Bugfix
+
+- Upgrade Volto 19a31 and VLT 8a24.
+  https://github.com/kitconcept/volto-light-theme/releases/tag/8.0.0a24 @sneridagh 
+
+## 2.0.0-alpha.18 (2026-04-22)
+
+## 2.0.0-alpha.17 (2026-04-22)
+
+### Internal
+
+- Rerelease of 2a16. @sneridagh 
+
+## 2.0.0-alpha.16 (2026-04-21)
+
+## 2.0.0-alpha.15 (2026-04-21)
+
+### Bugfix
+
+- Update to volto-light-theme 8.0.0a20 (footer improvements). @davisagli 
+
+## 2.0.0-alpha.14 (2026-04-17)
+
+### Bugfix
+
+- Update VLT 8a19 and Volto 19a29. @sneridagh 
+
+## 2.0.0-alpha.13 (2026-03-31)
+
+### Feature
+
+- Add ContactList block. @iFlameing 
+- See https://github.com/kitconcept/kitconcept-core/releases/tag/2.0.0a14 @sneridagh 
+
+## 2.0.0-alpha.12 (2026-03-09)
+
+### Feature
+
+- Added add-on @plone-collective/volto-image-editor. @sneridagh 
+
+## 2.0.0-alpha.11 (2026-03-04)
+
+### Feature
+
+- Update to VLT 8a17.
+  See https://github.com/kitconcept/volto-light-theme/releases/tag/8.0.0a17 @sneridagh [#vlt8a17](https://github.com/kitconcept/kitconcept-website/issue/vlt8a17)
+
+### Internal
+
+- Added command for upgrading dependencies. @davisagli @sneridagh 
+
+## 2.0.0-alpha.10 (2026-02-16)
+
+### Bugfix
+
+- Update to core 2a10.
+  See https://github.com/kitconcept/kitconcept-core/releases/tag/2.0.0a10 @sneridagh 
+
 ## 2.0.0-alpha.9 (2026-02-09)
 
 ## 2.0.0-alpha.8 (2026-02-06)

package/README.md

@@ -194,4 +194,4 @@ The project is licensed under the MIT license.
 
 ## Credits and Acknowledgements 🙏
 
-Crafted with care by **This was generated by [cookiecutter-volto](https://github.com/plone/cookiecutter-volto/frontend_addon) on 2024-05-28 22:07:18**. A special thanks to all contributors and supporters!
+Crafted with care by **This was generated by [cookiecutter-volto](https://github.com/plone/cookiecutter-volto/frontend_addon) on 2024-05-28 22:07:18**. A special thanks to all contributors and supporters!!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/website",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-beta.2",
   "description": "A CMS solution for public websites. Created by kitconcept.",
   "main": "src/index.ts",
   "license": "MIT",
@@ -32,8 +32,8 @@
     "release-it": "^19.0.5",
     "typescript": "^5.7.3",
     "vitest": "^3.1.2",
-    "@plone/scripts": "4.0.0-alpha.4",
-    "@plone/types": "2.0.0-alpha.14"
+    "@plone/scripts": "4.0.1",
+    "@plone/types": "2.0.0"
   },
   "addons": [
     "@eeacms/volto-accordion-block",
@@ -41,6 +41,7 @@
     "@kitconcept/volto-bm3-compat",
     "@kitconcept/volto-button-block",
     "@kitconcept/volto-calendar-block",
+    "@kitconcept/volto-contact-block",
     "@kitconcept/volto-carousel-block",
     "@kitconcept/volto-dsgvo-banner",
     "@kitconcept/volto-heading-block",
@@ -51,29 +52,32 @@
     "@kitconcept/volto-slider-block",
     "@plonegovbr/volto-social-media",
     "@plone/volto-form-block",
+    "@plone-collective/volto-image-editor",
     "@kitconcept/volto-light-theme",
     "@kitconcept/core"
   ],
   "dependencies": {
-    "@eeacms/volto-accordion-block": "^10.4.6",
+    "@eeacms/volto-accordion-block": "^12.0.0",
     "@plonegovbr/volto-social-media": "^3.0.0-alpha.0",
     "@plone/volto-form-block": "^1.0.0-alpha.0",
-    "@kitconcept/core": "2.0.0-alpha.9",
-    "@kitconcept/volto-button-block": "5.0.0-alpha.0",
-    "@kitconcept/volto-light-theme": "8.0.0-alpha.15",
-    "@kitconcept/volto-banner-block": "1.1.0",
+    "@plone-collective/volto-image-editor": "1.0.1",
+    "@kitconcept/core": "2.0.0-beta.1",
+    "@kitconcept/volto-contact-block": "1.0.0-alpha.5",
     "@kitconcept/volto-bm3-compat": "1.0.0-alpha.1",
-    "@kitconcept/volto-carousel-block": "3.0.0-alpha.0",
+    "@kitconcept/volto-button-block": "5.0.0-alpha.2",
+    "@kitconcept/volto-light-theme": "8.0.0-alpha.30",
+    "@kitconcept/volto-highlight-block": "5.0.0-alpha.0",
+    "@kitconcept/volto-carousel-block": "3.0.0-alpha.1",
+    "@kitconcept/volto-banner-block": "1.2.0",
+    "@kitconcept/volto-logos-block": "4.0.0-alpha.1",
+    "@kitconcept/volto-calendar-block": "1.0.0-alpha.9",
+    "@kitconcept/volto-introduction-block": "1.4.1",
     "@kitconcept/volto-heading-block": "2.5.0",
-    "@kitconcept/volto-highlight-block": "4.5.1",
-    "@kitconcept/volto-introduction-block": "1.3.0",
-    "@kitconcept/volto-logos-block": "4.0.0-alpha.0",
     "@kitconcept/volto-separator-block": "5.0.0-alpha.0",
-    "@kitconcept/volto-calendar-block": "1.0.0-alpha.6",
-    "@kitconcept/volto-slider-block": "7.0.0-alpha.0",
-    "@kitconcept/volto-dsgvo-banner": "3.0.1"
+    "@kitconcept/volto-dsgvo-banner": "4.0.0-alpha.1",
+    "@kitconcept/volto-slider-block": "7.0.0-alpha.1"
   },
-  "volto_version": "19.0.0-alpha.23",
+  "volto_version": "19.1.4",
   "scripts": {
     "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
     "dry-release": "release-it --dry-run",

package/src/components/Blocks/ContactList/schema.ts

@@ -0,0 +1,11 @@
+import { defaultStylingSchema } from '@kitconcept/volto-light-theme/components/Blocks/schema';
+import type { JSONSchema, SchemaEnhancerArgs } from '@plone/types';
+export const ContactListStylingSchema = ({
+  schema,
+  formData,
+  intl,
+}: SchemaEnhancerArgs): JSONSchema => {
+  defaultStylingSchema({ schema, formData, intl });
+
+  return schema;
+};

package/src/components/theme/PersonView.tsx

@@ -0,0 +1,272 @@
+/**
+ * PersonView view component.
+ * @module components/theme/View/PersonView
+ */
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import config from '@plone/volto/registry';
+import mobilePhoneSVG from '@plone/volto/icons/mobile.svg';
+import officePhoneSVG from '@plone/volto/icons/headset.svg';
+import mailSVG from '@plone/volto/icons/email.svg';
+import worldSVG from '@plone/volto/icons/world.svg';
+import faxSVG from '@plone/volto/icons/printer.svg';
+
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+
+interface PersonViewProps {
+  content: {
+    first_name: string;
+    last_name?: string;
+    description?: string;
+    text?: {
+      data: string;
+    };
+    image?: {
+      scales?: {
+        preview?: {
+          download: string;
+        };
+      };
+      download?: string;
+    };
+    contact_name?: string;
+    contact_email?: string;
+    contact_phone?: string;
+    contact_website?: string;
+    contact_building?: string;
+    contact_room?: string;
+    office_phone?: string;
+    fax?: string;
+    address?: string;
+  };
+}
+
+/**
+ * PersonView view component class.
+ * @function PersonView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const PersonView: React.FC<PersonViewProps> = ({ content }) => {
+  const Container = config.getComponent({ name: 'Container' }).component;
+  const Image = config.getComponent({ name: 'Image' }).component;
+
+  const profile = {
+    fullName: content.last_name
+      ? `${content.first_name} ${content.last_name}`
+      : content.first_name,
+  };
+
+  const contact = {
+    officePhone: content.office_phone ?? null,
+    mobilePhone: content.contact_phone ?? null,
+    fax: content.fax ?? null,
+    email: content.contact_email ?? null,
+    website: content.contact_website ?? null,
+    contactBuilding: content.contact_building ?? null,
+    contactRoom: content.contact_room ?? null,
+  };
+
+  return (
+    <Container id="page-document" className="view-wrapper person-view">
+      <div className="person-profile">
+        <header className="profile-header">
+          {content.image?.download && (
+            <Image
+              className="profile-image"
+              item={content}
+              imageField="image"
+              alt={profile.fullName}
+            />
+          )}
+
+          <div className="profile-info">
+            <h1>{profile.fullName}</h1>
+          </div>
+        </header>
+
+        {(contact.officePhone ||
+          contact.mobilePhone ||
+          contact.fax ||
+          contact.email ||
+          contact.website) && (
+          <div className="contact-wrapper">
+            <section aria-labelledby="contact-heading">
+              <h2 id="contact-heading">
+                <FormattedMessage id="Contact" defaultMessage="Contact" />
+              </h2>
+              <div className="contact-list">
+                {contact.officePhone && (
+                  <div className="contact-item">
+                    <Icon
+                      title={
+                        <FormattedMessage id="Phone" defaultMessage="Phone" />
+                      }
+                      name={officePhoneSVG}
+                      size="36px"
+                    />
+                    <a
+                      href={`tel:${contact.officePhone}`}
+                      aria-label="Office phone"
+                    >
+                      {contact.officePhone}
+                    </a>
+                  </div>
+                )}
+
+                {contact.mobilePhone && (
+                  <div className="contact-item">
+                    <Icon
+                      title={
+                        <FormattedMessage id="Phone" defaultMessage="Phone" />
+                      }
+                      name={mobilePhoneSVG}
+                      size="36px"
+                    />
+                    <a
+                      href={`tel:${contact.mobilePhone}`}
+                      aria-label="Mobile phone"
+                    >
+                      <span aria-label="Mobile phone">
+                        {contact.mobilePhone}
+                      </span>
+                    </a>
+                  </div>
+                )}
+
+                {contact.fax && (
+                  <div className="contact-item">
+                    <Icon
+                      title={
+                        <FormattedMessage id="Phone" defaultMessage="Phone" />
+                      }
+                      name={faxSVG}
+                      size="36px"
+                    />
+                    <span aria-label="Fax">{contact.fax}</span>
+                  </div>
+                )}
+
+                {contact.email && (
+                  <div className="contact-item">
+                    <Icon
+                      title={
+                        <FormattedMessage id="E-mail" defaultMessage="E-mail" />
+                      }
+                      name={mailSVG}
+                      size="36px"
+                    />
+                    <a href={`mailto:${contact.email}`} aria-label="Email">
+                      {contact.email}
+                    </a>
+                  </div>
+                )}
+
+                {contact.website && (
+                  <div className="contact-item">
+                    <Icon
+                      title={
+                        <FormattedMessage id="Site" defaultMessage="Site" />
+                      }
+                      name={worldSVG}
+                      size="36px"
+                    />
+                    <a href={contact.website} aria-label="Website">
+                      {contact.website}
+                    </a>
+                  </div>
+                )}
+              </div>
+            </section>
+
+            {(content.address ||
+              contact.contactBuilding ||
+              contact.contactRoom) && (
+              <section aria-labelledby="address-heading">
+                <h2 id="address-heading">
+                  <FormattedMessage id="Address" defaultMessage="Address" />
+                </h2>
+                <address>
+                  <div className="building-room">
+                    {contact.contactBuilding && (
+                      <div>
+                        <FormattedMessage
+                          id="Building"
+                          defaultMessage="Building"
+                        />{' '}
+                        {contact.contactBuilding}
+                        {contact.contactRoom && (
+                          <span>
+                            {' '}
+                            /{' '}
+                            <FormattedMessage
+                              id="Room"
+                              defaultMessage="Room"
+                            />{' '}
+                            {contact.contactRoom}
+                          </span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {content.address && (
+                    <p className="address">{content.address}</p>
+                  )}
+                </address>
+              </section>
+            )}
+          </div>
+        )}
+
+        {content.text && (
+          <section className="bio-section" aria-labelledby="bio-heading">
+            <h2 id="bio-heading">
+              <FormattedMessage id="Bio" defaultMessage="Bio" />
+            </h2>
+            <div className="bio-content">
+              <p dangerouslySetInnerHTML={{ __html: content.text.data }} />
+            </div>
+            <svg
+              className="bio-section-border bio-section-border--desktop"
+              viewBox="0 0 948 63"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0.582031 1H117.744V60.9434L177.688 1H947.416"
+                stroke="black"
+              />
+            </svg>
+            <svg
+              className="bio-section-border bio-section-border--tablet"
+              width="730"
+              height="63"
+              viewBox="0 0 730 63"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M0 1H56.7997V60.9434L116.766 1H730" stroke="black" />
+            </svg>
+            <svg
+              className="bio-section-border bio-section-border--mobile"
+              width="335"
+              height="63"
+              viewBox="0 0 335 63"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0.652344 1H57.4304V60.9434L117.374 1H334.347"
+                stroke="black"
+              />
+            </svg>
+          </section>
+        )}
+      </div>
+    </Container>
+  );
+};
+
+export default PersonView;

package/src/config/blocks.ts

@@ -0,0 +1,26 @@
+import type { ConfigType } from '@plone/registry';
+import type { StyleDefinition } from '@plone/types';
+import { ContactListStylingSchema } from '../components/Blocks/ContactList/schema';
+
+declare module '@plone/types' {
+  export interface BlocksConfigData {
+    contactList: BlockConfigBase;
+  }
+
+  export interface BlockConfigBase {
+    themes?: StyleDefinition[];
+    templates: {
+      [key: string]: {
+        label: string;
+        template: any;
+      };
+    };
+  }
+}
+
+export default function install(config: ConfigType) {
+  config.blocks.blocksConfig.contactList.schemaEnhancer =
+    ContactListStylingSchema;
+
+  return config;
+}

package/src/config/settings.ts

@@ -1,9 +1,7 @@
 import { ConfigType } from '@plone/registry';
 
 export default function install(config: ConfigType) {
-  config.settings.isMultilingual = false;
-  config.settings.supportedLanguages = ['en'];
-  config.settings.defaultLanguage = 'en';
+  config.settings.supportedLanguages = ['de', 'en'];
 
   // Volto Light Theme Configuration
   config.settings.siteHeader = true;

package/src/index.ts

@@ -1,8 +1,14 @@
 import { ConfigType } from '@plone/registry';
 import installSettings from './config/settings';
+import installBlocks from './config/blocks';
+import PersonView from './components/theme/PersonView';
 
 const applyConfig = (config: ConfigType) => {
   installSettings(config);
+  installBlocks(config);
+
+  config.views.contentTypesViews.Person = PersonView;
+
   return config;
 };
 

package/src/theme/_main.scss

@@ -0,0 +1,6 @@
+@import 'components/person';
+
+// Removes the "View" from the "More" menu in the Toolbar.
+.inline.field.field-wrapper-display-select {
+  display: none;
+}

package/src/theme/components/_person.scss

@@ -0,0 +1,214 @@
+#page-document.view-wrapper.person-view {
+  .person-profile {
+    background: var(--accent-color);
+    color: var(--accent-foreground-color);
+  }
+
+  header.profile-header,
+  .contact-wrapper,
+  .bio-section {
+    max-width: var(--default-container-width);
+    margin: 0 auto;
+  }
+}
+
+.profile-header {
+  display: flex;
+  align-items: center;
+  padding-top: $spacing-large;
+  padding-bottom: $spacing-xlarge;
+  border-top: 1px solid var(--accent-foreground-color);
+  margin-bottom: $spacing-large;
+  gap: $spacing-small;
+}
+
+.profile-image {
+  width: 300px;
+  height: 300px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.profile-info {
+  h1 {
+    font-size: 48px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 60px;
+  }
+}
+
+.contact-wrapper {
+  display: grid;
+  padding-bottom: $spacing-large;
+  gap: $spacing-large;
+  grid-template-columns: 1fr 1fr;
+}
+
+.contact-wrapper,
+.bio-section {
+  h2 {
+    padding-bottom: $spacing-small;
+    border-bottom: 1px solid var(--accent-foreground-color);
+    margin: 0;
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+  }
+}
+
+.contact-list {
+  display: flex;
+  flex-direction: column;
+  padding-top: $spacing-medium;
+  gap: $spacing-small;
+
+  .contact-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    svg path {
+      fill: var(--accent-foreground-color);
+    }
+  }
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+  }
+}
+
+address {
+  padding-top: $spacing-medium;
+  font-style: normal;
+
+  h3 {
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
+  }
+}
+
+.bio-section {
+  padding-top: $spacing-large;
+  padding-bottom: $spacing-large;
+
+  .bio-content {
+    padding: $spacing-medium 0;
+
+    p {
+      font-size: 24px;
+      font-weight: 300;
+      line-height: 33px;
+      a {
+        font: inherit;
+      }
+    }
+  }
+}
+
+// Bio section border responsive display
+.bio-section-border--desktop,
+.bio-section-border--tablet,
+.bio-section-border--mobile {
+  width: 100%;
+  height: auto;
+  path {
+    stroke: var(--accent-foreground-color);
+  }
+}
+
+.bio-section-border--desktop {
+  display: block;
+}
+
+.bio-section-border--tablet,
+.bio-section-border--mobile {
+  display: none;
+}
+
+@media (max-width: 730px) {
+  .bio-section-border--desktop {
+    display: none;
+  }
+  .bio-section-border--tablet {
+    display: block;
+  }
+}
+
+@media (max-width: 980px) {
+  .person-profile {
+    padding: 0 $spacing-small;
+
+    .profile-header {
+      padding-bottom: $spacing-large;
+
+      .profile-info {
+        h1 {
+          margin-top: 25px;
+          margin-bottom: $spacing-small;
+          font-size: 30px;
+          font-weight: $bold;
+          line-height: 36px;
+        }
+      }
+    }
+
+    .profile-image {
+      width: 210px;
+      height: 210px;
+    }
+    .contact-wrapper,
+    .bio-section {
+      padding-bottom: $spacing-large;
+
+      h2 {
+        font-size: 14px;
+        line-height: 18px;
+      }
+    }
+    .bio-section {
+      padding-top: 30px;
+    }
+  }
+}
+
+@media (max-width: 500px) {
+  .bio-section-border--tablet {
+    display: none;
+  }
+  .bio-section-border--mobile {
+    display: block;
+  }
+}
+
+@media (max-width: $largest-mobile-screen) {
+  .person-profile {
+    .profile-header {
+      flex-direction: column;
+      align-items: start;
+      padding-bottom: $spacing-small;
+      gap: $spacing-small;
+      text-align: left;
+
+      .profile-info h1 {
+        margin-bottom: $spacing-medium !important;
+      }
+    }
+    .contact-wrapper {
+      gap: $spacing-small;
+      grid-template-columns: 1fr;
+
+      section {
+        padding-top: $spacing-medium;
+      }
+    }
+    .bio-section {
+      padding-top: 0;
+      padding-bottom: $spacing-medium;
+    }
+  }
+}

package/tsconfig.json

@@ -17,7 +17,10 @@
     "jsx": "react-jsx",
     "paths": {
       "@plone/volto/*": ["../../core/packages/volto/src/*"],
-      "@kitconcept/website/*": ["./src/*"]
+      "@kitconcept/website/*": ["./src/*"],
+      "@kitconcept/volto-light-theme/*": [
+        "./node_modules/@kitconcept/volto-light-theme/src/*"
+      ]
     }
   },
   "include": ["src", "src/**/*.js"],