feat: add Contact and Accreditation pages

app/components/contactus/Accessibility.tsx

@@ -0,0 +1,21 @@
+export default function Accessibility() {
+  return (
+    <div className="bg-white rounded-[24px] p-8  shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100">
+      <div className="contact-card-title font-bold text-dark mb-4">Accessibility</div>
+      <p className="text-sm text-gray-600 mb-3 mt-2">
+        Our campus is designed to be accessible to everyone. If you require specific accommodations for your visit, please contact us in advance.
+      </p>
+      <div className="flex flex-wrap gap-3">
+        <div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-full text-xs font-medium text-gray-600 flex items-center gap-2">
+          <i className="fa-brands fa-accessible-icon text-primary"></i> Wheelchair Access
+        </div>
+        <div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-full text-xs font-medium text-gray-600 flex items-center gap-2">
+          <i className="fa-solid fa-elevator text-primary"></i> Elevators
+        </div>
+        <div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-full text-xs font-medium text-gray-600 flex items-center gap-2">
+          <i className="fa-solid fa-square-parking text-primary"></i> Reserved Parking
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/contactus/ContactHero.tsx

@@ -0,0 +1,17 @@
+export default function ContactHero() {
+  return (
+    <section id="contact-hero" className="bg-white border-b border-gray-200 pt-16 pb-20 px-6 lg:px-12">
+      <div className="max-w-[1440px] mx-auto text-center">
+        <span className="inline-block bg-blue-50 text-xs font-bold px-4 py-2 uppercase tracking-wider rounded-full mb-3 border border-blue-100" style={{ color: "rgb(38, 60, 111)" }}>
+          Get in Touch
+        </span>
+        <div className="contact-heading font-display font-bold text-dark mb-6 leading-tight max-w-3xl mx-auto">
+          How can we help advance your research journey?
+        </div>
+        <p className="text-gray-600 text-lg mb-0 leading-relaxed max-w-2xl mx-auto">
+          Connect with our specialized departments to find the support, guidance, and resources you need to succeed at Paris Research University.
+        </p>
+      </div>
+    </section>
+  );
+}

app/components/contactus/ContactSplit.tsx

@@ -0,0 +1,19 @@
+import InquiryForm from "./InquiryForm";
+import LocationMap from "./LocationMap";
+import OfficeHours from "./OfficeHours";
+import Accessibility from "./Accessibility";
+
+export default function ContactSplit() {
+  return (
+    <section id="inquiry-form-section" className="py-16 px-6 lg:px-12 max-w-[1440px] mx-auto">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-stretch">
+        <InquiryForm />
+        <div className="space-y-8">
+          <LocationMap />
+          <OfficeHours />
+          <Accessibility />
+        </div>
+      </div>
+    </section>
+  );
+}

app/components/contactus/DepartmentCard.tsx

@@ -0,0 +1,27 @@
+type DepartmentCardProps = {
+  icon: string;
+  title: string;
+  description: string;
+  email: string;
+  phone: string;
+};
+
+export default function DepartmentCard({ icon, title, description, email, phone }: DepartmentCardProps) {
+  return (
+    <div className="bg-white rounded-[16px] p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100 hover:shadow-[0_8px_30px_rgb(38,60,111,0.08)] transition-all duration-300 flex flex-col h-full group">
+      <div className="w-14 h-14 bg-blue-50 rounded-[12px] flex items-center justify-center text-primary text-2xl mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
+        <i className={icon}></i>
+      </div>
+      <div className="contact-card-title font-display font-bold text-dark mb-3">{title}</div>
+      <p className="text-sm text-gray-600 mb-6 flex-grow">{description}</p>
+      <div className="pt-4 border-t border-gray-100 mt-auto">
+        <a href={`mailto:${email}`} className="flex items-center gap-3 text-sm text-gray-700 hover:text-primary mb-3 transition-colors">
+          <i className="far fa-envelope text-primary w-4"></i> {email}
+        </a>
+        <a href={`tel:${phone.replace(/\s/g, '')}`} className="flex items-center gap-3 text-sm text-gray-700 hover:text-primary transition-colors">
+          <i className="fas fa-phone text-primary w-4"></i> {phone}
+        </a>
+      </div>
+    </div>
+  );
+}

app/components/contactus/DepartmentCardBlue.tsx

@@ -0,0 +1,22 @@
+export default function DepartmentCardBlue() {
+  return (
+    <div className="bg-primary text-white rounded-[16px] p-8 shadow-[0_8px_30px_rgb(38,60,111,0.15)] transition-all duration-300 flex flex-col h-full relative overflow-hidden">
+      <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -mr-10 -mt-10 blur-xl"></div>
+      <div className="w-14 h-14 bg-white/10 rounded-[12px] flex items-center justify-center text-white text-2xl mb-6 backdrop-blur-sm border border-white/20">
+        <i className="fas fa-microscope"></i>
+      </div>
+      <div className="contact-card-title font-display font-bold mb-3">Research Office</div>
+      <p className="text-sm text-white/80 mb-6 flex-grow relative z-10">
+        Grant applications, ethics committee approvals, lab space allocation, and cross-disciplinary collaboration opportunities.
+      </p>
+      <div className="pt-4 border-t border-white/20 mt-auto relative z-10">
+        <a href="mailto:research@parisresearch.edu" className="flex items-center gap-3 text-sm text-white/90 hover:text-white mb-3 transition-colors">
+          <i className="far fa-envelope w-4 opacity-80"></i> research@parisresearch.edu
+        </a>
+        <a href="tel:+33123456790" className="flex items-center gap-3 text-sm text-white/90 hover:text-white transition-colors">
+          <i className="fas fa-phone w-4 opacity-80"></i> +33 1 23 45 67 90
+        </a>
+      </div>
+    </div>
+  );
+}

app/components/contactus/DepartmentCardEmpty.tsx

@@ -0,0 +1,16 @@
+export default function DepartmentCardEmpty() {
+  return (
+    <div className="bg-gray-50 rounded-[16px] p-8 border border-gray-200 border-dashed flex flex-col items-center justify-center text-center h-full">
+      <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center text-gray-400 text-2xl mb-4 shadow-sm">
+        <i className="fas fa-circle-question"></i>
+      </div>
+      <div className="contact-card-title font-bold text-gray-700 mb-2">Not sure who to contact?</div>
+      <p className="text-sm text-gray-500 mb-6">
+        Use our general inquiry form below and we'll route your message to the appropriate department.
+      </p>
+      <a href="#inquiry-form-section" className="text-primary font-medium text-sm hover:underline flex items-center gap-2">
+        Go to Form <i className="fas fa-arrow-down"></i>
+      </a>
+    </div>
+  );
+}

app/components/contactus/DepartmentDirectory.tsx

@@ -0,0 +1,49 @@
+import DepartmentCard from "./DepartmentCard";
+import DepartmentCardBlue from "./DepartmentCardBlue";
+import DepartmentCardEmpty from "./DepartmentCardEmpty";
+
+const departments = [
+  {
+    icon: "fas fa-graduation-cap",
+    title: "Admissions & Enrollment",
+    description: "Questions regarding application processes, deadlines, program requirements, and international student visas.",
+    email: "admissions@parisresearch.edu",
+    phone: "+33 1 23 45 67 89",
+  },
+  {
+    icon: "fas fa-handshake",
+    title: "Industry Partnerships",
+    description: "Corporate sponsorships, technology transfer, joint research ventures, and industry-funded scholarships.",
+    email: "partners@parisresearch.edu",
+    phone: "+33 1 23 45 67 91",
+  },
+  {
+    icon: "fas fa-bullhorn",
+    title: "Media & Press",
+    description: "Press releases, expert commentary requests, media kits, and institutional branding guidelines.",
+    email: "press@parisresearch.edu",
+    phone: "+33 1 23 45 67 92",
+  },
+  {
+    icon: "fas fa-book-open",
+    title: "Repository Support",
+    description: "Assistance with navigating the publication database, requesting access to restricted papers, and submitting new works.",
+    email: "library@parisresearch.edu",
+    phone: "+33 1 23 45 67 93",
+  },
+];
+
+export default function DepartmentDirectory() {
+  return (
+    <section id="department-directory" className="py-20 px-6 lg:px-12 max-w-[1440px] mx-auto -mt-10 relative z-10">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <DepartmentCard {...departments[0]} />
+        <DepartmentCardBlue />
+        <DepartmentCard {...departments[1]} />
+        <DepartmentCard {...departments[2]} />
+        <DepartmentCard {...departments[3]} />
+        <DepartmentCardEmpty />
+      </div>
+    </section>
+  );
+}

app/components/contactus/InquiryForm.tsx

@@ -0,0 +1,71 @@
+export default function InquiryForm() {
+  const inputClass = "w-full bg-gray-50 border border-gray-200 text-gray-800 px-4 py-3 rounded-[12px] focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-sm placeholder:text-gray-400";
+
+  return (
+    <div className="bg-white rounded-[24px] p-8 md:p-10 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100 h-full flex flex-col">
+      <div className="mb-8">
+        <div className="contact-form-title font-display font-bold text-dark mb-1">Send a Message</div>
+        <p className="text-gray-600 text-sm">Please fill out the form below and our team will get back to you within 24-48 business hours.</p>
+      </div>
+
+      <form className="space-y-5 flex-1 flex flex-col">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-gray-700 block">First Name</label>
+            <input type="text" placeholder="Jane" className={inputClass} />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-gray-700 block">Last Name</label>
+            <input type="text" placeholder="Doe" className={inputClass} />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-700 block">Email Address <span className="text-red-500">*</span></label>
+          <input type="email" placeholder="jane.doe@example.com" required className={inputClass} />
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-700 block">Inquiry Topic <span className="text-red-500">*</span></label>
+          <div className="relative">
+            <select required className={inputClass + " appearance-none cursor-pointer"}>
+              <option value="" disabled selected>Select a topic...</option>
+              <option value="admissions">Admissions & Enrollment</option>
+              <option value="research">Research Opportunities</option>
+              <option value="partnerships">Corporate Partnerships</option>
+              <option value="media">Media Inquiry</option>
+              <option value="repository">Publication Repository Access</option>
+              <option value="other">Other</option>
+            </select>
+            <div className="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-gray-500">
+              <i className="fas fa-chevron-down text-xs"></i>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-700 block">Message <span className="text-red-500">*</span></label>
+          <textarea rows={5} placeholder="How can we help you?" required className={inputClass + " resize-none"} />
+        </div>
+
+        <div className="pt-2 pb-2 space-y-4">
+          <label className="flex items-start gap-3 cursor-pointer">
+            <input type="checkbox" required className="custom-checkbox mt-1 shrink-0" />
+            <span className="text-xs text-gray-600 leading-relaxed">
+              I consent to having Paris Research University collect my details via this form to respond to my inquiry. I understand my data will be handled in accordance with the{" "}
+              <a href="#" className="text-primary hover:underline">Privacy Policy</a>.
+            </span>
+          </label>
+          <div className="bg-gray-50 p-4 rounded-[12px] border border-gray-200 flex items-center justify-between max-w-xs">
+            <span className="text-sm text-gray-600 font-medium">I am human</span>
+            <input type="checkbox" required className="custom-checkbox w-6 h-6 rounded-full border-2" />
+          </div>
+        </div>
+
+        <button type="submit" className="w-full bg-primary text-white font-bold py-4 rounded-[12px] text-sm hover:bg-opacity-90 transition-colors shadow-md flex items-center justify-center gap-2">
+          Send Message <i className="fas fa-paper-plane text-xs"></i>
+        </button>
+      </form>
+    </div>
+  );
+}

app/components/contactus/LocationMap.tsx

@@ -0,0 +1,26 @@
+export default function LocationMap() {
+  return (
+    <div className="bg-white rounded-[24px] overflow-hidden shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100 h-[420px] relative">
+      <div className="absolute inset-0 bg-gray-200 relative">
+        <img
+          className="w-full h-full object-cover"
+          src="https://storage.googleapis.com/uxpilot-auth.appspot.com/3d6faeb2c9-8e1cfd08c74433d49f78.png"
+          alt="Modern minimalist map of Paris showing a university campus location with a blue pin marker"
+        />
+        {/* Floating Pin Card */}
+        <div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-md p-4 rounded-[12px] shadow-lg border border-white/50 flex items-start gap-4">
+          <div className="w-10 h-10 bg-blue-50 rounded-full flex items-center justify-center text-primary flex-shrink-0 mt-1">
+            <i className="fas fa-location-dot"></i>
+          </div>
+          <div>
+            <div className="contact-pin-title font-bold text-dark mb-1">Main Campus</div>
+            <p className="text-xs text-gray-600 leading-relaxed">
+              15 Rue de l'École de Médecine<br />75006 Paris, France
+            </p>
+            <a href="#" className="text-primary text-xs font-medium mt-2 inline-block hover:underline">Get Directions</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/contactus/OfficeHours.tsx

@@ -0,0 +1,28 @@
+const hours = [
+  { day: "Monday - Thursday", time: "08:30 - 18:00" },
+  { day: "Friday", time: "08:30 - 17:00" },
+  { day: "Saturday - Sunday", time: null },
+];
+
+export default function OfficeHours() {
+  return (
+    <div className="bg-white rounded-[24px] p-10 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100">
+      <div className="flex items-center gap-3 mb-6">
+        <i className="far fa-clock text-primary text-xl"></i>
+        <div className="contact-card-title font-display font-bold text-dark" style={{ fontSize: "1.3rem" }}>Office Hours</div>
+      </div>
+
+      <div className="space-y-4">
+        {hours.map(({ day, time }) => (
+          <div key={day} className="flex justify-between items-center pb-3 border-b border-gray-100 text-sm">
+            <span className="text-gray-600 font-medium">{day}</span>
+            {time
+              ? <span className="text-dark font-bold">{time}</span>
+              : <span className="text-gray-400 font-medium">Closed</span>
+            }
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}