initial commit

app/components/landing/Hero.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import type { IndexCollectionItem } from '@nuxt/content'
+
+const { footer, global } = useAppConfig()
+
+defineProps<{
+  page: IndexCollectionItem
+}>()
+</script>
+
+<template>
+  <UPageHero
+    :ui="{
+      headline: 'flex items-center justify-center',
+      title: 'text-shadow-md max-w-lg mx-auto',
+      links: 'mt-4 flex-col justify-center items-center'
+    }"
+  >
+    <template #headline>
+      <Motion
+        :initial="{
+          scale: 1.1,
+          opacity: 0,
+          filter: 'blur(20px)'
+        }"
+        :animate="{
+          scale: 1,
+          opacity: 1,
+          filter: 'blur(0px)'
+        }"
+        :transition="{
+          duration: 0.6,
+          delay: 0.1
+        }"
+      >
+        <UColorModeAvatar
+          class="size-18 ring ring-default ring-offset-3 ring-offset-(--ui-bg)"
+          :light="global.picture?.light!"
+          :dark="global.picture?.dark!"
+          :alt="global.picture?.alt!"
+        />
+      </Motion>
+    </template>
+
+    <template #title>
+      <Motion
+        :initial="{
+          scale: 1.1,
+          opacity: 0,
+          filter: 'blur(20px)'
+        }"
+        :animate="{
+          scale: 1,
+          opacity: 1,
+          filter: 'blur(0px)'
+        }"
+        :transition="{
+          duration: 0.6,
+          delay: 0.1
+        }"
+      >
+        {{ page.title }}
+      </Motion>
+    </template>
+
+    <template #description>
+      <Motion
+        :initial="{
+          scale: 1.1,
+          opacity: 0,
+          filter: 'blur(20px)'
+        }"
+        :animate="{
+          scale: 1,
+          opacity: 1,
+          filter: 'blur(0px)'
+        }"
+        :transition="{
+          duration: 0.6,
+          delay: 0.3
+        }"
+      >
+        {{ page.description }}
+      </Motion>
+    </template>
+
+    <template #links>
+      <Motion
+        :initial="{
+          scale: 1.1,
+          opacity: 0,
+          filter: 'blur(20px)'
+        }"
+        :animate="{
+          scale: 1,
+          opacity: 1,
+          filter: 'blur(0px)'
+        }"
+        :transition="{
+          duration: 0.6,
+          delay: 0.5
+        }"
+      >
+        <div
+          v-if="page.hero.links"
+          class="flex items-center gap-2"
+        >
+          <!-- <UButton v-bind="page.hero.links[0]" /> -->
+          <UButton
+            :color="global.available ? 'success' : 'error'"
+            variant="ghost"
+            class="gap-2"
+            :to="global.available ? global.meetingLink : ''"
+            :label="global.available ? 'Available for new projects' : 'Not available at the moment'"
+          >
+            <template #leading>
+              <span class="relative flex size-2">
+                <span
+                  class="absolute inline-flex size-full rounded-full opacity-75"
+                  :class="global.available ? 'bg-success animate-ping' : 'bg-error'"
+                />
+                <span
+                  class="relative inline-flex size-2 scale-90 rounded-full"
+                  :class="global.available ? 'bg-success' : 'bg-error'"
+                />
+              </span>
+            </template>
+          </UButton>
+        </div>
+      </Motion>
+
+      <div class="gap-x-4 inline-flex mt-4">
+        <Motion
+          v-for="(link, index) of footer?.links"
+          :key="index"
+
+          :initial="{
+            scale: 1.1,
+            opacity: 0,
+            filter: 'blur(20px)'
+          }"
+          :animate="{
+            scale: 1,
+            opacity: 1,
+            filter: 'blur(0px)'
+          }"
+          :transition="{
+            duration: 0.6,
+            delay: 0.5 + index * 0.1
+          }"
+        >
+          <UButton
+            v-bind="{ size: 'md', color: 'neutral', variant: 'ghost', ...link }"
+          />
+        </Motion>
+      </div>
+    </template>
+
+    <!-- <UMarquee
+      pause-on-hover
+      class="py-2 -mx-8 sm:-mx-12 lg:-mx-16 [--duration:40s]"
+    >
+      <Motion
+        v-for="(img, index) in page.hero.images"
+        :key="index"
+        :initial="{
+          scale: 1.1,
+          opacity: 0,
+          filter: 'blur(20px)'
+        }"
+        :animate="{
+          scale: 1,
+          opacity: 1,
+          filter: 'blur(0px)'
+        }"
+        :transition="{
+          duration: 0.6,
+          delay: index * 0.1
+        }"
+      >
+        <NuxtImg
+          width="234"
+          height="234"
+          class="rounded-lg aspect-square object-cover"
+          :class="index % 2 === 0 ? '-rotate-2' : 'rotate-2'"
+          v-bind="img"
+        />
+      </Motion>
+    </UMarquee> -->
+  </UPageHero>
+</template>