Merge pull request #144 from Linaro/webdev-2213-2189-logos-pagenav

[WEBDEV-2213, WEBDEV-2189] - sponsor logos and connect page nav

src/components/hero/ConnectHero.astro

@@ -11,6 +11,7 @@ const { background, inner_image, description, dates, child_page } =
   Astro.props!;
 
 const markdown = description && (await marked.parse(description));
+const currentPath = Astro.url.pathname;
 ---
 
 {
@@ -24,15 +25,38 @@ const markdown = description && (await marked.parse(description));
         class="absolute inset-0 w-full h-full object-cover my-0"
       />
       {inner_image && (
-        <div class="absolute top-0 left-0 w-full h-full flex justify-center items-center text-center">
-          <div class="flex flex-col items-center">
-            <CloudinaryImg src={inner_image} alt="Linaro Connect Logo" />
+        <>
+          <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center text-center">
+            <div class="flex flex-col items-center">
+              <CloudinaryImg src={inner_image} alt="Linaro Connect Logo" />
+            </div>
+            <div class="flex gap-2 lg:gap-8 mx-auto lg:mb-8">
+              {[
+                { href: "/connect", label: "Connect Home" },
+                { href: "/connect/registration", label: "Registration" },
+                {
+                  href: "/connect/call-for-proposals",
+                  label: "Call for Proposals",
+                },
+                { href: "/connect/sponsorship", label: "Sponsorship" },
+              ].map(({ href, label }) => (
+                <a
+                  href={href}
+                  target="_self"
+                  class={`no-underline inline-block text-sm lg:text-lg transition-all duration-200 ${
+                    currentPath === href ? "text-linaro-yellow" : "text-white"
+                  } hover:text-linaro-yellow hover:scale-105`}
+                >
+                  {label}
+                </a>
+              ))}
+            </div>
           </div>
-        </div>
+        </>
       )}
     </div>
   ) : (
-    <div class="relative w-full h-[500px] overflow-hidden border-b-[10px] border-b-[#ffce00] border-solid">
+    <div class="relative w-full h-[540px] lg:h-[500px] overflow-hidden border-b-[10px] border-b-[#ffce00] border-solid">
       <video
         autoplay
         muted
@@ -42,7 +66,7 @@ const markdown = description && (await marked.parse(description));
         <source src={background} type="video/mp4" />
         Your browser does not support the video tag.
       </video>
-      <div class="absolute top-0 left-0 w-full h-full flex justify-center items-center text-center bg-[rgba(0,_0,_0,_0.6)]">
+      <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center text-center bg-[rgba(0,_0,_0,_0.6)]">
         <div class="flex flex-col items-center">
           {inner_image && (
             <CloudinaryImg
@@ -55,6 +79,27 @@ const markdown = description && (await marked.parse(description));
           <h1 class="text-3xl m-0" set:html={markdown} />
           <h1 class="text-linaro-yellow text-3xl m-0">{dates}</h1>
         </div>
+        <div class="flex gap-2 lg:gap-8 mx-auto">
+          {[
+            { href: "/connect", label: "Connect Home" },
+            { href: "/connect/registration", label: "Registration" },
+            {
+              href: "/connect/call-for-proposals",
+              label: "Call for Proposals",
+            },
+            { href: "/connect/sponsorship", label: "Sponsorship" },
+          ].map(({ href, label }) => (
+            <a
+              href={href}
+              target="_self"
+              class={`no-underline inline-block text-sm lg:text-lg transition-all duration-200 ${
+                currentPath === href ? "text-linaro-yellow" : "text-white"
+              } hover:text-linaro-yellow hover:scale-105`}
+            >
+              {label}
+            </a>
+          ))}
+        </div>
       </div>
     </div>
   )

src/content/pages/connect.md

@@ -6,7 +6,7 @@ description: Linaro Connect is a series of events that brings together the Arm E
 connectHero:
   background: https://static-linaro-org.s3.amazonaws.com/videos/connect-bg-video.mp4
   inner_image: linaro-website/graphics/connect-logo_u9lscd.svg
-  description: Linaro Connect 2025<br><span class="text-linaro-yellow">Wednesday 14 May - Friday 16 May 2025</span><br>Lisbon, Portugal
+  description: Linaro Connect 2025<br><span class="text-linaro-yellow">Boosting the Next Wave of Arm Innovation</span><br>14-16 May 2025  |  Lisbon, Portugal
 flow:
   - row: container_row
     animation: none
@@ -43,6 +43,34 @@ flow:
     no_border: true
     sections:
       - component: faded_line
+  - row: container_row
+    animation: none
+    no_border: true
+    styles:
+      inner: py-4
+    sections:
+      - component: text
+        text_content: Thank you to our Sponsors
+        style: bg-linaro-gradient text-transparent bg-clip-text h-auto text-xl lg:text-4xl text-center mb-2
+      - component: two_column
+        container_styles: w-full justify-center gap-16 items-center
+        columns:
+          - type: image
+            image:
+              src: linaro-website/logos/arm.svg
+              alt: |
+                Qualcomm logo
+              height: 200
+              width: 200
+            styles: not-prose
+          - type: image
+            image:
+              src: linaro-website/logos/qualcomm.svg
+              alt: |
+                arm logo
+              height: 200
+              width: 400
+            styles: not-prose
   - row: container_row
     animation: none
     no_border: true
@@ -98,9 +126,9 @@ flow:
         styles:
           card: max-w-[22em] p-8 flex flex-col bg-dark border-white border rounded-3xl border-solid
           container: flex justify-center gap-x-8 flex-wrap
-          card_title: text-2xl
+          card_title: text-linaro-yellow text-2xl
           image: m-0
-          text: text-grey text-md leading-10
+          text: text-md leading-10
         button_cards: true
         cards:
           - title: About