core-maugli 1.0.2

package/src/components/AuthorCard.astro

@@ -0,0 +1,95 @@
+---
+import { getFilteredCollection } from '../utils/content-loader';
+import { maugliConfig } from '../config/maugli.config';
+import { getPostsByAuthor } from '../utils/data-utils';
+import AuthorLinksGroup from './AuthorLinksGroup.astro';
+import Avatar from './Avatar.astro';
+import CountBadge from './CountBadge.astro';
+
+export interface Props {
+    author: {
+        name: string;
+        position: string;
+        description: string;
+        avatar?: string;
+        socials?: {
+            email?: string;
+            telegram?: string;
+            mastodon?: string;
+            medium?: string;
+            bluesky?: string;
+            reddit?: string;
+            linkedin?: string;
+            twitter?: string;
+        };
+        slug: string;
+    };
+    class?: string;
+}
+
+const { author, class: className } = Astro.props;
+const { name, position, description, avatar, socials, slug } = author;
+
+// Получаем количество статей автора через getPostsByAuthor
+let posts: import('astro:content').CollectionEntry<'blog'>[] = [];
+try {
+    posts = await getFilteredCollection('blog');
+} catch (e) {
+    posts = [];
+}
+const postCount = getPostsByAuthor(posts, slug).length;
+---
+
+<article class="w-full border border-[var(--border-main)] rounded-custom card-bg hover:card-shadow hover:-translate-y-1 transition-all duration-300 p-6 group">
+    <div class="flex flex-col gap-2">
+        <!-- Аватар и имя/должность в одной строке -->
+        <div class="flex flex-row items-start gap-4">
+            <!-- Аватар автора слева -->
+            <Avatar
+                src={avatar || maugliConfig.defaultAuthorImage || 'src/img/default/autor_default.webp'}
+                alt={name}
+                size="clamp(70px, 15vw, 100px)"
+                class="no-border"
+            />
+
+            <!-- Имя, должность и соцсети справа -->
+            <div class="flex flex-col mt-1gap-0.5 flex-1 min-w-0">
+                <a href={`/authors/${slug}/`} class="block" style="text-decoration: none;">
+                    <h3
+                        class="font-serif font-[800] text-[1.3rem] text-[var(--text-heading)] hover:text-[var(--brand-color)] transition-colors duration-300 break-words"
+                        style="line-height: 1.05; word-wrap: break-word; overflow-wrap: break-word;"
+                    >
+                        {name}
+                        {maugliConfig.showAuthorArticleCount && postCount > 0 && <CountBadge count={postCount} />}
+                    </h3>
+                    <p class="text-sm text-[var(--text-main)] mt-1 mb-2 opacity-37 break-words" style="word-wrap: break-word; overflow-wrap: break-word;">
+                        {position}
+                    </p>
+                </a>
+                <!-- Иконки соцсетей -->
+
+                <AuthorLinksGroup authorName={name} socials={socials} maxLinks={8} class="flex-row items-center gap-2 shrink-0" />
+            </div>
+        </div>
+
+        <!-- Описание автора -->
+        {
+            description && (
+                <div class="mt-0 ml-2">
+                    <a href={`/authors/${slug}/`} class="block" style="text-decoration: none;">
+                        <p class="text-[1rem] text-[var(--text-main)] leading-[1.35] opacity-65 line-clamp-3 hover:opacity-80 transition-opacity duration-300">
+                            {description}
+                        </p>
+                    </a>
+                </div>
+            )
+        }
+    </div>
+</article>
+
+<style>
+    /* Убираем тень при наведении, чтобы она совпадала с рубриками */
+    article:hover {
+        box-shadow: none;
+    }
+</style>

package/src/components/AuthorLink.astro

@@ -0,0 +1,25 @@
+---
+export interface Props {
+    href?: string;
+    platform: string;
+    icon: any;
+    ariaLabel: string;
+}
+
+const { href, platform, icon: IconComponent, ariaLabel } = Astro.props;
+---
+
+{
+    href && (
+        <a
+            href={href}
+            target={platform === 'email' ? undefined : '_blank'}
+            rel={platform === 'email' ? undefined : 'noopener noreferrer'}
+            aria-label={ariaLabel}
+            class="flex items-center justify-center w-7 h-7 border border-[var(--text-main)] rounded-circle shrink-0 opacity-30 hover:opacity-100 hover:border-[var(--text-main)] transition-all duration-300"
+            style="text-decoration: none; padding: 0;"
+        >
+            <IconComponent class="w-4 h-4 text-[var(--text-main)]" />
+        </a>
+    )
+}

