diff --git a/docusaurus.config.js b/docusaurus.config.js
index 9551d8239..b1113d6c2 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -44,27 +44,27 @@ const config = {
           beforeDefaultRemarkPlugins: [remarkGithubAdmonitionsToDirectives],
           sidebarPath: require.resolve('./sidebars.js'),
           sidebarItemsGenerator: async function ({
-                      defaultSidebarItemsGenerator,
-                      ...args
-                    }) {
-                      const sidebarItems = await defaultSidebarItemsGenerator(args);
-                      
-                      // Find the directory you want to flatten
-                      const processItems = (items) => {
-                        return items.flatMap(item => {
-                          if (item.type === 'category' && item.label === 'Parent DOC Directory') {
-                            // Return the items inside the category instead of the category itself
-                            return item.items || [];
-                          }
-                          if (item.items) {
-                            return [{...item, items: processItems(item.items)}];
-                          }
-                          return [item];
-                        });
-                      };
-                      
-                      return processItems(sidebarItems);
-                    },
+            defaultSidebarItemsGenerator,
+            ...args
+          }) {
+            const sidebarItems = await defaultSidebarItemsGenerator(args);
+
+            // Find the directory you want to flatten
+            const processItems = (items) => {
+              return items.flatMap(item => {
+                if (item.type === 'category' && item.label === 'Parent DOC Directory') {
+                  // Return the items inside the category instead of the category itself
+                  return item.items || [];
+                }
+                if (item.items) {
+                  return [{ ...item, items: processItems(item.items) }];
+                }
+                return [item];
+              });
+            };
+
+            return processItems(sidebarItems);
+          },
         },
         blog: {
           showReadingTime: true,
@@ -81,7 +81,7 @@ const config = {
   ],
 
   themes: ['@docusaurus/theme-mermaid'],
-  
+
   // Enable Mermaid in markdown
   markdown: {
     mermaid: true,
@@ -90,11 +90,16 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      colorMode: {
+        defaultMode: 'light',
+        disableSwitch: true,
+        respectPrefersColorScheme: false,
+      },
       navbar: {
         title: '',
         logo: {
           alt: 'CNOE Logo',
-          src: 'img/logo.png',
+          src: 'img/logo-no-name.png',
         },
         items: [
           {
@@ -103,7 +108,7 @@ const config = {
             position: 'left',
             label: 'Docs'
           },
-          {to: '/blog', label: 'Blog', position: 'left'},
+          { to: '/blog', label: 'Blog', position: 'left' },
           {
             'aria-label': 'Community Calendar',
             'className': 'navbar--calendar-link',
@@ -136,7 +141,7 @@ const config = {
               },
               {
                 label: 'Contribute',
-                to: '/docs/contribute',
+                to: '/docs/contributing/aws-ref-impl-CONTRIBUTING',
               },
             ],
           },
diff --git a/package.json b/package.json
index a73d53277..094d5035d 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "d3": "^7.8.5",
     "docusaurus-lunr-search": "^3.6.0",
     "html-react-parser": "^3.0.15",
+    "playwright": "^1.54.1",
     "plugin-image-zoom": "git+https://github.com/flexanalytics/plugin-image-zoom.git",
     "prism-react-renderer": "^1.3.5",
     "react": "^19.0.0",
diff --git a/src/components/CNOENews/index.js b/src/components/CNOENews/index.js
index d1b8addfa..0ba9178b7 100644
--- a/src/components/CNOENews/index.js
+++ b/src/components/CNOENews/index.js
@@ -5,25 +5,50 @@ import yaml from 'js-yaml';
 import React from 'react';
 import AliceCarousel from 'react-alice-carousel';
 import 'react-alice-carousel/lib/alice-carousel.css';
+import clsx from 'clsx';
 import styles from './styles.module.css';
 
-const { useState, useEffect } = React;
-
-function News({title, description, imageSrc, linkTo, date, presentationLink}){
-    return(
-        <div className={styles.NewsCard}>
-
-        <a  href={linkTo} target="_blank" style={{ textDecoration: 'none', padding:"0px", cornerRadius:"8px" }}>
-            <img src={imageSrc} width="100%" height="230px" objectFit="contain" style={{ marginBottom: '16px', borderRadius:"5px"}}/>
-            <h2 align="left" style={{color: "var(--ifm-color-neutral-darkest)"}}>
-                {title}<br/>
-                {date && <small style={{fontSize: "15px"}}> {date}</small>}
-            </h2>
-            <p align="left" style={{ color: "var(--ifm-color-neutral-darker)" }}>{description} <br/>
-            {presentationLink && <small align="left"><a href={presentationLink} target="_blank">Presentation Link</a></small>}</p>
-        </a>
+const { useState, useEffect, useRef } = React;
+
+function News({ title, description, imageSrc, linkTo, date, presentationLink }) {
+  return (
+    <div className={styles.newsCard}>
+      <a href={linkTo} target="_blank" className={styles.newsCardLink}>
+        <div className={styles.newsImageContainer}>
+          <img
+            src={imageSrc}
+            alt={title}
+            className={styles.newsImage}
+          />
+          <div className={styles.newsImageOverlay}></div>
+        </div>
+
+        <div className={styles.newsContent}>
+          <div className={styles.newsHeader}>
+            <h3 className={styles.newsCardTitle}>{title}</h3>
+            {date && (
+              <span className={styles.newsDate}>{date}</span>
+            )}
+          </div>
+
+          <p className={styles.newsDescription}>{description}</p>
+
+          {presentationLink && (
+            <div className={styles.newsLinks}>
+              <a
+                href={presentationLink}
+                target="_blank"
+                className={styles.presentationLink}
+                onClick={(e) => e.stopPropagation()}
+              >
+                View Presentation →
+              </a>
+            </div>
+          )}
         </div>
-    );
+      </a>
+    </div>
+  );
 }
 
 
@@ -31,12 +56,14 @@ function News({title, description, imageSrc, linkTo, date, presentationLink}){
 export default function CNOENews() {
   const { siteConfig } = useDocusaurusContext();
   const [newsList, setNewsList] = useState([]);
+  const [isVisible, setIsVisible] = useState(false);
+  const containerRef = useRef(null);
 
   useEffect(() => {
     // Function to fetch and parse YAML data
     const fetchYAMLData = async () => {
       try {
-        const response = await axios.get('/news/data.yaml'); // Adjust the path to your YAML file
+        const response = await axios.get('/news/data.yaml');
         const yamlData = response.data;
         const parsedData = yaml.load(yamlData);
         setNewsList(parsedData);
@@ -45,48 +72,107 @@ export default function CNOENews() {
       }
     };
 
-    // Call the function to fetch YAML data
     fetchYAMLData();
-  }, []); 
-
-   const items = newsList.map((news, index) => (
-      <News
-        key={index}
-        title={news.title}
-        description={news.description}
-        imageSrc={news.imageSrc}
-        linkTo={news.linkTo}
-        date={news.date}
-        presentationLink={news.presentationLink}
-      />
+  }, []);
+
+  useEffect(() => {
+    // Initialize scroll animation
+    if (typeof window !== 'undefined' && containerRef.current) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              setIsVisible(true);
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.2 }
+      );
+
+      observer.observe(containerRef.current);
+
+      return () => {
+        if (containerRef.current) {
+          observer.unobserve(containerRef.current);
+        }
+      };
+    }
+  }, []);
+
+  // Randomize the news items
+  const shuffleArray = (array) => {
+    const shuffled = [...array];
+    for (let i = shuffled.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    }
+    return shuffled;
+  };
+
+  const items = shuffleArray(newsList).map((news, index) => (
+    <News
+      key={index}
+      title={news.title}
+      description={news.description}
+      imageSrc={news.imageSrc}
+      linkTo={news.linkTo}
+      date={news.date}
+      presentationLink={news.presentationLink}
+    />
   ));
 
   const responsive = {
-    0: { items: 3 },
-    568: { items: 3 },
+    0: { items: 1 },
+    568: { items: 2 },
     1024: { items: 3 },
   };
 
   return (
-    <div className={styles.members}>
-    <h1 className="heading heading-center">In the News</h1>
-      <a target="_blank" href="https://github.com/cnoe-io/website/blob/main/static/news/data.yaml" className={styles.addTalkLink}> ► Add your talk!</a>
-      <Grid container className="sliderStyle">
-        <Grid item xs={1}/>
-          <Grid item xs={10} >
-            <AliceCarousel mouseTracking
-              items={items}
-              autoPlay={false}
-              disableSlideInfo={true}
-              disableButtonsControls={true}
-              autoPlayInterval={2500}
-              infinite={false}
-              responsive={responsive}
-            />
-        </Grid>
-        <Grid item xs={1}/>
-      </Grid>
-    </div>
+    <section
+      ref={containerRef}
+      className={clsx(styles.newsSection, isVisible && styles.newsSectionVisible)}
+    >
+      <div className="container">
+        <div className={styles.newsHeader}>
+          <h2 className={styles.newsTitle}>In the News</h2>
+          <p className={styles.newsSubtitle}>
+            Stay updated with the latest CNOE community talks, presentations, and insights
+          </p>
+          <a
+            target="_blank"
+            href="https://github.com/cnoe-io/website/blob/main/static/news/data.yaml"
+            className={styles.addTalkButton}
+          >
+            <svg
+              width="1.2em"
+              height="1.2em"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              className={styles.buttonIcon}
+            >
+              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+            </svg>
+            Add your talk!
+          </a>
+        </div>
+
+        <div className={styles.newsCarousel}>
+          <AliceCarousel
+            mouseTracking
+            items={items}
+            autoPlay={false}
+            disableSlideInfo={true}
+            disableButtonsControls={false}
+            disableDotsControls={false}
+            autoPlayInterval={4000}
+            infinite={false}
+            responsive={responsive}
+            controlsStrategy="alternate"
+          />
+        </div>
+      </div>
+    </section>
   );
 }
-  
+
diff --git a/src/components/CNOENews/styles.module.css b/src/components/CNOENews/styles.module.css
index 29b0847d4..039cb7468 100644
--- a/src/components/CNOENews/styles.module.css
+++ b/src/components/CNOENews/styles.module.css
@@ -1,33 +1,471 @@
-.news {
-    display: flex;
-    align-items: center;
-    padding: 2rem 0;
-    width: 100%;
-    margin-bottom: 24px;
-}
-.NewsCard {
-    display: flex;
-    flex-direction: column;
-    width: "120px";
-    height: "500px";
-    padding: 16px;
-    border-radius: 5px;
-    border-color: var(--ifm-color-neutral-lightest);
-    margin-right: 24px;
-    /* box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.25); */
-    color: var(--ifm-color-neutral-darker);
-}
-
-.addTalkLink {
-    display: block;
-    align: center;
-    text-align: center;
-    margin-top: -45px; /* Adjust this value as needed for less space */
-    margin-bottom: 20px; /* Adjust this value as needed for less space */
-    color: var(--ifm-color-primary); /* Adjust this to your preferred color */
-    text-decoration: none; /* Remove underline if preferred */
+/* Modern CNOENews Component Styles */
+.newsSection {
+  padding: 5rem 0;
+  background: linear-gradient(135deg,
+      var(--ifm-primary-50) 0%,
+      var(--ifm-primary-100) 25%,
+      var(--ifm-neutral-50) 50%,
+      var(--ifm-primary-100) 75%,
+      var(--ifm-primary-50) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+  position: relative;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 0.8s var(--ifm-easing-ease);
+}
+
+[data-theme="dark"] .newsSection {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+}
+
+.newsSection.newsSectionVisible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.newsSection::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, transparent 0%, var(--ifm-primary-50) 30%, transparent 70%);
+  opacity: 0.3;
+}
+
+[data-theme="dark"] .newsSection::before {
+  background: linear-gradient(135deg, transparent 0%, var(--ifm-primary-900) 30%, transparent 70%);
+  opacity: 0.2;
+}
+
+/* News Header */
+.newsHeader {
+  text-align: center;
+  margin-bottom: 3rem;
+  position: relative;
+  z-index: 2;
+}
+
+.newsTitle {
+  font-size: var(--ifm-font-size-3xl);
+  font-weight: 700;
+  color: var(--ifm-neutral-900);
+  margin-bottom: 1rem;
+  letter-spacing: -0.02em;
+}
+
+[data-theme="dark"] .newsTitle {
+  color: var(--ifm-neutral-100) !important;
+}
+
+.newsSubtitle {
+  font-size: var(--ifm-font-size-lg);
+  color: var(--ifm-neutral-700);
+  max-width: 600px;
+  margin: 0 auto 1.5rem;
+  line-height: 1.6;
+}
+
+[data-theme="dark"] .newsSubtitle {
+  color: var(--ifm-neutral-400) !important;
+}
+
+/* Add Talk Button - Match Hero Button Style */
+.addTalkButton {
+  min-width: 180px;
+  padding: 0.75rem 2rem;
+  font-size: var(--ifm-font-size-lg);
+  font-weight: 600;
+  border-radius: 50px !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  box-shadow: 0 4px 15px rgba(0, 86, 140, 0.1);
+  border: 2px solid var(--ifm-primary);
+  background: transparent;
+  color: var(--ifm-primary);
+  text-decoration: none;
+}
+
+.addTalkButton:hover {
+  background: linear-gradient(135deg, var(--ifm-accent-600) 0%, var(--ifm-accent-700) 20%, var(--ifm-accent-800) 80%, var(--ifm-accent-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 3s ease infinite !important;
+  color: white !important;
+  border-color: transparent !important;
+  box-shadow: 0 8px 25px rgba(255, 140, 90, 0.8);
+  transform: translateY(-3px);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .addTalkButton {
+  box-shadow: 0 4px 15px rgba(77, 166, 255, 0.1);
+  border-color: var(--ifm-primary-300);
+  color: var(--ifm-primary-300);
+}
+
+[data-theme="dark"] .addTalkButton:hover {
+  background: linear-gradient(45deg, #1a8dff 0%, #ff6b35 50%, #1a8dff 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 3s ease infinite !important;
+  color: white !important;
+  border-color: transparent !important;
+  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.8);
+  text-decoration: none;
+}
+
+/* Button Icon */
+.buttonIcon {
+  transition: transform var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.addTalkButton:hover .buttonIcon {
+  transform: scale(1.1);
 }
 
 .addTalkLink:hover {
-    text-decoration: underline; /* Add underline on hover if preferred */
+  background: rgba(0, 86, 140, 0.1);
+  border-color: var(--ifm-primary);
+  transform: translateY(-2px);
+  box-shadow: var(--ifm-shadow-md);
+}
+
+[data-theme="dark"] .addTalkLink:hover {
+  background: rgba(77, 166, 255, 0.1) !important;
+  border-color: var(--ifm-primary-300) !important;
+}
+
+/* News Carousel */
+.newsCarousel {
+  position: relative;
+  z-index: 2;
+  margin-top: 4rem;
+}
+
+/* News Cards */
+.newsCard {
+  /* margin: 0 2.5rem; */
+  height: 450px;
+  /* Fixed height for all cards */
+  width: 95%;
+}
+
+.newsCardLink {
+  display: block;
+  height: 100%;
+  text-decoration: none;
+  color: inherit;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  overflow: hidden;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  box-shadow: var(--ifm-shadow-lg);
+  position: relative;
+}
+
+[data-theme="dark"] .newsCardLink {
+  background: rgba(30, 41, 59, 0.9) !important;
+  border: 1px solid rgba(71, 85, 105, 0.3) !important;
+}
+
+.newsCardLink:hover {
+  transform: translateY(-8px);
+  box-shadow: var(--ifm-shadow-2xl);
+  border-color: var(--ifm-primary-200);
+  text-decoration: none;
+  color: inherit;
+}
+
+[data-theme="dark"] .newsCardLink:hover {
+  border-color: var(--ifm-primary-600) !important;
+}
+
+/* News Image */
+.newsImageContainer {
+  position: relative;
+  height: 200px;
+  overflow: hidden;
+}
+
+.newsImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.newsImageOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
+  opacity: 0;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.newsCardLink:hover .newsImage {
+  transform: scale(1.05);
+}
+
+.newsCardLink:hover .newsImageOverlay {
+  opacity: 1;
+}
+
+/* News Content */
+.newsContent {
+  padding: 1.5rem;
+  height: calc(100% - 200px);
+  display: flex;
+  flex-direction: column;
+}
+
+.newsHeader {
+  margin-bottom: 1rem;
+}
+
+.newsCardTitle {
+  font-size: var(--ifm-font-size-lg);
+  font-weight: 600;
+  color: var(--ifm-neutral-900);
+  margin-bottom: 0.5rem;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
+
+[data-theme="dark"] .newsCardTitle {
+  color: var(--ifm-neutral-100) !important;
+}
+
+.newsDate {
+  font-size: var(--ifm-font-size-sm);
+  color: var(--ifm-neutral-500);
+  font-weight: 500;
+}
+
+[data-theme="dark"] .newsDate {
+  color: var(--ifm-neutral-400) !important;
+}
+
+.newsDescription {
+  font-size: var(--ifm-font-size-sm);
+  line-height: 1.6;
+  color: var(--ifm-neutral-700);
+  margin-bottom: 1rem;
+  flex-grow: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+[data-theme="dark"] .newsDescription {
+  color: var(--ifm-neutral-300) !important;
+}
+
+/* News Links */
+.newsLinks {
+  margin-top: auto;
+}
+
+.presentationLink {
+  color: var(--ifm-primary);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: var(--ifm-font-size-sm);
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+[data-theme="dark"] .presentationLink {
+  color: var(--ifm-primary-300) !important;
+}
+
+.presentationLink:hover {
+  color: var(--ifm-primary-600);
+  text-decoration: underline;
+}
+
+[data-theme="dark"] .presentationLink:hover {
+  color: var(--ifm-primary-200) !important;
+}
+
+/* Alice Carousel Customization */
+.newsCarousel .alice-carousel {
+  padding: 1rem 0 3rem 0;
+}
+
+.newsCarousel .alice-carousel__stage {
+  padding: 0 2rem;
+}
+
+/* Modern Navigation Arrows - Match Button Style */
+.newsCarousel .alice-carousel__prev-btn,
+.newsCarousel .alice-carousel__next-btn {
+  background: transparent;
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
+  color: var(--ifm-primary);
+  border: 3px solid var(--ifm-primary);
+  box-shadow: 0 4px 15px rgba(0, 86, 140, 0.1);
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.newsCarousel .alice-carousel__prev-btn:hover,
+.newsCarousel .alice-carousel__next-btn:hover {
+  background: linear-gradient(135deg, var(--ifm-accent-600) 0%, var(--ifm-accent-700) 20%, var(--ifm-accent-800) 80%, var(--ifm-accent-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 3s ease infinite !important;
+  color: white !important;
+  border-color: transparent !important;
+  box-shadow: 0 8px 25px rgba(255, 140, 90, 0.8);
+  transform: translateY(-3px);
+}
+
+[data-theme="dark"] .newsCarousel .alice-carousel__prev-btn,
+[data-theme="dark"] .newsCarousel .alice-carousel__next-btn {
+  background: transparent;
+  color: var(--ifm-primary-300);
+  border-color: var(--ifm-primary-300);
+  box-shadow: 0 4px 15px rgba(77, 166, 255, 0.1);
+}
+
+[data-theme="dark"] .newsCarousel .alice-carousel__prev-btn:hover,
+[data-theme="dark"] .newsCarousel .alice-carousel__next-btn:hover {
+  background: linear-gradient(45deg, #1a8dff 0%, #ff6b35 50%, #1a8dff 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 3s ease infinite !important;
+  color: white !important;
+  border-color: transparent !important;
+  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.8);
+}
+
+/* Modern Carousel Dots */
+.newsCarousel .alice-carousel__dots {
+  margin-top: 2rem;
+}
+
+.newsCarousel .alice-carousel__dots-item:not(.__custom) {
+  width: 12px !important;
+  height: 12px !important;
+  border-radius: 50% !important;
+  background: transparent !important;
+  margin: 0 6px !important;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease) !important;
+  border: 2px solid var(--ifm-primary) !important;
+  box-shadow: 0 4px 15px rgba(0, 86, 140, 0.1) !important;
+}
+
+.newsCarousel .alice-carousel__dots-item:not(.__custom):hover {
+  background: linear-gradient(135deg, var(--ifm-accent-600) 0%, var(--ifm-accent-700) 20%, var(--ifm-accent-800) 80%, var(--ifm-accent-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 3s ease infinite !important;
+  border-color: transparent !important;
+  transform: scale(1.2) !important;
+  box-shadow: 0 8px 25px rgba(255, 140, 90, 0.8) !important;
+}
+
+.newsCarousel .alice-carousel__dots-item:not(.__custom).__active {
+  background: var(--ifm-primary) !important;
+  transform: scale(1.3) !important;
+  box-shadow: 0 4px 20px rgba(0, 86, 140, 0.3), 0 0 20px var(--ifm-accent) !important;
+  border-color: var(--ifm-accent) !important;
+}
+
+[data-theme="dark"] .newsCarousel .alice-carousel__dots-item:not(.__custom) {
+  background: transparent !important;
+  border-color: var(--ifm-primary-300) !important;
+  box-shadow: 0 4px 15px rgba(77, 166, 255, 0.1) !important;
+}
+
+[data-theme="dark"] .newsCarousel .alice-carousel__dots-item:not(.__custom):hover {
+  background: linear-gradient(45deg, #1a8dff 0%, #ff6b35 50%, #1a8dff 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 3s ease infinite !important;
+  border-color: transparent !important;
+  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.8) !important;
+}
+
+[data-theme="dark"] .newsCarousel .alice-carousel__dots-item:not(.__custom).__active {
+  background: var(--ifm-primary-300) !important;
+  box-shadow: 0 4px 20px rgba(77, 166, 255, 0.3), 0 0 20px var(--ifm-accent) !important;
+  border-color: var(--ifm-accent) !important;
+}
+
+/* Mobile Responsive */
+@media (max-width: 996px) {
+  .newsSection {
+    padding: 3rem 0;
+  }
+
+  .newsTitle {
+    font-size: var(--ifm-font-size-2xl);
+  }
+
+  .newsCardTitle {
+    font-size: var(--ifm-font-size-base);
+  }
+
+  .newsSubtitle {
+    font-size: var(--ifm-font-size-base);
+  }
+
+  .newsImageContainer {
+    height: 160px;
+  }
+
+  .newsContent {
+    padding: 1rem;
+    height: calc(100% - 160px);
+  }
+}
+
+@media (max-width: 576px) {
+  .newsHeader {
+    margin-bottom: 2rem;
+  }
+
+  .newsTitle {
+    font-size: var(--ifm-font-size-xl);
+  }
+
+  .newsCardTitle {
+    font-size: var(--ifm-font-size-sm);
+  }
+
+  .newsCard {
+    margin: 0 0.25rem;
+  }
+
+  .newsImageContainer {
+    height: 140px;
+  }
+
+  .newsContent {
+    height: calc(100% - 140px);
+  }
+}
\ No newline at end of file
diff --git a/src/components/InformationCNOE/index.js b/src/components/InformationCNOE/index.js
deleted file mode 100644
index 708542d92..000000000
--- a/src/components/InformationCNOE/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-import Link from "@docusaurus/Link";
-import HelpIcon from '@mui/icons-material/Help';
-
-const CNOESection = () => {
-  return (
-    <section className={styles.cnoeSection}>
-      <div className={styles.container}>
-        <div className={styles.content}>
-          <p className={styles.description}>
-          CNOE is an open community collaboration with the goal of helping facilitate platform engineering through the sharing of guidance, tooling, and internal developer platform (IDP) reference architectures. 
-          </p>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default CNOESection;
\ No newline at end of file
diff --git a/src/components/InformationCNOE/styles.module.css b/src/components/InformationCNOE/styles.module.css
deleted file mode 100644
index dffcdc70f..000000000
--- a/src/components/InformationCNOE/styles.module.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.cnoeSection {
-  padding: 2rem 0;
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem 0;
-}
-
-.content {
-  text-align: center;
-}
-
-.title {
-  font-size: 38px;
-  text-align: left;
-}
-
-.description {
-  font-size: 30px;
-  text-align: left;
-}
-
-/* index.module.css */
-.learnMoreButton {
-  background-color: var(--ifm-color-neutral-lighter);
-  padding: 10px 20px;
-  border: none;
-  border-radius: 4px;
-}
diff --git a/src/components/InteractiveDiagram/index.js b/src/components/InteractiveDiagram/index.js
index 0571e499f..788a59288 100644
--- a/src/components/InteractiveDiagram/index.js
+++ b/src/components/InteractiveDiagram/index.js
@@ -21,7 +21,7 @@ export default function InteractiveDiagram() {
         setIsShow("none");
       }, 3000); // Closes after 3 seconds (adjust time as needed)
     }
-    
+
     // Cleanup function to clear timeout if component unmounts or isShow changes
     return () => {
       if (timeoutId) {
@@ -29,7 +29,7 @@ export default function InteractiveDiagram() {
       }
     };
   }, [isShow]);
-  
+
   return (
     <div className={styles.interactivediagramcontainer}>
       <div className={styles.diagramcontent}>
@@ -40,12 +40,17 @@ export default function InteractiveDiagram() {
               setIsShow("block");
               setPromptTitle("Deployment Targets");
               setPromptText(
-                parse(`
-                    <p>The runtime environments that product apps and services run on.
+                <div>
+                  <p>The runtime environments that product apps and services run on.
                     This includes static content or data published for distribution.</p>
-                    <br/>
-                    <b><a href="./capabilities#deployment-targets">Read More</a></b>
-                  `)
+                  <br />
+                  <button
+                    onClick={() => window.location.href = './capabilities#deployment-targets'}
+                    className={styles.readMoreButton}
+                  >
+                    Read More
+                  </button>
+                </div>
               );
             }}
           >
@@ -54,7 +59,7 @@ export default function InteractiveDiagram() {
         </div>
         <div className={styles.bottomrow}>
           <div className={styles.bottomleftcol}>
-              <p className={styles.labels}>Application</p>
+            <p className={styles.labels}>Application</p>
             <div className={styles.bottomleftcolright}>
               <div
                 className={styles.cell}
@@ -62,11 +67,16 @@ export default function InteractiveDiagram() {
                   setIsShow("block");
                   setPromptTitle("Packaging / Templating");
                   setPromptText(
-                    parse(`
-                    <p>Ensures the delivery of a packaged up and functional set of software or tools.</p>
-                    <br/>
-                    <b><a href="./capabilities#packaging-and-templating">Read More</a></b>
-                  `)
+                    <div>
+                      <p>Ensures the delivery of a packaged up and functional set of software or tools.</p>
+                      <br />
+                      <button
+                        onClick={() => window.location.href = './capabilities#packaging-and-templating'}
+                        className={styles.readMoreButton}
+                      >
+                        Read More
+                      </button>
+                    </div>
                   );
                 }}
               >
@@ -78,11 +88,16 @@ export default function InteractiveDiagram() {
                   setIsShow("block");
                   setPromptTitle("Code Repository");
                   setPromptText(
-                    parse(`
-                    <p>Enable developers to collaborate on code asynchronously while keeping historical lineage of changes.</p>
-                    <br/>
-                    <b><a href="./capabilities#code-repositories">Read More</a></b>
-                  `)
+                    <div>
+                      <p>Enable developers to collaborate on code asynchronously while keeping historical lineage of changes.</p>
+                      <br />
+                      <button
+                        onClick={() => window.location.href = './capabilities#code-repositories'}
+                        className={styles.readMoreButton}
+                      >
+                        Read More
+                      </button>
+                    </div>
                   );
                 }}
               >
@@ -94,11 +109,16 @@ export default function InteractiveDiagram() {
                   setIsShow("block");
                   setPromptTitle("Config Repository");
                   setPromptText(
-                    parse(`
-                    <p>Canonical data store for application configuration.</p>
-                    <br/>
-                    <b><a href="./capabilities#config-repositories">Read More</a></b>
-                  `)
+                    <div>
+                      <p>Canonical data store for application configuration.</p>
+                      <br />
+                      <button
+                        onClick={() => window.location.href = './capabilities#config-repositories'}
+                        className={styles.readMoreButton}
+                      >
+                        Read More
+                      </button>
+                    </div>
                   );
                 }}
               >
@@ -110,12 +130,16 @@ export default function InteractiveDiagram() {
                   setIsShow("block");
                   setPromptTitle("Artifact Registries");
                   setPromptText(
-                    parse(`
-                    Preserves a signed, accessible, and traceable list of packaged components.
-                    <br/>
-                    <br/>
-                    <b><a href="./capabilities#artifact-registries">Read More</a></b>
-                  `)
+                    <div>
+                      <p>Preserves a signed, accessible, and traceable list of packaged components.</p>
+                      <br />
+                      <button
+                        onClick={() => window.location.href = './capabilities#artifact-registries'}
+                        className={styles.readMoreButton}
+                      >
+                        Read More
+                      </button>
+                    </div>
                   );
                 }}
               >
@@ -127,11 +151,16 @@ export default function InteractiveDiagram() {
                   setIsShow("block");
                   setPromptTitle("Secret Repository");
                   setPromptText(
-                    parse(`
-                    <p>Secrets repositories are secure long term storage locations for sensitive data.</p>
-                    <br/>
-                    <b><a href="./capabilities#secret-repositories">Read More</a></b>
-                  `)
+                    <div>
+                      <p>Secrets repositories are secure long term storage locations for sensitive data.</p>
+                      <br />
+                      <button
+                        onClick={() => window.location.href = './capabilities#secret-repositories'}
+                        className={styles.readMoreButton}
+                      >
+                        Read More
+                      </button>
+                    </div>
                   );
                 }}
               >
@@ -144,19 +173,24 @@ export default function InteractiveDiagram() {
                 setIsShow("block");
                 setPromptTitle("Signing");
                 setPromptText(
-                  parse(`
+                  <div>
                     <p>Cryptographic signing of artifacts to allow for verification of the consistency and integrity of the data they contain.</p>
-                    <br/>
-                    <b><a href="./capabilities#signing">Read More</a></b>
-                `)
+                    <br />
+                    <button
+                      onClick={() => window.location.href = './capabilities#signing'}
+                      className={styles.readMoreButton}
+                    >
+                      Read More
+                    </button>
+                  </div>
                 );
               }}
             >
               Signing
             </div>
           </div>
-        <div className={styles.bottomrightcol}>
-          <p className={styles.labels}>Operation</p>
+          <div className={styles.bottomrightcol}>
+            <p className={styles.labels}>Operation</p>
             <div className={styles.bottomrightcolleft}>
               <div
                 className={styles.cell}
@@ -164,11 +198,16 @@ export default function InteractiveDiagram() {
                   setIsShow("block");
                   setPromptTitle("Developer Portal");
                   setPromptText(
-                    parse(`
-                    <p>Software catalog of all components, systems and domains.</p>
-                    <br/>
-                    <b><a href="./capabilities#developer-portal">Read More</a></b>
-                  `)
+                    <div>
+                      <p>Software catalog of all components, systems and domains.</p>
+                      <br />
+                      <button
+                        onClick={() => window.location.href = './capabilities#developer-portal'}
+                        className={styles.readMoreButton}
+                      >
+                        Read More
+                      </button>
+                    </div>
                   );
                 }}
               >
@@ -180,11 +219,16 @@ export default function InteractiveDiagram() {
                   setIsShow("block");
                   setPromptTitle("Identity and Access");
                   setPromptText(
-                    parse(`
-                    <p>A service that can be used to wire up Authentication and Authorization in a common well understood manner.</p>
-                    <br/>
-                    <b><a href="./capabilities#identity-and-access">Read More</a></b>
-                  `)
+                    <div>
+                      <p>A service that can be used to wire up Authentication and Authorization in a common well understood manner.</p>
+                      <br />
+                      <button
+                        onClick={() => window.location.href = './capabilities#identity-and-access'}
+                        className={styles.readMoreButton}
+                      >
+                        Read More
+                      </button>
+                    </div>
                   );
                 }}
               >
@@ -197,11 +241,16 @@ export default function InteractiveDiagram() {
                     setIsShow("block");
                     setPromptTitle("Infra as Code");
                     setPromptText(
-                      parse(`
-                    <p>Tooling required to spin up infrastructure resources for a given application.</p>
-                    <br/>
-                    <b><a href="./capabilities#infrastructure-as-code-iac">Read More</a></b>
-                    `)
+                      <div>
+                        <p>Tooling required to spin up infrastructure resources for a given application.</p>
+                        <br />
+                        <button
+                          onClick={() => window.location.href = './capabilities#infrastructure-as-code-iac'}
+                          className={styles.readMoreButton}
+                        >
+                          Read More
+                        </button>
+                      </div>
                     );
                   }}
                 >
@@ -213,11 +262,16 @@ export default function InteractiveDiagram() {
                     setIsShow("block");
                     setPromptTitle("Continuous Delivery");
                     setPromptText(
-                      parse(`
-                    <p>CD gets infrastructure and application resources into a state, ready for receiving production workload.</p>
-                    <br/>
-                    <b><a href="./capabilities#continuous-delivery-cd">Read More</a></b>
-                    `)
+                      <div>
+                        <p>CD gets infrastructure and application resources into a state, ready for receiving production workload.</p>
+                        <br />
+                        <button
+                          onClick={() => window.location.href = './capabilities#continuous-delivery-cd'}
+                          className={styles.readMoreButton}
+                        >
+                          Read More
+                        </button>
+                      </div>
                     );
                   }}
                 >
@@ -229,11 +283,16 @@ export default function InteractiveDiagram() {
                     setIsShow("block");
                     setPromptTitle("Workflow Orchestration");
                     setPromptText(
-                      parse(`
-                    <p>The orchestration process to get applications ready for delivery.</p>
-                    <br/>
-                    <b><a href="./capabilities#workflow-orchestration">Read More</a></b>
-                    `)
+                      <div>
+                        <p>The orchestration process to get applications ready for delivery.</p>
+                        <br />
+                        <button
+                          onClick={() => window.location.href = './capabilities#workflow-orchestration'}
+                          className={styles.readMoreButton}
+                        >
+                          Read More
+                        </button>
+                      </div>
                     );
                   }}
                 >
@@ -245,11 +304,16 @@ export default function InteractiveDiagram() {
                     setIsShow("block");
                     setPromptTitle("Service Discovery");
                     setPromptText(
-                      parse(`
-                    <p>Allows for the dynamic lookup or querying of service details.</p>
-                    <br/>
-                    <b><a href="./capabilities#service-discovery">Read More</a></b>
-                    `)
+                      <div>
+                        <p>Allows for the dynamic lookup or querying of service details.</p>
+                        <br />
+                        <button
+                          onClick={() => window.location.href = './capabilities#service-discovery'}
+                          className={styles.readMoreButton}
+                        >
+                          Read More
+                        </button>
+                      </div>
                     );
                   }}
                 >
@@ -262,11 +326,16 @@ export default function InteractiveDiagram() {
                   setIsShow("block");
                   setPromptTitle("Secret Management");
                   setPromptText(
-                    parse(`
-                    <p>Secrets Management manages the life cycle and distribution of secrets safely and securely.</p>
-                    <br/>
-                    <b><a href="./capabilities#secret-management">Read More</a></b>
-                  `)
+                    <div>
+                      <p>Secrets Management manages the life cycle and distribution of secrets safely and securely.</p>
+                      <br />
+                      <button
+                        onClick={() => window.location.href = './capabilities#secret-management'}
+                        className={styles.readMoreButton}
+                      >
+                        Read More
+                      </button>
+                    </div>
                   );
                 }}
               >
@@ -278,11 +347,16 @@ export default function InteractiveDiagram() {
                   setIsShow("block");
                   setPromptTitle("Validation");
                   setPromptText(
-                    parse(`
-                    <p>Validation ensures that API specifications are abided. Can be used in conjunction with admission control to enable security controls</p>
-                    <br/>
-                    <b><a href="./capabilities#validation">Read More</a></b>
-                  `)
+                    <div>
+                      <p>Validation ensures that API specifications are abided. Can be used in conjunction with admission control to enable security controls</p>
+                      <br />
+                      <button
+                        onClick={() => window.location.href = './capabilities#validation'}
+                        className={styles.readMoreButton}
+                      >
+                        Read More
+                      </button>
+                    </div>
                   );
                 }}
               >
@@ -294,11 +368,16 @@ export default function InteractiveDiagram() {
                   setIsShow("block");
                   setPromptTitle("Compute Platform");
                   setPromptText(
-                    parse(`
-                    <p>The runtime used by the platform. Hosts the platform capabilities or their integration points.</p>
-                    <br/>
-                    <b><a href="./capabilities#compute-platform">Read More</a></b>
-                  `)
+                    <div>
+                      <p>The runtime used by the platform. Hosts the platform capabilities or their integration points.</p>
+                      <br />
+                      <button
+                        onClick={() => window.location.href = './capabilities#compute-platform'}
+                        className={styles.readMoreButton}
+                      >
+                        Read More
+                      </button>
+                    </div>
                   );
                 }}
               >
