@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

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

@@ -2,45 +2,82 @@
   <footer
     class="bg-gray-900 text-gray-400 text-xs relative overflow-visible pt-2"
   >
-    <a href="https://x.enterprises" target="_blank">
+    <a v-if="resolvedLogo.src" :href="resolvedLogo.href" target="_blank">
       <img
-        src="https://cdn.x.enterprises/logo-x.png"
-        alt="X Enterprises"
+        :src="resolvedLogo.src"
+        :alt="resolvedLogo.alt"
         class="h-6 w-6 mx-auto -mt-4 relative z-10"
       />
     </a>
     <main
-      class="flex flex-row justify-between items-center px-6 pt-3 pb-5 max-w-screen-2xl mx-auto"
+      class="flex flex-col md:flex-row justify-between items-center px-6 pt-3 pb-5 max-w-screen-2xl mx-auto gap-4"
     >
-      <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 class="text-center md:text-left">
+        {{ resolvedCopyright }}
       </div>
 
-      <div class="text-center md:text-right flex gap-4">
+      <nav v-if="resolvedLinks.length" class="text-center md:text-right flex flex-wrap justify-center gap-4">
         <a
-          href="https://x.enterprises/legal/terms"
+          v-for="link in resolvedLinks"
+          :key="link.label"
+          :href="link.href"
           class="hover:underline"
           target="_blank"
         >
-          Terms of Service
+          {{ link.label }}
         </a>
-        <a
-          href="https://x.enterprises/legal/privacy-policy"
-          class="ml-4 hover:underline"
-          target="_blank"
-        >
-          Privacy Policy
-        </a>
-        <a
-          href="https://x.enterprises/legal/cookie-policy"
-          class="ml-4 hover:underline"
-          target="_blank"
-        >
-          Cookie Policy
-        </a>
-      </div>
+      </nav>
     </main>
   </footer>
 </template>
-<script setup></script>
+
+<script setup>
+const props = defineProps({
+  /** Copyright text (defaults to X Enterprises) */
+  copyright: {
+    type: String,
+    default: '',
+  },
+  /** Legal links array [{ label, href }] (defaults to X Enterprises legal pages) */
+  links: {
+    type: Array,
+    default: null,
+  },
+  /** Logo object { src, alt, href } (defaults to X Enterprises logo) */
+  logo: {
+    type: Object,
+    default: null,
+  },
+});
+
+// Default X Enterprises values
+const defaultLogo = {
+  src: 'https://cdn.x.enterprises/logo-x.png',
+  alt: 'X Enterprises',
+  href: 'https://x.enterprises',
+};
+
+const defaultLinks = [
+  { label: 'Terms of Service', href: 'https://x.enterprises/legal/terms' },
+  { label: 'Privacy Policy', href: 'https://x.enterprises/legal/privacy-policy' },
+  { label: 'Cookie Policy', href: 'https://x.enterprises/legal/cookie-policy' },
+];
+
+const defaultCopyright = `Copyright ©2016-${new Date().getFullYear()} X Enterprises, LLC. All Rights Reserved.`;
+
+// Resolved values with defaults
+const resolvedLogo = computed(() => {
+  if (props.logo === null) return defaultLogo;
+  if (props.logo === false) return { src: '', alt: '', href: '' };
+  return { ...defaultLogo, ...props.logo };
+});
+
+const resolvedLinks = computed(() => {
+  if (props.links === null) return defaultLinks;
+  return props.links;
+});
+
+const resolvedCopyright = computed(() => {
+  return props.copyright || defaultCopyright;
+});
+</script>

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

@@ -1,93 +1,93 @@
 <template>
