All sorts of tweaks I forgot to commit, but mainly colour theming.

Author: markrandall

images/landing/elephpant.png

@@ -0,0 +1,80 @@
+function initInfiniteScroll(parentContainer, speed = 50) {
+  if (!parentContainer) return null;
+
+  // 1. Extract the fixed width from the data-width attribute
+  const dataWidth = parentContainer.dataset.width;
+  if (!dataWidth) {
+    console.error("InfiniteScroll Error: Missing 'data-width' attribute on the container.");
+    return null;
+  }
+
+  const widthNum = parseInt(dataWidth, 10);
+  const widthStr = `${widthNum}px`;
+
+  // 2. Gather the existing child elements currently inside the parent
+  const elements = Array.from(parentContainer.children);
+  if (elements.length === 0) return null;
+
+  // 3. Prepare the parent container styling
+  parentContainer.style.overflow = 'hidden';
+  parentContainer.style.position = 'relative';
+  parentContainer.style.width = '100%';
+
+  // 4. Create the scrolling track
+  const track = document.createElement('div');
+  track.style.display = 'flex';
+  track.style.width = 'max-content';
+  track.style.willChange = 'transform';
+
+  // 5. Apply widths and move existing elements into the track
+  elements.forEach(el => {
+    el.style.width = widthStr;
+    el.style.flexShrink = '0';
+    track.appendChild(el); // Automatically removes it from parentContainer and places it in track
+  });
+
+  // 6. Append the track to the parent container
+  parentContainer.appendChild(track);
+
+  // 7. Clone elements to ensure a seamless loop with no blank gaps
+  const parentWidth = parentContainer.offsetWidth || window.innerWidth;
+  const originalTotalWidth = elements.length * widthNum;
+
+  let currentTrackWidth = originalTotalWidth;
+  while (currentTrackWidth < parentWidth + originalTotalWidth) {
+    elements.forEach(el => {
+      const clone = el.cloneNode(true);
+      clone.style.width = widthStr;
+      clone.style.flexShrink = '0';
+      track.appendChild(clone);
+    });
+    currentTrackWidth += originalTotalWidth;
+  }
+
+  // 8. Generate a unique CSS keyframe animation dynamically
+  const animationName = `infiniteScroll_${Math.random().toString(36).substr(2, 9)}`;
+  const styleNode = document.createElement('style');
+  styleNode.textContent = `
+        @keyframes ${animationName} {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-${originalTotalWidth}px); }
+        }
+    `;
+  document.head.appendChild(styleNode);
+
+  // 9. Apply the animation (speed is pixels per second)
+  const duration = originalTotalWidth / speed;
+  track.style.animation = `${animationName} ${duration}s linear infinite`;
+
+  // 10. Return playback and cleanup controls
+  return {
+    pause: () => track.style.animationPlayState = 'paused',
+    play: () => track.style.animationPlayState = 'running',
+    destroy: () => {
+      // Puts original elements back and cleans up the DOM
+      elements.forEach(el => parentContainer.appendChild(el));
+      track.remove();
+      styleNode.remove();
+    }
+  };
+}

js/landing.js

@@ -236,70 +236,75 @@ function drawBranchInfo(array $release): void
     );
 }
 
+$foundationSponsors = [
+        ['name' => 'JetBrains', 'icon' => 'https://images.opencollective.com/jetbrains/fe76f99/logo.png'],
+        ['name' => 'Private Packagist', 'icon' => 'https://images.opencollective.com/packagist/2ac48ff/logo.png'],
+        ['name' => 'Cybozu', 'icon' => 'https://images.opencollective.com/cybozu/933e46d/logo.png'],
+        ['name' => 'Aternos GmbH', 'icon' => 'https://images.opencollective.com/aternos/5436b31/logo.png'],
+        ['name' => 'Mercari Inc.', 'icon' => 'https://images.opencollective.com/mercari/454ef50/logo.png'],
+        ['name' => 'pixiv Inc.', 'icon' => 'https://images.opencollective.com/user-ecfec7e5/2f4c2c4/logo.png'],
+        ['name' => 'SPY', 'icon' => 'https://images.opencollective.com/spy/261d722/logo.png'],
+        ['name' => 'Symfony Corp', 'icon' => 'https://images.opencollective.com/symfony-sas/b1f53fd/logo.png'],
+        ['name' => 'shopware AG', 'icon' => 'https://images.opencollective.com/stefan-hamann/2865d41/logo.png'],
+        ['name' => 'OP.GG', 'icon' => 'https://images.opencollective.com/opgg/7e44af2/logo.png'],
+        ['name' => 'Passbolt', 'icon' => 'https://images.opencollective.com/passbolt/2468aab/logo.png'],
+        ['name' => 'Spryker', 'icon' => 'https://images.opencollective.com/spryker/a634346/logo.png'],
+        ['name' => 'Digital Scholar', 'icon' => 'https://images.opencollective.com/digital-scholar/logo.png'],
+        ['name' => 'Cambium Learning, Inc.', 'icon' => 'https://images.opencollective.com/cambium-learning-inc/30c5f1c/logo.png'],
+        ['name' => 'Craft CMS', 'icon' => 'https://images.opencollective.com/craftcms/1fd28bf/logo.png'],
+        ['name' => 'GoDaddy.com', 'icon' => 'https://images.opencollective.com/godaddy/c37e587/logo.png'],
+        ['name' => 'Laravel', 'icon' => 'https://images.opencollective.com/laravel/4ad04b8/logo.png'],
+        ['name' => 'Livesport s.r.o.', 'icon' => 'https://images.opencollective.com/livesport-s-r-o/be081c5/logo.png'],
+        ['name' => 'Aligent Consulting', 'icon' => 'https://images.opencollective.com/aligent-consulting/ee7abd9/logo.png'],
+        ['name' => 'Moodle', 'icon' => 'https://images.opencollective.com/moodle/141a57d/logo.png'],
+];
+
 
 ob_start();
 ?>
