|
|
<!DOCTYPE html> |
|
|
<html lang="fa" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>آژانس خلاقیت نوین | راه حل های دیجیتال حرفه ای</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"> |
|
|
<style> |
|
|
@font-face { |
|
|
font-family: 'Iran Sans'; |
|
|
src: url('https://cdn.fontcdn.ir/Font/Persian/IranSans/IRANSansWeb(FaNum).woff') format('woff'); |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Iran Sans', sans-serif; |
|
|
} |
|
|
|
|
|
.hero-bg { |
|
|
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); |
|
|
} |
|
|
|
|
|
.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); |
|
|
} |
|
|
|
|
|
.portfolio-item { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.portfolio-item:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
.testimonial-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.testimonial-card:hover { |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.accordion-item { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.accordion-content { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease; |
|
|
} |
|
|
|
|
|
.accordion-item.active .accordion-content { |
|
|
max-height: 300px; |
|
|
} |
|
|
|
|
|
.input-field:focus { |
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800"> |
|
|
|
|
|
<nav class="bg-white shadow-md sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4 py-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<a href="#" class="text-2xl font-bold text-blue-600">نوین‌کرایتیو</a> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex space-x-6 space-x-reverse"> |
|
|
<a href="#home" class="text-blue-600 hover:text-blue-800">خانه</a> |
|
|
<a href="#services" class="text-gray-600 hover:text-blue-600">خدمات</a> |
|
|
<a href="#portfolio" class="text-gray-600 hover:text-blue-600">نمونه کارها</a> |
|
|
<a href="#contact" class="text-gray-600 hover:text-blue-600">تماس با ما</a> |
|
|
</div> |
|
|
|
|
|
<div class="md:hidden"> |
|
|
<button id="mobile-menu-button" class="text-gray-600 hover:text-blue-600"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden mt-4 pb-4"> |
|
|
<a href="#home" class="block py-2 text-gray-600 hover:text-blue-600">خانه</a> |
|
|
<a href="#services" class="block py-2 text-gray-600 hover:text-blue-600">خدمات</a> |
|
|
<a href="#portfolio" class="block py-2 text-gray-600 hover:text-blue-600">نمونه کارها</a> |
|
|
<a href="#contact" class="block py-2 text-gray-600 hover:text-blue-600">تماس با ما</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="hero-bg text-white py-20 md:py-32"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0 fade-in"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">تبدیل ایده‌های شما به واقعیت دیجیتال</h1> |
|
|
<p class="text-xl mb-8">ما با تیمی از متخصصان خلاق همراه شما هستیم تا کسب و کار شما را به سطح جدیدی برسانیم.</p> |
|
|
<div class="flex space-x-4 space-x-reverse"> |
|
|
<a href="#contact" class="bg-white text-blue-600 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300">شروع پروژه</a> |
|
|
<a href="#services" class="border-2 border-white text-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-blue-600 transition duration-300">خدمات ما</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 fade-in"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="تیم خلاق" class="rounded-lg shadow-xl w-full"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">خدمات تخصصی ما</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">ما راه حل‌های دیجیتال جامعی ارائه می‌دهیم که به رشد کسب و کار شما کمک می‌کند.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-code text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">توسعه وب</h3> |
|
|
<p class="text-gray-600">طراحی و توسعه وبسایت‌های حرفه ای، واکنشگرا و با عملکرد بالا با استفاده از آخرین تکنولوژی‌ها.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-mobile-alt text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">توسعه اپلیکیشن موبایل</h3> |
|
|
<p class="text-gray-600">ساخت اپلیکیشن‌های موبایل بومی و هیبریدی برای پلتفرم‌های iOS و Android.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-paint-brush text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">طراحی UI/UX</h3> |
|
|
<p class="text-gray-600">طراحی رابط کاربری جذاب و تجربه کاربری عالی برای محصولات دیجیتال شما.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-chart-line text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">دیجیتال مارکتینگ</h3> |
|
|
<p class="text-gray-600">استراتژی‌های بازاریابی دیجیتال برای افزایش حضور آنلاین و جذب مشتریان بیشتر.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-search text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">سئو و بهینه‌سازی</h3> |
|
|
<p class="text-gray-600">بهبود رتبه سایت شما در موتورهای جستجو برای افزایش ترافیک ارگانیک.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-cloud text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">مشاوره فناوری</h3> |
|
|
<p class="text-gray-600">مشاوره تخصصی برای انتخاب بهترین راهکارهای فناوری برای کسب و کار شما.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="portfolio" class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">نمونه کارهای ما</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">برخی از پروژه‌های اخیر ما که با همکاری مشتریان عزیز انجام داده‌ایم.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="portfolio-item bg-white rounded-xl overflow-hidden shadow-md"> |
|
|
<img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" alt="پروژه طراحی وب" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">وبسایت فروشگاهی</h3> |
|
|
<p class="text-gray-600 mb-4">طراحی و توسعه یک پلتفرم تجارت الکترونیک با امکانات پیشرفته.</p> |
|
|
<a href="#" class="text-blue-600 font-bold hover:text-blue-800">مشاهده جزئیات <i class="fas fa-arrow-left mr-2"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="portfolio-item bg-white rounded-xl overflow-hidden shadow-md"> |
|
|
<img src="https://images.unsplash.com/photo-1555774698-0f77e70f60d1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="پروژه اپلیکیشن موبایل" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">اپلیکیشن سلامت</h3> |
|
|
<p class="text-gray-600 mb-4">توسعه یک اپلیکیشن موبایل برای ردیابی فعالیت‌های ورزشی و سلامت.</p> |
|
|
<a href="#" class="text-blue-600 font-bold hover:text-blue-800">مشاهده جزئیات <i class="fas fa-arrow-left mr-2"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="portfolio-item bg-white rounded-xl overflow-hidden shadow-md"> |
|
|
<img src="https://images.unsplash.com/photo-1467232004584-a241de8b3885?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="پروژه طراحی رابط کاربری" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">طراحی سیستم مدیریت</h3> |
|
|
<p class="text-gray-600 mb-4">طراحی رابط کاربری برای یک سیستم مدیریت محتوای سازمانی.</p> |
|
|
<a href="#" class="text-blue-600 font-bold hover:text-blue-800">مشاهده جزئیات <i class="fas fa-arrow-left mr-2"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="bg-blue-600 text-white px-8 py-3 rounded-full font-bold hover:bg-blue-700 transition duration-300">مشاهده همه پروژه‌ها</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">نظرات مشتریان ما</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">آنچه مشتریان ما درباره خدمات ما می‌گویند.</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="testimonial-carousel overflow-hidden"> |
|
|
<div class="flex transition-transform duration-300 ease-in-out" id="testimonial-slides"> |
|
|
|
|
|
<div class="testimonial-card min-w-full px-4"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="مشتری" class="w-16 h-16 rounded-full object-cover"> |
|
|
<div class="mr-4"> |
|
|
<h4 class="font-bold">علیرضا محمودی</h4> |
|
|
<p class="text-gray-600">مدیر عامل شرکت فن‌آوران</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700">"تیم نوین‌کرایتیو وبسایت شرکت ما را با بالاترین کیفیت طراحی و توسعه دادند. همکاری با آنها بسیار حرفه‌ای و نتیجه‌بخش بود. ترافیک سایت ما پس از راه‌اندازی ۳ برابر شد."</p> |
|
|
<div class="flex mt-4 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 class="testimonial-card min-w-full px-4"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="مشتری" class="w-16 h-16 rounded-full object-cover"> |
|
|
<div class="mr-4"> |
|
|
<h4 class="font-bold">فاطمه احمدی</h4> |
|
|
<p class="text-gray-600">مدیر بازاریابی فروشگاه اینترنتی</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700">"استراتژی‌های بازاریابی دیجیتال که تیم نوین‌کرایتیو برای ما طراحی کرد، باعث افزایش ۷۰ درصدی فروش آنلاین ما در مدت ۳ ماه شد. بسیار متخصص و قابل اعتماد هستند."</p> |
|
|
<div class="flex mt-4 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 class="testimonial-card min-w-full px-4"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="https://randomuser.me/api/portraits/men/68.jpg" alt="مشتری" class="w-16 h-16 rounded-full object-cover"> |
|
|
<div class="mr-4"> |
|
|
<h4 class="font-bold">محمد جوادی</h4> |
|
|
<p class="text-gray-600">مدیر فناوری استارتاپ</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700">"اپلیکیشن موبایلی که تیم نوین‌کرایتیو برای استارتاپ ما توسعه داد، از نظر عملکرد و طراحی بی‌نظیر است. کاربران ما تجربه بسیار خوبی با اپلیکیشن دارند و این باعث رشد سریع ما شده است."</p> |
|
|
<div class="flex mt-4 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> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="prev-testimonial" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-md text-blue-600 hover:bg-blue-50"> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
<button id="next-testimonial" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-md text-blue-600 hover:bg-blue-50"> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center mt-8 space-x-2 space-x-reverse"> |
|
|
<button class="testimonial-dot w-3 h-3 rounded-full bg-blue-200" data-index="0"></button> |
|
|
<button class="testimonial-dot w-3 h-3 rounded-full bg-blue-200" data-index="1"></button> |
|
|
<button class="testimonial-dot w-3 h-3 rounded-full bg-blue-200" data-index="2"></button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">طرح‌های قیمت‌گذاری</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">طرح‌های متنوعی برای نیازهای مختلف کسب و کار شما.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 rounded-xl p-8 shadow-md"> |
|
|
<h3 class="text-xl font-bold mb-4">پایه</h3> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-blue-600">۱,۲۰۰,۰۰۰</span> |
|
|
<span class="text-gray-600">تومان</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>طراحی وبسایت ساده</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>۵ صفحه اصلی</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>واکنشگرا (Responsive)</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>پشتیبانی ۱ ماهه</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-times mr-2"></i> |
|
|
<span>سئو پیشرفته</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-times mr-2"></i> |
|
|
<span>برندینگ</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="block text-center bg-blue-600 text-white py-3 rounded-full font-bold hover:bg-blue-700 transition duration-300">انتخاب طرح</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-blue-600 text-white rounded-xl p-8 shadow-lg transform scale-105"> |
|
|
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-yellow-400 text-blue-800 px-4 py-1 rounded-full font-bold">پیشنهاد ویژه</div> |
|
|
<h3 class="text-xl font-bold mb-4">حرفه‌ای</h3> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold">۲,۵۰۰,۰۰۰</span> |
|
|
<span>تومان</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check mr-2"></i> |
|
|
<span>طراحی وبسایت حرفه‌ای</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check mr-2"></i> |
|
|
<span>۱۰ صفحه اصلی + بخش بلاگ</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check mr-2"></i> |
|
|
<span>واکنشگرا (Responsive)</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check mr-2"></i> |
|
|
<span>پشتیبانی ۳ ماهه</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check mr-2"></i> |
|
|
<span>بهینه‌سازی سئو پایه</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check mr-2"></i> |
|
|
<span>لوگو و هویت بصری</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="block text-center bg-white text-blue-600 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300">انتخاب طرح</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl p-8 shadow-md"> |
|
|
<h3 class="text-xl font-bold mb-4">سازمانی</h3> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-blue-600">۵,۰۰۰,۰۰۰</span> |
|
|
<span class="text-gray-600">تومان</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>طراحی وبسایت سفارشی</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>صفحات نامحدود + سیستم مدیریت محتوا</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>واکنشگرا (Responsive)</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>پشتیبانی ۶ ماهه</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>سئو پیشرفته</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>برندینگ کامل</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="block text-center bg-blue-600 text-white py-3 rounded-full font-bold hover:bg-blue-700 transition duration-300">انتخاب طرح</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">سوالات متداول</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">پاسخ به رایج‌ترین سوالات شما درباره خدمات ما.</p> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-3xl mx-auto"> |
|
|
|
|
|
<div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden"> |
|
|
<button class="accordion-header w-full flex justify-between items-center p-6 text-right"> |
|
|
<span class="text-lg font-bold">فرآیند همکاری با شما چگونه است؟</span> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="accordion-content"> |
|
|
<div class="p-6 pt-0 text-gray-700"> |
|
|
<p>فرآیند همکاری با ما در چند مرحله انجام می‌شود:</p> |
|
|
<ol class="list-decimal pr-5 mt-3 space-y-2"> |
|
|
<li>جلسه مشاوره اولیه برای درک نیازها و اهداف شما</li> |
|
|
<li>تهیه پیشنهاد و طرح اولیه پروژه</li> |
|
|
<li>امضای قرارداد و شروع رسمی پروژه</li> |
|
|
<li>طراحی و ارائه نمونه اولیه</li> |
|
|
<li>توسعه و پیاده‌سازی</li> |
|
|
<li>تست و کنترل کیفیت</li> |
|
|
<li>تحویل نهایی و آموزش</li> |
|
|
<li>پشتیبانی پس از تحویل</li> |
|
|
</ol> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden"> |
|
|
<button class="accordion-header w-full flex justify-between items-center p-6 text-right"> |
|
|
<span class="text-lg font-bold">مدت زمان تحویل پروژه چقدر است؟</span> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="accordion-content"> |
|
|
<div class="p-6 pt-0 text-gray-700"> |
|
|
<p>مدت زمان تحویل بستگی به پیچیدگی و ابعاد پروژه دارد. به طور کلی:</p> |
|
|
<ul class="list-disc pr-5 mt-3 space-y-2"> |
|
|
<li>وبسایت‌های ساده: ۲ تا ۴ هفته</li> |
|
|
<li>وبسایت‌های حرفه‌ای: ۴ تا ۸ هفته</li> |
|
|
<li>اپلیکیشن‌های موبایل: ۸ تا ۱۲ هفته</li> |
|
|
<li>پروژه‌های سفارشی بزرگ: ۳ تا ۶ ماه</li> |
|
|
</ul> |
|
|
<p class="mt-3">پس از بررسی دقیق نیازهای شما، زمان‌بندی دقیق‌تری ارائه خواهیم داد.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden"> |
|
|
<button class="accordion-header w-full flex justify-between items-center p-6 text-right"> |
|
|
<span class="text-lg font-bold">آیا امکان تغییرات پس از شروع پروژه وجود دارد؟</span> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="accordion-content"> |
|
|
<div class="p-6 pt-0 text-gray-700"> |
|
|
<p>بله، اما این موضوع بستگی به مرحله پروژه دارد:</p> |
|
|
<p class="mt-3">در مراحل اولیه طراحی، تغییرات معمولاً بدون هزینه اضافه قابل انجام هستند. اما پس از تایید طرح اولیه و شروع توسعه، تغییرات اساسی ممکن است نیاز به بازنگری در زمان‌بندی و هزینه داشته باشند.</p> |
|
|
<p class="mt-3">ما همیشه سعی می‌کنیم انعطاف‌پذیر باشیم و تغییرات منطقی را در طول پروژه اعمال کنیم، اما برای جلوگیری از تاخیرهای غیرضروری، توصیه می‌کنیم نیازهای خود را به طور کامل در ابتدا مشخص کنید.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden"> |
|
|
<button class="accordion-header w-full flex justify-between items-center p-6 text-right"> |
|
|
<span class="text-lg font-bold">آیا می‌توانم نمونه کارهای مشابه با کسب و کار خودم را ببینم؟</span> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="accordion-content"> |
|
|
<div class="p-6 pt-0 text-gray-700"> |
|
|
<p>قطعاً. ما نمونه کارهای مختلفی در صنایع گوناگون داریم و می‌توانیم نمونه‌های مرتبط با حوزه فعالیت شما را ارائه دهیم.</p> |
|
|
<p class="mt-3">در بخش <a href="#portfolio" class="text-blue-600 hover:underline">نمونه کارها</a> می‌توانید برخی از پروژه‌های اخیر ما را مشاهده کنید. همچنین در جلسه مشاوره اولیه، نمونه‌های بیشتری را با توجه به نیاز خاص شما نمایش خواهیم داد.</p> |
|
|
<p class="mt-3">اگر پروژه خاصی مد نظر دارید که به دلایل محرمانه در سایت نمایش داده نشده، می‌توانیم در جلسه خصوصی آن را با شما به اشتراک بگذاریم.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden"> |
|
|
<button class="accordion-header w-full flex justify-between items-center p-6 text-right"> |
|
|
<span class="text-lg font-bold">پشتیبانی پس از تحویل پروژه چگونه است؟</span> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="accordion-content"> |
|
|
<div class="p-6 pt-0 text-gray-700"> |
|
|
<p>همه طرح‌های ما شامل دوره پشتیبانی رایگان پس از تحویل هستند (مدت زمان پشتیبانی رایگان بسته به طرح انتخابی متفاوت است).</p> |
|
|
<p class="mt-3">پس از اتمام دوره پشتیبانی رایگان، می‌توانید یکی از طرح‌های پشتیبانی ماهانه یا سالانه را انتخاب کنید که شامل:</p> |
|
|
<ul class="list-disc pr-5 mt-3 space-y-2"> |
|
|
<li>رفع باگ‌ها و مشکلات فنی</li> |
|
|
<li>به‌روزرسانی‌های جزئی</li> |
|
|
<li>پشتیبانی تلفنی و آنلاین</li> |
|
|
<li>بک‌آپ منظم</li> |
|
|
<li>مشاوره فنی</li> |
|
|
</ul> |
|
|
<p class="mt-3">همچنین برای پروژه‌های بزرگ، پشتیبانی اختصاصی با شرایط ویژه ارائه می‌دهیم.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">تماس با ما</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">آماده پاسخگویی به سوالات و شروع پروژه جدید شما هستیم.</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-12"> |
|
|
<div class="lg:w-1/2"> |
|
|
<form class="space-y-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="name" class="block mb-2 font-bold">نام کامل</label> |
|
|
<input type="text" id="name" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="نام و نام خانوادگی"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block mb-2 font-bold">ایمیل</label> |
|
|
<input type="email" id="email" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="آدرس ایمیل"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="subject" class="block mb-2 font-bold">موضوع</label> |
|
|
<input type="text" id="subject" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="موضوع پیام"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block mb-2 font-bold">پیام</label> |
|
|
<textarea id="message" rows="5" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="متن پیام شما"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="bg-blue-600 text-white px-8 py-3 rounded-full font-bold hover:bg-blue-700 transition duration-300">ارسال پیام</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-md h-full"> |
|
|
<h3 class="text-xl font-bold mb-6">اطلاعات تماس</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-map-marker-alt text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">آدرس</h4> |
|
|
<p class="text-gray-600">تهران، خیابان ولیعصر، پلاک ۱۰۰۰، طبقه ۵</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-phone-alt text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">تلفن</h4> |
|
|
<p class="text-gray-600">۰۲۱-۸۸۸۸۸۸۸۸</p> |
|
|
<p class="text-gray-600">۰۹۱۲-۱۲۳۴۵۶۷</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-envelope text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">ایمیل</h4> |
|
|
<p class="text-gray-600">info@novincreative.ir</p> |
|
|
<p class="text-gray-600">support@novincreative.ir</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-clock text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">ساعات کاری</h4> |
|
|
<p class="text-gray-600">شنبه تا چهارشنبه: ۹ صبح تا ۵ بعدازظهر</p> |
|
|
<p class="text-gray-600">پنجشنبه: ۹ صبح تا ۱ بعدازظهر</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h4 class="font-bold mb-4">ما را در شبکه‌های اجتماعی دنبال کنید</h4> |
|
|
<div class="flex space-x-4 space-x-reverse"> |
|
|
<a href="#" class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700"> |
|
|
<i class="fab fa-telegram"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 rounded-xl overflow-hidden shadow-md"> |
|
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.676001380693!2d51.38982131526684!3d35.73234398018485!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzXCsDQzJzU2LjQiTiA1McKwMjMnMjkuOSJF!5e0!3m2!1sen!2s!4v1620000000000!5m2!1sen!2s" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">نوین‌کرایتیو</h3> |
|
|
<p class="text-gray-400">ما با خلاقیت و تخصص، کسب و کار شما را به سطح جدیدی می‌رسانیم. همراه شما در مسیر دیجیتال.</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">لینک‌های سریع</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#home" class="text-gray-400 hover:text-white">خانه</a></li> |
|
|
<li><a href="#services" class="text-gray-400 hover:text-white">خدمات</a></li> |
|
|
<li><a href="#portfolio" class="text-gray-400 hover:text-white">نمونه کارها</a></li> |
|
|
<li><a href="#contact" class="text-gray-400 hover:text-white">تماس با ما</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">خدمات</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">توسعه وب</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">توسعه اپلیکیشن</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">طراحی UI/UX</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">دیجیتال مارکتینگ</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">سئو</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">خبرنامه</h3> |
|
|
<p class="text-gray-400 mb-4">با عضویت در خبرنامه از آخرین اخبار و تخفیف‌ها مطلع شوید.</p> |
|
|
<form class="flex"> |
|
|
<input type="email" placeholder="ایمیل شما" class="px-4 py-2 rounded-r-lg w-full focus:outline-none text-gray-800"> |
|
|
<button type="submit" class="bg-blue-600 px-4 py-2 rounded-l-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400">© ۱۴۰۲ نوین‌کرایتیو. تمام حقوق محفوظ است.</p> |
|
|
<div class="flex space-x-6 space-x-reverse mt-4 md:mt-0"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const testimonialSlides = document.getElementById('testimonial-slides'); |
|
|
const prevTestimonial = document.getElementById('prev-testimonial'); |
|
|
const nextTestimonial = document.getElementById('next-testimonial'); |
|
|
const testimonialDots = document.querySelectorAll('.testimonial-dot'); |
|
|
|
|
|
let currentSlide = 0; |
|
|
const slideCount = document.querySelectorAll('.testimonial-card').length; |
|
|
|
|
|
function updateSlider() { |
|
|
testimonialSlides.style.transform = `translateX(${currentSlide * -100}%)`; |
|
|
|
|
|
testimonialDots.forEach((dot, index) => { |
|
|
if(index === currentSlide) { |
|
|
dot.classList.add('bg-blue-600'); |
|
|
dot.classList.remove('bg-blue-200'); |
|
|
} else { |
|
|
dot.classList.add('bg-blue-200'); |
|
|
dot.classList.remove('bg-blue-600'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
prevTestimonial.addEventListener('click', () => { |
|
|
currentSlide = (currentSlide - 1 + slideCount) % slideCount; |
|
|
updateSlider(); |
|
|
}); |
|
|
|
|
|
nextTestimonial.addEventListener('click', () => { |
|
|
currentSlide = (currentSlide + 1) % slideCount; |
|
|
updateSlider(); |
|
|
}); |
|
|
|
|
|
testimonialDots.forEach(dot => { |
|
|
dot.addEventListener('click', () => { |
|
|
currentSlide = parseInt(dot.getAttribute('data-index')); |
|
|
updateSlider(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const accordionItems = document.querySelectorAll('.accordion-item'); |
|
|
|
|
|
accordionItems.forEach(item => { |
|
|
const header = item.querySelector('.accordion-header'); |
|
|
|
|
|
header.addEventListener('click', () => { |
|
|
const isActive = item.classList.contains('active'); |
|
|
|
|
|
|
|
|
accordionItems.forEach(i => { |
|
|
i.classList.remove('active'); |
|
|
i.querySelector('.accordion-header i').classList.remove('fa-chevron-up'); |
|
|
i.querySelector('.accordion-header i').classList.add('fa-chevron-down'); |
|
|
}); |
|
|
|
|
|
|
|
|
if(!isActive) { |
|
|
item.classList.add('active'); |
|
|
header.querySelector('i').classList.remove('fa-chevron-down'); |
|
|
header.querySelector('i').classList.add('fa-chevron-up'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if(targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
if(!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const fadeElements = document.querySelectorAll('.fade-in'); |
|
|
|
|
|
function checkScroll() { |
|
|
fadeElements.forEach(element => { |
|
|
const elementTop = element.getBoundingClientRect().top; |
|
|
const windowHeight = window.innerHeight; |
|
|
|
|
|
if(elementTop < windowHeight - 100) { |
|
|
element.style.opacity = '1'; |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
checkScroll(); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', checkScroll); |
|
|
</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=KINGHAJI/test-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
