تصميم موقع متكامل للمهندسين

import React from 'react';

const App = () => {
  return (
    <div className="bg-gray-100 min-h-screen">
      {/* Header */}
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-2xl font-bold">المجمع المهني</h1>
        <nav>
          <ul className="flex space-x-4">
            <li>الصفحة الرئيسية</li>
            <li>حول</li>
            <li>تواصل معنا</li>
          </ul>
        </nav>
      </header>

      {/* Hero Section */}
      <section className="bg-cover bg-center h-96" style={{ backgroundImage: 'url(https://placehold.co/1200x400)' }}>
        <div className="bg-black bg-opacity-50 h-full flex items-center justify-center">
          <h2 className="text-white text-4xl font-bold">مرحبًا بكم في منصتنا المتكاملة</h2>
        </div>
      </section>

      {/* Services Section */}
      <section className="p-8">
        <h2 className="text-3xl font-bold text-center mb-8">خدماتنا</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h3 className="text-xl font-bold">حجز موعد</h3>
            <p>احجز موعدًا مع المهندس أو المكتب الاستشاري.</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h3 className="text-xl font-bold">عروض الأسعار</h3>
            <p>احصل على عروض أسعار من الموردين.</p>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h3 className="text-xl font-bold">الإعلانات</h3>
            <p>انشر إعلاناتك للوصول إلى جميع الأطراف.</p>
          </div>
        </div>
      </section>

      {/* Forum Section */}
      <section className="bg-gray-200 p-8">
        <h2 className="text-3xl font-bold text-center mb-8">المنتدى</h2>
        <div className="bg-white p-6 rounded-lg shadow-lg">
          <p>شارك في النقاشات والاستفسارات مع المهنيين الآخرين.</p>
        </div>
      </section>

      {/* Contact Section */}
      <section className="p-8">
        <h2 className="text-3xl font-bold text-center mb-8">تواصل معنا</h2>
        <form className="bg-white p-6 rounded-lg shadow-lg">
          <div className="mb-4">
            <label className="block text-gray-700">الاسم</label>
            <input type="text" className="w-full p-2 border rounded" />
          </div>
          <div className="mb-4">
            <label className="block text-gray-700">البريد الإلكتروني</label>
            <input type="email" className="w-full p-2 border rounded" />
          </div>
          <div className="mb-4">
            <label className="block text-gray-700">الرسالة</label>
            <textarea className="w-full p-2 border rounded"></textarea>
          </div>
          <button type="submit" className="bg-blue-600 text-white p-2 rounded">إرسال</button>
        </form>
      </section>

      {/* Footer */}
      <footer className="bg-blue-600 text-white p-4 text-center">
        <p>&copy; 2025 المجمع المهني. جميع الحقوق محفوظة.</p>
      </footer>
    </div>
  );
};

export default App;