From ce4336a4721b81873d80445310cf815cb80846e4 Mon Sep 17 00:00:00 2001
From: Karol Dzialowski <karlososhd@gmail.com>
Date: Wed, 31 Jul 2024 21:48:14 +0200
Subject: [PATCH 1/3] wip blog components

---
 src/components/main/navigation.tsx   | 10 ++++-
 src/components/main/recent-posts.tsx | 66 ++++++++++++++++++++++++++++
 src/pages/blog/index.tsx             | 34 ++++++++++++++
 src/pages/index.tsx                  | 55 ++++++++++++-----------
 4 files changed, 135 insertions(+), 30 deletions(-)
 create mode 100644 src/components/main/recent-posts.tsx
 create mode 100644 src/pages/blog/index.tsx

diff --git a/src/components/main/navigation.tsx b/src/components/main/navigation.tsx
index 701f56f..77ee921 100644
--- a/src/components/main/navigation.tsx
+++ b/src/components/main/navigation.tsx
@@ -1,4 +1,4 @@
-import { Github, Globe, Lightbulb, User } from "lucide-react";
+import { Book, Github, Globe, Lightbulb, Notebook, User } from "lucide-react";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 
@@ -26,6 +26,12 @@ export const Navigation = () => {
           <span>getbibtex.com</span>
         </>
       </Pill>
+      <Pill link="https://www.dzialowski.eu/">
+        <>
+          <Book className="h-3" />
+          <span>blog</span>
+        </>
+      </Pill>
       <Pill link="https://github.com/karlosos/getbibtex">
         <>
           <Github className="h-3" />
@@ -57,7 +63,7 @@ const Pill = ({
 }) => (
   <button
     type="button"
-    className="group mt-4 whitespace-nowrap rounded-lg border border-primary/20 bg-white/50 px-2 py-1.5 text-sm font-medium text-slate-700 shadow-lg shadow-blue-500/5 transition-all hover:shadow-blue-500/10"
+    className="group whitespace-nowrap rounded-lg border border-primary/20 bg-white/50 px-2 py-1.5 text-sm font-medium text-slate-700 shadow-lg shadow-blue-500/5 transition-all hover:shadow-blue-500/10"
   >
     <a target="_blank" href={link}>
       <div className="inline-flex items-center">{children}</div>
diff --git a/src/components/main/recent-posts.tsx b/src/components/main/recent-posts.tsx
new file mode 100644
index 0000000..2fdb92d
--- /dev/null
+++ b/src/components/main/recent-posts.tsx
@@ -0,0 +1,66 @@
+import { Button } from "@/ui/button";
+import Link from "next/link";
+
+export const RecentPosts = () => {
+  return (
+    <div className="">
+      <div className="flex items-end justify-between">
+        <Title />
+        <Link href={"/blog"}>
+          <Button className="h-8 rounded-lg bg-white px-3 text-sm font-medium text-[#36364a] shadow-[0_2px_6px_rgba(18,43,105,.04),_0_1px_2px_rgba(18,43,105,.08),_0_0_0_1px_rgba(18,43,105,.08);] transition-shadow hover:bg-white hover:shadow-[0_2px_6px_rgba(18,43,105,.12),_0_1px_2px_rgba(18,43,105,.12),_0_0_0_1px_rgba(18,43,105,.08);]">
+            Browse all
+          </Button>
+        </Link>
+      </div>
+      <div className="mt-8 flex min-h-[450px] justify-between">
+        <PostPreview
+          title="Introducing the Webflow Boosters App"
+          description="Advanced code solution added directly inside of Webflow at the click of a button"
+        />
+        <PostPreview
+          title="Top 20 UI Inspiration Sites (2023)"
+          description="We've collated the top 20 UI inspiration sites, all with links in one handy spot! Find your inspiration for your next project."
+        />
+        <PostPreview
+          title="How to add a countdown timer to Framer"
+          description="Learn how to add a beautiful countdown to your Framer project. Add it to your project in seconds."
+        />
+      </div>
+    </div>
+  );
+};
+
+const Title = () => {
+  return (
+    <div>
+      <h2 className="text-2xl font-medium text-slate-800">
+        getbibtex.com blog
+      </h2>
+      <div className="text-base  text-slate-600">
+        Discover articles and tutorials to help you with LaTeX
+      </div>
+    </div>
+  );
+};
+
+type PostPreviewProps = {
+  title: string;
+  description: string;
+};
+
+const PostPreview = (props: PostPreviewProps) => {
+  return (
+    <div className="group flex flex-col">
+      <div className="h-[250px] w-[280px] overflow-hidden rounded-lg bg-black transition-all duration-300 group-hover:h-[240px] ">
+        <img
+          src="https://cdn.prod.website-files.com/5beab1239ac8840644a660b4/65b851484b52a37a2720e29f_Cover%20Image-p-800.png"
+          className="h-[250px] transition-all duration-300 group-hover:scale-105"
+        />
+      </div>
+      <div className="max-w-[280px] px-1 py-2">
+        <h3 className="text-xl font-medium text-slate-800">{props.title}</h3>
+        <div className="text-sm  text-slate-400">{props.description}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
new file mode 100644
index 0000000..0eaa27b
--- /dev/null
+++ b/src/pages/blog/index.tsx
@@ -0,0 +1,34 @@
+import { Navigation } from "@/components/main/navigation";
+import { Layout } from "@/ui/layout";
+import React, { useState } from "react";
+
+export default function Blog() {
+  return (
+    <Layout>
+      <main className="flex flex-col items-center">
+        <div className="mt-2 flex w-full max-w-7xl flex-col items-center rounded-b-none rounded-xl bg-gradient-to-b from-[#f2f1ff] to-[#e7ebff] p-2 px-8 py-4 text-[#11124d] lg:mt-8">
+          <Navigation />
+          <div className="mt-12">
+            <div className="rounded-full border border-[#e3e3fe] bg-[#efeaff] px-4 py-1 text-sm font-medium">
+              Blog & Resources
+            </div>
+          </div>
+        <h1 className="text-[64px] text-medium max-w-3xl text-center">Discover articles and tutorials to help you build better.</h1>
+        </div>
+        <div className="flex w-full max-w-7xl flex-col items-center rounded-t-none rounded-xl bg-gradient-to-b from-[#e7ebff] to-white p-2 px-8 py-4 text-[#11124d] h-96"></div>
+        <BlogIncomeText />
+      </main>
+    </Layout>
+  );
+}
+
+const HeaderText = () => <h1 className="text-xl font-medium">getbibtex.com</h1>;
+
+const BlogIncomeText = () => (
+  <>
+    <div>
+      Latest Guides <br />& News Articles
+    </div>
+    <div>Stay informed with the latest guides and news</div>
+  </>
+);
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4972d2f..1448b3f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,9 +2,7 @@ import { api } from "@/utils/api";
 import { Layout } from "@/ui/layout";
 import { Input } from "@/ui/input";
 import { Button } from "@/ui/button";
-import {
-  ArrowRightCircle,
-} from "lucide-react";
+import { ArrowRightCircle } from "lucide-react";
 import React, { useState } from "react";
 import { Textarea } from "@/ui/textarea";
 import type { EntryData } from "@/server/citations/types";
@@ -13,6 +11,7 @@ import { useUserId } from "@/utils/use-user-id";
 import { ErrorForm } from "@/components/main/error";
 import { CopyToClipboardButton } from "@/components/main/copy-to-clipboard-button";
 import { Navigation } from "@/components/main/navigation";
+import { RecentPosts } from "@/components/main/recent-posts";
 
 export default function Home() {
   const userId = useUserId();
@@ -52,7 +51,7 @@ export default function Home() {
   return (
     <Layout>
       <main className="flex flex-col items-center">
-        <div className="mt-2 flex h-80 w-full max-w-4xl flex-col items-center rounded-xl bg-gradient-to-b from-[#d5edd7] to-[#f8eec4] p-2 text-[#11124d] shadow-sm lg:mt-8">
+        <div className="mt-2 flex h-80 w-full max-w-4xl flex-col items-center rounded-xl bg-gradient-to-b from-[#d5edd7] to-[#f8eec4] p-2 text-[#11124d] shadow-sm lg:mt-8 pt-4">
           <Navigation />
           <HeaderText />
         </div>
@@ -77,38 +76,38 @@ export default function Home() {
         </div>
         {bibtexEntry && bibtexEntryData && (
           <div className="z-10 mt-10 w-full max-w-2xl rounded-md border border-primary/20 bg-slate-50/50 p-4 shadow-sm">
-            <>
-              <Textarea
-                className="h-48 bg-white"
-                value={bibtexEntry}
-                onChange={(e) => setBibtexEntry(e.target.value)}
-              />
-              <div className="mt-2 flex justify-end space-x-2">
-                <CopyToClipboardButton value={bibtexEntry} />
-              </div>
-              <div className="mt-4">
-                <span>
-                  {bibtexEntryData.author && bibtexEntryData.author + ". "}
-                </span>
-                <span className="italic">
-                  {bibtexEntryData.title +
-                    " --- " +
-                    bibtexEntryData.website +
-                    ". "}{" "}
-                </span>
-                <a href={bibtexEntryData.url}>{bibtexEntryData.url}</a>,
-                <span> [Accessed {getCurrentDateString()}]</span>
-              </div>
-            </>
+            <Textarea
+              className="h-48 bg-white"
+              value={bibtexEntry}
+              onChange={(e) => setBibtexEntry(e.target.value)}
+            />
+            <div className="mt-2 flex justify-end space-x-2">
+              <CopyToClipboardButton value={bibtexEntry} />
+            </div>
+            <div className="mt-4">
+              <span>
+                {bibtexEntryData.author && bibtexEntryData.author + ". "}
+              </span>
+              <span className="italic">
+                {bibtexEntryData.title +
+                  " --- " +
+                  bibtexEntryData.website +
+                  ". "}{" "}
+              </span>
+              <a href={bibtexEntryData.url}>{bibtexEntryData.url}</a>,
+              <span> [Accessed {getCurrentDateString()}]</span>
+            </div>
           </div>
         )}
         {isError && <ErrorForm url={url} />}
+        <div className="my-20 w-full max-w-4xl">
+          <RecentPosts />
+        </div>
       </main>
     </Layout>
   );
 }
 
-
 const HeaderText = () => (
   <>
     <h1 className="mt-3 text-4xl font-extrabold">Generate BibTeX from URL</h1>

From 9dbf459f04c202be9d6666e34cf456af08104684 Mon Sep 17 00:00:00 2001
From: Karol Dzialowski <karlososhd@gmail.com>
Date: Tue, 6 Aug 2024 20:37:20 +0200
Subject: [PATCH 2/3] wip: featured blog post

---
 src/components/main/recent-posts.tsx |  2 +-
 src/pages/blog/index.tsx             | 59 ++++++++++++++++++++++++----
 src/styles/globals.css               | 14 ++++++-
 src/ui/button.tsx                    |  4 ++
 4 files changed, 69 insertions(+), 10 deletions(-)

diff --git a/src/components/main/recent-posts.tsx b/src/components/main/recent-posts.tsx
index 2fdb92d..24f7c46 100644
--- a/src/components/main/recent-posts.tsx
+++ b/src/components/main/recent-posts.tsx
@@ -7,7 +7,7 @@ export const RecentPosts = () => {
       <div className="flex items-end justify-between">
         <Title />
         <Link href={"/blog"}>
-          <Button className="h-8 rounded-lg bg-white px-3 text-sm font-medium text-[#36364a] shadow-[0_2px_6px_rgba(18,43,105,.04),_0_1px_2px_rgba(18,43,105,.08),_0_0_0_1px_rgba(18,43,105,.08);] transition-shadow hover:bg-white hover:shadow-[0_2px_6px_rgba(18,43,105,.12),_0_1px_2px_rgba(18,43,105,.12),_0_0_0_1px_rgba(18,43,105,.08);]">
+          <Button variant={"minor"} size={"minor"}>
             Browse all
           </Button>
         </Link>
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 0eaa27b..0489083 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -1,30 +1,37 @@
 import { Navigation } from "@/components/main/navigation";
+import { Button } from "@/ui/button";
 import { Layout } from "@/ui/layout";
-import React, { useState } from "react";
+import Link from "next/link";
+import React from "react";
 
 export default function Blog() {
   return (
     <Layout>
       <main className="flex flex-col items-center">
-        <div className="mt-2 flex w-full max-w-7xl flex-col items-center rounded-b-none rounded-xl bg-gradient-to-b from-[#f2f1ff] to-[#e7ebff] p-2 px-8 py-4 text-[#11124d] lg:mt-8">
+        {/* TODO: looks weird without margins on small monitor (and with big margin-top) */}
+        <div className="mt-2 flex w-full max-w-7xl flex-col items-center rounded-xl rounded-b-none bg-gradient-to-b from-[#f2f1ff] to-[#e7ebff] p-2 px-8 py-4 text-[#11124d] lg:mt-8">
           <Navigation />
           <div className="mt-12">
             <div className="rounded-full border border-[#e3e3fe] bg-[#efeaff] px-4 py-1 text-sm font-medium">
               Blog & Resources
             </div>
           </div>
-        <h1 className="text-[64px] text-medium max-w-3xl text-center">Discover articles and tutorials to help you build better.</h1>
+          <h1 className="text-medium max-w-3xl text-center text-[64px] leading-none mt-4">
+            Discover articles and tutorials to enhance your LaTeX skills.
+          </h1>
         </div>
-        <div className="flex w-full max-w-7xl flex-col items-center rounded-t-none rounded-xl bg-gradient-to-b from-[#e7ebff] to-white p-2 px-8 py-4 text-[#11124d] h-96"></div>
-        <BlogIncomeText />
+        <div className="flex h-96 w-full max-w-7xl flex-col items-center rounded-xl rounded-t-none bg-gradient-to-b from-[#e7ebff] to-white p-2 px-8 py-4 text-[#11124d]">
+          <div className="mt-3">
+          <FeaturedPost />
+          </div>
+        </div>
+        <BlogHeader />
       </main>
     </Layout>
   );
 }
 
-const HeaderText = () => <h1 className="text-xl font-medium">getbibtex.com</h1>;
-
-const BlogIncomeText = () => (
+const BlogHeader = () => (
   <>
     <div>
       Latest Guides <br />& News Articles
@@ -32,3 +39,39 @@ const BlogIncomeText = () => (
     <div>Stay informed with the latest guides and news</div>
   </>
 );
+
+const FeaturedPost = () => (
+  <div className="big-shadow flex rounded-xl border bg-white p-4">
+    <div className="h-[250px] w-[280px] overflow-hidden rounded-lg bg-black ">
+      <img
+        src="https://cdn.prod.website-files.com/5beab1239ac8840644a660b4/65b851484b52a37a2720e29f_Cover%20Image-p-800.png"
+        className="h-[250px]"
+      />
+    </div>
+    <div className="mt-8 flex max-w-[400px] flex-col px-8">
+      <div className="flex gap-1">
+        <div className="rounded-full bg-[#f4e2ff] px-2 text-sm font-medium text-[#301d3b]">
+          Resources
+        </div>
+        <div className="text-sm text-neutral-600">
+        •
+        </div>
+        <div className="text-sm text-neutral-600">January 29, 2024</div>
+      </div>
+      <h2 className="mt-2 text-2xl font-medium">
+        Introducing the Webflow Boosters App
+      </h2>
+      <p className="mt-2 text-neutral-500">
+        Advanced code solution added directly inside of Webflow at the click of
+        a button
+      </p>
+      <div className="mt-2">
+        <Link href={"/blog"}>
+          <Button variant={"minor"} size={"minor"}>
+            Read Article
+          </Button>
+        </Link>
+      </div>
+    </div>
+  </div>
+);
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 58aa4ec..b6415fb 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -76,7 +76,9 @@
   }
   body {
     @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
 }
 
@@ -95,3 +97,13 @@
   -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHN0cm9rZT0nIzAwMCcgdmlld0JveD0nMCAwIDI0IDI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxzdHlsZT4uc3Bpbm5lcl9WOG0xe3RyYW5zZm9ybS1vcmlnaW46Y2VudGVyO2FuaW1hdGlvbjpzcGlubmVyX3pLb2EgMnMgbGluZWFyIGluZmluaXRlfS5zcGlubmVyX1Y4bTEgY2lyY2xle3N0cm9rZS1saW5lY2FwOnJvdW5kO2FuaW1hdGlvbjpzcGlubmVyX1lwWlMgMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZX1Aa2V5ZnJhbWVzIHNwaW5uZXJfektvYXsxMDAle3RyYW5zZm9ybTpyb3RhdGUoMzYwZGVnKX19QGtleWZyYW1lcyBzcGlubmVyX1lwWlN7MCV7c3Ryb2tlLWRhc2hhcnJheTowIDE1MDtzdHJva2UtZGFzaG9mZnNldDowfTQ3LjUle3N0cm9rZS1kYXNoYXJyYXk6NDIgMTUwO3N0cm9rZS1kYXNob2Zmc2V0Oi0xNn05NSUsMTAwJXtzdHJva2UtZGFzaGFycmF5OjQyIDE1MDtzdHJva2UtZGFzaG9mZnNldDotNTl9fTwvc3R5bGU+PGcgY2xhc3M9J3NwaW5uZXJfVjhtMSc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOS41JyBmaWxsPSdub25lJyBzdHJva2Utd2lkdGg9JzMnPjwvY2lyY2xlPjwvZz48L3N2Zz4=);
   mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHN0cm9rZT0nIzAwMCcgdmlld0JveD0nMCAwIDI0IDI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxzdHlsZT4uc3Bpbm5lcl9WOG0xe3RyYW5zZm9ybS1vcmlnaW46Y2VudGVyO2FuaW1hdGlvbjpzcGlubmVyX3pLb2EgMnMgbGluZWFyIGluZmluaXRlfS5zcGlubmVyX1Y4bTEgY2lyY2xle3N0cm9rZS1saW5lY2FwOnJvdW5kO2FuaW1hdGlvbjpzcGlubmVyX1lwWlMgMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZX1Aa2V5ZnJhbWVzIHNwaW5uZXJfektvYXsxMDAle3RyYW5zZm9ybTpyb3RhdGUoMzYwZGVnKX19QGtleWZyYW1lcyBzcGlubmVyX1lwWlN7MCV7c3Ryb2tlLWRhc2hhcnJheTowIDE1MDtzdHJva2UtZGFzaG9mZnNldDowfTQ3LjUle3N0cm9rZS1kYXNoYXJyYXk6NDIgMTUwO3N0cm9rZS1kYXNob2Zmc2V0Oi0xNn05NSUsMTAwJXtzdHJva2UtZGFzaGFycmF5OjQyIDE1MDtzdHJva2UtZGFzaG9mZnNldDotNTl9fTwvc3R5bGU+PGcgY2xhc3M9J3NwaW5uZXJfVjhtMSc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOS41JyBmaWxsPSdub25lJyBzdHJva2Utd2lkdGg9JzMnPjwvY2lyY2xlPjwvZz48L3N2Zz4=);
 }
+
+/* Custom shadows */
+.big-shadow {
+  box-shadow:
+    0 8px 24px rgba(20, 7, 140, 0.04),
+    0 1px 2px rgba(15, 9, 70, 0.08),
+    0 0 0 1px rgba(15, 9, 70, 0.04),
+    inset 0 0 3px rgba(20, 40, 100, 0.04),
+    inset 0 -4px 1px rgba(20, 40, 100, 0.06);
+}
diff --git a/src/ui/button.tsx b/src/ui/button.tsx
index 445f58f..6631f16 100644
--- a/src/ui/button.tsx
+++ b/src/ui/button.tsx
@@ -17,15 +17,19 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        minor: "font-medium text-[#36364a] shadow-[0_2px_6px_rgba(18,43,105,.04),_0_1px_2px_rgba(18,43,105,.08),_0_0_0_1px_rgba(18,43,105,.08);] transition-shadow hover:bg-white hover:shadow-[0_2px_6px_rgba(18,43,105,.12),_0_1px_2px_rgba(18,43,105,.12),_0_0_0_1px_rgba(18,43,105,.08);]"
       },
       size: {
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
+        minor: "h-8 rouded-lg px-3 text-sm"
       },
     },
     defaultVariants: {
+      // TODO: make that so we can define whole buttons with variants. so the variant can have size. or change 
+      // the order of classes?
       variant: "default",
       size: "default",
     },

From 819352b2e2170b9b67f8b100f973fd6a1aa3e4d3 Mon Sep 17 00:00:00 2001
From: Karol Dzialowski <karlososhd@gmail.com>
Date: Tue, 6 Aug 2024 21:51:58 +0200
Subject: [PATCH 3/3] blog section intro header

---
 src/pages/blog/index.tsx | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 0489083..b2d6b27 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -16,30 +16,21 @@ export default function Blog() {
               Blog & Resources
             </div>
           </div>
-          <h1 className="text-medium max-w-3xl text-center text-[64px] leading-none mt-4">
+          <h1 className="text-medium mt-4 max-w-3xl text-center text-[64px] leading-none">
             Discover articles and tutorials to enhance your LaTeX skills.
           </h1>
         </div>
         <div className="flex h-96 w-full max-w-7xl flex-col items-center rounded-xl rounded-t-none bg-gradient-to-b from-[#e7ebff] to-white p-2 px-8 py-4 text-[#11124d]">
           <div className="mt-3">
-          <FeaturedPost />
+            <FeaturedPost />
           </div>
         </div>
-        <BlogHeader />
+        <BlogSectionIntro />
       </main>
     </Layout>
   );
 }
 
-const BlogHeader = () => (
-  <>
-    <div>
-      Latest Guides <br />& News Articles
-    </div>
-    <div>Stay informed with the latest guides and news</div>
-  </>
-);
-
 const FeaturedPost = () => (
   <div className="big-shadow flex rounded-xl border bg-white p-4">
     <div className="h-[250px] w-[280px] overflow-hidden rounded-lg bg-black ">
@@ -53,9 +44,7 @@ const FeaturedPost = () => (
         <div className="rounded-full bg-[#f4e2ff] px-2 text-sm font-medium text-[#301d3b]">
           Resources
         </div>
-        <div className="text-sm text-neutral-600">
-        •
-        </div>
+        <div className="text-sm text-neutral-600">•</div>
         <div className="text-sm text-neutral-600">January 29, 2024</div>
       </div>
       <h2 className="mt-2 text-2xl font-medium">
@@ -75,3 +64,13 @@ const FeaturedPost = () => (
     </div>
   </div>
 );
+
+const BlogSectionIntro = () => {
+  return (
+    <div className="text-center mt-10 mb-10">
+      <div className="bg-[#f9f9ff] border inline-block rounded-full text-[#11023b] text-sm font-medium border-[#e3e3fe] px-3 py-1">Browse all our articles</div>
+      <h2 className="text-medium mt-4 max-w-lg text-center text-[56px] leading-none text-[#230d5b]">Latest Guides & News Articles</h2>
+      <div className="text-[#262556] mt-4">Stay informed with the latest guides and news.</div>
+    </div>
+  );
+};