@edgedev/create-edge-site 1.0.0

package/.nvmrc

@@ -0,0 +1 @@
+22.13.1

package/.vscode/settings.json

@@ -0,0 +1,21 @@
+{
+    "files.associations": {
+      "*.json": "json"
+    },
+    "[json]": {
+      "editor.formatOnSave": true
+    },
+    "editor.formatOnSave": false,
+    "vetur.validation.template": false,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    },
+    "editor.formatOnSaveMode": "modifications",
+    "editor.trimFinalNewlines": false,
+    "vue.features.codeActions": false,
+    "editor.tabSize": 2,
+    "editor.insertSpaces": true,
+    "editor.detectIndentation": false,
+    "vue3snippets.enable-compile-vue-file-on-did-save-code": false
+  }
+  

package/README.md

@@ -0,0 +1,9 @@
+# Edge Website Starter
+## Setup
+
+```bash
+#Run this under current version of node once:
+npm install -g --ignore-scripts @edgedev/create-edge-site
+
+#Then run this whenever you want to create a new app:
+npx @edgedev/create-edge-site yourappname

package/app.vue

@@ -0,0 +1,5 @@
+<template class="font-sans">
+  <edge-navbar />
+  <NuxtPage />
+  <edge-footer class="h-[200px]" />
+</template>

package/assets/css/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/bin/cli.js

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+console.log('Script started')
+const { execSync } = require('node:child_process')
+const fs = require('node:fs')
+const path = require('node:path')
+
+const runCommand = (command) => {
+  try {
+    console.log(`Running command: ${command}`)
+    execSync(`${command}`, { stdio: 'inherit' })
+  }
+  catch (err) {
+    console.error(`Failed to run command: ${command}`, err)
+    return false
+  }
+  return true
+}
+
+const modifyPackageJson = (repoName) => {
+  try {
+    const packageJsonPath = path.join(repoName, 'package.json')
+    const packageJsonData = fs.readFileSync(packageJsonPath, 'utf-8')
+    const packageJsonObj = JSON.parse(packageJsonData)
+
+    // Modify the properties
+    delete packageJsonObj.version
+    delete packageJsonObj.bin
+    packageJsonObj.name = repoName
+    packageJsonObj.description = `A really cool Edge Site for ${repoName}`
+
+    // Write the file back
+    fs.writeFileSync(packageJsonPath, JSON.stringify(packageJsonObj, null, 2))
+  }
+  catch (err) {
+    console.error('Failed to modify package.json', err)
+    return false
+  }
+  return true
+}
+
+const process = require('node:process')
+
+const repoName = process.argv[2]
+
+const gitCheckoutCommand = `git clone --depth 1 https://github.com/Edge-Marketing-and-Design/edge-site-starter.git ${repoName}`
+const removeGitDirCommand = `rm -rf ${repoName}/.git`
+const installDependenciesCommand = `cd ${repoName} && pnpm store prune && pnpm install --force --ignore-scripts=false`
+
+console.log(`Cloning with name ${repoName}...`)
+const checkedOut = runCommand(gitCheckoutCommand)
+if (!checkedOut) {
+  process.exit(1)
+}
+
+console.log(`Removing .git directory from ${repoName}...`)
+const removedGitDir = runCommand(removeGitDirCommand)
+if (!removedGitDir) {
+  process.exit(1)
+}
+
+console.log(`Modifying package.json for ${repoName}...`)
+const modifiedPackageJson = modifyPackageJson(repoName)
+if (!modifiedPackageJson) {
+  process.exit(1)
+}
+
+console.log(`Installing dependencies for ${repoName}...`)
+const installedDeps = runCommand(installDependenciesCommand)
+if (!installedDeps) {
+  process.exit(1)
+}
+
+console.log(`Successfully created ${repoName}!`)
+console.log(`cd into ${repoName} and run 'sh firebase_init.sh' to initialize your firebase project.`)

package/components/Input.vue

