Feature/blogs page

app/blogs/[id]/page.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { SingleBlog } from "../../components/sections/SingleBlog";
+import { getBlogById, type Blog } from "@/sanity/lib/getBlogs";
+import { useState,useEffect } from "react"; 
+
+
+
+export default function BlogDetailPage() {
+  return (
+    <main className="flex flex-col">
+        <SingleBlog />; 
+    </main>
+  );
+}

app/blogs/page.tsx

@@ -1,143 +1,19 @@
-"use client";
+import { BlogListing } from "../components/sections/BlogListing";
+import {DynamicButtons} from "../components/sections/DynamicButtons";
 
-import Link from "next/link";
-import { client } from "@/sanity/lib/client";
-import { useState, useEffect } from "react";
 
-type Blog = {
-  _id: string;
-  title: string;
-  slug: { current: string };
-  mainImage?: { asset: { url: string } };
-  author?: { name: string };
-  excerpt?: string;
-  publishedAt?: string;
-  category?: string;
+export const metadata = {
+  title: "Blogs",
+  description: "CSSL GenZ Chapter of UCSC",
+  keywords: "",
 };
 
-async function getBlogs(): Promise<Blog[]> {
-  const query = `*[_type=="blog"]|order(publishedAt desc)[0...50]{
-    _id,
-    title,
-    slug,
-    "mainImage": mainImage.asset->{url},
-    "author": author-> { name },
-    excerpt,
-    publishedAt,
-    category
-  }`;
-  return client.fetch(query);
-}
-
-export default function BlogsPage() {
-  const [blogs, setBlogs] = useState<Blog[]>([]);
-  const [visibleCount, setVisibleCount] = useState(9);
-  const [activeCategory, setActiveCategory] = useState("All");
-
-  //const categories = ["All", "Tutorials", "News", "Updates"];
-
-  const categories = ["All", "Events", "Workshops", "Competitions", "Announcements"];
-
-
-  useEffect(() => {
-    getBlogs().then(setBlogs);
-  }, []);
-
-  const filteredBlogs =
-    activeCategory === "All"
-      ? blogs
-      : blogs.filter((b) => b.category === activeCategory);
-
+export default function ContactUsPage() {
   return (
-    <main className="mx-auto max-w-6xl px-4 py-10">
-      {/* Header */}
-      <section className="text-center mb-12">
-        <img
-          src="/images/blog-header.jpg"
-          alt="Blog Header"
-          className="mx-auto mb-6 w-full max-h-64 object-cover rounded-lg shadow-sm"
-        />
-        <h1 className="text-4xl font-bold">Blogs</h1>
-        <p className="mt-4 text-gray-600">
-          Stay updated with the latest events, workshops, and announcements
-        </p>
-      </section>
-
-      {/* Filter Buttons */}
-      <section className="flex justify-center mb-10 space-x-3">
-        {categories.map((cat) => (
-          <button
-            key={cat}
-            onClick={() => setActiveCategory(cat)}
-            className={`px-4 py-2 rounded-lg transition ${
-              activeCategory === cat
-                ? "bg-blue-600 text-white"
-                : "bg-gray-100 text-gray-700 hover:bg-blue-600 hover:text-white"
-            }`}
-          >
-            {cat}
-          </button>
-        ))}
-      </section>
-
-      {/* Blog Grid */}
-      {filteredBlogs.length === 0 ? (
-        <p className="text-center text-gray-500">No blogs yet.</p>
-      ) : (
-        <section className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
-          {filteredBlogs.slice(0, visibleCount).map((blog) => (
-            <article
-              key={blog._id}
-              className="border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200 flex flex-col"
-            >
-              {blog.mainImage?.asset?.url && (
-                <img
-                  src={blog.mainImage.asset.url}
-                  alt={blog.title}
-                  className="w-full h-56 object-cover"
-                />
-              )}
-              <div className="p-4 flex flex-col flex-1 justify-between">
-                <div>
-                  <Link
-                    href={`/blogs/${blog.slug.current}`}
-                    className="text-xl font-semibold hover:underline"
-                  >
-                    {blog.title}
-                  </Link>
-                  {blog.author?.name && (
-                    <p className="text-sm text-gray-500 mt-1">
-                      By {blog.author.name}
-                    </p>
-                  )}
-                  {blog.excerpt && (
-                    <p className="mt-2 text-gray-700 line-clamp-3">
-                      {blog.excerpt}
-                    </p>
-                  )}
-                </div>
-                {blog.publishedAt && (
-                  <p className="mt-3 text-sm text-gray-400">
-                    {new Date(blog.publishedAt).toLocaleDateString()}
-                  </p>
-                )}
-              </div>
-            </article>
-          ))}
-        </section>
-      )}
-
-      {/* Load More */}
-      {visibleCount < filteredBlogs.length && (
-        <div className="flex justify-center mt-12">
-          <button
-            onClick={() => setVisibleCount((prev) => prev + 9)}
-            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
-          >
-            Load More
-          </button>
-        </div>
-      )}
+    <main className="flex flex-col">
+
+      <BlogListing />
+
     </main>
   );
 }

app/components/elements/Footer.tsx

@@ -195,4 +195,4 @@ const FooterContent = () => {
       </div>
     </div>
   );
-};
+};

app/components/elements/MemberCard.tsx

@@ -68,4 +68,4 @@ export const MemberCardItem = ({ member }: { member: MemberCardProps }) => {
       </Link>
     </motion.div>
   );
-};
+};

app/components/elements/NavBar.tsx

@@ -249,4 +249,4 @@ export const Navbar = () => {
       </Container>
     </motion.header>
   );
-};
+};

app/components/elements/TeamGroupPhoto.tsx

