Ayush Ranjan Submission

src/App.css

@@ -0,0 +1,66 @@
+.App {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background-color: #4B0082;
+    color: white;
+    text-align: center;
+    padding: 20px;
+  }
+
+  .members-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+    width: 100%;
+    max-width: 1200px;
+    margin: 20px 0;
+  }
+
+  h1 {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+  }
+
+  .description {
+    font-size: 1.2em;
+    max-width: 800px;
+    margin-bottom: 20px;
+    line-height: 1.6;
+    color: white;
+  }
+
+  .member-card {
+    background-color: white;
+    color: #4B0082;
+    border: 1px solid #ccc;
+    border-radius: 15px;
+    padding: 20px;
+    text-align: center;
+    transition: transform 0.3s;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .member-card:hover {
+    transform: scale(1.05);
+  }
+
+  .member-photo {
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+    margin-bottom: 15px;
+  }
+
+  h3 {
+    margin: 10px 0 5px;
+  }
+
+  p {
+    margin: 0;
+    color: #4B0082;
+  }
+

src/App.js

@@ -1,10 +1,37 @@
 import React from 'react';
 import './App.css';
-import data from './members_details.json'
+import data from './members_details.json';
+
+function MemberCard({ name, position, picture }) {
+  return (
+    <div className="member-card">
+      <img src={picture} alt={`${name}'s picture`} className="member-photo" />
+      <h3>{name}</h3>
+      <p>{position}</p>
+    </div>
+  );
+}
 
 function App() {
   return (
     <div className="App">
+      <h1>F!rosh Orientation Committee</h1>
+      <p className="description">
+        Welcome to the F!rosh Orientation Committee page. Here you will find information about the team members who make F!rosh week a memorable experience for all new students!
+      </p>
+      <div className="members-grid">
+        {data.map((member, index) => (
+          <MemberCard
+            key={index}
+            name={member.name}
+            position={member.position}
+            picture={member.picture}
+          />
+        ))}
+      </div>
+      <p className="description">
+        Note: Responsive such that when you zoom it auto-fits. It was a nice experience learning how to use GitHub and make pull requests, thanks for that :)
+      </p>
     </div>
   );
 }

src/index.css

@@ -1,13 +1,11 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }