components/Hero.jsx

import { ArrowRight, Database, Zap, Shield } from 'lucide-react';

export default function Hero() {
  return (
    <section className="bg-gradient-to-r from-primary-600 to-primary-800 text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
        <div className="text-center">
          <h1 className="text-4xl sm:text-6xl font-bold mb-6">
            Specialized Chroma Vector Database Solutions
          </h1>
          <p className="text-xl sm:text-2xl mb-8 max-w-3xl mx-auto text-primary-100">
            Empower your AI applications with our expert Chroma vector database consulting, implementation, and managed services
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button className="bg-white text-primary-600 px-8 py-3 rounded-lg font-semibold hover:bg-primary-50 transition-colors flex items-center justify-center gap-2">
              Get Started
              <ArrowRight className="w-5 h-5" />
            </button>
            <button className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-primary-600 transition-colors">
              Schedule Demo
            </button>
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
          <div className="text-center">
            <Database className="w-12 h-12 mx-auto mb-4 text-primary-200" />
            <h3 className="text-lg font-semibold mb-2">Enterprise-Grade</h3>
            <p className="text-primary-100">Production-ready vector database solutions</p>
          </div>
          <div className="text-center">
            <Zap className="w-12 h-12 mx-auto mb-4 text-primary-200" />
            <h3 className="text-lg font-semibold mb-2">Lightning Fast</h3>
            <p className="text-primary-100">Optimized for high-performance AI workloads</p>
          </div>
          <div className="text-center">
            <Shield className="w-12 h-12 mx-auto mb-4 text-primary-200" />
            <h3 className="text-lg font-semibold mb-2">Secure & Scalable</h3>
            <p className="text-primary-100">Built with enterprise security standards</p>
          </div>
        </div>
      </div>
    </section>
  );
}