feat: add newsletters feature

apps/web/package.json

@@ -27,6 +27,8 @@
     "dompurify": "^3.3.0",
     "framer-motion": "^11.15.0",
     "geist": "^1.5.1",
+    "gray-matter": "^4.0.3",
+    "gsap": "^3.13.0",
     "lucide-react": "^0.456.0",
     "next": "15.5.3",
     "next-auth": "^4.24.11",
@@ -36,6 +38,8 @@
     "react-dom": "^18.2.0",
     "react-qr-code": "^2.0.18",
     "react-tweet": "^3.2.1",
+    "remark": "^15.0.1",
+    "remark-html": "^16.0.1",
     "superjson": "^2.2.5",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",

apps/web/src/app/(main)/newsletters/[slug]/page.tsx

@@ -0,0 +1,86 @@
+import PageTransition from "../pagetransition";
+import Image from "next/image";
+import { ArrowLeft } from 'lucide-react';
+import { getNewsletterContent } from "@/lib/newslettercontent";
+import { posts } from "@/data/newsletters";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+export default async function NewsletterSlug({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+
+  const post = posts.find((p) => p.slug === slug);
+
+  // if post doesn't exist, show 404 page
+  if (!post) {
+    notFound();
+  }
+
+  const { htmlContent } = await getNewsletterContent(slug);
+
+  return (
+    <PageTransition>
+      <div className="
+        bg-transparent 
+        [background-image:radial-gradient(#3b3b3b_1px,transparent_1px)]
+        [background-size:22px_22px]
+        py-10 px-6 md:px-10 lg:px-16
+      ">
+
+        {/* BACK BUTTON */}
+        <div className="
+          fixed 
+          flex items-center 
+          bg-[#9455f4] 
+          rounded-2xl 
+          text-[15px] 
+          px-3 py-1.5
+        ">
+          <ArrowLeft />
+          <Link href="/newsletters" className="ml-2">
+            Back to Newsletters
+          </Link>
+        </div>
+
+        {/* HEADER IMAGE */}
+        <Image
+          src={post.coverimg}
+          width={650}
+          alt="img"
+          className="
+            mx-auto 
+            mt-10 mb-16 
+            max-w-full 
+            lg:w-[650px]
+          "
+        />
+
+        {/* ROW */}
+        <div className="flex flex-row gap-4 mb-8">
+          <p className="
+            bg-[#9455f4] 
+            w-20 h-7 
+            text-[14px] 
+            border border-white 
+            rounded-2xl 
+            flex items-center justify-center
+          ">
+            Article
+          </p>
+
+          <p className="text-[12px] relative top-[2px]">
+            {post.date}
+          </p>
+        </div>
+
+        {/* CONTENT */}
+        <div className="w-full lg:w-[70%]">
+          <div className="prose prose-invert max-w-none">
+            <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
+          </div>
+        </div>
+
+      </div>
+    </PageTransition>
+  );
+}