finish page

Linaro · Oct 10, 2024 · 86ddae7 · 86ddae7
1 parent 5d56b6f
commit 86ddae7
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 38 deletions.
diff --git a/src/components/sections/CardGrid.astro b/src/components/sections/CardGrid.astro
@@ -7,7 +7,7 @@ type Props = z.infer<typeof cardsSchema>;
 const { cards, styles } = Astro.props;
 ---
 
-<ul class:list={["list-none flex flex-wrap p-0 ", styles?.container]}>
+<ul class:list={["list-none flex flex-wrap", styles?.container]}>
   {
     cards.map(async ({ icon, title, text, button, style }, index) => {
       const content = text ? await marked.parse(text) : null;

diff --git a/src/components/sections/LargeCard.astro b/src/components/sections/LargeCard.astro
@@ -8,42 +8,89 @@ type Props = z.infer<typeof largeCardSchema>;
 const { cards, styles } = Astro.props;
 ---
 
-<ul class:list={["list-none flex flex-col flex-wrap p-0 ", styles?.container]}>
+<ul
+  class:list={["list-none flex flex-col flex-wrap gap-28", styles?.container]}
+>
   {
-    cards.map(async ({ icon, title, text, button, style, flip_image, secondIcon }, index) => {
-      const content = text ? await marked.parse(text) : null;
-      return (
-
-        <li class:list={[styles?.card, style]}>
-            <h3 class:list={["text-4xl my-5 z-50", styles?.card_title]}>
-            {title}
-          </h3>
-          <div class:list={["flex", flip_image ? "flex-row" : "flex-row-reverse", "items-center"]}>
-            {secondIcon ? <div><CloudinaryImg src="linaro-website/graphics/circle-gradient-border" alt="circle" height={200} width={200}/><Icon name={icon} size={100} class:list={["my-0", styles?.icon]} /></div> : icon && <Icon name={icon} size={100} class:list={["my-0", styles?.icon]} />}
-
-
+    cards.map(
+      async (
+        { icon, title, text, button, style, flip_image, secondIcon },
+        index,
+      ) => {
+        const content = text ? await marked.parse(text) : null;
+        return (
+          <li class:list={[styles?.card, style]}>
+            <h3
+              class:list={[
+                "text-3xl my-5 z-50 text-linaro-yellow",
+                styles?.card_title,
+              ]}
+            >
+              {title}
+            </h3>
+            <div
+              class:list={[
+                "flex gap-8",
+                flip_image ? "flex-row" : "flex-row-reverse",
+              ]}
+            >
+              {secondIcon ? (
+                <div class="basis-2/5 grow-[1] relative">
+                  <CloudinaryImg
+                    src="linaro-website/graphics/circle-gradient-border"
+                    alt="circle"
+                    height={200}
+                    width={200}
+                    class="absolute not-prose top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+                  />
 
-          <div
-            class:list={[styles?.card_text, `text-xl prose-a:text-blue-300 text-inherit grow-[2]`]}
-            set:html={content}
-          />
-          </div>
+                  <Icon
+                    name={icon}
+                    size={100}
+                    class:list={[
+                      "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+                      styles?.icon,
+                    ]}
+                  />
+                </div>
+              ) : (
+                icon && (
+                  <Icon
+                    name={icon}
+                    size={100}
+                    class:list={["my-0", styles?.icon]}
+                  />
+                )
+              )}
 
-          {button && (
-            <a
-              href={button.url}
-              target={button.url.startsWith("https") ? "_blank" : "_self"}
-              class="no-underline inline-block mt-auto"
-            >
               <div
-                class:list={[`linaro-gradient-button mt-auto`, styles?.button]}
+                class:list={[
+                  styles?.card_text,
+                  `basis-3/5 text-lg text-inherit grow-[2]`,
+                ]}
+                set:html={content}
+              />
+            </div>
+
+            {button && (
+              <a
+                href={button.url}
+                target={button.url.startsWith("https") ? "_blank" : "_self"}
+                class="no-underline inline-block mt-auto"
               >
-                {button.text}
-              </div>
-            </a>
-          )}
-        </li>
-      );
-    })
+                <div
+                  class:list={[
+                    `linaro-gradient-button mt-auto`,
+                    styles?.button,
+                  ]}
+                >
+                  {button.text}
+                </div>
+              </a>
+            )}
+          </li>
+        );
+      },
+    )
   }
 </ul>
diff --git a/src/content/pages/nxp.md b/src/content/pages/nxp.md
@@ -19,13 +19,16 @@ hero:
 flow:
   - row: container_row
     title: Why Choose Linaro for NXP Development?
+    styles:
+      inner: py24 px-24
     sections:
       - component: text
         text_content: "Linaro combines industry-leading expertise in Arm ecosystem OSS stacks development and integration with focus on security, performance, and reliability, scalability helping your business to:"
+        style: text-center text-2xl mb-24 mx-24 mt-24
       - component: cards
         styles:
-          card: max-w-[40ch]
-          container: justify-center gap-x-16
+          card: max-w-[20em]
+          container: justify-center gap-x-16 mx-24
           card_title: bg-linaro-gradient text-transparent bg-clip-text
         cards:
           - title: Develop Standard Compliant Secure Solutions End-2-End
@@ -55,10 +58,11 @@ flow:
     sections:
       - component: text
         text_content: Linaro’s engineers are experts in working with NXP’s i.MX series, offering comprehensive support across the lifecycle of your products.
-        style: text-center text-3xl max-w-5xl mx-auto font-bold
+        style: text-center text-2xl mx-auto font-bold mb-16 mx-32
       - component: large_card
         styles:
-          container: justify-center gap-x-16
+          container: justify-center gap-x-16 mx-32
+          card: max-w-[1/2]
           card_text: text-lg
           card_title: text-2xl w-full
         cards:
@@ -135,10 +139,13 @@ flow:
   - row: container_row
     title: How We Work with You
     sections:
+      - component: large_image
+        src: /linaro-website/graphics/nxp_wheel_pz4eb1.png
+        alt: nxp-wheel-image
       - component: cards
         styles:
           card: max-w-[40ch]
-          container: justify-center gap-x-16
+          container: justify-center gap-x-16 mx-32
           card_title: bg-linaro-gradient text-transparent bg-clip-text h-auto py-1
         cards:
           - title: Assessment