From 739408255749edbe0a674a6fae7c4b626fe0e207 Mon Sep 17 00:00:00 2001
From: BountySpaghetti <BountySpaghetti@users.noreply.github.com>
Date: Sun, 26 Jul 2026 01:55:51 +0100
Subject: [PATCH] feat(educators): add public educator storefront pages

- Add /educators/[profileid] public route accessible without authentication
- Add EducatorProfileHeader with avatar, bio, role, stats, follower count
- Add PublicCourseCard, PublicBookCard, PublicSpaceCard (no auth dependencies)
- Add tabbed navigation for courses, books, and spaces
- Add share button with Web Share API and clipboard fallback
- Add auth-aware follow: logged-out users redirect to /login?next=...
- Add privacy guard: shows not-found for missing/private profiles
- Rewire instructor links on courseCard, libraryCard, spaceCard to /educators/[id]
- Add 'View public page' link on authenticated profile page
- Add generateMetadata for SEO (title, description, OpenGraph)

Closes #116
---
 .../[profileid]/EducatorPageClient.jsx        | 271 ++++++++++++++++++
 app/(pages)/educators/[profileid]/page.jsx    |  24 ++
 app/account/profile/[profileid]/page.jsx      |   9 +
 .../molecules/dashboard/cards/courseCard.jsx  |   2 +-
 .../cards/educators/PublicBookCard.jsx        |  63 ++++
 .../cards/educators/PublicCourseCard.jsx      |  71 +++++
 .../cards/educators/PublicSpaceCard.jsx       |  97 +++++++
 .../molecules/dashboard/cards/libraryCard.jsx |   2 +-
 .../molecules/dashboard/cards/spaceCard.jsx   |   8 +-
 .../educators/EducatorProfileHeader.jsx       | 146 ++++++++++
 10 files changed, 689 insertions(+), 4 deletions(-)
 create mode 100644 app/(pages)/educators/[profileid]/EducatorPageClient.jsx
 create mode 100644 app/(pages)/educators/[profileid]/page.jsx
 create mode 100644 components/molecules/dashboard/cards/educators/PublicBookCard.jsx
 create mode 100644 components/molecules/dashboard/cards/educators/PublicCourseCard.jsx
 create mode 100644 components/molecules/dashboard/cards/educators/PublicSpaceCard.jsx
 create mode 100644 components/organisms/educators/EducatorProfileHeader.jsx

