first commit

9 months ago · 7e6269f7bf
22 changed files with 11997 additions and 0 deletions
--- a/.editorconfig
+++ b/.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
--- a/.gitignore
+++ b/.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
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
 registry=http://npm.117112.xyz/
--- a/README.md
+++ b/README.md
@ -0,0 +1,95 @@
 ![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
 ## Quick Start
 ```bash [Terminal]
 npx nuxi init -t github:nuxt-ui-pro/landing
 ```
 ## 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.
--- a/app/app.config.ts
+++ b/app/app.config.ts
@ -0,0 +1,54 @@
 export default defineAppConfig({
  ui: {
    primary: 'indigo',
    gray: 'zinc',
    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'
            }
          }
        }
      }
    }
  }
 })
--- a/app/app.vue
+++ b/app/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>
  <AppHeader />
  <UMain>
    <NuxtPage />
  </UMain>
  <AppFooter />
  <UNotifications />
 </template>
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@ -0,0 +1,68 @@
 <script setup lang="ts">
 const links = []
 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>
      <div class="text-sm">备案号：桂ICP备00001号</div>
      <UColorModeButton size="sm" />
    </template>
  </UFooter>
 </template>
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@ -0,0 +1,54 @@
 <script setup lang="ts">
 const nuxtApp = useNuxtApp()
 const { activeHeadings, updateHeadings } = useScrollspy()
 const links = computed(() => [{
  label: '首页',
  to: '#home',
  icon: 'i-heroicons-cube-transparent',
  active: activeHeadings.value.includes('home') && !activeHeadings.value.includes('home')
 },{
  label: '特色',
  to: '#features',
  icon: 'i-heroicons-cube-transparent',
  active: activeHeadings.value.includes('features') && !activeHeadings.value.includes('features')
 }, {
  label: '价格',
  to: '#pricing',
  icon: 'i-heroicons-credit-card',
  active: activeHeadings.value.includes('pricing') && !activeHeadings.value.includes('pricing')
 }, {
  label: '下载',
  to: '#down',
  icon: 'i-heroicons-academic-cap',
  active: activeHeadings.value.includes('down')
 }, {
  label: '常见问题',
  to: '#faq',
  icon: 'i-heroicons-question-mark-circle',
  active: activeHeadings.value.includes('faq')
 }])
 nuxtApp.hooks.hookOnce('page:finish', () => {
  updateHeadings([
    document.querySelector('#features'),
    document.querySelector('#pricing'),
    document.querySelector('#testimonials'),
    document.querySelector('#faq')
  ])
 })
 </script>
 <template>
  <UHeader :links="links">
    <template #logo>
      <div class="flex items-center">
        <NuxtImg src="https://oss.wsdns.cn/20240717/5db2fc954a3a4034a0572be5ecfe8208.jpg?x-oss-process=image/resize,m_fixed,w_100,h_100/quality,Q_90" :size="20" />
        <text class="text-2xl ml-2">工匠基地</text>
      </div>
    </template>
    <template #right>
      <UColorModeButton size="sm" />
    </template>
  </UHeader>
 </template>
--- a/app/components/ImagePlaceholder.vue
+++ b/app/components/ImagePlaceholder.vue
@ -0,0 +1,73 @@
 <template>
  <div class="relative">
    <div class="bg-background border-gradient rounded-xl p-4">
      <div class="aspect-w-16 aspect-h-9 rounded-lg relative overflow-hidden border border-dashed border-gray-950/10 dark:border-white/10">
        <svg
          class="absolute inset-0 h-full w-full stroke-gray-950/10 dark:stroke-white/10"
          fill="none"
        >
          <defs>
            <pattern
              id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
              x="0"
              y="0"
              width="10"
              height="10"
              patternUnits="userSpaceOnUse"
            >
              <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
            </pattern>
          </defs>
          <rect
            stroke="none"
            fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
            width="100%"
            height="100%"
          />
        </svg>
      </div>
    </div>
  </div>
 </template>
 <style scoped>
 .border-gradient:after {
  --angle: 0deg;
  --border-color: rgb(var(--color-gray-300));
  --highlight-color: rgb(var(--color-primary-500));
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: -1px;
  opacity: 0.5;
  border-radius: 0.8rem;
  z-index: -1;
  background: var(--border-color);
  @supports (background: paint(houdini)) {
    background: linear-gradient(var(--angle), var(--border-color), var(--border-color), var(--border-color), var(--border-color), var(--highlight-color));
    animation: 10s rotate linear infinite;
  }
 }
 .dark .border-gradient:after {
  --border-color: rgb(var(--color-gray-700));
  --highlight-color: rgb(var(--color-gray-400));
 }
