hg

app/blog/data/posts.json

@@ -7,7 +7,24 @@
     "date": "2024-08-28",
     "author": "admin",
     "duration": "2 min read",
-    "content": "This is the content of the third post."
+    "content": {
+      "data-ctn": [
+        {"id": "subh1", "heading3": "A Stormy Sea"},
+        {"id": "p1", "paraChildPara": "Life is a tempestuous sea, filled with calm waters and raging storms. As we navigate its currents, we often find ourselves at the mercy of unexpected tides, swept away from familiar shores. It was in the midst of one such storm, at the tender age of 22, that I found myself adrift, my world turned upside down."},
+        {"id": "subh2", "heading3": "Stoicism as a Compass"},
+        {"id": "p2", "paraChildPara": "The tempest that struck me was a personal one, a downfall that shook the very foundation of my existence. The loss of direction, the shattered dreams, and the gnawing uncertainty left me feeling lost and alone. It was a dark time, filled with self-doubt and despair. But as the storm raged on, I realized that I had a choice. I could let the tempest consume me, or I could choose to weather it, to emerge stronger and more resilient. It was at that moment that I decided to set sail, to embark on a journey of self-discovery and renewal."},
+        {"id": "subh3", "heading3": "Embracing Uncertainty"},
+        {"id": "p3", "paraChildPara": "Another key Stoic principle is the acceptance of uncertainty. Life is unpredictable, and things don't always go according to plan. By embracing this uncertainty, we can free ourselves from the grip of fear and anxiety. It is in the unknown that we often find the greatest opportunities for growth and fulfilment."},
+        {"id": "p4", "paraChildPara": "When I was at my lowest point, I clung to the hope that things would get better. But as time went on, I realized that I couldn't rely on hope alone. I had to take action, to create my own opportunities. I started by setting small, achievable goals. I focused on one day at a time, and gradually, I began to rebuild my life."},
+        {"id": "subh4", "heading3": "A New Beginning"},
+        {"id": "p5", "paraChildPara": "As I continued my journey, I discovered that the storm had actually been a blessing in disguise. It had forced me to confront my fears and weaknesses, and it had given me the opportunity to rebuild myself from the ground up."},
+        {"id": "p6", "paraChildPara": "Today, I am a stronger, more resilient person than I was before. I have learned to embrace uncertainty, to cultivate a positive mindset, and to find meaning in the challenges of life. I have also discovered the power of human connection. The support of friends and family has been invaluable in helping me through this difficult time."},
+        {"id": "subh5", "heading3": "A Message of Hope"},
+        {"id": "p7", "paraChildPara": "If you are going through a difficult time, I want you to know that you are not alone. There is hope, and there is a way forward. Remember, it is in the darkest moments that we often find the brightest light. Embrace uncertainty, cultivate a positive mindset, and never give up on your dreams. With perseverance and resilience, you can overcome any challenge."},
+        {"id": "subh6", "heading3": "A Final Thought"},
+        {"id": "p8", "paraChildPara": "Life is a journey, not a destination. There will be ups and downs, twists and turns. But it is through these experiences that we grow and become who we are meant to be. So, set sail, embrace the unknown, and let the winds of life carry you to new and exciting shores."} 
+      ] 
+    }
 
   },
   {

app/blog/first-post/page.tsx

@@ -8,7 +8,7 @@ const post = posts.find(p => p.slug === 'first-post');
 export default function FirstPostPage() {
   return (
 
-    <main className="prose min-h-screen max-w-6xl  bg-primary m-auto text-four mx-auto p-2">
+    <main className="prose min-h-screen max-w-5xl bg-primary m-auto text-four mx-auto p-2">
       <section className='mb-44'>
         <p className='p-[4px] font-semibold flex justify-center rounded-full items-center my-10 max-w-fit m-auto text-four border-2 border-four bg-primary px-2 uppercase text-sm'>think it</p>
         <article className="prose max-w-none min-h-screen p-4">
@@ -32,24 +32,33 @@ export default function FirstPostPage() {
             </span>
           </div>
           <p className='first-letter:text-2xl first-letter:font-bold first-letter:ml-1 '>
-            This is an introductory paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            <img
-              src={post?.imageUrl}
-              alt={post?.title}
-              className="float-left mr-4 mb-2 w-1/3 h-auto object-cover rounded-lg"
-            />
-            Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada.
-            Phasellus porttitor at massa in vestibulum. Suspendisse potenti. Integer in sapien
-            a velit aliquam viverra. Fusce elementum turpis sed urna tincidunt, nec luctus nisi
-            consectetur.
+            {post?.description}
 
           </p>
+          {post && (
+            <div>
+
+              <img
+                src={post?.imageUrl}
+                alt={post?.title}
+                className="float-left mr-4 mb-2 w-1/3 h-auto object-cover rounded-lg"
+              />
+              <div>
+                {/* Check if post.content is an object and has the "data-ctn" property */}
+                {typeof post.content === 'object' && 'data-ctn' in post.content && post.content["data-ctn"].map((contentItem) => (
+                  <div key={contentItem.id}>
+                    {contentItem.heading3 && (
+                      <h3 className='text-xl text-five pt-2'>{contentItem.heading3}</h3>
+                    )}
+                    {contentItem.paraChildPara && (
+                      <p className='pb-4'>{contentItem.paraChildPara}</p>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
 
-          <p>
-            Continuation of the paragraph. Duis vel libero at quam laoreet blandit.
-            Nullam luctus nisl ut magna scelerisque, a convallis erat scelerisque.
-            Sed fringilla nulla id enim faucibus, vel ullamcorper magna pulvinar.
-          </p>
           {/* Additional post content */}
         </article>
 

app/blog/second-post/page.tsx

@@ -6,9 +6,9 @@ const post = posts.find(p => p.slug === 'second-post');
 
 export default function SecondPostPage() {
   return (
-    <main className="prose min-h-screen max-w-6xl  bg-primary m-auto text-four mx-auto p-2">
+    <main className="prose min-h-screen max-w-6xl  m-auto text-four mx-auto p-2">
      <section className='mb-44'>
-      <p className='p-[4px] font-semibold flex justify-center rounded-full items-center my-10 max-w-fit m-auto text-four border-2 border-four bg-primary px-2 uppercase text-sm'>think it</p>
+      <p className='p-[4px] font-semibold flex justify-center rounded-full items-center my-10 max-w-fit m-auto text-four border-2 border-four  px-2 uppercase text-sm'>think it</p>
         <article className="prose max-w-none min-h-screen p-4">
           <h1 className="text-3xl text-five md:text-center md:text-4xl font-bold mb-4">{post?.title}</h1>
           <div className='flex gap-2 md:gap-4  md:pb-2 tracking-wide text-xs md:text-sm font-semibold uppercase py-4 justify-center'>