<div class="container mb-5">
<div class="row g-4 p-3 align-items-center" id="responsible">
<div class="customize p-5 d-flex flex-column flex-lg-row g-4 align-items-center">
<div class="col-lg-6">
<h2 class="fw-bold mb-3 inner-sec-title">
دیگه لازم نیست بلد باشی با برنامه نویس صحبت کنی
</h2>
<p class="text-muted mb-4">
با «پوشه»، بدون نیاز به دانش فنی، فروشگاه اینترنتی خودت رو راهاندازی کن. ما زیرساختی
پایدار، طراحی حرفهای و امکانات پیشرفته رو در اختیار تو میذاریم تا بتونی روی فروش تمرکز کنی
و به رشد واقعی برسی.
</p>
{% set featuresLilList = [
'سادگی و سرعت راهاندازی',
'انعطافپذیری بالا',
'هزینه مقرونبهصرفه',
'امنیت و پشتیبانی مداوم',
'ابزارهای تحلیل و SEO',
'انتقال و توسعه آسان',
'سازگاری با موبایل',
] %}
<ul class="list-unstyled text-muted m-0 p-0">
{% for item in featuresLilList %}
<li class="d-flex align-items-center mb-2 gap-2">
<span class="text-success">
<svg stroke="#333" fill="none" stroke-width="2" viewBox="0 0 24 24"
stroke-linecap="round" stroke-linejoin="round" class="text-xl" height="1em"
width="1em" xmlns="http://www.w3.org/2000/svg">
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l2 2l4 -4"></path>
</svg>
</span>
{{ item }}
</li>
{% endfor %}
</ul>
</div>
<div class="col-lg-6 text-center">
{# <div class="mobile-wrapper">#}
<div class="matrix-box w-100">
<canvas class="matrix-canvas"></canvas>
</div>
{# </div>#}
</div>
</div>
</div>
</div>
{% block footer %}
<script>
function initMatrix(containerSelector){
const container = document.querySelector(containerSelector);
const canvas = container.querySelector('canvas');
const ctx = canvas.getContext('2d');
function resize(){
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
}
resize();
window.addEventListener('resize', resize);
const glyphs = 'アイウエオカキクケコサシスセソ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const chars = glyphs.split('');
let fontSize = 10;
let columns = Math.floor(canvas.width / fontSize);
let drops = Array(columns).fill(0);
function draw(){
ctx.fillStyle = 'rgba(0,0,0,0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#0f0';
ctx.font = fontSize + 'px monospace';
for(let i=0; i<columns; i++){
const text = chars[Math.floor(Math.random() * chars.length)];
const x = i * fontSize;
const y = drops[i] * fontSize;
ctx.fillText(text, x, y);
if(y > canvas.height && Math.random() > 0.975){
drops[i] = 0;
} else {
drops[i]++;
}
}
requestAnimationFrame(draw);
}
draw();
}
// اینجا آیدی یا کلاس div رو بده
initMatrix('.matrix-box');
</script>
{% endblock %}