Welcome.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <header>
  3. <h1 class="text-5xl font-medium">
  4. Welcome
  5. </h1>
  6. <p class="my-5">
  7. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est dolore aliquam exercitationem enim mollitia quam commodi tenetur in doloribus magni placeat modi accusantium debitis natus, necessitatibus aliquid sequi qui facere?
  8. </p>
  9. <img src="../assets/icon.png" class="w-32 h-32" />
  10. </header>
  11. <section class="mt-5 max-w-5xl mx-auto grid grid-cols-5 gap-5">
  12. <div class="flex flex-col col-span-3 gap-5">
  13. <NuxtLink to="https://nexajs.org" target="_blank" class="flex items-center gap-4 bg-gradient-to-r from-rose-500 to-rose-700 rounded-lg">
  14. <svg class="mx-5 w-32 h-32 text-rose-900" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
  15. <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"></path>
  16. </svg>
  17. <div>
  18. <h2 class="text-2xl text-rose-100 font-medium">
  19. Why Build on Nexa?
  20. </h2>
  21. <p class="text-rose-100">
  22. Nexa offers a premium Developer Experience (DX) that favors rapid iterations to get you deployed as quickly as possible.
  23. </p>
  24. </div>
  25. </NuxtLink>
  26. <NuxtLink to="https://nexajs.org" target="_blank" class="flex items-center gap-4 bg-gradient-to-r from-yellow-500 to-yellow-700 rounded-lg">
  27. <svg class="mx-5 w-32 h-32 text-yellow-900" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
  28. <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z"></path>
  29. </svg>
  30. <div>
  31. <h2 class="text-2xl text-yellow-100 font-medium">
  32. Check our more Examples
  33. </h2>
  34. <p class="text-yellow-100">
  35. The Nexa community offers ample examples to help you get started quickly using the industry's best practices.
  36. </p>
  37. </div>
  38. </NuxtLink>
  39. </div>
  40. <NuxtLink to="https://nexajs.org" target="_blank" class="col-span-2 py-3 flex flex-col items-center gap-2 bg-gradient-to-b from-sky-700 to-sky-500 rounded-lg">
  41. <div class="p-3 flex flex-col">
  42. <h2 class="text-3xl text-sky-100 font-medium text-center">
  43. Documentation
  44. </h2>
  45. <p class="mt-3 text-sky-100">
  46. Nexa offers excellent documentation that offers modern and up-to-date guides and tutorials for anything and everything you need.
  47. </p>
  48. </div>
  49. <svg class="mx-5 w-24 h-24 text-sky-900" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
  50. <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25M9 16.5v.75m3-3v3M15 12v5.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"></path>
  51. </svg>
  52. </NuxtLink>
  53. </section>
  54. </template>