GuidesStatic Pages

PullTheCode comes with tons of components to help you build static SEO-optimized pages (like a landing page) out of the box.

The /src/app/components/ui folder contains all the graphic components you need to build your static pages, and more. You will also find the layout wrappers, you can use them or add more based on your liking.

In the /src/app/components/analytics you will find the snippets to add Google Analytics and Hotjar to your site, I will soon add more.

A simple landing page would look like this:

  import {Metadata} from "next";
  import {handleStaticMetaData} from "@/helpers/common/metadata.helpers";
  import Layout from "@/components/ui/Layout";
  import Image from "next/image";

    // you can have defaults in the handleStaticMetadata function or declare custom metadata here, here are some examples:
  export const metadata: Metadata = handleStaticMetaData({
    title: 'YourWebsite | A 50-60 characters long title',
    description: 'Your description should always be between 75-160 characters long',
    images: 'https://your_website_url.com/logos/logo.svg'
  })
  
  const Page = () => {
    return (
      <Layout>
        <section className="bg-base-200 overflow-hidden pt-24 pb-36 min-h-screen">
          <div className="pb-0 px-8 max-w-7xl mx-auto">
            <div className="grid grid-cols-12 gap-8 items-center">
              <div className="col-span-4">
                <Image
                  src="/generic/example-image.png"
                  alt="Vegetables"
                  width={500}
                  height={250}
                  className="rounded-lg mx-auto"
                />
              </div>
  
              <div className="col-span-8 text-center">
                <h1 className="text-3xl md:text-4xl font-extrabold mb-2">
                  Welcome to <span className="text-primary-content bg-primary px-1">SAMPLE</span>
                </h1>
  
                <p className="text-lg leading-relaxed text-base-content/80 mb-4">
                  Our AI generate a unique meme for each occasion
                </p>
  
                <button className="btn btn-primary btn-wide">Get started</button>
              </div>
            </div>
          </div>
        </section>
      </Layout>
    );
  };
  
  export default Page;