@@ -45,4 +45,4 @@ export const TeamGroupPhoto = ({
       </motion.div>
     </div>
   );
-};
+};

app/components/elements/Trail.tsx

@@ -192,4 +192,4 @@ export const Trail = ({
       />
     </div>
   );
-};
+};

app/components/sections/About.tsx

@@ -148,4 +148,4 @@ export const About = () => {
       </Container>
     </section>
   );
-};
+};

app/components/sections/BlogDescription.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { getBlogById, type Blog } from "@/sanity/lib/getBlogs";
+import { urlFor } from "@/sanity/lib/image";
+
+export const BlogDescription = () => {
+
+  const pathname = usePathname();
+
+  const [blogId, setBlogId] = useState<string | null>(null);
+  const [blog, setBlog] = useState<Blog | null>(null);
+
+
+  useEffect(() => {
+    if (pathname) {
+      const segments = pathname.split("/"); 
+      const id = segments[2];
+      setBlogId(id);
+    }
+  }, [pathname]);
+
+  useEffect(() => {
+    if (blogId) {
+      getBlogById(blogId)
+        .then((data) => setBlog(data))
+        .catch((err) => console.error(err));
+    }
+  }, [blogId]);
+
+  if (!blog) return <p>Loading...</p>;
+
+  const contentParagraphs = blog.content
+    ? blog.content.split("\n").filter(Boolean)
+    : [];
+
+  const subtopicParagraphs = blog.subtopicDescription
+    ? blog.subtopicDescription.split("\n").filter(Boolean)
+    : [];
+
+  return (
+    <div className="py-8 pl-23 border border-red-500">
+  {/* Content paragraphs */}
+  {contentParagraphs.length > 0 ? (
+    contentParagraphs.map((p, i) => (
+      <p
+        key={i}
+        className={`my-2 ${
+          i === 0 ? "text-orange-500 font-semibold" : "text-[#9AA0A6]"
+        }`}
+      >
+        {p}
+      </p>
+    ))
+  ) : (
+    <p className="text-white">No content</p>
+  )}
+
+  {/* Subtopic section */}
+  {subtopicParagraphs.length > 0 ? (
+    <div>
+      <h5 className="text-[#84B5FF] mt-6 mb-2">Sub Topic</h5>
+
+      {/* First subtopic */}
+      <p className="text-[#9AA0A6] my-1">{subtopicParagraphs[0]}</p>
+
+      {/* Image if exists */}
+      {blog?.mainImage?.asset && (
+        <img
+          src={urlFor(blog.mainImage).width(1200).url()}
+          alt={blog.title}
+          className="w-[693px] h-[490px] object-cover lg:-left-[33px] lg:-top-[35px] lg:relative"
+        />
+      )}
+
+      {/* Rest of subtopics (optional) */}
+      {subtopicParagraphs.slice(1).map((sub, i) => (
+        <p key={i} className="text-[#9AA0A6] my-1">
+          {sub}
+        </p>
+      ))}
+
+        <div className="flex flex-col md:flex-row justify-between items-center gap-0 text-sm text-gray-400 mt-6">
+          {/* Last Updated */}
+          <p>
+            Last Updated{" "}
+            <span className="text-blue-500 font-medium">
+              {new Date(blog.publishedAt).toLocaleDateString("en-GB", {
+                day: "2-digit",
+                month: "short",
+                year: "numeric",
+              })}
+            </span>
+          </p>
+
+          {/* Category */}
+          {blog.category && (
+            <p>
+              Category{" "}
+              <span className="text-blue-500 font-medium -ml-30">{blog.category}</span>
+            </p>
+          )}
+        </div>
+    </div>
+  ) : (
+    <p className="text-white">No subtopic description</p>
+  )}
+
+
+
+
+
+</div>
+
+
+
+
+  );
+};

app/components/sections/BlogListing.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useState,useEffect } from "react";
+import { motion } from "motion/react";
+import { h1 } from "motion/react-client";
+import { client } from "@/sanity/lib/client";
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "../shared/Button";
+import { PageTitle } from "../shared/PageTitle";
+import { Container } from "../shared/Container";
+import { getBlogs, Blog } from "@/sanity/lib/getBlogs";
+import { DisplayBlogs } from "./DisplayBlogs";
+import { BlogsAnimation } from "./BlogsAnimations";
+
+
+
+
+
+
+
+export const BlogListing = () => {
+
+  return (
+    <section className="h- flex items-start justify-center bg-black text-white sm:pt-30 pt-20">
+      <Container className="h-full pb-20">
+        <div className="lg:-mb-790 w-full h-full flex flex-col sm:items-stretch ">
+          <PageTitle
+              text="BLOGS"
+              className="lg:text-[213px] md:text-[125px] sm:text-[100px] text-[60px]"
+          />
+          <div className="flex px-2.5 justify-between items-start self-stretch flex-1">
+            <motion.p
+              initial={{ opacity: 0, filter: "blur(8px)" }}
+              animate={{ opacity: 1, filter: "blur(0px)" }}
+              transition={{ duration: 0.3, ease: "easeOut", delay: 0.15 }}
+              className="text-[#afafaf] font-[Poppins] sm:text-[16px] xl:mb-800 text-[12px] not-italic font-medium sm:leading-[23px] leading-4 sm:w-[474px] w-[200px]"
+            >
+              Exploring trends, ideas, and success stories that shape the future of community and connection.
+            </motion.p>
+          </div>     
+        </div>
+
+        <BlogsAnimation />
+
+        <DisplayBlogs />     
+      </Container>
+    </section>
+  );
+}

app/components/sections/Blogs.tsx

@@ -368,4 +368,4 @@ export const Blogs = () => {
       </Container>
     </section>
   );
-};
+};