@eox/pages-theme-eox 2.0.0-alpha.1 → 2.0.0-alpha.10

package/src/components/OpenPositions.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="open-positions-container">
+    <h2 v-if="title" id="open-positions" class="open-positions-title">
+      {{ title }}
+    </h2>
+
+    <!-- List of Open Positions if available -->
+    <div v-if="positions && positions.length > 0" class="positions-list">
+      <div
+        v-for="(position, index) in positions"
+        :key="index"
+        class="position-item"
+      >
+        <h3 class="position-title">{{ position.title }}</h3>
+
+        <div v-if="position.type || position.location" class="position-meta">
+          <span v-if="position.type" class="meta-item">
+            <i class="mdi mdi-calendar-blank-outline"></i>
+            {{ position.type }}
+          </span>
+          <span v-if="position.location" class="meta-item">
+            <i class="mdi mdi-map-marker-outline"></i>
+            {{ position.location }}
+          </span>
+        </div>
+
+        <p class="position-description">
+          {{ position.description || position.content }}
+        </p>
+
+        <a
+          :href="resolveApplyLink(position)"
+          :target="
+            isExternal(resolveApplyLink(position)) ? '_blank' : undefined
+          "
+          :rel="
+            isExternal(resolveApplyLink(position))
+              ? 'noopener noreferrer'
+              : undefined
+          "
+          class="position-apply"
+        >
+          <span>{{ position.linkText || "Apply for this position" }}</span>
+          <i class="mdi mdi-arrow-right"></i>
+        </a>
+      </div>
+    </div>
+
+    <!-- Fallback when no positions are open -->
+    <div v-else class="empty-positions">
+      <slot name="empty">
+        <p class="empty-title">
+          {{ emptyTitle }}
+        </p>
+        <p class="empty-description">
+          {{ emptyText }}
+        </p>
+        <p v-if="showDevjobs" class="empty-devjobs">
+          Also feel free to explore our Team page on
+          <a :href="devjobsGerman" target="_blank" rel="noopener noreferrer"
+            >Devjobs.at (German)</a
+          >
+          or in
+          <a :href="devjobsEnglish" target="_blank" rel="noopener noreferrer"
+            >English</a
+          >.
+        </p>
+      </slot>
+    </div>
+
+    <!-- Always display "Send us your CV" button -->
+    <div v-if="showCvButton" class="cv-action">
+      <a :href="`mailto:${email}`" class="cv-button">
+        <span>{{ cvButtonText }}</span>
+        <i class="mdi mdi-email-outline"></i>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { withBase } from "vitepress";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  positions: {
+    type: Array,
+    default: () => [],
+  },
+  email: {
+    type: String,
+    default: "office@eox.at",
+  },
+  cvButtonText: {
+    type: String,
+    default: "Send us your CV",
+  },
+  showCvButton: {
+    type: Boolean,
+    default: true,
+  },
+  showDevjobs: {
+    type: Boolean,
+    default: true,
+  },
+  devjobsGerman: {
+    type: String,
+    default: "https://devjobs.at/team/eox",
+  },
+  devjobsEnglish: {
+    type: String,
+    default: "https://en.devjobs.at/team/eox",
+  },
+  emptyTitle: {
+    type: String,
+    default: "Great to see you are interested in joining us!",
+  },
+  emptyText: {
+    type: String,
+    default:
+      "Currently, we are not looking to fill a particular position, but you're welcome to send us your CV and tell us why you'd be a good fit for our team.",
+  },
+});
+
+function resolveApplyLink(position) {
+  if (position.link) {
+    if (
+      position.link.startsWith("http://") ||
+      position.link.startsWith("https://") ||
+      position.link.startsWith("mailto:")
+    ) {
+      return position.link;
+    }
+    return withBase(
+      position.link.startsWith("/") ? position.link : "/" + position.link,
+    );
+  }
+  return `mailto:${props.email}?subject=Application for ${encodeURIComponent(position.title || "Open Position")}`;
+}
+
+function isExternal(url) {
+  return (
+    typeof url === "string" &&
+    (url.startsWith("http://") || url.startsWith("https://"))
+  );
+}
+</script>
+
+<style scoped>
+.open-positions-container {
+  margin-top: 1.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.open-positions-title {
+  margin-bottom: 1.5rem !important;
+}
+
+.positions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  margin-bottom: 2rem;
+}
+
+.position-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.position-item:not(:last-child) {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  padding-bottom: 2rem;
+}
+
+.position-title {
+  font-size: 1.35rem !important;
+  font-weight: 700 !important;
+  color: var(--on-surface, #0f172a) !important;
+  margin: 0 0 0.5rem 0 !important;
+  border-top: none !important;
+  padding-top: 0 !important;
+  line-height: 1.3 !important;
+}
+
+.position-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1.5rem;
+  color: var(--on-surface-variant, #475569);
+  font-size: 0.95rem;
+  margin-bottom: 1rem;
+}
+
+.meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.meta-item i {
+  font-size: 1.15rem;
+  line-height: 1;
+}
+
+.position-description {
+  font-size: 1rem !important;
+  line-height: 1.6 !important;
+  color: var(--on-surface-variant, #334155) !important;
+  margin: 0 0 1.25rem 0 !important;
+}
+
+.position-apply {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-weight: 700;
+  color: var(--primary, #004170) !important;
+  text-decoration: none !important;
+  font-size: 1rem;
+  transition:
+    gap 0.2s ease,
+    color 0.2s ease;
+}
+
+.position-apply:hover {
+  gap: 0.65rem;
+  text-decoration: underline !important;
+}
+
+.position-apply i {
+  font-size: 1.1rem;
+  transition: transform 0.2s ease;
+}
+
+.empty-positions {
+  margin-bottom: 1.5rem;
+}
+
+.empty-title {
+  font-weight: 700 !important;
+  font-size: 1.15rem !important;
+  color: var(--on-surface, #0f172a) !important;
+  margin: 0 0 0.75rem 0 !important;
+}
+
+.empty-description,
+.empty-devjobs {
+  font-size: 1rem !important;
+  line-height: 1.6 !important;
+  color: var(--on-surface-variant, #334155) !important;
+  margin: 0 0 1rem 0 !important;
+}
+
+.cv-action {
+  margin-top: 1.5rem;
+}
+
+.cv-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  background-color: var(--primary, #004170);
+  color: #ffffff !important;
+  font-weight: 600;
+  font-size: 0.95rem;
+  padding: 0.7rem 1.5rem;
+  border-radius: 9999px;
+  text-decoration: none !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.cv-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
+  background-color: color-mix(in srgb, var(--primary, #004170) 88%, black);
+}
+
+.cv-button i {
+  font-size: 1.15rem;
+  line-height: 1;
+}
+</style>

package/src/components/TagList.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="tags-page">
-    <header class="tags-header">
-      <h1 class="tags-title">
-        Blog Tags
-      </h1>
+  <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.
       </p>
@@ -15,7 +14,7 @@
         <a
           v-for="tag in allTagsList"
           :key="tag.name"
-          :href="`/tag/${tag.name}/`"
+          :href="withBase(`/tag/${tag.name}/`)"
           :style="getTagStyle(tag.name)"
           class="tag-item"
         >
@@ -60,7 +59,9 @@
       </ul>
       <p class="legend-note">
         For more detailed information on our technology solutions, visit the
-        <a href="/software-products" class="legend-link">Solutions & Services</a>
+        <a :href="withBase('/solutions')" class="legend-link"
+          >Solutions & Services</a
+        >
         page.
       </p>
     </footer>
@@ -69,9 +70,12 @@
 
 <script setup>
 import { computed } from "vue";
+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 = {};
@@ -110,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;
@@ -117,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) {
@@ -126,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 */
@@ -133,10 +147,7 @@ const allTagsList = computed(() => {
   margin-bottom: 2rem;
   border-bottom: 1px solid #f1f5f9; /* slate-100 */
   padding-bottom: 1.5rem;
-  text-align: center;
-  max-width: 42rem; /* 2xl equivalent */
-  margin-left: auto;
-  margin-right: auto;
+  text-align: left;
 }
 
 .tags-title {
@@ -180,7 +191,9 @@ const allTagsList = computed(() => {
   padding: 2.5rem 2rem;
   border-radius: 1rem;
   border: 1px solid rgba(226, 232, 240, 0.5); /* border-slate-100/50 */
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); /* shadow-sm */
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.05),
+    0 1px 2px -1px rgba(0, 0, 0, 0.05); /* shadow-sm */
   margin-bottom: 3rem;
 }
 
@@ -202,14 +215,19 @@ const allTagsList = computed(() => {
   border-radius: 4px; /* small rounding to distinguish from full-rounded buttons */
   text-decoration: none !important;
   line-height: 1.2;
-  transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
+  transition:
+    opacity 0.2s ease,
+    transform 0.15s ease,
+    box-shadow 0.2s ease;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .tag-item:hover {
   opacity: 0.85;
   transform: translateY(-1px);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.05),
+    0 2px 4px -2px rgba(0, 0, 0, 0.05);
 }
 
 .tag-count {

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>
@@ -15,23 +15,31 @@
     <section class="team-photo-section">
       <img
         :src="withBase('/images/team/team.jpg')"
-        alt="EOX Team Photo"
+        alt="Our Team Photo"
         class="team-photo"
       />
     </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"
         :key="member.id"
         :title="member.name"
-        :image="member.image ? withBase(member.image) : withBase('/images/team/new_member.jpg')"
-        :link="memberHasPosts(member.id) ? {
-          text: 'View blog posts',
-          href: `/author/${member.id}/`,
-          target: '_self'
-        } : undefined"
+        :image="
+          member.image
+            ? withBase(member.image)
+            : withBase('/images/team/new_member.jpg')
+        "
+        :link="
+          memberHasPosts(member.id)
+            ? {
+                text: 'View blog posts',
+                href: `/author/${member.id}/`,
+                target: '_self',
+              }
+            : undefined
+        "
         variant="cover"
         class="bg-surface-container-low team-member-card"
       >
@@ -43,11 +51,7 @@
         <span class="member-divider"></span>
 
         <!-- Description / Bio -->
-        <span
-          v-if="member.bio"
-          class="member-bio"
-          v-html="member.bio"
-        ></span>
+        <span v-if="member.bio" class="member-bio" v-html="member.bio"></span>
 
         <!-- Social Links row at the bottom of slot -->
         <span class="member-footer">
@@ -125,14 +129,18 @@ const memberHasPosts = (memberId) => {
   max-width: 1200px !important;
   margin-left: auto !important;
   margin-right: auto !important;
-  padding-left: 1rem !important;
-  padding-right: 1rem !important;
+  padding-left: 1.5rem !important;
+  padding-right: 1.5rem !important;
   box-sizing: border-box !important;
   padding-top: calc(var(--vp-nav-height) + 28px) !important;
   padding-bottom: 48px !important;
   word-break: break-word;
 }
 
+.team-page.has-hero {
+  padding-top: 2rem !important;
+}
+
 @media (min-width: 640px) {
   .team-page {
     padding-left: 1.5rem !important;
@@ -140,15 +148,21 @@ const memberHasPosts = (memberId) => {
     padding-top: calc(var(--vp-nav-height) + 40px) !important;
     padding-bottom: 64px !important;
   }
+  .team-page.has-hero {
+    padding-top: 4.5rem !important;
+  }
 }
 
 @media (min-width: 960px) {
   .team-page {
-    padding-left: 2rem !important;
-    padding-right: 2rem !important;
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
     padding-top: calc(var(--vp-nav-height) + 58px) !important;
     padding-bottom: 96px !important;
   }
+  .team-page.has-hero {
+    padding-top: 8rem !important;
+  }
 }
 
 /* Page Header */

package/src/components/TestimonialsSection.cy.js

@@ -5,10 +5,7 @@ describe("<TestimonialsSection />", () => {
     cy.mount(TestimonialsSection);
 
     // Verify title
-    cy.get(".section-display-title").should(
-      "contain",
-      "What our customers are saying",
-    );
+    cy.get(".headline h2").should("contain", "What our customers are saying");
 
     // Verify first testimonial quote
     cy.get(".quote-text").should(
@@ -61,7 +58,7 @@ describe("<TestimonialsSection />", () => {
     });
 
     // Check title
-    cy.get(".section-display-title").should("contain", customTitle);
+    cy.get(".headline h2").should("contain", customTitle);
 
     // Check first custom testimonial
     cy.get(".quote-text").should("contain", "This is a custom quote");