some changes

app/(auth)/admin/changelogs/page.tsx

@@ -65,6 +65,36 @@ const AdminLogPage = () => {
 	const [pageTitle, setPageTitle] = useState("");
 	const [selectedPage, setSelectedPage] = useState<PageEntry | null>(null);
 
+	useEffect(() => {
+		fetch("/api/mdx/pages")
+			.then((response) => response.json())
+			.then((data) => setPages(data))
+			.catch((error) => console.error("Failed to load pages", error));
+	}, []);
+
+	const createPage = async () => {
+		setLoading(true);
+		const slug = pageTitle.toLowerCase().replace(/\s+/g, "-");
+		const response = await fetch("/api/mdx/pages", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({ title: pageTitle, slug, content: "" }),
+		});
+
+		if (response.ok) {
+			const newPage = await response.json();
+			setPages([...pages, newPage]);
+			setPageTitle("");
+			setOpen(false);
+			setLoading(false);
+		} else {
+			console.error("Failed to create page");
+			setLoading(false);
+		}
+	};
+
 	const form = useForm<LogsFormValues>({
 		resolver: zodResolver(logsSchema),
 		defaultValues: {
@@ -228,6 +258,71 @@ const AdminLogPage = () => {
 				</form>
 			</Form>
 
+			<section className="container mx-auto p-4">
+				{/* <h1 className="text-3xl font-bold">Changelog Management</h1> */}
+				<section id="create-page" className="py-16">
+					<h2 className="text-3xl md:text-4xl font-bold mb-2">
+						Multi Log Page
+					</h2>
+					<Button variant={"secondary"} onClick={() => setOpen(true)}>
+						Create New Page
+					</Button>
+					<Dialog open={open} onOpenChange={setOpen}>
+						<DialogContent>
+							<DialogHeader>
+								<DialogTitle>Enter Page Title</DialogTitle>
+							</DialogHeader>
+							<Input
+								value={pageTitle}
+								onChange={(e) => setPageTitle(e.target.value)}
+								placeholder="Page Title"
+							/>
+							<DialogFooter>
+								<Button disabled={loading} onClick={createPage}>
+									Continue
+								</Button>
+							</DialogFooter>
+						</DialogContent>
+					</Dialog>
+				</section>
+				<section id="pages-list" className="pb-16">
+					<h2 className="text-3xl md:text-4xl font-bold">Existing Pages</h2>
+					<p className="mb-4">Total Pages: {pages.length}</p>
+					<Table className="w-full mt-4 border-muted">
+						<TableHeader>
+							<TableRow>
+								<TableHead className="border-b px-4 py-2">Slug</TableHead>
+								<TableHead className="border-b px-4 py-2">Actions</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{pages.map((page) => (
+								<TableRow key={page.slug}>
+									<TableCell className="border-b px-4 py-2">
+										<a
+											href={`/changelogs/${page.slug}`}
+											className="text-blue-500 underline"
+										>
+											{page.slug}
+										</a>
+									</TableCell>
+									<TableCell className="border-b px-4 py-2">
+										<Button
+											variant={"outline"}
+											onClick={() =>
+												router.push(`/admin/changelogs/${page.slug}`)
+											}
+										>
+											Edit
+										</Button>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</section>
+			</section>
+
 			{/* Section to list and delete logs */}
 			<section id="logs-list" className="py-16 md:py-24">
 				<h2 className="text-3xl md:text-4xl font-bold">Existing Logs</h2>

app/(root)/changelogs/[slug]/page.tsx

@@ -0,0 +1,40 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import ReactMarkdown from "react-markdown";
+
+const Page = ({ params }: { params: { slug: string } }) => {
+	const { slug } = params;
+	const [page, setPage] = useState<{ title: string; content: string } | null>(
+		null
+	);
+
+	useEffect(() => {
+		fetch(`/api/mdx/pages/${slug}`)
+			.then((response) => response.json())
+			.then((data) => setPage(data))
+			.catch((error) => console.error("Failed to load page", error));
+	}, [slug]);
+
+	if (!page) {
+		return (
+			<section id="404error" className="flex-center flex-col wrapper container">
+				<h1 className="text-3xl md:text-5xl text-center">
+					<span className="text-red-500">404</span> Page not Found
+				</h1>
+				<p className="text-lg mt-3 text-muted-foreground">
+					Please return back to Home
+				</p>
+			</section>
+		);
+	}
+
+	return (
+		<section className="container mx-auto p-4">
+			<h1 className="text-3xl font-bold py-6">{page.title}</h1>
+			<ReactMarkdown>{page.content}</ReactMarkdown>
+		</section>
+	);
+};
+
+export default Page;

app/api/mdx/pages/[slug]/route.ts

@@ -0,0 +1,54 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import clientPromise from "@/lib/db";
+
+export async function GET(req: NextApiRequest, res: NextApiResponse) {
+	const { slug } = req.query;
+	try {
+		const client = await clientPromise;
+		const db = client.db();
+		const page = await db.collection("pages").findOne({ slug });
+		if (page) {
+			res.status(200).json(page);
+		} else {
+			res.status(404).json({ error: "Page not found" });
+		}
+	} catch (error) {
+		res.status(500).json({ error: "Failed to load page" });
+	}
+}
+
+export async function PUT(req: NextApiRequest, res: NextApiResponse) {
+	const { slug } = req.query;
+	const { title, content } = req.body;
+	try {
+		const client = await clientPromise;
+		const db = client.db();
+		const result = await db
+			.collection("pages")
+			.updateOne({ slug }, { $set: { title, content } });
+		if (result.matchedCount > 0) {
+			const updatedPage = await db.collection("pages").findOne({ slug });
+			res.status(200).json(updatedPage);
+		} else {
+			res.status(404).json({ error: "Page not found" });
+		}
+	} catch (error) {
+		res.status(500).json({ error: "Failed to update page" });
+	}
+}
+
+export async function DELETE(req: NextApiRequest, res: NextApiResponse) {
+	const { slug } = req.query;
+	try {
+		const client = await clientPromise;
+		const db = client.db();
+		const result = await db.collection("pages").deleteOne({ slug });
+		if (result.deletedCount > 0) {
+			res.status(200).json({ message: "Page successfully deleted" });
+		} else {
+			res.status(404).json({ error: "Page not found" });
+		}
+	} catch (error) {
+		res.status(500).json({ error: "Failed to delete page" });
+	}
+}

app/api/mdx/pages/route.ts

@@ -0,0 +1,46 @@
+import { NextResponse } from "next/server";
+import clientPromise from "@/lib/db";
+
+export async function GET() {
+	try {
+		const client = await clientPromise;
+		const db = client.db();
+		const pages = await db.collection("pages").find({}).toArray();
+		return NextResponse.json(pages, { status: 200 });
+	} catch (error) {
+		return NextResponse.json(
+			{ error: "Failed to load pages" },
+			{ status: 500 }
+		);
+	}
+}
+
+export async function POST(req: Request) {
+	try {
+		const body = await req.json();
+		const { title, slug, content } = body;
+
+		const client = await clientPromise;
+		const db = client.db();
+		const result = await db
+			.collection("pages")
+			.insertOne({ title, slug, content });
+
+		if (result.acknowledged) {
+			const newPage = await db
+				.collection("pages")
+				.findOne({ _id: result.insertedId });
+			return NextResponse.json(newPage, { status: 201 });
+		} else {
+			return NextResponse.json(
+				{ error: "Failed to create page" },
+				{ status: 500 }
+			);
+		}
+	} catch (error) {
+		return NextResponse.json(
+			{ error: "Failed to create page" },
+			{ status: 500 }
+		);
+	}
+}

components/cards/testimonialCard.tsx

@@ -18,7 +18,7 @@ const TestimonialCard = ({
 }: TestimonialCard) => {
 	return (
 		<li className="inline-block w-full">
-			<div className="bg-[#1c1c1c] mx-auto mb-5 flex w-full cursor-default flex-col gap-4 rounded-2xl px-[30px] py-6 shadow-md transition-all hover:scale-[103%]">
+			<div className="bg-primary/10 dark:bg-[#1c1c1c] mx-auto mb-5 flex w-full cursor-default flex-col gap-4 rounded-2xl px-[30px] py-6 shadow-md transition-all hover:scale-[103%]">
 				<div className="flex flex-row items-center gap-3">
 					<div>
 						<Image
@@ -31,12 +31,12 @@ const TestimonialCard = ({
 					</div>
 					<div className="space-y-1">
 						<div className="flex items-center gap-1">
-							<div className="small-semibold text-white">{name}</div>
+							<div className="small-semibold dark:text-white">{name}</div>
 						</div>
-						<div className="small-regular text-white-800">{role}</div>
+						<div className="text-sm text-muted-foreground">{role}</div>
 					</div>
 				</div>
-				<p className="body-regular text-white">{testimonial}</p>
+				<p className="body-regular dark:text-white">{testimonial}</p>
 				<div className="hue-rotate-90 text-lg">
 					{/* <Image
 						src="/testimonials/stars.svg"

components/shared/Footer.tsx

@@ -57,7 +57,9 @@ const Footer = () => {
 					<div className="border-t mb-6 border-gray-300 dark:border-white/30"></div>
 					<div className="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0 px-4">
 						<span className="text-sm font-light">
-							Designed and Developed by{" "}
+							{/* TODO: */}
+							{/* put tos and pp here instead */}
+							TOS and PP{" "}
 							<Link
 								href={FOOTERLINKS.footerBottom.designedBy.href}
 								className="text-primary font-semibold"

components/shared/Hero.tsx

@@ -65,7 +65,7 @@ const Hero = () => {
 				</AnimatedGradientText>
 				<main className="text-5xl md:text-6xl font-bold">
 					<h1 className="inline custom-title">
-						<span className="bg-gradient-to-r from-[#84F472] to-[#34a102] bg-clip-text text-transparent">
+						<span className="bg-primary bg-clip-text text-transparent">
 							Simplify
 						</span>{" "}
 						your server logic performance