@extends('layouts.app')

@section('title', 'About Us - CHEER MEDICS FOUNDATION')

@section('content')
<!-- ABOUT PAGE -->
<div class="pt-20">
    <section class="relative py-32 animated-bg text-white overflow-hidden"><div class="absolute inset-0 bg-black/30"></div><div class="relative max-w-7xl mx-auto px-4 text-center"><h1 class="text-6xl md:text-7xl font-black mb-6">About CHEER MEDICS</h1><p class="text-2xl max-w-4xl mx-auto">A non-profit organization dedicated to improving lives of medical students and elderly people</p></div></section>
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid md:grid-cols-2 gap-16 mb-20">
                <div><div class="h-80 rounded-3xl overflow-hidden shadow-2xl mb-8"><img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=600" class="w-full h-full object-cover"></div><h2 class="text-4xl font-black text-gray-900 mb-6">Our Mission</h2><p class="text-gray-600 text-lg leading-relaxed mb-4">Welcome to CHEER MEDICS FOUNDATION, where we are passionate about making a positive impact and creating awareness about the challenges faced by medical students and elderly communities.</p><p class="text-gray-600 text-lg leading-relaxed">Our mission is to provide comprehensive support that addresses financial, mental, emotional, and healthcare needs through dedicated programs, partnerships, and community engagement.</p></div>
                <div><div class="h-80 rounded-3xl overflow-hidden shadow-2xl mb-8"><img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=600" class="w-full h-full object-cover"></div><h2 class="text-4xl font-black text-gray-900 mb-6">Our Vision</h2><p class="text-gray-600 text-lg leading-relaxed mb-4">We envision a world where medical education is accessible to all talented individuals regardless of their financial background, and where elderly people receive comprehensive healthcare support and live with dignity.</p><p class="text-gray-600 text-lg leading-relaxed">By bridging gaps in healthcare, education, and environmental awareness, we aim to build stronger, healthier communities.</p></div>
            </div>
            <div class="gradient-primary rounded-3xl p-12 shadow-2xl">
                <h2 class="text-4xl font-black text-white mb-12 text-center">Our Core Values</h2>
                <div class="grid md:grid-cols-3 gap-10">
                    <div class="text-center"><div class="feature-icon mx-auto mb-6"><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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg></div><h3 class="text-2xl font-black text-white mb-4">Compassion</h3><p class="text-white/90">We lead with empathy and understanding in all our interactions with students and elderly beneficiaries</p></div>
                    <div class="text-center"><div class="feature-icon mx-auto mb-6"><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 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg></div><h3 class="text-2xl font-black text-white mb-4">Inclusivity</h3><p class="text-white/90">We believe in equal opportunities and comprehensive support for marginalized and disadvantaged communities</p></div>
                    <div class="text-center"><div class="feature-icon mx-auto mb-6"><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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg></div><h3 class="text-2xl font-black text-white mb-4">Impact</h3><p class="text-white/90">We measure success by the positive, lasting change we create in people's lives and communities</p></div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection