first commit

src/components/home/LatestNews.tsx

@@ -0,0 +1,65 @@
+import { blogData, commonDescriptions } from '../../data/siteData'
+
+export default function LatestNews() {
+  return (
+    <section className="py-20 bg-white" id="news">
+      <div className="container mx-auto px-4">
+        {/* Section Header */}
+        <div className="text-center max-w-3xl mx-auto mb-8">
+          <h3 className="text-3xl md:text-4xl font-bold text-title mb-4 font-sans">
+            {commonDescriptions.newsTitle}
+          </h3>
+          <p className="text-text my-3">
+            {commonDescriptions.sectionDesc}
+          </p>
+        </div>
+
+        {/* Blog Grid */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {blogData.map((post, index) => (
+            <div
+              key={post.id}
+              className={`mt-4 ${
+                index === 2 ? 'md:col-start-2 lg:col-start-auto' : ''
+              }`}
+            >
+              <div className="grids5-info bg-white rounded-lg overflow-hidden shadow-card hover:shadow-card-hover transition-shadow">
+                <a href={post.link} className="d-block zoom block overflow-hidden">
+                  <img
+                    src={post.image}
+                    alt={post.title}
+                    className="w-full h-48 object-cover transition-transform duration-500 hover:scale-110"
+                  />
+                </a>
+                <div className="blog-info p-6">
+                  <ul className="flex gap-2 mb-2">
+                    {post.categories.map((cat, i) => (
+                      <li key={i}>
+                        <a href="#" className="text-secondary hover:text-primary text-sm">
+                          {cat}{i < post.categories.length - 1 ? ',' : ''}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                  <p className="text-text/60 text-sm mb-2">{post.date}</p>
+                  <h4 className="text-lg font-bold mb-3">
+                    <a href={post.link} className="text-title hover:text-secondary transition-colors">
+                      {post.title}
+                    </a>
+                  </h4>
+                  <p className="text-text mb-4">{post.description}</p>
+                  <a
+                    href={post.link}
+                    className="text-secondary hover:text-primary font-medium transition-colors"
+                  >
+                    Read More <span className="fa fa-angle-right pl-1" />
+                  </a>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}