@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

package/app/pages/index.vue

@@ -0,0 +1,210 @@
+<template>
+	<div>
+		<!-- Hero Section -->
+		<XMarkHero
+			image-src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=1920&q=80"
+			eyebrow="Welcome to the future"
+			title="Build something amazing today"
+			subtitle="The modern platform for teams who want to ship faster, collaborate better, and scale effortlessly."
+			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>
+
+		<!-- Features Section -->
+		<XMarkSection id="features" bg="default" padding="xl">
+			<header class="text-center max-w-3xl mx-auto mb-16">
+				<p class="xText-eyebrow text-primary-500 mb-4">Features</p>
+				<h2 class="xText-headline text-neutral-900 dark:text-white xText-balance">
+					Everything you need to succeed
+				</h2>
+				<p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
+					Powerful tools designed to help you build, launch, and grow your product.
+				</p>
+			</header>
+
+			<XMarkFeatures
+				:features="features"
+				layout="grid"
+				:columns="3"
+			/>
+		</XMarkSection>
+
+		<!-- Testimonials Section -->
+		<XMarkSection bg="subtle" padding="xl">
+			<header class="text-center max-w-3xl mx-auto mb-16">
+				<p class="xText-eyebrow text-primary-500 mb-4">Testimonials</p>
+				<h2 class="xText-headline text-neutral-900 dark:text-white xText-balance">
+					Loved by teams worldwide
+				</h2>
+			</header>
+
+			<XMarkTestimonials
+				:testimonials="testimonials"
+				layout="grid"
+			/>
+		</XMarkSection>
+
+		<!-- Pricing Section -->
+		<XMarkSection bg="default" padding="xl">
+			<header class="text-center max-w-3xl mx-auto mb-16">
+				<p class="xText-eyebrow text-primary-500 mb-4">Pricing</p>
+				<h2 class="xText-headline text-neutral-900 dark:text-white xText-balance">
+					Simple, transparent pricing
+				</h2>
+				<p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
+					Choose the plan that works best for your team.
+				</p>
+			</header>
+
+			<XMarkPricing
+				:plans="pricingPlans"
+			/>
+		</XMarkSection>
+
+		<!-- CTA Section -->
+		<XMarkSection bg="bold" padding="xl">
+			<div class="text-center max-w-3xl mx-auto">
+				<h2 class="xText-headline xText-balance">
+					Ready to get started?
+				</h2>
+				<p class="mt-4 text-lg opacity-80">
+					Join thousands of teams already using our platform.
+				</p>
+				<div class="mt-8 flex flex-wrap justify-center gap-4">
+					<UButton size="xl" color="white">
+						Start Free Trial
+					</UButton>
+					<UButton size="xl" variant="outline" color="white">
+						Contact Sales
+					</UButton>
+				</div>
+				<div class="mt-6 flex flex-wrap justify-center gap-4">
+					<XMarkBadge preset="no-credit-card" variant="subtle" />
+					<XMarkBadge preset="cancel-anytime" variant="subtle" />
+				</div>
+			</div>
+		</XMarkSection>
+	</div>
+</template>
+
+<script setup>
+useSeoMeta({
+	title: "Modern Platform for Teams",
+	description: "Build, launch, and grow your product with our powerful platform.",
+});
+
+// Features data
+const features = [
+	{
+		icon: "i-lucide-zap",
+		title: "Lightning Fast",
+		description: "Built for speed with optimized performance at every level.",
+	},
+	{
+		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-bar-chart-3",
+		title: "Analytics",
+		description: "Deep insights into your product's performance.",
+	},
+	{
+		icon: "i-lucide-puzzle",
+		title: "Integrations",
+		description: "Connect with 100+ tools your team already uses.",
+	},
+	{
+		icon: "i-lucide-headphones",
+		title: "24/7 Support",
+		description: "Expert support whenever you need it.",
+	},
+];
+
+// Testimonials data
+const testimonials = [
+	{
+		quote: "This platform transformed how our team works. We shipped 3x faster within the first month.",
+		name: "Sarah Chen",
+		title: "CTO",
+		company: "TechStart",
+		avatar: "https://randomuser.me/api/portraits/women/44.jpg",
+	},
+	{
+		quote: "The best investment we've made. The ROI was visible within weeks.",
+		name: "Marcus Johnson",
+		title: "Founder",
+		company: "ScaleUp",
+		avatar: "https://randomuser.me/api/portraits/men/32.jpg",
+	},
+	{
+		quote: "Finally, a platform that understands what modern teams need. Highly recommended.",
+		name: "Emily Park",
+		title: "Product Lead",
+		company: "InnovateCo",
+		avatar: "https://randomuser.me/api/portraits/women/68.jpg",
+	},
+];
+
+// Pricing plans data
+const pricingPlans = [
+	{
+		name: "Starter",
+		description: "Perfect for small teams getting started.",
+		price: "$19",
+		period: "month",
+		features: [
+			"Up to 5 team members",
+			"Basic analytics",
+			"Email support",
+			"1GB storage",
+		],
+		cta: "Start Free Trial",
+	},
+	{
+		name: "Pro",
+		description: "For growing teams that need more power.",
+		price: "$49",
+		period: "month",
+		features: [
+			"Up to 25 team members",
+			"Advanced analytics",
+			"Priority support",
+			"10GB storage",
+			"Custom integrations",
+		],
+		cta: "Start Free Trial",
+		popular: true,
+	},
+	{
+		name: "Enterprise",
+		description: "For large organizations with custom needs.",
+		price: "Custom",
+		period: "",
+		features: [
+			"Unlimited team members",
+			"Enterprise analytics",
+			"Dedicated support",
+			"Unlimited storage",
+			"Custom integrations",
+			"SLA guarantee",
+		],
+		cta: "Contact Sales",
+	},
+];
+</script>

