Component Reference

GenuineAI — Reusable Astro Components

SectionIntro

Two-column intro block used to open a page section. Left column holds a small label and large heading; right column holds body copy and an optional CTA button.

With CTA button (gray background)

Our Platform

The Last AI Platform You'll Ever Need to Buy

One platform, designed to deliver lasting AI gains into your business. GenuineAI centralizes your data across your organization, creating a data backbone on which your teams can define clear rules-driven workflows and deploy agents to help accomplish them.

Explore Our Platform

<SectionIntro> background="gray" (default) ctaVariant="light"

<SectionIntro
  class="section-pad-md"
  label="Our Platform"
  heading="The Last AI Platform You'll Ever Need to Buy"
  body="One platform, designed to deliver lasting AI gains..."
  ctaLabel="Explore Our Platform"
  ctaHref="/solutions"
  ctaVariant="light"
/>

Without CTA button (white background)

Our Services

Custom AI That Fits Your Business

We design and deploy AI solutions tailored to your workflows — from intelligent document processing and agent orchestration to fully custom platforms built for your industry.

<SectionIntro> background="white" No ctaLabel — button hidden

<SectionIntro
  class="section-pad-md"
  label="Our Services"
  heading="Custom AI That Fits Your Business"
  body="We design and deploy AI solutions tailored..."
  background="white"
/>

With dark CTA variant (gray background)

Industries

Purpose-Built for Complex Operations

From regulatory compliance to multi-party coordination, our platform adapts to the workflows that define your industry — delivering measurable efficiency gains from day one.

See Industries

<SectionIntro> ctaVariant="dark"

<SectionIntro
  class="section-pad-md"
  label="Industries"
  heading="Purpose-Built for Complex Operations"
  body="From regulatory compliance to multi-party coordination..."
  ctaLabel="See Industries"
  ctaHref="/industries"
  ctaVariant="dark"
/>

Dark background

Studio

AI-Powered Creative Tools at Your Fingertips

Edit, caption, and publish directly from your media library — powered by AI that understands your brand and your content.

<SectionIntro> background="dark" navTheme="dark"

<SectionIntro
  class="section-pad-md"
  label="Studio"
  heading="AI-Powered Creative Tools at Your Fingertips"
  body="Edit, caption, and publish directly from your media library..."
  background="dark"
  navTheme="dark"
/>

Props

Prop	Type	Default	Description
`label`	string	—	Small uppercase label with star icon (uses `.section-label`)
`heading`	string	—	Large heading in the left column
`body`	string	—	Body paragraph in the right column
`ctaLabel`	string?	—	Button text. Omit to hide the button entirely.
`ctaHref`	string?	—	Button link destination. Required when `ctaLabel` is set.
`ctaVariant`	"default" \| "dark" \| "light" \| "star"	"light"	Visual style of the CTA button
`navTheme`	"light" \| "dark"	"light"	Sets `data-nav-theme` for sticky nav color switching
`background`	"gray" \| "white" \| "dark"	"gray"	Section background color. `"dark"` applies gray-900 bg with white heading, white section label, and muted body text.
`class`	string?	—	Additional CSS classes on the outer `<section>`

Usage Notes

Import from ../components/page-sections/SectionIntro.astro (adjusting the relative path for your page location).
To hide the CTA button, simply omit both ctaLabel and ctaHref.
The component renders a full-width <section> with its own container — place it at the top level of your page layout, not inside another container.
The component has no baked-in vertical padding. Use a section padding utility class via the class prop: section-pad-sm (3rem), section-pad-md (5rem), or section-pad-lg (6rem). See the Design Reference for the full spacing scale.
Styles live in components.css under the .section-intro-* namespace.
On screens below 768px the two columns collapse to a single stacked column.

Scrolling Questions

Horizontally auto-scrolling pill rows with avatar badges, used as a visual backdrop for knowledge-base or FAQ sections. Powered by GSAP infinite scroll.

What integrations do you support?

What file formats are supported?

How do I organize content by brand?

Does it support version history?

What onboarding resources are available?

Is SSO supported for enterprise accounts?

How does the approval workflow function?

Is there an API for custom integrations?

Can multiple teams collaborate in real time?

