initial commit

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "drop-base"]
+	path = drop-base
+	url = https://github.com/Drop-OSS/drop-base.git

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="relative min-h-screen w-screen flex flex-col">
+    <Header />
+    <main class="grow">
+      <NuxtPage />
+    </main>
+    <Footer />
+
+    <!-- background -->
+    <div class="absolute inset-0 bg-zinc-900 -z-50" />
+
+    <!-- shadows -->
+    <div class="absolute w-screen h-screen -z-10">
+      <div
+        class="absolute inset-x-0 transform-gpu overflow-hidden blur-3xl top-[80vh]"
+        aria-hidden="true"
+      >
+        <div
+          class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-cyan-500 to-blue-600 opacity-20 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+          style="
+            clip-path: polygon(
+              74.1% 44.1%,
+              100% 61.6%,
+              97.5% 26.9%,
+              85.5% 0.1%,
+              80.7% 2%,
+              72.5% 32.5%,
+              60.2% 62.4%,
+              52.4% 68.1%,
+              47.5% 58.3%,
+              45.2% 34.5%,
+              27.5% 76.7%,
+              0.1% 64.9%,
+              17.9% 100%,
+              27.6% 76.8%,
+              76.1% 97.7%,
+              74.1% 44.1%
+            );
+          "
+        />
+      </div>
+      <div
+        class="absolute inset-x-0 transform-gpu overflow-hidden blur-3xl -top-[15rem]"
+        aria-hidden="true"
+      >
+        <div
+          class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-blue-600 to-blue-100 opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+          style="
+            clip-path: polygon(
+              74.1% 44.1%,
+              100% 61.6%,
+              97.5% 26.9%,
+              85.5% 0.1%,
+              80.7% 2%,
+              72.5% 32.5%,
+              60.2% 62.4%,
+              52.4% 68.1%,
+              47.5% 58.3%,
+              45.2% 34.5%,
+              27.5% 76.7%,
+              0.1% 64.9%,
+              17.9% 100%,
+              27.6% 76.8%,
+              76.1% 97.7%,
+              74.1% 44.1%
+            );
+          "
+        />
+      </div>
+      <div
+        class="absolute left-[10%] inset-x-0 transform-gpu overflow-hidden blur-3xl top-[150vh]"
+        aria-hidden="true"
+      >
+        <div
+          class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[60deg] bg-gradient-to-tr from-blue-600 to-blue-100 opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+          style="
+            clip-path: polygon(
+              74.1% 44.1%,
+              100% 61.6%,
+              97.5% 26.9%,
+              85.5% 0.1%,
+              80.7% 2%,
+              72.5% 32.5%,
+              60.2% 62.4%,
+              52.4% 68.1%,
+              47.5% 58.3%,
+              45.2% 34.5%,
+              27.5% 76.7%,
+              0.1% 64.9%,
+              17.9% 100%,
+              27.6% 76.8%,
+              76.1% 97.7%,
+              74.1% 44.1%
+            );
+          "
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+useHead({
+  titleTemplate(title) {
+    return title ? `${title} | Drop OSS` : 'Drop OSS'
+  },
+})
+</script>

assets/core.scss

