Figma шаблоны
Профессиональные инструменты и шаблоны для создания дизайнерских решений
${card.badge ? card.badge + '
' : ''}
`;
grid.appendChild(cardEl);
});
}
function loadCategory(category, subItem) {
currentCategory = category;
currentSubItem = subItem;
const itemData = products[category].items[subItem];
pageTitle.textContent = itemData.title;
pageDesc.textContent = products[category].desc;
allCards = itemData.cards;
currentPage = 1;
renderCards(allCards.slice(0, cardsPerPage), false);
if (allCards.length > cardsPerPage) {
showMoreContainer.classList.add('hp-design-repo-show-more--visible');
loadMoreBtn.disabled = false;
} else {
showMoreContainer.classList.remove('hp-design-repo-show-more--visible');
loadMoreBtn.disabled = true;
}
subLinks.forEach(link => {
link.classList.remove('hp-design-repo-sub-link--active');
});
subLinks.forEach(link => {
if (link.dataset.category === category && link.dataset.sub === subItem) {
link.classList.add('hp-design-repo-sub-link--active');
}
});
}
loadMoreBtn.addEventListener('click', function() {
if (isLoading) return;
isLoading = true;
loadMoreBtn.classList.add('hp-design-repo-load-more--loading');
const startIndex = currentPage * cardsPerPage;
const endIndex = Math.min(startIndex + cardsPerPage, allCards.length);
if (startIndex >= allCards.length) {
showMoreContainer.classList.remove('hp-design-repo-show-more--visible');
loadMoreBtn.disabled = true;
isLoading = false;
loadMoreBtn.classList.remove('hp-design-repo-load-more--loading');
return;
}
setTimeout(function() {
renderCards(allCards.slice(startIndex, endIndex), true);
currentPage++;
isLoading = false;
loadMoreBtn.classList.remove('hp-design-repo-load-more--loading');
if (endIndex >= allCards.length) {
showMoreContainer.classList.remove('hp-design-repo-show-more--visible');
loadMoreBtn.disabled = true;
}
}, 400);
});
categoryHeaders.forEach(function(header) {
header.addEventListener('click', function() {
const category = header.parentElement;
const isOpen = category.classList.contains('hp-design-repo-category--expanded');
document.querySelectorAll('.hp-design-repo-category').forEach(function(cat) {
cat.classList.remove('hp-design-repo-category--expanded');
cat.querySelector('.hp-design-repo-category-header').classList.remove('hp-design-repo-category-header--active');
});
if (!isOpen) {
category.classList.add('hp-design-repo-category--expanded');
header.classList.add('hp-design-repo-category-header--active');
}
});
});
subLinks.forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
loadCategory(link.dataset.category, link.dataset.sub);
});
});
function toggleMobileMenu() {
const isOpen = mobileMenu.classList.contains('hp-design-repo-mobile-menu--open');
if (isOpen) {
mobileMenu.classList.remove('hp-design-repo-mobile-menu--open');
mobileOverlay.classList.remove('hp-design-repo-mobile-overlay--active');
mobileToggle.textContent = '☰ Меню';
} else {
mobileMenu.classList.add('hp-design-repo-mobile-menu--open');
mobileOverlay.classList.add('hp-design-repo-mobile-overlay--active');
mobileToggle.textContent = '✕ Закрыть';
}
}
mobileToggle.addEventListener('click', toggleMobileMenu);
mobileOverlay.addEventListener('click', toggleMobileMenu);
if (mobileMenuInner) {
const mobileMenuContent = desktopMenu.querySelector('.hp-design-repo-category').parentElement.innerHTML;
mobileMenuInner.innerHTML = mobileMenuContent;
mobileMenuInner.querySelectorAll('.hp-design-repo-category-header').forEach(function(header) {
header.addEventListener('click', function() {
const category = header.parentElement;
const isOpen = category.classList.contains('hp-design-repo-category--expanded');
document.querySelectorAll('.hp-design-repo-category').forEach(function(cat) {
cat.classList.remove('hp-design-repo-category--expanded');
cat.querySelector('.hp-design-repo-category-header').classList.remove('hp-design-repo-category-header--active');
});
if (!isOpen) {
category.classList.add('hp-design-repo-category--expanded');
header.classList.add('hp-design-repo-category-header--active');
}
});
});
mobileMenuInner.querySelectorAll('.hp-design-repo-sub-link').forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
loadCategory(link.dataset.category, link.dataset.sub);
toggleMobileMenu();
});
});
}
(function init() {
const activeLink = document.querySelector('.hp-design-repo-sub-link--active');
if (activeLink) {
loadCategory(activeLink.dataset.category, activeLink.dataset.sub);
}
})();
})();
' : ''}
${card.title}
${card.text}
Изучи веб-дизайн за 3 месяца и начни зарабатывать во время курса
Это системное обучение веб-дизайну с нуля до уверенного выхода на рынок. За 3 месяца формируется фундамент профессии
Design : technology
Это системное обучение веб-дизайну с нуля до выхода на рынок за 3 месяца. Формируется фундамент UX/UI, работа с мышлением и дисциплиной, создаются реальные проекты: интернет-магазин, сложные интерфейсы, элементы брендинга. Дизайн доводится до запуска — верстка на Tilda, подключение домена и SEO. В финале — готовое портфолио и понимание, как зарабатывать на профессии.
