diff --git a/app/accreditation/accreditation.css b/app/accreditation/accreditation.css
new file mode 100644
index 0000000..08d8e17
--- /dev/null
+++ b/app/accreditation/accreditation.css
@@ -0,0 +1,53 @@
+/* ============================================
+ Accreditation Page — Scoped Styles
+ Scope: .accreditation-page
+ ============================================ */
+
+/* Typography — dùng div thay h1/h2/h3 */
+.accreditation-page .acc-heading {
+ font-size: clamp(2.5rem, 5vw, 3.75rem);
+ line-height: 1.15;
+}
+
+.accreditation-page .acc-section-title {
+ font-size: 1.875rem;
+ line-height: 1.3;
+}
+
+.accreditation-page .acc-card-title {
+ font-size: 1.25rem;
+ line-height: 1.4;
+}
+
+/* ---------- Color tokens ---------- */
+.accreditation-page .text-brand-blue { color: #1b254b; }
+.accreditation-page .bg-brand-blue { background-color: #1b254b; }
+.accreditation-page .bg-brand-light { background-color: #f8fbff; }
+.accreditation-page .bg-brand-accent { background-color: #3b82f6; }
+.accreditation-page .text-brand-accent { color: #3b82f6; }
+.accreditation-page .text-ui-text { color: #111827; }
+.accreditation-page .text-ui-muted { color: #6b7280; }
+.accreditation-page .bg-ui-bg { background-color: #f9fafb; }
+.accreditation-page .border-ui-border { border-color: #e5e7eb; }
+
+/* ---------- Shadow tokens ---------- */
+.accreditation-page .shadow-soft {
+ box-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
+}
+.accreditation-page .shadow-hover,
+.accreditation-page .hover\:shadow-hover:hover {
+ box-shadow: 0 8px 24px rgb(0 0 0 / 0.1);
+}
+
+/* ---------- Border radius fix ---------- */
+.accreditation-page .rounded-\[24px\] { border-radius: 24px !important; }
+.accreditation-page .rounded-lg { border-radius: 8px !important; }
+.accreditation-page .rounded-md { border-radius: 6px !important; }
+
+/* Mesh background gradient */
+.accreditation-page .mesh-bg {
+ background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 40%, #ffffff 100%);
+}
+
+/* rounded-xl fix */
+.accreditation-page .rounded-xl { border-radius: 12px !important; }
diff --git a/app/accreditation/page.tsx b/app/accreditation/page.tsx
new file mode 100644
index 0000000..cfa0734
--- /dev/null
+++ b/app/accreditation/page.tsx
@@ -0,0 +1,14 @@
+import "./accreditation.css";
+import AccreditationHero from "../components/accreditation/AccreditationHero";
+import AccreditationGrid from "../components/accreditation/AccreditationGrid";
+import QualityStandards from "../components/accreditation/QualityStandards";
+
+export default function AccreditationPage() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/app/components/accreditation/AccreditationCard.tsx b/app/components/accreditation/AccreditationCard.tsx
new file mode 100644
index 0000000..bcfd948
--- /dev/null
+++ b/app/components/accreditation/AccreditationCard.tsx
@@ -0,0 +1,20 @@
+type AccreditationCardProps = {
+ logo: string;
+ logoAlt: string;
+ title: string;
+ subtitle: string;
+ description: string;
+};
+
+export default function AccreditationCard({ logo, logoAlt, title, subtitle, description }: AccreditationCardProps) {
+ return (
+
+
+

+
+
{title}
+
{subtitle}
+
{description}
+
+ );
+}
diff --git a/app/components/accreditation/AccreditationGrid.tsx b/app/components/accreditation/AccreditationGrid.tsx
new file mode 100644
index 0000000..ee4b145
--- /dev/null
+++ b/app/components/accreditation/AccreditationGrid.tsx
@@ -0,0 +1,43 @@
+import AccreditationCard from "./AccreditationCard";
+
+const accreditations = [
+ {
+ logo: "https://storage.googleapis.com/uxpilot-auth.appspot.com/5688d070b4-3c6c0b3c66f21c272558.png",
+ logoAlt: "French Ministry of Higher Education Logo",
+ title: "Ministère de l'Enseignement Supérieur",
+ subtitle: "National Institutional Accreditation",
+ description: "Fully recognized by the French government as a degree-granting institution, ensuring our diplomas meet national educational standards.",
+ },
+ {
+ logo: "https://storage.googleapis.com/uxpilot-auth.appspot.com/e2bd5be26e-fb4f2f04e138848db7e4.png",
+ logoAlt: "European Association for Quality Assurance Logo",
+ title: "ENQA",
+ subtitle: "European Quality Assurance",
+ description: "Compliant with the Standards and Guidelines for Quality Assurance in the European Higher Education Area (ESG).",
+ },
+ {
+ logo: "https://storage.googleapis.com/uxpilot-auth.appspot.com/b97d101d24-d2eeb52206ef7f99965a.png",
+ logoAlt: "Global Liberal Arts Alliance Logo",
+ title: "GLAA",
+ subtitle: "International Programmatic Certification",
+ description: "Certified member of the Global Liberal Arts Alliance, affirming our commitment to interdisciplinary education globally.",
+ },
+];
+
+export default function AccreditationGrid() {
+ return (
+
+
+
+
Recognized Issuing Bodies
+
Our institutional and programmatic accreditations ensure global recognition of our degrees.
+
+
+ {accreditations.map((item) => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/app/components/accreditation/AccreditationHero.tsx b/app/components/accreditation/AccreditationHero.tsx
new file mode 100644
index 0000000..1ee0518
--- /dev/null
+++ b/app/components/accreditation/AccreditationHero.tsx
@@ -0,0 +1,22 @@
+export default function AccreditationHero() {
+ return (
+
+
+
+
+
+ Global Standards
+
+
+
+ Accreditations
+ & Compliance
+
+
+ Our commitment to excellence is validated by leading national and international accrediting bodies. We uphold the highest standards of academic rigor, research ethics, and institutional quality.
+
+
+
+
+ );
+}
diff --git a/app/components/accreditation/QualityStandards.tsx b/app/components/accreditation/QualityStandards.tsx
new file mode 100644
index 0000000..cc30c78
--- /dev/null
+++ b/app/components/accreditation/QualityStandards.tsx
@@ -0,0 +1,71 @@
+const features = [
+ {
+ icon: "fa-solid fa-chart-line",
+ title: "Continuous Evaluation",
+ description: "Annual reviews of all academic programs by independent academic boards.",
+ },
+ {
+ icon: "fa-solid fa-users",
+ title: "Peer Review Integration",
+ description: "Regular assessments conducted by visiting professors from partner institutions.",
+ },
+ {
+ icon: "fa-solid fa-shield",
+ title: "Ethical Compliance",
+ description: "Strict adherence to international research ethics and data protection standards.",
+ },
+];
+
+export default function QualityStandards() {
+ return (
+
+
+
+
+ {/* Left: Text content */}
+
+
+
+ Quality Assurance
+
+
Our Framework for Excellence
+
+ Our internal quality assurance mechanisms are designed to continuously evaluate and improve our academic offerings, research outputs, and student services.
+
+
+
+ {features.map((f) => (
+
+
+
+
+
+
{f.title}
+
{f.description}
+
+
+ ))}
+
+
+
+ {/* Right: Images */}
+
+
+

+

+
+
+
+
+
+
+ );
+}
diff --git a/app/components/contactus/Accessibility.tsx b/app/components/contactus/Accessibility.tsx
new file mode 100644
index 0000000..89444c3
--- /dev/null
+++ b/app/components/contactus/Accessibility.tsx
@@ -0,0 +1,21 @@
+export default function Accessibility() {
+ return (
+
+
Accessibility
+
+ Our campus is designed to be accessible to everyone. If you require specific accommodations for your visit, please contact us in advance.
+
+
+
+ Wheelchair Access
+
+
+ Elevators
+
+
+ Reserved Parking
+
+
+
+ );
+}
diff --git a/app/components/contactus/ContactHero.tsx b/app/components/contactus/ContactHero.tsx
new file mode 100644
index 0000000..531d1cc
--- /dev/null
+++ b/app/components/contactus/ContactHero.tsx
@@ -0,0 +1,17 @@
+export default function ContactHero() {
+ return (
+
+ );
+}
diff --git a/app/components/contactus/ContactSplit.tsx b/app/components/contactus/ContactSplit.tsx
new file mode 100644
index 0000000..bae717f
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/app/components/contactus/DepartmentCard.tsx b/app/components/contactus/DepartmentCard.tsx
new file mode 100644
index 0000000..322b3ec
--- /dev/null
+++ b/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 (
+
+
+
+
+
{title}
+
{description}
+
+
+ );
+}
diff --git a/app/components/contactus/DepartmentCardBlue.tsx b/app/components/contactus/DepartmentCardBlue.tsx
new file mode 100644
index 0000000..9416a9c
--- /dev/null
+++ b/app/components/contactus/DepartmentCardBlue.tsx
@@ -0,0 +1,22 @@
+export default function DepartmentCardBlue() {
+ return (
+
+
+
+
+
+
Research Office
+
+ Grant applications, ethics committee approvals, lab space allocation, and cross-disciplinary collaboration opportunities.
+
+
+
+ );
+}
diff --git a/app/components/contactus/DepartmentCardEmpty.tsx b/app/components/contactus/DepartmentCardEmpty.tsx
new file mode 100644
index 0000000..f4e55e2
--- /dev/null
+++ b/app/components/contactus/DepartmentCardEmpty.tsx
@@ -0,0 +1,16 @@
+export default function DepartmentCardEmpty() {
+ return (
+
+
+
+
+
Not sure who to contact?
+
+ Use our general inquiry form below and we'll route your message to the appropriate department.
+
+
+ Go to Form
+
+
+ );
+}
diff --git a/app/components/contactus/DepartmentDirectory.tsx b/app/components/contactus/DepartmentDirectory.tsx
new file mode 100644
index 0000000..5cd42d0
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/app/components/contactus/InquiryForm.tsx b/app/components/contactus/InquiryForm.tsx
new file mode 100644
index 0000000..71ff7c6
--- /dev/null
+++ b/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 (
+
+
+
Send a Message
+
Please fill out the form below and our team will get back to you within 24-48 business hours.
+
+
+
+
+ );
+}
diff --git a/app/components/contactus/LocationMap.tsx b/app/components/contactus/LocationMap.tsx
new file mode 100644
index 0000000..b68c660
--- /dev/null
+++ b/app/components/contactus/LocationMap.tsx
@@ -0,0 +1,26 @@
+export default function LocationMap() {
+ return (
+
+
+

+ {/* Floating Pin Card */}
+
+
+
+
+
+
Main Campus
+
+ 15 Rue de l'École de Médecine
75006 Paris, France
+
+
Get Directions
+
+
+
+
+ );
+}
diff --git a/app/components/contactus/OfficeHours.tsx b/app/components/contactus/OfficeHours.tsx
new file mode 100644
index 0000000..9acfe58
--- /dev/null
+++ b/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 (
+
+
+
+
+ {hours.map(({ day, time }) => (
+
+ {day}
+ {time
+ ? {time}
+ : Closed
+ }
+
+ ))}
+
+
+ );
+}
diff --git a/app/contactus/contact.css b/app/contactus/contact.css
new file mode 100644
index 0000000..567d422
--- /dev/null
+++ b/app/contactus/contact.css
@@ -0,0 +1,159 @@
+/* ============================================
+ Contact Page — Scoped Styles
+ Scope: .contact-page
+ ============================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
+
+/* Reset heading override từ main.css */
+.contact-page h1,
+.contact-page h2,
+.contact-page h3,
+.contact-page h4 {
+ font-size: unset;
+ font-weight: unset;
+ line-height: unset;
+ margin: 0;
+ padding: 0;
+}
+
+/* Typography */
+.contact-page .contact-heading {
+ font-family: 'Playfair Display', serif;
+ font-size: clamp(2rem, 4vw, 3.5rem);
+ font-weight: 700;
+ line-height: 1.15;
+}
+
+.contact-page .contact-card-title {
+ font-family: 'Playfair Display', serif;
+ font-size: 1.1rem;
+ font-weight: 700;
+ line-height: 1.3;
+}
+
+.contact-page .contact-form-title {
+ font-family: 'Playfair Display', serif;
+ font-size: 1.75rem;
+ font-weight: 700;
+ line-height: 1.2;
+}
+
+.contact-page .contact-pin-title {
+ font-family: 'Playfair Display', serif;
+ font-size: 0.875rem;
+ font-weight: 700;
+}
+
+/* Color token: --primary */
+.contact-page .text-primary,
+.contact-page .hover\:text-primary:hover { color: rgb(38, 60, 111); }
+
+.contact-page .bg-primary { background-color: rgb(38, 60, 111) !important; }
+
+.contact-page .border-primary { border-color: rgb(38, 60, 111); }
+
+.contact-page .focus\:border-primary:focus { border-color: rgb(38, 60, 111); }
+.contact-page .focus\:ring-primary:focus { --tw-ring-color: rgb(38, 60, 111); }
+
+/* group-hover bg-primary */
+.contact-page .group:hover .group-hover\:bg-primary { background-color: rgb(38, 60, 111) !important; }
+.contact-page .group:hover .group-hover\:text-white { color: #fff; }
+
+/* Color token: --dark */
+.contact-page .text-dark { color: #111827; }
+
+/* bg-white/5, /10 */
+.contact-page .bg-white\/5 { background-color: rgba(255,255,255,0.05); }
+.contact-page .bg-white\/10 { background-color: rgba(255,255,255,0.10); }
+
+/* border-white/20, /50 */
+.contact-page .border-white\/20 { border-color: rgba(255,255,255,0.20); }
+.contact-page .border-white\/50 { border-color: rgba(255,255,255,0.50); }
+
+/* text-white/80, /90 */
+.contact-page .text-white\/80 { color: rgba(255,255,255,0.80); }
+.contact-page .text-white\/90 { color: rgba(255,255,255,0.90); }
+
+/* bg-white/95 */
+.contact-page .bg-white\/95 { background-color: rgba(255,255,255,0.95); }
+
+/* border-t border-white/20 */
+.contact-page .border-white\/20 { border-color: rgba(255,255,255,0.20); }
+
+/* rounded fixes — main.css có thể reset border-radius */
+.contact-page .rounded-\[16px\] { border-radius: 16px !important; }
+.contact-page .rounded-\[24px\] { border-radius: 24px !important; }
+.contact-page .rounded-\[12px\] { border-radius: 12px !important; }
+.contact-page .rounded-full { border-radius: 9999px !important; }
+.contact-page .rounded-\[12px\] { border-radius: 12px !important; }
+
+/* button reset */
+.contact-page button,
+.contact-page input,
+.contact-page select,
+.contact-page textarea {
+ font-size: inherit;
+}
+
+/* Send Message button */
+.contact-page .bg-primary.rounded-\[12px\] {
+ border-radius: 12px !important;
+ background-color: rgb(38, 60, 111) !important;
+}
+
+.contact-page .bg-primary.rounded-\[12px\]:hover {
+ background-color: rgba(38, 60, 111, 0.9) !important;
+}
+
+/* Icon color fix */
+.contact-page .text-primary i,
+.contact-page i.text-primary,
+.contact-page .text-primary svg,
+.contact-page svg.text-primary {
+ color: rgb(38, 60, 111) !important;
+}
+
+/* Icon box bg-blue-50 */
+.contact-page .bg-blue-50 {
+ background-color: rgb(239, 246, 255) !important;
+}
+
+/* blue-100 border */
+.contact-page .border-blue-100 {
+ border-color: rgb(219, 234, 254) !important;
+}
+
+/* info box bg-blue-50 text-primary */
+.contact-page .bg-blue-50.rounded-\[12px\] {
+ background-color: rgb(239, 246, 255) !important;
+}
+
+/* Icon box hover — đổi icon sang trắng khi hover card */
+.contact-page .group:hover .group-hover\:text-white i,
+.contact-page .group:hover .group-hover\:text-white svg {
+ color: #ffffff !important;
+}
+
+/* Form inputs border-radius và placeholder */
+.contact-page input,
+.contact-page select,
+.contact-page textarea {
+ border-radius: 12px !important;
+}
+
+.contact-page input::placeholder,
+.contact-page textarea::placeholder {
+ color: #9ca3af !important;
+}
+
+/* contact-form-title size */
+.contact-page .contact-form-title {
+ font-size: 2rem !important;
+}
+
+/* Consent checkbox alignment */
+.contact-page .custom-checkbox {
+ margin-top: 2px !important;
+ flex-shrink: 0;
+}
diff --git a/app/contactus/page.tsx b/app/contactus/page.tsx
new file mode 100644
index 0000000..8cffc62
--- /dev/null
+++ b/app/contactus/page.tsx
@@ -0,0 +1,14 @@
+import "./contact.css";
+import ContactHero from "../components/contactus/ContactHero";
+import DepartmentDirectory from "../components/contactus/DepartmentDirectory";
+import ContactSplit from "../components/contactus/ContactSplit";
+
+export default function ContactUsPage() {
+ return (
+
+
+
+
+
+ );
+}