@actionpainting/brandsnippets

ActionPainting.ch Brand Snippets für React - Modulares Branding & UI Component System optimiert für Figma Make.

Version 1.0.1 - Public Package 🚀

🎨 Features

• ✅ Visual Branding System - Farben (Blau #0000FF, Rot #EC0C00), Questrial Font
• ✅ Verbal Branding System - Herzlich, menschlich, klar, du-Ansprache
• ✅ Ready-to-use Components - Branding Snippet, Gift Checkout
• ✅ TypeScript Support - Vollständige Type Definitions
• ✅ Figma Make Optimized - Perfekt für AI-gestützte App-Entwicklung

📦 Installation

npm install @actionpainting/brandsnippets

Das Package ist public - keine Auth nötig! 🎉

🚀 Quick Start

Branding System laden

import { BrandingSnippet } from '@actionpainting/brandsnippets/branding';

export default function App() {
  return (
    <div>
      {/* Lädt ActionPainting Branding (Fonts, CSS) */}
      <BrandingSnippet />
      
      <h1>Meine App mit ActionPainting Branding</h1>
    </div>
  );
}

Branding-Daten direkt nutzen

import { brandingSystem } from '@actionpainting/brandsnippets/branding';

function MyButton() {
  return (
    <button
      style={{
        backgroundColor: brandingSystem.colors.primary.blue,
        color: 'white',
        fontFamily: brandingSystem.typography.font.primary,
        padding: '12px 24px',
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer',
      }}
    >
      Jetzt buchen
    </button>
  );
}

Gift Checkout Component

import { useState } from 'react';
import { BrandingSnippet } from '@actionpainting/brandsnippets/branding';
import { GiftCheckoutSnippet } from '@actionpainting/brandsnippets/gift-checkout';

function GiftShop() {
  const [showCheckout, setShowCheckout] = useState(false);

  return (
    <>
      <BrandingSnippet />
      
      <button onClick={() => setShowCheckout(true)}>
        🎁 Gutschein kaufen
      </button>

      {showCheckout && (
        <div className="modal-overlay">
          <GiftCheckoutSnippet
            preselectedType="voucher"
            preselectedAmount={150}
            onComplete={(data) => {
              console.log('Order completed:', data);
              setShowCheckout(false);
            }}
            onCancel={() => setShowCheckout(false)}
          />
        </div>
      )}
    </>
  );
}

🎯 Brand Guidelines

Visual Branding

• Primärfarbe Blau: #0000FF
• Primärfarbe Rot: #EC0C00
• Schrift: Questrial (Google Font)
• Klare Hierarchie
• Motion mit Bedacht

Verbal Branding

• Du-Ansprache (nie "Sie")
• Kurze, klare Sätze
• Herzlich & menschlich - keine Marketing-Buzzwords
• Authentisch & bodenständig

🧩 Components

BrandingSnippet

Lädt das ActionPainting Branding System (Fonts, CSS).

import { BrandingSnippet } from '@actionpainting/brandsnippets/branding';

<BrandingSnippet />

Tipp: Rendere dies einmal ganz oben in deiner App!

GiftCheckoutSnippet

Multi-Step Checkout für Gutscheine und Erlebnisse.

Features:

• 3-Step Flow (Auswahl → Personalisierung → Zahlung)
• Vorauswahl-Support
• Inline-Validierung
• Responsive Design
• Verbal Branding integriert

Props:

{
  preselectedType?: 'voucher' | 'experience';
  preselectedAmount?: number;
  preselectedExperienceId?: string;
  initialStep?: 'select' | 'personalize' | 'payment';
  onComplete: (data: CheckoutData) => void;
  onCancel: () => void;
}

🤖 Figma Make Prompt

Wenn du dieses Package in einem neuen Figma Make Projekt nutzen willst:

Installiere @actionpainting/brandsnippets

Importiere BrandingSnippet aus '@actionpainting/brandsnippets/branding' und rendere es ganz oben.

Erstelle [DEINE ANFORDERUNG]. Nutze ActionPainting Branding: Blau #0000FF, Rot #EC0C00, Questrial Font, herzlicher du-Ton.

🛠 Development

# Install dependencies
npm install

# Build package
npm run build

# Publish (automatisch via GitHub Actions)
git push origin main

📋 Requirements

• React 18+
• Compatible with Vite
• TypeScript 5+ (optional)

🔗 Links

• npm Package: https://www.npmjs.com/package/@actionpainting/brandsnippets
• GitHub (Source): https://github.com/lostinabox/Actsnippetsmanager
• GitHub (Release): https://github.com/lostinabox/action-npm
• Figma Make: https://www.figma.com/make

📄 License

UNLICENSED - © ActionPainting.ch

💬 Support

• Email: [email protected]
• Issues: https://github.com/lostinabox/Actsnippetsmanager/issues

Made with ❤️ for Figma Make