How is sensitive content protected?

How do templates work inside the editor?

What SLA do you offer for uptime?

Can I bulk-upload assets from a shared drive?

How do I set user permissions?

What analytics are available for assets?

Can I automate content expiration dates?

Can I export reports for stakeholders?

How does AI tagging improve search?

Searching Knowledge Base...

<ScrollingQuestions> questions prop — array of pill content GSAP infinite horizontal scroll

<ScrollingQuestions questions={[
  { text: "What integrations do you support?", avatar: "https://i.pravatar.cc/64?img=1" },
  { text: "How does the approval workflow function?", avatar: "https://i.pravatar.cc/64?img=5" },
  ...
]} />

Props

Prop	Type	Default	Description
`questions`	{ text, avatar }[]	—	Array of question objects. Each has `text` (pill label) and `avatar` (image URL). Distributed across 3 tracks via round-robin.
`statusText`	string?	"Searching Knowledge Base..."	Label inside the dark status pill at the bottom.
`statusIcon`	string?	"Brain"	Icon name (from `Icon.astro`) shown in the status pill.

Usage Notes

Import from ../components/page-sections/ScrollingQuestions.astro.
The component renders a full-width gradient backdrop with absolute-positioned scroll tracks — place it at the top level, not inside a container.
Questions are split across 3 tracks using round-robin distribution (tracks alternate left/right/left scroll direction).
GSAP animation is self-contained — no external script needed. The tracks clone their pills and scroll infinitely.
Provide at least 6 questions (2 per track) for a good visual density.

Side-by-Side Feature

Two-column layout with text on the left (optional eyebrow, headline, body, optional CTA) and a media frame on the right. Used for feature showcases across multiple pages. This is a CSS pattern, not an Astro component — apply the classes directly.

With eyebrow, CTA, and background image (gray background)

AI-Powered Tagging

Every asset tagged, described, and rated automatically

Upload thousands of photos and let GenuineAI do the heavy lifting — identifying people, places, activities, and quality scores so your team can skip the busywork.

See How It Works

.sbs-feature background: gray (default) .eyebrow + .btn-cta

<section class="sbs-feature">
  <div class="container container--lg sbs-feature-grid">
    <div class="sbs-feature-text">
      <p class="eyebrow">Eyebrow Label</p>
      <h2 class="sbs-feature-h2">Headline</h2>
      <p class="sbs-feature-desc">Body text...</p>
      <CtaButton href="#" label="CTA" size="sm" />
    </div>
    <div class="sbs-feature-media">
      <img src="..." alt="" loading="lazy">
      <div class="sbs-feature-media-inner">
        <!-- Variable inner content -->
      </div>
    </div>
  </div>
</section>

Without eyebrow or CTA (white background)

Headline only, no eyebrow or button

The text column centers vertically against the media frame when there's no CTA button — no extra spacing below the body text.

.sbs-feature .sbs-feature--white No eyebrow, no CTA

<section class="sbs-feature sbs-feature--white">
  <div class="container container--lg sbs-feature-grid">
    <div class="sbs-feature-text">
      <h2 class="sbs-feature-h2">Headline</h2>
      <p class="sbs-feature-desc">Body text...</p>
    </div>
    <div class="sbs-feature-media">
      <img src="..." alt="" loading="lazy">
      <div class="sbs-feature-media-inner"></div>
    </div>
  </div>
</section>

With eyebrow (dark background)

AI Edits

Transform any photo with a single prompt

Remove backgrounds, retouch, crop, and enhance — all powered by AI that understands your creative intent. No design skills required.

.sbs-feature .sbs-feature--dark background: gray-900 Cyan eyebrow, white headline, muted body

<section class="sbs-feature sbs-feature--dark">
  <div class="container container--lg sbs-feature-grid">
    <div class="sbs-feature-text">
      <p class="eyebrow">Eyebrow Label</p>
      <h2 class="sbs-feature-h2">Headline</h2>
      <p class="sbs-feature-desc">Body text...</p>
    </div>
    <div class="sbs-feature-media">
      <img src="..." alt="" loading="lazy">
      <div class="sbs-feature-media-inner"></div>
    </div>
  </div>
</section>

CSS Classes

