Agentur Website Sections

Für Designstudios, Branding- und Kreativagenturen. Arbeiten mit Filter, Vorschau beim Zeigen und dem Kunden im O-Ton, Leistungen im Detail, die Arbeitsweise als Wochenplan, das Team und ein Briefing in vier Schritten.

5 Variants

Kategorie wechseln

Arbeiten, die sprechen, Menschen, die antworten

Kunden beauftragen eine Agentur wegen ihrer Arbeiten und bleiben wegen der Menschen. Diese Sections beginnen mit Arbeiten, die ein Ergebnis und die Worte des Kunden tragen, erklären Leistungen und Arbeitsweise Woche für Woche, stellen das Team vor und enden mit einem Briefing, das das erste Gespräch ergiebig macht.

„Arbeiten“ filtert Projekte nach Disziplin mit Anzahl, beim Hover zoomt das Titelbild und eine Seite des Ergebnisses blendet ein, jedes Projekt trägt ein Ergebnis und ein Kundenzitat. „Leistungen“ listet Disziplinen mit dem, was der Kunde bekommt, Dauer und Einstiegspreis. „Arbeitsweise“ legt die Phasen auf eine Linie neben einen Wochenplan, zeigt man auf eine Phase, hebt sie sich an beiden Stellen. „Team“ zoomt das gewählte Porträt, neigt es mit dem Zeiger und holt Worte, Schwerpunkt und Durchwahl herein. Die „Projektanfrage“ fragt in vier Schritten Umfang, Budget, Zeitraum und Kontakt ab und schlägt einen passenden ersten Schritt vor.

Zeig sechs starke Projekte statt zwanzig, jedes mit einem messbaren Ergebnis. Einstiegspreise bei den Leistungen sortieren Anfragen schon vor dem ersten Gespräch. Die Projektanfrage tritt an die Stelle des allgemeinen Kontaktformulars und gibt beiden Seiten einen klaren Startpunkt.

ArbeitenNeu in 1.2

Nach Disziplin filtern, mit Anzahl. Die Arbeiten steigen nacheinander herein, beim Zeigen zoomt das Titelbild und eine Seite des Ergebnisses blendet ein, jede Arbeit trägt ein Ergebnis und die Worte des Kunden.

Installv1.0.0

aiw add @ai-website/creative-agency

Bringt mit utils, kit, button, icon, input, textarea, section, motion

Usage

<CreativeAgency variant="work" cases={[{ id, client, title, disciplines, year, result: { value, label }, quote: { text, name, role }, media, preview, href }]} />

Source

LeistungenNeu in 1.2

Disziplinen als nummerierte Liste, an der gewählten schiebt sich eine Linie herein. Ihr Bild zoomt herein, was du bekommst steigt Punkt für Punkt auf, Dauer und Einstiegspreis stehen neben dem Knopf.

Installv1.0.0

aiw add @ai-website/creative-agency

Bringt mit utils, kit, button, icon, input, textarea, section, motion

Usage

<CreativeAgency variant="services" services={[{ id, title, text, deliverables, duration, from, icon, media }]} />

Source

ArbeitsweiseNeu in 1.2

Die Phasen an einer Linie, die sich beim Scrollen füllt, jede mit dem, was du bekommst, und deinem Anteil. Daneben der Wochenplan, seine Balken wachsen herein, Zeigen auf eine Phase hebt sie an beiden Stellen hervor.

Installv1.0.0

aiw add @ai-website/creative-agency

Bringt mit utils, kit, button, icon, input, textarea, section, motion

Usage

<CreativeAgency variant="process" steps={[{ id, title, text, weeks, deliverable, you, icon }]} />

Source

TeamNeu in 1.2

Eine Person wählen oder auf sie zeigen, das Porträt zoomt herein und neigt sich mit dem Zeiger, ihre Worte, Schwerpunkte und ein direkter Draht wechseln. Darunter die Zahlen zum Team.

Installv1.0.0

aiw add @ai-website/creative-agency

Bringt mit utils, kit, button, icon, input, textarea, section, motion

