Made the Contacts into its own section

src/app/directory/[id]/page.tsx

@@ -2,6 +2,7 @@ import Header from '@src/components/BaseHeader';
 import OrgHeader from '@src/components/OrgHeader';
 import OrgInfoSegment from '@src/components/OrgInfoSegment';
 import OrgUpcomingEvents from '@src/components/OrgUpcomingEvents';
+import OrgContactLinks from '@src/components/OrgContactLinks';
 import { api } from '@src/trpc/server';
 import { db } from '@src/server/db';
 import { eq } from 'drizzle-orm';
@@ -18,6 +19,7 @@ const OrganizationPage = async ({ params }: { params: { id: string } }) => {
       <div className="mb-5 flex flex-col space-y-4 px-3">
         <OrgHeader club={club} />
         <OrgInfoSegment club={club} />
+        <OrgContactLinks club={club} />
         <OrgUpcomingEvents clubId={club.id} />
       </div>
     </main>

src/components/OrgContactLinks.tsx

@@ -0,0 +1,55 @@
+import Image from 'next/image';
+import ContactButtons from './ContactButtons';
+import type {
+  SelectClub,
+  SelectContact as Contacts,
+} from '@src/server/db/models';
+import JoinButton from './JoinButton';
+import { getServerAuthSession } from '@src/server/auth';
+import Link from 'next/link';
+import { api } from '@src/trpc/server';
+
+type Club = SelectClub & {
+  contacts?: Contacts[];
+  tags: string[];
+};
+const OrgContactLinks = async ({ club }: { club: Club }) => {
+  const session = await getServerAuthSession();
+  const memberType = await api.club.memberType({ id: club.id });
+  return (
+    <div className="relative">
+      <div className="h-full w-full">
+        <Image
+          src={'/images/lightBlueBG.png'}
+          alt="Picture of the club"
+          style={{
+            width: '100%',
+            height: 'auto',
+          }}
+          height={150}
+          width={450}
+          className="rounded-lg object-cover"
+          priority
+        />
+      </div>
+      <div className="absolute left-0 top-0 h-full w-full">
+        <div className="flex h-full w-full p-8 flex-row">
+          <div className="flex h-full flex-col justify-center">
+            <h1
+              className={`w-fit rounded-full p-2 text-center font-bold text-customBlue ${
+                club.name.length > 10 ? 'text-2xl' : 'text-4xl'
+              }`}
+            >
+              {"Contact Information"}
+            </h1>
+          </div>
+          <div className="ml-auto flex h-min flex-row items-center gap-x-12 self-center">
+            <ContactButtons contacts={club.contacts || []} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrgContactLinks;

src/components/OrgHeader.tsx

@@ -43,15 +43,15 @@ const OrgHeader = async ({ club }: { club: Club }) => {
                     query: { tag: tag },
                   }}
                   key={tag}
-                  className="m-2 h-min rounded-full bg-black bg-opacity-50 px-4 py-2 align-middle font-semibold text-slate-100"
+                  className="m-2 h-min rounded-full px-4 py-2 align-middle font-semibold text-slate-100 text-1xl"
                 >
                   {tag}
                 </Link>
               ))}
             </div>
             <h1
-              className={`mt-auto w-fit rounded-full bg-black bg-opacity-50 p-2 text-center font-bold text-slate-100  ${
-                club.name.length > 10 ? 'text-2xl' : 'text-4xl'
+              className={`mt-auto w-fit rounded-full p-2 text-center font-bold text-slate-100  ${
+                club.name.length > 10 ? 'text-5xl' : 'text-10xl'
               }`}
             >
               {club.name}
@@ -75,7 +75,6 @@ const OrgHeader = async ({ club }: { club: Club }) => {
                 />
               </>
             )}
-            <ContactButtons contacts={club.contacts || []} />
           </div>
         </div>
       </div>

tailwind.config.cjs

@@ -10,6 +10,7 @@ const config = {
         blue: {
           primary: '#3361FF',
         },
+        customBlue: '#4A72FE',
       },
       backgroundColor: {
         events: '#FF6633',