@xenterprises/nuxt-x-marketing 1.0.1 → 1.0.2

package/.claude/settings.local.json

@@ -0,0 +1,23 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(curl:*)",
+      "Bash(npm run dev:*)",
+      "Bash(cat:*)",
+      "Bash(npm install:*)",
+      "Bash(find:*)",
+      "Bash(ls:*)",
+      "Skill(frontend-design)",
+      "Bash(git log:*)",
+      "Bash(test:*)",
+      "Bash(timeout 300 npx playwright test:*)",
+      "Bash(npx playwright test:*)",
+      "Bash(npx playwright install:*)",
+      "Bash({} ;)",
+      "mcp__plugin_context7_context7__resolve-library-id",
+      "mcp__plugin_context7_context7__query-docs",
+      "Bash(git reset:*)",
+      "Bash(python3:*)"
+    ]
+  }
+}

package/.playground/app.vue

@@ -1,4 +1,5 @@
 <template>
+  <UApp>
   <div class="min-h-screen bg-neutral-50 dark:bg-neutral-950">
     <!-- Sidebar Navigation -->
     <aside class="fixed top-0 left-0 w-64 h-screen bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 overflow-y-auto z-50">
@@ -16,8 +17,16 @@
           @click="toggleDarkMode"
           class="flex items-center gap-2 px-3 py-2 w-full rounded-lg text-sm text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
         >
-          <UIcon :name="isDark ? 'i-lucide-sun' : 'i-lucide-moon'" class="w-4 h-4" />
-          <span>{{ isDark ? 'Light Mode' : 'Dark Mode' }}</span>
+          <ClientOnly>
+            <UIcon :name="isDark ? 'i-lucide-sun' : 'i-lucide-moon'" class="w-4 h-4" />
+            <template #fallback>
+              <UIcon name="i-lucide-moon" class="w-4 h-4" />
+            </template>
+          </ClientOnly>
+          <ClientOnly>
+            <span>{{ isDark ? 'Light Mode' : 'Dark Mode' }}</span>
+            <template #fallback><span>Dark Mode</span></template>
+          </ClientOnly>
         </button>
       </div>
 
@@ -189,11 +198,8 @@
     <main class="ml-64">
       <NuxtPage />
     </main>
-
-    <!-- Nuxt UI Providers for modals and toasts -->
-    <UModals />
-    <UToaster />
   </div>
+  </UApp>
 </template>
 
 <script setup>

package/.playground/package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": ".playground",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

package/.playground/pages/index.vue

@@ -129,8 +129,8 @@
     </main>
 
     <!-- Footer -->
-    <XFooter />
-    <XFooterXLegal />
+    <XXFooter />
+    <XXLegal />
   </div>
 </template>
 

package/.playground/pages/layout/x-legal.vue

@@ -17,7 +17,7 @@
           Without any props, displays X Enterprises logo, copyright, and legal links.
         </p>
         <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XFooterXLegal />
+          <XXLegal />
         </div>
       </section>
 
@@ -25,7 +25,7 @@
       <section>
         <h2 class="text-lg font-semibold mb-4">Custom Copyright</h2>
         <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XFooterXLegal
+          <XXLegal
             copyright="© 2024 Acme Corporation. All rights reserved."
           />
         </div>
@@ -35,7 +35,7 @@
       <section>
         <h2 class="text-lg font-semibold mb-4">Custom Links</h2>
         <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XFooterXLegal
+          <XXLegal
             :links="customLinks"
           />
         </div>
@@ -45,7 +45,7 @@
       <section>
         <h2 class="text-lg font-semibold mb-4">Custom Logo</h2>
         <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XFooterXLegal
+          <XXLegal
             :logo="{ src: 'https://cdn.x.enterprises/logo-x.png', alt: 'Custom Logo', href: '/' }"
             copyright="© 2024 Custom Company"
           />