@@ -311,11 +390,16 @@ export default function InteractiveDiagram() {
                 setIsShow("block");
                 setPromptTitle("Observability");
                 setPromptText(
-                  parse(`
+                  <div>
                     <p>Monitors, reports, and alerts on the overall well-being of the system.</p>
-                    <br/>
-                    <b><a href="./capabilities#observability">Read More</a></b>
-                  `)
+                    <br />
+                    <button
+                      onClick={() => window.location.href = './capabilities#observability'}
+                      className={styles.readMoreButton}
+                    >
+                      Read More
+                    </button>
+                  </div>
                 );
               }}
             >
diff --git a/src/components/InteractiveDiagram/styles.module.css b/src/components/InteractiveDiagram/styles.module.css
index b1b237813..92c7acf78 100644
--- a/src/components/InteractiveDiagram/styles.module.css
+++ b/src/components/InteractiveDiagram/styles.module.css
@@ -1,13 +1,12 @@
 .interactivediagramcontainer {
   position: relative;
-  left: 0;
-  width: 100vw;
+  width: 100%;
   background-color: var(--ifm-background-color);
   text-align: center;
   padding-top: 15px;
   padding-bottom: 15px;
   font-weight: bold;
-  color: var(--ifm-color-neutral-darkest);
+  color: var(--ifm-color-neutral-lightest);
   min-height: 405px;
   max-height: 465px;
   border-color: var(--ifm-color-primary-lightest);
@@ -20,7 +19,7 @@
   left: 15%;
   width: 70vw;
   height: 435px;
-  background-color: rgba(var(--ifm-color-neutral-light-rgb), 0.8);
+  background-color: none;
   z-index: 100;
   border-radius: 8px;
 }
@@ -31,20 +30,35 @@
   flex-direction: column;
   width: 50%;
   left: 25%;
-  height: 50%;
   top: 20%;
-  background-color: var(--ifm-color-neutral-lightest);
+  background-color: var(--ifm-primary-50);
   border-radius: 8px;
-  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
+  box-shadow: 0px 0px 10px 0px var(--ifm-accent);
+  max-height: 60%;
   overflow-y: auto;
 }
+
+.readMoreButton {
+  background: var(--ifm-primary-500);
+  color: var(--ifm-color-neutral-lightest);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: background-color 0.2s;
+}
+
+.readMoreButton:hover {
+  background: var(--ifm-accent);
+}
+
 .closeIcon {
   text-align: center;
   width: 25px;
   cursor: pointer;
 }
 
-.closeIcon > path {
+.closeIcon>path {
   fill: var(--ifm-color-neutral-darkest);
 }
 
@@ -90,15 +104,17 @@
   min-width: 865px;
   border-radius: 8px;
 }
+
 .diagramcontent:hover {
   cursor: pointer;
 }
 
 .cell {
-  background-color: var(--ifm-color-neutral-lighter);
+  background-color: var(--ifm-primary-500);
   padding: 2px;
   border-radius: 8px;
 }
+
 .cellmobile {
   background-color: var(--ifm-color-neutral-lighter);
   padding: 2px;
@@ -120,6 +136,7 @@
   white-space: nowrap;
   min-height: 290px;
 }
+
 .diagramcontent .bottomrow .bottomleftcol {
   display: inline-block;
   width: 40%;
@@ -144,7 +161,7 @@
   padding-right: 5px;
   margin-left: 10px;
   border-radius: 8px;
-  background-color: var(--ifm-color-neutral-lighter);
+  background-color: var(--ifm-primary-500);
 }
 
 .diagramcontent .bottomrow .bottomleftcol .bottomleftcolright .cell {
@@ -176,6 +193,7 @@
   border-radius: 8px;
   border-color: var(--ifm-color-primary-lightest);
 }
+
 .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft {
   display: inline-block;
   height: 100%;
@@ -195,7 +213,7 @@
   margin-right: 10px;
   max-height: 268px;
   border-radius: 8px;
-  background-color: var(--ifm-color-neutral-lighter);
+  background-color: var(--ifm-primary-500);
   margin-bottom: 8px;
 }
 
@@ -206,6 +224,7 @@
   margin-bottom: 5px;
   border-radius: 8px;
 }
+
 .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .cellmobile {
   width: 98.5%;
   height: 14%;
@@ -213,10 +232,12 @@
   margin-bottom: 5px;
   border-radius: 8px;
 }
+
 .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .rowcell {
   width: 100%;
   margin-left: -4px;
 }
+
 .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .rowcell .cell {
   width: 24%;
   height: 100%;
@@ -226,12 +247,8 @@
   border-radius: 8px;
   padding: 2px;
 }
-.diagramcontent
-  .bottomrow
-  .bottomrightcol
-  .bottomrightcolleft
-  .rowcell
-  .cellmobile {
+
+.diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .rowcell .cellmobile {
   width: 24%;
   height: 100%;
   display: inline-block;
@@ -239,7 +256,14 @@
   font-size: 16px;
   border-radius: 8px;
   padding: 2px;
+  background-color: var(--ifm-primary-500);
+}
+
+.diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .rowcell .cellmobile:hover {
+  cursor: pointer;
+  background-color: var(--ifm-accent);
 }
+
 .endcell {
   width: 22.5%;
   padding: 2px;
@@ -249,8 +273,9 @@
   margin: 0px 4px;
   font-size: 16px;
   border-radius: 8px;
-  background-color: var(--ifm-color-neutral-lighter);
+  background-color: var(--ifm-primary-500);
 }
+
 .interactivediagramcontainer .Modal {
   all: unset;
   background-color: white;
@@ -258,32 +283,37 @@
   height: 20px;
   width: 50vw;
 }
+
 .endcell:hover {
   cursor: pointer;
-  background-color: var(--ifm-color-primary-lightest);
+  background-color: var(--ifm-accent);
   color: white;
 }
 
 .cell:hover {
   cursor: pointer;
-  background-color: var(--ifm-color-primary-lightest);
+  background-color: var(--ifm-accent);
   color: white;
 }
+
 .cellmobile:hover {
   cursor: pointer;
   background-color: var(--ifm-color-primary-lightest);
   color: white;
 }
+
 .diagramcontent .bottomrow .bottomleftcol .bottomleftcolleft:hover {
   cursor: pointer;
-  background-color: var(--ifm-color-primary-lightest);
+  background-color: var(--ifm-accent);
   color: white;
 }
+
 .diagramcontent .bottomrow .bottomrightcol .bottomrightcolright:hover {
   cursor: pointer;
-  background-color: var(--ifm-color-primary-lightest);
+  background-color: var(--ifm-accent);
   color: white;
 }
+
 .diagramcontent .labels {
   position: absolute;
   margin-top: -30px;
@@ -291,27 +321,31 @@
   text-transform: uppercase;
   font-size: 12px;
   font-weight: 600;
-  
-}
 
+}
 
 @media only screen and (max-width: 768px) {
+
   /* For mobile phones: */
   .interactivediagramcontainer {
     font-size: 10px;
     padding: 0px;
   }
+
   .diagramcontent {
     min-width: 390px;
     padding: 0px;
     width: 95vw;
   }
+
   .toprow {
     padding-top: 10px;
   }
+
   .rowcell {
     font-size: 10px;
   }
+
   .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .rowcell {
     width: 95%;
     margin-left: unset;
@@ -322,6 +356,7 @@
     width: unset;
     padding-right: 17px;
   }
+
   .diagramcontent .bottomrow .bottomrightcol {
     padding-left: 10px;
     margin-left: -2px;
@@ -333,12 +368,8 @@
     margin-left: 5px;
     margin-right: 7px;
   }
-  .diagramcontent
-    .bottomrow
-    .bottomrightcol
-    .bottomrightcolleft
-    .rowcell
-    .cell {
+
+  .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .rowcell .cell {
     width: 24%;
     height: 100%;
     display: inline-block;
@@ -347,12 +378,8 @@
     border-radius: 5px;
     padding: 2px;
   }
-  .diagramcontent
-    .bottomrow
-    .bottomrightcol
-    .bottomrightcolleft
-    .rowcell
-    .cellmobile {
+
+  .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft .rowcell .cellmobile {
     width: 28%;
     height: 100%;
     display: inline-block;
@@ -361,6 +388,7 @@
     border-radius: 5px;
     padding: 2px;
   }
+
   .endcell {
     width: 22.5%;
     padding: 2px;
@@ -372,6 +400,7 @@
     border-radius: 5px;
     background-color: var(--ifm-color-neutral-lighter);
   }
+
   .diagramcontent .bottomrow .bottomleftcol .bottomleftcolright {
     display: inline-block;
     height: 100%;
@@ -379,6 +408,7 @@
     overflow: hidden;
     border-top: none;
   }
+
   .diagramcontent .bottomrow .bottomrightcol .bottomrightcolright {
     display: inline-block;
     height: 88%;
@@ -393,6 +423,7 @@
     background-color: var(--ifm-color-neutral-lighter);
     margin-bottom: 33px;
   }
+
   .diagramcontent .bottomrow .bottomrightcol .bottomrightcolleft {
     display: inline-block;
     height: 85%;
@@ -400,6 +431,7 @@
     overflow: hidden;
     min-height: 267px;
   }
+
   .popUpPrompt {
     position: absolute;
     top: 15px;
@@ -410,6 +442,7 @@
     z-index: 100;
     border-radius: 8px;
   }
+
   .innerPromptBox {
     position: absolute;
     display: flex;
@@ -423,4 +456,4 @@
     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
     overflow-y: auto;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/MissionVision/index.js b/src/components/MissionVision/index.js
index b9ea61d31..0af943b36 100644
--- a/src/components/MissionVision/index.js
+++ b/src/components/MissionVision/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 
@@ -8,7 +8,7 @@ const FeatureList = [
     Svg: require('@site/static/img/mission.svg').default,
     description: (
       <>
-      CNOE aims at helping platform engineers build their IDPs <i>faster</i> and in a <i>more secure way</i> with best practices built in
+        CNOE aims at helping platform engineers build their IDPs <i>faster</i> and in a <i>more secure way</i> with best practices built in
       </>
     ),
   },
@@ -17,34 +17,72 @@ const FeatureList = [
     Svg: require('@site/static/img/vision.svg').default,
     description: (
       <>
-      CNOE strives to be the goto framework for leading software companies 
-      to build their cloud-native internal developer platform
+        CNOE strives to be the goto framework for leading software companies
+        to build their cloud-native internal developer platform
       </>
     ),
   },
 ];
 
-function Feature({Svg, title, description}) {
+function Feature({ Svg, title, description, index, isVisible }) {
   return (
-    <div className={clsx('row col')}>
-      <div className="col col--3 ">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--left col col--8">
-        <h3 className=''>{title}</h3>
-        <p className={styles.missionDesc}>{description}</p>
-      </div>
+    <div className={clsx(styles.missionVisionItem, isVisible && styles.visible)}>
+      <div className={styles.missionVisionCard}>
+        <div className={styles.iconSection}>
+          <div className={styles.iconContainer}>
+            <Svg className={styles.featureSvg} role="img" />
+            <div className={styles.iconGlow}></div>
+          </div>
+        </div>
+        <div className={styles.contentSection}>
+          <h3 className={styles.missionVisionTitle}>{title}</h3>
+          <p className={styles.missionVisionDescription}>{description}</p>
+        </div>
       </div>
+    </div>
   );
 }
 
 export default function MissionVision() {
+  const containerRef = useRef(null);
+  const [isVisible, setIsVisible] = React.useState(false);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && containerRef.current) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              setIsVisible(true);
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.2 }
+      );
+
+      observer.observe(containerRef.current);
+
+      return () => {
+        if (containerRef.current) {
+          observer.unobserve(containerRef.current);
+        }
+      };
+    }
+  }, []);
+
   return (
     <section className={styles.features}>
-      <div className="container ">
-        <div className="row col">
+      <div className="container">
+        <div className={styles.sectionHeader}>
+          <h2 className={styles.sectionTitle}>Our Purpose</h2>
+          <p className={styles.sectionSubtitle}>
+            Driving the future of internal developer platforms through community collaboration
+          </p>
+        </div>
+        <div ref={containerRef} className={styles.missionVisionGrid}>
           {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
+            <Feature key={idx} index={idx} isVisible={isVisible} {...props} />
           ))}
         </div>
       </div>
