@eox/pages-theme-eox 2.0.0-alpha.7 → 2.0.0-alpha.9

package/src/components/LogoSection.vue

@@ -65,6 +65,7 @@ onMounted(() => {
 
 <style>
 section.logo-section {
+  background-color: var(--surface-container-lowest, #ffffff);
   margin-block-start: 3rem;
 }
 .logo-section .logo-row {

package/src/components/MobileNavDropdown.vue

@@ -1,8 +1,11 @@
 <template>
   <template v-for="item in items">
-    <li v-if="item.items && item.text">
+    <li
+      v-if="item.items && item.text"
+      :class="{ active: isActive(item, route.path) }"
+    >
       <details>
-        <summary>
+        <summary :class="{ active: isActive(item, route.path) }">
           <span class="max" :class="{ active: isActive(item, route.path) }">{{
             t(item.text, theme.i18n)
           }}</span>
@@ -14,7 +17,7 @@
       </details>
     </li>
     <MobileNavDropdown v-else-if="item.items" :items="item.items" />
-    <li v-else>
+    <li v-else :class="{ active: isActive(item, route.path) }">
       <a
         v-if="item.link"
         :href="withBase(item.link)"

package/src/components/NavBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="top-nav at-top row center-align">
+  <div class="top-nav at-top row center-align" :class="{ 'has-hero': hasHero }">
     <nav class="large-padding no-margin center-align nav-mobile">
       <a :href="withBase('/')">
         <img
@@ -33,10 +33,17 @@
           </button>
         </nav>
         <ul class="list border large-space">
-          <li v-for="item in theme.nav.filter((item) => !item.action)">
+          <li
+            v-for="item in theme.nav.filter((item) => !item.action)"
+            :class="{ active: isActive(item, route.path) }"
+          >
             <details v-if="item.items">
-              <summary>
-                <span class="max">{{ t(item.text, theme.i18n) }}</span>
+              <summary :class="{ active: isActive(item, route.path) }">
+                <span
+                  class="max"
+                  :class="{ active: isActive(item, route.path) }"
+                  >{{ t(item.text, theme.i18n) }}</span
+                >
                 <i class="mdi mdi-chevron-down"></i>
               </summary>
               <ul class="list">
@@ -49,7 +56,10 @@
               :href="withBase(item.link)"
               :target="item.target"
               :rel="item.rel"
-              :class="item.action ? 'button large medium-elevate cta' : ''"
+              :class="[
+                item.action ? 'button large medium-elevate cta' : '',
+                { active: isActive(item, route.path) },
+              ]"
             >
               <span>{{ t(item.text, theme.i18n) }}</span>
             </a>
@@ -135,7 +145,10 @@
       <div class="space"></div>
       <nav>
         <ul class="left-align no-margin">
-          <li v-for="item in theme.nav.filter((i) => !i.action)">
+          <li
+            v-for="item in theme.nav.filter((i) => !i.action)"
+            :class="{ active: isActive(item, route.path) }"
+          >
             <div v-if="item.items">
               <button
                 class="button text no-round"
@@ -229,7 +242,7 @@ import { t, trackEvent, isActive } from "../helpers";
 import NavDropdown from "./NavDropdown.vue";
 import MobileNavDropdown from "./MobileNavDropdown.vue";
 
-const { site, theme, localeIndex } = useData();
+const { site, theme, localeIndex, frontmatter, page } = useData();
 const route = useRoute();
 
 const langs = computed(() => {
@@ -271,6 +284,14 @@ const langs = computed(() => {
   });
 });
 
+const hasHero = computed(() => {
+  return Boolean(
+    frontmatter.value.hero ||
+      frontmatter.value.layout === "home" ||
+      page.value.relativePath === "index.md",
+  );
+});
+
 if (!import.meta.env.SSR) {
   const scrollListener = () => {
     const nav = document.querySelector(".top-nav");
@@ -301,7 +322,24 @@ if (!import.meta.env.SSR) {
 .top-nav.at-top {
   box-shadow: none;
 }
-.Layout.layout-home .top-nav.at-top .nav-desktop .button.primary,
+.top-nav.at-top .nav-desktop .button.primary,
+.top-nav.has-hero.at-top .nav-desktop .button.primary,
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.primary {
+  background: #ffffff !important;
+  color: #000c14 !important;
+  border-radius: 9999px;
+  font-weight: 500;
+  display: inline-flex;
+}
+.top-nav.at-top .nav-desktop .button.primary i.mdi-arrow-right,
+.top-nav.has-hero.at-top .nav-desktop .button.primary i.mdi-arrow-right,
+.Layout.layout-home
+  .top-nav.at-top
+  .nav-desktop
+  .button.primary
+  i.mdi-arrow-right {
+  display: none;
+}
 .Layout.layout-home .top-nav.at-top .nav-desktop .button.secondary,
 .Layout.layout-home .top-nav.at-top .nav-desktop .button.alt {
   display: none;
@@ -317,43 +355,98 @@ if (!import.meta.env.SSR) {
   padding-top: 0.5rem !important;
   padding-bottom: 0.5rem !important;
 }
-.Layout.layout-home .top-nav.at-top {
+.Layout.layout-home .top-nav.at-top,
+.top-nav.has-hero.at-top {
   background: transparent;
   color: #f7f8f8;
 }
 .Layout .top-nav nav .button {
   color: var(--on-surface);
 }
-.Layout.layout-home .top-nav.at-top .nav-desktop .button {
+.Layout.layout-home .top-nav.at-top .nav-desktop .button,
+.top-nav.has-hero.at-top .nav-desktop .button {
   color: var(--on-surface);
   background: var(--surface);
 }
-.Layout.layout-home .top-nav.at-top .nav-desktop .button.text {
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.text,
+.top-nav.has-hero.at-top .nav-desktop .button.text {
   color: #f7f8f8;
   background: none;
 }
-.Layout.layout-home .top-nav.at-top .nav-desktop .button.border {
+.Layout.layout-home
+  .top-nav.at-top
+  .nav-desktop
+  .button.text:hover:not(.active),
+.top-nav.has-hero.at-top .nav-desktop .button.text:hover:not(.active) {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.text.active,
+.top-nav.has-hero.at-top .nav-desktop .button.text.active {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  color: #ffffff !important;
+}
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.text.active:hover,
+.top-nav.has-hero.at-top .nav-desktop .button.text.active:hover {
+  background-color: rgba(255, 255, 255, 0.25) !important;
+}
+.top-nav:not(.at-top) .nav-desktop .button.text.active {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+}
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.border,
+.top-nav.has-hero.at-top .nav-desktop .button.border {
   color: #f7f8f8;
   border-color: #f7f8f855;
   background: none;
 }
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.border.active,
+.top-nav.has-hero.at-top .nav-desktop .button.border.active {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  color: #ffffff !important;
+  border-color: transparent !important;
+}
+.top-nav:not(.at-top) .nav-desktop .button.border.active {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+  border-color: transparent !important;
+}
+.nav-desktop menu > li.active,
+.nav-desktop menu > li:has(> a.active) {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+}
+.nav-desktop menu > li.active > a,
+.nav-desktop menu > li:has(> a.active) > a {
+  color: var(--on-primary-container) !important;
+}
+#mobile-menu .list li.active > a,
+#mobile-menu .list li.active > span,
+#mobile-menu .list summary:has(.active),
+#mobile-menu .list summary.active {
+  color: var(--primary) !important;
+  font-weight: 600;
+}
 .top-nav.at-top > nav > a:has(.logo.dark) > .logo.dark {
   display: none;
 }
-.Layout.layout-home .top-nav.at-top > nav > a:has(.logo.dark) > .logo.light {
+.Layout.layout-home .top-nav.at-top > nav > a:has(.logo.dark) > .logo.light,
+.top-nav.has-hero.at-top > nav > a:has(.logo.dark) > .logo.light {
   display: none;
 }
 .Layout.layout-home
   .top-nav.at-top
   > nav
   > a:not(:has(.logo.dark))
-  > .logo.light {
+  > .logo.light,
+.top-nav.has-hero.at-top > nav > a:not(:has(.logo.dark)) > .logo.light {
   filter: brightness(0) invert(1);
 }
 .Layout .top-nav > nav > a > .logo.dark {
   display: none;
 }
-.Layout.layout-home .top-nav.at-top > nav > a > .logo.dark {
+.Layout.layout-home .top-nav.at-top > nav > a > .logo.dark,
+.top-nav.has-hero.at-top > nav > a > .logo.dark {
   display: block;
 }
 img.logo {

package/src/components/NavDropdown.vue

@@ -1,6 +1,9 @@
 <template>
   <template v-for="item in items">
-    <li v-if="item.items && item.text">
+    <li
+      v-if="item.items && item.text"
+      :class="{ active: isActive(item, route.path) }"
+    >
       <a
         v-if="item.link"
         :href="withBase(item.link)"
@@ -25,7 +28,7 @@
       </menu>
     </li>
     <NavDropdown v-else-if="item.items" :items="item.items" />
-    <li v-else>
+    <li v-else :class="{ active: isActive(item, route.path) }">
       <a
         v-if="item.link"
         :href="withBase(item.link)"

package/src/components/TagList.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="tags-page">
-    <header class="tags-header">
+  <div class="tags-page" :class="{ 'has-hero': Boolean(frontmatter.hero) }">
+    <!-- Header (shown only when hero is not present) -->
+    <header v-if="!frontmatter.hero" class="tags-header">
       <h1 class="tags-title">Blog Tags</h1>
       <p class="tags-subtitle">
         Explore our blog posts by topics and technology pillars.
@@ -69,10 +70,12 @@
 
 <script setup>
 import { computed } from "vue";
-import { withBase } from "vitepress";
+import { useData, withBase } from "vitepress";
 import { data as posts } from "../posts.data.js";
 import { getTagColor, getTagStyle } from "../tagUtils.js";
 
+const { frontmatter } = useData();
+
 const allTagsList = computed(() => {
   // Aggregate all tag occurrences
   const tagCounts = {};
@@ -111,6 +114,10 @@ const allTagsList = computed(() => {
   box-sizing: border-box;
 }
 
+.tags-page.has-hero {
+  padding-top: 2rem;
+}
+
 @media (min-width: 640px) {
   .tags-page {
     padding-left: 1.5rem;
@@ -118,6 +125,9 @@ const allTagsList = computed(() => {
     padding-top: calc(var(--vp-nav-height) + 40px);
     padding-bottom: 64px;
   }
+  .tags-page.has-hero {
+    padding-top: 2.5rem;
+  }
 }
 
 @media (min-width: 960px) {
@@ -127,6 +137,9 @@ const allTagsList = computed(() => {
     padding-top: calc(var(--vp-nav-height) + 58px);
     padding-bottom: 96px;
   }
+  .tags-page.has-hero {
+    padding-top: 3rem;
+  }
 }
 
 /* Page Header */

package/src/components/TeamPage.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="team-page">
-    <!-- Header -->
-    <header class="team-header">
+  <div class="team-page" :class="{ 'has-hero': Boolean(frontmatter.hero) }">
+    <!-- Header (shown only when hero is not present) -->
+    <header v-if="!frontmatter.hero" class="team-header">
       <h1 class="team-title">
         {{ frontmatter.title || "Our Team" }}
       </h1>
@@ -20,7 +20,7 @@
       />
     </section>
 
-    <!-- Team Grid - max 3 columns on large screens -->
+    <!-- Team Grid - up to 4 columns on large screens -->
     <div class="team-grid">
       <FeatureCard
         v-for="member in sortedTeamMembers"
@@ -126,7 +126,7 @@ const memberHasPosts = (memberId) => {
 <style scoped>
 .team-page {
   width: 100%;
-  max-width: 1200px !important;
+  max-width: 1400px !important;
   margin-left: auto !important;
   margin-right: auto !important;
   padding-left: 1rem !important;
@@ -137,6 +137,10 @@ const memberHasPosts = (memberId) => {
   word-break: break-word;
 }
 
+.team-page.has-hero {
+  padding-top: 2rem !important;
+}
+
 @media (min-width: 640px) {
   .team-page {
     padding-left: 1.5rem !important;
@@ -144,6 +148,9 @@ const memberHasPosts = (memberId) => {
     padding-top: calc(var(--vp-nav-height) + 40px) !important;
     padding-bottom: 64px !important;
   }
+  .team-page.has-hero {
+    padding-top: 2.5rem !important;
+  }
 }
 
 @media (min-width: 960px) {
@@ -153,6 +160,9 @@ const memberHasPosts = (memberId) => {
     padding-top: calc(var(--vp-nav-height) + 58px) !important;
     padding-bottom: 96px !important;
   }
+  .team-page.has-hero {
+    padding-top: 3rem !important;
+  }
 }
 
 /* Page Header */
@@ -235,6 +245,12 @@ const memberHasPosts = (memberId) => {
   }
 }
 
+@media (min-width: 1280px) {
+  .team-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
 /* Deep overrides to integrate with theme-provided FeatureCard */
 .team-member-card {
   height: 100% !important;

package/src/components/TestimonialsSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="testimonials-section full-width surface-container-low">
+  <section class="testimonials-section full-width surface-container-lowest">
     <div class="holder">
       <!-- Left Side: Headline -->
       <div class="headline">
@@ -9,10 +9,27 @@
       </div>
 
       <!-- Right Side: Text Block -->
-      <div v-if="testimonials && testimonials.length > 0" class="text-block">
-        <!-- Testimonial Quote -->
-        <div class="quote-text">
-          &ldquo;{{ currentTestimonial.quote }}&rdquo;
+      <div
+        v-if="testimonials && testimonials.length > 0"
+        class="text-block"
+        role="region"
+        aria-roledescription="carousel"
+        :aria-label="title"
+      >
+        <!-- Testimonial Quotes Overlapping Grid -->
+        <div class="quotes-grid" aria-live="polite">
+          <div
+            v-for="(item, index) in testimonials"
+            :key="index"
+            class="quote-slide"
+            :class="{
+              active: index === currentIndex,
+              'quote-text': index === currentIndex,
+            }"
+            :aria-hidden="index !== currentIndex"
+          >
+            &ldquo;{{ item.quote }}&rdquo;
+          </div>
         </div>
 
         <!-- Divider / Separator -->
@@ -20,14 +37,28 @@
 
         <!-- Frame 469: Author info & sliders -->
         <div class="frame-469">
-          <!-- Frame 468: Author Name and Role -->
+          <!-- Frame 468: Author Name and Role Overlapping Grid -->
           <div class="frame-468">
-            <span class="author-name">
-              {{ currentTestimonial.author }}
-            </span>
-            <span class="author-role">
-              {{ currentTestimonial.role }}
-            </span>
+            <div
+              v-for="(item, index) in testimonials"
+              :key="index"
+              class="author-slide"
+              :class="{ active: index === currentIndex }"
+              :aria-hidden="index !== currentIndex"
+            >
+              <span
+                class="author-name-text"
+                :class="{ 'author-name': index === currentIndex }"
+              >
+                {{ item.author }}
+              </span>
+              <span
+                class="author-role-text"
+                :class="{ 'author-role': index === currentIndex }"
+              >
+                {{ item.role }}
+              </span>
+            </div>
           </div>
 
           <!-- sliders: Navigation Buttons -->
@@ -57,7 +88,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 
 const props = defineProps({
   title: {
@@ -91,6 +122,16 @@ const props = defineProps({
 
 const currentIndex = ref(0);
 
+// Clamp currentIndex if testimonials prop array changes dynamically
+watch(
+  () => props.testimonials?.length,
+  (len) => {
+    if (len && currentIndex.value >= len) {
+      currentIndex.value = 0;
+    }
+  },
+);
+
 const currentTestimonial = computed(() => {
   if (!props.testimonials || props.testimonials.length === 0) return null;
   return props.testimonials[currentIndex.value];
@@ -118,6 +159,7 @@ section.testimonials-section {
   margin-block-start: 6rem;
   margin-block-end: 6rem;
   box-sizing: border-box;
+  background-color: var(--surface-container-lowest, #ffffff);
 }
 
 @media (min-width: 1024px) {
@@ -168,6 +210,38 @@ section.testimonials-section {
   gap: 24px;
 }
 
+.quotes-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  width: 100%;
+}
+
+.quote-slide {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  color: #00060a;
+  min-height: 72px;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.25s ease,
+    visibility 0.25s ease;
+  pointer-events: none;
+}
+
+.quote-slide.active {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
 .quote-text {
   font-family: "Inter", sans-serif;
   font-style: normal;
@@ -195,14 +269,35 @@ section.testimonials-section {
 }
 
 .frame-468 {
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: flex-start;
+  flex-grow: 1;
+}
+
+.author-slide {
+  grid-column: 1;
+  grid-row: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
-  flex-grow: 1;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.25s ease,
+    visibility 0.25s ease;
+  pointer-events: none;
+}
+
+.author-slide.active {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
 }
 
-.author-name {
+.author-name,
+.author-name-text {
   font-family: "Inter", sans-serif;
   font-style: normal;
   font-weight: 700;
@@ -212,7 +307,8 @@ section.testimonials-section {
   color: #00060a;
 }
 
-.author-role {
+.author-role,
+.author-role-text {
   font-family: "Inter", sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -222,6 +318,13 @@ section.testimonials-section {
   color: #00060a;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .quote-slide,
+  .author-slide {
+    transition: none;
+  }
+}
+
 .sliders {
   display: flex;
   flex-direction: row;

package/src/components/TextSection.cy.js

@@ -0,0 +1,61 @@
+import TextSection from "./TextSection.vue";
+
+describe("<TextSection />", () => {
+  it("renders title, tagline and button", () => {
+    cy.mount(TextSection, {
+      props: {
+        title: "Test Section",
+        tagline: "Test Tagline",
+        buttonText: "Click Me",
+        buttonLink: "https://example.com",
+      },
+    });
+
+    cy.contains("Test Section").should("exist");
+    cy.contains("Test Tagline").should("exist");
+    cy.contains("a.button", "Click Me")
+      .should("have.attr", "href", "https://example.com")
+      .and("have.attr", "target", "_blank");
+  });
+
+  it("renders slot content and image", () => {
+    cy.mount(TextSection, {
+      props: {
+        image: "/test.jpg",
+        imageAlt: "Test Image",
+      },
+      slots: {
+        default: "<p>This is paragraph text.</p>",
+      },
+    });
+
+    cy.contains("This is paragraph text.").should("exist");
+    cy.get("img.section-image")
+      .should("have.attr", "src", "/test.jpg")
+      .and("have.attr", "alt", "Test Image");
+  });
+
+  it("applies reverse class when reverse prop is true", () => {
+    cy.mount(TextSection, {
+      props: {
+        image: "/test.jpg",
+        reverse: true,
+      },
+    });
+
+    cy.get(".text-section").should("have.class", "is-reverse");
+    cy.get(".text-section-grid").should("have.class", "grid-reverse");
+  });
+
+  it("applies single column styling when no image is provided", () => {
+    cy.mount(TextSection, {
+      slots: {
+        default: "<p>Single column text</p>",
+      },
+    });
+
+    cy.get(".text-section").should("have.class", "no-image");
+    cy.get(".text-section-grid").should("have.class", "grid-single");
+    cy.get(".media-column").should("not.exist");
+  });
+});