Component Library Demo
A showcase of all available components with examples
Hero Components
Three variants for different use cases
1. HeroMinimal
Clean, centered design
2. HeroBold
Large typography with gradient option
Transform Your Digital Presence
Join thousands of companies building better websites faster
3. HeroVideo
Video background hero (requires video file)
<HeroVideo videoSrc="/videos/hero.mp4" title="..." />
Flexible Split Layouts
The SplitSection component creates beautiful two-column layouts that stack responsively on mobile devices.
Perfect for showcasing features, telling your story, or highlighting key information.
Image on the Right
Simply set imageRight={true} to swap the layout.
The content automatically adjusts for optimal readability.
Feature Cards & Grid
Showcase your services or features in an organized grid layout
Fast Performance
Lightning-fast load times with optimized components and minimal JavaScript.
Learn moreAccessible
Built with accessibility in mind, following WCAG guidelines.
Easy to Use
Simple props and clear documentation make integration a breeze.
Customizable
Easily adapt colors, fonts, and spacing to match your brand.
2-Column Layout
Set columns=2
Font Awesome Icons
Access to 200,000+ professional icons from Font Awesome and other icon sets.
Easy Integration
Simple icon name syntax makes it quick to find and use the perfect icon.
Ready to Get Started?
Join thousands of satisfied customers building better websites
CTASimple Variant
Dark blue background with white text
Split CTA with Image
This CTA variant includes an image for more visual impact. Great for product showcases or feature highlights.
Explore Features
ProductGrid + ProductCard
Solution/product showcase cards with badges
Our Solutions
AI-powered video analytics for every industry
Remote Monitoring & Alerts
Real-time threat detection, perimeter security, incident response, and compliance monitoring with AI-powered surveillance.
Explore Security SolutionsBI Insights & Analytics
Counting dashboards, customer flow analysis, operational optimization, and decision-making data from your video infrastructure.
Explore BI SolutionsAuto Dealership Security
Purpose-built for automotive retail with suspicious behavior detection, custom features, and proven ROI.
Learn MoreCustom Solutions
Bespoke analytics development, industry-specific customization, and feature engineering for unique requirements.
Contact UsTeamCard
Display team members with circular photos
CEO & Founder
Sarah Johnson
CTO
Michael Chen
Head of Design
Emily Rodriguez
Lead Engineer
David Kim
QuoteCard
Press quotes and testimonials
"This platform has completely transformed how we approach video analytics. The accuracy and speed are unmatched."
— TechCrunch
"A game-changer for security teams. The AI-powered insights have reduced our incident response time by 60%."
— Security Magazine
The story behind our company.
Founded in 2020, we set out to revolutionize the way businesses interact with their video infrastructure. Our team of engineers and data scientists developed cutting-edge algorithms that outperform traditional methods.
Today, we serve over 500 enterprise customers across 40 countries, helping them unlock insights from their existing camera systems.
Global talent, local impact.
As a globally-distributed team, we have access to expertise and skills from around the world. This diversity brings a wide range of perspectives and ideas, leading to more innovative solutions.
Join Our TeamLogoScroller
Animated logo marquee for partners/clients (single row)
Trusted by industry leaders
LogoScroller (Double Row + White Filter)
Two rows scrolling in opposite directions with white logos
CTABoxed
CTA with accent background and image at bottom-right
Start using our platform
Get started
AccordionFAQ
Expandable FAQ section with native details/summary
Frequently Asked Questions
What is this component library?
A collection of production-ready Astro components for building modern websites quickly.
Is it fully responsive?
Yes, every component is designed to work perfectly on mobile, tablet, and desktop devices.
Can I customize the styling?
Absolutely! All components use Tailwind CSS and can be easily customized to match your brand.
TableOfContents
Auto-generated TOC for blog posts (pass headings from MDX)
Note: In blog layouts, pass headings from Astro.props
ContactForm
Contact form with Web3Forms integration
Get In Touch
We'd love to hear from you. Fill out the form below.
Component Quick Reference
Navigation
Sticky header with mobile menu
<Navigation />
Hero Components
3 variants: Minimal, Bold, Video
<HeroMinimal title="..." />
SplitSection
Content + image layout
<SplitSection imageRight />
FeatureGrid
Grid layout container
<FeatureGrid columns=3 />
FeatureCard
Individual feature card
<FeatureCard icon="fa6-solid:rocket" />
CTA Components
2 variants: Simple, Split
<CTASimple title="..." />
ContactForm
Styled contact form
<ContactForm action="..." />
Footer
Multi-column footer
<Footer companyName="..." />
Layout Templates
Base, Landing, Inner
<LandingLayout title="..." />
TeamCard
Team member with photo
<TeamCard name="..." role="..." />
QuoteCard
Press quote/testimonial
<QuoteCard quote="..." date="..." />
CenteredTextBlock
Centered text section
<CenteredTextBlock title="..." />
BackgroundSection
Content over background image
<BackgroundSection backgroundImage="..." />
LogoScroller
Animated logo marquee (single/double rows, white filter)
<LogoScroller logos={[...]} rows="double" whiteFilter />
CTABoxed
CTA with accent bg and image
<CTABoxed title="..." image={img} />
AccordionFAQ
Expandable FAQ section
<AccordionFAQ items={[...]} />
TableOfContents
Auto-generated TOC for blog
<TableOfContents headings={...} />
Need More Information?
Check out the comprehensive documentation in the /specs folder