diff --git a/src/components/MissionVision/styles.module.css b/src/components/MissionVision/styles.module.css
index d4d819a9e..a07aa5250 100644
--- a/src/components/MissionVision/styles.module.css
+++ b/src/components/MissionVision/styles.module.css
@@ -1,19 +1,300 @@
+/* Modern MissionVision Component Styles */
 .features {
+  padding: 5rem 0;
+  background: linear-gradient(135deg,
+      var(--ifm-primary-50) 0%,
+      var(--ifm-primary-100) 25%,
+      var(--ifm-neutral-50) 50%,
+      var(--ifm-primary-100) 75%,
+      var(--ifm-primary-50) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+  position: relative;
+  overflow: hidden;
+}
+
+[data-theme="dark"] .features {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+}
+
+.features::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, transparent 0%, var(--ifm-primary-50) 50%, transparent 100%);
+  opacity: 0.3;
+}
+
+[data-theme="dark"] .features::before {
+  background: linear-gradient(135deg, transparent 0%, var(--ifm-primary-900) 50%, transparent 100%);
+  opacity: 0.2;
+}
+
+/* Section Header */
+.sectionHeader {
+  text-align: center;
+  margin-bottom: 4rem;
+  position: relative;
+  z-index: 2;
+}
+
+.sectionTitle {
+  font-size: var(--ifm-font-size-4xl);
+  font-weight: 700;
+  color: var(--ifm-neutral-900);
+  margin-bottom: 1rem;
+  letter-spacing: -0.02em;
+}
+
+[data-theme="dark"] .sectionTitle {
+  color: var(--ifm-neutral-100) !important;
+}
+
+.sectionSubtitle {
+  font-size: var(--ifm-font-size-xl);
+  color: var(--ifm-neutral-700);
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+[data-theme="dark"] .sectionSubtitle {
+  color: var(--ifm-neutral-400) !important;
+}
+
+/* Mission Vision Grid */
+.missionVisionGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 3rem;
+  max-width: 1000px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 2;
+}
+
+@media (min-width: 768px) {
+  .missionVisionGrid {
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+  }
+}
+
+/* Mission Vision Items */
+.missionVisionItem {
+  opacity: 0;
+  transform: translateY(40px);
+  transition: all 0.8s var(--ifm-easing-ease);
+}
+
+.missionVisionItem:nth-child(1) {
+  transition-delay: 0.2s;
+}
+
+.missionVisionItem:nth-child(2) {
+  transition-delay: 0.4s;
+}
+
+.missionVisionItem.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.missionVisionCard {
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 20px;
+  padding: 3rem 2.5rem;
+  height: 100%;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  box-shadow: var(--ifm-shadow-lg);
+  position: relative;
+  overflow: hidden;
+}
+
+[data-theme="dark"] .missionVisionCard {
+  background: rgba(30, 41, 59, 0.9) !important;
+  border: 1px solid rgba(71, 85, 105, 0.3) !important;
+}
+
+.missionVisionCard:hover {
+  transform: translateY(-8px);
+  box-shadow: var(--ifm-shadow-2xl);
+  border-color: var(--ifm-primary-200);
+}
+
+[data-theme="dark"] .missionVisionCard:hover {
+  border-color: var(--ifm-primary-600) !important;
+}
+
+.missionVisionCard::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: linear-gradient(90deg, var(--ifm-primary) 0%, var(--ifm-accent) 100%);
+  opacity: 0;
+  transition: opacity var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.missionVisionCard:hover::before {
+  opacity: 1;
+}
+
+/* Icon Section */
+.iconSection {
+  margin-bottom: 2rem;
   display: flex;
-  align-items: center;
-  padding: 4rem 0;
-  width: 100%;
-  margin-top: 60px;
+  justify-content: center;
+}
+
+.iconContainer {
+  position: relative;
+  display: inline-block;
 }
 
 .featureSvg {
-  /* color: var(--ifm-color-primary); */
-  height: 96px;
-  width: 96px;
+  height: 80px;
+  width: 80px;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  filter: drop-shadow(0 4px 8px rgba(0, 86, 140, 0.1));
+}
+
+.iconGlow {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 120px;
+  height: 120px;
+  background: radial-gradient(circle, rgba(0, 86, 140, 0.1) 0%, transparent 70%);
+  border-radius: 50%;
+  opacity: 0;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.missionVisionCard:hover .featureSvg {
+  transform: scale(1.1);
+  filter: drop-shadow(0 8px 16px rgba(0, 86, 140, 0.2));
 }
-.missionBg {
-  padding: 24px; 
+
+.missionVisionCard:hover .iconGlow {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1.2);
+}
+
+/* Content Section */
+.contentSection {
+  text-align: center;
+}
+
+.missionVisionTitle {
+  font-size: var(--ifm-font-size-2xl);
+  font-weight: 700;
+  color: var(--ifm-neutral-900);
+  margin-bottom: 1.5rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  position: relative;
+}
+
+[data-theme="dark"] .missionVisionTitle {
+  color: var(--ifm-neutral-100) !important;
+}
+
+.missionVisionTitle::after {
+  content: '';
+  position: absolute;
+  bottom: -0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, var(--ifm-primary) 0%, var(--ifm-accent) 100%);
+  border-radius: 2px;
 }
-.missionDesc {
+
+.missionVisionDescription {
+  font-size: var(--ifm-font-size-lg);
+  line-height: 1.7;
+  color: var(--ifm-neutral-700);
+  margin: 0;
   max-width: 400px;
+  margin: 0 auto;
+}
+
+[data-theme="dark"] .missionVisionDescription {
+  color: var(--ifm-neutral-300) !important;
+}
+
+/* Mobile Responsive */
+@media (max-width: 996px) {
+  .features {
+    padding: 3rem 0;
+  }
+
+  .sectionTitle {
+    font-size: var(--ifm-font-size-3xl);
+  }
+
+  .sectionSubtitle {
+    font-size: var(--ifm-font-size-lg);
+  }
+
+  .missionVisionGrid {
+    gap: 2rem;
+  }
+
+  .missionVisionCard {
+    padding: 2rem 1.5rem;
+  }
+
+  .featureSvg {
+    height: 64px;
+    width: 64px;
+  }
+
+  .missionVisionTitle {
+    font-size: var(--ifm-font-size-xl);
+  }
+
+  .missionVisionDescription {
+    font-size: var(--ifm-font-size-base);
+  }
+}
+
+@media (max-width: 576px) {
+  .sectionHeader {
+    margin-bottom: 2rem;
+  }
+
+  .sectionTitle {
+    font-size: var(--ifm-font-size-2xl);
+  }
+
+  .missionVisionCard {
+    padding: 1.5rem 1rem;
+  }
+
+  .missionVisionTitle {
+    font-size: var(--ifm-font-size-lg);
+  }
+
+  .missionVisionDescription {
+    font-size: var(--ifm-font-size-sm);
+  }
 }
\ No newline at end of file
diff --git a/src/components/ValueProposition/index.js b/src/components/ValueProposition/index.js
index 427984a99..d4561e6a8 100644
--- a/src/components/ValueProposition/index.js
+++ b/src/components/ValueProposition/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 
@@ -9,7 +9,7 @@ const FeatureList = [
     description: (
       <>
         CNOE is developed around open source cloud native projects that are deemed
-      to be useful in helping companies build their internal developer tooling.
+        to be useful in helping companies build their internal developer tooling.
       </>
     ),
   },
@@ -19,7 +19,7 @@ const FeatureList = [
     description: (
       <>
         CNOE relies on community consensus on selecting and configuring
-      open source cloud native projects as part of the internal developer platform recommendations.
+        open source cloud native projects as part of the internal developer platform recommendations.
       </>
     ),
   },
@@ -28,34 +28,78 @@ const FeatureList = [
     Svg: require('@site/static/img/modular.svg').default,
     description: (
       <>
-      CNOE aims to allow its users to pick and choose what core technologies they want to 
-      choose for their internal developer platform.
+        CNOE aims to allow its users to pick and choose what core technologies they want to
+        choose for their internal developer platform.
       </>
     ),
   },
 ];
 
-function Feature({Svg, title, description}) {
+function Feature({ Svg, title, description, index }) {
   return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
+    <div className={clsx('col col--4', styles.featureCard, 'cnoe-stagger-item')}>
+      <div className={styles.featureCardInner}>
+        <div className={styles.featureIconContainer}>
+          <Svg className={styles.featureSvg} role="img" />
+          <div className={styles.featureIconOverlay}></div>
+        </div>
+        <div className={styles.featureContent}>
+          <h3 className={styles.featureTitle}>{title}</h3>
+          <p className={styles.featureDescription}>{description}</p>
+        </div>
       </div>
     </div>
   );
 }
 
-export default function HomepageFeatures() {
+export default function ValueProposition() {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    // Initialize staggered animations for feature cards
+    if (typeof window !== 'undefined' && containerRef.current) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              const cards = entry.target.querySelectorAll('.cnoe-stagger-item');
+              cards.forEach((card, index) => {
+                setTimeout(() => {
+                  card.classList.add('cnoe-animate-visible');
+                }, index * 150);
+              });
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.1 }
+      );
+
+      observer.observe(containerRef.current);
+
+      return () => {
+        if (containerRef.current) {
+          observer.unobserve(containerRef.current);
+        }
+      };
+    }
+  }, []);
+
   return (
     <section className={styles.features}>
       <div className="container">
-        <div className="row padding-top--lg">
+        <div className={styles.sectionHeader}>
+          <h2 className={styles.sectionTitle}>Why CNOE?</h2>
+          <p className={styles.sectionSubtitle}>
+            To share proven principles of building robust internal developer platforms
+          </p>
+        </div>
+        <div
+          ref={containerRef}
+          className={clsx("row", styles.featuresGrid, "cnoe-stagger-container")}
+        >
           {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
+            <Feature key={idx} index={idx} {...props} />
           ))}
         </div>
       </div>
diff --git a/src/components/ValueProposition/styles.module.css b/src/components/ValueProposition/styles.module.css
index 5cfe40a4f..7a5adeacf 100644
--- a/src/components/ValueProposition/styles.module.css
+++ b/src/components/ValueProposition/styles.module.css
@@ -1,13 +1,257 @@
+/* Modern ValueProposition Component Styles */
 .features {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin-bottom: 24px;
-  background-color: var(--ifm-color-neutral-lighter);
+  padding: 5rem 0;
+  background: linear-gradient(135deg,
+      var(--ifm-primary-50) 0%,
+      var(--ifm-primary-100) 25%,
+      var(--ifm-neutral-50) 50%,
+      var(--ifm-primary-100) 75%,
+      var(--ifm-primary-50) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+  position: relative;
+  overflow: hidden;
+}
+
+[data-theme="dark"] .features {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+}
+
+.features::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23e2e8f0" fill-opacity="0.1"><circle cx="30" cy="30" r="1"/></g></svg>') repeat;
+  opacity: 0.5;
+}
+
+[data-theme="dark"] .features::before {
+  background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23475569" fill-opacity="0.1"><circle cx="30" cy="30" r="1"/></g></svg>') repeat;
+}
+
+/* Section Header */
+.sectionHeader {
+  text-align: center;
+  margin-bottom: 4rem;
+  position: relative;
+  z-index: 2;
+}
+
+.sectionTitle {
+  font-size: var(--ifm-font-size-4xl);
+  font-weight: 700;
+  color: var(--ifm-neutral-900);
+  margin-bottom: 1rem;
+  letter-spacing: -0.02em;
+}
+
+[data-theme="dark"] .sectionTitle {
+  color: var(--ifm-neutral-100) !important;
+}
+
+.sectionSubtitle {
+  font-size: var(--ifm-font-size-xl);
+  color: var(--ifm-neutral-700);
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+[data-theme="dark"] .sectionSubtitle {
+  color: var(--ifm-neutral-400) !important;
+}
+
+/* Features Grid */
+.featuresGrid {
+  position: relative;
+  z-index: 2;
+}
+
+/* Feature Cards */
+.featureCard {
+  margin-bottom: 2rem;
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 0.6s var(--ifm-easing-ease);
+}
+
+.featureCard.cnoe-animate-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.featureCardInner {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  padding: 2.5rem 2rem;
+  height: 100%;
+  text-align: center;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  box-shadow: var(--ifm-shadow-lg);
+  position: relative;
+  overflow: hidden;
+}
+
+[data-theme="dark"] .featureCardInner {
+  background: rgba(30, 41, 59, 0.8) !important;
+  border: 1px solid rgba(71, 85, 105, 0.3) !important;
+}
+
+.featureCardInner:hover {
+  transform: translateY(-8px);
+  box-shadow: var(--ifm-shadow-2xl);
+  border-color: var(--ifm-primary-200);
+}
+
+[data-theme="dark"] .featureCardInner:hover {
+  border-color: var(--ifm-primary-600) !important;
+}
+
+.featureCardInner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: linear-gradient(90deg, var(--ifm-primary) 0%, var(--ifm-accent) 100%);
+  opacity: 0;
+  transition: opacity var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.featureCardInner:hover::before {
+  opacity: 1;
+}
+
+/* Feature Icon */
+.featureIconContainer {
+  position: relative;
+  display: inline-block;
+  margin-bottom: 2rem;
 }
 
 .featureSvg {
-  height: 96px;
-  width: 96px;
-  margin-bottom: 24px;
+  height: 80px;
+  width: 80px;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  filter: drop-shadow(0 4px 8px rgba(0, 86, 140, 0.1));
+}
+
+.featureIconOverlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100px;
+  height: 100px;
+  background: radial-gradient(circle, rgba(0, 86, 140, 0.1) 0%, transparent 70%);
+  border-radius: 50%;
+  opacity: 0;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.featureCardInner:hover .featureSvg {
+  transform: scale(1.1);
+  filter: drop-shadow(0 8px 16px rgba(0, 86, 140, 0.2));
+}
+
+.featureCardInner:hover .featureIconOverlay {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1.2);
+}
+
+
+.featureTitle {
+  font-size: var(--ifm-font-size-lg);
+  font-weight: 700;
+  color: var(--ifm-neutral-900);
+  margin-bottom: 1.5rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.featureTitle::after {
+  content: '';
+  position: absolute;
+  bottom: 10rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, var(--ifm-primary) 0%, var(--ifm-accent) 100%);
+  border-radius: 2px;
+}
+
+[data-theme="dark"] .featureTitle {
+  color: var(--ifm-neutral-100) !important;
+}
+
+.featureDescription {
+  font-size: var(--ifm-font-size-base);
+  line-height: 1.6;
+  color: var(--ifm-neutral-700);
+  margin: 0 auto;
+}
+
+[data-theme="dark"] .featureDescription {
+  color: var(--ifm-neutral-300) !important;
+}
+
+/* Mobile Responsive */
+@media (max-width: 996px) {
+  .features {
+    padding: 3rem 0;
+  }
+  
+  .sectionTitle {
+    font-size: var(--ifm-font-size-3xl);
+  }
+  
+  .sectionSubtitle {
+    font-size: var(--ifm-font-size-lg);
+  }
+  
+  .featureCardInner {
+    padding: 2rem 1.5rem;
+  }
+  
+  .featureSvg {
+    height: 64px;
+    width: 64px;
+  }
+}
+
+@media (max-width: 576px) {
+  .sectionHeader {
+    margin-bottom: 2rem;
+  }
+  
+  .sectionTitle {
+    font-size: var(--ifm-font-size-2xl);
+  }
+  
+  .featureCardInner {
+    padding: 1.5rem 1rem;
+  }
+  
+  .featureTitle {
+    font-size: var(--ifm-font-size-base);
+  }
+  
+  .featureDescription {
+    font-size: var(--ifm-font-size-sm);
+  }
 }
diff --git a/src/css/custom.css b/src/css/custom.css
index eec7701d8..3d5ad7da5 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -4,34 +4,137 @@
  * work well for content-centric websites.
  */
 
-/* You can override the default Infima variables here. */
+/* Import Inter font family for modern typography */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+
+/* CNOE Modern Design System - CNOE Brand Color Palette */
 :root {
-  --ifm-color-primary: #00568c;
-  --ifm-color-primary-dark: #004d7e;
-  --ifm-color-primary-darker: #004169;
-  --ifm-color-primary-darkest: #003454;
-  --ifm-color-primary-light: #005f9a;
-  --ifm-color-primary-lighter: #006caf;
-  --ifm-color-primary-lightest: #0078c4;
-
-  --ifm-color-neutral: #7b7b7b;
-  --ifm-color-neutral-dark: #555555;
-  --ifm-color-neutral-darker: #434343;
-  --ifm-color-neutral-darkest: #262626;
-  --ifm-color-neutral-light: #c4c4c4;
-  --ifm-color-neutral-lighter: #dfdfdf;
-  --ifm-color-neutral-lightest: #f9f9f9;
+  /* Primary Blue Palette - Based on CNOE Logo */
+  --ifm-primary: #00568c;
+  /* Primary Color - CNOE Logo Blue */
+  --ifm-primary-dark: #004a7a;
+  /* Dark Primary Color */
+  --ifm-primary-light: #4da6ff;
+  /* Light Primary Color */
+  --ifm-primary-50: #e6f2ff;
+  --ifm-primary-100: #b3d9ff;
+  --ifm-primary-200: #80c0ff;
+  --ifm-primary-300: #4da6ff;
+  --ifm-primary-400: #1a8dff;
+  --ifm-primary-500: #00568c;
+  --ifm-primary-600: #004a7a;
+  --ifm-primary-700: #003d68;
+  --ifm-primary-800: #003156;
+  --ifm-primary-900: #002444;
+
+  /* Accent Orange Palette */
+  --ifm-accent: #FF9800;
+  /* Accent Color */
+  --ifm-accent-light: #FFB74D;
+  --ifm-accent-dark: #F57C00;
+  --ifm-accent-50: #FFF3E0;
+  --ifm-accent-100: #FFE0B2;
+  --ifm-accent-200: #FFCC80;
+  --ifm-accent-300: #FFB74D;
+  --ifm-accent-400: #FFA726;
+  --ifm-accent-500: #FF9800;
+  --ifm-accent-600: #FB8C00;
+  --ifm-accent-700: #F57C00;
+  --ifm-accent-800: #EF6C00;
+  --ifm-accent-900: #E65100;
+
+  /* Neutral Palette */
+  --ifm-neutral-white: #FFFFFF;
+  /* Text/Icons */
+  --ifm-neutral-50: #FAFAFA;
+  --ifm-neutral-100: #F5F5F5;
+  --ifm-neutral-200: #EEEEEE;
+  --ifm-neutral-300: #E0E0E0;
+  --ifm-neutral-400: #BDBDBD;
+  /* Divider Color */
+  --ifm-neutral-500: #9E9E9E;
+  --ifm-neutral-600: #757575;
+  /* Secondary Text */
+  --ifm-neutral-700: #616161;
+  --ifm-neutral-800: #424242;
+  --ifm-neutral-900: #212121;
+  /* Primary Text */
+
+  /* Semantic Colors */
+  --ifm-success: #4CAF50;
+  --ifm-warning: #FF9800;
+  --ifm-error: #F44336;
+  --ifm-info: #2196F3;
+
+  /* Typography Scale */
+  --ifm-font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+  --ifm-font-size-xs: 0.75rem;
+  --ifm-font-size-sm: 0.875rem;
+  --ifm-font-size-base: 1rem;
+  --ifm-font-size-lg: 1.125rem;
+  --ifm-font-size-xl: 1.25rem;
+  --ifm-font-size-2xl: 1.5rem;
+  --ifm-font-size-3xl: 1.875rem;
+  --ifm-font-size-4xl: 2.25rem;
+  --ifm-font-size-5xl: 3rem;
+
+  /* Animation System */
+  --ifm-duration-fast: 0.2s;
+  --ifm-duration-normal: 0.3s;
+  --ifm-duration-slow: 0.5s;
+  --ifm-duration-slower: 0.8s;
+  --ifm-duration-slowest: 1.4s;
+
+  --ifm-easing-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --ifm-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ifm-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ifm-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Synchronized Gradient Animation */
+  --cnoe-gradient-animation: cnoe-gradient-shift 15s ease infinite;
+
+  /* Shadow System */
+  --ifm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --ifm-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --ifm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --ifm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --ifm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --ifm-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --ifm-shadow-primary: 0 10px 25px rgba(0, 86, 140, 0.15);
+  --ifm-shadow-primary-lg: 0 20px 40px rgba(0, 86, 140, 0.2);
+
+  /* Docusaurus Integration - Map CNOE colors to Infima variables */
+  --ifm-color-primary: var(--ifm-primary);
+  --ifm-color-primary-dark: var(--ifm-primary-600);
+  --ifm-color-primary-darker: var(--ifm-primary-700);
+  --ifm-color-primary-darkest: var(--ifm-primary-800);
+  --ifm-color-primary-light: var(--ifm-primary-400);
+  --ifm-color-primary-lighter: var(--ifm-primary-300);
+  --ifm-color-primary-lightest: var(--ifm-primary-200);
+
+  --ifm-color-neutral: var(--ifm-neutral-500);
+  --ifm-color-neutral-dark: var(--ifm-neutral-600);
+  --ifm-color-neutral-darker: var(--ifm-neutral-700);
+  --ifm-color-neutral-darkest: var(--ifm-neutral-800);
+  --ifm-color-neutral-light: var(--ifm-neutral-400);
+  --ifm-color-neutral-lighter: var(--ifm-neutral-100);
+  --ifm-color-neutral-lightest: var(--ifm-neutral-50);
 
   /* Hex codes for rgba opacity with variables */
-  --ifm-color-neutral-light-rgb: 196, 196, 196;
+  --ifm-color-neutral-light-rgb: 189, 189, 189;
 
   --ifm-color-black: #000000;
   --ifm-color-white: #fff;
 
+  /* Typography Updates */
+  --ifm-font-family-base: var(--ifm-font-family);
+  --ifm-font-family-monospace: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
   --ifm-code-font-size: 95%;
 
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 
+  /* Radar Colors */
   --ifm-color-radar-opeartion: #3c6ead;
   --ifm-color-radar-application: #2e7d32;
   --ifm-color-radar-security: #d32f2f;
@@ -43,40 +146,73 @@
   --ifm-image-portal: url("../../static/img/logo.png");
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
+/* Dark Theme - Enhanced with CNOE Color System */
 [data-theme="dark"] {
-  /* --ifm-color-primary: #35b4e6;
-  --ifm-color-primary-dark: #1cabe3;
-  --ifm-color-primary-darker: #178ebd;
-  --ifm-color-primary-darkest: #137297;
-  --ifm-color-primary-light: #4ebde9;
-  --ifm-color-primary-lighter: #74cbee;
-  --ifm-color-primary-lightest: #9ad9f2; */
-
-  --ifm-color-primary-lightest: #00568c;
-  --ifm-color-primary-lighter: #004d7e;
-  --ifm-color-primary-light: #004169;
-  --ifm-color-primary-darkest: #003454;
-  --ifm-color-primary-darker: #005f9a;
-  --ifm-color-primary-dark: #006caf;
-  --ifm-color-primary: #0078c4;
-
-  --ifm-color-neutral: #7b7b7b;
-  --ifm-color-neutral-dark: #c4c4c4;
-  --ifm-color-neutral-darker: #d9d9d9;
-  --ifm-color-neutral-darkest: #e9e9e9;
-  --ifm-color-neutral-light: #555555;
-  --ifm-color-neutral-lighter: #222222;
-  --ifm-color-neutral-lightest: #0c0c0c;
+  /* Dark theme primary colors - lighter variants of CNOE blue for better contrast */
+  --ifm-primary: #4da6ff;
+  /* Lighter blue for dark theme */
+  --ifm-primary-dark: #1a8dff;
+  /* Dark Primary Color */
+  --ifm-primary-light: #80c0ff;
+  /* Light Primary Color */
+  --ifm-primary-50: #002444;
+  --ifm-primary-100: #003156;
+  --ifm-primary-200: #003d68;
+  --ifm-primary-300: #004a7a;
+  --ifm-primary-400: #00568c;
+  --ifm-primary-500: #1a8dff;
+  --ifm-primary-600: #4da6ff;
+  --ifm-primary-700: #80c0ff;
+  --ifm-primary-800: #b3d9ff;
+  --ifm-primary-900: #e6f2ff;
+
+  /* Dark theme accent colors */
+  --ifm-accent: #FFB74D;
+  /* Lighter orange for dark theme */
+  --ifm-accent-light: #FFCC80;
+  --ifm-accent-dark: #FFA726;
+
+  /* Dark theme neutrals - Better balanced for readability */
+  --ifm-neutral-white: #FFFFFF;
+  --ifm-neutral-50: #121212;
+  /* Dark background */
+  --ifm-neutral-100: #1E1E1E;
+  --ifm-neutral-200: #2D2D2D;
+  --ifm-neutral-300: #404040;
+  --ifm-neutral-400: #6D6D6D;
+  /* Divider Color */
+  --ifm-neutral-500: #9E9E9E;
+  --ifm-neutral-600: #BDBDBD;
+  /* Secondary Text */
+  --ifm-neutral-700: #E0E0E0;
+  --ifm-neutral-800: #F5F5F5;
+  --ifm-neutral-900: #FFFFFF;
+  /* Primary Text */
+
+  /* Update Infima variables for dark theme */
+  --ifm-color-primary: var(--ifm-primary);
+  --ifm-color-primary-dark: var(--ifm-primary-400);
+  --ifm-color-primary-darker: var(--ifm-primary-300);
+  --ifm-color-primary-darkest: var(--ifm-primary-200);
+  --ifm-color-primary-light: var(--ifm-primary-700);
+  --ifm-color-primary-lighter: var(--ifm-primary-800);
+  --ifm-color-primary-lightest: var(--ifm-primary-900);
+
+  --ifm-color-neutral: var(--ifm-neutral-500);
+  --ifm-color-neutral-dark: var(--ifm-neutral-600);
+  --ifm-color-neutral-darker: var(--ifm-neutral-700);
+  --ifm-color-neutral-darkest: var(--ifm-neutral-800);
+  --ifm-color-neutral-light: var(--ifm-neutral-400);
+  --ifm-color-neutral-lighter: var(--ifm-neutral-200);
+  --ifm-color-neutral-lightest: var(--ifm-neutral-100);
 
   /* Hex codes for rgba opacity with variables */
-  --ifm-color-neutral-light-rgb: 85, 85, 85;
+  --ifm-color-neutral-light-rgb: 100, 116, 139;
 
   --ifm-code-font-size: 95%;
-  /* --ifm-heading-color: #25a0c2; */
-
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);
 
+  /* Dark theme radar colors */
   --ifm-color-radar-opeartion: #25a0c2;
   --ifm-color-radar-application: #55b55a;
   --ifm-color-radar-security: #cf6969;
@@ -88,8 +224,183 @@
   --ifm-image-portal: url("../../static/img/logo.png");
 }
 
