@extends('frontend.v2.layout.app')
@section('content')
    <div class="container-fluid my-5">
        <div class="row align-items-center">
            <!-- Header Section -->
        <div class="row">
            <div class="col-12">
                <div class="card  text-white shadow text-center mb-4">
                    <div class="card-body">
                        <h1 class="display-5">About Us</h1>
                        <p class="text-black">Learn more about our mission, vision, and the values that drive us.</p>
                    </div>
                </div>
            </div>
        </div>
            
            <!-- Left Column: Text Content -->
            <div class="col-md-6">
                <p>
                    Welcome to our platform! We are a passionate team dedicated to delivering high-quality education 
                    and training services to learners of all levels.
                </p>

                <h4 class="text-primary mt-4">Our Mission</h4>
                <p>
                    To empower individuals through accessible, affordable, and impactful learning experiences.
                </p>

                <h4 class="text-success mt-4">Our Vision</h4>
                <p>
                    To be a beacon of excellence in education, inspiring success and lifelong learning across communities.
                </p>

                <h4 class="text-info mt-4">Why Choose Us?</h4>
                <ul class="list-unstyled">
                    <li>✔️ Expert instructors and mentors</li>
                    <li>✔️ Hands-on, practical courses</li>
                    <li>✔️ Supportive learning environment</li>
                    <li>✔️ Proven track record of student success</li>
                </ul>
            </div>

            <!-- Right Column: Image -->
            <div class="col-md-6 text-center">
                <img src="https://t3.ftcdn.net/jpg/01/35/70/90/360_F_135709080_2XHH0eeTGZ6rAaxgyuLKKdTaUCZAgPCZ.jpg" 
                     class="img-fluid rounded shadow" 
                     alt="About Us Image" style="max-height: 450px;">
            </div>
        </div>
    </div>
@endsection