@@ -0,0 +1,65 @@
+$motiva: (
+  ("MotivaSansThin.ttf", "ttf", 100, normal),
+  ("MotivaSansLight.woff.ttf", "woff", 300, normal),
+  ("MotivaSansRegular.woff.ttf", "woff", 400, normal),
+  ("MotivaSansMedium.woff.ttf", "woff", 500, normal),
+  ("MotivaSansBold.woff.ttf", "woff", 600, normal),
+  ("MotivaSansExtraBold.ttf", "woff", 700, normal),
+  ("MotivaSansBlack.woff.ttf", "woff", 900, normal)
+);
+
+$helvetica: (
+  ("Helvetica.woff", "woff", 400, normal),
+  ("Helvetica-Oblique.woff", "woff", 400, italic),
+  ("Helvetica-Bold.woff", "woff", 600, normal),
+  ("Helvetica-BoldOblique.woff", "woff", 600, italic),
+  ("helvetica-light-587ebe5a59211.woff2", "woff2", 300, normal)
+);
+
+@each $file, $format, $weight, $style in $motiva {
+  @font-face {
+    font-family: "Motiva Sans";
+    src: url("/fonts/motiva/#{$file}") format($format);
+    font-weight: $weight;
+    font-style: $style;
+  }
+}
+
+@each $file, $format, $weight, $style in $helvetica {
+  @font-face {
+    font-family: "Helvetica";
+    src: url("/fonts/helvetica/#{$file}") format($format);
+    font-weight: $weight;
+    font-style: $style;
+  }
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/inter/InterVariable.ttf");
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/inter/InterVariable-Italic.ttf");
+  font-style: italic;
+}
+
+.carousel__icon {
+  color: #f4f4f5;
+}
+.carousel__pagination-button::after {
+  background-color: #3f3f46;
+  border-radius: 999999px;
+}
+.carousel__pagination-button:hover::after {
+  background-color: #27272a;
+  border-radius: 999999px;
+}
+.carousel__pagination-button--active::after {
+  background-color: #a1a1aa;
+}
+.carousel__pagination-button--active:hover::after {
+  background-color: #d4d4d8;
+}

components/CarouselPagination.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="flex flex-row flex-wrap gap-2 justify-center">
+    <button
+      v-for="(_, i) in amount"
+      @click="() => slideTo(i)"
+      :class="[
+        currentSlide == i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',
+        'transition-all cursor-pointer h-2 rounded-full',
+      ]"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const maxSlide = inject("maxSlide", ref(1));
+const minSlide = inject("minSlide", ref(1));
+const currentSlide = inject("currentSlide", ref(1));
+const nav: { slideTo?: (index: number) => any } = inject("nav", {});
+
+const amount = computed(() => maxSlide.value - minSlide.value + 1);
+
+function slideTo(index: number) {
+  if (!nav.slideTo) return console.warn(`error moving slide: nav not defined`);
+  const offsetIndex = index + minSlide.value;
+  nav.slideTo(offsetIndex);
+}
+</script>

components/ComingSoon.vue

@@ -0,0 +1,3 @@
+<template>
+      <span class="inline-flex items-center rounded-md bg-blue-600/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-blue-600/40 ring-inset">Coming Soon&trade;</span>
+</template>

components/Footer.vue

