import { Moon, Calendar, Users } from 'lucide-react';

export default function Ramadan() {
  return (
    <div className="min-h-screen bg-gray-50 pt-32">
      <div className="max-w-7xl mx-auto px-6">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4">Ramadan Special</h1>
          <p className="text-xl text-gray-600">Connect with others during this blessed month</p>
        </div>
        <div className="grid md:grid-cols-3 gap-8">
          <div className="bg-white rounded-lg shadow-sm p-6 text-center">
            <div className="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <Moon className="text-pink-500 w-8 h-8" />
            </div>
            <h3 className="text-xl font-semibold mb-4">Ramadan Events</h3>
            <p className="text-gray-600">Join our special Iftar meetups and events</p>
          </div>
          <div className="bg-white rounded-lg shadow-sm p-6 text-center">
            <div className="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <Calendar className="text-pink-500 w-8 h-8" />
            </div>
            <h3 className="text-xl font-semibold mb-4">Prayer Times</h3>
            <p className="text-gray-600">Stay updated with local prayer times</p>
          </div>
          <div className="bg-white rounded-lg shadow-sm p-6 text-center">
            <div className="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <Users className="text-pink-500 w-8 h-8" />
            </div>
            <h3 className="text-xl font-semibold mb-4">Community</h3>
            <p className="text-gray-600">Connect with others in your area</p>
          </div>
        </div>
      </div>
    </div>
  );
}