<p data-indentation="1" data-pm-slice="1 1 []">این ربات چیکار می&zwnj;کنه ؟</p>
<p data-indentation="1">هم میتونی <span style="color: #339966;">گفتگو</span> باهاش داشته باشی هم <span style="color: #339966;">تصویر</span> بسازی.</p>
<p data-indentation="1">&nbsp;</p>
<p data-indentation="1">ویدیو آموزشی</p>
<p data-indentation="1">&nbsp;</p>
<p><video width="250" height="350" data-tap-disabled="true" controls="controls" controlslist="nodownload" data-mce-fragment="1">
<source src="#" /></video></p>
<p data-indentation="1">&nbsp;</p>
<p data-indentation="1">آیا از متن فارسی در ساخت تصاویر پشتیبانی میکنه؟</p>
<p data-indentation="1">بله این ربات از متن فارسی پشتیبانی میکنه و میتونید پرامپت یا همون متن فارسی رو بهش بدید تا تبدیل به تصاویر کنه.</p>
<p data-indentation="1">&nbsp;</p>
<p data-indentation="1">چجوری با این ربات تصویر بسازم ؟</p>
<p data-indentation="1">برای ساخت تصاویر داخل صفحه روی سه نقطه کلیک کنید و گزینه دوم رو انتخاب کنید.</p>
<p data-indentation="1">&nbsp;</p>
<p data-indentation="1">آیا این محدودیت تعداد ساخت تصویر داره؟</p>
<p data-indentation="1" style="text-align: right;">نخیر برای ساخت تصاویر با این ربات هیچ محدودیت وجود ندارد، تصاویر ساخته شده با این ربات از هوش مصنوعی فلاکس پشتیبانی می&zwnj;کنه که اشتراک این هوش مصنوعی ۲۰ دلار در ماه است که شما با این برنامه میتونید بدون محدودیت و مشکل حتی با پرامپت فارسی تصویر دلخواه رو تولید کنید.</p>


این محتوای بالا رو ببین مثل کد پایین بگیر بخش بندی کن و داخل هر عنوان با توضیحات رو داخل که داره قرار بده 
<p>&nbsp;</p>
<style>
        body {
            background-color: #ffffff;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .accordion {
            max-width: 600px;
            width: 100%;
            background: #ffffff;
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
        }

        .accordion-item {
            background: #ffffff;
            border-radius: 16px;
            margin-bottom: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid #f0f0f0;
        }

        .accordion-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            border-color: #e6e6e6;
        }

        .accordion-header {
            padding: 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #2c3e50;
            font-size: 16px;
            font-weight: 600;
            border: none;
            background: none;
            width: 100%;
            text-align: right;
            font-family: system-ui, -apple-system, sans-serif;
            position: relative;
            transition: all 0.3s ease;
        }

        .accordion-header:hover {
            color: #3498db;
        }

        .accordion-header::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(52, 152, 219, 0.2), transparent);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .accordion-header:hover::before {
            transform: scaleX(1);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            background: #f8fafc;
            color: #4a5568;
            font-family: system-ui, -apple-system, sans-serif;
            line-height: 1.6;
        }

        .accordion-content.active {
            max-height: 300px;
            padding: 20px;
            border-top: 1px solid #edf2f7;
        }

        .chevron {
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            fill: currentColor;
            width: 24px;
            height: 24px;
            opacity: 0.8;
        }

        .accordion-header.active {
            color: #3498db;
        }

        .accordion-header.active .chevron {
            transform: rotate(180deg);
            color: #3498db;
        }

        @keyframes slideDown {
            0% {
                opacity: 0;
                transform: translateY(-10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .accordion-content.active p {
            animation: slideDown 0.5s ease forwards;
            margin: 0;
        }

        .accordion-header .icon {
            display: inline-block;
            margin-left: 8px;
            background: linear-gradient(45deg, #3498db, #2980b9);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-size: 1.2em;
        }

        .accordion-item:nth-child(1) .accordion-header:hover {
            color: #3498db;
        }

        .accordion-item:nth-child(2) .accordion-header:hover {
            color: #e74c3c;
        }

        .accordion-item:nth-child(3) .accordion-header:hover {
            color: #2ecc71;
        }

        .accordion-item:nth-child(1) .accordion-header.active {
            color: #3498db;
        }

        .accordion-item:nth-child(2) .accordion-header.active {
            color: #e74c3c;
        }

        .accordion-item:nth-child(3) .accordion-header.active {
            color: #2ecc71;
        }
    </style>
<div class="accordion">
<div class="accordion-item"><button class="accordion-header"> <span class="icon">⚡️</span> هوشینا چطور کار می&zwnj;کنه؟ <svg class="chevron" viewbox="0 0 24 24"> <path d="M7 10l5 5 5-5z"></path> </svg> </button>
<div class="accordion-content">
<p>هوشینا با استفاده از پیشرفته&zwnj;ترین الگوریتم&zwnj;های هوش مصنوعی، محتوای با کیفیت و منحصر به فرد تولید می&zwnj;کند. این سیستم به صورت هوشمند نیازهای شما را درک کرده و بهترین محتوا را ارائه می&zwnj;دهد.</p>
</div>
</div>
<div class="accordion-item"><button class="accordion-header"> <span class="icon">🎯</span> محتوای تولید شده برای سئو مضر نیست؟ <svg class="chevron" viewbox="0 0 24 24"> <path d="M7 10l5 5 5-5z"></path> </svg> </button>
<div class="accordion-content">
<p>خیر، محتوای تولید شده توسط هوشینا کاملاً منحصر به فرد و بهینه&zwnj;سازی شده برای موتورهای جستجو است. تمام محتوا با استانداردهای سئو مطابقت دارد و به بهبود رتبه سایت شما کمک می&zwnj;کند.</p>
</div>
</div>
<div class="accordion-item"><button class="accordion-header"> <span class="icon">💎</span> هزینه&zwnj;ها چطور محاسبه می&zwnj;شه؟ <svg class="chevron" viewbox="0 0 24 24"> <path d="M7 10l5 5 5-5z"></path> </svg> </button>
<div class="accordion-content">
<p>هزینه&zwnj;ها بر اساس حجم محتوا و نوع سرویس درخواستی محاسبه می&zwnj;شود. ما بسته&zwnj;های متنوعی داریم که متناسب با نیاز و بودجه شما طراحی شده&zwnj;اند. برای اطلاعات دقیق&zwnj;تر با ما تماس بگیرید.</p>
</div>
</div>
</div>
<p>
<script>
        document.querySelectorAll('.accordion-header').forEach(button => {
            button.addEventListener('click', () => {
                const accordionContent = button.nextElementSibling;
                const isActive = button.classList.contains('active');
                
                // Close all accordions
                document.querySelectorAll('.accordion-header').forEach(b => {
                    b.classList.remove('active');
                    b.nextElementSibling.classList.remove('active');
                });
                
                // If the clicked accordion wasn't active, open it
                if (!isActive) {
                    button.classList.add('active');
                    accordionContent.classList.add('active');
                }
            });
        });
    </script>
</p> کد کامل یکجا درست کن بفرست