feat: update references and add powered by (#415)

Author: ginifizz

pwa/app/(common)/components/ReferenceLogoItem.tsx

@@ -71,7 +71,7 @@ export default function LogoItem({
         src={`/images/references/oss/${reference.logo}.png`}
         height={50}
         width={200}
-        className="cursor-pointer h-full w-auto brightness-0 invert"
+        className="h-full w-auto brightness-0 invert"
       />
     </a>
   );

pwa/app/(common)/components/References.tsx

@@ -21,13 +21,13 @@ export default function References({ refs, ossRefs }: ReferencesProps) {
         <Heading size="xl" overline="References" level="h2">
           They <strong>use</strong> API Platform
         </Heading>
-        <div className="relative py-12 flex flex-row items-center justify-center pointer-events-none">
+        <div className="relative py-12 flex flex-row items-center justify-center">
           <Image
             src="/images/web.svg"
             alt=""
             width={1000}
             height={1000}
-            className="absolute z-0 top-1/2 left-0 -translate-y-1/2 -translate-x-1/2 opacity-75 | sm:left-1/3 | lg:left-1/2"
+            className="absolute pointer-events-none z-0 top-1/2 left-0 -translate-y-1/2 -translate-x-1/2 opacity-75 | sm:left-1/3 | lg:left-1/2"
           />
           <div className="hidden flex-1 justify-center items-end flex-col pr-12 | lg:flex">
             {firstHalf.map((ref, index) => (
@@ -42,7 +42,7 @@ export default function References({ refs, ossRefs }: ReferencesProps) {
           </div>
           <div className="p-3 shadow-2xl rounded-full bg-blue -rotate-90 inline-flex absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 | sm:relative sm:translate-y-0 sm:translate-x-0 sm:rotate-0 | md:p-4 z-20">
             <div className="bg-white dark:bg-blue-black flex items-end justify-center uppercase font-bold text-xl p-8 text-blue text-center shadow-md w-48 aspect-square rounded-full | sm:text-2xl sm:items-center">
-              <span className="leading-none">Open source</span>
+              <span className="leading-none">Free software</span>
             </div>
           </div>
           <div className="hidden w-1/2 flex-1 flex-wrap basis-0 justify-center items-start flex-col pl-12 | lg:flex">

pwa/app/(common)/page.tsx

@@ -10,7 +10,9 @@ import Heading from "components/common/typography/Heading";
 
 export default async function Page() {
   const ossRefs = openSourceData.filter((ref) => ref.highlight);
-  const refs = otherData.filter((ref) => ref.highlight);
+  const refs = otherData
+    .filter((ref) => ref.highlight)
+    .sort((a, b) => (a.highlight as number) - (b.highlight as number));
 
   return (
     <>

pwa/app/(common)/references/page.tsx

@@ -38,7 +38,7 @@ export default async function Page() {
             size="lg"
             className="w-full border-b-2 border-b-blue mb-4"
           >
-            Open source projects
+            Free software
           </Heading>
         </div>
         <div className="grid gap-6 grid-cols-[repeat(auto-fill,minmax(120px,1fr))] sm:grid-cols-[repeat(auto-fill,minmax(150px,1fr))] w-full place-content-center">

pwa/components/layout/Footer.tsx

@@ -30,7 +30,7 @@ export default function Footer() {
       <div className="container">
         <div
           className={classNames(
-            "w-[600px] p-4 max-w-[90%] translate-y-1/2 bg-blue text-white mx-auto flex flex-col items-center shadow-xl",
+            "w-[650px] p-4 max-w-[90%] translate-y-1/2 bg-blue text-white mx-auto flex flex-col items-center shadow-xl",
             "lg:flex-row",
             "dark:brightness-90 dark:text-blue-black"
           )}
@@ -50,8 +50,17 @@ export default function Footer() {
             )}
           >
             <p className="text-sm mb-4">
-              Les-Tilleuls.coop offers a wide range of API Platform solutions:
-              migration, trainings, coaching or web development.
+              <a
+                href="https://les-tilleuls.coop/en"
+                target="_blank"
+                rel="noreferer noopener"
+                className="font-bold"
+              >
+                Les-Tileuls.coop
+              </a>{" "}
+              can help you design and develop your APIs and web projects, and
+              train your teams in API Platform, Symfony, Next.js, Kubernetes and
+              a wild range of other technologies.
             </p>
             <Button
               size="medium"

pwa/components/layout/Nav.tsx

@@ -128,39 +128,65 @@ export default function Nav({ withPreheader = false }) {
               </NavLink>
               <NavLink href="/events">Events</NavLink>
               <NavLink href="/help">Need&nbsp;help?</NavLink>
-              <div className="lg:border-l-2 lg:pl-6 lg:border-current flex flex-row gap-2">
+              <div
+                className={classNames(
+                  "lg:border-x-2 py-1 lg:px-4 flex flex-row gap-4 lg:gap-2.5",
+                  withBg
+                    ? "text-blue dark:text-blue-light lg:border-gray-300 lg:dark:border-white/50"
+                    : "text-white lg:border-white/50 dark:text-blue-black dark:lg:border-blue-black/25"
+                )}
+              >
                 <a
                   href="https://github.com/api-platform/api-platform"
                   target="_blank"
                   rel="noreferrer noopener"
                 >
-                  <Github className="h-8 w-8 lg:h-5 lg:w-5" />
+                  <Github className="h-7 w-7 lg:h-4 lg:w-4" />
                 </a>
                 <a
                   href="https://fosstodon.org/@ApiPlatform"
                   target="_blank"
                   rel="noreferrer noopener"
                 >
-                  <Mastodon className="h-8 w-8 lg:h-5 lg:w-5" />
+                  <Mastodon className="h-7 w-7 lg:h-4 lg:w-4" />
                 </a>
                 <a
                   href="https://twitter.com/ApiPlatform"
                   target="_blank"
                   rel="noreferrer noopener"
                 >
-                  <Twitter className="h-8 w-8 lg:h-5 lg:w-5" />
+                  <Twitter className="h-7 w-7 lg:h-4 lg:w-4" />
                 </a>
               </div>
+              <a
+                href="https://les-tilleuls.coop/en"
+                target="_blank"
+                rel="noreferer noopener"
+                className="hidden flex-col justify-center items-center text-center xl:flex"
+              >
+                <p className="text-xs opacity-70 -mt-1">Powered by</p>
+                <LogoTilleuls className="w-28" red={withBg} />
+              </a>
             </div>
-            <NavLink
-              href="/"
+            <div
               className={classNames(
-                "bg-blue text-white dark:text-blue-black py-16 w-full px-12 block lg:hidden"
+                "bg-blue text-white dark:text-blue-black py-16 w-full px-12 block text-center lg:hidden"
               )}
               title="API Platform"
             >
-              <Logo className="w-full" inline />
-            </NavLink>
+              <NavLink href="/" title="API Platform">
+                <Logo className="w-full" inline />
+              </NavLink>
+              <p className="text-sm font-light mt-4">powered by</p>
+              <a
+                href="https://les-tilleuls.coop/en"
+                target="_blank"
+                rel="noreferer noopener"
+                className="font-bold"
+              >
+                <LogoTilleuls className="max-w-[170px] mx-auto" />
+              </a>
+            </div>
           </div>
           <ThemeToggle withBgNav={withBg} />
           <div

pwa/data/logos.ts

@@ -10,19 +10,25 @@ export const openSourceData: Reference[] = [
     name: "Bolt",
     logo: "bolt",
     link: "https://boltcms.io/",
-    highlight: true,
+    highlight: 1,
   },
   {
     name: "CoopCycle",
     logo: "coopcycle",
     link: "https://github.com/coopcycle/coopcycle-web",
-    highlight: true,
+    highlight: 1,
   },
   {
     name: "Digital State",
     logo: "digital-state",
     link: "http://digitalstate.io/",
-    highlight: true,
+    highlight: 1,
+  },
+  {
+    name: "Kbin",
+    logo: "kbin",
+    link: "https://kbin.pub/en",
+    highlight: 1,
   },
   {
     name: "QOwnNotes",
@@ -38,19 +44,18 @@ export const openSourceData: Reference[] = [
     name: "Mobicoop",
     logo: "mobicoop",
     link: "https://gitlab.com/mobicoop/mobicoop-platform",
-    highlight: true,
+    highlight: 1,
   },
   {
     name: "PartKeepr",
     logo: "partkeepr",
     link: "https://partkeepr.org/",
-    highlight: true,
+    highlight: 1,
   },
   {
     name: "Sylius",
     logo: "sylius",
     link: "https://sylius.com/",
-    highlight: true,
   },
   {
     name: "French Government",
@@ -74,13 +79,11 @@ export const otherData: Reference[] = [
     name: "24 Sèvres",
     logo: "24-sevres",
     link: "https://www.24sevres.com/",
-    highlight: true,
   },
   {
     name: "Adeo",
     logo: "adeo",
     link: "https://www.adeo.com/",
-    highlight: true,
   },
   {
     name: "Agence Koul",
@@ -91,18 +94,18 @@ export const otherData: Reference[] = [
     name: "Alstom",
     logo: "alstom",
     link: "https://www.alstom.com/",
-    highlight: true,
   },
   {
     name: "Arte",
     logo: "arte",
     link: "https://www.arte.tv/fr/",
-    highlight: true,
+    highlight: 7,
   },
   {
     name: "beIN SPORTS",
     logo: "bein-sports",
     link: "https://www.beinsports.com/",
+    highlight: 8,
   },
   {
     name: "Biig",
@@ -113,7 +116,7 @@ export const otherData: Reference[] = [
     name: "BNP",
     logo: "bnp",
     link: "https://mabanque.bnpparibas/",
-    highlight: true,
+    highlight: 6,
   },
   {
     name: "Bonjour",
@@ -129,11 +132,13 @@ export const otherData: Reference[] = [
     name: "Cartier",
     logo: "cartier",
     link: "https://www.cartier.com/",
+    highlight: 5,
   },
   {
     name: "Decathlon",
     logo: "decathlon",
     link: "https://www.decathlon.fr/",
+    highlight: 10,
   },
   {
     name: "Deutsche Institution für Schiedsgerichtsbarkeit",
@@ -169,13 +174,12 @@ export const otherData: Reference[] = [
     name: "France TV",
     logo: "france-tv",
     link: "https://www.france.tv/",
-    highlight: true,
+    highlight: 9,
   },
   {
     name: "General Electric",
     logo: "general-electric",
     link: "https://www.ge.com/",
-    highlight: true,
   },
   {
     name: "Instamed",
@@ -206,7 +210,6 @@ export const otherData: Reference[] = [
     name: "Libération",
     logo: "liberation",
     link: "https://www.liberation.fr/",
-    highlight: true,
   },
   {
     name: "The London Internet Exchange",
@@ -252,7 +255,7 @@ export const otherData: Reference[] = [
     name: "Orange",
     logo: "orange",
     link: "https://www.orange.fr/",
-    highlight: true,
+    highlight: 2,
   },
   {
     name: "Oskab",
@@ -283,6 +286,7 @@ export const otherData: Reference[] = [
     name: "Renault",
     logo: "renault",
     link: "https://www.renault.fr/",
+    highlight: 11,
   },
   {
     name: "Ville de Roubaix",
@@ -303,13 +307,11 @@ export const otherData: Reference[] = [
     name: "SensioLabs",
     logo: "sensio-labs",
     link: "https://sensiolabs.com/",
-    highlight: true,
   },
   {
     name: "Sezane",
     logo: "sezane",
     link: "https://www.sezane.com/",
-    highlight: true,
   },
   {
     name: "SGS",
@@ -320,6 +322,7 @@ export const otherData: Reference[] = [
     name: "Siemens",
     logo: "siemens",
     link: "https://www.siemens.com/",
+    highlight: 1,
   },
   {
     name: "Simplon",
@@ -370,17 +373,19 @@ export const otherData: Reference[] = [
     name: "US Government",
     logo: "us-government",
     link: "https://data.usbr.gov/rise/api",
+    highlight: 4,
   },
   {
     name: "Vestiaire collective",
     logo: "vestiaire-collective",
     link: "https://vestiairecollective.com/",
+    highlight: 12,
   },
   {
     name: " Volvo",
     logo: "volvo",
     link: "https://www.volvocars.com/",
-    highlight: true,
+    highlight: 3,
   },
   {
     name: "whatwedo",

pwa/public/images/references/oss/kbin.png

@@ -6,7 +6,7 @@ export interface Reference {
   name: string;
   logo: string;
   link: string;
-  highlight?: boolean;
+  highlight?: number;
 }
 
 export interface GuideFrontMatter {