responsive home page and layout

app/shared/components/FooterSocial.tsx

@@ -62,9 +62,9 @@ const socialLinks: SocialLink[] = [
 
 const FooterSocial: FC = () => {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 items-center lg:items-start text-center lg:text-right">
       <h3 className="text-sm font-bold text-[#0A1B2C]">ما را در شبکه‌های اجتماعی دنبال کنید</h3>
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-3 flex-wrap justify-center lg:justify-start">
         {socialLinks.map((item) => (
           <a key={item.label} href={item.href} aria-label={item.label} className={`flex size-9 items-center justify-center rounded-full ${item.bg}`}>
             {item.icon}