Eio/home-hero

packages/altair-docs/.vitepress/theme/components/AnimatedGradientText.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="animated-gradient-text">
+        <div class="gradient-background gradient-border" />
+        <slot></slot>
+    </div>
+</template>
+
+<style>
+.animated-gradient-text {
+    --bg-size: 300%;
+    --bg-gradient: rgba(255, 255, 255, 0.4);
+
+    position: relative;
+
+    display: flex;
+    gap: 0.25rem;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    max-width: fit-content;
+    margin: 0 auto;
+    padding: 0.375rem 1rem;
+    border-radius: 99999rem;
+
+    font-weight: 500;
+    background: var(--bg-gradient);
+
+    box-shadow: inset 0 -8px 10px rgba(143, 223, 255, 0.12);
+    backdrop-filter: blur(1px);
+
+    transition: box-shadow 0.5s ease-out, gap 0.3s ease-out;
+    white-space: nowrap;
+
+    svg {
+        height: 1rem;
+        fill: var(--vp-c-text-1);
+    }
+
+    &>span:first-of-type {
+        transition: margin-right 0.3s ease-out;
+    }
+}
+
+.dark .animated-gradient-text {
+    --bg-gradient: rgba(0, 0, 0, 0.4);
+}
+
+.animated-gradient-text:hover {
+    gap: 0.5rem;
+    box-shadow: inset 0 -5px 10px rgba(143, 223, 255, 0.35);
+
+    &>span:first-of-type {
+        margin-right: -0.25rem;
+    }
+}
+
+.gradient-border {
+    position: absolute;
+    inset: 0px;
+
+    display: block;
+    height: 100%;
+    width: 100%;
+    padding: 1px;
+    border-radius: inherit;
+
+    mask-composite: subtract !important;
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+}
+
+.gradient-background {
+    background: linear-gradient(to right, rgba(255, 170, 64, 0.8), rgba(156, 64, 255, 0.8), rgba(255, 170, 64, 0.8));
+    background-size: var(--bg-size) 100%;
+    animation: gradient 8s linear infinite;
+}
+
+.dark .gradient-background {
+    background-image: linear-gradient(to right, rgba(255, 170, 64, 0.6), rgba(156, 64, 255, 0.6), rgba(255, 170, 64, 0.6));
+}
+
+.gradient-text {
+    color: #0000;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+@keyframes gradient {
+    to {
+        background-position: var(--bg-size) 0px;
+    }
+}
+</style>

packages/altair-docs/.vitepress/theme/components/Home.vue

@@ -6,6 +6,8 @@ import Downloads from './Downloads.vue';
 import HomeCarbonAds from './HomeCarbonAds.vue';
 import VPButton from './VPButton.vue';
 import VPLink from './VPLink.vue';
+import AnimatedGradientText from './AnimatedGradientText.vue';
+import VPIconChevronRight from './icons/VPIconChevronRight.vue';
 
 const { theme, frontmatter: fm } = useData();
 </script>
@@ -25,28 +27,20 @@ const { theme, frontmatter: fm } = useData();
             </p>
 
             <p v-if="fm.hero.actions?.length" class="hero-actions">
-              <VPButton
-                v-for="action in fm.hero.actions"
-                :key="action.link"
-                tag="a"
-                size="big"
-                :theme="action.theme"
-                :text="action.text"
-                :href="action.link"
-              />
+              <VPButton v-for="action in fm.hero.actions" :key="action.link" tag="a" size="big" :theme="action.theme"
+                :text="action.text" :href="action.link" />
             </p>
             <div v-if="fm.heroSublimeAction" class="hero-sublime-actions">
-              <VPLink :href="fm.heroSublimeAction.link" class="hero-sublime-action">
-                {{ fm.heroSublimeAction.text }}
+              <VPLink :href="fm.heroSublimeAction.link">
+                <AnimatedGradientText><span>✨</span>
+                  <span class="gradient-background gradient-text">{{ fm.heroSublimeAction.text }}</span>
+                  <VPIconChevronRight />
+                </AnimatedGradientText>
               </VPLink>
             </div>
           </div>
           <div class="image-wrapper">
-            <img
-              v-if="fm.hero.image"
-              :src="withBase(fm.hero.image.src)"
-              :alt="fm.hero.image.alt ?? 'hero'"
-            />
+            <img v-if="fm.hero.image" :src="withBase(fm.hero.image.src)" :alt="fm.hero.image.alt ?? 'hero'" />
           </div>
         </div>
       </div>
@@ -61,27 +55,15 @@ const { theme, frontmatter: fm } = useData();
       <div class="custom-wrapper">
         <div class="column">
           <div class="features-wrapper">
-            <div
-              v-for="(feature, index) in fm.features"
-              :key="index"
-              class="feature"
-            >
+            <div v-for="(feature, index) in fm.features" :key="index" class="feature">
               <h2>{{ feature.title }}</h2>
               <p>{{ feature.details }}</p>
             </div>
           </div>
 
-          <div
-            v-if="fm.featuresFooterText && fm.featuresFooterLink"
-            class="features-actions"
-          >
-            <VPButton
-              tag="a"
-              size="medium"
-              :theme="'alt'"
-              :text="fm.featuresFooterText"
-              :href="fm.featuresFooterLink"
-            />
+          <div v-if="fm.featuresFooterText && fm.featuresFooterLink" class="features-actions">
+            <VPButton tag="a" size="medium" :theme="'alt'" :text="fm.featuresFooterText"
+              :href="fm.featuresFooterLink" />
           </div>
         </div>
       </div>
@@ -170,17 +152,13 @@ const { theme, frontmatter: fm } = useData();
       position: absolute;
       content: '';
       inset: 0px;
-      -webkit-mask-image: linear-gradient(
-        #0000 var(--fade-start),
-        #000 var(--fade-end)
-      );
+      -webkit-mask-image: linear-gradient(#0000 var(--fade-start),
+          #000 var(--fade-end));
       mask-image: linear-gradient(#0000 var(--fade-start), #000 var(--fade-end));
 
-      background-image: linear-gradient(
-          to right,
+      background-image: linear-gradient(to right,
           var(--grid-color) 1px,
-          transparent 0
-        ),
+          transparent 0),
         linear-gradient(to bottom, var(--grid-color) 1px, transparent 0);
       background-size: var(--grid-width) var(--grid-height);
       background-repeat: repeat;
@@ -216,6 +194,7 @@ const { theme, frontmatter: fm } = useData();
 
 .home .hero-sublime-actions {
   font-size: 14px;
+  margin-top: 2rem;
 }
 
 .hero-sublime-action {

packages/altair-docs/index.md

@@ -17,7 +17,7 @@ hero:
       text: Get Started →
       link: /docs/
 heroSublimeAction:
-  text: Discover Altair GraphQL Cloud ✨
+  text: Discover Altair GraphQL Cloud
   link: /cloud
 
 # heroImage: ./assets/img/app-shot.png