added homepage from my repo

frontend/src/components/Home.css

+body {background-image: linear-gradient(to right,#E5751F, #861F41)}
+
+.containerB {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between; /* Ensures space between items */
+    align-items: flex-start; /* Align items at the top */
+    padding: 20px; /* Optional padding */
+}
+
+.selection-section {
+    padding: 20px;
+}
+
+.description-section {
+    text-align: left;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.thin-veranda {
+    font-family: 'Verdana', sans-serif; /* Use Verdana font */
+    font-weight: 200; /* Thin weight (or you can use 300 for light) */
+    font-size: 30px; /* Adjust the font size as needed */
+    line-height: 1.5; /* Adjust line height for better readability */
+}
+
+.bold-veranda {
+    font-family: 'Verdana', sans-serif; /* Use Verdana font */
+    font-weight: 1000; /* Thin weight (or you can use 300 for light) */
+    font-size: 30px; /* Adjust the font size as needed */
+}
+
+
+.title-font {
+    font-family: 'Times New Roman', Times, serif; /* Set your desired fixed font here */
+    font-size: 28px; /* Adjust size as needed */
+}
+
+.description-font {
+    font-family: 'Times New Roman', Times, serif; /* Set your desired fixed font here */
+    font-size: 14px; /* Adjust size as needed */
+    width: 100%; /* Take full width */
+    margin-bottom: 200px;
+}
+
+.transparent-box-text {
+    background-color: rgba(255, 255, 255, 0.8); /* White with 80% opacity */
+    border-radius: 10px; /* Rounded corners */
+    padding: 20px; /* Padding inside the box */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
+    width: 50%; /* Adjust as necessary */
+    margin-left: 100px;
+}
+
+.transparent-box-image {
+    background-color: rgba(255, 255, 255, 0.8); /* White with 80% opacity */
+    border-radius: 10px; /* Rounded corners */
+    padding: 20px; /* Padding inside the box */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
+    width: 50%; /* Adjust as necessary */
+    margin-right: 150px;
+}
+
+
+.logo-container {
+    text-align: right;
+    margin-top: 75px;
+    margin-right: 100px;
+}
+
+.button-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.action-button {
+    margin: 0 10px;
+    padding: 10px 20px;
+    font-size: 16px;
+    align-items: center;
+}
+
+.button-wrapper {
+    display: flex;
+    flex-direction: column; /* Stack button and text vertically */
+    align-items: center; /* Center items horizontally */
+    margin: 0 10px; /* Space between buttons */
+}
+
+.action-button {
+    margin: 0; /* Remove margin for buttons */
+    padding: 10px; /* Adjust padding if needed */
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.action-button .icon {
+    width: 500px; /* Adjust as needed */
+    height: 600px; /* Adjust as needed */
+}
+
+.button-wrapper span {
+    margin-top: 5px; /* Space between button and text */
+    font-size: 50px; /* Adjust text size as necessary */
+}

frontend/src/components/Home.js

 import React, { useEffect, useState } from "react";
 import axios from "axios";
+import './Home.css'; // If you want to add styling later
+import logo from './assets/corps_logo.png';
 
 /*
 Just a page to test making api
@@ -32,25 +34,76 @@ function Home() {
   }, [fetchData]);
 
   return (
-    <div>
-      <h1>Home Page</h1>
+    // <div>
+    //   <h1>Home Page</h1>
 
-      <p>
-        Below are the results of calling the backend server. The API URL should
-        be localhost in development and be
-        http://corpsdirectory.discovery.cs.vt.edu/api in the cluster.
-      </p>
+    //   <p>
+    //     Below are the results of calling the backend server. The API URL should
+    //     be localhost in development and be
+    //     http://corpsdirectory.discovery.cs.vt.edu/api in the cluster.
+    //   </p>
 
-      {/* Display data if it exists */}
-      <p>
-        Data: {data ? <span>{JSON.stringify(data)}</span> : <span>&nbsp;</span>}
-      </p>
+    //   {/* Display data if it exists */}
+    //   <p>
+    //     Data: {data ? <span>{JSON.stringify(data)}</span> : <span>&nbsp;</span>}
+    //   </p>
 
-      <p>API URL: {process.env.REACT_APP_API_URL}</p>
+    //   <p>API URL: {process.env.REACT_APP_API_URL}</p>
 
-      {/* display error if there is an error*/}
-      <p>Error: {error ? <span>{error}</span> : <span>&nbsp;</span>}</p>
-    </div>
+    //   {/* display error if there is an error*/}
+    //   <p>Error: {error ? <span>{error}</span> : <span>&nbsp;</span>}</p>
+    // </div>
+      <>
+          <div className='text-center'>
+              <h1 className="thin-veranda">VT Cadet Directory</h1>
+              <h1 className="bold-veranda">Connect to any Cadet</h1>
+          </div>
+          <div className='containerB'>
+              <div className="description-section">
+                  <div className="transparent-box-text">
+                      <h1 className="title-font">Virginia Tech Corps of Cadets Directory</h1>
+                      <h1 className="description-font">
+                          Lorem ipsum odor amet, consectetuer adipiscing elit. Primis quam vel posuere lobortis inceptos. 
+                          Nostra sociosqu tristique sagittis iaculis velit morbi lobortis. Maecenas vivamus consectetur 
+                          vestibulum adipiscing neque. Sollicitudin ornare nam sapien class ex velit in. Senectus pretium 
+                          quisque cras phasellus sociosqu malesuada. Sapien pretium viverra adipiscing est libero aliquam. 
+                          Cursus conubia a volutpat condimentum libero sed. Vulputate velit purus posuere amet class ut.
+                          <br/><br/>
+                          Conubia mauris curabitur bibendum quisque justo dapibus potenti. Sem cubilia quisque in donec 
+                          ipsum sem. Elit risus convallis ornare dis pharetra senectus. Sit sodales cursus mattis taciti 
+                          purus vel suscipit proin. Cursus metus euismod primis sit praesent magnis phasellus. Ut sagittis 
+                          inceptos pretium sociosqu bibendum, at tempus adipiscing. Ac elementum rhoncus egestas viverra 
+                          commodo cursus turpis lectus torquent.
+                      </h1>
+                  </div>
+              </div>
+              <div className="transparent-box-image">
+                  <img src={logo} alt="Corps Logo" className="logo" width={400}/>
+              </div>
+          </div>
+          <div className="selection-section">
+              <div className="button-container">
+                  <div className="button-wrapper">
+                      <button className="action-button">
+                          <img src={logo} width={70} alt="Browse" className="icon" />
+                      </button>
+                      <span>Browse</span>
+                  </div>
+                  <div className="button-wrapper">
+                      <button className="action-button">
+                          <img src={logo} alt="Search" className="icon" />
+                      </button>
+                      <span>Search</span>
+                  </div>
+                  <div className="button-wrapper">
+                      <button className="action-button">
+                          <img src={logo} alt="Message" className="icon" />
+                      </button>
+                      <span>Message</span>
+                  </div>
+              </div>
+          </div>
+      </>
   );
 }