@feathersdev/websites 0.0.1

package/app/components/DocsSidebar.vue

@@ -0,0 +1,43 @@
+<script setup>
+const $emit = defineEmits(['close'])
+
+const { data } = await useAsyncData('menu-docs', () =>
+  queryCollection('menus').where('stem', '==', 'menus/docs').first()
+)
+</script>
+
+<template>
+  <div class="relative menu w-60 bg-base-200 text-base-content h-full overflow-y-auto">
+    <div class="relative z-10">
+      <Flex justify-end class="absolute right-2 lg:hidden z-20 top-4">
+        <Button square ghost @click="$emit('close')">
+          <Icon name="feather:x" size="24" />
+        </Button>
+      </Flex>
+
+      <Flex col class="pb-12 pl-2">
+        <div class="px-2 pb-4 pt-2">
+          <DocsSearch />
+        </div>
+
+        <template v-for="link in data?.items" :key="link.path">
+          <template v-if="link.children">
+            <SidebarMenuSection :section="link" />
+          </template>
+          <template v-else>
+            <MenuItem class="ml-2">
+              <NuxtLink :to="link.path" exact-active-class="menu-active" class="flex flex-row items-center">
+                <Icon v-if="link.icon" :name="link.icon" class="w-5 h-5 mr-1" />
+                <Text class="grow">
+                  {{ link.title }}
+                </Text>
+                <Badge v-if="link.meta?.new" sm accent class="ml-2"> new </Badge>
+              </NuxtLink>
+            </MenuItem>
+          </template>
+        </template>
+      </Flex>
+      <!-- <pre class="text-xs">{{ data }}</pre> -->
+    </div>
+  </div>
+</template>

package/app/components/DocsTiles.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { AuthDocsCollectionItem, FeathersDocsCollectionItem, PinionDocsCollectionItem } from '@nuxt/content'
+
+defineProps<{
+  pages: (PinionDocsCollectionItem | AuthDocsCollectionItem | FeathersDocsCollectionItem)[]
+}>()
+</script>
+
+<template>
+  <section class="mx-auto">
+    <div v-if="pages" class="pt-6 px-3 lg:px-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" role="list">
+      <Card
+        is="article"
+        v-for="(page, index) in pages"
+        :key="page.id"
+        class="card bg-base-300/20 rounded-xl h-full flex flex-col overflow-hidden"
+        role="listitem"
+      >
+        <header
+          :class="[
+            'blob-pattern',
+            'pattern-variant-' + (index % 5),
+            'aspect-video',
+            'flex',
+            'items-center',
+            'justify-center',
+            'relative',
+            'overflow-hidden',
+          ]"
+        >
+          <NuxtLink :to="page.path" class="w-full h-full flex items-center justify-center z-10">
+            <h3 class="text-2xl text-center">{{ page.title }}</h3>
+          </NuxtLink>
+        </header>
+        <CardBody class="grow flex flex-col">
+          <Text>{{ page.description }}</Text>
+
+          <div class="grow" />
+
+          <CardActions>
+            <NuxtLink :to="page.path" class="btn btn-ghost" :aria-label="`Read more about ${page.title}`">
+              Read More
+              <Icon name="feather:chevron-right" size="24" />
+            </NuxtLink>
+          </CardActions>
+        </CardBody>
+      </Card>
+    </div>
+    <!-- <pre class="text-xs">{{ pages.map(page => ({ ...page, body: undefined })) }}</pre> -->
+  </section>
+</template>
+
+<style scoped>
+.blob-pattern {
+  background-color: var(--color-base-300);
+  position: relative;
+}
+
+.blob-pattern::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0.2;
+  transition: opacity 0.3s ease;
+}
+
+/* Create a subtle hover effect */
+.blob-pattern:hover::before {
+  opacity: 0.3;
+}
+
+/* Pattern variant 0 */
+.pattern-variant-0::before {
+  background:
+    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 25%),
+    radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.3) 0%, transparent 20%),
+    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.3) 0%, transparent 30%),
+    radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.3) 0%, transparent 20%),
+    radial-gradient(circle at 10% 60%, rgba(255, 255, 255, 0.3) 0%, transparent 15%);
+}
+
+/* Pattern variant 1 */
+.pattern-variant-1::before {
+  background:
+    radial-gradient(ellipse at 65% 25%, rgba(255, 255, 255, 0.3) 0%, transparent 30%),
+    radial-gradient(circle at 15% 55%, rgba(255, 255, 255, 0.3) 0%, transparent 25%),
+    radial-gradient(ellipse at 75% 70%, rgba(255, 255, 255, 0.3) 0%, transparent 18%),
+    radial-gradient(circle at 35% 10%, rgba(255, 255, 255, 0.3) 0%, transparent 22%);
+}
+
+/* Pattern variant 2 */
+.pattern-variant-2::before {
+  background:
+    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 28%),
+    radial-gradient(ellipse at 60% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 35%),
+    radial-gradient(circle at 10% 80%, rgba(255, 255, 255, 0.3) 0%, transparent 15%),
+    radial-gradient(circle at 85% 35%, rgba(255, 255, 255, 0.3) 0%, transparent 25%);
+}
+
+/* Pattern variant 3 */
+.pattern-variant-3::before {
+  background:
+    radial-gradient(ellipse at 45% 45%, rgba(255, 255, 255, 0.3) 0%, transparent 40%),
+    radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.3) 0%, transparent 20%),
+    radial-gradient(circle at 5% 35%, rgba(255, 255, 255, 0.3) 0%, transparent 18%),
+    radial-gradient(ellipse at 70% 15%, rgba(255, 255, 255, 0.3) 0%, transparent 22%);
+}
+
+/* Pattern variant 4 */
+.pattern-variant-4::before {
+  background:
+    radial-gradient(circle at 25% 15%, rgba(255, 255, 255, 0.3) 0%, transparent 22%),
+    radial-gradient(circle at 50% 65%, rgba(255, 255, 255, 0.3) 0%, transparent 30%),
+    radial-gradient(ellipse at 80% 25%, rgba(255, 255, 255, 0.3) 0%, transparent 25%),
+    radial-gradient(circle at 15% 75%, rgba(255, 255, 255, 0.3) 0%, transparent 18%),
+    radial-gradient(ellipse at 90% 85%, rgba(255, 255, 255, 0.3) 0%, transparent 15%);
+}
+</style>

