Apply new customization features to public page

- Add support for group overlay colors with opacity
- Add font customization (heading and body fonts)
- Add group description text color support
- Add option to hide 'Groups' title
- Update PublicDesignSettings interface
- Apply new styling to public user pages

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

@@ -49,6 +49,13 @@ interface PublicDesignSettings {
   header_text_color?: string
   group_text_color?: string
   link_text_color?: string
+  group_overlay_enabled?: boolean
+  group_overlay_color?: string
+  group_overlay_opacity?: number
+  show_groups_title?: boolean
+  group_description_text_color?: string
+  body_font_family?: string
+  heading_font_family?: string
   cover_overlay_enabled?: boolean
   cover_overlay_color?: string
   cover_overlay_opacity?: number
@@ -145,9 +152,11 @@ export default function UserPage({
   // Базовый список (по умолчанию)
   const renderListLayout = () => (
     <div className="card">
-      <div className="card-header">
+      {(designSettings.show_groups_title !== false) && (
-        <h5 className="mb-0">Группы ссылок</h5>
+        <div className="card-header">
-      </div>
+          <h5 className="mb-0">Группы ссылок</h5>
+        </div>
+      )}
       <div className="list-group list-group-flush">
         {data!.groups.map((group) => {
           const isExpanded = expandedGroups.has(group.id)
@@ -263,15 +272,32 @@ export default function UserPage({
                   {group.links.length}
                 </span>
               </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 small mb-3">{group.description}</p>
+                  <p 
+                    className="small mb-3"
+                    style={{ color: designSettings.group_description_text_color || '#666666' }}
+                  >
+                    {group.description}
+                  </p>
                 )}
                 <div className="d-grid gap-2">
                   {group.links.slice(0, 5).map((link) => (
@@ -302,6 +328,7 @@ export default function UserPage({
                     <small className="text-muted text-center">+{group.links.length - 5} еще...</small>
                   )}
                 </div>
+                </div>
               </div>
             </div>
           </div>
@@ -864,7 +891,7 @@ export default function UserPage({
   // Стили для контейнера
   const containerStyle = {
     backgroundColor: designSettings.dashboard_background_color,
-    fontFamily: designSettings.font_family,
+    fontFamily: designSettings.body_font_family || designSettings.font_family,
     backgroundImage: designSettings.background_image ? `url(${designSettings.background_image})` : 'none',
     backgroundSize: 'cover',
     backgroundPosition: 'center',
@@ -978,7 +1005,13 @@ export default function UserPage({
                 )}
                 
                 {/* Имя пользователя */}
-                <h1 className="mb-2 fw-bold" style={{ color: designSettings.header_text_color || designSettings.theme_color }}>
+                <h1 
+                  className="mb-2 fw-bold" 
+                  style={{ 
+                    color: designSettings.header_text_color || designSettings.theme_color,
+                    fontFamily: designSettings.heading_font_family || designSettings.font_family
+                  }}
+                >
                   {data.full_name || data.username}
                 </h1>