Creative agency website sections

For design studios, branding and creative agencies. Cases with a filter, a preview on hover and the client in their own words, services in detail, the way of working as a week plan, the team and a brief in four steps.

5 variants

Switch category

Work that speaks, people who answer

Clients hire an agency for its work and stay for the people. These sections lead with cases that carry a result and the words of the client, explain the services and the process week by week, introduce the team and end with a brief that makes the first call productive.

Selected work filters cases by discipline with counts, the cover zooms and a page of the result fades in on hover, every case carries one result and a client quote. Services lists disciplines with what the client gets, duration and starting price. How we work puts the phases on a line beside a week plan, pointing at a phase lifts it in both places. Team zooms the chosen portrait, tilts it with the pointer and swaps in their words, focus and a direct line. Project brief asks scope, budget, timing and contact in four steps and suggests a fitting first step.

Show six strong cases rather than twenty, each with one measurable result. Starting prices on the services sort enquiries before the first call. The brief takes the place of a generic contact form and gives both sides a clear starting point.

Selected workNew in 1.2

Filter by discipline with counts. Cases rise in one after another, the cover zooms and a page of the result fades in when you point at it, every case carries one result and the words of the client.

Installv1.0.0

aiw add @ai-website/creative-agency

Brings along 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

ServicesNew in 1.2

Disciplines as a numbered list, a line slides in at the chosen one. Its picture zooms in, what you get rises point by point, duration and starting price sit next to the button.

Installv1.0.0

aiw add @ai-website/creative-agency

Brings along utils, kit, button, icon, input, textarea, section, motion

Usage

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

Source

How we workNew in 1.2

The phases on a line that fills while scrolling, each with what you get and your part. Next to it the week plan, its bars grow in, pointing at a phase lifts it in both places.

Installv1.0.0

aiw add @ai-website/creative-agency

Brings along utils, kit, button, icon, input, textarea, section, motion

Usage

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

Source

TeamNew in 1.2

Pick a person or point at them, the portrait zooms in and tilts with the pointer, their words, focus and a direct line swap in. The team numbers sit underneath.

Installv1.0.0

aiw add @ai-website/creative-agency

Brings along 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

Project briefNew in 1.2

A brief in four steps, scope, budget, timing and contact. Each step checks itself before the next, the summary fills with every choice and tells the typical length and a fitting first step.

Installv1.0.0

aiw add @ai-website/creative-agency

Brings along 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

What Creative agency brings along, read from the registry and the source.

Area: Industries
Variants: 5
Version: 1.0.0 · since 1.2.0
File: components/ui/creative-agency.tsx
Brings along: utilskitbutton icon input textareasectionmotion
npm packages: None
Languages: English and German, 56 texts of its own
Studio: Adjust in code
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The CreativeAgencyProps interface from components/ui/creative-agency.tsx, with the comments from the code.

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

Built-in texts

Creative agency writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 56 texts

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

Read from the source of the component.

Creative agency handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
Sets aria-checked, aria-current, aria-describedby, aria-invalid, aria-label, aria-live and aria-pressed, so screen readers announce purpose and state.
Uses the roles radio, radiogroup and status.
Announces changes through a live region without moving focus.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 5 places in the code switch motion off then.

Frequent questions

How do I install Creative agency?

With aiw add @ai-website/creative-agency. The command puts components/ui/creative-agency.tsx into your project, the code is yours from then on. It brings along button, icon, input, textarea, section and motion. It needs no further npm packages.

Which variants does Creative agency have?

5 variants, Selected work, Services, How we work, Team and Project brief. You pick one with the variant prop, for example variant="services".

Can I translate the texts of Creative agency?

Yes. Creative agency carries 56 texts of its own in English and German, such as “Discipline”, “All work” and “View the case”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Creative agency?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Creative agency with aiw_components and install it with aiw_add @ai-website/creative-agency. Name the variant in your prompt, for example variant="work", and the assistant writes your content straight into the props.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Creative agency on a page.

Work that speaks, people who answer

Creative agency

Selected workNew in 1.2

ServicesNew in 1.2

How we workNew in 1.2

TeamNew in 1.2

Project briefNew in 1.2

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with