Group f/about and contact page

client/src/Icons/ContactIcon.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const styles = {
+  Icon: {
+    fill: '#8a1c1c',
+    top: '464px',
+    left: '407px',
+    width: '114px',
+    height: '133px',
+  },
+};
+
+export const IconComponent = ({ className = '' }) => (
+  <svg className={className} viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 2a9 9 0 0 0-9 9c0 4.17 2.84 7.67 6.69 8.69L12 22l2.31-2.31C18.16 18.67 21 15.17 21 11a9 9 0 0 0-9-9zm0 2c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.3a7.2 7.2 0 0 1-6-3.22c.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08a7.2 7.2 0 0 1-6 3.22z" />
+  </svg>
+);
+
+const defaultProps = {
+  IconComponent,
+};
+
+const ContactIcon = (props) => {
+  return (
+    props.IconComponent 
+      ? <props.IconComponent style={styles.Icon} /> 
+      : <defaultProps.IconComponent />
+  );
+};
+
+export default ContactIcon;

client/src/pages/About.js

@@ -0,0 +1,69 @@
+import React from "react";
+import "../styles/About.css";
+import bannerImg from "../img/ipms-banner.jpg";
+import studentImg from '../img/student.jpg';
+import supervisorImg from '../img/supervisor.jpg';
+import coordinatorImg from '../img/coordinator.jpg';
+
+const About = () => {
+  return (
+    <div className="about-wrapper">
+      <h1 className="about-heading">About IPMS</h1>
+
+      <img src={bannerImg} alt="IPMS banner" className="about-banner" />
+
+      <p className="about-summary">
+        The <strong>Internship Program Management System (IPMS)</strong> is an all-in-one solution designed to streamline and support every stage of the Computer Science internship experience at the University of Oklahoma.
+      </p>
+
+      <div className="section">
+        <div className="feature-cards">
+          <div className="feature-card">
+            <span className="icon">🔐</span>
+            <h3>Role-based Login</h3>
+            <p>Students, supervisors, and coordinators get access to tools tailored to their role.</p>
+          </div>
+          <div className="feature-card">
+            <span className="icon">🧾</span>
+            <h3>Token-based Authentication</h3>
+            <p>Secure token login system — no passwords. Tokens last the full semester.</p>
+          </div>
+          <div className="feature-card">
+            <span className="icon">🔄</span>
+            <h3>Streamlined Communication</h3>
+            <p>Automatic reminders and workflows connect all users seamlessly.</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="section">
+        <h2 className="section-heading">Who Uses IPMS?</h2>
+        <div className="user-role-cards">
+          <div className="user-card">
+          <img src={studentImg} alt="student" className="user-card" />
+            <h4>Students</h4>
+            <p>Submit requests, track weekly progress, and complete your internship journey.</p>
+          </div>
+          <div className="user-card">
+          <img src={supervisorImg} alt="supervisor" className="user-card" />
+            <h4>Supervisors</h4>
+            <p>Review forms, approve progress, and evaluate student performance.</p>
+          </div>
+          <div className="user-card">          
+            <img src={coordinatorImg} alt="Coordinator" className="user-card" />
+            <h4>Coordinators</h4>
+            <p>Oversee submissions, grade final reports, and manage workflows.</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="cta-footer">
+        <h3>Get in Touch</h3>
+        <p>Interested in learning more or need assistance? Contact us!</p>
+        <a href="/contact" className="cta-button">Contact Page</a>
+      </div>
+    </div>
+  );
+};
+
+export default About;

client/src/pages/Contact.js

