Enhanced customization features with full layout support

✨ New Features:
- Add group overlay to ALL layouts (Grid, Cards, Timeline, Magazine)
- Expand font selection with beautiful Cyrillic fonts
- Dynamic font loading optimization with FontLoader component
- Group title visibility control across all layouts
- Group description color theming throughout

🎨 Font improvements:
- Added premium Cyrillic fonts: PT Sans, PT Serif, Fira Sans, Ubuntu, Yandex Sans Text
- Added decorative fonts: Russo One, Comfortaa, Philosopher, Marck Script
- Only load fonts that are actually used on the page via Google Fonts API

🔧 Technical enhancements:
- FontLoader component with smart Google Fonts integration
- Consistent overlay implementation across all layout modes
- Better color theming for group descriptions
- Improved font fallbacks and loading performance

frontend/linktree-frontend/src/app/[username]/page.tsx

@@ -5,6 +5,7 @@ import { notFound } from 'next/navigation'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useState, Fragment } from 'react'
+import FontLoader from '../components/FontLoader'
 
 interface LinkItem {
   id: number
@@ -337,11 +338,12 @@ export default function UserPage({
     </div>
   )
 
-    // Карточки (большие карточки с описанием)
   const renderCardsLayout = () => (
     <div>
       <div className="d-flex justify-content-between align-items-center mb-4">
-        <h5 className="mb-0">Группы ссылок</h5>
+        {(designSettings.show_groups_title !== false) && (
+          <h5 className="mb-0">Группы ссылок</h5>
+        )}
       </div>
       <div className="row g-4">
         {data!.groups.map((group) => (
@@ -375,15 +377,32 @@ export default function UserPage({
                   </div>
                 </div>
               </div>
-              <div className="card-body"
+              <div 
+                className="card-body position-relative"
                 style={{
                   backgroundImage: group.background_image ? `url(${group.background_image})` : 'none',
                   backgroundSize: 'cover',
                   backgroundPosition: 'center'
                 }}
               >
+                {designSettings.group_overlay_enabled && (
+                  <div 
+                    className="position-absolute top-0 start-0 w-100 h-100"
+                    style={{
+                      backgroundColor: designSettings.group_overlay_color || '#000000',
+                      opacity: designSettings.group_overlay_opacity || 0.3,
+                      zIndex: 1
+                    }}
+                  ></div>
+                )}
+                <div className="position-relative" style={{ zIndex: 2 }}>
                 {group.description && (
-                  <p className="text-muted mb-3">{group.description}</p>
+                  <p 
+                    className="mb-3"
+                    style={{ color: designSettings.group_description_text_color || '#666666' }}
+                  >
+                    {group.description}
+                  </p>
                 )}
                 <div className="row g-3">
                   {group.links.map((link) => (
@@ -422,6 +441,7 @@ export default function UserPage({
                     </div>
                   ))}
                 </div>
+                </div>
               </div>
             </div>
           </div>
@@ -677,7 +697,9 @@ export default function UserPage({
   const renderTimelineLayout = () => (
     <div>
       <div className="d-flex justify-content-between align-items-center mb-4">
-        <h5 className="mb-0">Группы ссылок</h5>
+        {(designSettings.show_groups_title !== false) && (
+          <h5 className="mb-0">Группы ссылок</h5>
+        )}
       </div>
       <div className="timeline">
         {data!.groups.map((group, index) => (
@@ -706,15 +728,32 @@ export default function UserPage({
                     </div>
                   </div>
                 </div>
-                <div className="card-body"
+                <div 
+                  className="card-body position-relative"
                   style={{
                     backgroundImage: group.background_image ? `url(${group.background_image})` : 'none',
                     backgroundSize: 'cover',
                     backgroundPosition: 'center'
                   }}
                 >
+                  {designSettings.group_overlay_enabled && (
+                    <div 
+                      className="position-absolute top-0 start-0 w-100 h-100"
+                      style={{
+                        backgroundColor: designSettings.group_overlay_color || '#000000',
+                        opacity: designSettings.group_overlay_opacity || 0.3,
+                        zIndex: 1
+                      }}
+                    ></div>
+                  )}
+                  <div className="position-relative" style={{ zIndex: 2 }}>
                   {group.description && (
-                    <p className="text-muted mb-3">{group.description}</p>
+                    <p 
+                      className="mb-3"
+                      style={{ color: designSettings.group_description_text_color || '#666666' }}
+                    >
+                      {group.description}
+                    </p>
                   )}
                   {group.links.slice(0, 5).map(link => (
                     <Link
@@ -743,6 +782,7 @@ export default function UserPage({
                   {group.links.length > 5 && (
                     <small className="text-muted">+{group.links.length - 5} еще...</small>
                   )}
+                  </div>
                 </div>
                 <div className="card-footer">
                   {/* footer intentionally left empty for public page, mirrors dashboard structure */}
@@ -759,7 +799,9 @@ export default function UserPage({
   const renderMagazineLayout = () => (
     <div>
       <div className="d-flex justify-content-between align-items-center mb-4">
-        <h5 className="mb-0">Группы ссылок</h5>
+        {(designSettings.show_groups_title !== false) && (
+          <h5 className="mb-0">Группы ссылок</h5>
+        )}
       </div>
       <div className="magazine-layout">
         {data!.groups.map((group, index) => (
@@ -767,7 +809,8 @@ export default function UserPage({
             <div className="card">
               <div className="row g-0">
                 <div className={`${index === 0 ? 'col-md-6' : 'col-md-4'}`}>
-                  <div className="magazine-image d-flex align-items-center justify-content-center bg-light position-relative"
+                  <div 
+                    className="magazine-image d-flex align-items-center justify-content-center bg-light position-relative"
                     style={{ 
                       minHeight: index === 0 ? '300px' : '200px',
                       backgroundImage: group.background_image ? `url(${group.background_image})` : 'none',
@@ -775,6 +818,17 @@ export default function UserPage({
                       backgroundPosition: 'center'
                     }}
                   >
+                    {designSettings.group_overlay_enabled && group.background_image && (
+                      <div 
+                        className="position-absolute top-0 start-0 w-100 h-100"
+                        style={{
+                          backgroundColor: designSettings.group_overlay_color || '#000000',
+                          opacity: designSettings.group_overlay_opacity || 0.3,
+                          zIndex: 1
+                        }}
+                      ></div>
+                    )}
+                    <div className="position-relative" style={{ zIndex: 2 }}>
                     {!group.background_image && (
                       group.icon_url && designSettings.show_group_icons ? (
                         <img
@@ -792,6 +846,7 @@ export default function UserPage({
                         <i className="bi bi-star-fill text-warning"></i>
                       </div>
                     )}
+                    </div>
                   </div>
                 </div>
                 <div className={`${index === 0 ? 'col-md-6' : 'col-md-8'}`}>
@@ -799,7 +854,10 @@ export default function UserPage({
                     <h5 className="card-title" style={{ color: designSettings.group_text_color || designSettings.theme_color }}>
                       {group.name}
                     </h5>
-                    <p className="card-text text-muted">
+                    <p 
+                      className="card-text"
+                      style={{ color: designSettings.group_description_text_color || '#666666' }}
+                    >
                       {group.description || `${group.links.length} ссылок в этой группе`}
                     </p>
                     <div className="links-preview">
@@ -902,7 +960,14 @@ export default function UserPage({
   }
 
   return (
-    <main style={containerStyle}>
+    <>
+      {/* Динамическая загрузка шрифтов */}
+      <FontLoader
+        fontFamily={designSettings.font_family}
+        headingFontFamily={designSettings.heading_font_family}
+        bodyFontFamily={designSettings.body_font_family}
+      />
+      <main style={containerStyle}>
       <div className="container-fluid px-0">
         {/* Обложка пользователя - растягиваем на всю ширину экрана */}
         {data.cover && (
@@ -1053,5 +1118,6 @@ export default function UserPage({
         </div>
       </div>
     </main>
+    </>
   )
 }

frontend/linktree-frontend/src/app/components/CustomizationPanel.tsx

@@ -673,15 +673,20 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate }: Custom
                         value={settings.font_family}
                         onChange={(e) => handleChange('font_family', e.target.value)}
                       >
-                        <option value="sans-serif">Sans Serif</option>
+                        <option value="sans-serif">Системный Sans Serif</option>
-                        <option value="serif">Serif</option>
+                        <option value="serif">Системный Serif</option>
                         <option value="monospace">Monospace</option>
-                        <option value="Inter, sans-serif">Inter</option>
+                        <option value="'PT Sans', sans-serif">PT Sans</option>
-                        <option value="Roboto, sans-serif">Roboto</option>
+                        <option value="'PT Serif', serif">PT Serif</option>
-                        <option value="Open Sans, sans-serif">Open Sans</option>
+                        <option value="'Roboto', sans-serif">Roboto</option>
-                        <option value="Source Sans Pro, sans-serif">Source Sans Pro</option>
+                        <option value="'Open Sans', sans-serif">Open Sans</option>
-                        <option value="Lato, sans-serif">Lato</option>
+                        <option value="'Source Sans Pro', sans-serif">Source Sans Pro</option>
-                        <option value="Nunito, sans-serif">Nunito</option>
+                        <option value="'Fira Sans', sans-serif">Fira Sans</option>
+                        <option value="'Ubuntu', sans-serif">Ubuntu</option>
+                        <option value="'Yandex Sans Text', sans-serif">Yandex Sans Text</option>
+                        <option value="'Inter', sans-serif">Inter</option>
+                        <option value="'Manrope', sans-serif">Manrope</option>
+                        <option value="'Nunito Sans', sans-serif">Nunito Sans</option>
                       </select>
                     </div>
                     <div className="col-md-6 mb-3">
@@ -692,19 +697,25 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate }: Custom
                         onChange={(e) => handleChange('heading_font_family', e.target.value)}
                       >
                         <option value="">Как основной</option>
-                        <option value="sans-serif">Sans Serif</option>
+                        <option value="'PT Sans', sans-serif">PT Sans</option>
-                        <option value="serif">Serif</option>
+                        <option value="'PT Serif', serif">PT Serif</option>
-                        <option value="monospace">Monospace</option>
+                        <option value="'Roboto', sans-serif">Roboto</option>
-                        <option value="Inter, sans-serif">Inter</option>
+                        <option value="'Open Sans', sans-serif">Open Sans</option>
-                        <option value="Roboto, sans-serif">Roboto</option>
+                        <option value="'Source Sans Pro', sans-serif">Source Sans Pro</option>
-                        <option value="Open Sans, sans-serif">Open Sans</option>
+                        <option value="'Fira Sans', sans-serif">Fira Sans</option>
-                        <option value="Source Sans Pro, sans-serif">Source Sans Pro</option>
+                        <option value="'Ubuntu', sans-serif">Ubuntu</option>
-                        <option value="Lato, sans-serif">Lato</option>
+                        <option value="'Yandex Sans Text', sans-serif">Yandex Sans Text</option>
-                        <option value="Nunito, sans-serif">Nunito</option>
+                        <option value="'Inter', sans-serif">Inter</option>
-                        <option value="Playfair Display, serif">Playfair Display</option>
+                        <option value="'Manrope', sans-serif">Manrope</option>
-                        <option value="Merriweather, serif">Merriweather</option>
+                        <option value="'Montserrat', sans-serif">Montserrat</option>
-                        <option value="Oswald, sans-serif">Oswald</option>
+                        <option value="'Playfair Display', serif">Playfair Display</option>
-                        <option value="Montserrat, sans-serif">Montserrat</option>
+                        <option value="'Merriweather', serif">Merriweather</option>
+                        <option value="'Oswald', sans-serif">Oswald</option>
+                        <option value="'Russo One', sans-serif">Russo One</option>
+                        <option value="'Comfortaa', cursive">Comfortaa</option>
+                        <option value="'Philosopher', sans-serif">Philosopher</option>
+                        <option value="'Cormorant Garamond', serif">Cormorant Garamond</option>
+                        <option value="'Marck Script', cursive">Marck Script</option>
                       </select>
                     </div>
                     <div className="col-md-6 mb-3">
@@ -715,9 +726,20 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate }: Custom
                         onChange={(e) => handleChange('body_font_family', e.target.value)}
                       >
                         <option value="">Как основной</option>
-                        <option value="sans-serif">Sans Serif</option>
+                        <option value="'PT Sans', sans-serif">PT Sans</option>
-                        <option value="serif">Serif</option>
+                        <option value="'PT Serif', serif">PT Serif</option>
-                        <option value="monospace">Monospace</option>
+                        <option value="'Roboto', sans-serif">Roboto</option>
+                        <option value="'Open Sans', sans-serif">Open Sans</option>
+                        <option value="'Source Sans Pro', sans-serif">Source Sans Pro</option>
+                        <option value="'Fira Sans', sans-serif">Fira Sans</option>
+                        <option value="'Ubuntu', sans-serif">Ubuntu</option>
+                        <option value="'Yandex Sans Text', sans-serif">Yandex Sans Text</option>
+                        <option value="'Inter', sans-serif">Inter</option>
+                        <option value="'Manrope', sans-serif">Manrope</option>
+                        <option value="'Nunito Sans', sans-serif">Nunito Sans</option>
+                        <option value="'Lato', sans-serif">Lato</option>
+                        <option value="'Source Serif Pro', serif">Source Serif Pro</option>
+                        <option value="'Crimson Text', serif">Crimson Text</option>
                         <option value="Inter, sans-serif">Inter</option>
                         <option value="Roboto, sans-serif">Roboto</option>
                         <option value="Open Sans, sans-serif">Open Sans</option>

frontend/linktree-frontend/src/app/components/FontLoader.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { useEffect } from 'react'
+
+interface FontLoaderProps {
+  fontFamily?: string
+  headingFontFamily?: string
+  bodyFontFamily?: string
+}
+
+const FontLoader = ({ fontFamily, headingFontFamily, bodyFontFamily }: FontLoaderProps) => {
+  useEffect(() => {
+    // Собираем уникальные шрифты для загрузки
+    const fontsToLoad = new Set<string>()
+    
+    // Функция для извлечения названия шрифта из CSS font-family
+    const extractFontName = (fontFamilyString: string) => {
+      if (!fontFamilyString || fontFamilyString === 'sans-serif' || fontFamilyString === 'serif' || fontFamilyString === 'monospace') {
+        return null
+      }
+      
+      // Извлекаем первый шрифт из строки, убираем кавычки
+      const firstFont = fontFamilyString.split(',')[0].trim().replace(/['"]/g, '')
+      
+      // Проверяем, что это не системный шрифт
+      if (firstFont === 'sans-serif' || firstFont === 'serif' || firstFont === 'monospace') {
+        return null
+      }
+      
+      return firstFont
+    }
+
+    // Добавляем шрифты в список загрузки
+    if (fontFamily) {
+      const font = extractFontName(fontFamily)
+      if (font) fontsToLoad.add(font)
+    }
+    
+    if (headingFontFamily) {
+      const font = extractFontName(headingFontFamily)
+      if (font) fontsToLoad.add(font)
+    }
+    
+    if (bodyFontFamily) {
+      const font = extractFontName(bodyFontFamily)
+      if (font) fontsToLoad.add(font)
+    }
+
+    // Загружаем шрифты через Google Fonts
+    if (fontsToLoad.size > 0) {
+      const fontNames = Array.from(fontsToLoad)
+      
+      // Проверяем, не загружен ли уже этот набор шрифтов
+      const fontId = `font-loader-${fontNames.join('-').toLowerCase().replace(/\s+/g, '-')}`
+      
+      if (!document.getElementById(fontId)) {
+        const fontUrl = `https://fonts.googleapis.com/css2?${fontNames.map(font => 
+          `family=${encodeURIComponent(font)}:wght@300;400;500;600;700`
+        ).join('&')}&display=swap&subset=latin,cyrillic`
+        
+        const link = document.createElement('link')
+        link.id = fontId
+        link.rel = 'stylesheet'
+        link.href = fontUrl
+        document.head.appendChild(link)
+      }
+    }
+    
+    // Cleanup function - удаляем неиспользуемые шрифты
+    return () => {
+      // В продакшене можно добавить логику очистки неиспользуемых шрифтов
+    }
+  }, [fontFamily, headingFontFamily, bodyFontFamily])
+
+  return null // Этот компонент не рендерит ничего видимого
+}
+
+export default FontLoader