xxl

frontend/src/components/layout/Header.tsx

@@ -42,7 +42,7 @@ export function Header() {
   return (
     <header className="sticky top-0 z-50 border-b-4 border-foreground bg-[hsl(var(--background))]">
       <div className="border-b-2 border-foreground/20">
-        <div className="container mx-auto max-w-6xl px-4">
+        <div className="container mx-auto max-w-7xl px-4">
           <div className="flex items-center justify-between py-2">
             <div className="hidden md:flex items-center gap-2 text-xs font-mono uppercase tracking-wider text-muted-foreground">
               <Zap className="w-3 h-3" />
@@ -119,7 +119,15 @@ export function Header() {
               </Link>
             )}
             
-            <div className="ml-4 pl-4 border-l-2 border-foreground/20">
+            <div className="ml-4 pl-4 border-l-2 border-foreground/20 flex items-center gap-3">
+              <a
+                href="https://www.buymeacoffee.com/placebomk"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hidden lg:block border-2 border-foreground bg-yellow-400 hover:bg-yellow-300 transition-colors px-3 py-1 font-body text-xs font-bold uppercase tracking-wider"
+              >
+                ☕ Купи ми кафе
+              </a>
               <ThemeToggle />
             </div>
           </div>

frontend/src/components/routes/ArticleDetailComponent.tsx

@@ -73,7 +73,7 @@ export function ArticleDetailComponent({ id }: { id: string }) {
        </div>
 
         {/* Social Sharing */}
-        <div className="mb-8">
+        <div className="mb-8 flex flex-wrap items-center gap-4">
           <SocialShareButtons
             articleId={data.id}
             title={data.title}
@@ -82,6 +82,14 @@ export function ArticleDetailComponent({ id }: { id: string }) {
             image={data.featuredImage}
             tags={data.tags}
           />
+          <a
+            href="https://www.buymeacoffee.com/placebomk"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="border-2 border-foreground bg-yellow-400 hover:bg-yellow-300 transition-colors px-4 py-2 font-body text-sm font-bold uppercase tracking-wider"
+          >
+            ☕ Купи ми кафе
+          </a>
         </div>
 
        {data.featuredImage && data.imagePosition !== 'none' && (
@@ -181,21 +189,31 @@ export function ArticleDetailComponent({ id }: { id: string }) {
        </div>
      </div>
 
-     {/* Social Sharing Footer */}
+      {/* Social Sharing Footer */}
-     <div className="mt-8 pt-8 border-t">
+      <div className="mt-8 pt-8 border-t">
-       <div className="flex flex-col items-center">
+        <div className="flex flex-col items-center gap-4">
-         <p className="text-sm text-muted-foreground mb-4">Share this article:</p>
+          <p className="text-sm text-muted-foreground mb-2">Share this article:</p>
-          <SocialShareButtons
+          <div className="flex flex-wrap items-center justify-center gap-4">
-            articleId={data.id}
+            <SocialShareButtons
-            title={data.title}
+              articleId={data.id}
-            url={typeof window !== 'undefined' ? window.location.href : ''}
+              title={data.title}
-            excerpt={data.excerpt}
+              url={typeof window !== 'undefined' ? window.location.href : ''}
-            image={data.featuredImage}
+              excerpt={data.excerpt}
-            tags={data.tags}
+              image={data.featuredImage}
-            variant="footer"
+              tags={data.tags}
-          />
+              variant="footer"
-       </div>
+            />
-     </div>
+            <a
+              href="https://www.buymeacoffee.com/placebomk"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="border-2 border-foreground bg-yellow-400 hover:bg-yellow-300 transition-colors px-4 py-2 font-body text-sm font-bold uppercase tracking-wider"
+            >
+              ☕ Купи ми кафе
+            </a>
+          </div>
+        </div>
+      </div>
 
      {data.tags && Array.isArray(data.tags) && data.tags.length > 0 && (
         <div className="mt-8 pt-8 border-t">

frontend/src/routes.tsx

@@ -34,12 +34,12 @@ const rootRoute = createRootRoute({
       <Header />
       <ArticleTicker />
 
-      <main className="flex-1 container mx-auto max-w-6xl px-4 py-8">
+      <main className="flex-1 container mx-auto max-w-7xl px-4 py-8">
         <Outlet />
       </main>
 
       <footer className="border-t-4 border-foreground bg-foreground text-background">
-        <div className="container mx-auto max-w-6xl px-4 py-12">
+        <div className="container mx-auto max-w-7xl px-4 py-12">
           <div className="grid md:grid-cols-3 gap-8">
             <div>
               <h3 className="font-display text-3xl mb-4">Placebo.mk</h3>