Feat refactor footer

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# IDE stuff
+.idea

src/app/components/Footer/Footer.tsx

@@ -1,11 +1,67 @@
 import Image from "next/image";
 import Link from "next/link";
+import React from "react";
+import { FaFigma, FaInstagram } from "react-icons/fa";
+import { GrSwift } from "react-icons/gr";
+import { IoIosClose, IoLogoGithub } from "react-icons/io";
+import { RiLinkedinLine, RiTelegramLine } from "react-icons/ri";
+import { SiPhp } from "react-icons/si";
+
+const defaultIconSize = 28;
+const socialIcons = [
+  {
+    icon: <FaInstagram />,
+    title: "اینستاگرام",
+    link: "https://www.instagram.com/frontchapter",
+  },
+  {
+    icon: <RiLinkedinLine />,
+    title: "لینکدین",
+    link: "https://www.linkedin.com/company/frontchapter",
+  },
+  {
+    icon: <RiTelegramLine />,
+    children: (
+      <div>
+        <a
+          href="https://t.me/FrontChapter"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          کانال تلگرام
+        </a>
+        {" - "}
+        <a
+          href="https://t.me/FrontChapterGroup"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          گروه تلگرام
+        </a>
+      </div>
+    ),
+  },
+  {
+    icon: (
+      <Image src="/icons/stars-zinc.svg" alt="stars" width={30} height={30} />
+    ),
+    title: "همایش ۱۴۰۰",
+    link: "https://conf1400.frontchapter.ir/",
+  },
+];
+const programmingIcons = [
+  { icon: <SiPhp key={1} size={defaultIconSize} /> },
+  { icon: <GrSwift key={2} size={defaultIconSize} /> },
+  { icon: <IoLogoGithub key={3} size={defaultIconSize} /> },
+  { icon: <FaFigma key={4} size={defaultIconSize} /> },
+];
 
 const Footer = () => {
   return (
-    <footer className="py-12">
-      <div className="container flex flex-col items-center justify-center gap-6">
-        <div className="mx-auto">
+    <footer className="pt-12">
+      {/*first part*/}
+      <div className="flex flex-col items-center justify-center gap-6 bg-zinc-800">
+        <div className="mx-auto pt-10">
           <Link href="#header">
             <Image
               src="/images/logo.svg"
@@ -16,56 +72,46 @@ const Footer = () => {
             />
           </Link>
         </div>
-        <p className="font-thin text-gray-200">
-          ساخته و پرداخته شده با <span className="animate-pulse">❤️</span> در
+        <div className="flex justify-center">
+          <div className="flex flex-wrap justify-center gap-x-32 gap-y-4 py-8 text-3xl text-zinc-400">
+            {socialIcons.map((item) => (
+              <div key={item.link} className="flex items-center gap-3">
+                {item.icon}
+                {item.children ? (
+                  item.children
+                ) : (
+                  <a href={item.link} target="_blank" rel="noopener noreferrer">
+                    {item.title}
+                  </a>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      {/*second part*/}
+      <div className="flex flex-col items-center gap-6 bg-gray-900 py-12">
+        <div className="flex items-center gap-2">
+          <Link href="#header">
+            <Image
+              src="/icons/front-chapter-en.svg"
+              width={197}
+              height={40}
+              alt="FrontChapter Logo"
+            />
+          </Link>
+        </div>
+        <p className="font-medium text-gray-300">
+          طراحی و توسعه داده شده با <span className="animate-pulse">❤️</span> در
           فرانت‌چپتر
         </p>
-        <div className="grid grid-cols-5 grid-rows-1 gap-4 py-8 text-xs">
-          <div className="text-center">
-            <a
-              href="https://t.me/FrontChapter"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              کانال تلگرام
-            </a>
-          </div>
-          <div className="text-center">
-            <a
-              href="https://t.me/FrontChapterGroup"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              گروه تلگرام
-            </a>
-          </div>
-          <div className="text-center">
-            <a
-              href="https://www.instagram.com/frontchapter"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              اینستاگرام
-            </a>
-          </div>
-          <div className="text-center">
-            <a
-              href="https://www.linkedin.com/company/frontchapter"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              لینکدین
-            </a>
-          </div>
-          <div className="text-center">
-            <a
-              href="https://conf1400.frontchapter.ir/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              همایش ۱۴۰۰
-            </a>
-          </div>
+        <div className="flex items-center gap-4">
+          {programmingIcons.map((item, index) => (
+            <React.Fragment key={index}>
+              {item.icon}
+              {index !== programmingIcons.length - 1 && <IoIosClose />}
+            </React.Fragment>
+          ))}
         </div>
       </div>
     </footer>

src/app/components/Speakers/SpeakerCard.tsx

@@ -19,12 +19,13 @@ const SpeakerCard = ({
           className="lg:size-[168px]"
           src={avatar}
           alt={fullName}
+          quality={100}
         />
       </div>
       <div className="flex flex-col items-center gap-0.5 lg:gap-1">
         <strong className="lg:text-xl">{fullName}</strong>
         <span className="text-sm text-zinc-400 lg:text-base">{position}</span>
-        <span className="text-sm text-zinc-400 lg:text-base">{company}</span>
+        <span className="text-sm text-zinc-400 lg:text-base text-center">{company}</span>
       </div>
       <div className="flex gap-3 p-1 lg:gap-2 lg:p-2">
         <SpeakerSocials {...socials} />

src/app/page.tsx

@@ -1,4 +1,5 @@
 // import Tweets from "@/app/components/Tweets/Tweets";
+import Navbar from "@/components/Navbar";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import "yet-another-react-lightbox/styles.css";
 import AdditionalPlans from "./components/AdditionalPlans";
@@ -7,15 +8,14 @@ import ConferenceTicket from "./components/ConferenceTicket/ConferenceTicket";
 import CountDown from "./components/CountDown";
 import Footer from "./components/Footer";
 import Hero from "./components/Hero/Hero";
-import Navbar from "@/components/Navbar";
 import Participants from "./components/Participants/Participants";
 import Speakers from "./components/Speakers/Speakers";
 import Timeline from "./components/Timeline";
 
 export default function Home() {
   return (
     <>
-      <main>
+      <main className="overflow-x-hidden">
         <Navbar />
         <Hero />
         <CountDown />