Spaces:
Running
Running
Сделай стильный сайт, где пользователи могут оставлять отзывы о разных специалистах — программистах, дизайнерах, маркетологах, фрилансерах и т.д. Пусть будет каталог с фильтрами (по профессии, рейтингу), форма для добавления отзыва с оценкой (от 1 до 5 звёзд), возможность писать комментарии. Добавь секцию "Топ недели", тёмную и светлую тему, и стильный минималистичный дизайн. На главной — мотивационная фраза: "Найди своего специалиста. Доверяй отзывам, а не случайностям." Название сайта: ProfiRate - Initial Deployment
55dc51d verified | <html lang="ru" class="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ProfiRate - Отзывы о специалистах</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 500: '#3b82f6', | |
| 600: '#2563eb', | |
| 700: '#1d4ed8', | |
| }, | |
| dark: { | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .rating-stars { | |
| display: inline-flex; | |
| flex-direction: row-reverse; | |
| } | |
| .rating-stars input { | |
| display: none; | |
| } | |
| .rating-stars label { | |
| cursor: pointer; | |
| width: 30px; | |
| height: 30px; | |
| margin: 0 2px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d1d5db' stroke='currentColor' stroke-width='1'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: contain; | |
| } | |
| .rating-stars input:checked ~ label, | |
| .rating-stars label:hover, | |
| .rating-stars label:hover ~ label { | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b' stroke='currentColor' stroke-width='1'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); | |
| } | |
| .dark .rating-stars label { | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234b5563' stroke='currentColor' stroke-width='1'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); | |
| } | |
| .animate-float { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 dark:bg-dark-900 dark:text-gray-200 transition-all"> | |
| <!-- Header --> | |
| <header class="bg-white dark:bg-dark-800 shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-xl">PR</div> | |
| <h1 class="text-2xl font-bold text-blue-600 dark:text-blue-400">ProfiRate</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="font-medium hover:text-blue-600 dark:hover:text-blue-400">Главная</a> | |
| <a href="#specialists" class="font-medium hover:text-blue-600 dark:hover:text-blue-400">Специалисты</a> | |
| <a href="#top" class="font-medium hover:text-blue-600 dark:hover:text-blue-400">Топ недели</a> | |
| <a href="#add-review" class="font-medium hover:text-blue-600 dark:hover:text-blue-400">Оставить отзыв</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-dark-700 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-dark-600"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:block"></i> | |
| </button> | |
| <button class="md:hidden" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-dark-800 px-4 py-2 border-t"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#" class="font-medium hover:text-blue-600 dark:hover:text-blue-400 py-1">Главная</a> | |
| <a href="#specialists" class="font-medium hover:text-blue-600 dark:hover:text-blue-400 py-1">Специалисты</a> | |
| <a href="#top" class="font-medium hover:text-blue-600 dark:hover:text-blue-400 py-1">Топ недели</a> | |
| <a href="#add-review" class="font-medium hover:text-blue-600 dark:hover:text-blue-400 py-1">Оставить отзыв</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="py-16 md:py-24 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-dark-800 dark:to-dark-700"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold leading-tight mb-6"> | |
| Найди своего специалиста. <br> | |
| <span class="text-blue-600 dark:text-blue-400">Доверяй отзывам, а не случайностям.</span> | |
| </h2> | |
| <p class="text-lg text-gray-600 dark:text-gray-300 mb-8"> | |
| Тысячи проверенных профессионалов в одном месте. Читай отзывы, сравнивай рейтинги и находи лучших. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#specialists" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-all"> | |
| Найти специалиста | |
| </a> | |
| <a href="#add-review" class="px-6 py-3 border border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-dark-700 rounded-lg font-medium transition-all"> | |
| Оставить отзыв | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-yellow-400 rounded-full opacity-20 animate-float"></div> | |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-blue-400 rounded-full opacity-20 animate-float" style="animation-delay: 0.5s;"></div> | |
| <div class="relative bg-white dark:bg-dark-800 rounded-2xl shadow-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 dark:bg-dark-700 mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">Алексей Иванов</h4> | |
| <div class="flex items-center"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-sm text-gray-500">4.7</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| "Отличный специалист! Сделал сайт быстро и качественно. Все пожелания были учтены. Рекомендую!" | |
| </p> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span>Веб-разработчик</span> | |
| <span>2 дня назад</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Specialists Section --> | |
| <section id="specialists" class="py-16 bg-white dark:bg-dark-800"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Наши специалисты</h2> | |
| <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto"> | |
| Найдите профессионала в любой области. Фильтруйте по категориям и рейтингу, чтобы найти идеального кандидата. | |
| </p> | |
| </div> | |
| <!-- Filters --> | |
| <div class="mb-8 bg-gray-50 dark:bg-dark-700 rounded-xl p-4"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0"> | |
| <div class="flex-1"> | |
| <input type="text" placeholder="Поиск по имени или специализации..." class="w-full px-4 py-2 border border-gray-300 dark:border-dark-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-dark-800"> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <select class="px-4 py-2 border border-gray-300 dark:border-dark-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-dark-800"> | |
| <option value="">Все профессии</option> | |
| <option value="developer">Программист</option> | |
| <option value="designer">Дизайнер</option> | |
| <option value="marketing">Маркетолог</option> | |
| <option value="freelancer">Фрилансер</option> | |
| <option value="seo">SEO-специалист</option> | |
| </select> | |
| <select class="px-4 py-2 border border-gray-300 dark:border-dark-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-dark-800"> | |
| <option value="">Любой рейтинг</option> | |
| <option value="5">5 звёзд</option> | |
| <option value="4">4+ звёзды</option> | |
| <option value="3">3+ звёзды</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Specialists Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Specialist Card 1 --> | |
| <div class="bg-white dark:bg-dark-700 rounded-xl shadow-sm hover:shadow-md transition-all overflow-hidden border border-gray-100 dark:border-dark-600"> | |
| <div class="p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-16 h-16 rounded-full bg-gray-200 dark:bg-dark-600 mr-4"></div> | |
| <div> | |
| <h3 class="font-bold text-lg">Мария Петрова</h3> | |
| <span class="text-sm text-gray-500">UI/UX Дизайнер</span> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-sm text-gray-500">5.0 (24 отзыва)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3"> | |
| Создаю удобные и красивые интерфейсы. Работаю с Figma, Adobe XD, Photoshop. Более 5 лет опыта в дизайне. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Figma</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">UI Design</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Прототипирование</span> | |
| </div> | |
| <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-all"> | |
| Посмотреть отзывы | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Specialist Card 2 --> | |
| <div class="bg-white dark:bg-dark-700 rounded-xl shadow-sm hover:shadow-md transition-all overflow-hidden border border-gray-100 dark:border-dark-600"> | |
| <div class="p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-16 h-16 rounded-full bg-gray-200 dark:bg-dark-600 mr-4"></div> | |
| <div> | |
| <h3 class="font-bold text-lg">Дмитрий Смирнов</h3> | |
| <span class="text-sm text-gray-500">Full-stack разработчик</span> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-sm text-gray-500">4.2 (18 отзывов)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3"> | |
| Разрабатываю веб-приложения на React и Node.js. Имею опыт работы с базами данных и облачными сервисами. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">JavaScript</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">React</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Node.js</span> | |
| </div> | |
| <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-all"> | |
| Посмотреть отзывы | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Specialist Card 3 --> | |
| <div class="bg-white dark:bg-dark-700 rounded-xl shadow-sm hover:shadow-md transition-all overflow-hidden border border-gray-100 dark:border-dark-600"> | |
| <div class="p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-16 h-16 rounded-full bg-gray-200 dark:bg-dark-600 mr-4"></div> | |
| <div> | |
| <h3 class="font-bold text-lg">Анна Козлова</h3> | |
| <span class="text-sm text-gray-500">Маркетолог</span> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-sm text-gray-500">4.7 (31 отзыв)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3"> | |
| Помогаю бизнесу увеличивать продажи через digital-маркетинг. Настройка рекламы, контент-стратегии, аналитика. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">SMM</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Контекстная реклама</span> | |
| <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">Аналитика</span> | |
| </div> | |
| <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-all"> | |
| Посмотреть отзывы | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <button class="px-6 py-3 border border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-dark-700 rounded-lg font-medium transition-all"> | |
| Показать ещё | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Top Specialists Section --> | |
| <section id="top" class="py-16 bg-gray-50 dark:bg-dark-700"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Топ недели</h2> | |
| <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto"> | |
| Самые популярные специалисты этой недели по оценкам наших пользователей | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Top Specialist 1 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl shadow-sm hover:shadow-md transition-all overflow-hidden border border-gray-100 dark:border-dark-600"> | |
| <div class="relative"> | |
| <div class="absolute top-4 left-4 bg-yellow-500 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center"> | |
| <i class="fas fa-crown mr-1"></i> №1 | |
| </div> | |
| <div class="h-40 bg-gradient-to-r from-purple-500 to-pink-500"></div> | |
| </div> | |
| <div class="p-6 pt-0"> | |
| <div class="flex justify-center -mt-12 mb-4"> | |
| <div class="w-20 h-20 rounded-full border-4 border-white dark:border-dark-800 bg-gray-200 dark:bg-dark-600"></div> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="font-bold text-xl mb-1">Иван Васильев</h3> | |
| <span class="text-sm text-gray-500">SEO-специалист</span> | |
| <div class="flex justify-center items-center mt-2"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-sm text-gray-500">5.0 (42 отзыва)</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mt-3 mb-4 line-clamp-2"> | |
| Вывел сайты в ТОП поисковых систем. Работаю с семантикой, ссылками и технической оптимизацией. | |
| </p> | |
| <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-all"> | |
| Подробнее | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Top Specialist 2 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl shadow-sm hover:shadow-md transition-all overflow-hidden border border-gray-100 dark:border-dark-600"> | |
| <div class="relative"> | |
| <div class="absolute top-4 left-4 bg-gray-400 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center"> | |
| <i class="fas fa-medal mr-1"></i> №2 | |
| </div> | |
| <div class="h-40 bg-gradient-to-r from-blue-500 to-teal-400"></div> | |
| </div> | |
| <div class="p-6 pt-0"> | |
| <div class="flex justify-center -mt-12 mb-4"> | |
| <div class="w-20 h-20 rounded-full border-4 border-white dark:border-dark-800 bg-gray-200 dark:bg-dark-600"></div> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="font-bold text-xl mb-1">Елена Соколова</h3> | |
| <span class="text-sm text-gray-500">Копирайтер</span> | |
| <div class="flex justify-center items-center mt-2"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-sm text-gray-500">5.0 (37 отзывов)</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mt-3 mb-4 line-clamp-2"> | |
| Пишу продающие тексты, статьи и сценарии. Специализация: маркетинговые тексты и SEO-копирайтинг. | |
| </p> | |
| <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-all"> | |
| Подробнее | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Top Specialist 3 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl shadow-sm hover:shadow-md transition-all overflow-hidden border border-gray-100 dark:border-dark-600"> | |
| <div class="relative"> | |
| <div class="absolute top-4 left-4 bg-amber-600 text-white px-3 py-1 rounded-full text-xs font-bold flex items-center"> | |
| <i class="fas fa-award mr-1"></i> №3 | |
| </div> | |
| <div class="h-40 bg-gradient-to-r from-orange-500 to-yellow-400"></div> | |
| </div> | |
| <div class="p-6 pt-0"> | |
| <div class="flex justify-center -mt-12 mb-4"> | |
| <div class="w-20 h-20 rounded-full border-4 border-white dark:border-dark-800 bg-gray-200 dark:bg-dark-600"></div> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="font-bold text-xl mb-1">Александр Кузнецов</h3> | |
| <span class="text-sm text-gray-500">Мобильный разработчик</span> | |
| <div class="flex justify-center items-center mt-2"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-sm text-gray-500">4.8 (29 отзывов)</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mt-3 mb-4 line-clamp-2"> | |
| Разрабатываю мобильные приложения для iOS и Android. React Native, Swift, Kotlin. | |
| </p> | |
| <button class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-all"> | |
| Подробнее | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Add Review Section --> | |
| <section id="add-review" class="py-16 bg-white dark:bg-dark-800"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Оставить отзыв</h2> | |
| <p class="text-gray-600 dark:text-gray-300"> | |
| Поделитесь своим опытом работы со специалистом. Ваш отзыв поможет другим сделать правильный выбор. | |
| </p> | |
| </div> | |
| <form class="bg-gray-50 dark:bg-dark-700 rounded-xl p-6 md:p-8"> | |
| <div class="mb-6"> | |
| <label for="specialist-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Имя специалиста</label> | |
| <input type="text" id="specialist-name" class="w-full px-4 py-2 border border-gray-300 dark:border-dark-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-dark-800" placeholder="Введите имя специалиста"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="specialist-profession" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Профессия</label> | |
| <select id="specialist-profession" class="w-full px-4 py-2 border border-gray-300 dark:border-dark-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-dark-800"> | |
| <option value="">Выберите профессию</option> | |
| <option value="developer">Программист</option> | |
| <option value="designer">Дизайнер</option> | |
| <option value="marketing">Маркетолог</option> | |
| <option value="freelancer">Фрилансер</option> | |
| <option value="seo">SEO-специалист</option> | |
| <option value="copywriter">Копирайтер</option> | |
| <option value="mobile">Мобильный разработчик</option> | |
| <option value="other">Другое</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Оценка</label> | |
| <div class="rating-stars"> | |
| <input type="radio" id="star5" name="rating" value="5"> | |
| <label for="star5" title="Отлично"></label> | |
| <input type="radio" id="star4" name="rating" value="4"> | |
| <label for="star4" title="Хорошо"></label> | |
| <input type="radio" id="star3" name="rating" value="3"> | |
| <label for="star3" title="Нормально"></label> | |
| <input type="radio" id="star2" name="rating" value="2"> | |
| <label for="star2" title="Плохо"></label> | |
| <input type="radio" id="star1" name="rating" value="1"> | |
| <label for="star1" title="Ужасно"></label> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="review-text" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Текст отзыва</label> | |
| <textarea id="review-text" rows="5" class="w-full px-4 py-2 border border-gray-300 dark:border-dark-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-dark-800" placeholder="Опишите ваш опыт работы со специалистом..."></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="reviewer-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Ваше имя (необязательно)</label> | |
| <input type="text" id="reviewer-name" class="w-full px-4 py-2 border border-gray-300 dark:border-dark-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-dark-800" placeholder="Как к вам обращаться?"> | |
| </div> | |
| <div class="flex items-center mb-6"> | |
| <input id="terms-checkbox" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> | |
| <label for="terms-checkbox" class="ml-2 text-sm text-gray-500 dark:text-gray-300">Я согласен с <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">правилами публикации отзывов</a></label> | |
| </div> | |
| <button type="submit" class="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-all"> | |
| Опубликовать отзыв | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-gray-50 dark:bg-dark-700"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Что говорят пользователи</h2> | |
| <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto"> | |
| Отзывы реальных людей, которые нашли своих специалистов через ProfiRate | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl p-6 shadow-sm hover:shadow-md transition-all"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 dark:bg-dark-600 mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">Сергей Новиков</h4> | |
| <span class="text-sm text-gray-500">Предприниматель</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| "Благодаря ProfiRate нашел отличного SEO-специалиста. За 3 месяца трафик на сайт вырос в 5 раз! Очень доволен сервисом." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl p-6 shadow-sm hover:shadow-md transition-all"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 dark:bg-dark-600 mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">Ольга Морозова</h4> | |
| <span class="text-sm text-gray-500">Стартап</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| "Искала дизайнера для мобильного приложения. Через ProfiRate быстро нашла профессионала с отличным портфолио. Результат превзошел ожидания!" | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl p-6 shadow-sm hover:shadow-md transition-all"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 dark:bg-dark-600 mr-4"></div> | |
| <div> | |
| <h4 class="font-bold">Андрей Волков</h4> | |
| <span class="text-sm text-gray-500">Блогер</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| "Пользуюсь ProfiRate уже год. Всегда нахожу проверенных специалистов. Особенно нравится система рейтингов и реальных отзывов." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-blue-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Готовы найти своего специалиста?</h2> | |
| <p class="text-lg mb-8 max-w-2xl mx-auto opacity-90"> | |
| Присоединяйтесь к тысячам довольных пользователей, которые уже нашли профессионалов через ProfiRate | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#specialists" class="px-8 py-3 bg-white text-blue-600 hover:bg-gray-100 rounded-lg font-medium transition-all"> | |
| Найти специалиста | |
| </a> | |
| <a href="#add-review" class="px-8 py-3 border border-white text-white hover:bg-blue-700 rounded-lg font-medium transition-all"> | |
| Оставить отзыв | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-white dark:bg-dark-800 pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-sm">PR</div> | |
| <h3 class="text-xl font-bold text-blue-600 dark:text-blue-400">ProfiRate</h3> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300"> | |
| Платформа для поиска специалистов по отзывам реальных клиентов. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Навигация</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-all">Главная</a></li> | |
| <li><a href="#specialists" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-all">Специалисты</a></li> | |
| <li><a href="#top" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-all">Топ недели</a></li> | |
| <li><a href="#add-review" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-all">Оставить отзыв</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Категории</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-all">Программисты</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-all">Дизайнеры</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-all">Маркетологи</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-all">Фрилансеры</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Контакты</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-blue-500"></i> | |
| <a href="mailto:info@profirate.com" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-all">info@profirate.com</a> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone mr-2 text-blue-500"></i> | |
| <a href="tel:+78001234567" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-all">8 (800) 123-45-67</a> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fab fa-telegram mr-2 text-blue-500"></i> | |
| <a href="#" class="text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-all">@profirate_support</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-6 border-t border-gray-200 dark:border-dark-600 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 dark:text-gray-400 mb-4 md:mb-0"> | |
| © 2023 ProfiRate. Все права защищены. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-all"> | |
| <i class="fab fa-vk"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-all"> | |
| <i class="fab fa-telegram"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-all"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Theme toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const html = document.documentElement; | |
| themeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Check for saved theme preference | |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| } else { | |
| html.classList.remove('dark'); | |
| } | |
| // Rating stars | |
| const stars = document.querySelectorAll('.rating-stars input'); | |
| stars.forEach(star => { | |
| star.addEventListener('change', (e) => { | |
| console.log(`Selected rating: ${e.target.value}`); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=XLegendSigmaBro/profirate" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |