Add Vuejs banner on landing page (#3359)

* feat: add Vuejs banner on landing page * fix: replace svg with png in customize-everything section on landing
epicmaxco · Apr 21, 2023 · d5f69fb · d5f69fb
1 parent 3b183c6
commit d5f69fb
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 1 deletion.
diff --git a/packages/docs/components/landing/Customize.vue b/packages/docs/components/landing/Customize.vue
@@ -24,7 +24,7 @@
  <div class="customize__image">
  <va-aspect-ratio :ratio="1337/192">
  <img
- src="/landing/customize-everything.svg"
+ src="/landing/customize-everything.png"
  :alt="$t('landing.customize.image')"
  >
  </va-aspect-ratio>

diff --git a/packages/docs/components/landing/banners/VuejsForgeConference.vue b/packages/docs/components/landing/banners/VuejsForgeConference.vue
@@ -0,0 +1,29 @@
+<template>
+ <div class="event-banner">
+ <a
+ href="https://vuejsforge.com/?utm_source=vuesticui&utm_medium=banner&utm_campaign=community"
+ target="_blank"
+ title="Vue.js forge conference"
+ >
+ <va-aspect-ratio
+ :ratio="1600/72"
+ :aria-hidden="true"
+ >
+ <img
+ class="event-banner__img"
+ src="/landing/forge-event-banner.png"
+ alt=""
+ >
+ </va-aspect-ratio>
+ </a>
+ </div>
+</template>
+
+<style lang="scss" scoped>
+.event-banner {
+ &__img {
+ min-width: 100%;
+ min-height: 100%;
+ }
+}
+</style>
diff --git a/packages/docs/pages/index.vue b/packages/docs/pages/index.vue
@@ -4,6 +4,7 @@
  <div v-show="!isMobileMenuOpen">
  <LandingPreview />
  <LandingPartners />
+ <LandingBannersVuejsForgeConference />
  <LandingFeatures />
  <LandingCustomize />
  <LandingSeamlessIntegration />

diff --git a/packages/docs/public/landing/customize-everything.png b/packages/docs/public/landing/customize-everything.png
diff --git a/packages/docs/public/landing/forge-event-banner.png b/packages/docs/public/landing/forge-event-banner.png