package/src/components/AuthorLinksGroup.astro

@@ -0,0 +1,135 @@
+---
+import { maugliConfig } from '../config/maugli.config';
+import { LANGUAGES } from '../i18n/languages';
+import BlueskyIcon from '../icons/socials/BlueskyIcon.astro';
+import EmailIcon from '../icons/socials/EmailIcon.astro';
+import LinkedinIcon from '../icons/socials/LinkedinIcon.astro';
+import MastodonIcon from '../icons/socials/MastodonIcon.astro';
+import MediumIcon from '../icons/socials/MediumIcon.astro';
+import RedditIcon from '../icons/socials/RedditIcon.astro';
+import TelegramIcon from '../icons/socials/TelegramIcon.astro';
+import TwitterIcon from '../icons/socials/TwitterIcon.astro';
+import AuthorLink from './AuthorLink.astro';
+// Универсальный импорт словарей по доступным языкам
+const dicts: Record<string, any> = {};
+for (const lang of LANGUAGES) {
+    try {
+        dicts[lang.code] = await import(`../i18n/${lang.code}.json`).then((m) => m.default);
+    } catch {}
+}
+
+export interface Props {
+    socials?: {
+        email?: string;
+        telegram?: string;
+        mastodon?: string;
+        medium?: string;
+        bluesky?: string;
+        reddit?: string;
+        linkedin?: string;
+        twitter?: string;
+    };
+    authorName: string;
+    maxLinks?: number;
+    showContestButton?: boolean;
+    contestUrl?: string;
+    contestLabel?: string;
+    showRss?: boolean;
+    rssLang?: string;
+}
+
+const {
+    socials,
+    authorName,
+    maxLinks = 3,
+    showContestButton = false,
+    contestUrl = '#',
+    contestLabel = 'Конкурс',
+    showRss = false,
+    rssLang = 'en'
+} = Astro.props;
+
+// Все доступные платформы в нужном порядке
+const allPlatforms = ['email', 'linkedin', 'twitter', 'telegram', 'reddit', 'medium', 'mastodon', 'bluesky'];
+
+// Берем первые maxLinks платформ
+const platformsToShow = allPlatforms.slice(0, maxLinks);
+
+// Функция для получения компонента иконки
+const getIconComponent = (platform: string) => {
+    switch (platform) {
+        case 'email':
+            return EmailIcon;
+        case 'telegram':
+            return TelegramIcon;
+        case 'mastodon':
+            return MastodonIcon;
+        case 'medium':
+            return MediumIcon;
+        case 'bluesky':
+            return BlueskyIcon;
+        case 'reddit':
+            return RedditIcon;
+        case 'linkedin':
+            return LinkedinIcon;
+        case 'twitter':
+            return TwitterIcon;
+        default:
+            return EmailIcon;
+    }
+};
+
+const lang = maugliConfig.defaultLang || 'en';
+const dict = dicts[lang] || dicts['en'] || {};
+---
+
+{
+    (platformsToShow.length > 0 || showContestButton) && (
+        <div class="flex flex-row flex-wrap items-center justify-start p-0 gap-2 shrink-0">
+            {platformsToShow.map((platform) => {
+                const IconComponent = getIconComponent(platform);
+                const rawUrl = socials?.[platform as keyof typeof socials];
+                // Для email добавляем mailto: если его нет
+                const url = platform === 'email' && rawUrl && !rawUrl.startsWith('mailto:') ? `mailto:${rawUrl}` : rawUrl;
+                const platformLabel = dict.socials[platform] || platform;
+                const ariaLabel = `${authorName} ${dict.pages.authors.onPlatform} ${platformLabel}`;
+                return <AuthorLink href={url} platform={platform} icon={IconComponent} ariaLabel={ariaLabel} />;
+            })}
+            {showContestButton && (
+                <a
+                    href={contestUrl}
+                    class="flex items-center justify-center w-7 h-7 border border-[var(--text-main)] rounded-circle shrink-0 opacity-30 hover:opacity-100 hover:border-[var(--text-main)] transition-all duration-300 bg-transparent text-[var(--text-main)] text-xs font-bold"
+                    style="text-decoration: none; padding: 0;"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    {contestLabel}
+                </a>
+            )}
+            {showRss &&
+                (rssLang === 'ru' ? (
+                    <a class="footer-link ml-2 flex items-center text-muted" href="/rss.xml" target="_blank" rel="noopener" style="color:var(--text-muted);">
+                        RSS
+                    </a>
+                ) : (
+                    <a class="footer-link ml-2 flex items-center rss-outline" href="/rss.xml" aria-label="RSS" target="_blank" rel="noopener">
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 22 22"
+                            fill="none"
+                            stroke="var(--text-muted)"
+                            stroke-width="1.7"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            style="display:inline;vertical-align:middle;"
+                        >
+                            <circle cx="6.18" cy="17.82" r="2.18" fill="none" stroke="var(--text-muted)" stroke-width="1.7" />
+                            <path d="M4 4a16 16 0 0 1 16 16" />
+                            <path d="M4 11a9 9 0 0 1 9 9" />
+                        </svg>
+                    </a>
+                ))}
+        </div>
+    )
+}

