title page

src/app/about/page.tsx

@@ -1,10 +1,10 @@
 import WhoWeAre from "@/components/about/WhoWeAre";
 import Heading from "@/components/about/FourPillTitle";
+import Title from "@/components/Title";
 const page = () => {
   return (
     <div>
-      <WhoWeAre />
-      <Heading />
+      <Title text="About" />
     </div>
   );
 };

src/app/events/page.tsx

@@ -1,7 +1,12 @@
 import React from "react";
+import Title from "@/components/Title";
 
-const page = () => {
-  return <div></div>;
+const Events = () => {
+  return (
+    <div>
+      <Title text="Events" />
+    </div>
+  );
 };
 
-export default page;
+export default Events;

src/app/gallery/gallery.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import Title from "@/components/Title";
+
+const Gallery = () => {
+  return (
+    <div>
+      <Title text="Gallery" />
+    </div>
+  );
+};
+
+export default Gallery;

src/components/Title.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import Image from "next/image";
+import banner from "@/public/home/banner.svg";
+
+interface TitleNameProps {
+  text: string;
+}
+
+const Title: React.FC<TitleNameProps> = ({ text }) => {
+  return (
+    <div className="relative mt-1 flex items-center justify-center">
+      <div className="mr-4 mt-4 h-[.8vh] w-[20vw] bg-csa-green-100" />
+      <Image src={banner} alt="Banner" className="h-1/3 w-1/3 object-cover" />
+      <div className="absolute mt-4 flex justify-center">
+        <svg
+          width="3/4vw"
+          height="3/4vw"
+          viewBox="0 0 400 200"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            id="curve"
+            d="M50,150 Q200,10 370,150"
+            fill="transparent"
+            stroke="none"
+          />
+
+          <text
+            fill="#7C2413"
+            font-size="6.5vw"
+            font-weight="bold"
+            font-family="serif"
+          >
+            <textPath href="#curve" startOffset="50%" text-anchor="middle">
+              {text}
+            </textPath>
+          </text>
+        </svg>{" "}
+      </div>
+
+      <div className="ml-4 mt-4 h-[.8vh] w-[20vw] bg-csa-green-100" />
+    </div>
+  );
+};
+
+export default Title;