From f12be2d6022ba19761aff5d9d4b4e8d5ef3debc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 24 Mar 2023 15:54:11 +0300
Subject: [PATCH] Download count added to landing

---
 assets/styles/layout/landing/_main.scss | 138 ++++++++++++++++++------
 pages/index.vue                         |   2 +-
 pages/landing/GetStartedSection.vue     |  33 ++++++
 pages/landing/HeroSection.vue           |  29 ++---
 pages/landing/UsersSection.vue          |  89 +++++----------
 public/images/landing/core-icon.svg     |   6 +-
 6 files changed, 175 insertions(+), 122 deletions(-)
 create mode 100644 pages/landing/GetStartedSection.vue

diff --git a/assets/styles/layout/landing/_main.scss b/assets/styles/layout/landing/_main.scss
index 6bb8ad09c..3d7d262e1 100644
--- a/assets/styles/layout/landing/_main.scss
+++ b/assets/styles/layout/landing/_main.scss
@@ -18,11 +18,11 @@
 
     .linkbox {
         font-family: var(--font-family);
-        transition: background-color .3s;
+        transition: background-color 0.3s;
         display: inline-flex;
         align-items: center;
         color: var(--home-linkbox-text-color);
-        padding: .5rem 1rem;
+        padding: 0.5rem 1rem;
         border: var(--home-linkbox-border);
         background-color: var(--home-linkbox-bg);
         border-radius: 10px;
@@ -75,42 +75,110 @@
     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) {
-    .landing-footer{
+    .landing-footer {
         width: 1650px !important;
         margin-left: 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);
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 6fdbbab6f..c18344ffd 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,12 +1,12 @@
 <template>
     <div :class="landingClass">
         <Intro @change:theme="onThemeToggle"></Intro>
+        <UsersSection />
         <ComponentSection />
         <ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
         <BlockSection />
         <DesignerSection />
         <TemplateSection />
-        <UsersSection />
         <FeaturesSection />
         <FooterSection />
     </div>
diff --git a/pages/landing/GetStartedSection.vue b/pages/landing/GetStartedSection.vue
new file mode 100644
index 000000000..82ef04455
--- /dev/null
+++ b/pages/landing/GetStartedSection.vue
@@ -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>
diff --git a/pages/landing/HeroSection.vue b/pages/landing/HeroSection.vue
index bc4116020..3352fc517 100644
--- a/pages/landing/HeroSection.vue
+++ b/pages/landing/HeroSection.vue
@@ -79,18 +79,7 @@
             <div class="hero-border-left hidden md:block"></div>
             <div class="hero-border-right hidden md:block"></div>
         </div>
-
-        <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>
-
+        <GetStartedSection />
         <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-left"></div>
@@ -99,11 +88,11 @@
 </template>
 
 <script>
+import GetStartedSection from './GetStartedSection';
+
 export default {
     data() {
         return {
-            npmIcon: 'download-icon pi pi-download mr-3',
-            npmText: 'npm i primevue',
             setAnimation: false
         };
     },
@@ -111,18 +100,12 @@ export default {
         this.setAnimation = true;
     },
     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) {
             window.location.href = url;
         }
+    },
+    components: {
+        GetStartedSection: GetStartedSection
     }
 };
 </script>
diff --git a/pages/landing/UsersSection.vue b/pages/landing/UsersSection.vue
index a9de2488a..f2a666098 100644
--- a/pages/landing/UsersSection.vue
+++ b/pages/landing/UsersSection.vue
@@ -1,74 +1,43 @@
 <template>
     <section class="landing-users py-8 px-3 lg:px-8">
         <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>
-        <div class="grid mt-7 users-container">
-            <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('fox')" alt="fox 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('airbus')" alt="airbus 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('mercedes')" alt="mercedes 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('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" />
+        <p class="section-detail">
+            PrimeTek's open-source products are utilized by passionate developers and companies alike. With over
+            <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.
+        </p>
+        <div class="flex justify-content-center align-items-center mt-4">
+            <span class="ml-2"> </span>
+        </div>
+        <div v-for="(x, i) in users" :key="i" class="logo-section relative w-full md:w-8 mt-6 users-container">
+            <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>
+            <div class="marquee-wrapper overflow-hidden flex">
+                <div v-for="i of [1, 2, 3]" :key="i" :class="`marquee${x.reverse ? ' marquee-reverse' : ''}`">
+                    <template v-for="user of x.slicedUsers" :key="user">
+                        <div class="w-full">
+                            <img :src="imgSrc(user)" :alt="`${user}-${colorScheme}`" />
+                        </div>
+                    </template>
                 </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>
     </section>
 </template>
 
 <script>
 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: {
         imgSrc(brand) {
             return `https://primefaces.org/cdn/primevue/images/landing/whouses/${brand}-${this.colorScheme}.svg`;
diff --git a/public/images/landing/core-icon.svg b/public/images/landing/core-icon.svg
index 98ae71b02..4d31216b1 100644
--- a/public/images/landing/core-icon.svg
+++ b/public/images/landing/core-icon.svg
@@ -1,4 +1,4 @@
-<svg width="32" height="20" viewBox="0 0 32 20" 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="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"/>
+<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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.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>