@@ -0,0 +1,118 @@
+<template>
+  <footer>
+    <div class="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
+      <nav
+        class="-mb-6 flex flex-wrap justify-center gap-x-12 gap-y-3 text-sm/6"
+        aria-label="Footer"
+      >
+        <a
+          v-for="item in navigation.main"
+          :key="item.name"
+          :href="item.href"
+          class="text-zinc-400 hover:text-white"
+          >{{ item.name }}</a
+        >
+      </nav>
+      <div class="mt-16 flex justify-center gap-x-10">
+        <a
+          v-for="item in navigation.social"
+          :key="item.name"
+          :href="item.href"
+          class="text-zinc-400 hover:text-zinc-300"
+        >
+          <span class="sr-only">{{ item.name }}</span>
+          <component :is="item.icon" class="size-6" aria-hidden="true" />
+        </a>
+      </div>
+      <p class="mt-10 text-center text-sm/6 text-zinc-400">
+        &copy; {{ new Date().getFullYear() }} Drop OSS. Licensed under GNU
+        Affero General Public License v3.0.
+      </p>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+import { defineComponent, h } from "vue";
+
+const navigation = {
+  main: [
+    { name: "About", href: "#" },
+    { name: "Blog", href: "#" },
+    { name: "Jobs", href: "#" },
+    { name: "Press", href: "#" },
+    { name: "Accessibility", href: "#" },
+    { name: "Partners", href: "#" },
+  ],
+  social: [
+    {
+      name: "Facebook",
+      href: "#",
+      icon: defineComponent({
+        render: () =>
+          h("svg", { fill: "currentColor", viewBox: "0 0 24 24" }, [
+            h("path", {
+              "fill-rule": "evenodd",
+              d: "M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z",
+              "clip-rule": "evenodd",
+            }),
+          ]),
+      }),
+    },
+    {
+      name: "Instagram",
+      href: "#",
+      icon: defineComponent({
+        render: () =>
+          h("svg", { fill: "currentColor", viewBox: "0 0 24 24" }, [
+            h("path", {
+              "fill-rule": "evenodd",
+              d: "M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z",
+              "clip-rule": "evenodd",
+            }),
+          ]),
+      }),
+    },
+    {
+      name: "X",
+      href: "#",
+      icon: defineComponent({
+        render: () =>
+          h("svg", { fill: "currentColor", viewBox: "0 0 24 24" }, [
+            h("path", {
+              d: "M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z",
+            }),
+          ]),
+      }),
+    },
+    {
+      name: "GitHub",
+      href: "#",
+      icon: defineComponent({
+        render: () =>
+          h("svg", { fill: "currentColor", viewBox: "0 0 24 24" }, [
+            h("path", {
+              "fill-rule": "evenodd",
+              d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z",
+              "clip-rule": "evenodd",
+            }),
+          ]),
+      }),
+    },
+    {
+      name: "YouTube",
+      href: "#",
+      icon: defineComponent({
+        render: () =>
+          h("svg", { fill: "currentColor", viewBox: "0 0 24 24" }, [
+            h("path", {
+              "fill-rule": "evenodd",
+              d: "M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z",
+              "clip-rule": "evenodd",
+            }),
+          ]),
+      }),
+    },
+  ],
+};
+</script>

components/Header.vue

