# стильный сайт модельного агентства

<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Модельное агентство - Стильный сайт</title>
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet" />
  <!-- Tailwind CSS -->
  <script src="https://app.aisearch.ru/static/tailwind/tailwind.js"></script>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body class="bg-gray-100 font-montserrat text-gray-800">

  <!-- HEADER -->
  <header class="bg-white shadow">
    <div class="container mx-auto px-6 py-4 flex justify-between items-center">
      <div class="text-2xl font-bold text-gray-800">ModelAgency</div>
      <nav class="space-x-6">
        <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">Главная</a>
        <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">Модели</a>
        <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">О нас</a>
        <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">Контакты</a>
      </nav>
    </div>
  </header>

  <!-- HERO SECTION -->
  <section class="relative bg-gray-900 text-white">
    <div class="container mx-auto px-6 py-20 text-center">
      <h1 class="text-4xl md:text-5xl font-bold mb-4">Стильное агентство моделей</h1>
      <p class="text-lg md:text-xl mb-8">Премиум модели для фотосессий, показов и рекламы</p>
      <a href="#models" class="bg-white text-gray-900 px-6 py-3 rounded-full font-semibold hover:bg-gray-200 transition">Узнать больше</a>
    </div>
    <img src="https://placehold.co/1600x600/png?text=Стильное+модельное+агентство" alt="Современная съемочная площадка с профессиональными моделями и фотографами" class="w-full absolute bottom-0 left-0 opacity-75"/>
  </section>

  <!-- О НАС -->
  <section class="max-w-7xl mx-auto px-6 py-16 bg-gray-50">
    <h2 class="text-3xl font-bold text-center mb-8">О нашем агентстве</h2>
    <div class="grid md:grid-cols-3 gap-8 items-center">
      <div class="text-center md:text-left">
        <img src="https://placehold.co/400x300/png?text=Наша+команда" alt="Профессиональная команда менеджеров и стилистов модельного агентства" class="mx-auto md:mx-0 rounded-lg shadow-lg"/>
      </div>
      <div class="md:col-span-2 space-y-4">
        <p class="text-gray-700">Наше модельное агентство объединяет талантливых моделей с международными стандартами. Мы предоставляем услуги по подбору моделей для различных рекламных кампаний, фотосессий и показов.</p>
        <p class="text-gray-700">Опытные менеджеры и стилисты работают для того, чтобы каждая модель выглядела идеально и чувствовала себя уверенно на любой площадке.</p>
        <p class="text-gray-700">Присоединяйтесь к нашему сообществу талантов и будьте в центре модных трендов.</p>
      </div>
    </div>
  </section>

  <!-- Наши модели -->
  <section id="models" class="max-w-7xl mx-auto px-6 py-16">
    <h2 class="text-3xl font-bold text-center mb-8">Наши модели</h2>
    <div class="grid md:grid-cols-3 gap-8">
      <!-- Модель 1 -->
      <div class="bg-white rounded-lg shadow-lg overflow-hidden transition hover:scale-105 duration-300">
        <img src="https://placehold.co/400x500/png?text=Модель+1" alt="Портрет молодой модели с естественным макияжем и стильной прической в студийной обстановке" class="w-full h-64 object-cover"/>
        <div class="p-4 text-center">
          <h3 class="text-xl font-semibold mb-2">Елена Иванова</h3>
          <p class="text-gray-600 mb-4">Высота: 177 см, Категория: Катерина</p>
          <a href="#" class="text-blue-600 hover:underline font-semibold">Подробнее</a>
        </div>
      </div>
      <!-- Модель 2 -->
      <div class="bg-white rounded-lg shadow-lg overflow-hidden transition hover:scale-105 duration-300">
        <img src="https://placehold.co/400x500/png?text=Модель+2" alt="Портрет модели в городском стиле с ярким макияжем и дерзкой прической на улице" class="w-full h-64 object-cover"/>
        <div class="p-4 text-center">
          <h3 class="text-xl font-semibold mb-2">Анастасия Соколова</h3>
          <p class="text-gray-600 mb-4">Высота: 175 см, Категория: Весна</p>
          <a href="#" class="text-blue-600 hover:underline font-semibold">Подробнее</a>
        </div>
      </div>
      <!-- Модель 3 -->
      <div class="bg-white rounded-lg shadow-lg overflow-hidden transition hover:scale-105 duration-300">
        <img src="https://placehold.co/400x500/png?text=Модель+3" alt="Портрет модели с короткой стрижкой, модным макияжем и уличным стилем в метро" class="w-full h-64 object-cover"/>
        <div class="p-4 text-center">
          <h3 class="text-xl font-semibold mb-2">Дмитрий Ковальчук</h3>
          <p class="text-gray-600 mb-4">Высота: 185 см, Категория: Мужчины</p>
          <a href="#" class="text-blue-600 hover:underline font-semibold">Подробнее</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Наши услуги -->
  <section class="max-w-7xl mx-auto px-6 py-16 bg-gray-50">
    <h2 class="text-3xl font-bold text-center mb-8">Наши услуги</h2>
    <div class="grid md:grid-cols-3 gap-8 text-center">
      <!-- Услуга 1 -->
      <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
        <i class="fas fa-camera-retro fa-3x mb-4 text-blue-500"></i>
        <h3 class="text-xl font-semibold mb-2">Фотосессии</h3>
        <p class="text-gray-600">Организация профессиональных фотосессий для каталогов, рекламы и портфолио моделей.</p>
      </div>
      <!-- Услуга 2 -->
      <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
        <i class="fas fa-user-tie fa-3x mb-4 text-green-500"></i>
        <h3 class="text-xl font-semibold mb-2">Показ мод</h3>
        <p class="text-gray-600">Подготовка и организация дефиле для модных показов и презентаций коллекций.</p>
      </div>
      <!-- Услуга 3 -->
      <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
        <i class="fas fa-ad fa-3x mb-4 text-yellow-500"></i>
        <h3 class="text-xl font-semibold mb-2">Реклама и брендинг</h3>
        <p class="text-gray-600">Модели для фотомоделей, видеосъемки, рекламных кампаний и мероприятий.</p>
      </div>
    </div>
  </section>

  <!-- Контакты -->
  <section class="max-w-7xl mx-auto px-6 py-16">
    <h2 class="text-3xl font-bold text-center mb-8">Свяжитесь с нами</h2>
    <div class="md:flex md:space-x-8">
      <div class="md:w-1/2 mb-8 md:mb-0">
        <form class="bg-white p-8 rounded-lg shadow-lg space-y-4">
          <div>
            <label class="block mb-2 font-semibold" for="name">Имя</label>
            <input class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" type="text" id="name" placeholder="Ваше имя" />
          </div>
          <div>
            <label class="block mb-2 font-semibold" for="email">Email</label>
            <input class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" type="email" id="email" placeholder="Ваш Email" />
          </div>
          <div>
            <label class="block mb-2 font-semibold" for="message">Сообщение</label>
            <textarea class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" id="message" rows="4" placeholder="Ваше сообщение"></textarea>
          </div>
          <button class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition" type="submit">Отправить</button>
        </form>
      </div>
      <div class="md:w-1/2 space-y-6">
        <div class="flex items-center space-x-4">
          <i class="fas fa-map-marker-alt text-blue-500 text-2xl"></i>
          <div>
            <h4 class="font-semibold mb-1">Адрес</h4>
            <p class="text-gray-700">ул. Модная, д. 15, Москва</p>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <i class="fas fa-phone-alt text-green-500 text-2xl"></i>
          <div>
            <h4 class="font-semibold mb-1">Телефон</h4>
            <p class="text-gray-700">+7 495 123-45-67</p>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <i class="fas fa-envelope text-yellow-500 text-2xl"></i>
          <div>
            <h4 class="font-semibold mb-1">Email</h4>
            <p class="text-gray-700">info@modelagency.ru</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Подвал -->
  <footer class="bg-gray-800 text-gray-200 py-8">
    <div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
      <p>&copy; 2024 ModelAgency. Все права защищены.</p>
      <div class="flex space-x-4">
        <a href="#" class="hover:text-white"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
        <a href="#" class="hover:text-white"><i class="fab fa-telegram-plane"></i></a>
      </div>
    </div>
  </footer>

  <!-- scripts -->
  <script type="module">
    // Нет необходимости в дополнительных скриптах для этой версии сайта
  </script>

</body>
</html>
