Initial commit: Safeteb Next.js website.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/ArticlesSection.tsx

@@ -0,0 +1,74 @@
+import { articles } from "@/data/home";
+
+export default function ArticlesSection() {
+  return (
+    <div className="wb-frame" id="article">
+      <section id="articles" className="blog-area blog-default-area" style={{ backgroundColor: "#FFFFFF" }}>
+        <div className="container">
+          <div className="row mb-4 align-items-center">
+            <div className="col-6 text-right">
+              <div className="section-title text-center">
+                <h2
+                  className="title mb-0"
+                  style={{
+                    fontWeight: 200,
+                    direction: "ltr",
+                    textAlign: "right",
+                    fontSize: "25px",
+                    letterSpacing: "0px",
+                  }}
+                >
+                  مقاله ها
+                </h2>
+                <div className="desc">
+                  <p
+                    style={{
+                      fontWeight: 0,
+                      letterSpacing: "5px",
+                      textAlign: "justify",
+                      fontSize: "10px",
+                      fontFamily: "montserrat",
+                      color: "#C1C1C1",
+                    }}
+                  >
+                    ARTICLES
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="col-6 text-start">
+              <a className="btn-theme" href="#articles">
+                <span style={{ fontWeight: 0 }}>مشاهده بیشتر</span>
+              </a>
+            </div>
+          </div>
+          <div className="row pt-2 pb-2">
+            {articles.map((article) => (
+              <div key={article.id} className="col-6 col-md-3">
+                <div className="post-item mb-md-30">
+                  <div className="thumb">
+                    <a href="#">
+                      <img src={article.image} alt={article.title} />
+                    </a>
+                  </div>
+                  <div className="content">
+                    <h3 className="title">
+                      <a href="#">{article.title}</a>
+                    </h3>
+                    <p className="post-abstract">{article.excerpt}</p>
+                    <div className="meta">
+                      <div className="post-date">
+                        <i className="WMi-calendar-1" />
+                        <span>{article.date}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}