+<div class="landing landing-dark">
     <link rel="stylesheet" href="/styles/landing.css" type="text/css">
-    <div class="landing-section ">
-        <div class="landing-hdr">
-            <div style="display: flex; flex-direction: column; gap: 1em; text-align: center; justify-content: center; background: #22222277; border-radius: 1em; padding: 1em">
-                <img class="hero__logo" src="/images/logos/php-logo-white.svg" alt="php" width="240" height="120" style="margin-left: auto; margin-right: auto;">
-                <p class="landing-hdr-tagline">Powering Solo Developers, Teams, and Global Enterprise</p>
-            </div>
-            <div>
-                <div class="landing-hdr-block">
-                    <div class="landing-hdr-title">Fast &amp; Modern</div>
-                    <div class="landing-hdr-content">PHP provides blistering fast performance and a modern developer-focused experience.</div>
-                </div>
 
-                <div class="landing-hdr-block">
-                    <div class="landing-hdr-title">A Massive Ecosystem</div>
-                    <div class="landing-hdr-content">Leverage over 300,000 existing open source packages for your projects, along with powerful tooling.</div>
+    <div class="landing-eco-full-container" style="border: 0">
+        <div class="landing-hdr-outer landing-section ">
+            <div class="landing-hdr">
+                <div style="position: relative; display: flex; flex-direction: column; gap: 1em; text-align: center; justify-content: center;  padding: 1em">
+                    <img class="hero__logo" src="/images/logos/php-logo-white.svg" alt="php" width="240" height="120" style="z-index: 1; margin-left: auto; margin-right: auto;">
+                    <p class="landing-hdr-tagline" style="z-index: 1">
+                        Powering Solo Developers, Teams, and Global Enterprise
+                    </p>
+                    <img style="position: absolute; object-position: center; width: 100%; height: 100%; object-fit: contain; opacity: 0.2" src="/images/landing/elephpant.png" alt="PHP Elephant logo" />
                 </div>
+                <div>
+                    <div class="landing-hdr-block">
+                        <div class="landing-hdr-title">Fast &amp; Modern</div>
+                        <div class="landing-hdr-content">PHP provides blistering fast performance and a modern developer-focused experience.</div>
+                    </div>
 
-                <div class="landing-hdr-block">
-                    <div class="landing-hdr-title">An Established Community</div>
-                    <div class="landing-hdr-content">Millions of developers and businesses already use PHP to achieve their goals every day.</div>
+                    <div class="landing-hdr-block">
+                        <div class="landing-hdr-title">A Massive Ecosystem</div>
+                        <div class="landing-hdr-content">Leverage over 300,000 existing open source packages for your projects, along with powerful tooling.</div>
+                    </div>
+
+                    <div class="landing-hdr-block">
+                        <div class="landing-hdr-title">An Established Community</div>
+                        <div class="landing-hdr-content">Millions of developers and businesses already use PHP to achieve their goals every day.</div>
+                    </div>
                 </div>
             </div>
-        </div>
-    </div>
-
-    <div style="background: #202127; position: relative" >
-        <?php foreach ($heroCards as $heroCard) { ?>
-            <div class="hero-cards-bg" id="<?= safe($heroCard->id . '-cover') ?>"></div>
-        <?php } ?>
 
-        <div class="landing-section" style="position: relative; z-index: 1">
-            <div role="list" class="vgrid"><?= buildNavCards($heroCards) ?></div>
+            <div class="landing-hero-cards-container"  >
+                <div style="position: relative; z-index: 1">
+                    <div role="list" class="vgrid"><?= buildNavCards($heroCards, ['cn_card' => 'landing-cc-card landing-cc-card-alt']) ?></div>
+                </div>
+            </div>
         </div>
     </div>
 