-  <div>
-    <XMarketingSectionsEmailSubscription
-      :organizationId="
-        appConfig?.xMarketing?.config?.emailMarketingNewsletters?.organizationId
-      "
-      v-if="
-        appConfig?.xMarketing?.config?.emailMarketingNewsletters?.organizationId
-      "
-    />
-    <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="footer?.bg?.img?.src"
-        :alt="footer?.bg?.img?.alt"
-        v-if="footer?.bg?.img?.src"
-      />
-      <div
-        class="relative z-10 container mx-auto max-w-screen-2xl px-4 md:px-8"
-      >
-        <div class="pb-24">
-          <div
-            class="flex flex-col lg:flex-row lg:justify-between gap-8 lg:gap-12"
-          >
-            <div class="shrink-0 lg:max-w-xl">
-              <a class="mb-8 inline-block" href="/">
-                <img
-                  :src="footer?.logo?.src"
-                  :alt="footer?.logo?.alt"
-                  class="h-6"
-                />
-              </a>
-              <p
-                class="mb-8 text-gray-400 font-medium leading-relaxed max-w-lg mx-auto lg:mx-0"
-              >
-                {{ footer?.body }}
-              </p>
-              <div class="flex flex-row flex-wrap gap-2 justify-start">
-                <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"
-                  >
-                  </UButton>
-                </div>
-                <UColorModeButton />
-              </div>
-            </div>
-            <div
-              class="flex flex-col sm:flex-row gap-8 lg:gap-12 lg:justify-end"
-            >
-              <div
-                class="text-left sm:text-right"
-                v-for="(column, index) in footer.columns"
-                :key="index"
-              >
-                <h3
-                  class="mb-6 text-sm text-gray-500 uppercase font-semibold leading-normal tracking-wide"
-                >
-                  {{ column?.headerLabel }}
-                </h3>
-                <ul class="space-y-4">
-                  <li v-for="link in column?.links" :key="link?.label">
-                    <nuxt-link
-                      :to="link?.to"
-                      :target="link?.target ? link?.target : '_self'"
-                      class="text-white hover:text-gray-300 font-medium leading-relaxed transition-colors"
-                      >{{ link?.label }}</nuxt-link
-                    >
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  </div>
+	<div>
+		<XMarkSectionNewsletter
+			v-if="
+				appConfig?.xMarketing?.config?.emailMarketingNewsletters?.organizationId
+			"
+			title="Subscribe to our newsletter"
+			description="Get the latest news and updates."
+			@submit="(email) => console.log('Newsletter signup:', email)"
+		/>
+		<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="footer?.bg?.img?.src"
+				:alt="footer?.bg?.img?.alt"
+				v-if="footer?.bg?.img?.src"
+			/>
+			<div
+				class="relative z-10 container mx-auto max-w-screen-2xl px-4 md:px-8"
+			>
+				<div class="pb-24">
+					<div
+						class="flex flex-col lg:flex-row lg:justify-between gap-8 lg:gap-12"
+					>
+						<div class="shrink-0 lg:max-w-xl">
+							<a class="mb-8 inline-block" href="/">
+								<img
+									:src="footer?.logo?.src"
+									:alt="footer?.logo?.alt"
+									class="h-6"
+								/>
+							</a>
+							<p
+								class="mb-8 text-gray-400 font-medium leading-relaxed max-w-lg mx-auto lg:mx-0"
+							>
+								{{ footer?.body }}
+							</p>
+							<div class="flex flex-row flex-wrap gap-2 justify-start">
+								<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"
+									>
+									</UButton>
+								</div>
+								<UColorModeButton />
+							</div>
+						</div>
+						<div
+							class="flex flex-col sm:flex-row gap-8 lg:gap-12 lg:justify-end"
+						>
+							<div
+								class="text-left sm:text-right"
+								v-for="(column, index) in footer.columns"
+								:key="index"
+							>
+								<h3
+									class="mb-6 text-sm text-gray-500 uppercase font-semibold leading-normal tracking-wide"
+								>
+									{{ column?.headerLabel }}
+								</h3>
+								<ul class="space-y-4">
+									<li v-for="link in column?.links" :key="link?.label">
+										<nuxt-link
+											:to="link?.to"
+											:target="link?.target ? link?.target : '_self'"
+											class="text-white hover:text-gray-300 font-medium leading-relaxed transition-colors"
+											>{{ link?.label }}</nuxt-link
+										>
+									</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</div>
 </template>
 <script setup>
 const appConfig = useAppConfig();

package/app/components/X/Header/App.vue

