@extends('layouts.app')

@section('title', 'Tentang Kami')

@section('content')
<div class="bg-gray-50/50 py-12">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white py-12 px-8 text-center">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-white/20 rounded-2xl mb-4">
                    <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                    </svg>
                </div>
                <h1 class="text-3xl md:text-4xl font-bold mb-3">Apa itu CDP</h1>
                <p class="text-lg text-blue-200 max-w-2xl mx-auto">Platform Buku Digital Indonesia</p>
            </div>
            
            <div class="p-8 md:p-12">
                <div class="prose prose-slate max-w-none">
                    <h2 class="text-2xl font-bold text-gray-800 mb-4">Apa itu CDP?</h2>
                    <p class="text-gray-600 leading-relaxed mb-8">
                        Luaran Platform digital yang berisi tentang perancangan pembelajaran Bahasa Indonesia 
                        yang inovatif dengan integrasi Case Method, Deep Learning, dan Project Based Learning.
                    </p>
                    
                    <h2 class="text-2xl font-bold text-gray-800 mb-4">Oleh</h2>
                    <div class="space-y-3 text-gray-600">
                        <div class="flex items-center gap-3">
                            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                            <span>Roni Sulistyo</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                            <span>Andayani</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                            <span>Atikah Anindyarini</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection