Added a page for closed applications

Author: Meatball1601

Source code/APPLICATION_CONFIG_README.md

@@ -0,0 +1,64 @@
+# Application Configuration System
+
+This system allows you to easily control whether applications are open or closed across the entire website by changing just one setting.
+
+## How to Use
+
+### To Open Applications:
+1. Open `src/config/applicationConfig.ts`
+2. Set `googleFormUrl` to your Google Form URL:
+   ```typescript
+   googleFormUrl: "https://forms.google.com/your-form-id",
+   ```
+
+### To Close Applications:
+1. Open `src/config/applicationConfig.ts`
+2. Set `googleFormUrl` to `null` or empty string:
+   ```typescript
+   googleFormUrl: null,
+   // or
+   googleFormUrl: "",
+   ```
+
+## What Happens
+
+- **When applications are OPEN**: All "Join Us" buttons will link to your Google Form and open in a new tab
+- **When applications are CLOSED**: All "Join Us" buttons will link to the "Application Period Closed" page
+
+## Affected Components
+
+The following components automatically use this configuration:
+- Desktop Navigation
+- Mobile Navigation  
+- Hero Section
+- Footer
+- Contact Page
+- Team Member cards (for open positions)
+- Project cards (for recruiting projects)
+
+## File Location
+
+The configuration is located at:
+```
+src/config/applicationConfig.ts
+```
+
+## Example Configuration
+
+```typescript
+export const APPLICATION_CONFIG = {
+  // Set this to your Google Form URL when applications are open
+  googleFormUrl: "https://forms.google.com/your-actual-form-id",
+  
+  // The system automatically detects if applications are open
+  // and routes to the appropriate destination
+};
+```
+
+## Benefits
+
+- ✅ **Single source of truth** - Change one setting, affects entire site
+- ✅ **Automatic routing** - No need to update multiple files
+- ✅ **Professional fallback** - Shows proper "Application Closed" page when needed
+- ✅ **Easy maintenance** - No need to remember all the places to update
+- ✅ **Consistent behavior** - All application links behave the same way 

…e code/public/media/events/Asip_2025.png …e code/public/media/events/Asip_2024.pngSource code/public/media/events/Asip_2025.png renamed to Source code/public/media/events/Asip_2024.png Source code/public/media/events/Asip_2025.png renamed to Source code/public/media/events/Asip_2024.png

@@ -13,6 +13,7 @@ import Team from "./pages/Team";
 import Alumni from "./pages/Alumni";
 import Contact from "./pages/Contact";
 import Events from "./pages/Events";
+import ApplicationClosed from "./pages/ApplicationClosed";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -33,6 +34,7 @@ const App = () => (
             <Route path="/alumni" element={<Alumni />} />
             <Route path="/events" element={<Events />} />
             <Route path="/contact" element={<Contact />} />
+            <Route path="/apply" element={<ApplicationClosed />} />
             <Route path="*" element={<NotFound />} />
           </Routes>
         </main>

Source code/src/App.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { APPLICATION_CONFIG } from "@/config/applicationConfig";
+
+interface ApplicationLinkProps {
+  children: React.ReactNode;
+  className?: string;
+  variant?: "button" | "link";
+  buttonProps?: React.ComponentProps<typeof Link> | React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}
+
+const ApplicationLink: React.FC<ApplicationLinkProps> = ({ 
+  children, 
+  className = "", 
+  variant = "link",
+  buttonProps = {}
+}) => {
+  const isOpen = APPLICATION_CONFIG.isOpen;
+  const url = APPLICATION_CONFIG.applicationUrl;
+  const openInNewTab = APPLICATION_CONFIG.openInNewTab;
+
+  if (isOpen && openInNewTab) {
+    // External link (Google Form) - opens in new tab
+    return (
+      <a 
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={className}
+        {...buttonProps}
+      >
+        {children}
+      </a>
+    );
+  } else {
+    // Internal link (Application Closed page) - same tab
+    return (
+      <Link 
+        to={url}
+        className={className}
+        {...buttonProps}
+      >
+        {children}
+      </Link>
+    );
+  }
+};
+
+export default ApplicationLink; 

Source code/src/components/ApplicationLink.tsx

@@ -2,6 +2,7 @@
 import React from "react";
 import { Link, useLocation } from "react-router-dom";
 import { Button } from "@/components/ui/button";
+import ApplicationLink from "./ApplicationLink";
 
 // Define navigation items for better maintainability
 const navigationItems = [
@@ -37,14 +38,9 @@ const DesktopNavigation: React.FC<DesktopNavigationProps> = ({ isScrolled }) =>
         </Link>
       ))}
 
-      <a 
-        href="https://forms.google.com/form" 
-        target="_blank" 
-        rel="noopener noreferrer"
-        className="ml-4"
-      >
+      <ApplicationLink className="ml-4">
         <Button className="bg-primary-blue hover:bg-primary-blue/90 font-bold">Join Us</Button>
-      </a>
+      </ApplicationLink>
     </nav>
   );
 };

Source code/src/components/DesktopNavigation.tsx

@@ -1,6 +1,7 @@
 
 import React from "react";
 import { Link } from "react-router-dom";
