feat: logo

app/components/Header.jsx

@@ -2,6 +2,7 @@
 import { useScroll } from '../hooks/useScroll';
 import { useState } from 'react';
 import { Menu, X } from 'lucide-react';
+import LotusLogo from './LotusLogo';
 
 function Header() {
   const { scrollToSectionWithHeader } = useScroll();
@@ -26,11 +27,9 @@ function Header() {
       <div className="max-w-6xl mx-auto flex justify-between items-center">
         {/* Logo */}
         <div className="flex items-center gap-3">
-          <div className="bg-gradient-to-r from-primary-500 to-primary-600 w-8 h-8 rounded-xl flex items-center justify-center">
-            <span className="text-white font-bold text-sm">آ</span>
-          </div>
+          <LotusLogo className="w-9 h-9 drop-shadow-sm" />
           <div className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent">
-            آرام لند
+            آرام جان
           </div>
         </div>