+/* Base Animation Utilities */
+.cnoe-animate-fade-in {
+  animation: cnoe-fade-in var(--ifm-duration-slower) var(--ifm-easing-ease) forwards;
+  opacity: 0;
+}
+
+.cnoe-animate-fade-in-up {
+  animation: cnoe-fade-in-up var(--ifm-duration-slower) var(--ifm-easing-ease) forwards;
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.cnoe-animate-float {
+  animation: cnoe-float 8s var(--ifm-easing-ease-in-out) infinite;
+}
+
+.cnoe-animate-gradient {
+  animation: cnoe-gradient-shift 15s ease infinite;
+}
+
+/* Scroll-based Animation Classes */
+.cnoe-scroll-animate {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all var(--ifm-duration-slower) var(--ifm-easing-ease);
+}
+
+.cnoe-scroll-animate.cnoe-animate-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.cnoe-scroll-animate-fade {
+  opacity: 0;
+  transition: opacity var(--ifm-duration-slower) var(--ifm-easing-ease);
+}
+
+.cnoe-scroll-animate-fade.cnoe-animate-visible {
+  opacity: 1;
+}
+
+.cnoe-scroll-animate-slide-left {
+  opacity: 0;
+  transform: translateX(-30px);
+  transition: all var(--ifm-duration-slower) var(--ifm-easing-ease);
+}
+
+.cnoe-scroll-animate-slide-left.cnoe-animate-visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.cnoe-scroll-animate-slide-right {
+  opacity: 0;
+  transform: translateX(30px);
+  transition: all var(--ifm-duration-slower) var(--ifm-easing-ease);
+}
+
+.cnoe-scroll-animate-slide-right.cnoe-animate-visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.cnoe-scroll-animate-scale {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: all var(--ifm-duration-slower) var(--ifm-easing-ease);
+}
+
+.cnoe-scroll-animate-scale.cnoe-animate-visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Staggered Animation Support */
+.cnoe-stagger-container .cnoe-stagger-item {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.6s var(--ifm-easing-ease);
+}
+
+.cnoe-stagger-container .cnoe-stagger-item.cnoe-animate-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Animation delays for staggered effects */
+.cnoe-stagger-item:nth-child(1) {
+  transition-delay: 0.1s;
+}
+
+.cnoe-stagger-item:nth-child(2) {
+  transition-delay: 0.2s;
+}
+
+.cnoe-stagger-item:nth-child(3) {
+  transition-delay: 0.3s;
+}
+
+.cnoe-stagger-item:nth-child(4) {
+  transition-delay: 0.4s;
+}
+
+.cnoe-stagger-item:nth-child(5) {
+  transition-delay: 0.5s;
+}
+
+.cnoe-stagger-item:nth-child(6) {
+  transition-delay: 0.6s;
+}
+
+/* Keyframe Definitions */
+@keyframes cnoe-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes cnoe-fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes cnoe-float {
+
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+
+  50% {
+    transform: translateY(-15px);
+  }
+}
+
+@keyframes cnoe-gradient-shift {
+
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+
+  .cnoe-animate-fade-in,
+  .cnoe-animate-fade-in-up,
+  .cnoe-animate-float,
+  .cnoe-animate-gradient {
+    animation: none;
+  }
+
+  .cnoe-animate-fade-in,
+  .cnoe-animate-fade-in-up {
+    opacity: 1;
+    transform: none;
+  }
+}
+
 .hero {
-  background-color: var(--ifm-color-neutral-lighter);
+  background: var(--ifm-primary-50) !important;
 }
 
 .hero .hero__subtitle {
@@ -120,7 +431,8 @@
   font-size: 35px;
   font-style: normal;
   font-weight: 700;
-  line-height: 149.523%; /* 52.333px */
+  line-height: 149.523%;
+  /* 52.333px */
 }
 
 .heading-center {
@@ -129,13 +441,19 @@
 }
 
 .footer--dark {
-  background-color: var(--ifm-color-black);
+  background: linear-gradient(45deg,
+      var(--ifm-primary-500) 0%,
+      var(--ifm-primary-600) 15%,
+      var(--ifm-primary-700) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-primary-900) 100%);
   color: var(--ifm-color-white);
   text-align: center;
+  font-weight: 400;
 }
 
 .footer--dark .footer__items :hover {
-  color: var(--ifm-color-primary-lightest);
+  color: var(--ifm-accent);
 }
 
 .footer__copyright {
@@ -143,17 +461,9 @@
   color: #c4c4c4;
 }
 
