Update metadata and UI with enhanced branding

app/layout.tsx

@@ -11,19 +11,19 @@ type Props = {
 
 
 export const metadata: Metadata = {
-  title: 'بایو جی پی تی',
-  description: 'ساخت بایو حرفه ای با یک کلیک',
+  title: 'در کسری از ثانیه، بایویی خیره‌کننده و جذاب بساز!',
+  description: 'اینجا می‌تونی با چند کلیک ساده، بایویی شخصی‌سازی شده و جذاب که نمایانگر واقعی شخصیت توه، بسازی.',
   alternates: {
     canonical: '/'
   },
   openGraph: {
-    title: 'بایو جی پی تی',
-    description: 'ساختن بایو با یک کلیک همراه چت جی پی تی',
+    title: 'در کسری از ثانیه، بایویی خیره‌کننده و جذاب بساز!',
+    description: 'اینجا می‌تونی با چند کلیک ساده، بایویی شخصی‌سازی شده و جذاب که نمایانگر واقعی شخصیت توه، بسازی.',
     images: [{
-      url: 'https://biogpt-chi.vercel.app/screenshot.png',
+      url: 'https://bio.eindev.ir/screenshot.png',
       width: '300',
       height: '300',
-      alt: "ساختن بایو با یک کلیک همراه چت جی پی تی"
+      alt: "با استفاده از جدیدترین فناوری هوش مصنوعی، ما به شما کمک می‌کنیم تا بایویی ایجاد کنید که همه را مجذوب خود کند."
     }]
   },
 }

app/page.tsx

@@ -121,16 +121,20 @@ const BioGenerator = () => {
   return (
     <>
       <div className="flex flex-1 w-full flex-col items-center justify-center text-center px-4">
-        <h2 className="text-xl sm:text-2xl !leading-[4rem] font-bold text-slate-700">
-          با
-          <span className="pl-2 text-orange-500/50">
-            Bio
-          </span>
-          <span className="pr-2 text-gray-300">
-            GPT
-          </span>
+        <div className="flex items-center">
+        <h2 className=" text-xl sm:text-2xl !leading-[4rem] font-bold text-slate-700">
+          با</h2>
+          <img
+          alt="ClubGPT icon"
+          src="/screenshot.png"
+          className="sm:w-36"
+          width={100}
+          height={50}
+        />
+        <h2>
           برای خودت بایو حـرفه‌ای بساز 😎
         </h2>
+        </div>
         <div className="w-full sm:max-w-2xl mt-6 sm:mt-1 p-4 border rounded">
           <div className="grid w-full gap-2">
             <div className="flex items-center gap-2">

components/Header.tsx

@@ -5,19 +5,13 @@ export default function Header() {
   return (
     <div className="flex justify-between items-center space-x-4 py-1 border-b sm:px-4">
       <Link href="/">
-        {/* <img
+        <img
           alt="ClubGPT icon"
-          src="/logo.png"
+          src="/screenshot.png"
           className="sm:w-36"
           width={100}
           height={60}
-        /> */}
-        <p className="p-2 text-xl text-orange-500/50 font-bold">
-          Bio
-          <span className=" text-gray-300">
-            GPT
-          </span>
-          </p>
+        />
       </Link>
       <a
         className="flex items-center gap-2 justify-center border py-1 px-2 rounded text-xs sm:text-sm text-gray-600 transition-colors hover:bg-gray-100"