import React from 'react';

const HeroSection: React.FC = () => {
    return (
        <section id="home" className="relative bg-white pt-24 pb-20 lg:pt-32 lg:pb-28">
            <div className="absolute inset-0 z-0 opacity-10">
                <div className="absolute top-0 right-0 -translate-x-1/4 -translate-y-1/4 w-96 h-96 bg-blue-400 rounded-full filter blur-3xl"></div>
                <div className="absolute bottom-0 left-0 translate-x-1/4 translate-y-1/4 w-96 h-96 bg-green-400 rounded-full filter blur-3xl"></div>
            </div>
            <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div className="text-center max-w-4xl mx-auto">
                    <h1 className="text-4xl md:text-6xl font-extrabold text-slate-900 leading-tight">
                        Welcome to <span className="g-text">EDURISET</span>
                    </h1>
                    <p className="mt-4 text-lg md:text-xl text-slate-600">
                        Portal Pusat Penelitian: Rujukan Utama Metodologi Riset Kualitatif, Kuantitatif, dan R&D.
                    </p>
                    <div className="mt-8">
                        <p className="text-slate-700 max-w-2xl mx-auto">
                            Edu Riset berkomitmen menjadi rujukan utama dalam memahami dan mengaplikasikan metodologi penelitian. Kami menyediakan panduan komprehensif, instrumen pengukuran, teknik analisis data, serta berbagai inovasi dalam dunia riset akademik dan terapan. Tingkatkan kualitas penelitian Anda bersama kami!
                        </p>
                    </div>
                    <div className="mt-10 flex flex-col sm:flex-row justify-center items-center gap-4">
                        <a
                            href="#courses"
                            className="bg-blue-600 text-white font-semibold px-8 py-4 rounded-lg shadow-lg hover:bg-blue-700 transition-transform transform hover:scale-105 duration-300 w-full sm:w-auto"
                        >
                            Jelajahi Materi Kursus
                        </a>
                        <a
                            href="#"
                            className="bg-white text-blue-600 border-2 border-blue-600 font-semibold px-8 py-3.5 rounded-lg shadow-lg hover:bg-blue-50 transition-transform transform hover:scale-105 duration-300 w-full sm:w-auto"
                        >
                            Akses Panduan Riset Gratis
                        </a>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default HeroSection;