@@ -0,0 +1,43 @@
+<script>
+import { MaskInput } from 'vue-3-mask'
+
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script setup>
+const props = defineProps({
+  errorClass: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+})
+</script>
+
+defineOptions({ inheritAttrs: false })
+
+<template>
+  <Field v-slot="{ field }" :name="props.name">
+    <MaskInput
+      v-if="props.type === 'phone'"
+      mask="(###) ###-####"
+      type="props.type"
+      v-bind="{ ...field, ...$attrs }"
+    />
+    <input
+      v-else
+      v-bind="{ ...field, ...$attrs }"
+    >
+  </Field>
+  <ErrorMessage :class="props.errorClass" :name="props.name" />
+</template>

package/components/Select.vue

@@ -0,0 +1,34 @@
+<script>
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script setup>
+const props = defineProps({
+  errorClass: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Array,
+    required: true,
+    // Example format: [{ label: 'Option 1', value: '1' }]
+  },
+})
+</script>
+
+<template>
+  <Field v-slot="{ field }" :name="props.name">
+    <select v-bind="{ ...field, ...$attrs }">
+      <option v-for="option in props.options" :key="option.value" :value="option.value">
+        {{ option.label }}
+      </option>
+    </select>
+  </Field>
+  <ErrorMessage :class="props.errorClass" :name="props.name" />
+</template>

package/components/Textarea.vue

