adding donate button to palestine that go to donate.unrwa.r.org on he…

…ading

src/layouts/header.jsx

@@ -1,13 +1,15 @@
 // Assets
 import githubLogoDark from '../assets/svg/github-mark-white.svg';
 import githubLogoLight from '../assets/svg/github-mark.svg';
+import palestineSvg from '@/assets/svg/Flag_of_Palestine.svg';
 
 // Components
-import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { ModeToggle } from '@/components/mode-toggle';
 import NavLinks from '@/components/ui/NavLinks';
+import { Button } from '@/components/ui/button'
 import { useTheme } from '@/components/theme-provider';
+import { useEffect } from 'react';
 
 function Header() {
   const { theme, setTheme } = useTheme();
@@ -21,7 +23,7 @@ function Header() {
   });
 
   return (
-    <header className="container px-6 py-3 flex justify-between items-center backdrop-blur-3xl">
+    <header className="container px-6 py-3 flex justify-between items-center backdrop-blur-md sticky top-0 z-50">
       <Logo />
       <Navigation />
     </header>
@@ -44,6 +46,7 @@ function Navigation() {
 
   return (
     <nav className="flex items-center gap-6">
+      <DonateToPalestine />
       <NavLinks
         logo={theme === 'dark' ? githubLogoDark : githubLogoLight}
         name="Github"
@@ -54,4 +57,16 @@ function Navigation() {
   );
 }
 
+function DonateToPalestine() {
+  return (
+    <Button variant="outline" asChild>
+      <a className='space-x-2 flex items-center' href="https://donate.unrwa.org/gaza/~my-donation?_cv=1" target='_blank' rel='noopener noreferrer'>
+        <img className="size-4" src={palestineSvg} alt="Palestine" />
+        <span>Donate Now</span>
+      </a>
+    </Button>
+  )
+}
+
+
 export default Header;

tailwind.config.js

@@ -1,3 +1,5 @@
+import tailwindCssAnimate from "tailwindcss-animate";
+
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: ["class"],
@@ -76,5 +78,5 @@ export default {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [tailwindCssAnimate],
 }