Initial Commit

components/homes/finance-advisor/Blogs.jsx

@@ -0,0 +1,96 @@
+"use client";
+import Link from "next/link";
+import Image from "next/image";
+import { blogArticles4, posts } from "@/data/blogs";
+export default function Blogs() {
+  return (
+    <div className="section-blog style-2 tf-spacing-23">
+      <div className="tf-container-2">
+        <div className="heading-section mb_59">
+          <div className="heading-tag style-2 v2 text_mono-gray-5 text-body-3 mb_12">
+            BLOGS
+          </div>
+          <h2 className="heading-title text_white fw-6 split-text effect-right">
+            Helpful insights and tips for your <br />
+            financial success journey
+          </h2>
+        </div>
+        <div className="wrapper">
+          {blogArticles4.map((article) => (
+            <div
+              key={article.id}
+              className="blog-article-item style-2 hover-image wow animate__fadeInLeft animate__animated"
+              data-wow-delay={article.delay}
+            >
+              <Link
+                href={`/single-post/${article.id}`}
+                className="article-thumb"
+              >
+                <Image
+                  className="lazyload"
+                  data-src={article.imageSrc}
+                  alt={article.alt}
+                  src={article.imageSrc}
+                  width={621}
+                  height={621}
+                />
+              </Link>
+              <div className="article-content">
+                <p className="text-body-2 text_mono-gray-3">{article.date}</p>
+                <h6 className="title fw-5 letter-spacing-2">
+                  <Link
+                    href={`/single-post/${article.id}`}
+                    className="text_white"
+                  >
+                    {article.title}
+                  </Link>
+                </h6>
+              </div>
+            </div>
+          ))}
+          <div className="right">
+            {posts.map((post) => (
+              <div
+                key={post.id}
+                className="relatest-post-item style-1 hover-image-2 wow animate__fadeInRight animate__animated"
+                data-wow-delay={post.delay}
+              >
+                <Link
+                  href={`/single-post/${post.id}`}
+                  className="image-rotate image mt-0"
+                >
+                  <Image
+                    alt={post.alt}
+                    src={post.imageSrc}
+                    width={120}
+                    height={120}
+                  />
+                </Link>
+                <div className="content">
+                  <p className="text-body-2 text_primary-fa-yellow mb_3">
+                    {post.date}
+                  </p>
+                  <div className="sub-heading fw-5 mb_12 text_primary-fa-yellow">
+                    <Link
+                      href={`/single-post/${post.id}`}
+                      className="link line-clamp-3"
+                    >
+                      {post.title}
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            ))}
+            <Link
+              href={`/blog`}
+              className="link btn_link text-body-1 text_white text-decoration-underline wow animate__fadeInUp animate__animated"
+              data-wow-delay="0s"
+            >
+              View all stories
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}