Animated Hero Section

import React from 'react';
import FireHero from '@/components/ui/animated-hero-section';

const Demo: React.FC = () => {
  const handleGetStarted = () => {
    console.log('Get Started clicked!');
    // Add your navigation logic here
  };

  const handleLearnMore = () => {
    console.log('Learn More clicked!');
    // Add your navigation logic here
  };

  return (
    <div className="min-h-screen w-full">
      <FireHero
        title="BLAZING FAST"
        subtitle="Web Development"
        description="Create stunning websites with the power of modern web technologies. Our fire-themed components will make your site stand out from the crowd."
        primaryButtonText="Start Building"
        secondaryButtonText="View Portfolio"
        onPrimaryClick={handleGetStarted}
        onSecondaryClick={handleLearnMore}
      />
      
      {/* Additional content sections can go here */}
      <section className="min-h-screen bg-gray-900 flex items-center justify-center">
        <div className="text-center text-white">
          <h2 className="text-4xl font-bold mb-4">Next Section</h2>
          <p className="text-xl text-gray-300">Your content continues here...</p>
        </div>
      </section>
    </div>
  );
};

export default Demo;