added News component

src/app/page.tsx

@@ -11,7 +11,13 @@ const Home = () => {
       <Welcome />
       <About />
       <Education />
-      <News />
+      <News
+        title="TITLE"
+        pageLink="/"
+        imageLink="https://www.magnite.com/wp-content/uploads/2024/05/surface-xSiQBSq-I0M-unsplash.jpg"
+        imageAlt="alt test"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+      />
     </div>
   );
 };

src/components/home/news.tsx

@@ -1,7 +1,43 @@
 import React from "react";
+import Image from "next/image";
+import Link from "next/link";
 
-const News = () => {
-  return <div>news</div>;
+interface NewsProps {
+  title: string;
+  pageLink: string;
+  imageLink: string;
+  imageAlt: string;
+  description: string;
+}
+
+const News = ({
+  title,
+  pageLink,
+  imageLink,
+  imageAlt,
+  description,
+}: NewsProps) => {
+  return (
+    <div className="font-inter flex h-96 w-80 flex-col p-0">
+      <div className="flex h-64 items-center justify-center overflow-hidden">
+        <Image
+          src={imageLink}
+          alt={imageAlt}
+          width={300}
+          height={250}
+          className="h-full w-full object-cover"
+        ></Image>
+      </div>
+      <article>
+        <p className="line-clamp-1 pt-4 text-2xl font-bold">
+          <Link href={pageLink} className="hover:underline">
+            {title}
+          </Link>
+        </p>
+        <p className="line-clamp-6 pt-2 text-sm">{description}</p>
+      </article>
+    </div>
+  );
 };
 
 export default News;