@@ -0,0 +1,91 @@
+import React from "react";
+import "../styles/Contact.css";
+import MansoorImage from "../img/mansoor.jpg";
+import ContactIcon, { IconComponent } from "../Icons/ContactIcon";
+
+const teamMembers = [
+  {
+    name: "Gladis Menachery Sunny",
+    email: "Gladis.Menachery.Sunny-1@ou.edu",
+    role: "Token Generation and Login"
+  },
+  {
+    name: "Ravichandra Reddy",
+    email: "Ravichandra.Reddy.Mulagondla-1@ou.edu",
+    role: "A.1 Form"
+  },
+  {
+    name: "Naveena Suddapalli",
+    email: "Naveena.Suddapalli-1@ou.edu",
+    role: "A.2 Weekly Report"
+  },
+  {
+    name: "Saketh Reddy Aredla",
+    email: "Saketh.Reddy.Aredla-1@ou.edu",
+    role: "A.3 Form"
+  },
+  {
+    name: "Rahul Juluru",
+    email: "Rahul.Juluru-1@ou.edu",
+    role: "Supervisor approval workflow"
+  },
+  {
+    name: "Narayana Phani Charan Nimmagadda",
+    email: "Narayana.Phani.Charan.Nimmagadda-1@ou.edu",
+    role: "Coordinator Approval workflow"
+  },
+];
+
+const MansoorEmail = "Mansoor.A.Abdulhak-1@ou.edu";
+const AssistantEmail = "Oluwasijibomi.Ajisegiri@ou.edu";
+
+const Contact = () => {
+  return (
+    <div className="contact-container">
+      <h1 className="contact-heading">Contact Us</h1>
+
+      {/* Academic Contact */}
+      <div className="contact-card">
+        <img src={MansoorImage} alt="Dr. Mansoor Abdulhak" className="contact-image" />
+        <div className="contact-info">
+          <h2>Dr. Mansoor Abdulhak</h2>
+          <p>Assistant Professor, University of Oklahoma</p>
+          <p>📧 <a href={`mailto=${MansoorEmail}`}>{MansoorEmail}</a></p>
+          <p>📞 (405) 325-5408</p>
+          <p>🏢 Devon Energy Hall, 234</p>
+        </div>
+      </div>
+
+      {/* Teaching Assistant */}
+      <div className="contact-card">
+        <ContactIcon IconComponent={() => <IconComponent className="team-icon" />} />
+        <div className="contact-info">
+          <h4>SJ Ajisegiri</h4>
+          <p>Teaching Assistant</p>
+          <p>📧 <a href={`mailto:${AssistantEmail}`}>{AssistantEmail}</a></p>
+        </div>
+      </div>
+
+      {/* Technical Support */}
+      <div className="tech-support-card">
+        <h2>Technical Support – Team G</h2>
+        <div className="team-grid">
+          {teamMembers.map(({ name, email, role }) => (
+            <div key={email} className="team-member">
+              <ContactIcon IconComponent={() => <IconComponent className="team-icon" />} />
+              <div>
+                <h6>{name}</h6>
+                <p>{role}</p>
+                <p>
+                  📧 <a href={`mailto:${email}`}>{email}</a>
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Contact;

client/src/router.js

@@ -20,6 +20,8 @@ import CoordinatorRequestDetailView from "./pages/CoordinatorRequestDetailView";
 import TokenRenewal from "./pages/TokenRenewal";
 import StudentDashboard from "./pages/StudentDashboard";
 import ProtectedRouteStudent from "./pages/ProtectedRouteStudent";
+import About from "./pages/About";
+import Contact from "./pages/Contact";
 
 // Create and export the router configuration
 const router = createBrowserRouter([  
@@ -81,6 +83,14 @@ const router = createBrowserRouter([
         path: "renew-token/:token",
         element: <TokenRenewal />,
       },
+      {
+        path: "about",
+        element: <About />,
+      },
+      {
+        path: "contact",
+        element: <Contact />,
+      },
     ],
   },
 ]);

client/src/styles/About.css

@@ -0,0 +1,112 @@
+  .about-wrapper {
+    max-width: 1100px;
+    margin: auto;
+    padding: 2rem;
+    font-family: 'Segoe UI', sans-serif;
+    color: #333;
+  }
+
+  .about-heading {
+    text-align: center;
+    font-size: 2.8rem;
+    margin-bottom: 1rem;
+    color: #2a4d69;
+  }
+
+  .about-banner {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin-bottom: 1.5rem;
+  }
+
+  .about-summary {
+    font-size: 1.1rem;
+    text-align: center;
+    margin-bottom: 2rem;
+    line-height: 1.6;
+  }
+
+  .section {
+    margin-bottom: 3rem;
+  }
+
+  .feature-cards {
+    display: flex;
+    gap: 1.5rem;
+    justify-content: space-around;
+    flex-wrap: wrap;
+  }
+
+  .feature-card {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 12px;
+    padding: 1.5rem;
+    width: 300px;
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+    transition: 0.3s ease;
+  }
+
+  .feature-card:hover {
+    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
+  }
+
+  .feature-card .icon {
+    font-size: 3rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .section-heading {
+    text-align: center;
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+  }
+
+  .user-role-cards {
+    display: flex;
+    justify-content: space-around;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+  }
+
+  .user-card {
+    background: #fff;
+    padding: 1.2rem;
+    text-align: center;
+    border-radius: 12px;
+    border: 1px solid #ddd;
+    width: 250px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+  }
+
+  .user-card img {
+    width: 200px;
+    margin-bottom: 0.8rem;
+  }
+
+  .cta-footer {
+    background-color: #8b0000;
+    color: white;
+    text-align: center;
+    padding: 2rem;
+    border-radius: 8px;
+  }
+
+  .cta-button {
+    display: inline-block;
+    margin-top: 1rem;
+    padding: 0.8rem 1.6rem;
+    background: white;
+    color: #8b0000;
+    text-decoration: none;
+    font-weight: bold;
+    border-radius: 6px;
+    transition: background 0.3s ease;
+  }
+
+  .cta-button:hover {
+    background: #f0f0f0;
+  }
+