package/app/components/FooterMain.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const { data: products } = await useAsyncData(() => queryCollection('products').where('published', '=', true).all())
+</script>
+
+<template>
+  <MoonSurface />
+  <div class="bg-[#251938]" data-theme="dark">
+    <div class="flex items-center justify-center py-8">
+      <Logo />
+    </div>
+    <Footer
+      class="sm:footer-horizontal text-neutral-content max-w-[87rem] mx-auto p-10 justify-evenly text-lg -ml-5.5 sm:ml-0"
+    >
+      <nav class="flex flex-col gap-4">
+        <FooterTitle class="normal-case">Projects</FooterTitle>
+        <NuxtLink
+          v-for="product in products"
+          :key="product.slug"
+          class="link link-hover"
+          :to="product.link"
+          target="_blank"
+        >
+          {{ product.title }}
+        </NuxtLink>
+      </nav>
+      <nav class="flex flex-col gap-4">
+        <FooterTitle class="normal-case">Learn</FooterTitle>
+        <NuxtLink class="link link-hover" to="/blog"> Blog </NuxtLink>
+        <NuxtLink class="link link-hover" to="https://discord.gg/qa8kez8QBx"> Discord </NuxtLink>
+        <NuxtLink class="link link-hover" to="https://github.com/feathersdev"> Github </NuxtLink>
+      </nav>
+      <nav class="flex flex-col gap-4">
+        <FooterTitle class="normal-case">About</FooterTitle>
+        <NuxtLink class="link link-hover" to="/tos"> Terms of Service </NuxtLink>
+        <NuxtLink class="link link-hover" to="/privacy"> Privacy Policy </NuxtLink>
+      </nav>
+    </Footer>
+
+    <div class="bg-gradient-to-r from-primary/10 via-primary/20 to-primary/10 h-1 max-w-[87rem] mx-auto" />
+    <div class="flex items-center justify-center py-3">
+      <p class="text-center text-sm text-neutral-content/30">
+        Copyright © 2012 - {{ new Date().getFullYear() }} feathers.dev
+      </p>
+    </div>
+  </div>
+</template>

