Merge branch 'main' into feat/blog-hero

src/_components/ForNPOs/Hero.jsx

@@ -0,0 +1,35 @@
+import React from "https://esm.sh/react";
+
+export default function Hero({ comp }) {
+  return (
+    <section className="grow flex flex-col min-h-[700px] lg:flex-row lg:items-center relative overflow-hidden bg-primary text-white">
+      <div className="px-6 md:px-12 lg:px-32 py-8 md:py-16 lg:py-0 w-full">
+        <h1 className="font-bold text-3xl md:text-4xl lg:text-5xl leading-snug md:leading-[1.3] tracking-wide mb-4 md:mb-6 lg:mb-16 text-center lg:text-left">
+          Non-Profit Organizations
+        </h1>
+        <p className="text-lg md:text-xl lg:text-2xl leading-snug md:leading-[1.3] mb-6 md:mb-10 lg:mb-14 text-center lg:pr-40 lg:text-left">
+          We are passionate about leveraging our technical and consulting skills
+          to support your organization’s mission, free of charge!
+        </p>
+        <div className="flex flex-col md:flex-row md:justify-center lg:justify-start space-y-4 md:space-y-0 md:space-x-6">
+          <comp.Button
+            style="py-2 px-6 md:px-8 min-w-[191px] rounded-md border border-white justify-center items-center gap-2 text-white font-semibold text-base md:text-lg inline-flex hover:bg-white hover:text-primary"
+            text="Email Us"
+            redirect_url="mailto:[email protected]"
+          />
+          <comp.Button
+            style="py-2 px-6 md:px-6 min-w-[191px] rounded-md border border-white justify-center items-center gap-2 text-white font-semibold text-base md:text-lg inline-flex hover:bg-white hover:text-primary"
+            text="See our Projects"
+            redirect_url="../../projects" // FIXME: How can we avoid hardcoding the URL?
+          />
+        </div>
+      </div>
+      <div className="flex px-6 md:px-12 lg:32 grow w-full justify-center pb-12">
+        <img
+          src="../../assets/vector/hands.svg" // FIXME: Avoid absolute path?
+          alt="hands"
+        />
+      </div>
+    </section>
+  );
+}

src/_components/StudentsHero.jsx

@@ -0,0 +1,37 @@
+export default function StudentsHero({ comp }) {
+  return (
+    <section className="grow flex flex-col lg:flex-row lg:items-center lg:min-h-[42rem] bg-primary relative overflow-hidden">
+      <div className="lg:w-7/12 lg:pl-40 lg:pr-20 text-negative max-lg:w-full max-lg:px-8 max-lg:flex max-lg:flex-col max-lg:justify-center max-large:items-center">
+        <h1 className="lg:text-4xl text-7xl my-12 lg:px-0 px-10 tracking-wide max-lg:text-center">
+          <strong>Students</strong>
+        </h1>
+        <p className="lg:text-xl text-4xl mb-12 lg:px-0 px-10 tracking-wide max-lg:text-center">
+          We’re proud of the diverse membership here at Blueprint. Join us and
+          make an impact with our opportunities in product design, project
+          management, or software development!
+        </p>
+        <div className="flex space-x-6 max-lg:flex-col max-lg:space-x-0 max-lg:space-y-8 max-lg:w-full max-lg:items-center">
+          <comp.Button
+            style="px-8 py-4 rounded-lg bg-transparent border-2 font-semibold text-lg inline-block max-lg:px-12 max-lg:py-6 max-lg:text-4xl"
+            redirect_url={"https://discord.gg/G6aTAc9nFQ"}
+            text={"Join Our Discord"}
+          />
+          <comp.Button
+            style="px-8 py-4 rounded-lg bg-transparent border-2 font-semibold text-lg inline-block max-lg:px-12 max-lg:py-6 max-lg:text-4xl"
+            redirect_url={"/projects"}
+            text={"See Our Projects"}
+          />
+        </div>
+      </div>
+      <div className="lg:w-1/2 lg:pr-20 lg:pl-0 px-10 flex items-center justify-center py-8">
+        <div className="max-lg:p-8 lg:rounded-2xl lg:overflow-hidden">
+          <image
+            src="../../assets/events/students_hero.jpg"
+            alt="A photo of student Blueprint members"
+            className="w-full lg:h-full lg:object-cover max-lg:h-auto max-lg:object-contain max-lg:rounded-2xl"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}

src/_components/StudentsProjectTeam.jsx

@@ -0,0 +1,41 @@
+export default function StudentsProjectTeam({ comp }) {
+  return (
+    <section className="grow flex flex-col lg:flex-row lg:items-center lg:min-h-[42rem] relative overflow-hidden lg:pb-32">
+      <div className="lg:w-7/12 lg:pl-40 lg:pr-20 text-negative max-lg:w-full max-lg:px-8 max-lg:flex max-lg:flex-col max-lg:justify-start max-large:items-start">
+        <h2 className="font-semibold lg:text-2xl text-5xl text-black">
+          Project Teams
+        </h2>
+        <p className="bg-[#9D1535] px-2 py-1 max-w-max my-3 rounded-md text-white lg:text-xs text-lg font-medium">
+          APPLICATION REQUIRED
+        </p>
+        <p className="text-black">
+          <span className="font-bold">Purpose:</span> Work directly on projects
+          with non-profit organizations (NPOs)!
+        </p>
+        <p className="text-black">
+          <span className="font-bold">Goal:</span> Help deliver requested
+          software solutions to NPOs and contribute to our mission of creating
+          tech for social good!
+        </p>
+        <p className="text-black">
+          <span className="font-bold">Requirements:</span> Project teams are
+          year long commitments depending on the scope of the project. We are
+          looking for{" "}
+          <span className="font-bold text-[#9D1535]">
+            technical leads, project managers, developers, and designers
+          </span>{" "}
+          who can engage and collaborate within this time frame while also
+          meeting deadlines punctually.
+        </p>
+      </div>
+      <div className="lg:w-5/12 lg:pr-20 lg:pl-0 px-10 flex items-center justify-center py-8">
+        <div>
+          <image
+            src="../../assets/vector/project_team_clipart.svg"
+            alt="Clipart of three people working on a project."
+          />
+        </div>
+      </div>
+    </section>
+  );
+}

src/_includes/_layouts/ForNPOs.jsx

@@ -6,8 +6,8 @@ export default ({ comp }) => (
     </head>
     <body>
       <>
-        <h2>For Non-Profits</h2>
-        <section className="grid place-content-center"></section>
+        <comp.Navbar />
+        <comp.ForNPOs.Hero />
       </>
     </body>
   </html>