426 lines
13 KiB
PHP
426 lines
13 KiB
PHP
@extends('layouts.app')
|
||
|
||
@section('title', 'Portal Pemilik - Kelola Kontrakan & Laundry Anda')
|
||
|
||
@section('content')
|
||
<style>
|
||
/* ===== ADMIN PORTAL STYLES - Professional & Corporate ===== */
|
||
|
||
.admin-portal-hero {
|
||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
|
||
background-size: 200% 200%;
|
||
animation: gradient-shift 15s ease infinite;
|
||
color: white;
|
||
padding: 80px 40px 120px;
|
||
margin: 0;
|
||
margin-left: calc(-50vw + 50%);
|
||
margin-right: calc(-50vw + 50%);
|
||
width: 100vw;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: 0 20px 60px rgba(30, 60, 114, 0.4);
|
||
}
|
||
|
||
@keyframes gradient-shift {
|
||
0% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
100% { background-position: 0% 50%; }
|
||
}
|
||
|
||
.admin-portal-hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||
}
|
||
|
||
.admin-portal-hero::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 150px;
|
||
background: linear-gradient(to top, rgba(255,255,255,0.1) 0%, transparent 100%);
|
||
}
|
||
|
||
.portal-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.portal-badge {
|
||
display: inline-block;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
backdrop-filter: blur(10px);
|
||
padding: 8px 20px;
|
||
border-radius: 30px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin-bottom: 20px;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.portal-title {
|
||
font-size: 3.5rem;
|
||
font-weight: 800;
|
||
margin-bottom: 25px;
|
||
line-height: 1.2;
|
||
text-shadow: 2px 2px 20px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.portal-subtitle {
|
||
font-size: 1.4rem;
|
||
margin-bottom: 40px;
|
||
opacity: 0.95;
|
||
font-weight: 300;
|
||
max-width: 700px;
|
||
}
|
||
|
||
.portal-buttons {
|
||
display: flex;
|
||
gap: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.btn-portal-primary {
|
||
background: white;
|
||
color: #1e3c72;
|
||
padding: 16px 40px;
|
||
border-radius: 12px;
|
||
font-weight: 700;
|
||
font-size: 1.1rem;
|
||
border: none;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||
transition: all 0.3s ease;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
}
|
||
|
||
.btn-portal-primary:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
|
||
color: #1e3c72;
|
||
}
|
||
|
||
.btn-portal-secondary {
|
||
background: transparent;
|
||
color: white;
|
||
padding: 16px 40px;
|
||
border-radius: 12px;
|
||
font-weight: 700;
|
||
font-size: 1.1rem;
|
||
border: 2px solid white;
|
||
transition: all 0.3s ease;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
}
|
||
|
||
.btn-portal-secondary:hover {
|
||
background: white;
|
||
color: #1e3c72;
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
/* Features Section */
|
||
.features-admin {
|
||
padding: 80px 0;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.feature-card-admin {
|
||
background: white;
|
||
padding: 40px;
|
||
border-radius: 20px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
|
||
transition: all 0.3s ease;
|
||
border: 1px solid #e2e8f0;
|
||
}
|
||
|
||
.feature-card-admin:hover {
|
||
transform: translateY(-10px);
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 70px;
|
||
height: 70px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 25px;
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.feature-title {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: 15px;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.feature-description {
|
||
color: #64748b;
|
||
line-height: 1.7;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* Stats Section */
|
||
.stats-section {
|
||
padding: 80px 0;
|
||
background: white;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 40px;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.stat-card {
|
||
text-align: center;
|
||
padding: 30px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 20px;
|
||
color: white;
|
||
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 1.1rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* CTA Section */
|
||
.cta-section {
|
||
padding: 100px 40px;
|
||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
|
||
margin-left: calc(-50vw + 50%);
|
||
margin-right: calc(-50vw + 50%);
|
||
width: 100vw;
|
||
color: white;
|
||
text-align: center;
|
||
}
|
||
|
||
.cta-title {
|
||
font-size: 2.5rem;
|
||
font-weight: 800;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.cta-subtitle {
|
||
font-size: 1.3rem;
|
||
margin-bottom: 40px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.portal-title {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.portal-subtitle {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.portal-buttons {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.btn-portal-primary,
|
||
.btn-portal-secondary {
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Hero Section -->
|
||
<div class="admin-portal-hero">
|
||
<div class="portal-content">
|
||
<span class="portal-badge">
|
||
🏢 Portal Khusus Pemilik
|
||
</span>
|
||
<h1 class="portal-title">
|
||
Kelola Properti Anda<br>dengan Mudah & Efisien
|
||
</h1>
|
||
<p class="portal-subtitle">
|
||
Platform manajemen kontrakan dan laundry yang profesional. Pantau bisnis Anda, kelola pemesanan, dan tingkatkan pendapatan dengan sistem yang terintegrasi.
|
||
</p>
|
||
<div class="portal-buttons">
|
||
<a href="{{ route('admin.login') }}" class="btn-portal-primary">
|
||
🔐 Login Pemilik
|
||
</a>
|
||
<a href="{{ route('admin.login') }}" class="btn-portal-secondary">
|
||
ℹ️ Hubungi Super Admin
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<!-- Features Section -->
|
||
<section class="features-admin">
|
||
<div class="text-center">
|
||
<h2 style="font-size: 2.5rem; font-weight: 800; color: #1e293b; margin-bottom: 15px;">
|
||
Fitur Lengkap untuk Pemilik
|
||
</h2>
|
||
<p style="font-size: 1.2rem; color: #64748b;">
|
||
Semua yang Anda butuhkan untuk mengelola bisnis properti Anda
|
||
</p>
|
||
</div>
|
||
|
||
<div class="features-grid">
|
||
<div class="feature-card-admin">
|
||
<div class="feature-icon">🏠</div>
|
||
<h3 class="feature-title">Manajemen Kontrakan</h3>
|
||
<p class="feature-description">
|
||
Kelola data kontrakan, upload foto, atur harga, dan update informasi dengan mudah. Sistem lengkap dengan galeri foto.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="feature-card-admin">
|
||
<div class="feature-icon">👕</div>
|
||
<h3 class="feature-title">Kelola Laundry</h3>
|
||
<p class="feature-description">
|
||
Tambahkan layanan laundry, atur harga per layanan, dan kelola pesanan pelanggan secara real-time.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="feature-card-admin">
|
||
<div class="feature-icon">📅</div>
|
||
<h3 class="feature-title">Sistem Booking</h3>
|
||
<p class="feature-description">
|
||
Pantau pemesanan masuk, konfirmasi booking, dan kelola jadwal ketersediaan properti Anda.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="feature-card-admin">
|
||
<div class="feature-icon">⭐</div>
|
||
<h3 class="feature-title">Review & Rating</h3>
|
||
<p class="feature-description">
|
||
Lihat ulasan pelanggan, tingkatkan kualitas layanan, dan bangun reputasi bisnis yang lebih baik.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="feature-card-admin">
|
||
<div class="feature-icon">📊</div>
|
||
<h3 class="feature-title">Dashboard Analytics</h3>
|
||
<p class="feature-description">
|
||
Pantau performa bisnis dengan statistik lengkap, grafik penjualan, dan laporan yang detail.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="feature-card-admin">
|
||
<div class="feature-icon">📱</div>
|
||
<h3 class="feature-title">Responsive Design</h3>
|
||
<p class="feature-description">
|
||
Kelola bisnis dari mana saja, kapan saja. Akses dashboard dari smartphone, tablet, atau komputer.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stats Section -->
|
||
<section class="stats-section">
|
||
<div class="text-center">
|
||
<h2 style="font-size: 2.5rem; font-weight: 800; color: #1e293b; margin-bottom: 15px;">
|
||
Platform Terpercaya
|
||
</h2>
|
||
<p style="font-size: 1.2rem; color: #64748b;">
|
||
Bergabunglah dengan pemilik lainnya yang sudah merasakan kemudahan
|
||
</p>
|
||
</div>
|
||
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="stat-owners">{{ $totalAdmins }}+</div>
|
||
<div class="stat-label">Pemilik Terdaftar</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="stat-properties">{{ $totalProperti }}+</div>
|
||
<div class="stat-label">Properti Dikelola</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="stat-bookings">{{ $totalBookings }}+</div>
|
||
<div class="stat-label">Booking Sukses</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number">{{ $avgRating }}⭐</div>
|
||
<div class="stat-label">Rating Rata-rata</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="cta-section">
|
||
<div style="max-width: 800px; margin: 0 auto;">
|
||
<h2 class="cta-title">Siap Memulai?</h2>
|
||
<p class="cta-subtitle">
|
||
Hubungi super admin untuk mendapatkan akun dan akses dashboard
|
||
</p>
|
||
<a href="{{ route('admin.login') }}" class="btn-portal-primary" style="display: inline-block;">
|
||
Buka Halaman Login
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
// Animate numbers on scroll - UPDATED WITH REAL DATA
|
||
const animateValue = (element, start, end, duration, suffix = '+') => {
|
||
let startTimestamp = null;
|
||
const step = (timestamp) => {
|
||
if (!startTimestamp) startTimestamp = timestamp;
|
||
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
|
||
const value = Math.floor(progress * (end - start) + start);
|
||
element.textContent = value + suffix;
|
||
if (progress < 1) {
|
||
window.requestAnimationFrame(step);
|
||
}
|
||
};
|
||
window.requestAnimationFrame(step);
|
||
};
|
||
|
||
// Observer for stats animation
|
||
const statsObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
// Gunakan data real dari backend
|
||
animateValue(document.getElementById('stat-owners'), 0, {{ $totalAdmins }}, 2000);
|
||
animateValue(document.getElementById('stat-properties'), 0, {{ $totalProperti }}, 2000);
|
||
animateValue(document.getElementById('stat-bookings'), 0, {{ $totalBookings }}, 2000);
|
||
statsObserver.unobserve(entry.target);
|
||
}
|
||
});
|
||
});
|
||
|
||
const statsSection = document.querySelector('.stats-section');
|
||
if (statsSection) {
|
||
statsObserver.observe(statsSection);
|
||
}
|
||
</script>
|
||
|
||
@endsection
|