[ Mini Kiebo ]

Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64 Path: D:/xampp/htdocs/dummyweb/app/frontend/src/components/Sections/ [ Home ]
File: HeroSection.jsx
Now let me create the home page components:
Action: file_editor create /app/frontend/src/components/sections/HeroSection.jsx --file-text "import React from 'react';
import { useLanguage } from '../../contexts/LanguageContext';
import { Button } from '../ui/button';
import { ArrowRight } from 'lucide-react';
import mockData from '../../mockData';

const HeroSection = () => {
  const { t } = useLanguage();

  return (
    <section className=\"relative min-h-screen flex items-center justify-center overflow-hidden\">
      {/* Background Image with Overlay */}
      <div className=\"absolute inset-0 z-0\">
        <img
          src={mockData.hero.backgroundImage}
          alt=\"Hero Background\"
          className=\"w-full h-full object-cover\"
        />
        <div className=\"absolute inset-0 bg-gradient-to-r from-emerald-900/90 via-emerald-800/85 to-teal-900/90\"></div>
        {/* Animated Pattern Overlay */}
        <div className=\"absolute inset-0 opacity-10\">
          <div className=\"absolute inset-0\" style={{
            backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)',
            backgroundSize: '48px 48px'
          }}></div>
        </div>
      </div>

      {/* Content */}
      <div className=\"container mx-auto px-4 relative z-10 pt-32 pb-20\">
        <div className=\"max-w-4xl mx-auto text-center\">
          <div className=\"animate-in fade-in slide-in-from-bottom-5 duration-1000\">
            <h1 className=\"text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight\">
              {t(mockData.hero.title_id, mockData.hero.title_en)}
            </h1>
            <p className=\"text-lg md:text-xl text-emerald-50 mb-10 max-w-2xl mx-auto leading-relaxed\">
              {t(mockData.hero.subtitle_id, mockData.hero.subtitle_en)}
            </p>
            <div className=\"flex flex-col sm:flex-row gap-4 justify-center items-center\">
              <Button 
                size=\"lg\" 
                className=\"bg-white text-emerald-700 hover:bg-emerald-50 shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 text-base px-8\"
              >
                {t(mockData.hero.ctaText_id, mockData.hero.ctaText_en)}
                <ArrowRight className=\"ml-2 h-5 w-5\" />
              </Button>
              <Button 
                size=\"lg\" 
                variant=\"outline\"
                className=\"bg-transparent border-2 border-white text-white hover:bg-white hover:text-emerald-700 shadow-xl transition-all duration-300 text-base px-8\"
              >
                {t('Pelajari Lebih Lanjut', 'Learn More')}
              </Button>
            </div>
          </div>

          {/* Stats */}
          <div className=\"mt-20 grid grid-cols-2 md:grid-cols-4 gap-6 animate-in fade-in slide-in-from-bottom-5 duration-1000 delay-300\">
            {Object.values(mockData.statistics).map((stat, index) => (
              <div key={index} className=\"bg-white/10 backdrop-blur-md rounded-xl p-6 border border-white/20 hover:bg-white/20 transition-all duration-300\">
                <div className=\"text-3xl md:text-4xl font-bold text-white mb-2\">
                  {stat.value.toLocaleString()}+
                </div>
                <div className=\"text-sm text-emerald-100\">
                  {t(stat.label_id, stat.label_en)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Scroll Indicator */}
      <div className=\"absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce z-10\">
        <div className=\"flex flex-col items-center text-white\">
          <span className=\"text-sm mb-2\">{t('Gulir ke bawah', 'Scroll down')}</span>
          <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">
            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />
          </svg>
        </div>
      </div>
    </section>
  );
};

export default HeroSection;
"
Observation: Create successful: /app/frontend/src/components/sections/HeroSection.jsx