Class	Element	Description
`.sbs-feature`	<section>	Outer wrapper. Gray background by default.
`.sbs-feature--white`	<section>	Modifier for white background.
`.sbs-feature--dark`	<section>	Modifier for dark (gray-900) background. Switches headline to white, body text to muted white, and eyebrow to cyan.
`.sbs-feature-grid`	<div>	Two-column grid (1fr 1fr). Stacks at 900px.
`.sbs-feature-text`	<div>	Left column. Flex column, max-width 520px, vertically centered.
`.eyebrow`	<p>	Optional. Uses base eyebrow style (no star icon).
`.sbs-feature-h2`	<h2>	Headline.
`.sbs-feature-desc`	<p>	Body text. No bottom margin — CTA adds its own top margin when present.
`.sbs-feature-media`	<div>	Right column. Rounded frame with overflow hidden, min-height 620px.
`.sbs-feature-media-inner`	<div>	Padded inner container for overlaid UI components.

Usage Notes

This is a CSS pattern, not an Astro component. Apply the classes directly in your page markup.
Styles live in components.css under the .sbs-feature-* namespace.
Place the <section> at the top level of your page layout, not inside another container.
To hide the eyebrow, simply omit the <p class="eyebrow"> element.
To hide the CTA button, omit the <CtaButton>. The text column will center vertically with no trailing space.
The .sbs-feature-media element accepts a background image via <img>, or you can use inline styles / a modifier class for gradients.
Inner content within .sbs-feature-media-inner is fully custom per instance — size and position it as needed.
On screens below 900px the columns stack to a single column.
For dark sections, add .sbs-feature--dark and set data-nav-theme="dark". The eyebrow uses default cyan (no inline color override needed). Do not combine with style="color: var(--color-blue-dark);" on the eyebrow — that's for light backgrounds only.

Features Grid

Three-column grid for feature cards. Each column contains a black media wrapper (for screenshots or tile components), a title, and a description. Stacks to single column on mobile. This is a CSS pattern — apply the classes directly.

Default (gray background)

Feature One

Transform fragmented data into a single source of truth that powers intelligent automation across your organization.

Feature Two

Launch intelligent, fully customizable AI agents that work autonomously within your exact specifications.

Feature Three

Operations, customs, and finance connected in a single workspace with full visibility and shared context.

.features background: gray-100 (default) 3-column grid

<section class="features">
  <div class="container container--lg features-grid">
    <div class="feature-col">
      <div class="feature-img-wrapper">
        <!-- Tile component or screenshot -->
      </div>
      <h3 class="feature-title">Title</h3>
      <p class="feature-desc">Description...</p>
    </div>
    <!-- Repeat for each column -->
  </div>
</section>

CSS Classes

Class	Element	Description
`.features`	<section>	Outer wrapper. Gray background, vertical padding.
`.features-grid`	<div>	Three-column grid (repeat(3, 1fr)). Stacks at 768px.
`.feature-col`	<div>	Flex column for one feature card.
`.feature-img-wrapper`	<div>	Black rounded container, 1:1 aspect ratio. Holds tile components or screenshots.
`.feature-title`	<h3>	Feature heading below the image.
`.feature-desc`	<p>	Feature body text.

Usage Notes

This is a CSS pattern, not an Astro component. Apply the classes directly in your page markup.
Styles live in components.css under the .features-* / .feature-* namespace.
Place the <section> at the top level of your page layout, not inside another container.
The .feature-img-wrapper has a 1:1 aspect ratio with a black background. Drop tile components inside, or leave empty as a placeholder.
Tile components inside the wrapper are automatically sized to 88% width with a drop shadow.
On screens below 768px the grid stacks to a single column (max-width 480px, centered).

Background Layouts

Decorative gradient containers with concentric ring patterns, used as backdrops for feature sections. Each includes an inner white card positioned with absolute inset.

.cr-bg-pink-gradient Base: #FBE4EC (pink-light) Concentric white rings from bottom-right

.cr-bg-green-gradient Base: #CFF8CE (green-light) Concentric white rings from bottom-right

.cr-bg-cyan-light-gradient Base: #C8EEFD (cyan-light) Concentric white rings from bottom-right