<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - TempHire</title>
    
    <!-- Add this script for custom colors -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#313DE7',    
                        secondary: '#FF6B6B',  
                        accent: '#4CAF50',     
                        neutral: '#3D4451',    
                        'base-100': '#FFFFFF',
                    }
                }
            }
        }
    </script>
    
    <link href="https://cdn.jsdelivr.net/npm/daisyui@3.9.0/dist/full.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    
    <!-- Add custom styles -->
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #313DE7 0%, #FF6B6B 100%);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(49, 61, 231, 0.1);
        }
    </style>
</head>
<body class="bg-white">
    <?php include 'navbar.php'?>

    <!-- Hero Section -->
    <div class="hero min-h-[50vh] bg-base-200 relative overflow-hidden">
        <div class="hero-content text-center">
            <div class="max-w-3xl">
                <h1 class="text-5xl font-bold text-primary mb-8">Welcome to TempHire</h1>
                <p class="text-xl leading-relaxed text-neutral">
                    Your gateway to flexible employment opportunities. We connect talented individuals with meaningful part-time work that fits their lifestyle.
                </p>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container mx-auto px-4 py-12">
        <div class="grid gap-12 max-w-4xl mx-auto">
            <!-- About Cards -->
            <div class="grid md:grid-cols-2 gap-6">
                <div class="card bg-white shadow-xl card-hover border border-primary/10">
                    <div class="card-body">
                        <i class='bx bx-search text-4xl text-primary'></i>
                        <h3 class="card-title text-primary">Find Your Perfect Match</h3>
                        <p class="text-neutral">Browse through carefully curated job listings that match your skills, schedule, and career goals.</p>
                    </div>
                </div>

                <div class="card bg-white shadow-xl card-hover border border-primary/10">
                    <div class="card-body">
                        <i class='bx bx-time-five text-4xl text-primary'></i>
                        <h3 class="card-title text-primary">Flexible Hours</h3>
                        <p class="text-neutral">Whether you're a student, parent, or professional, find opportunities that fit your schedule.</p>
                    </div>
                </div>
            </div>

            <!-- Mission Section -->
            <div class="card bg-primary text-white shadow-xl">
                <div class="card-body items-center text-center">
                    <i class='bx bx-target-lock text-5xl mb-4'></i>
                    <h2 class="text-3xl font-bold mb-4">Our Mission</h2>
                    <p class="text-lg max-w-2xl">
                        We're committed to empowering individuals by providing access to quality part-time opportunities while helping businesses find exceptional talent. Our platform creates a community where everyone can thrive through meaningful work.
                    </p>
                </div>
            </div>

            
        </div>
    </div>

    <?php include 'footer.php'?>
</body>
</html>