feat: Add metadata to blog posts

src/app/_components/header.tsx

@@ -5,6 +5,7 @@ export const navLinks = [
   { href: "/about", text: "About" },
   { href: "#contact", text: "Contact Us" },
   { href: "/work", text: "Work" },
+  { href: "/blogs", text: "Blogs" },
 ];
 
 const Header = () => {

src/app/blogs/[slug]/_components/credits.tsx

@@ -0,0 +1,35 @@
+import Image from "next/image";
+import React from "react";
+
+const Credits = ({ credits }: { credits: any }) => {
+  return (
+    <div className="grid grid-cols-6 lg:grid-cols-12 space-y-5">
+      <div className="col-span-4 space-y-3 lg:w-1/2">
+        <h1>Credits</h1>
+        <div className="flex  lg:flex-col gap-x-2">
+          <Image
+            src="/avtar.png"
+            alt="avator"
+            width={100}
+            height={100}
+            className="w-14 h-14"
+          />
+          <div>
+            <h1 className="font-normal">{credits.name}</h1>
+            <p className="text-textSecondary">{credits.rol}</p>
+          </div>
+        </div>
+      </div>
+      <p className="col-span-2 lg:col-span-4 lg:order-3 text-textSuccess">
+        January 3. 2025
+      </p>
+
+      <div className="col-span-full lg:col-span-4 lg:w-1/2">
+        <h1>TLDR</h1>
+        <p>{credits.TLDR}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Credits;

src/app/blogs/[slug]/_components/strategies.tsx

@@ -0,0 +1,67 @@
+import Image from "next/image";
+import React from "react";
+
+const Strategies = ({ keyStrategies }: { keyStrategies: any }) => {
+  return (
+    <div className="space-y-4 lg:space-y-0 lg:gap-6 lg:grid lg:grid-cols-8">
+      <div className="grid grid-cols-2 lg:grid-cols-1 lg:flex-col gap-5 lg:col-span-2 lg:order-2">
+        <div className="bg-charcoal space-y-3 p-3">
+          <h1 className="text-[22px]">Tech Stack</h1>
+          <div className="flex flex-wrap gap-3">
+            <Image src="/stack.png" alt="tech-stack" width={54} height={54} />
+            <Image src="/stack-1.png" alt="tech-stack" width={54} height={54} />
+            <Image src="/stack-2.png" alt="tech-stack" width={54} height={54} />
+            <Image src="/stack-3.png" alt="tech-stack" width={54} height={54} />
+          </div>
+        </div>
+        <div className="bg-charcoal  space-y-3 p-3">
+          <h1 className="text-[22px]">Services</h1>
+          <div>
+            <Image
+              src="/mobile-icon.png"
+              alt="service"
+              width={24}
+              height={24}
+            />
+            <p>Mobile App Development</p>
+          </div>
+          <div>
+            <Image src="/web-icon.png" alt="service" width={24} height={24} />
+            <p>web App Development</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-charcoal lg:col-span-4 relative lg:order-3  overflow-hidden p-6">
+        <Image
+          src="/service-picture.png"
+          alt="service"
+          width={400}
+          height={400}
+          objectFit="cover"
+          layout="responsive"
+          className="relative left-12  w-full"
+        />
+        <Image
+          src="/service-picture.png"
+          alt="service"
+          objectFit="cover"
+          layout="responsive"
+          width={400}
+          height={400}
+          className="absolute top-14 sm:top-24 w-full"
+        />
+      </div>
+      <div className="bg-charcoal lg:col-span-2 p-4">
+        <h1 className="text-[22px]">Key Strategies</h1>
+        <ul className="space-y-3">
+          {keyStrategies?.map((e: any, i: number) => (
+            <li key={i}>- {e}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Strategies;

src/app/blogs/[slug]/page.tsx

@@ -0,0 +1,94 @@
+import Image from "next/image";
+import React from "react";
+import Strategies from "./_components/strategies";
+import Credits from "./_components/credits";
+import { Metadata } from "next";
+import { blogs } from "../page";
+
+interface props {
+  params: {
+    slug: string;
+  };
+}
+
+export const generateMetadata = ({ params }: props): Metadata => {
+  const formatSlug = (slug: string) => {
+    return slug
+      .toLowerCase()
+      .replace(/\s+/g, "-")
+      .replace(/[^\w-]+/g, "");
+  };
+  const blog = blogs.find((e) => formatSlug(e.slug) === params.slug);
+  const blogzDetails = blog ? blog : null;
+
+  return {
+    title: `${blogzDetails?.title}`,
+    description: `We Build Elegant Websites.`,
+    openGraph: {
+      title: `blog ${blogzDetails?.title}`,
+      description: `blog ${blogzDetails?.textBlock}`,
+      url: "https://zero8.dev",
+      siteName: `Blog ${blogzDetails?.title}`,
+      images: [
+        {
+          url: "/image.png",
+          width: 1200,
+          height: 630,
+          alt: `blog ${blogzDetails?.title}`,
+        },
+      ],
+      type: "article",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: "Zero8.Dev",
+      description: "We Build Elegant Websites.",
+      images: ["/home.png"],
+    },
+  };
+};
+
+const Page = ({ params }: props) => {
+  const slug = params.slug;
+
+  const formatSlug = (slug: string) => {
+    return slug
+      .toLowerCase()
+      .replace(/\s+/g, "-")
+      .replace(/[^\w-]+/g, "");
+  };
+  const blogzDetails = blogs.find((e) => formatSlug(e.slug) === slug);
+
+  if (!blogzDetails) {
+    return <div className="text-red-500">Blog not found!</div>;
+  }
+
+  return (
+    <div className="col-span-full h-auto space-y-5">
+      <p className="text-textSecondary text-2xl font-bold">Blogs</p>
+      {/* heading */}
+      <h1 className="text-[34px] text-primary letter">{blogzDetails?.title}</h1>
+      <Credits credits={blogzDetails?.credits} />
+      <div className="col-span-full bg-charcoal p-4">
+        <h1 className="text-[22px]">The Challenge</h1>
+        <p>{blogzDetails?.challenges}</p>
+      </div>
+      <Strategies keyStrategies={blogzDetails?.strategies} />
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Image
+          alt="/image"
+          src="/image.png"
+          className="w-full"
+          width={400}
+          height={400}
+        />
+        <div className=" bg-charcoal p-4">
+          <h1 className="text-[22px]">Another text block</h1>
+          <p>{blogzDetails?.textBlock}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Page;

src/app/blogs/_components/blog.tsx

@@ -0,0 +1,36 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+const Blog = ({ item }: { item: any }) => {
+  const formatSlug = (slug: string) => {
+    return slug
+      .toLowerCase()
+      .replace(/\s+/g, "-")
+      .replace(/[^\w-]+/g, "");
+  };
+  return (
+    <Link
+      href={`/blogs/${formatSlug(item.slug)}`}
+      className="bg-charcoal grid lg:grid-cols-2 cursor-pointer"
+    >
+      <Image
+        src={`${item.image}`}
+        alt="yoga"
+        width={0}
+        height={0}
+        className="w-full lg:col-span-1"
+        layout="responsive"
+        objectFit="cover"
+      />
+      <div className="px-4 lg:col-span-1 space-y-4 p-4 ">
+        <h1 className="text-4xl">{item.title}</h1>
+        <p className="text-textSecondary"> 2 min read</p>
+        <p className="text-textSecondary">{item.desc}</p>
+        <p className="text-textSecondary">6 January 2025</p>
+      </div>
+    </Link>
+  );
+};
+
+export default Blog;

src/app/blogs/_components/featured.tsx

@@ -0,0 +1,30 @@
+import Image from "next/image";
+import React from "react";
+
+const Featured = () => {
+  return (
+    <div className="bg-charcoal">
+      <Image
+        src="/yoga.png"
+        alt="yoga"
+        width={0}
+        height={0}
+        className="w-full"
+        layout="responsive"
+        objectFit="cover"
+      />
+      <div className="px-4 py-4 grid lg:grid-cols-4">
+        <h1 className="text-[22px] md:col-span-3 ">
+          Headline : Enabling this bootstrapped brand set up end-to-end business
+          solution.
+        </h1>
+        <p className=" lg:col-span-1 lg:text-right font-extralight text-textSecondary">
+          {" "}
+          2 min read
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Featured;

src/app/blogs/page.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import Featured from "./_components/featured";
+import Blog from "./_components/blog";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Blogs - Zero8.Dev",
+  description: "We Build Elegant Websites.",
+  openGraph: {
+    title: "Zero8.Dev",
+    description: "We Build Elegant Websites.",
+    images: [
+      {
+        url: "/home.png",
+        width: 1200,
+        height: 630,
+        alt: "Zero8.Dev about image",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Zero8.Dev",
+    description: "We Build Elegant Websites.",
+    images: ["/home.png"],
+  },
+};
+export const blogs = [
+  {
+    id: 1,
+    slug: "From Concept to Code: How we Build scalable Digital Solutions",
+    image: "/digital.png",
+    title: "From Concept to Code: How we Build scalable Digital Solutions",
+    credits: {
+      name: "Amit Velankani",
+      rol: "Tech Advisor and Front End Developer @Zero8.Dev",
+      TLDR: "Using AI and putting smart analytics in the hands of entrepeneurs.Lorem ipsum dolor sit amet, consctetur adipiscing elit. Ut",
+    },
+    challenges:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecteture adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consetetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",
+    techStack: ["stack.png", "stack.png-1", "stack.png-2", "stack.png-3"],
+    images: "service-picture",
+    strategies: [
+      "Lorem ipsum dolor sit amet ,consecterur adipiscing elit.",
+      "Lorem ipsum dolor sit amet , consecterur adipiscing elit.",
+      "Lorem ipsum dolor sit amet , consecterur adipiscing elit.",
+    ],
+
+    textBlock:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecteture adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consetetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecterur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",
+  },
+  {
+    id: 2,
+    slug: "5 Tools Every Developer Should Have in Their Toolkit",
+    image: "/desk.png",
+    title: "5 Tools Every Developer Should Have in Their Toolkit",
+    credits: {
+      name: "Amit Velankani",
+      rol: "Tech Advisor and Front End Developer @Zero8.Dev",
+      TLDR: "Using AI and putting sma5 Tools Every Developer Should Have in Their Toolkitrt analytics in the hands of entrepeneurs.Lorem ipsum dolor sit amet, consctetur adipiscing elit. Ut",
+    },
+    challenges:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecteture adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consetetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecterur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",
+    techStack: ["stack.png", "stack.png-1", "stack.png-2", "stack.png-3"],
+    images: "service-picture",
+    strategies: [
+      "Lorem ipsum dolor sit amet ,consecterur adipiscing elit.",
+      "Lorem ipsum dolor sit amet , consecterur adipiscing elit.",
+      "Lorem ipsum dolor sit amet , consecterur adipiscing elit.",
+    ],
+
+    textBlock:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecteture adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consetetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecterur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",
+  },
+  {
+    id: 3,
+    slug: "Understanding the Cloud: A Develpers Perspective",
+    image: "/cloud.png",
+    title: "Understanding the Cloud: A Develpers Perspective",
+    credits: {
+      name: "Amit Velankani",
+      rol: "Tech Advisor and Front End Developer @Zero8.Dev",
+      TLDR: "Using AI and putting smart analytics in the hands of entrepeneurs.Lorem ipsum dolor sit amet, consctetur adipiscing elit. Ut",
+    },
+    challenges:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecteture adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consetetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecterur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",
+    techStack: ["stack.png", "stack.png-1", "stack.png-2", "stack.png-3"],
+    images: "service-picture",
+    strategies: [
+      "Lorem ipsum dolor sit amet ,consecterur adipiscing elit.",
+      "Lorem ipsum dolor sit amet , consecterur adipiscing elit.",
+      "Lorem ipsum dolor sit amet , consecterur adipiscing elit.",
+    ],
+
+    textBlock:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecteture adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consetetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consecterur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna.",
+  },
+];
+const page = () => {
+  return (
+    <div className="h-auto col-span-full ">
+      <h1 className="text-[55px] text-primary ">Blogs</h1>
+      <div className="space-y-5  ">
+        <div className="space-y-3">
+          <h1 className="text-2xl ">Featured</h1>
+          <Featured />
+        </div>
+        <div className="space-y-4">
+          <h1 className="text-2xl">Recently Published</h1>
+          {blogs.map((item, index) => (
+            <Blog item={item} key={index} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;