Component Examples

A showcase of all the core components and their variations.

Hero Component

Basic Hero with Image

Example Hero Title

This is an example hero component with an image. It demonstrates the props-based approach for structured content management.

Example hero image

Hero without Image

Hero Without Image

This hero component doesn't include an image, showing how the layout adapts when the image prop is not provided.

Hero without CTA

Hero Without CTA Button

This hero component shows how it looks without a call-to-action button.

Example hero image

MiniUseCase Components

MiniUseCaseWrapper with MiniUseCases

Example Use Cases

Showcasing the MiniUseCase component variations

<::MiniUseCase title="Third-Party Data Risk" description="See exactly what sensitive data you're sending to vendors." icon="shield" url="/use-cases/third-party-data-risk" ctaText="Learn More" /> <::MiniUseCase title="AI Data Exposure" description="Gain visibility into what your teams are sending to external AI APIs." icon="brain" url="/use-cases/ai-data-exposure" ctaText="Learn More" /> <::MiniUseCase title="Compliance Evidence" description="Pass audits with push-button simplicity by generating definitive proof of data residency." icon="check-circle" url="/use-cases/compliance-evidence" ctaText="Learn More" />

Individual MiniUseCase

<::MiniUseCase title="Single Use Case Example" description="This shows how an individual MiniUseCase component looks when used standalone." icon="logo" ctaText="Explore" />

MiniUseCase without Icon

<::MiniUseCase title="Use Case Without Icon" description="This MiniUseCase component doesn't include an icon, showing how the layout adapts." url="/use-cases" ctaText="Get Started" />

Step Components

StepWrapper with Steps

How It Works: From Zero to Full Visibility in Minutes

<::Step number="1" title="Deploy With Zero Disruption" description="Install with a single command. No sidecars, no proxies, no code changes." /> <::Step number="2" title="Automatically Discover & Classify" description="Instantly discover every connection and use ML to classify sensitive data (PII, secrets) in the payload." /> <::Step number="3" title="Illuminate Your Entire Network" description="Get a real-time, searchable inventory of every data flow—source, destination, and data classification." />

Individual Step

<::Step number="1" title="Single Step Example" description="This shows how an individual step component looks when used standalone." />

Button Component

Button Variations

<::Button>Default Button <::Button kind="stroke">Stroke Button <::Button kind="cta">CTA Button <::Button disabled>Disabled Button

Buttons with Icons

<::Button> With Icon <::Button kind="stroke"> Stroke with Icon

Loading Button

<::Button spin>Loading... <::Button kind="cta" spin>Processing...

Icon Component

Available Icons

<::Icon id="logo" class="w-8 h-8 mx-auto mb-2" /> logo
<::Icon id="check" class="w-8 h-8 mx-auto mb-2" /> check
<::Icon id="user" class="w-8 h-8 mx-auto mb-2" /> user
<::Icon id="twitter-x" class="w-8 h-8 mx-auto mb-2" /> twitter-x
<::Icon id="linkedin" class="w-8 h-8 mx-auto mb-2" /> linkedin
<::Icon id="github" class="w-8 h-8 mx-auto mb-2" /> github

Icon Sizes

<::Icon id="logo" class="w-4 h-4" /> <::Icon id="logo" class="w-6 h-6" /> <::Icon id="logo" class="w-8 h-8" /> <::Icon id="logo" class="w-12 h-12" /> <::Icon id="logo" class="w-16 h-16" />

Input Component

Input Types

<::Input placeholder="Enter your name" />
<::Input type="email" placeholder="Enter your email" />
<::Input type="number" placeholder="Enter a number" />
<::Input value="Disabled value" disabled />

Form Component

Contact Form

<::Form class="space-y-4">

<::Input placeholder="Your name" />
<::Input type="email" placeholder="[email protected]" />

Blog Components

Blog Card

<::BlogCard :post="{ title: 'Getting Started with QPoint', description: 'Learn how to deploy QPoint in minutes and start monitoring your encrypted traffic.', date: '2024-01-15', author: 'QPoint Team', slug: 'getting-started-with-qpoint' }" />

Blog Author

<::BlogAuthor name="John Doe" title="Senior Engineer" avatar="/images/team/john.jpg" />

Request Demo Component Example

<::RequestDemo />

Pricing Components

Pricing Table (Desktop)

<::PricingTableData />

Pricing Table (Mobile)

<::PricingTableDataMobile />

Component Usage Guidelines

Best Practices

  • Consistent Props: Use consistent prop names across similar components
  • Responsive Design: All components should work well on mobile and desktop
  • Accessibility: Include proper ARIA labels and keyboard navigation
  • Performance: Optimize components for fast rendering and minimal bundle size

Component Hierarchy

  1. Layout Components: Page layouts and structural components
  2. Content Components: Hero, Point, Step, etc.
  3. UI Components: Button, Input, Icon, etc.
  4. Utility Components: Form, Grid, etc.

Styling System

All components use the design system defined in:

  • Tailwind CSS classes
  • Custom CSS variables for colors and spacing
  • Consistent typography scale
  • Responsive breakpoints