Fixed the footer and sell process

package.json

@@ -9,6 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@types/node": "20.1.1",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",

src/app/blog/page.tsx

@@ -1,11 +1,46 @@
-export const metadata = {
-  title: "Blog"
-}
+"use client"
+
+
+
+const Blog = () => {
+
+  const myBlog = [
+    {
+      date: "May 11th, 2023",
+      title: "Prompt Bundles",
+      image: "../blog_Images/prompt_bundles.jpeg"
+    },
+    {
+      date: "April 12th, 2023",
+      title: "Watermark Editor",
+      image: "../blog_Images/watermark_editor.jpeg"
+    },
+    {
+      date: "March 16th, 2023",
+      title: "Midjourney VS Prompts & Promptbroker",
+      image: "../blog_Images/Midjourney.jpeg"
+    },
+    {
+      date: "March 15, 2023",
+      title: "GPT-4 Prompts & Promptbroker",
+      image: "../blog_Images/GPT-4.jpeg"
+    },
+  ]
 
-export default function Blog() {
   return (
-    <div className="">
-      blog
+    <div className="blog w-[750px] ml-[315px]">
+      <h1 className="my-12 text-5xl font-bold">Blog </h1>
+      <div className="blogcards inline-grid grid-rows-2 grid-cols-2 gap-4">
+        {myBlog.map((blog, index) => (
+          <div className="blog-card" key={index}>
+              <span className="blog-card-date">{blog.date}</span>
+              <img src={blog.image} alt={blog.title} width={300} height={120} className="rounded-t-md"/>
+              <p className="blog-card-title">{blog.title}</p>
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
+
+export default Blog;