{{-- resources/views/Services.blade.php --}}
@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-yellow-100 py-16 relative overflow-hidden">

    <!-- ✨ Floating Gradient Circles Background -->
    <div class="absolute -top-20 -left-20 w-96 h-96 bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 rounded-full opacity-30 animate-pulse-slow"></div>
    <div class="absolute -bottom-32 -right-32 w-96 h-96 bg-gradient-to-r from-yellow-300 via-orange-300 to-red-400 rounded-full opacity-30 animate-pulse-slow"></div>

    <div class="relative max-w-7xl mx-auto px-6">

        <!-- ======================
             SECTION 1: HERO
             ====================== -->
        <section class="text-center max-w-4xl mx-auto px-6">
            <h1 class="text-5xl font-extrabold text-black-700 mb-4">Our Services</h1>
            <p class="text-lg text-gray-700 leading-relaxed">
                We provide powerful tools and services for creating stunning <strong>multi-user portfolios</strong>.  
                Manage skills, projects, experiences, and showcase your professional work effortlessly.
            </p>
            <img src="storage/service.png" alt="Services Banner" class="mx-auto mt-6 rounded-xl shadow-lg w-full max-w-3xl">
        </section>

        <!-- ======================
             SECTION 2: FEATURED SERVICES
             ====================== -->
        <section class="mt-16 px-6 max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-indigo-700 text-center">Featured Services</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-10">

                <div class="bg-white p-6 rounded-xl shadow text-center">
                    <i class="fa-solid fa-user-pen text-3xl text-indigo-600"></i>
                    <h3 class="text-xl font-semibold mt-3">Profile Management</h3>
                    <p class="text-gray-600 text-sm">Create and customize your user profile with rich details.</p>
                </div>

                <div class="bg-white p-6 rounded-xl shadow text-center">
                    <i class="fa-solid fa-layer-group text-3xl text-indigo-600"></i>
                    <h3 class="text-xl font-semibold mt-3">Projects Showcase</h3>
                    <p class="text-gray-600 text-sm">Add, edit, and display projects beautifully in your portfolio.</p>
                </div>

                <div class="bg-white p-6 rounded-xl shadow text-center">
                    <i class="fa-solid fa-graduation-cap text-3xl text-indigo-600"></i>
                    <h3 class="text-xl font-semibold mt-3">Skills & Experience</h3>
                    <p class="text-gray-600 text-sm">Highlight professional skills and showcase work experience.</p>
                </div>

                <div class="bg-white p-6 rounded-xl shadow text-center">
                    <i class="fa-solid fa-globe text-3xl text-indigo-600"></i>
                    <h3 class="text-xl font-semibold mt-3">Public Portfolios</h3>
                    <p class="text-gray-600 text-sm">Share your portfolio globally with a public profile page.</p>
                </div>

            </div>
        </section>

        <!-- ======================
             SECTION 3: COLLABORATION TOOLS
             ====================== -->
        <section class="mt-20 px-6 max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-indigo-700 text-center">Collaboration Tools</h2>
            <p class="text-center text-gray-700 mt-4 max-w-2xl mx-auto">
                Work together with team members, mentors, or clients. Add collaborators to projects, and manage portfolio access efficiently.
            </p>
        </section>

        <!-- ======================
             SECTION 4: ANALYTICS & INSIGHTS
             ====================== -->
        <section class="mt-16 px-6 max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-indigo-700 text-center">Analytics & Insights</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-10">
                <div class="bg-white p-6 rounded-xl shadow">
                    <h3 class="text-xl font-semibold mb-2">Portfolio Views</h3>
                    <p class="text-gray-600 text-sm">Track how many people viewed your portfolio in real-time.</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow">
                    <h3 class="text-xl font-semibold mb-2">Skills Analytics</h3>
                    <p class="text-gray-600 text-sm">Analyze which skills are most showcased and appreciated.</p>
                </div>
            </div>
        </section>

        <!-- ======================
             SECTION 5: SUPPORT & RESOURCES
             ====================== -->
        <section class="mt-20 px-6 max-w-6xl mx-auto mb-16">
            <h2 class="text-3xl font-bold text-indigo-700 text-center">Support & Resources</h2>
            <p class="text-center text-gray-700 mt-4 max-w-2xl mx-auto">
                Access tutorials, FAQs, and dedicated support to help users build their portfolios seamlessly.
            </p>
            <div class="flex flex-wrap justify-center gap-6 mt-8">
                <div class="bg-white p-6 rounded-xl shadow text-center w-64">
                    <i class="fa-solid fa-book text-3xl text-indigo-600"></i>
                    <h3 class="text-xl font-semibold mt-3">Tutorials</h3>
                </div>
                <div class="bg-white p-6 rounded-xl shadow text-center w-64">
                    <i class="fa-solid fa-circle-question text-3xl text-indigo-600"></i>
                    <h3 class="text-xl font-semibold mt-3">FAQs</h3>
                </div>
                <div class="bg-white p-6 rounded-xl shadow text-center w-64">
                    <i class="fa-solid fa-headset text-3xl text-indigo-600"></i>
                    <h3 class="text-xl font-semibold mt-3">Dedicated Support</h3>
                </div>
            </div>
        </section>

    </div>
</div>

<style>
@keyframes pulse-slow {
    0%,100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.2); opacity: 0.5; }
}
.animate-pulse-slow {
    animation: pulse-slow 10s ease-in-out infinite;
}
</style>

@endsection