feat: create Partnership component and styles

app/components/partnership/CollaborateCTA.tsx

@@ -0,0 +1,16 @@
+import CollaborateInfo from "./CollaborateInfo";
+import PartnershipForm from "./PartnershipForm";
+
+export default function CollaborateCTA() {
+  return (
+    <section id="collaborate-cta" className="py-14 bg-brand-blue relative overflow-hidden">
+      <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-brand-hover rounded-full blur-3xl opacity-50 -translate-y-1/2 translate-x-1/3"></div>
+      <div className="max-w-[1440px] mx-auto px-6 lg:px-8 relative z-10">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <CollaborateInfo />
+          <PartnershipForm />
+        </div>
+      </div>
+    </section>
+  );
+}

app/components/partnership/CollaborateInfo.tsx

@@ -0,0 +1,35 @@
+const checkItems = [
+  "Joint Research Initiatives",
+  "Student & Faculty Exchange",
+  "Industry Integration & Internships",
+];
+
+export default function CollaborateInfo() {
+  return (
+    <div>
+      {/* Badge */}
+      <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-light uppercase tracking-wider">Join Our Network</span>
+      </div>
+
+      {/* Heading — dùng div tránh main.css override h2 */}
+      <div className="ps-heading text-white font-bold mb-6 leading-tight">
+        Collaborate <br />With Us
+      </div>
+
+      <p className="text-lg text-brand-light opacity-90 mb-8 leading-relaxed max-w-lg">
+        We are constantly seeking to expand our network with institutions and organizations that share our commitment to rigorous research and liberal arts education.
+      </p>
+
+      <ul className="space-y-4 text-white mb-10 pl-4 pt-5">
+        {checkItems.map((item) => (
+          <li key={item} className="flex items-center gap-3">
+            <i className="fas fa-circle-check text-brand-accent"></i>
+            <span>{item}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

app/components/partnership/MainIntroBlock.tsx

@@ -0,0 +1,39 @@
+export default function MainIntroBlock() {
+  return (
+    <div className="col-span-12 lg:col-span-8 bento-item rounded-[24px] p-10 lg:p-16 flex flex-col justify-start pt-12 relative overflow-hidden">
+      <div className="absolute top-0 right-0 w-64 h-64 bg-brand-light rounded-full blur-3xl opacity-50 -translate-y-1/2 translate-x-1/4"></div>
+      <div className="relative z-10">
+
+        {/* Badge */}
+        <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 Network</span>
+        </div>
+
+        {/* Heading — dùng div tránh main.css override h1 */}
+        <div className="ps-heading text-brand-blue tracking-tight mb-8">
+          Global <br />Partnerships
+        </div>
+
+        {/* Description */}
+        <div className="space-y-4 max-w-xl mb-10">
+          <p className="text-lg text-ui-muted leading-relaxed font-medium">
+           [We at Université Libérale de Paris believe that research and liberal arts education thrive through global collaboration.]
+          </p>
+          <p className="text-lg text-ui-muted leading-relaxed">
+            [By bridging international institutions and industry leaders, we create opportunities for our students and faculty to engage in transformative academic exchanges.]
+          </p>
+        </div>
+
+        {/* Button */}
+        <button
+          className="px-5 py-2 bg-white border border-ui-border text-brand-blue text-xs font-semibold transition-all duration-300 flex items-center gap-2 ps-explore-btn"
+          style={{ borderRadius: "20px" }}
+        >
+          Explore Directory <i className="fas fa-arrow-right text-xs"></i>
+        </button>
+
+      </div>
+    </div>
+  );
+}

app/components/partnership/NetworkHighlightBlock.tsx

@@ -0,0 +1,26 @@
+export default function NetworkHighlightBlock() {
+  return (
+    <div className="col-span-12 md:col-span-6 lg:col-span-4 bento-item ps-highlight-card rounded-[24px] p-10 flex flex-col justify-between text-white relative overflow-hidden">
+      <div className="absolute bottom-0 right-0 w-48 h-48 bg-brand-accent rounded-full blur-2xl opacity-40 translate-y-1/4 translate-x-1/4"></div>
+      <div className="relative z-10">
+
+        {/* Icon + Brand */}
+        <div className="flex items-center gap-3 mb-12">
+          <i className="fas fa-globe text-2xl text-brand-light"></i>
+          <span className="font-bold text-xl tracking-tight">ULP Network</span>
+        </div>
+
+        {/* Heading — dùng div tránh main.css override h2 */}
+        <div>
+          <div className="ps-subheading text-white font-bold leading-tight mb-4">
+            Connect Across<br />Continents
+          </div>
+          <p className="text-brand-light opacity-90">
+            150+ active academic agreements across 45 countries.
+          </p>
+        </div>
+
+      </div>
+    </div>
+  );
+}

app/components/partnership/PartnershipForm.tsx

@@ -0,0 +1,49 @@
+export default function PartnershipForm() {
+  return (
+    <div className="bg-white rounded-[24px] p-8 md:p-10 shadow-2xl">
+      {/* Title — dùng div tránh main.css override h3 */}
+      <div className="ps-form-title text-ui-text font-bold mb-2">Partnership Inquiry</div>
+      <p className="text-sm text-ui-muted mb-8">
+        Fill out this brief form and our Global Relations office will contact you.
+      </p>
+
+      <form className="space-y-5">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+          <div>
+            <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Institution Name</label>
+            <input type="text" className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue" placeholder="e.g. Oxford University" />
+          </div>
+          <div>
+            <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Contact Person</label>
+            <input type="text" className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue" placeholder="Full Name" />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+          <div>
+            <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Email Address</label>
+            <input type="email" className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue" placeholder="email@institution.edu" />
+          </div>
+          <div>
+            <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Partnership Type</label>
+            <select className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-brand-blue appearance-none">
+              <option>Academic Exchange</option>
+              <option>Joint Research</option>
+              <option>Industry Partnership</option>
+              <option>Other</option>
+            </select>
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Message</label>
+          <textarea rows={3} className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue resize-none" placeholder="Briefly describe your proposed collaboration..." />
+        </div>
+
+        <button type="button" className="w-full py-4 bg-brand-blue text-white font-bold rounded-xl hover:bg-brand-hover transition-colors shadow-md mt-4">
+          Submit Inquiry
+        </button>
+      </form>
+    </div>
+  );
+}