@xenterprises/nuxt-x-marketing 0.0.3 → 0.0.5

package/.playground/app.config.ts

@@ -4,8 +4,38 @@ export default defineAppConfig({
     config: {
       markerProjectId: "67191169861c84dffad87d71",
     },
+    header: {
+      logo: {
+        src: "https://cdn.x.enterprises/logo-x.png",
+        alt: "X Enterprises",
+      },
+      nav: {
+        buttons: [
+          {
+            label: "Get Started",
+            to: "/get-started",
+          },
+        ],
+        links: [
+          {
+            label: "Home",
+            to: "/",
+          },
+        ],
+      },
+    },
     footer: {
-      logo: "https://cdn.x.enterprises/logo-x.png",
+      logo: {
+        src: "https://cdn.x.enterprises/logo-x.png",
+        alt: "",
+      },
+      bg: {
+        color: "",
+        img: {
+          src: "https://cdn.x.enterprises/bg-gradient.svg",
+          alt: "Gradient background",
+        },
+      },
       body: "Rock Your Band's World with Bandmate - the all-in-one platform	designed to streamline your band's management, collaboration,	and growth. Stay connected, stay inspired, and keep rocking	with Bandmate! Follow us on social media and join our	newsletter for the latest updates, tips, and industry news.	Let's make music together!",
       socials: [
         {
@@ -16,19 +46,19 @@ export default defineAppConfig({
       ],
       columns: [
         {
-          name: "Product",
+          headerLabel: "Products",
           links: [
             {
-              name: "Features",
-              url: "/features",
+              label: "Features",
+              to: "/features",
             },
             {
-              name: "Pricing",
-              url: "/pricing",
+              label: "Pricing",
+              to: "/pricing",
             },
             {
-              name: "Customers",
-              url: "/customers",
+              label: "Customers",
+              to: "/customers",
             },
           ],
         },

package/.playground/nuxt.config.ts

@@ -1,5 +1,5 @@
 export default defineNuxtConfig({
-  extends: [["..", { install: true }], "@nuxt/ui-pro"],
-  modules: ["@nuxt/ui"],
+  extends: [["..", { install: true }]],
+
   compatibilityDate: "2024-10-23",
 });

package/.playground/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>🌮 Hola</div>
+	<div></div>
 </template>
 <script setup>
 </script>

package/README.md

@@ -1,73 +1,230 @@
-# Nuxt Layer Starter
+# @xenterprises/nuxt-x-marketing
 
-Create Nuxt extendable layer with this GitHub template.
+`@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.
 
-## Setup
+## Features
 
-Make sure to install the dependencies:
+- **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**:
 
 ```bash
-pnpm install
+npm install @xenterprises/nuxt-x-marketing
 ```
 
-## Working on your layer
-
-Your layer is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.
+2. **Add the Layer to Your Nuxt Config**
 
-The `.playground` directory should help you on trying your layer during development.
+   In your `nuxt.config.js` or `nuxt.config.ts` file, import the `@xenterprises/nuxt-x-marketing` layer:
 
-Running `pnpm dev` will prepare and boot `.playground` directory, which imports your layer itself.
+```javascript
+export default defineNuxtConfig({
+  extends: "@xenterprises/nuxt-x-marketing",
+});
+```
 
-## Distributing your layer
+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.
+
+```javascript
+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" }],
+        },
+      ],
+    },
+  },
+});
+```
 
-Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.
+4. **Run Your Nuxt Application**
 
-To do so, you only have to check if `files` in `package.json` are valid, then run:
+   Start your Nuxt application to see `@xenterprises/nuxt-x-marketing` in action:
 
 ```bash
-npm publish --access public
+npm run dev
 ```
 
-Once done, your users will only have to run:
+## Configuration Options
 
-```bash
-npm install --save your-layer
-```
+The following options are available for customization in the `xMarketing` layer configuration:
 
-Then add the dependency to their `extends` in `nuxt.config`:
+### UI
 
-```ts
-defineNuxtConfig({
-  extends: 'your-layer'
-})
+Configure general UI settings for the app layout.
+
+```javascript
+ui: {
+  primary: "sky", // Primary color theme
+  header: {
+    container: "max-w-screen-2xl container mx-auto" // Maximum screen width for container
+  }
+}
 ```
 
-## Development Server
+### xMarketing
 
-Start the development server on http://localhost:3000
+Define the core marketing elements for your project under `xMarketing`.
 
-```bash
-pnpm dev
+```javascript
+xMarketing: {
+  name: "X Enterprises", // Project name to display
+  config: {
+    markerProjectId: "", // Placeholder for your project ID if needed
+  },
 ```
 
-## Production
-
-Build the application for production:
-
-```bash
-pnpm build
+#### Header Configuration
+
+Set up the header, including logo and navigation elements.
+
+```javascript
+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
+  },
+}
 ```
 
-Or statically generate it with:
+#### Footer Configuration
+
+Define the footer layout, logo, background, and social links.
+
+```javascript
+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
+}
+```
 
-```bash
-pnpm generate
+### Example Configuration
+
+Below is an example configuration for `xMarketing`:
+
+```javascript
+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" }],
+        },
+      ],
+    },
+  },
+});
 ```
 
-Locally preview production build:
+### Additional Notes
 
-```bash
-pnpm preview
-```
+- **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
 
-Checkout the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+This project is open-source and can be modified as per your project requirements.

package/app.config.ts

@@ -1,11 +1,37 @@
 export default defineAppConfig({
+  ui: {
+    primary: "sky",
+    header: {
+      container: "max-w-screen-2xl container mx-auto",
+    },
+  },
   xMarketing: {
     name: "X Enterprises",
     config: {
       markerProjectId: "",
     },
+    header: {
+      logo: {
+        src: "",
+        alt: "",
+      },
+      nav: {
+        buttons: [],
+        links: [],
+      },
+    },
     footer: {
-      logo: "",
+      logo: {
+        src: "",
+        alt: "",
+      },
+      bg: {
+        color: "",
+        img: {
+          src: "",
+          alt: "",
+        },
+      },
       body: "",
       socials: [],
       columns: [],
@@ -21,19 +47,45 @@ declare module "@nuxt/schema" {
       config?: {
         markerProjectId?: string;
       };
+      header?: {
+        logo?: {
+          src?: string;
+          alt?: string;
+        };
+        nav?: {
+          buttons?: {
+            label: string;
+            to: string;
+          }[];
+          links?: {
+            label: string;
+            to: string;
+          }[];
+        };
+      };
       footer?: {
         body?: string;
-        logo?: string;
+        bg?: {
+          color?: string;
+          img?: {
+            src?: string;
+            alt?: string;
+          };
+        };
+        logo?: {
+          src?: string;
+          alt?: string;
+        };
         socials?: {
           name: string;
           url: string;
           icon: string;
         }[];
         columns?: {
-          name: string;
+          headerLabel: string;
           links: {
-            name: string;
-            url: string;
+            label: string;
+            to: string;
           }[];
         }[];
       };

package/app.vue

@@ -1,5 +1,6 @@
 <template>
 	<main class="min-h-screen flex flex-col justify-between">
+		<XHeaderNav />
 		<section class="flex-grow">
 			<NuxtLoadingIndicator />
 			<NuxtLayout>

package/components/X/Footer/XLegal/index.vue

@@ -2,20 +2,22 @@
 	<footer
 		class="bg-gray-900 text-gray-400 text-xs relative overflow-visible pt-2"
 	>
-		<img
-			src="https://cdn.x.enterprises/logo-x.png"
-			alt="X Enterprises"
-			class="h-6 w-6 mx-auto -mt-5 relative z-10"
-		/>
+		<a href="https://x.enterprises" target="_blank">
+			<img
+				src="https://cdn.x.enterprises/logo-x.png"
+				alt="X Enterprises"
+				class="h-6 w-6 mx-auto -mt-5 relative z-10"
+			/>
+		</a>
 		<main
-			class="flex flex-col md:flex-row justify-between items-center px-6 pt-3 pb-5"
+			class="flex flex-col md:flex-row justify-between items-center px-6 pt-3 pb-5 max-w-screen-2xl mx-auto"
 		>
-			<div>
+			<div class="pb-4 md:pb-0 text-center md:text-left">
 				Copyright &copy;2016-{{ new Date().getFullYear() }} X Enterprises, LLC.
 				All Rights Reserved.
 			</div>
 
-			<div class="text-right">
+			<div class="text-center md:text-right pb-14 md:pb-0">
 				<a
 					href="https://x.enterprises/legal/terms"
 					class="hover:underline"

package/components/X/Footer/index.vue

@@ -1,79 +1,76 @@
 <template>
 	<div>
-		<section class="relative pt-24 bg-black overflow-hidden">
+		<section
+			class="relative pt-24 overflow-hidden"
+			:class="footer?.bg?.color ? footer?.bg?.color : 'bg-gray-900'"
+		>
 			<img
 				class="absolute left-1/2 bottom-0 h-full transform -translate-x-1/2"
-				src="/flaro-assets/images/footers/gradient.svg"
-				alt=""
+				:src="footer?.bg?.img?.src"
+				:alt="footer?.bg?.img?.alt"
+				v-if="footer?.bg?.img?.src"
 			/>
-			<div class="relative z-10 container px-4 mx-auto">
+			<div class="relative z-10 container mx-auto max-w-screen-2xl">
 				<div class="pb-24 border-b border-gray-900">
-					<div class="flex flex-wrap -m-8">
-						<div class="w-full sm:w-1/2 lg:w-6/12 p-8">
+					<div class="flex flex-wrap justify-between">
+						<div class="w-full sm:w-1/2 lg:w-6/12 p-4 md:p-8">
 							<div class="lg:max-w-xl">
-								<a class="mb-8 inline-block" href="#">
-									<img :src="footer?.logo" alt="" class="h-6" />
+								<a class="mb-8 inline-block" href="/">
+									<img
+										:src="footer?.logo?.src"
+										:alt="footer?.logo?.alt"
+										class="h-6"
+									/>
 								</a>
 								<p
 									class="mb-20 text-gray-400 font-medium leading-relaxed md:max-w-7xl"
 								>
 									{{ footer?.body }}
 								</p>
-								<div class="flex flex-wrap -m-1.5">
-									<div class="w-auto p-1.5">
-										<span
-											v-for="(social, index) in footer?.socials"
-											:key="index"
+								<div
+									class="flex flex-row flex-wrap gap-2 justify-center md:justify-start md:-m-1.5"
+								>
+									<div
+										class="w-auto"
+										v-for="(social, index) in footer?.socials"
+										:key="index"
+									>
+										<UButton
+											:to="social.url"
+											:icon="social?.icon"
+											:alt="social?.name"
+											color="gray"
+											square
+											target="_blank"
+											variant="ghost"
 										>
-											<a :href="social.url" target="_blank">
-												<UIcon
-													:name="social?.icon"
-													class="w-5 h-5"
-													:alt="social?.name"
-												/>
-											</a>
-										</span>
+										</UButton>
 									</div>
+									<UColorModeButton />
 								</div>
 							</div>
 						</div>
 						<div class="w-full sm:w-1/2 lg:w-2/12 p-8"></div>
 						<div
-							class="w-full sm:w-1/2 lg:w-2/12 p-8"
+							class="w-full sm:w-1/2 lg:w-2/12 p-8 text-center md:text-right"
 							v-for="(column, index) in footer.columns"
 							:key="index"
 						>
 							<h3
 								class="mb-8 text-sm text-gray-600 uppercase font-semibold leading-normal tracking-px"
 							>
-								{{ column?.name }}
+								{{ column?.headerLabel }}
 							</h3>
 							<ul>
-								<li class="mb-5">
-									<nuxt-link
-										to="/features"
-										class="text-white hover:text-gray-200 font-medium leading-relaxed"
-										>Features</nuxt-link
-									>
-								</li>
-								<li class="mb-5">
-									<nuxt-link
-										to="/who-its-for"
-										class="text-white hover:text-gray-200 font-medium leading-relaxed"
-										>Who It's For</nuxt-link
-									>
-								</li>
-								<li class="mb-5">
-									<nuxt-link
-										to="/faqs"
-										class="text-white hover:text-gray-200 font-medium leading-relaxed"
-										>FAQs</nuxt-link
-									>
-								</li>
-								<li>
+								<li
+									class="mb-5"
+									v-for="link in column?.links"
+									:key="link?.label"
+								>
 									<nuxt-link
+										:to="link?.to"
 										class="text-white hover:text-gray-200 font-medium leading-relaxed"
-										>Articles</nuxt-link
+										>{{ link?.label }}</nuxt-link
 									>
 								</li>
 							</ul>

package/components/X/Header/Nav/index.vue

@@ -0,0 +1,38 @@
+<template>
+	<UHeader :links="links">
+		<template #logo>
+			<img
+				:src="header?.logo?.src"
+				:alt="header?.logo?.alt"
+				class="h-8"
+				v-if="header?.logo?.src"
+			/>
+			<span v-else>{{ header?.logo?.alt }}</span>
+		</template>
+
+		<template #right>
+			<span v-for="(button, index) in header?.nav?.buttons" :key="index"
+				><UButton class="hidden md:block py-2" :to="button?.to">{{
+					button?.label
+				}}</UButton></span
+			>
+		</template>
+
+		<template #panel>
+			<UNavigationTree :links="links" />
+			<span v-for="(button, index) in header?.nav?.buttons" :key="index"
+				><UButton
+					class="md:hidden mt-5 py-2 w-full flex flex-row justify-center"
+					:to="button?.to"
+					>{{ button?.label }}</UButton
+				></span
+			>
+		</template>
+	</UHeader>
+</template>
+
+<script setup>
+const appConfig = useAppConfig();
+const header = appConfig?.xMarketing?.header;
+const links = header?.nav?.links || [];
+</script>

package/composables/useXBlog.ts

@@ -0,0 +1,11 @@
+export function useXBlog() {
+  const config = useRuntimeConfig();
+  const endpoint = config.public.apiURL + "/general";
+  const get = async () => {
+    const general = await $fetch(endpoint);
+    return general;
+  };
+  return {
+    get,
+  };
+}

package/nuxt.config.ts

@@ -1,6 +1,8 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
+  extends: ["@nuxt/ui-pro"],
+  modules: ["@nuxt/ui"],
   ui: {
     icons: ["heroicons", "simple-icons"],
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xenterprises/nuxt-x-marketing",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -11,14 +11,14 @@
     "preview": "nuxt preview .playground"
   },
   "devDependencies": {
-    "@nuxt/ui": "^2.18.7",
-    "@nuxt/ui-pro": "^1.4.4",
     "nuxt": "^3.13.2",
     "typescript": "^5.6.3",
     "vue": "latest"
   },
   "dependencies": {
     "@marker.io/browser": "^0.19.0",
-    "simple-icons": "^13.15.0"
+    "simple-icons": "^13.15.0",
+    "@nuxt/ui": "^2.18.7",
+    "@nuxt/ui-pro": "^1.4.4"
   }
 }

package/pages/blog/index.vue

@@ -0,0 +1,10 @@
+<template>
+	<div class="max-w-screen-2xl mx-auto px-4 md:px-8">
+		<UPageHero
+			title="Blog"
+			description="Read the latest articles from our blog."
+		/>
+	</div>
+</template>
+<script setup>
+</script>