Components / Website

Marketing Section

Six composed landing page sections adapted from Mode marketing layouts, restyled for Instant Strata. Wrap each block in Section and Container for full-bleed backgrounds and constrained content width.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/marketing-section/registry.json

Also installs card and infographic dependencies.

Mode reference

End-to-end self-service reporting, your way

MarketingSpotlight

Two-column feature spotlight with optional testimonial. Inspired by Mode's Datasets section on the Modern BI toolkit page.

MarketingSpotlight preview

Self-serve reporting

End-to-end owner reporting, your way

Curated building datasets are the reusable foundation for self-serve reporting: a layer between your records and the reports owners rely on, with more control over governance, centralised logic, and data usage.

Learn more

Reports

AGM Pack

Levy Notice

Audit Summary

Owner portal

“Now we have a much more collaborative process. We meet with committees weekly and show them what we are thinking. We are not building a dashboard and handing it over; it is a much more iterative, feedback-based process.”
Sarah ChenStrata Manager

tsx

import {
  MarketingSpotlight,
  MARKETING_SPOTLIGHT_DEFAULT,
} from "@/components/ui/marketing-section"
import { Section, Container } from "@/components/ui/section"

export function SelfServeSection() {
  return (
    <Section type="default" spacing="lg">
      <Container>
        <MarketingSpotlight {...MARKETING_SPOTLIGHT_DEFAULT} />
      </Container>
    </Section>
  )
}

MarketingSpotlight Props

Prop	Type	Default	Description
eyebrow	string	-	Optional uppercase label above the heading.
heading	string	-	Young Serif section title.
body	string	-	Supporting paragraph.
visual	ReactNode	-	Right-hand illustration slot. Defaults to MarketingSpotlightVisual.
testimonial	{ quote, name, role }	-	Optional blockquote beneath the grid.
link	{ href, label? }	-	Optional trailing learn-more link.

Mode reference

Turn your analytical work up to 11

MarketingBenefits

Section header with a responsive grid of compact benefit cards. Inspired by Mode's ad hoc analysis benefits grid.

MarketingBenefits preview

Turn your building operations up to 11

When ad hoc reporting and self-serve owner portals live together on one platform, your team can do so much more, so much faster.

No need for spreadsheets

Usually, fresh levy reconciliations require exporting to Excel. With Instant Strata, just share a link.

Run reports whenever

You are no longer a blocker for committees requesting updates. As long as they have the report, they can refresh when they need to.

The end of the siloed project

Save ad hoc work to collections, search by building or lot, and build on work from other managers in one organised platform.

Exploration for all

Let committees dive into other cuts of levy and maintenance data and build their own views, without filing a ticket.

Lean into dashboards

Ever start an ad hoc report and end up with a dashboard? Turn a one-off into a shareable, always-on dashboard in a few clicks.

Reusable datasets

Codify go-to building data into datasets that become code-free starting places for self-serve reporting.

tsx

import {
  MarketingBenefits,
  MARKETING_BENEFITS_DEFAULT,
} from "@/components/ui/marketing-section"

<MarketingBenefits {...MARKETING_BENEFITS_DEFAULT} />

MarketingBenefits Props

Prop	Type	Default	Description
heading	string	-	Section title.
intro	string	-	Introductory paragraph beneath the title.
items	MarketingBenefitItem[]	-	Grid of { title, description } benefit cards.
cols	2 \| 3	3	Desktop column count for the benefit grid.

Mode reference

Visual thinkers welcome

MarketingVisual

Large visual with a row of sub-features beneath. Inspired by Mode's Visual Explorer section on the self-serve page.

MarketingVisual preview

Visual explorer

Visual thinkers welcome

Drag-and-drop your way through governed building datasets, iterating through as many visualisations as you need to understand levy trends and find that aha moment.

Faceted Combo

Rows

Columns

Layers

Simple charts

Spin up bar and line graphs, levy breakdowns, and maintenance summaries in seconds.

Multi-faceted, multi-dimensional

Building complex charts is possible with drag-and-drop analysis that is anything but basic.

Endless iteration

Visualise your data, then quickly iterate through as many versions of the chart you need to get your point across.

tsx

import {
  MarketingVisual,
  MARKETING_VISUAL_DEFAULT,
} from "@/components/ui/marketing-section"

<MarketingVisual {...MARKETING_VISUAL_DEFAULT} />

MarketingVisual Props

Prop	Type	Default	Description
eyebrow	string	-	Optional uppercase label.
heading	string	-	Section title.
intro	string	-	Optional supporting paragraph.
visual	ReactNode	-	Large chart or screenshot slot. Defaults to MarketingVisualChart.
features	MarketingVisualFeature[]	-	Row of sub-features beneath the visual.

Mode reference

The cycle of ad hoc analysis to self-serve reporting…

MarketingCycle

Large editorial statement band with stacked display lines. Inspired by Mode's platform overview cycle statement.

MarketingCycle preview

The cycle of ad hoc reporting to self-serve owner portals and back again?

It all happens in Instant Strata.

A fully integrated suite of management tools for everyone. When strata teams and building stakeholders collaborate on one platform, better decisions arrive faster.

tsx

import {
  MarketingCycle,
  MARKETING_CYCLE_DEFAULT,
} from "@/components/ui/marketing-section"

<MarketingCycle {...MARKETING_CYCLE_DEFAULT} />

MarketingCycle Props

Prop	Type	Default	Description
lines	string[]	-	Display statement lines, each rendered as a Young Serif row.
supporting	string	-	Optional paragraph beneath the statement.
tone	"off-white" \| "accent" \| "forest"	"off-white"	Background tone for the statement band.

Mode reference

Take the tour, on your time

MarketingTour

Product tour CTA with copy and a playable thumbnail. Inspired by Mode's platform product tour section.

MarketingTour preview

Take the tour, on your time

See what a fully integrated suite of management tools for everyone can do for your buildings during this guided tour of Instant Strata.

Take the product tour

tsx

import {
  MarketingTour,
  MARKETING_TOUR_DEFAULT,
} from "@/components/ui/marketing-section"

<MarketingTour {...MARKETING_TOUR_DEFAULT} />

MarketingTour Props

Prop	Type	Default	Description
heading	string	-	Section title.
description	string	-	Supporting paragraph.
href	string	-	Tour link destination.
actionLabel	string	"Take the product tour"	CTA button label.
visual	ReactNode	-	Thumbnail slot. Defaults to MarketingTourThumbnail.

Mode reference

Curated and governed data, ready to be explored

MarketingGoverned

Intro plus two FeatureCard columns for governed datasets. Inspired by Mode's self-serve governed data section.

MarketingGoverned preview

Curated and governed data, ready to be explored

The best self-serve reporting comes from confident understanding of data. Starting with trusted records designed by your strata team, owners can explore and build their own analysis, no spreadsheets required.

Building datasets

Built by managers in tight partnership with committees, datasets are go-to starting points with all the dimensions and measures needed to answer countless owner questions.

Learn more

Governed levy metrics

Define your most critical financial metrics once, then serve them up for exploration so every committee sees the same numbers across the board.

Learn more

tsx

import {
  MarketingGoverned,
  MARKETING_GOVERNED_DEFAULT,
} from "@/components/ui/marketing-section"

<MarketingGoverned {...MARKETING_GOVERNED_DEFAULT} />

MarketingGoverned Props

Prop	Type	Default	Description
heading	string	-	Section title.
intro	string	-	Introductory paragraph.
features	MarketingGovernedFeature[]	-	Two (or more) FeatureCard items with title, description, href, and optional visual.