@@ -0,0 +1,249 @@
+<template>
+  <header class="isolate z-10 absolute top-0 inset-x-0">
+    <nav
+      class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
+      aria-label="Global"
+    >
+      <div class="flex lg:flex-1">
+        <a href="#" class="-m-1.5 p-1.5">
+          <span class="sr-only">Drop</span>
+          <Logo class="h-8 w-auto" />
+        </a>
+      </div>
+      <div class="flex lg:hidden">
+        <button
+          type="button"
+          class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-zinc-300"
+          @click="mobileMenuOpen = true"
+        >
+          <span class="sr-only">Open main menu</span>
+          <Bars3Icon class="size-6" aria-hidden="true" />
+        </button>
+      </div>
+      <!--
+      <PopoverGroup class="hidden lg:flex lg:gap-x-12">
+        <Popover>
+          <PopoverButton
+            class="flex items-center gap-x-1 text-sm/6 font-semibold text-zinc-100"
+          >
+            Product
+            <ChevronDownIcon
+              class="size-5 flex-none text-zinc-400"
+              aria-hidden="true"
+            />
+          </PopoverButton>
+
+          <transition
+            enter-active-class="transition ease-out duration-200"
+            enter-from-class="opacity-0 -translate-y-1"
+            enter-to-class="opacity-100 translate-y-0"
+            leave-active-class="transition ease-in duration-150"
+            leave-from-class="opacity-100 translate-y-0"
+            leave-to-class="opacity-0 -translate-y-1"
+          >
+            <PopoverPanel
+              class="absolute inset-x-0 top-0 -z-10 bg-zinc-900 pt-14 shadow-lg ring-1 ring-zinc-900/5"
+            >
+              <div
+                class="mx-auto grid max-w-7xl grid-cols-4 gap-x-4 px-6 py-10 lg:px-8 xl:gap-x-8"
+              >
+                <div
+                  v-for="item in products"
+                  :key="item.name"
+                  class="transition group relative rounded-lg p-6 text-sm/6 hover:bg-zinc-800"
+                >
+                  <div
+                    class="transition flex size-11 items-center justify-center rounded-lg bg-zinc-950 group-hover:bg-zinc-900"
+                  >
+                    <component
+                      :is="item.icon"
+                      class="transition size-6 text-blue-600 group-hover:text-blue-500"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <a
+                    :href="item.href"
+                    class="transition mt-6 block font-semibold text-zinc-100"
+                  >
+                    {{ item.name }}
+                    <span class="absolute inset-0" />
+                  </a>
+                  <p class="mt-1 text-zinc-400">{{ item.description }}</p>
+                </div>
+              </div>
+              <div class="bg-zinc-950">
+                <div class="mx-auto max-w-7xl px-6 lg:px-8">
+                  <div
+                    class="grid grid-cols-3 divide-x divide-zinc-100/5 border-x border-zinc-100/5"
+                  >
+                    <a
+                      v-for="item in callsToAction"
+                      :key="item.name"
+                      :href="item.href"
+                      class="transition flex items-center justify-center gap-x-2.5 p-3 text-sm/6 font-semibold text-zinc-100 hover:bg-zinc-900"
+                    >
+                      <component
+                        :is="item.icon"
+                        class="size-5 flex-none text-zinc-400"
+                        aria-hidden="true"
+                      />
+                      {{ item.name }}
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </PopoverPanel>
+          </transition>
+        </Popover>
+
+        <a href="#" class="text-sm/6 font-semibold text-zinc-100">Features</a>
+        <a href="#" class="text-sm/6 font-semibold text-zinc-100"
+          >Marketplace</a
+        >
+        <a href="#" class="text-sm/6 font-semibold text-zinc-100">Company</a>
+      </PopoverGroup>
+      -->
+      <div class="hidden lg:flex" />
+      <div class="hidden lg:flex lg:flex-1 lg:justify-end">
+        <a href="https://wiki.droposs.org/guides/quickstart.html" class="text-sm/6 font-semibold text-zinc-100"
+          >Quickstart <span aria-hidden="true">&rarr;</span></a
+        >
+      </div>
+    </nav>
+    <Dialog
+      class="lg:hidden"
+      @close="mobileMenuOpen = false"
+      :open="mobileMenuOpen"
+    >
+      <div class="fixed inset-0 z-10" />
+      <DialogPanel
+        class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-zinc-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-zinc-900/10"
+      >
+        <div class="flex items-center justify-between">
+          <a href="#" class="-m-1.5 p-1.5">
+            <span class="sr-only">Your Company</span>
+            <Logo
+              class="h-8 w-auto"
+              alt="Drop logo"
+            />
+          </a>
+          <button
+            type="button"
+            class="-m-2.5 rounded-md p-2.5 text-zinc-400"
+            @click="mobileMenuOpen = false"
+          >
+            <span class="sr-only">Close menu</span>
+            <XMarkIcon class="size-6" aria-hidden="true" />
+          </button>
+        </div>
+        <div class="mt-6 flow-root">
+          <div class="-my-6 divide-y divide-zinc-500/10">
+            <div class="space-y-2 py-6">
+              <!--<Disclosure as="div" class="-mx-3" v-slot="{ open }">
+                <DisclosureButton
+                  class="flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base/7 font-semibold text-zinc-100 hover:bg-zinc-800"
+                >
+                  Product
+                  <ChevronDownIcon
+                    :class="[open ? 'rotate-180' : '', 'size-5 flex-none']"
+                    aria-hidden="true"
+                  />
+                </DisclosureButton>
+                <DisclosurePanel class="mt-2 space-y-2">
+                  <DisclosureButton
+                    v-for="item in [...products, ...callsToAction]"
+                    :key="item.name"
+                    as="a"
+                    :href="item.href"
+                    class="block rounded-lg py-2 pl-6 pr-3 text-sm/7 font-semibold text-zinc-300 hover:bg-zinc-800"
+                    >{{ item.name }}</DisclosureButton
+                  >
+                </DisclosurePanel>
+              </Disclosure>-->
+              <NuxtLink
+                href="/"
+                class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-zinc-100 hover:bg-zinc-800"
+                >Home</NuxtLink
+              >
+              <NuxtLink
+                href="https://wiki.droposs.org/"
+                class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-zinc-100 hover:bg-zinc-800"
+                >Documentation</NuxtLink
+              >
+            </div>
+            <div class="py-6">
+              <a
+                href="https://wiki.droposs.org/guides/quickstart.html"
+                class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-zinc-100 hover:bg-zinc-800"
+                >Get started &rarr;</a
+              >
+            </div>
+          </div>
+        </div>
+      </DialogPanel>
+    </Dialog>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+  Dialog,
+  DialogPanel,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Popover,
+  PopoverButton,
+  PopoverGroup,
+  PopoverPanel,
+} from "@headlessui/vue";
+import {
+  Bars3Icon,
+  ChartPieIcon,
+  CursorArrowRaysIcon,
+  FingerPrintIcon,
+  SquaresPlusIcon,
+  XMarkIcon,
+} from "@heroicons/vue/24/outline";
+import {
+  ChevronDownIcon,
+  PhoneIcon,
+  PlayCircleIcon,
+  RectangleGroupIcon,
+} from "@heroicons/vue/20/solid";
+
+const products = [
+  {
+    name: "Analytics",
+    description: "Get a better understanding where your traffic is coming from",
+    href: "#",
+    icon: ChartPieIcon,
+  },
+  {
+    name: "Engagement",
+    description: "Speak directly to your customers with our engagement tool",
+    href: "#",
+    icon: CursorArrowRaysIcon,
+  },
+  {
+    name: "Security",
+    description: "Your customers’ data will be safe and secure",
+    href: "#",
+    icon: FingerPrintIcon,
+  },
+  {
+    name: "Integrations",
+    description: "Your customers’ data will be safe and secure",
+    href: "#",
+    icon: SquaresPlusIcon,
+  },
+];
+const callsToAction = [
+  { name: "Watch demo", href: "#", icon: PlayCircleIcon },
+  { name: "Contact sales", href: "#", icon: PhoneIcon },
+  { name: "View all products", href: "#", icon: RectangleGroupIcon },
+];
+
+const mobileMenuOpen = ref(false);
+</script>

