setup: initial cnbcr landing

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.env.example

@@ -0,0 +1,2 @@
+# Production license for @nuxt/ui-pro, get one at https://ui.nuxt.com/pro/purchase
+NUXT_UI_PRO_LICENSE=

.eslintignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+.output
+.nuxt

.eslintrc.cjs

@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  extends: [
+    '@nuxt/eslint-config'
+  ],
+  rules: {
+    // Global
+    semi: ['error', 'never'],
+    quotes: ['error', 'single'],
+    'quote-props': ['error', 'as-needed'],
+    // Vue
+    'vue/multi-word-component-names': 0,
+    'vue/max-attributes-per-line': 'off',
+    'vue/no-v-html': 0
+  }
+}

.github/workflows/deploy-to-vercel.yaml

@@ -0,0 +1,26 @@
+name: Deploy with Vercel
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install PNPM
+        run: npm install -g pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install Vercel CLI
+        run: pnpm install -g vercel
+
+      - name: Deploy to Vercel
+        run: vercel --token ${{ secrets.VERCEL_TOKEN }} --deploy --prod

.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

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

README.md

@@ -0,0 +1,89 @@
+![nuxt-ui-landing-social-card](https://github.com/nuxt-ui-pro/landing/assets/739984/d0919c96-e5f2-47e9-b460-44f87341218d)
+
+# Nuxt UI Pro - Landing template
+
+This starter lets you get started with [Nuxt UI Pro](https://ui.nuxt.com/pro) quickly.
+
+[![Nuxt UI Pro](https://img.shields.io/badge/Made%20with-Nuxt%20UI%20Pro-00DC82?logo=nuxt.js&labelColor=020420)](https://ui.nuxt.com/pro)
+
+- [Live demo](https://landing-template.nuxt.dev/)
+- [Play on Stackblitz](https://stackblitz.com/github/nuxt-ui-pro/landing)
+- [Documentation](https://ui.nuxt.com/pro/getting-started)
+
+https://github.com/nuxt-ui-pro/landing/assets/904724/c7dd64a4-a09c-4cab-9572-92a02a5e06f9
+
+## Setup
+
+Make sure to install the 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 run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+
+## Renovate integration
+
+Install [Renovate GitHub app](https://github.com/apps/renovate/installations/select_target) on your repository and you are good to go.

app.config.ts

@@ -0,0 +1,54 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'pink',
+    gray: 'cool',
+    variables: {
+      light: {
+        background: 'var(--color-gray-50)'
+      },
+      dark: {
+        background: 'var(--color-gray-950)'
+      }
+    },
+    button: {
+      rounded: 'rounded-full',
+      default: {
+        size: 'md',
+        color: 'black'
+      }
+    },
+    input: {
+      rounded: 'rounded-full'
+    },
+    header: {
+      wrapper: 'lg:!border-transparent bg-gray-50 dark:bg-gray-950',
+      links: {
+        wrapper: 'ring-1 ring-gray-200 dark:ring-gray-800 px-3 gap-x-0 rounded-full',
+        base: 'py-2 px-4 font-medium transition-colors relative after:absolute after:-bottom-px after:inset-x-2 after:h-px after:rounded-full after:opacity-0 after:bg-gray-900 dark:after:bg-white after:transition-opacity',
+        active: 'text-gray-900 dark:text-white after:opacity-100',
+        inactive: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+      }
+    },
+    footer: {
+      top: {
+        wrapper: 'border-t border-gray-200 dark:border-gray-800',
+        container: 'py-8 lg:py-16'
+      },
+      bottom: {
+        wrapper: 'border-t border-gray-200 dark:border-gray-800'
+      }
+    },
+    pricing: {
+      card: {
+        highlight: 'ring-gray-900 dark:ring-white',
+        features: {
+          item: {
+            icon: {
+              base: 'text-gray-900 dark:text-white'
+            }
+          }
+        }
+      }
+    }
+  }
+})

app.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.ico' }
+  ],
+  htmlAttrs: {
+    lang: 'en'
+  }
+})
+
+useSeoMeta({
+  ogImage: 'https://landing-template.nuxt.dev/social-card.png',
+  twitterImage: 'https://landing-template.nuxt.dev/social-card.png',
+  twitterCard: 'summary_large_image'
+})
+</script>
+
+<template>
+  <Header />
+
+  <UMain>
+    <NuxtPage />
+  </UMain>
+
+  <Footer />
+
+  <UNotifications />
+</template>

components/Footer.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+const links = [{
+  label: 'Contacts',
+  children: [{
+    label: 'contact@abcrf.org'
+  }, {
+    label: 'Demo'
+  }, {
+    label: 'Documentation'
+  }]
+}, {
+  label: 'Features',
+  children: [{
+    label: 'Data'
+  }, {
+    label: 'Insights'
+  },  {
+    label: 'Sponsors'
+  }]
+}, {
+  label: 'CNBCR',
+  children: [{
+    label: 'About'
+  }, {
+    label: 'Partners'
+  },{
+    label: 'Blog'
+  }]
+}]
+
+const toast = useToast()
+
+const email = ref('')
+const loading = ref(false)
+
+function onSubmit () {
+  loading.value = true
+
+  setTimeout(() => {
+    toast.add({
+      title: 'Subscribed!',
+      description: 'You\'ve been subscribed to our newsletter.'
+    })
+
+    loading.value = false
+  }, 1000)
+}
+</script>
+
+<template>
+  <UFooter>
+    <template #top>
+      <UFooterColumns :links="links">
+        <template #right>
+          <form @submit.prevent="onSubmit">
+            <UFormGroup label="Subscribe to our newsletter" :ui="{ container: 'mt-3' }">
+              <UInput v-model="email" type="email" placeholder="Enter your email" :ui="{ icon: { trailing: { pointer: '' } } }" required size="xl" autocomplete="off" class="max-w-sm">
+                <template #trailing>
+                  <UButton type="submit" size="xs" :label="loading ? 'Subscribing' : 'Subscribe'" :loading="loading" />
+                </template>
+              </UInput>
+            </UFormGroup>
+          </form>
+        </template>
+      </UFooterColumns>
+    </template>
+
+    <template #left>
+      <p class="text-gray-500 dark:text-gray-400 text-sm">
+        Copyright © {{ new Date().getFullYear() }}. All rights reserved.
+      </p>
+    </template>
+
+    <template #right>
+      <UColorModeButton size="sm" />
+
+      <UButton to="https://github.com/nuxt-ui-pro/landing" target="_blank" icon="i-simple-icons-github" aria-label="GitHub" color="gray" variant="ghost" />
+    </template>
+  </UFooter>
+</template>