├── public
    ├── robots.txt
    ├── favicon.ico
    └── mockup.png
├── .npmrc
├── components
    ├── home
    │   ├── Testimonials.vue
    │   ├── HowItWorks.vue
    │   ├── Line.vue
    │   ├── Hero.vue
    │   ├── Features.vue
    │   ├── Video.vue
    │   └── WaitlistForm.vue
    └── app
    │   ├── Footer.vue
    │   ├── Navbar.vue
    │   └── NavbarWhatsNew.vue
├── server
    ├── tsconfig.json
    ├── database
    │   ├── migrations
    │   │   ├── 0001_illegal_lenny_balinger.sql
    │   │   ├── 0000_silent_hitman.sql
    │   │   └── meta
    │   │   │   ├── _journal.json
    │   │   │   ├── 0000_snapshot.json
    │   │   │   └── 0001_snapshot.json
    │   └── schema.ts
    ├── utils
    │   └── drizzle.ts
    ├── api
    │   ├── count.get.ts
    │   ├── anon-list.get.ts
    │   └── join-waitlist.post.ts
    └── plugins
    │   └── migrations.ts
├── assets
    ├── logos
    │   ├── vuemail-logo-dark.png
    │   ├── github-mark-white.svg
    │   ├── nuxt-logo-white.svg
    │   ├── resend-logo-white.svg
    │   ├── tailwindcss-logo-white.svg
    │   └── nuxt-hub-logo-white.svg
    └── css
    │   └── main.css
├── tsconfig.json
├── drizzle.config.ts
├── .gitignore
├── tailwind.config.js
├── app.config.ts
├── pages
    ├── leaderboard.vue
    └── index.vue
├── nuxt.config.ts
├── package.json
├── .github
    └── workflows
    │   └── nuxthub.yml
├── app.vue
└── README.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | 


--------------------------------------------------------------------------------
/components/home/Testimonials.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 
3 | </template>


--------------------------------------------------------------------------------
/components/home/HowItWorks.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div></div>
3 | </template>


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masterkram/Nuxt-Waitlist/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/mockup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masterkram/Nuxt-Waitlist/HEAD/public/mockup.png


--------------------------------------------------------------------------------
/server/database/migrations/0001_illegal_lenny_balinger.sql:
--------------------------------------------------------------------------------
1 | CREATE UNIQUE INDEX `email_idx` ON `waitlist` (`email`);


--------------------------------------------------------------------------------
/assets/logos/vuemail-logo-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masterkram/Nuxt-Waitlist/HEAD/assets/logos/vuemail-logo-dark.png


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json",
4 | }
5 | 


--------------------------------------------------------------------------------
/drizzle.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'drizzle-kit'
2 | 
3 | export default defineConfig({
4 |     dialect: 'sqlite',
5 |     schema: './server/database/schema.ts',
6 |     out: './server/database/migrations'
7 | })
8 | 


--------------------------------------------------------------------------------
/server/database/migrations/0000_silent_hitman.sql:
--------------------------------------------------------------------------------
1 | CREATE TABLE `waitlist` (
2 | 	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
3 | 	`email` text NOT NULL,
4 | 	`created_at` integer NOT NULL
5 | );
6 | --> statement-breakpoint
7 | CREATE UNIQUE INDEX `waitlist_email_unique` ON `waitlist` (`email`);


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | import colors from 'tailwindcss/colors'
 2 | 
 3 | export default {
 4 |   theme: {
 5 |     extend: {
 6 |       colors: {
 7 |         primary: colors.emerald
 8 |       },
 9 |       fontFamily: {
10 |         display: ['Gabarito'],
11 |         body: ['Gabarito'],
12 |       },
13 |     }
14 |   },
15 | }
16 | 


--------------------------------------------------------------------------------
/server/utils/drizzle.ts:
--------------------------------------------------------------------------------
 1 | import { drizzle } from 'drizzle-orm/d1'
 2 | export { sql, eq, and, or } from 'drizzle-orm'
 3 | 
 4 | import * as schema from '../database/schema'
 5 | 
 6 | export const tables = schema
 7 | 
 8 | export function useDrizzle() {
 9 |     return drizzle(hubDatabase(), { schema })
10 | }
11 | 
12 | export type Waitlist = typeof schema.waitlist.$inferSelect
13 | 


--------------------------------------------------------------------------------
/app.config.ts:
--------------------------------------------------------------------------------
 1 | export default defineAppConfig({
 2 |   ui: {
 3 |     colors: {
 4 |       primary: "sky",
 5 |       neutral: "zinc",
 6 |     }
 7 |   },
 8 |   waitlist: {
 9 |     showSignups: true,
10 |   },
11 |   socials: [
12 |     { icon: "tabler:brand-twitter", link: ""},
13 |     { icon: "tabler:brand-github", link: ""},
14 |     { icon: "tabler:brand-youtube", link: ""}
15 |   ],
16 | });
17 | 


--------------------------------------------------------------------------------
/server/api/count.get.ts:
--------------------------------------------------------------------------------
 1 | import { useDrizzle } from "~/server/utils/drizzle";
 2 | import { count, sql } from "drizzle-orm";
 3 | 
 4 | export default defineEventHandler(async (event) => {
 5 |   const entry = await useDrizzle()
 6 |     .select({ count: count() })
 7 |     .from(tables.waitlist);
 8 | 
 9 |   if (entry.length === 1) {
10 |     return entry[0];
11 |   }
12 |   return null;
13 | });
14 | 


--------------------------------------------------------------------------------
/server/database/schema.ts:
--------------------------------------------------------------------------------
 1 | import {sqliteTable, text, integer, uniqueIndex} from 'drizzle-orm/sqlite-core'
 2 | 
 3 | export const waitlist = sqliteTable('waitlist', {
 4 |     id: integer('id').primaryKey({autoIncrement: true}),
 5 |     email: text('email').notNull().unique(),
 6 |     createdAt: integer('created_at', {mode: 'timestamp'}).notNull(),
 7 | }, (table) => ({
 8 |     emailIdx: uniqueIndex('email_idx').on(table.email)
 9 | }))
10 | 


--------------------------------------------------------------------------------
/server/database/migrations/meta/_journal.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "7",
 3 |   "dialect": "sqlite",
 4 |   "entries": [
 5 |     {
 6 |       "idx": 0,
 7 |       "version": "6",
 8 |       "when": 1726066158194,
 9 |       "tag": "0000_silent_hitman",
10 |       "breakpoints": true
11 |     },
12 |     {
13 |       "idx": 1,
14 |       "version": "6",
15 |       "when": 1727187012751,
16 |       "tag": "0001_illegal_lenny_balinger",
17 |       "breakpoints": true
18 |     }
19 |   ]
20 | }


--------------------------------------------------------------------------------
/pages/leaderboard.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const { data: users } = await useFetch("/api/anon-list");
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="max-w-4xl mx-auto">
 7 |     <UCard>
 8 |       <template #header>
 9 |         <h1 class="font-bold text-3xl">Waitlist Leaderboard</h1>
10 |       </template>
11 | 
12 |       <ol class="list-decimal ml-4">
13 |         <li v-for="i in users">
14 |           {{ i }}
15 |         </li>
16 |       </ol>
17 |     </UCard>
18 |   </div>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/server/api/anon-list.get.ts:
--------------------------------------------------------------------------------
 1 | import { useDrizzle } from "~/server/utils/drizzle";
 2 | import { waitlist } from "../database/schema";
 3 | 
 4 | function anonymize(item: { email: string }) {
 5 |   const regex = /(?<=.)[^@](?=[^@]*?@)|(?:(?<=@.)|(?!^)\\G(?=[^@]*$)).(?=.*\\.)/gm;
 6 |   const substitution = `*`;
 7 |   return item.email.replace(regex, substitution);
 8 | }
 9 | 
