feat: show platinum sponsor logo smaller, add calls to add your logo and add a text

Author: erral

frontend/src/components/Blocks/Listing/variations/SponsorCardListing.jsx

@@ -9,12 +9,20 @@ import {
 } from '@package/components';
 
 const SponsorCardListing = (props) => {
-  const { items, isEditMode, cols = 3, linkToPage = false } = props;
+  const {
+    items,
+    isEditMode,
+    cols = 3,
+    linkToPage = false,
+    randomize = true,
+  } = props;
 
-  const randomized_items = items
-    .map((value) => ({ value, sort: Math.random() }))
-    .sort((a, b) => a.sort - b.sort)
-    .map(({ value }) => value);
+  const randomized_items = randomize
+    ? items
+        .map((value) => ({ value, sort: Math.random() }))
+        .sort((a, b) => a.sort - b.sort)
+        .map(({ value }) => value)
+    : items;
 
   return (
     <PresetWrapper {...props} className="simple-card-listing">

frontend/src/components/FooterSponsors/FooterSponsors.jsx

@@ -6,6 +6,8 @@ import { Button } from '@package/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
 
+import yourLogoHereSVG from './YourLogo.svg';
+
 const FooterSponsors = (props) => {
   const { type = 'platinum' } = props;
   const subrequest_key = `${type}_sponsors`;
@@ -31,24 +33,64 @@ const FooterSponsors = (props) => {
     );
   }, [dispatch, subrequest_key, type]);
 
-  const plural = sponsors?.items.length > 1 ? 's' : '';
+  const plural = sponsors?.items.length > 1 ? 's' : '(s)';
   const capitalizedType = String(type[0]).toUpperCase() + String(type).slice(1);
+  const sponsorItems = sponsors?.loaded
+    ? sponsors.items.length > 0 &&
+      sponsors.items.map((item) => {
+        item['size'] = 'thumb';
+        return item;
+      })
+    : [];
+
+  const listingSize = 5;
+
+  if (sponsorItems.length > 0) {
+    const remainder = sponsorItems.length % listingSize;
+    if (remainder > 0) {
+      const placeholdersToAdd = listingSize - remainder;
+      for (let i = 0; i < placeholdersToAdd; i++) {
+        sponsorItems.push({
+          '@id': '/foundation/sponsorship',
+          title: 'Put your logo here',
+          size: 'thumb',
+          isPlaceholder: true,
+          image: {
+            scales: { thumb: { download: yourLogoHereSVG } },
+          },
+        });
+      }
+    }
+  }
+
   return sponsors?.loaded
     ? sponsors.items.length > 0 && (
         <div className={`footer-sponsors-listing ${subrequest_key}`}>
           <div className="footer-sponsors-listing-headline">
-            <h3>{`Our proud ${capitalizedType} Sponsor${plural}`}</h3>
+            <h3>Powering the Future of Open Sovereignty</h3>
             <Button
               as={UniversalLink}
               primary
               size="medium"
               href={flattenToAppURL('/foundation/sponsorship')}
               arrow={true}
             >
-              Become a Sponsor
+              Become a sponsor — every contribution shapes our future!
             </Button>
           </div>
-          <SponsorCardListing items={sponsors.items || []} />
+          <p>
+            Plone thrives because of organizations that believe in secure,
+            independent, and open technology. We are deeply grateful to our
+            Platinum Sponsors for their visionary support in sustaining the
+            world's most secure CMS. Join them in shaping the future of digital
+            freedom.
+          </p>
+
+          <SponsorCardListing
+            items={sponsorItems || []}
+            cols={listingSize}
+            randomize={false}
+          />
         </div>
       )
     : '';

frontend/src/components/FooterSponsors/YourLogo.svg

@@ -6,7 +6,11 @@ import { UniversalLink } from '@plone/volto/components';
 import { ListingImage } from '@package/components';
 
 const SponsorCard = (props) => {
-  let image = ListingImage({ item: props, className: 'item-image' });
+  let image = ListingImage({
+    item: props,
+    className: 'item-image',
+    size: props?.size,
+  });
 
   let cardClass = cx('item', {
     'sponsor-card': true,

frontend/src/components/cards/SponsorCard.jsx

@@ -59,6 +59,5 @@
 @import 'site/components/widgets/image_widget.less';
 
 @import 'site/components/controlpanels/membership.less';
-@import 'site/components/footer_sponsors.less';
 
 @import 'site/print.less';

frontend/theme/extras/custom.overrides

@@ -3,6 +3,7 @@
   margin: 1rem 0 0 0;
   box-shadow: 0px 5px 7px 5px rgba(119, 119, 119, 0.1);
   font-family: @headerFontName;
+  background-color: @footerLightGrey;
 
   #footer-main {
     display: flex;
@@ -66,6 +67,21 @@
     }
   }
 
+  .footer-sponsors-listing {
+    padding-bottom: 2em;
+
+    .footer-sponsors-listing-headline {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .item {
+      background-color: transparent;
+    }
+  }
+
   #footer-small-wrapper {
     padding: 1.5rem;
     margin-top: 1.5rem;

frontend/theme/extras/site/components/footer_sponsors.less

@@ -118,6 +118,9 @@
 /*--- --------------------------------Plone.org Variables-------------------------------- ---*/
 /*--- -------------------------------------------------------------------------------- ---*/
 
+@footerLightGrey: #f7f7f7;
+
+
 @footerBordersColor: @lightGrey;
 @footerColumnsTextColor: #222;
 @footerLastColumnTextColor: #737373;