@@ -0,0 +1,29 @@
+<script>
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script setup>
+// or any key you expect
+const props = defineProps({
+  errorClass: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <Field v-slot="{ field }" :name="props.name">
+    <textarea
+      v-bind="{ ...field, ...$attrs }"
+    />
+  </Field>
+  <ErrorMessage :class="props.errorClass" :name="props.name" />
+</template>

package/components/edgeFooter.vue

@@ -0,0 +1,52 @@
+<template>
+  <footer class="bg-black items-center justify-center flex flex-col">
+    <div class="text-center">
+      <!-- Social Icons -->
+      <div class="flex justify-center mb-6 space-x-4">
+        <a
+          href="#"
+          class="flex items-center justify-center w-12 h-12 transition rounded-full bg-lblue text-dblue hover:bg-opacity-80"
+        >
+          <i class="fab fa-facebook-f fa-lg" />
+        </a>
+        <a
+          href="#"
+          class="flex items-center justify-center w-12 h-12 transition rounded-full bg-lblue text-dblue hover:bg-opacity-80"
+        >
+          <i class="fab fa-instagram fa-lg" />
+        </a>
+        <a
+          href="#"
+          class="flex items-center justify-center w-12 h-12 transition rounded-full bg-lblue text-dblue hover:bg-opacity-80"
+        >
+          <i class="fab fa-houzz fa-lg" /> <!-- Houzz or custom icon -->
+        </a>
+      </div>
+
+      <!-- Contact Information -->
+      <div
+        class="mb-8 text-sm font-medium tracking-wide text-center uppercase text-lblue md:flex md:justify-center md:space-x-8 md:space-y-0"
+      >
+        <div>
+          <a href="tel:+19999999"><span
+            class="font-serif font-bold tracking-wider text-white"
+          >Office</span> 999.999.9999</a>
+        </div>
+        <div>
+          <span class="font-serif font-bold tracking-wider text-white">Mail</span> Mailing Address
+        </div>
+        <div>
+          <span class="font-serif font-bold tracking-wider text-white">Other Info</span> Other Info
+        </div>
+      </div>
+
+      <!-- Logo -->
+      <div class="flex justify-center">
+        <img src="/images/logo.png" alt="JDL Construction Logo" class="h-auto opacity-75 w-46">
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+</style>

package/components/edgeFormFling.vue

@@ -0,0 +1,124 @@
+<script setup>
+import VueTurnstile from 'vue-turnstile'
+
+const props = defineProps({
+  validationSchema: {
+    type: Object,
+    required: true,
+  },
+  formFlingEndpoint: {
+    type: String,
+    required: true,
+  },
+  turnstileSiteSecret: {
+    type: String,
+    required: false,
+  },
+  successMessage: {
+    type: String,
+    required: false,
+    default: 'Form submitted successfully!',
+  },
+  errorMessage: {
+    type: String,
+    required: false,
+    default: 'Submission failed, please try again.',
+  },
+  successClass: {
+    type: String,
+    required: false,
+    default: 'text-green-500 mt-2',
+  },
+  errorClass: {
+    type: String,
+    required: false,
+    default: 'text-red-500 mt-2',
+  },
+})
+
+const state = reactive({
+  submitting: false,
+  turnstileToken: '',
+  submitResponse: {
+    sent: false,
+    success: false,
+    message: '',
+  },
+})
+
+const onSubmit = async (values, { resetForm }) => {
+  state.submitting = true
+  state.submitResponse.sent = false
+
+  try {
+    const formData = new FormData()
+
+    for (const key in values) {
+      formData.append(key, values[key])
+    }
+
+    if (state.turnstileToken) {
+      formData.append('cf-turnstile-response', state.turnstileToken)
+    }
+
+    const response = await fetch(props.formFlingEndpoint, {
+      method: 'POST',
+      body: formData,
+    })
+
+    state.submitResponse.sent = true
+
+    if (!response.ok) {
+      state.submitResponse.success = false
+      state.submitResponse.message = props.errorMessage
+      return
+    }
+
+    const data = await response.json()
+
+    let success = true
+    let errorMessage = props.successMessage
+
+    if (Array.isArray(data)) {
+      for (const step of data) {
+        if (!step.response.success) {
+          success = false
+          errorMessage = props.errorMessage
+          break
+        }
+      }
+    }
+
+    state.submitResponse.success = success
+    state.submitResponse.message = errorMessage
+  }
+  catch (err) {
+    console.log(err)
+    state.submitResponse.success = false
+    state.submitResponse.message = props.errorMessage
+  }
+  finally {
+    state.submitting = false
+  }
+  if (state.submitResponse.success) {
+    resetForm()
+  }
+}
+</script>
+
+<template>
+  <Form
+    :validation-schema="props.validationSchema"
+    @submit="onSubmit"
+  >
+    <slot :submitting="state.submitting" :submit-response="state.submitResponse" />
+    <VueTurnstile
+      v-if="props.turnstileSiteSecret"
+      v-model="state.turnstileToken"
+      :site-key="props.turnstileSiteSecret"
+    />
+    <div v-if="state.submitResponse.sent" :class="state.submitResponse.success ? props.successClass : props.errorClass">
+      {{ state.submitResponse.message }}
+    </div>
+  </Form>
+</template>

package/components/edgeNavbar.vue

@@ -0,0 +1,167 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const menuOpen = ref(false)
+
+const toggleMenu = () => {
+  menuOpen.value = !menuOpen.value
+  if (menuOpen.value) {
+    document.body.classList.add('overflow-hidden') // Prevent scrolling when open
+  }
+  else {
+    document.body.classList.remove('overflow-hidden')
+  }
+}
+
+// Automatically close the menu when clicking a link
+const closeMenu = () => {
+  menuOpen.value = false
+  document.body.classList.remove('overflow-hidden')
+}
+
+// Ensure the menu closes when resizing back to desktop
+const handleResize = () => {
+  if (window.innerWidth >= 1024) {
+    closeMenu()
+  }
+}
+
+// Listen for window resize events
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<template>
+  <nav class="relative z-30 text-white">
+    <!-- Navigation Content (Top Half) -->
+    <div class="relative px-6 md:px-12 bg-dblue">
+      <div class="container mx-auto flex items-center justify-between h-[128px]">
+        <!-- Logo -->
+        <NuxtLink to="/" class="text-xl font-bold">
+          <img src="/images/logo.png" alt="JDL Construction MT" class="w-full h-auto">
+        </NuxtLink>
+
+        <!-- Mobile Menu Button -->
+        <button class="md:hidden focus:outline-none" @click="toggleMenu">
+          <svg v-if="!menuOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+          <svg v-else class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+
+        <!-- Desktop Menu -->
+        <ul class="hidden md:flex space-x-[30px] font-semibold tracking-widest uppercase">
+          <li>
+            <NuxtLink to="/" class="nav-item">
+              Home
+            </NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="/contact" class="nav-item">
+              Contact
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Mobile Slide-in Menu -->
+    <transition name="slide">
+      <div v-if="menuOpen" class="fixed inset-0 flex flex-col items-center justify-center px-20 py-6 text-center bg-dblue z-[9999] w-full h-full">
+        <!-- Close Button -->
+        <button class="absolute text-4xl top-6 right-6 text-lblue" @click="toggleMenu">
+          &times;
+        </button>
+
+        <!-- Mobile Logo -->
+        <a href="/"><img src="/images/logo.png" alt="JDL Construction Logo" class="mb-4 w-50"></a>
+
+        <!-- Social Media Icons -->
+        <div class="flex justify-center my-6 space-x-4">
+          <a href="#" class="flex items-center justify-center w-12 h-12 transition rounded-full bg-lblue text-dblue hover:bg-opacity-80">
+            <i class="fab fa-facebook-f fa-lg" />
+          </a>
+          <a href="#" class="flex items-center justify-center w-12 h-12 transition rounded-full bg-lblue text-dblue hover:bg-opacity-80">
+            <i class="fab fa-instagram fa-lg" />
+          </a>
+          <a href="#" class="flex items-center justify-center w-12 h-12 transition rounded-full bg-lblue text-dblue hover:bg-opacity-80">
+            <i class="fab fa-houzz fa-lg" /> <!-- Houzz or custom icon -->
+          </a>
+        </div>
+
+        <!-- Mobile Menu Items -->
+        <ul class="w-full">
+          <li class="border-t border-lblue">
+            <NuxtLink to="/" class="text-lg tracking-widest uppercase" @click="closeMenu">
+              Home
+            </NuxtLink>
+          </li>
+          <li class="border-t border-b border-lblue">
+            <NuxtLink to="/contact" class="text-lg tracking-widest uppercase" @click="closeMenu">
+              Contact
+            </NuxtLink>
+          </li>
+        </ul>
+
+        <!-- Call to Action Section -->
+        <div class="mt-8 text-center">
+          <h2 class="text-3xl font-bold tracking-widest uppercase text-lblue">
+            Stuff
+          </h2>
+          <p class="mt-2 text-white">
+            More stuff here
+          </p>
+          <NuxtLink to="/contact" class="inline-block px-10 py-4 mt-4 text-lg font-bold tracking-widest underline uppercase transition text-dblue bg-burntorange hover:bg-opacity-80" @click="closeMenu">
+            Contact Us
+          </NuxtLink>
+        </div>
+      </div>
+    </transition>
+  </nav>
+</template>
+
+ <style>
+ /* Mobile slide-in transition */
+ .slide-enter-active,
+ .slide-leave-active {
+   transition: transform 0.3s ease-in-out;
+ }
+ .slide-enter-from,
+ .slide-leave-to {
+   transform: translateX(100%);
+ }
+
+ /* Navigation Items with Triangle */
+ .nav-item {
+   position: relative;
+
+   transition: color 0.3s ease-in-out;
+ }
+
+ /* Hover Effect */
+ .nav-item:hover {
+   color: #A2A8AE; /* Accent color on hover */
+ }
+
+ .nav-item:hover::after {
+   transform: scale(1.3); /* Triangle expands */
+   background-color: white; /* Changes color slightly */
+ }
+
+ /* Active State */
+ .nav-item.router-link-active {
+   color: white;
+   font-weight: bold;
+ }
+
+ .nav-item.router-link-active {
+  color: #A2A8AE;
+ }
+ </style>

package/components/titleSection.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+
+defineProps({
+  bgImage: {
+    type: String,
+    required: true,
+  },
+  headline: {
+    type: String,
+    required: false,
+    default: '',
+  },
+})
+
+// Refs for animation
+const accentImg = ref(null)
+const heroHeading = ref(null)
+
+// Animation on mount
+onMounted(() => {
+  setTimeout(() => {
+    if (accentImg.value) {
+      accentImg.value.classList.add('opacity-100', 'translate-x-0')
+    }
+    if (heroHeading.value) {
+      heroHeading.value.classList.add('opacity-100', 'translate-y-0')
+    }
+  }, 300)
+})
+</script>
+
+<template>
+  <section
+    class="relative z-[10] md:pt-20 md:pb-44 pb-16 px-6 flex items-center text-white text-center bg-right-bottom  bg-cover md:bg-contain bg-no-repeat overflow-hidden"
+    :style="{ backgroundImage: `url(${bgImage})` }"
+  >
+    <!-- Ensure Text is Always on Top -->
+    <div class="container relative z-[20] m-auto text-left bg-opacity-50 md:pr-[50%]  md:h-80">
+      <slot>
+        <h1
+          ref="heroHeading"
+          class="text-3xl md:text-6xl font-semibold !leading-snug opacity-0 translate-y-[20px] transition-all duration-1000 ease-out"
+        >
+          {{ headline }}
+        </h1>
+      </slot>
+    </div>
+
+    <!-- Gradient Background (top Half) -->
+    <div class="absolute z-10 top-0 left-0 w-full h-[128px] bg-gradient-to-b from-dblue to-transparent" />
+
+    <!-- Design Accent Image -->
+    <img
+      ref="accentImg"
+      src="/images/hero/titleShape.png"
+      alt="Decorative Accent"
+      class="absolute bottom-0 right-0 z-0 object-cover"
+    >
+    <!-- Diagonal Gradient Overlay -->
+    <div class="absolute inset-0 z-0 bg-reversed-angled-gradient" />
+  </section>
+</template>

package/eslint.config.js

@@ -0,0 +1,13 @@
+import antfu from '@antfu/eslint-config'
+
+export default [
+  ...(await antfu()),
+  {
+    rules: {
+      'vue/no-deprecated-slot-attribute': 'off',
+      'curly': 'off',
+      'no-console': 'off',
+      'antfu/top-level-function': 'off',
+    },
+  },
+]

package/nuxt.config.ts

@@ -0,0 +1,37 @@
+import { defineNuxtConfig } from 'nuxt/config'
+
+export default defineNuxtConfig({
+  ssr: false,
+  compatibilityDate: '2024-11-01',
+  app: {
+    head: {
+      link: [
+        {
+          rel: 'icon',
+          type: 'image/x-icon',
+          href: '/favicon.ico',
+        },
+        {
+          rel: 'stylesheet',
+          href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css',
+        },
+      ],
+    },
+  },
+  css: [
+    '~/assets/css/global.css', // ✅ Keep global styles only
+  ],
+  modules: ['@nuxtjs/tailwindcss', '@vee-validate/nuxt'],
+  vite: {
+    define: {
+      'process.env.DEBUG': false,
+    },
+    server: {
+      hmr: {
+        port: 3000, // Make sure this port matches your Nuxt server port
+        clientPort: 3000, // Ensure this matches your Nuxt server port as well
+      },
+    },
+  },
+  devtools: { enabled: false },
+})

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@edgedev/create-edge-site",
+  "version": "1.0.0",
+  "description": "Create Edge Starter Site",
+  "bin": {
+    "create-edge-site": "./bin/cli.js"
+  },
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxtjs/tailwindcss": "6.13.2",
+    "@vee-validate/nuxt": "^4.15.0",
+    "@vee-validate/rules": "^4.15.0",
+    "@vee-validate/zod": "^4.15.0",
+    "nuxt": "^3.16.1",
+    "vue": "^3.5.13",
+    "vue-3-mask": "0.0.1-alpha",
+    "vue-router": "^4.5.0",
+    "vue-turnstile": "^1.0.11",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^4.11.0",
+    "eslint": "^9"
+  }
+}