@@ -56,7 +56,7 @@
       <section>
         <h2 class="text-lg font-semibold mb-4">No Logo</h2>
         <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XFooterXLegal
+          <XXLegal
             :logo="false"
             copyright="© 2024 Simple Company. All rights reserved."
           />
@@ -67,7 +67,7 @@
       <section>
         <h2 class="text-lg font-semibold mb-4">Fully Customized</h2>
         <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XFooterXLegal
+          <XXLegal
             :logo="{ src: 'https://cdn.x.enterprises/logo-x.png', alt: 'Acme Inc', href: 'https://example.com' }"
             copyright="© 2020-2024 Acme Inc. Built with love."
             :links="fullCustomLinks"
@@ -163,15 +163,15 @@ const fullCustomLinks = [
 ]
 
 const codeExample = `<!-- Default (X Enterprises branding) -->
-<XFooterXLegal />
+<XXLegal />
 
 <!-- Custom copyright only -->
-<XFooterXLegal
+<XXLegal
   copyright="© 2024 Your Company. All rights reserved."
 />
 
 <!-- Custom links -->
-<XFooterXLegal
+<XXLegal
   :links="[
     { label: 'Privacy Policy', href: '/privacy' },
     { label: 'Terms of Service', href: '/terms' },
@@ -180,15 +180,15 @@ const codeExample = `<!-- Default (X Enterprises branding) -->
 />
 
 <!-- Custom logo -->
-<XFooterXLegal
+<XXLegal
   :logo="{ src: '/logo.png', alt: 'Company', href: '/' }"
 />
 
 <!-- Hide logo -->
-<XFooterXLegal :logo="false" />
+<XXLegal :logo="false" />
 
 <!-- Fully customized -->
-<XFooterXLegal
+<XXLegal
   :logo="{ src: '/logo.png', alt: 'Company', href: '/' }"
   copyright="© 2024 Company Inc. All rights reserved."
   :links="[

package/LICENSE

@@ -0,0 +1,60 @@
+PROPRIETARY SOFTWARE LICENSE
+
+Copyright (c) 2024-2026 X Enterprises LLC. All Rights Reserved.
+
+This software and associated documentation files (the "Software") are the
+exclusive property of X Enterprises LLC, a Washington limited liability
+company.
+
+TERMS AND CONDITIONS
+
+1. OWNERSHIP
+   All rights, title, and interest in and to the Software, including all
+   intellectual property rights, are and shall remain the exclusive property
+   of X Enterprises LLC.
+
+2. RESTRICTIONS
+   Without the prior written consent of X Enterprises LLC, you may not:
+   - Copy, modify, or distribute the Software
+   - Reverse engineer, decompile, or disassemble the Software
+   - Sublicense, sell, lease, or otherwise transfer the Software
+   - Remove or alter any proprietary notices or labels
+
+3. AUTHORIZED USE
+   Use of this Software is limited to authorized employees, contractors, and
+   agents of X Enterprises LLC, solely for purposes approved by X Enterprises
+   LLC.
+
+4. NO WARRANTY
+   THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+   FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL
+   X ENTERPRISES LLC BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY,
+   WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM, OUT OF,
+   OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+   SOFTWARE.
+
+5. LIMITATION OF LIABILITY
+   IN NO EVENT SHALL X ENTERPRISES LLC BE LIABLE FOR ANY INDIRECT, INCIDENTAL,
+   SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+   PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+   OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+   WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+   OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
+   ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+6. GOVERNING LAW
+   This license shall be governed by and construed in accordance with the laws
+   of the State of Washington, United States, without regard to its conflict
+   of law provisions.
+
+7. TERMINATION
+   This license is effective until terminated. X Enterprises LLC may terminate
+   this license at any time without notice. Upon termination, you must destroy
+   all copies of the Software in your possession.
+
+For licensing inquiries, contact: legal@x.enterprises
+
+---
+X Enterprises LLC
+Bothell, Washington, United States

