From 405cd78e58ae15b71d774e3d7073b091ccf2a101 Mon Sep 17 00:00:00 2001
From: Komal Agarwal <komal.agarwal5115@gmail.com>
Date: Fri, 26 Jul 2024 22:33:53 +0530
Subject: [PATCH] ai fixed

---
 frontend/src/pages/AI.jsx | 22 +++++++---------------
 frontend/src/style/AI.css | 30 ++++++++++++++++++++++++------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/frontend/src/pages/AI.jsx b/frontend/src/pages/AI.jsx
index 85c7d6ca..c33b7d54 100644
--- a/frontend/src/pages/AI.jsx
+++ b/frontend/src/pages/AI.jsx
@@ -7,7 +7,7 @@ const AI = () => {
       title: "Introduction to AI",
       date: "July 1, 2024",
       summary:
-        "Learn the basics of AI, its importance.Gain insight into a topic and learn the fundamentals",
+        "Learn the basics of AI, its importance. Gain insight into a topic and learn the fundamentals.",
       image:
         "https://amta.sg/wp-content/uploads/2023/09/Introduction-to-Artificial-Intelligence-scaled.jpg",
     },
@@ -21,7 +21,7 @@ const AI = () => {
       title: "Top 10 AI tools",
       date: "July 5, 2024",
       summary:
-        "Use AI tools to help develop ideas and content, make more informed decisions, and speed up daily work tasks",
+        "Use AI tools to help develop ideas and content, make more informed decisions, and speed up daily work tasks.",
       image:
         "https://media.licdn.com/dms/image/D4D12AQE-62Ifk1Ky-Q/article-cover_image-shrink_600_2000/0/1693372628210?e=2147483647&v=beta&t=nvztC0_RuPSchP_tjjSTlVIh1q5kBuuBSV1eMydJU50",
     },
@@ -53,21 +53,13 @@ const AI = () => {
 
   return (
     <div className="container">
-      <h1 className="title" style={{ marginTop: "120px" , color:'white'}}>AI Blog</h1>
+      <h1 className="title">AI Blog</h1>
       <div className="grid-container">
         {blogs.map((blog, index) => (
-          <div
-            key={index}
-            className="grid-item"
-            style={{ objectFit: "cover", maxWidth: "100%" }}
-          >
-            <img
-              src={blog.image}
-              alt={blog.title}
-              height={300}
-              width={"100%"}
-              className="blog-image"
-            />
+          <div key={index} className="grid-item">
+            <div className="image-wrapper">
+              <img src={blog.image} alt={blog.title} className="blog-image" />
+            </div>
             <h2 className="blog-title">{blog.title}</h2>
             <p className="blog-date">{blog.date}</p>
             <p className="blog-summary">{blog.summary}</p>
diff --git a/frontend/src/style/AI.css b/frontend/src/style/AI.css
index c8e7a281..1fa95f20 100644
--- a/frontend/src/style/AI.css
+++ b/frontend/src/style/AI.css
@@ -3,12 +3,13 @@ body {
   margin: 0;
   padding: 0;
   background-color: #f4f4f4;
+  overflow-x: hidden;
+  /* Prevent horizontal scrolling */
 }
 
 .container {
-  max-width: 1200px;
+  max-width: 1400px;
   margin: 0 auto;
-  height: auto;
   padding: 20px;
 }
 
@@ -17,11 +18,12 @@ body {
   margin-bottom: 40px;
   font-size: 2.5rem;
   color: #333;
+  margin-top: 120px;
 }
 
 .grid-container {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
   gap: 20px;
 }
 
@@ -31,31 +33,47 @@ body {
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .grid-item:hover {
   transform: translateY(-10px);
 }
 
-.blog-image {
+.image-wrapper {
   width: 100%;
-  height: auto;
+  height: 200px;
+  /* Set a fixed height for image container */
+  overflow: hidden;
+  /* Hide overflow to maintain aspect ratio */
   border-radius: 8px;
 }
 
+.blog-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  /* Maintain aspect ratio and cover the container */
+}
+
 .blog-title {
   font-size: 1.5rem;
   color: #007bff;
   margin-top: 15px;
+  text-align: center;
 }
 
 .blog-date {
   font-size: 0.9rem;
   color: #888;
   margin-bottom: 10px;
+  text-align: center;
 }
 
 .blog-summary {
   font-size: 1rem;
   color: #555;
-}
+  text-align: center;
+}
\ No newline at end of file