package/pages/contact.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { toTypedSchema } from '@vee-validate/zod'
+import * as zod from 'zod'
+
+// Zod Documentation: https://zod.dev/?id=strings
+
+const validationSchema = toTypedSchema(
+  zod.object({
+    email: zod.string({
+      required_error: 'Email is required',
+    }).min(1, { message: 'Email is required' }).email({ message: 'Must be a valid email' }),
+    name: zod.string({
+      required_error: 'Name is required',
+    }).min(1, { message: 'Name is required' }),
+    phone: zod.string({
+      required_error: 'Phone is required',
+    }).min(14, { message: 'Valid phone # required' }),
+    message: zod.string({
+      required_error: 'Message is required',
+    }).min(1, { message: 'Message is required' }),
+  }),
+)
+
+onMounted(() => {
+  console.log('Hello world.')
+})
+</script>
+
+<template>
+  <Head>
+    <title>Edge Website - An awesome Edge website</title>
+    <meta name="description" content="This is an Edge website template">
+    <link rel="canonical" href="https://edgemarketingdesign.com/">
+  </Head>
+  <div class="min-h-[calc(100vh_-_328px)] w-full items-center justify-center flex flex-col">
+    <edge-form-fling
+      v-slot="{ submitting }"
+      form-fling-endpoint="https://formfling.com/s/KLm807Hz7BXhB8S08uuF-oFPhf8TuWOSPGEmUATyV-2t5gal"
+      turnstile-site-secret="0x4AAAAAAANxjIQsY8S7Lqur"
+      :validation-schema="validationSchema"
+      success-message="Thank you, we will be in touch soon."
+      error-message="There was an error submitting the form."
+      success-class="text-green-500"
+      error-class="text-red-500"
+    >
+      <Input
+        type="text"
+        placeholder="Name"
+        name="name"
+        class="w-full px-4 py-2 border border-gray-300 focus:outline-none"
+        error-class="text-red-500 text-sm"
+      />
+      <!-- Email and Phone -->
+      <div class="max-w-[400px] my-2 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div>
+          <Input
+            type="email"
+            placeholder="Email"
+            name="email"
+            class="w-full px-4 py-2 border border-gray-300 focus:outline-none"
+            error-class="text-red-500 text-sm"
+          />
+        </div>
+        <div>
+          <Input
+            type="phone"
+            placeholder="Phone"
+            name="phone"
+            class="w-full px-4 py-2 border border-gray-300 focus:outline-none"
+            error-class="text-red-500 text-sm"
+          />
+        </div>
+      </div>
+      <!-- Message -->
+      <div>
+        <Textarea
+          name="message"
+          placeholder="Message"
+          class="w-full h-32 px-4 py-2 mt-2 border border-gray-300 resize-none focus:outline-none"
+          error-class="text-red-500 text-sm"
+        />
+      </div>
+      <div>
+        <button v-if="!submitting" type="submit" class="px-6 mt-2 py-2 transition-colors bg-lblue text-dblue hover:bg-opacity-80">
+          Send Message
+        </button>
+        <button v-else type="button" class="px-6 mt-2 py-2 transition-colors bg-gray-300 text-gray-500 cursor-not-allowed">
+          Sending...
+        </button>
+      </div>
+    </edge-form-fling>
+  </div>
+</template>