package/app/plugins/marketing.client.ts

@@ -0,0 +1,13 @@
+/**
+ * Marketing Client Plugin
+ * Auto-initializes scroll reveal and parallax animations globally
+ *
+ * From spec-prompt.md specification
+ */
+export default defineNuxtPlugin(() => {
+  // Initialize scroll reveal globally
+  useScrollReveal();
+
+  // Initialize parallax globally
+  useParallax();
+});

package/app/types/marketing.d.ts

@@ -0,0 +1,268 @@
+/**
+ * nuxt-x-marketing TypeScript Interfaces
+ *
+ * Standardized data structures for marketing components.
+ * Use these interfaces when passing data to components.
+ */
+
+// =============================================================================
+// Core Prop Types
+// =============================================================================
+
+/**
+ * Standard image prop object
+ * @example { src: '/hero.jpg', alt: 'Hero image' }
+ */
+export interface ImageProp {
+	/** Image URL (required) */
+	src: string
+	/** Alt text for accessibility */
+	alt?: string
+}
+
+/**
+ * Standard video prop object
+ * @example { src: '/demo.mp4', poster: '/poster.jpg' }
+ */
+export interface VideoProp {
+	/** Video URL (required) */
+	src: string
+	/** Poster image URL */
+	poster?: string
+}
+
+/**
+ * Standard button prop object (matches Nuxt UI conventions)
+ * @example { label: 'Get Started', color: 'primary', to: '/signup' }
+ */
+export interface ButtonProp {
+	/** Button text (required) */
+	label: string
+	/** Button color: primary, secondary, neutral, success, warning, error */
+	color?: 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'error' | 'white'
+	/** Button variant: solid, outline, ghost, subtle, link */
+	variant?: 'solid' | 'outline' | 'ghost' | 'subtle' | 'link'
+	/** Navigation target (NuxtLink) */
+	to?: string
+	/** External link (uses <a> instead) */
+	href?: string
+	/** Icon name (Heroicons/Lucide format) */
+	icon?: string
+	/** Size: xs, sm, md, lg, xl */
+	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+/**
+ * Standard logo prop object
+ * @example { src: '/logo.svg', srcDark: '/logo-dark.svg', alt: 'Company' }
+ */
+export interface LogoProp {
+	/** Light mode logo URL (required) */
+	src: string
+	/** Dark mode logo URL (optional, falls back to src) */
+	srcDark?: string
+	/** Alt text */
+	alt?: string
+}
+
+// =============================================================================
+// Content Types
+// =============================================================================
+
+/**
+ * Blog post author
+ */
+export interface Author {
+	/** Author name */
+	name: string
+	/** Author title/role */
+	title?: string
+	/** Avatar image URL */
+	avatar?: string
+	/** Short bio */
+	bio?: string
+	/** Social media links */
+	social?: {
+		twitter?: string
+		linkedin?: string
+		github?: string
+		[key: string]: string | undefined
+	}
+}
+
+/**
+ * Blog post object
+ * @example
+ * {
+ *   title: 'Getting Started',
+ *   slug: 'getting-started',
+ *   img: { src: '/blog/cover.jpg', alt: 'Cover' },
+ *   date: '2024-01-15',
+ *   author: { name: 'Jane Doe', avatar: '/avatars/jane.jpg' }
+ * }
+ */
+export interface BlogPost {
+	/** Post title */
+	title: string
+	/** URL slug */
+	slug: string
+	/** Featured image (new object format) */
+	img?: ImageProp
+	/** Post excerpt/summary */
+	excerpt?: string
+	/** Full post description */
+	description?: string
+	/** Publication date (ISO string or Date) */
+	date?: string | Date
+	/** Reading time (e.g., "5 min read") */
+	readingTime?: string | number
+	/** Category name */
+	category?: string
+	/** Array of tags */
+	tags?: string[]
+	/** Post author */
+	author?: Author
+	/** Whether post is published */
+	published?: boolean
+}
+
+/**
+ * Feature item for Features component
+ * @example
+ * {
+ *   icon: 'i-lucide-rocket',
+ *   title: 'Fast',
+ *   description: 'Lightning fast performance',
+ *   img: { src: '/features/fast.jpg' }
+ * }
+ */
+export interface Feature {
+	/** Icon name (Heroicons/Lucide format) */
+	icon?: string
+	/** Feature title */
+	title: string
+	/** Feature description */
+	description?: string
+	/** Feature image (new object format) */
+	img?: ImageProp
+	/** Link URL */
+	link?: string
+}
+
+/**
+ * Pricing plan for Pricing components
+ * @example
+ * {
+ *   name: 'Pro',
+ *   price: { monthly: '$29', yearly: '$279' },
+ *   features: ['Unlimited projects', 'Priority support'],
+ *   button: { label: 'Get Pro' },
+ *   popular: true
+ * }
+ */
+export interface PricingPlan {
+	/** Plan name */
+	name: string
+	/** Plan description */
+	description?: string
+	/** Price (string or object for monthly/yearly) */
+	price: string | { monthly: string; yearly: string }
+	/** Billing period text (e.g., "/month") */
+	period?: string
+	/** List of feature strings */
+	features: string[]
+	/** CTA button (new object format) */
+	button?: ButtonProp
+	/** Mark as popular/highlighted */
+	popular?: boolean
+}
+
+/**
+ * Testimonial for Testimonials component
+ * @example
+ * {
+ *   quote: 'Amazing product!',
+ *   name: 'John Doe',
+ *   title: 'CEO',
+ *   company: 'Acme Inc',
+ *   avatar: '/testimonials/john.jpg',
+ *   rating: 5
+ * }
+ */
+export interface Testimonial {
+	/** Testimonial quote text */
+	quote: string
+	/** Person's name */
+	name: string
+	/** Job title */
+	title?: string
+	/** Company name */
+	company?: string
+	/** Avatar image URL */
+	avatar?: string
+	/** Company logo URL */
+	logo?: string
+	/** Star rating (1-5) */
+	rating?: 1 | 2 | 3 | 4 | 5
+}
+
+/**
+ * Navigation link item
+ */
+export interface NavLink {
+	/** Link label */
+	label: string
+	/** Link URL */
+	to?: string
+	/** External link */
+	href?: string
+	/** Icon name */
+	icon?: string
+	/** Child links (dropdown) */
+	children?: NavLink[]
+}
+
+/**
+ * Footer link column
+ */
+export interface FooterColumn {
+	/** Column title */
+	title: string
+	/** Links in this column */
+	links: NavLink[]
+}
+
+/**
+ * Social media link
+ */
+export interface SocialLink {
+	/** Platform name (twitter, linkedin, github, etc.) */
+	platform: string
+	/** Profile URL */
+	url: string
+	/** Icon name (optional, defaults to platform icon) */
+	icon?: string
+}
+
+// =============================================================================
+// Component Size Scale
+// =============================================================================
+
+/**
+ * Standard size scale used across components
+ */
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+// =============================================================================
+// Layout Types
+// =============================================================================
+
+/**
+ * Section background variants
+ */
+export type SectionBackground = 'default' | 'subtle' | 'bold' | 'gradient' | 'pattern'
+
+/**
+ * Section padding options
+ */
+export type SectionPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'