Grid for cards has 3 columns make it 4 column

[jiyanpatil07]

Grid for cards has 3 columns make it 4 column

[sweep-ai-bot[bot]]

🚀 Here's the PR! #2

Sweep is feeling awesome today.

Actions

• [ ] ↻ Restart Sweep

Step 1: 🔎 Searching

(Click to expand) Here are the code search results. I'm now analyzing these search results to write the PR.

https://github.com/jiyanpatil07/cravoAI/blob/a043e4a081d50b9276c41402387997be04f30578/pages/index.tsx#L1-L241 https://github.com/jiyanpatil07/cravoAI/blob/a043e4a081d50b9276c41402387997be04f30578/styles/globals.css#L1-L42 https://github.com/jiyanpatil07/cravoAI/blob/a043e4a081d50b9276c41402387997be04f30578/styles/styles.css#L1-L48

Step 2: ⌨️ Coding

I'm going to follow the following steps to help you solve the GitHub issue:

1. Update the grid layout for the launch cards on large screens to have 4 columns instead of 3 columns.
2. Adjust the width of the launch cards to fit the new 4-column layout on large screens.
3. Verify that the launch cards are displayed correctly in the 4-column layout on large screens and that the responsive behavior is maintained on smaller screens.

Here are the changes we decided to make. I'm done making edits and now I'm just validating the changes using a linter to catch any mistakes like syntax errors or undefined variables:

pages/index.tsx

Change the grid layout for the launch cards on large screens to have 4 columns instead of 3 columns.

--- 
+++ 
@@ -1,6 +1,6 @@
         {/* Right-hand side for cards */}
         <div className="w-full sm:w-3/4 p-6 ">
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
             {filteredLaunches.map((launch:any) => (
               <LaunchCard key={launch.flight_number} launch={launch} />
             ))}

pages/index.tsx

Adjust the width of the LaunchCard component to fit the new 4-column layout on large screens.

--- 
+++ 
@@ -1,11 +1,11 @@
 function LaunchCard({ launch }: { launch: any }) {
   return (
-    <div className="max-w-md bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-700">
-  
+    <div className="max-w-sm bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-700">
+
   <a href={launch.links.article_link} target="_blank" rel="noopener noreferrer"/>
-    <Image className="rounded-t-lg" 
-      width={400}
-      height={400}
+    <Image className="rounded-t-lg"
+      width={300}
+      height={300}
       loading="lazy"
       src={launch.links.mission_patch} alt={launch.mission_name} />
   {/* </Link> */}

Step 3: 🔄️ Validating

Your changes have been successfully made to the branch sweep/grid_for_cards_has_3_columns_make_it_4_c. I have validated these changes using a syntax checker and a linter.

---

[!TIP] To recreate the pull request, edit the issue title or description.

Thank You.