From a3d48bf79f5b9e521b602b0227dfe56d771e9c60 Mon Sep 17 00:00:00 2001
From: Kanu Kingsley <suge.kanu@gmail.com>
Date: Sat, 8 Nov 2025 16:55:43 +0100
Subject: [PATCH] feat: refresh interface with modern skill exchange design

---
 src/App.jsx               | 123 +++++++++++++---------
 src/pages/CreatePost.jsx  | 192 +++++++++++++++++++++++----------
 src/pages/HomePage.jsx    | 117 +++++++++++++++++++--
 src/pages/PostDetails.jsx | 215 ++++++++++++++++++++++---------------
 src/pages/PostPage.jsx    | 216 +++++++++++++++++++++++++-------------
 src/styles/tailwind.css   | 209 ++++++++++++++++++++++++++++--------
 6 files changed, 757 insertions(+), 315 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 18dbc89..3f855ae 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,6 @@
 // src/App.jsx
 import { Routes, Route, Navigate, NavLink } from "react-router-dom";
+import { Fragment } from "react";
 import ProtectedRoute from "./auth/ProtectedRoute";
 import { useAuth } from "./auth/AuthContext";
 
@@ -22,71 +23,91 @@ export default function App() {
         {/* Navbar */}
         <nav className="navbar">
           <div className="navbar-inner">
-            <div className="brand">SyncSkilled</div>
-            <div className="nav-links">
-              <NavLink
-                to="/"
-                className={({ isActive }) =>
-                  isActive ? "nav-link nav-link-active" : "nav-link"
-                }
-              >
-                Home
-              </NavLink>
-              <NavLink
-                to="posts"
-                className={({ isActive }) =>
-                  isActive ? "nav-link nav-link-active" : "nav-link"
-                }
-              >
-                {" "}
-                Posts
-              </NavLink>
+            <div className="flex flex-col gap-1">
+              <span className="brand">SyncSkilled</span>
+              <span className="text-xs uppercase tracking-[0.35em] text-slate-500">
+                Learn • Share • Grow
+              </span>
+            </div>
 
-              {user && (
+            <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between md:flex-1 md:pl-8">
+              <div className="nav-links">
+                <NavLink
+                  to="/"
+                  className={({ isActive }) =>
+                    isActive ? "nav-link nav-link-active" : "nav-link"
+                  }
+                  end
+                >
+                  Home
+                </NavLink>
                 <NavLink
-                  to="/catalog"
+                  to="/posts"
                   className={({ isActive }) =>
                     isActive ? "nav-link nav-link-active" : "nav-link"
                   }
                 >
-                  Catalog
+                  Posts
                 </NavLink>
-              )}
 
-              {user ? (
-                <>
-                  <NavLink
-                    to="/me"
-                    className={({ isActive }) =>
-                      isActive ? "nav-link nav-link-active" : "nav-link"
-                    }
-                  >
-                    Profile
-                  </NavLink>
-                  <button className="btn-primary" onClick={logout}>
-                    Logout
-                  </button>
-                </>
-              ) : (
-                <>
-                  <NavLink
-                    to="/login"
-                    className={({ isActive }) =>
-                      isActive ? "nav-link nav-link-active" : "nav-link"
-                    }
-                  >
-                    Login
-                  </NavLink>
+                {user && (
                   <NavLink
-                    to="/register"
+                    to="/catalog"
                     className={({ isActive }) =>
                       isActive ? "nav-link nav-link-active" : "nav-link"
                     }
                   >
-                    Register
+                    Catalog
                   </NavLink>
-                </>
-              )}
+                )}
+              </div>
+
+              <div className="nav-cta">
+                {user ? (
+                  <Fragment>
+                    <NavLink
+                      to="/posts/create"
+                      className={({ isActive }) =>
+                        isActive
+                          ? "btn-primary"
+                          : "btn-outline"
+                      }
+                    >
+                      New Post
+                    </NavLink>
+                    <NavLink
+                      to="/me"
+                      className={({ isActive }) =>
+                        isActive ? "nav-link nav-link-active" : "nav-link"
+                      }
+                    >
+                      Profile
+                    </NavLink>
+                    <button className="btn-muted" onClick={logout}>
+                      Logout
+                    </button>
+                  </Fragment>
+                ) : (
+                  <Fragment>
+                    <NavLink
+                      to="/login"
+                      className={({ isActive }) =>
+                        isActive ? "nav-link nav-link-active" : "nav-link"
+                      }
+                    >
+                      Login
+                    </NavLink>
+                    <NavLink
+                      to="/register"
+                      className={({ isActive }) =>
+                        isActive ? "btn-primary" : "btn-outline"
+                      }
+                    >
+                      Join now
+                    </NavLink>
+                  </Fragment>
+                )}
+              </div>
             </div>
           </div>
         </nav>
diff --git a/src/pages/CreatePost.jsx b/src/pages/CreatePost.jsx
index 4d9520f..32c17e2 100644
--- a/src/pages/CreatePost.jsx
+++ b/src/pages/CreatePost.jsx
@@ -1,13 +1,17 @@
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { usePosts } from "../context/PostContext";
 
 export default function CreatePost({ onCreated }) {
   const { createPost } = usePosts();
+  const navigate = useNavigate();
+
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [skillToLearn, setSkillToLearn] = useState("");
   const [skillToTeach, setSkillToTeach] = useState("");
   const [exchangeCredits, setExchangeCredits] = useState(1);
+  const [location, setLocation] = useState("");
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(false);
 
@@ -22,13 +26,15 @@ export default function CreatePost({ onCreated }) {
         skillToLearn,
         skillToTeach,
         exchangeCredits,
+        location,
       });
-      onCreated?.(newPost); // optional callback to parent
-      setTitle("");
-      setDescription("");
-      setSkillToLearn("");
-      setSkillToTeach("");
-      setExchangeCredits(1);
+      onCreated?.(newPost);
+      const targetId = newPost?._id;
+      if (targetId) {
+        navigate(`/posts/${targetId}`);
+      } else {
+        navigate("/posts");
+      }
     } catch (err) {
       setError(err.message || "Error creating post");
     } finally {
@@ -37,54 +43,132 @@ export default function CreatePost({ onCreated }) {
   };
 
   return (
-    <form
-      onSubmit={handleSubmit}
-      style={{
-        padding: "20px",
-        border: "1px solid #ccc",
-        borderRadius: "10px",
-      }}
-    >
-      <h2>Create a New Post</h2>
-      {error && <p style={{ color: "red" }}>{error}</p>}
-      <input
-        type="text"
-        placeholder="Title"
-        value={title}
-        onChange={(e) => setTitle(e.target.value)}
-        required
-      />
-      <textarea
-        placeholder="Description"
-        value={description}
-        onChange={(e) => setDescription(e.target.value)}
-      />
-      <input
-        type="text"
-        placeholder="Skill to Learn"
-        value={skillToLearn}
-        onChange={(e) => setSkillToLearn(e.target.value)}
-        required
-      />
-      <input
-        type="text"
-        placeholder="Skill to Teach"
-        value={skillToTeach}
-        onChange={(e) => setSkillToTeach(e.target.value)}
-        required
-      />
-      <input
-        type="number"
-        placeholder="Exchange Credits"
-        value={exchangeCredits}
-        min={1}
-        max={9999}
-        onChange={(e) => setExchangeCredits(Number(e.target.value))}
-        required
-      />
-      <button type="submit" disabled={loading}>
-        {loading ? "Creating..." : "Create Post"}
+    <div className="grid gap-6">
+      <button className="btn-ghost justify-start w-fit" onClick={() => navigate(-1)}>
+        ← Back
       </button>
-    </form>
+
+      <section className="section-card">
+        <header className="grid gap-2">
+          <span className="section-title">Share a new exchange</span>
+          <h1 className="heading text-3xl font-bold">Craft a post that invites collaboration</h1>
+          <p className="text-sm text-slate-600 max-w-2xl">
+            Highlight what you’d love to learn, what you can teach in return, and any context that helps
+            the community understand your goals.
+          </p>
+        </header>
+
+        <form className="form" onSubmit={handleSubmit}>
+          {error && (
+            <div className="rounded-2xl border border-red-100 bg-red-50 px-4 py-3 text-sm font-medium text-red-600">
+              {error}
+            </div>
+          )}
+
+          <div className="field-row">
+            <label htmlFor="title" className="label">
+              Post title
+            </label>
+            <input
+              id="title"
+              type="text"
+              className="input"
+              placeholder="e.g. Swap Figma tips for React mentorship"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="field-row">
+            <label htmlFor="description" className="label">
+              Description
+            </label>
+            <textarea
+              id="description"
+              className="textarea"
+              placeholder="Share what you’re aiming to learn, your availability, and how you love to collaborate."
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="field-row">
+              <label htmlFor="skillToLearn" className="label">
+                Skill to learn
+              </label>
+              <input
+                id="skillToLearn"
+                type="text"
+                className="input"
+                placeholder="Product storytelling"
+                value={skillToLearn}
+                onChange={(e) => setSkillToLearn(e.target.value)}
+                required
+              />
+            </div>
+            <div className="field-row">
+              <label htmlFor="skillToTeach" className="label">
+                Skill to teach
+              </label>
+              <input
+                id="skillToTeach"
+                type="text"
+                className="input"
+                placeholder="Advanced user research"
+                value={skillToTeach}
+                onChange={(e) => setSkillToTeach(e.target.value)}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="field-row">
+              <label htmlFor="exchangeCredits" className="label">
+                Exchange credits
+              </label>
+              <input
+                id="exchangeCredits"
+                type="number"
+                min={1}
+                max={9999}
+                className="input"
+                value={exchangeCredits}
+                onChange={(e) => setExchangeCredits(Number(e.target.value))}
+                required
+              />
+            </div>
+            <div className="field-row">
+              <label htmlFor="location" className="label">
+                Location
+              </label>
+              <input
+                id="location"
+                type="text"
+                className="input"
+                placeholder="Remote or city / timezone"
+                value={location}
+                onChange={(e) => setLocation(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="form-actions">
+            <button
+              type="button"
+              className="btn-muted"
+              onClick={() => navigate("/posts")}
+            >
+              Cancel
+            </button>
+            <button type="submit" className="btn-primary" disabled={loading}>
+              {loading ? "Publishing…" : "Publish post"}
+            </button>
+          </div>
+        </form>
+      </section>
+    </div>
   );
 }
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 4d4d734..0d7bf69 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,10 +1,115 @@
+import { Link } from "react-router-dom";
+
 export default function HomePage() {
   return (
-    <div className="container">
-        <div className="card">
-            <div className="card-header"><h3 className="card-title">Home</h3></div>
-            <div className="card-content"><p className="subtle">Public page. Try visiting /me (protected).</p></div>
+    <div className="grid gap-10">
+      <section className="hero">
+        <div className="hero-inner">
+          <div className="hero-copy">
+            <span className="section-title">Skill exchange reinvented</span>
+            <h1 className="heading-xl">
+              Swap knowledge with a community that loves to teach as much as it loves to learn.
+            </h1>
+            <p className="text-base text-slate-600 leading-relaxed">
+              SyncSkilled connects curious minds and seasoned mentors. Discover peers ready to trade
+              skills, earn exchange credits, and craft learning journeys that feel personal, vibrant,
+              and fun.
+            </p>
+            <div className="hero-actions">
+              <Link to="/register" className="btn-primary">
+                Get started
+              </Link>
+              <Link to="/posts" className="btn-muted">
+                Explore posts
+              </Link>
+            </div>
+            <div className="stats-grid">
+              <div className="stat-card">
+                <div className="stat-value">8k+</div>
+                <div className="stat-label">Skill matches</div>
+              </div>
+              <div className="stat-card">
+                <div className="stat-value">120</div>
+                <div className="stat-label">Active categories</div>
+              </div>
+              <div className="stat-card">
+                <div className="stat-value">98%</div>
+                <div className="stat-label">Happy learners</div>
+              </div>
+            </div>
+          </div>
+
+          <div className="section-card">
+            <div className="grid gap-4">
+              <div>
+                <span className="pill">Featured flow</span>
+                <h2 className="heading text-lg mt-2">Design x Frontend pairing</h2>
+                <p className="text-sm text-slate-600 leading-relaxed">
+                  Pair up with creatives leveling up their product design while trading modern frontend
+                  techniques. Weekly live sessions, async feedback, and curated resources included.
+                </p>
+              </div>
+              <div className="divider" />
+              <div className="grid gap-3">
+                <div className="surface-soft p-4 rounded-2xl">
+                  <div className="text-xs uppercase tracking-[0.25em] text-slate-500">This week</div>
+                  <div className="mt-2 text-base font-semibold text-slate-900">
+                    24 new offers posted
+                  </div>
+                </div>
+                <div className="surface-soft p-4 rounded-2xl">
+                  <div className="text-xs uppercase tracking-[0.25em] text-slate-500">Next up</div>
+                  <div className="mt-2 text-base font-semibold text-slate-900">
+                    Product strategy x Data storytelling
+                  </div>
+                </div>
+              </div>
+              <Link to="/posts" className="btn-outline justify-self-start">
+                Browse community stories
+              </Link>
+            </div>
+          </div>
         </div>
+      </section>
+
+      <section className="grid gap-6">
+        <div className="grid gap-2">
+          <span className="section-title">Why SyncSkilled</span>
+          <h2 className="heading text-3xl font-bold">Designed for modern learners</h2>
+          <p className="text-base text-slate-600 leading-relaxed max-w-3xl">
+            From onboarding to scheduling exchanges, every touchpoint feels polished and effortless.
+            Curate your skill stack, track your progress, and connect with collaborators who are as
+            invested in your growth as you are.
+          </p>
+        </div>
+
+        <div className="feature-grid">
+          <article className="feature-card">
+            <span className="feature-icon" aria-hidden>⚡️</span>
+            <h3 className="feature-title">Guided matching</h3>
+            <p className="feature-copy">
+              Smart suggestions help you quickly pair with people teaching the exact skill you want to
+              learn—no endless browsing required.
+            </p>
+          </article>
+          <article className="feature-card">
+            <span className="feature-icon" aria-hidden>🎯</span>
+            <h3 className="feature-title">Goals that stick</h3>
+            <p className="feature-copy">
+              Personalized milestones and check-ins keep your exchanges on track and outcomes easy to
+              celebrate.
+            </p>
+          </article>
+          <article className="feature-card">
+            <span className="feature-icon" aria-hidden>🤝</span>
+            <h3 className="feature-title">Community built trust</h3>
+            <p className="feature-copy">
+              Reviews, streaks, and kudos make it simple to find committed collaborators and build
+              long-term learning circles.
+            </p>
+          </article>
+        </div>
+      </section>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/pages/PostDetails.jsx b/src/pages/PostDetails.jsx
index eabb086..238315b 100644
--- a/src/pages/PostDetails.jsx
+++ b/src/pages/PostDetails.jsx
@@ -1,14 +1,21 @@
 // src/pages/PostDetails.jsx
 import { useEffect, useState } from "react";
-import { usePosts } from "../context/PostContext";
 import { useParams, useNavigate } from "react-router-dom";
+import { usePosts } from "../context/PostContext";
 import { useAuth } from "../auth/AuthContext";
 
+const statusClass = (status) => {
+  if (!status) return "status-active";
+  const normalized = status.toLowerCase();
+  if (normalized === "archived") return "status-archived";
+  return "status-active";
+};
+
 export default function PostDetails() {
   const { postId } = useParams();
-  const { getSinglePost, getCommentsByPost, deletePost } = usePosts();
-  const { user } = useAuth(); // access current user
   const navigate = useNavigate();
+  const { getSinglePost, getCommentsByPost, deletePost } = usePosts();
+  const { user } = useAuth();
 
   const [post, setPost] = useState(null);
   const [comments, setComments] = useState([]);
@@ -26,12 +33,10 @@ export default function PostDetails() {
       setLoading(true);
       setError(null);
       try {
-        // Fetch the post
         const postData = await getSinglePost(postId);
         if (!postData) throw new Error("Post not found");
         setPost(postData);
 
-        // Fetch comments
         const postComments = await getCommentsByPost(postId);
         setComments(Array.isArray(postComments) ? postComments : []);
       } catch (err) {
@@ -44,16 +49,10 @@ export default function PostDetails() {
     fetchPost();
   }, [postId, getSinglePost, getCommentsByPost]);
 
-  if (loading) return <p>Loading post...</p>;
-  if (error) return <p style={{ color: "red" }}>{error}</p>;
-  if (!post) return <p>Post not found</p>;
-
-  // Handler for deleting the post
   const handleDelete = async () => {
     if (window.confirm("Are you sure you want to delete this post?")) {
       try {
         await deletePost(postId);
-        // After deletion, redirect to the list of all posts
         navigate("/posts");
       } catch (err) {
         setError(err.message || "Error deleting post");
@@ -61,86 +60,128 @@ export default function PostDetails() {
     }
   };
 
-  // Check if current user is the author of this post
+  if (loading) {
+    return (
+      <div className="section-card text-center">
+        <div className="mx-auto h-12 w-12 animate-spin rounded-full border-4 border-fuchsia-200 border-t-fuchsia-500" />
+        <h2 className="heading text-lg">Loading the exchange details…</h2>
+        <p className="subtle">Hang tight while we prep this opportunity for you.</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="section-card text-center">
+        <h2 className="heading text-lg text-red-600">Something went wrong</h2>
+        <p className="subtle">{error}</p>
+        <button className="btn-outline mx-auto" onClick={() => navigate("/posts")}>
+          Back to posts
+        </button>
+      </div>
+    );
+  }
+
+  if (!post) {
+    return (
+      <div className="section-card text-center">
+        <div className="empty-title">Post not found</div>
+        <p className="empty-copy">It may have been removed or never existed.</p>
+        <button className="btn-outline mx-auto" onClick={() => navigate("/posts")}>
+          Return to marketplace
+        </button>
+      </div>
+    );
+  }
+
   const isAuthor = user && post.author && user._id === post.author._id;
+  const commentsCount = comments.length;
+  const statusLabel = post.status
+    ? `${post.status.charAt(0).toUpperCase()}${post.status.slice(1)}`
+    : "Active";
 
   return (
-    <div
-      style={{
-        maxWidth: "800px",
-        margin: "20px auto",
-        padding: "20px",
-        border: "1px solid #ccc",
-        borderRadius: "10px",
-      }}
-    >
-      <h2>{post.title}</h2>
-      <p>
-        <strong>Author:</strong> {post.author?.username || "Unknown"}
-      </p>
-      <p>{post.description || "No description provided."}</p>
-      <p>
-        <strong>Skill To Learn:</strong> {post.skillToLearn?.name || "-"}
-      </p>
-      <p>
-        <strong>Skill To Teach:</strong> {post.skillToTeach?.name || "-"}
-      </p>
-      <p>
-        <strong>Exchange Credits:</strong> {post.exchangeCredits ?? 0}
-      </p>
-      <p>
-        <strong>Status:</strong> {post.status || "active"}
-      </p>
-      <p>
-        <strong>Location:</strong> {post.location || "-"}
-      </p>
-
-      <h3>Comments ({comments.length})</h3>
-      {comments.length === 0 ? (
-        <p>No comments yet.</p>
-      ) : (
-        <ul>
-          {comments.map((c) => (
-            <li key={c._id} style={{ marginBottom: "10px" }}>
-              <strong>{c.author?.username || "Unknown"}:</strong>{" "}
-              {c.comment || "-"}
-            </li>
-          ))}
-        </ul>
-      )}
-
-      {/* Render Edit and Delete buttons only if the current user is the author */}
-      {isAuthor && (
-        <div style={{ marginTop: "20px" }}>
-          <button
-            onClick={() => navigate(`/posts/${postId}/edit`)}
-            style={{
-              marginRight: "10px",
-              padding: "8px 16px",
-              cursor: "pointer",
-              backgroundColor: "#007bff",
-              color: "white",
-              border: "none",
-              borderRadius: "4px",
-            }}
-          >
-            Edit Post
-          </button>
-          <button
-            onClick={handleDelete}
-            style={{
-              padding: "8px 16px",
-              cursor: "pointer",
-              backgroundColor: "#dc3545",
-              color: "white",
-              border: "none",
-              borderRadius: "4px",
-            }}
-          >
-            Delete Post
-          </button>
+    <div className="grid gap-8">
+      <button className="btn-ghost justify-start w-fit" onClick={() => navigate(-1)}>
+        ← Back
+      </button>
+
+      <article className="section-card">
+        <header className="grid gap-4">
+          <span className="section-title">Exchange spotlight</span>
+          <div className="flex flex-wrap items-center gap-3">
+            <h1 className="heading text-3xl font-bold flex-1">{post.title}</h1>
+            <span className={statusClass(post.status)}>{statusLabel}</span>
+          </div>
+          <p className="text-base text-slate-600 leading-relaxed">
+            {post.description || "No description provided."}
+          </p>
+        </header>
+
+        <div className="grid gap-4">
+          <div className="meta-grid">
+            <div className="meta-item">
+              <div className="meta-label">Created by</div>
+              <div className="meta-value">{post.author?.username || "Unknown"}</div>
+            </div>
+            <div className="meta-item">
+              <div className="meta-label">Wants to learn</div>
+              <div className="meta-value">{post.skillToLearn?.name || "—"}</div>
+            </div>
+            <div className="meta-item">
+              <div className="meta-label">Can teach</div>
+              <div className="meta-value">{post.skillToTeach?.name || "—"}</div>
+            </div>
+            <div className="meta-item">
+              <div className="meta-label">Exchange credits</div>
+              <div className="meta-value">{post.exchangeCredits ?? 0}</div>
+            </div>
+            <div className="meta-item">
+              <div className="meta-label">Status</div>
+              <div className="meta-value">{post.status || "active"}</div>
+            </div>
+            <div className="meta-item">
+              <div className="meta-label">Location</div>
+              <div className="meta-value">{post.location || "Remote"}</div>
+            </div>
+          </div>
+
+          <div className="surface-soft p-6 rounded-2xl grid gap-2">
+            <div className="text-xs uppercase tracking-[0.25em] text-slate-500">Comments</div>
+            <div className="text-lg font-semibold text-slate-900">{commentsCount} total</div>
+            <div className="comment-list">
+              {commentsCount === 0 ? (
+                <p className="subtle">No comments yet. Be the first to share your thoughts.</p>
+              ) : (
+                comments.map((comment) => (
+                  <div key={comment._id} className="comment-card">
+                    <div className="text-xs uppercase tracking-[0.25em] text-slate-500">
+                      {comment.author?.username || "Anonymous"}
+                    </div>
+                    <p className="text-sm text-slate-700 leading-relaxed">
+                      {comment.comment || "—"}
+                    </p>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
         </div>
-      )}
+
+        {isAuthor && (
+          <div className="form-actions">
+            <button
+              className="btn-outline"
+              onClick={() => navigate(`/posts/${postId}/edit`)}
+            >
+              Edit post
+            </button>
+            <button className="btn-muted text-red-600 border-red-200 hover:border-red-300" onClick={handleDelete}>
+              Delete post
+            </button>
+          </div>
+        )}
+      </article>
     </div>
   );
 }
diff --git a/src/pages/PostPage.jsx b/src/pages/PostPage.jsx
index 9627deb..98f5f2c 100644
--- a/src/pages/PostPage.jsx
+++ b/src/pages/PostPage.jsx
@@ -1,92 +1,158 @@
 import { useEffect } from "react";
-import { usePosts } from "../context/PostContext";
 import { useNavigate, Link } from "react-router-dom";
-import CreatePost from "./CreatePost";
+import { usePosts } from "../context/PostContext";
+import { useAuth } from "../auth/AuthContext";
+
+const statusClass = (status) => {
+  if (!status) return "status-active";
+  const normalized = status.toLowerCase();
+  if (normalized === "archived") return "status-archived";
+  return "status-active";
+};
 
 export default function PostPage() {
   const { posts, loading, error, getAllPosts } = usePosts();
+  const { user } = useAuth();
   const navigate = useNavigate();
 
   useEffect(() => {
     getAllPosts();
   }, [getAllPosts]);
 
-  if (loading) return <p>Loading...</p>;
-  if (error) return <p style={{ color: "red" }}>{error}</p>;
+  if (loading) {
+    return (
+      <div className="section-card text-center">
+        <div className="mx-auto h-12 w-12 animate-spin rounded-full border-4 border-fuchsia-200 border-t-fuchsia-500" />
+        <h2 className="heading text-lg">Fetching the latest swaps…</h2>
+        <p className="subtle">Give us a quick moment while we sync the community board.</p>
+      </div>
+    );
+  }
 
-  return (
-    <div style={{ padding: "20px", maxWidth: "800px", margin: "0 auto" }}>
-      <h1>All Posts</h1>
-      <button
-          onClick={() => navigate("/posts/create")}
-          style={{
-            padding: "10px 20px",
-            cursor: "pointer",
-            backgroundColor: "#28a745",
-            color: "white",
-            border: "none",
-            borderRadius: "5px",
-          }}
-        >
-          Create a New Post
+  if (error) {
+    return (
+      <div className="section-card text-center">
+        <h2 className="heading text-lg text-red-600">We couldn’t load posts</h2>
+        <p className="subtle">{error}</p>
+        <button className="btn-outline mx-auto" onClick={() => getAllPosts()}>
+          Try again
         </button>
-
-      <div style={{ display: "flex", flexDirection: "column", gap: "15px" }}>
-        {posts.map((post) => (
-          <div
-            key={post._id}
-            onClick={() => navigate(`/posts/${post._id}`)}
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: "15px",
-              padding: "15px",
-              border: "1px solid #ccc",
-              borderRadius: "10px",
-              cursor: "pointer",
-              boxShadow: "2px 2px 6px rgba(0,0,0,0.1)",
-              transition: "transform 0.1s, box-shadow 0.1s",
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.transform = "scale(1.02)";
-              e.currentTarget.style.boxShadow = "4px 4px 12px rgba(0,0,0,0.2)";
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.transform = "scale(1)";
-              e.currentTarget.style.boxShadow = "2px 2px 6px rgba(0,0,0,0.1)";
-            }}
-          >
-            <img
-              src={post.author?.profilePhoto || ""}
-              alt={post.author?.username || "Unknown"}
-              style={{ width: "60px", height: "60px", borderRadius: "50%" }}
-            />
-            <div>
-              <h2 style={{ margin: "0 0 5px 0" }}>{post.title}</h2>
-              <p style={{ margin: "0 0 3px 0" }}>
-                <strong>Author:</strong> {post.author?.username || "Unknown"}
-              </p>
-              <p style={{ margin: "0 0 3px 0" }}>
-                <strong>Skill To Learn:</strong>{" "}
-                {post.skillToLearn?.name || "-"}
-              </p>
-              <p style={{ margin: "0 0 3px 0" }}>
-                <strong>Skill To Teach:</strong>{" "}
-                {post.skillToTeach?.name || "-"}
-              </p>
-              <p style={{ margin: "0 0 3px 0" }}>
-                <strong>Exchange Credits:</strong> {post.exchangeCredits || 0}
-              </p>
-              <p style={{ margin: 0 }}>
-                <strong>Status:</strong> {post.status || "active"}
-              </p>
-              <p style={{ margin: "5px 0 0 0" }}>
-                <strong>Comments:</strong> {(post.comments || []).length}
-              </p>
-            </div>
-          </div>
-        ))}
       </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-8">
+      <header className="post-header">
+        <div className="grid gap-2">
+          <span className="section-title">Community marketplace</span>
+          <h1 className="heading text-3xl font-bold">Discover exchanges posted by peers</h1>
+          <p className="text-sm text-slate-600 max-w-2xl">
+            Browse active swaps and find a match that aligns with the skills you’re eager to learn or
+            teach. Each post highlights the exchange credits involved so collaborations feel
+            effortless and fair.
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          {user ? (
+            <button className="btn-primary" onClick={() => navigate("/posts/create")}>Create post</button>
+          ) : (
+            <Link className="btn-outline" to="/register">
+              Join SyncSkilled
+            </Link>
+          )}
+        </div>
+      </header>
+
+      {posts.length === 0 ? (
+        <div className="empty-state">
+          <div className="empty-title">No posts just yet</div>
+          <p className="empty-copy">
+            Be the first to share a skill exchange opportunity and help the community grow.
+          </p>
+          {user ? (
+            <button className="btn-primary mx-auto" onClick={() => navigate("/posts/create")}>
+              Launch your first post
+            </button>
+          ) : (
+            <Link className="btn-outline mx-auto" to="/register">
+              Create an account
+            </Link>
+          )}
+        </div>
+      ) : (
+        <div className="post-grid">
+          {posts.map((post) => {
+            const commentsCount = Array.isArray(post.comments) ? post.comments.length : 0;
+            const authorInitials = (post.author?.username || "?").slice(0, 2).toUpperCase();
+            const statusLabel = post.status
+              ? `${post.status.charAt(0).toUpperCase()}${post.status.slice(1)}`
+              : "Active";
+            return (
+              <article
+                key={post._id}
+                className="post-card"
+                onClick={() => navigate(`/posts/${post._id}`)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    navigate(`/posts/${post._id}`);
+                  }
+                }}
+              >
+                <div className="post-header">
+                  <div className="flex items-center gap-3">
+                    <div className="avatar-ring">
+                      {post.author?.profilePhoto ? (
+                        <img src={post.author.profilePhoto} alt={post.author?.username || "Author"} />
+                      ) : (
+                        <div className="avatar">{authorInitials}</div>
+                      )}
+                    </div>
+                    <div className="grid gap-1">
+                      <h2 className="post-title">{post.title}</h2>
+                      <span className="text-xs text-slate-500 uppercase tracking-[0.25em]">
+                        {post.author?.username || "Unknown"}
+                      </span>
+                    </div>
+                  </div>
+                  <span className={statusClass(post.status)}>{statusLabel}</span>
+                </div>
+
+                <p className="post-preview">{post.description || "No description provided."}</p>
+
+                <div className="meta-grid">
+                  <div className="meta-item">
+                    <div className="meta-label">Wants to learn</div>
+                    <div className="meta-value">{post.skillToLearn?.name || "—"}</div>
+                  </div>
+                  <div className="meta-item">
+                    <div className="meta-label">Can teach</div>
+                    <div className="meta-value">{post.skillToTeach?.name || "—"}</div>
+                  </div>
+                  <div className="meta-item">
+                    <div className="meta-label">Exchange credits</div>
+                    <div className="meta-value">{post.exchangeCredits ?? 0}</div>
+                  </div>
+                  <div className="meta-item">
+                    <div className="meta-label">Comments</div>
+                    <div className="meta-value">{commentsCount}</div>
+                  </div>
+                </div>
+
+                <div className="post-footer">
+                  <span className="subtle">
+                    {post.location ? `📍 ${post.location}` : "🌐 Remote-friendly"}
+                  </span>
+                  <span className="badge-soft">Tap to view details →</span>
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 9ab6f67..8cf0b07 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -4,24 +4,29 @@
    BASE UTILITIES (safe to @apply)
    ========================= */
 @utility card {
-  @apply rounded-2xl border bg-white/80 backdrop-blur p-5 shadow-sm;
+  @apply rounded-3xl border border-white/40 bg-white/80 backdrop-blur-xl p-6 shadow-[0_20px_60px_-25px_rgba(15,23,42,0.25)];
 }
 @utility btn {
-  @apply inline-flex items-center justify-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium
-         transition active:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2;
+  @apply inline-flex items-center justify-center gap-2 rounded-full border px-5 py-2.5 text-sm font-semibold tracking-wide
+         transition-all duration-200 active:translate-y-[1px] disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white;
 }
 @utility input-base {
-  @apply w-full px-3 py-2 rounded-lg border text-sm bg-white/90 outline-none focus:ring-2 focus:ring-fuchsia-400;
+  @apply w-full px-4 py-3 rounded-2xl border border-slate-200 text-sm bg-white/90 outline-none focus:ring-4 focus:ring-fuchsia-200 focus:border-fuchsia-400;
 }
 @utility heading {
-  @apply text-xl font-semibold text-gray-900;
+  @apply text-2xl font-semibold text-slate-900;
 }
 @utility heading-xl {
-  @apply text-3xl md:text-4xl font-extrabold text-gray-900;
+  @apply text-4xl md:text-5xl font-black tracking-tight text-slate-900;
 }
-/* ✅ New utility: base styles for nav links */
 @utility navlink {
-  @apply px-3 py-2 rounded-lg text-sm border border-transparent text-gray-700 hover:bg-fuchsia-50;
+  @apply px-3 py-2 rounded-full text-sm font-medium border border-transparent text-slate-600 hover:text-slate-900 hover:border-white/60 hover:bg-white/60;
+}
+@utility section-title {
+  @apply text-sm font-semibold uppercase tracking-[0.3em] text-fuchsia-600;
+}
+@utility surface-soft {
+  @apply rounded-2xl border border-white/30 bg-white/60 backdrop-blur;
 }
 
 /* =========================
@@ -29,54 +34,121 @@
    ========================= */
 @layer components {
   .page {
-    @apply min-h-dvh;
-    background:
-      radial-gradient(1200px 600px at 0% 0%, #fff1f2 0%, transparent 60%),
-      radial-gradient(1000px 600px at 100% 0%, #e0f2fe 0%, transparent 60%),
-      radial-gradient(1000px 800px at 100% 100%, #f0fdf4 0%, transparent 60%),
-      linear-gradient(180deg, #fff, #fff);
+    @apply min-h-dvh relative overflow-hidden bg-gradient-to-br from-slate-50 via-white to-emerald-50 text-slate-800;
+  }
+  .page::before,
+  .page::after {
+    content: "";
+    position: absolute;
+    inset: auto;
+    width: 720px;
+    height: 720px;
+    border-radius: 50%;
+    filter: blur(160px);
+    opacity: 0.35;
+    z-index: 0;
+  }
+  .page::before {
+    top: -240px;
+    left: -200px;
+    background: radial-gradient(circle at top, #f5d0fe, transparent 70%);
   }
-  .container { @apply max-w-5xl mx-auto p-5 md:p-8 grid gap-8; }
+  .page::after {
+    bottom: -260px;
+    right: -120px;
+    background: radial-gradient(circle at bottom, #bae6fd, transparent 75%);
+  }
+  .container { @apply relative z-10 max-w-6xl mx-auto px-6 md:px-10 py-8 md:py-10 grid gap-10; }
   .brand {
-    @apply text-2xl md:text-3xl font-extrabold tracking-tight;
-    background: linear-gradient(90deg, #a21caf, #2563eb, #16a34a);
+    @apply text-2xl md:text-3xl font-black tracking-tight;
+    background: linear-gradient(120deg, #a21caf, #2563eb, #059669, #f97316);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
   }
-  .subtle  { @apply text-sm text-gray-600; }
+  .subtle  { @apply text-sm text-slate-600; }
 }
 
 /* =========================
-   🔎 NAVBAR (NEW)
+   NAVBAR
    ========================= */
 @layer components {
-  .navbar { @apply rounded-2xl border bg-white/70 backdrop-blur shadow-sm; }
-  .navbar-inner { @apply px-4 py-3 md:px-6 flex items-center justify-between; }
-  .nav-links { @apply flex items-center gap-1 md:gap-2; }
+  .navbar { @apply surface-soft shadow-[0_18px_46px_-30px_rgba(15,23,42,0.55)]; }
+  .navbar-inner { @apply px-4 md:px-6 py-4 flex flex-wrap items-center justify-between gap-4; }
+  .nav-links { @apply flex items-center gap-2 flex-wrap; }
+  .nav-cta { @apply flex items-center gap-2; }
 
-  /* Use the navlink utility so v4 doesn't complain about applying component classes */
   .nav-link { @apply navlink; }
-  .nav-link-active { @apply navlink bg-fuchsia-100 text-fuchsia-900 border-fuchsia-200; }
+  .nav-link-active { @apply navlink bg-white/80 border-white/70 text-fuchsia-700 shadow-sm; }
+}
+
+/* =========================
+   HERO / SECTIONS
+   ========================= */
+@layer components {
+  .hero {
+    @apply surface-soft relative overflow-hidden grid gap-8 p-8 md:p-12 lg:p-16;
+  }
+  .hero::before {
+    content: "";
+    position: absolute;
+    inset: auto;
+    top: -120px;
+    right: -160px;
+    width: 420px;
+    height: 420px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(217,70,239,0.25), transparent 70%);
+    filter: blur(0px);
+    z-index: 0;
+  }
+  .hero::after {
+    content: "";
+    position: absolute;
+    bottom: -200px;
+    left: -120px;
+    width: 420px;
+    height: 420px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(59,130,246,0.22), transparent 70%);
+    z-index: 0;
+  }
+  .hero-inner { @apply relative z-10 grid gap-10 lg:grid-cols-[minmax(0,1fr)_380px] items-center; }
+  .hero-copy { @apply grid gap-6 text-balance; }
+  .hero-actions { @apply flex flex-wrap items-center gap-3; }
+  .stats-grid { @apply grid gap-3 sm:grid-cols-3; }
+  .stat-card { @apply surface-soft px-5 py-4 text-center; }
+  .stat-value { @apply text-3xl font-black text-slate-900; }
+  .stat-label { @apply text-xs uppercase tracking-[0.25em] text-slate-500; }
+
+  .feature-grid { @apply grid gap-4 md:grid-cols-3; }
+  .feature-card { @apply surface-soft p-6 grid gap-3; }
+  .feature-icon { @apply inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-fuchsia-500 to-purple-600 text-white text-xl shadow-lg; }
+  .feature-title { @apply text-lg font-semibold text-slate-900; }
+  .feature-copy { @apply text-sm text-slate-600 leading-relaxed; }
 }
 
 /* =========================
-   CARDS
+   CARDS / PANELS
    ========================= */
 @layer components {
-  .card        { @apply card; }                /* uses utility */
-  .card-header { @apply mb-3 flex items-center justify-between; }
-  .card-title  { @apply heading; }             /* uses utility */
-  .card-content{ @apply grid gap-3; }
+  .card        { @apply card; }
+  .card-header { @apply mb-4 flex items-center justify-between; }
+  .card-title  { @apply heading; }
+  .card-content{ @apply grid gap-4; }
+  .section-card { @apply surface-soft p-8 grid gap-6; }
 }
 
 /* =========================
    BUTTONS & LINKS
    ========================= */
 @layer components {
-  .btn-primary { @apply btn bg-fuchsia-600 text-white border-fuchsia-600 hover:bg-fuchsia-700 focus:ring-fuchsia-400; }
-  .btn-ghost   { @apply btn border-transparent text-gray-700 hover:bg-fuchsia-50 focus:ring-fuchsia-200; }
-  .btn-outline { @apply btn border-fuchsia-300 text-fuchsia-800 hover:bg-fuchsia-50 focus:ring-fuchsia-200; }
+  .btn-primary {
+    @apply btn border-transparent bg-gradient-to-r from-fuchsia-600 via-purple-600 to-sky-500 text-white shadow-lg shadow-fuchsia-500/30 hover:shadow-fuchsia-500/40 hover:brightness-105 focus:ring-fuchsia-300;
+  }
+  .btn-ghost   { @apply btn border-transparent text-slate-600 hover:text-fuchsia-700 hover:bg-white/70 focus:ring-fuchsia-200; }
+  .btn-outline { @apply btn border-fuchsia-200 text-fuchsia-700 hover:bg-fuchsia-50 focus:ring-fuchsia-200; }
+  .btn-muted   { @apply btn border-slate-200 text-slate-500 bg-white/70 hover:border-slate-300 hover:text-slate-700; }
   .link        { @apply text-fuchsia-700 hover:text-fuchsia-900 underline underline-offset-2; }
 }
 
@@ -84,22 +156,75 @@
    FORMS
    ========================= */
 @layer components {
-  .input { @apply input-base; }                /* uses utility */
-  .label { @apply text-sm font-medium text-gray-700; }
-  .form  { @apply grid gap-3; }
-  .field-row { @apply grid gap-1; }
+  .input { @apply input-base; }
+  .textarea { @apply input-base min-h-[140px] resize-y; }
+  .label { @apply text-sm font-semibold text-slate-700; }
+  .form  { @apply grid gap-4; }
+  .field-row { @apply grid gap-2; }
+  .form-actions { @apply flex flex-wrap items-center justify-end gap-3; }
 }
 
 /* =========================
    LISTS / ROWS / BADGES
    ========================= */
 @layer components {
-  .list     { @apply grid gap-2; }
-  .row      { @apply flex items-center justify-between gap-3 rounded-xl border bg-white/70 px-3 py-2 hover:bg-white; }
+  .list     { @apply grid gap-3; }
+  .row      { @apply flex items-center justify-between gap-3 rounded-2xl border border-white/50 bg-white/70 px-4 py-3 hover:bg-white shadow-sm transition; }
   .row-left { @apply flex items-center gap-3; }
-  .avatar   { @apply grid place-items-center w-8 h-8 rounded-full bg-fuchsia-100 text-fuchsia-800 text-xs font-semibold; }
+  .avatar   { @apply grid place-items-center w-12 h-12 rounded-2xl bg-gradient-to-br from-fuchsia-200 to-sky-200 text-fuchsia-900 text-sm font-bold; }
+
+  .badge        { @apply inline-flex items-center gap-2 px-3 py-1 text-xs font-semibold uppercase tracking-widest rounded-full bg-fuchsia-100 text-fuchsia-700 border border-fuchsia-200; }
+  .badge-soft   { @apply inline-flex items-center gap-2 px-3 py-1 text-xs rounded-full bg-slate-100 text-slate-600 border border-slate-200; }
+  .pill         { @apply inline-flex items-center gap-2 px-3 py-1 text-xs rounded-full bg-emerald-100 text-emerald-700 border border-emerald-200 font-semibold; }
+  .status-active {
+    @apply inline-flex items-center gap-2 px-3 py-1 text-xs font-semibold uppercase tracking-widest rounded-full border;
+    @apply bg-emerald-100 text-emerald-600 border-emerald-200;
+  }
+  .status-archived {
+    @apply inline-flex items-center gap-2 px-3 py-1 text-xs font-semibold uppercase tracking-widest rounded-full border;
+    @apply bg-slate-200 text-slate-600 border-slate-300;
+  }
+  .meta-grid { @apply grid gap-2 sm:grid-cols-2; }
+  .meta-item { @apply surface-soft px-4 py-3 rounded-2xl; }
+  .meta-label { @apply text-xs uppercase tracking-[0.25em] text-slate-500; }
+  .meta-value { @apply text-sm font-semibold text-slate-800; }
+  .comment-list { @apply grid gap-3; }
+  .comment-card { @apply surface-soft p-4 rounded-2xl grid gap-2; }
+}
+
+/* =========================
+   POST GRIDS
+   ========================= */
+@layer components {
+  .post-header { @apply flex flex-wrap items-start justify-between gap-4; }
+  .post-grid { @apply grid gap-4 md:grid-cols-2 xl:grid-cols-3; }
+  .post-card { @apply surface-soft relative overflow-hidden p-6 grid gap-4 transition hover:-translate-y-1 hover:shadow-xl; }
+  .post-card::after {
+    content: "";
+    position: absolute;
+    inset: auto;
+    right: -80px;
+    bottom: -120px;
+    width: 220px;
+    height: 220px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(244,114,182,0.22), transparent 70%);
+    z-index: 0;
+  }
+  .post-card > * { @apply relative z-10; }
+  .post-title { @apply text-xl font-semibold text-slate-900; }
+  .post-preview { @apply text-sm text-slate-600 leading-relaxed line-clamp-3; }
+  .post-footer { @apply flex flex-wrap items-center justify-between gap-3; }
+  .avatar-ring { @apply relative h-12 w-12 rounded-2xl overflow-hidden border-4 border-white shadow-lg; }
+  .avatar-ring img { @apply h-full w-full object-cover; }
+}
 
-  .badge      { @apply inline-flex items-center gap-2 px-2 py-1 text-xs rounded-full bg-fuchsia-50 text-fuchsia-800 border border-fuchsia-200; }
-  .badge-soft { @apply inline-flex items-center gap-2 px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-700 border border-gray-200; }
-  .pill       { @apply inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full bg-emerald-50 text-emerald-800 border border-emerald-200; }
+/* =========================
+   MISC
+   ========================= */
+@layer components {
+  .empty-state { @apply surface-soft p-12 text-center grid gap-4; }
+  .empty-title { @apply text-xl font-semibold text-slate-900; }
+  .empty-copy { @apply text-sm text-slate-600; }
+  .divider { @apply h-px bg-gradient-to-r from-transparent via-slate-200 to-transparent; }
 }