@launch77-shared/plugin-marketing-ui 0.0.1

package/README.md

@@ -0,0 +1,39 @@
+# MarketingUi Plugin
+
+Marketing UI component library plugin with conversion-optimized components
+
+## Installation
+
+```bash
+launch77 plugin:install marketing-ui
+```
+
+## Usage
+
+After installation, the plugin will:
+
+- TODO: Describe what the plugin does
+- TODO: List any files created or modified
+- TODO: Explain configuration options
+
+## Development
+
+### Building
+
+```bash
+npm run build
+```
+
+### Testing
+
+```bash
+npm run typecheck
+```
+
+## Template Files
+
+The `templates/` directory contains files that will be copied to the target application when this plugin is installed. Add any template files your plugin needs here.
+
+## License
+
+UNLICENSED

package/dist/generator.js

@@ -0,0 +1,260 @@
+#!/usr/bin/env node
+
+// src/generator.ts
+import * as path from "path";
+import chalk from "chalk";
+import { StandardGenerator } from "@launch77/plugin-runtime";
+
+// src/utils/config-modifier.ts
+import fs from "fs/promises";
+async function addTailwindContent(filePath, contentPath) {
+  try {
+    const fileExists = await fs.access(filePath).then(() => true).catch(() => false);
+    if (!fileExists) {
+      return {
+        success: false,
+        error: `File not found: ${filePath}`
+      };
+    }
+    const content = await fs.readFile(filePath, "utf-8");
+    if (content.includes(contentPath)) {
+      return {
+        success: true,
+        alreadyExists: true
+      };
+    }
+    const lines = content.split("\n");
+    let contentArrayStartIndex = -1;
+    let contentArrayEndIndex = -1;
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      if (line.includes("content:") && line.includes("[")) {
+        contentArrayStartIndex = i;
+        if (line.includes("]")) {
+          contentArrayEndIndex = i;
+          break;
+        }
+        for (let j = i + 1; j < lines.length; j++) {
+          if (lines[j].includes("]")) {
+            contentArrayEndIndex = j;
+            break;
+          }
+        }
+        break;
+      }
+    }
+    if (contentArrayStartIndex === -1) {
+      return {
+        success: false,
+        error: "Could not find content array in Tailwind config"
+      };
+    }
+    let indentation = "    ";
+    for (let i = contentArrayStartIndex + 1; i < contentArrayEndIndex; i++) {
+      const match = lines[i].match(/^(\s+)['"]/);
+      if (match) {
+        indentation = match[1];
+        break;
+      }
+    }
+    const newLine = `${indentation}'${contentPath}',`;
+    lines.splice(contentArrayEndIndex, 0, newLine);
+    const newContent = lines.join("\n");
+    await fs.writeFile(filePath, newContent, "utf-8");
+    return {
+      success: true
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+
+// src/utils/next-config-modifier.ts
+import * as fs2 from "fs/promises";
+async function addNextImageRemotePattern(filePath, hostname) {
+  try {
+    const fileExists = await fs2.access(filePath).then(
+      () => true,
+      () => false
+    );
+    if (!fileExists) {
+      return {
+        success: false,
+        error: `Config file not found at ${filePath}`
+      };
+    }
+    const content = await fs2.readFile(filePath, "utf-8");
+    if (content.includes(`hostname: '${hostname}'`) || content.includes(`hostname: "${hostname}"`)) {
+      return {
+        success: true,
+        alreadyExists: true
+      };
+    }
+    const patternToAdd = `      {
+        protocol: 'https',
+        hostname: '${hostname}',
+        port: '',
+        pathname: '/**',
+      },`;
+    const lines = content.split("\n");
+    let newContent;
+    const hasRemotePatterns = content.includes("remotePatterns");
+    if (hasRemotePatterns) {
+      const remotePatternsIndex = lines.findIndex((line) => line.includes("remotePatterns"));
+      if (remotePatternsIndex === -1) {
+        return {
+          success: false,
+          error: "Could not find remotePatterns in config"
+        };
+      }
+      let arrayStartIndex = remotePatternsIndex;
+      for (let i = remotePatternsIndex; i < lines.length; i++) {
+        if (lines[i].includes("[")) {
+          arrayStartIndex = i;
+          break;
+        }
+      }
+      lines.splice(arrayStartIndex + 1, 0, patternToAdd);
+      newContent = lines.join("\n");
+    } else {
+      const hasImages = content.includes("images:");
+      if (hasImages) {
+        const imagesIndex = lines.findIndex((line) => line.includes("images:"));
+        if (imagesIndex === -1) {
+          return {
+            success: false,
+            error: "Could not find images configuration"
+          };
+        }
+        let objectStartIndex = imagesIndex;
+        for (let i = imagesIndex; i < lines.length; i++) {
+          if (lines[i].includes("{")) {
+            objectStartIndex = i;
+            break;
+          }
+        }
+        const remotePatternsProp = `    remotePatterns: [
+${patternToAdd}
+    ],`;
+        lines.splice(objectStartIndex + 1, 0, remotePatternsProp);
+        newContent = lines.join("\n");
+      } else {
+        const configIndex = lines.findIndex((line) => line.includes("const config") || line.includes("module.exports") || line.includes("export default"));
+        if (configIndex === -1) {
+          return {
+            success: false,
+            error: "Could not find Next.js config object"
+          };
+        }
+        let objectStartIndex = configIndex;
+        for (let i = configIndex; i < lines.length; i++) {
+          if (lines[i].includes("{")) {
+            objectStartIndex = i;
+            break;
+          }
+        }
+        const imagesProp = `  images: {
+    remotePatterns: [
+${patternToAdd}
+    ],
+  },`;
+        lines.splice(objectStartIndex + 1, 0, imagesProp);
+        newContent = lines.join("\n");
+      }
+    }
+    await fs2.writeFile(filePath, newContent, "utf-8");
+    return {
+      success: true
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+
+// src/generator.ts
+var MarketingUiGenerator = class extends StandardGenerator {
+  constructor(context) {
+    super(context);
+  }
+  async injectCode() {
+    console.log(chalk.cyan("\u{1F527} Setting up Marketing UI library...\n"));
+    await this.updateTailwindConfig();
+    await this.updateNextConfig();
+  }
+  async updateTailwindConfig() {
+    const tailwindConfigPath = path.join(this.context.appPath, "tailwind.config.ts");
+    const result1 = await addTailwindContent(tailwindConfigPath, "node_modules/@launch77-shared/lib-marketing-ui/dist/**/*.js");
+    const result2 = await addTailwindContent(tailwindConfigPath, "../../node_modules/@launch77-shared/lib-marketing-ui/dist/**/*.js");
+    if (result1.success || result2.success) {
+      if (result1.alreadyExists && result2.alreadyExists) {
+        console.log(chalk.gray("   \u2713 Marketing UI library already configured in tailwind.config.ts"));
+      } else {
+        console.log(chalk.green("   \u2713 Added Marketing UI library to Tailwind content paths"));
+      }
+    } else {
+      console.log(chalk.yellow(`   \u26A0\uFE0F  Could not auto-configure tailwind.config.ts: ${result1.error}`));
+      console.log(chalk.gray("   You will need to add the content paths manually:"));
+      console.log(chalk.gray("   'node_modules/@launch77-shared/lib-marketing-ui/dist/**/*.js'"));
+      console.log(chalk.gray("   '../../node_modules/@launch77-shared/lib-marketing-ui/dist/**/*.js'"));
+    }
+  }
+  async updateNextConfig() {
+    const nextConfigJsPath = path.join(this.context.appPath, "next.config.js");
+    const nextConfigTsPath = path.join(this.context.appPath, "next.config.ts");
+    const resultJs = await addNextImageRemotePattern(nextConfigJsPath, "images.unsplash.com");
+    const resultTs = await addNextImageRemotePattern(nextConfigTsPath, "images.unsplash.com");
+    if (resultJs.success || resultTs.success) {
+      if (resultJs.alreadyExists || resultTs.alreadyExists) {
+        console.log(chalk.gray("   \u2713 Unsplash images already configured in next.config"));
+      } else {
+        console.log(chalk.green("   \u2713 Added Unsplash to Next.js image remotePatterns"));
+      }
+    } else {
+      console.log(chalk.yellow(`   \u26A0\uFE0F  Could not auto-configure next.config: ${resultJs.error || resultTs.error}`));
+      console.log(chalk.gray("   You will need to add image configuration manually"));
+      console.log(chalk.gray("   See src/modules/marketing-ui/README.md for details"));
+    }
+  }
+  showNextSteps() {
+    console.log(chalk.bold.green("\n\u2705 Plugin installed successfully!\n"));
+    console.log(chalk.bold("Next Steps:\n"));
+    console.log("1. Explore components:");
+    console.log(chalk.cyan("   Visit http://localhost:3000/marketing-ui-examples\n"));
+    console.log("2. Import components in your code:");
+    console.log(chalk.cyan("   import { HeroCentered, CTAButton } from '@launch77-shared/lib-marketing-ui'\n"));
+    console.log("3. View documentation:");
+    console.log(chalk.cyan("   See src/modules/marketing-ui/README.md\n"));
+    console.log(chalk.gray("Note: Unsplash images are pre-configured. To add other image hosts,"));
+    console.log(chalk.gray("see the External Images section in README.md\n"));
+  }
+};
+async function main() {
+  const args = process.argv.slice(2);
+  const appPath = args.find((arg) => arg.startsWith("--appPath="))?.split("=")[1];
+  const appName = args.find((arg) => arg.startsWith("--appName="))?.split("=")[1];
+  const workspaceName = args.find((arg) => arg.startsWith("--workspaceName="))?.split("=")[1];
+  const pluginPath = args.find((arg) => arg.startsWith("--pluginPath="))?.split("=")[1];
+  if (!appPath || !appName || !workspaceName || !pluginPath) {
+    console.error(chalk.red("Error: Missing required arguments"));
+    console.error(chalk.gray("Usage: --appPath=<path> --appName=<name> --workspaceName=<name> --pluginPath=<path>"));
+    process.exit(1);
+  }
+  const generator = new MarketingUiGenerator({ appPath, appName, workspaceName, pluginPath });
+  await generator.run();
+}
+if (import.meta.url === `file://${process.argv[1]}`) {
+  main().catch((error) => {
+    console.error(chalk.red("\n\u274C Error during plugin setup:"));
+    console.error(error);
+    process.exit(1);
+  });
+}
+export {
+  MarketingUiGenerator
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@launch77-shared/plugin-marketing-ui",
+  "version": "0.0.1",
+  "description": "Marketing UI component library plugin with conversion-optimized components",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "dist/generator.js",
+  "bin": {
+    "generate": "./dist/generator.js"
+  },
+  "files": [
+    "dist/",
+    "templates/",
+    "plugin.json"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/**/*.ts",
+    "release:connect": "launch77-release-connect",
+    "release:verify": "launch77-release-verify"
+  },
+  "dependencies": {
+    "@launch77/plugin-runtime": "^0.1.0",
+    "chalk": "^5.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "launch77": {
+    "installedPlugins": {
+      "release": {
+        "package": "release",
+        "version": "1.0.1",
+        "installedAt": "2026-01-26T01:08:50.461Z",
+        "source": "local"
+      }
+    }
+  }
+}

package/plugin.json

@@ -0,0 +1,9 @@
+{
+  "targets": ["app"],
+  "pluginDependencies": {
+    "design-system": "^2.1.0"
+  },
+  "libraryDependencies": {
+    "@launch77-shared/lib-marketing-ui": "^0.1.0"
+  }
+}

package/templates/src/app/marketing-ui-examples/page.tsx

@@ -0,0 +1,283 @@
+'use client'
+
+import { useState } from 'react'
+import { HeroCentered, HeroSplit, ContentSection, MarketingCard, CardGrid, CTAButton, CookieConsent } from '@launch77-shared/lib-marketing-ui'
+import { Button, Badge } from '@launch77-shared/lib-ui'
+import { Zap, Shield, Check, Rocket, Target, Lock } from 'lucide-react'
+
+export default function MarketingUiExamplesPage() {
+  const [showCookieConsent, setShowCookieConsent] = useState(false)
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="container mx-auto px-4 py-12 space-y-24">
+        {/* Page Header */}
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold">Marketing UI Components</h1>
+          <p className="text-lg text-muted-foreground">Pre-built marketing components from @launch77-shared/lib-marketing-ui for building landing pages and marketing sites.</p>
+        </div>
+
+        {/* Hero Sections */}
+        <section className="space-y-12">
+          <div>
+            <h2 className="text-3xl font-bold mb-2">Hero Sections</h2>
+            <p className="text-muted-foreground">Centered and split hero layouts for impactful first impressions</p>
+          </div>
+
+          {/* HeroCentered */}
+          <div className="space-y-4">
+            <h3 className="text-2xl font-semibold">HeroCentered</h3>
+            <div className="border rounded-lg overflow-hidden">
+              <HeroCentered
+                badge={
+                  <Badge variant="secondary" className="text-sm">
+                    🚀 New Release
+                  </Badge>
+                }
+                headline="Build Your Next SaaS in Days, Not Months"
+                subheadline="The AI-first platform that turns your idea into a production-ready app with pre-built components, auth, payments, and more."
+                primaryCTA={<Button size="lg">Start Building Free</Button>}
+                secondaryCTA={
+                  <Button variant="outline" size="lg">
+                    View Demo
+                  </Button>
+                }
+              />
+            </div>
+          </div>
+
+          {/* HeroSplit */}
+          <div className="space-y-4">
+            <h3 className="text-2xl font-semibold">HeroSplit</h3>
+            <div className="border rounded-lg overflow-hidden">
+              <HeroSplit
+                imageUrl="https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=600&fit=crop"
+                imageAlt="Team collaboration"
+                imageSide="right"
+                decorativeBlob={true}
+                blobGradient="from-purple-400 to-blue-400"
+                content={
+                  <div className="space-y-6">
+                    <Badge variant="outline">Product Update</Badge>
+                    <h1 className="text-4xl lg:text-5xl font-bold">Ship Faster with Launch77</h1>
+                    <p className="text-lg text-muted-foreground">Join thousands of developers using our AI-powered platform to build and deploy web apps at lightning speed.</p>
+                    <div className="flex gap-4">
+                      <Button size="lg">Get Started</Button>
+                      <Button variant="link" size="lg">
+                        Learn More →
+                      </Button>
+                    </div>
+                  </div>
+                }
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Content Sections */}
+        <section className="space-y-12">
+          <div>
+            <h2 className="text-3xl font-bold mb-2">Content Sections</h2>
+            <p className="text-muted-foreground">Flexible content layouts for features, benefits, and more</p>
+          </div>
+
+          {/* ContentSection - Features */}
+          <div className="space-y-4">
+            <h3 className="text-2xl font-semibold">Features Grid</h3>
+            <ContentSection headline="Built for Modern Development">
+              <div className="space-y-4">
+                <Badge>Why Choose Launch77</Badge>
+                <p className="text-lg text-muted-foreground">Everything you need to build, deploy, and scale your applications</p>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
+                  <div className="flex gap-4">
+                    <div className="text-2xl">🚀</div>
+                    <div>
+                      <h3 className="font-semibold mb-1">Ship 10x Faster</h3>
+                      <p className="text-sm text-muted-foreground">Go from idea to production in days, not months</p>
+                    </div>
+                  </div>
+                  <div className="flex gap-4">
+                    <div className="text-2xl">💰</div>
+                    <div>
+                      <h3 className="font-semibold mb-1">Save Money</h3>
+                      <p className="text-sm text-muted-foreground">Reduce development costs by up to 70%</p>
+                    </div>
+                  </div>
+                  <div className="flex gap-4">
+                    <div className="text-2xl">🛡️</div>
+                    <div>
+                      <h3 className="font-semibold mb-1">Enterprise Security</h3>
+                      <p className="text-sm text-muted-foreground">SOC 2 compliant with end-to-end encryption</p>
+                    </div>
+                  </div>
+                  <div className="flex gap-4">
+                    <div className="text-2xl">📈</div>
+                    <div>
+                      <h3 className="font-semibold mb-1">Scale Effortlessly</h3>
+                      <p className="text-sm text-muted-foreground">Handle millions of users without breaking a sweat</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </ContentSection>
+          </div>
+
+          {/* ContentSection - Centered */}
+          <div className="space-y-4">
+            <h3 className="text-2xl font-semibold">Centered Content</h3>
+            <ContentSection headline="How It Works" textAlign="center">
+              <div className="space-y-4">
+                <p className="text-lg text-muted-foreground">Get from idea to production in three simple steps</p>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
+                  <div className="text-center">
+                    <div className="text-4xl mb-4">1️⃣</div>
+                    <h3 className="font-semibold mb-2">Describe Your App</h3>
+                    <p className="text-sm text-muted-foreground">Tell our AI what you want to build</p>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-4xl mb-4">2️⃣</div>
+                    <h3 className="font-semibold mb-2">Customize & Review</h3>
+                    <p className="text-sm text-muted-foreground">Fine-tune the generated code to your needs</p>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-4xl mb-4">3️⃣</div>
+                    <h3 className="font-semibold mb-2">Deploy & Scale</h3>
+                    <p className="text-sm text-muted-foreground">Go live with one click and scale effortlessly</p>
+                  </div>
+                </div>
+              </div>
+            </ContentSection>
+          </div>
+        </section>
+
+        {/* Cards */}
+        <section className="space-y-12">
+          <div>
+            <h2 className="text-3xl font-bold mb-2">Cards</h2>
+            <p className="text-muted-foreground">Marketing cards for features, testimonials, and pricing</p>
+          </div>
+
+          {/* MarketingCard */}
+          <div className="space-y-4">
+            <h3 className="text-2xl font-semibold">MarketingCard</h3>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <MarketingCard icon={Zap} title="Beautiful Design" description="Pre-built components that look great out of the box" variant="feature" />
+              <MarketingCard icon={Rocket} title="Lightning Fast" description="Optimized for performance and Core Web Vitals" variant="feature" />
+              <MarketingCard icon={Check} title="Fully Customizable" description="Extend and modify components to match your brand" variant="feature" />
+            </div>
+          </div>
+
+          {/* CardGrid */}
+          <div className="space-y-4">
+            <h3 className="text-2xl font-semibold">CardGrid</h3>
+            <CardGrid columns={3} gap="md">
+              <MarketingCard icon={Rocket} title="Fast Development" description="Build and ship features at unprecedented speed" variant="feature" />
+              <MarketingCard icon={Shield} title="Premium Quality" description="Enterprise-grade code that scales with your business" variant="solution" />
+              <MarketingCard icon={Target} title="Focus on Users" description="Spend more time on what matters - your customers" variant="feature" />
+              <MarketingCard icon={Lock} title="Secure by Default" description="Built-in security best practices and compliance" variant="solution" />
+            </CardGrid>
+          </div>
+        </section>
+
+        {/* CTA Components */}
+        <section className="space-y-12">
+          <div>
+            <h2 className="text-3xl font-bold mb-2">Call-to-Action</h2>
+            <p className="text-muted-foreground">Conversion-optimized CTA buttons and sections</p>
+          </div>
+
+          {/* CTAButton */}
+          <div className="space-y-4">
+            <h3 className="text-2xl font-semibold">CTAButton</h3>
+            <div className="flex gap-4 flex-wrap">
+              <CTAButton
+                href="/signup"
+                size="lg"
+                trackingData={{
+                  location: 'examples-page',
+                  text: 'Get Started Free',
+                  destination: '/signup',
+                }}
+              >
+                Get Started Free
+              </CTAButton>
+              <CTAButton
+                href="/learn-more"
+                variant="secondary"
+                trackingData={{
+                  location: 'examples-page',
+                  text: 'Learn More',
+                  destination: '/learn-more',
+                }}
+              >
+                Learn More
+              </CTAButton>
+              <CTAButton
+                href="/trial"
+                size="lg"
+                external={false}
+                trackingData={{
+                  location: 'examples-page',
+                  text: 'Start Your Trial',
+                  destination: '/trial',
+                }}
+              >
+                Start Your Trial
+              </CTAButton>
+            </div>
+          </div>
+
+          {/* CTA Section */}
+          <div className="space-y-4">
+            <h3 className="text-2xl font-semibold">CTA Section</h3>
+            <ContentSection headline="Ready to Get Started?" textAlign="center" className="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-12">
+              <div className="space-y-4">
+                <p className="text-lg text-muted-foreground">Join thousands of developers building with Launch77</p>
+                <div className="flex gap-4 justify-center mt-8">
+                  <Button size="lg">Start Free Trial</Button>
+                  <Button variant="outline" size="lg">
+                    Book a Demo
+                  </Button>
+                </div>
+                <p className="text-sm text-muted-foreground mt-4">No credit card required • 14-day free trial</p>
+              </div>
+            </ContentSection>
+          </div>
+        </section>
+
+        {/* Utilities */}
+        <section className="space-y-12">
+          <div>
+            <h2 className="text-3xl font-bold mb-2">Utilities</h2>
+            <p className="text-muted-foreground">Additional marketing utilities for analytics and consent management</p>
+          </div>
+
+          {/* CookieConsent */}
+          <div className="space-y-4">
+            <h3 className="text-2xl font-semibold">CookieConsent</h3>
+            <div className="p-4 bg-blue-50 rounded-lg space-y-4">
+              <p className="text-sm text-blue-800">
+                <strong>Note:</strong> The CookieConsent component manages its own state and appears automatically on first visit. Click the button below to preview the banner.
+              </p>
+              <Button onClick={() => setShowCookieConsent(true)} variant="outline">
+                Show Cookie Consent Preview
+              </Button>
+            </div>
+            {showCookieConsent && <CookieConsent debug={true} />}
+          </div>
+        </section>
+
+        {/* Documentation Link */}
+        <section className="border-t pt-12">
+          <div className="text-center space-y-4">
+            <h2 className="text-2xl font-bold">Need More Help?</h2>
+            <p className="text-muted-foreground">Check out the full documentation for detailed usage examples and API reference.</p>
+            <Button variant="outline" asChild>
+              <a href="/modules/marketing-ui">View Documentation</a>
+            </Button>
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}

package/templates/src/modules/marketing-ui/README.md

@@ -0,0 +1,400 @@
+# Marketing UI Component Library
+
+This module provides access to the Launch77 Marketing UI component library - a collection of pre-built marketing components designed for landing pages, promotional sites, and marketing campaigns.
+
+## Available Components
+
+### Hero Sections
+
+- **HeroCentered** - Centered hero layout with headline, subheadline, badge, and CTAs
+- **HeroSplit** - Split-screen hero with content on one side and image/media on the other
+
+### Content Sections
+
+- **ContentSection** - Flexible content container with headline and customizable alignment
+- **SectionContainer** - Wrapper component for consistent section spacing and layout
+
+### Cards & Grids
+
+- **MarketingCard** - Marketing-focused card with icon, title, and description
+- **CardGrid** - Grid layout for displaying multiple marketing cards
+
+### Call-to-Action
+
+- **CTAButton** - Conversion-optimized call-to-action link button
+
+### Utilities
+
+- **CookieConsent** - GDPR-compliant cookie consent banner
+- **AnalyticsWrapper** - Wrapper for consent-based analytics tracking
+
+### Typography
+
+- **FluidHeading** - Responsive heading with fluid typography
+- **FluidText** - Responsive text with fluid sizing
+
+## Usage Examples
+
+### Basic Hero Section
+
+```tsx
+import { HeroCentered } from '@launch77-shared/lib-marketing-ui'
+import { Button, Badge } from '@launch77-shared/lib-ui'
+
+export default function HomePage() {
+  return (
+    <HeroCentered
+      badge={<Badge variant="secondary">New Release</Badge>}
+      headline="Build Your Next SaaS in Days, Not Months"
+      subheadline="The AI-first platform that turns your idea into a production-ready app with pre-built components, auth, payments, and more."
+      primaryCTA={<Button size="lg">Start Building Free</Button>}
+      secondaryCTA={
+        <Button variant="outline" size="lg">
+          View Demo
+        </Button>
+      }
+    />
+  )
+}
+```
+
+### Split Hero with Image
+
+```tsx
+import { HeroSplit } from '@launch77-shared/lib-marketing-ui'
+import { Button, Badge } from '@launch77-shared/lib-ui'
+
+export default function AboutPage() {
+  return (
+    <HeroSplit
+      imageUrl="/images/hero-illustration.png"
+      imageAlt="Platform illustration"
+      imageSide="right"
+      decorativeBlob={true}
+      blobGradient="from-purple-400 to-blue-400"
+      content={
+        <div className="space-y-6">
+          <Badge variant="outline">Product Update</Badge>
+          <h1 className="text-4xl lg:text-5xl font-bold">Ship Faster with Launch77</h1>
+          <p className="text-lg text-muted-foreground">Join thousands of developers using our AI-powered platform to build and deploy web apps at lightning speed.</p>
+          <div className="flex gap-4">
+            <Button size="lg">Get Started</Button>
+            <Button variant="link" size="lg">
+              Learn More →
+            </Button>
+          </div>
+        </div>
+      }
+    />
+  )
+}
+```
+
+### Content Section with Features
+
+```tsx
+import { ContentSection } from '@launch77-shared/lib-marketing-ui'
+import { Badge } from '@launch77-shared/lib-ui'
+
+export default function FeaturesSection() {
+  return (
+    <ContentSection headline="Built for Modern Development">
+      <div className="space-y-4">
+        <Badge>Why Choose Launch77</Badge>
+        <p className="text-lg text-muted-foreground">Everything you need to build, deploy, and scale your applications</p>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
+          <div className="flex gap-4">
+            <div className="text-2xl">🚀</div>
+            <div>
+              <h3 className="font-semibold mb-1">Ship 10x Faster</h3>
+              <p className="text-sm text-muted-foreground">Go from idea to production in days, not months</p>
+            </div>
+          </div>
+          <div className="flex gap-4">
+            <div className="text-2xl">💰</div>
+            <div>
+              <h3 className="font-semibold mb-1">Save Money</h3>
+              <p className="text-sm text-muted-foreground">Reduce development costs by up to 70%</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ContentSection>
+  )
+}
+```
+
+### Marketing Cards Grid
+
+```tsx
+import { CardGrid, MarketingCard } from '@launch77-shared/lib-marketing-ui'
+import { Rocket, Shield, Target } from 'lucide-react'
+
+export default function BenefitsSection() {
+  return (
+    <CardGrid columns={3} gap="md">
+      <MarketingCard icon={Rocket} title="Fast Development" description="Build and ship features at unprecedented speed" variant="feature" />
+      <MarketingCard icon={Shield} title="Premium Quality" description="Enterprise-grade code that scales with your business" variant="solution" />
+      <MarketingCard icon={Target} title="Focus on Users" description="Spend more time on what matters - your customers" variant="feature" />
+    </CardGrid>
+  )
+}
+```
+
+### Individual Marketing Card
+
+```tsx
+import { MarketingCard } from '@launch77-shared/lib-marketing-ui'
+import { Zap } from 'lucide-react'
+
+export default function FeatureCard() {
+  return <MarketingCard icon={Zap} title="Beautiful Design" description="Pre-built components that look great out of the box" variant="feature" />
+}
+```
+
+### Call-to-Action Button
+
+```tsx
+import { CTAButton } from '@launch77-shared/lib-marketing-ui'
+
+export default function CTASection() {
+  return (
+    <CTAButton
+      href="/signup"
+      size="lg"
+      trackingData={{
+        location: 'hero-section',
+        text: 'Start Free Trial',
+        destination: '/signup',
+      }}
+    >
+      Start Free Trial
+    </CTAButton>
+  )
+}
+```
+
+### Cookie Consent Banner
+
+```tsx
+import { CookieConsent } from '@launch77-shared/lib-marketing-ui'
+
+// Add to your root layout
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <CookieConsent privacyPolicyUrl="/privacy" />
+      </body>
+    </html>
+  )
+}
+```
+
+### Analytics Wrapper
+
+```tsx
+import { AnalyticsWrapper } from '@launch77-shared/lib-marketing-ui'
+
+// Wrap your app to enable consent-based analytics
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <AnalyticsWrapper>{children}</AnalyticsWrapper>
+      </body>
+    </html>
+  )
+}
+```
+
+### Fluid Typography
+
+```tsx
+import { FluidHeading, FluidText } from '@launch77-shared/lib-marketing-ui'
+
+export default function ResponsiveContent() {
+  return (
+    <div>
+      <FluidHeading level={1} minSize={32} maxSize={64}>
+        Responsive Heading
+      </FluidHeading>
+      <FluidText minSize={16} maxSize={20}>
+        This text scales fluidly between viewport sizes for optimal readability.
+      </FluidText>
+    </div>
+  )
+}
+```
+
+## Component Props
+
+### HeroCentered
+
+- `headline` (string, required) - Main headline text
+- `subheadline` (string, optional) - Subheadline/tagline
+- `badge` (ReactNode, optional) - Badge element to display above headline
+- `primaryCTA` (ReactNode, optional) - Primary call-to-action button
+- `secondaryCTA` (ReactNode, optional) - Secondary call-to-action button
+- `background` (string, optional) - Background CSS classes (default: 'bg-white')
+- `className` (string, optional) - Additional CSS classes
+- `id` (string, optional) - HTML id attribute (default: 'hero')
+
+### HeroSplit
+
+- `imageUrl` (string, required) - Image source URL
+- `imageAlt` (string, required) - Image alt text for accessibility
+- `imageSide` ('left' | 'right', optional) - Image position (default: 'right')
+- `content` (ReactNode, required) - Hero content (headline, text, buttons, etc.)
+- `decorativeBlob` (boolean, optional) - Show decorative background blob (default: false)
+- `blobGradient` (string, optional) - Tailwind gradient classes for blob
+- `background` (string, optional) - Background CSS classes (default: 'bg-white')
+- `className` (string, optional) - Additional CSS classes
+- `id` (string, optional) - HTML id attribute (default: 'hero')
+- `imageSizes` (string, optional) - Next.js Image sizes attribute
+- `imagePriority` (boolean, optional) - Next.js Image priority loading (default: true)
+
+### ContentSection
+
+- `headline` (string, optional) - Section headline
+- `children` (ReactNode, required) - Section content
+- `maxWidth` ('narrow' | 'medium' | 'wide', optional) - Max width constraint (default: 'medium')
+- `textAlign` ('left' | 'center' | 'right', optional) - Text alignment (default: 'center')
+- `background` (string, optional) - Background CSS classes (default: 'bg-white')
+- `className` (string, optional) - Additional CSS classes
+- `id` (string, optional) - HTML id attribute
+
+### MarketingCard
+
+- `icon` (LucideIcon, optional) - Lucide icon component (not string)
+- `title` (string, required) - Card title
+- `description` (string, required) - Card description
+- `variant` ('feature' | 'problem' | 'solution', optional) - Visual variant (default: 'feature')
+- `iconBadgeColor` (string, optional) - Override badge background color
+- `iconColor` (string, optional) - Override icon color
+- `className` (string, optional) - Additional CSS classes
+- `children` (ReactNode, optional) - Additional content below description
+
+### CardGrid
+
+- `columns` (2 | 3 | 4, optional) - Number of columns (default: 3)
+- `gap` ('sm' | 'md' | 'lg' | 'xl', optional) - Grid gap size (default: 'md')
+- `className` (string, optional) - Additional CSS classes
+- `children` (ReactNode, required) - Grid items (typically MarketingCard components)
+
+### CTAButton
+
+- `href` (string, required) - Link destination URL
+- `children` (ReactNode, required) - Button text
+- `external` (boolean, optional) - Open in new tab (default: true)
+- `trackingData` (object, optional) - Analytics tracking data with `location`, `text`, and `destination`
+- `variant` ('default' | 'outline' | 'secondary' | 'ghost' | 'link', optional) - Button style variant
+- `size` ('sm' | 'md' | 'lg', optional) - Button size
+- `className` (string, optional) - Additional CSS classes
+- `onClick` (function, optional) - Click handler
+
+### CookieConsent
+
+- `privacyPolicyUrl` (string, optional) - Privacy policy page URL (default: '/privacy')
+- `debug` (boolean, optional) - Enable debug mode to always show banner (default: false)
+
+## Styling
+
+All marketing components use Tailwind CSS and the Launch77 design system tokens. You can customize their appearance using:
+
+- **Tailwind classes** - Apply utility classes via `className` prop
+- **Design tokens** - Use CSS variables from the design system
+- **Brand customization** - Edit `src/modules/design-system/config/brand.css`
+
+## Live Examples
+
+Visit [http://localhost:3000/marketing-ui-examples](http://localhost:3000/marketing-ui-examples) to see all components in action.
+
+## Design Principles
+
+The Marketing UI library follows these principles:
+
+1. **Conversion-focused** - Components are optimized for marketing and conversion goals
+2. **Accessible** - WCAG 2.1 AA compliant with keyboard navigation and screen reader support
+3. **Responsive** - Mobile-first design that works on all screen sizes
+4. **Performance** - Optimized for Core Web Vitals and fast page loads
+5. **Customizable** - Easy to adapt to your brand while maintaining consistency
+
+## Integration with UI Library
+
+Marketing UI components work seamlessly with the base UI library components:
+
+```tsx
+import { HeroCentered } from '@launch77-shared/lib-marketing-ui'
+import { Button, Badge } from '@launch77-shared/lib-ui'
+
+// Mix marketing and UI components
+;<HeroCentered
+  badge={<Badge>New</Badge>} // UI library component
+  headline="Welcome"
+  primaryCTA={<Button>Get Started</Button>} // UI library component
+/>
+```
+
+## Utility Functions
+
+The library also exports utility functions:
+
+```tsx
+import { cn } from '@launch77-shared/lib-marketing-ui'
+
+// Merge Tailwind classes
+const className = cn('base-class', condition && 'conditional-class', 'another-class')
+```
+
+## Important Notes
+
+- **Icons**: MarketingCard accepts Lucide icon components (from `lucide-react`), not strings or emojis
+- **HeroSplit**: Uses a `content` prop for the hero content, not individual headline/CTA props
+- **CTAButton**: Renders as an anchor tag with tracking - requires `href` prop
+- **CardGrid**: Uses children pattern - pass MarketingCard components as children, not a `cards` array prop
+
+## External Images Configuration
+
+The HeroSplit component uses Next.js's `<Image>` component for optimized image loading. If you use external image URLs (like CDNs or services like Unsplash), you need to configure them in `next.config.js`:
+
+```js
+// next.config.js
+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'images.unsplash.com',
+        port: '',
+        pathname: '/**',
+      },
+      // Add other image hosts as needed
+      {
+        protocol: 'https',
+        hostname: 'your-cdn.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
+}
+```
+
+**Why is this needed?**
+Next.js blocks external images by default for security reasons. This configuration tells Next.js which domains are safe to optimize images from.
+
+**Common image hosts to add:**
+
+- Unsplash: `images.unsplash.com`
+- Your CDN: e.g., `cdn.yoursite.com`
+- Cloud storage: e.g., `storage.googleapis.com`, `s3.amazonaws.com`
+
+**Error message if not configured:**
+
+```
+Error: Invalid src prop (...) on `next/image`, hostname "..." is not configured under images in your `next.config.js`
+```
+
+See the [Next.js Image Optimization docs](https://nextjs.org/docs/app/api-reference/components/image#remotepatterns) for more details.

package/templates/src/modules/marketing-ui/index.ts

@@ -0,0 +1,2 @@
+// Re-export all Marketing UI components for convenient importing
+export * from '@launch77-shared/lib-marketing-ui'