Tech Solutions Hero Section

Heroes 234

About

A responsive, grid-based showcase component for HAOS Tech Solutions with a customizable registry-ad background slot, dark-mode support, and accessible controls.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tech Solutions Hero Section to your project and fits it to your theme.

Code

How Tech Solutions Hero Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import HaosShowcase from '@/components/ui/tech-solutions-hero-section';
import { Component } from '@/components/ui/raycast-animated-blue-background';

export default function App() {
  const handleAction = () => console.log('Action icon clicked');

  return (
    <HaosShowcase
      bg={<Component />}
      bg1={<Component />}
      category="BRANDING"
      year="2024"
      solutionLabel="TECH SOLUTIONS"
      solutionValue="AUTOMATION & ROBOTICS"
      title="HAOS Tech Solutions"
      subtitle="Brand Concept & Identity"
      statLabel="HIGH-QUALITY"
      statValue="DEVELOPMENT"
      bottomValue="+2K"
      progressPercent={60}
      logoText="hAOS"
      onAction={handleAction}
    />
  );
}