PSE Landing Page Banner

src/app/page.tsx

@@ -1,15 +1,14 @@
-"use client";
-
+import PSEBanner from "@/components/landing/PSEBanner";
 import Principles from "@/components/landing/Principles";
+import OurMission from "@/components/landing/OurMission";
 
 const Home = () => {
   return (
-    <div className="flex h-screen w-screen items-center justify-center">
-      {/*<JoinUsButton
-        link="https://docs.google.com/forms/d/e/1FAIpQLSco0HkuBMDgfyNt2JmmyuYf9OYI5aGxlGIkl4B9omNPD74zWw/viewform"
-        text="JOIN US!"
-        color="bg-pse-yellow-100"
-      />*/}
+    <div className="h-screen w-screen flex-col">
+      <PSEBanner />
+      <div className="m-8">
+        <OurMission />
+      </div>
       <Principles />
     </div>
   );

src/components/landing/Button.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+
+interface ButtonProps {
+  link: string;
+  text: string;
+  color: string;
+}
+
+const Button = ({ link, text, color }: ButtonProps) => {
+  return (
+    <div className="relative inline-flex justify-center">
+      <Link
+        href={link}
+        className={`font-pse-maitree relative h-full w-full rounded-xl ${color} text-pse-black-100 px-13 py-3 text-[30px] tracking-wider`}
+      >
+        {text}
+      </Link>
+    </div>
+  );
+};
+
+export default Button;

src/components/landing/PSEBanner.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Button from "@/components/landing/Button";
+import PSEBg from "@/public/landing/pse_bg.webp";
+import Image from "next/image";
+
+const PSEBanner = () => {
+  return (
+    <div
+      className={`relative flex h-[309px] w-full flex-col items-center justify-center overflow-clip transition-transform duration-300 ease-out sm:h-[359px] md:h-[409px] lg:h-[459px]`}
+    >
+      <Image
+        src={PSEBg}
+        alt="PSE Background"
+        className="absolute inset-0 top-[15px] -z-10 flex w-full scale-140 object-cover transition-transform duration-300 ease-out sm:-top-[20px] sm:scale-120"
+      />
+      <div className="bg-pse-purple-300/75 absolute inset-0 w-full"></div>
+      <p className="font-pse-crimson-text scale-50 text-center text-[125px] whitespace-nowrap text-white transition-transform duration-300 ease-out sm:scale-60 md:scale-75 lg:scale-100">
+        Pi Sigma Epsilon
+      </p>
+      <p className="font-pse-maitree z-10 -mt-18 scale-50 text-center text-[40px] whitespace-nowrap text-white transition-transform duration-300 ease-out sm:-mt-16 sm:scale-60 md:-mt-10 md:scale-75 lg:-mt-6 lg:scale-100">
+        University of California, Riverside Chapter
+      </p>
+      <div className="relative z-10 mt-0 scale-80 transition-transform duration-300 ease-out sm:mt-2 sm:scale-90 md:mt-8 md:scale-100 lg:mt-10 lg:scale-110">
+        <Button
+          link="https://docs.google.com/forms/d/e/1FAIpQLSco0HkuBMDgfyNt2JmmyuYf9OYI5aGxlGIkl4B9omNPD74zWw/viewform"
+          text="JOIN US!"
+          color="bg-pse-yellow-100"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PSEBanner;