@keyframes rotate {
  to {
    --angle: 360deg;
  }
 }
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
 }
 </style>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@ -0,0 +1,97 @@
 <script setup lang="ts">
 const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
 useSeoMeta({
  title: page.value.title,
  ogTitle: page.value.title,
  description: page.value.description,
  ogDescription: page.value.description
 })
 </script>
 <template>
  <div>
    <ULandingHero
      id="home"
      title="工匠基地"
      description="快速提升职业技能的学习神器"
      :links="page.hero.links"
      style="background-image: url(https://oss.wsdns.cn/20240610/41ab59f725204d9ea4218fd4ae38e5c2.png); background-repeat: no-repeat; background-position: center; background-size: 100%"
    >
      <div class="absolute inset-0 landing-grid z-[-1] [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" />
    </ULandingHero>
 <!--    <ULandingHero-->
 <!--      id="home"-->
 <!--      :title="`工匠基地`"-->
 <!--      :description="`千铝教育app下载`"-->
 <!--    >-->
 <!--    </ULandingHero>-->
    <ULandingSection
      :title="page.features.title"
      :description="page.features.description"
      :headline="page.features.headline"
    >
      <UPageGrid
        id="features"
        class="scroll-mt-[calc(var(--header-height)+140px+128px+96px)]"
      >
        <ULandingCard
          v-for="(item, index) in page.features.items"
          :key="index"
          v-bind="item"
        />
      </UPageGrid>
    </ULandingSection>
    <ULandingSection
      :title="page.pricing.title"
      :description="page.pricing.description"
      :headline="page.pricing.headline"
    >
      <UPricingGrid
        id="pricing"
        compact
        class="scroll-mt-[calc(var(--header-height)+140px+128px+96px)]"
      >
        <UPricingCard
          v-for="(plan, index) in page.pricing.plans"
          :key="index"
          v-bind="plan"
        />
      </UPricingGrid>
    </ULandingSection>
    <ULandingSection class="bg-primary-50 dark:bg-primary-400 dark:bg-opacity-10" style="background-image: url(https://oss.wsdns.cn/20240607/dd18d6830ce541e69ad3ba12e2eed33f.jpeg); background-size: 100%; background-position: center">
      <ULandingCTA
        id="down"
        v-bind="page.cta"
        :card="false"
      />
    </ULandingSection>
    <ULandingSection
      id="faq"
      :title="page.faq.title"
      :description="page.faq.description"
      class="scroll-mt-[var(--header-height)]"
    >
      <ULandingFAQ
        multiple
        :items="page.faq.items"
        :ui="{
          button: {
            label: 'font-semibold',
            trailingIcon: {
              base: 'w-6 h-6'
            }
          }
        }"
        class="max-w-4xl mx-auto"
      />
    </ULandingSection>
  </div>
 </template>