+import ApplicationLink from "./ApplicationLink";
 import { Linkedin, Github, Mail } from "lucide-react";
 
 const Footer = () => {
@@ -84,14 +85,11 @@ const Footer = () => {
             <p className="text-white/80 mb-2">Technical University Munich</p>
             <p className="text-white/80 mb-2">Munich, Germany</p>
             <p className="text-white/80 mb-4">Email: contact@open-hardware-initiative.com</p>
-            <a 
-              href="https://forms.google.com/form"
-              target="_blank" 
-              rel="noopener noreferrer"
+            <ApplicationLink 
               className="inline-block bg-white text-primary-blue px-4 py-2 rounded-md font-semibold hover:bg-white/90 transition-colors"
             >
               Join Us
-            </a>
+            </ApplicationLink>
           </div>
         </div>
 

Source code/src/components/Footer.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import CircuitPattern from "@/components/CircuitPattern";
+import ApplicationLink from "./ApplicationLink";
 
 const HeroSection = () => {
   return (
@@ -45,11 +46,11 @@ const HeroSection = () => {
                     Our Projects
                   </Button>
                 </Link>
-                <a href="https://forms.google.com/form" target="_blank" rel="noopener noreferrer" className="w-full sm:w-auto">
+                <ApplicationLink className="w-full sm:w-auto">
                   <Button variant="outline" size="lg" className="w-full sm:w-auto border-bistre text-bistre hover:bg-bistre/5 text-base sm:text-lg px-6 sm:px-8 py-3 sm:py-4">
                     Join Our Team
                   </Button>
-                </a>
+                </ApplicationLink>
               </div>
             </div>
           </div>

Source code/src/components/HeroSection.tsx

@@ -2,6 +2,7 @@
 import React from "react";
 import { Link, useLocation } from "react-router-dom";
 import { Button } from "@/components/ui/button";
+import ApplicationLink from "./ApplicationLink";
 
 interface NavLinkProps {
   to: string;
@@ -64,19 +65,16 @@ const MobileNavigation: React.FC<MobileNavigationProps> = ({ isMenuOpen, locatio
         <MobileNavLink to="/contact" isActive={isActive("/contact")} delay={400} isMenuOpen={isMenuOpen}>
           Contact
         </MobileNavLink>
-        <a 
-          href="https://forms.google.com/form" 
-          target="_blank" 
-          rel="noopener noreferrer"
+        <ApplicationLink 
           className={`mt-8 w-4/5 transition-all duration-300 transform ${
             isMenuOpen ? "translate-y-0 opacity-100" : "-translate-y-4 opacity-0"
           }`}
-          style={{ transitionDelay: "450ms" }}
+          buttonProps={{ style: { transitionDelay: "450ms" } }}
         >
           <Button className="bg-primary-blue hover:bg-primary-blue/90 font-bold text-xl w-full py-6">
             Join Us
           </Button>
-        </a>
+        </ApplicationLink>
       </nav>
     </div>
   );

Source code/src/components/MobileNavigation.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Project } from "@/data/projectsData";
 import { getStringBasedColor, getContrastTextColor } from "@/utils/colorUtils";
 import { Link } from "react-router-dom";
+import ApplicationLink from "./ApplicationLink";
 
 interface ProjectCardProps {
   project: Project;
@@ -136,12 +137,12 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
         )}
 
         {recruitingFor && (
-          <Link to="/contact" className="flex-shrink-0">
+          <ApplicationLink className="flex-shrink-0">
             <Button variant="default" className="flex items-center gap-2" size="sm">
               <UserPlus size={16} className="flex-shrink-0" />
               <span className="sm:inline hidden">Join</span>
             </Button>
-          </Link>
+          </ApplicationLink>
         )}
       </CardFooter>
     </Card>

Source code/src/components/ProjectCard.tsx

@@ -3,6 +3,7 @@ import { Card } from "@/components/ui/card";
 import { Linkedin, UserPlus } from "lucide-react";
 import TeamMemberImage from "./TeamMemberImage";
 import { Link } from "react-router-dom";
+import ApplicationLink from "./ApplicationLink";
 
 interface TeamMemberProps {
   name: string;
@@ -111,13 +112,12 @@ const TeamMember: React.FC<TeamMemberProps> = ({
           </a>
         ) : null}
         {isOpenPosition && (
-          <Link 
-            to="/contact"
+          <ApplicationLink 
             className="absolute bottom-4 right-4 p-2 bg-white text-primary-blue rounded-full hover:bg-primary-blue hover:text-white transition-colors"
-            aria-label="Apply for this position"
+            buttonProps={{ "aria-label": "Apply for this position" }}
           >
             <UserPlus size={18} />
-          </Link>
+          </ApplicationLink>
         )}
       </div>
       <div className="p-4">
@@ -126,12 +126,11 @@ const TeamMember: React.FC<TeamMemberProps> = ({
           <p className="text-gray-600 text-sm mt-1 line-clamp-2">{education}</p>
         )}
         {isOpenPosition && (
-          <Link 
-            to="/contact" 
+          <ApplicationLink 
             className="inline-block mt-3 text-sm font-medium text-primary-blue hover:underline"
           >
             Apply Now →
-          </Link>
+          </ApplicationLink>
         )}
       </div>
     </Card>