Add Speakers section

README.md

@@ -1,6 +1,15 @@
 This repository contains FrontChapter`s website source code.
 
-## Contributors
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
+[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
+
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+
+## Contributors ✨
+
+Thanks goes to these wonderful people
+([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->
@@ -19,3 +28,7 @@ This repository contains FrontChapter`s website source code.
 <!-- prettier-ignore-end -->
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the
+[all-contributors](https://github.com/all-contributors/all-contributors)
+specification. Contributions of any kind welcome!

src/app/components/Sponsers/Sponsers.tsx → src/app/components/Sponsors/Sponsors.tsx

@@ -1,8 +1,8 @@
 import { Section } from "@/components/ui/section";
-import sponsersData from "@/configs/sponsersData";
+import { SponsorsData } from "@/configs/sponsorsData";
 import Image from "next/image";
 
-export default function Sponsers() {
+export default function Sponsors() {
   return (
     <Section>
       <div className="mx-auto flex max-w-container flex-col items-center gap-14 text-center">
@@ -12,18 +12,13 @@ export default function Sponsers() {
           </h2>
         </div>
         <div className="flex flex-wrap items-center justify-center gap-8">
-          {sponsersData.map((sponser, index) => (
+          {SponsorsData.map(({ image, title }, index) => (
             <div className="flex items-center gap-2" key={index}>
               <div className="border-2 border-gray-800 p-1">
-                <Image
-                  src={sponser.image}
-                  width={21}
-                  height={21}
-                  alt={sponser.title}
-                />
+                <Image src={image} width={21} height={21} alt={title} />
               </div>
 
-              <span className="font-bold">{sponser.title}</span>
+              <span className="font-bold">{title}</span>
             </div>
           ))}
         </div>

src/app/components/Sponsers/sponsers.d.ts → src/app/components/Sponsors/sponsors.d.ts

@@ -1,4 +1,4 @@
-export type SponsersDataType = {
+export type SponsorsDataType = {
   title: string;
   image: string;
 };

src/app/components/speakers/Speaker.tsx

@@ -0,0 +1,64 @@
+import type { ISpeakerInfo } from "./Speakers.d";
+import Image from "next/image";
+
+const Speaker = ({ speakerInfo }: { speakerInfo: ISpeakerInfo }) => {
+  const { name, role, company, imageUrl } = speakerInfo;
+  return (
+    <div className="speaker-card flex w-[138px] flex-col gap-[12px]">
+      {/* speaker picture */}
+      <div className="relative flex items-center justify-center rounded-[8px] p-[5px]">
+        {/* Gradient */}
+        <div
+          className="absolute inset-0 z-0 rounded-md"
+          style={{
+            background:
+              "radial-gradient(82.48% 67.73% at 8.62% 87.5%, #ECD8C6 0%, #A77344 49.5%, #222223 100%)",
+          }}
+        />
+        {/* Black Background */}
+        <div className="absolute inset-[1px] z-0 rounded-md bg-background dark:bg-background-dark" />
+
+        <Image
+          src={imageUrl ?? null}
+          width={100}
+          height={100}
+          alt={name}
+          className="rounded-inherit z-[1] w-[128px]"
+        />
+      </div>
+      {/* info section*/}
+      <div className="info-wrapper flex flex-col items-center font-[400]">
+        {/* speaker name*/}
+        <span className="text-[20px]">{name}</span>
+        {/* speaker role (stack)*/}
+        <span className="w-max text-[16px] text-muted-foreground dark:text-muted-foreground-dark">
+          {role}
+        </span>
+        {/* speaker company details */}
+        <div className="mt-[12px] flex items-center gap-[16px]">
+          <span className="text-[16px] text-muted-foreground dark:text-muted-foreground-dark">
+            در
+          </span>
+          <a
+            href={company.websiteLink}
+            target="_blank"
+            className="flex items-center gap-[4px]"
+          >
+            <div className="flex h-[28px] w-[28px] items-center justify-center rounded-[2px] border border-[1px] border-border p-[2px] dark:border-border-dark">
+              <Image
+                width={100}
+                height={100}
+                src={company.logo ?? null}
+                alt={company.name}
+                className="w-[20px]"
+              />
+            </div>
+            <span className="text-[14px] font-[500]">{company.name}</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Speaker;

src/app/components/speakers/Speakers.d.ts

@@ -0,0 +1,10 @@
+export interface ISpeakerInfo {
+  imageUrl: string;
+  role: string;
+  name: string;
+  company: {
+    logo: string;
+    name: string;
+    websiteLink: string;
+  };
+}

src/app/components/speakers/Speakers.tsx

@@ -0,0 +1,20 @@
+import Speaker from "./Speaker";
+import { speakersData } from "@/configs/speakers";
+
+const Speakers = () => {
+  return (
+    <section
+      id="speakers"
+      className="flex flex-col items-center gap-12 px-[32px] py-20"
+    >
+      <h3 className="text-center text-[48px] font-[800]">سخنرانان همایش</h3>
+      <div className="speakers-wrapper flex max-w-[1080px] flex-wrap justify-center gap-x-[30px] gap-y-[20px]">
+        {speakersData.map((info, idx) => (
+          <Speaker key={idx} speakerInfo={info} />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default Speakers;

src/app/page.tsx

@@ -1,13 +1,15 @@
-import Sponsers from "./components/Sponsers/Sponsers";
+import Sponsors from "./components/Sponsors/Sponsors";
 import FAQ from "@/app/components/FAQ/FAQ";
 import TweetSection from "@/app/components/TweetSection/TweetSection";
+import Speakers from "@/app/components/speakers/Speakers";
 
 export default function Home() {
   return (
     <>
+      <Speakers />
       <TweetSection />
       <FAQ />
-      <Sponsers />
+      <Sponsors />
     </>
   );
 }

src/configs/speakers.ts

@@ -0,0 +1,65 @@
+import type { ISpeakerInfo as ISpeakerPerson } from "@/app/components/speakers/Speakers.d";
+
+export const speakersData: ISpeakerPerson[] = [
+  {
+    name: "عرفان عباسی",
+    role: "مدیر فنی",
+    imageUrl: "/images/speakers/profile-picture/erfan-abbasi.jpeg",
+    company: {
+      name: " کارگزاری مفید",
+      logo: "/images/speakers/company-logo/mofid.png",
+      websiteLink: "https://www.emofid.com/",
+    },
+  },
+  {
+    name: "مجتبی افراز",
+    role: "مهندس نرم‌افزار",
+    imageUrl: "/images/speakers/profile-picture/mojtaba-afraz.jpeg",
+    company: {
+      name: "تپسل",
+      logo: "/images/speakers/company-logo/tapsell.png",
+      websiteLink: "https://tapsell.com/",
+    },
+  },
+  {
+    name: "امیرحسین دارابی",
+    role: "منتور و مدرس",
+    imageUrl: "/images/speakers/profile-picture/amirhossein-darabi.jpeg",
+    company: {
+      name: "کوئرا",
+      logo: "/images/speakers/company-logo/quera.png",
+      websiteLink: "https://quera.org/",
+    },
+  },
+  {
+    name: "محمد باقر عبیات",
+    role: "بنیانگذار",
+    imageUrl: "/images/speakers/profile-picture/mohammad-baqer-abiat.jpeg",
+    company: {
+      name: "TinyLibs",
+      logo: "/images/speakers/company-logo/tiny-libs.png",
+      websiteLink: "https://tinylibs.github.io/",
+    },
+  },
+  {
+    name: "مسعود بیگی",
+    role: "CTO",
+    imageUrl: "/images/speakers/profile-picture/masoud-beygi.jpeg",
+    company: {
+      name: "رسمیو",
+      logo: "/images/speakers/company-logo/rasmio.png",
+      websiteLink: "https://rasmio.com/",
+    },
+  },
+
+  {
+    name: "سجاد منشی",
+    role: "مهندس نرم‌افزار",
+    imageUrl: "/images/speakers/profile-picture/sajjad-maneshi.jpeg",
+    company: {
+      name: "Bazaro",
+      logo: "/images/speakers/company-logo/bazaro.png",
+      websiteLink: "https://www.bazaro.se/",
+    },
+  },
+];

src/configs/sponsersData.ts → src/configs/sponsorsData.ts

@@ -1,6 +1,6 @@
-import { SponsersDataType } from "@/app/components/Sponsers/sponsers";
+import { SponsorsDataType } from "@/app/components/Sponsors/sponsors";
 
-export const sponsersData: SponsersDataType[] = [
+export const SponsorsData: SponsorsDataType[] = [
   {
     title: "دیجی کالا",
     image: "/images/company-logos/digikala.png",
@@ -19,4 +19,4 @@ export const sponsersData: SponsersDataType[] = [
   },
 ];
 
-export default sponsersData;
+export default SponsorsData;