@xenterprises/nuxt-x-marketing 0.0.3 → 0.0.4

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/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,74 @@
 <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" />
+									<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 -m-1.5 gap-2">
+									<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.4",
   "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>