category field added

implemented ctegory logic, ditional pages added

backend/package.json

@@ -23,7 +23,8 @@
     "dev:docker": "nest start --watch",
     "dev:local": "cp -f .env.local .env && nest start --watch",
     "dev:reset-env": "cp -f .env.docker .env",
-    "seed:admin": "ts-node scripts/seed-admin.ts"
+    "seed:admin": "ts-node scripts/seed-admin.ts",
+    "seed:categories": "ts-node scripts/seed-categories.ts"
   },
   "dependencies": {
     "@nestjs/axios": "^4.0.1",

backend/scripts/seed-categories.ts

@@ -0,0 +1,65 @@
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from '../src/app.module';
+import { getRepositoryToken } from '@nestjs/typeorm';
+import { Category } from '../src/modules/entities';
+
+async function bootstrap() {
+  const app = await NestFactory.createApplicationContext(AppModule);
+  
+  try {
+    const categoryRepository = app.get(getRepositoryToken(Category));
+    
+    // Define categories with Macedonian names and English slugs
+    const categories = [
+      {
+        name: 'Спорт',
+        slug: 'sport',
+        description: 'Спортски вести и анализи',
+        order: 1,
+      },
+      {
+        name: 'Уметност',
+        slug: 'art',
+        description: 'Уметност, култура и забава',
+        order: 2,
+      },
+      {
+        name: 'Наука',
+        slug: 'science',
+        description: 'Научни откритија и технологија',
+        order: 3,
+      },
+    ];
+
+    console.log('Seeding categories...');
+    
+    for (const categoryData of categories) {
+      // Check if category already exists
+      const existingCategory = await categoryRepository.findOne({
+        where: { slug: categoryData.slug },
+      });
+
+      if (existingCategory) {
+        console.log(`Category "${categoryData.name}" (${categoryData.slug}) already exists`);
+      } else {
+        const category = categoryRepository.create(categoryData);
+        await categoryRepository.save(category);
+        console.log(`Created category: "${categoryData.name}" (${categoryData.slug})`);
+      }
+    }
+
+    console.log('\n✅ Category seeding completed!');
+    console.log('Categories available:');
+    const allCategories = await categoryRepository.find({ order: { order: 'ASC' } });
+    allCategories.forEach((cat: Category) => {
+      console.log(`  • ${cat.name} (${cat.slug}) - ${cat.description || 'No description'}`);
+    });
+
+  } catch (error) {
+    console.error('Error seeding categories:', error);
+  } finally {
+    await app.close();
+  }
+}
+
+bootstrap();

backend/src/modules/articles.controller.ts

@@ -40,6 +40,12 @@ export class ArticlesController {
     return this.articlesService.findAll(dto);
   }
 
+  @Get('hero')
+  @Public()
+  findHero() {
+    return this.articlesService.findHeroArticle();
+  }
+
   @Get(':id')
   @Public()
   findOne(@Param('id') id: string) {

backend/src/modules/articles.dto.ts

@@ -6,7 +6,6 @@ import {
   IsUUID,
   IsNumber,
   IsBoolean,
-  IsDate,
 } from 'class-validator';
 import {
   ArticleStatus,
@@ -48,6 +47,10 @@ export class CreateArticleDto {
   @IsString()
   strapiId?: string;
 
+  @IsOptional()
+  @IsBoolean()
+  isHero?: boolean;
+
   @IsOptional()
   @IsUUID()
   authorId?: string;
@@ -135,6 +138,10 @@ export class UpdateArticleDto {
   @IsString()
   strapiId?: string;
 
+  @IsOptional()
+  @IsBoolean()
+  isHero?: boolean;
+
   @IsOptional()
   @IsUUID()
   authorId?: string;
@@ -217,6 +224,35 @@ export class FindArticlesDto {
   limit?: number;
 }
 
+export class FindLiveBlogsDto {
+  @IsOptional()
+  @IsString()
+  category?: string;
+
+  @IsOptional()
+  @IsString()
+  author?: string;
+
+  @IsOptional()
+  @IsString()
+  status?: string;
+
+  @IsOptional()
+  @IsBoolean()
+  isPinned?: boolean;
+
+  @IsOptional()
+  @IsString()
+  search?: string;
+
+  @IsOptional()
+  @IsNumber()
+  page?: number;
+
+  @IsOptional()
+  limit?: number;
+}
+
 export class CreateLiveBlogDto {
   @IsString()
   title: string;
@@ -336,20 +372,16 @@ export class CreateLiveBlogUpdateDto {
   content: string;
 
   @IsOptional()
-  @IsBoolean()
-  isPinned?: boolean;
-
-  @IsOptional()
-  @IsUUID()
-  authorId?: string;
-
-  @IsOptional()
-  @IsDate()
-  scheduledAt?: Date;
+  @IsString()
+  image?: string;
 
   @IsOptional()
   @IsString()
-  strapiId?: string;
+  videoUrl?: string;
+
+  @IsOptional()
+  @IsString()
+  authorName?: string;
 }
 
 export class UpdateLiveBlogUpdateDto {
@@ -358,47 +390,18 @@ export class UpdateLiveBlogUpdateDto {
   content?: string;
 
   @IsOptional()
-  @IsBoolean()
-  isPinned?: boolean;
-
-  @IsOptional()
-  @IsUUID()
-  authorId?: string;
-
-  @IsOptional()
-  @IsDate()
-  scheduledAt?: Date;
+  @IsString()
+  image?: string;
 
   @IsOptional()
   @IsString()
-  strapiId?: string;
-}
-
-export class FindLiveBlogsDto {
-  @IsOptional()
-  @IsString()
-  category?: string;
+  videoUrl?: string;
 
   @IsOptional()
   @IsString()
-  author?: string;
-
-  @IsOptional()
-  @IsString()
-  status?: string;
+  authorName?: string;
 
   @IsOptional()
   @IsBoolean()
   isPinned?: boolean;
-
-  @IsOptional()
-  @IsString()
-  search?: string;
-
-  @IsOptional()
-  @IsNumber()
-  page?: number;
-
-  @IsOptional()
-  limit?: number;
 }

backend/src/modules/articles.service.ts

@@ -293,4 +293,15 @@ export class ArticlesService {
     await this.articleRepository.remove(article);
     this.logger.log(`Successfully deleted article with strapiId: ${strapiId}`);
   }
+
+  async findHeroArticle(): Promise<Article | null> {
+    return this.articleRepository.findOne({
+      where: {
+        isHero: true,
+        status: ArticleStatus.PUBLISHED,
+      },
+      relations: ['author', 'category'],
+      order: { createdAt: 'DESC' },
+    });
+  }
 }

backend/src/modules/entities.ts

@@ -254,6 +254,9 @@ export class Article {
   @Column({ default: 0 })
   telegramShares: number;
 
+  @Column({ default: false })
+  isHero: boolean;
+
   @CreateDateColumn()
   createdAt: Date;
 

backend/src/modules/strapi.module.ts

@@ -1,13 +1,16 @@
 import { Module, forwardRef } from '@nestjs/common';
 import { HttpModule } from '@nestjs/axios';
+import { TypeOrmModule } from '@nestjs/typeorm';
 import { StrapiService } from './strapi.service';
 import { StrapiController } from './strapi.controller';
 import { ArticlesModule } from './articles.module';
 import { LiveBlogModule } from './live-blog.module';
+import { Category } from './entities';
 
 @Module({
   imports: [
     HttpModule,
+    TypeOrmModule.forFeature([Category]),
     forwardRef(() => ArticlesModule),
     forwardRef(() => LiveBlogModule),
   ],

backend/src/modules/strapi.service.ts

@@ -1,6 +1,8 @@
 import { Injectable, Logger, Inject, forwardRef } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { HttpService } from '@nestjs/axios';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
 import { lastValueFrom } from 'rxjs';
 import { ArticlesService } from './articles.service';
 import { LiveBlogService } from './live-blog.service';
@@ -11,6 +13,7 @@ import {
   ImagePosition,
   ImageSize,
   VideoPosition,
+  Category,
 } from './entities';
 
 interface StrapiImage {
@@ -45,6 +48,7 @@ interface StrapiArticle {
   videoUrl?: string;
   videoPosition?: string;
   videoCaption?: string;
+  category?: string;
 }
 
 interface StrapiLiveBlog {
@@ -64,6 +68,7 @@ interface StrapiLiveBlog {
   videoUrl?: string;
   videoPosition?: string;
   videoCaption?: string;
+  category?: string;
 }
 
 interface StrapiResponse<T> {
@@ -91,6 +96,8 @@ export class StrapiService {
     private readonly articlesService: ArticlesService,
     @Inject(forwardRef(() => LiveBlogService))
     private readonly liveBlogService: LiveBlogService,
+    @InjectRepository(Category)
+    private readonly categoryRepository: Repository<Category>,
   ) {
     this.strapiUrl =
       this.configService.get<string>('STRAPI_URL') || 'http://localhost:1337';
@@ -99,13 +106,51 @@ export class StrapiService {
   }
 
   private getHeaders() {
-    const headers: Record<string, string> = {
-      'Content-Type': 'application/json',
+    return {
+      Authorization: `Bearer ${this.strapiApiToken}`,
     };
-    if (this.strapiApiToken) {
-      headers['Authorization'] = `Bearer ${this.strapiApiToken}`;
+  }
+
+  private async findOrCreateCategory(
+    categorySlug: string,
+  ): Promise<Category | null> {
+    if (!categorySlug) {
+      return null;
     }
-    return headers;
+
+    // Map CMS category slugs to Macedonian display names
+    const categoryMap: Record<string, { name: string; description: string }> = {
+      sport: { name: 'Спорт', description: 'Спортски вести и анализи' },
+      art: { name: 'Уметност', description: 'Уметност, култура и забава' },
+      science: { name: 'Наука', description: 'Научни откритија и технологија' },
+    };
+
+    const categoryInfo = categoryMap[categorySlug];
+    if (!categoryInfo) {
+      this.logger.warn(`Unknown category slug: ${categorySlug}`);
+      return null;
+    }
+
+    // Try to find existing category by slug
+    let category = await this.categoryRepository.findOne({
+      where: { slug: categorySlug },
+    });
+
+    if (!category) {
+      // Create new category
+      category = this.categoryRepository.create({
+        name: categoryInfo.name,
+        slug: categorySlug,
+        description: categoryInfo.description,
+        order: 0,
+      });
+      category = await this.categoryRepository.save(category);
+      this.logger.log(
+        `Created new category: ${categorySlug} (${categoryInfo.name})`,
+      );
+    }
+
+    return category;
   }
 
   private extractImageUrl(strapiArticle: StrapiArticle): string | undefined {
@@ -181,6 +226,17 @@ export class StrapiService {
       for (const strapiArticle of strapiArticles) {
         const imageUrl = this.extractImageUrl(strapiArticle);
 
+        // Find or create category
+        let categoryId: string | undefined;
+        if (strapiArticle.category) {
+          const category = await this.findOrCreateCategory(
+            strapiArticle.category,
+          );
+          if (category) {
+            categoryId = category.id;
+          }
+        }
+
         const articleData: Partial<CreateArticleDto> = {
           title: strapiArticle.title,
           excerpt: strapiArticle.description,
@@ -198,6 +254,7 @@ export class StrapiService {
           videoPosition: (strapiArticle.videoPosition ||
             'inline') as VideoPosition,
           videoCaption: strapiArticle.videoCaption || '',
+          categoryId,
         };
 
         await this.articlesService.syncFromStrapi(
@@ -256,6 +313,17 @@ export class StrapiService {
 
       const imageUrl = this.extractImageUrl(strapiArticle);
 
+      // Find or create category
+      let categoryId: string | undefined;
+      if (strapiArticle.category) {
+        const category = await this.findOrCreateCategory(
+          strapiArticle.category,
+        );
+        if (category) {
+          categoryId = category.id;
+        }
+      }
+
       const articleData: Partial<CreateArticleDto> = {
         title: strapiArticle.title,
         excerpt: strapiArticle.description,
@@ -270,6 +338,7 @@ export class StrapiService {
         videoPosition: (strapiArticle.videoPosition ||
           'inline') as VideoPosition,
         videoCaption: strapiArticle.videoCaption || '',
+        categoryId,
       };
 
       await this.articlesService.syncFromStrapi(
@@ -333,6 +402,17 @@ export class StrapiService {
       for (const strapiLiveBlog of strapiLiveBlogs) {
         const imageUrl = this.extractLiveBlogImageUrl(strapiLiveBlog);
 
+        // Find or create category
+        let categoryId: string | undefined;
+        if (strapiLiveBlog.category) {
+          const category = await this.findOrCreateCategory(
+            strapiLiveBlog.category,
+          );
+          if (category) {
+            categoryId = category.id;
+          }
+        }
+
         const liveBlogData: Partial<CreateLiveBlogDto> = {
           title: strapiLiveBlog.title,
           description: strapiLiveBlog.description,
@@ -346,6 +426,7 @@ export class StrapiService {
           videoPosition: (strapiLiveBlog.videoPosition ||
             'inline') as VideoPosition,
           videoCaption: strapiLiveBlog.videoCaption || '',
+          categoryId,
         };
 
         await this.liveBlogService.syncFromStrapi(
@@ -400,6 +481,17 @@ export class StrapiService {
 
       const imageUrl = this.extractLiveBlogImageUrl(strapiLiveBlog);
 
+      // Find or create category
+      let categoryId: string | undefined;
+      if (strapiLiveBlog.category) {
+        const category = await this.findOrCreateCategory(
+          strapiLiveBlog.category,
+        );
+        if (category) {
+          categoryId = category.id;
+        }
+      }
+
       const liveBlogData: Partial<CreateLiveBlogDto> = {
         title: strapiLiveBlog.title,
         description: strapiLiveBlog.description,
@@ -412,6 +504,7 @@ export class StrapiService {
         videoPosition: (strapiLiveBlog.videoPosition ||
           'inline') as VideoPosition,
         videoCaption: strapiLiveBlog.videoCaption || '',
+        categoryId,
       };
 
       await this.liveBlogService.syncFromStrapi(

cms/cms/src/api/article/content-types/article/schema.json

@@ -63,6 +63,12 @@
     "videoCaption": {
       "type": "string",
       "default": ""
+    },
+    "category": {
+      "type": "enumeration",
+      "enum": ["sport", "art", "science"],
+      "default": "sport",
+      "required": true
     }
   }
 }

docker-compose.yml

@@ -28,7 +28,7 @@ services:
       context: ./backend
       dockerfile: Dockerfile
     container_name: placebo-backend
-     environment:
+    environment:
        NODE_ENV: production
        DATABASE_TYPE: postgres
        DATABASE_HOST: postgres

frontend/src/components/home/HeroArticle.tsx

@@ -0,0 +1,150 @@
+import { useQuery } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { fetchHeroArticle } from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Calendar, User, ArrowRight } from 'lucide-react';
+
+export function HeroArticle() {
+  const { data: article, isLoading, error } = useQuery({
+    queryKey: ['hero-article'],
+    queryFn: fetchHeroArticle,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="rounded-xl border bg-card p-8 animate-pulse">
+        <div className="h-8 bg-muted rounded w-3/4 mb-4"></div>
+        <div className="h-4 bg-muted rounded w-1/2 mb-6"></div>
+        <div className="h-64 bg-muted rounded mb-6"></div>
+        <div className="h-4 bg-muted rounded w-full mb-2"></div>
+        <div className="h-4 bg-muted rounded w-5/6 mb-6"></div>
+        <div className="h-10 bg-muted rounded w-32"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-xl border bg-card p-8 text-center">
+        <div className="text-red-500 mb-4">Error loading hero article</div>
+        <Button variant="outline" onClick={() => window.location.reload()}>
+          Try Again
+        </Button>
+      </div>
+    );
+  }
+
+  if (!article) {
+    return (
+      <div className="rounded-xl border bg-card p-8 text-center">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-6">
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-primary">
+            <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+            <polyline points="14 2 14 8 20 8" />
+            <line x1="16" x2="8" y1="13" y2="13" />
+            <line x1="16" x2="8" y1="17" y2="17" />
+            <line x1="10" x2="8" y1="9" y2="9" />
+          </svg>
+        </div>
+        <h2 className="text-2xl font-bold mb-4">No Hero Article Set</h2>
+        <p className="text-muted-foreground mb-6">
+          Mark an article as "Hero" in the admin panel to feature it here.
+        </p>
+        <div className="text-sm text-muted-foreground">
+          This space will showcase your most important story.
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-xl border bg-card overflow-hidden hover:shadow-lg transition-shadow duration-300">
+      {/* Featured Image */}
+      {article.featuredImage && (
+        <div className="relative h-64 md:h-80 overflow-hidden">
+          <img
+            src={article.featuredImage}
+            alt={article.title}
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+          <div className="absolute bottom-4 left-6 right-6">
+            <span className="inline-block px-3 py-1 bg-primary text-primary-foreground text-xs font-semibold rounded-full mb-2">
+              Featured Story
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Content */}
+      <div className="p-6 md:p-8">
+        <h2 className="text-2xl md:text-3xl font-bold mb-4 line-clamp-2">
+          {article.title}
+        </h2>
+        
+        {/* Meta Information */}
+        <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground mb-6">
+          <div className="flex items-center gap-1">
+            <Calendar className="h-4 w-4" />
+            <span>
+              {new Date(article.createdAt).toLocaleDateString('mk-MK', {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+              })}
+            </span>
+          </div>
+          
+          {article.author && (
+            <div className="flex items-center gap-1">
+              <User className="h-4 w-4" />
+              <span>{article.author.name}</span>
+            </div>
+          )}
+          
+          <div className="flex items-center gap-1">
+            <span>{article.views} views</span>
+          </div>
+        </div>
+
+        {/* Excerpt */}
+        {article.excerpt && (
+          <p className="text-muted-foreground mb-6 line-clamp-3">
+            {article.excerpt}
+          </p>
+        )}
+
+        {/* Tags */}
+        {article.tags && article.tags.length > 0 && (
+          <div className="flex flex-wrap gap-2 mb-6">
+            {article.tags.map((tag) => (
+              <span
+                key={tag}
+                className="px-3 py-1 text-xs rounded-full bg-secondary text-secondary-foreground"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Read More Button */}
+        <div className="flex items-center justify-between">
+          <Link to={`/articles/${article.id}`}>
+            <Button className="gap-2">
+              Read Full Story
+              <ArrowRight className="h-4 w-4" />
+            </Button>
+          </Link>
+          
+          {/* Social shares count */}
+          <div className="text-sm text-muted-foreground">
+            <span className="font-medium">
+              {article.facebookShares + article.twitterShares + article.whatsappShares + article.telegramShares}
+            </span> shares
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/home/LatestArticlesGrid.tsx

@@ -0,0 +1,147 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import * as api from '@/lib/api'
+import { SocialShareButtons } from '@/components/features/social-share'
+
+export function LatestArticlesGrid() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['latest-articles'],
+    queryFn: () => api.fetchLatestArticles(12),
+  })
+
+  if (isLoading) {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        {Array.from({ length: 12 }).map((_, i) => (
+          <div key={i} className="p-6 rounded-xl border bg-card animate-pulse">
+            <div className="h-48 bg-muted rounded-lg mb-4"></div>
+            <div className="h-4 bg-muted rounded mb-2"></div>
+            <div className="h-4 bg-muted rounded mb-2 w-3/4"></div>
+            <div className="h-3 bg-muted rounded mb-4 w-1/2"></div>
+            <div className="flex justify-between">
+              <div className="h-3 bg-muted rounded w-1/4"></div>
+              <div className="h-3 bg-muted rounded w-1/4"></div>
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-xl border border-dashed border-red-200 bg-red-50 p-8 text-center">
+        <div className="text-red-500 mb-2">Грешка при вчитување на статии</div>
+        <p className="text-sm text-red-600">Обидете се повторно</p>
+      </div>
+    )
+  }
+
+  const articles = data?.data || []
+
+  if (articles.length === 0) {
+    return (
+      <div className="rounded-xl border border-dashed border-muted p-8 text-center">
+        <div className="text-muted-foreground mb-2">Нема објавени статии</div>
+        <p className="text-sm text-muted-foreground">Проверете подоцна</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-2xl font-bold">Најнови статии</h2>
+        <Link
+          to="/archive"
+          className="text-sm text-primary hover:underline flex items-center gap-1"
+        >
+          Види сите
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M5 12h14" />
+            <path d="m12 5 7 7-7 7" />
+          </svg>
+        </Link>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        {articles.map((article) => (
+          <div
+            key={article.id}
+            className="group p-6 rounded-xl border bg-card hover:shadow-lg transition-all duration-300 hover:-translate-y-1"
+          >
+            <Link
+              to={`/articles/${article.id}`}
+              className="block mb-4"
+            >
+              {article.featuredImage ? (
+                <div className="relative h-48 overflow-hidden rounded-lg mb-4">
+                  <img
+                    src={article.featuredImage}
+                    alt={article.title}
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                </div>
+              ) : (
+                <div className="h-48 bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg mb-4 flex items-center justify-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" className="text-primary/30">
+                    <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2" />
+                    <path d="M18 14h-8" />
+                    <path d="M15 18h-5" />
+                    <path d="M10 6h8v4h-8V6Z" />
+                  </svg>
+                </div>
+              )}
+
+              <h3 className="text-lg font-semibold mb-2 line-clamp-2 group-hover:text-primary transition-colors">
+                {article.title}
+              </h3>
+              
+              {article.excerpt && (
+                <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
+                  {article.excerpt}
+                </p>
+              )}
+            </Link>
+            
+            <div className="space-y-4">
+              <div className="flex items-center justify-between text-sm text-muted-foreground">
+                <div className="flex items-center space-x-4">
+                  <span>
+                    {new Date(article.createdAt).toLocaleDateString('mk-MK', {
+                      day: 'numeric',
+                      month: 'short',
+                      year: 'numeric',
+                    })}
+                  </span>
+                  <span>•</span>
+                  <span>{article.views} прегледи</span>
+                </div>
+                
+                {article.category && (
+                  <Link
+                    to={`/${article.category.slug}`}
+                    className="px-2 py-1 text-xs rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
+                  >
+                    {article.category.name}
+                  </Link>
+                )}
+              </div>
+              
+              <SocialShareButtons
+                articleId={article.id}
+                title={article.title}
+                url={`${window.location.origin}/articles/${article.id}`}
+                excerpt={article.excerpt}
+                image={article.featuredImage}
+                tags={article.tags}
+                variant="compact"
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

frontend/src/components/home/PinnedLiveBlogsSidebar.tsx

@@ -0,0 +1,193 @@
+import { useQuery } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { fetchPinnedLiveBlogs } from '@/lib/api';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Calendar, Eye, MessageSquare, Pin } from 'lucide-react';
+
+export function PinnedLiveBlogsSidebar() {
+  const { data: liveBlogs, isLoading, error } = useQuery({
+    queryKey: ['pinned-live-blogs'],
+    queryFn: fetchPinnedLiveBlogs,
+  });
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'live':
+        return (
+          <Badge variant="default" className="bg-green-500 hover:bg-green-600">
+            LIVE
+          </Badge>
+        );
+      case 'ended':
+        return (
+          <Badge variant="outline" className="border-gray-400 text-gray-400">
+            ENDED
+          </Badge>
+        );
+      case 'archived':
+        return (
+          <Badge variant="outline" className="border-gray-500 text-gray-500">
+            ARCHIVED
+          </Badge>
+        );
+      default:
+        return (
+          <Badge variant="outline">DRAFT</Badge>
+        );
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('mk-MK', {
+      day: 'numeric',
+      month: 'short',
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="rounded-xl border bg-card p-6">
+        <div className="flex items-center gap-2 mb-6">
+          <Pin className="h-5 w-5 text-primary" />
+          <h3 className="text-lg font-semibold">Pinned Live Blogs</h3>
+        </div>
+        <div className="space-y-4">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="animate-pulse">
+              <div className="h-4 bg-muted rounded w-3/4 mb-2"></div>
+              <div className="h-3 bg-muted rounded w-1/2"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-xl border bg-card p-6">
+        <div className="flex items-center gap-2 mb-6">
+          <Pin className="h-5 w-5 text-primary" />
+          <h3 className="text-lg font-semibold">Pinned Live Blogs</h3>
+        </div>
+        <div className="text-center py-4">
+          <div className="text-red-500 text-sm mb-2">Error loading live blogs</div>
+          <Button variant="outline" size="sm" onClick={() => window.location.reload()}>
+            Retry
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!liveBlogs || liveBlogs.length === 0) {
+    return (
+      <div className="rounded-xl border bg-card p-6">
+        <div className="flex items-center gap-2 mb-6">
+          <Pin className="h-5 w-5 text-primary" />
+          <h3 className="text-lg font-semibold">Pinned Live Blogs</h3>
+        </div>
+        <div className="text-center py-6">
+          <div className="text-muted-foreground mb-2">No pinned live blogs</div>
+          <p className="text-sm text-muted-foreground">
+            Pin live blogs from the admin panel to feature them here.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-xl border bg-card p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-2">
+          <Pin className="h-5 w-5 text-primary" />
+          <h3 className="text-lg font-semibold">Pinned Live Blogs</h3>
+        </div>
+        <Badge variant="outline" className="text-xs">
+          {liveBlogs.length} pinned
+        </Badge>
+      </div>
+
+      {/* Live Blogs List */}
+      <div className="space-y-4">
+        {liveBlogs.map((liveBlog) => (
+          <Link
+            key={liveBlog.id}
+            to={`/live-blogs/${liveBlog.id}`}
+            className="block group"
+          >
+            <div className="p-4 rounded-lg border hover:border-primary/50 hover:bg-accent/50 transition-colors group-hover:shadow-sm">
+              {/* Title and Status */}
+              <div className="flex items-start justify-between mb-2">
+                <h4 className="font-medium line-clamp-2 group-hover:text-primary transition-colors">
+                  {liveBlog.title}
+                </h4>
+                {getStatusBadge(liveBlog.status)}
+              </div>
+
+              {/* Description */}
+              {liveBlog.description && (
+                <p className="text-sm text-muted-foreground mb-3 line-clamp-2">
+                  {liveBlog.description}
+                </p>
+              )}
+
+              {/* Meta Information */}
+              <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+                <div className="flex items-center gap-1">
+                  <Calendar className="h-3 w-3" />
+                  <span>{formatDate(liveBlog.createdAt)}</span>
+                </div>
+
+                <div className="flex items-center gap-1">
+                  <Eye className="h-3 w-3" />
+                  <span>{liveBlog.viewCount} views</span>
+                </div>
+
+                {liveBlog.updates && liveBlog.updates.length > 0 && (
+                  <div className="flex items-center gap-1">
+                    <MessageSquare className="h-3 w-3" />
+                    <span>{liveBlog.updates.length} updates</span>
+                  </div>
+                )}
+
+                {liveBlog.author && (
+                  <div className="text-xs text-muted-foreground">
+                    by {liveBlog.author.name}
+                  </div>
+                )}
+              </div>
+
+              {/* Featured Image (small) */}
+              {liveBlog.featuredImage && (
+                <div className="mt-3">
+                  <div className="relative h-20 rounded-md overflow-hidden">
+                    <img
+                      src={liveBlog.featuredImage}
+                      alt={liveBlog.title}
+                      className="w-full h-full object-cover"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      {/* View All Link */}
+      <div className="mt-6 pt-6 border-t">
+        <Link to="/live-blogs" className="block">
+          <Button variant="outline" className="w-full justify-center">
+            View All Live Blogs
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+}

frontend/src/components/layout/Header.tsx

@@ -1,44 +1,74 @@
 
+import { useState } from 'react';
 import { Link } from '@tanstack/react-router';
 import { useAuth } from '../../contexts/AuthContext';
 import { Button } from '../ui/button';
+import { ThemeToggle } from './ThemeToggle';
+import { Menu, X } from 'lucide-react';
 
 export function Header() {
   const { user, logout, isAuthenticated, hasRole } = useAuth();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+
+  const closeMobileMenu = () => {
+    setIsMobileMenuOpen(false);
+  };
+
+  const navLinks = [
+    { to: '/', label: 'Почетна' },
+    { to: '/sport', label: 'Спорт' },
+    { to: '/art', label: 'Уметност' },
+    { to: '/science', label: 'Наука' },
+    { to: '/archive', label: 'Архива' },
+    { to: '/live-blogs', label: 'Live' },
+  ];
+
+  const adminLinks = [
+    { to: '/admin', label: 'Admin' },
+    { to: '/admin/live-blogs/create', label: '+ New Live Blog' },
+  ];
 
   return (
-    <header className="border-b">
+    <header className="border-b sticky top-0 z-50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container mx-auto max-w-6xl px-4 py-4">
         <div className="flex items-center justify-between">
-          <h1 className="text-3xl font-bold">
+          <h1 className="text-2xl md:text-3xl font-bold">
             <Link to="/" className="hover:underline">Placebo.mk</Link>
           </h1>
           
-          <nav className="flex items-center gap-4">
-            <Link to="/" className="text-sm font-medium hover:underline">
-              Home
-            </Link>
-            <Link to="/articles" className="text-sm font-medium hover:underline">
-              Articles
-            </Link>
-            <Link to="/live-blogs" className="text-sm font-medium hover:underline">
-              Live
-            </Link>
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center gap-4">
+            {navLinks.map((link) => (
+              <Link
+                key={link.to}
+                to={link.to}
+                className="text-sm font-medium hover:underline transition-colors"
+              >
+                {link.label}
+              </Link>
+            ))}
             
             {isAuthenticated ? (
               <>
                 {(hasRole('admin') || hasRole('contributor')) && (
                   <>
-                    <Link to="/admin" className="text-sm font-medium hover:underline text-primary">
-                      Admin
-                    </Link>
-                    <Link to="/admin/live-blogs/create" className="text-sm font-medium hover:underline text-primary">
-                      + New Live Blog
-                    </Link>
+                    {adminLinks.map((link) => (
+                      <Link
+                        key={link.to}
+                        to={link.to}
+                        className="text-sm font-medium hover:underline text-primary transition-colors"
+                      >
+                        {link.label}
+                      </Link>
+                    ))}
                   </>
                 )}
                 
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 ml-2">
                   <span className="text-sm text-muted-foreground">
                     {user?.username}
                   </span>
@@ -53,12 +83,97 @@ export function Header() {
                 </div>
               </>
             ) : (
-              <Link to="/auth" className="text-sm font-medium hover:underline text-primary">
+              <Link to="/auth" className="text-sm font-medium hover:underline text-primary transition-colors">
                 Login / Register
               </Link>
             )}
+            
+            <ThemeToggle />
           </nav>
+
+          {/* Mobile Menu Button */}
+          <div className="flex items-center gap-2 md:hidden">
+            <ThemeToggle />
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={toggleMobileMenu}
+              className="h-9 w-9"
+              aria-label={isMobileMenuOpen ? 'Close menu' : 'Open menu'}
+            >
+              {isMobileMenuOpen ? (
+                <X className="h-5 w-5" />
+              ) : (
+                <Menu className="h-5 w-5" />
+              )}
+            </Button>
+          </div>
         </div>
+
+        {/* Mobile Navigation */}
+        {isMobileMenuOpen && (
+          <div className="md:hidden mt-4 pb-4 border-t pt-4 animate-in slide-in-from-top-2">
+            <div className="flex flex-col gap-3">
+              {navLinks.map((link) => (
+                <Link
+                  key={link.to}
+                  to={link.to}
+                  className="text-sm font-medium hover:underline py-2 transition-colors"
+                  onClick={closeMobileMenu}
+                >
+                  {link.label}
+                </Link>
+              ))}
+              
+              {isAuthenticated ? (
+                <>
+                  {(hasRole('admin') || hasRole('contributor')) && (
+                    <div className="border-t pt-3 mt-2">
+                      <p className="text-xs text-muted-foreground mb-2">Admin</p>
+                      {adminLinks.map((link) => (
+                        <Link
+                          key={link.to}
+                          to={link.to}
+                          className="text-sm font-medium hover:underline text-primary py-2 block transition-colors"
+                          onClick={closeMobileMenu}
+                        >
+                          {link.label}
+                        </Link>
+                      ))}
+                    </div>
+                  )}
+                  
+                  <div className="border-t pt-3 mt-2">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm text-muted-foreground">
+                        Logged in as: {user?.username}
+                      </span>
+                      <Button 
+                        variant="outline" 
+                        size="sm"
+                        onClick={() => {
+                          logout();
+                          closeMobileMenu();
+                        }}
+                        className="text-xs"
+                      >
+                        Logout
+                      </Button>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <Link 
+                  to="/auth" 
+                  className="text-sm font-medium hover:underline text-primary py-2 transition-colors"
+                  onClick={closeMobileMenu}
+                >
+                  Login / Register
+                </Link>
+              )}
+            </div>
+          </div>
+        )}
       </div>
     </header>
   );

frontend/src/components/layout/ThemeToggle.tsx

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Sun, Moon } from 'lucide-react';
+import { getInitialTheme, toggleTheme, watchSystemTheme } from '@/lib/theme';
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState<'light' | 'dark'>(getInitialTheme);
+
+  useEffect(() => {
+    // Watch for system theme changes
+    const cleanup = watchSystemTheme((newTheme) => {
+      setTheme(newTheme);
+    });
+    
+    return cleanup;
+  }, []);
+
+  const handleToggle = () => {
+    const newTheme = toggleTheme();
+    setTheme(newTheme);
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={handleToggle}
+      className="h-9 w-9"
+      aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+    >
+      {theme === 'light' ? (
+        <Moon className="h-4 w-4" />
+      ) : (
+        <Sun className="h-4 w-4" />
+      )}
+    </Button>
+  );
+}

frontend/src/components/routes/AdminDashboardComponent.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useLiveBlogs } from '@/queries/live-blogs';
-import { useArticles, useDeleteArticle, useArchiveArticle, usePublishArticle } from '@/queries/articles';
+import { useArticles, useDeleteArticle, useArchiveArticle, usePublishArticle, useUpdateArticle } from '@/queries/articles';
 import { useDeleteLiveBlog, useArchiveLiveBlog, usePublishLiveBlog } from '@/queries/live-blogs';
 import { Link } from '@tanstack/react-router';
 import { Button } from '@/components/ui/button';
@@ -35,6 +35,7 @@ export function AdminDashboardComponent() {
   const archiveLiveBlogMutation = useArchiveLiveBlog();
   const publishArticleMutation = usePublishArticle();
   const publishLiveBlogMutation = usePublishLiveBlog();
+  const updateArticleMutation = useUpdateArticle();
   
   const liveBlogs = liveBlogsData?.data || [];
   const articles = articlesData?.data || [];
@@ -102,6 +103,20 @@ export function AdminDashboardComponent() {
     setItemToDelete(null);
   };
 
+  const handleSetHero = async (articleId: string, isHero: boolean) => {
+    setIsProcessing(true);
+    try {
+      await updateArticleMutation.mutateAsync({
+        id: articleId,
+        dto: { isHero }
+      });
+    } catch (error) {
+      console.error('Failed to update hero status:', error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'published':
@@ -304,18 +319,23 @@ export function AdminDashboardComponent() {
                   >
                     <div className="flex items-start justify-between">
                       <div className="flex-1">
-                        <div className="flex items-center gap-2 mb-1">
-                           <Link
-                            to="/articles/$id"
-                            params={{ id: article.id }}
-                            className="font-medium hover:text-primary hover:underline"
-                          >
-                            {article.title}
-                          </Link>
-                          <Badge variant="outline" className={getStatusColor(article.status)}>
-                            {getStatusText(article.status)}
-                          </Badge>
-                        </div>
+                         <div className="flex items-center gap-2 mb-1">
+                            <Link
+                             to="/articles/$id"
+                             params={{ id: article.id }}
+                             className="font-medium hover:text-primary hover:underline"
+                           >
+                             {article.title}
+                           </Link>
+                           <Badge variant="outline" className={getStatusColor(article.status)}>
+                             {getStatusText(article.status)}
+                           </Badge>
+                           {article.isHero && (
+                             <Badge variant="default" className="bg-yellow-500 hover:bg-yellow-600">
+                               ★ Hero
+                             </Badge>
+                           )}
+                         </div>
                         <div className="flex items-center gap-4 text-sm text-muted-foreground">
                           <span>Слаг: {article.slug}</span>
                           <span>•</span>
@@ -336,43 +356,51 @@ export function AdminDashboardComponent() {
                           </p>
                         )}
                       </div>
-                      <div className="flex gap-2 ml-4">
-                         <Button asChild size="sm" variant="outline">
-                          <Link to="/articles/$id" params={{ id: article.id }}>Уреди</Link>
-                        </Button>
-                        <Button asChild size="sm" variant="ghost">
-                          <Link to="/articles/$id" params={{ id: article.id }} target="_blank">
-                            Преглед
-                          </Link>
-                        </Button>
-                        {showArchived ? (
-                          <Button 
-                            size="sm" 
-                            variant="outline"
-                            onClick={() => handlePublishClick('article', article.id)}
-                            disabled={isProcessing}
-                          >
-                            Објави
-                          </Button>
-                        ) : (
-                          <Button 
-                            size="sm" 
-                            variant="outline"
-                            onClick={() => handleArchiveClick('article', article.id, article.title)}
-                            disabled={isProcessing}
-                          >
-                            Архивирај
-                          </Button>
-                        )}
-                        <Button 
-                          size="sm" 
-                          variant="destructive"
-                          onClick={() => handleDeleteClick('article', article.id, article.title)}
-                          disabled={isProcessing}
-                        >
-                          Избриши
-                        </Button>
-                      </div>
+                       <div className="flex gap-2 ml-4">
+                          <Button asChild size="sm" variant="outline">
+                           <Link to="/articles/$id" params={{ id: article.id }}>Уреди</Link>
+                         </Button>
+                         <Button asChild size="sm" variant="ghost">
+                           <Link to="/articles/$id" params={{ id: article.id }} target="_blank">
+                             Преглед
+                           </Link>
+                         </Button>
+                         <Button 
+                           size="sm" 
+                           variant={article.isHero ? "default" : "outline"}
+                           onClick={() => handleSetHero(article.id, !article.isHero)}
+                           disabled={isProcessing || updateArticleMutation.isPending}
+                         >
+                           {article.isHero ? '★ Hero' : 'Set as Hero'}
+                         </Button>
+                         {showArchived ? (
+                           <Button 
+                             size="sm" 
+                             variant="outline"
+                             onClick={() => handlePublishClick('article', article.id)}
+                             disabled={isProcessing}
+                           >
+                             Објави
+                           </Button>
+                         ) : (
+                           <Button 
+                             size="sm" 
+                             variant="outline"
+                             onClick={() => handleArchiveClick('article', article.id, article.title)}
+                             disabled={isProcessing}
+                           >
+                             Архивирај
+                           </Button>
+                         )}
+                         <Button 
+                           size="sm" 
+                           variant="destructive"
+                           onClick={() => handleDeleteClick('article', article.id, article.title)}
+                           disabled={isProcessing}
+                         >
+                           Избриши
+                         </Button>
+                       </div>
                     </div>
                   </div>
                 ))}

frontend/src/components/routes/ArchiveComponent.tsx

@@ -3,7 +3,7 @@ import { Link } from '@tanstack/react-router'
 import * as api from '@/lib/api'
 import { SocialShareButtons } from '@/components/features/social-share'
 
-export function ArticlesComponent() {
+export function ArchiveComponent() {
   const { data, isLoading, error } = useQuery({
     queryKey: ['articles'],
     queryFn: () => api.fetchArticles({ status: 'published' }),

frontend/src/components/routes/ArtComponent.tsx

@@ -0,0 +1,11 @@
+import { CategoryPage } from './CategoryPage'
+
+export function ArtComponent() {
+  return (
+    <CategoryPage
+      categorySlug="art"
+      categoryName="Уметност"
+      categoryDescription="Уметност, култура и забава"
+    />
+  )
+}

frontend/src/components/routes/CategoryPage.tsx

@@ -0,0 +1,187 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import * as api from '@/lib/api'
+import { SocialShareButtons } from '@/components/features/social-share'
+import { PinnedLiveBlogsSidebar } from '@/components/home/PinnedLiveBlogsSidebar'
+
+interface CategoryPageProps {
+  categorySlug: string
+  categoryName: string
+  categoryDescription?: string
+}
+
+export function CategoryPage({ categorySlug, categoryName, categoryDescription }: CategoryPageProps) {
+  const { data: articlesData, isLoading: articlesLoading, error: articlesError } = useQuery({
+    queryKey: ['category-articles', categorySlug],
+    queryFn: () => api.fetchArticles({ category: categorySlug, status: 'published' }),
+  })
+
+  const { data: heroData, isLoading: heroLoading } = useQuery({
+    queryKey: ['category-hero', categorySlug],
+    queryFn: () => api.fetchArticles({ category: categorySlug, status: 'published', limit: 1 }),
+    enabled: !!categorySlug,
+  })
+
+  const heroArticle = heroData?.data?.[0]
+  const articles = articlesData?.data || []
+
+  if (articlesLoading || heroLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-lg">Вчитување...</div>
+      </div>
+    )
+  }
+
+  if (articlesError) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-lg text-red-500">Грешка при вчитување на статии</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Category Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">{categoryName}</h1>
+        {categoryDescription && (
+          <p className="text-muted-foreground mt-2">{categoryDescription}</p>
+        )}
+      </div>
+
+      {/* Hero Section with Pinned Live Blogs Sidebar */}
+      {heroArticle && (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+          {/* Hero Article - 2/3 width */}
+          <div className="lg:col-span-2">
+            <div className="rounded-xl border bg-card overflow-hidden group hover:shadow-lg transition-shadow">
+              <Link to={`/articles/${heroArticle.id}`} className="block">
+                {heroArticle.featuredImage ? (
+                  <div className="relative h-64 md:h-80 overflow-hidden">
+                    <img
+                      src={heroArticle.featuredImage}
+                      alt={heroArticle.title}
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
+                  </div>
+                ) : (
+                  <div className="h-64 md:h-80 bg-gradient-to-br from-primary/10 to-primary/5 flex items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" className="text-primary/30">
+                      <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2" />
+                      <path d="M18 14h-8" />
+                      <path d="M15 18h-5" />
+                      <path d="M10 6h8v4h-8V6Z" />
+                    </svg>
+                  </div>
+                )}
+              </Link>
+              
+              <div className="p-6">
+                <Link to={`/articles/${heroArticle.id}`} className="block">
+                  <h2 className="text-2xl font-bold mb-3 group-hover:text-primary transition-colors">
+                    {heroArticle.title}
+                  </h2>
+                  {heroArticle.excerpt && (
+                    <p className="text-muted-foreground mb-4 line-clamp-3">
+                      {heroArticle.excerpt}
+                    </p>
+                  )}
+                </Link>
+                
+                <div className="flex items-center justify-between text-sm text-muted-foreground">
+                  <div className="flex items-center space-x-4">
+                    <span>
+                      {new Date(heroArticle.createdAt).toLocaleDateString('mk-MK', {
+                        day: 'numeric',
+                        month: 'short',
+                        year: 'numeric',
+                      })}
+                    </span>
+                    <span>•</span>
+                    <span>{heroArticle.views} прегледи</span>
+                  </div>
+                  
+                  <SocialShareButtons
+                    articleId={heroArticle.id}
+                    title={heroArticle.title}
+                    url={`${window.location.origin}/articles/${heroArticle.id}`}
+                    excerpt={heroArticle.excerpt}
+                    image={heroArticle.featuredImage}
+                    tags={heroArticle.tags}
+                    variant="compact"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          {/* Pinned Live Blogs Sidebar - 1/3 width */}
+          <div className="lg:col-span-1">
+            <PinnedLiveBlogsSidebar />
+          </div>
+        </div>
+      )}
+
+      {/* Articles Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {articles
+          .filter(article => article.id !== heroArticle?.id) // Exclude hero article from grid
+          .map((article) => (
+            <div
+              key={article.id}
+              className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow group"
+            >
+              <Link
+                to={`/articles/${article.id}`}
+                className="block mb-4"
+              >
+                <h2 className="text-xl font-semibold mb-2 line-clamp-2 group-hover:text-primary transition-colors">
+                  {article.title}
+                </h2>
+                {article.excerpt && (
+                  <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
+                    {article.excerpt}
+                  </p>
+                )}
+              </Link>
+              
+              <div className="flex items-center justify-between text-sm text-muted-foreground">
+                <div className="flex items-center space-x-4">
+                  <span>
+                    {new Date(article.createdAt).toLocaleDateString('mk-MK', {
+                      day: 'numeric',
+                      month: 'short',
+                      year: 'numeric',
+                    })}
+                  </span>
+                  <span>•</span>
+                  <span>{article.views} прегледи</span>
+                </div>
+                
+                <SocialShareButtons
+                  articleId={article.id}
+                  title={article.title}
+                  url={`${window.location.origin}/articles/${article.id}`}
+                  excerpt={article.excerpt}
+                  image={article.featuredImage}
+                  tags={article.tags}
+                  variant="compact"
+                />
+              </div>
+            </div>
+          ))}
+      </div>
+
+      {articles.length === 0 && (
+        <div className="text-center py-12">
+          <p className="text-muted-foreground text-lg">
+            Нема објавени статии во оваа категорија. Проверете подоцна!
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/routes/ScienceComponent.tsx

@@ -0,0 +1,11 @@
+import { CategoryPage } from './CategoryPage'
+
+export function ScienceComponent() {
+  return (
+    <CategoryPage
+      categorySlug="science"
+      categoryName="Наука"
+      categoryDescription="Научни откритија и технологија"
+    />
+  )
+}

frontend/src/components/routes/SportComponent.tsx

@@ -0,0 +1,11 @@
+import { CategoryPage } from './CategoryPage'
+
+export function SportComponent() {
+  return (
+    <CategoryPage
+      categorySlug="sport"
+      categoryName="Спорт"
+      categoryDescription="Спортски вести и анализи"
+    />
+  )
+}

frontend/src/lib/api.ts

@@ -398,6 +398,23 @@ export async function fetchRecentLiveBlogs(): Promise<LiveBlog[]> {
   return response.json();
 }
 
+export async function fetchHeroArticle(): Promise<Article | null> {
+  const response = await authFetch(`${API_BASE_URL}/articles/hero`);
+  if (!response.ok) {
+    throw new Error('Failed to fetch hero article');
+  }
+  const article = await response.json();
+  return article || null;
+}
+
+export async function fetchLatestArticles(limit = 12): Promise<ArticlesResponse> {
+  const response = await authFetch(`${API_BASE_URL}/articles?status=published&limit=${limit}`);
+  if (!response.ok) {
+    throw new Error('Failed to fetch latest articles');
+  }
+  return response.json();
+}
+
 export async function fetchPinnedLiveBlogs(): Promise<LiveBlog[]> {
   const response = await authFetch(`${API_BASE_URL}/live-blogs/featured`);
   if (!response.ok) {

frontend/src/lib/theme.ts

@@ -0,0 +1,79 @@
+/**
+ * Theme utilities for dark/light mode
+ */
+
+export type Theme = 'light' | 'dark';
+
+/**
+ * Get the current theme from localStorage or system preference
+ */
+export function getInitialTheme(): Theme {
+  // Check localStorage first
+  const savedTheme = localStorage.getItem('theme') as Theme;
+  if (savedTheme) {
+    return savedTheme;
+  }
+  
+  // Check system preference
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return 'dark';
+  }
+  
+  // Default to light
+  return 'light';
+}
+
+/**
+ * Apply theme to document
+ */
+export function applyTheme(theme: Theme): void {
+  const root = document.documentElement;
+  
+  if (theme === 'dark') {
+    root.classList.add('dark');
+  } else {
+    root.classList.remove('dark');
+  }
+  
+  // Save to localStorage
+  localStorage.setItem('theme', theme);
+}
+
+/**
+ * Initialize theme on page load
+ */
+export function initializeTheme(): void {
+  const theme = getInitialTheme();
+  applyTheme(theme);
+}
+
+/**
+ * Toggle between light and dark themes
+ */
+export function toggleTheme(): Theme {
+  const currentTheme = getInitialTheme();
+  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+  applyTheme(newTheme);
+  return newTheme;
+}
+
+/**
+ * Listen for system theme changes
+ */
+export function watchSystemTheme(callback: (theme: Theme) => void): () => void {
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  
+  const handleChange = (e: MediaQueryListEvent) => {
+    // Only update if user hasn't set a preference in localStorage
+    if (!localStorage.getItem('theme')) {
+      const theme = e.matches ? 'dark' : 'light';
+      callback(theme);
+      applyTheme(theme);
+    }
+  };
+  
+  mediaQuery.addEventListener('change', handleChange);
+  
+  // Return cleanup function
+  return () => mediaQuery.removeEventListener('change', handleChange);
+}

frontend/src/main.tsx

@@ -4,6 +4,10 @@ import { RouterProvider } from '@tanstack/react-router'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { router } from './routes'
 import { AuthProvider } from './contexts/AuthContext'
+import { initializeTheme } from './lib/theme'
+
+// Initialize theme before rendering
+initializeTheme();
 
 const queryClient = new QueryClient()
 

frontend/src/routes.tsx

@@ -1,6 +1,6 @@
 import { createRootRoute, createRoute, createRouter, Outlet, Link } from '@tanstack/react-router'
 import { ArticleTicker } from './components/ArticleTicker'
-import { ArticlesComponent } from './components/routes/ArticlesComponent'
+import { ArchiveComponent } from './components/routes/ArchiveComponent'
 import { ArticleDetailComponent } from './components/routes/ArticleDetailComponent'
 import { LiveBlogsComponent } from './components/routes/LiveBlogsComponent'
 import { LiveBlogDetailComponent } from './components/routes/LiveBlogDetailComponent'
@@ -8,10 +8,15 @@ import { LiveBlogAdminComponent } from './components/routes/LiveBlogAdminCompone
 import { CreateLiveBlogComponent } from './components/routes/CreateLiveBlogComponent'
 import { AdminDashboardComponent } from './components/routes/AdminDashboardComponent'
 import { AuthPage } from './components/routes/AuthPage'
+import { SportComponent } from './components/routes/SportComponent'
+import { ArtComponent } from './components/routes/ArtComponent'
+import { ScienceComponent } from './components/routes/ScienceComponent'
 import { LiveBlogTicker } from './components/features/live-blog/LiveBlogTicker'
-import { PinnedLiveBlogSidebar } from './components/features/live-blog/PinnedLiveBlogSidebar'
 import { ProtectedRoute } from './components/auth/ProtectedRoute'
 import { Header } from './components/layout/Header'
+import { HeroArticle } from './components/home/HeroArticle'
+import { PinnedLiveBlogsSidebar } from './components/home/PinnedLiveBlogsSidebar'
+import { LatestArticlesGrid } from './components/home/LatestArticlesGrid'
 import './styles.css'
 
 const rootRoute = createRootRoute({
@@ -53,131 +58,117 @@ const indexRoute = createRoute({
       
       <div className="py-8 md:py-12">
         <div className="max-w-7xl mx-auto">
-          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
-            {/* Main content - 3 columns */}
-            <div className="lg:col-span-3 space-y-8">
-              {/* Hero section */}
-              <div className="rounded-xl border bg-card p-8 text-center">
-                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-6">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-primary">
-                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
-                    <polyline points="14 2 14 8 20 8" />
-                    <line x1="16" x2="8" y1="13" y2="13" />
-                    <line x1="16" x2="8" y1="17" y2="17" />
-                    <line x1="10" x2="8" y1="9" y2="9" />
-                  </svg>
-                </div>
-                <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">
-                  Placebo<span className="text-primary">.mk</span>
-                </h1>
-                <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-                  Unapologetically sarcastic news and commentary on local and global affairs in Macedonia. Because sometimes the truth hurts more than fiction.
-                </p>
-              </div>
+          {/* Hero Section with Pinned Live Blogs Sidebar */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+            {/* Hero Article - 2/3 width */}
+            <div className="lg:col-span-2">
+              <HeroArticle />
+            </div>
+            
+            {/* Pinned Live Blogs Sidebar - 1/3 width */}
+            <div className="lg:col-span-1">
+              <PinnedLiveBlogsSidebar />
+            </div>
+          </div>
 
-              {/* Features grid */}
-              <div className="grid md:grid-cols-3 gap-6">
-                <div className="p-6 rounded-xl border bg-card hover:shadow-lg transition-all duration-300 group">
-                  <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-primary">
-                      <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2" />
-                      <path d="M18 14h-8" />
-                      <path d="M15 18h-5" />
-                      <path d="M10 6h8v4h-8V6Z" />
-                    </svg>
-                  </div>
-                  <h3 className="text-lg font-semibold mb-2">Latest Articles</h3>
-                  <p className="text-muted-foreground text-sm">
-                    Freshly brewed sarcasm on current events, politics, and everything in between.
-                  </p>
-                </div>
+          {/* Latest Articles Grid - 4x3 */}
+          <div className="mb-12">
+            <LatestArticlesGrid />
+          </div>
 
-                <div className="p-6 rounded-xl border bg-card hover:shadow-lg transition-all duration-300 group">
-                  <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-primary">
-                      <circle cx="12" cy="12" r="10" />
-                      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
-                      <path d="M12 17h.01" />
-                    </svg>
-                  </div>
-                  <h3 className="text-lg font-semibold mb-2">No Filter</h3>
-                  <p className="text-muted-foreground text-sm">
-                    We don't do nuance. We don't do diplomatic language. Just honest (and slightly mean) commentary.
-                  </p>
-                </div>
+          {/* Brand Introduction */}
+          <div className="rounded-xl border bg-card p-8 text-center mb-12">
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-6">
+              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-primary">
+                <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+                <polyline points="14 2 14 8 20 8" />
+                <line x1="16" x2="8" y1="13" y2="13" />
+                <line x1="16" x2="8" y1="17" y2="17" />
+                <line x1="10" x2="8" y1="9" y2="9" />
+              </svg>
+            </div>
+            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">
+              Placebo<span className="text-primary">.mk</span>
+            </h1>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+              Unapologetically sarcastic news and commentary on local and global affairs in Macedonia. Because sometimes the truth hurts more than fiction.
+            </p>
+          </div>
 
-                <div className="p-6 rounded-xl border bg-card hover:shadow-lg transition-all duration-300 group">
-                  <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-primary">
-                      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-                      <circle cx="9" cy="7" r="4" />
-                      <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-                      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
-                    </svg>
-                  </div>
-                  <h3 className="text-lg font-semibold mb-2">Live Coverage</h3>
-                  <p className="text-muted-foreground text-sm">
-                    Real-time updates on breaking news with our live blogging system. No delays, just facts.
-                  </p>
-                </div>
-              </div>
-
-              {/* Call to action */}
-              <div className="rounded-xl border bg-card p-8 text-center">
-                <h2 className="text-2xl font-bold mb-4">Ready for some unfiltered truth?</h2>
-                <p className="text-muted-foreground mb-6 max-w-2xl mx-auto">
-                  Dive into our articles or follow live coverage of breaking news as it happens.
-                </p>
-                <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                  <Link
-                    to="/articles"
-                    className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-6 py-2"
-                  >
-                    Read Articles
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ml-2">
-                      <path d="M5 12h14" />
-                      <path d="m12 5 7 7-7 7" />
-                    </svg>
-                  </Link>
-                  <Link
-                    to="/live-blogs"
-                    className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-6 py-2"
-                  >
-                    View Live Blogs
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ml-2">
-                      <circle cx="12" cy="12" r="10" />
-                      <polyline points="12 6 12 12 16 14" />
-                    </svg>
-                  </Link>
-                </div>
+          {/* Features grid */}
+          <div className="grid md:grid-cols-3 gap-6 mb-12">
+            <div className="p-6 rounded-xl border bg-card hover:shadow-lg transition-all duration-300 group">
+              <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-primary">
+                  <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2" />
+                  <path d="M18 14h-8" />
+                  <path d="M15 18h-5" />
+                  <path d="M10 6h8v4h-8V6Z" />
+                </svg>
               </div>
+              <h3 className="text-lg font-semibold mb-2">Latest Articles</h3>
+              <p className="text-muted-foreground text-sm">
+                Freshly brewed sarcasm on current events, politics, and everything in between.
+              </p>
             </div>
 
-            {/* Sidebar - 1 column */}
-            <div className="lg:col-span-1">
-              <PinnedLiveBlogSidebar />
-              
-              {/* Additional sidebar content */}
-              <div className="mt-6 rounded-xl border bg-card p-6">
-                <h3 className="font-semibold mb-4">About Placebo.mk</h3>
-                <p className="text-sm text-muted-foreground mb-4">
-                  We're not here to make friends. We're here to tell the truth with a healthy dose of sarcasm.
-                </p>
-                <div className="text-xs text-muted-foreground">
-                  <div className="flex items-center gap-2 mb-2">
-                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                    <span>Live coverage updated in real-time</span>
-                  </div>
-                  <div className="flex items-center gap-2 mb-2">
-                    <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
-                    <span>No ads, no sponsors, no BS</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
-                    <span>100% independent journalism</span>
-                  </div>
-                </div>
+            <div className="p-6 rounded-xl border bg-card hover:shadow-lg transition-all duration-300 group">
+              <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-primary">
+                  <circle cx="12" cy="12" r="10" />
+                  <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+                  <path d="M12 17h.01" />
+                </svg>
               </div>
+              <h3 className="text-lg font-semibold mb-2">No Filter</h3>
+              <p className="text-muted-foreground text-sm">
+                We don't do nuance. We don't do diplomatic language. Just honest (and slightly mean) commentary.
+              </p>
+            </div>
+
+            <div className="p-6 rounded-xl border bg-card hover:shadow-lg transition-all duration-300 group">
+              <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-primary">
+                  <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                  <circle cx="9" cy="7" r="4" />
+                  <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+                  <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-semibold mb-2">Live Coverage</h3>
+              <p className="text-muted-foreground text-sm">
+                Real-time updates on breaking news with our live blogging system. No delays, just facts.
+              </p>
+            </div>
+          </div>
+
+          {/* Call to action */}
+          <div className="rounded-xl border bg-card p-8 text-center">
+            <h2 className="text-2xl font-bold mb-4">Ready for some unfiltered truth?</h2>
+            <p className="text-muted-foreground mb-6 max-w-2xl mx-auto">
+              Dive into our articles or follow live coverage of breaking news as it happens.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Link
+                to="/archive"
+                className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-6 py-2"
+              >
+                Прелистај архива
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ml-2">
+                  <path d="M5 12h14" />
+                  <path d="m12 5 7 7-7 7" />
+                </svg>
+              </Link>
+              <Link
+                to="/live-blogs"
+                className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-6 py-2"
+              >
+                View Live Blogs
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ml-2">
+                  <circle cx="12" cy="12" r="10" />
+                  <polyline points="12 6 12 12 16 14" />
+                </svg>
+              </Link>
             </div>
           </div>
         </div>
@@ -186,10 +177,28 @@ const indexRoute = createRoute({
   ),
 })
 
-const articlesRoute = createRoute({
+const archiveRoute = createRoute({
   getParentRoute: () => rootRoute,
-  path: '/articles',
-  component: ArticlesComponent,
+  path: '/archive',
+  component: ArchiveComponent,
+})
+
+const sportRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/sport',
+  component: SportComponent,
+})
+
+const artRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/art',
+  component: ArtComponent,
+})
+
+const scienceRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/science',
+  component: ScienceComponent,
 })
 
 const articleDetailRoute = createRoute({
@@ -326,7 +335,10 @@ const adminDashboardRoute = createRoute({
 
 const routeTree = rootRoute.addChildren([
   indexRoute, 
-  articlesRoute, 
+  archiveRoute,
+  sportRoute,
+  artRoute,
+  scienceRoute,
   articleDetailRoute,
   liveBlogsRoute,
   liveBlogDetailRoute,

todos.md

@@ -1,4 +1,7 @@
-3. social media integration [telegram, whatsup, facebook, viber]
-4. share with functionality
 5. admin dashboard enhancement
 
+lets add sport, art, science pages. Rename current /articles page to /archive.
+create corresponding categories so article will be placed on page according 
+to category.
+on home page under a hero section create a card grid component 4x3 where last published article would be placed regardless of category.
+every page will have simular design as home page with minor design differences.