feat: blog list

src/app/blog/page.tsx

@@ -1,3 +1,71 @@
+import CardBlog from "@/components/CardBlog";
+import HeroImage from "@/components/HeroImage";
+import { CardBlogData } from "@/schema/blog";
+
 export default function Blog() {
-  return <></>;
+  const data: CardBlogData[] = [
+    {
+      slug: "introducing-a-ray-kappe",
+      title: "Introducing A Ray Kappe-Designed Masterpiece",
+      description:
+        "The famed Cipriani family has unveiled Mr. C Residences, its first-ever hotel branded residences, situated adjacent to the flagship",
+      img: "/images/blog-04-736x540.jpg",
+      posted_at: "March 15, 2021",
+    },
+    {
+      slug: "24234",
+      title: "Introducing A Ray Kappe-Designed Masterpiece",
+      description:
+        "The famed Cipriani family has unveiled Mr. C Residences, its first-ever hotel branded residences, situated adjacent to the flagship",
+      img: "/images/blog-04-736x540.jpg",
+      posted_at: "March 15, 2021",
+    },
+    {
+      slug: "wkejrh2k3jr",
+      title: "Introducing A Ray Kappe-Designed Masterpiece",
+      description:
+        "The famed Cipriani family has unveiled Mr. C Residences, its first-ever hotel branded residences, situated adjacent to the flagship",
+      img: "/images/blog-04-736x540.jpg",
+      posted_at: "March 15, 2021",
+    },
+    {
+      slug: "1l2kj4lw34",
+      title: "Introducing A Ray Kappe-Designed Masterpiece",
+      description:
+        "The famed Cipriani family has unveiled Mr. C Residences, its first-ever hotel branded residences, situated adjacent to the flagship",
+      img: "/images/blog-04-736x540.jpg",
+      posted_at: "March 15, 2021",
+    },
+    {
+      slug: "asflj2lj53545",
+      title: "Introducing A Ray Kappe-Designed Masterpiece",
+      description:
+        "The famed Cipriani family has unveiled Mr. C Residences, its first-ever hotel branded residences, situated adjacent to the flagship",
+      img: "/images/blog-04-736x540.jpg",
+      posted_at: "March 15, 2021",
+    },
+    {
+      slug: "adflkj2oj545",
+      title: "Introducing A Ray Kappe-Designed Masterpiece",
+      description:
+        "The famed Cipriani family has unveiled Mr. C Residences, its first-ever hotel branded residences, situated adjacent to the flagship",
+      img: "/images/blog-04-736x540.jpg",
+      posted_at: "",
+    },
+  ];
+
+  return (
+    <>
+      <HeroImage />
+      <section className="section section-md bg-gray-12">
+        <div className="container">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {data.map((blog) => (
+              <CardBlog key={blog.slug} data={blog} />
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
 }

src/app/globals.css

@@ -20,6 +20,7 @@
   --color-colorHeader: var(--color-colorExt1);
   --color-colorHeaderText: var(--color-colorExt2);
   --color-colorHeaderTextHover: var(--color-colorext4);
+  --color-colorHeroOverlay: var(--color-colorExt5);
   --color-colorFooter: var(--color-colorExt1);
   --color-colorFooter2: var(--color-colorExt5);
   --color-colorFooterText: var(--color-colorExt2);

src/components/CardBlog.tsx

@@ -0,0 +1,33 @@
+import { CardBlogData } from "@/schema/blog";
+import Image from "next/image";
+
+type CardBlogProps = {
+  data: CardBlogData;
+};
+
+export default function CardBlog({ data }: CardBlogProps) {
+  return (
+    <div>
+      <article className="post-default">
+        <a className="post-default-image" href="blog-post.html">
+          <Image src={data.img} alt={data.title} width="736" height="540" />
+        </a>
+        <div className="post-default-body">
+          <div className="post-default-title">
+            <h4>
+              <a href="blog-post.html">{data.title}</a>
+            </h4>
+          </div>
+          <div className="post-default-divider"></div>
+          <div className="post-default-text">
+            <p>{data.description}</p>
+          </div>
+          <div className="post-default-time">
+            <span className="icon mdi mdi-clock"></span>
+            <a href="#">{data.posted_at}</a>
+          </div>
+        </div>
+      </article>
+    </div>
+  );
+}

src/components/HeroImage.tsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+
+type HeroImageProps = {
+  imgSrc?: string;
+};
+
+export default function HeroImage({ imgSrc = "/images/breadcrumbs-bg-05-1922x441.jpg" }: HeroImageProps) {
+  return (
+    <section className="breadcrumbs-custom bg-image context-dark">
+      <Image
+        alt="Blog"
+        src={imgSrc}
+        quality={100}
+        fill
+        sizes="100vw"
+        style={{
+          objectFit: "cover",
+        }}
+      />
+      <div className="bg-colorHeroOverlay/50 w-full h-full absolute top-0 left-0" />
+      <div className="container relative">
+        <h2 className="breadcrumbs-custom-title">Blog</h2>
+      </div>
+    </section>
+  );
+}

src/components/HeroSlider.tsx

@@ -52,7 +52,7 @@ export default function HeroSlider({ onClickBook }: HeroSliderProps) {
                 objectFit: "cover",
               }}
             />
-            <section className="section section-lg text-colorText2! bg-colorExt5/50 w-full h-full z-20">
+            <section className="section section-lg text-colorText2! bg-colorHeroOverlay/50 w-full h-full z-20">
               <div className="container">
                 <div className="row">
                   <div className="col-12 col-lg-8 text-wrap space-y-5 md:space-y-8 lg:space-y-12">

src/components/layouts/Header.tsx

@@ -123,7 +123,7 @@ export default function Header() {
                     </a>
                   </li>
                   <li className="rd-nav-item">
-                    <a className="rd-nav-link rd-nav-link-custom" href="/">
+                    <a className="rd-nav-link rd-nav-link-custom" href="/blog">
                       BLOGS
                     </a>
                   </li>

src/schema/blog.ts

@@ -0,0 +1,7 @@
+export type CardBlogData = {
+  slug: string;
+  title: string;
+  description: string;
+  img: string;
+  posted_at: string;
+};