Site design updates

frontend/src/marketing/pages/Partners.tsx

@@ -31,7 +31,7 @@ const tiers = [
 
 const Partners: React.FC = () => {
   return (
-    <div className="bg-white text-slate-900">
+    <div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
       <section className="max-w-6xl mx-auto px-6 pt-24 pb-16">
         <SectionHeading
           eyebrow="Partners"
@@ -41,28 +41,39 @@ const Partners: React.FC = () => {
       </section>
 
       <section className="max-w-6xl mx-auto px-6 pb-24 grid grid-cols-1 md:grid-cols-3 gap-8">
-        {tiers.map((tier) => (
-          <div
-            key={tier.title}
-            className="rounded-3xl border border-slate-200 bg-white p-8 flex flex-col gap-5"
-          >
-            <span className="text-xs uppercase tracking-[0.3em] text-slate-500">
-              Program
-            </span>
-            <h3 className="text-xl font-semibold text-slate-900">{tier.title}</h3>
-            <ul className="space-y-3 text-sm text-slate-600">
-              {tier.benefits.map((benefit) => (
-                <li key={benefit} className="flex gap-3">
-                  <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
-                  {benefit}
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
+        {tiers.map((tier, idx) => {
+          const colors = [
+            { border: "border-[#0693e3]/40", gradient: "from-[#0693e3]/10 to-white", dot: "bg-[#0693e3]" },
+            { border: "border-[#0bbf87]/40", gradient: "from-[#0bbf87]/10 to-white", dot: "bg-[#0bbf87]" },
+            { border: "border-[#ff7a00]/40", gradient: "from-[#ff7a00]/10 to-white", dot: "bg-[#ff7a00]" },
+          ];
+          const colorScheme = colors[idx % colors.length];
+          return (
+            <div
+              key={tier.title}
+              className={`rounded-3xl border-2 ${colorScheme.border} bg-gradient-to-br ${colorScheme.gradient} p-8 flex flex-col gap-5 hover:shadow-xl transition-all hover:-translate-y-1`}
+            >
+              <span className="text-xs uppercase tracking-[0.3em] text-slate-500 font-semibold">
+                Program
+              </span>
+              <h3 className="text-xl font-semibold text-slate-900">{tier.title}</h3>
+              <ul className="space-y-3 text-sm text-slate-600">
+                {tier.benefits.map((benefit, benefitIdx) => {
+                  const benefitColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]", "bg-[#5d4ae3]"];
+                  return (
+                    <li key={benefit} className="flex gap-3">
+                      <span className={`mt-1 size-1.5 rounded-full ${benefitColors[benefitIdx % benefitColors.length]} shadow-sm`} />
+                      {benefit}
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          );
+        })}
       </section>
 
-      <section className="bg-slate-50/70 border-y border-slate-200">
+      <section className="bg-gradient-to-br from-[#0693e3]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20">
         <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
           <div className="space-y-6">
             <SectionHeading
@@ -71,25 +82,26 @@ const Partners: React.FC = () => {
               description="Use Igny8 APIs and webhooks to power your own products, analytics, or client portals. Automate keyword ingestion, content creation, asset delivery, and reporting."
               align="left"
             />
-            <div className="rounded-3xl border border-slate-200 bg-white p-6 text-sm text-slate-600">
+            <div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 to-white p-6 text-sm text-slate-600 shadow-lg">
               API docs placeholder (download at `/marketing/images/api-docs.png`, 1100×720).
             </div>
           </div>
-          <div className="rounded-3xl border border-slate-200 bg-white p-10 space-y-6">
-            <h4 className="text-lg font-semibold text-slate-900">Partner resources</h4>
+          <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 to-white p-10 space-y-6">
+            <h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
+              <span className="size-2 rounded-full bg-[#0bbf87]"></span>
+              Partner resources
+            </h4>
             <ul className="space-y-4 text-sm text-slate-600">
-              <li className="flex gap-3">
-                <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
-                Sales playbooks, ROI calculators, and demo environments.
-              </li>
-              <li className="flex gap-3">
-                <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
-                Shared Slack channels with Igny8 product and marketing teams.
-              </li>
-              <li className="flex gap-3">
-                <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
-                Quarterly partner labs to showcase launches and integrations.
-              </li>
+              {[
+                { text: "Sales playbooks, ROI calculators, and demo environments.", color: "bg-[#0693e3]" },
+                { text: "Shared Slack channels with Igny8 product and marketing teams.", color: "bg-[#0bbf87]" },
+                { text: "Quarterly partner labs to showcase launches and integrations.", color: "bg-[#ff7a00]" },
+              ].map((item) => (
+                <li key={item.text} className="flex gap-3">
+                  <span className={`mt-1 size-1.5 rounded-full ${item.color} shadow-sm`} />
+                  {item.text}
+                </li>
+              ))}
             </ul>
           </div>
         </div>