package/README.md

@@ -1,16 +1,18 @@
 # @xenterprises/nuxt-x-marketing
 
-A comprehensive Nuxt layer for building marketing websites with 33+ pre-built components. Features dark mode support, responsive design, accessibility, and seamless integration with Nuxt UI.
+A comprehensive Nuxt layer for building marketing websites with 38+ pre-built components. Features dark mode support, responsive design, accessibility, and seamless integration with Nuxt UI.
 
 ## Features
 
-- **33+ Marketing Components** - Hero, Features, Pricing, Testimonials, Blog, and more
+- **38+ Marketing Components** - Hero, Features, Pricing, Testimonials, Blog, Affiliate/Review, and more
+- **Zero Required Props** - Every component works out of the box with sensible defaults
 - **Dark Mode Support** - All components support light and dark themes
 - **Responsive Design** - Mobile-first approach with tablet and desktop breakpoints
 - **Accessible** - WCAG 2.0 AA compliant with proper ARIA attributes
 - **Customizable** - Props-based configuration with slot overrides
-- **Nuxt UI Integration** - Built on top of Nuxt UI v4 components
+- **Nuxt UI v4 Integration** - Built on top of Nuxt UI v4 components
 - **Animations** - Scroll-triggered fade-in animations and parallax effects
+- **Two Footer Modes** - Generic white-label (`XMarkLayoutFooter`) and X Enterprises branded (`XFooter`)
 
 ## Installation
 
