add 404 and Fix carousel

src/components/Home/Hero.astro

@@ -1,10 +1,10 @@
 ---
 import { getCollection } from "astro:content";
-import Header from "../Header.astro";
 import { Image } from "astro:assets";
 import logoImage from "../../assets/openAMP_combox_dark.svg";
 import FirstItem from "../News/FirstItem.astro";
 import dayjs from "dayjs";
+import heroImage from "../../assets/images/triangle_background.png";
 
 const { data } = Astro.props;
 const blogs = await getCollection("news");
@@ -13,110 +13,111 @@ const blogLists = blogs
   .slice(0, 2);
 ---
 
-<Header>
-  <div
-    id="carouselExampleControls"
-    class="relative"
-    data-te-carousel-init
-    data-te-ride="carousel"
-  >
-    <!--Carousel items-->
+<header
+  class=`text-center relative text-white  p-4 md:p-12 h-full w-full min-h-[40rem]`
+  style=`background-image: linear-gradient(to bottom right, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(${heroImage.src}); background-size: cover; background-position: center`
+  data-te-carousel-init
+  data-te-ride="carousel"
+  id="carouselExampleControls"
+>
+  <!--Carousel items-->
+  <div class="h-full mx-auto my-auto">
     <div
-      class="relative w-full overflow-hidden after:clear-both after:block after:content-['']"
+      class="relative w-full mx-auto my-auto overflow-hidden after:clear-both after:block after:content-['']"
     >
       <!--First item-->
       <div
         class="relative float-left -mr-[100%] mb-3 w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
         data-te-carousel-item
         data-te-carousel-active
       >
-        <Image height={300} src={logoImage} alt="openAMP Logo" />
+        <div class="w-full h-full flex flex-col justify-center items-center">
+          <Image height={300} src={logoImage} alt="openAMP Logo" />
 
-        <p class="leading-normal text-center max-w-xl text-xl mb-4">
-          {data.main_body}
-        </p>
-        <a
-          onclick="
-          window.open('https://github.com/OpenAMP', '_blank')
-          "
-          class="bg-openampred align-middle mt-2 mx-auto p-4 rounded text-md text-center transition ease-in-out hover:bg-red-600 text-white"
-          >View on Github</a
-        >
+          <p class="leading-normal text-center max-w-xl text-xl mb-4">
+            {data.main_body}
+          </p>
+          <a
+            href="https://github.com/OpenAMP"
+            target="_blank"
+            class="bg-openampred align-middle mt-2 mx-auto p-4 rounded text-md text-center transition ease-in-out hover:bg-red-600 text-white cursor-pointer"
+            >View on GitHub</a
+          >
+        </div>
       </div>
       <!--Second item-->
       <div
-        class="relative text-black float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
+        class="relative text-black w-full float-left -mr-[100%] hidden transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none h-full"
         data-te-carousel-item
       >
         <FirstItem {...blogLists[0]} />
       </div>
       <!--Third item-->
       <div
-        class="relative text-black float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
+        class="relative text-black float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none h-full"
         data-te-carousel-item
       >
         <FirstItem {...blogLists[1]} />
       </div>
     </div>
-
-    <!--Carousel controls - prev item-->
-    <button
-      class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-openampred hover:no-underline hover:opacity-90 hover:outline-none focus:text-openampred focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button"
-      data-te-target="#carouselExampleControls"
-      data-te-slide="prev"
-    >
-      <span class="inline-block h-8 w-8">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="h-6 w-6"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M15.75 19.5L8.25 12l7.5-7.5"></path>
-        </svg>
-      </span>
-      <span
-        class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
-        >Previous</span
+  </div>
+  <!--Carousel controls - prev item-->
+  <button
+    class="absolute bottom-0 left-0 sm:top-0 z-[1] flex w-[10%] items-center justify-end border-0 bg-none py-4 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-openampred hover:no-underline hover:opacity-90 hover:outline-none focus:text-openampred focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+    type="button"
+    data-te-target="#carouselExampleControls"
+    data-te-slide="prev"
+  >
+    <span class="inline-block h-8 w-8">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="h-6 w-6"
       >
