157 lines
8.3 KiB
HTML
157 lines
8.3 KiB
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> |