update ui page

frontend/src/pages/UI.jsx

@@ -1,81 +1,93 @@
-import React from 'react'
+import React from "react";
 import "../style/UI.css";
+
 const UI = () => {
   const blogs = [
     {
       title: "Introduction to UI Design",
       date: "August 1, 2024",
       summary:
-        "Learn the basics of UI, its importance.Gain insight into a topic and learn the fundamentals",
+        "Learn the basics of UI, its importance, and how it shapes user experiences. Gain insight into the fundamentals and start your journey in UI design.",
       image:
         "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20221219162542/Become-UI-Designer-in-2023.png",
+      content:
+        "UI design stands for User Interface design. It is the process of making interfaces in software or computerized devices with a focus on looks or style. Designers aim to create interfaces which users find easy to use and pleasurable. UI design typically refers to graphical user interfaces but also includes others, such as voice-controlled interfaces."
     },
     {
       title: "Goal of a UI Designer",
       date: "August 1, 2024",
       summary:
-        "Get to know the goals of a UI designer.",
+        "Understand the primary objectives of a UI designer and the key elements they focus on to create effective user interfaces.",
       image:
         "https://media.licdn.com/dms/image/D5612AQFZeUkjuMCnzA/article-cover_image-shrink_720_1280/0/1715100675161?e=2147483647&v=beta&t=1Ne74qf43GsJ0SIa1E5PzZgN0lVlyHlhOPq4eQyOc9M",
+      content:
+        "A UI designer’s main goal is to create an interface that users find easy to use and pleasurable. They focus on the look and style of a product, ensuring that the interface is intuitive and engaging. Key elements include visual design, interactive design, and information architecture."
     },
     {
-      title: "Why is UI important in technology ",
+      title: "Why is UI Important in Technology",
       date: "August 1, 2024",
       summary:
-        "Learn the importance of UI .Gain insight into a topic and learn the fundamentals",
+        "Discover the significance of UI in modern technology and how it impacts user satisfaction and overall experience.",
       image:
         "https://media.geeksforgeeks.org/wp-content/uploads/20231011121732/Importance-of-UIUX-Design-copy.webp",
+      content:
+        "UI is crucial in technology because it is the point of interaction between the user and a digital device or application. A good UI can enhance the user experience, leading to higher user satisfaction, increased engagement, and more effective product use."
     },
     {
-      title: " How to establish a Career in UI",
+      title: "How to Establish a Career in UI",
       date: "August 15, 2024",
       summary:
-        "A step-by-step guide on how to begin a career in UI, including necessary skills and certifications.",
+        "A comprehensive guide on starting a career in UI design, including necessary skills, education, and certifications.",
       image:
-        "https://blog.uxfol.io/wp-content/uploads/2023/05/3.png",
+        "https://i.pinimg.com/564x/b2/c2/56/b2c2564d7f5ad67962bccf7858704bc3.jpg",
+      content:
+        "Starting a career in UI design requires a mix of technical skills and creativity. Key steps include learning design principles, gaining proficiency in design tools like Sketch and Adobe XD, building a strong portfolio, and obtaining certifications in UI design. Networking and staying updated with industry trends are also important."
     },
     {
       title: "Benefits of UI",
       date: "August 25, 2024",
       summary:
-        "Unlock and leverage the potential of UI. Learn how you can use the capabilities of UI to enhance your work",
+        "Learn about the various benefits of good UI design and how it can improve user satisfaction and business outcomes.",
       image:
         "https://blog.techliance.com/wp-content/uploads/2020/12/Benefits-of-User-Interface-Design-1024x611.jpg",
+      content:
+        "Good UI design offers numerous benefits, including improved user satisfaction, higher conversion rates, and better user retention. It can also reduce development time and costs by preventing the need for frequent redesigns. A well-designed UI makes a product more accessible and easier to use."
     },
     {
       title: "The Future of UI",
       date: "August 25, 2024",
       summary:
-        "Explore the future trends in UI and how they will have an impact on our lives.",
+        "Explore future trends in UI design and their potential impact on technology and user experiences.",
       image:
         "https://i0.wp.com/www.admecindia.co.in/wp-content/uploads/2019/07/admec-internal-ui-design-future-prospect-1.jpg?fit=2001%2C1112&ssl=1",
+      content:
+        "The future of UI design is likely to be shaped by emerging technologies such as artificial intelligence, augmented reality, and voice interfaces. These advancements will create new opportunities for more interactive, personalized, and immersive user experiences. Staying updated with these trends is crucial for UI designers."
     },
   ];
+
   return (
-    <div className="container">
+    <div className="container1">
       <h1 className="title" style={{ marginTop: "60px" }}>UI Design</h1>
       <div className="grid-container">
         {blogs.map((blog, index) => (
-          <div
-            key={index}
-            className="grid-item"
-            style={{ objectFit: "cover", maxWidth: "100%" }}
-          >
+          <div key={index} className="grid-item" style={{ objectFit: "cover", maxWidth: "100%" }}>
             <img
               src={blog.image}
               alt={blog.title}
               height={300}
               width={"100%"}
+              style={{ objectFit: "cover" }}
               className="blog-image"
             />
             <h2 className="blog-title">{blog.title}</h2>
             <p className="blog-date">{blog.date}</p>
             <p className="blog-summary">{blog.summary}</p>
+            <p className="blog-content" style={{textAlign: "start"}}>{blog.content}</p>
           </div>
         ))}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default UI
+export default UI;

frontend/src/style/UI.css

@@ -5,8 +5,8 @@ body {
     background-color: #f4f4f4;
   }
 
-  .container {
-    max-width: 1200px;
+  .container1 {
+    max-width: 100%;
     margin: 0 auto;
     height: auto;
     padding: 20px;