encoach_landingpage/src/templates/Services.tsx

import Navbar from "@/components/Navbar";
import clsx from "clsx";
import Title from "@/components/Title";
import {
  BsBook,
  BsBlockquoteLeft,
  BsFillPencilFill,
  BsMic,
  BsSoundwave,
  BsBookmarkStar,
  BsCheck2Circle,
  BsEarbuds,
  BsFileBarGraph,
  BsBank,
} from "react-icons/bs";
import translation from "@/translation/services.json";
import Footer from "@/components/Footer";

interface Props {
  language: "en" | "ar";
}

interface SectionStruct {
  id: string;
  title: string;
  description: string;
  bullets: {
    title: string;
    values: string[];
    icon: any;
  }[];
}

export default function About({ language }: Props) {
  const struct = [
    {
      id: "english_writing_evaluation",
      title: translation.english_writing_evaluation.title[language],
      description: translation.english_writing_evaluation.description[language],
      bullets: [
        {
          title: translation.english_writing_evaluation.evaluation[language],
          values:
            translation.english_writing_evaluation.evaluation_values[language],
          icon: BsBlockquoteLeft,
        },
        {
          title: translation.english_writing_evaluation.acquire[language],
          values:
            translation.english_writing_evaluation.acquire_values[language],
          icon: BsFillPencilFill,
        },
      ],
    },
    {
      id: "speaking_practice_evaluation",
      title: translation.speaking_practice_evaluation.title[language],
      description:
        translation.speaking_practice_evaluation.description[language],
      bullets: [
        {
          title: translation.speaking_practice_evaluation.evaluation[language],
          values:
            translation.speaking_practice_evaluation.evaluation_values[
              language
            ],
          icon: BsMic,
        },
        {
          title: translation.speaking_practice_evaluation.acquire[language],
          values:
            translation.speaking_practice_evaluation.acquire_values[language],
          icon: BsBook,
        },
      ],
    },
    {
      id: "reading_and_listening",
      title: translation.reading_and_listening.title[language],
      description: translation.reading_and_listening.description[language],
      bullets: [
        {
          title: translation.reading_and_listening.evaluation[language],
          values: translation.reading_and_listening.evaluation_values[language],
          icon: BsSoundwave,
        },
        {
          title: translation.reading_and_listening.acquire[language],
          values: translation.reading_and_listening.acquire_values[language],
          icon: BsBookmarkStar,
        },
      ],
    },
    {
      id: "practice_tests",
      title: translation.practice_tests.title[language],
      description: translation.practice_tests.description[language],
      bullets: [
        {
          title: translation.practice_tests.evaluation[language],
          values: translation.practice_tests.evaluation_values[language],
          icon: BsCheck2Circle,
        },
        {
          title: translation.practice_tests.acquire[language],
          values: translation.practice_tests.acquire_values[language],
          icon: BsEarbuds,
        },
      ],
    },
    {
      id: "progress_tracking",
      title: translation.progress_tracking.title[language],
      description: translation.progress_tracking.description[language],
      bullets: [
        {
          title: translation.progress_tracking.advantages[language],
          values: translation.progress_tracking.advantages_values[language],
          icon: BsFileBarGraph,
        },
      ],
    },
  ];

  const final_struct = [
    {
      id: "unified_english_level_test",
      title: translation.unified_english_level_test.title[language],
      description: translation.unified_english_level_test.description[language],
      bullets: [
        {
          title: translation.unified_english_level_test.advantages[language],
          values:
            translation.unified_english_level_test.advantages_values[language],
          icon: BsBank,
        },
      ],
    },
    {
      id: "customized_packages",
      title: translation.customized_packages.title[language],
      description: translation.customized_packages.description[language],
      bullets: [],
    },
  ];

  const renderStruct = (data: SectionStruct[], getBackgroundColor: (index: number) => string) =>
    data.map((section, index) => (
      <section
        id={section.id}
        key={section.id}
        className={`w-full ${getBackgroundColor(index)}`}
      >
        <div
          className={clsx(
            "w-full flex flex-col -md:items-center -md:pb-16 gap-8 p-8 md:p-20 container mx-auto",
            language === "ar" && "text-right"
          )}
        >
          <div
            className={clsx("w-full flex", language === "ar" && "justify-end")}
          >
            <Title className="max-w-fit">{section.title}</Title>
          </div>
          <span className="text-lg">{section.description}</span>
          <div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
            {section.bullets.map((bullet) => (
              <div
                key={bullet.title}
                className={clsx(
                  "flex gap-8 items-center",
                  language === "ar" && "flex-row-reverse"
                )}
              >
                <div className="bg-mti-rose-ultralight border border-mti-rose-light p-4 rounded-xl flex items-center justify-center w-fit h-fit">
                  {bullet.icon && (
                    <bullet.icon className="text-mti-rose-light w-6 h-6" />
                  )}
                </div>
                <div className="flex flex-col gap-2">
                  <span className="text-lg font-bold text-mti-rose-light">
                    {bullet.title}
                  </span>
                  <ul className="list-disc gap-2 flex flex-col">
                    {bullet.values.map((value) => (
                      <li key={value}>{value}</li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    ));

  return (
    <main className="h-screen w-full bg-white text-mti-black flex flex-col">
      <Navbar currentPage="/services" language={language} />
      <section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
        <div className="w-full h-full flex flex-col items-center justify-center">
          <Title>{translation.services[language]}</Title>
        </div>
      </section>
      {renderStruct(
        struct,
        (index: number) => `bg-${index % 2 ? "mti-gray-seasalt" : "white"}`
      )}
      <section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
        <div className="w-full h-full flex flex-col items-center justify-center">
          <Title className="max-w-fit">
            {translation.corporate_educational_institutions[language]}
          </Title>
        </div>
      </section>
      {renderStruct(
        final_struct,
        (index: number) => `bg-${index % 2 ? "white" : "mti-gray-seasalt"}`
      )}
      <Footer language={language} />
    </main>
  );
}