design-comuni-plone-theme 11.26.4 → 11.27.0

package/src/components/ItaliaTheme/Header/ParentSiteMenu.jsx

@@ -9,8 +9,17 @@ import { Link } from 'react-router-dom';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { Nav, NavItem, NavLink } from 'design-react-kit';
 import { useHomePath } from 'design-comuni-plone-theme/helpers';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  parent_site_menu: {
+    id: 'parent_site_menu',
+    defaultMessage: 'Main site menu',
+  },
+});
 
 const ParentSiteMenu = () => {
+  const intl = useIntl();
   const dropdownMenu = useSelector(
     (state) => state.dropdownMenuNavItems?.result,
   );
@@ -39,7 +48,11 @@ const ParentSiteMenu = () => {
   }
 
   return subsite && menu ? (
-    <Nav vertical={false} className="parent-site-menu">
+    <Nav
+      vertical={false}
+      className="parent-site-menu"
+      aria-label={intl.formatMessage(messages.parent_site_menu)}
+    >
       {menu.items.map((navitem, id) => (
         <NavItem tag="li" key={id}>
           <NavLink

package/src/components/ItaliaTheme/SkipLinks/SkipLinks.jsx

@@ -15,6 +15,10 @@ const messages = defineMessages({
     id: 'skiplink-footer',
     defaultMessage: 'Skip to footer',
   },
+  skiplinks_description: {
+    id: 'skiplinks-description',
+    defaultMessage: 'Skiplinks',
+  },
 });
 
 const SkipLinks = () => {
@@ -32,7 +36,11 @@ const SkipLinks = () => {
 
   return (
     <div className="public-ui">
-      <Skiplink tag="div">
+      <Skiplink
+        tag="div"
+        role="complementary"
+        aria-label={intl.formatMessage(messages.skiplinks_description)}
+      >
         <SkiplinkItem href="#view" tag="a">
           {intl.formatMessage(messages.mainView)}
         </SkiplinkItem>

package/src/components/ItaliaTheme/View/BandoView/BandoView.jsx

@@ -5,6 +5,7 @@
 
 import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
 
 import {
   PageHeader,
@@ -25,6 +26,17 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  bandoContent: {
+    id: 'bandoContent',
+    defaultMessage: 'Contenuto del Bando',
+  },
+});
+
 export const BandoViewSectionsOrder = [
   { /* Testo */ component: BandoText },
   /* Responsabili */
@@ -46,6 +58,7 @@ export const BandoViewSectionsOrder = [
  */
 const BandoView = ({ content, location }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
@@ -61,7 +74,10 @@ const BandoView = ({ content, location }) => {
           showbandostate={true}
         />
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
             )}
@@ -70,6 +86,8 @@ const BandoView = ({ content, location }) => {
             ref={documentBody}
             id="main-content-section"
             className="col-lg-8 it-page-sections-container border-light"
+            role="region"
+            aria-label={intl.formatMessage(messages.bandoContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/Commons/GenericCard.jsx

@@ -4,7 +4,10 @@ import cx from 'classnames';
 
 import { UniversalLink } from '@plone/volto/components';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { getCalendarDate } from 'design-comuni-plone-theme/helpers';
+import {
+  getCalendarDate,
+  contentHasImage,
+} from 'design-comuni-plone-theme/helpers';
 import {
   Icon,
   CardCategory,
@@ -48,23 +51,21 @@ const GenericCard = ({
     </>
   );
   const cooked_image_field = image_field || item.image_field;
-  // (item.preview_image ? 'preview_image' : 'image');
-  const image =
-    showimage &&
-    item &&
-    Image({
-      item: item,
-      imageField: cooked_image_field,
-      alt: '',
-      title: item.title,
-    });
+  const showImage = showimage && contentHasImage(item) && cooked_image_field;
 
   return item ? (
-    image ? (
+    showImage ? (
       <div className={cx('genericcard card shadow rounded mt-3')}>
         <div className="img-responsive-wrapper">
           <div className="img-responsive img-responsive-panoramic">
-            <figure className="img-wrapper">{image}</figure>
+            <figure className="img-wrapper">
+              <Image
+                item={item}
+                imageField={cooked_image_field}
+                alt={''}
+                title={item.title}
+              />
+            </figure>
           </div>
         </div>
         <div className="card-body px-4">

package/src/components/ItaliaTheme/View/Commons/LocationItem.jsx

@@ -8,6 +8,7 @@ import { UniversalLink } from '@plone/volto/components';
 import PropTypes from 'prop-types';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -41,24 +42,25 @@ const LocationItem = ({
 }) => {
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image = Image({ item: location, sizes: '80px', loading: 'lazy' });
+  const showImage = contentHasImage(location) && location['@type'] === 'Venue';
   const address = ['street', 'city', 'zip_code']
     .map((key) => location?.[key])
     .filter(Boolean)
     .join(' - ');
 
   return location ? (
-    <div className="card card-teaser shadow mt-3 border-left-card card-big-io-comune p-4 rounded location-item">
-      {show_icon && (
-        <Icon
-          icon={'it-pin'}
-          title={intl.formatMessage(messages.icona_luoghi)}
-        />
-      )}
+    <div className="card card-teaser shadow mt-3 border-left-card card-big-io-comune pt-4 pb-4 ps-3 pe-4 rounded location-item">
       <div className="card-body">
         <div className="card-title h5 venue-card-title">
           {(location.nome_sede || location.title) && (
             <>
+              {show_icon && (
+                <Icon
+                  icon={'it-pin'}
+                  title={intl.formatMessage(messages.icona_luoghi)}
+                  className="pin-icon"
+                />
+              )}
               {location['@type'] === 'Venue' ||
               (location['@type'] === 'UnitaOrganizzativa' &&
                 show_title_link) ? (
@@ -104,7 +106,11 @@ const LocationItem = ({
           )}
         </div>
       </div>
-      {image && <div className="avatar size-xl">{image}</div>}
+      {showImage && (
+        <div className="avatar size-lg">
+          <Image item={location} sizes="80px" loading="lazy" />
+        </div>
+      )}
     </div>
   ) : (
     ''

package/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx

@@ -3,6 +3,7 @@ import { UniversalLink } from '@plone/volto/components';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
 /**
@@ -24,8 +25,7 @@ const OfficeCard = ({
 }) => {
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image =
-    showimage && Image({ item: office, sizes: '80px', loading: 'lazy' });
+  const showImage = showimage && contentHasImage(office);
 
   return (
     <div
@@ -74,7 +74,11 @@ const OfficeCard = ({
 
         {children && <div className="card-text">{children}</div>}
       </div>
-      {image && <div className="image-container">{image}</div>}
+      {showImage && (
+        <div className="avatar size-lg">
+          <Image item={office} sizes="80px" loading="lazy" />
+        </div>
+      )}
     </div>
   );
 };

package/src/components/ItaliaTheme/View/Commons/PageHeader/PageHeader.jsx

@@ -56,6 +56,7 @@ const PageHeader = (props) => {
   } = props;
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
+  const subtitle = content.subtitle || content.sottotitolo;
   return (
     <div className="PageHeaderWrapper mb-4">
       <div className="row mb-2 mb-lg-0 page-header">
@@ -75,10 +76,8 @@ const PageHeader = (props) => {
           >
             {content.title}
           </h1>
-          <p className="h2">
-            {content.subtitle && `${content.subtitle}`}
-            {content.sottotitolo && `${content.sottotitolo}`}
-          </p>
+
+          {subtitle && <p className="h2">{subtitle}</p>}
 
           <PageHeaderEventDates content={content} />
 

package/src/components/ItaliaTheme/View/Commons/RelatedItemInEvidence/RelatedItemInEvidence.jsx

@@ -3,6 +3,14 @@ import PropTypes from 'prop-types';
 import ItemInEvidence from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/RelatedItemInEvidence/ItemInEvidence';
 import Arguments from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/RelatedItemInEvidence/Arguments';
 import { Container, Row, Col } from 'design-react-kit';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  inEvidenceItems: {
+    id: 'inEvidenceItems',
+    defaultMessage: 'Contenuti in evidenza',
+  },
+});
 
 /**
  * RelatedItems view component class.
@@ -11,9 +19,14 @@ import { Container, Row, Col } from 'design-react-kit';
  * @returns {string} Markup of the component.
  */
 const RelatedItemInEvidence = ({ content }) => {
+  const intl = useIntl();
   return (
     content?.correlato_in_evidenza?.length > 0 && (
-      <section id="correlato-in-evidenza">
+      <section
+        id="correlato-in-evidenza"
+        role="complementary"
+        aria-label={intl.formatMessage(messages.inEvidenceItems)}
+      >
         <section className="section bg-primary">
           <div className="section-content">
             <Container>

package/src/components/ItaliaTheme/View/Commons/RelatedItems.jsx

@@ -71,7 +71,11 @@ const RelatedItems = ({
   }
 
   return related?.length > 0 || children ? (
-    <section id="contenuti-correlati">
+    <section
+      id="contenuti-correlati"
+      role="complementary"
+      aria-label={intl.formatMessage(messages.related_items)}
+    >
       <section className="section section-muted section-inset-shadow">
         <div className="section-content">
           <Container>

package/src/components/ItaliaTheme/View/Commons/SideMenu.jsx

@@ -24,6 +24,10 @@ const messages = defineMessages({
     id: 'Contenuto',
     defaultMessage: 'Contenuto',
   },
+  sideMenuNavigation: {
+    id: 'sideMenuNavigation',
+    defaultMessage: 'Navigazione della pagina',
+  },
 });
 
 const extractHeaders = (elements, intl) => {
@@ -151,7 +155,10 @@ const SideMenu = ({ data, content_uid }) => {
 
   return headers?.length > 0 ? (
     <div className="sticky-wrapper navbar-wrapper page-side-menu">
-      <nav className="navbar it-navscroll-wrapper navbar-expand-lg">
+      <nav
+        className="navbar it-navscroll-wrapper navbar-expand-lg"
+        aria-label={intl.formatMessage(messages.sideMenuNavigation)}
+      >
         <div className="menu-wrapper">
           <div className="link-list-wrapper menu-link-list">
             <div className="accordion-wrapper">
@@ -162,6 +169,7 @@ const SideMenu = ({ data, content_uid }) => {
                     setIsNavOpen(!isNavOpen);
                   }}
                   aria-controls="side-menu-body"
+                  aria-expanded={isNavOpen}
                 >
                   <h2 className="h3">{intl.formatMessage(messages.index)}</h2>
                 </AccordionHeader>
@@ -171,11 +179,7 @@ const SideMenu = ({ data, content_uid }) => {
                     role="progressbar"
                   />
                 </div>
-                <AccordionBody
-                  active={isNavOpen}
-                  id="side-menu-body"
-                  role="region"
-                >
+                <AccordionBody active={isNavOpen} id="side-menu-body">
                   <ul className="link-list" data-element="page-index">
                     {headers.map((item, i) => {
                       return (

package/src/components/ItaliaTheme/View/Commons/Sponsors.jsx

@@ -4,6 +4,7 @@ import React, { useEffect } from 'react';
 import { searchContent, resetSearchContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import PropTypes from 'prop-types';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import { UniversalLink } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 
@@ -23,19 +24,22 @@ const messages = defineMessages({
  */
 const Sponsor = ({ item }) => {
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image =
-    item?.image &&
-    Image({
-      item: item,
-      sizes: '600px',
-      loading: 'lazy',
-      className: 'img-fluid',
-      alt: item.image.filename ?? item.title,
-    });
+  const showImage = contentHasImage(item);
+
   return item ? (
     <div className="sponsor-item">
       <UniversalLink href={item.remoteUrl}>
-        {image ? image : item.title}
+        {showImage ? (
+          <Image
+            item={item}
+            sizes="600px"
+            loading="lazy"
+            className="img-fluid"
+            alt={item.image.filename ?? item.title}
+          />
+        ) : (
+          item.title
+        )}
       </UniversalLink>
     </div>
   ) : null;

package/src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx

@@ -2,6 +2,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import config from '@plone/volto/registry';
 
@@ -26,13 +27,15 @@ const messages = defineMessages({
 const Location = ({ location, show_icon }) => {
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image = Image({ item: location, loading: 'lazy', sizes: '80px' });
+  const showImage = contentHasImage(location);
   return (
     location && (
-      <div className="card card-teaser shadow border-left-card mt-3 rounded location-item">
-        {show_icon && <Icon icon={'it-pin'} />}
+      <div className="card card-teaser shadow border-left-card mt-3 card-small rounded location-item">
         <div className="card-body">
-          <div className="card-title h5">{location.title}</div>
+          <div className="card-title h5">
+            {show_icon && <Icon icon={'it-pin'} />}
+            {location.title}
+          </div>
           <div className="card-text">
             {(location.street || location.zip_code) && (
               <p>
@@ -51,7 +54,11 @@ const Location = ({ location, show_icon }) => {
             </p>
           </div>
         </div>
-        {image && <div className="avatar size-xl">{image}</div>}
+        {showImage && (
+          <div className="avatar size-lg">
+            <Image item={location} loading="lazy" sizes="80px" />
+          </div>
+        )}
       </div>
     )
   );
@@ -65,7 +72,7 @@ const Location = ({ location, show_icon }) => {
  */
 const VenuesSmall = ({ venues, show_icon }) => {
   return venues ? (
-    <div className="card-wrapper card-teaser-wrapper">
+    <div className="card-wrapper card-teaser-wrapper align-items-stretch">
       {venues.map((item) => (
         <Location key={item['@id']} location={item} show_icon={show_icon} />
       ))}

package/src/components/ItaliaTheme/View/DocumentoView/DocumentoView.jsx

@@ -25,6 +25,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  documentContent: {
+    id: 'documentContent',
+    defaultMessage: 'Contenuto del documento',
+  },
+});
+
 export const DocumentoViewSectionsOrder = [
   {
     /* HEADER IMAGE */
@@ -48,6 +61,7 @@ export const DocumentoViewSectionsOrder = [
  */
 const DocumentoView = ({ content, location }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   //const userLogged = useSelector((state) => state.userSession);
@@ -66,7 +80,10 @@ const DocumentoView = ({ content, location }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
             )}
@@ -75,6 +92,8 @@ const DocumentoView = ({ content, location }) => {
             ref={documentBody}
             id="main-content-section"
             className="col-lg-8 it-page-sections-container border-light"
+            role="region"
+            aria-label={intl.formatMessage(messages.documentContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/EventoView/EventoContatti.jsx

@@ -5,9 +5,10 @@ import {
   RichTextSection,
   ContactsCard,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
-import EventoContattiOrganizzatoreEsterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno';
-import EventoContattiOrganizzatoreInterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreInterno';
+
 import EventoContattiSupportatoDa from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiSupportatoDa';
+import EventoOrganizzatoDa from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoOrganizzatoDa';
+import EventoPatrocinatoDa from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoPatrocinatoDa';
 
 const messages = defineMessages({
   contatti: {
@@ -31,14 +32,14 @@ const EventoContatti = ({ content }) => {
         <ContactsCard contact={contact} key={contact['@id']} />
       ))}
 
-      {/* ---organizzato da esterno */}
-      <EventoContattiOrganizzatoreEsterno content={content} />
-
-      {/* ---contatti interno */}
-      <EventoContattiOrganizzatoreInterno content={content} />
+      {/* ---organizzato da */}
+      <EventoOrganizzatoDa content={content} />
 
       {/* ---supportato da */}
       <EventoContattiSupportatoDa content={content} />
+
+      {/* ---patrocinato da */}
+      <EventoPatrocinatoDa content={content} />
     </RichTextSection>
   ) : null;
 };

package/src/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { defineMessages, useIntl } from 'react-intl';
 import { Card, CardBody } from 'design-react-kit';
 import {
   RichText,
@@ -7,22 +6,12 @@ import {
   ContactLink,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
-const messages = defineMessages({
-  organizzatore: {
-    id: 'organizzatore',
-    defaultMessage: 'Organizzatore',
-  },
-});
-
 const EventoContattiOrganizzatoreEsterno = ({ content }) => {
-  const intl = useIntl();
-
   return richTextHasContent(content?.organizzato_da_esterno) ||
     content?.telefono ||
     content?.email ||
     content?.fax ? (
-    <div className="mb-5 mt-3">
-      <h3 className="h5">{intl.formatMessage(messages.organizzatore)}</h3>
+    <div className="mb-5">
       <Card
         className="card card-teaser rounded shadow mt-3"
         noWrapper={true}

package/src/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreInterno.jsx

@@ -1,23 +1,12 @@
 import PropTypes from 'prop-types';
-import { defineMessages, useIntl } from 'react-intl';
 import {
   richTextHasContent,
   OfficeCard,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
-const messages = defineMessages({
-  organizzato_da: {
-    id: 'organizzato_da',
-    defaultMessage: 'Organizzato da',
-  },
-});
-
 const EventoContattiOrganizzatoreInterno = ({ content }) => {
-  const intl = useIntl();
-
   return content?.organizzato_da_interno?.length > 0 ? (
-    <div className="mb-5">
-      <h3 className="h5">{intl.formatMessage(messages.organizzato_da)}</h3>
+    <div className="mb-3">
       {content?.organizzato_da_interno?.map((item, index) => (
         <OfficeCard
           margin_bottom={index < content?.organizzato_da_interno?.length - 1}

package/src/components/ItaliaTheme/View/EventoView/EventoOrganizzatoDa.jsx

@@ -0,0 +1,38 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { richTextHasContent } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import EventoContattiOrganizzatoreInterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreInterno';
+import EventoContattiOrganizzatoreEsterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno';
+
+const messages = defineMessages({
+  organizzato_da: {
+    id: 'organizzato_da',
+    defaultMessage: 'Organizzato da',
+  },
+});
+
+const EventoOrganizzatoDa = ({ content }) => {
+  const intl = useIntl();
+
+  return content?.organizzato_da_interno?.length > 0 ||
+    richTextHasContent(content?.organizzato_da_esterno) ||
+    content?.telefono ||
+    content?.email ||
+    content?.fax ? (
+    <div className="mb-5 mt-3">
+      <h3 className="h5 mb-3">{intl.formatMessage(messages.organizzato_da)}</h3>
+
+      {content?.organizzato_da_interno.length > 0 && (
+        <EventoContattiOrganizzatoreInterno content={content} />
+      )}
+
+      {(richTextHasContent(content?.organizzato_da_esterno) ||
+        content?.telefono ||
+        content?.email ||
+        content?.fax) && (
+        <EventoContattiOrganizzatoreEsterno content={content} />
+      )}
+    </div>
+  ) : null;
+};
+
+export default EventoOrganizzatoDa;

package/src/components/ItaliaTheme/View/EventoView/EventoPatrocinatoDa.jsx

@@ -0,0 +1,38 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { Card, CardBody } from 'design-react-kit';
+
+import {
+  richTextHasContent,
+  RichText,
+} from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+
+const messages = defineMessages({
+  patrocinato_da: {
+    id: 'patrocinato_da',
+    defaultMessage: 'Patrocinato da',
+  },
+});
+
+const EventoPatrocinatoDa = ({ content }) => {
+  const intl = useIntl();
+  return richTextHasContent(content?.patrocinato_da) ? (
+    <div className="mb-5">
+      <h3 className="mt-4 patrocinato-da h5">
+        {intl.formatMessage(messages.patrocinato_da)}
+      </h3>
+      <Card
+        className="card card-teaser rounded shadow mt-3"
+        noWrapper={true}
+        tag="div"
+      >
+        <CardBody tag="div" className={'card-body pe-3'}>
+          <div className="mb-5">
+            <RichText data={content?.patrocinato_da} />
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  ) : null;
+};
+
+export default EventoPatrocinatoDa;