--- a/content/index.yml
+++ b/content/index.yml
@ -0,0 +1,161 @@
 title: Nuxt UI Pro - Landing template
 description: Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.
 hero:
  title: 工匠基地
  description: 工匠基地
  headline:
    label: Made with Nuxt UI Pro
    to: https://ui.nuxt.com/pro
    icon: i-heroicons-arrow-top-right-on-square-20-solid
  links:
    - label: 立即使用
      icon: i-heroicons-arrow-right-20-solid
      trailing: true
      to: 'http://apps.wsdns.cn/7udtbs18'
      size: xl
 logos:
  title:
  icons:
 features:
  headline:
  title: 特色
  description:
  items:
    - title: 易于使用
      description: Id laborum laboris duis nostrud excepteur ut velit nulla magna Lorem proident non.
      icon: i-heroicons-cog
    - title: 免费
      description: Magna Lorem ex cillum fugiat ad enim aute irure sit duis minim.
      icon: i-heroicons-check
    - title: 交流互动
      description: Proident nostrud excepteur sint ut culpa consectetur aute adipisicing non anim ullamco.
      icon: i-heroicons-lock-closed
    - title: 学习神器
      description: Qui reprehenderit nostrud dolore nisi ad fugiat labore eiusmod sint aliquip nisi voluptate.
      icon: i-heroicons-rocket-launch
    - title: 可领补贴
      description: Reprehenderit fugiat elit in do ipsum ut pariatur.
      icon: i-heroicons-currency-dollar
    - title: 提升飞快
      description: Lorem deserunt et eiusmod. Ea in consectetur minim officia ullamco enim deserunt est.
      icon: i-heroicons-chart-bar
 pricing:
  headline: Pricing
  title: 选择合适您的方案
  description: .
  plans:
    - title: 免费版
      description: A basic plan for individuals.
      price: ￥0.00
      align: top
      button:
        label: Get Started
        color: gray
      features:
        - 1 GB Storage
        - 1 Email Account
        - 1 Domain
        - 1 Website
        - 1 Database
        - 1 SSL Certificate
        - 1 Support Ticket
    - title: 标准版
      description: A standard plan for small teams.
      price: ￥2999.99
      highlight: true
      scale: true
      align: top
      button:
        label: Get Started
      features:
        - 10 GB Storage
        - 10 Email Accounts
        - 10 Domains
        - 10 Websites
        - 10 Databases
        - 10 SSL Certificates
        - 10 Support Tickets
    - title: 企业版
      description: A premium plan for large teams.
      price: ￥9999.99
      align: top
      button:
        label: Get Started
        color: gray
      features:
        - 100 GB Storage
        - 100 Email Accounts
        - 100 Domains
        - 100 Websites
        - 100 Databases
        - 100 SSL Certificates
        - 100 Support Tickets
 testimonials:
  headline: Testimonials
  title: What our customers are saying.
  description: Proident sunt exercitation minim laborum enim laboris labore esse.
  items:
    - quote: Nostrud tempor sunt fugiat. Dolor in sint dolore labore non occaecat adipisicing Lorem labore ullamco enim excepteur. In fugiat Lorem sit velit id veniam esse eiusmod non ea voluptate cupidatat reprehenderit ullamco dolore. Mollit laborum occaecat aliquip.
      author:
        name: Rose Roberson
        description: CEO at Company
        avatar:
          src: https://i.pravatar.cc/120?img=1
          loading: lazy
    - quote: Eiusmod dolor aute ut nulla pariatur officia consequat aute amet exercitation.
      author:
        name: Chace Rodgers
        description: CEO at Company
        avatar:
          src: https://i.pravatar.cc/120?img=7
          loading: lazy
    - quote: Id duis velit enim officia ad nisi incididunt magna ex dolor minim deserunt dolor. Esse incididunt cillum nostrud esse do quis amet labore amet nulla eiusmod amet nulla Lorem. Incididunt ex voluptate irure officia laboris ea proident est qui.
      author:
        name: Cornelius Sheppard
        description: CEO at Company
        avatar:
          src: https://i.pravatar.cc/120?img=3
          loading: lazy
    - quote: Velit consectetur in adipisicing culpa eiusmod commodo eu ex dolore. Officia irure nisi dolor dolore velit fugiat. Aliqua sint aliqua aute elit eu sunt.
      author:
        name: Destinee Woods
        description: CEO at Company
        avatar:
          src: https://i.pravatar.cc/120?img=5
          loading: lazy
    - quote: Proident quis deserunt qui ex exercitation veniam id Lorem est cupidatat ipsum irure aliquip ad.
      author:
        name: Kaleb Mccormick
        description: CEO at Company
        avatar:
          src: https://i.pravatar.cc/120?img=8
          loading: lazy
    - quote: Magna officia quis ea ea in officia non voluptate ipsum culpa do labore sunt. Aute est dolore commodo sint officia ad laboris dolor magna aliquip exercitation tempor commodo.
      author:
        name: Jazmin Mccall
        description: CEO at Company
        avatar:
          src: https://i.pravatar.cc/120?img=9
          loading: lazy
 cta:
  title: 立即下载
  description: 立即下载使用
  links:
    - label: 立即下载
      size: xl
      to: 'http://apps.wsdns.cn/7udtbs18'
 faq:
  title: 常见问题
  description: 使用软件中的常见问题及用途
  items:
    - label: 使用软件对我有什么帮助?
      content: 使用软件对我有什么帮助.
      defaultOpen: true
    - label: 软件的使用都是免费的吗?
      content: 软件的使用都是免费的吗.
    - label: 账号怎么注册?
      content: 账号怎么注册.
    - label: 如何申请补贴?
      content: 如何申请补贴.
