feat: create WhatWeDo section on philosophy page

nextjs-app/app/about/philosophy/page.tsx

@@ -1,5 +1,6 @@
 import Breadcrumb from "@/components/common/Breadcrumb";
 import MarqueeTitle from "@/components/common/MarqueeTitle";
+import WhatWeDoPhilosophy from "@/components/pages/about/philosophy/WhatWeDoPhilosophy";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -11,6 +12,7 @@ export default async function PhilosophyPage() {
     <div>
       <Breadcrumb items={["HOME", "關於曼陀號", "曼陀號理念"]} />
       <MarqueeTitle zhTitle="曼陀號理念" enTitle="Philosophy" />
+      <WhatWeDoPhilosophy />
     </div>
   );
 }

nextjs-app/app/page.tsx

@@ -1,5 +1,5 @@
 import { METADATA } from "@/constants/metadata";
-import WhatWeDo from "@/components/pages/main/WhatWeDo";
+import WhatWeDoHomepage from "@/components/pages/main/WhatWeDoHomepage";
 import StayUpdated from "@/components/pages/main/StayUpdated";
 import Partners from "@/components/pages/main/Partners";
 import WhatWeBring from "@/components/pages/main/WhatWeBring";
@@ -16,7 +16,7 @@ export default async function HomePage() {
   return (
     <div>
       <OurImpact />
-      <WhatWeDo />
+      <WhatWeDoHomepage />
       <WhatWeBring />
       <WhoWeAre />
       <Testimonial />

nextjs-app/components/pages/about/philosophy/WhatWeDoPhilosophy.tsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+import { WHAT_WE_DO } from "@/constants/what-we-do";
+
+const WhatWeDoPhilosophy = () => (
+  <section className="px-5 md:px-10  py-[72px] md:py-[120px] bg-blue-8">
+    <div className="mx-auto text-center space-y-11">
+      <div className="flex flex-col items-center space-y-7">
+        <div className="space-y-3 text-h1 text-white">
+          <div>{WHAT_WE_DO.zhTitle}</div>
+          <div>{WHAT_WE_DO.enTitle}</div>
+        </div>
+        <Image
+          src={WHAT_WE_DO.logo.src}
+          alt={WHAT_WE_DO.logo.alt}
+          width={120}
+          height={120}
+        />
+        <div className="max-w-[684px] text-subtitle-lg text-white whitespace-break-spaces">
+          {WHAT_WE_DO.description}
+        </div>
+      </div>
+    </div>
+  </section>
+);
+
+export default WhatWeDoPhilosophy;

nextjs-app/components/pages/main/WhatWeDoHomepage.tsx

@@ -0,0 +1,44 @@
+import Image from "next/image";
+import Link from "next/link";
+import Button from "@/components/common/Button/Button";
+import { WHAT_WE_DO } from "@/constants/what-we-do";
+
+const WhatWeDoHomepage = () => (
+  <section className="px-5 md:px-10  py-[72px] md:py-[120px]">
+    <div className="mx-auto text-center space-y-11">
+      <div className="space-y-8">
+        <div className="space-y-3">
+          <h2 className="text-h4 font-semibold text-yellow-6">
+            {WHAT_WE_DO.zhTitle}
+          </h2>
+          <h3 className="text-h1-title font-eb-garamond text-blue-8">
+            {WHAT_WE_DO.enTitle}
+          </h3>
+        </div>
+        <Image
+          src="/images/title-symbol-line.png"
+          alt="title-symbol-line"
+          width={57}
+          height={5}
+          className="mx-auto mb-9"
+        />
+      </div>
+      <div className="flex flex-col items-center space-y-7">
+        <Image
+          src={WHAT_WE_DO.logo.src}
+          alt={WHAT_WE_DO.logo.alt}
+          width={120}
+          height={120}
+        />
+        <div className="max-w-[684px] text-subtitle-lg text-neutral-10 whitespace-break-spaces">
+          {WHAT_WE_DO.description}
+        </div>
+        <Button variant="filled" color="blue">
+          <Link href="/about/philosophy">{WHAT_WE_DO.buttonText}</Link>
+        </Button>
+      </div>
+    </div>
+  </section>
+);
+
+export default WhatWeDoHomepage;

nextjs-app/constants/what-we-do.ts

@@ -0,0 +1,7 @@
+export const WHAT_WE_DO = {
+  zhTitle: "曼陀號領航計劃",
+  enTitle: "The MentorShip Program",
+  description: `「曼陀號領航計畫」源自英文單字「Mentorship」，象徵我們共同乘坐一艘船，在職涯這片茫茫大海中，彼此交流朝理想的航道前進。\n我們致力打造水平與垂直的交流互動，提供同職能 / 跨職能、經驗豐富 / 初出茅廬的參加者跨出舒適圈的機會，激盪職涯、甚至人生的不同可能性。`,
+  buttonText: "了解曼陀號使命願景",
+  logo: { src: "/images/program-logo.png", alt: "program-logo" },
+};