trialling the layout of the blogheaderder.

need to fix alignment of text

web/src/components/BlogHeader.astro

@@ -0,0 +1,63 @@
+---
+interface Props {
+  imageUrl: string;
+  title: string;
+  datePublished: string;
+  authorName: string;
+  content: string;
+}
+
+const { imageUrl, title, datePublished, authorName, content } = Astro.props;
+---
+
+<div class="blog-header">
+  <img src={imageUrl} alt={title} class="blog-header__image" />
+  <div class="blog-header__text">
+    <h1 class="blog-header__title">{title}</h1>
+    <div class="blog-header__meta">
+      <span class="blog-header__author">{authorName}</span> | <span class="blog-header__date">{datePublished}</span>
+    </div>
+    <p class="blog-header__content">{content}</p>
+  </div>
+</div>
+
+<style>
+.blog-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  text-align: center;
+}
+
+.blog-header__image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 10px;
+}
+
+.blog-header__text {
+  max-width: 800px;
+}
+
+.blog-header__title {
+  font-size: 2.5rem;
+  margin: 1rem 0;
+}
+
+.blog-header__meta {
+  font-size: 1rem;
+  color: #6c757d;
+}
+
+.blog-header__author, .blog-header__date {
+  font-weight: bold;
+  color: #087DF1;
+}
+
+.blog-header__content {
+  font-size: 1.25rem;
+  color: #343a40;
+  margin-top: 1rem;
+}
+</style>

web/src/pages/blogs/[blog].astro

@@ -1,11 +1,18 @@
 ---
-// src/pages/blogs/[blog].astro
-
+import BlogHeader from "@/components/BlogHeader.astro";
 import SwiperCarouselWrapper from "@/components/SwiperCarouselWrapper.astro";
 import Layout from "@/layouts/layout.astro";
 
 const { blog } = Astro.params;
 
+const blogData = {
+  imageUrl: '/path/to/image.jpg', // Update this to the path of your image
+  title: 'Blog Title',
+  datePublished: 'Date Published',
+  authorName: 'Author Name',
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+};
+
 const articles = [
   {
     title: 'Article 1',
@@ -32,7 +39,13 @@ const articles = [
 ---
 
 <Layout>
-  <p>{ blog }</p>
+  <BlogHeader
+    imageUrl={blogData.imageUrl}
+    title={blogData.title}
+    datePublished={blogData.datePublished}
+    authorName={blogData.authorName}
+    content={blogData.content}
+  />
   <h2>More Blogs</h2>
   <SwiperCarouselWrapper articles={articles} />
 </Layout>