@@ -111,99 +113,60 @@ const handleNewsletterSubmit = (email) => {
 
 ### Example Landing Page
 
+All components work with zero required props — just drop them in and customize as needed:
+
 ```vue
 <template>
   <div>
-    <!-- Hero -->
+    <!-- Hero — works with zero props, or fully customized -->
     <XMarkHero
-      image-src="https://images.unsplash.com/photo-1551434678-e076c223a692"
+      :img="{ src: 'https://images.unsplash.com/photo-1551434678-e076c223a692', alt: 'Hero' }"
       eyebrow="Welcome to the future"
       title="Build something amazing today"
       subtitle="The modern platform for teams who want to ship faster."
       align="left"
       overlay="gradient"
-    >
-      <template #actions>
-        <UButton size="xl" color="white">Get Started Free</UButton>
-        <UButton size="xl" variant="outline" color="white">Watch Demo</UButton>
-      </template>
-    </XMarkHero>
+      :buttons="[
+        { label: 'Get Started Free', color: 'primary' },
+        { label: 'Watch Demo', variant: 'outline' }
+      ]"
+    />
 
-    <!-- Features -->
+    <!-- Features — works with zero props, or pass your own -->
     <XMarkSection id="features" bg="default" padding="xl">
       <header class="text-center max-w-3xl mx-auto mb-16">
         <h2 class="xText-headline">Everything you need to succeed</h2>
-        <p class="mt-4 text-lg text-neutral-600">
-          Powerful tools designed to help you build, launch, and grow.
-        </p>
       </header>
       <XMarkFeatures :features="features" layout="grid" :columns="3" />
     </XMarkSection>
 
     <!-- Testimonials -->
     <XMarkSection bg="subtle" padding="xl">
-      <header class="text-center max-w-3xl mx-auto mb-16">
-        <h2 class="xText-headline">Loved by teams worldwide</h2>
-      </header>
       <XMarkTestimonials :testimonials="testimonials" layout="grid" />
     </XMarkSection>
 
     <!-- Pricing -->
     <XMarkSection bg="default" padding="xl">
-      <header class="text-center max-w-3xl mx-auto mb-16">
-        <h2 class="xText-headline">Simple, transparent pricing</h2>
-      </header>
-      <XMarkPricing :plans="pricingPlans" />
+      <XMarkPricingPlans :plans="pricingPlans" />
     </XMarkSection>
   </div>
 </template>
 
 <script setup>
 const features = [
-  {
-    icon: "i-lucide-zap",
-    title: "Lightning Fast",
-    description: "Built for speed with optimized performance.",
-  },
-  {
-    icon: "i-lucide-shield-check",
-    title: "Secure by Default",
-    description: "Enterprise-grade security with SOC 2 compliance.",
-  },
-  {
-    icon: "i-lucide-users",
-    title: "Team Collaboration",
-    description: "Real-time collaboration tools for modern teams.",
-  },
-];
+  { icon: 'i-lucide-zap', title: 'Lightning Fast', description: 'Built for speed.' },
+  { icon: 'i-lucide-shield-check', title: 'Secure by Default', description: 'Enterprise-grade security.' },
+  { icon: 'i-lucide-users', title: 'Team Collaboration', description: 'Real-time collaboration tools.' },
+]
 
 const testimonials = [
-  {
-    quote: "This platform transformed how our team works.",
-    name: "Sarah Chen",
-    title: "CTO",
-    company: "TechStart",
-    avatar: "https://randomuser.me/api/portraits/women/44.jpg",
-  },
-];
+  { quote: 'This platform transformed how our team works.', name: 'Sarah Chen', title: 'CTO', company: 'TechStart', rating: 5 },
+]
 
 const pricingPlans = [
-  {
-    name: "Starter",
-    price: "$19",
-    period: "month",
-    features: ["Up to 5 team members", "Basic analytics", "Email support"],
-    cta: "Start Free Trial",
-  },
-  {
-    name: "Pro",
-    price: "$49",
-    period: "month",
-    features: ["Up to 25 team members", "Advanced analytics", "Priority support"],
-    cta: "Start Free Trial",
-    popular: true,
-  },
-];
+  { name: 'Starter', price: '$19', period: '/month', features: ['5 team members', 'Basic analytics'], button: { label: 'Start Free Trial' } },
+  { name: 'Pro', price: '$49', period: '/month', features: ['25 team members', 'Advanced analytics'], button: { label: 'Start Free Trial' }, popular: true },
+]
 </script>
 ```
 
@@ -236,8 +199,8 @@ Fixed navigation header with transparent-to-solid scroll transition.
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `links` | `Array` | `[]` | Navigation links `{ label, to }` |
-| `logoLight` | `String` | required | Logo for transparent state |
-| `logoDark` | `String` | required | Logo for solid state |
+| `logoLight` | `String` | `''` | Logo for transparent/dark state |
+| `logoDark` | `String` | `''` | Logo for solid/light state |
 | `logoAlt` | `String` | `'Logo'` | Logo alt text |
 | `transparent` | `Boolean` | `true` | Start transparent over hero |
 | `scrollThreshold` | `Number` | `100` | Pixels before transition |
@@ -805,6 +768,189 @@ Chat widget trigger.
 
 ---
 
+### Affiliate & Review Components
+
+For affiliate marketing, product review sites, and "best X" roundup posts.
+
+#### XMarkAffiliateDisclosure
+
+FTC/Amazon-required affiliate disclosure banner. Three variants for different placements.
+
+```vue
+<!-- Subtle bar (default) -->
+<XMarkAffiliateDisclosure />
+
+<!-- Full-width banner at top of page -->
+<XMarkAffiliateDisclosure variant="banner" :dismissible="true" />
+
+<!-- Inline inside blog post prose -->
+<XMarkAffiliateDisclosure variant="inline" />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | `String` | Amazon associate disclosure | Disclosure text |
+| `variant` | `String` | `'subtle'` | `subtle`, `banner`, `inline` |
+| `icon` | `String` | `'i-lucide-info'` | Icon name |
+| `dismissible` | `Boolean` | `false` | Show dismiss button |
+| `storageKey` | `String` | `'affiliate-disclosure-dismissed'` | localStorage key |
+
+#### XMarkAffiliateProductCard
+
+Product card with affiliate buy button, star rating, price, pros/cons. Three layout variants.
+
+```vue
+<XMarkAffiliateProductCard
+  :product="{
+    name: 'Sony WH-1000XM5',
+    image: '/products/sony-wh1000xm5.jpg',
+    price: '$279.99',
+    originalPrice: '$349.99',
+    rating: 4.8,
+    reviewCount: 12400,
+    pros: ['Best-in-class ANC', '30hr battery', 'Foldable design'],
+    cons: ['No IP rating', 'Expensive'],
+    affiliateUrl: 'https://amazon.com/dp/B09XS7JWHH',
+    affiliateTag: 'mysite-20',
+    badge: '#1 Pick',
+  }"
+  layout="card"
+  button-label="Check Price on Amazon"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `product` | `Object` | sample product | Product data `{ name, image?, price?, originalPrice?, rating?, reviewCount?, pros?, cons?, affiliateUrl?, affiliateTag?, badge? }` |
+| `layout` | `String` | `'card'` | `card` (vertical), `row` (horizontal), `compact` (one-line) |
+| `showPros` | `Boolean` | `true` | Show pros list |
+| `showCons` | `Boolean` | `false` | Show cons list |
+| `showRating` | `Boolean` | `true` | Show star rating |
+| `showPrice` | `Boolean` | `true` | Show price |
+| `buttonLabel` | `String` | `'Check Price on Amazon'` | CTA button text |
+| `buttonIcon` | `String` | `'i-lucide-external-link'` | CTA button icon |
+| `disclosure` | `String` | `''` | Small disclosure text below button |
+
+#### XMarkAffiliateProductGrid
+
+Grid of product cards for "best X" roundup posts. Automatically injects rank badges.
+
+```vue
+<XMarkAffiliateProductGrid
+  :products="topHeadphones"
+  layout="grid"
+  :columns="3"
+  :show-ranking="true"
+  disclosure="This page contains affiliate links."
+  button-label="Check Price on Amazon"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `products` | `Array` | `[]` | Array of product objects |
+| `layout` | `String` | `'grid'` | `grid` or `list` |
+| `columns` | `Number` | `3` | Grid columns: `2` or `3` |
+| `showRanking` | `Boolean` | `true` | Inject #1/#2/#3 badges on first 3 products |
+| `disclosure` | `String` | `''` | Disclosure shown once at top |
+| `buttonLabel` | `String` | `'Check Price on Amazon'` | CTA label for all cards |
+| `cardLayout` | `String` | `'card'` | Card layout variant |
+
+#### XMarkAffiliateProductDetail
+
+Full product review page layout — image gallery, editorial score, pros/cons table, specs, sticky buy box.
+
+```vue
+<XMarkAffiliateProductDetail
+  :product="{
+    name: 'Sony WH-1000XM5 Review',
+    images: ['/img/sony-1.jpg', '/img/sony-2.jpg'],
+    price: '$279.99',
+    originalPrice: '$349.99',
+    rating: 4.8,
+    reviewCount: 12400,
+    pros: ['Best-in-class ANC', '30hr battery'],
+    cons: ['No IP rating', 'Expensive'],
+    specs: { 'Driver Size': '30mm', 'Battery': '30 hours', 'Weight': '250g' },
+    description: 'The WH-1000XM5 sets the bar for noise-cancelling headphones.',
+    verdict: 'The best ANC headphones money can buy in 2024.',
+    affiliateUrl: 'https://amazon.com/dp/B09XS7JWHH',
+    affiliateTag: 'mysite-20',
+  }"
+  :score="9.2"
+  :has-buy-box="true"
+  :has-specs="true"
+  :has-pros-cons-table="true"
+  disclosure="This page contains affiliate links."
+>
+  <template #after-verdict>
+    <!-- Additional content after verdict -->
+  </template>
+  <template #sidebar>
+    <!-- Additional sidebar widgets -->
+  </template>
+</XMarkAffiliateProductDetail>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `product` | `Object` | sample product | Full product data including `images[]`, `specs{}`, `verdict` |
+| `score` | `Number` | `null` | Editorial score 0–10 (shown as circular badge) |
+| `hasBuyBox` | `Boolean` | `true` | Show sticky buy box sidebar |
+| `hasSpecs` | `Boolean` | `true` | Show specs table |
+| `hasProsConsTable` | `Boolean` | `true` | Show pros/cons two-column table |
+| `disclosure` | `String` | `''` | Affiliate disclosure text |
+
+**Slots:** `buy-box`, `after-verdict`, `sidebar`
+
+#### XMarkAffiliateComparisonTable
+
+Side-by-side product comparison table for "X vs Y" posts. Highlights best values per row.
+
+```vue
+<XMarkAffiliateComparisonTable
+  :products="[
+    {
+      name: 'Sony WH-1000XM5',
+      image: '/img/sony.jpg',
+      price: '$279.99',
+      affiliateUrl: 'https://amazon.com/dp/B09XS7JWHH',
+      affiliateTag: 'mysite-20',
+      specs: { price: '$279.99', rating: '4.8/5', battery: '30 hours', weight: '250g' },
+    },
+    {
+      name: 'Bose QC45',
+      image: '/img/bose.jpg',
+      price: '$249.99',
+      affiliateUrl: 'https://amazon.com/dp/B098FKXT8L',
+      affiliateTag: 'mysite-20',
+      specs: { price: '$249.99', rating: '4.6/5', battery: '24 hours', weight: '238g' },
+    },
+  ]"
+  :specs="[
+    { label: 'Price', key: 'price' },
+    { label: 'Rating', key: 'rating' },
+    { label: 'Battery Life', key: 'battery' },
+    { label: 'Weight', key: 'weight' },
+  ]"
+  :show-buy-buttons="true"
+  :highlight-best="true"
+  button-label="Buy on Amazon"
+  disclosure="This page contains affiliate links."
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `products` | `Array` | 2 sample products | 2–4 products with `specs` object |
+| `specs` | `Array` | price/rating/battery | `[{ label, key }]` spec rows |
+| `showBuyButtons` | `Boolean` | `true` | Show buy buttons in last row |
+| `highlightBest` | `Boolean` | `true` | Highlight best value per row (lowest price, highest rating) |
+| `buttonLabel` | `String` | `'Buy on Amazon'` | Buy button label |
+| `disclosure` | `String` | `''` | Disclosure shown above table |
+
+---
+
 ## Configuration
 
 Configure the layer in your `app.config.js`:

package/app/app.config.ts

@@ -1,9 +1,6 @@
 export default defineAppConfig({
   ui: {
     primary: "brand",
-    header: {
-      container: "max-w-screen-2xl container mx-auto",
-    },
     colors: {
       primary: "brand",
       secondary: "deep",
@@ -82,6 +79,8 @@ declare module "@nuxt/schema" {
     xMarketing?: {
       /** Project name */
       name?: string;
+      /** Project URL */
+      url?: string;
       config?: {
         markerProjectId?: string;
         emailMarketingNewsletters?: {
@@ -145,72 +144,3 @@ interface NavLink {
   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?: {
-        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;
-          }[];
-        }[];
-      };
-      blog?: {
-        active?: boolean;
-        title?: string;
-        description?: string;
-        meta?: {
-          title?: string;
-          description?: string;
-        };
-      };
-    };
-  }
-}

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

@@ -47,13 +47,12 @@
 									<UButton
 										:to="social.url"
 										:icon="social?.icon"
-										:alt="social?.name"
-										color="gray"
+										:aria-label="social?.name"
+										color="neutral"
 										square
 										target="_blank"
 										variant="ghost"
-									>
-									</UButton>
+									/>
 								</div>
 								<UColorModeButton />
 							</div>