code base

frontend/src/pages/About/About.jsx

@@ -0,0 +1,145 @@
+import React from "react";
+
+const About = () => {
+  return (
+    <div className="bg-white text-gray-800">
+      {/* Hero Section */}
+      <div className="relative bg-red-600 text-white h-[60vh] flex items-center justify-center">
+        <div className="absolute inset-0 bg-red-800 bg-opacity-50"></div>
+        <div className="relative z-10 text-center px-6">
+          <h1 className="text-4xl md:text-6xl font-bold mb-4">
+            Welcome to Our Travel Policy
+          </h1>
+          <p className="text-lg md:text-xl">
+            Structured, efficient, and research-focused travel planning.
+          </p>
+          <button type='button' className="mt-6 px-6 py-3 bg-white text-red-600 font-semibold rounded-lg shadow-md hover:bg-red-700 hover:text-white transition duration-300">
+            Learn More
+          </button>
+        </div>
+      </div>
+
+      {/* Mission & Vision */}
+      <div className="flex flex-col md:flex-row items-center py-12 px-6 md:px-12 gap-12">
+        <div className="md:w-1/2">
+          <h2 className="text-3xl font-bold mb-4">Our Approach</h2>
+          <p className="text-lg leading-relaxed">
+            Our travel policy for research students and associates ensures a
+            structured process for approvals and financial support, fostering
+            efficiency and alignment with academic and research objectives.
+          </p>
+        </div>
+        <div className="md:w-1/2">
+          <img
+            src="https://via.placeholder.com/600x400"
+            alt="Travel Policy"
+            className="rounded-lg shadow-lg transform transition duration-300 hover:scale-105"
+          />
+        </div>
+      </div>
+
+      {/* Achievements & History */}
+      <div className="bg-gray-100 py-12 px-6 md:px-12">
+        <h2 className="text-3xl font-bold text-center mb-8">Policy Highlights</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {[
+            {
+              title: "Travel Request Form",
+              description:
+                "Submit detailed forms including purpose, destination, budget, and supporting documentation.",
+              icon: "📄",
+            },
+            {
+              title: "Approval Process",
+              description:
+                "Supervisor, department head, and Office of Research must approve for major travels.",
+              icon: "✔️",
+            },
+            {
+              title: "Financial Support",
+              description:
+                "Eligibility depends on travel relevance, available funds, and research alignment.",
+              icon: "💰",
+            },
+            {
+              title: "Documentation",
+              description:
+                "Attach conference invitations or research collaboration letters for approval.",
+              icon: "📜",
+            },
+            {
+              title: "International Travel",
+              description:
+                "Managed through the Office of Research for additional oversight and funding.",
+              icon: "✈️",
+            },
+            {
+              title: "Funding Sources",
+              description:
+                "Includes department funds, institutional grants, or scholarships.",
+              icon: "🏛️",
+            },
+          ].map((item, index) => (
+            <div
+              key={index}
+              className="flex flex-col items-center p-6 bg-white shadow-md rounded-lg transition transform hover:scale-105"
+            >
+              <div className="text-4xl mb-4">{item.icon}</div>
+              <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
+              <p className="text-gray-700 text-center">{item.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Why Choose Us */}
+      <div className="py-12 px-6 md:px-12">
+        <h2 className="text-3xl font-bold text-center mb-8">Why Our Policy Stands Out</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {[
+            {
+              title: "Efficiency",
+              description: "Streamlined processes for quicker approvals.",
+            },
+            {
+              title: "Clarity",
+              description: "Clear guidelines for both students and staff.",
+            },
+            {
+              title: "Supportive",
+              description:
+                "Ensures financial and logistical aid for research-related travel.",
+            },
+            {
+              title: "Global Outlook",
+              description: "Facilitates international collaborations and exchanges.",
+            },
+            {
+              title: "Comprehensive",
+              description: "Covers all aspects of academic travel management.",
+            },
+            {
+              title: "Transparent",
+              description: "Approval criteria and funding sources clearly defined.",
+            },
+          ].map((item, index) => (
+            <div
+              key={index}
+              className="flex flex-col items-start p-6 bg-white shadow-md rounded-lg transition transform hover:scale-105"
+            >
+              <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
+              <p className="text-gray-700">{item.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Back to Top */}
+      <div className="text-center py-6">
+        
+      </div>
+    </div>
+  );
+};
+
+export default About;