feat: add Contact and Accreditation pages

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 (
+    <div className="bg-white p-8 rounded-[24px] shadow-soft border border-ui-border hover:shadow-hover transition-all duration-300">
+      <div className="h-20 flex items-center mb-6">
+        <img src={logo} alt={logoAlt} className="h-16 object-contain grayscale hover:grayscale-0 transition-all duration-300" />
+      </div>
+      <div className="acc-card-title font-bold text-ui-text mb-2">{title}</div>
+      <p className="text-sm text-brand-accent font-medium mb-4">{subtitle}</p>
+      <p className="text-ui-muted leading-relaxed text-sm">{description}</p>
+    </div>
+  );
+}

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 (
+    <section id="accreditation-grid" className="py-20 bg-ui-bg">
+      <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+        <div className="mb-12">
+          <div className="acc-section-title font-bold text-ui-text mb-4">Recognized Issuing Bodies</div>
+          <p className="text-ui-muted text-lg">Our institutional and programmatic accreditations ensure global recognition of our degrees.</p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {accreditations.map((item) => (
+            <AccreditationCard key={item.title} {...item} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

app/components/accreditation/AccreditationHero.tsx

@@ -0,0 +1,22 @@
+export default function AccreditationHero() {
+  return (
+    <section id="accreditation-hero" className="relative w-full py-20 lg:py-24 bg-white overflow-hidden mesh-bg border-b border-ui-border">
+      <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+        <div className="text-center max-w-4xl mx-auto">
+          <div className="inline-flex items-center gap-2 mb-6">
+            <span className="w-8 h-[2px] bg-brand-accent"></span>
+            <span className="text-sm font-semibold text-brand-blue uppercase tracking-wider">Global Standards </span>
+            <span className="w-8 h-[2px] bg-brand-accent"></span>
+          </div>
+          <div className="acc-heading font-bold text-brand-blue leading-tight mb-6">
+            Accreditations  <br />
+            <span className="text-ui-text">&amp; Compliance</span>
+          </div>
+          <p className="text-lg text-ui-muted leading-relaxed mb-8">
+            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.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

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 (
+    <section id="quality-standards" className="py-20 bg-white border-t border-ui-border">
+      <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+
+          {/* Left: Text content */}
+          <div className="space-y-8">
+            <div className="inline-flex items-center gap-2">
+              <span className="w-8 h-[2px] bg-brand-accent"></span>
+              <span className="text-sm font-semibold text-ui-muted uppercase tracking-wider">Quality Assurance</span>
+            </div>
+            <div className="acc-section-title font-bold text-ui-text">Our Framework for Excellence</div>
+            <p className="text-lg text-ui-muted leading-relaxed">
+              Our internal quality assurance mechanisms are designed to continuously evaluate and improve our academic offerings, research outputs, and student services.
+            </p>
+
+            <div className="space-y-6 mt-8">
+              {features.map((f) => (
+                <div key={f.title} className="flex gap-4">
+                  <div className="w-12 h-12 rounded-xl bg-brand-light flex items-center justify-center text-brand-blue shrink-0">
+                    <i className={`${f.icon} text-xl`}></i>
+                  </div>
+                  <div>
+                    <div className="acc-card-title font-bold text-ui-text mb-1">{f.title}</div>
+                    <p className="text-ui-muted text-sm">{f.description}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right: Images */}
+          <div className="relative">
+            <div className="grid grid-cols-2 gap-4">
+              <img
+                className="w-full h-64 object-cover rounded-[24px] shadow-soft"
+                src="https://storage.googleapis.com/uxpilot-auth.appspot.com/a45c3de13a-8173142c33595269388d.png"
+                alt="Students studying in library"
+              />
+              <img
+                className="w-full h-64 object-cover rounded-[24px] shadow-soft mt-8"
+                src="https://storage.googleapis.com/uxpilot-auth.appspot.com/cb66207ea0-16795a67db08ef0e6f8c.png"
+                alt="Research facility"
+              />
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}