Add hidden apply page for review by other committee members

functions/index.js

@@ -211,6 +211,50 @@ exports.getLinksPage = onCall(
   },
 );
 
+// Application Database ID
+const APPLICATION_DATABASE_ID = "270dc74ea0ae803e8904e40ebe203011";
+
+// Helper function to create page properties
+function createPageProperties(pageData) {
+  const properties = {
+    Name: {
+      title: [{
+        text: { content: pageData.name }
+      }]
+    },
+    Email: {
+      email: pageData.email
+    },
+    Status: {
+      select: { name: "Pending" }
+    },
+    "Submission Date": {
+      date: { start: new Date().toISOString() }
+    }
+  };
+
+  // Add optional fields if provided
+  if (pageData.role) {
+    properties.Role = {
+      select: { name: pageData.role }
+    };
+  }
+
+  if (pageData.motivation && pageData.motivation.trim()) {
+    properties["Why are you applying?"] = {
+      rich_text: [{
+        text: { content: pageData.motivation }
+      }]
+    };
+  }
+
+  return properties;
+}
+
+
+
+
+
 // exports.setRiserData = onCall(async (req) => {
 //   console.log(req.data.name);
 //   const result = {

functions/test.js

@@ -0,0 +1,10 @@
+// Simple test file for the application API functions
+const { createNewPage, getPageByID, deletePage } = require('./index');
+
+// Test data
+const testApplicationData = {
+  name: "John Doe",
+  email: "john.doe@example.com",
+  role: "Education",
+  motivation: "I want to help organize amazing hackathons and contribute to the tech community."
+};

src/index.css

@@ -16,3 +16,11 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
+
+body {
+  padding-right: 0 !important;
+}
+
+header {
+  padding-right: 0 !important;
+}

src/layouts/Layout.tsx

@@ -94,13 +94,34 @@ const Layout = () => {
   const sponsorPills: NavbarPillProps[] = [];
 
   const blogPills: NavbarPillProps[] = [];
+
+  const joinusPills: NavbarPillProps[] = [
+    {
+      title: "Membership",
+      desc: "Become a member!",
+      Icon: FaFlag,
+      image: "/img/temp-bg.jpg",
+      link: "https://umsu.unimelb.edu.au/buddy-up/clubs/clubs-listing/join/hackmelbourne/",
+    },
+    {
+      title: "Officer Applications",
+      desc: "Apply for an officer role!",
+      Icon: FaUser,
+      image: "/img/temp-bg.jpg",
+      link: "/apply",
+    },
+  ];
 
+  // TODO: Parse empty string as "do not route" to support nav options that should ONLY offer pills.
   const nav = {
     clubname: "HackMelbourne",
     logo: "/img/HM_White_Transparent.png",
     pages: ["About", "Blog", "Calendar", "Sponsors", "Links"],
     links: ["/about/meettheteam", "/blogs", "/upcoming/calendar", "/sponsors", "upcoming/links"],
     pills: [aboutPills, linkPills, calendarPills, sponsorPills, blogPills],
+    // pages: ["About", "Blog", "Calendar", "Sponsors", "Links", "Join Us"],
+    // links: ["/about/meettheteam", "/blogs", "/upcoming/calendar", "/sponsors", "upcoming/links", "/apply"],
+    // pills: [aboutPills, linkPills, calendarPills, sponsorPills, blogPills, joinusPills],
   };
 
   const footer = {

src/layouts/Navbar.tsx

@@ -139,7 +139,7 @@ const Navbar = ({ clubname, logo, pages, links, pills }: Nav) => {
           <div className="max-w-[800px] grow rounded-md bg-black/20 backdrop-blur-md border flex justify-between items-center px-5 py-3">
             <Link to="/" className="flex items-center justify-start gap-2 font-bold" onClick={handleLinkClick}>
               <img src={logo} className="h-8 w-8"></img>
-              {clubname}
+              {/* {clubname} */}
             </Link>
             <button className="md:hidden" onClick={toggleMenu}>
               {isMenuOpen ? <CloseIcon /> : <MenuIcon />}

src/main.tsx

@@ -15,6 +15,7 @@ import Sponsors from "./routes/Sponsors";
 import HallOfFame from "./routes/HallOfFame";
 import Privacy from "./routes/Privacy";
 import Terms from "./routes/Terms";
+import Apply from "./routes/Apply";
 
 // Event Pages
 import OWeek from "./routes/eventPages/OWeek";
@@ -60,6 +61,7 @@ const router = createBrowserRouter(
       <Route path="upcoming/calendar" element={<Calendar />} />
       <Route path="upcoming/links" element={<Links />}></Route>
       <Route path="links" element={<Links />}></Route>
+      <Route path="apply" element={<Apply />}></Route>
       <Route path="sponsors" element={<Sponsors />} />
       <Route path="past" element={<Navigate to="./halloffame" replace />} />
       <Route path="past/halloffame" element={<HallOfFame />} />

src/routes/Apply.css

@@ -0,0 +1,66 @@
+.apply-banner {
+  position: relative;
+  width: 100%;
+  min-height: 600px;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 60px;
+}
+
+.apply-banner-bg {
+  position: absolute;
+  filter: brightness(25%) blur(4px);
+  inset: 0;
+  background-image: url('/img/applyBanner.jpg');
+  background-size: cover;
+  background-position: center;
+  mask-image: linear-gradient(transparent 5%, black 50%, transparent 95%);
+  z-index: 0;
+  pointer-events: none;
+}
+
+.apply-banner-content {
+  padding: 5% 0;
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  z-index: 1;
+  margin: auto;
+  width: 100vw;
+  flex-wrap: wrap;
+  gap: 30px 90px;
+  justify-content: center
+}
+
+.apply-banner-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 min(5%, 60px) 0 0;
+  justify-content: center;
+}
+
+.apply-banner-col {
+  width: 100%;
+  max-width: 480px;
+  padding-right: 30px;
+}
+
+.apply-banner-card {
+  margin-bottom: min(10%, 60px);
+  min-height: 150px;
+}
+
+.apply-banner-title {
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .apply-banner-card {
+    min-height: 0px;
+  }
+
+  .apply-banner-title {
+    font-size: 3rem !important;
+  }
+}