package/src/components/Avatar.astro

@@ -0,0 +1,32 @@
+---
+export interface Props {
+    src?: string;
+    alt: string;
+    size?: string | number;
+    class?: string;
+}
+
+const { src, alt, size = '100px', class: className } = Astro.props;
+
+// Определяем размер - может быть строкой (например, "80px", "5rem") или числом (пиксели)
+const avatarSize = typeof size === 'number' ? `${size}px` : size;
+---
+
+<div class:list={['avatar-container', className]} style={`width: ${avatarSize}; height: ${avatarSize};`}>
+    <img src={src || 'src/img/default/autor_default.webp'} alt={alt} loading="lazy" class="w-full h-full object-cover" />
+</div>
+
+<style>
+    .avatar-container {
+        border-radius: var(--rounded-circle, 50%);
+        overflow: hidden;
+        border: 2px solid var(--border-main);
+        background: var(--bg-muted);
+        flex-shrink: 0;
+    }
+
+    .avatar-container.no-border {
+        border: none;
+        background: transparent;
+    }
+</style>

package/src/components/BaseHead.astro

@@ -0,0 +1,121 @@
+---
+import { getFilteredCollection } from '../utils/content-loader';
+import siteConfig from '../data/site-config.ts';
+import '../styles/global.css';
+// Определи тип выше:
+export type ImageMimeType = 'image/jpeg' | 'image/png' | 'image/webp';
+
+export type Props = {
+    title?: string;
+    description?: string;
+    image?: {
+        width?: string;
+        height?: string;
+        type?: ImageMimeType;
+        src: string;
+        alt?: string;
+    };
+    pageType?: 'website' | 'article';
+    seo?: {
+        title?: string;
+        description?: string;
+        keywords?: string[];
+        image?: {
+            width?: string;
+            height?: string;
+            type?: ImageMimeType;
+            src: string;
+            alt?: string;
+        };
+        pageType?: 'website' | 'article';
+    };
+};
+
+const { seo = {}, title: baseTitle, description: baseDescription = '', image: baseImage = siteConfig.image, pageType: basePageType = 'website' } = Astro.props;
+
+// ОДНА переменная для title, description, keywords, image, pageType
+const seoTitle = seo.title || baseTitle || siteConfig.title;
+const seoDescription = seo.description || baseDescription || siteConfig.description;
+const seoKeywords = seo.keywords?.length ? seo.keywords.join(', ') : '';
+const seoImage = seo.image || baseImage || siteConfig.image;
+
+const resolvedImage =
+    seoImage && seoImage.src
+        ? {
+              src: new URL(seoImage.src, Astro.site).toString(),
+              alt: seoImage.alt,
+              width: 'width' in seoImage ? seoImage.width : undefined,
+              height: 'height' in seoImage ? seoImage.height : undefined,
+              type: 'type' in seoImage ? seoImage.type : undefined
+          }
+        : undefined;
+const pageType = seo.pageType || basePageType;
+const canonicalURL = new URL(Astro.request.url, Astro.site);
+
+/**
+ * Enforce some standard canonical URL formatting across the site.
+ */
+function formatCanonicalURL(url: string | URL) {
+    const path = url.toString();
+    const hasQueryParams = path.includes('?');
+    // If there are query params, make sure the URL has no trailing slash
+    if (hasQueryParams) {
+        return path.replace(/\/?$/, '');
+    }
+    // otherwise, canonical URL always has a trailing slash
+    return path.replace(/\/?$/, '/');
+}
+
+let authors = [];
+try {
+    authors = await getFilteredCollection('authors');
+} catch (e) {
+    console.warn('Не удалось загрузить коллекцию авторов:', e);
+}
+if (authors.length === 0) {
+    throw new Error('В коллекции авторов нет ни одного автора. Создайте хотя бы одного автора!');
+}
+let defaultAuthor = authors[0];
+let defaultAuthorName = defaultAuthor.data.name;
+---
+
+<!-- High Priority Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>{seoTitle}</title>
+<meta name="robots" content="index, follow" />
+<meta name="generator" content={Astro.generator} />
+
+<!-- SEO -->
+<meta name="description" content={seoDescription} />
+<meta name="keywords" content={seoKeywords} />
+<meta name="author" content={defaultAuthorName} />
+<link rel="canonical" href={formatCanonicalURL(canonicalURL)} />
+
+<!-- Low Priority Global Metadata -->
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="manifest" href="/manifest.webmanifest" />
+<meta name="theme-color" content="var(--theme-color)" />
+<link rel="apple-touch-icon" sizes="192x192" href="/icon-192.png" />
+<link rel="apple-touch-icon" sizes="512x512" href="/icon-512.png" />
+<link rel="sitemap" href="/sitemap-index.xml" />
+<link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS" />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content={pageType} />
+<meta property="og:url" content={formatCanonicalURL(canonicalURL)} />
+<meta property="og:title" content={seoTitle} />
+<meta property="og:description" content={seoDescription} />
+{resolvedImage?.src && <meta property="og:image" content={resolvedImage.src} />}
+{resolvedImage?.alt && <meta property="og:image:alt" content={resolvedImage.alt} />}
+{typeof resolvedImage?.width !== 'undefined' && <meta property="og:image:width" content={resolvedImage.width} />}
+{typeof resolvedImage?.height !== 'undefined' && <meta property="og:image:height" content={resolvedImage.height} />}
+{resolvedImage?.type && <meta property="og:image:type" content={resolvedImage.type} />}
+
+<!-- X/Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={formatCanonicalURL(canonicalURL)} />
+<meta property="twitter:title" content={seoTitle} />
+<meta property="twitter:description" content={seoDescription} />
+{resolvedImage?.src && <meta property="twitter:image" content={resolvedImage.src} />}
+{resolvedImage?.alt && <meta name="twitter:image:alt" content={resolvedImage?.alt} />}