diff --git a/app/(pages)/educators/[profileid]/EducatorPageClient.jsx b/app/(pages)/educators/[profileid]/EducatorPageClient.jsx
new file mode 100644
index 0000000..f4d92a6
--- /dev/null
+++ b/app/(pages)/educators/[profileid]/EducatorPageClient.jsx
@@ -0,0 +1,271 @@
+"use client";
+import React, { use, useState, useEffect } from "react";
+import Link from "next/link";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { getUserById } from "@/lib/actions/users/getUserById";
+import { fetchUserCourses } from "@/lib/actions/courses/fetch-user-id-courses";
+import { fetchUserBooks } from "@/lib/actions/library/fetch-user-id-books";
+import { fetchUserSpaces } from "@/lib/actions/spaces/fetchUserSpaces";
+import {
+  getFollowersCount,
+  checkIfFollowing,
+  followUser,
+  unfollowUser,
+} from "@/hooks/useFollow";
+import { getAverageRating } from "@/hooks/getAverageRating";
+import EducatorProfileHeader from "@/components/organisms/educators/EducatorProfileHeader";
+import PublicCourseCard from "@/components/molecules/dashboard/cards/educators/PublicCourseCard";
+import PublicBookCard from "@/components/molecules/dashboard/cards/educators/PublicBookCard";
+import PublicSpaceCard from "@/components/molecules/dashboard/cards/educators/PublicSpaceCard";
+import NotFoundComp from "@/components/molecules/errors/NotFound";
+import NetworkErrorComp from "@/components/molecules/errors/NetworkError";
+import Loader from "@/components/molecules/loaders/rootLoader";
+import Footer from "@/components/molecules/ladingpage/Footer";
+import Navbar from "@/components/molecules/ladingpage/Navbar";
+import { Copy, Share2, Users, BookOpen, GraduationCap, Star } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import Button from "@/components/atoms/form/Button";
+
+export default function PublicEducatorPage({ params }) {
+  const { profileid } = use(params);
+  const { user: currentUser } = useAuth();
+  const router = useRouter();
+
+  const [educator, setEducator] = useState(null);
+  const [courses, setCourses] = useState([]);
+  const [books, setBooks] = useState([]);
+  const [spaces, setSpaces] = useState([]);
+  const [followersCount, setFollowersCount] = useState(0);
+  const [isFollowing, setIsFollowing] = useState(false);
+  const [followLoading, setFollowLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [activeTab, setActiveTab] = useState("courses");
+
+  useEffect(() => {
+    async function load() {
+      setLoading(true);
+      setError(false);
+      try {
+        const res = await getUserById(profileid);
+        const u = res?.user || null;
+        if (!u) {
+          setError(true);
+          setLoading(false);
+          return;
+        }
+        setEducator(u);
+
+        const [coursesData, booksData, spacesData, followersRes] =
+          await Promise.allSettled([
+            fetchUserCourses(profileid),
+            fetchUserBooks(profileid),
+            fetchUserSpaces(profileid),
+            getFollowersCount(profileid),
+          ]);
+
+        if (coursesData.status === "fulfilled") {
+          setCourses(Array.isArray(coursesData.value) ? coursesData.value : []);
+        }
+        if (booksData.status === "fulfilled") {
+          setBooks(Array.isArray(booksData.value) ? booksData.value : []);
+        }
+        if (spacesData.status === "fulfilled") {
+          const sd = spacesData.value;
+          setSpaces(sd?.spaces || (Array.isArray(sd) ? sd : []));
+        }
+        if (followersRes.status === "fulfilled" && followersRes.value?.success) {
+          setFollowersCount(
+            followersRes.value.followersCount || followersRes.value.count || 0
+          );
+        }
+
+        if (currentUser?._id && currentUser._id !== profileid) {
+          const followRes = await checkIfFollowing(profileid);
+          if (followRes?.success) {
+            setIsFollowing(followRes.isFollowing);
+          }
+        }
+      } catch (e) {
+        setError(true);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, [profileid, currentUser?._id]);
+
+  const handleFollowToggle = async () => {
+    if (!currentUser?._id) {
+      router.push(`/login?next=${encodeURIComponent(`/educators/${profileid}`)}`);
+      return;
+    }
+    setFollowLoading(true);
+    try {
+      const result = isFollowing
+        ? await unfollowUser(profileid)
+        : await followUser(profileid);
+      if (result.success) {
+        setIsFollowing(!isFollowing);
+        setFollowersCount((c) => (isFollowing ? c - 1 : c + 1));
+      } else {
+        toast.error(result.message || "Failed to update follow status");
+      }
+    } catch {
+      toast.error("Failed to update follow status");
+    } finally {
+      setFollowLoading(false);
+    }
+  };
+
+  const handleShare = async () => {
+    const url = `${typeof window !== "undefined" ? window.location.origin : ""}/educators/${profileid}`;
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: educator?.name || "Educator Profile",
+          text: educator?.bio || `Check out ${educator?.name} on DeenBridge`,
+          url,
+        });
+      } catch {}
+    } else {
+      try {
+        await navigator.clipboard.writeText(url);
+        toast.success("Link copied to clipboard!");
+      } catch {
+        toast.error("Failed to copy link");
+      }
+    }
+  };
+
+  if (loading) return <Loader />;
+
+  if (error || !educator) {
+    return (
+      <div className="min-h-screen bg-basic flex flex-col">
+        <Navbar />
+        <main className="flex-1 flex items-center justify-center">
+          <NotFoundComp errMsg="Educator profile not found or is private." />
+        </main>
+        <Footer />
+      </div>
+    );
+  }
+
+  const hasContent =
+    courses.length > 0 || books.length > 0 || spaces.length > 0;
+
+  if (!hasContent) {
+    return (
+      <div className="min-h-screen bg-basic flex flex-col">
+        <Navbar />
+        <main className="flex-1">
+          <EducatorProfileHeader
+            educator={educator}
+            followersCount={followersCount}
+            isFollowing={isFollowing}
+            followLoading={followLoading}
+            onFollowToggle={handleFollowToggle}
+            onShare={handleShare}
+            isOwnProfile={currentUser?._id === profileid}
+          />
+          <div className="max-w-4xl mx-auto px-4 py-16 text-center">
+            <BookOpen className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+            <h3 className="text-lg font-semibold mb-2">No public content yet</h3>
+            <p className="text-muted-foreground">
+              This educator hasn&apos;t published any courses, books, or spaces yet.
+            </p>
+          </div>
+        </main>
+        <Footer />
+      </div>
+    );
+  }
+
+  const tabs = [
+    { key: "courses", label: "Courses", count: courses.length, icon: GraduationCap },
+    { key: "books", label: "Books", count: books.length, icon: BookOpen },
+    { key: "spaces", label: "Spaces", count: spaces.length, icon: Users },
+  ].filter((t) => t.count > 0);
+
+  const allRatings = [
+    ...courses.flatMap((c) => c.reviews || []),
+    ...books.flatMap((b) => b.reviews || []),
+  ];
+  const avgRating = getAverageRating(allRatings);
+
+  return (
+    <div className="min-h-screen bg-basic flex flex-col">
+      <Navbar />
+      <main className="flex-1">
+        <EducatorProfileHeader
+          educator={educator}
+          followersCount={followersCount}
+          avgRating={avgRating}
+          isFollowing={isFollowing}
+          followLoading={followLoading}
+          onFollowToggle={handleFollowToggle}
+          onShare={handleShare}
+          isOwnProfile={currentUser?._id === profileid}
+          stats={{
+            courses: courses.length,
+            books: books.length,
+            spaces: spaces.length,
+          }}
+        />
+
+        {tabs.length > 1 && (
+          <div className="max-w-6xl mx-auto px-4 sm:px-6 mt-6">
+            <div className="flex gap-2 border-b border-border pb-0">
+              {tabs.map((tab) => (
+                <button
+                  key={tab.key}
+                  onClick={() => setActiveTab(tab.key)}
+                  className={cn(
+                    "flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors",
+                    activeTab === tab.key
+                      ? "border-accent text-accent"
+                      : "border-transparent text-muted-foreground hover:text-foreground"
+                  )}
+                >
+                  <tab.icon className="h-4 w-4" />
+                  {tab.label}
+                  <span className="text-xs bg-muted px-1.5 py-0.5 rounded-full">
+                    {tab.count}
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
+          {activeTab === "courses" && courses.length > 0 && (
+            <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+              {courses.map((course) => (
+                <PublicCourseCard key={course._id} course={course} />
+              ))}
+            </div>
+          )}
+          {activeTab === "books" && books.length > 0 && (
+            <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+              {books.map((book) => (
+                <PublicBookCard key={book._id} book={book} />
+              ))}
+            </div>
+          )}
+          {activeTab === "spaces" && spaces.length > 0 && (
+            <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+              {spaces.map((space) => (
+                <PublicSpaceCard key={space._id} space={space} />
+              ))}
+            </div>
+          )}
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/app/(pages)/educators/[profileid]/page.jsx b/app/(pages)/educators/[profileid]/page.jsx
new file mode 100644
index 0000000..bb96482
--- /dev/null
+++ b/app/(pages)/educators/[profileid]/page.jsx
@@ -0,0 +1,24 @@
+import EducatorPageClient from "./EducatorPageClient";
+
+export async function generateMetadata({ params }) {
+  const { profileid } = await params;
+  return {
+    title: "Educator Profile - Deen Bridge",
+    description: "View this educator's courses, books, and spaces on Deen Bridge.",
+    openGraph: {
+      title: "Educator Profile - Deen Bridge",
+      description: "View this educator's courses, books, and spaces on Deen Bridge.",
+      url: `https://deenbridge.com/educators/${profileid}`,
+      type: "profile",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: "Educator Profile - Deen Bridge",
+      description: "View this educator's courses, books, and spaces on Deen Bridge.",
+    },
+  };
+}
+
+export default function EducatorPage({ params }) {
+  return <EducatorPageClient params={params} />;
+}
diff --git a/app/account/profile/[profileid]/page.jsx b/app/account/profile/[profileid]/page.jsx
index 773b930..61edd75 100644
--- a/app/account/profile/[profileid]/page.jsx
+++ b/app/account/profile/[profileid]/page.jsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { use, useState, useEffect } from "react";
+import Link from "next/link";
 import ProfileHeader from "@/components/organisms/account/profile/ProfileHeader";
 import ProfileUserInfo from "@/components/organisms/account/profile/ProfileUserInfo";
 import ProfileTabs from "@/components/organisms/account/profile/ProfileTabs";
@@ -8,6 +9,7 @@ import { getUserById } from "@/lib/actions/users/getUserById";
 import NotFoundComp from "@/components/molecules/errors/NotFound";
 import NetworkErrorComp from "@/components/molecules/errors/NetworkError";
 import Loader from "@/components/molecules/loaders/rootLoader";
+import { ExternalLink } from "lucide-react";
 const page = ({ params }) => {
   const { profileid } = use(params);
   const [selectedTab, setSelectedTab] = useState("courses");
@@ -56,6 +58,13 @@ const page = ({ params }) => {
       <div className="min-h-screen bg-muted p-2 sm:p-4">
         <ProfileHeader avatar={user?.avatar} />
         <ProfileUserInfo user={user} />
+        <Link
+          href={`/educators/${profileid}`}
+          className="inline-flex items-center gap-1.5 text-sm text-accent hover:underline mb-4 mx-2 sm:mx-4"
+        >
+          <ExternalLink className="h-3.5 w-3.5" />
+          View public page
+        </Link>
         <ProfileTabs selectedTab={selectedTab} onChange={setSelectedTab} />
         <ProfileContent selectedTab={selectedTab} profileId={user?._id} />
       </div>
diff --git a/components/molecules/dashboard/cards/courseCard.jsx b/components/molecules/dashboard/cards/courseCard.jsx
index 8886f9e..48120c6 100644
--- a/components/molecules/dashboard/cards/courseCard.jsx
+++ b/components/molecules/dashboard/cards/courseCard.jsx
@@ -62,7 +62,7 @@ const CourseCard = ({ course, onBookmarkChange, initialIsBookmarked }) => {
       <CardContent>
         <div className="flex justify-between items-center gap-3">
           <Link
-            href={`/account/profile/${course.createdBy?._id}`}
+            href={`/educators/${course.createdBy?._id}`}
             className="flex items-center gap-2"
           >
             <Avatar className="h-10 w-10 rounded-lg">
diff --git a/components/molecules/dashboard/cards/educators/PublicBookCard.jsx b/components/molecules/dashboard/cards/educators/PublicBookCard.jsx
new file mode 100644
index 0000000..0df1546
--- /dev/null
+++ b/components/molecules/dashboard/cards/educators/PublicBookCard.jsx
@@ -0,0 +1,63 @@
+import Image from "next/image";
+import Button from "@/components/atoms/form/Button";
+import { Star } from "lucide-react";
+import { getAverageRating } from "@/hooks/getAverageRating";
+
+const PublicBookCard = ({ book }) => {
+  const avgRating = getAverageRating(book?.reviews);
+
+  return (
+    <div className="bg-white rounded-2xl overflow-hidden shadow-md w-full max-w-md mx-auto">
+      <div className="relative w-full h-64">
+        <Image
+          src={book.image || "/images/placeholder.jpg"}
+          alt={book.title}
+          fill
+          className="object-cover"
+        />
+        <div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/80 to-transparent text-white px-4 py-3 space-y-1">
+          <h4 className="text-sm font-semibold truncate">{book.title}</h4>
+          <div className="flex justify-between items-center text-xs">
+            <span className="bg-white/20 px-2 py-0.5 rounded">
+              {book.category || "General"}
+            </span>
+            <span className="font-medium">
+              {book.price > 0 ? `$${book.price}` : "Free"}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="px-4 py-4 flex flex-col gap-3 text-sm text-muted-foreground">
+        <div className="flex items-center justify-between text-xs">
+          <span>{book.readCount || 0} readers</span>
+          {avgRating > 0 && (
+            <div className="flex items-center gap-0.5 text-yellow-500">
+              {[...Array(5)].map((_, i) => (
+                <Star
+                  key={`${book._id}-star-${i}`}
+                  size={14}
+                  fill={i < Math.round(avgRating) ? "#FFD700" : "none"}
+                  stroke="#FFD700"
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="px-4 py-3">
+        <Button
+          to={`/dashboard/library/${book._id}`}
+          wide
+          round
+          className="w-full bg-accent text-white"
+        >
+          View Book
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default PublicBookCard;
diff --git a/components/molecules/dashboard/cards/educators/PublicCourseCard.jsx b/components/molecules/dashboard/cards/educators/PublicCourseCard.jsx
new file mode 100644
index 0000000..c107638
--- /dev/null
+++ b/components/molecules/dashboard/cards/educators/PublicCourseCard.jsx
@@ -0,0 +1,71 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import Button from "@/components/atoms/form/Button";
+import Link from "next/link";
+import Image from "next/image";
+import { Star } from "lucide-react";
+import { getAverageRating } from "@/hooks/getAverageRating";
+
+const PublicCourseCard = ({ course }) => {
+  const avgRating = getAverageRating(course?.reviews);
+
+  return (
+    <Card className="relative flex flex-col overflow-hidden rounded-2xl bg-muted/30 backdrop-blur-xl shadow-lg hover:shadow-2xl hover:scale-[1.015] transition-all group">
+      <div className="relative h-60 w-full">
+        <Image
+          src={course.thumbnail || "/images/dnb.png"}
+          alt={course.title}
+          fill
+          className="object-cover transition-transform duration-500 group-hover:scale-105"
+          priority
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent z-10" />
+        <div className="absolute top-3 left-3 right-3 z-20 flex justify-between">
+          <Badge className="bg-white/80 text-accent font-bold px-3 py-1 rounded-full shadow border-0 text-xs uppercase tracking-wider">
+            {course.category || "General"}
+          </Badge>
+        </div>
+      </div>
+
+      <CardHeader>
+        <CardTitle className="text-lg font-bold line-clamp-1">
+          {course.title}
+        </CardTitle>
+        <p className="text-sm text-muted-foreground line-clamp-2">
+          {course.description}
+        </p>
+      </CardHeader>
+
+      <CardContent>
+        <div className="flex justify-between items-center gap-3">
+          <div className="flex items-center gap-2">
+            {avgRating > 0 && (
+              <div className="flex items-center gap-0.5 text-yellow-500">
+                <Star size={14} fill="#FFD700" stroke="#FFD700" />
+                <span className="text-xs font-medium text-foreground">
+                  {avgRating.toFixed(1)}
+                </span>
+              </div>
+            )}
+          </div>
+          <div className="bg-gradient-to-r from-highlight to-accent text-white text-xs font-bold px-3 py-1 rounded-full shadow">
+            {course.price ? `$${course.price}` : "Free"}
+          </div>
+        </div>
+      </CardContent>
+
+      <div className="px-5 pb-5">
+        <Button
+          wide
+          round
+          className="w-full bg-accent text-white hover:bg-accent/90 text-sm font-semibold"
+          to={`/dashboard/courses/${course._id}`}
+        >
+          View Course
+        </Button>
+      </div>
+    </Card>
+  );
+};
+
+export default PublicCourseCard;
diff --git a/components/molecules/dashboard/cards/educators/PublicSpaceCard.jsx b/components/molecules/dashboard/cards/educators/PublicSpaceCard.jsx
new file mode 100644
index 0000000..68de9b9
--- /dev/null
+++ b/components/molecules/dashboard/cards/educators/PublicSpaceCard.jsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { Card, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import Button from "@/components/atoms/form/Button";
+import Image from "next/image";
+import { VideoIcon, Clock } from "lucide-react";
+import { format } from "date-fns";
+
+const PublicSpaceCard = ({ space }) => {
+  const {
+    _id,
+    title,
+    description,
+    thumbnail,
+    category,
+    status,
+    eventDate,
+    duration,
+  } = space;
+
+  function formatDuration(minutes) {
+    if (minutes < 60) return `${minutes} mins`;
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    return mins === 0
+      ? `${hours} hr${hours > 1 ? "s" : ""}`
+      : `${hours} hr${hours > 1 ? "s" : ""} ${mins} min${mins > 1 ? "s" : ""}`;
+  }
+
+  const formattedTime = eventDate
+    ? format(new Date(eventDate), "PPpp")
+    : "TBD";
+
+  return (
+    <Card className="relative flex flex-col overflow-hidden rounded-3xl bg-gradient-to-br from-green-50 via-white to-green-100/80 backdrop-blur-xl shadow-xl hover:shadow-2xl hover:scale-[1.02] transition-all group border-0">
+      <div className="relative h-60 w-full overflow-hidden">
+        <Image
+          src={thumbnail || "/images/space-placeholder.jpg"}
+          alt={title}
+          fill
+          className="object-cover transition-transform duration-500 group-hover:scale-110 rounded-t-3xl border-b-4 border-accent/10 shadow-lg will-change-transform"
+          priority
+          style={{ maxHeight: "15rem" }}
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent z-10 pointer-events-none" />
+        <div className="absolute top-4 left-4 right-4 z-20 flex justify-between items-center">
+          {category && (
+            <Badge className="bg-white/80 text-accent font-bold px-3 py-1 rounded-full shadow border-0 text-xs uppercase tracking-wider">
+              {category}
+            </Badge>
+          )}
+          {status && (
+            <div className="px-3 py-1 bg-gradient-to-r from-green-500 to-accent text-white text-xs rounded-full font-semibold shadow-md border-0">
+              {status.toUpperCase()}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-3 px-6 py-4 flex-1">
+        <div className="mb-2">
+          <CardTitle className="text-lg font-extrabold line-clamp-1 text-accent drop-shadow-sm mb-1">
+            {title}
+          </CardTitle>
+          <p className="text-sm text-muted-foreground line-clamp-2">
+            {description}
+          </p>
+        </div>
+
+        <div className="flex items-center justify-between gap-4 mt-2 mb-4">
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <Clock className="h-4 w-4 text-accent" />
+            <span className="font-medium text-accent/90">{formattedTime}</span>
+          </div>
+          {duration && (
+            <div className="bg-gradient-to-r from-highlight to-accent text-white px-2 py-0.5 rounded-full font-bold shadow border-0 text-xs">
+              {formatDuration(duration)}
+            </div>
+          )}
+        </div>
+
+        <Button
+          wide
+          round
+          className="w-full bg-gradient-to-r from-highlight to-accent text-white hover:brightness-110 text-base font-bold shadow-lg transition-all py-3 mt-auto"
+          to={`/dashboard/spaces/${_id}`}
+        >
+          <VideoIcon className="h-5 w-5 mr-2" />
+          View Space
+        </Button>
+      </div>
+    </Card>
+  );
+};
+
+export default PublicSpaceCard;
diff --git a/components/molecules/dashboard/cards/libraryCard.jsx b/components/molecules/dashboard/cards/libraryCard.jsx
index 61ae03c..da7505f 100644
--- a/components/molecules/dashboard/cards/libraryCard.jsx
+++ b/components/molecules/dashboard/cards/libraryCard.jsx
@@ -47,7 +47,7 @@ const LibraryBookCard = ({ book, onBookmarkChange, initialIsBookmarked }) => {
         <div className="flex items-center justify-between gap-2 mb-2">
           {/* Author */}
           <Link
-            href={`/account/profile/${book.author?._id}`}
+            href={`/educators/${book.author?._id}`}
             className="flex items-center gap-2"
           >
             <Avatar className="h-10 w-10 rounded-lg">
diff --git a/components/molecules/dashboard/cards/spaceCard.jsx b/components/molecules/dashboard/cards/spaceCard.jsx
index 6cbcb83..c206ce1 100644
--- a/components/molecules/dashboard/cards/spaceCard.jsx
+++ b/components/molecules/dashboard/cards/spaceCard.jsx
@@ -6,6 +6,7 @@ import {
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import Button from "@/components/atoms/form/Button";
+import Link from "next/link";
 import Image from "next/image";
 import {
   Avatar,
@@ -90,7 +91,10 @@ const SpaceCard = ({ space }) => {
         </div>
         {/* Host */}
         <div className="flex items-center justify-between gap-3 mb-2">
-          <div className="flex gap-2">
+          <Link
+            href={host?._id ? `/educators/${host._id}` : "#"}
+            className="flex gap-2 items-center"
+          >
             <Avatar className="h-10 w-10">
               <AvatarImage
                 src={host?.avatar || "/images/avatar-placeholder.png"}
@@ -105,7 +109,7 @@ const SpaceCard = ({ space }) => {
               <span className="font-semibold text-accent leading-tight text-base">{host?.name || "Ustadh Ahmad"}</span>
               <span className="text-muted-foreground text-xs">Host</span>
             </div>
-          </div>
+          </Link>
 
           <div>
             <CirclePlus className="w-5 sm:w-8 h-5 sm:h-8  text-accent hover:bg-accent hover:text-white rounded-full p-1 transition" />
diff --git a/components/organisms/educators/EducatorProfileHeader.jsx b/components/organisms/educators/EducatorProfileHeader.jsx
new file mode 100644
index 0000000..63dacc6
--- /dev/null
+++ b/components/organisms/educators/EducatorProfileHeader.jsx
@@ -0,0 +1,146 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import Button from "@/components/atoms/form/Button";
+import { cn } from "@/lib/utils";
+import {
+  Copy,
+  Share2,
+  Users,
+  BookOpen,
+  GraduationCap,
+  Star,
+  Calendar,
+  ArrowLeft,
+} from "lucide-react";
+import { format } from "date-fns";
+
+const EducatorProfileHeader = ({
+  educator,
+  followersCount,
+  avgRating,
+  isFollowing,
+  followLoading,
+  onFollowToggle,
+  onShare,
+  isOwnProfile,
+  stats,
+}) => {
+  return (
+    <div className="relative w-full">
+      <div className="bg-accent h-40 sm:h-48 w-full" />
+
+      <div className="max-w-6xl mx-auto px-4 sm:px-6">
+        <div className="relative -mt-12 sm:-mt-14">
+          <Avatar className="h-24 w-24 sm:h-28 sm:w-28 border-4 border-background shadow-lg">
+            <AvatarImage src={educator?.avatar} alt={educator?.name} />
+            <AvatarFallback className="text-2xl">
+              {educator?.name?.charAt(0) || "E"}
+            </AvatarFallback>
+          </Avatar>
+        </div>
+
+        <div className="mt-4 pb-6 border-b">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div className="space-y-1">
+              <h1 className="text-2xl sm:text-3xl font-bold">
+                {educator?.name}
+              </h1>
+              {educator?.role && (
+                <p className="text-muted-foreground text-sm">{educator.role}</p>
+              )}
+              {educator?.bio && (
+                <p className="text-foreground/80 max-w-2xl mt-2">
+                  {educator.bio}
+                </p>
+              )}
+              {educator?.createdAt && (
+                <p className="text-muted-foreground text-xs flex items-center gap-1 mt-2">
+                  <Calendar className="h-3 w-3" />
+                  Joined{" "}
+                  {format(new Date(educator.createdAt), "MMMM yyyy")}
+                </p>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2 shrink-0">
+              <Button
+                round
+                outlined
+                className="text-sm px-3 gap-1.5"
+                onClick={onShare}
+              >
+                <Share2 className="h-4 w-4" />
+                Share
+              </Button>
+              {isOwnProfile ? (
+                <Button
+                  to="/profile-setup"
+                  round
+                  outlined
+                  className="text-sm px-4"
+                >
+                  Edit Profile
+                </Button>
+              ) : (
+                <Button
+                  round
+                  loading={followLoading}
+                  className={cn(
+                    "text-sm px-5",
+                    isFollowing && "bg-accent text-white hover:bg-accent/90"
+                  )}
+                  onClick={onFollowToggle}
+                >
+                  {isFollowing ? "Following" : "Follow"}
+                </Button>
+              )}
+            </div>
+          </div>
+
+          <div className="flex flex-wrap gap-4 sm:gap-6 mt-4 text-sm">
+            <div className="flex items-center gap-1.5">
+              <Users className="h-4 w-4 text-accent" />
+              <span className="font-semibold">{followersCount}</span>
+              <span className="text-muted-foreground">Followers</span>
+            </div>
+            {stats && stats.courses > 0 && (
+              <div className="flex items-center gap-1.5">
+                <GraduationCap className="h-4 w-4 text-accent" />
+                <span className="font-semibold">{stats.courses}</span>
+                <span className="text-muted-foreground">Courses</span>
+              </div>
+            )}
+            {stats && stats.books > 0 && (
+              <div className="flex items-center gap-1.5">
+                <BookOpen className="h-4 w-4 text-accent" />
+                <span className="font-semibold">{stats.books}</span>
+                <span className="text-muted-foreground">Books</span>
+              </div>
+            )}
+            {stats && stats.spaces > 0 && (
+              <div className="flex items-center gap-1.5">
+                <Users className="h-4 w-4 text-accent" />
+                <span className="font-semibold">{stats.spaces}</span>
+                <span className="text-muted-foreground">Spaces</span>
+              </div>
+            )}
+            {avgRating > 0 && (
+              <div className="flex items-center gap-1.5">
+                <Star className="h-4 w-4 text-yellow-500 fill-yellow-500" />
+                <span className="font-semibold">
+                  {avgRating.toFixed(1)}
+                </span>
+                <span className="text-muted-foreground">Rating</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EducatorProfileHeader;