10 | export default defineEventHandler(async (event) => {
11 |   const entry = (
12 |     await useDrizzle().select({ email: waitlist.email }).from(tables.waitlist)
13 |   ).map(anonymize);
14 | 
15 |   return entry;
16 | });
17 | 


--------------------------------------------------------------------------------
/server/plugins/migrations.ts:
--------------------------------------------------------------------------------
 1 | import { consola } from 'consola'
 2 | import { migrate } from 'drizzle-orm/d1/migrator'
 3 | import {useDrizzle} from "~/server/utils/drizzle";
 4 | 
 5 | export default defineNitroPlugin(async () => {
 6 |     if (!import.meta.dev) return
 7 | 
 8 |     onHubReady(async () => {
 9 |         await migrate(useDrizzle(), { migrationsFolder: 'server/database/migrations' })
10 |             .then(() => {
11 |                 consola.success('Database migrations done')
12 |             })
13 |             .catch((err) => {
14 |                 consola.error('Database migrations failed', err)
15 |             })
16 |     })
17 | })
18 | 


--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | @import "@nuxt/ui";
 3 | 
 4 | html {
 5 |     font-family: "Gabarito";
 6 | }
 7 | 
 8 | @theme {
 9 |   --font-sans: 'Gabarito';
10 |   --color-primary-50: var(--ui-color-primary-50);
11 |   --color-primary-100: var(--ui-color-primary-100);
12 |   --color-primary-200: var(--ui-color-primary-200);
13 |   --color-primary-300: var(--ui-color-primary-300);
14 |   --color-primary-400: var(--ui-color-primary-400);
15 |   --color-primary-500: var(--ui-color-primary-500);
16 |   --color-primary-600: var(--ui-color-primary-600);
17 |   --color-primary-700: var(--ui-color-primary-700);
18 |   --color-primary-800: var(--ui-color-primary-800);
19 |   --color-primary-900: var(--ui-color-primary-900);
20 |   --color-primary-950: var(--ui-color-primary-950);
21 | }
22 | 


--------------------------------------------------------------------------------
/components/app/Footer.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const config = useAppConfig();
 3 | </script>
 4 | 
 5 | <template>
 6 |   <footer class="">
 7 |     <div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
 8 |       <div class="flex justify-center gap-6 md:order-2">
 9 |         <a v-for="item in config.socials" :href="item.link" class="text-gray-400 hover:text-gray-500">
10 |           <span class="sr-only">twitter</span>
11 |           <Icon :name="item.icon" />
12 |         </a>
13 |       </div>
14 |       <div class="mt-8 md:order-1 md:mt-0">
15 |         <p class="text-center text-xs leading-5 text-gray-500 inline-flex gap-2 items-center">
16 |           <Icon name="tabler:copyright" /> Proyecto LTD 2024
17 |         </p>
18 |       </div>
19 |     </div>
20 |   </footer>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/components/home/Line.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="absolute bottom-20 w-full -z-50">
 3 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 314" fill="none">
 4 |         <path class="path stroke-sky-500" d="M-2 252.5C126 252.5 280 262.5 223 306.5C197.338 326.309 139.94 179.325 223 164.5C314.547 148.161 561.5 321 475 306.5C388.5 292 515.5 155.5 591 210.5C666.5 265.5 727.5 184.5 735.5 145C746.078 92.7696 727.5 5.5 690 5.5C652.5 5.5 652.411 114 708.5 114C748.678 114 740.5 33 800 33" stroke="black" stroke-width="20"/>
 5 |         </svg>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <style scoped>
10 | .path {
11 |   stroke-dasharray: 2000;
12 |   stroke-dashoffset: 2000;
13 |   animation: dash 3s ease-in-out 1 forwards;
14 | }
15 | 
16 | @keyframes dash {
17 |   to {
18 |     stroke-dashoffset: 0;
19 |   }
20 | }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const length = ref();
 3 | onMounted(() => {
 4 |   let path = document.querySelector('.path');
 5 |   length.value = path?.getTotalLength();
 6 | });
 7 | 
 8 | const items = [
 9 |   'https://picsum.photos/600/800?random=1',
10 |   'https://picsum.photos/600/800?random=2',
11 |   'https://picsum.photos/600/800?random=3',
12 |   'https://picsum.photos/600/800?random=4',
13 |   'https://picsum.photos/600/800?random=5',
14 |   'https://picsum.photos/600/800?random=6',
15 |   'https://picsum.photos/600/800?random=7',
16 |   'https://picsum.photos/600/800?random=8',
17 |   'https://picsum.photos/600/800?random=9',
18 |   'https://picsum.photos/600/800?random=10',
19 | ];
20 | 
21 | </script>
22 | 
23 | <template>
24 |   <div class="flex">
25 |     <HomeHero class="" />
26 |   </div>
27 | </template>
28 | 


--------------------------------------------------------------------------------
/components/home/Hero.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="max-w-4xl mx-auto text-center">
 3 |     <span
 4 |       class="inline-flex gap-2 mb-6 items-center rounded-md bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700 ring-1 ring-inset ring-amber-700/10">
 5 |       <Icon name="tabler:award" />
 6 |       Top Product Of The Year
 7 |     </span>
 8 |     <h1 class="font-bold text-6xl max-w-lg tracking-tight mx-auto italic text-neutral-900">
 9 |       Software That Doesn't Get In Your <span class="underline decoration-primary-400">Way</span>
10 |     </h1>
11 |     <p class="mt-8 text-lg text-gray-500 max-w-3xl mx-auto leading-7">
12 |       Join the waiting list for <span class="underline decoration-primary-400 decoration-2">Proyecto</span>, and get
13 |       notified when we launch!
14 |     </p>
15 |     <HomeWaitlistForm />
16 |   </div>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/assets/logos/github-mark-white.svg:
--------------------------------------------------------------------------------
1 | <svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   compatibilityDate: "2024-04-03",
 4 |   devtools: { enabled: true },
 5 |   css: ['~/assets/css/main.css'],
 6 |   modules: [
 7 |     "@nuxt/ui",
 8 |     "@nuxthub/core",
 9 |     "nuxt-security",
10 |     "@nuxt/fonts",
11 |     "@nuxt/image",
12 |     "@stefanobartoletti/nuxt-social-share",
13 |   ],
14 |   socialShare: {
15 |     baseUrl: 'https://www.yoursite.com'
16 |   },
17 |   security: {
18 |     headers: {
19 |       contentSecurityPolicy: {
20 |         "img-src": ["'self'", "data:", "https:"],
21 |       },
22 |     },
23 |   },
24 |   ui: {
25 |   },
26 |   colorMode: {
27 |     preference: "light",
28 |   },
29 |   routeRules: {
30 |     "/api/join-waitlist": {
31 |       security: {
32 |         rateLimiter: {
33 |           tokensPerInterval: 25,
34 |         },
35 |       },
36 |     },
37 |   },
38 | 
39 |   hub: {
40 |     database: true,
41 |   },
42 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare",
11 |     "db:generate": "drizzle-kit generate"
12 |   },
13 |   "dependencies": {
14 |     "@nuxt/image": "^1.8.0",
15 |     "@nuxt/ui": "3.0.0-alpha.10",
16 |     "@nuxthub/core": "^0.7.12",
17 |     "@stefanobartoletti/nuxt-social-share": "1.2.1",
18 |     "@vueuse/core": "^12.4.0",
19 |     "drizzle-orm": "^0.33.0",
20 |     "h3-zod": "^0.5.3",
21 |     "mini-svg-data-uri": "^1.4.4",
22 |     "nuxt": "^3.13.0",
23 |     "nuxt-security": "^2.0.0",
24 |     "vue": "latest",
25 |     "vue-router": "latest",
26 |     "zod": "^3.23.8"
27 |   },
28 |   "devDependencies": {
29 |     "@iconify-json/tabler": "^1.2.14",
30 |     "drizzle-kit": "^0.24.2",
31 |     "wrangler": "^3.76.0"
32 |   },
33 |   "packageManager": "pnpm@9.12.2"
34 | }
35 | 