package/pages/index.vue

@@ -0,0 +1,16 @@
+<script setup>
+onMounted(() => {
+  console.log('Hello world.')
+})
+</script>
+
+<template>
+  <Head>
+    <title>Edge Website - An awesome Edge website</title>
+    <meta name="description" content="This is an Edge website template">
+    <link rel="canonical" href="https://edgemarketingdesign.com/">
+  </Head>
+  <div class="min-h-[calc(100vh_-_328px)] w-full items-center justify-center flex flex-col">
+    <img src="/images/edge_logo.png" class="w-[400px] h-auto" alt="Edge Marketing Design Logo">
+  </div>
+</template>

package/plugins/vee-validate-rules.js

@@ -0,0 +1,11 @@
+import { defineNuxtPlugin } from '#app'
+import * as rules from '@vee-validate/rules'
+import { defineRule } from 'vee-validate'
+
+export default defineNuxtPlugin(() => {
+  for (const [ruleName, ruleFn] of Object.entries(rules)) {
+    if (typeof ruleFn === 'function') {
+      defineRule(ruleName, ruleFn)
+    }
+  }
+})

package/public/robots.txt

@@ -0,0 +1 @@
+

package/server/tsconfig.json

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

package/tailwind.config.js

@@ -0,0 +1,27 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+      "./components/**/*.{vue,js,ts}",
+      "./layouts/**/*.{vue,js,ts}",
+      "./pages/**/*.{vue,js,ts}",
+      "./app.vue",
+    ],
+    theme: {
+      extend: {
+        colors: {
+          dblue: "#30464C", // Dark Blue
+          mblue: "#46616F", // Medium Blue
+          lgray: "#A2A8AE", // Light Gray
+          lblue: "#87B4B7", // Light Blue
+          burntorange: "#B65B33", // Burnt Orange
+          tan: "#BDA86A", // Tan
+          cream: "#D9D0C4", // Cream
+        },
+        fontFamily: {
+          sans: ["Overpass", "sans-serif"],
+          serif: ["Rokkitt", "serif"],
+        },
+      },
+    },
+    plugins: [],
+  };

package/tsconfig.json

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