@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

package/app/app.config.ts

@@ -1,9 +1,31 @@
 export default defineAppConfig({
   ui: {
-    primary: "sky",
+    primary: "brand",
     header: {
       container: "max-w-screen-2xl container mx-auto",
     },
+    colors: {
+      primary: "brand",
+      secondary: "deep",
+      neutral: "zinc",
+    },
+    button: {
+      slots: {
+        base: "font-medium tracking-wide",
+      },
+      variants: {
+        size: {
+          lg: "px-8 py-4 text-base",
+          xl: "px-10 py-5 text-lg",
+        },
+      },
+    },
+    card: {
+      slots: {
+        root: "overflow-hidden",
+        body: "p-0",
+      },
+    },
   },
   xMarketing: {
     name: "X Enterprises",
@@ -82,11 +104,75 @@ declare module "@nuxt/schema" {
             square?: boolean;
             color?: string;
           }[];
-          links?: {
+          links?: NavLink[];
+        };
+      };
+      footer?: {
+        body?: string;
+        bg?: {
+          color?: string;
+          img?: {
+            src?: string;
+            alt?: string;
+          };
+        };
+        logo?: {
+          src?: string;
+          alt?: string;
+        };
+        socials?: {
+          name: string;
+          url: string;
+          icon: string;
+        }[];
+        columns?: {
+          headerLabel: string;
+          links: {
             label: string;
             to: string;
             target?: string;
           }[];
+        }[];
+      };
+    };
+  }
+}
+
+interface NavLink {
+  label: string;
+  to?: string;
+  target?: string;
+  children?: NavLink[];
+}
+
+declare module "@nuxt/schema" {
+  interface AppConfigInput {
+    xMarketing?: {
+      /** Project name */
+      name?: string;
+      config?: {
+        markerProjectId?: string;
+        emailMarketingNewsletters?: {
+          organizationId?: string;
+        };
+      };
+      header?: {
+        logo?: {
+          src?: string;
+          srcDark?: string;
+          alt?: string;
+        };
+        nav?: {
+          buttons?: {
+            label: string;
+            to: string;
+            icon?: string;
+            target?: string;
+            variant?: string;
+            square?: boolean;
+            color?: string;
+          }[];
+          links?: NavLink[];
         };
       };
       footer?: {

package/app/app.vue

@@ -1,31 +1,126 @@
 <template>
-  <main class="min-h-screen flex flex-col justify-between">
-    <XHeaderNav />
-    <section class="flex-grow">
+  <div class="min-h-screen flex flex-col">
+    <!-- Navbar -->
+    <XMarkNavbar
+      :links="navLinks"
+      :logo-light="logoLight"
+      :logo-dark="logoDark"
+      logo-alt="Company"
+    >
+      <template #actions>
+        <UButton variant="ghost" color="neutral">Sign In</UButton>
+        <UButton color="primary">Get Started</UButton>
+      </template>
+    </XMarkNavbar>
+
+    <!-- Main Content -->
+    <main class="flex-grow">
       <NuxtLoadingIndicator />
       <UApp>
         <NuxtLayout>
           <NuxtPage />
         </NuxtLayout>
       </UApp>
-    </section>
-    <section>
-      <XFooter />
-      <XFooterXLegal />
-    </section>
-  </main>
+    </main>
+
+    <!-- Newsletter Section -->
+    <XMarkSection bg="subtle" padding="lg">
+      <XMarkNewsletter
+        title="Stay in the loop"
+        description="Get the latest updates, tips, and insights delivered to your inbox."
+        variant="default"
+        @submit="handleNewsletterSubmit"
+      />
+    </XMarkSection>
+
+    <!-- Footer -->
+    <XMarkFooter
+      :logo="logoDark"
+      logo-alt="Company"
+      description="Building the future of modern software."
+      :social="socialLinks"
+      :columns="footerColumns"
+      :legal-links="legalLinks"
+    />
+  </div>
 </template>
 <script setup>
-import { ref, onMounted } from "vue";
+import { onMounted } from "vue";
 import markerSDK from "@marker.io/browser";
 
 const appConfig = useAppConfig();
+
 useSeoMeta({
   titleTemplate: `%s`,
 });
+
+// Logo configuration (replace with actual logos)
+const logoLight = "/logo-white.svg";
+const logoDark = "/logo-dark.svg";
+
+// Navigation links
+const navLinks = [
+  { label: "Features", to: "/#features" },
+  { label: "Pricing", to: "/pricing" },
+  { label: "Blog", to: "/blog" },
+  { label: "About", to: "/about" },
+];
+
+// Social links
+const socialLinks = [
+  { name: "Twitter", href: "https://twitter.com", icon: "i-lucide-twitter" },
+  { name: "GitHub", href: "https://github.com", icon: "i-lucide-github" },
+  { name: "LinkedIn", href: "https://linkedin.com", icon: "i-lucide-linkedin" },
+];
+
+// Footer columns
+const footerColumns = [
+  {
+    title: "Product",
+    links: [
+      { label: "Features", to: "/#features" },
+      { label: "Pricing", to: "/pricing" },
+      { label: "Integrations", to: "/integrations" },
+      { label: "Changelog", to: "/changelog" },
+    ],
+  },
+  {
+    title: "Company",
+    links: [
+      { label: "About", to: "/about" },
+      { label: "Blog", to: "/blog" },
+      { label: "Careers", to: "/careers" },
+      { label: "Contact", to: "/contact" },
+    ],
+  },
+  {
+    title: "Resources",
+    links: [
+      { label: "Documentation", to: "/docs" },
+      { label: "Help Center", to: "/help" },
+      { label: "Community", to: "/community" },
+      { label: "Status", to: "/status" },
+    ],
+  },
+];
+
+// Legal links
+const legalLinks = [
+  { label: "Privacy Policy", to: "/privacy" },
+  { label: "Terms of Service", to: "/terms" },
+  { label: "Cookie Policy", to: "/cookies" },
+];
+
+// Newsletter submit handler
+const handleNewsletterSubmit = (email) => {
+  console.log("Newsletter signup:", email);
+  // Implement your newsletter signup logic here
+};
+
+// Marker.io widget
 if (appConfig && appConfig?.xMarketing?.config?.markerProjectId) {
   onMounted(() => {
-    const widget = markerSDK.loadWidget({
+    markerSDK.loadWidget({
       project: appConfig?.xMarketing?.config?.markerProjectId,
     });
   });