@eox/pages-theme-eox 0.5.3 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@eox/eslint-config": "^2.0.0",
-    "@eox/ui": "^0.1.9",
+    "@eox/ui": "^0.3.4",
     "vitepress": "^1.6.3"
   }
 }

package/src/Layout.vue

@@ -52,7 +52,7 @@
                     :rel="item.rel"
                     :class="
                       item.action
-                        ? `button responsive large ${item.action === 'primary' || item.action === 'secondary' ? `${item.action} medium-elevate` : 'border no-elevate'}`
+                        ? `button responsive large ${item.action} ${item.action === 'primary' || item.action === 'secondary' ? 'medium-elevate' : 'border no-elevate'}`
                         : 'primary-text'
                     "
                   >
@@ -99,11 +99,11 @@
               <li v-for="item in theme.nav.filter((item) => item.action)">
                 <a
                   class="button right-align"
-                  :class="
+                  :class="`${item.action} ${
                     item.action === 'primary' || item.action === 'secondary'
                       ? item.action
                       : 'border'
-                  "
+                  }`"
                   :href="withBase(item.link)"
                   :target="item.target"
                   :rel="item.rel"
@@ -136,6 +136,15 @@
             frameborder="0"
             allowfullscreen
           />
+          <video
+            v-else-if="frontmatter.hero.video"
+            class="hero-image large-elevate small-round"
+            :src="withBase(frontmatter.hero.video.src)"
+            style="grid-area: image; aspect-ratio: 16/9"
+            autoplay
+            muted
+            loop
+          />
           <img
             v-else-if="frontmatter.hero.image"
             class="hero-image large-elevate small-round"
@@ -284,7 +293,8 @@ if (!import.meta.env.SSR) {
   box-shadow: none;
 }
 .Layout.layout-home .top-nav.at-top .nav-desktop .button.primary,
-.Layout.layout-home .top-nav.at-top .nav-desktop .button.secondary {
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.secondary,
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.alt {
   display: none;
 }
 .Layout.layout-home .top-nav.at-top nav.actions {

package/src/components/CTASection.vue

@@ -1,45 +1,43 @@
 <template>
-  <section class="cta-section">
-    <div
-      class="center-align full-width"
-      :class="
-        dark !== undefined
-          ? 'primary primary-gradient-background'
-          : 'surface-container-low'
-      "
-    >
-      <div class="large-space"></div>
-      <div class="large-space"></div>
-      <div class="holder large-padding">
-        <h3 class="large bold">
-          {{ title }}
-        </h3>
-        <p class="large-text">{{ tagline }}</p>
-        <a
-          v-if="primaryButton"
-          class="button extra small-margin"
-          :class="dark !== undefined ? 'surface' : 'primary'"
-          :href="primaryLink"
-          >{{ primaryButton }} <i class="mdi mdi-arrow-right"></i
-        ></a>
-        <a
-          v-if="secondaryButton"
-          class="button extra small-margin secondary"
-          :href="secondaryLink"
-          >{{ secondaryButton }}<i class="mdi mdi-arrow-right"></i
-        ></a>
-        <a
-          v-if="altButton"
-          class="button border extra small-margin"
-          :class="dark !== undefined ? 'white-text' : ''"
-          :href="altLink"
-          >{{ altButton }}</a
-        >
-      </div>
-      <div class="large-space"></div>
-      <div class="large-space"></div>
-      <div class="large-space"></div>
+  <section
+    class="cta-section center-align full-width"
+    :class="
+      dark !== undefined
+        ? 'primary primary-gradient-background'
+        : 'surface-container-low'
+    "
+  >
+    <div class="large-space"></div>
+    <div class="large-space"></div>
+    <div class="holder large-padding">
+      <h3 class="large bold">
+        {{ title }}
+      </h3>
+      <p class="large-text">{{ tagline }}</p>
+      <a
+        v-if="primaryButton"
+        class="button extra small-margin"
+        :class="dark !== undefined ? 'surface' : 'primary'"
+        :href="primaryLink"
+        >{{ primaryButton }} <i class="mdi mdi-arrow-right"></i
+      ></a>
+      <a
+        v-if="secondaryButton"
+        class="button extra small-margin secondary"
+        :href="secondaryLink"
+        >{{ secondaryButton }}<i class="mdi mdi-arrow-right"></i
+      ></a>
+      <a
+        v-if="altButton"
+        class="button border extra small-margin"
+        :class="dark !== undefined ? 'white-text' : ''"
+        :href="altLink"
+        >{{ altButton }}</a
+      >
     </div>
+    <div class="large-space"></div>
+    <div class="large-space"></div>
+    <div class="large-space"></div>
   </section>
 </template>
 

package/src/components/FeatureSection.vue

@@ -50,10 +50,19 @@
         </div>
       </div>
       <img
+        v-if="image"
         :src="withBase(image)"
         :alt="title"
         class="small-round medium-elevate"
       />
+      <video
+        v-if="video"
+        :src="withBase(video)"
+        class="small-round medium-elevate"
+        autoplay
+        muted
+        loop
+      />
     </div>
   </section>
 </template>
@@ -64,6 +73,7 @@ const props = defineProps([
   "dark",
   "icon",
   "image",
+  "video",
   "landing",
   "primaryButton",
   "primaryLink",

package/src/components/FeaturesGallery.vue

@@ -24,8 +24,8 @@ const featuresExcerpts = features.map((f) => {
 </script>
 
 <template>
-  <div class="large-space"></div>
-  <div class="primary primary-gradient-background full-width">
+  <section class="primary primary-gradient-background full-width">
+    <div class="large-space"></div>
     <div class="large-space"></div>
     <div class="holder large-padding">
       <h5>More {{ site.title }} features:</h5>
@@ -45,9 +45,9 @@ const featuresExcerpts = features.map((f) => {
                   :src="withBase(feature.image)"
                 />
                 <div class="max">
-                  <h5 class="small">
+                  <h6 class="small">
                     <strong>{{ feature.title }}</strong>
-                  </h5>
+                  </h6>
                   <p>{{ feature.description }}</p>
                   <div class="max"></div>
                   <nav>
@@ -63,7 +63,8 @@ const featuresExcerpts = features.map((f) => {
       </div>
     </div>
     <div class="large-space"></div>
-  </div>
+    <div class="large-space"></div>
+  </section>
 </template>
 
 <style scoped>

package/src/components/PricingTable.vue

@@ -58,10 +58,10 @@
       <div
         v-for="(plan, index) in localPlans"
         :key="'head-' + index"
-        class="cell surface-container-low small-top-round bold top-margin"
+        class="cell surface-container-low top-cell bold top-margin"
         :class="`orig-col-${index + 2}`"
       >
-        <h6 class="primary-text bold">{{ plan.name }}</h6>
+        <h6 class="primary-text bold top-margin">{{ plan.name }}</h6>
       </div>
 
       <div class="cell orig-col-1 m l">Price (per month):</div>
@@ -90,7 +90,7 @@
           v-for="(plan, planIndex) in localPlans"
           :key="`${planIndex}-${row}`"
           class="bold surface-container-low"
-          :class="`cell orig-col-${planIndex + 2} ${rowIndex === getRowKeys(localPlans).length - 1 && !config.showSales ? 'small-bottom-round' : ''}`"
+          :class="`cell orig-col-${planIndex + 2} ${rowIndex === getRowKeys(localPlans).length - 1 && !config.showSales ? 'bottom-cell' : ''}`"
         >
           <div
             v-if="typeof plan.details[row] === 'string'"
@@ -108,7 +108,9 @@
                 <input
                   type="checkbox"
                   :id="`${plan.name}-${row}`"
+                  v-model="plan.details[row].alternative.checked"
                   @input="$forceUpdate()"
+                  @change="updatePrices"
                 />
                 <span :for="`${plan.name}-${row}`"
                   ><h6 class="small bold">
@@ -132,7 +134,7 @@
       <div
         v-for="(plan, index) in localPlans"
         :key="'cta-' + index"
-        :class="`surface-container-low small-bottom-round cell orig-col-${index + 2} center-align`"
+        :class="`surface-container-low cell bottom-cell orig-col-${index + 2} center-align`"
       >
         <a v-if="plan.link" :href="plan.link"
           >See all features
@@ -154,7 +156,7 @@
         v-if="showSales"
         v-for="(plan, index) in localPlans"
         :key="'cta-' + index"
-        :class="`surface-container-low small-bottom-round cell orig-col-${index + 2} center-align`"
+        :class="`surface-container-low cell bottom-cell orig-col-${index + 2} center-align`"
       >
         <ClientOnly>
           <a
@@ -183,7 +185,7 @@
         <div
           v-for="(plan, detailPlanIndex) in detail.plans"
           :key="detailPlanIndex"
-          class="surface-container-low primary-text bold small-top-round top-margin"
+          class="surface-container-low primary-text bold top-margin top-cell"
           :class="`cell orig-col-${detailPlanIndex + 2}`"
         >
           <h6 class="primary-text bold s">{{ plan.name }}</h6>
@@ -204,7 +206,7 @@
             v-for="(plan, planIndex) in detail.plans"
             :key="`${planIndex}-${row}`"
             class="bold surface-container-low"
-            :class="`cell orig-col-${planIndex + 2} ${rowIndex === getRowKeys(detail.plans).length - 1 && !config.showSales ? 'small-bottom-round' : ''}`"
+            :class="`cell orig-col-${planIndex + 2} ${rowIndex === getRowKeys(detail.plans).length - 1 && !config.showSales ? 'bottom-cell' : ''}`"
           >
             <div class="s grey-text" v-html="row + ':'"></div>
             <template
@@ -278,11 +280,25 @@ export default {
   methods: {
     calculatePrice(plan) {
       const basePrice = plan.basePrice;
-      const additionalPrice = this.localOptions
+      const additionalOptionPrice = this.localOptions
         .filter((option) => option.checked)
         .reduce((sum, option) => sum + (option.modifier || 0), 0);
 
-      return basePrice + additionalPrice;
+      let additionalPlanModifier = 0;
+      if (plan.details) {
+        Object.values(plan.details).forEach((value) => {
+          if (value && typeof value === "object") {
+            if (
+              "alternative" in value &&
+              "modifier" in value.alternative &&
+              "checked" in value.alternative &&
+              value.alternative.checked
+            )
+              additionalPlanModifier += value.alternative.modifier;
+          }
+        });
+      }
+      return basePrice + additionalOptionPrice + additionalPlanModifier;
     },
     getRowKeys(plansArray) {
       const keys = new Set();
@@ -410,14 +426,14 @@ export default {
   overflow: hidden;
 }
 
-.small-top-round {
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+.top-cell {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
 }
 
-.small-bottom-round {
-  border-bottom-left-radius: 16px;
-  border-bottom-right-radius: 16px;
+.bottom-cell {
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
 }
 
 @media screen and (min-width: 769px) {

package/src/style.css

@@ -1,7 +1,7 @@
 @import "@eox/ui/style.css";
 
 :root {
-  --vp-nav-height: 88px;
+  --vp-nav-height: 90px;
 }
 
 body {
@@ -213,8 +213,7 @@ button.text:hover,
   background: var(--surface-bright);
 }
 @media (min-width: 1024px) {
-  .feature-section.landing,
-  .cta-section {
+  .feature-section.landing {
     padding: 64px;
     padding: clamp(64px, 10%, 128px);
   }
@@ -309,3 +308,8 @@ button.text:hover,
     hsl(from var(--primary) h s calc(l - 20)) 100%
   ) !important;
 }
+
+header[class*="background"],
+section[class*="background"] {
+  border-radius: 0 !important;
+}