-.button--primary {
-  color: white;
-  background-color: #2984bd;
-}
-.button--primary:hover {
-  color: white;
-  background-color: #00568c;
-}
 
 html[data-theme="dark"] .navbar .navbar__logo {
-  content: url(/img/logo-dark.png);
+  content: url(/img/logo-dark-no-name.png);
 }
 
 .sliderStyle {
@@ -170,30 +480,22 @@ html[data-theme="dark"] .navbar .navbar__logo {
   text-align: center;
 }
 
-p > img {
+p>img {
   border-radius: 8px;
 }
 
 @media only screen and (max-width: 768px) {
+
   /* For mobile phones: */
   .hero .hero__subtitle {
     font-size: 18px;
     max-width: 100px;
   }
+
   .tagline {
     width: 100px;
   }
-  .hero .button--primary {
-    width: 175px;
-    font-size: 12px;
-    height: 35px;
-  }
-  .hero .button--secondary {
-    width: 175px;
-    font-size: 12px;
-    height: 35px;
-    margin-top: -40px;
-  }
+
   .hero .bgimg {
     background-position: center;
   }
@@ -201,82 +503,2604 @@ p > img {
 
 /* navbar */
 .navbar--calendar-link {
-	width: 32px;
-	height: 32px;
-	padding: 6px;
-	margin-right: 6px;
-	margin-left: 6px;
-	border-radius: 50%;
-	transition: background var(--ifm-transition-fast);
-}
-
-.navbar--calendar-link:hover {
-	background: var(--ifm-color-emphasis-200);
+  width: 32px;
+  height: 32px;
+  padding: 6px;
+  margin-right: 6px;
+  margin-left: 6px;
+  border-radius: 50%;
+  transition: background var(--ifm-transition-fast);
 }
 
 .navbar--calendar-link:before {
-	content: '';
-	height: 100%;
-	display: block;
-  background: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M3 9H21M7 3V5M17 3V5M6 12H8M11 12H13M16 12H18M6 15H8M11 15H13M16 15H18M6 18H8M11 18H13M16 18H18M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="%23000000" stroke-width="2" stroke-linecap="round"></path></g></svg>');
+  content: '';
+  height: 100%;
+  display: block;
+  background: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2V6M16 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
+  background-size: contain;
 }
 
 html[data-theme='dark'] .navbar--calendar-link:before {
-	background: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M3 9H21M7 3V5M17 3V5M6 12H8M11 12H13M16 12H18M6 15H8M11 15H13M16 15H18M6 18H8M11 18H13M16 18H18M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round"></path></g></svg>');
+  background: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2V6M16 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
+  background-size: contain;
 }
+
 /* navbar */
 .navbar--slack-link {
-	width: 32px;
-	height: 32px;
-	padding: 6px;
-	margin-right: 6px;
-	margin-left: 6px;
-	border-radius: 50%;
-	transition: background var(--ifm-transition-fast);
+  width: 32px;
+  height: 32px;
+  padding: 6px;
+  margin-right: 6px;
+  margin-left: 6px;
+  border-radius: 50%;
+  transition: background var(--ifm-transition-fast);
 }
 
 .navbar--slack-link:hover {
-	background: var(--ifm-color-emphasis-200);
+  background: var(--ifm-color-emphasis-200);
 }
 
 .navbar--slack-link:before {
-	content: '';
-	height: 100%;
-	display: block;
+  content: '';
+  height: 100%;
+  display: block;
   background: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 10C13 11.1046 13.8954 12 15 12C16.1046 12 17 11.1046 17 10V5C17 3.89543 16.1046 3 15 3C13.8954 3 13 3.89543 13 5V10ZM5 8C3.89543 8 3 8.89543 3 10C3 11.1046 3.89543 12 5 12H10C11.1046 12 12 11.1046 12 10C12 8.89543 11.1046 8 10 8H5ZM15 13C13.8954 13 13 13.8954 13 15C13 16.1046 13.8954 17 15 17H20C21.1046 17 22 16.1046 22 15C22 13.8954 21.1046 13 20 13H15ZM10 22C8.89543 22 8 21.1046 8 20L8 15C8 13.8954 8.89543 13 10 13C11.1046 13 12 13.8954 12 15V20C12 21.1046 11.1046 22 10 22ZM8 5C8 3.89543 8.89543 3 10 3C11.1046 3 12 3.89543 12 5V7H10C8.89543 7 8 6.10457 8 5ZM3 15C3 16.1046 3.89543 17 5 17C6.10457 17 7 16.1046 7 15V13H5C3.89543 13 3 13.8954 3 15ZM17 20C17 21.1046 16.1046 22 15 22C13.8954 22 13 21.1046 13 20V18H15C16.1046 18 17 18.8954 17 20ZM22 10C22 8.89543 21.1046 8 20 8C18.8954 8 18 8.89543 18 10V12H20C21.1046 12 22 11.1046 22 10Z" fill="%23000000"></path></g></svg>');
 }
 
 html[data-theme='dark'] .navbar--slack-link:before {
-	background: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 10C13 11.1046 13.8954 12 15 12C16.1046 12 17 11.1046 17 10V5C17 3.89543 16.1046 3 15 3C13.8954 3 13 3.89543 13 5V10ZM5 8C3.89543 8 3 8.89543 3 10C3 11.1046 3.89543 12 5 12H10C11.1046 12 12 11.1046 12 10C12 8.89543 11.1046 8 10 8H5ZM15 13C13.8954 13 13 13.8954 13 15C13 16.1046 13.8954 17 15 17H20C21.1046 17 22 16.1046 22 15C22 13.8954 21.1046 13 20 13H15ZM10 22C8.89543 22 8 21.1046 8 20L8 15C8 13.8954 8.89543 13 10 13C11.1046 13 12 13.8954 12 15V20C12 21.1046 11.1046 22 10 22ZM8 5C8 3.89543 8.89543 3 10 3C11.1046 3 12 3.89543 12 5V7H10C8.89543 7 8 6.10457 8 5ZM3 15C3 16.1046 3.89543 17 5 17C6.10457 17 7 16.1046 7 15V13H5C3.89543 13 3 13.8954 3 15ZM17 20C17 21.1046 16.1046 22 15 22C13.8954 22 13 21.1046 13 20V18H15C16.1046 18 17 18.8954 17 20ZM22 10C22 8.89543 21.1046 8 20 8C18.8954 8 18 8.89543 18 10V12H20C21.1046 12 22 11.1046 22 10Z" fill="%23ffffff"></path></g></svg>');
+  background: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 10C13 11.1046 13.8954 12 15 12C16.1046 12 17 11.1046 17 10V5C17 3.89543 16.1046 3 15 3C13.8954 3 13 3.89543 13 5V10ZM5 8C3.89543 8 3 8.89543 3 10C3 11.1046 3.89543 12 5 12H10C11.1046 12 12 11.1046 12 10C12 8.89543 11.1046 8 10 8H5ZM15 13C13.8954 13 13 13.8954 13 15C13 16.1046 13.8954 17 15 17H20C21.1046 17 22 16.1046 22 15C22 13.8954 21.1046 13 20 13H15ZM10 22C8.89543 22 8 21.1046 8 20L8 15C8 13.8954 8.89543 13 10 13C11.1046 13 12 13.8954 12 15V20C12 21.1046 11.1046 22 10 22ZM8 5C8 3.89543 8.89543 3 10 3C11.1046 3 12 3.89543 12 5V7H10C8.89543 7 8 6.10457 8 5ZM3 15C3 16.1046 3.89543 17 5 17C6.10457 17 7 16.1046 7 15V13H5C3.89543 13 3 13.8954 3 15ZM17 20C17 21.1046 16.1046 22 15 22C13.8954 22 13 21.1046 13 20V18H15C16.1046 18 17 18.8954 17 20ZM22 10C22 8.89543 21.1046 8 20 8C18.8954 8 18 8.89543 18 10V12H20C21.1046 12 22 11.1046 22 10Z" fill="%23ffffff"></path></g></svg>');
 }
 
 .navbar--github-link {
-	width: 32px;
-	height: 32px;
-	padding: 6px;
-	margin-right: 20px;
-	margin-left: 6px;
-	border-radius: 50%;
-	transition: background var(--ifm-transition-fast);
+  width: 32px;
+  height: 32px;
+  padding: 6px;
+  margin-right: 20px;
+  margin-left: 6px;
+  border-radius: 50%;
+  transition: background var(--ifm-transition-fast);
 }
 
 .navbar--github-link:hover {
-	background: var(--ifm-color-emphasis-200);
+  background: var(--ifm-color-emphasis-200);
 }
 
 .navbar--github-link:before {
-	content: '';
-	height: 100%;
-	display: block;
-	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-		no-repeat;
+  content: '';
+  height: 100%;
+  display: block;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
 }
 
 html[data-theme='dark'] .navbar--github-link:before {
-	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-		no-repeat;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
 }
 
-.hidden-sidebar-item {
-  display: none !important;
+/* Global Typography Improvements */
+body {
+  font-family: var(--ifm-font-family);
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+  font-variation-settings: normal;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--ifm-font-family);
+  font-weight: 600;
+  letter-spacing: -0.025em;
+}
+
+h1 {
+  font-size: var(--ifm-font-size-4xl);
+  font-weight: 700;
+}
+
+h2 {
+  font-size: var(--ifm-font-size-3xl);
+  font-weight: 600;
+}
+
+h3 {
+  font-size: var(--ifm-font-size-2xl);
+  font-weight: 600;
+}
+
+/* Enhanced Button Styles */
+.button {
+  font-family: var(--ifm-font-family);
+  font-weight: 500;
+  border-radius: 8px;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  border: none;
+  box-shadow: var(--ifm-shadow-sm);
+}
+
+.button:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--ifm-shadow-lg);
+}
+
+/* Enhanced Card Styles */
+.card {
+  border-radius: 12px;
+  border: 1px solid var(--ifm-neutral-200);
+  box-shadow: var(--ifm-shadow-sm);
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--ifm-shadow-xl);
+  border-color: var(--ifm-primary-200);
+}
+
+[data-theme="dark"] .card {
+  border-color: var(--ifm-neutral-700);
+  background: var(--ifm-neutral-800);
+}
+
+[data-theme="dark"] .card:hover {
+  border-color: var(--ifm-primary-400);
+}
+
+/* Hero Section Animated Background Elements */
+.hero-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.hero-gradient-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg,
+      var(--ifm-primary-50) 0%,
+      var(--ifm-primary-100) 25%,
+      var(--ifm-neutral-50) 50%,
+      var(--ifm-primary-100) 75%,
+      var(--ifm-primary-50) 100%);
+  background-size: 400% 400%;
+  animation: cnoe-gradient-shift 15s ease infinite;
+}
+
+[data-theme="dark"] .hero-gradient-bg {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%);
+  background-size: 400% 400%;
+}
+
+@keyframes cnoe-float-shapes {
+
+  0%,
+  100% {
+    transform: translateY(0px) translateX(0px) rotate(0deg);
+  }
+
+  25% {
+    transform: translateY(-20px) translateX(10px) rotate(90deg);
+  }
+
+  50% {
+    transform: translateY(-40px) translateX(-5px) rotate(180deg);
+  }
+
+  75% {
+    transform: translateY(-20px) translateX(-10px) rotate(270deg);
+  }
+}
+
+/* Performance optimizations for mobile */
+@media (max-width: 768px) {
+  .hero-gradient-bg {
+    animation-duration: 20s;
+  }
+}
+
+/* Reduced motion support for background elements */
+@media (prefers-reduced-motion: reduce) {
+  .hero-gradient-bg {
+    animation: none;
+  }
+}
+
+
+[data-theme="dark"] body {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%);
+  background-size: 400% 400%;
+  animation: cnoe-gradient-shift 15s ease infinite;
+}
+
+/* Immersive Glassmorphism Navbar Enhancement - Synced with Hero */
+.navbar {
+  background: linear-gradient(135deg,
+      var(--ifm-primary-50) 0%,
+      var(--ifm-primary-100) 25%,
+      var(--ifm-neutral-50) 50%,
+      var(--ifm-primary-100) 75%,
+      var(--ifm-primary-50) 100%);
+  background-size: 400% 400%;
+  animation: cnoe-gradient-shift 15s ease infinite;
+  backdrop-filter: blur(25px) saturate(1.2);
+  -webkit-backdrop-filter: blur(25px) saturate(1.2);
+  border-bottom: 1px solid rgba(0, 86, 140, 0.08);
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  box-shadow:
+    0 8px 32px rgba(0, 86, 140, 0.08),
+    0 2px 8px rgba(0, 86, 140, 0.04),
+    0 4px 12px rgba(0, 86, 140, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+/* Navbar scroll effect - Maintain gradient background sync */
+.navbar--fixed-top {
+  backdrop-filter: blur(30px) saturate(1.3);
+  -webkit-backdrop-filter: blur(30px) saturate(1.3);
+  background: linear-gradient(135deg,
+      var(--ifm-primary-50) 0%,
+      var(--ifm-primary-100) 25%,
+      var(--ifm-neutral-50) 50%,
+      var(--ifm-primary-100) 75%,
+      var(--ifm-primary-50) 100%);
+  background-size: 400% 400%;
+  animation: cnoe-gradient-shift 15s ease infinite;
+  box-shadow:
+    0 12px 40px rgba(0, 86, 140, 0.12),
+    0 4px 12px rgba(0, 86, 140, 0.06),
+    0 4px 12px rgba(0, 86, 140, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+[data-theme="dark"] .navbar {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%);
+  background-size: 400% 400%;
+  animation: cnoe-gradient-shift 15s ease infinite;
+  border-bottom: 1px solid rgba(77, 166, 255, 0.12);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.3),
+    0 2px 8px rgba(77, 166, 255, 0.08),
+    0 4px 12px rgba(77, 166, 255, 0.15),
+    inset 0 1px 0 rgba(77, 166, 255, 0.1);
+}
+
+[data-theme="dark"] .navbar--fixed-top {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%);
+  background-size: 400% 400%;
+  animation: cnoe-gradient-shift 15s ease infinite;
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.4),
+    0 4px 12px rgba(77, 166, 255, 0.12),
+    0 4px 12px rgba(77, 166, 255, 0.15),
+    inset 0 1px 0 rgba(77, 166, 255, 0.15);
+}
+
+.navbar--fixed-top {
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+/* Enhanced Navbar Items */
+.navbar__item {
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.navbar__link {
+  font-weight: 500;
+  color: var(--ifm-neutral-700);
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  position: relative;
+  overflow: hidden;
+}
+
+[data-theme="dark"] .navbar__link {
+  color: var(--ifm-neutral-300);
+}
+
+.navbar__link:hover {
+  color: var(--ifm-primary);
+  background: rgba(0, 86, 140, 0.1);
+  transform: translateY(-1px);
+}
+
+[data-theme="dark"] .navbar__link:hover {
+  color: var(--ifm-primary-300);
+  background: rgba(77, 166, 255, 0.1);
+}
+
+.navbar__link--active {
+  color: var(--ifm-primary);
+  background: linear-gradient(135deg, rgba(0, 86, 140, 0.1) 0%, rgba(0, 86, 140, 0.05) 100%);
+  font-weight: 600;
+}
+
+[data-theme="dark"] .navbar__link--active {
+  color: var(--ifm-primary-300);
+  background: linear-gradient(135deg, rgba(77, 166, 255, 0.1) 0%, rgba(77, 166, 255, 0.05) 100%);
+}
+
+/* Enhanced Logo */
+.navbar__logo {
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.navbar__logo:hover {
+  transform: scale(2);
+}
+
+/* Enhanced Navbar Links with Bold Text and Accent Bar */
+.navbar__link {
+  font-weight: 600 !important;
+}
+
+.navbar__link::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 3px;
+  background: var(--ifm-accent);
+  border-radius: 2px;
+  transform: translateX(-50%);
+  transition: width var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.navbar__link:hover::after {
+  width: 80%;
+}
+
+.navbar__link--active {
+  font-weight: 700 !important;
+}
+
+.navbar__link--active::after {
+  width: 80%;
+}
+
+/* Mobile Navbar Enhancements */
+.navbar-sidebar {
+  background: rgba(248, 250, 252, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+[data-theme="dark"] .navbar-sidebar {
+  background: rgba(30, 41, 59, 0.95);
+}
+
+.navbar-sidebar__item {
+  padding: 0.5rem 1rem;
+}
+
+.navbar-sidebar__link {
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  font-weight: 500;
+}
+
+.navbar-sidebar__link:hover {
+  background: rgba(0, 86, 140, 0.1);
+  color: var(--ifm-primary);
+  transform: translateX(4px);
+}
+
+[data-theme="dark"] .navbar-sidebar__link:hover {
+  background: rgba(77, 166, 255, 0.1);
+  color: var(--ifm-primary-300);
+}
+
+/* Enhanced Social Icons */
+.navbar--calendar-link,
+.navbar--slack-link,
+.navbar--github-link {
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  border-radius: 8px;
+}
+
+.navbar--calendar-link:hover,
+.navbar--slack-link:hover,
+.navbar--github-link:hover {
+  background: rgba(0, 86, 140, 0.1);
+  transform: translateY(-2px) scale(1.1);
+}
+
+[data-theme="dark"] .navbar--calendar-link:hover,
+[data-theme="dark"] .navbar--slack-link:hover,
+[data-theme="dark"] .navbar--github-link:hover {
+  background: rgba(77, 166, 255, 0.1);
+}
+
+/* Navbar Social Links - Aligned and Menu-style Hover */
+.navbar--calendar-link,
+.navbar--slack-link,
+.navbar--github-link {
+  width: auto !important;
+  height: auto !important;
+  padding: 0.5rem 1rem !important;
+  margin: 0 0.25rem !important;
+  border-radius: 8px !important;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease) !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  font-weight: 500 !important;
+  color: var(--ifm-neutral-700) !important;
+  text-decoration: none !important;
+  position: relative !important;
+  background: transparent !important;
+}
+
+[data-theme="dark"] .navbar--calendar-link,
+[data-theme="dark"] .navbar--slack-link,
+[data-theme="dark"] .navbar--github-link {
+  color: var(--ifm-neutral-300) !important;
+}
+
+.navbar--calendar-link:hover,
+.navbar--slack-link:hover,
+.navbar--github-link:hover {
+  background: rgba(0, 86, 140, 0.08) !important;
+  color: var(--ifm-primary) !important;
+  transform: translateX(4px) !important;
+  box-shadow: var(--ifm-shadow-sm) !important;
+}
+
+/* Icon styling for navbar links */
+.navbar--calendar-link:before,
+.navbar--slack-link:before,
+.navbar--github-link:before {
+  width: 20px !important;
+  height: 20px !important;
+  margin-right: 0.5rem !important;
+  display: inline-block !important;
+  flex-shrink: 0 !important;
 }
+
+/* Add text labels for better alignment and visibility */
+.navbar--calendar-link:after {
+  content: 'Calendar';
+  font-size: var(--ifm-font-size-sm);
+  font-weight: 500;
+}
+
+.navbar--slack-link:after {
+  content: 'Slack';
+  font-size: var(--ifm-font-size-sm);
+  font-weight: 500;
+}
+
+.navbar--github-link:after {
+  content: 'GitHub';
+  font-size: var(--ifm-font-size-sm);
+  font-weight: 500;
+}
+
+/* Modern Sidebar Navigation */
+.theme-doc-sidebar-container {
+  background: var(--ifm-neutral-50);
+  border-right: 1px solid var(--ifm-neutral-200);
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+[data-theme="dark"] .theme-doc-sidebar-container {
+  background: var(--ifm-neutral-900);
+  border-right: 1px solid var(--ifm-neutral-700);
+}
+
+.theme-doc-sidebar-menu {
+  padding: 1rem;
+}
+
+/* Sidebar Menu Items */
+.menu__link {
+  font-weight: 500;
+  color: var(--ifm-neutral-700);
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  margin: 0.25rem 0;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  position: relative;
+  font-size: var(--ifm-font-size-sm);
+}
+
+
+.menu__link--active {
+  background: linear-gradient(135deg, var(--ifm-primary) 0%, var(--ifm-primary-600) 100%);
+  color: white;
+  font-weight: 600;
+  box-shadow: var(--ifm-shadow-md);
+  position: relative;
+}
+
+.menu__link--active::before,
+.menu__list-item-collapsible:hover::before,
+.menu__link:hover::before {
+  content: '';
+  position: absolute;
+  left: -1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 70%;
+  background: var(--ifm-accent);
+  border-radius: 2px;
+}
+
+.menu__list-item .menu__link:hover {
+  background: var(--ifm-primary-50);
+  color: var(--ifm-primary) !important;
+  transform: none;
+}
+
+/* Nested Menu Items */
+.menu__list .menu__list {
+  padding-left: 1rem;
+  border-left: 2px solid var(--ifm-neutral-200);
+  margin-left: 1rem;
+}
+
+[data-theme="dark"] .menu__list .menu__list {
+  border-left-color: var(--ifm-neutral-700);
+}
+
+.menu__list .menu__list .menu__link {
+  font-size: var(--ifm-font-size-sm);
+  padding: 0.5rem 1rem;
+  color: var(--ifm-neutral-600);
+}
+
+[data-theme="dark"] .menu__list .menu__list .menu__link {
+  color: var(--ifm-neutral-400);
+}
+
+/* Touch-friendly enhancements for mobile */
+@media (max-width: 768px) {
+  .menu__link {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+/* Enhanced Code Block Styling */
+.prism-code {
+  background: var(--ifm-neutral-900) !important;
+  border-radius: 12px !important;
+  border: 1px solid var(--ifm-neutral-700);
+  box-shadow: var(--ifm-shadow-xl);
+  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace !important;
+  font-size: 14px !important;
+  line-height: 1.6 !important;
+  overflow: hidden;
+}
+
+[data-theme="light"] .prism-code {
+  background: var(--ifm-neutral-50) !important;
+  border: 1px solid var(--ifm-neutral-200);
+  color: var(--ifm-neutral-800) !important;
+}
+
+/* Code Block Header */
+.codeBlockContainer {
+  position: relative;
+  margin: 2rem 0;
+}
+
+.codeBlockTitle {
+  background: linear-gradient(135deg, var(--ifm-primary) 0%, var(--ifm-primary-600) 100%);
+  color: white;
+  padding: 0.75rem 1.5rem;
+  font-size: var(--ifm-font-size-sm);
+  font-weight: 600;
+  border-radius: 12px 12px 0 0;
+  margin: 0;
+  font-family: var(--ifm-font-family);
+  letter-spacing: 0.025em;
+}
+
+.codeBlockTitle+.prism-code {
+  border-radius: 0 0 12px 12px !important;
+  border-top: none;
+}
+
+/* Language Badge */
+.codeBlockContainer::before {
+  content: attr(data-language);
+  position: absolute;
+  top: 0.75rem;
+  right: 1rem;
+  background: linear-gradient(135deg, var(--ifm-accent) 0%, var(--ifm-accent-dark) 100%);
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 6px;
+  font-size: var(--ifm-font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  z-index: 10;
+  font-family: var(--ifm-font-family);
+}
+
+/* Copy Button Enhancement */
+.clean-btn {
+  /* background: rgba(0, 86, 140, 0.1) !important;
+  border: 1px solid rgba(0, 86, 140, 0.2) !important; */
+  color: var(--ifm-primary) !important;
+  border-radius: 8px !important;
+  padding: 0.5rem 1rem !important;
+  font-weight: 600 !important;
+  font-size: var(--ifm-font-size-sm) !important;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease) !important;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+[data-theme="dark"] .clean-btn {
+  background: rgba(77, 166, 255, 0.1) !important;
+  border: 1px solid rgba(77, 166, 255, 0.2) !important;
+  color: var(--ifm-primary-300) !important;
+}
+
+.clean-btn:hover {
+  background: var(--ifm-primary) !important;
+  color: white !important;
+  border-color: var(--ifm-primary) !important;
+  transform: translateY(-2px) !important;
+  box-shadow: var(--ifm-shadow-lg) !important;
+}
+
+[data-theme="dark"] .clean-btn:hover {
+  background: var(--ifm-primary-300) !important;
+  color: var(--ifm-neutral-900) !important;
+  border-color: var(--ifm-primary-300) !important;
+}
+
+/* Copy Button Success State */
+.clean-btn[data-copy-state="copied"] {
+  background: var(--ifm-success) !important;
+  color: white !important;
+  border-color: var(--ifm-success) !important;
+}
+
+.clean-btn[data-copy-state="copied"]::after {
+  content: " ✓";
+}
+
+/* Line Numbers */
+.prism-code .token-line::before {
+  content: attr(data-line-number);
+  color: var(--ifm-neutral-500);
+  display: inline-block;
+  width: 3rem;
+  text-align: right;
+  margin-right: 1rem;
+  font-size: var(--ifm-font-size-xs);
+  user-select: none;
+}
+
+[data-theme="light"] .prism-code .token-line::before {
+  color: var(--ifm-neutral-400);
+}
+
+/* Highlighted Lines */
+.docusaurus-highlight-code-line {
+  background-color: rgba(0, 86, 140, 0.1) !important;
+  display: block;
+  margin: 0 -1.5rem;
+  padding: 0 1.5rem;
+  border-left: 4px solid var(--ifm-primary);
+}
+
+[data-theme="dark"] .docusaurus-highlight-code-line {
+  background-color: rgba(77, 166, 255, 0.1) !important;
+  border-left-color: var(--ifm-primary-300);
+}
+
+/* Syntax Highlighting with CNOE Colors */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: var(--ifm-neutral-500) !important;
+  font-style: italic;
+}
+
+.token.punctuation {
+  color: var(--ifm-neutral-400) !important;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: var(--ifm-accent) !important;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: var(--ifm-success) !important;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: var(--ifm-primary-300) !important;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: var(--ifm-primary) !important;
+  font-weight: 600;
+}
+
+[data-theme="dark"] .token.atrule,
+[data-theme="dark"] .token.attr-value,
+[data-theme="dark"] .token.keyword {
+  color: var(--ifm-primary-300) !important;
+}
+
+.token.function,
+.token.class-name {
+  color: var(--ifm-info) !important;
+  font-weight: 600;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: var(--ifm-warning) !important;
+}
+
+/* Inline Code */
+code:not([class*="language-"]) {
+  background: rgba(0, 86, 140, 0.1) !important;
+  color: var(--ifm-primary) !important;
+  border: 1px solid rgba(0, 86, 140, 0.2) !important;
+  border-radius: 6px !important;
+  padding: 0.2rem 0.4rem !important;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace !important;
+  font-size: 0.9em !important;
+  font-weight: 600 !important;
+}
+
+[data-theme="dark"] code:not([class*="language-"]) {
+  background: rgba(77, 166, 255, 0.1) !important;
+  color: var(--ifm-primary-300) !important;
+  border: 1px solid rgba(77, 166, 255, 0.2) !important;
+}
+
+/* Code Block Scrollbar */
+.prism-code::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.prism-code::-webkit-scrollbar-track {
+  background: var(--ifm-neutral-800);
+  border-radius: 4px;
+}
+
+[data-theme="light"] .prism-code::-webkit-scrollbar-track {
+  background: var(--ifm-neutral-200);
+}
+
+.prism-code::-webkit-scrollbar-thumb {
+  background: var(--ifm-primary);
+  border-radius: 4px;
+}
+
+.prism-code::-webkit-scrollbar-thumb:hover {
+  background: var(--ifm-primary-600);
+}
+
+.hidden-sidebar-item {
+  display: none !important;
+}
+
+/* Final Integration Styles */
+
+/* Ensure smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Global focus styles for accessibility */
+*:focus {
+  outline: 2px solid var(--ifm-primary);
+  outline-offset: 2px;
+}
+
+/* Skip to content link for accessibility */
+.skip-to-content {
+  position: absolute;
+  top: -40px;
+  left: 6px;
+  background: var(--ifm-primary);
+  color: white;
+  padding: 8px;
+  text-decoration: none;
+  border-radius: 4px;
+  z-index: 1000;
+  transition: top 0.3s;
+}
+
+.skip-to-content:focus {
+  top: 6px;
+}
+
+/* Ensure consistent spacing between sections */
+main>div:not(:last-child) {
+  margin-bottom: 2rem;
+}
+
+/* Remove gaps between homepage sections by overlapping them slightly */
+.homepage main>div:not(:last-child) {
+  margin-bottom: -5px !important;
+}
+
+/* Remove gap between main and following sections */
+.homepage main+div {
+  margin-top: -5px !important;
+}
+
+/* Ensure all homepage sections have seamless backgrounds */
+.homepage .features,
+.homepage .members {
+  position: relative;
+  z-index: 1;
+}
+
+[data-theme="dark"] html,
+[data-theme="dark"] body,
+[data-theme="dark"] #__docusaurus,
+[data-theme="dark"] .main-wrapper,
+[data-theme="dark"] main {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+}
+
+/* Loading states for better UX */
+.loading-skeleton {
+  background: linear-gradient(90deg, var(--ifm-neutral-200) 25%, var(--ifm-neutral-100) 50%, var(--ifm-neutral-200) 75%);
+  background-size: 200% 100%;
+  animation: loading-shimmer 2s infinite;
+}
+
+[data-theme="dark"] .loading-skeleton {
+  background: linear-gradient(90deg, var(--ifm-neutral-700) 25%, var(--ifm-neutral-600) 50%, var(--ifm-neutral-700) 75%);
+  background-size: 200% 100%;
+}
+
+@keyframes loading-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Print styles */
+@media print {
+
+  .navbar,
+  .footer,
+  .hero-background {
+    display: none !important;
+  }
+
+  .hero {
+    background: white !important;
+    color: black !important;
+  }
+
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+
+/* Ensure all interactive elements are accessible */
+button,
+.button,
+a[role="button"],
+input,
+select,
+textarea {
+  min-height: 44px;
+  min-width: 44px;
+}
+
+/* Final cleanup */
+.hidden-sidebar-item {
+  display: none !important;
+}
+
+/* 
+Global Background Consistency */
+html {
+  background: var(--ifm-neutral-50);
+}
+
+[data-theme="dark"] html {
+  background: var(--ifm-neutral-900);
+}
+
+/* Fix body background for all pages */
+body {
+  background: var(--ifm-neutral-50);
+}
+
+[data-theme="dark"] body {
+  background: var(--ifm-neutral-900);
+}
+
+/* Main content area background */
+main {
+  background: var(--ifm-neutral-50);
+}
+
+[data-theme="dark"] main {
+  background: var(--ifm-neutral-900);
+}
+
+/* Fix white sections between homepage components */
+.cnoe-section-spacing {
+  margin: 0;
+  padding: 0;
+}
+
+/* Docs and Blog page backgrounds */
+.theme-doc-root,
+.theme-blog-wrapper {
+  background: var(--ifm-neutral-50);
+}
+
+[data-theme="dark"] .theme-doc-root,
+[data-theme="dark"] .theme-blog-wrapper {
+  background: var(--ifm-neutral-900);
+}
+
+/* Right sidebar (TOC) styling */
+.theme-doc-toc-desktop {
+  background: var(--ifm-neutral-50);
+  border-left: 1px solid var(--ifm-neutral-200);
+}
+
+[data-theme="dark"] .theme-doc-toc-desktop {
+  background: var(--ifm-neutral-900);
+  border-left-color: var(--ifm-neutral-700);
+}
+
+.table-of-contents {
+  padding: 1rem;
+}
+
+.table-of-contents__link {
+  color: var(--ifm-neutral-600);
+  font-size: var(--ifm-font-size-sm);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  word-wrap: normal;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+[data-theme="dark"] .table-of-contents__link {
+  color: var(--ifm-neutral-400);
+}
+
+.table-of-contents__link:hover {
+  background: rgba(0, 86, 140, 0.1);
+  color: var(--ifm-primary);
+}
+
+[data-theme="dark"] .table-of-contents__link:hover {
+  background: rgba(77, 166, 255, 0.1);
+  color: var(--ifm-primary-300);
+}
+
+.table-of-contents__link--active {
+  background: var(--ifm-primary);
+  color: white;
+  font-weight: 600;
+}
+
+/* Duplicate blog sidebar section removed - using enhanced version below */
+
+/* Fix sidebar proportions and active state visibility */
+.menu__link--active {
+  background: linear-gradient(135deg, var(--ifm-primary) 0%, var(--ifm-primary-600) 100%) !important;
+  color: white !important;
+  font-weight: 600 !important;
+  box-shadow: var(--ifm-shadow-md) !important;
+}
+
+/* Fix logo sizing for different screen sizes */
+.navbar__logo img {
+  height: auto;
+  width: auto;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+/* Fix sidebar category proportions */
+.menu__list-item-collapsible .menu__link {
+  font-size: var(--ifm-font-size-sm) !important;
+  padding: 0.75rem 1rem !important;
+  font-weight: 600 !important;
+  color: var(--ifm-neutral-800) !important;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.menu__list-item-collapsible .menu__link:hover {
+  background: var(--ifm-primary-50) !important;
+  transform: none !important;
+}
+
+/* Nested menu items */
+.menu__list .menu__list {
+  padding-left: 1rem;
+  border-left: 2px solid var(--ifm-neutral-200);
+  margin-left: 1rem;
+}
+
+[data-theme="dark"] .menu__list .menu__list {
+  border-left-color: var(--ifm-neutral-700);
+}
+
+
+[data-theme="dark"] .menu__list .menu__list .menu__link {
+  color: var(--ifm-neutral-400) !important;
+}
+
+/* Fix logo sizing for different screen sizes */
+.navbar__logo img {
+  height: 32px;
+  width: auto;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+@media (max-width: 768px) {
+  .navbar__logo img {
+    height: 28px;
+  }
+}
+
+@media (max-width: 480px) {
+  .navbar__logo img {
+    height: 24px;
+  }
+}
+
+/* Fix hero logo sizing */
+.heroLogo {
+  width: clamp(80px, 15vw, 120px) !important;
+  height: auto !important;
+}
+
+/* Fix partner logo sizing */
+.partnerLogo {
+  max-width: clamp(80px, 15vw, 120px) !important;
+  max-height: clamp(50px, 10vh, 80px) !important;
+  width: auto !important;
+  height: auto !important;
+}
+
+/* Right sidebar (TOC) styling */
+.theme-doc-toc-desktop {
+  background: var(--ifm-neutral-50);
+  border-left: 1px solid var(--ifm-neutral-200);
+  padding: 1rem;
+}
+
+[data-theme="dark"] .theme-doc-toc-desktop {
+  background: var(--ifm-neutral-900);
+  border-left-color: var(--ifm-neutral-700);
+}
+
+.table-of-contents__link {
+  color: var(--ifm-neutral-600);
+  font-size: var(--ifm-font-size-sm);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  display: block;
+  margin: 0.125rem 0;
+}
+
+[data-theme="dark"] .table-of-contents__link {
+  color: var(--ifm-neutral-400);
+}
+
+.table-of-contents__link:hover {
+  background: rgba(0, 86, 140, 0.1);
+  color: var(--ifm-primary);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .table-of-contents__link:hover {
+  background: rgba(77, 166, 255, 0.1);
+  color: var(--ifm-primary-300);
+}
+
+.table-of-contents__link--active {
+  background: var(--ifm-primary);
+  color: white;
+  font-weight: 600;
+}
+
+/* Enhanced Blog Sidebar Styling */
+[class*="sidebar"] {
+  background: var(--ifm-neutral-50);
+  border-right: 1px solid var(--ifm-neutral-200);
+}
+
+/* Enhanced Blog Sidebar Menu Links */
+[class*="sidebarItemLink"] {
+  font-weight: 500;
+  color: var(--ifm-neutral-700);
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  margin: 0.25rem 0;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  position: relative;
+  font-size: var(--ifm-font-size-sm);
+}
+
+[class*="sidebarItemLink"]:hover {
+  background: var(--ifm-primary-50);
+  color: var(--ifm-primary);
+  transform: translateX(4px);
+  box-shadow: var(--ifm-shadow-sm);
+}
+
+[class*="sidebarItemLink"]:hover::before {
+  content: '';
+  position: absolute;
+  left: 0rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 75%;
+  background: var(--ifm-accent);
+  border-radius: 2px;
+}
+
+/* Enhanced Blog Sidebar Active Link */
+[class*="sidebarItemLinkActive"] {
+  font-weight: 600;
+  box-shadow: var(--ifm-shadow-md);
+  position: relative;
+}
+
+[class*="sidebarItemLinkActive"]::before {
+  content: '';
+  position: absolute;
+  left: 0rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 70%;
+  background: var(--ifm-accent);
+  border-radius: 2px;
+} 
+
+/* Global background consistency */
+html {
+  background: var(--ifm-neutral-50);
+}
+
+[data-theme="dark"] html {
+  background: var(--ifm-neutral-900);
+}
+
+body {
+  background: var(--ifm-neutral-50);
+}
+
+[data-theme="dark"] body {
+  background: var(--ifm-neutral-900);
+}
+
+main {
+  background: var(--ifm-neutral-50);
+}
+
+[data-theme="dark"] main {
+  background: var(--ifm-neutral-900);
+}
+
+/* Docs and Blog page backgrounds */
+.theme-doc-root,
+.theme-blog-wrapper {
+  background: var(--ifm-neutral-50);
+}
+
+[data-theme="dark"] .theme-doc-root,
+[data-theme="dark"] .theme-blog-wrapper {
+  background: var(--ifm-neutral-900);
+}
+
+/* Fix white sections between homepage components */
+.cnoe-section-spacing {
+  margin: 0;
+  padding: 0;
+}
+
+/* Mobile sidebar improvements */
+@media (max-width: 996px) {
+  .theme-doc-sidebar-container {
+    background: rgba(248, 250, 252, 0.95);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+  }
+
+  [data-theme="dark"] .theme-doc-sidebar-container {
+    background: rgba(30, 41, 59, 0.95);
+  }
+
+  .menu__link {
+    padding: 1rem;
+    font-size: var(--ifm-font-size-base);
+  }
+
+  .menu__link:hover {
+    transform: translateX(8px);
+  }
+}
+
+/* Touch-friendly enhancements for mobile */
+@media (max-width: 768px) {
+  .menu__link {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+
+/* Additiona
+l Dark Mode Enhancements */
+
+/* Ensure proper dark mode for all page backgrounds */
+[data-theme="dark"] html,
+[data-theme="dark"] body {
+  background: var(--ifm-neutral-900) !important;
+  color: var(--ifm-neutral-300) !important;
+}
+
+/* Enhanced dark mode for hero section gradient */
+[data-theme="dark"] .hero-gradient-bg {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      rgba(15, 23, 42, 0.95) 25%,
+      rgba(30, 41, 59, 0.9) 50%,
+      rgba(15, 23, 42, 0.95) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400%;
+}
+
+/* Enhanced dark mode for glassmorphism effects */
+[data-theme="dark"] .navbar {
+  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
+  border-bottom: 1px solid rgba(71, 85, 105, 0.3) !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
+}
+
+[data-theme="dark"] .featureCardInner,
+[data-theme="dark"] .missionVisionCard,
+[data-theme="dark"] .newsCardLink {
+  background: rgba(30, 41, 59, 0.9) !important;
+  border: 1px solid rgba(71, 85, 105, 0.4) !important;
+  backdrop-filter: blur(10px) !important;
+  -webkit-backdrop-filter: blur(10px) !important;
+}
+
+[data-theme="dark"] .featureCardInner:hover,
+[data-theme="dark"] .missionVisionCard:hover,
+[data-theme="dark"] .newsCardLink:hover {
+  background: rgba(30, 41, 59, 0.95) !important;
+  border-color: rgba(77, 166, 255, 0.6) !important;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
+}
+
+/* Enhanced dark mode for cards */
+[data-theme="dark"] .card {
+  background: rgba(30, 41, 59, 0.8) !important;
+  border: 1px solid rgba(71, 85, 105, 0.4) !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
+}
+
+[data-theme="dark"] .card:hover {
+  background: rgba(30, 41, 59, 0.9) !important;
+  border-color: rgba(77, 166, 255, 0.5) !important;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
+}
+
+/* Enhanced dark mode for text elements */
+[data-theme="dark"] h1,
+[data-theme="dark"] h2,
+[data-theme="dark"] h3,
+[data-theme="dark"] h4,
+[data-theme="dark"] h5,
+[data-theme="dark"] h6 {
+  color: var(--ifm-neutral-100) !important;
+}
+
+[data-theme="dark"] p,
+[data-theme="dark"] li,
+[data-theme="dark"] .description {
+  color: var(--ifm-neutral-300) !important;
+}
+
+/* Enhanced dark mode for links */
+[data-theme="dark"] a {
+  color: var(--ifm-primary-300) !important;
+}
+
+[data-theme="dark"] a:hover {
+  color: var(--ifm-primary-200) !important;
+}
+
+/* Enhanced dark mode for code elements */
+[data-theme="dark"] code {
+  background: rgba(71, 85, 105, 0.3) !important;
+  color: var(--ifm-primary-300) !important;
+  border: 1px solid rgba(71, 85, 105, 0.5) !important;
+}
+
+[data-theme="dark"] pre {
+  background: var(--ifm-neutral-800) !important;
+  border: 1px solid var(--ifm-neutral-700) !important;
+}
+
+[data-theme="dark"] pre code {
+  background: transparent !important;
+  border: none !important;
+  color: var(--ifm-neutral-300) !important;
+}
+
+/* Enhanced dark mode for tables */
+[data-theme="dark"] table {
+  background: var(--ifm-neutral-800) !important;
+  border: 1px solid var(--ifm-neutral-700) !important;
+}
+
+[data-theme="dark"] th {
+  background: var(--ifm-neutral-700) !important;
+  color: var(--ifm-neutral-100) !important;
+  border-bottom: 2px solid var(--ifm-neutral-600) !important;
+}
+
+[data-theme="dark"] td {
+  color: var(--ifm-neutral-300) !important;
+  border-bottom: 1px solid var(--ifm-neutral-700) !important;
+}
+
+[data-theme="dark"] tr:hover {
+  background: rgba(71, 85, 105, 0.2) !important;
+}
+
+/* Enhanced dark mode for blockquotes */
+[data-theme="dark"] blockquote {
+  background: rgba(30, 41, 59, 0.5) !important;
+  border-left: 4px solid var(--ifm-primary-500) !important;
+  color: var(--ifm-neutral-300) !important;
+}
+
+/* Enhanced dark mode for horizontal rules */
+[data-theme="dark"] hr {
+  border-color: var(--ifm-neutral-700) !important;
+}
+
+/* Enhanced dark mode for any remaining utility classes */
+[data-theme="dark"] .shadow {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
+}
+
+[data-theme="dark"] .shadow-lg {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
+}
+
+[data-theme="dark"] .shadow-xl {
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
+}
+
+/* Ensure proper contrast for any missed elements */
+[data-theme="dark"] .text-light {
+  color: var(--ifm-neutral-300) !important;
+}
+
+[data-theme="dark"] .text-dark {
+  color: var(--ifm-neutral-100) !important;
+}
+
+[data-theme="dark"] .bg-primary {
+  background: var(--ifm-primary-600) !important;
+}
+
+[data-theme="dark"] .bg-secondary {
+  background: var(--ifm-neutral-700) !important;
+}
+
+/* Final enhancement for overall dark mode consistency */
+[data-theme="dark"] * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--ifm-neutral-600) var(--ifm-neutral-800);
+}
+
+[data-theme="dark"] *::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+[data-theme="dark"] *::-webkit-scrollbar-track {
+  background: var(--ifm-neutral-800);
+}
+
+[data-theme="dark"] *::-webkit-scrollbar-thumb {
+  background: var(--ifm-neutral-600);
+  border-radius: 4px;
+}
+
+[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
+  background: var(--ifm-neutral-500);
+}
+
+/* Ensure proper selection colors in dark mode */
+[data-theme="dark"] ::selection {
+  background: rgba(77, 166, 255, 0.3) !important;
+  color: var(--ifm-neutral-100) !important;
+}
+
+[data-theme="dark"] ::-moz-selection {
+  background: rgba(77, 166, 255, 0.3) !important;
+  color: var(--ifm-neutral-100) !important;
+}
+
+/* Homep
+age Background Consistency */
+.hero,
+.features,
+.cnoeSection,
+.members,
+.newsSection,
+.learnMoreSection,
+.partnerContainer,
+.modernHero,
+.heroBanner {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-50) 0%,
+      rgba(248, 250, 252, 0.8) 50%,
+      var(--ifm-neutral-50) 100%) !important;
+  position: relative;
+}
+
+[data-theme="dark"] .hero,
+[data-theme="dark"] .features,
+[data-theme="dark"] .cnoeSection,
+[data-theme="dark"] .members,
+[data-theme="dark"] .newsSection,
+[data-theme="dark"] .learnMoreSection,
+[data-theme="dark"] .partnerContainer,
+[data-theme="dark"] .modernHero,
+[data-theme="dark"] .heroBanner {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      rgba(15, 23, 42, 0.8) 50%,
+      var(--ifm-neutral-900) 100%) !important;
+}
+
+/* Enhanced Navbar Items */
+.navbar__item {
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.navbar__link {
+  font-weight: 500;
+  color: var(--ifm-neutral-700);
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  position: relative;
+  overflow: hidden;
+}
+
+[data-theme="dark"] .navbar__link {
+  color: var(--ifm-neutral-300);
+}
+
+.navbar__link:hover {
+  color: var(--ifm-primary);
+  background: rgba(0, 86, 140, 0.1);
+  transform: translateY(-1px);
+}
+
+[data-theme="dark"] .navbar__link:hover {
+  color: var(--ifm-primary-300);
+  background: rgba(77, 166, 255, 0.1);
+}
+
+.navbar__link--active {
+  color: var(--ifm-primary);
+  background: linear-gradient(135deg, rgba(0, 86, 140, 0.1) 0%, rgba(0, 86, 140, 0.05) 100%);
+  font-weight: 600;
+}
+
+[data-theme="dark"] .navbar__link--active {
+  color: var(--ifm-primary-300);
+  background: linear-gradient(135deg, rgba(77, 166, 255, 0.1) 0%, rgba(77, 166, 255, 0.05) 100%);
+}
+
+/* Enhanced Logo */
+.navbar__logo {
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.navbar__logo:hover {
+  transform: scale(1.05);
+}
+
+/* Mobile Navbar Enhancements */
+.navbar-sidebar {
+  background: rgba(248, 250, 252, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+[data-theme="dark"] .navbar-sidebar {
+  background: rgba(30, 41, 59, 0.95);
+}
+
+.navbar-sidebar__item {
+  padding: 0.5rem 1rem;
+}
+
+.navbar-sidebar__link {
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  font-weight: 500;
+}
+
+.navbar-sidebar__link:hover {
+  background: rgba(0, 86, 140, 0.1);
+  color: var(--ifm-primary);
+  transform: translateX(4px);
+}
+
+[data-theme="dark"] .navbar-sidebar__link:hover {
+  background: rgba(77, 166, 255, 0.1);
+  color: var(--ifm-primary-300);
+}
+
+/* Enhanced Social Icons */
+.navbar--calendar-link,
+.navbar--slack-link,
+.navbar--github-link {
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  border-radius: 8px;
+}
+
+.navbar--calendar-link:hover,
+.navbar--slack-link:hover,
+.navbar--github-link:hover {
+  background: rgba(0, 86, 140, 0.1);
+  transform: translateY(-2px) scale(1.1);
+}
+
+[data-theme="dark"] .navbar--calendar-link:hover,
+[data-theme="dark"] .navbar--slack-link:hover,
+[data-theme="dark"] .navbar--github-link:hover {
+  background: rgba(77, 166, 255, 0.1);
+}
+
+/* Seamless Section Transitions */
+.hero+.features,
+.features+.cnoeSection,
+.cnoeSection+.members,
+.members+.newsSection,
+.newsSection+.learnMoreSection {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+
+[data-theme="dark"] body[class*="homepage"] {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+}
+
+/* Enhanced navbar brand area */
+.navbar__brand {
+  display: flex;
+  align-items: center;
+  margin-right: 1rem;
+}
+
+.navbar__title {
+  font-weight: 700;
+  color: var(--ifm-primary);
+  margin-left: 0.5rem;
+  font-size: 1.25rem;
+}
+
+[data-theme="dark"] .navbar__title {
+  color: var(--ifm-primary-300);
+}
+
+/* Enhanced modern search styling with magnifying glass icon */
+.navbar__search {
+  position: relative;
+  transform: translateY(-2px);
+  /* Move search bar 2px up from navbar bottom */
+}
+
+.navbar__search-input {
+  background: rgba(255, 255, 255, 0.2) !important;
+  /* More noticeable background */
+  backdrop-filter: blur(15px) !important;
+  -webkit-backdrop-filter: blur(15px) !important;
+  border: 1px solid rgba(0, 86, 140, 0.25) !important;
+  /* More visible border */
+  border-radius: 12px !important;
+  padding: 0.75rem 1.25rem 0.75rem 2.75rem !important;
+  /* Left padding for search icon */
+  font-size: var(--ifm-font-size-sm) !important;
+  font-family: var(--ifm-font-family) !important;
+  font-weight: 400 !important;
+  color: var(--ifm-neutral-800) !important;
+  width: 15rem !important;
+  /* Slightly wider for better visibility */
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease) !important;
+  box-shadow:
+    0 3px 12px rgba(0, 86, 140, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
+  /* Enhanced shadow for visibility */
+}
+
+/* Magnifying glass search icon */
+.navbar__search::before {
+  content: '';
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 18px;
+  height: 18px;
+  background: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 21L16.514 16.506M19 10.5C19 15.194 15.194 19 10.5 19S2 15.194 2 10.5 5.806 2 10.5 2 19 5.806 19 10.5Z" stroke="%23444444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
+  background-size: contain;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.navbar__search-input::placeholder {
+  color: var(--ifm-neutral-600) !important;
+  font-weight: 400 !important;
+}
+
+/* Dark theme support for search bar */
+[data-theme="dark"] .navbar__search::before {
+  background: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 21L16.514 16.506M19 10.5C19 15.194 15.194 19 10.5 19S2 15.194 2 10.5 5.806 2 10.5 2 19 5.806 19 10.5Z" stroke="%23999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
+  background-size: contain;
+}
+
+[data-theme="dark"] .navbar__search-input {
+  background: rgba(0, 0, 0, 0.3) !important;
+  border-color: rgba(77, 166, 255, 0.2) !important;
+  color: var(--ifm-neutral-200) !important;
+  box-shadow:
+    0 3px 12px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(77, 166, 255, 0.15) !important;
+}
+
+[data-theme="dark"] .navbar__search-input::placeholder {
+  color: var(--ifm-neutral-500) !important;
+}
+
+/* Focus states for enhanced interactivity */
+.navbar__search-input:focus {
+  border-color: var(--ifm-primary) !important;
+  box-shadow:
+    0 0 0 3px rgba(0, 86, 140, 0.15),
+    0 4px 16px rgba(0, 86, 140, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
+  outline: none !important;
+  transform: translateY(-1px) !important;
+  background: rgba(255, 255, 255, 0.25) !important;
+}
+
+[data-theme="dark"] .navbar__search-input:focus {
+  border-color: var(--ifm-primary-300) !important;
+  box-shadow:
+    0 0 0 3px rgba(77, 166, 255, 0.2),
+    0 4px 16px rgba(77, 166, 255, 0.15),
+    inset 0 1px 0 rgba(77, 166, 255, 0.2) !important;
+  background: rgba(0, 0, 0, 0.4) !important;
+}
+
+/* Hover states for better UX */
+.navbar__search-input:hover {
+  border-color: var(--ifm-primary-light) !important;
+  transform: translateY(-1px) !important;
+  box-shadow:
+    0 4px 16px rgba(0, 86, 140, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
+  background: rgba(255, 255, 255, 0.25) !important;
+}
+
+[data-theme="dark"] .navbar__search-input:hover {
+  border-color: var(--ifm-primary-400) !important;
+  box-shadow:
+    0 4px 16px rgba(77, 166, 255, 0.12),
+    inset 0 1px 0 rgba(77, 166, 255, 0.18) !important;
+  background: rgba(0, 0, 0, 0.35) !important;
+}
+
+/* Responsive adjustments for search bar */
+@media (max-width: 996px) {
+  .navbar__search-input {
+    width: 220px !important;
+    padding: 0.65rem 1rem 0.65rem 2.5rem !important;
+  }
+
+  .navbar__search::before {
+    left: 10px;
+    width: 14px;
+    height: 14px;
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar__search-input {
+    width: 180px !important;
+    padding: 0.6rem 0.8rem 0.6rem 2.2rem !important;
+    font-size: 0.8rem !important;
+  }
+
+  .navbar__search::before {
+    left: 8px;
+    width: 12px;
+    height: 12px;
+  }
+}
+
+/* [data-theme="dark"] .navbar__search-input {
+  background: rgba(0, 0, 0, 0.25);
+  border-color: rgba(77, 166, 255, 0.15);
+  color: var(--ifm-neutral-200);
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(77, 166, 255, 0.1);
+}
+
+[data-theme="dark"] .navbar__search-input::placeholder {
+  color: var(--ifm-neutral-500);
+} */
+
+/* .navbar__search-input:focus {
+  border-color: var(--ifm-primary);
+  box-shadow: 
+    0 0 0 3px rgba(0, 86, 140, 0.15),
+    0 4px 12px rgba(0, 86, 140, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  outline: none;
+  transform: translateY(-1px);
+  background: rgba(255, 255, 255, 0.2);
+}
+
+[data-theme="dark"] .navbar__search-input:focus {
+  border-color: var(--ifm-primary-300);
+  box-shadow: 
+    0 0 0 3px rgba(77, 166, 255, 0.15),
+    0 4px 12px rgba(77, 166, 255, 0.12),
+    inset 0 1px 0 rgba(77, 166, 255, 0.15);
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.navbar__search-input:hover {
+  border-color: var(--ifm-primary-light);
+  transform: translateY(-1px);
+  box-shadow: 
+    0 4px 12px rgba(0, 86, 140, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+
+[data-theme="dark"] .navbar__search-input:hover {
+  border-color: var(--ifm-primary-400);
+  box-shadow: 
+    0 4px 12px rgba(77, 166, 255, 0.1),
+    inset 0 1px 0 rgba(77, 166, 255, 0.12);
+}
+
+/* Responsive navbar adjustments */
+@media (max-width: 996px) {
+  .navbar__items {
+    gap: 0.25rem;
+  }
+
+  .navbar--calendar-link,
+  .navbar--slack-link,
+  .navbar--github-link {
+    width: 28px;
+    height: 28px;
+    padding: 4px;
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar__brand {
+    margin-right: 0.5rem;
+  }
+
+  .navbar__title {
+    font-size: 1.1rem;
+  }
+}
+
+Remove any conflicting backgrounds from containers .container,
+.row,
+.col,
+.container-fluid {
+  background: transparent !important;
+}
+
+/* Dark theme animated consistency */
+[data-theme="dark"] .hero,
+[data-theme="dark"] .features,
+[data-theme="dark"] .cnoeSection,
+[data-theme="dark"] .members,
+[data-theme="dark"] .newsSection,
+[data-theme="dark"] .learnMoreSection,
+[data-theme="dark"] .partnerContainer,
+[data-theme="dark"] .modernHero,
+[data-theme="dark"] .heroBanner,
+[data-theme="dark"] .heroContainer,
+[data-theme="dark"] .missionVisionSection,
+[data-theme="dark"] .valuePropositionSection {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+}
+
+[data-theme="dark"] body.homepage,
+[data-theme="dark"] .main-wrapper,
+[data-theme="dark"] .docMainContainer,
+[data-theme="dark"] .docRoot {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+}
+
+/* Seamless Section Transitions */
+.hero+.features,
+.features+.cnoeSection,
+.cnoeSection+.members,
+.members+.newsSection,
+.newsSection+.learnMoreSection {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+/* Override any Docusaurus default backgrounds for homepage */
+.homepage .main-wrapper,
+.homepage .docMainContainer,
+.homepage .docRoot,
+.homepage main {
+  background: #e6f2ff !important;
+}
+
+[data-theme="dark"] .homepage .main-wrapper,
+[data-theme="dark"] .homepage .docMainContainer,
+[data-theme="dark"] .homepage .docRoot,
+[data-theme="dark"] .homepage main {
+  background: #1a202c !important;
+}
+
+/* Ensure all homepage sections have the same background */
+.homepage section,
+.homepage div[class*="section"],
+.homepage div[class*="Section"] {
+  background: #e6f2ff !important;
+}
+
+[data-theme="dark"] .homepage section,
+[data-theme="dark"] .homepage div[class*="section"],
+[data-theme="dark"] .homepage div[class*="Section"] {
+  background: #1a202c !important;
+}
+
+[data-theme="dark"] .homepage section,
+[data-theme="dark"] .homepage div[class*="section"],
+[data-theme="dark"] .homepage div[class*="Section"] {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+}
+
+[data-theme="dark"] .homepage .main-wrapper,
+[data-theme="dark"] .homepage .docMainContainer,
+[data-theme="dark"] .homepage .docRoot,
+[data-theme="dark"] .homepage main {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+}
+
+[data-theme="dark"] body[class*="homepage"] *[class*="Section"],
+[data-theme="dark"] body[class*="homepage"] *[class*="section"],
+[data-theme="dark"] body[class*="homepage"] .features,
+[data-theme="dark"] body[class*="homepage"] .members,
+[data-theme="dark"] body[class*="homepage"] .newsSection,
+[data-theme="dark"] body[class*="homepage"] .cnoeSection,
+[data-theme="dark"] body[class*="homepage"] .learnMoreSection {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+}
+
+/* Ensure reduced motion support for the animated backgrounds */
+@media (prefers-reduced-motion: reduce) {
+
+  body[class*="homepage"] *[class*="Section"],
+  body[class*="homepage"] *[class*="section"],
+  body[class*="homepage"] .features,
+  body[class*="homepage"] .members,
+  body[class*="homepage"] .newsSection,
+  body[class*="homepage"] .cnoeSection,
+  body[class*="homepage"] .learnMoreSection {
+    animation: none !important;
+    background: var(--ifm-primary-50) !important;
+  }
+
+  [data-theme="dark"] body[class*="homepage"] *[class*="Section"],
+  [data-theme="dark"] body[class*="homepage"] *[class*="section"],
+  [data-theme="dark"] body[class*="homepage"] .features,
+  [data-theme="dark"] body[class*="homepage"] .members,
+  [data-theme="dark"] body[class*="homepage"] .newsSection,
+  [data-theme="dark"] body[class*="homepage"] .cnoeSection,
+  [data-theme="dark"] body[class*="homepage"] .learnMoreSection {
+    background: var(--ifm-neutral-900) !important;
+  }
+}
+
+/*
+ Remove white lines between homepage sections */
+.homepage section,
+.homepage .hero,
+.homepage .features,
+.homepage .cnoeSection,
+.homepage .members,
+.homepage .newsSection,
+.homepage .learnMoreSection,
+.homepage main,
+.homepage main>div {
+  margin: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Ensure containers don't add white backgrounds */
+.homepage .container,
+.homepage .container-fluid,
+.homepage .row,
+.homepage .col {
+  background: transparent !important;
+  margin: 0 !important;
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Remove any default Docusaurus spacing */
+.homepage main>div:not(:first-child) {
+  margin-top: 0 !important;
+}
+
+.homepage main>div:not(:last-child) {
+  margin-bottom: 0 !important;
+}
+
+/* Ensure sections touch each other */
+.homepage .hero,
+.homepage .features,
+.homepage .cnoeSection,
+.homepage .members,
+.homepage .newsSection,
+.homepage .learnMoreSection {
+  border-top: none !important;
+  border-bottom: none !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+/* Remove any card or component backgrounds that might show as white lines */
+.homepage .description,
+.homepage .content,
+.homepage .card,
+.homepage .panel {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Ensure the main wrapper doesn't add spacing */
+.homepage .main-wrapper {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* Remove any potential white backgrounds from nested elements */
+.homepage *[style*="background-color: white"],
+.homepage *[style*="background-color: #fff"],
+.homepage *[style*="background: white"],
+.homepage *[style*="background: #fff"] {
+  background: transparent !important;
+}
+
+/* Aggres
+sive fix for white lines between homepage sections */
+.homepage,
+.homepage body,
+.homepage html {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+/* Remove all margins and padding from homepage layout elements */
+.homepage .theme-doc-wrapper,
+.homepage .main-wrapper,
+.homepage main,
+.homepage article,
+.homepage section,
+.homepage div[class*="Section"],
+.homepage div[class*="section"] {
+  margin: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+/* Ensure sections have proper padding only on sides */
+.homepage .hero,
+.homepage .features,
+.homepage .cnoeSection,
+.homepage .members,
+.homepage .newsSection,
+.homepage .learnMoreSection {
+  padding-top: 5rem !important;
+  padding-bottom: 5rem !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  margin: 0 !important;
+  border: none !important;
+}
+
+/* Remove any potential white space from containers */
+.homepage .container,
+.homepage .container-fluid {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+/* Fix any potential Layout component spacing */
+.homepage .theme-doc-root,
+.homepage .docMainContainer,
+.homepage .docRoot {
+  padding: 0 !important;
+  margin: 0 !important;
+  background: transparent !important;
+}
+
+/* Remove any default spacing from React components */
+.homepage>div,
+.homepage main>div,
+.homepage section>div {
+  margin: 0 !important;
+  background: transparent !important;
+}
+
+/* Ensure no white backgrounds leak through */
+.homepage * {
+  box-sizing: border-box;
+}
+
+.homepage *:not(.hero):not(.features):not(.cnoeSection):not(.members):not(.newsSection):not(.learnMoreSection) {
+  background: transparent !important;
+}
+
+/* Force remove any inline styles that might add white backgrounds */
+.homepage [style*="background: white"],
+.homepage [style*="background: #fff"],
+.homepage [style*="background-color: white"],
+.homepage [style*="background-color: #fff"] {
+  background: transparent !important;
+}
+
+/* Remove any potential borders or outlines */
+.homepage * {
+  border: none !important;
+  outline: none !important;
+}
+
+/* Restore only necessary borders for interactive elements */
+.homepage button,
+.homepage .button,
+.homepage input,
+.homepage select,
+.homepage textarea {
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+}
+
+.homepage .theme-doc-wrapper .main-wrapper {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.homepage .theme-doc-wrapper .main-wrapper main {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* Remove any potential spacing from scroll animation wrappers */
+.homepage div[data-scroll-animation] {
+  margin: 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+}
+
+/* Ensure Layout component doesn't add spacing */
+.homepage .theme-layout {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* Remove spacing from any wrapper divs */
+.homepage main>div:first-child,
+.homepage main>div:last-child,
+.homepage main>div:nth-child(n) {
+  margin: 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+}
+
+/* Force sections to be flush against each other */
+.homepage .hero+main,
+.homepage main .features,
+.homepage main .cnoeSection,
+.homepage main .members,
+.homepage main .newsSection,
+.homepage main .learnMoreSection {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  border-top: none !important;
+  border-bottom: none !important;
+}
+
+/* Remove any potential white space from the Partners component wrapper */
+.homepage .members {
+  margin: 0 !important;
+  padding: 5rem 0 !important;
+}
+
+/* Remove any potential white space from the CNOENews component wrapper */
+.homepage .newsSection {
+  margin: 0 !important;
+  padding: 5rem 0 !important;
+}
+
+/* Ensure the learn more section is flush */
+.homepage .learnMoreSection {
+  margin: 0 !important;
+  padding: 4rem 0 !important;
+}
+
+/* 
+Target the exact HTML structure causing white gaps */
+
+/* Remove spacing from the main element */
+.homepage main {
+  margin: 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+  border: none !important;
+}
+
+/* Remove spacing from scroll animation wrapper divs */
+.homepage div[data-scroll-animation] {
+  margin: 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+  border: none !important;
+  display: block !important;
+}
+
+/* Specifically target the transition between main and outside divs */
+.homepage main+div[data-scroll-animation] {
+  margin-top: 0 !important;
+  border-top: none !important;
+}
+
+/* Remove any spacing between consecutive scroll animation divs */
+.homepage div[data-scroll-animation]+div[data-scroll-animation] {
+  margin-top: 0 !important;
+  border-top: none !important;
+}
+
+/* Force the Layout component to have no spacing */
+.homepage .theme-layout {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+/* Remove any potential spacing from the Layout wrapper */
+.homepage .theme-layout>div {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+/* Ensure the header and main are flush */
+.homepage header+main {
+  margin-top: 0 !important;
+  border-top: none !important;
+}
+
+/* Remove any browser default spacing */
+.homepage * {
+  margin-block-start: 0 !important;
+  margin-block-end: 0 !important;
+  margin-inline-start: 0 !important;
+  margin-inline-end: 0 !important;
+}
+
+/* Force all homepage sections to be absolutely flush */
+.homepage .hero,
+.homepage .cnoeSection,
+.homepage .features,
+.homepage .members,
+.homepage .newsSection,
+.homepage .learnMoreSection {
+  display: block !important;
+  margin: 0 !important;
+  padding: 5rem 0 !important;
+  border: none !important;
+}
+
+/* Remove any line-height or font-size that might create spacing */
+.homepage {
+  line-height: 1 !important;
+  font-size: 0 !important;
+}
+
+.homepage * {
+  font-size: initial !important;
+  line-height: initial !important;
+}
+
+/* Nuclear option: remove ALL spacing from ALL elements */
+.homepage,
+.homepage * {
+  box-sizing: border-box !important;
+}
+
+.homepage>*,
+.homepage main>*,
+.homepage section>*,
+.homepage div>* {
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+}
+
+/* Restore only the necessary padding for content */
+.homepage .hero .heroContainer,
+.homepage .cnoeSection .container,
+.homepage .features .container,
+.homepage .members .container,
+.homepage .newsSection .container,
+.homepage .learnMoreSection .container {
+  padding: 2rem !important;
+}
+
+.homepage .cnoeSection {
+  margin-top: -1px !important;
+}
+
+.homepage .features {
+  margin-top: -1px !important;
+}
+
+.homepage .members {
+  margin-top: -1px !important;
+}
+
+.homepage .newsSection {
+  margin-top: -1px !important;
+}
+
+.homepage .learnMoreSection {
+  margin-top: -1px !important;
+}
+
+/* Alternative approach: use negative margins to pull sections together */
+.homepage main>div:not(:first-child) {
+  margin-top: -2px !important;
+}
+
+.homepage main+div {
+  margin-top: -2px !important;
+}
+
+.homepage div[data-scroll-animation]+div[data-scroll-animation] {
+  margin-top: -2px !important;
+}
+
+/* Ensure sections have enough z-index to overlap properly */
+.homepage .hero {
+  z-index: 1;
+  position: relative;
+}
+
+.homepage .cnoeSection {
+  z-index: 2;
+  position: relative;
+}
+
+.homepage .features {
+  z-index: 3;
+  position: relative;
+}
+
+.homepage .members {
+  z-index: 4;
+  position: relative;
+}
+
+.homepage .newsSection {
+  z-index: 5;
+  position: relative;
+}
+
+.homepage .learnMoreSection {
+  z-index: 6;
+  position: relative;
+}
+
+.homepage .hero,
+.homepage .cnoeSection,
+.homepage .features,
+.homepage .members,
+.homepage .newsSection,
+.homepage .learnMoreSection {
+  /* Extend the background beyond the element boundaries */
+  position: relative !important;
+  margin-top: -10px !important;
+  margin-bottom: -10px !important;
+  padding-top: calc(5rem + 10px) !important;
+  padding-bottom: calc(5rem + 10px) !important;
+}
+
+/* Make sure the first section doesn't have negative top margin */
+.homepage .hero {
+  margin-top: 0 !important;
+  padding-top: 5rem !important;
+}
+
+/* Make sure the last section doesn't have negative bottom margin */
+.homepage .learnMoreSection {
+  margin-bottom: 0 !important;
+  padding-bottom: 4rem !important;
+}
+
+[data-theme="dark"] .homepage .cnoeSection::after,
+[data-theme="dark"] .homepage .features::after,
+[data-theme="dark"] .homepage .members::after,
+[data-theme="dark"] .homepage .newsSection::after {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+}
+
+
+[data-theme="dark"] .homepage {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+  background-attachment: fixed !important;
+}
+
+/* Make all sections have transparent backgrounds so the page background shows through */
+.homepage .hero,
+.homepage .cnoeSection,
+.homepage .features,
+.homepage .members,
+.homepage .newsSection,
+.homepage .learnMoreSection {
+  background: transparent !important;
+}
+
+[data-theme="dark"] .homepage html,
+[data-theme="dark"] .homepage body {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+  background-attachment: fixed !important;
+}
+
+/* ===== FLOATING SHAPES SYSTEM ===== */
+
+/* Hero Section Animated Background Elements */
+.hero-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  z-index: 0;
+}
+
+[data-theme="dark"] .hero-gradient-bg {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%);
+  background-size: 400% 400%;
+}
+
+
+/* Performance optimizations for mobile */
+@media (max-width: 768px) {
+
+  .hero-gradient-bg {
+    animation-duration: 20s;
+  }
+}
+
+/* Reduced motion support for background elements */
+@media (prefers-reduced-motion: reduce) {
+  .hero-gradient-bg {
+    animation: none;
+  }
+
+}
+
+/* Gradient Animation Keyframes */
+@keyframes cnoe-gradient-shift {
+
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/*
+ Make docs content area background match the light sidebar background */
+.theme-doc-root [data-theme="light"] .main-wrapper,
+.theme-doc-root [data-theme="light"] .container-fluid,
+.theme-doc-root [data-theme="light"] .theme-doc-markdown,
+.theme-doc-root [data-theme="light"] .col--9,
+.theme-doc-root [data-theme="light"] .docItemContainer_Djhp,
+.theme-doc-root [data-theme="light"] .docItemCol_VOVn,
+.theme-doc-root [data-theme="light"] .docItemWrapper_J1Ly,
+.theme-doc-root [data-theme="light"] .row,
+.theme-doc-root [data-theme="light"] .col,
+.theme-doc-root [data-theme="light"] article,
+.theme-doc-root [data-theme="light"] .markdown {
+  background: var(--ifm-background-color) !important;
+}
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index f337fb599..dea4b1c00 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -3,127 +3,252 @@ import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
-import InformationCNOE  from "@site/src/components/InformationCNOE";
-import ValueProposition  from "@site/src/components/ValueProposition";
+import ValueProposition from "@site/src/components/ValueProposition";
 import MissionVision from "@site/src/components/MissionVision";
-import InteractiveDiagram from "@site/src/components/InteractiveDiagram";
-import Grid from '@mui/material/Grid';
-import HelpIcon from '@mui/icons-material/Help';
 import AliceCarousel from 'react-alice-carousel';
 import 'react-alice-carousel/lib/alice-carousel.css';
-import {useColorMode} from '@docusaurus/theme-common';
-
-
-
+import { useColorMode } from '@docusaurus/theme-common';
+import { initScrollAnimations, initStaggeredAnimations } from '@site/src/utils/scrollAnimations';
 
 import styles from "./index.module.css";
 import CNOENews from "../components/CNOENews";
 import Stacks from "../components/Stacks";
-const { useState, useEffect } = React;
+const { useState, useEffect, useRef } = React;
 
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
-  const [bgImage, setBgImage] = useState('');
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Trigger entrance animations after component mounts
+    const timer = setTimeout(() => setIsVisible(true), 300);
+    return () => clearTimeout(timer);
+  }, []);
 
   return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
-      <Grid container spacing={3} className="perspective-container">
-        <Grid item xs={2.5} className="hero hero--primary bgimg"/>
-        <Grid item xs={5} sm={6} md={7} lg={8} className="hero__subtitle tagline">
-          <Grid container direction="column" spacing={2} style={{display: 'flex'}}>
-            <Grid item style={{display: 'flex', alignItems: 'left'}}>
-              <p>{siteConfig.tagline} &nbsp;&nbsp;
-                <Link
-                  className="button button--primary button--lg"
-                  to="/docs/overview/cnoe" // go to get started
-                  style={{textAlign:"center", width:"200px"}}>
-                  <span style={{verticalAlign:"text-top"}}>
-                  Get Started
-                  </span>
-                </Link></p>
-            </Grid>
-          </Grid>
-        </Grid>
-      </Grid>
+    <header className={clsx("hero hero--primary", styles.heroBanner, styles.modernHero)}>
+      {/* Animated Background Elements */}
+      <div className="hero-background">
+        <div className="hero-gradient-bg"></div>
+      </div>
+
+      {/* Hero Content */}
+      <div className={styles.heroContent}>
+        <div className={styles.heroContainer}>
+          {/* Logo Section with Float Animation */}
+          <div className={clsx(styles.logoSection, isVisible && 'cnoe-animate-fade-in')}>
+            <img
+              src="/img/logo.png"
+              alt="CNOE Logo"
+              className={clsx(styles.heroLogo, 'cnoe-animate-float')}
+            />
+          </div>
+
+          {/* Main Content */}
+          <div className={clsx(styles.heroTextContent, isVisible && 'cnoe-animate-fade-in-up')}>
+            <h1 className={styles.heroTitle}>
+              <span className={styles.heroTitleAccent}>Cloud Native Operational Excellence</span>
+            </h1>
+
+            <p className={styles.heroSubtitle}>
+              An open community collaboration with the goal of helping facilitate platform engineering through the sharing of guidance, tooling, and internal developer platform (IDP) reference architectures.
+            </p>
+
+            {/* CTA Buttons */}
+            <div className={clsx(styles.heroButtons, isVisible && 'cnoe-animate-fade-in-up')}>
+              <Link
+                className={clsx("button button--secondary button--lg", styles.heroButton)}
+                to="/docs/overview/cnoe"
+                style={{ animationDelay: '0.6s' }}>
+                <svg
+                  width="1.2em"
+                  height="1.2em"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  className={styles.buttonIcon}
+                >
+                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+                </svg>
+                Overview
+              </Link>
+              <Link
+                className={clsx("button button--primary button--lg", styles.heroButton, styles.getStartedButton)}
+                to="/docs/reference-implementation/local"
+                style={{ animationDelay: '0.7s' }}>
+                <svg
+                  width="1.2em"
+                  height="1.2em"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  className={styles.buttonIcon}
+                >
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+                Get Started
+              </Link>
+              <Link
+                className={clsx("button button--secondary button--lg", styles.heroButton)}
+                to="/docs/contributing/aws-ref-impl-CONTRIBUTING"
+                style={{ animationDelay: '0.8s' }}>
+                <svg
+                  width="1.2em"
+                  height="1.2em"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  className={styles.buttonIcon}
+                >
+                  <path d="M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2.5l-2.54-7.63A1.5 1.5 0 0 0 18.54 8H16c-.8 0-1.5.7-1.5 1.5v3.5c0 1.1-.9 2-2 2s-2-.9-2-2V10c0-1.1-.9-2-2-2H5.46c-.8 0-1.46.54-1.64 1.37L1.28 15.63 3.78 16l2.54-7.63H8.5V13c0 2.2 1.8 4 4 4s4-1.8 4-4V22h3.5z" />
+                </svg>
+                Contribute
+              </Link>
+            </div>
+
+            {/* Learn More Button */}
+            <div className={clsx(styles.learnMoreHero, isVisible && 'cnoe-animate-fade-in-up')}>
+              <button
+                className={clsx("button button--secondary button--lg", styles.learnMoreButton)}
+                onClick={() => {
+                  const nextSection = document.querySelector('section[class*="features"]');
+                  if (nextSection) {
+                    // Account for navbar height to make section top touch navbar
+                    const navbarHeight = 60;
+                    const targetPosition = nextSection.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
+                    window.scrollTo({
+                      top: targetPosition,
+                      behavior: 'smooth'
+                    });
+                  }
+                }}
+                style={{ animationDelay: '1.2s' }}
+              >
+                <div className={styles.learnMoreContent}>
+                  <span>Learn More</span>
+                  <svg
+                    width="1em"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    className={styles.downArrow}
+                  >
+                    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
+                  </svg>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
     </header>
   );
 }
 
 const Partners = () => {
-  const {colorMode, setColorMode} = useColorMode();
+  const { colorMode, setColorMode } = useColorMode();
   const { siteConfig } = useDocusaurusContext();
+  const [isVisible, setIsVisible] = useState(false);
+  const containerRef = useRef(null);
+
   const handleDragStart = (e) => e.preventDefault();
-  var items =[]
-  if(colorMode == 'light'){
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && containerRef.current) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              setIsVisible(true);
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.2 }
+      );
+
+      observer.observe(containerRef.current);
+
+      return () => {
+        if (containerRef.current) {
+          observer.unobserve(containerRef.current);
+        }
+      };
+    }
+  }, []);
+
+  const createLogoItem = (src, alt) => (
+    <div className={styles.partnerLogoContainer} key={src}>
+      <img
+        src={siteConfig.baseUrl + src}
+        alt={alt}
+        className={styles.partnerLogo}
+        onDragStart={handleDragStart}
+        role="presentation"
+      />
+    </div>
+  );
+
+  var items = [];
+  if (colorMode == 'light') {
     items = [
-      <img src={siteConfig.baseUrl + "img/members/AWS-light.svg"}        width="128px" onDragStart={handleDragStart} role="presentation" />,
-      <img src={siteConfig.baseUrl + "img/members/Adobe-light.svg"}      width="128px" onDragStart={handleDragStart} role="presentation" />,
-      <img src={siteConfig.baseUrl + "img/members/Autodesk-light.svg"}   width="128px" onDragStart={handleDragStart} role="presentation" />,
-      <img src={siteConfig.baseUrl + "img/members/Twilio-light.svg"}     width="128px" onDragStart={handleDragStart} role="presentation" />,
-      <img src={siteConfig.baseUrl + "img/members/Salesforce-light.svg"} width="128px" onDragStart={handleDragStart} role="presentation" />,
-      <img src={siteConfig.baseUrl + "img/members/Intuit-light.svg"}     width="128px" onDragStart={handleDragStart} role="presentation" />,
-      <img src={siteConfig.baseUrl + "img/members/Nike-light.svg"}       width="128px" onDragStart={handleDragStart} role="presentation" />,
-      <img src={siteConfig.baseUrl + "img/members/cisco-light.svg"}      width="128px" onDragStart={handleDragStart} role="presentation" height="128px"/>,
-      <img src={siteConfig.baseUrl + "img/members/Siemens-light.svg"}    width="128px" onDragStart={handleDragStart} role="presentation" height="128px"/>,
+      createLogoItem("img/members/AWS-light.svg", "AWS"),
+      createLogoItem("img/members/Adobe-light.svg", "Adobe"),
+      createLogoItem("img/members/Autodesk-light.svg", "Autodesk"),
+      createLogoItem("img/members/Twilio-light.svg", "Twilio"),
+      createLogoItem("img/members/Salesforce-light.svg", "Salesforce"),
+      createLogoItem("img/members/Intuit-light.svg", "Intuit"),
+      createLogoItem("img/members/Nike-light.svg", "Nike"),
+      createLogoItem("img/members/cisco-light.svg", "Cisco"),
+      createLogoItem("img/members/Siemens-light.svg", "Siemens"),
     ];
-
   } else {
     items = [
-      <img src={siteConfig.baseUrl + "img/members/AWS-dark.svg"}        width="128px" onDragStart={handleDragStart} role="presentation" />,
-      <img src={siteConfig.baseUrl + "img/members/Adobe-dark.svg"}      width="128px" onDragStart={handleDragStart} role="presentation" />,
-      <img src={siteConfig.baseUrl + "img/members/Autodesk-dark.svg"}   width="128px" onDragStart={handleDragStart} role="presentation" />,
-      <img src={siteConfig.baseUrl + "img/members/Twilio-dark.svg"}     width="128px" onDragStart={handleDragStart} role="presentation" />,
-      <img src={siteConfig.baseUrl + "img/members/Salesforce-dark.svg"} width="128px" onDragStart={handleDragStart} role="presentation" />,
-      <img src={siteConfig.baseUrl + "img/members/Intuit-dark.svg"}     width="128px" onDragStart={handleDragStart} role="presentation" />,
-      <img src={siteConfig.baseUrl + "img/members/Nike-dark.svg"}       width="128px" onDragStart={handleDragStart} role="presentation" />,
-      <img src={siteConfig.baseUrl + "img/members/cisco-dark.svg"}      width="128px" onDragStart={handleDragStart} role="presentation" height="128px"/>,
-      <img src={siteConfig.baseUrl + "img/members/Siemens-dark.svg"}    width="128px" onDragStart={handleDragStart} role="presentation" height="128px"/>,
+      createLogoItem("img/members/AWS-dark.svg", "AWS"),
+      createLogoItem("img/members/Adobe-dark.svg", "Adobe"),
+      createLogoItem("img/members/Autodesk-dark.svg", "Autodesk"),
+      createLogoItem("img/members/Twilio-dark.svg", "Twilio"),
+      createLogoItem("img/members/Salesforce-dark.svg", "Salesforce"),
+      createLogoItem("img/members/Intuit-dark.svg", "Intuit"),
+      createLogoItem("img/members/Nike-dark.svg", "Nike"),
+      createLogoItem("img/members/cisco-dark.svg", "Cisco"),
+      createLogoItem("img/members/Siemens-dark.svg", "Siemens"),
     ];
   }
 
   const responsive = {
-    0: { items: 1 },
+    0: { items: 2 },
     568: { items: 3 },
+    768: { items: 4 },
     1024: { items: 6 },
-};
+  };
+
   return (
-    <div className={styles.members}>
-      <h1 className="heading heading-center">Members</h1>
-      <Grid container className="sliderStyle">
-        <Grid item xs={1}/>
-          <Grid item xs={10} >
-            <AliceCarousel mouseTracking
-              items={items}
-              autoPlay={true}
-              disableDotsControls={true}
-              disableSlideInfo={true}
-              disableButtonsControls={true}
-              autoPlayInterval={2500}
-              infinite={true}
-              responsive={responsive}
-            />
-        </Grid>
-        <Grid item xs={1}/>
-      </Grid>
-      &nbsp;
-      <Link
-        className="button button--primary button--lg"
-        to="/docs/contribute"            
-        style={{
-          textAlign: "center",
-          width: "200px",
-          display: "block",
-          margin: "0 auto"
-        }}
-      >
-        <img src="img/github.svg" 
-        style={{verticalAlign:"text-bottom", marginRight:"8px"}}
-        >
-        </img>
-
-        Contribute
-      </Link>
+    <div ref={containerRef} className={clsx(styles.members, isVisible && styles.membersVisible)}>
+      <div className="container">
+        <div className={styles.partnersHeader}>
+          <h2 className={styles.partnersTitle}>Members</h2>
+          <p className={styles.partnersSubtitle}>
+            Led by companies building the internal developer platforms at scale
+          </p>
+        </div>
+
+        <div className={styles.partnersCarousel}>
+          <AliceCarousel
+            mouseTracking
+            items={items}
+            autoPlay={true}
+            disableDotsControls={true}
+            disableSlideInfo={true}
+            disableButtonsControls={true}
+            autoPlayInterval={3000}
+            infinite={true}
+            responsive={responsive}
+            animationType="fadeout"
+            animationDuration={800}
+          />
+        </div>
+
+
+      </div>
     </div>
   );
 }
@@ -131,19 +256,39 @@ const Partners = () => {
 
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
+
+  useEffect(() => {
+    // Initialize scroll-based animations after component mounts
+    const timer = setTimeout(() => {
+      initScrollAnimations();
+      initStaggeredAnimations('.cnoe-stagger-container', '.cnoe-stagger-item', 100);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <Layout
       title={`Cloud Native Operational Excellence ${siteConfig.title}`}
       description="Joint efforts to build Internal Developer Platforms"
     >
       <HomepageHeader />
-      <main>
-        <InformationCNOE/>
-         <ValueProposition />
-        <MissionVision />
+      <main style={{ margin: 0, padding: 0, display: 'flex', flexDirection: 'column' }}>
+        <div data-scroll-animation="fade-in-up" data-animation-delay="200" style={{ margin: 0, padding: 0 }}>
+          <ValueProposition />
+        </div>
+        <div data-scroll-animation="fade-in-up" data-animation-delay="400" style={{ margin: 0, padding: 0 }}>
+          <MissionVision />
+        </div>
+        <div data-scroll-animation="fade-in-up" data-animation-delay="600" style={{ margin: 0, padding: 0 }}>
+          <Partners />
+        </div>
+        <div data-scroll-animation="fade-in-up" data-animation-delay="800" style={{ margin: 0, padding: 0 }}>
+          <CNOENews />
+        </div>
       </main>
-      <Partners/>    
-      <CNOENews />
+
+
     </Layout>
   );
 }
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index ee4d2d893..d1e7bbc7a 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -10,23 +10,553 @@
   overflow: hidden;
 }
 
+/* Modern Hero Section Styles */
+.modernHero {
+  min-height: calc(100vh - var(--ifm-navbar-height));
+  height: calc(100vh - var(--ifm-navbar-height));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.heroContent {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.heroContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 3rem;
+  height: 100%;
+  min-height: calc(100vh - var(--ifm-navbar-height) - 4rem);
+}
+
+.logoSection {
+  opacity: 0;
+  animation-delay: 0.3s;
+}
+
+.heroLogo {
+  width: 400px;
+  height: auto;
+  filter:
+    drop-shadow(0 10px 20px rgba(0, 86, 140, 0.2)) drop-shadow(0 20px 40px rgba(0, 86, 140, 0.15)) drop-shadow(0 30px 60px rgba(0, 86, 140, 0.1));
+}
+
+.heroTextContent {
+  max-width: 800px;
+  opacity: 0;
+  animation-delay: 0.6s;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.heroTitle {
+  font-size: var(--ifm-font-size-5xl);
+  font-weight: 700;
+  line-height: 1.1;
+  margin-bottom: 1.5rem;
+  color: var(--ifm-neutral-900);
+  letter-spacing: -0.02em;
+  text-shadow:
+    0 2px 4px rgba(0, 86, 140, 0.1),
+    0 4px 8px rgba(0, 86, 140, 0.08),
+    0 0 20px rgba(255, 152, 0, 0.1);
+}
+
+[data-theme="dark"] .heroTitle {
+  color: var(--ifm-neutral-100) !important;
+  text-shadow:
+    0 2px 4px rgba(77, 166, 255, 0.15),
+    0 4px 8px rgba(77, 166, 255, 0.12),
+    0 0 20px rgba(255, 152, 0, 0.15);
+}
+
+.heroTitleAccent {
+  background: linear-gradient(135deg, var(--ifm-primary) 0%, var(--ifm-primary-600) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: 800;
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.heroSubtitle {
+  font-size: var(--ifm-font-size-2xl);
+  line-height: 1.5;
+  color: var(--ifm-neutral-700);
+  margin-bottom: 2.5rem;
+  font-weight: 500;
+  text-shadow: 0 1px 2px rgba(0, 86, 140, 0.05);
+}
+
+[data-theme="dark"] .heroSubtitle {
+  color: var(--ifm-neutral-400) !important;
+  text-shadow: 0 1px 2px rgba(77, 166, 255, 0.08);
+}
+
+.heroButtons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  opacity: 0;
+  animation-delay: 0.9s;
+}
+
+/* Base Hero Button Styles - All buttons have same rounded shape */
+.heroButton {
+  min-width: 180px;
+  padding: 0.75rem 2rem;
+  font-size: var(--ifm-font-size-lg);
+  font-weight: 600;
+  border-radius: 50px !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  box-shadow: 0 4px 15px rgba(0, 86, 140, 0.1);
+  border: 2px solid var(--ifm-primary);
+}
+
+.heroButton:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(0, 86, 140, 0.25);
+}
+
+[data-theme="dark"] .heroButton {
+  box-shadow: 0 4px 15px rgba(77, 166, 255, 0.1);
+  border-color: var(--ifm-primary-300);
+}
+
+[data-theme="dark"] .heroButton:hover {
+  box-shadow: 0 8px 25px rgba(77, 166, 255, 0.25);
+}
+
+/* Get Started Button - Has gradient by default */
+.getStartedButton {
+  background: linear-gradient(45deg, var(--ifm-accent-600) 0%, var(--ifm-accent-700) 20%, var(--ifm-accent-800) 80%, var(--ifm-accent-900) 100%) !important;
+  color: white !important;
+  border-color: transparent !important;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease) !important;
+}
+
+.getStartedButton:hover {
+  background: linear-gradient(135deg, var(--ifm-accent-600) 0%, var(--ifm-accent-700) 20%, var(--ifm-accent-800) 80%, var(--ifm-accent-900) 100%) !important;
+  color: white !important;
+  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.8);
+}
+
+[data-theme="dark"] .getStartedButton {
+  background: linear-gradient(135deg, var(--ifm-accent) 0%, var(--ifm-accent-700) 100%) !important;
+  color: white !important;
+  border-color: transparent !important;
+}
+
+[data-theme="dark"] .getStartedButton:hover {
+  background: linear-gradient(135deg, var(--ifm-accent-600) 0%, var(--ifm-accent-800) 100%) !important;
+  color: white !important;
+  box-shadow: 0 8px 25px rgba(255, 152, 0, 0.4);
+}
+
+/* Overview and Join Community Buttons - Gradient on hover */
+.heroButton:not(.getStartedButton) {
+  background: transparent;
+}
+
+.heroButton:not(.getStartedButton):hover {
+  background: linear-gradient(135deg, var(--ifm-accent-600) 0%, var(--ifm-accent-700) 20%, var(--ifm-accent-800) 80%, var(--ifm-accent-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 3s ease infinite !important;
+  color: white !important;
+  border-color: transparent !important;
+  box-shadow: 0 8px 25px rgba(255, 140, 90, 0.8);
+}
+
+[data-theme="dark"] .heroButton:not(.getStartedButton) {
+  border-color: var(--ifm-primary-300);
+}
+
+[data-theme="dark"] .heroButton:not(.getStartedButton):hover {
+  background: linear-gradient(45deg, #1a8dff 0%, #ff6b35 50%, #1a8dff 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 3s ease infinite !important;
+  color: white !important;
+  border-color: transparent !important;
+  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.8);
+}
+
+/* Remove Get Started button gradient when other buttons are hovered */
+.heroButtons:hover .getStartedButton:not(:hover) {
+  background: transparent !important;
+  color: var(--ifm-primary) !important;
+  border-color: var(--ifm-primary) !important;
+  animation: none !important;
+}
+
+[data-theme="dark"] .heroButtons:hover .getStartedButton:not(:hover) {
+  color: var(--ifm-primary-300) !important;
+  border-color: var(--ifm-primary-300) !important;
+}
+
+/* Remove Get Started button gradient when Learn More button is hovered */
+.learnMoreButton:hover~.heroButtons .getStartedButton,
+.heroTextContent:has(.learnMoreButton:hover) .heroButtons .getStartedButton {
+  background: transparent !important;
+  color: var(--ifm-primary) !important;
+  border-color: var(--ifm-primary) !important;
+  animation: none !important;
+}
+
+[data-theme="dark"] .learnMoreButton:hover~.heroButtons .getStartedButton,
+[data-theme="dark"] .heroTextContent:has(.learnMoreButton:hover) .heroButtons .getStartedButton {
+  color: var(--ifm-primary-300) !important;
+  border-color: var(--ifm-primary-300) !important;
+}
+
+/* Button Icons */
+.buttonIcon {
+  transition: transform var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.heroButton:hover .buttonIcon {
+  transform: scale(1.1);
+}
+
+/* Learn More Button in Hero */
+.learnMoreHero {
+  display: flex;
+  justify-content: center;
+  margin-top: auto;
+  padding-top: 3rem;
+  opacity: 1;
+  animation-delay: 1.2s;
+}
+
+.learnMoreButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 160px;
+  padding: 0.75rem 1.5rem;
+  font-size: var(--ifm-font-size-lg);
+  font-weight: 700;
+  border: none;
+  background: transparent;
+  color: var(--ifm-primary);
+  border-radius: 0;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+  cursor: pointer;
+  box-shadow: none;
+  text-shadow: 0 2px 4px rgba(0, 86, 140, 0.1);
+  letter-spacing: 0.5px;
+}
+
+[data-theme="dark"] .learnMoreButton {
+  color: var(--ifm-primary-300);
+  text-shadow: 0 2px 4px rgba(77, 166, 255, 0.2);
+}
+
+.learnMoreButton:hover {
+  background: transparent;
+  color: var(--ifm-accent-900);
+  transform: translateY(-3px);
+  box-shadow: none;
+  border-color: transparent;
+  text-shadow: 0 4px 8px rgba(0, 86, 140, 0.3), 0 0 20px rgba(0, 86, 140, 0.2);
+  filter: brightness(1.2);
+  border-color: transparent !important;
+}
+
+[data-theme="dark"] .learnMoreButton:hover {
+  background: transparent;
+  color: var(--ifm-primary-300);
+  border-color: transparent;
+  text-shadow: 0 4px 8px rgba(77, 166, 255, 0.4), 0 0 20px rgba(77, 166, 255, 0.3);
+  filter: brightness(1.3);
+}
+
+.learnMoreContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.downArrow {
+  transition: transform var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.learnMoreButton:hover .downArrow {
+  transform: translateY(3px);
+}
+
+/* Mobile Responsive */
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;
   }
+
+  .modernHero {
+    min-height: 80vh;
+    padding: 2rem 0;
+  }
+
+  .heroTitle {
+    font-size: var(--ifm-font-size-3xl);
+  }
+
+  .heroSubtitle {
+    font-size: var(--ifm-font-size-lg);
+  }
+
+  .heroLogo {
+    width: 200px;
+  }
+
+  .heroButtons {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .heroButton {
+    width: 100%;
+    max-width: 280px;
+  }
+
+  .learnMoreHero {
+    padding-top: 2rem;
+  }
+
+  .learnMoreButton {
+    min-width: 160px;
+    padding: 0.65rem 1.5rem;
+    font-size: var(--ifm-font-size-base);
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .heroTitle {
+    font-size: var(--ifm-font-size-2xl);
+  }
+
+  .heroSubtitle {
+    font-size: var(--ifm-font-size-base);
+  }
+
+  .heroContainer {
+    gap: 2rem;
+  }
 }
+
 .mybutton:hover {
   cursor: pointer;
 }
+
 .buttons {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+/* Modern Partners Section */
 .members {
-  margin-top: 40px;
-  padding: 40px 0;
-  background-color: var(--ifm-color-neutral-lighter); /* Uses Docusaurus theme color */
+  padding: 5rem 0;
+  background: linear-gradient(135deg,
+      var(--ifm-primary-50) 0%,
+      var(--ifm-primary-100) 25%,
+      var(--ifm-neutral-50) 50%,
+      var(--ifm-primary-100) 75%,
+      var(--ifm-primary-50) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+  position: relative;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 0.8s var(--ifm-easing-ease);
+}
+
+[data-theme="dark"] .members {
+  background: linear-gradient(135deg,
+      var(--ifm-neutral-900) 0%,
+      var(--ifm-primary-900) 25%,
+      var(--ifm-neutral-800) 50%,
+      var(--ifm-primary-800) 75%,
+      var(--ifm-neutral-900) 100%) !important;
+  background-size: 400% 400% !important;
+  animation: cnoe-gradient-shift 15s ease infinite !important;
+}
+
+.members.membersVisible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.members::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23cbd5e1" fill-opacity="0.05"><rect width="2" height="2" x="19" y="19"/></g></svg>') repeat;
+  opacity: 0.8;
+}
+
+[data-theme="dark"] .members::before {
+  background: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23475569" fill-opacity="0.05"><rect width="2" height="2" x="19" y="19"/></g></svg>') repeat;
+}
+
+/* Partners Header */
+.partnersHeader {
+  text-align: center;
+  margin-bottom: 3rem;
+  position: relative;
+  z-index: 2;
+}
+
+.partnersTitle {
+  font-size: var(--ifm-font-size-3xl);
+  font-weight: 700;
+  color: var(--ifm-neutral-900);
+  margin-bottom: 1rem;
+  letter-spacing: -0.02em;
+}
+
+[data-theme="dark"] .partnersTitle {
+  color: var(--ifm-neutral-100) !important;
 }
 
+.partnersSubtitle {
+  font-size: var(--ifm-font-size-lg);
+  color: var(--ifm-neutral-700);
+  max-width: 500px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+[data-theme="dark"] .partnersSubtitle {
+  color: var(--ifm-neutral-400) !important;
+}
+
+/* Partners Carousel */
+.partnersCarousel {
+  margin: 3rem 0;
+  position: relative;
+  z-index: 2;
+}
+
+.partnerLogoContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  height: 120px;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.partnerLogo {
+  width: auto;
+  height: auto;
+  filter: grayscale(100%) opacity(0.7);
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.partnerLogoContainer:hover .partnerLogo {
+  filter: grayscale(0%) opacity(1);
+  transform: scale(1.1);
+}
+
+/* Alice Carousel Customization */
+.partnersCarousel .alice-carousel {
+  padding: 1rem 0;
+}
+
+.partnersCarousel .alice-carousel__stage {
+  padding: 0 2rem;
+}
+
+.partnersCarousel .alice-carousel__stage-item {
+  opacity: 0.6;
+  transition: opacity var(--ifm-duration-normal) var(--ifm-easing-ease);
+}
+
+.partnersCarousel .alice-carousel__stage-item.__active {
+  opacity: 1;
+}
+
+/* Partners Action */
+.partnersAction {
+  text-align: center;
+  position: relative;
+  z-index: 2;
+}
+
+.partnersAction .button {
+  min-width: 200px;
+  font-weight: 600;
+  box-shadow: var(--ifm-shadow-lg);
+}
+
+.partnersAction .button:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--ifm-shadow-xl);
+}
+
+/* Mobile Responsive */
+@media (max-width: 996px) {
+  .members {
+    padding: 3rem 0;
+  }
+
+  .partnersTitle {
+    font-size: var(--ifm-font-size-2xl);
+  }
+
+  .partnersSubtitle {
+    font-size: var(--ifm-font-size-base);
+  }
+
+  .partnerLogoContainer {
+    padding: 1rem;
+    height: 100px;
+  }
+
+  .partnerLogo {
+    max-width: 100px;
+    max-height: 60px;
+  }
+}
+
+@media (max-width: 576px) {
+  .partnersHeader {
+    margin-bottom: 2rem;
+  }
+
+  .partnersTitle {
+    font-size: var(--ifm-font-size-xl);
+  }
+
+  .partnerLogoContainer {
+    height: 80px;
+  }
+
+  .partnerLogo {
+    max-width: 80px;
+    max-height: 50px;
+  }
+}
\ No newline at end of file
diff --git a/src/theme/ColorModeToggle/index.js b/src/theme/ColorModeToggle/index.js
new file mode 100644
index 000000000..5d42a9517
--- /dev/null
+++ b/src/theme/ColorModeToggle/index.js
@@ -0,0 +1,113 @@
+import React from 'react';
+import clsx from 'clsx';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import {translate} from '@docusaurus/Translate';
+import IconLightMode from '@theme/Icon/LightMode';
+import IconDarkMode from '@theme/Icon/DarkMode';
+import IconSystemColorMode from '@theme/Icon/SystemColorMode';
+import styles from './styles.module.css';
+// The order of color modes is defined here, and can be customized with swizzle
+function getNextColorMode(colorMode, respectPrefersColorScheme) {
+  // 2-value transition
+  if (!respectPrefersColorScheme) {
+    return colorMode === 'dark' ? 'light' : 'dark';
+  }
+  // 3-value transition
+  switch (colorMode) {
+    case null:
+      return 'light';
+    case 'light':
+      return 'dark';
+    case 'dark':
+      return null;
+    default:
+      throw new Error(`unexpected color mode ${colorMode}`);
+  }
+}
+function getColorModeLabel(colorMode) {
+  switch (colorMode) {
+    case null:
+      return translate({
+        message: 'system mode',
+        id: 'theme.colorToggle.ariaLabel.mode.system',
+        description: 'The name for the system color mode',
+      });
+    case 'light':
+      return translate({
+        message: 'light mode',
+        id: 'theme.colorToggle.ariaLabel.mode.light',
+        description: 'The name for the light color mode',
+      });
+    case 'dark':
+      return translate({
+        message: 'dark mode',
+        id: 'theme.colorToggle.ariaLabel.mode.dark',
+        description: 'The name for the dark color mode',
+      });
+    default:
+      throw new Error(`unexpected color mode ${colorMode}`);
+  }
+}
+function getColorModeAriaLabel(colorMode) {
+  return translate(
+    {
+      message: 'Switch between dark and light mode (currently {mode})',
+      id: 'theme.colorToggle.ariaLabel',
+      description: 'The ARIA label for the color mode toggle',
+    },
+    {
+      mode: getColorModeLabel(colorMode),
+    },
+  );
+}
+function CurrentColorModeIcon() {
+  // 3 icons are always rendered for technical reasons
+  // We use "data-theme-choice" to render the correct one
+  // This must work even before React hydrates
+  return (
+    <>
+      <IconLightMode
+        // a18y is handled at the button level,
+        // not relying on button content (svg icons)
+        aria-hidden
+        className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
+      />
+      <IconDarkMode
+        aria-hidden
+        className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
+      />
+      <IconSystemColorMode
+        aria-hidden
+        className={clsx(styles.toggleIcon, styles.systemToggleIcon)}
+      />
+    </>
+  );
+}
+function ColorModeToggle({
+  className,
+  buttonClassName,
+  respectPrefersColorScheme,
+  value,
+  onChange,
+}) {
+  const isBrowser = useIsBrowser();
+  return (
+    <div className={clsx(styles.toggle, className)}>
+      <button
+        className={clsx(
+          styles.toggleButton,
+          !isBrowser && styles.toggleButtonDisabled,
+          buttonClassName,
+        )}
+        type="button"
+        onClick={() =>
+          onChange(getNextColorMode(value, respectPrefersColorScheme))
+        }
+        disabled={!isBrowser}
+        aria-label={getColorModeAriaLabel(value)}>
+        <CurrentColorModeIcon />
+      </button>
+    </div>
+  );
+}
+export default React.memo(ColorModeToggle);
diff --git a/src/theme/ColorModeToggle/styles.module.css b/src/theme/ColorModeToggle/styles.module.css
new file mode 100644
index 000000000..4078ae4f7
--- /dev/null
+++ b/src/theme/ColorModeToggle/styles.module.css
@@ -0,0 +1,105 @@
+/* Match the exact styling pattern of other navbar icons */
+.toggle {
+  width: auto !important;
+  height: 69% !important;
+  padding: 0.4rem 1rem !important;
+  margin: 0 0.25rem !important;
+  border-radius: 8px !important;
+  transition: all var(--ifm-duration-normal) var(--ifm-easing-ease) !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  font-weight: 500 !important;
+  color: var(--ifm-neutral-900) !important;
+  text-decoration: none !important;
+  position: relative !important;
+}
+
+.toggle:hover {
+  background: rgba(0, 86, 140, 0.08) !important;
+  color: var(--ifm-neutral-900) !important;
+  transform: translateX(4px) !important;
+  box-shadow: var(--ifm-shadow-sm) !important;
+}
+
+[data-theme="dark"] .toggle:hover {
+  background: rgba(77, 166, 255, 0.1) !important;
+}
+
+/* Add the orange accent bar like other navbar icons */
+.toggle:hover::after {
+  content: '';
+  position: absolute;
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80%;
+  height: 3px;
+  background: var(--ifm-accent, #FF9800);
+  border-radius: 2px;
+  z-index: 10;
+}
+
+.toggleButton {
+  /* Complete reset of all button styles */
+  all: unset !important;
+  align-items: center !important;
+  display: flex !important;
+  justify-content: center !important;
+  width: 100% !important;
+  height: 100% !important;
+  border-radius: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  box-shadow: none !important;
+  color: inherit !important;
+  cursor: pointer !important;
+  font: inherit !important;
+  text-align: inherit !important;
+  text-decoration: none !important;
+  outline: none !important;
+}
+
+.toggleButton:hover,
+.toggleButton:focus,
+.toggleButton:active,
+.toggleButton:visited {
+  background: transparent !important;
+  box-shadow: none !important;
+  color: inherit !important;
+  border: none !important;
+  outline: none !important;
+  text-decoration: none !important;
+}
+
+.toggleIcon {
+  display: none !important;
+  width: 24px !important;
+  height: 25px !important;
+}
+
+[data-theme-choice='system'] .systemToggleIcon,
+[data-theme-choice='light'] .lightToggleIcon,
+[data-theme-choice='dark'] .darkToggleIcon {
+  display: initial !important;
+}
+
+.toggleButtonDisabled {
+  cursor: not-allowed !important;
+}
+
+/* Nuclear option - override any possible conflicting styles */
+.toggle *,
+.toggle *::before,
+.toggle *::after {
+  box-sizing: border-box !important;
+}
+
+/* Ensure the hover effect only applies to the container, not the button */
+.toggle:hover .toggleButton {
+  background: transparent !important;
+}
+
+/* Removed orange bar to match GitHub icon pattern */
\ No newline at end of file
diff --git a/src/utils/scrollAnimations.js b/src/utils/scrollAnimations.js
new file mode 100644
index 000000000..1cf227a32
--- /dev/null
+++ b/src/utils/scrollAnimations.js
@@ -0,0 +1,121 @@
+/**
+ * Scroll-based animation utilities for CNOE website
+ * Implements intersection observer for reveal animations
+ */
+
+// Intersection Observer for scroll-based animations
+export const createScrollObserver = (callback, options = {}) => {
+  const defaultOptions = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px',
+    ...options
+  };
+
+  if (typeof window !== 'undefined' && 'IntersectionObserver' in window) {
+    return new IntersectionObserver(callback, defaultOptions);
+  }
+  return null;
+};
+
+// Initialize scroll animations for elements
+export const initScrollAnimations = () => {
+  if (typeof window === 'undefined') return;
+
+  // Check for reduced motion preference
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (prefersReducedMotion) return;
+
+  const observer = createScrollObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const element = entry.target;
+        const animationType = element.dataset.scrollAnimation || 'fade-in-up';
+        const delay = element.dataset.animationDelay || '0';
+        
+        // Add animation class with delay
+        setTimeout(() => {
+          element.classList.add(`cnoe-animate-${animationType}`);
+          element.classList.add('cnoe-animate-visible');
+        }, parseInt(delay));
+        
+        // Stop observing this element
+        observer.unobserve(element);
+      }
+    });
+  });
+
+  // Find all elements with scroll animation attributes
+  const animatedElements = document.querySelectorAll('[data-scroll-animation]');
+  animatedElements.forEach((element) => {
+    observer.observe(element);
+  });
+
+  return observer;
+};
+
+// Staggered animation utility for card grids
+export const initStaggeredAnimations = (containerSelector, itemSelector, delay = 100) => {
+  if (typeof window === 'undefined') return;
+
+  const containers = document.querySelectorAll(containerSelector);
+  
+  containers.forEach((container) => {
+    const items = container.querySelectorAll(itemSelector);
+    
+    const observer = createScrollObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const containerElement = entry.target;
+          const items = containerElement.querySelectorAll(itemSelector);
+          
+          items.forEach((item, index) => {
+            setTimeout(() => {
+              item.classList.add('cnoe-animate-fade-in-up');
+              item.classList.add('cnoe-animate-visible');
+            }, index * delay);
+          });
+          
+          observer.unobserve(containerElement);
+        }
+      });
+    });
+    
+    observer.observe(container);
+  });
+};
+
+// React hook for scroll animations
+export const useScrollAnimation = (ref, animationType = 'fade-in-up', delay = 0) => {
+  if (typeof window === 'undefined') return;
+
+  React.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (prefersReducedMotion) {
+      element.classList.add('cnoe-animate-visible');
+      return;
+    }
+
+    const observer = createScrollObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setTimeout(() => {
+            element.classList.add(`cnoe-animate-${animationType}`);
+            element.classList.add('cnoe-animate-visible');
+          }, delay);
+          observer.unobserve(element);
+        }
+      });
+    });
+
+    observer.observe(element);
+
+    return () => {
+      if (observer) {
+        observer.unobserve(element);
+      }
+    };
+  }, [ref, animationType, delay]);
+};
\ No newline at end of file
diff --git a/static/img/kubernetes.svg b/static/img/kubernetes.svg
new file mode 100644
index 000000000..8ddda046d
--- /dev/null
+++ b/static/img/kubernetes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115.527 112.497"><path d="M36.885 110.7a8.811 8.811 0 01-6.947-3.361L3.793 74.849a8.77 8.77 0 01-1.718-7.619l9.337-40.562a8.837 8.837 0 014.855-6.051L54.066 2.54a8.864 8.864 0 017.769 0l37.8 18a8.837 8.837 0 014.855 6.051l9.337 40.562a9.011 9.011 0 01-1.718 7.619l-26.146 32.496a9.043 9.043 0 01-6.947 3.361l-42.13.075z" fill="#326de6"/><path d="M57.876 3.511a7.307 7.307 0 013.063.672l37.8 18a7.254 7.254 0 013.884 4.855l9.335 40.562a6.985 6.985 0 01-1.419 6.125l-26.145 32.497a7.116 7.116 0 01-5.6 2.689H36.885a7.116 7.116 0 01-5.6-2.689L5.138 73.728A7.479 7.479 0 013.719 67.6l9.337-40.562a7.133 7.133 0 013.884-4.855l37.8-18.077a9 9 0 013.137-.6zm0-3.511a11.3 11.3 0 00-4.631 1.046l-37.8 18.077a10.579 10.579 0 00-5.825 7.246L.283 66.931a10.592 10.592 0 002.092 9.113l26.145 32.494a10.552 10.552 0 008.29 3.962h41.907a10.552 10.552 0 008.292-3.959l26.145-32.494a10.537 10.537 0 002.092-9.113l-9.337-40.562a10.579 10.579 0 00-5.827-7.246l-37.65-18.08A10.708 10.708 0 0057.876 0z" fill="#fff"/><path d="M95.748 64.391h-.075c-.075 0-.149 0-.149-.075-.149 0-.3-.075-.448-.075a10.207 10.207 0 00-1.419-.149 2.8 2.8 0 01-.747-.075h-.075a19.716 19.716 0 01-4.034-.672 1.455 1.455 0 01-.822-.822c0-.075-.075-.075-.075-.149l-.971-.3a29.547 29.547 0 00-.523-10.533 30.779 30.779 0 00-4.183-9.786l.747-.672v-.149a1.688 1.688 0 01.374-1.12A21.791 21.791 0 0186.71 37.5c.224-.149.448-.224.672-.373a11.245 11.245 0 001.27-.747c.075-.075.224-.149.373-.3.075-.075.149-.075.149-.149a2.5 2.5 0 00.523-3.361 2.125 2.125 0 00-1.718-.822 2.776 2.776 0 00-1.643.6l-.149.149c-.149.075-.224.224-.373.3a12.4 12.4 0 00-.971 1.046 3.451 3.451 0 01-.523.523 18.992 18.992 0 01-2.988 2.689 1.2 1.2 0 01-.672.224.947.947 0 01-.448-.075h-.149l-.9.6a36.276 36.276 0 00-3.063-2.845 29.832 29.832 0 00-15.612-6.2l-.075-.971-.149-.149a1.561 1.561 0 01-.6-.971 26.212 26.212 0 01.224-4.034v-.075a2.654 2.654 0 01.149-.747c.075-.448.149-.9.224-1.419v-.672A2.279 2.279 0 0056.307 18a2.366 2.366 0 00-.672 1.718v.6a4.349 4.349 0 00.224 1.419c.075.224.075.448.149.747v.075a19.3 19.3 0 01.224 4.034 1.561 1.561 0 01-.6.971l-.149.149-.075.971a37.533 37.533 0 00-4.034.6 28.8 28.8 0 00-14.79 8.366l-.747-.523h-.147c-.149 0-.3.075-.448.075a1.2 1.2 0 01-.672-.224 19.809 19.809 0 01-2.988-2.764 3.451 3.451 0 00-.523-.523 12.4 12.4 0 00-.971-1.046c-.075-.075-.224-.149-.373-.3-.075-.075-.149-.075-.149-.149a2.61 2.61 0 00-1.643-.6 2.125 2.125 0 00-1.718.822 2.5 2.5 0 00.523 3.361c.075 0 .075.075.149.075.149.075.224.224.373.3a11.245 11.245 0 001.27.747 3.028 3.028 0 01.672.373 21.791 21.791 0 013.361 2.316 1.372 1.372 0 01.373 1.12v.149l.747.672a2.621 2.621 0 00-.373.6 29.093 29.093 0 00-4.183 19.721l-.971.3c0 .075-.075.075-.075.149a1.737 1.737 0 01-.822.822 18.865 18.865 0 01-4.034.672h-.075a2.541 2.541 0 00-.747.075 10.207 10.207 0 00-1.419.149c-.149 0-.3.075-.448.075a.274.274 0 00-.224.075 2.45 2.45 0 00-1.942 2.764 2.3 2.3 0 002.39 1.718 1.645 1.645 0 00.6-.075c.075 0 .149 0 .149-.075.149 0 .3-.075.448-.075a7.19 7.19 0 001.343-.526c.224-.075.448-.224.672-.3h.075a18.35 18.35 0 013.884-1.12h.149a1.663 1.663 0 01.971.373c.075 0 .075.075.149.075l1.046-.149a29.544 29.544 0 009.786 14.043 30.239 30.239 0 003.212 2.166l-.448.971c0 .075.075.075.075.149a1.534 1.534 0 01.149 1.2 21.061 21.061 0 01-1.942 3.511v.075c-.149.224-.3.373-.448.6-.3.373-.523.747-.822 1.2a1.633 1.633 0 00-.224.373.261.261 0 01-.075.149 2.363 2.363 0 00.971 3.212 1.989 1.989 0 00.9.224 2.686 2.686 0 002.241-1.419.261.261 0 01.075-.149 1.633 1.633 0 01.224-.373 14.147 14.147 0 00.448-1.345l.224-.672a17.555 17.555 0 011.569-3.735 1.918 1.918 0 01.971-.672c.075 0 .075 0 .149-.075l.523-.971a29.185 29.185 0 0010.458 1.942 27.114 27.114 0 006.5-.747 33.2 33.2 0 003.884-1.12l.448.822c.075 0 .075 0 .149.075a1.385 1.385 0 01.971.672 25.574 25.574 0 011.566 3.725v.075l.224.672a9.461 9.461 0 00.448 1.345c.075.149.149.224.224.373a.261.261 0 00.075.149 2.538 2.538 0 002.241 1.419 1.989 1.989 0 00.9-.224A2.225 2.225 0 0077 93.075a2.7 2.7 0 00-.149-1.867c0-.075-.075-.075-.075-.149a1.633 1.633 0 00-.224-.373 6.769 6.769 0 00-.822-1.2c-.149-.224-.3-.373-.448-.6v-.075A16.766 16.766 0 0173.34 85.3a2.081 2.081 0 01.075-1.2c0-.075.075-.075.075-.149l-.373-.9a29.635 29.635 0 0013-16.359l.9.149c.075 0 .075-.075.149-.075a1.9 1.9 0 01.971-.373h.149a18.35 18.35 0 013.884 1.12h.075c.224.075.448.224.672.3a7.19 7.19 0 001.345.523c.149 0 .3.075.448.075a.274.274 0 01.224.075 1.645 1.645 0 00.6.075 2.514 2.514 0 002.39-1.718 2.875 2.875 0 00-2.166-2.465zm-34.586-3.66L57.876 62.3l-3.287-1.569-.822-3.511 2.241-2.839h3.66l2.241 2.839-.747 3.511zm19.5-7.769a23.554 23.554 0 01.523 7.545L69.753 57.22a2.025 2.025 0 01-1.419-2.39 1.781 1.781 0 01.448-.822l9.039-8.142a23.934 23.934 0 012.839 7.1zm-6.427-11.579l-9.786 6.947a1.989 1.989 0 01-2.614-.448 1.658 1.658 0 01-.373-.822l-.672-12.176a22.673 22.673 0 0113.446 6.5zm-21.663-6.125c.822-.149 1.569-.3 2.39-.448l-.672 11.952a2.044 2.044 0 01-2.017 1.938 1.774 1.774 0 01-.9-.224l-9.935-7.1a22.788 22.788 0 0111.13-6.125zM37.856 45.865l8.889 7.918a1.989 1.989 0 01.224 2.764 1.487 1.487 0 01-.9.6l-11.574 3.359a24.047 24.047 0 013.361-14.641zm-2.017 20.244l11.877-2.017a2.014 2.014 0 012.092 1.569 2.134 2.134 0 01-.075 1.2l-4.556 10.976a23.545 23.545 0 01-9.337-11.728zM63.1 80.974a24.4 24.4 0 01-5.229.6 25.309 25.309 0 01-7.545-1.2l5.9-10.682a1.961 1.961 0 012.39-.523 3.184 3.184 0 01.9.822l5.752 10.383c-.672.224-1.419.373-2.166.6zm14.571-10.383a23.708 23.708 0 01-7.171 7.246l-4.706-11.28a2.011 2.011 0 011.046-2.316 2.386 2.386 0 011.046-.224l11.952 2.017a15.033 15.033 0 01-2.166 4.557z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/static/img/logo-dark-no-name.png b/static/img/logo-dark-no-name.png
new file mode 100644
index 000000000..31b4ffe18
Binary files /dev/null and b/static/img/logo-dark-no-name.png differ
diff --git a/static/img/logo-no-name.png b/static/img/logo-no-name.png
new file mode 100644
index 000000000..82f4320b9
Binary files /dev/null and b/static/img/logo-no-name.png differ
diff --git a/yarn.lock b/yarn.lock
index fb89d8b11..08d05edee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5511,6 +5511,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 fsevents@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -8095,6 +8100,20 @@ pkg-types@^2.0.1:
     exsolve "^1.0.7"
     pathe "^2.0.3"
 
+playwright-core@1.54.1:
+  version "1.54.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.54.1.tgz#d32edcce048c9d83ceac31e294a7b60ef586960b"
+  integrity sha512-Nbjs2zjj0htNhzgiy5wu+3w09YetDx5pkrpI/kZotDlDUaYk0HVA5xrBVPdow4SAUIlhgKcJeJg4GRKW6xHusA==
+
+playwright@^1.54.1:
+  version "1.54.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.54.1.tgz#128d66a8d5182b5330e6440be3a72ca313362788"
+  integrity sha512-peWpSwIBmSLi6aW2auvrUtf2DqY16YYcCMO8rTVx486jKmDTJg7UAhyrraP98GB8BoPURZP8+nxO7TSd4cPr5g==
+  dependencies:
+    playwright-core "1.54.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 "plugin-image-zoom@git+https://github.com/flexanalytics/plugin-image-zoom.git":
   version "1.1.0"
   resolved "git+https://github.com/flexanalytics/plugin-image-zoom.git#8e1b866c79ed6d42cefc4c52f851f1dfd1d0c7de"