add sponsors page

Author: Jenifer Tabita Ciuciu-Kiss

src/App.js

@@ -18,7 +18,8 @@ import PriorPublicationMultipleSubmission from "./components/guidelines/PriorPub
 import ReviewGuidelines from "./components/guidelines/ReviewGuidelines";
 import SupplementalMaterials from "./components/guidelines/SupplementalMaterials";
 import ResourcesAvailability from "./components/guidelines/ResourcesAvailability";
-import Sponsorship from "./components/Sponsorship";
+import SponsorshipPackages from "./components/sponsorship/SponsorshipPackages";
+import Sponsors from "./components/sponsorship/Sponsors";
 import ImportantDates from "./components/importantdates"
 import WorkshopsTutorials from "./components/calls/WorkshopsTutorials";
 import Host from "./components/blogs/host"
@@ -77,7 +78,8 @@ export default function HeroComponent() {
 
 
         {/* Sponsorship */}
-        <Route path="/sponsorship" element={<Sponsorship />} />
+        <Route path="/sponsorship/sponsorshippackages" element={<SponsorshipPackages />} />
+        <Route path="/sponsorship/sponsors" element={<Sponsors />} />
       </Routes>
       <Footer/>
     </>

src/components/calls/WorkshopsTutorials.jsx

@@ -212,10 +212,10 @@ export const WorkshopsTutorials = () => {
                     <h3 style={{ color: '#e94607' }} className="text-lg font-medium mt-4">Important Dates</h3>
                     <p>All deadlines are 23:59 Anywhere on Earth (AoE).</p>
                     <ul className="list-disc ml-6">
-                        <li>Submission deadline: July 1, 2025</li>
-                        <li>Notification to proposers: July 11, 2025</li>
-                        <li>Workshop website online: July 25, 2025</li>
-                        <li>Workshop days: November 2-3, 2025</li>
+                        <li>Submission deadline: <b>July 1, 2025</b></li>
+                        <li>Notification to proposers: <b>July 11, 2025</b></li>
+                        <li>Workshop website online: <b>July 25, 2025</b></li>
+                        <li>Workshop days: <b>November 2-3, 2025</b></li>
                     </ul>
 
                     <h3 style={{ color: '#e94607' }} className="text-lg font-medium mt-4">Workshop Chairs</h3>

src/components/navbar.jsx

@@ -282,7 +282,7 @@ export const NavBar = () => {
                   <div className={`${isMobile ? 'relative' : 'absolute'} right-auto left-0 top-full mt-2 bg-white shadow-md rounded-md z-50`}>
                     <Link to="/attending/visa" className="block px-4 py-2" style={{ color: '#e94607' }} onClick={() => dropdownMenuClicked()}>
                       VISA Information
-                      <div className="bg-[#E30022] w-0 group-hover:w-full"></div>
+                     <div className="bg-[#E30022] w-0 group-hover:w-full"></div>
                     </Link>
                     <Link to="/attending/codeofconduct" className="block px-4 py-2" style={{ color: '#e94607' }} onClick={() => dropdownMenuClicked()}>
                       Code of Conduct
@@ -332,14 +332,31 @@ export const NavBar = () => {
                 </div>
               )} */}
 
-            <Link
+            <Link to="#" style={{ color: '#e94607' }} onMouseEnter={() => handleMouseEnter('sponsorship')} className="relative block mt-4 lg:inline-block items-center text-[#e94607] mr-4 group lg:mr-4 lg:inline-flex lg:mt-0 mt-4">
+                Sponsorship
+                <div className="w-0 w-full">
+              {(isMobile || dropdownOpen.sponsorship) && (
+                <div className={`${isMobile ? 'relative' : 'absolute'} right-auto left-0 top-full mt-2 bg-white shadow-md rounded-md z-50`}>
+                  <Link to="/sponsorship/sponsorshippackages" className="block px-4 py-2" style={{ color: '#e94607' }} onClick={() => dropdownMenuClicked()}>
+                    Sponsorship Packages
+                    <div className="bg-[#E30022] w-0 group-hover:w-full"></div>
+                  </Link>
+                  <Link to="/sponsorship/sponsors" className="block px-4 py-2" style={{ color: '#e94607' }} onClick={() => dropdownMenuClicked()}>
+                    Sponsors
+                    <div className="bg-[#E30022] w-0 group-hover:w-full"></div>
+                  </Link>
+                </div>
+              )}
+              </div>
+            </Link>
+            {/* <Link
               to="/sponsorship"
               style={{ color: '#e94607' }} 
               className="block mt-4 lg:inline-block lg:mt-0 text-[#33358c]-200 mr-4 group"
             >
               Sponsorship
               <div class="bg-[#E30022] h-[px] w-0 group-hover:w-full transition-all duration-500"></div>
-            </Link>
+            </Link> */}
 
             {/* <Link
               to="/contact"

src/components/sponsorship/Sponsors.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import './sponsorship.css';
+
+export const Sponsors = () => {
+    return (
+        <div>
+            <div className="mt-[74px] px-4 pt-2 bg-white flex items-center justify-center">
+            </div>
+            <div className="container mx-auto px-4 lg:px-8 lg:pb-12 mt-12">
+                <h1 className="text-3xl font-bold text-center text-[#e94607]">Sponsors</h1>
+                <div className="sponsor-level">
+                    <h2 className="text-2xl font-bold text-orange-500">Bronze</h2>
+                    <hr className="border-t-2 border-orange-500 my-2" />
+                    <div className="sponsor-info mt-4">
+                        <h3 className="text-lg font-semibold">Student Support</h3>
+                        <p className="text-sm mb-4">Sponsored by: <em>Artificial Intelligence Journal</em></p>
+                        <div className="sponsor-logos flex justify-center items-center gap-8">
+                            <a href="https://aij.ijcai.org/wp-content/uploads/2021/07/ARTINT_Logo2_c_highresolution.tif" target="_blank" rel="noopener noreferrer">
+                                <img src="https://aij.ijcai.org/wp-content/uploads/2021/07/ARTINT_Logo2_c_web_more.jpg" alt="Artificial Intelligence Journal Logo" className="logo-high-res"/>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Sponsors;

src/components/Sponsorship.jsx renamed to src/components/sponsorship/SponsorshipPackages.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import './sponsorship.css';
 
-export const Sponsorship = () => {
+export const SponsorshipPackages = () => {
     return (
         <div>
             <div className="mt-[74px] px-4 pt-2 bg-white flex items-center justify-center">
@@ -99,4 +99,4 @@ export const Sponsorship = () => {
     );
 };
 
-export default Sponsorship;
+export default SponsorshipPackages;