-    </button>
-    <!--Carousel controls - next item-->
-    <button
-      class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-openampred hover:no-underline hover:opacity-90 hover:outline-none focus:text-openampred focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button"
-      data-te-target="#carouselExampleControls"
-      data-te-slide="next"
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M15.75 19.5L8.25 12l7.5-7.5"></path>
+      </svg>
+    </span>
+    <span
+      class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+      >Previous</span
     >
-      <span class="inline-block h-8 w-8">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="h-6 w-6"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
-        </svg>
-      </span>
-      <span
-        class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
-        >Next</span
+  </button>
+  <!--Carousel controls - next item-->
+  <button
+    class="absolute bottom-0 right-0 sm:top-0 z-[1] flex w-[10%] items-center justify-start border-0 bg-none py-4 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-openampred hover:no-underline hover:opacity-90 hover:outline-none focus:text-openampred focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+    type="button"
+    data-te-target="#carouselExampleControls"
+    data-te-slide="next"
+  >
+    <span class="inline-block h-8 w-8">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="h-6 w-6"
       >
-    </button>
-  </div>
-  <script>
-    import { Carousel, initTE } from "tw-elements";
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
+      </svg>
+    </span>
+    <span
+      class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+      >Next</span
+    >
+  </button>
+</header>
+<script>
+  import { Carousel, initTE } from "tw-elements";
 
-    initTE({ Carousel });
-  </script>
-</Header>
+  initTE({ Carousel });
+</script>

src/content/pages/404.md

@@ -0,0 +1,18 @@
+---
+permalink: /404.html
+title: 404 page not found!
+description: >
+  404 page not found
+links:
+  - title: General Information
+    style: text-center
+    url: /about/
+  - title: Governance
+    style: text-center
+    url: /governance/
+  - title: News
+    style: text-center
+    url: /news/
+  - title: Contact Us
+    url: https://www.linaro.org/contact/
+---

src/layouts/MainLayout.astro

@@ -12,7 +12,4 @@ import "../styles/global.scss";
     <slot />
   </main>
   <Footer />
-  <script
-    type="text/javascript"
-    src="../node_modules/tw-elements/dist/js/tw-elements.umd.min.js"></script>
 </body>

src/pages/404.astro

@@ -0,0 +1,30 @@
+---
+import { getEntry } from "astro:content";
+import BaseHead from "../components/Head/BaseHead.astro";
+import MainLayout from "../layouts/MainLayout.astro";
+
+const about = await getEntry("pages", "404");
+const { data, render } = about;
+const { Content } = await render();
+---
+
+<html lang="en">
+  <BaseHead title={"404 - OpenAMP Project"} description={data.description} />
+  <MainLayout>
+    <section class="my-16 max-w-3xl mx-auto px-5">
+      <h1>Page Not Found</h1>
+      <h2 class="text-left font-bold text-xl my-4">
+        You can also find out more about Open AMP through the following links:
+      </h2>
+      <ul class="ml-5 list-disc">
+        {
+          data.links.map((link: any) => (
+            <li>
+              <a href={link.url}>{link.title}</a>
+            </li>
+          ))
+        }
+      </ul>
+    </section>
+  </MainLayout>
+</html>

src/pages/[slug].astro

@@ -8,7 +8,10 @@ import Header from "../components/Header.astro";
 export async function getStaticPaths() {
   const pages = await getCollection("pages");
   const filteredPages = pages.filter(
-    (page) => page.id !== "homepage.md" && page.id !== "about.md"
+    (page) =>
+      page.id !== "homepage.md" &&
+      page.id !== "about.md" &&
+      page.id !== "404.md"
   );
   return filteredPages.map((page) => {
     return {

src/pages/index.astro

@@ -14,7 +14,7 @@ const { Content } = await render();
   <MainLayout>
     <Hero data={data} />
 
-    <section class="text-center decoration-0 prose-xl mb-8">
+    <section class="text-center decoration-0 prose-xl mb-8 prose-p:mb-4">
       <Content />
     </section>
   </MainLayout>

tailwind.config.cjs

@@ -26,8 +26,7 @@ module.exports = {
     },
   },
   plugins: [
-    // require("@tailwindcss/typography"),
-
+    require("@tailwindcss/typography"),
     require("tw-elements/dist/plugin.cjs"),
   ],
 };