feat(ui): overhaul landing, explore and detail surfaces

app/explore/enterprise/organisations/OrgCard.tsx

@@ -26,7 +26,7 @@ export default function OrgCard({
   return (
     <Link
       href={`/explore/enterprise/organisations/${org.slug}`}
-      className="group flex flex-col overflow-hidden rounded-2xl border border-border bg-card transition-all duration-300 hover:shadow-lg"
+      className="card-lift group flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-card hover:border-foreground/25 hover:shadow-lift"
     >
       <div className="relative h-24 overflow-hidden bg-gradient-to-br from-muted to-muted">
         {org.bannerImage && (

app/explore/enterprise/organisations/[orgSlug]/page.tsx

@@ -219,7 +219,7 @@ function ExpertMiniCard({
   return (
     <Link
       href={`/explore/experts/${expert.id}`}
-      className="flex items-center gap-3 p-4 bg-card rounded-xl border border-border hover:border-border hover:shadow-md transition-all group"
+      className="card-lift group flex items-center gap-3 rounded-2xl border border-border bg-card p-4 shadow-card hover:border-foreground/25 hover:shadow-lift"
     >
       <div className="relative w-12 h-12 flex-shrink-0">
         <Image
@@ -235,7 +235,7 @@ function ExpertMiniCard({
       </div>
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-1">
-          <p className="font-semibold text-sm text-foreground group-hover:text-muted-foreground truncate">
+          <p className="font-semibold text-sm tracking-tight text-foreground group-hover:text-foreground/70 truncate transition-colors">
             {expert.user.name}
           </p>
           {expert.isVerified && (
@@ -295,9 +295,9 @@ export default async function OrgProfilePage({
   >[];
 
   return (
-    <main className="min-h-screen bg-muted">
+    <main className="min-h-screen bg-background">
       {/* Banner — decorative dark cover header */}
-      <div className="relative h-48 md:h-64 bg-gradient-to-br from-zinc-800 to-zinc-900 overflow-hidden">
+      <div className="relative h-56 md:h-72 bg-gradient-to-br from-zinc-800 to-zinc-950 overflow-hidden">
         {org.bannerImage && (
           <Image
             src={org.bannerImage}
@@ -306,24 +306,26 @@ export default async function OrgProfilePage({
             className="object-cover opacity-40"
           />
         )}
-        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-900/60" />
-      </div>
+        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-950/70" />
 
-      <div className="max-w-[1100px] mx-auto px-4 md:px-8">
-        {/* Back link */}
-        <div className="py-4">
-          <Link
-            href="/explore/enterprise/organisations"
-            className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            All Organisations
-          </Link>
+        {/* Back link lives inside the banner so the header card owns the fold */}
+        <div className="absolute top-0 left-0 right-0 z-10">
+          <div className="max-w-[1100px] mx-auto px-4 md:px-8 py-5">
+            <Link
+              href="/explore/enterprise/organisations"
+              className="group inline-flex items-center gap-1.5 text-sm text-white/80 transition-colors hover:text-white"
+            >
+              <ArrowLeft className="w-4 h-4 transition-transform duration-300 group-hover:-translate-x-0.5" />
+              All Organisations
+            </Link>
+          </div>
         </div>
+      </div>
 
+      <div className="max-w-[1100px] mx-auto px-4 md:px-8">
         {/* Org header card */}
-        <div className="bg-card rounded-2xl border border-border p-6 md:p-8 mb-8 -mt-16 relative shadow-sm">
-          <div className="flex flex-col sm:flex-row gap-5 items-start">
+        <div className="rounded-3xl border border-border bg-card p-6 shadow-card md:p-8 mb-10 -mt-20 relative">
+          <div className="flex flex-col sm:flex-row gap-6 items-start">
             {/* Logo */}
             <div className="w-20 h-20 rounded-2xl bg-muted border-2 border-card shadow-md flex items-center justify-center overflow-hidden flex-shrink-0">
               {org.logo ? (

app/explore/enterprise/organisations/page.tsx

@@ -2,6 +2,7 @@ import { Sparkles } from "lucide-react";
 import type { Metadata } from "next";
 import { Suspense } from "react";
 
+import { SpotlightGrid } from "@/components/motion";
 import {
   DEFAULT_ORGANISATION_FILTERS,
   getOrganisationsMetadata,
@@ -58,28 +59,26 @@ async function OrganisationsDirectory() {
 export default function ExploreOrganisationsPage() {
   return (
     <main className="min-h-screen bg-background">
-      {/* Hero */}
-      <section className="relative overflow-hidden bg-zinc-950 pt-32 pb-16">
-        <div className="absolute inset-0">
-          <div className="animate-blob absolute left-1/4 top-1/4 h-[500px] w-[500px] rounded-full bg-zinc-800/30 blur-[120px]" />
-          <div className="animate-blob animation-delay-2000 absolute bottom-1/4 right-1/4 h-[400px] w-[400px] rounded-full bg-zinc-700/20 blur-[100px]" />
-        </div>
-        <div className="grid-pattern absolute inset-0 opacity-20" />
+      {/* Hero — same left-aligned stage as the experts/programs listings */}
+      <section className="relative overflow-hidden bg-zinc-950 pt-36 pb-16">
+        <SpotlightGrid className="opacity-60" />
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -top-32 left-1/2 h-[360px] w-[720px] -translate-x-1/2 rounded-full bg-zinc-500/10 blur-[120px]"
+        />
 
         <div className="relative z-10 mx-auto max-w-[1400px] px-4 md:px-8">
-          <div className="mx-auto max-w-3xl text-center">
-            <div className="mb-8 inline-flex items-center gap-2 rounded-full border border-zinc-700/50 bg-zinc-800/50 px-4 py-2 backdrop-blur-sm">
-              <Sparkles className="h-4 w-4 text-white" />
-              <span className="text-sm font-medium text-zinc-300">
-                Expert Networks &amp; Agencies
-              </span>
+          <div className="max-w-3xl">
+            <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3.5 py-1 text-xs text-zinc-300">
+              <Sparkles className="h-3.5 w-3.5" />
+              Expert Networks &amp; Agencies
             </div>
-            <h1 className="text-fluid-4xl mb-6 font-bold tracking-tight text-white">
+            <h1 className="text-fluid-4xl md:text-fluid-5xl mb-5 font-bold leading-[1.05] tracking-tight text-white">
               Explore <span className="silver-text">Organisations</span>
             </h1>
-            <p className="mx-auto max-w-xl text-lg text-zinc-300">
-              Discover expert networks, consulting agencies, and learning
-              institutions on Familiarise. Book their curated experts directly.
+            <p className="max-w-xl text-lg text-zinc-400">
+              Expert networks, consulting agencies, and learning institutions —
+              book their curated experts directly.
             </p>
           </div>
         </div>

app/explore/experts/ExpertsInteractiveContent.tsx

@@ -147,24 +147,25 @@ export default function ExpertsInteractiveContent({
 
           {/* Search banner */}
           <motion.div
-            className="mb-6"
+            className="mb-8"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5, delay: 0.2 }}
           >
-            <div className="relative mb-6 py-10 px-6 rounded-2xl bg-gradient-to-br from-zinc-900 via-zinc-800 to-zinc-700 overflow-hidden">
-              <div className="absolute inset-0 opacity-10">
-                <div className="absolute top-0 right-0 w-72 h-72 bg-white rounded-full blur-3xl -translate-y-1/2 translate-x-1/4" />
-                <div className="absolute bottom-0 left-0 w-56 h-56 bg-white rounded-full blur-3xl translate-y-1/2 -translate-x-1/4" />
-              </div>
+            <div className="relative overflow-hidden rounded-2xl border border-border bg-zinc-950 px-6 py-9 md:px-10">
+              <div
+                aria-hidden
+                className="pointer-events-none absolute -top-20 right-0 h-56 w-96 rounded-full bg-zinc-500/15 blur-[90px]"
+              />
+              <div className="grid-pattern absolute inset-0 opacity-30" />
               <div className="relative text-center">
-                <h2 className="text-2xl md:text-3xl font-bold text-white mb-2">
-                  Find Your Perfect Expert
+                <h2 className="text-fluid-2xl md:text-fluid-3xl font-bold tracking-tight text-white">
+                  Find your perfect expert
                 </h2>
-                <p className="text-zinc-400 text-sm md:text-base max-w-lg mx-auto">
-                  Search by name, skill, or specialty to connect with top
-                  consultants
+                <p className="mt-2 text-sm text-zinc-400 md:text-base">
+                  Search by name, skill, or specialty — filters live in the
+                  panel below.
                 </p>
               </div>
             </div>

app/explore/experts/[consultantId]/ExpertProfileClient.tsx

@@ -250,15 +250,15 @@ export function ExpertProfileClient({
   }, [currentDate, selectedDate]);
 
   return (
-    <main className="bg-muted">
+    <main className="bg-background">
       {/* Back Navigation */}
-      <div className="bg-card border-b border-border">
-        <div className="w-full px-4 md:px-8 lg:px-12 py-4">
+      <div className="glass-bar sticky top-[calc(var(--header-height,5rem))] z-30">
+        <div className="w-full px-4 md:px-8 lg:px-12 py-3">
           <Link
             href="/explore/experts"
-            className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+            className="group inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
           >
-            <ArrowLeft className="w-4 h-4" />
+            <ArrowLeft className="w-4 h-4 transition-transform duration-300 group-hover:-translate-x-0.5" />
             Back to Experts
           </Link>
         </div>

app/explore/experts/[consultantId]/components/AboutSection.tsx

@@ -27,7 +27,7 @@ export function AboutSection({
   consultantDetails,
 }: AboutSectionProps) {
   return (
-    <div className="bg-card rounded-2xl border border-border p-6 md:p-8 space-y-6">
+    <div className="rounded-2xl border border-border bg-card p-6 shadow-card md:p-8 space-y-6">
       {/* About */}
       <div>
         <div className="flex items-center gap-2 mb-3">

app/explore/experts/[consultantId]/components/ExperienceSection.tsx

@@ -150,7 +150,7 @@ export function ExperienceSection({
   }
 
   return (
-    <div className="bg-card rounded-2xl border border-border p-6 md:p-8 space-y-8">
+    <div className="rounded-2xl border border-border bg-card p-6 shadow-card md:p-8 space-y-8">
       {/* Work Experience */}
       {workExperiences.length > 0 && (
         <div>