--- a/ecosystem.config.js
+++ b/ecosystem.config.js
@ -0,0 +1,11 @@
 module.exports = {
    apps: [
        {
            name: '工匠基地',
            port: '10189',
            exec_mode: 'cluster',
            instances: 'max',
            script: './.output/server/index.mjs'
        }
    ]
 }
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -0,0 +1,6 @@
 // @ts-check
 import withNuxt from './.nuxt/eslint.config.mjs'
 export default withNuxt(
  // Your custom configs here
 )
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -0,0 +1,40 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  modules: [
    '@nuxt/content',
    '@nuxt/eslint',
    '@nuxt/fonts',
    '@nuxt/image',
    '@nuxt/ui'
  ],
  routeRules: {
    // Temporary workaround for prerender regression. see https://github.com/nuxt/nuxt/issues/27490
    '/': { prerender: true }
  },
  devtools: {
    enabled: true
  },
  typescript: {
    strict: false
  },
  future: {
    compatibilityVersion: 4
  },
  eslint: {
    config: {
      stylistic: {
        commaDangle: 'never',
        braceStyle: '1tbs'
      }
    }
  },
  compatibilityDate: '2024-07-11'
 })
--- a/package.json
+++ b/package.json
@ -0,0 +1,29 @@
 {
  "name": "nuxt-ui-pro-template-landing",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint .",
    "typecheck": "nuxt typecheck"
  },
  "dependencies": {
    "@iconify-json/heroicons": "^1.1.24",
    "@iconify-json/simple-icons": "^1.1.112",
    "@nuxt/content": "^2.13.2",
    "@nuxt/fonts": "^0.7.1",
    "@nuxt/image": "^1.7.0",
    "@nuxt/ui-pro": "^1.4.1",
    "nuxt": "^3.12.4"
  },
  "devDependencies": {
    "@nuxt/eslint": "^0.5.0",
    "eslint": "^9.8.0",
    "vue-tsc": "^2.0.29"
  },
  "packageManager": "pnpm@9.3.0+sha512.ee7b93e0c2bd11409c6424f92b866f31d3ea1bef5fbe47d3c7500cdc3c9668833d2e55681ad66df5b640c61fa9dc25d546efa54d76d7f8bf54b13614ac293631"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/social-card.png
+++ b/public/social-card.png
--- a/renovate.json
+++ b/renovate.json
@ -0,0 +1,5 @@
 {
  "extends": [
    "github>nuxt/renovate-config-nuxt"
  ]
 }
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@ -0,0 +1,3 @@
 {
  "extends": "../.nuxt/tsconfig.server.json"
 }
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -0,0 +1,12 @@
 import type { Config } from 'tailwindcss'
 import defaultTheme from 'tailwindcss/defaultTheme'
 export default <Partial<Config>>{
  theme: {
    extend: {
      fontFamily: {
        sans: ['DM Sans', ...defaultTheme.fontFamily.sans]
      }
    }
  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,4 @@
 {
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
 }