Add partner-with-us page to landing page (#357)

feat: add Partner With Us and Contact Us sections, integrate Mailgun API, and refactor code

src/app/auth/layout.tsx

@@ -8,28 +8,27 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <Link
         href={"/"}
         className={
-          "rounded-full absolute  top-0 left-4 transform  border-4 border-primary  z-40"
+          "rounded-full absolute top-0 left-4 transform border-4 border-primary z-40"
         }
       >
         <Image
           src="/images/logo_circle.png"
           width={80}
           height={80}
-          className=""
           alt="UBC Launch Pad logo"
         />
       </Link>
       <div className="w-screen h-screen bg-primary flex justify-center items-center">
         <div className={"fixed space-flow top-0 left-0 w-screen h-screen"}>
-          <div className={"w-[300px]  h-[300px] absolute  right-10 top-0"}>
+          <div className={"w-[300px] h-[300px] absolute right-10 top-0"}>
             <Image
               src={"/images/assets/planet1.svg"}
               alt={"planet"}
               layout={"fill"}
               style={{ objectFit: "contain" }}
             />
           </div>
-          <div className={"w-[267px] h-[200px] absolute  left-40 bottom-10"}>
+          <div className={"w-[267px] h-[200px] absolute left-40 bottom-10"}>
             <Image
               src={"/images/assets/planet2.svg"}
               alt={"planet"}
@@ -47,7 +46,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <div className="text-4xl flex-col flex gap-6 justify-center items-center">
           <div
             className={
-              "  z-40 border-background-600  p-10 rounded-xl flex-col w-full max-w-4xl flex gap-10 justify-center items-center"
+              "z-40 border-background-600 p-10 rounded-xl flex-col w-full max-w-4xl flex gap-10 justify-center items-center"
             }
           >
             {children}

src/app/auth/page.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import { login } from "./actions";
 import { Button } from "@/components/primitives/button";
 
@@ -7,7 +6,7 @@ const text = {
   login: "Log in With Google",
 };
 
-export default function Authpage() {
+export default function authPage() {
   return (
     <div className="flex flex-col relative shadow justify-center items-center  w-full  p-10 rounded-xl max-h-full max-w-lg h-[600px]    gap-10">
       <div className="flex flex-col items-center gap-4 w-full"></div>

src/app/page.tsx

@@ -12,6 +12,7 @@ import { Button } from "@/components/primitives/button";
 import HeroSection from "@/components/general/heroSection";
 import MemberRoles from "@/components/general/memberRoles";
 import ProjectSection from "@/components/general/projectSection";
+import PartnerSection from "@/components/general/partnerSection";
 
 // const refreshProjects = async () => {
 //     const res = await fetch(
@@ -34,6 +35,10 @@ const text = {
   joinUsText:
     "We are looking for students passionate about tech with varying levels of experience to join our teams! ",
   joinUsButton: "Join Our Team",
+  partnerWithUsTitle: "Partner with us 🤝",
+  partnerWithUsSubtitle:
+    "Reach out to us through email or social media! You can also connect with us through [email protected]",
+  partnerWithUsButton: "Contact us",
 };
 
 const lpImageProps = {
@@ -107,6 +112,24 @@ export default async function Home() {
       >
         <ProjectSection projects={projects ?? []} />
       </section>
+      <section className="flex pb-8 flex-col md:flex-row items-start justify-between max-w-[1740px] px-8 w-full">
+        <div className="flex flex-col text-center items-center lg:items-start py-10 pl-0 lg:pl-10 md:pr-10 w-full">
+          <h1
+            className={`text-4xl font-bold ${nunitoSans.variable} font-sans pt-5`}
+          >
+            {text.partnerWithUsTitle}
+          </h1>
+          <p className="text-white text-center lg:text-left py-10">
+            {text.partnerWithUsSubtitle}
+          </p>
+          <Link href="/contact-us">
+            <Button className="p-3" size={"xl"} icon>
+              <span className="text-lg px-4">{text.partnerWithUsButton}</span>
+            </Button>
+          </Link>
+        </div>
+        <PartnerSection />
+      </section>
       <FaqSection faqs={faqs} />
       <MailingList />
       <ExecSection />

src/components/general/infoCard.tsx → src/components/general/memberRoleCard.tsx

@@ -1,10 +1,14 @@
-interface InfoCardProps {
+interface memberRoleCardProps {
   icon: React.ReactNode;
   title: string;
   description: string;
 }
 
-export default function InfoCard({ icon, title, description }: InfoCardProps) {
+export default function memberRoleCard({
+  icon,
+  title,
+  description,
+}: memberRoleCardProps) {
   return (
     <div className="flex items-center bg-secondary text-white mb-4 p-2 rounded-lg w-full">
       <div className="flex-shrink-0 font-size-20 p-2 w-fit rounded-lg">

src/components/general/memberRoles.tsx

@@ -2,7 +2,7 @@
 import Developer from "./../../../public/icons/developer.svg";
 import Designer from "./../../../public/icons/designer.svg";
 import Strategist from "./../../../public/icons/strategist.svg";
-import InfoCard from "./infoCard";
+import InfoCard from "./memberRoleCard";
 import useIsMobile from "@/app/lib/hooks/useIsMobile";
 import { useMemo } from "react";
 

src/components/general/partnerCard.tsx

@@ -0,0 +1,25 @@
+interface PartnerCardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+export default function PartnerCard({
+  icon,
+  title,
+  description,
+}: PartnerCardProps) {
+  return (
+    <div className="flex flex-col m-2 text-white sm:items-start items-center p-2 rounded-lg w-full">
+      <div className="font-size-20 p-2 w-fit rounded-lg">{icon}</div>
+      <div className="flex flex-col items-left">
+        <h2 className="text-indigo-400 break-normal md:px-1 md:py-2 min-w-24 md:min-w-44 lg:min-w-64 md:mt-2 md:text-2xl sm:text-left text-center">
+          {title}
+        </h2>
+        <p className="text-white mt-2 lg:text-base sm:text-left text-center">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/general/partnerSection.tsx

@@ -0,0 +1,40 @@
+"use client";
+import PartnerCard from "./partnerCard";
+import Company from "./../../../public/icons/company.svg";
+import Mentor from "./../../../public/icons/mentor.svg";
+import useIsMobile from "@/app/lib/hooks/useIsMobile";
+import { useMemo } from "react";
+
+export default function MemberRoles() {
+  const BREAKPOINT = 768;
+  const isMobile = useIsMobile(BREAKPOINT);
+  const SCALE = isMobile ? 0.75 : 1; // icons should be smaller on mobile devices
+  const roles = useMemo(
+    () => [
+      {
+        icon: <Company width={60 * SCALE} height={60 * SCALE} />,
+        title: "For Companies and NPOs",
+        description:
+          "We are looking for companies and non-profits with exciting projects to work with. If you have a project for us, please reach out!",
+      },
+      {
+        icon: <Mentor width={60 * SCALE} height={60 * SCALE} />,
+        title: "For Mentors",
+        description:
+          "We are looking for experienced mentors who want to share their expertise with a community of aspiring developers and designers. Interested? Please get in touch!",
+      },
+    ],
+    [SCALE],
+  );
+
+  return (
+    <div
+      className="flex sm:flex-row flex-col items-center lg:items-start sm:px-28 px-8 w-full"
+      id={"partner"}
+    >
+      {roles.map((role, index) => {
+        return <PartnerCard key={index} {...role} />;
+      })}
+    </div>
+  );
+}

src/lib/data/generalData.ts

@@ -59,10 +59,10 @@ export const navItems: NavBarItem[] = [
     name: "Projects",
     url: "#projects",
   },
-  // {
-  //     name: "Be a Partner",
-  //     url: "#partner",
-  // },
+  {
+    name: "Be a Partner",
+    url: "#partner",
+  },
   // {
   //     name: "Our Team",
   //     url: "#team",

src/lib/utils/forms/email.ts

@@ -15,15 +15,15 @@ type MailConfig = {
 const DOMAIN = process.env.MAILGUN_DOMAIN || "mg.ubclaunchpad.com";
 const API_KEY = process.env.MAILGUN_API_KEY || "";
 
-const mg = new Mailgun(formData);
-const mailgun = mg.client({
+const mailgun = new Mailgun(formData);
+const mg = mailgun.client({
   username: "api",
   key: API_KEY,
 });
 
 export async function sendEmail(config: MailConfig) {
   try {
-    const res = await mailgun.messages.create(DOMAIN, {
+    const res = await mg.messages.create(DOMAIN, {
       from: `${config.fromName} <${config.from}>`,
       to: [config.to],
       subject: config.subject,