-    <script type="text/javascript">
-        (() => {
-            let heroIds = <?= json_encode(array_map(fn(NavCardItem $card) => $card->id, $heroCards), flags: JSON_HEX_QUOT | JSON_HEX_QUOT) ?>;
-            heroIds.forEach(heroId => {
-                const cover = document.querySelector('#' + heroId + '-cover');
-                if (!cover) console.error('Unable to find cover ' + heroId);
-
-                const card = document.querySelector('#' + heroId);
-                if (!card) console.error('Unable to find card ' + heroId);
-
-                card.addEventListener('mouseenter', () => {
-                   cover.style.opacity = 1;
-                });
-
-                card.addEventListener('mouseleave', () => {
-                    cover.style.opacity = 0;
-                });
-            });
-        })();
-    </script>
-
     <div class="landing-section">
         <div id="releases" >
             <div class="landing-lrv">
-                <svg style="position: absolute; inset: 0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" class="hero-bg">
+                <svg style="position: absolute; inset: 0; opacity: 0.5" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" class="hero-bg">
                     <defs>
                         <radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5"><animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(210, 203, 255, 1)"></stop><stop offset="100%" stop-color="rgba(51, 63, 124, 0)"></stop></radialGradient>
                         <radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5"><animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(133, 109, 255, 1)"></stop><stop offset="100%" stop-color="rgba(51, 63, 124, 0)"></stop></radialGradient>
@@ -373,9 +378,9 @@ function drawBranchInfo(array $release): void
         </div>
     </div>
 
-    <div style="background: #3c4053; border-top: 5px solid #333333">
+    <div class="landing-eco-full-container">
         <div class="landing-section">
-            <div class="landing-eco-banner">
+            <div id="php-foundation" class="landing-eco-banner">
                 <img alt="PHP Foundation Logo" style="width: 160px; height: 160px; border-radius: 0.5em" src="/images/logos/php-foundation.svg" />
                 <div>
                     <div class="landing-eco-text">
@@ -392,31 +397,48 @@ function drawBranchInfo(array $release): void
                     <a class="button-primary" target="_blank" href="https://github.com/sponsors/ThePHPF">Donate Via GitHub</a>
                 </div>
             </div>
+            <?php if (($_GET['show_sponsors'] ?? '1') === '1') { ?>
+            <div>
+                <div style="margin-top: 2em; margin-bottom: 0.5em; text-align: center; font-size: 90%">The PHP Foundation is grateful for our many sponsors, including:</div>
+                <div id="foundation-sponsor-carousel" data-width="100" style="opacity: 0.7">
+                    <?php foreach ($foundationSponsors as $sponsor) { ?>
+                        <img src="<?= safe($sponsor['icon']) ?>" alt="<?= safe($sponsor['name'])?>" style="background: white; border-radius: 1em; padding: 10px; margin: 10px; width: 100px; height: 100px; filter: grayscale(60%)"/>
+                    <?php } ?>
+                </div>
+
+                <script type="text/javascript" src="js/landing.js" ></script>
+                <script type="text/javascript">
+                    initInfiniteScroll(document.querySelector('#foundation-sponsor-carousel'), 30);
+                </script>
+            </div>
+            <?php } ?>
         </div>
     </div>
 
 
-    <div style="background: #202127; background-image: url('/images/bg-texture-00.svg')">
+    <div >
         <div id="community" class="landing-section">
             <div style="display: flex; gap: 1.5em; flex-direction: column">
                 <div class="landing-section-header" role="heading">Community</div>
                 <div>
-                    <div role="list" class="vgrid" id="community-cards"><?= buildNavCards($communityCards); ?></div>
+                    <div role="list" class="vgrid" id="community-cards"><?= buildNavCards($communityCards, ['cn_card' => 'landing-cc-card landing-cc-card-grey']); ?></div>
                 </div>
                 <div></div>
 
                 <div class="landing-section-header" role="heading">Events &amp; Conferences</div>
                 <div>
-                    <div role="list" class="vgrid" id="conference-cards"><?= buildNavCards($eventCards) ?></div>
+                    <div role="list" class="vgrid" id="conference-cards"><?= buildNavCards($eventCards, ['cn_card' => 'landing-cc-card landing-cc-card-grey']) ?></div>
                 </div>
             </div>
         </div>
     </div>
 
-    <div style="background: #3c4053; border-bottom: 5px solid #333333">
+    <div class="landing-eco-full-container">
         <div class="landing-section">
             <div class="landing-eco-banner">
-                <img alt="PHP Foundation Logo" style="width: 160px; height: 160px; border-radius: 0.5em" src="/images/logos/composer.png" />
+                <div style="flex: 0 0 fit-content">
+                    <img alt="Composer Logo" style="background: white; object-fit: contain; padding: 0.5em; width: 100%; height: 160px; border-radius: 0.5em" src="/images/logos/composer.png" />
+                </div>
                 <div>
                     <div class="landing-eco-text">
                         PHP has one of the largest collections of open-source libraries in the world.
@@ -450,7 +472,7 @@ function drawBranchInfo(array $release): void
             shuffleDOMChildrenWithLimit(document.querySelector('#conference-cards'), 6);
         });
     </script>
-
+</div>
 <?php
     $header = ob_get_clean();