Tutorials > Static Page

✨ Nuxt Starter AI is packed with fantastic components to simplify the creation of SEO-friendly pages (imagine stylish landing pages).

🎉 Everything you need is kept in the /components folder – from hero sections to pricing and FAQs. It's like a treasure chest full of building blocks! 🌈

Go to the /libs/seo.js file – It's your secret weapon for improving your Google ranking. Remember to add your own personal touch with customized SEO tags! 🌟

A simple landing page can made like below with in seconds with Nuxt Starter AI:

/pages/index.tsx

<template>
  <main
    className="min-h-screen p-12 pb-24 text-center"
    data-theme="dark"
  >
    <section className="max-w-xl mx-auto space-y-8">
    <h1 className="text-3xl md:text-4xl font-extrabold">
        AI Blogs you'll love 🥦
    </h1>

    <p className="text-lg leading-relaxed text-base-content/80">
        Our AI will generate blogs to improve your SEO based on your preferences.
    </p>

    <img
        src="https://images.unsplash.com/photo-1432821596592-e2c18b78144f?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Blog Post"
        width={500}
        height={250}
        className="rounded-lg mx-auto"
    />

    <button className="btn btn-primary btn-wide">Get started</button>
    </section>
  </main>
</template>

<script lang="ts" setup>
import { getSEOTags } from "@/libs/seo";

useHead(getSEOTags({ canonicalUrlRelative: "/" }))

</script>
<style></style>