chore: optimize about page & add follow me and image section

messages/en.json

@@ -116,7 +116,8 @@
     "authorName": "MkSaaS",
     "authorBio": "AI SaaS Boilerplate",
     "introduction": "👋 Hi there! This is MkSaaS, an AI SaaS template built with modern technologies, helping you build your SaaS faster and better. If you have any questions, welcome to contact me.",
-    "talkWithMe": "Talk with me"
+    "talkWithMe": "Talk with me",
+    "followMe": "Follow me on X"
   },
   "ChangelogPage": {
     "title": "Changelog",

messages/zh.json

@@ -117,7 +117,8 @@
     "authorName": "MkSaaS",
     "authorBio": "最好的 AI SaaS 模板",
     "introduction": "👋 你好，这里是 MkSaaS，一个使用最先进的技术栈构建的 AI SaaS 模板，它可以帮助你更快更好地构建你的 SaaS。如果你有任何问题，欢迎联系我。",
-    "talkWithMe": "联系我"
+    "talkWithMe": "联系我",
+    "followMe": "关注我"
   },
   "ChangelogPage": {
     "title": "更新日志",

src/app/[locale]/(marketing)/(pages)/about/page.tsx

@@ -1,9 +1,11 @@
+import { BlurFadeDemo } from '@/components/magicui/example/blur-fade-example';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
+import { Button, buttonVariants } from '@/components/ui/button';
 import { websiteConfig } from '@/config/website';
 import { constructMetadata } from '@/lib/metadata';
 import { getUrlWithLocale } from '@/lib/urls/urls';
-import { MailIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { MailIcon, TwitterIcon } from 'lucide-react';
 import type { Metadata } from 'next';
 import type { Locale } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
@@ -62,20 +64,39 @@ export default async function AboutPage() {
                 {t('introduction')}
               </p>
 
-              {websiteConfig.mail.supportEmail && (
-                <div className="flex items-center gap-4">
-                  <Button className="rounded-lg cursor-pointer">
-                    <MailIcon className="mr-1 size-4" />
-                    <a href={`mailto:${websiteConfig.mail.supportEmail}`}>
-                      {t('talkWithMe')}
-                    </a>
-                  </Button>
-                </div>
-              )}
+              <div className="flex items-center gap-4">
+                {websiteConfig.metadata.social?.twitter && (
+                  <a
+                    href={websiteConfig.metadata.social.twitter}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={cn(
+                      buttonVariants({ variant: 'outline' }),
+                      'rounded-lg cursor-pointer'
+                    )}
+                  >
+                    <TwitterIcon className="mr-1 size-4" />
+                    {t('followMe')}
+                  </a>
+                )}
+                {websiteConfig.mail.supportEmail && (
+                  <div className="flex items-center gap-4">
+                    <Button className="rounded-lg cursor-pointer">
+                      <MailIcon className="mr-1 size-4" />
+                      <a href={`mailto:${websiteConfig.mail.supportEmail}`}>
+                        {t('talkWithMe')}
+                      </a>
+                    </Button>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>
       </div>
+
+      {/* image section */}
+      <BlurFadeDemo />
     </div>
   );
 }