buymeacoffe added

frontend/src/components/layout/Header.tsx

@@ -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' && (
@@ -183,8 +191,9 @@ export function ArticleDetailComponent({ id }: { id: string }) {
 
       {/* Social Sharing Footer */}
       <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>
+          <div className="flex flex-wrap items-center justify-center gap-4">
             <SocialShareButtons
               articleId={data.id}
               title={data.title}
@@ -194,6 +203,15 @@ export function ArticleDetailComponent({ id }: { id: string }) {
               tags={data.tags}
               variant="footer"
             />
+            <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>