AGÊNC[IA] TLX//Design System//v2.0
07
Templates
Page templates canonicos da TLX. Wireframes, grid specs, breakpoints e componentes por tipo de pagina.
01LANDING PAGE
Template
Landing Page
Single-page scroll com 12 secoes. Layout principal do site institucional agenciatlx.com.
URL: agenciatlx.com
Wireframe
┌──────────────────────────────────────────────┐
│ [Logo] [Nav] [CTA btn] │ Header (sticky)
├──────────────────────────────────────────────┤
│ │
│ HEADLINE H1 (max-w-4xl) │
│ Subheadline H2 │
│ [CTA Button] [Secondary] │
│ │ 01 Hero
├──────────────────────────────────────────────┤
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │logo│ │logo│ │logo│ │logo│ │ 02 Social Proof
│ └────┘ └────┘ └────┘ └────┘ │
├──────────────────────────────────────────────┤
│ "Sua agencia te pergunta o que fazer..." │ 03 Enemy
│ [Pain points grid 2x2] │
├──────────────────────────────────────────────┤
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Core │ │ Build │ │ Scale │ │ 04 Services
│ │ icon+txt │ │ icon+txt │ │ icon+txt │ │
│ └──────────┘ └──────────┘ └──────────┘ │
├──────────────────────────────────────────────┤
│ Before → After │
│ [Case card] [Case card] [Case card] │ 05 Cases
├──────────────────────────────────────────────┤
│ [Metric] [Metric] [Metric] [Metric] │ 06 Numbers
├──────────────────────────────────────────────┤
│ Step 1 → Step 2 → Step 3 → Step 4 │ 07 Process
├──────────────────────────────────────────────┤
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ Tool │ │ Tool │ │ Tool │ │ 08 Stack
│ └──────┘ └──────┘ └──────┘ │
├──────────────────────────────────────────────┤
│ Photo Name / Role │
│ "Quote do fundador..." │ 09 About
├──────────────────────────────────────────────┤
│ ┌──────────────────────────────────────┐ │
│ │ Headline CTA │ │
│ │ [Agendar diagnostico] │ │ 10 CTA
│ └──────────────────────────────────────┘ │
├──────────────────────────────────────────────┤
│ Q: Pergunta? │
│ A: Resposta... │ 11 FAQ
│ Q: Pergunta? │
├──────────────────────────────────────────────┤
│ [Logo] Links Social Legal │ 12 Footer
└──────────────────────────────────────────────┘
Grid Specs
| Propriedade | Valor |
|---|---|
| max-width | 1280px (max-w-7xl) |
| columns | 12-column grid |
| gutter | 24px (gap-6) |
| margin | auto (mx-auto) |
| padding-x | 24px (px-6) |
| section-gap | 96px (py-24) |
Breakpoints
| Breakpoint | Min-width | Colunas | Padding |
|---|---|---|---|
| mobile | 0px | 1 col (stack) | 16px |
| sm | 640px | 2 cols | 24px |
| md | 768px | 6 cols | 24px |
| lg | 1024px | 12 cols | 24px |
| xl | 1280px | 12 cols (capped) | 24px |
Componentes
| Componente | Secao | Variante |
|---|---|---|
| NavBar | Header | sticky, blur backdrop |
| Hero | 01 | centered, gradient bg |
| LogoBar | 02 | marquee horizontal |
| PainGrid | 03 | 2x2 cards |
| ServiceCard | 04 | icon + title + desc |
| CaseCard | 05 | before/after, metrics |
| MetricCounter | 06 | animated number |
| ProcessStep | 07 | numbered timeline |
| ToolBadge | 08 | icon + label |
| FounderCard | 09 | photo + quote |
| CTABanner | 10 | accent bg, centered |
| Accordion | 11 | FAQ expand/collapse |
| Footer | 12 | 4-col links + legal |
Behaviors
01Smooth scroll entre secoes via anchor links com scroll-behavior: smooth
02Header sticky com backdrop-blur ativado apos 64px de scroll
03Secoes entram com FadeIn (opacity + translateY) ao entrar no viewport
04MetricCounter anima de 0 ate valor final com easing ao entrar no viewport
05LogoBar em marquee infinito horizontal (CSS animation)
06CTA button com hover scale(1.02) e transition 200ms
07FAQ Accordion com animacao de altura (max-height transition)
08Mobile: nav colapsa em hamburger menu com slide-in overlay
09Lazy loading de imagens abaixo do fold (loading='lazy')
10Prefetch de rotas internas via Next.js Link
02BRANDBOOK PAGE
Template
Brandbook Page
Sidebar navigation + content area. Usado em todas as paginas do brand.agenciatlx.com com navegacao lateral por secoes.
URL: brand.agenciatlx.com/*
Wireframe
┌──────────────────────────────────────────────┐
│ [Logo] [Home] [Guidelines] [...] [v1.0] │ Top Nav (sticky)
├────────┬─────────────────────────────────────┤
│ │ │
│ 01 ● │ TLX // Section // v1.0 │
│ 02 │ NN Title │
│ 03 │ ────────────────────────── │
│ 04 │ Subtitle text... │
│ 05 │ │
│ │ 01 SECTION LABEL │
│ │ ┌─────────────────────────────┐ │
│ │ │ Content block │ │
│ │ │ (cards, tables, grids...) │ │
│ │ └─────────────────────────────┘ │
│ │ │
│ │ 02 SECTION LABEL │
│ │ ┌─────────────────────────────┐ │
│ │ │ Content block │ │
│ │ └─────────────────────────────┘ │
│ │ │
│ nav │ ...repeats per section... │
│ w-60 │ max-w-7xl │
│ sticky│ │
├────────┴─────────────────────────────────────┤
│ Footer │
└──────────────────────────────────────────────┘
Grid Specs
| Propriedade | Valor |
|---|---|
| max-width | 1280px (max-w-7xl) |
| layout | flex: sidebar (w-60) + content (flex-1) |
| gap | 48px (gap-12) |
| padding-x | 24px (px-6) |
| padding-y | 80px (py-20) |
| section-gap | 96px (space-y-24) |
Breakpoints
| Breakpoint | Min-width | Sidebar | Layout |
|---|---|---|---|
| mobile | 0px | Escondida | Stack vertical |
| sm | 640px | Escondida | Stack vertical |
| md | 768px | Escondida | Stack vertical |
| lg | 1024px | Visivel (w-60, sticky) | Flex horizontal |
| xl | 1280px | Visivel (w-60, sticky) | Flex horizontal (capped) |
Componentes
| Componente | Uso | Props |
|---|---|---|
| Sidebar | Navegacao lateral | sections: SidebarSection[] |
| SectionHeader | Topo da pagina | number, title, sectionName, subtitle |
| FadeIn | Animacao de entrada | delay, className |
| SectionLabel | Label de cada secao | number, label |
| ColorSwatch | Pagina Foundations | name, hex, token |
| MotionDemo | Pagina Foundations | easing, duration |
Behaviors
01Sidebar sticky com top-24 (96px do topo) acompanha scroll
02IntersectionObserver ativa item da sidebar conforme secao visivel
03Sidebar escondida em telas < lg (hidden lg:block)
04Secoes usam scroll-mt-24 para compensar header sticky ao navegar por anchor
05FadeIn com framer-motion: opacity 0→1, translateY 16→0, duration 400ms
06Cada secao tem delay progressivo (0, 0.075, 0.15, 0.225...)
07Tables com overflow-x-auto para scroll horizontal em mobile
03COMPONENT SHOWCASE
Template
Component Showcase
Layout Storybook-like para apresentacao isolada de componentes com variant showcase, props table e codigo de uso.
URL: brand.agenciatlx.com/components/*
Wireframe
┌──────────────────────────────────────────────┐
│ [Logo] [Components] [Search] [v1.0] │ Top Nav
├────────┬─────────────────────────────────────┤
│ │ │
│ Group │ Component Name │
│ ├ Btn │ Description text │
│ ├ Card│ ───────────────────────────────── │
│ ├ Tag │ │
│ └ ...│ ┌─────────────────────────────────┐ │
│ │ │ │ │
│ Group │ │ LIVE PREVIEW AREA │ │
│ ├ ... │ │ (rendered component) │ │
│ │ │ │ │
│ tree │ └─────────────────────────────────┘ │
│ nav │ [Default] [Hover] [Active] [Disabled]│
│ │ │
│ │ Props │
│ │ ┌──────┬──────┬────────┬─────────┐ │
│ │ │ Name │ Type │Default │ Desc │ │
│ │ ├──────┼──────┼────────┼─────────┤ │
│ │ │ ... │ ... │ ... │ ... │ │
│ │ └──────┴──────┴────────┴─────────┘ │
│ │ │
│ │ Usage │
│ │ ┌─────────────────────────────────┐ │
│ │ │ <Button variant="primary"> │ │
│ │ │ Label │ │
│ │ │ </Button> │ │
│ │ └─────────────────────────────────┘ │
├────────┴─────────────────────────────────────┤
│ Footer │
└──────────────────────────────────────────────┘
Grid Specs
| Propriedade | Valor |
|---|---|
| max-width | 1440px (max-w-screen-2xl) |
| layout | flex: tree nav (w-64) + main (flex-1) |
| preview-area | Centralizado, border, rounded-xl, p-8 |
| props-table | Full width, border-collapse |
| code-block | font-mono, bg-elevated, rounded-lg, p-4 |
| gap | 32px (gap-8) |
Breakpoints
| Breakpoint | Min-width | Sidebar | Preview |
|---|---|---|---|
| mobile | 0px | Dropdown selector | 100% width |
| sm | 640px | Dropdown selector | 100% width |
| md | 768px | Collapsible panel | 100% width |
| lg | 1024px | Tree nav (w-64) | flex-1 |
| xl | 1280px | Tree nav (w-64) | flex-1, max-w capped |
Componentes
| Componente | Area | Descricao |
|---|---|---|
| ComponentNav | Sidebar | Tree navigation com grupos collapsiveis |
| PreviewPane | Main | Area de preview isolada com bg configuravel |
| VariantTabs | Main | Tabs para alternar estados (Default, Hover, Active, Disabled) |
| PropsTable | Main | Tabela de props com Name, Type, Default, Description |
| CodeBlock | Main | Bloco de codigo com syntax highlight e copy button |
| SearchInput | Header | Busca por nome de componente com Cmd+K |
Behaviors
01Tree nav com expand/collapse por grupo de componentes
02Preview area renderiza componente isolado com padding controlado
03Variant tabs alternam entre estados sem reload
04Props table ordenada alfabeticamente, required props no topo
05Code block com botao copy-to-clipboard e feedback visual
06Search com Cmd+K abre dialog de busca rapida
07URL synced: /components/button reflete componente ativo na tree
08Background toggle: light/dark/checkerboard para testar contraste
04BLOG / CASE STUDY
Template
Blog / Case Study
Layout de artigo com max-width 720px para leitura confortavel. Usado para blog posts, case studies e conteudo longo.
URL: agenciatlx.com/blog/*, agenciatlx.com/cases/*
Wireframe
┌──────────────────────────────────────────────┐
│ [Logo] [Blog] [Cases] [v1.0] │ Top Nav
├──────────────────────────────────────────────┤
│ │
│ ┌──────────────────────┐ │
│ │ COVER IMAGE │ │
│ │ (aspect 16:9) │ │
│ └──────────────────────┘ │
│ │
│ Category Tag │
│ Article Title H1 │
│ Author · Date · 5 min read │
│ ───────────────────── │
│ │ max-w-[720px]
│ Paragraph text... │ mx-auto
│ Paragraph text... │
│ │
│ > Blockquote styled │
│ │
│ ## Heading H2 │
│ Paragraph text... │
│ │
│ ┌──────────────────────┐ │
│ │ INLINE IMAGE │ │
│ │ (full-bleed opt.) │ │
│ └──────────────────────┘ │
│ Caption text │
│ │
│ ## Results │
│ [Metric] [Metric] [Metric] │
│ │
│ ───────────────────── │
│ Tags: #estrategia #caso │
│ ───────────────────── │
│ │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ Prev │ │Share │ │ Next │ │
│ └──────┘ └──────┘ └──────┘ │
│ │
├──────────────────────────────────────────────┤
│ Related Posts │
│ [Card] [Card] [Card] │
├──────────────────────────────────────────────┤
│ Footer │
└──────────────────────────────────────────────┘
Grid Specs
| Propriedade | Valor |
|---|---|
| max-width (content) | 720px (max-w-[720px]) |
| max-width (cover) | 100% (full-bleed) |
| max-width (related) | 1280px (max-w-7xl) |
| margin | auto (mx-auto) |
| padding-x | 24px (px-6) |
| line-height | 1.75 (leading-relaxed) |
| paragraph-gap | 24px (space-y-6) |
Breakpoints
| Breakpoint | Min-width | Content Width | Padding |
|---|---|---|---|
| mobile | 0px | 100% - 32px | 16px |
| sm | 640px | 100% - 48px | 24px |
| md | 768px | 720px | 24px |
| lg | 1024px | 720px | 24px |
| xl | 1280px | 720px | 24px |
Componentes
| Componente | Uso | Descricao |
|---|---|---|
| CoverImage | Hero | Imagem 16:9, full-bleed ou max-width, lazy load |
| ArticleHeader | Meta | Category tag + H1 + author + date + read time |
| Prose | Body | Container com tipografia otimizada para leitura |
| Blockquote | Body | Citacao com border-left accent e italic |
| InlineImage | Body | Imagem com caption, full-bleed opcional |
| MetricGrid | Results | Grid 3-col com metricas do case study |
| TagList | Footer | Lista horizontal de tags clicaveis |
| ArticleNav | Footer | Prev/Next article + share buttons |
| RelatedPosts | Below article | Grid 3-col com cards de posts relacionados |
Behaviors
01Cover image com aspect-ratio 16/9 e object-cover
02Tipografia otimizada: font-size 18px, line-height 1.75, max-width 720px
03Headings H2 com scroll-mt-24 para anchor links
04Blockquotes com border-left-4 border-accent e padding-left
05Inline images podem ser full-bleed (breakout do max-width) ou inline
06Reading progress bar no topo (opcional, thin accent bar)
07Share buttons: copiar link, WhatsApp, LinkedIn
08Related posts em grid responsivo: 1 col mobile, 3 cols desktop
09Estimated read time calculado: ~200 palavras/minuto
10SEO: JSON-LD BlogPosting schema automatico