hero section added

hero article menagment implemented in admin UI

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;
 

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/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/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/lib/api.ts

@@ -398,6 +398,15 @@ 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 fetchPinnedLiveBlogs(): Promise<LiveBlog[]> {
   const response = await authFetch(`${API_BASE_URL}/live-blogs/featured`);
   if (!response.ok) {

frontend/src/routes.tsx

@@ -9,9 +9,10 @@ import { CreateLiveBlogComponent } from './components/routes/CreateLiveBlogCompo
 import { AdminDashboardComponent } from './components/routes/AdminDashboardComponent'
 import { AuthPage } from './components/routes/AuthPage'
 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 './styles.css'
 
 const rootRoute = createRootRoute({
@@ -53,131 +54,112 @@ 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>
-
-              {/* 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>
-
-                <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="/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>
+          {/* 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>
+
+          {/* 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>
+
+          {/* 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="/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>
           </div>
         </div>

todos.md

@@ -1,4 +1,6 @@
-3. social media integration [telegram, whatsup, facebook, viber]
-4. share with functionality
 5. admin dashboard enhancement
+6. homepage:
+  lets add hero section on the home page, next to the hero section [2/3 width] place pinned 
+  live blogs. in the hero section we will show latest article with tag: hero.
+  make apropriate changes to database schema and backend as needed.