package/src/components/Breadcrumbs.astro

@@ -0,0 +1,90 @@
+---
+import { maugliConfig } from '../config/maugli.config';
+import { LANGUAGES } from '../i18n/languages';
+// Универсальный импорт словарей по доступным языкам
+const dicts: Record<string, any> = {};
+for (const lang of LANGUAGES) {
+    try {
+        dicts[lang.code] = await import(`../i18n/${lang.code}.json`).then((m) => m.default);
+    } catch {}
+}
+
+export interface Props {
+    class?: string;
+}
+
+const { class: className = '' } = Astro.props;
+const lang: string = maugliConfig.defaultLang || 'en';
+const dict = dicts[lang] || dicts['en'] || {};
+const navLinks = maugliConfig.navLinks || [];
+const currentUrl = Astro.url.pathname;
+
+// Не показываем хлебные крошки на главной странице
+if (currentUrl === '/') {
+    return null;
+}
+
+// Универсальная логика: строим крошки по navLinks и сегментам
+const crumbs = [];
+// Логотип
+crumbs.push({
+    href: maugliConfig.brand.logoHref && maugliConfig.brand.logoHref.trim() ? maugliConfig.brand.logoHref : '/',
+    icon: maugliConfig.brand.logoBreadcrumbsLight
+});
+// Главная страница (navLinks[0])
+const mainNav = navLinks[0];
+if (mainNav) {
+    const mainLabel = mainNav.label || dict.nav?.[mainNav.key] || en.nav[mainNav.key] || 'Blog';
+    crumbs.push({ href: mainNav.href, label: mainLabel });
+}
+// Сегменты пути (кроме главной и последнего)
+const pathParts = currentUrl.split('/').filter(Boolean);
+let path = '';
+for (let i = 0; i < pathParts.length - 1; i++) {
+    path += '/' + pathParts[i];
+    const nav = navLinks.find((l) => l.href === path);
+    if (nav) {
+        const navLabel = nav.label || dict.nav?.[nav.key] || en.nav[nav.key] || nav.key;
+        crumbs.push({ href: nav.href, label: navLabel });
+    }
+}
+
+// Удаляем устаревшую логику с isCurrent
+
+const isTagsRoot = currentUrl === '/tags';
+const isTagPage = currentUrl.startsWith('/tags/') && pathParts.length === 1;
+---
+
+<div class:list={['flex items-center gap-3 mb-6', className]}>
+    {
+        crumbs.map((crumb, idx) =>
+            idx === 0 ? (
+                <a href={crumb.href} class="flex-shrink-0" target="_blank" rel="noopener noreferrer">
+                    <picture>
+                        <img src={crumb.icon} alt="Maugli" class="w-9 h-9" />
+                    </picture>
+                </a>
+            ) : (
+                <>
+                    <svg class="w-4 h-4 flex-shrink-0" style="color: var(--text-muted)" fill="currentColor" viewBox="0 0 20 20">
+                        <path
+                            fill-rule="evenodd"
+                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                            clip-rule="evenodd"
+                        />
+                    </svg>
+                    <a href={crumb.href} class="text-sm font-bold" style="color: var(--text-heading)" data-astro-reload>
+                        {crumb.label}
+                    </a>
+                </>
+            )
+        )
+    }
+    <!-- Добавляем стрелку в самом конце всегда -->
+    <svg class="w-4 h-4 flex-shrink-0" style="color: var(--text-muted)" fill="currentColor" viewBox="0 0 20 20">
+        <path
+            fill-rule="evenodd"
+            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+            clip-rule="evenodd"></path>
+    </svg>
+</div>

