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.

Sign up for GitHub

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

Jump to bottom

Landing page updates #2218

Merged
merged 6 commits into from Aug 11, 2022
Merged

Landing page updates #2218

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a84e20d
added Partners section, update design for landing
zvenigorodskaia Aug 11, 2022
8fa2640
fix header links
zvenigorodskaia Aug 11, 2022
d6cc1b0
refactoring Landing page
zvenigorodskaia Aug 11, 2022
d1457b4
refactoring Landing page components naming
zvenigorodskaia Aug 11, 2022
08d2027
refactoring Landing page (Partners section)
zvenigorodskaia Aug 11, 2022
4cc46bd
refactoring Landing page
zvenigorodskaia Aug 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/docs/public/index.html
View file
Open in desktop
Expand Up @@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

<title>Vuestic UI — Vue.js 3.0 UI Framework</title>
<title>Vuestic UI — Vue 3 UI framework</title>
zvenigorodskaia marked this conversation as resolved.
Show resolved Hide resolved
<meta vmid="description" name="description" content="Vuestic UI is a modern Vue.js UI framework designed to be simple and customizable for applications of any type and scale">
<meta vmid="keywords" name="keywords" content="vue, vue components, vuestic, vuestic-ui, component framework">
<meta vmid="og:description" property="og:description" content="Vuestic UI is a modern Vue.js UI framework designed to be simple and customizable for applications of any type and scale">
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/assets/fonts.scss
View file
Open in desktop
Expand Up @@ -39,7 +39,7 @@
// link
@mixin link-font() {
font-weight: 600;
font-size: 1rem;
font-size: 1.1rem;

@include lg(font-size, 0.95rem);
@include md(font-size, 0.925rem);
Expand Down
37 changes: 12 additions & 25 deletions packages/docs/src/components/landing/Admin.vue
View file
Open in desktop
Expand Up @@ -6,23 +6,24 @@
<div class="admin__subtitle">{{ $t('landing.admin.text') }}</div>
<div class="admin__buttons">
<va-button class="admin__buttons--button"
href="https://github.com/epicmaxco/vuestic-admin"
href="https://vuestic.epicmax.co/admin/dashboard"
target="blank"
:rounded="false"
color="primary"
>
<va-icon class="fa fa-github" style="margin-right: 0.5rem;" />
{{ $t('landing.admin.buttons.github') }}
{{ $t('landing.admin.buttons.demo') }}
</va-button>
<va-button class="admin__buttons--button"
href="https://vuestic.epicmax.co/admin/dashboard"
href="https://github.com/epicmaxco/vuestic-admin"
target="blank"
:rounded="false"
color="primary"
flat
>
{{ $t('landing.admin.buttons.demo') }}
<va-icon class="fa fa-github" style="margin-right: 0.5rem;" />
{{ $t('landing.admin.buttons.github') }}
</va-button>

<div class="admin__buttons--button">
<stars-button repo="epicmaxco/vuestic-admin" />
</div>
Expand Down Expand Up @@ -126,39 +127,25 @@ export default class Admin extends Vue {}

&__buttons {
@include row-flex();
@include col();
@include size(8);
@include shift-left(2);

margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
padding-top: 1.5rem;

// lg
@include size-lg(10);
@include shift-lg-left(1);
// md
@include size-md(6);
@include shift-md-left(3);
// xs
@include size-xs(10);
@include shift-xs-left(1);

&--button {
@include col();
@include size(4);
@include button-font();
@include md(margin-bottom, 1rem);
@include md(justify-content, center);
@include xs(width, 100%);
@include xs(margin, 0 1rem 1rem 1rem);

height: 3rem;
margin-right: 1rem;
display: flex;
align-items: center;
justify-content: center;

// md
@include size-md(12);
@include md(margin-bottom, 1rem);
@include md(justify-content, center);
}
}

Expand Down
68 changes: 67 additions & 1 deletion packages/docs/src/components/landing/Footer.vue
View file
Open in desktop
Expand Up @@ -2,6 +2,24 @@
<footer class="footer">
<div class="footer__wrapper">
<div class="footer__inner">
<div class="footer__banner">
<div class="footer__banner-content">
<div class="footer__banner-text">
<span>
🔥 {{ developersCount }} Vue.js {{ $t("landing.footer.bannerText[0]") }}<span v-if="developersCount > 1">{{ $t("landing.footer.bannerText[1]") }}</span>
{{ $t("landing.footer.bannerText[2]") }} {{ currentMonthName }} {{ $t("landing.footer.bannerText[3]") }}.
</span>
<a :style="{ color: 'yellow' }" href="mailto:hello@epicmax.co">
{{ $t("landing.footer.contactUs") }}
</a>
</div>
<a href="https://epicmax.co" class="footer__banner-logo">
<svg width="135" height="26" viewBox="0 0 135 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.783 0C66.8783 0 68.5401 0.574946 69.7684 1.72485C70.9966 2.87478 71.6108 4.45436 71.6108 6.46369C71.6108 6.68156 71.5867 7.081 71.5385 7.66202L71.5024 7.84358C71.4783 8.01304 71.4121 8.15224 71.3037 8.26117C71.1953 8.37011 71.0689 8.42458 70.9244 8.42458L65.3611 8.60615C64.9998 8.60615 64.8432 8.43669 64.8914 8.09777L64.9998 7.18995C65.048 6.7784 64.9878 6.45158 64.8192 6.20949C64.6506 5.96742 64.4097 5.84636 64.0967 5.84636C63.7595 5.84636 63.4765 5.96742 63.2477 6.20949C63.0189 6.45158 62.8805 6.7784 62.8323 7.18995L61.4234 18.8464C61.3752 19.2337 61.4294 19.5484 61.5859 19.7905C61.7425 20.0326 61.9893 20.1536 62.3265 20.1536C62.6637 20.1536 62.9467 20.0386 63.1755 19.8087C63.4043 19.5787 63.5427 19.2579 63.5909 18.8464L63.6993 17.8659C63.7234 17.6965 63.7896 17.5694 63.898 17.4846C64.0064 17.3999 64.1328 17.3575 64.2773 17.3575L69.8045 17.5391C69.9731 17.5391 70.0995 17.5694 70.1838 17.6299C70.2681 17.6904 70.2982 17.7812 70.2741 17.9022L70.238 18.2654C69.949 20.6136 69.0158 22.4898 67.4383 23.8939C65.8608 25.298 63.9161 26 61.604 26C59.5087 26 57.853 25.419 56.6367 24.257C55.4205 23.095 54.8124 21.5093 54.8124 19.5C54.8124 19.2579 54.8365 18.8464 54.8847 18.2654L56.1852 7.66202C56.4742 5.31376 57.4014 3.44973 58.9668 2.06984C60.5323 0.689946 62.471 0 64.783 0ZM35.1662 0.181818C37.0929 0.181818 38.6162 0.8016 39.7361 2.04116C40.856 3.28075 41.4159 4.92345 41.4159 6.96935C41.4159 7.54702 41.3919 7.99229 41.3437 8.30519C41.151 9.84564 40.6995 11.2055 39.989 12.3849C39.2785 13.5643 38.3633 14.4729 37.2434 15.1108C36.1236 15.7486 34.8893 16.0675 33.5406 16.0675H31.5898C31.4694 16.0675 31.3851 16.1397 31.3369 16.2842L30.2893 24.913C30.2652 25.0815 30.199 25.2139 30.0906 25.3101C29.9822 25.4064 29.8558 25.4545 29.7113 25.4545H24.148C24.0035 25.4545 23.8891 25.4064 23.8048 25.3101C23.7205 25.2139 23.6904 25.0815 23.7145 24.913L26.6767 0.723382C26.7008 0.554891 26.7671 0.422509 26.8754 0.326236C26.9838 0.229964 27.1103 0.181818 27.2548 0.181818H35.1662ZM52.178 0.181818C52.3225 0.181818 52.4369 0.229964 52.5212 0.326236C52.6055 0.422509 52.6356 0.554891 52.6115 0.723382L49.6493 24.913C49.6252 25.0815 49.5589 25.2139 49.4506 25.3101C49.3422 25.4064 49.2157 25.4545 49.0712 25.4545H43.5079C43.3634 25.4545 43.249 25.4064 43.1647 25.3101C43.0805 25.2139 43.0503 25.0815 43.0744 24.913L46.0367 0.723382C46.0608 0.554891 46.127 0.422509 46.2354 0.326236C46.3438 0.229964 46.4702 0.181818 46.6147 0.181818H52.178ZM82.5901 0.181818C82.8791 0.181818 83.0718 0.3142 83.1681 0.578964L85.0105 5.16416C85.0587 5.23636 85.1129 5.27247 85.1731 5.27247C85.2333 5.27247 85.2754 5.23636 85.2995 5.16416L88.2979 0.578964C88.4424 0.3142 88.6592 0.181818 88.9482 0.181818H94.4393C94.5838 0.181818 94.6982 0.229964 94.7825 0.326236C94.8668 0.422509 94.8969 0.554891 94.8728 0.723382L91.9105 24.913C91.8864 25.0815 91.8202 25.2139 91.7118 25.3101C91.6034 25.4064 91.477 25.4545 91.3325 25.4545H85.7692C85.6247 25.4545 85.5103 25.4064 85.426 25.3101C85.3417 25.2139 85.3116 25.0815 85.3357 24.913L87.1419 10.2187C87.1419 10.0984 87.1179 10.0322 87.0697 10.0201C87.0215 10.0081 86.9613 10.0502 86.8891 10.1465L84.4686 13.6125L84.0351 14.2623H83.999L82.1927 10.0743C82.1687 9.97801 82.1265 9.93589 82.0663 9.94792C82.0061 9.95996 81.964 10.0261 81.9399 10.1465L80.1336 24.913C80.1095 25.0815 80.0493 25.2139 79.953 25.3101C79.8566 25.4064 79.7242 25.4545 79.5556 25.4545H74.0284C73.8598 25.4545 73.7334 25.4064 73.6491 25.3101C73.5648 25.2139 73.5347 25.0815 73.5587 24.913L76.521 0.723382C76.5451 0.554891 76.6114 0.422509 76.7197 0.326236C76.8281 0.229964 76.9545 0.181818 77.0991 0.181818H82.5901ZM110.62 0.181818C110.957 0.181818 111.138 0.338273 111.162 0.651164L113.149 24.8769C113.149 25.2861 112.968 25.4545 112.607 25.4545H106.935C106.598 25.4545 106.442 25.2861 106.466 24.9491V22.2413C106.49 22.1691 106.472 22.1149 106.412 22.0788C106.351 22.0427 106.297 22.0247 106.249 22.0247H103.178C103.058 22.0247 102.962 22.0848 102.889 22.2052L102.131 24.9491C102.058 25.2861 101.854 25.4545 101.517 25.4545H96.0255C95.6643 25.4545 95.5318 25.262 95.6281 24.8769L103.576 0.651164C103.672 0.338273 103.889 0.181818 104.226 0.181818H110.62ZM8.59443 0.181818C8.60244 0.181818 8.6105 0.181818 8.61863 0.181818H21.5997C21.7684 0.181818 21.8949 0.229964 21.9793 0.326236C22.0637 0.422509 22.0938 0.554891 22.0697 0.723382L21.4912 5.45298C21.4671 5.62147 21.4008 5.75385 21.2923 5.85013C21.1838 5.9464 21.0452 5.99455 20.8765 5.99455H14.1871C14.0425 5.99455 13.9701 6.06675 13.9701 6.21116L13.5362 9.67714C13.5121 9.82156 13.5724 9.89377 13.717 9.89377H17.1883C17.357 9.89377 17.4836 9.9419 17.5679 10.0382C17.6523 10.1345 17.6824 10.2668 17.6583 10.4353L17.0798 15.1649C17.0075 15.526 16.8026 15.7065 16.4651 15.7065H12.9938C12.8492 15.7065 12.7769 15.7787 12.7769 15.9231L12.343 19.4252C12.3189 19.5696 12.3791 19.6418 12.5238 19.6418H19.2132C19.3819 19.6418 19.5085 19.69 19.5928 19.7862C19.6772 19.8825 19.7073 20.0149 19.6832 20.1834L19.1047 24.913C19.0806 25.0815 19.0143 25.2139 18.9058 25.3101C18.7973 25.4064 18.6587 25.4545 18.49 25.4545H5.50897C5.36433 25.4545 5.24983 25.4064 5.16546 25.3101C5.08109 25.2139 5.05095 25.0815 5.07506 24.913L6.98897 9.29867L0.0812815 0.775055C-0.044929 0.619327 -0.021587 0.390273 0.133417 0.263473C0.197978 0.210655 0.278687 0.181818 0.361942 0.181818H8.59443ZM124.74 0.181818C124.885 0.181818 125.005 0.223945 125.102 0.308182C125.198 0.392418 125.258 0.506745 125.282 0.651164L126.077 5.5974C126.101 5.69367 126.143 5.74182 126.203 5.74182C126.264 5.74182 126.306 5.69367 126.33 5.5974L128.353 0.651164C128.473 0.338273 128.69 0.181818 129.003 0.181818H134.566C134.855 0.181818 135 0.290127 135 0.506745L134.928 0.795582L128.859 12.6738C128.835 12.7219 128.823 12.8182 128.823 12.9626L131.965 24.8408C131.99 24.8889 132.002 24.9491 132.002 25.0213C132.002 25.3101 131.821 25.4545 131.46 25.4545H125.933C125.788 25.4545 125.668 25.4124 125.571 25.3282C125.475 25.2439 125.415 25.1296 125.391 24.9852L124.56 20.0751C124.536 19.9788 124.494 19.9307 124.433 19.9307C124.373 19.9307 124.319 19.9788 124.271 20.0751L122.248 24.9852C122.127 25.2981 121.911 25.4545 121.597 25.4545H116.034C115.745 25.4545 115.601 25.3462 115.601 25.1296L115.673 24.8408L121.742 12.9626C121.766 12.9145 121.778 12.8182 121.778 12.6738L118.635 0.795582C118.611 0.747455 118.599 0.687273 118.599 0.615073C118.599 0.326236 118.78 0.181818 119.141 0.181818H124.74ZM106.122 10.4581C106.062 10.4581 106.02 10.5186 105.996 10.6397L104.298 16.8129C104.226 16.9581 104.286 17.0307 104.479 17.0307H106.032C106.152 17.0307 106.225 16.9581 106.249 16.8129L106.213 10.6397C106.213 10.5186 106.183 10.4581 106.122 10.4581ZM33.2877 6.13687H32.8181C32.6736 6.13687 32.6013 6.20949 32.6013 6.35475L32.0594 10.7849C32.0354 10.9302 32.0956 11.0028 32.2401 11.0028H32.6736C33.2034 11.0028 33.655 10.8031 34.0283 10.4036C34.4016 10.0042 34.6364 9.40503 34.7327 8.60615C34.7568 8.46089 34.7689 8.25512 34.7689 7.98883C34.7689 7.38362 34.6364 6.92365 34.3715 6.60895C34.1066 6.29422 33.7453 6.13687 33.2877 6.13687Z" fill="#FFFF00" />
</svg>
</a>
</div>
</div>
<div class="footer__buttons">
<va-button
class="footer__buttons__button"
Expand Down Expand Up @@ -80,7 +98,7 @@
</va-button>
</div>
<div class="footer__subtitle">
{{ $t("landing.footer.text") }}
© {{ currentYear }} {{ $t("landing.footer.text") }}
<a :style="{ color: primaryColor }" href="mailto:hello@epicmax.co">
hello@epicmax.co
</a>
Expand Down Expand Up @@ -110,6 +128,21 @@ export default class Footer extends Vue {
// TODO: Replace with setup FN
return useColors().getColor('primary')
}

get currentYear () {
const date = new Date() // 2009-11-10
return date.getFullYear()
}

get currentMonthName () {
const date = new Date() // 2009-11-10
return date.toLocaleString('en', { month: 'long' })
}

get developersCount () {
const currentMonth = new Date().getUTCMonth()
return currentMonth % 3 + 2
}
}
</script>