Usage

<CreativeAgency variant="team" team={[{ id, name, role, quote, bio, focus, email, media }]} teamStats={[{ value, label }]} />

Source

ProjektanfrageNeu in 1.2

Ein Briefing in vier Schritten, Umfang, Budget, Start und Kontakt. Jeder Schritt prüft sich vor dem nächsten, die Übersicht füllt sich mit jeder Wahl und nennt die übliche Dauer und einen passenden ersten Schritt.

Installv1.0.0

aiw add @ai-website/creative-agency

Bringt mit utils, kit, button, icon, input, textarea, section, motion

Usage

<CreativeAgency variant="brief" briefServices={[{ id, label, icon, weeks: [6, 8], from }]} budgets={[{ id, min, max }]} timings={[{ id, label, hint }]} onBrief={(brief) => …} />

Source

Details

Was Kreativagentur mitbringt, aus Registry und Quellcode gelesen.

Bereich: Industries
Variants: 5
Version: 1.0.0 · seit 1.2.0
Datei: components/ui/creative-agency.tsx
Bringt mit: utilskitbutton icon input textareasectionmotion
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 56 eigene Texte
Studio: Im Code anpassen
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle CreativeAgencyProps aus components/ui/creative-agency.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
CreativeAgencyVariant
workservicesprocessteambrief
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
casesoptional
AgencyCase[]
work
servicesoptional
AgencyService[]
services
servicesNoteoptional
string
services: a line under the list on the desktop, e.g. an offer to talk
stepsoptional
AgencyStep[]
process
teamoptional
AgencyMember[]
team
teamStatsoptional
{ value: string; label: string }[]
team: a few numbers under the team
briefServicesoptional
AgencyBriefService[]
brief
budgetsoptional
{ id: string; min: number; max?: number }[]
brief: budget ranges, max left out for the open top range
timingsoptional
{ id: string; label: string; hint?: string }[]
onBriefoptional
(brief: AgencyBrief) => void
brief: called with the finished brief, the thank you shows either way
linksoptional
{ contact?: string }
currencyoptional
string

Eingebaute Texte

Diese Texte schreibt Kreativagentur selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 56 Texte anzeigen