--------------------------------------------------------------------------------
/.github/workflows/nuxthub.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy to NuxtHub
 2 | on: push
 3 | 
 4 | jobs:
 5 |   deploy:
 6 |     name: "Deploy to NuxtHub"
 7 |     runs-on: ubuntu-latest
 8 |     environment:
 9 |       name: ${{ github.ref == 'refs/heads/main' && 'production' || 'preview' }}
10 |       url: ${{ steps.deploy.outputs.deployment-url }}
11 |     permissions:
12 |       contents: read
13 |       id-token: write
14 | 
15 |     steps:
16 |       - uses: actions/checkout@v4
17 | 
18 |       - name: Install pnpm
19 |         uses: pnpm/action-setup@v4
20 |           with:
21 |             version: 9
22 | 
23 |       - name: Install Node.js
24 |         uses: actions/setup-node@v4
25 |         with:
26 |           node-version: 22
27 |           cache: 'pnpm'
28 | 
29 |       - name: Install dependencies
30 |         run: pnpm install
31 | 
32 |       - name: Build application
33 |         run: pnpm build
34 | 
35 |       - name: Deploy to NuxtHub
36 |         uses: nuxt-hub/action@v1
37 |         id: deploy
38 |         with:
39 |           project-key: nuxt-waitlist-ps62
40 | 


--------------------------------------------------------------------------------
/server/api/join-waitlist.post.ts:
--------------------------------------------------------------------------------
 1 | import {useDrizzle} from "~/server/utils/drizzle";
 2 | import {consola} from "consola";
 3 | import {useValidatedBody, z} from "h3-zod";
 4 | 
 5 | export default defineEventHandler(async event => {
 6 |     consola.info("User trying to signup for waitlist...")
 7 | 
 8 |     const {email} = await useValidatedBody(event, z.object(
 9 |         {
10 |             email: z.string().email().refine(async (email) => {
11 |                 const alreadyExists = await useDrizzle().query.waitlist.findFirst({
12 |                     where: (waitlist, {eq}) => (eq(waitlist.email, email)),
13 |                 })
14 | 
15 |                 return !alreadyExists
16 |             }, 'Email is already in use')
17 |         }
18 |     ))
19 | 
20 |     consola.info("User joining waitlist...")
21 | 
22 | 
23 |     const entry = await useDrizzle().insert(tables.waitlist).values({
24 |         email,
25 |         createdAt: new Date(),
26 |     }).returning().get()
27 | 
28 | 
29 |     consola.info(`User ${entry.email} is now on waitlist...`)
30 | 
31 |     return entry
32 | })
33 | 


--------------------------------------------------------------------------------
/components/home/Features.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const features = [
 3 |   { title: "Feature 1", description: "Consequat voluptate ullamco esse cillum nisi voluptate enim labore pariatur.", icon: "tabler:alien" },
 4 |   { title: "Feature 2", description: "Officia deserunt elit cillum proident cillum exercitation eiusmod in.", icon: "tabler:alien" },
 5 |   { title: "Feature 3", description: "Aliquip aute officia nostrud quis laborum exercitation mollit voluptate.", icon: "tabler:alien" },
 6 |   { title: "Feature 4", description: "Eiusmod veniam sint mollit nostrud adipisicing cupidatat est tempor qui.", icon: "tabler:alien" }
 7 | ];
 8 | </script>
 9 | 
10 | <template>
11 |   <div class="bg-zinc-100 py-20">
12 |     <div class="grid grid-cols-4 gap-6 max-w-3xl mx-auto text-center">
13 |       <div v-for="feature in features" class="space-y-2">
14 |         <div class="bg-blue-200 text-blue-600 rounded-full p-2 flex items-center justify-center w-10 mx-auto">
15 |           <Icon :name="feature.icon" class="h-6 w-6" />
16 |         </div>
17 |         <p class="font-bold text-xl">{{ feature.title }}</p>
18 |         <p>{{ feature.description }}</p>
19 |       </div>
20 |     </div>
21 |   </div>
22 | </template>
23 | 


--------------------------------------------------------------------------------
/components/home/Video.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="py-12 px-4 relative">
 3 |     <div class="relative max-w-6xl mx-auto">
 4 |       <div class="relative">
 5 |         <Icon name="i-logos-youtube-icon"
 6 |           class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-12 h-12 drop-shadow" />
 7 |         <NuxtImg src="https://i.ytimg.com/vi/oDSM0pCgacU/maxresdefault.jpg" alt="Minted Directory Video Intro"
 8 |           class="max-w-3xl mx-auto mt-8 rounded-xl overflow-hidden cursor-pointer metal-shadow" sizes="sm:50vw md:400px"
 9 |           @click="isOpen = true" />
10 |       </div>
11 |       <UModal v-model="isOpen" :ui="{ width: 'sm:max-w-3xl', container: 'items-center' }">
12 |         <iframe class="rounded-lg overflow-hidden mx-auto w-full aspect-video max-w-3xl"
13 |           src="https://www.youtube.com/embed/oDSM0pCgacU?si=E_wVDRPkgISK6Qud&autoplay=1" title="YouTube video player"
14 |           frameborder="0" loading="lazy"
15 |           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
16 |           referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
17 |       </UModal>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script setup>
23 | const isOpen = ref(false);
24 | </script>


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | useHead({
 3 |   bodyAttrs: {
 4 |     class: ''
 5 |   }
 6 | })
 7 | 
 8 | useSeoMeta({
 9 |   title: 'Validate your idea - setup your landing page in minutes | NuxtHubLanding',
10 |   applicationName: 'NuxtHubLanding',
11 |   description: 'Validate your idea quickly with the NuxtHub Boilerplate – a landing page template that lets you capture interest and sign up users in minutes. Launch your product in no time and start gathering feedback from real customers.',
12 |   ogType: 'website',
13 |   ogTitle: 'Validate your idea - setup your landing page in minutes | NuxtHubLanding',
14 |   ogDescription: 'Validate your idea quickly with the NuxtHub Boilerplate – a landing page template that lets you capture interest and sign up users in minutes. Launch your product in no time and start gathering feedback from real customers.',
15 |   twitterCard: 'summary_large_image',
16 |   twitterCreator: '@lowbits_',
17 | });
18 | 
19 | </script>
20 | 
21 | <template>
22 |   <UApp>
23 |     <div class="flex flex-col justify-between px-8 lg:px-0 h-screen relative overflow-hidden">
24 |       <AppNavbar />
25 |       <NuxtPage />
26 |       <AppFooter />
27 |     </div>
28 |   </UApp>
29 | </template>
30 | 
31 | <style>
32 | body {
33 |   background-size: 12px 12px;
34 |   background-image: radial-gradient(hsla(0, 0%, 86%, 0.3) 1px, transparent 0);
35 | }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/server/database/migrations/meta/0000_snapshot.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "6",
 3 |   "dialect": "sqlite",
 4 |   "id": "cf043203-7d1d-4ea0-ba20-ee1be749df9b",
 5 |   "prevId": "00000000-0000-0000-0000-000000000000",
 6 |   "tables": {
 7 |     "waitlist": {
 8 |       "name": "waitlist",
 9 |       "columns": {
10 |         "id": {
11 |           "name": "id",
12 |           "type": "integer",
13 |           "primaryKey": true,
14 |           "notNull": true,
15 |           "autoincrement": true
16 |         },
17 |         "email": {
18 |           "name": "email",
19 |           "type": "text",
20 |           "primaryKey": false,
21 |           "notNull": true,
22 |           "autoincrement": false
23 |         },
24 |         "created_at": {
25 |           "name": "created_at",
26 |           "type": "integer",
27 |           "primaryKey": false,
28 |           "notNull": true,
29 |           "autoincrement": false
30 |         }
31 |       },
32 |       "indexes": {
33 |         "waitlist_email_unique": {
34 |           "name": "waitlist_email_unique",
35 |           "columns": [
36 |             "email"
37 |           ],
38 |           "isUnique": true
39 |         }
40 |       },
41 |       "foreignKeys": {},
42 |       "compositePrimaryKeys": {},
43 |       "uniqueConstraints": {}
44 |     }
45 |   },
46 |   "enums": {},
47 |   "_meta": {
48 |     "schemas": {},
49 |     "tables": {},
50 |     "columns": {}
51 |   },
52 |   "internal": {
53 |     "indexes": {}
54 |   }
55 | }