Expand Down Expand Up @@ -216,5 +249,38 @@ export default class Footer extends Vue {
font-size: 1rem;
}
}

&__banner {
zvenigorodskaia marked this conversation as resolved.
Show resolved Hide resolved
width: 100%;
display: flex;
justify-content: center;

&-content {
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 4rem);
background: linear-gradient(180.81deg, #182879 0.7%, #5b3c9b 99.3%);
max-width: 53rem;
margin: 0 2rem 2rem 2rem;
padding: 1.7rem;
color: #ffffff;
border-radius: 0.5rem;

@include sm(flex-direction, column);
@include sm(align-items, start);
}

&-text {
line-height: 1.5;
}

&-logo {
margin-left: 3rem;

@include sm(margin-top, 1rem);
@include sm(align-self, end);
}
}
}
</style>
12 changes: 11 additions & 1 deletion packages/docs/src/components/landing/Header.vue
View file
Open in desktop
Expand Up @@ -14,7 +14,7 @@
<nav class="header__links">
<!-- vuestic buttons -->
<va-button :to="`/${$root.$i18n.locale}/introduction/overview`" class="header__links--link" flat color="primary">{{ $t('landing.header.buttons.overview') }}</va-button>
<va-button :to="`/${$root.$i18n.locale}/introduction/overview`" class="header__links--link" flat color="primary">{{ $t('landing.header.buttons.docs') }}</va-button>
<va-button href="https://vuestic.epicmax.co/admin/dashboard" target="blank" class="header__links--link" flat color="primary">Vuestic Admin</va-button>
zvenigorodskaia marked this conversation as resolved.
Show resolved Hide resolved
<va-button href="https://discord.gg/u7fQdqQt8c" target="blank" class="header__links--link" flat color="primary">{{ $t('landing.header.buttons.discord') }}</va-button>
<LanguageDropdown />
<stars-button class="ml-2" repo="epicmaxco/vuestic-ui" />
Expand Down Expand Up @@ -160,6 +160,10 @@ export default class Header extends Vue {
justify-content: space-between;
}

::v-deep(.va-dropdown__content) {
background: #f6f8f9 !important;
zvenigorodskaia marked this conversation as resolved.
Show resolved Hide resolved
}

&__links {
@include col();
@include size(9);
Expand All @@ -170,11 +174,17 @@ export default class Header extends Vue {

@include sm(display, none);

::v-deep(.va-button--flat) {
background: transparent !important;
}

&--link {
@include link-font();

line-height: 1.5rem;
margin-left: 0.5rem;
background: transparent !important;
white-space: nowrap;

@include sm(width, 100%);
}
Expand Down