ReDI-School · ausgezeichnete · Apr 1, 2025 · Apr 1, 2025 · Apr 1, 2025 · Apr 1, 2025
diff --git a/README.md b/README.md
@@ -21,10 +21,19 @@ Sonali Rathod
 Daria Parashchenko
 Ehighe Aisiri
 Marline John
+<<<<<<< HEAD
+Maha Farah
+
+Suleman Ahmed Khan
+=======
 Oluwabusola Ilechukwu
 Suleman Ahmed Khan
 Bianca Dascalescu
 Asligul Safarova
 Suleman Ahmed Khan
 Julita Lapinska
 Zakaria Sebai
+<<<<<<< HEAD
+>>>>>>> 5be73329be86f0f977b8bac812aab9ae24a5542a
+=======
+>>>>>>> c28e996622c26d92994f29f95b216b497b0ae1ff
diff --git a/index.html b/index.html
@@ -4,7 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<<<<<<< HEAD
+    <title>Vite + React</title>
+=======
     <title>Red Interest</title>
+>>>>>>> c28e996622c26d92994f29f95b216b497b0ae1ff
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,43 @@
+<<<<<<< HEAD
+import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <div>
+        <a href="https://vite.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.jsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  )
+}
+
+export default App
+=======
 function App() {
   return <>Are you Redi ?</>;
 }
 
 export default App;
+>>>>>>> c28e996622c26d92994f29f95b216b497b0ae1ff
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/components/RecommendationList.jsx b/src/components/RecommendationList.jsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+const recommendations = [
+  {
+    id: 1,
+    image: "https://images.unsplash.com/photo-1518791841217-8f162f1e1131",
+    text: "Item 1",
+    link: "#",
+  },
+  {
+    id: 2,
+    image: "https://images.unsplash.com/photo-1523475496153-55998bcd498f",
+    text: "Item 2",
+    link: "#",
+  },
+  {
+    id: 3,
+    image: "https://images.unsplash.com/photo-1493612276216-ee3925520721",
+    text: "Item 3",
+    link: "#",
+  },
+  {
+    id: 4,
+    image: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d",
+    text: "Item 4",
+    link: "google.com",
+  },
+];
+
+const RecommendationList = () => {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4">
+      {recommendations.map((item) => (
+        <a
+          key={item.id}
+          href={item.link}
+          className="flex flex-col items-center bg-white p-2 rounded-lg shadow-md hover:shadow-lg transition"
+        >
+          <img
+            src={item.image}
+            alt={item.text}
+            className="w-24 h-24 object-cover rounded-md"
+          />
+          <span className="mt-2 text-center text-sm font-semibold text-gray-700">
+            {item.text}
+          </span>
+        </a>
+      ))}
+    </div>
+  );
+};
+
+export default RecommendationList;
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,73 @@
+<<<<<<< HEAD
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+=======
 /* 1. Remove default margin & padding */
 * {
   margin: 0;
@@ -70,4 +140,5 @@ table {
     width: 100%;
     margin: 0 auto; /* Center the content horizontally */
   }
-}
+}
+>>>>>>> c28e996622c26d92994f29f95b216b497b0ae1ff