Basdat/web/index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lost & Found System</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        const { useState, useEffect } = React;

        const FeatureCard = ({ icon, title, description }) => (
            <div className="bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-2xl text-center hover:-translate-y-2 hover:shadow-2xl hover:shadow-blue-500/20 transition-all duration-300 border border-slate-700">
                <div className="text-6xl mb-4">{icon}</div>
                <h3 className="text-white text-xl font-semibold mb-3">{title}</h3>
                <p className="text-slate-300 leading-relaxed">{description}</p>
            </div>
        );

        const StatItem = ({ number, label }) => {
            const [count, setCount] = useState(0);

            useEffect(() => {
                let start = 0;
                const increment = number / 50;
                const timer = setInterval(() => {
                    start += increment;
                    if (start >= number) {
                        setCount(number);
                        clearInterval(timer);
                    } else {
                        setCount(Math.floor(start));
                    }
                }, 30);

                return () => clearInterval(timer);
            }, [number]);

            return (
                <div className="text-center">
                    <div className="text-5xl font-bold text-blue-400 mb-2">{count}</div>
                    <div className="text-slate-300">{label}</div>
                </div>
            );
        };

        const LandingPage = () => {
            return (
                <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
                        {/* Hero Section */}
                        <div className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-3xl shadow-2xl overflow-hidden border border-slate-700">
                            {/* Header */}
                            <div className="bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-700 text-white py-20 px-8 text-center relative overflow-hidden">
                                <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjEiIHN0cm9rZS13aWR0aD0iMSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmlkKSIvPjwvc3ZnPg==')] opacity-20"></div>
                                <h1 className="text-5xl md:text-6xl font-bold mb-4 animate-fade-in relative z-10">
                                    🔍 Lost & Found System
                                </h1>
                                <p className="text-xl md:text-2xl text-blue-100 opacity-90 relative z-10">
                                    Sistem Manajemen Barang Hilang & Temuan Kampus
                                </p>
                            </div>

                            {/* Features */}
                            <div className="py-16 px-8">
                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
                                    <FeatureCard
                                        icon="📢"
                                        title="Lapor Kehilangan"
                                        description="Laporkan barang yang hilang dengan mudah dan cepat"
                                    />
                                    <FeatureCard
                                        icon="📦"
                                        title="Temukan Barang"
                                        description="Cari barang temuanmu di database kami"
                                    />
                                    <FeatureCard
                                        icon="🤝"
                                        title="Klaim Barang"
                                        description="Proses klaim yang aman dengan verifikasi"
                                    />
                                    <FeatureCard
                                        icon="⚡"
                                        title="Auto Matching"
                                        description="Sistem otomatis mencocokkan barang hilang"
                                    />
                                </div>

                                {/* CTA Section */}
                                <div className="text-center py-12">
                                    <h2 className="text-3xl font-bold text-white mb-8">
                                        Mulai Sekarang
                                    </h2>
                                    <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
                                        <a
                                            href="/login"
                                            className="w-full sm:w-auto px-12 py-4 bg-gradient-to-r from-blue-600 to-blue-700 text-white text-lg font-bold rounded-xl hover:from-blue-700 hover:to-blue-800 transition transform hover:-translate-y-1 hover:shadow-xl hover:shadow-blue-500/50"
                                        >
                                            🔐 Login
                                        </a>
                                        <a
                                            href="/register"
                                            className="w-full sm:w-auto px-12 py-4 bg-slate-800 text-white text-lg font-bold rounded-xl border-2 border-blue-500 hover:bg-slate-700 transition transform hover:-translate-y-1 hover:shadow-xl hover:shadow-blue-500/50"
                                        >
                                            📝 Register
                                        </a>
                                    </div>
                                </div>

                                {/* Stats */}
                                <div className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-12 mt-16 border border-slate-700">
                                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                                        <StatItem number={127} label="Barang Ditemukan" />
                                        <StatItem number={89} label="Sudah Diklaim" />
                                        <StatItem number={234} label="Pengguna Terdaftar" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Footer */}
                        <div className="text-center mt-8 text-white py-8">
                            <p className="opacity-80">
                                © 2025 Lost & Found System. Built with Go & Love ❤️
                            </p>
                        </div>
                    </div>
                </div>
            );
        };

        ReactDOM.render(<LandingPage />, document.getElementById('root'));
    </script>

    <style>
        @keyframes fade-in {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .animate-fade-in {
            animation: fade-in 1s ease-out;
        }
    </style>
</body>
</html>