feat: add content feed with AJAX filtering and load more on front page

2026-04-03 01:13:09 +05:00
parent 82105c6f09
commit 8f1f001085
7 changed files with 484 additions and 1 deletions
@@ -720,3 +720,108 @@ body.sidebar-overlay::after {
    .clients-section { padding: 40px 0 48px; }
    .clients-section__grid { gap: 16px; }
 }
+
+/* ==========================================================================
+   Task 9: Content feed — filter bar + content grid (AJAX)
+   ========================================================================== */
+
+/* --- Filter bar --- */
+.filter-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 32px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid var(--color-gray-light);
+}
+
+.filter-bar__btn {
+    padding: 8px 20px;
+    font-size: 0.875rem;
+    background: none;
+    border: 1px solid var(--color-gray-light);
+    cursor: pointer;
+    color: var(--color-black);
+}
+
+.filter-bar__btn:hover {
+    border-color: var(--color-black);
+}
+
+.filter-bar__btn--active {
+    background: var(--color-black);
+    color: var(--color-white);
+    border-color: var(--color-black);
+    font-weight: 700;
+}
+
+/* --- Content grid --- */
+.content-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+    margin-bottom: 32px;
+}
+
+.content-card__link {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+
+.content-card__link:hover .content-card__title {
+    color: var(--color-primary);
+}
+
+.content-card__image {
+    aspect-ratio: 16 / 10;
+    overflow: hidden;
+    margin-bottom: 16px;
+    background: var(--color-gray-light);
+}
+
+.content-card__image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.content-card__placeholder {
+    width: 100%;
+    height: 100%;
+}
+
+.content-card__title {
+    font-size: 1.125rem;
+    margin: 0 0 8px;
+    line-height: 1.3;
+}
+
+.content-card__excerpt {
+    font-size: 0.875rem;
+    color: var(--color-gray-text);
+    margin: 0 0 12px;
+}
+
+.content-card__meta {
+    font-size: 0.75rem;
+    color: var(--color-gray-text);
+}
+
+.content-feed__more {
+    text-align: center;
+    margin-bottom: 60px;
+}
+
+/* --- Responsive breakpoints --- */
+@media (max-width: 1024px) {
+    .content-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 767px) {
+    .content-grid {
+        grid-template-columns: 1fr;
+    }
+}