Tutorials > Static Page

✨ Next Starter AI is loaded with awesome components to make crafting SEO-optimized pages (think snazzy landing pages) a breeze.

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

Head to the /libs/seo.js file – it's your secret weapon for boosting Google ranking. Don't forget to sprinkle in your own touch with customized SEO tags! 🌟

A simple landing page can done like below with ease:

/landing.tsx

    import { getSEOTags } from "@/libs/seo";

    export const metadata = getSEOTags({ canonicalUrlRelative: "/" });

    export default function Landing() {
    return (
        <>
        <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&apos;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>
        </>
    );
    }
    