@extends('user-dashboard.app')

@section('content_dash')

 <div>
                       
                    <!-- Welcome Section -->
                    <div class="mb-6">
                        <h1 class="text-2xl md:text-3xl font-bold text-dark">Welcome back, Sarah!</h1>
                        <p class="text-light">Here's your learning summary for today, November 10</p>
                    </div>

                    <!-- Courses Section -->
                    <div class="mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-xl font-bold text-dark">Your Courses</h2>
                            <a href="#"
                                class="text-sm font-medium text-primary hover:text-primary-dark transition-colors flex items-center">
                                View All
                                <svg class="w-4 h-4 ml-1" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
                                </svg>
                            </a>
                        </div>

                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                            <!-- Course Card 1 -->
                            <div
                                class="overflow-hidden bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow border border-gray-100">
                                <div class="relative">
                                    <img class="w-full h-40 object-cover"
                                        src="https://images.unsplash.com/photo-1542621334-a254cf47733d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
                                        alt="Course">
                                    <div
                                        class="absolute top-2 right-2 bg-accent text-dark text-xs font-bold px-2 py-1 rounded">
                                        New</div>
                                    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-200">
                                        <div class="h-1 bg-success" style="width: 75%"></div>
                                    </div>
                                </div>
                                <div class="p-4 sm:p-5">
                                    <div class="flex items-center justify-between mb-2">
                                        <span
                                            class="text-xs font-medium px-2 py-1 rounded bg-primary-light/10 text-primary">Mathematics</span>
                                        <div class="flex items-center text-light text-sm">
                                            <svg class="w-4 h-4 text-accent mr-1" viewBox="0 0 24 24"
                                                fill="currentColor">
                                                <path
                                                    d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                                            </svg>
                                            <span>4.8</span>
                                        </div>
                                    </div>
                                    <h3 class="mb-2 text-lg font-bold text-dark">Advanced Calculus</h3>
                                    <p class="mb-4 text-sm text-light">Master advanced calculus concepts with real-world
                                        applications.</p>
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center text-sm text-light">
                                            <svg class="w-4 h-4 mr-1" viewBox="0 0 24 24" fill="currentColor">
                                                <path
                                                    d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
                                            </svg>
                                            <span>24 Lessons</span>
                                        </div>
                                        <button
                                            class="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded-full bg-gradient-to-r from-primary to-primary-dark text-white hover:from-primary-dark hover:to-primary transition-colors">
                                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                                                <path d="M8 5v14l11-7z" />
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Course Card 2 -->
                            <div
                                class="overflow-hidden bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow border border-gray-100">
                                <div class="relative">
                                    <img class="w-full h-40 object-cover"
                                        src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
                                        alt="Course">
                                    <div
                                        class="absolute top-2 right-2 bg-error text-white text-xs font-bold px-2 py-1 rounded">
                                        Due Soon</div>
                                    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-200">
                                        <div class="h-1 bg-warning" style="width: 45%"></div>
                                    </div>
                                </div>
                                <div class="p-4 sm:p-5">
                                    <div class="flex items-center justify-between mb-2">
                                        <span
                                            class="text-xs font-medium px-2 py-1 rounded bg-primary-light/10 text-primary">Computer
                                            Science</span>
                                        <div class="flex items-center text-light text-sm">
                                            <svg class="w-4 h-4 text-accent mr-1" viewBox="0 0 24 24"
                                                fill="currentColor">
                                                <path
                                                    d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                                            </svg>
                                            <span>4.9</span>
                                        </div>
                                    </div>
                                    <h3 class="mb-2 text-lg font-bold text-dark">Machine Learning</h3>
                                    <p class="mb-4 text-sm text-light">Introduction to machine learning algorithms and
                                        applications.</p>
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center text-sm text-light">
                                            <svg class="w-4 h-4 mr-1" viewBox="0 0 24 24" fill="currentColor">
                                                <path
                                                    d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
                                            </svg>
                                            <span>18 Lessons</span>
                                        </div>
                                        <button
                                            class="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded-full bg-gradient-to-r from-primary to-primary-dark text-white hover:from-primary-dark hover:to-primary transition-colors">
                                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                                                <path d="M8 5v14l11-7z" />
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Course Card 3 -->
                            <div
                                class="overflow-hidden bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow border border-gray-100">
                                <div class="relative">
                                    <img class="w-full h-40 object-cover"
                                        src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
                                        alt="Course">
                                    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-200">
                                        <div class="h-1 bg-primary" style="width: 90%"></div>
                                    </div>
                                </div>
                                <div class="p-4 sm:p-5">
                                    <div class="flex items-center justify-between mb-2">
                                        <span
                                            class="text-xs font-medium px-2 py-1 rounded bg-primary-light/10 text-primary">Business</span>
                                        <div class="flex items-center text-light text-sm">
                                            <svg class="w-4 h-4 text-accent mr-1" viewBox="0 0 24 24"
                                                fill="currentColor">
                                                <path
                                                    d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                                            </svg>
                                            <span>4.7</span>
                                        </div>
                                    </div>
                                    <h3 class="mb-2 text-lg font-bold text-dark">Digital Marketing</h3>
                                    <p class="mb-4 text-sm text-light">Learn modern digital marketing strategies for 2023.
                                    </p>
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center text-sm text-light">
                                            <svg class="w-4 h-4 mr-1" viewBox="0 0 24 24" fill="currentColor">
                                                <path
                                                    d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
                                            </svg>
                                            <span>16 Lessons</span>
                                        </div>
                                        <button
                                            class="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded-full bg-gradient-to-r from-primary to-primary-dark text-white hover:from-primary-dark hover:to-primary transition-colors">
                                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                                                <path d="M8 5v14l11-7z" />
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                            <!-- Course Card 1 -->
                            <div
                                class="overflow-hidden bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow border border-gray-100">
                                <div class="relative">
                                    <img class="w-full h-40 object-cover"
                                        src="https://images.unsplash.com/photo-1542621334-a254cf47733d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
                                        alt="Course">
                                    <div
                                        class="absolute top-2 right-2 bg-accent text-dark text-xs font-bold px-2 py-1 rounded">
                                        New</div>
                                    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-200">
                                        <div class="h-1 bg-success" style="width: 75%"></div>
                                    </div>
                                </div>
                                <div class="p-4 sm:p-5">
                                    <div class="flex items-center justify-between mb-2">
                                        <span
                                            class="text-xs font-medium px-2 py-1 rounded bg-primary-light/10 text-primary">Mathematics</span>
                                        <div class="flex items-center text-light text-sm">
                                            <svg class="w-4 h-4 text-accent mr-1" viewBox="0 0 24 24"
                                                fill="currentColor">
                                                <path
                                                    d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                                            </svg>
                                            <span>4.8</span>
                                        </div>
                                    </div>
                                    <h3 class="mb-2 text-lg font-bold text-dark">Advanced Calculus</h3>
                                    <p class="mb-4 text-sm text-light">Master advanced calculus concepts with real-world
                                        applications.</p>
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center text-sm text-light">
                                            <svg class="w-4 h-4 mr-1" viewBox="0 0 24 24" fill="currentColor">
                                                <path
                                                    d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
                                            </svg>
                                            <span>24 Lessons</span>
                                        </div>
                                        <button
                                            class="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded-full bg-gradient-to-r from-primary to-primary-dark text-white hover:from-primary-dark hover:to-primary transition-colors">
                                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                                                <path d="M8 5v14l11-7z" />
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Course Card 2 -->
                            <div
                                class="overflow-hidden bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow border border-gray-100">
                                <div class="relative">
                                    <img class="w-full h-40 object-cover"
                                        src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
                                        alt="Course">
                                    <div
                                        class="absolute top-2 right-2 bg-error text-white text-xs font-bold px-2 py-1 rounded">
                                        Due Soon</div>
                                    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-200">
                                        <div class="h-1 bg-warning" style="width: 45%"></div>
                                    </div>
                                </div>
                                <div class="p-4 sm:p-5">
                                    <div class="flex items-center justify-between mb-2">
                                        <span
                                            class="text-xs font-medium px-2 py-1 rounded bg-primary-light/10 text-primary">Computer
                                            Science</span>
                                        <div class="flex items-center text-light text-sm">
                                            <svg class="w-4 h-4 text-accent mr-1" viewBox="0 0 24 24"
                                                fill="currentColor">
                                                <path
                                                    d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                                            </svg>
                                            <span>4.9</span>
                                        </div>
                                    </div>
                                    <h3 class="mb-2 text-lg font-bold text-dark">Machine Learning</h3>
                                    <p class="mb-4 text-sm text-light">Introduction to machine learning algorithms and
                                        applications.</p>
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center text-sm text-light">
                                            <svg class="w-4 h-4 mr-1" viewBox="0 0 24 24" fill="currentColor">
                                                <path
                                                    d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
                                            </svg>
                                            <span>18 Lessons</span>
                                        </div>
                                        <button
                                            class="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded-full bg-gradient-to-r from-primary to-primary-dark text-white hover:from-primary-dark hover:to-primary transition-colors">
                                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                                                <path d="M8 5v14l11-7z" />
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Course Card 3 -->
                            <div
                                class="overflow-hidden bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow border border-gray-100">
                                <div class="relative">
                                    <img class="w-full h-40 object-cover"
                                        src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
                                        alt="Course">
                                    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-200">
                                        <div class="h-1 bg-primary" style="width: 90%"></div>
                                    </div>
                                </div>
                                <div class="p-4 sm:p-5">
                                    <div class="flex items-center justify-between mb-2">
                                        <span
                                            class="text-xs font-medium px-2 py-1 rounded bg-primary-light/10 text-primary">Business</span>
                                        <div class="flex items-center text-light text-sm">
                                            <svg class="w-4 h-4 text-accent mr-1" viewBox="0 0 24 24"
                                                fill="currentColor">
                                                <path
                                                    d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                                            </svg>
                                            <span>4.7</span>
                                        </div>
                                    </div>
                                    <h3 class="mb-2 text-lg font-bold text-dark">Digital Marketing</h3>
                                    <p class="mb-4 text-sm text-light">Learn modern digital marketing strategies for 2023.
                                    </p>
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center text-sm text-light">
                                            <svg class="w-4 h-4 mr-1" viewBox="0 0 24 24" fill="currentColor">
                                                <path
                                                    d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
                                            </svg>
                                            <span>16 Lessons</span>
                                        </div>
                                        <button
                                            class="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center rounded-full bg-gradient-to-r from-primary to-primary-dark text-white hover:from-primary-dark hover:to-primary transition-colors">
                                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                                                <path d="M8 5v14l11-7z" />
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
@endsection