Schlüssel	Englisch	Deutsch
filter	Englisch Discipline	Deutsch Disziplin
all	Englisch All work	Deutsch Alle Arbeiten
view	Englisch View the case	Deutsch Case ansehen
result	Englisch Result	Deutsch Ergebnis
services	Englisch Services	Deutsch Leistungen
deliverables	Englisch What you get	Deutsch Das bekommst du
duration	Englisch Duration	Deutsch Dauer
from	Englisch From	Deutsch Ab
fromPrice	Englisch from {price}	Deutsch ab {price}
ask	Englisch Ask about {name}	Deutsch {name} anfragen
talk	Englisch Book a free call	Deutsch Kostenloses Gespräch buchen
weeksN	Englisch {n} weeks	Deutsch {n} Wochen
weekN	Englisch {n} week	Deutsch {n} Woche
plan	Englisch Timeline	Deutsch Zeitplan
youGet	Englisch You get	Deutsch Du bekommst
yourPart	Englisch Your part	Deutsch Dein Anteil
team	Englisch Team	Deutsch Team
writeTo	Englisch Write to {name}	Deutsch {name} schreiben
focus	Englisch Works on	Deutsch Arbeitet an
stepOf	Englisch Step {n} of {total}	Deutsch Schritt {n} von {total}
s1	Englisch What do you need?	Deutsch Was brauchst du?
s2	Englisch Your budget	Deutsch Dein Budget
s3	Englisch When should it start?	Deutsch Wann soll es losgehen?
s4	Englisch How do we reach you?	Deutsch Wie erreichen wir dich?
s1Short	Englisch Scope	Deutsch Umfang
s2Short	Englisch Budget	Deutsch Budget
s3Short	Englisch Timing	Deutsch Start
s4Short	Englisch Contact	Deutsch Kontakt
pickMany	Englisch Pick everything that fits	Deutsch Wähle alles, was passt
servicesError	Englisch Pick at least one service	Deutsch Wähle mindestens eine Leistung
budgetError	Englisch Pick a budget range	Deutsch Wähle einen Budgetrahmen
timingError	Englisch Pick a start	Deutsch Wähle einen Start
name	Englisch Your name	Deutsch Dein Name
email	Englisch Email	Deutsch E-Mail
company	Englisch Company	Deutsch Firma
message	Englisch What is it about?	Deutsch Worum geht es?
messageHint	Englisch A few sentences are enough. Links to examples help.	Deutsch Ein paar Sätze reichen. Links zu Beispielen helfen.
nameError	Englisch Please enter your name	Deutsch Bitte gib deinen Namen ein
emailError	Englisch Please enter a valid email address	Deutsch Bitte gib eine gültige E-Mail-Adresse ein
back	Englisch Back	Deutsch Zurück
next	Englisch Next step	Deutsch Weiter
send	Englisch Send the brief	Deutsch Briefing senden
summary	Englisch Your brief	Deutsch Dein Briefing
empty	Englisch Your choices show up here.	Deutsch Hier erscheint, was du wählst.
typical	Englisch Projects like this usually take {min} to {max} weeks.	Deutsch Projekte dieser Art dauern meist {min} bis {max} Wochen.
budgetFrom	Englisch Projects of this scope usually start at {price}. We will find a good first step together.	Deutsch Projekte in diesem Umfang starten meist ab {price}. Wir finden gemeinsam einen guten ersten Schritt.
upTo	Englisch up to {max}	Deutsch bis {max}
over	Englisch from {min}	Deutsch ab {min}
range	Englisch {min} to {max}	Deutsch {min} bis {max}
nextTitle	Englisch What happens next	Deutsch So geht es weiter
next1	Englisch We read your brief and look at your current brand.	Deutsch Wir lesen dein Briefing und sehen uns deinen Auftritt an.
next2	Englisch Within one working day you get our questions.	Deutsch Innerhalb eines Werktags bekommst du unsere Fragen.
next3	Englisch A first call of 30 minutes, free of charge.	Deutsch Ein erstes Gespräch von 30 Minuten, kostenlos.
thanks	Englisch Thank you, {name}. Your brief is with us. You will hear from us within one working day with our questions and a date for a first call.	Deutsch Danke, {name}. Dein Briefing ist bei uns. Du hörst innerhalb eines Werktags von uns, mit unseren Fragen und einem Termin für ein erstes Gespräch.
again	Englisch Write another brief	Deutsch Neues Briefing schreiben
edit	Englisch Change {step}	Deutsch {step} ändern

Aus dem Quellcode der Component abgeleitet.

Kreativagentur reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
Setzt aria-checked, aria-current, aria-describedby, aria-invalid, aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen radio, radiogroup und status.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 5 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Kreativagentur?

Mit aiw add @ai-website/creative-agency. Der Befehl legt die Datei components/ui/creative-agency.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, input, textarea, section und motion. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Kreativagentur?

5 Varianten, Arbeiten, Leistungen, Arbeitsweise, Team und Projektanfrage. Du wählst sie mit der Prop variant, zum Beispiel variant="services".

Kann ich die Texte von Kreativagentur übersetzen?

Ja. Kreativagentur bringt 56 eigene Texte auf Deutsch und Englisch mit, etwa „Disziplin“, „Alle Arbeiten“ und „Case ansehen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Kreativagentur einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Kreativagentur mit aiw_components und installieren sie mit aiw_add @ai-website/creative-agency. Nenn im Prompt die Variante, etwa variant="work", dann schreibt der Assistent deine Inhalte direkt in die Props.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Kreativagentur stehen.

Arbeiten, die sprechen, Menschen, die antworten

Kreativagentur

ArbeitenNeu in 1.2

LeistungenNeu in 1.2

ArbeitsweiseNeu in 1.2

TeamNeu in 1.2

ProjektanfrageNeu in 1.2

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit