# Research Report Page > A gated research report landing page: a drawn report cover, a download form, five key findings with charts and a benchmark explorer. - Type: React template (Templates) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.0.0 - Install: `npx wingo-ui@latest add research-report-page` - Docs: https://wingo-ui.com/templates/research-report-page ## Interaction The hero sets the report title beside a tilted, layered report cover whose pattern is drawn from the survey's week split, and a gated download form. Name, work email (personal addresses are turned away), company size and role validate on submit and focus the first problem; the button spins, then the form turns into a success card with a Download PDF link, an Add to calendar file for the live briefing and Send to another email (onDownload, or a 900 ms pretend). The headline numbers and the five findings roll up and their charts grow once (final in the server markup). Every chart has a title, the survey question as a note, a legend where it needs one and a View data toggle that swaps the drawing for its table; hover, tap or Tab to a dot group (arrow keys switch groups), a week segment, a slope line, a blocker bar, a Likert answer or a histogram bin for its values, Escape hides the tooltip. The explorer filters the survey by industry and region (selects, bottom sheets on phones) and company size (a segmented control); the respondent count, a small sample warning, four KPIs with their difference from all respondents and three charts update live, and Reset filters clears them. Two sliders (arrow keys work) place your team on the meeting hours and tools distributions with a marker and a Top N% badge. Two chapters expand inline to read; the others show a lock until the report is downloaded. The press block copies an iframe embed code for any chart and a citation in APA, MLA or Chicago. ## Installation ```bash npx wingo-ui@latest add research-report-page ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/research-report-page` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/templates/research-report-page.tsx` - `components/templates/research-report-page-data.ts` npm dependencies: `npm i lucide-react motion` Wingo UI dependencies (installed automatically): - [Marketing Section](https://wingo-ui.com/components/marketing-section) ([Markdown](https://wingo-ui.com/components/marketing-section.md)) - [Marketing Header](https://wingo-ui.com/components/marketing-header) ([Markdown](https://wingo-ui.com/components/marketing-header.md)) - [Marketing Footer](https://wingo-ui.com/components/marketing-footer) ([Markdown](https://wingo-ui.com/components/marketing-footer.md)) - [CTA Section](https://wingo-ui.com/components/cta-section) ([Markdown](https://wingo-ui.com/components/cta-section.md)) - [Animated Counter](https://wingo-ui.com/components/animated-counter) ([Markdown](https://wingo-ui.com/components/animated-counter.md)) - [Avatar](https://wingo-ui.com/components/avatar) ([Markdown](https://wingo-ui.com/components/avatar.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Copy Button](https://wingo-ui.com/components/copy-button) ([Markdown](https://wingo-ui.com/components/copy-button.md)) - [Input](https://wingo-ui.com/components/input) ([Markdown](https://wingo-ui.com/components/input.md)) - [Segmented Control](https://wingo-ui.com/components/segmented-control) ([Markdown](https://wingo-ui.com/components/segmented-control.md)) - [Select](https://wingo-ui.com/components/select) ([Markdown](https://wingo-ui.com/components/select.md)) - [Slider](https://wingo-ui.com/components/slider) ([Markdown](https://wingo-ui.com/components/slider.md)) - [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md)) - [Chart kit](https://wingo-ui.com/components/chart-kit) ([Markdown](https://wingo-ui.com/components/chart-kit.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) ## Usage ```tsx // app/(marketing)/report/page.tsx "use client" import Link from "next/link" import { ResearchReportPage } from "@/components/templates/research-report-page" export default function ReportRoute() { return ( { await fetch("/api/report-leads", { method: "POST", body: JSON.stringify(values) }) }} /> ) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `design?` | `"classic" \| "editorial" \| "bold"` | `"classic"` | The whole page's look. classic: copy, a tilted report cover and a form card side by side, raised chart cards and muted bands over a faint grid; editorial: a printed journal with a masthead, giant start-aligned type, an inline form, numbered ruled findings and flat charts; bold: a deep dark cover band in the page tint with a glowing report, giant numbers on flat tiles and a wordmark footer. ctaProps, headerProps and footerProps still win. | | `background?` | `"plain" \| "soft" \| "glow" \| "aurora" \| "grid" \| "dots"` | `"grid"` | The main background: plain is the bare page color; the others tint the page and add a glow, an aurora, a grid or dots over the first screen. A design picks its own unless you set one. classic uses grid, editorial and bold soft (bold covers it with a dark band in the page tint). | | `backgroundColor?` | `string` | `"oklch(0.62 0.14 275)"` | The tint and glow color of the main background. | | `bandBackground?` | `"muted" \| "tinted" \| "gradient" \| "dots"` | `"muted"` | The secondary background of the alternating bands (classic design). Cards, fields and tiles inside a band are lifted one step above it, so they never share its color. | | `bandColor?` | `string` | `"oklch(0.62 0.14 275)"` | The tint of tinted and gradient bands; defaults to backgroundColor. | | `report?` | `ReportInfo` | `"REPORT_INFO"` | { title, year, subtitle, publisher, volume, published, pages, respondents, countries, marginOfError, fileSize }: the cover, the hero copy and the form. | | `headlines?` | `ReportHeadline[]` | `"REPORT_HEADLINES"` | { id, value, decimals?, prefix?, suffix?, label }: the strip of survey facts under the hero. | | `findings?` | `ReportFinding[]` | `"REPORT_FINDINGS"` | { id, value, prefix?, suffix?, title, body, chartTitle, source, chart }: the key findings; chart.type is dots, stack, slope, ranked or likert. They also feed the embed picker. | | `cells?` | `ReportCell[]` | `"REPORT_CELLS"` | The explorer cube: one cell per industry, size and region with its respondents (n), weekly hours, tools, shares and two histograms. Every view is the respondent weighted average of the matching cells. | | `industries?` | `ReportOption[]` | `"REPORT_INDUSTRIES"` | { value, label }: the industry filter and the sample chart. | | `sizes?` | `ReportOption[]` | `"REPORT_SIZES"` | { value, label }: the company size segments. | | `regions?` | `ReportOption[]` | `"REPORT_REGIONS"` | { value, label }: the region filter. | | `filters?` | `ReportExplorerFilters` | | { industry, size, region }, each an option value or "all": the explorer's filters, controlled. | | `defaultFilters?` | `Partial` | | The explorer's filters on load, uncontrolled; missing keys are "all". | | `onFiltersChange?` | `(filters: ReportExplorerFilters) => void` | | Runs when a filter changes or Reset filters is pressed. | | `defaultMeetingHours?` | `number` | `10` | Where the Your team meeting hours slider starts (0 to 30). | | `defaultTools?` | `number` | `8` | Where the Your team tools slider starts (1 to 20). | | `minSample?` | `number` | `100` | Explorer views with fewer respondents show a small sample warning. | | `quotes?` | `ReportQuote[]` | `"REPORT_QUOTES"` | { id, quote, role, context }: anonymous respondent quotes; the first is the large one. | | `chapters?` | `ReportChapter[]` | `"REPORT_CHAPTERS"` | { id, title, summary, page, unlocked?, body?, takeaway? }: the table of contents; unlocked chapters with a body expand inline. | | `method?` | `ReportMethodItem[]` | `"REPORT_METHOD"` | { id, label, value, detail }: sample, fieldwork, margin of error and weighting. | | `authors?` | `ReportAuthor[]` | `"REPORT_AUTHORS"` | { id, name, role, bio }: the research team, with initials avatars. | | `citations?` | `ReportCitation[]` | `"REPORT_CITATIONS"` | { id, label, text }: the citation styles to copy. | | `pastReports?` | `ReportPastReport[]` | `"REPORT_PAST"` | { id, year, title, headline, pages, href }: earlier editions, each with its own drawn cover. | | `briefing?` | `ReportBriefing` | `"REPORT_BRIEFING"` | { title, start (iso), durationMinutes, timeZone, timeZoneLabel, href }: the live briefing in the announcement, the calendar file and the closing band. | | `companySizes?` | `ReportOption[]` | `"REPORT_COMPANY_SIZES"` | The form's company size options. | | `roles?` | `ReportOption[]` | `"REPORT_ROLES"` | The form's role options. | | `requireWorkEmail?` | `boolean` | `true` | Turns away personal email addresses (freeEmailDomains) with an error. | | `freeEmailDomains?` | `string[]` | `"REPORT_FREE_EMAIL_DOMAINS"` | The personal email domains requireWorkEmail rejects. | | `reportHref?` | `string` | `"/report/acme-state-of-teamwork-2026.pdf"` | The PDF behind Download PDF after the form succeeds. | | `pressKitHref?` | `string` | `"/report/acme-state-of-teamwork-2026-press-kit.zip"` | The press kit link. | | `privacyHref?` | `string` | `"/legal/privacy"` | The privacy policy link under the form. | | `siteUrl?` | `string` | `"https://acme.com"` | The base url of the embed codes and the calendar file. | | `onDownload?` | `(values: ResearchReportDownloadValues) => (void \| Promise)` | | Runs with { name, email, companySize, role } once the form is valid. A returned promise keeps the button loading; a rejection shows an error. Without it: 900 ms, then the success card. | | `coverColor?` | `string` | `"#14213d"` | The drawn report covers' paper color; the cover text turns black or white to match. | | `header?` | `boolean` | `true` | The marketing header; off inside a site layout that has one. | | `footer?` | `boolean` | `true` | The marketing footer. | | `showAnnouncement?` | `boolean` | `true` | The strip above the header bar with the briefing date (labels.announcement). | | `showHeadlines?` | `boolean` | `true` | The survey facts under the hero. | | `showFindings?` | `boolean` | `true` | The key findings and their charts. | | `showExplorer?` | `boolean` | `true` | The benchmark explorer with filters, KPIs, distributions and the Your team sliders. | | `showQuotes?` | `boolean` | `true` | Respondent quotes. | | `showChapters?` | `boolean` | `true` | The table of contents with the readable and locked chapters. | | `showMethodology?` | `boolean` | `true` | Sample, fieldwork, margin of error, weighting and the sample composition chart. | | `showAuthors?` | `boolean` | `true` | The research team and the press contact. | | `showPress?` | `boolean` | `true` | Embed a chart, cite the report and the press kit. | | `showArchive?` | `boolean` | `true` | Past reports. | | `showCta?` | `boolean` | `true` | The closing band. | | `ctaVariant?` | `"inverted" \| "soft" \| "split"` | `"inverted"` | The closing band: a solid band, a soft band, or copy beside the buttons on a raised panel. Applies to the classic design. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | The explorer's size segments, sliders and Top N% badges, and the citation style switch. | | `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Download the report, Download PDF, Get the full report, the header's Get started and the closing band. | | `headerProps?` | `Partial` | | Passed to MarketingHeader. | | `footerProps?` | `Partial` | | Passed to MarketingFooter. | | `ctaProps?` | `Partial` | | Passed to the closing CtaSection, spread last. | | `onSubscribe?` | `(email: string) => (void \| Promise)` | | The footer newsletter; a rejected promise shows an error. Without it: 900 ms, then success. | | `animateIn?` | `boolean` | `true` | The hero rises in once, numbers roll up and charts grow the first time they scroll into view (never under reduced motion). Everything is final in the server markup. | | `locale?` | `string` | `"en-US"` | Intl locale for every number, percent and date. | | `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | `""` | The router link for every link on the page (next/link in an app). | | `labels?` | `Partial` | `"DEFAULT_RESEARCH_REPORT_PAGE_LABELS"` | Every visible string; {placeholders} are filled from the data. | | `className?` | `string` | | Classes for the root. | | `classNames?` | `Partial>` | | Classes for header, hero, cover, form, headlines, findings, finding, panel, explorer, quotes, chapters, methodology, authors, press, archive, cta and footer. | ## Parts ### RESEARCH_REPORT_PAGE_DESIGNS (constant) The design names: classic, editorial, bold. ### DEFAULT_RESEARCH_REPORT_PAGE_LABELS (constant) Every default string, in English. ### REPORT_SAMPLE (constant) All the sample content in one object. ### REPORT_INFO (constant) The State of Teamwork 2026: 64 pages, 4,200 respondents in 18 countries. ### REPORT_HEADLINES (constant) Respondents, countries, pages and the margin of error. ### REPORT_WEEK (constant) The 40 hour week split: deep work, meetings, status updates, chat and admin. ### REPORT_FINDINGS (constant) Five findings, one of each chart type. ### REPORT_INDUSTRIES (constant) Five industries. ### REPORT_SIZES (constant) Four company size bands. ### REPORT_REGIONS (constant) Four regions. ### REPORT_MEETING_BINS (constant) Meeting hours histogram edges; the last bin is open. ### REPORT_TOOL_BINS (constant) Tools histogram edges; the last bin is open. ### REPORT_WORK_WEEK (constant) 40, the hours the week split is read against. ### REPORT_CELLS (constant) 80 cells generated from a few factors and normalized so every view agrees with the findings. ### REPORT_QUOTES (constant) Five anonymous respondent quotes. ### REPORT_CHAPTERS (constant) Seven chapters with page numbers; the first two are readable. ### REPORT_METHOD (constant) Sample, fieldwork, margin of error and weighting. ### REPORT_AUTHORS (constant) Sophia Reed, Ethan Parker, Mason Hayes and Olivia Bennett. ### REPORT_CITATIONS (constant) APA, MLA and Chicago citations. ### REPORT_PAST (constant) The 2025 and 2024 editions. ### REPORT_BRIEFING (constant) The live briefing on Nov 18, 2026, 45 minutes. ### REPORT_COMPANY_SIZES (constant) The form's company size options. ### REPORT_ROLES (constant) The form's role options. ### REPORT_FREE_EMAIL_DOMAINS (constant) Personal email domains the work email check rejects. ### ResearchReportPageDesign (type) classic | editorial | bold. ### ResearchReportPageSlot (type) The classNames keys. ### ResearchReportPageLabels (type) The labels object. ### ResearchReportDownloadValues (type) { name, email, companySize, role }: what onDownload gets. ### ReportInfo (type) The report's title, year and numbers. ### ReportHeadline (type) One survey fact. ### ReportSegment (type) { id, label, value }: a part of a whole or a ranked item. ### ReportLikertItem (type) One statement with its five answer shares. ### ReportFindingChart (type) The chart of a finding: dots, stack, slope, ranked or likert. ### ReportFinding (type) One key finding. ### ReportOption (type) { value, label }. ### ReportCell (type) One explorer cell. ### ReportExplorerFilters (type) { industry, size, region }. ### ReportQuote (type) One respondent quote. ### ReportChapter (type) One chapter of the report. ### ReportMethodItem (type) One methodology fact. ### ReportAuthor (type) One author. ### ReportCitation (type) One citation style. ### ReportPastReport (type) One earlier edition. ### ReportBriefing (type) The live briefing. ## Examples - **Editorial design**: design="editorial": a printed journal. A masthead, giant start-aligned type, the form in one ruled row, numbered findings with flat charts. - **Bold design**: design="bold": a dark cover band with a glowing report, giant numbers on flat tiles and a wordmark footer. - **Brand orange, burgundy cover**: ctaTone="brand" on the download buttons and the closing band, tone="brand" on the explorer, a custom coverColor and ctaVariant="split". - **Benchmark only, filtered**: Without the header and footer, the explorer starts on European software companies with 51 to 250 people and a busier team. ## See also - [Impact Page](https://wingo-ui.com/templates/impact-page) ([Markdown](https://wingo-ui.com/templates/impact-page.md)) - [Year in Review Page](https://wingo-ui.com/templates/year-in-review-page) ([Markdown](https://wingo-ui.com/templates/year-in-review-page.md)) - [Bar chart](https://wingo-ui.com/components/bar-chart) ([Markdown](https://wingo-ui.com/components/bar-chart.md)) - [Segmented Control](https://wingo-ui.com/components/segmented-control) ([Markdown](https://wingo-ui.com/components/segmented-control.md)) - [CTA Section](https://wingo-ui.com/components/cta-section) ([Markdown](https://wingo-ui.com/components/cta-section.md)) --- Canonical: https://wingo-ui.com/templates/research-report-page More components: https://wingo-ui.com/components ยท Index for agents: https://wingo-ui.com/llms.txt