| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>WebCraft Studio - Создание продающих сайтов для вашего бизнеса</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Poppins', sans-serif; |
| overflow-x: hidden; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #2A5BDA 0%, #1E3A8A 100%); |
| } |
| |
| .hero-animation { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| top: 0; |
| left: 0; |
| opacity: 0.3; |
| z-index: 0; |
| overflow: hidden; |
| } |
| |
| .code-element { |
| position: absolute; |
| color: rgba(255,255,255,0.1); |
| font-family: monospace; |
| font-size: 14px; |
| animation: float 15s infinite linear; |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(0) translateX(0); } |
| 50% { transform: translateY(-50px) translateX(50px); } |
| 100% { transform: translateY(0) translateX(0); } |
| } |
| |
| .service-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .testimonial-card { |
| transition: all 0.3s ease; |
| } |
| |
| .testimonial-card:hover { |
| transform: scale(1.02); |
| } |
| |
| .final-cta { |
| background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| <div class="flex items-center"> |
| |
| <div class="flex items-center"> |
| <div class="w-12 h-12 flex items-center justify-center bg-blue-600 rounded-lg mr-3"> |
| <div class="w-8 h-8 relative"> |
| <div class="absolute left-0 top-0 w-4 h-8 bg-white rounded-l-md"></div> |
| <div class="absolute right-0 top-0 w-4 h-8 bg-white rounded-r-full"></div> |
| </div> |
| </div> |
| <span class="text-2xl font-bold text-gray-800">WebCraft</span> |
| </div> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#services" class="text-gray-600 hover:text-blue-600 font-medium">Услуги</a> |
| <a href="#portfolio" class="text-gray-600 hover:text-blue-600 font-medium">Портфолио</a> |
| <a href="#process" class="text-gray-600 hover:text-blue-600 font-medium">Процесс</a> |
| <a href="#testimonials" class="text-gray-600 hover:text-blue-600 font-medium">Отзывы</a> |
| <a href="#faq" class="text-gray-600 hover:text-blue-600 font-medium">FAQ</a> |
| </nav> |
| <div> |
| <a href="#contact" class="bg-orange-500 hover:bg-orange-600 text-white font-medium px-6 py-2 rounded-lg shadow-md transition duration-300">Обсудить проект</a> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="gradient-bg text-white relative overflow-hidden"> |
| <div class="hero-animation" id="code-animation"></div> |
| <div class="container mx-auto px-4 py-24 relative z-10"> |
| <div class="max-w-3xl mx-auto text-center"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Ваш сайт — ваш главный продавец. Мы делаем его <span class="text-orange-300">неутомимым</span></h1> |
| <p class="text-xl mb-8 opacity-90">WebCraft Studio: создаем инструменты роста бизнеса. <span class="font-semibold">+30-70% к конверсии</span> уже через месяц после запуска</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="#contact" class="bg-orange-500 hover:bg-orange-600 text-white font-bold px-8 py-4 rounded-lg text-lg shadow-lg transition duration-300 flex items-center justify-center">Получить бесплатный аудит сайта →</a> |
| <a href="#portfolio" class="bg-white hover:bg-gray-100 text-blue-600 font-bold px-8 py-4 rounded-lg text-lg shadow-lg transition duration-300 flex items-center justify-center">Смотреть примеры</a> |
| </div> |
| <p class="mt-4 text-sm opacity-70">Ответим за 15 минут • Первые 3 концепта — бесплатно</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-3xl mx-auto text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Сайт не приносит заявок? Вы теряете деньги каждый день</h2> |
| <p class="text-lg text-gray-600">84% посетителей уходят с сайта, если он не решает их проблему в первые 10 секунд</p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 flex items-start"> |
| <div class="text-orange-500 bg-orange-100 p-3 rounded-lg mr-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| </svg> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg text-gray-800 mb-2">Красивый, но не продающий?</h3> |
| <p class="text-gray-600">Дизайн должен работать, а не просто радовать глаз</p> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 flex items-start"> |
| <div class="text-orange-500 bg-orange-100 p-3 rounded-lg mr-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| </svg> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg text-gray-800 mb-2">Посетители уходят, ничего не купив?</h3> |
| <p class="text-gray-600">Неправильная структура отпугивает клиентов</p> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 flex items-start"> |
| <div class="text-orange-500 bg-orange-100 p-3 rounded-lg mr-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /> |
| </svg> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg text-gray-800 mb-2">Вложения не окупаются?</h3> |
| <p class="text-gray-600">Сайт должен приносить прибыль, а не быть расходом</p> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 flex items-start"> |
| <div class="text-orange-500 bg-orange-100 p-3 rounded-lg mr-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> |
| </svg> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg text-gray-800 mb-2">Не видите результатов SEO?</h3> |
| <p class="text-gray-600">Оптимизация должна быть комплексной, а не формальной</p> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 flex items-start"> |
| <div class="text-orange-500 bg-orange-100 p-3 rounded-lg mr-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
| </svg> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg text-gray-800 mb-2">Обновляете сайт раз в 5 лет?</h3> |
| <p class="text-gray-600">Устаревший дизайн снижает доверие на 62%</p> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 flex items-start"> |
| <div class="text-orange-500 bg-orange-100 p-3 rounded-lg mr-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /> |
| </svg> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg text-gray-800 mb-2">Технические проблемы мешают продажам?</h3> |
| <p class="text-gray-600">Медленная загрузка = потеря 53% клиентов</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="max-w-2xl mx-auto text-center mt-12"> |
| <p class="text-2xl font-bold text-gray-800">Хватит терять клиентов! Пора запустить <span class="text-blue-600">продающий механизм</span></p> |
| <a href="#contact" class="mt-6 inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold px-8 py-3 rounded-lg shadow-md transition duration-300">Обсудить мой проект</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-3xl mx-auto text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Превращаем посетителей в клиентов: наши инструменты для вашего роста</h2> |
| <p class="text-lg text-gray-600">Каждый проект начинается с анализа вашей целевой аудитории и заканчивается измеримым результатом</p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="service-card bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition duration-300"> |
| <div class="text-blue-600 mb-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Продающие лендинги</h3> |
| <p class="text-gray-600 mb-4">Одностраничные сайты с конверсией до 15%. Идеально для товаров, услуг и акций.</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-800">от 35 000 ₽</span> |
| <a href="#contact" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">Узнать больше →</a> |
| </div> |
| </div> |
| |
| <div class="service-card bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition duration-300"> |
| <div class="text-blue-600 mb-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Корпоративные сайты</h3> |
| <p class="text-gray-600 mb-4">Многостраничные решения для компаний, которые хотят выглядеть профессионально.</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-800">от 80 000 ₽</span> |
| <a href="#contact" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">Узнать больше →</a> |
| </div> |
| </div> |
| |
| <div class="service-card bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition duration-300"> |
| <div class="text-blue-600 mb-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Интернет-магазины</h3> |
| <p class="text-gray-600 mb-4">Полноценные платформы для онлайн-продаж с удобной административной панелью.</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-800">от 120 000 ₽</span> |
| <a href="#contact" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">Узнать больше →</a> |
| </div> |
| </div> |
| |
| <div class="service-card bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition duration-300"> |
| <div class="text-blue-600 mb-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Техническая поддержка</h3> |
| <p class="text-gray-600 mb-4">Регулярное обновление и обслуживание вашего сайта для стабильной работы.</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-800">от 5 000 ₽/мес</span> |
| <a href="#contact" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">Узнать больше →</a> |
| </div> |
| </div> |
| |
| <div class="service-card bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition duration-300"> |
| <div class="text-blue-600 mb-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">SEO-оптимизация</h3> |
| <p class="text-gray-600 mb-4">Повышение позиций в поисковиках и привлечение целевого трафика.</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-800">от 15 000 ₽</span> |
| <a href="#contact" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">Узнать больше →</a> |
| </div> |
| </div> |
| |
| <div class="service-card bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition duration-300"> |
| <div class="text-blue-600 mb-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Копирайтинг</h3> |
| <p class="text-gray-600 mb-4">Продающие тексты, которые увеличивают конверсию на 30-70%.</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-800">от 500 ₽/страница</span> |
| <a href="#contact" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">Узнать больше →</a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#contact" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold px-8 py-3 rounded-lg shadow-md transition duration-300">Получить индивидуальное предложение</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-3xl mx-auto text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">WebCraft: не просто разработка, а партнерство в росте</h2> |
| <p class="text-lg text-gray-600">Наши принципы работы — это ваши гарантии результата</p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <div class="text-orange-500 mb-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Фокус на Продажах</h3> |
| <p class="text-gray-600">Ваша прибыль — наш KPI. Мы не просто делаем сайты, а создаем инструменты для роста бизнеса.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <div class="text-orange-500 mb-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Скорость & Deadlines</h3> |
| <p class="text-gray-600">Типовой лендинг за 7 дней. Соблюдаем сроки на 98% благодаря отработанному процессу.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <div class="text-orange-500 mb-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Дизайн, который Конвертирует</h3> |
| <p class="text-gray-600">UI/UX подход. Каждый элемент работает на ваши продажи, а не просто выглядит красиво.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <div class="text-orange-500 mb-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Техническая Надежность</h3> |
| <p class="text-gray-600">Гарантия 1 год. Используем только проверенные технологии и хостинги.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <div class="text-orange-500 mb-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Персональный Менеджер</h3> |
| <p class="text-gray-600">Один специалист ведет проект от брифа до запуска. Вы всегда знаете, на каком этапе работа.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <div class="text-orange-500 mb-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Пост-релиз Поддержка</h3> |
| <p class="text-gray-600">Бесплатное обучение, техподдержка 24/7 и регулярные обновления после запуска.</p> |
| </div> |
| </div> |
| |
| <div class="mt-12 bg-blue-50 border border-blue-200 rounded-xl p-8"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-6 md:mb-0"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-3">Хотите узнать больше о нашем подходе?</h3> |
| <p class="text-gray-600">Закажите бесплатную консультацию с нашим экспертом</p> |
| </div> |
| <div class="md:w-1/2 text-center md:text-right"> |
| <a href="#contact" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold px-8 py-3 rounded-lg shadow-md transition duration-300">Записаться на консультацию</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="portfolio" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-3xl mx-auto text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Наши работы приносят результат</h2> |
| <p class="text-lg text-gray-600">Реальные цифры — лучшая реклама нашей работы</p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-8 mb-8"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> |
| <span class="text-gray-500">Скриншот сайта "АвтоМастер"</span> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">АвтоМастер</h3> |
| <p class="text-gray-600 mb-4">Задача: увеличить заявки на ремонт автомобилей на 40%</p> |
| <p class="text-gray-700 mb-4">Решение: создали лендинг с формой быстрого заказа и калькулятором стоимости</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-lg font-bold text-blue-600">+65% заявок за 2 месяца</span> |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">Смотреть кейс →</a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> |
| <span class="text-gray-500">Скриншот сайта "EcoClean"</span> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">EcoClean</h3> |
| <p class="text-gray-600 mb-4">Задача: привлечь клиентов из региона с низкой конкуренцией</p> |
| <p class="text-gray-700 mb-4">Решение: разработали SEO-оптимизированный сайт с блогом о клининге</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-lg font-bold text-blue-600">+120% трафика за 3 месяца</span> |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">Смотреть кейс →</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> |
| <span class="text-gray-500">Скриншот сайта "LuxuryHomes"</span> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">LuxuryHomes</h3> |
| <p class="text-gray-600 mb-2">Продажа элитной недвижимости</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-lg font-bold text-blue-600">+45% просмотров</span> |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">Смотреть →</a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> |
| <span class="text-gray-500">Скриншот сайта "FoodExpress"</span> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">FoodExpress</h3> |
| <p class="text-gray-600 mb-2">Доставка здорового питания</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-lg font-bold text-blue-600">+80% заказов</span> |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">Смотреть →</a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> |
| <span class="text-gray-500">Скриншот сайта "BeautyStudio"</span> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">BeautyStudio</h3> |
| <p class="text-gray-600 mb-2">Салон красоты премиум-класса</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-lg font-bold text-blue-600">+55% записей</span> |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">Смотреть →</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold px-8 py-3 rounded-lg shadow-md transition duration-300">Смотреть все кейсы (12+)</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="process" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-3xl mx-auto text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Прозрачный путь к вашему сайту за 5 шагов</h2> |
| <p class="text-lg text-gray-600">Вы утверждаете каждый этап. Фиксированная цена.</p> |
| </div> |
| |
| <div class="relative"> |
| <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gray-200"></div> |
| |
| <div class="flex flex-col md:flex-row items-center md:items-start mb-12"> |
| <div class="md:w-1/2 md:pr-16 md:text-right order-1"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">1. Заявка & Аудит</h3> |
| <p class="text-gray-600">Бесплатный анализ текущего сайта (если есть) и обсуждение ваших целей</p> |
| </div> |
| <div class="w-16 h-16 rounded-full bg-orange-500 text-white flex items-center justify-center text-2xl font-bold mx-auto my-4 md:my-0 md:mx-0 order-2">1</div> |
| <div class="md:w-1/2 md:pl-16 order-3 md:order-3"></div> |
| </div> |
| |
| <div class="flex flex-col md:flex-row items-center md:items-start mb-12"> |
| <div class="md:w-1/2 md:pr-16 order-1 md:order-3"></div> |
| <div class="w-16 h-16 rounded-full bg-blue-600 text-white flex items-center justify-center text-2xl font-bold mx-auto my-4 md:my-0 md:mx-0 order-2">2</div> |
| <div class="md:w-1/2 md:pl-16 md:text-left order-3"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">2. Прототип & Дизайн</h3> |
| <p class="text-gray-600">Создаем 3 концепта дизайна. Вы выбираете лучший и вносите правки</p> |
| </div> |
| </div> |
| |
| <div class="flex flex-col md:flex-row items-center md:items-start mb-12"> |
| <div class="md:w-1/2 md:pr-16 md:text-right order-1"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">3. Разработка</h3> |
| <p class="text-gray-600">Программируем сайт на выбранной платформе с учетом SEO и UX</p> |
| </div> |
| <div class="w-16 h-16 rounded-full bg-orange-500 text-white flex items-center justify-center text-2xl font-bold mx-auto my-4 md:my-0 md:mx-0 order-2">3</div> |
| <div class="md:w-1/2 md:pl-16 order-3"></div> |
| </div> |
| |
| <div class="flex flex-col md:flex-row items-center md:items-start mb-12"> |
| <div class="md:w-1/2 md:pr-16 order-1 md:order-3"></div> |
| <div class="w-16 h-16 rounded-full bg-blue-600 text-white flex items-center justify-center text-2xl font-bold mx-auto my-4 md:my-0 md:mx-0 order-2">4</div> |
| <div class="md:w-1/2 md:pl-16 md:text-left order-3"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">4. Тестирование</h3> |
| <p class="text-gray-600">Проверяем работу на всех устройствах и устраняем ошибки</p> |
| </div> |
| </div> |
| |
| <div class="flex flex-col md:flex-row items-center md:items-start"> |
| <div class="md:w-1/2 md:pr-16 md:text-right order-1"> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">5. Запуск & Поддержка</h3> |
| <p class="text-gray-600">Переносим на хостинг, обучаем работе и предоставляем гарантию 1 год</p> |
| </div> |
| <div class="w-16 h-16 rounded-full bg-orange-500 text-white flex items-center justify-center text-2xl font-bold mx-auto my-4 md:my-0 md:mx-0 order-2">5</div> |
| <div class="md:w-1/2 md:pl-16 order-3"></div> |
| </div> |
| </div> |
| |
| <div class="mt-12 bg-blue-50 border border-blue-200 rounded-xl p-8"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-2/3 mb-6 md:mb-0"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-3">Хотите узнать точную стоимость и сроки для вашего проекта?</h3> |
| <p class="text-gray-600">Оставьте заявку, и мы подготовим индивидуальное предложение в течение дня</p> |
| </div> |
| <div class="md:w-1/3 text-center md:text-right"> |
| <a href="#contact" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold px-8 py-3 rounded-lg shadow-md transition duration-300">Узнать стоимость</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="testimonials" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-3xl mx-auto text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Нас выбирают те, кто ценит результат</h2> |
| <p class="text-lg text-gray-600">Реальные отзывы наших клиентов о сотрудничестве</p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> |
| <div class="testimonial-card bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Иван Петров" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800">Иван Петров</h4> |
| <p class="text-gray-600 text-sm">АвтоМастер</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4">"После запуска нового сайта заявки увеличились на 65%. Особенно эффективно работает форма быстрого заказа. Благодарю команду WebCraft за профессионализм!"</p> |
| <div class="flex"> |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> |
| </div> |
| </div> |
| |
| <div class="testimonial-card bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Ольга Смирнова" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800">Ольга Смирнова</h4> |
| <p class="text-gray-600 text-sm">BeautyStudio</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4">"Сайт стал настоящим помощником для моего салона красоты. Записи онлайн увеличились на 55%, а клиенты отмечают удобство интерфейса. Отдельное спасибо за оперативность!"</p> |
| <div class="flex"> |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> |
| </div> |
| </div> |
| |
| <div class="testimonial-card bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Дмитрий Иванов" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800">Дмитрий Иванов</h4> |
| <p class="text-gray-600 text-sm">FoodExpress</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4">"Запустили интернет-магазин с доставкой еды. Уже через месяц заказы выросли на 80%! Особенно радует удобная CRM для менеджеров и автоматизация процессов. Рекомендую!"</p> |
| <div class="flex"> |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg> |
| <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57 |
| <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=Prime713/webcraft" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