--------------------------------------------------------------------------------
/components/app/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const mobileMenu = ref();
 3 | const config = useAppConfig();
 4 | 
 5 | const route = useRoute();
 6 | const home = computed(() => route.fullPath === "/");
 7 | </script>
 8 | 
 9 | <template>
10 |   <header class="sticky top-0 z-50">
11 |     <UContainer class="mx-auto flex h-16 items-center justify-between px-4 transition-all">
12 |       <div class="flex items-center gap-5">
13 |         <NuxtLink to="/" class="flex items-center gap-2">
14 |           <!-- <Logo class="h-8 w-auto" role="img" alt="Lemonrepo logo" /> -->
15 |           <p class="font-bold text-xl tracking-tight">Proyecto</p>
16 |         </NuxtLink>
17 |       </div>
18 |       <UButton v-if="config.waitlist.showSignups && home" to="/leaderboard" color="neutral">See Signups</UButton>
19 |       <UButton v-else-if="!home" to="/" color="primary">Sign Up</UButton>
20 |     </UContainer>
21 |     <div class="block h-[calc(100vh-4rem)] w-full sm:hidden" v-show="mobileMenu">
22 |       <div class="flex flex-col gap-4 p-4">
23 |         <UButton to="/leaderboard" @click="toggleMobileMenu" color="gray">See Signups</UButton>
24 |       </div>
25 |     </div>
26 |   </header>
27 | </template>
28 | 
29 | <style scoped>
30 | .menu-toggle.active .menu-bar[data-position="top"] {
31 |   transform: translateY(0) rotate(45deg) scaleX(1.05);
32 | }
33 | 
34 | .menu-toggle.active .menu-bar[data-position="bottom"] {
35 |   transform: translateY(0) rotate(-45deg) scaleX(1.05);
36 | }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/server/database/migrations/meta/0001_snapshot.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "6",
 3 |   "dialect": "sqlite",
 4 |   "id": "cb616729-fbff-4573-ad26-2bad022df348",
 5 |   "prevId": "cf043203-7d1d-4ea0-ba20-ee1be749df9b",
 6 |   "tables": {
 7 |     "waitlist": {
 8 |       "name": "waitlist",
 9 |       "columns": {
10 |         "id": {
11 |           "name": "id",
12 |           "type": "integer",
13 |           "primaryKey": true,
14 |           "notNull": true,
15 |           "autoincrement": true
16 |         },
17 |         "email": {
18 |           "name": "email",
19 |           "type": "text",
20 |           "primaryKey": false,
21 |           "notNull": true,
22 |           "autoincrement": false
23 |         },
24 |         "created_at": {
25 |           "name": "created_at",
26 |           "type": "integer",
27 |           "primaryKey": false,
28 |           "notNull": true,
29 |           "autoincrement": false
30 |         }
31 |       },
32 |       "indexes": {
33 |         "waitlist_email_unique": {
34 |           "name": "waitlist_email_unique",
35 |           "columns": [
36 |             "email"
37 |           ],
38 |           "isUnique": true
39 |         },
40 |         "email_idx": {
41 |           "name": "email_idx",
42 |           "columns": [
43 |             "email"
44 |           ],
45 |           "isUnique": true
46 |         }
47 |       },
48 |       "foreignKeys": {},
49 |       "compositePrimaryKeys": {},
50 |       "uniqueConstraints": {}
51 |     }
52 |   },
53 |   "enums": {},
54 |   "_meta": {
55 |     "schemas": {},
56 |     "tables": {},
57 |     "columns": {}
58 |   },
59 |   "internal": {
60 |     "indexes": {}
61 |   }
62 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # NuxtWaitlist - Simple Waitlist Template
 2 | 
 3 | ![259shots_so](https://github.com/user-attachments/assets/147822de-6884-4e3f-a4fc-ca81cf100cc2)
 4 | 
 5 | This is a full stack nuxt waitlist template. It allows you to collect emails of people who are potentially interested in buying your product.
 6 | 
 7 | ## Tech Stack
 8 | - [Typescript](https://www.typescriptlang.org/) - Language
 9 | - [Nuxt.js](https://www.nuxt.com/) - Framework
10 | - [Drizzle](https://orm.drizzle.team/)  - ORM
11 | - [Tailwind](https://tailwindcss.com/) - CSS
12 | - [NuxtHub](https://hub.nuxt.com) - Hosting
13 | 
14 | ## Prerequisites
15 | - [NuxtHub](https://hub.nuxt.com/) Account
16 | - Cloudflare account
17 | 
18 | ## Setup
19 | 
20 | ```bash
21 | # clone repository
22 | git clone git@github.com:masterkram/Nuxt-Waitlist.git [YOUR_APP_NAME]
23 | cd [YOUR_APP_NAME]
24 | 
25 | # npm
26 | npm install
27 | ```
28 | 
29 | ## Development Server
30 | 
31 | Start the development server on `http://localhost:3000`:
32 | 
33 | ```bash
34 | # npm
35 | npm run dev
36 | ```
37 | 
38 | ## Customization
39 | 
40 | 1. edit `app.config.ts`
41 | 2. edit h1 and hero description in `pages/index.vue`
42 | 
43 | ## Deploy
44 | 
45 | Deploy the application to NuxtHub
46 | 
47 | ```bash
48 | npx nuxthub deploy
49 | 
50 | # Choose
51 | # Deploy <link> to NuxtHub?: Yes
52 | # Select a project: Create a new project
53 | # Project name: [YOUR_APP_NAME]
54 | # Select a region for the storage: [YOUR_REGION]
55 | # Production branch: main
56 | ```
57 | 
58 | > Run the migrations
59 | 
60 | ```bash
61 | npx nuxt dev --production
62 | ```
63 | 
64 | Check out the [deployment documentation](https://hub.nuxt.com/docs/getting-started/deploy) for more information.
65 | 
66 | 


--------------------------------------------------------------------------------
/components/app/NavbarWhatsNew.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const { data } = await useFetch("/api/count", {
 3 |   server: false,
 4 |   lazy: true,
 5 | });
 6 | </script>
 7 | 
 8 | <template>
 9 |   <span>
10 |     <Transition name="fade-scale">
11 |       <div
12 |         class="group relative hidden items-center gap-2 rounded-full px-3 py-2 text-xs text-slate-900 ring-1 ring-inset ring-black/[0.08] hover:bg-gray-50 hover:ring-black/[0.13] lg:flex shimmer-container">
13 |         <Icon name="i-heroicons-fire" class="h-4 w-4 text-rose-500" />
14 |         <span class="font-semibold">Waitlist Signups</span>
15 |         <svg width="2" height="2" aria-hidden="true" class="fill-slate-900">
16 |           <circle cx="1" cy="1" r="1"></circle>
17 |         </svg>
18 |         <span class="font-medium text-gray-500" v-if="data && data.length > 0">
19 |           {{ data[0].count }}
20 |         </span>
21 |       </div>
22 |     </Transition>
23 |   </span>
24 | </template>
25 | 
26 | <style scoped>
27 | .fade-scale-enter-active,
28 | .fade-scale-leave-active {
29 |   transition: opacity 1s ease, transform 1s ease;
30 | }
31 | 
32 | .fade-scale-enter-from,
33 | .fade-scale-leave-to {
34 |   opacity: 0;
35 |   transform: scale(1.05);
36 | }
37 | 
38 | .fade-scale-enter-to,
39 | .fade-scale-leave-from {
40 |   opacity: 1;
41 |   transform: scale(1);
42 | }
43 | 
44 | .shimmer-container {
45 |   position: relative;
46 |   overflow: hidden;
47 | }
48 | 
49 | .shimmer-container::after {
50 |   content: "";
51 |   position: absolute;
52 |   top: -50%;
53 |   left: -50%;
54 |   width: 200%;
55 |   height: 200%;
56 |   background: linear-gradient(to right,
57 |       rgba(255, 255, 255, 0) 0%,
58 |       rgba(255, 255, 255, 0.3) 50%,
59 |       rgba(255, 255, 255, 0) 100%);
60 |   transform: rotate(30deg);
61 |   animation: shimmer 3s infinite;
62 | }
63 | 
64 | @keyframes shimmer {
65 |   0% {
66 |     transform: translateX(-100%) rotate(30deg);
67 |   }
68 | 
69 |   100% {
70 |     transform: translateX(100%) rotate(30deg);
71 |   }
72 | }
73 | </style>


--------------------------------------------------------------------------------
/assets/logos/nuxt-logo-white.svg:
--------------------------------------------------------------------------------
1 | <svg width="128" height="32" viewBox="0 0 128 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M60.32 32C60.6656 32 60.96 31.7135 60.96 31.36V16.48C60.96 16.48 61.76 17.92 63.2 20.32L69.44 31.04C69.7255 31.6384 70.359 32 70.88 32H75.2V8H70.88C70.5923 8 70.24 8.23906 70.24 8.64V23.68L67.36 18.56L61.6 8.8C61.3197 8.3026 60.7166 8 60.16 8H56V32H60.32Z" fill="white"/>
3 | <path d="M116.16 14.72H118.24C118.77 14.72 119.2 14.2902 119.2 13.76V9.6H123.68V14.72H128V18.56H123.68V25.44C123.68 27.12 124.489 27.84 125.92 27.84H128V32H125.28C121.592 32 119.2 29.6114 119.2 25.6V18.56H116.16V14.72Z" fill="white"/>
4 | <path d="M94.56 14.72V24.64C94.56 26.8806 93.7188 28.7695 92.48 30.08C91.2412 31.3905 89.5306 32 87.2 32C84.8694 32 82.9988 31.3905 81.76 30.08C80.5422 28.7695 79.68 26.8806 79.68 24.64V14.72H82.24C82.7859 14.72 83.3231 14.8195 83.68 15.2C84.0369 15.5593 84.16 15.7704 84.16 16.32V24.64C84.16 25.9294 84.2331 26.7259 84.8 27.36C85.3669 27.973 86.0662 28.16 87.2 28.16C88.3548 28.16 88.8731 27.973 89.44 27.36C90.0069 26.7259 90.08 25.9294 90.08 24.64V16.32C90.08 15.7704 90.2031 15.4205 90.56 15.04C90.8736 14.7057 91.2045 14.7136 91.68 14.72C91.7457 14.7209 91.9337 14.72 92 14.72H94.56Z" fill="white"/>
5 | <path d="M108.16 23.04L113.6 14.72H109.44C108.916 14.72 108.45 14.9081 108.16 15.36L105.6 19.2L103.2 15.52C102.91 15.0681 102.284 14.72 101.76 14.72H97.76L103.2 22.88L97.28 32H101.44C101.96 32 102.429 31.486 102.72 31.04L105.6 26.72L108.64 31.2C108.931 31.646 109.4 32 109.92 32H114.08L108.16 23.04Z" fill="white"/>
6 | <path d="M26.88 32H44.64C45.2068 32.0001 45.7492 31.8009 46.24 31.52C46.7308 31.2391 47.2367 30.8865 47.52 30.4C47.8033 29.9135 48.0002 29.3615 48 28.7998C47.9998 28.2381 47.8037 27.6864 47.52 27.2001L35.52 6.56C35.2368 6.0736 34.8907 5.72084 34.4 5.44C33.9093 5.15916 33.2066 4.96 32.64 4.96C32.0734 4.96 31.5307 5.15916 31.04 5.44C30.5493 5.72084 30.2032 6.0736 29.92 6.56L26.88 11.84L20.8 1.59962C20.5165 1.11326 20.1708 0.600786 19.68 0.32C19.1892 0.0392139 18.6467 0 18.08 0C17.5133 0 16.9708 0.0392139 16.48 0.32C15.9892 0.600786 15.4835 1.11326 15.2 1.59962L0.32 27.2001C0.0363166 27.6864 0.000246899 28.2381 3.05588e-07 28.7998C-0.000246288 29.3615 0.0367437 29.9134 0.32 30.3999C0.603256 30.8864 1.10919 31.2391 1.6 31.52C2.09081 31.8009 2.63324 32.0001 3.2 32H14.4C18.8379 32 22.068 30.0092 24.32 26.24L29.76 16.8L32.64 11.84L41.44 26.88H29.76L26.88 32ZM14.24 26.88H6.4L18.08 6.72L24 16.8L20.0786 23.636C18.5831 26.0816 16.878 26.88 14.24 26.88Z" fill="#00DC82"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/assets/logos/resend-logo-white.svg:
--------------------------------------------------------------------------------
1 | <svg width="1500" height="489" viewBox="0 0 1500 489" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M25.4092 393.747V97.3065H146.103C211.32 97.3065 254.939 135.844 254.939 195.979C254.939 234.093 235.035 264.584 204.121 279.406L262.562 393.747H192.263L142.292 294.228H88.9323V393.747H25.4092ZM141.021 150.242H88.9323V241.292H141.021C171.089 241.292 190.146 223.506 190.146 195.979C190.146 168.029 171.089 150.242 141.021 150.242ZM388.86 396.288C316.444 396.288 272.825 352.669 272.825 285.335C272.825 217.577 317.291 173.534 384.625 173.534C449.842 173.534 493.885 214.189 494.732 278.135C494.732 284.488 494.308 291.687 493.038 298.463H335.077V301.427C336.348 332.342 356.252 350.975 386.319 350.975C410.458 350.975 427.398 340.388 432.479 320.061H491.344C484.568 362.409 446.878 396.288 388.86 396.288ZM336.348 259.502H434.597C430.362 232.822 412.152 218 385.049 218C359.216 218 339.736 233.669 336.348 259.502ZM515.546 321.331H572.293C574.41 340.388 590.926 353.516 620.147 353.516C645.133 353.516 660.378 345.47 660.378 330.224C660.378 312.438 645.556 311.167 610.407 306.509C559.588 300.58 520.204 289.146 520.204 244.256C520.204 201.061 557.894 172.687 613.795 173.111C672.236 173.111 712.467 198.943 715.431 243.409H658.261C656.567 226.046 640.051 215.459 615.912 215.459C592.62 215.459 577.375 223.929 577.375 237.904C577.375 254.42 596.008 256.114 627.346 259.925C677.318 265.007 718.819 276.441 718.819 325.566C718.819 368.762 678.165 396.288 619.723 396.288C559.165 396.288 518.087 367.915 515.546 321.331ZM857.839 396.288C785.423 396.288 741.803 352.669 741.803 285.335C741.803 217.577 786.27 173.534 853.604 173.534C918.821 173.534 962.864 214.189 963.711 278.135C963.711 284.488 963.287 291.687 962.017 298.463H804.056V301.427C805.326 332.342 825.23 350.975 855.298 350.975C879.437 350.975 896.376 340.388 901.458 320.061H960.323C953.547 362.409 915.857 396.288 857.839 396.288ZM805.326 259.502H903.575C899.341 232.822 881.131 218 854.027 218C828.195 218 808.714 233.669 805.326 259.502ZM1121.27 173.534C1168.28 173.534 1208.51 198.52 1208.51 273.054V393.747H1148.8V278.982C1148.8 242.139 1134.82 222.659 1104.75 222.659C1073.84 222.659 1056.05 244.68 1056.05 282.37V393.747H996.342V176.075H1048.43L1053.94 203.178C1067.91 186.239 1087.82 173.534 1121.27 173.534ZM1403.27 203.178V97.3065H1462.98V393.747H1410.89L1404.96 363.68C1390.56 382.313 1369.39 396.288 1338.05 396.288C1279.61 396.288 1236.84 353.516 1236.84 284.488C1236.84 217.153 1279.61 173.534 1337.63 173.534C1367.69 173.534 1389.29 185.392 1403.27 203.178ZM1351.18 347.587C1383.79 347.587 1404.11 322.178 1404.11 285.335C1404.11 248.068 1383.79 222.235 1351.18 222.235C1318.57 222.235 1297.82 247.644 1297.82 284.911C1297.82 322.178 1318.57 347.587 1351.18 347.587Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/assets/logos/tailwindcss-logo-white.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 262 33"><path fill-rule="evenodd" clip-rule="evenodd" d="M27 0C19.8 0 15.3 3.6 13.5 10.8C16.2 7.2 19.35 5.85 22.95 6.75C25.004 7.263 26.472 8.754 28.097 10.403C30.744 13.09 33.808 16.2 40.5 16.2C47.7 16.2 52.2 12.6 54 5.4C51.3 9 48.15 10.35 44.55 9.45C42.496 8.937 41.028 7.446 39.403 5.797C36.756 3.11 33.692 0 27 0ZM13.5 16.2C6.3 16.2 1.8 19.8 0 27C2.7 23.4 5.85 22.05 9.45 22.95C11.504 23.464 12.972 24.954 14.597 26.603C17.244 29.29 20.308 32.4 27 32.4C34.2 32.4 38.7 28.8 40.5 21.6C37.8 25.2 34.65 26.55 31.05 25.65C28.996 25.137 27.528 23.646 25.903 21.997C23.256 19.31 20.192 16.2 13.5 16.2Z" fill="#38BDF8"/><path fill-rule="evenodd" clip-rule="evenodd" d="M80.996 13.652H76.284V22.772C76.284 25.204 77.88 25.166 80.996 25.014V28.7C74.688 29.46 72.18 27.712 72.18 22.772V13.652H68.684V9.69996H72.18V4.59596L76.284 3.37996V9.69996H80.996V13.652ZM98.958 9.69996H103.062V28.7H98.958V25.964C97.514 27.978 95.272 29.194 92.308 29.194C87.14 29.194 82.846 24.824 82.846 19.2C82.846 13.538 87.14 9.20596 92.308 9.20596C95.272 9.20596 97.514 10.422 98.958 12.398V9.69996ZM92.954 25.28C96.374 25.28 98.958 22.734 98.958 19.2C98.958 15.666 96.374 13.12 92.954 13.12C89.534 13.12 86.95 15.666 86.95 19.2C86.95 22.734 89.534 25.28 92.954 25.28ZM109.902 6.84996C108.458 6.84996 107.28 5.63396 107.28 4.22796C107.281 3.53297 107.558 2.86682 108.049 2.37539C108.541 1.88395 109.207 1.60728 109.902 1.60596C110.597 1.60728 111.263 1.88395 111.755 2.37539C112.246 2.86682 112.523 3.53297 112.524 4.22796C112.524 5.63396 111.346 6.84996 109.902 6.84996ZM107.85 28.7V9.69996H111.954V28.7H107.85ZM116.704 28.7V0.959961H120.808V28.7H116.704ZM147.446 9.69996H151.778L145.812 28.7H141.784L137.832 15.894L133.842 28.7H129.814L123.848 9.69996H128.18L131.866 22.81L135.856 9.69996H139.77L143.722 22.81L147.446 9.69996ZM156.87 6.84996C155.426 6.84996 154.248 5.63396 154.248 4.22796C154.249 3.53297 154.526 2.86682 155.017 2.37539C155.509 1.88395 156.175 1.60728 156.87 1.60596C157.565 1.60728 158.231 1.88395 158.723 2.37539C159.214 2.86682 159.491 3.53297 159.492 4.22796C159.492 5.63396 158.314 6.84996 156.87 6.84996ZM154.818 28.7V9.69996H158.922V28.7H154.818ZM173.666 9.20596C177.922 9.20596 180.962 12.094 180.962 17.034V28.7H176.858V17.452C176.858 14.564 175.186 13.044 172.602 13.044C169.904 13.044 167.776 14.64 167.776 18.516V28.7H163.672V9.69996H167.776V12.132C169.03 10.156 171.082 9.20596 173.666 9.20596ZM200.418 2.09996H204.522V28.7H200.418V25.964C198.974 27.978 196.732 29.194 193.768 29.194C188.6 29.194 184.306 24.824 184.306 19.2C184.306 13.538 188.6 9.20596 193.768 9.20596C196.732 9.20596 198.974 10.422 200.418 12.398V2.09996ZM194.414 25.28C197.834 25.28 200.418 22.734 200.418 19.2C200.418 15.666 197.834 13.12 194.414 13.12C190.994 13.12 188.41 15.666 188.41 19.2C188.41 22.734 190.994 25.28 194.414 25.28ZM218.278 29.194C212.54 29.194 208.246 24.824 208.246 19.2C208.246 13.538 212.54 9.20596 218.278 9.20596C222.002 9.20596 225.232 11.144 226.752 14.108L223.218 16.16C222.382 14.374 220.52 13.234 218.24 13.234C214.896 13.234 212.35 15.78 212.35 19.2C212.35 22.62 214.896 25.166 218.24 25.166C220.52 25.166 222.382 23.988 223.294 22.24L226.828 24.254C225.232 27.256 222.002 29.194 218.278 29.194ZM233.592 14.944C233.592 18.402 243.814 16.312 243.814 23.342C243.814 27.142 240.508 29.194 236.404 29.194C232.604 29.194 229.868 27.484 228.652 24.748L232.186 22.696C232.794 24.406 234.314 25.432 236.404 25.432C238.228 25.432 239.634 24.824 239.634 23.304C239.634 19.922 229.412 21.822 229.412 15.02C229.412 11.448 232.49 9.20596 236.366 9.20596C239.482 9.20596 242.066 10.65 243.396 13.158L239.938 15.096C239.254 13.614 237.924 12.93 236.366 12.93C234.884 12.93 233.592 13.576 233.592 14.944ZM251.11 14.944C251.11 18.402 261.332 16.312 261.332 23.342C261.332 27.142 258.026 29.194 253.922 29.194C250.122 29.194 247.386 27.484 246.17 24.748L249.704 22.696C250.312 24.406 251.832 25.432 253.922 25.432C255.746 25.432 257.152 24.824 257.152 23.304C257.152 19.922 246.93 21.822 246.93 15.02C246.93 11.448 250.008 9.20596 253.884 9.20596C257 9.20596 259.584 10.65 260.914 13.158L257.456 15.096C256.772 13.614 255.442 12.93 253.884 12.93C252.402 12.93 251.11 13.576 251.11 14.944Z" fill="white"/></svg>
2 | 


--------------------------------------------------------------------------------
/assets/logos/nuxt-hub-logo-white.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1197 201"><path fill="white" d="M377 201c2.16 0 4-1.791 4-4v-93s5 9 14 24l39 67c1.785 3.74 5.744 6 9 6h27V51h-27c-1.798 0-4 1.4941-4 4v94l-18-32-36-61c-1.752-3.1088-5.521-5-9-5h-26v150h27ZM726 93h13c3.314 0 6-2.6863 6-6V61h28v32h27v24h-27v43c0 10.5 5.057 15 14 15h13v26h-17c-23.052 0-38-14.929-38-40v-44h-19V93Zm-135 0v62c0 14.004-5.258 25.809-13 34-7.742 8.191-18.434 12-33 12-14.566 0-26.258-3.809-34-12-7.611-8.191-13-19.996-13-34V93h16c3.412 0 6.769.622 9 3 2.231 2.2459 3 3.5652 3 7v52c0 8.059.457 13.037 4 17 3.543 3.831 7.914 5 15 5 7.217 0 10.457-1.169 14-5 3.543-3.963 4-8.941 4-17v-52c0-3.4348.769-5.622 3-8 1.96-2.0893 4.028-2.0401 7-2 .411.0055 1.586 0 2 0h16Zm85 52 34-52h-26c-3.277 0-6.188 1.1758-8 4l-16 24-15-23c-1.812-2.8242-5.723-5-9-5h-25l34 51-37 57h26c3.25 0 6.182-3.213 8-6l18-27 19 28c1.818 2.787 4.75 5 8 5h26l-37-56Z" class="dark:text-white text-gray-950"></path><path fill="rgb(0 220 130)" fill-rule="evenodd" d="M102.799 3.5398C106.33 1.5449 110.324.5 114.382.5s8.052 1.045 11.582 3.0398c3.532 1.9952 6.482 4.8753 8.542 8.3653l18.242 30.9566 15.801 25.5766 6.644-11.6251 1.841-3.2371 6.518-11.388c2.058-3.4906 5.008-6.3712 8.538-8.367 3.53-1.9953 7.524-3.0406 11.582-3.0406 4.057 0 8.051 1.0453 11.581 3.0406 3.531 1.9958 6.48 4.8766 8.538 8.3672l18.389 31.1803.016.0006.998 1.7174 53.65 90.9664c0 .001-.001-.001 0 0 2.061 3.49 3.154 7.465 3.156 11.517.002 4.054-1.087 8.028-3.146 11.52-2.058 3.492-5.008 6.373-8.54 8.369-3.53 1.996-7.525 3.041-11.584 3.041H161.599l22.185-37.558h67.115l-47.233-80.0753-48.126 81.5653c-7.7 12.729-17.328 22.167-28.957 28.189-.113.065-.228.13-.343.196-3.193 1.817-7.516 4.034-11.665 5.334-4.093 1.283-10.624 1.835-15.7702 2.097-.1935.01-.3858.019-.5766.029-2.1167.148-4.2767.223-6.4804.223h-68.283c-.0001 0 .0002 0 0 0-4.0583 0-8.0532-1.045-11.5837-3.041-3.5314-1.996-6.4815-4.877-8.5396-8.369-2.0588-3.492-3.148-7.466-3.1462-11.52.0018-4.052 1.094-8.024 3.1551-11.515m0 0 30.633-51.944 16.5658-29.1048 20.6681-34.0319L94.2571 11.906c2.0595-3.49 5.0106-6.371 8.5419-8.3663M40.7818 116.789l35.8795-60.8401L110.47 45.0357 45.1786 155.732l-4.3968-38.943Zm-6.0668 10.288L9.5056 169.824c-1.397 2.365-2.1281 5.039-2.1293 7.75a15.149 15.149 0 0 0 .5565 4.074l31.0522-16.751-4.27-37.82Zm6.9797 44.638-30.1993 16.291c1.1104 1.199 2.4133 2.232 3.8691 3.055 2.4537 1.387 5.2477 2.122 8.0995 2.122h32.8168l-14.5861-21.468Zm47.4539 21.468h.2597l.4603-.002c.472-.002 1.1577-.008 2.0043-.022 1.5584-.026 3.6544-.079 5.9617-.189 9.4374-.673 17.8654-2.946 25.3574-6.801a91.7367 91.7367 0 0 0 2.93-1.764l-.953-30.109c-3.704 4.749-7.764 8.378-12.428 10.964-6.423 3.561-13.6739 4.968-22.1064 4.968l-41.2221-.009 15.5049 22.821 24.2312.143Zm-39.821-30.281 41.307.009c.0003 0-.0002 0 0 0 7.6494 0 13.6184-1.275 18.6744-4.078 5.045-2.797 9.497-7.291 13.825-14.273l22.734-38.556-31.458-53.4439L49.3276 162.902Zm100.0514-48.644-17.594 29.838h22.236l-4.642-29.838Zm5.463 37.155h-22.579l.894 28.262c6.188-4.988 11.588-11.348 16.259-19.065.003-.006.007-.012.01-.018l5.416-9.179Zm6.005-10.177 38.491-65.2347-19.773-12.2828-8.466 14.8894-15.469 29.0981 5.217 33.53Zm3.652-65.6173-17.888-28.957-9.912-16.8203-19.905 12.542 33.832 57.4798 8.483-14.7654.008-.014 5.382-9.4651Zm-50.048-40.3619 18.551-11.689-4.65-7.8922c-1.397-2.3672-3.417-4.3507-5.87-5.7368-2.454-1.3866-5.248-2.1218-8.1-2.1218-2.852 0-5.646.7352-8.101 2.1218-1.876 1.06-3.498 2.4694-4.782 4.1326l12.952 21.1854ZM97.273 20.998 82.2519 46.4689l25.5511-8.2475-10.53-17.2234Zm112.762 58.4635 46.215 78.3495 7.607-33.219-12.277-20.705-13.568-23.3557-27.977-1.0698Zm59.177 53.9465-7.055 30.81h25.226l-18.171-30.81Zm22.35 38.127h-32.113l-28.571 21.648h45.853c2.852 0 5.646-.735 8.1-2.122 2.453-1.386 4.471-3.37 5.867-5.738 1.395-2.366 2.122-5.039 2.121-7.749-.001-2.076-.429-4.129-1.257-6.039Zm-68.258 18.268 25.794-19.544H198.69l24.614 19.544Zm-35.728-19.092 28.303 22.472h-41.577l13.274-22.472Zm46.033-97.6702-15.973-27.0841c-1.396-2.367-3.414-4.351-5.867-5.7372a16.149 16.149 0 0 0-1.378-.695l-2.629 32.5279 25.847.9884Zm-32.755-4.6672 2.447-30.2719c-2.722.0609-5.38.7913-7.727 2.1178-2.446 1.3823-4.459 3.3587-5.855 5.7169L183.173 57.39l17.681 10.9836ZM1133.15 198.2c4.93 2.267 10.12 2.8 15.85 2.8 9.73 0 18.35-1.533 25.55-5.8 7.2-4.267 12.67-10.333 16.4-18.2 3.87-7.867 6.05-16.6 6.05-27 0-10.4-2.18-19.933-6.05-27.8-3.73-7.867-9.2-13.933-16.4-18.2-7.07-4.2668-15.4-6.4001-25-6.4001-6.13 0-11.6 1.1333-16.4 3.4001-4.8 2.133-9.22 5.067-12.15 8.8V60.3999h-20c-4.42 0-8 3.5817-8 8V201h28v-12c2.8 3.867 7.22 6.933 12.15 9.2Zm-6.4-28.2c-4.53-5.2-6.75-12-6.75-20.4 0-8.533 2.15-15.333 6.55-20.4 4.53-5.2 10.53-7.8 18-7.8 7.47 0 13.4 2.6 17.8 7.8 4.53 5.067 6.8 11.867 6.8 20.4 0 8.4-2.27 15.2-6.8 20.4-4.53 5.067-10.47 7.6-17.8 7.6s-13.27-2.533-17.8-7.6ZM950 201V60.9999h-20c-4.418 0-8 3.5817-8 8V117h-54V60.9999h-28V201h19.946c4.439 0 8.029-3.615 7.999-8.054L867.6 142H922v59h28Zm118-45.989V93.0115h-16c-.12 0-.3.0004-.5.0009-.52.0013-1.21.003-1.5-.0009l-.09-.0012c-2.92-.0397-4.97-.0674-6.91 2.0012-2.23 2.3779-3 4.5651-3 7.9995v52c0 8.059-.46 13.037-4 17-3.54 3.832-6.78 5-14 5-7.09 0-11.46-1.168-15-5-3.54-3.963-4-8.941-4-17v-52c0-3.4344-.77-4.7537-3-6.9995-2.231-2.378-5.588-3-9-3h-16v61.9995c0 14.004 5.389 25.81 13 34 7.742 8.191 19.43 11.989 34 11.989s25.26-3.798 33-11.989c7.74-8.19 13-19.996 13-34Z" clip-rule="evenodd" class="text-primary transition-all duration-300"></path></svg>
2 | 


--------------------------------------------------------------------------------
/components/home/WaitlistForm.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import * as z from 'zod';
  3 | import { useClipboard, onClickOutside } from '@vueuse/core';
  4 | 
  5 | interface WaitlistError {
  6 |   code?: string;
  7 |   message: string;
  8 |   path: string[];
  9 |   validation?: string;
 10 | }
 11 | 
 12 | const schema = z.object({
 13 |   email: z.string().email('Invalid email'),
 14 | })
 15 | 
 16 | type Schema = z.output<typeof schema>
 17 | 
 18 | const state = reactive<Partial<Schema>>({
 19 |   email: undefined,
 20 | })
 21 | 
 22 | const email = ref('');
 23 | const joiningWaitlist = ref(false);
 24 | const success = ref(false);
 25 | const errors = ref<WaitlistError[]>([]);
 26 | const config = useAppConfig();
 27 | 
 28 | const { data: count } = await useFetch('/api/count');
 29 | const yourIndex = computed(() => (count.value?.count || 0) + 1);
 30 | 
 31 | const modalOpen = ref(false);
 32 | 
 33 | const runtimeConfig = useRuntimeConfig();
 34 | const hovered = ref(false);
 35 | 
 36 | const { copy: copyToClipboard } = useClipboard();
 37 | 
 38 | const copyButtonRef = ref<HTMLElement>();
 39 | 
 40 | const copyState = ref('init');
 41 | 
 42 | onClickOutside(copyButtonRef, () => {
 43 |   if (copyState.value === 'copied') {
 44 |     copyState.value = 'init'
 45 |   }
 46 | })
 47 | 
 48 | const url = runtimeConfig?.public?.socialShare?.baseUrl || "";
 49 | const copy = (_e: MouseEvent) => {
 50 |   copyToClipboard(url)
 51 |     .then(() => {
 52 |       copyState.value = 'copied'
 53 |     })
 54 |     .catch((err) => {
 55 |       // eslint-disable-next-line no-console
 56 |       console.warn("Couldn't copy to clipboard!", err)
 57 |     })
 58 | }
 59 | 
 60 | const joinWaitlist = async () => {
 61 |   joiningWaitlist.value = true;
 62 |   errors.value = [];
 63 | 
 64 |   try {
 65 |     await $fetch('api/join-waitlist', {
 66 |       method: 'POST', body: {
 67 |         email: state.email,
 68 |       }
 69 |     });
 70 | 
 71 |     email.value = '';
 72 |     success.value = true;
 73 |     modalOpen.value = true;
 74 |   } catch (e: any) {
 75 |     switch (e?.response?.status) {
 76 |       case 400: {
 77 |         errors.value = e.data.data.issues
 78 |         break;
 79 |       }
 80 |       case 429: {
 81 |         errors.value = [{ path: ['server'], message: 'You’ve made too many requests in a short period. Please wait a moment and try again.' }]
 82 |         break;
 83 |       }
 84 |     }
 85 |   } finally {
 86 |     joiningWaitlist.value = false;
 87 |   }
 88 | 
 89 | }
 90 | 
 91 | </script>
 92 | 
 93 | <template>
 94 | 
 95 |   <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
 96 |     <UForm :schema="schema" :state="state" @submit="joinWaitlist">
 97 |       <div>
 98 |         <UFormField class="mt-2" name="email">
 99 |           <UInput class="w-full" v-model="state.email" placeholder="Email address" />
100 |         </UFormField>
101 |       </div>
102 |       <div class="mt-6">
103 |         <UButton type="submit"
104 |           class="flex w-full cursor-pointer justify-center rounded-md bg-primary-500 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 transition-all">
105 |           <span>Sign
106 |             Up</span>
107 |         </UButton>
108 | 
109 |         <p class="mt-4 text-base/6 text-red-500 data-[disabled]:opacity-50 sm:text-sm/6" v-for="error in errors">
110 |           {{ error.path.join(',') }}: {{ error.message }}
111 |         </p>
112 |       </div>
113 |     </UForm>
114 | 
115 |     <UModal v-model:open="modalOpen" :title="`Thanks! you are number ${yourIndex} on the waitlist.`"
116 |       description="We'll let you know when we launch.">
117 | 
118 |       <template #body>
119 |         <div class="flex flex-col items-center justify-center gap-4">
120 |           <p class="text-xl font-medium">tell your friends:</p>
121 |           <div class="flex gap-4">
122 |             <SocialShare v-for="network in ['facebook', 'x', 'linkedin', 'email']" :key="network" :network="network"
123 |               :styled="true" />
124 |           </div>
125 |           <div class="bg-black rounded-full py-2 px-5 text-gray-300 flex items-center gap-2">
126 |             <span>{{ runtimeConfig?.public?.socialShare?.baseUrl }}</span>
127 |             <button ref="copyButtonRef" @click="copy"
128 |               class="border font-mono rounded-md text-sm border-gray-600 flex gap-2 items-center p-1 transition-all font-medium">
129 |               <span class="sr-only">Copy to clipboard</span>
130 |               <span class="icon-wrapper h-[18px] w-[18px] block relative">
131 |                 <Transition name="fade">
132 |                   <Icon v-if="copyState === 'copied'" name="tabler:copy-check" size="18"
133 |                     class="copied block absolute" />
134 |                   <Icon v-else name="tabler:copy" size="18" class="absolute block" />
135 |                 </Transition>
136 |               </span>
137 |             </button>
138 |           </div>
139 |         </div>
140 |       </template>
141 |     </UModal>
142 | 
143 |     <div class="mt-4 flex gap-2 items-center justify-center">
144 |       <UAvatarGroup>
145 |         <UAvatar src="https://i.pravatar.cc/150?img=3" />
146 |         <UAvatar src="https://i.pravatar.cc/150?img=5" />
147 |         <UAvatar src="https://i.pravatar.cc/150?img=8" />
148 |       </UAvatarGroup>
149 |       <p class="font-medium text-gray-500 text-sm">Join {{ count?.count || 0 }}+ others</p>
150 |     </div>
151 |     <p class="mt-10 text-center text-sm text-gray-400" v-if="config.waitlist.showSignups">
152 |       Already signed up?
153 |       <NuxtLink to="/leaderboard"
154 |         class="cursor-pointer transition-color font-semibold leading-6 text-primary-400 hover:text-primary-300">
155 |         Check your spot on the waiting list.
156 |       </NuxtLink>
157 |     </p>
158 |   </div>
159 | </template>
160 | 
161 | <style scoped>
162 | .fade-enter-active,
163 | .fade-leave-active {
164 |   transition: opacity 200ms;
165 | }
166 | 
167 | .fade-enter-from,
168 | .fade-leave-to {
169 |   opacity: 0
170 | }
171 | </style>
172 | 


--------------------------------------------------------------------------------