package/app/components/HeroProduct.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { Product } from '~~/content.config.schema'
+
+defineProps<{
+  product: Product
+  birdClasses: string
+  planetClasses: string
+}>()
+</script>
+
+<template>
+  <div v-if="product" class="pb-32 bg-transparent" data-theme="dark">
+    <Flex col class="mx-auto max-w-6xl text-left lg:text-left gap-10 mt-28 sm:mt-32 relative md:px-4 lg:flex-row">
+      <Flex col items-center class="lg:items-start gap-8 lg:gap-12 flex-1">
+        <Text size="lg" class="text-balance lg:text-3xl text-center md:text-left">{{ product.description }}</Text>
+
+        <div>
+          <NuxtImg :src="product.logo" class="w-96" />
+        </div>
+
+        <Text is="div" base center class="lg:text-left">
+          {{ product.longDescription }}
+        </Text>
+
+        <Flex col class="sm:flex-row gap-4 w-full justify-center lg:justify-start">
+          <Button
+            is="NuxtLink"
+            v-if="product.link"
+            :to="product.link"
+            lg
+            class="bg-primary-content text-neutral hover:bg-primary-content/80"
+          >
+            Get Started
+          </Button>
+          <Button is="NuxtLink" v-if="product.meta.docLink" :to="product.meta.docLink" lg neutral>
+            Documentation
+          </Button>
+        </Flex>
+      </Flex>
+
+      <Flex class="relative flex-1">
+        <NuxtImg :src="product.meta.birdImage" :class="birdClasses" />
+        <NuxtImg :src="product.meta.planetImage" :class="planetClasses" />
+        <NuxtImg
+          src="/img/rock-md.svg"
+          class="absolute w-[144px] opacity-0 md:opacity-100 md:block top-50 left-72 lg:-top-1 lg:left-0 transition-all duration-500 ease-in-out floating-rock-1"
+        />
+        <NuxtImg
+          src="/img/rock-lg.svg"
+          class="absolute w-[386px] -bottom-24 -right-28 transition-all duration-500 ease-in-out floating-rock-2 hidden lg:block"
+        />
+      </Flex>
+    </Flex>
+  </div>
+</template>
+
+<style scoped>
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-15px);
+  }
+}
+
+@keyframes float-rock-1 {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  33% {
+    transform: translate(20px, -15px) rotate(24deg);
+  }
+  76% {
+    transform: translate(-28px, 15px) rotate(54deg);
+  }
+}
+
+@keyframes float-rock-2 {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  30% {
+    transform: translate(-5px, -10px) rotate(-4deg);
+  }
+  70% {
+    transform: translate(8px, 8px) rotate(4deg);
+  }
+}
+
+.floating {
+  animation: float 6s ease-in-out infinite;
+  will-change: transform;
+}
+
+.floating-rock-1 {
+  animation: float-rock-1 18s ease-in-out infinite;
+  will-change: transform;
+  transform-origin: center;
+}
+
+.floating-rock-2 {
+  animation: float-rock-2 19s ease-in-out infinite;
+  will-change: transform;
+  transform-origin: center;
+}
+
+@keyframes float-shuttle {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(-1deg) scale(1);
+  }
+  25% {
+    transform: translate(-5px, -3px) rotate(0.5deg) scale(1.005);
+  }
+  50% {
+    transform: translate(3px, 2px) rotate(-0.5deg) scale(0.995);
+  }
+  75% {
+    transform: translate(-2px, 4px) rotate(0.3deg) scale(1.002);
+  }
+}
+
+.floating-shuttle {
+  animation: float-shuttle 20s ease-in-out infinite;
+  will-change: transform;
+  transform-origin: center;
+}
+
+@keyframes planet-wobble {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(-32deg);
+  }
+}
+
+.planet-wobble {
+  animation: planet-wobble 60s infinite;
+  will-change: transform;
+  transform-origin: center;
+}
+</style>