@xenterprises/nuxt-x-marketing

@xenterprises/nuxt-x-marketing is a Nuxt.js layer designed specifically for creating marketing-centric sites. It provides a customizable layout and structure for marketing components such as headers, footers, and social links, allowing you to quickly set up a cohesive, branded marketing site.

Features

• Customizable UI: Configure primary UI elements such as colors, container layouts, and screen width.
• Header & Footer Configuration: Easily manage header and footer elements, including logos, navigation links, and social media icons.
• Project-specific Branding: Define project-specific settings such as project name, logos, and links for both the header and footer.
• Flexible Navigation and Social Links: Add buttons, links, and social media icons to header and footer sections.

Installation

1. Install the package via npm:

npm install @xenterprises/nuxt-x-marketing

2. Add the Layer to Your Nuxt Config

   In your nuxt.config.js or nuxt.config.ts file, import the @xenterprises/nuxt-x-marketing layer:

export default defineNuxtConfig({
  extends: "@xenterprises/nuxt-x-marketing",
});

3. Configure Your Project Settings

   Add configuration settings in your app.config.ts or app.config.js file to set up branding, navigation, and other customizable options.

export default defineAppConfig({
  ui: {
    primary: "sky",
    header: {
      container: "max-w-screen-2xl container mx-auto",
    },
  },
  xMarketing: {
    name: "X Enterprises",
    config: {
      markerProjectId: "project-1234",
    },
    header: {
      logo: {
        src: "/images/logo.png",
        alt: "X Enterprises",
      },
      nav: {
        buttons: [{ label: "Contact Us", to: "/contact" }],
        links: [{ label: "About", to: "/about" }],
      },
    },
    footer: {
      logo: {
        src: "/images/footer-logo.png",
        alt: "X Enterprises Footer Logo",
      },
      bg: {
        color: "#f3f3f3",
        img: {
          src: "/images/footer-bg.png",
          alt: "Footer Background Image",
        },
      },
      body: "© 2024 X Enterprises. All rights reserved.",
      socials: [
        {
          name: "Facebook",
          url: "https://facebook.com",
          icon: "facebook-icon",
        },
      ],
      columns: [
        {
          headerLabel: "Company",
          links: [{ label: "About Us", to: "/about" }],
        },
      ],
    },
  },
});

4. Run Your Nuxt Application

   Start your Nuxt application to see @xenterprises/nuxt-x-marketing in action:

npm run dev

Configuration Options

The following options are available for customization in the xMarketing layer configuration:

UI

Configure general UI settings for the app layout.

ui: {
  primary: "sky", // Primary color theme
  header: {
    container: "max-w-screen-2xl container mx-auto" // Maximum screen width for container
  }
}

xMarketing

Define the core marketing elements for your project under xMarketing.

xMarketing: {
  name: "X Enterprises", // Project name to display
  config: {
    markerProjectId: "", // Placeholder for your project ID if needed
  },

Header Configuration

Set up the header, including logo and navigation elements.

header: {
  logo: {
    src: "", // Source URL of the logo
    alt: "", // Alt text for the logo
  },
  nav: {
    buttons: [], // Array of buttons with `label` and `to` attributes
    links: [], // Array of navigation links with `label` and `to` attributes
  },
}

Footer Configuration

Define the footer layout, logo, background, and social links.

footer: {
  logo: {
    src: "", // Footer logo URL
    alt: "", // Footer logo alt text
  },
  bg: {
    color: "", // Background color for the footer
    img: {
      src: "", // Background image URL for the footer
      alt: "", // Alt text for the background image
    },
  },
  body: "", // Optional text for the footer
  socials: [], // Array of social media objects with `name`, `url`, and `icon`
  columns: [], // Footer columns with links
}

Example Configuration

Below is an example configuration for xMarketing:

export default defineAppConfig({
  ui: {
    primary: "sky",
    header: {
      container: "max-w-screen-2xl container mx-auto",
    },
  },
  xMarketing: {
    name: "X Enterprises",
    config: {
      markerProjectId: "project-1234",
    },
    header: {
      logo: {
        src: "/images/logo.png",
        alt: "X Enterprises",
      },
      nav: {
        buttons: [{ label: "Contact Us", to: "/contact" }],
        links: [{ label: "About", to: "/about" }],
      },
    },
    footer: {
      logo: {
        src: "/images/footer-logo.png",
        alt: "X Enterprises Footer Logo",
      },
      bg: {
        color: "#f3f3f3",
        img: {
          src: "/images/footer-bg.png",
          alt: "Footer Background Image",
        },
      },
      body: "© 2024 X Enterprises. All rights reserved.",
      socials: [
        {
          name: "Facebook",
          url: "https://facebook.com",
          icon: "facebook-icon",
        },
      ],
      columns: [
        {
          headerLabel: "Company",
          links: [{ label: "About Us", to: "/about" }],
        },
      ],
    },
  },
});

Additional Notes

• Icons for Socials: Icons should be referenced by name and sourced from your project’s icon library.
• Responsive Layouts: Use container and max-w-screen utilities for responsive designs.

License

This project is open-source and can be modified as per your project requirements.