package/src/components/Button.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type AnchorProps = HTMLAttributes<'a'> & { type?: never };
+type ButtonProps = HTMLAttributes<'button'> & { href?: never };
+
+type Props = ButtonProps | AnchorProps;
+
+const { href, class: className, ...rest } = Astro.props;
+const baseClasses = 'inline-flex items-center justify-center px-9 py-4 font-serif leading-tight transition rounded-custom';
+const defaultClasses = 'text-main bg-main border border-main hover:bg-muted';
+const buttonClasses = className?.includes('!bg-') ? baseClasses : `${baseClasses} ${defaultClasses}`;
+---
+
+{
+    href ? (
+        <a href={href} class:list={[buttonClasses, className]} {...rest}>
+            <slot />
+        </a>
+    ) : (
+        <button class:list={[buttonClasses, 'cursor-pointer', className]} {...rest}>
+            <slot />
+        </button>
+    )
+}

package/src/components/Card.astro

@@ -0,0 +1,99 @@
+---
+import { maugliConfig } from '../config/maugli.config';
+import FormattedDate from './FormattedDate.astro';
+
+type Props = {
+    href: string;
+    title: string;
+    image?: any;
+    seo?: any;
+    publishDate?: Date;
+    excerpt?: string;
+    description?: string;
+    headingLevel?: 'h2' | 'h3';
+    isFeatured?: boolean;
+    class?: string;
+    type?: string; // добавлен тип
+};
+
+const { href, title, image, seo, publishDate, excerpt, description, headingLevel = 'h2', isFeatured = false, class: className, type } = Astro.props;
+
+const TitleTag = headingLevel;
+
+// Определяем изображение для карточки
+const cardImage =
+    seo?.image?.src ||
+    (image && typeof image.src === 'string' && image.src.length > 0 ? image.src : undefined) ||
+    (type === 'blog'
+        ? maugliConfig.defaultBlogImage
+        : type === 'project'
+          ? maugliConfig.defaultProjectImage
+          : type === 'product'
+            ? maugliConfig.defaultProductImage
+            : maugliConfig.seo.defaultImage);
+const cardImageAlt = seo?.image?.alt || image?.alt || title || 'Изображение';
+
+// Определяем контент для отображения
+const content = excerpt || description;
+---
+
+<article
+    class:list={[
+        'w-full border border-[var(--border-main)] rounded-custom overflow-hidden transition-all duration-300 relative group hover:-translate-y-1',
+        isFeatured ? 'bg-[var(--bg-muted)]' : 'bg-[var(--bg-main)]',
+        className
+    ]}
+>
+    <a href={href} class="block w-full h-full">
+        <!-- Изображение -->
+        <div class="w-full aspect-[1200/630] bg-[var(--bg-muted)] overflow-hidden relative">
+            <img
+                src={cardImage}
+                alt={cardImageAlt}
+                loading="lazy"
+                class="w-full h-full object-cover rounded-custom transition-transform duration-300 group-hover:scale-105"
+            />
+
+            <!-- Звездочка featured в правом верхнем углу -->
+            {
+                isFeatured && (
+                    <div class="absolute top-0 right-0 mr-4">
+                        <svg width="36" height="48" viewBox="0 0 36 48" fill="none" class="w-6 h-8">
+                            <path
+                                d="M36 40C36 44.4183 32.4183 48 28 48H8C3.58172 48 1.28855e-07 44.4183 0 40V0H36V40ZM18.8574 18.4238C18.4688 17.7781 17.5323 17.7782 17.1436 18.4238L13.6104 24.2939C13.4708 24.5258 13.2431 24.6918 12.9795 24.7529L6.30469 26.2988C5.57047 26.469 5.28131 27.3595 5.77539 27.9287L10.2666 33.1025C10.4439 33.307 10.5312 33.5751 10.5078 33.8447L9.91504 40.6709C9.84998 41.4217 10.6078 41.9716 11.3018 41.6777L17.6104 39.0049C17.8595 38.8995 18.1415 38.8994 18.3906 39.0049L24.6992 41.6777C25.3931 41.9714 26.151 41.4216 26.0859 40.6709L25.4932 33.8447C25.4698 33.5751 25.557 33.307 25.7344 33.1025L30.2266 27.9287C30.72 27.3596 30.4301 26.4691 29.6963 26.2988L23.0215 24.7529C22.7578 24.6918 22.5302 24.5258 22.3906 24.2939L18.8574 18.4238Z"
+                                fill="var(--brand-color)"
+                            />
+                        </svg>
+                    </div>
+                )
+            }
+            {/* Дата только для статей */}
+            {
+                type === 'blog' && publishDate && (
+                    <div class="absolute top-4 left-5 md:left-6 lg:left-7">
+                        <div class="px-2 py-1 bg-[var(--bg-main-40)] backdrop-blur-sm rounded-normal text-[11px] text-[var(--text-main)] leading-[1.4]">
+                            <FormattedDate date={publishDate} />
+                        </div>
+                    </div>
+                )
+            }
+        </div>
+
+        <!-- Контент -->
+        <div class="p-5 md:p-6 lg:p-7 flex flex-col gap-3 md:gap-4">
+            <TitleTag
+                class="text-xl md:text-xl lg:text-[22px] leading-[1.15] font-serif font-extrabold text-[var(--text-heading)] m-0 group-hover:text-[var(--brand-color)] transition-colors duration-300"
+            >
+                {title}
+            </TitleTag>
+
+            {content && <div class="text-sm md:text-[15px] opacity-60 leading-[1.5] text-[var(--text-main)] flex-grow">{content}</div>}
+        </div>
+    </a>
+</article>
+
+<style>
+    .group:hover {
+        box-shadow: var(--card-shadow);
+    }
+</style>