Download count added to landing
Tuğçe Küçükoğlu
parent
9e5856f05f
commit
f12be2d602
|
|
@ -18,11 +18,11 @@
|
||||||
|
|
||||||
.linkbox {
|
.linkbox {
|
||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
transition: background-color .3s;
|
transition: background-color 0.3s;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: var(--home-linkbox-text-color);
|
color: var(--home-linkbox-text-color);
|
||||||
padding: .5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
border: var(--home-linkbox-border);
|
border: var(--home-linkbox-border);
|
||||||
background-color: var(--home-linkbox-bg);
|
background-color: var(--home-linkbox-bg);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
@ -75,38 +75,6 @@
|
||||||
background-color: var(--surface-hover);
|
background-color: var(--surface-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pad-section {
|
|
||||||
padding-left: 12rem;
|
|
||||||
padding-right: 12rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $landingBreakpointXL) {
|
|
||||||
.pad-section {
|
|
||||||
padding-left: 8rem;
|
|
||||||
padding-right: 8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $landingBreakpointLG) {
|
|
||||||
.pad-section {
|
|
||||||
padding-left: 4rem;
|
|
||||||
padding-right: 4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $landingBreakpointMD) {
|
|
||||||
.pad-section {
|
|
||||||
padding-left: 2rem;
|
|
||||||
padding-right: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.users-container {
|
|
||||||
max-width: 1250px !important;
|
|
||||||
margin-left: auto !important;
|
|
||||||
margin-right: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1960px) {
|
@media screen and (min-width: 1960px) {
|
||||||
.landing-footer {
|
.landing-footer {
|
||||||
width: 1650px !important;
|
width: 1650px !important;
|
||||||
|
|
@ -114,3 +82,103 @@
|
||||||
margin-right: auto !important;
|
margin-right: auto !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.animated-text {
|
||||||
|
position: relative;
|
||||||
|
color: var(--home-text-color);
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
display: inline-block;
|
||||||
|
width: 14.45rem;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
animation: color-animation 2s linear infinite;
|
||||||
|
background-size: auto auto;
|
||||||
|
background-clip: border-box;
|
||||||
|
background-size: 200% auto;
|
||||||
|
content: "";
|
||||||
|
width: 14.45rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
background-image: linear-gradient(-225deg, var(--blue-400) 30%, var(--cyan-400) 60%, var(--purple-400) 80%);
|
||||||
|
filter: blur(24px);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
> span {
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
background-image: linear-gradient(-225deg, var(--blue-400) 30%, var(--cyan-400) 60%, var(--purple-400) 80%);
|
||||||
|
animation: color-animation 2s linear infinite;
|
||||||
|
background-size: auto auto;
|
||||||
|
background-clip: border-box;
|
||||||
|
background-size: 200% auto;
|
||||||
|
background-clip: text;
|
||||||
|
text-fill-color: transparent;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes color-animation {
|
||||||
|
40%,
|
||||||
|
100% {
|
||||||
|
background-position: -200% center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scroll {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(calc(-100% - 3rem));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing-users {
|
||||||
|
.section-detail {
|
||||||
|
max-width: 1250px !important;
|
||||||
|
margin-left: auto !important;
|
||||||
|
margin-right: auto !important;
|
||||||
|
}
|
||||||
|
.users-container {
|
||||||
|
max-width: 1250px !important;
|
||||||
|
margin-left: auto !important;
|
||||||
|
margin-right: auto !important;
|
||||||
|
|
||||||
|
.marquee-wrapper {
|
||||||
|
user-select: none;
|
||||||
|
gap: 3rem;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.marquee {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
gap: 3rem;
|
||||||
|
min-width: 100%;
|
||||||
|
animation: scroll 20s linear infinite;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
max-width: clamp(10rem, 1rem + 28vmin, 20rem);
|
||||||
|
aspect-ratio: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.marquee-reverse{
|
||||||
|
animation-direction: reverse;
|
||||||
|
animation-delay: calc(20s / -2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="landingClass">
|
<div :class="landingClass">
|
||||||
<Intro @change:theme="onThemeToggle"></Intro>
|
<Intro @change:theme="onThemeToggle"></Intro>
|
||||||
|
<UsersSection />
|
||||||
<ComponentSection />
|
<ComponentSection />
|
||||||
<ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
|
<ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
|
||||||
<BlockSection />
|
<BlockSection />
|
||||||
<DesignerSection />
|
<DesignerSection />
|
||||||
<TemplateSection />
|
<TemplateSection />
|
||||||
<UsersSection />
|
|
||||||
<FeaturesSection />
|
<FeaturesSection />
|
||||||
<FooterSection />
|
<FooterSection />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<section class="landing-getstarted flex flex-column align-items-center justify-content-center mt-8 z-1">
|
||||||
|
<div class="flex flex-column md:flex-row align-items-center justify-content-center">
|
||||||
|
<NuxtLink to="/installation" class="linkbox active font-semibold py-3 px-4 fadeinleft animation-duration-2000 animation-ease-out"> Get Started <i class="pi pi-arrow-right ml-3"></i> </NuxtLink>
|
||||||
|
<div class="relative cursor-pointer box download-box w-15rem font-medium p-3 px-4 mt-3 md:mt-0 md:ml-3 bg-transparent inline-flex align-items-center fadeinright animation-duration-2000 animation-ease-out" @click="copyClick">
|
||||||
|
<i :class="downloadIcon"></i>
|
||||||
|
<span class="font-bold select-all" style="font-family: monaco, monospace"> {{ npmText }} </span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
npmText: 'npm i primevue',
|
||||||
|
downloadIcon: 'pi pi-download mr-3 download-icon'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
copyClick() {
|
||||||
|
navigator.clipboard.writeText(this.npmText);
|
||||||
|
this.npmText = 'copied!';
|
||||||
|
this.downloadIcon = 'pi pi-copy mr-3 download-icon';
|
||||||
|
setTimeout(() => {
|
||||||
|
this.npmText = 'npm i primevue';
|
||||||
|
this.downloadIcon = 'pi pi-download mr-3 download-icon';
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -79,18 +79,7 @@
|
||||||
<div class="hero-border-left hidden md:block"></div>
|
<div class="hero-border-left hidden md:block"></div>
|
||||||
<div class="hero-border-right hidden md:block"></div>
|
<div class="hero-border-right hidden md:block"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<GetStartedSection />
|
||||||
<section class="landing-getstarted flex flex-column md:flex-row align-items-center justify-content-center mt-8 z-1">
|
|
||||||
<router-link to="/installation" class="linkbox active font-semibold py-3 px-4 ml-0 md:ml-6 fadeinleft animation-duration-2000 animation-ease-out">
|
|
||||||
Get Started
|
|
||||||
<i class="pi pi-arrow-right ml-3"></i>
|
|
||||||
</router-link>
|
|
||||||
<div class="box download-box w-14rem cursor-pointer font-medium p-3 px-4 mt-3 md:mt-0 md:ml-3 bg-transparent inline-flex align-items-center fadeinright animation-duration-2000 animation-ease-out" @click="copyMe">
|
|
||||||
<i :class="npmIcon"></i>
|
|
||||||
<span class="font-bold" :style="{ fontFamily: 'monaco' }">{{ npmText }}</span>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="hero-bg absolute top-0 left-0 right-0 bottom-0 z-0">
|
<div class="hero-bg absolute top-0 left-0 right-0 bottom-0 z-0">
|
||||||
<div class="hero-strip-top"></div>
|
<div class="hero-strip-top"></div>
|
||||||
<div class="hero-strip-left"></div>
|
<div class="hero-strip-left"></div>
|
||||||
|
|
@ -99,11 +88,11 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import GetStartedSection from './GetStartedSection';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
npmIcon: 'download-icon pi pi-download mr-3',
|
|
||||||
npmText: 'npm i primevue',
|
|
||||||
setAnimation: false
|
setAnimation: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
@ -111,18 +100,12 @@ export default {
|
||||||
this.setAnimation = true;
|
this.setAnimation = true;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
copyMe() {
|
|
||||||
navigator.clipboard.writeText('npm i primevue');
|
|
||||||
this.npmText = 'copied!';
|
|
||||||
this.npmIcon = 'pi pi-copy download-icon mr-3';
|
|
||||||
setTimeout(() => {
|
|
||||||
this.npmIcon = 'download-icon pi pi-download mr-3';
|
|
||||||
this.npmText = 'npm i primevue';
|
|
||||||
}, 2000);
|
|
||||||
},
|
|
||||||
navigateTo(url) {
|
navigateTo(url) {
|
||||||
window.location.href = url;
|
window.location.href = url;
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
GetStartedSection: GetStartedSection
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,74 +1,43 @@
|
||||||
<template>
|
<template>
|
||||||
<section class="landing-users py-8 px-3 lg:px-8">
|
<section class="landing-users py-8 px-3 lg:px-8">
|
||||||
<div class="section-header">Who Uses</div>
|
<div class="section-header">Who Uses</div>
|
||||||
<p class="section-detail">Open source products of PrimeTek are used all around the world by millions of developers.</p>
|
<p class="section-detail">
|
||||||
<div class="grid mt-7 users-container">
|
PrimeTek's open-source products are utilized by passionate developers and companies alike. With over
|
||||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
<span class="font-semibold animated-text relative white-space-nowrap"> <span>100 Million Downloads </span>🎉 </span> on npm, we continue to develop every day, while our community grows larger by the day.
|
||||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
</p>
|
||||||
<img :src="imgSrc('fox')" alt="fox logo" />
|
<div class="flex justify-content-center align-items-center mt-4">
|
||||||
</div>
|
<span class="ml-2"> </span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
<div v-for="(x, i) in users" :key="i" class="logo-section relative w-full md:w-8 mt-6 users-container">
|
||||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
<div class="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2" style="background: 'linear-gradient(to right, var(--home-bg), transparent)'"></div>
|
||||||
<img :src="imgSrc('airbus')" alt="airbus logo" />
|
<div class="marquee-wrapper overflow-hidden flex">
|
||||||
</div>
|
<div v-for="i of [1, 2, 3]" :key="i" :class="`marquee${x.reverse ? ' marquee-reverse' : ''}`">
|
||||||
</div>
|
<template v-for="user of x.slicedUsers" :key="user">
|
||||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
<div class="w-full">
|
||||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
<img :src="imgSrc(user)" :alt="`${user}-${colorScheme}`" />
|
||||||
<img :src="imgSrc('mercedes')" alt="mercedes logo" />
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
|
||||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
|
||||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
|
||||||
<img :src="imgSrc('ebay')" alt="ebay logo" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
|
||||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
|
||||||
<img :src="imgSrc('ford')" alt="ford logo" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
|
||||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
|
||||||
<img :src="imgSrc('vw')" alt="volkswage logo" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
|
||||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
|
||||||
<img :src="imgSrc('intel')" alt="intel logo" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
|
||||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
|
||||||
<img :src="imgSrc('unicredit')" alt="unicredit logo" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
|
||||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
|
||||||
<img :src="imgSrc('lufthansa')" alt="lufthansa logo" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
|
||||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
|
||||||
<img :src="imgSrc('nvidia')" alt="nvidia logo" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
|
||||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
|
||||||
<img :src="imgSrc('verizon')" alt="verizon logo" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
|
|
||||||
<div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
|
|
||||||
<img :src="imgSrc('amex')" alt="american express logo" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2" style="background: 'linear-gradient(to left, var(--home-bg), transparent)'"></div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
usersData: ['fox', 'airbus', 'mercedes', 'ebay', 'ford', 'vw', 'intel', 'unicredit', 'lufthansa', 'nvidia', 'verizon', 'amex'],
|
||||||
|
users: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.users = [
|
||||||
|
{ slicedUsers: this.usersData.slice(0, 6), reverse: false },
|
||||||
|
{ slicedUsers: this.usersData.slice(6), reverse: true }
|
||||||
|
];
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
imgSrc(brand) {
|
imgSrc(brand) {
|
||||||
return `https://primefaces.org/cdn/primevue/images/landing/whouses/${brand}-${this.colorScheme}.svg`;
|
return `https://primefaces.org/cdn/primevue/images/landing/whouses/${brand}-${this.colorScheme}.svg`;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<svg width="32" height="20" viewBox="0 0 32 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M11.7036 0.381504C11.459 0.137215 11.1274 0 10.7817 0C10.436 0 10.1045 0.137215 9.85989 0.381504L1.16324 9.07816C0.918953 9.32275 0.781738 9.65431 0.781738 10C0.781738 10.3457 0.918953 10.6773 1.16324 10.9218L9.85989 19.6185C10.1045 19.8628 10.436 20 10.7817 20C11.1274 20 11.459 19.8628 11.7036 19.6185C11.9479 19.3739 12.0851 19.0423 12.0851 18.6967C12.0851 18.351 11.9479 18.0194 11.7036 17.7748L3.92878 10L11.7036 2.22519C11.9479 1.9806 12.0851 1.64904 12.0851 1.30335C12.0851 0.957657 11.9479 0.626098 11.7036 0.381504V0.381504Z" fill="#4f8ff7"/>
|
<path d="M11.7038 5.3815C11.4592 5.13721 11.1277 5 10.782 5C10.4363 5 10.1047 5.13721 9.86014 5.3815L1.16349 14.0782C0.919198 14.3227 0.781982 14.6543 0.781982 15C0.781982 15.3457 0.919198 15.6773 1.16349 15.9218L9.86014 24.6185C10.1047 24.8628 10.4363 25 10.782 25C11.1277 25 11.4592 24.8628 11.7038 24.6185C11.9481 24.3739 12.0853 24.0423 12.0853 23.6966C12.0853 23.351 11.9481 23.0194 11.7038 22.7748L3.92902 15L11.7038 7.22519C11.9481 6.9806 12.0853 6.64904 12.0853 6.30335C12.0853 5.95766 11.9481 5.6261 11.7038 5.3815Z" fill="#03C4E8"/>
|
||||||
<path d="M30.8364 9.07814L22.1397 0.381485C21.8925 0.151058 21.5654 0.0256125 21.2274 0.0315753C20.8895 0.0375381 20.567 0.174444 20.328 0.41345C20.089 0.652457 19.9521 0.974903 19.9461 1.31286C19.9402 1.65081 20.0656 1.97789 20.2961 2.22518L28.0709 9.99998L20.2961 17.7748C20.0518 18.0194 19.9146 18.3509 19.9146 18.6966C19.9146 19.0423 20.0518 19.3739 20.2961 19.6185C20.5406 19.8628 20.8722 20 21.2179 20C21.5636 20 21.8952 19.8628 22.1397 19.6185L30.8364 10.9218C31.0807 10.6772 31.2179 10.3457 31.2179 9.99998C31.2179 9.65429 31.0807 9.32273 30.8364 9.07814Z" fill="#4f8ff7"/>
|
<path d="M30.8366 14.0781L22.14 5.38148C21.8927 5.15106 21.5656 5.02561 21.2277 5.03158C20.8897 5.03754 20.5673 5.17444 20.3283 5.41345C20.0893 5.65246 19.9524 5.9749 19.9464 6.31286C19.9404 6.65081 20.0659 6.97789 20.2963 7.22518L28.0711 15L20.2963 22.7748C20.052 23.0194 19.9148 23.3509 19.9148 23.6966C19.9148 24.0423 20.052 24.3739 20.2963 24.6185C20.5409 24.8628 20.8725 25 21.2181 25C21.5638 25 21.8954 24.8628 22.14 24.6185L30.8366 15.9218C31.0809 15.6772 31.2181 15.3457 31.2181 15C31.2181 14.6543 31.0809 14.3227 30.8366 14.0781Z" fill="#03C4E8"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in New Issue