Skip to content

Commit

Permalink
[#3304] Redesign Vuestic landing (#3340)
Browse files Browse the repository at this point in the history 
* 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 <m0ksem1337@gmail.com>
  • Loading branch information
@RVitaly1978 @m0ksem
RVitaly1978 and m0ksem authored Apr 20, 2023
1 parent c687269 commit 91c421d
Show file tree
Hide file tree
Showing 62 changed files with 2,336 additions and 1,972 deletions.
38 changes: 20 additions & 18 deletions packages/docs/assets/fonts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,35 @@
@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
@mixin text-font() {
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
Expand All @@ -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
Expand Down
22 changes: 14 additions & 8 deletions packages/docs/assets/smart-grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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();
Expand Down Expand Up @@ -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;

Expand Down
13 changes: 13 additions & 0 deletions packages/docs/assets/variables.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
190 changes: 105 additions & 85 deletions packages/docs/components/HeaderBanner.client.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,98 +10,96 @@
<div class="header__wrapper">
<div class="header-banner__left">
<strong>{{ $t("landing.header.banner.partner") }}</strong>
<a
href="https://vuejs.org/partners/epicmax.html"
title="Epicmax creates high performance Vue.js interfaces"
class="nuxt-link ml-7"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="35"
width="35"
viewBox="-39.26295 -56.672 340.2789 340.032"
><path
fill="#41b883"
d="M161.101 0l-30.224 52.35L100.652 0H0l130.877 226.688L261.753 0z"
/><path
fill="#34495e"
d="M161.101 0l-30.224 52.35L100.652 0H52.351l78.526 136.01L209.403 0z"
/></svg>
</a>
<a
href="https://vuejs.org/partners/epicmax.html"
target="_blank"
class="link-4"
>
<strong class="bold-text-9"> Vue.js </strong>
</a>

<strong class="ml-7">{{ $t("landing.header.banner.and") }}</strong>

<a
href="https://nuxtjs.org/partners/epicmax"
title="Epicmax creates high performance Vue.js interfaces"
class="nuxt-link ml-7"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
viewBox="0 0 400 303"
version="1"
<div class="header-banner__left-links">
<a
href="https://vuejs.org/partners/epicmax.html"
title="Epicmax creates high performance Vue.js interfaces"
target="_blank"
class="header-banner__link"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
width="24"
viewBox="-39.26295 -56.672 340.2789 340.032"
aria-hidden="true"
><path
fill="#41b883"
d="M161.101 0l-30.224 52.35L100.652 0H0l130.877 226.688L261.753 0z"
/><path
fill="#34495e"
d="M161.101 0l-30.224 52.35L100.652 0H52.351l78.526 136.01L209.403 0z"
/></svg>
<strong>Vue.js</strong>
</a>

<strong>{{ $t("landing.header.banner.and") }}</strong>

<a
href="https://nuxtjs.org/partners/epicmax"
title="Epicmax creates high performance Vue.js interfaces"
target="_blank"
class="header-banner__link"
>
<g
fill="none"
fill-rule="evenodd"
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 400 303"
aria-hidden="true"
>
<path
d="M123 292l-1-1c-2-4-2-8-2-12H25L167 27l59 107 19-14-59-107c-1-2-8-13-20-13-5 0-13 2-19 13L4 268c-1 2-7 14-1 24 2 5 8 10 21 10h120c-13 0-19-5-21-10z"
fill="#00C58E"
/>
<path
d="M395 269L280 62c-2-2-8-13-20-13-5 0-12 2-19 13l-15 24v48l34-59 114 204h-43a20 20 0 0 1-2 12v1c-6 10-19 10-21 10h68c2 0 15 0 21-10 2-5 4-13-2-23z"
fill="#108775"
/>
<path
d="M332 292v-1l1-2c1-3 2-7 1-10l-4-11-90-158-13-24h-1l-13 24-91 158-3 11a21 21 0 0 0 2 13c3 5 9 10 21 10h168c3 0 16 0 22-10zM226 134l83 145H144l82-145z"
fill="#2F495E"
fill-rule="nonzero"
/>
</g>
</svg>
</a>
<a
href="https://nuxtjs.org/partners/epicmax"
target="_blank"
class="link-5"
><strong class="bold-text-9">Nuxt</strong></a>
<g
fill="none"
fill-rule="evenodd"
>
<path
d="M123 292l-1-1c-2-4-2-8-2-12H25L167 27l59 107 19-14-59-107c-1-2-8-13-20-13-5 0-13 2-19 13L4 268c-1 2-7 14-1 24 2 5 8 10 21 10h120c-13 0-19-5-21-10z"
fill="#00C58E"
/>
<path
d="M395 269L280 62c-2-2-8-13-20-13-5 0-12 2-19 13l-15 24v48l34-59 114 204h-43a20 20 0 0 1-2 12v1c-6 10-19 10-21 10h68c2 0 15 0 21-10 2-5 4-13-2-23z"
fill="#108775"
/>
<path
d="M332 292v-1l1-2c1-3 2-7 1-10l-4-11-90-158-13-24h-1l-13 24-91 158-3 11a21 21 0 0 0 2 13c3 5 9 10 21 10h168c3 0 16 0 22-10zM226 134l83 145H144l82-145z"
fill="#2F495E"
fill-rule="nonzero"
/>
</g>
</svg>
<strong>Nuxt</strong>
</a>
</div>
</div>
<div class="header-banner__button">

<div class="header-banner__buttons">
<va-button
href="https://epicmax.co/?ref=vuestic-header"
target="blank"
>
{{ $t("landing.header.banner.hire") }}
</va-button>
<div
<va-button
v-if="closeable"
class="header-banner__button--close"
>
<va-icon
class="cursor-pointer"
size="small"
name="close"
@click="hide"
/>
</div>
icon="close"
preset="secondary"
round
:text-color="textColor"
class="header-banner__buttons--close"
:aria-label="$t('landing.header.banner.close')"
@click="hide"
/>
</div>
</div>
</div>
</transition>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue'
import { ref } from 'vue'
import { useElementTextColor } from 'vuestic-ui'
const props = defineProps({
closeable: {
type: Boolean,
Expand All @@ -113,6 +111,8 @@ const props = defineProps({
},
})
const textColor = useElementTextColor('primary')
const closeable = ref(props.closeable)
const isHidden = ref(closeable.value && localStorage.getItem('banner') === 'official-partner')
Expand All @@ -139,28 +139,35 @@ const hide = () => {
}
.header-banner {
$text-color: white;
min-height: 40px;
padding: 7px 1rem;
padding: 0.5rem 0;
background-color: #012875;
font-size: 0.9rem;
color: white;
color: $text-color;
flex-shrink: 0;
&:not(.header-banner--wrapped) {
padding-left: 1rem;
padding-right: 1rem;
}
&--wrapped {
&--wrapped {
.header__wrapper {
@include wrapper();
}
}
&__button {
&__buttons {
z-index: 10;
display: flex;
align-items: center;
@include xs(margin-top, 0.5rem);
&--close {
margin-left: 1rem;
cursor: pointer;
display: flex;
align-items: center;
}
}
Expand All @@ -174,16 +181,29 @@ const hide = () => {
}
a {
color: white !important;
color: $text-color !important;
}
&__left {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.ml-7 {
margin-left: 7px;
&__left-links {
display: flex;
justify-content: center;
align-items: center;
& > * {
margin-left: 0.75rem;
}
}
&__link {
display: flex;
align-items: center;
}
}
</style>
Loading

0 comments on commit 91c421d

Please sign in to comment.