From 91c421d0b5f83fd2ba615e03acbeefa1d8f07320 Mon Sep 17 00:00:00 2001 From: Vitaly Date: Thu, 20 Apr 2023 18:05:08 +0300 Subject: [PATCH] [#3304] Redesign `Vuestic` landing (#3340) * fix(#3304): fix useSize composable * fix(#3304): update assets * fix(#3304): add svg images * fix(#3304): update vuestic-config * fix(#3304): update index * fix(#3304): update HeaderBanner * fix(#3304): update partner icons * fix(#3304): add SocialsLinks component * fix(#3304): update EpicmaxBanner component * fix(#3304): update LanguageDropdown component * fix(#3304): update StarsButton component * fix(#3304): update VuesticLogo component * fix(#3304): update Header * fix(#3304): update Preview * fix(#3304): update Features * fix(#3304): update Customize * fix(#3304): update Partners * fix(#3304): update SeamlessIntegration * fix(#3304): update OpenSource * fix(#3304): update Admin * fix(#3304): update Footer * fix(#3304): update locals * fix(#3304): update sitemap * fix(#3304): remove facebook from socials * fix(#3304): remove outdated images * fix(#3304): minor styles * fix(#3304): remove importing defineProps and defineEmits * fix(#3304): update font-awesome to v6.4.0 and socials icons * fix(#3304): replace va-image, styling changes * fix(#3304): review suggestions (colors) * fix(#3304): add aria-hidden for svg * fix(#3304): update landing.vue and default.vue layout files * fix(#3304): update locales * fix(#3304): update icons * fix(#3304): use applyPreset in setup function * fix(docs): make partners header h2 --------- Co-authored-by: Maksim Nedoshev --- packages/docs/assets/fonts.scss | 38 +- packages/docs/assets/smart-grid.scss | 22 +- packages/docs/assets/variables.scss | 13 + .../docs/components/HeaderBanner.client.vue | 190 ++--- packages/docs/components/landing/Admin.vue | 193 +++-- .../docs/components/landing/Customize.vue | 701 ++---------------- .../docs/components/landing/EpicmaxBanner.vue | 27 +- packages/docs/components/landing/Features.vue | 160 ++++ packages/docs/components/landing/Footer.vue | 324 ++++---- packages/docs/components/landing/Header.vue | 330 ++++----- .../docs/components/landing/NewsBanner.vue | 2 +- .../docs/components/landing/OpenSource.vue | 90 +-- packages/docs/components/landing/Partners.vue | 95 ++- packages/docs/components/landing/Preview.vue | 256 +------ .../landing/SeamlessIntegration.vue | 170 +++-- .../SeamlessIntegrationAnotherButton.vue | 4 +- .../SeamlessIntegrationAnotherCheckbox.vue | 3 +- .../SeamlessIntegrationAnotherRangeSlider.vue | 10 +- .../SeamlessIntegrationAnotherSelect.vue | 26 +- .../docs/components/landing/SocialsLinks.vue | 78 ++ .../docs/components/landing/StarsButton.vue | 41 +- .../components/landing/icons/IconAgGrid.vue | 19 +- .../landing/icons/IconEpicmaxColor.vue | 39 + .../landing/icons/IconFlatlogic.vue | 156 ++-- .../components/landing/icons/IconVueJobs.vue | 15 +- .../components/landing/icons/IconVuejs.vue | 47 ++ .../components/landing/icons/iconNuxt.vue | 11 +- .../components/layout/LanguageDropdown.vue | 12 +- .../components/layout/header/VuesticLogo.vue | 17 +- packages/docs/config/vuestic-config.ts | 25 +- packages/docs/layouts/default.vue | 25 +- packages/docs/layouts/landing.vue | 12 +- packages/docs/locales/en.json | 101 ++- packages/docs/locales/ru.json | 99 ++- .../introduction/overview/index.ts | 15 +- .../roadmap/components/roadmap.vue | 2 +- .../team/components/team-banner.vue | 2 +- .../introduction/team/components/team.vue | 2 +- packages/docs/pages/index.vue | 29 +- packages/docs/public/landing/cross.svg | 4 - .../public/landing/customize-everything.svg | 237 ++++++ .../public/landing/features/components.svg | 6 - .../landing/features/features-accessible.svg | 9 + .../landing/features/features-compatible.svg | 3 + .../landing/features/features-configure.svg | 9 + .../features/features-customizable.svg | 5 + .../landing/features/features-integrates.svg | 7 + .../landing/features/features-responsive.svg | 9 + .../landing/features/features-support.svg | 7 + .../landing/features/features-theme.svg | 10 + .../landing/features/keyboard-navigation.svg | 1 - .../landing/features/modern-browsers.svg | 1 - .../public/landing/features/nuxt-support.svg | 1 - packages/docs/public/landing/hamburger.svg | 12 - .../docs/public/landing/icon-open-source.svg | 1 - packages/docs/public/landing/pattern-2.svg | 10 - packages/docs/public/landing/pattern-3.svg | 17 - packages/docs/public/landing/pattern.svg | 5 - .../docs/public/landing/preview-features.svg | 446 +++++++++++ .../public/landing/seamless-integration.svg | 91 +++ packages/docs/public/landing/vector-bg.svg | 12 - packages/ui/src/composables/useSize.ts | 4 +- 62 files changed, 2336 insertions(+), 1972 deletions(-) create mode 100644 packages/docs/assets/variables.scss create mode 100644 packages/docs/components/landing/Features.vue create mode 100644 packages/docs/components/landing/SocialsLinks.vue create mode 100644 packages/docs/components/landing/icons/IconEpicmaxColor.vue create mode 100644 packages/docs/components/landing/icons/IconVuejs.vue delete mode 100644 packages/docs/public/landing/cross.svg create mode 100644 packages/docs/public/landing/customize-everything.svg delete mode 100644 packages/docs/public/landing/features/components.svg create mode 100644 packages/docs/public/landing/features/features-accessible.svg create mode 100644 packages/docs/public/landing/features/features-compatible.svg create mode 100644 packages/docs/public/landing/features/features-configure.svg create mode 100644 packages/docs/public/landing/features/features-customizable.svg create mode 100644 packages/docs/public/landing/features/features-integrates.svg create mode 100644 packages/docs/public/landing/features/features-responsive.svg create mode 100644 packages/docs/public/landing/features/features-support.svg create mode 100644 packages/docs/public/landing/features/features-theme.svg delete mode 100644 packages/docs/public/landing/features/keyboard-navigation.svg delete mode 100644 packages/docs/public/landing/features/modern-browsers.svg delete mode 100644 packages/docs/public/landing/features/nuxt-support.svg delete mode 100644 packages/docs/public/landing/hamburger.svg delete mode 100644 packages/docs/public/landing/icon-open-source.svg delete mode 100644 packages/docs/public/landing/pattern-2.svg delete mode 100644 packages/docs/public/landing/pattern-3.svg delete mode 100644 packages/docs/public/landing/pattern.svg create mode 100644 packages/docs/public/landing/preview-features.svg create mode 100644 packages/docs/public/landing/seamless-integration.svg delete mode 100644 packages/docs/public/landing/vector-bg.svg diff --git a/packages/docs/assets/fonts.scss b/packages/docs/assets/fonts.scss index cf9c36c824..6768839eb5 100644 --- a/packages/docs/assets/fonts.scss +++ b/packages/docs/assets/fonts.scss @@ -2,22 +2,24 @@ @mixin title-font() { font-weight: 900; font-size: 4.5rem; + line-height: 1; - @include lg(font-size, 4rem); - @include md(font-size, 3rem); - @include sm(font-size, 2.5rem); + @include lg(font-size, 4.5rem); + @include md(font-size, 4rem); + @include sm(font-size, 3.0rem); @include xs(font-size, 2rem); } // sub headers @mixin subtitle-font() { - font-weight: 700; - font-size: 1.4rem; + font-weight: 900; + font-size: 4rem; + line-height: 1; - @include lg(font-size, 1.4rem); - @include md(font-size, 1.3rem); - @include sm(font-size, 1.25rem); - @include xs(font-size, 1.2rem); + @include lg(font-size, 4rem); + @include md(font-size, 3.5rem); + @include sm(font-size, 2.5rem); + @include xs(font-size, 2.0rem); } // text @@ -25,10 +27,10 @@ font-weight: normal; font-size: 1.2rem; - @include lg(font-size, 1rem); - @include md(font-size, 0.95rem); - @include sm(font-size, 0.925rem); - @include xs(font-size, 0.9rem); + @include lg(font-size, 1.2rem); + @include md(font-size, 1.2rem); + @include sm(font-size, 1.2rem); + @include xs(font-size, 1.2rem); } // link @@ -45,12 +47,12 @@ // button @mixin button-font() { font-weight: 600; - font-size: 1.1rem; + font-size: 1.2rem; - @include lg(font-size, 1rem); - @include md(font-size, 0.95rem); - @include sm(font-size, 0.925rem); - @include xs(font-size, 0.9rem); + @include lg(font-size, 1.2rem); + @include md(font-size, 1.2rem); + @include sm(font-size, 1.2rem); + @include xs(font-size, 1.2rem); } // code diff --git a/packages/docs/assets/smart-grid.scss b/packages/docs/assets/smart-grid.scss index 993ba0e0ed..f9821c03de 100644 --- a/packages/docs/assets/smart-grid.scss +++ b/packages/docs/assets/smart-grid.scss @@ -2,12 +2,12 @@ $columns: 12; -$break_lg: 1100px; -$break_md: 960px; -$break_sm: 780px; -$break_xs: 560px; +$break_lg: 1920px; +$break_md: 1440px; +$break_sm: 1024px; +$break_xs: 640px; -$offset: 30px; +$offset: 32px; $offset_lg: $offset; $offset_md: $offset; $offset_sm: $offset; @@ -19,7 +19,7 @@ $offset_md_one_side: ($offset_md * 0.5); $offset_sm_one_side: ($offset_sm * 0.5); $offset_xs_one_side: ($offset_xs * 0.5); -$fields: 15px; +$fields: 1rem; @mixin wrapper-full() { padding-left: $fields; @@ -36,8 +36,8 @@ $fields: 15px; #{$type}-right: $offset_one_side; } -@mixin wrapper() { - max-width: 1280px; +@mixin wrapper($width: 1440px) { + max-width: $width; margin: 0 auto; @include wrapper-full(); @@ -123,6 +123,12 @@ $fields: 15px; @include sm(margin-left, #{calc(#{$val} + #{$offset_sm_one_side})}); } +@mixin shift-sm-right($n) { + $val: math.div(100%, $columns) * $n; + + @include md(margin-right, #{calc(#{$val} + #{$offset_sm_one_side})}); +} + @mixin shift-xs-left($n) { $val: math.div(100%, $columns) * $n; diff --git a/packages/docs/assets/variables.scss b/packages/docs/assets/variables.scss new file mode 100644 index 0000000000..7906b8b830 --- /dev/null +++ b/packages/docs/assets/variables.scss @@ -0,0 +1,13 @@ +:root { + --bg-header: #2450BE; + --bg-preview-1: #2450BE; + --bg-preview-2: #557DE2; + --bg-partners: #335DC9; + --bg-customize-1: #4D2CC1; + --bg-customize-2: #847EE2; + --bg-seamless: #F4F9FC; + --bg-admin: #F4F9FC; + + --header-height: 4rem; + --header-z-index: 2000; +} diff --git a/packages/docs/components/HeaderBanner.client.vue b/packages/docs/components/HeaderBanner.client.vue index dc8097f633..78d167c09d 100644 --- a/packages/docs/components/HeaderBanner.client.vue +++ b/packages/docs/components/HeaderBanner.client.vue @@ -10,90 +10,85 @@
{{ $t("landing.header.banner.partner") }} - - - - - Vue.js - - - {{ $t("landing.header.banner.and") }} - - - + + + Vue.js + + + {{ $t("landing.header.banner.and") }} + + - - - - Nuxt + + + + + + + Nuxt + +
-
+ +
{{ $t("landing.header.banner.hire") }} -
- -
+ icon="close" + preset="secondary" + round + :text-color="textColor" + class="header-banner__buttons--close" + :aria-label="$t('landing.header.banner.close')" + @click="hide" + />
@@ -101,7 +96,10 @@ diff --git a/packages/docs/components/landing/Customize.vue b/packages/docs/components/landing/Customize.vue index fb1fd87e31..a5ee22034d 100644 --- a/packages/docs/components/landing/Customize.vue +++ b/packages/docs/components/landing/Customize.vue @@ -1,182 +1,33 @@ - diff --git a/packages/docs/components/landing/EpicmaxBanner.vue b/packages/docs/components/landing/EpicmaxBanner.vue index 11068228aa..95dc893096 100644 --- a/packages/docs/components/landing/EpicmaxBanner.vue +++ b/packages/docs/components/landing/EpicmaxBanner.vue @@ -16,25 +16,16 @@ + + diff --git a/packages/docs/components/landing/Footer.vue b/packages/docs/components/landing/Footer.vue index 3acac7ba8d..e55b9cc7ef 100644 --- a/packages/docs/components/landing/Footer.vue +++ b/packages/docs/components/landing/Footer.vue @@ -5,267 +5,263 @@ >
- -
- - - {{ $t("landing.footer.buttons.epicmax") }} - - +
- - {{ $t("landing.footer.buttons.admin") }} - +

+ {{ $t(title) }} +

+
    +
  • + + {{ $t(item.label) }} + +
    • +
+
+
+ +
+ +
+ +
- {{ $t("landing.footer.buttons.spinners") }} - -
- + + +
© {{ currentYear }} {{ $t("landing.footer.text") }} hello@epicmax.co
- +
diff --git a/packages/docs/components/landing/Header.vue b/packages/docs/components/landing/Header.vue index 3f0fae838f..c9a91051ee 100644 --- a/packages/docs/components/landing/Header.vue +++ b/packages/docs/components/landing/Header.vue @@ -1,6 +1,7 @@ diff --git a/packages/docs/components/landing/NewsBanner.vue b/packages/docs/components/landing/NewsBanner.vue index 21305774a3..acd59ecdb9 100644 --- a/packages/docs/components/landing/NewsBanner.vue +++ b/packages/docs/components/landing/NewsBanner.vue @@ -67,7 +67,7 @@ const isCloseableAlertVisible = ref(true) @include sm(align-self, end); } - ::v-deep .va-alert__close { + :deep(.va-alert__close) { position: absolute; top: 0.5rem; right: 0.5rem; diff --git a/packages/docs/components/landing/OpenSource.vue b/packages/docs/components/landing/OpenSource.vue index 74814a8c34..f3e3ba2dd7 100644 --- a/packages/docs/components/landing/OpenSource.vue +++ b/packages/docs/components/landing/OpenSource.vue @@ -6,36 +6,32 @@
-
- Open source -

{{ $t('landing.opensource.title') }}

+
{{ $t('landing.opensource.text[0]') }} {{ $t('landing.opensource.text[1]') }}, + > + {{ $t('landing.opensource.text[1]') }} + , {{ $t('landing.opensource.text[2]') }} {{ $t('landing.opensource.text[3]') }} {{ $t('landing.opensource.text[4]') }} + > + {{ $t('landing.opensource.text[4]') }} + {{ $t('landing.opensource.text[5]') }}
+
- diff --git a/packages/docs/components/landing/SeamlessIntegration.vue b/packages/docs/components/landing/SeamlessIntegration.vue index fff775e9ed..6e22fa7604 100644 --- a/packages/docs/components/landing/SeamlessIntegration.vue +++ b/packages/docs/components/landing/SeamlessIntegration.vue @@ -5,13 +5,24 @@

{{ $t('landing.seamless.title') }}

+
{{ $t('landing.seamless.text') }}
+
+
+ + + +
+ -
-

+ +

--> -
-

+ +

-->
@@ -85,35 +89,33 @@ diff --git a/packages/docs/components/landing/SeamlessIntegration/SeamlessIntegrationAnotherButton.vue b/packages/docs/components/landing/SeamlessIntegration/SeamlessIntegrationAnotherButton.vue index 33a27e4a70..6cb8c89c6a 100644 --- a/packages/docs/components/landing/SeamlessIntegration/SeamlessIntegrationAnotherButton.vue +++ b/packages/docs/components/landing/SeamlessIntegration/SeamlessIntegrationAnotherButton.vue @@ -4,13 +4,13 @@ - diff --git a/packages/docs/components/landing/StarsButton.vue b/packages/docs/components/landing/StarsButton.vue index 873872e687..6d5f76a09d 100644 --- a/packages/docs/components/landing/StarsButton.vue +++ b/packages/docs/components/landing/StarsButton.vue @@ -1,15 +1,19 @@ diff --git a/packages/docs/components/landing/icons/IconAgGrid.vue b/packages/docs/components/landing/icons/IconAgGrid.vue index 758bf3a39c..b51922ba44 100644 --- a/packages/docs/components/landing/icons/IconAgGrid.vue +++ b/packages/docs/components/landing/icons/IconAgGrid.vue @@ -1,27 +1,28 @@ \ No newline at end of file + diff --git a/packages/docs/components/landing/icons/IconEpicmaxColor.vue b/packages/docs/components/landing/icons/IconEpicmaxColor.vue new file mode 100644 index 0000000000..b4c6ea56b4 --- /dev/null +++ b/packages/docs/components/landing/icons/IconEpicmaxColor.vue @@ -0,0 +1,39 @@ + + + diff --git a/packages/docs/components/landing/icons/IconFlatlogic.vue b/packages/docs/components/landing/icons/IconFlatlogic.vue index eb4366bb67..efa9259a42 100644 --- a/packages/docs/components/landing/icons/IconFlatlogic.vue +++ b/packages/docs/components/landing/icons/IconFlatlogic.vue @@ -1,77 +1,81 @@ \ No newline at end of file + + diff --git a/packages/docs/components/landing/icons/IconVueJobs.vue b/packages/docs/components/landing/icons/IconVueJobs.vue index 4400f5b4ac..4b2097439e 100644 --- a/packages/docs/components/landing/icons/IconVueJobs.vue +++ b/packages/docs/components/landing/icons/IconVueJobs.vue @@ -1,23 +1,24 @@ \ No newline at end of file + diff --git a/packages/docs/components/landing/icons/IconVuejs.vue b/packages/docs/components/landing/icons/IconVuejs.vue new file mode 100644 index 0000000000..18dda27d64 --- /dev/null +++ b/packages/docs/components/landing/icons/IconVuejs.vue @@ -0,0 +1,47 @@ + diff --git a/packages/docs/components/landing/icons/iconNuxt.vue b/packages/docs/components/landing/icons/iconNuxt.vue index 8ac9cc61c4..238a495e8a 100644 --- a/packages/docs/components/landing/icons/iconNuxt.vue +++ b/packages/docs/components/landing/icons/iconNuxt.vue @@ -1,18 +1,19 @@ > \ No newline at end of file +> diff --git a/packages/docs/components/layout/LanguageDropdown.vue b/packages/docs/components/layout/LanguageDropdown.vue index ceb01ce150..f14b74a154 100644 --- a/packages/docs/components/layout/LanguageDropdown.vue +++ b/packages/docs/components/layout/LanguageDropdown.vue @@ -1,7 +1,7 @@