Hero section with smooth bg Shader

import { HeroSection } from "@/components/ui/hero-section-with-smooth-bg-shader";

const settings = {
  distortion: 1.2,
  speed: 0.8,
  colors: ["#ff6b6b", "#4ecdc4", "#45b7d1"],
};

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return <HeroSection distortion={s.distortion} speed={s.speed} />;
}

/*
Usage examples:

// Basic usage with defaults
<HeroSection />

// Custom content
<HeroSection 
  title="Revolutionary AI Solutions for"
  highlightText="Modern Business"
  description="Streamline operations with cutting-edge AI technology"
  buttonText="Get Started"
  onButtonClick={() => console.log('Button clicked!')}
/>

// Custom colors and animation
<HeroSection 
  colors={s.colors}
  distortion={1.2}
  speed={0.8}
/>


*/