components/Logo.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    class="text-blue-400"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4 13.5C4 11.0008 5.38798 8.76189 7.00766 7C8.43926 5.44272 10.0519 4.25811 11.0471 3.5959C11.6287 3.20893 12.3713 3.20893 12.9529 3.5959C13.9481 4.25811 15.5607 5.44272 16.9923 7C18.612 8.76189 20 11.0008 20 13.5C20 17.9183 16.4183 21.5 12 21.5C7.58172 21.5 4 17.9183 4 13.5Z"
+      stroke="currentColor"
+      stroke-width="2"
+    />
+  </svg>
+</template>

nuxt.config.ts

@@ -0,0 +1,18 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: "2024-11-01",
+  devtools: { enabled: true },
+  modules: ["@nuxtjs/tailwindcss", "vue3-carousel-nuxt"],
+  extends: ["./drop-base"],
+  css: ["~/assets/core.scss"],
+  app: {
+    head: {
+      link: [{ rel: "icon", href: "/favicon.ico" }],
+    },
+  },
+  carousel: {
+    prefix: "Vue",
+  },
+
+  ssr: false,
+});

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@headlessui/vue": "^1.7.23",
+    "@heroicons/vue": "^2.2.0",
+    "@nuxtjs/tailwindcss": "6.13.1",
+    "nuxt": "^3.15.2",
+    "vue": "latest",
+    "vue-router": "latest",
+    "vue3-carousel-nuxt": "^1.1.5"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+  "devDependencies": {
+    "sass-embedded": "^1.83.4"
+  }
+}

public/robots.txt

@@ -0,0 +1 @@
+

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

tailwind.config.js

@@ -0,0 +1,25 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./components/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./app.vue",
+    "./error.vue",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["Inter"],
+        display: ["Motiva Sans"],
+      },
+      colors: {
+        zinc: {
+          925: "#111112",
+        },
+      },
+    },
+  },
+  plugins: [],
+};

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}