Reworked style and changed featuredContent

src/css/custom.css

@@ -6,13 +6,13 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #2e63a3;
+  --ifm-color-primary-dark: #29569A;
+  --ifm-color-primary-darker: #274981;
+  --ifm-color-primary-darkest: #203c66;
+  --ifm-color-primary-light: #3370b4;
+  --ifm-color-primary-lighter: #3577c1;
+  --ifm-color-primary-lightest: #3C8BBC;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --primary: #ff6a3e;
@@ -197,7 +197,9 @@
   margin: 2rem auto 0 auto;
   border-radius: 2rem;
   box-shadow: 0 4px 32px rgba(0,0,0,0.10);
-  background: #fff;
+  background: rgba(203, 225, 240, 0.4); /* 60% transparent var(--color-odd) */
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
   left: 0;
   right: 0;
   position: sticky;
@@ -217,24 +219,6 @@
   box-shadow: 0 4px 32px rgba(0,0,0,0.30);
 } 
 
-body::before {
-  content: "";
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 7rem; /* Adjust height to cover navbar + margin */
-  background: var(--color-odd);
-  z-index: 99;
-  pointer-events: none;
-  opacity: 1;
-  transition: opacity 0.3s;
-}
-body.navbar-bg-transparent::before {
-  opacity: 0;
-}
-
 .menu__link,
 .dropdown__link,
 .navbar__item:not(.navbar-login-button) {

src/data/featuredContent.tsx

@@ -1,6 +1,13 @@
 import { FeaturedCardData } from "../components/sections/FeaturedContent";
 
 const featuredCards: FeaturedCardData[] = [
+  {
+    image: '/img/logo.svg',
+    title: 'Educates is now independent',
+    description: 'The Educates Training Platform is is now available as an Open Source independent product. Learn more about it here.',
+    ctaLabel: 'Read blog',
+    ctaHref: '/blog/educates-independent',
+  },
   {
     image: '/img/featured-content/working_locally.jpeg',
     title: 'How to best work locally',
@@ -15,12 +22,12 @@ const featuredCards: FeaturedCardData[] = [
     ctaLabel: 'Read blog',
     ctaHref: '/blog/install-educates-cloud-cli',
   },
-  {
-    image: '/img/featured-content/cloud.jpeg',
-    title: 'Installing Educates on a cloud provider (Part 2)',
-    description: 'Verification of the installation of Educates Training Platform on a cloud provider including verification of the platform components and deploy and verify a training portal and workshop',
-    ctaLabel: 'Read blog',
-    ctaHref: '/blog/verify-educates-cloud-install',
-  },
+  // {
+  //   image: '/img/featured-content/cloud.jpeg',
+  //   title: 'Installing Educates on a cloud provider (Part 2)',
+  //   description: 'Verification of the installation of Educates Training Platform on a cloud provider including verification of the platform components and deploy and verify a training portal and workshop',
+  //   ctaLabel: 'Read blog',
+  //   ctaHref: '/blog/verify-educates-cloud-install',
+  // },
 ];
 export default featuredCards;

src/pages/index.tsx

@@ -11,7 +11,7 @@ import FeaturedContent from '../components/sections/FeaturedContent';
 import featuredCards from '../data/featuredContent';
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
-  var index = 0;
+  var index = 1;
 
   function getSectionType(index: number) {
     return index % 2 === 0 ? 'odd' : 'even';