Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#3304] Redesign Vuestic landing #3340

Merged
merged 36 commits into from
Apr 20, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
c0ed93b
fix(#3304): fix useSize composable
RVitaly1978 Apr 17, 2023
65c0099
fix(#3304): update assets
RVitaly1978 Apr 17, 2023
d73b8a5
fix(#3304): add svg images
RVitaly1978 Apr 17, 2023
18339a5
fix(#3304): update vuestic-config
RVitaly1978 Apr 17, 2023
c3078b5
fix(#3304): update index
RVitaly1978 Apr 17, 2023
6ce0431
fix(#3304): update HeaderBanner
RVitaly1978 Apr 17, 2023
8ac3a7d
fix(#3304): update partner icons
RVitaly1978 Apr 17, 2023
2e1c7c8
fix(#3304): add SocialsLinks component
RVitaly1978 Apr 17, 2023
7697271
fix(#3304): update EpicmaxBanner component
RVitaly1978 Apr 17, 2023
6b75b5a
fix(#3304): update LanguageDropdown component
RVitaly1978 Apr 17, 2023
50c53e2
fix(#3304): update StarsButton component
RVitaly1978 Apr 17, 2023
aefb976
fix(#3304): update VuesticLogo component
RVitaly1978 Apr 17, 2023
a19e594
fix(#3304): update Header
RVitaly1978 Apr 17, 2023
d54cef5
fix(#3304): update Preview
RVitaly1978 Apr 17, 2023
8fc9aa8
fix(#3304): update Features
RVitaly1978 Apr 17, 2023
a439a56
fix(#3304): update Customize
RVitaly1978 Apr 17, 2023
dccce59
fix(#3304): update Partners
RVitaly1978 Apr 17, 2023
91c6be7
fix(#3304): update SeamlessIntegration
RVitaly1978 Apr 17, 2023
a443177
fix(#3304): update OpenSource
RVitaly1978 Apr 17, 2023
32e5288
fix(#3304): update Admin
RVitaly1978 Apr 17, 2023
14bf800
fix(#3304): update Footer
RVitaly1978 Apr 17, 2023
0b81d5c
fix(#3304): update locals
RVitaly1978 Apr 17, 2023
352ecf0
fix(#3304): update sitemap
RVitaly1978 Apr 17, 2023
b89f6f6
fix(#3304): remove facebook from socials
RVitaly1978 Apr 17, 2023
cd90f45
fix(#3304): remove outdated images
RVitaly1978 Apr 17, 2023
313ce15
fix(#3304): minor styles
RVitaly1978 Apr 17, 2023
a6dc935
fix(#3304): remove importing defineProps and defineEmits
RVitaly1978 Apr 17, 2023
5ff9af7
fix(#3304): update font-awesome to v6.4.0 and socials icons
RVitaly1978 Apr 17, 2023
86b9bdb
fix(#3304): replace va-image, styling changes
RVitaly1978 Apr 18, 2023
79471a1
fix(#3304): review suggestions (colors)
RVitaly1978 Apr 18, 2023
ef6a56e
fix(#3304): add aria-hidden for svg
RVitaly1978 Apr 18, 2023
eae97b8
fix(#3304): update landing.vue and default.vue layout files
RVitaly1978 Apr 19, 2023
f16f6e7
fix(#3304): update locales
RVitaly1978 Apr 19, 2023
948ae4c
fix(#3304): update icons
RVitaly1978 Apr 19, 2023
c43d74b
fix(#3304): use applyPreset in setup function
RVitaly1978 Apr 20, 2023
be5a07c
fix(docs): make partners header h2
m0ksem Apr 20, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 20 additions & 18 deletions packages/docs/assets/fonts.scss
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
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
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
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