@@ -0,0 +1,63 @@
+<template>
+	<UHeader
+		:ui="{
+			root: headerClasses,
+		}"
+	>
+		<template #left>
+			<UNavigationMenu :items="navLinks" />
+		</template>
+
+		<template #center>
+			<NuxtLink to="/" class="flex items-center">
+				<slot name="logo">
+					<span class="text-xl font-bold">LOGO</span>
+				</slot>
+			</NuxtLink>
+		</template>
+
+		<template #right>
+			<UButton
+				v-if="secondaryCta"
+				:to="secondaryCta.to"
+				variant="ghost"
+				color="neutral"
+				:label="secondaryCta.label"
+			/>
+			<UButton
+				v-if="primaryCta"
+				:to="primaryCta.to"
+				variant="solid"
+				color="primary"
+				:label="primaryCta.label"
+			/>
+		</template>
+	</UHeader>
+</template>
+
+<script setup>
+const props = defineProps({
+	navLinks: {
+		type: Array,
+		default: () => [],
+	},
+	primaryCta: {
+		type: Object,
+		default: null,
+	},
+	secondaryCta: {
+		type: Object,
+		default: null,
+	},
+	transparent: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const headerClasses = computed(() => {
+	return props.transparent
+		? "bg-transparent text-white"
+		: "bg-white dark:bg-deep-950";
+});
+</script>

package/app/components/X/Mark/Blog/Author.vue

@@ -0,0 +1,170 @@
+<template>
+	<!-- Inline / Small variant -->
+	<div
+		v-if="variant === 'inline' || variant === 'sm'"
+		class="flex items-center gap-3"
+	>
+		<figure>
+			<img
+				v-if="author.avatar"
+				:src="author.avatar"
+				:alt="author.name"
+				:class="[
+					'rounded-full object-cover',
+					variant === 'sm' ? 'w-8 h-8' : 'w-10 h-10'
+				]"
+			/>
+			<div
+				v-else
+				:class="[
+					'rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center',
+					variant === 'sm' ? 'w-8 h-8' : 'w-10 h-10'
+				]"
+			>
+				<span class="text-primary-600 dark:text-primary-400 font-medium">
+					{{ author.name?.charAt(0) }}
+				</span>
+			</div>
+		</figure>
+		<div>
+			<p class="font-medium text-neutral-900 dark:text-white">
+				{{ author.name }}
+			</p>
+			<p v-if="author.title" class="text-sm text-neutral-500">
+				{{ author.title }}
+			</p>
+		</div>
+	</div>
+
+	<!-- Full Bio variant -->
+	<div
+		v-else-if="variant === 'full'"
+		class="flex flex-col sm:flex-row gap-6 p-6 rounded-2xl bg-neutral-100 dark:bg-neutral-900"
+	>
+		<figure class="flex-shrink-0">
+			<img
+				v-if="author.avatar"
+				:src="author.avatar"
+				:alt="author.name"
+				class="w-20 h-20 rounded-full object-cover"
+			/>
+			<div
+				v-else
+				class="w-20 h-20 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"
+			>
+				<span class="text-primary-600 dark:text-primary-400 font-medium text-2xl">
+					{{ author.name?.charAt(0) }}
+				</span>
+			</div>
+		</figure>
+		<div class="flex-1">
+			<p class="font-semibold text-lg text-neutral-900 dark:text-white">
+				{{ author.name }}
+			</p>
+			<p v-if="author.title" class="text-sm text-neutral-500 mb-3">
+				{{ author.title }}
+			</p>
+			<p v-if="author.bio" class="text-neutral-600 dark:text-neutral-400">
+				{{ author.bio }}
+			</p>
+
+			<!-- Social Links -->
+			<div v-if="hasSocialLinks" class="flex gap-2 mt-4">
+				<UButton
+					v-for="(url, platform) in author.social"
+					:key="platform"
+					:to="url"
+					:icon="getSocialIcon(platform)"
+					variant="ghost"
+					color="neutral"
+					size="sm"
+					target="_blank"
+					:aria-label="platform"
+				/>
+			</div>
+		</div>
+	</div>
+
+	<!-- Card variant -->
+	<div
+		v-else-if="variant === 'card'"
+		class="text-center p-6 rounded-2xl bg-neutral-100 dark:bg-neutral-900"
+	>
+		<figure class="mx-auto mb-4">
+			<img
+				v-if="author.avatar"
+				:src="author.avatar"
+				:alt="author.name"
+				class="w-24 h-24 rounded-full object-cover mx-auto ring-4 ring-white dark:ring-neutral-800"
+			/>
+			<div
+				v-else
+				class="w-24 h-24 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mx-auto"
+			>
+				<span class="text-primary-600 dark:text-primary-400 font-medium text-3xl">
+					{{ author.name?.charAt(0) }}
+				</span>
+			</div>
+		</figure>
+		<p class="font-semibold text-lg text-neutral-900 dark:text-white">
+			{{ author.name }}
+		</p>
+		<p v-if="author.title" class="text-sm text-neutral-500 mt-1">
+			{{ author.title }}
+		</p>
+		<p v-if="author.bio" class="text-sm text-neutral-600 dark:text-neutral-400 mt-3">
+			{{ author.bio }}
+		</p>
+
+		<!-- Social Links -->
+		<div v-if="hasSocialLinks" class="flex justify-center gap-2 mt-4">
+			<UButton
+				v-for="(url, platform) in author.social"
+				:key="platform"
+				:to="url"
+				:icon="getSocialIcon(platform)"
+				variant="soft"
+				color="neutral"
+				size="sm"
+				target="_blank"
+				:aria-label="platform"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Author object */
+	author: {
+		type: Object,
+		required: true,
+		// { name, avatar?, title?, bio?, social?: { twitter?, linkedin?, github?, website? } }
+	},
+	/** Display variant */
+	variant: {
+		type: String,
+		default: 'inline',
+		validator: (v) => ['inline', 'sm', 'full', 'card'].includes(v),
+	},
+});
+
+const hasSocialLinks = computed(() => {
+	return props.author.social && Object.keys(props.author.social).length > 0;
+});
+
+const getSocialIcon = (platform) => {
+	const icons = {
+		twitter: 'i-lucide-twitter',
+		x: 'i-lucide-twitter',
+		linkedin: 'i-lucide-linkedin',
+		github: 'i-lucide-github',
+		website: 'i-lucide-globe',
+		instagram: 'i-lucide-instagram',
+		facebook: 'i-lucide-facebook',
+		youtube: 'i-lucide-youtube',
+		email: 'i-lucide-mail',
+	};
+	return icons[platform.toLowerCase()] || 'i-lucide-link';
+};
+</script>