Johnbranch

frontend/src/App.css

@@ -14,14 +14,14 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #9D0600;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: #9D0600;
 }
 
 .App-link {

frontend/src/components/Footnote.jsx

@@ -2,7 +2,7 @@ import { SocialIcon } from 'react-social-icons';
 
 const Footnote = () => {
     return (
-      <section className="h-72 bg-gray-200">
+      <section className="h-72 bg-header-color">
         <div className="float-left inline-block pl-10 pt-12">
           <div className="flex items-center space-x-3">
             <a
@@ -14,16 +14,16 @@ const Footnote = () => {
                 alt={"BPU"}
               />
             </a>
-            <div className="text-5xl text-[#650202] font-bold">BPU</div>
+            <div className="text-5xl text-[#FFFFFF] font-bold">BPU</div>
           </div>
           <div className="h-5"></div>
-          <div className="text-l text-[#650202]">
+          <div className="text-l text-[#FFFFFF]">
             The Brown Political Union is a nonpartisan student-run organization
           </div>
-          <div className="text-l text-[#650202]">
+          <div className="text-l text-[#FFFFFF]">
             dedicated to providing a forum for respectful political.
           </div>
-          <div className="text-l text-[#650202]">discourse on campus.</div>
+          <div className="text-l text-[#FFFFFF]">discourse on campus.</div>
           <div className="mt-6">
             <div className="float-left">
             <SocialIcon url="https://www.facebook.com/profile.php?id=100089568716535&mibextid=LQQJ4d" fgColor="white" />
@@ -35,22 +35,22 @@ const Footnote = () => {
         </div>
 
         <div className="float-right grid grid-rows-2 grid-flow-col gap-6 pt-12 pr-20">
-          <div className="text-2xl text-[#650202] font-bold inline-block">
+          <div className="text-2xl text-[#FFFFFF] font-bold inline-block">
             About Us
           </div>
-          <div className="text-2xl text-[#650202] font-bold inline-block">
+          <div className="text-2xl text-[#FFFFFF] font-bold inline-block">
             Events
           </div>
-          <div className="text-2xl text-[#650202] font-bold inline-block">
+          <div className="text-2xl text-[#FFFFFF] font-bold inline-block">
             Constitution
           </div>
-          <div className="text-2xl text-[#650202] font-bold inline-block">
+          <div className="text-2xl text-[#FFFFFF] font-bold inline-block">
             Parties
           </div>
-          <div className="text-2xl text-[#650202] font-bold inline-block">
+          <div className="text-2xl text-[#FFFFFF] font-bold inline-block">
             Leadership
           </div>
-          <div className="text-2xl text-[#650202] font-bold inline-block">
+          <div className="text-2xl text-[#FFFFFF] font-bold inline-block">
           <a href="https://docs.google.com/forms/d/e/1FAIpQLSdSC_VzIloUZ37vlAICG21CtEdShoidBJuHIbnGSh-PIBNzbA/viewform">Contact</a>
           </div>
         </div>

frontend/src/components/Hero.jsx

@@ -29,7 +29,7 @@ const Hero = () => {
         </div>
       </div>
       <div className="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-black/70 justify-center content-center text-center md:text-left flex flex-col">
-        <h2 className="text-white text-4xl font-bold px-5 lg:px-80">
+        <h2 className="text-[#FFFFFF] text-4xl 40px lg:px-80">
           Fostering ideological discourse, challenging perspectives, effecting
           personal-political growth
         </h2>
@@ -38,14 +38,14 @@ const Hero = () => {
         <div className="flex w-full justify-between mb-0">
           <button
             onClick={prevSlide}
-            className="text-white text-3xl font-bold py-2 px-4 rounded focus:outline-none"
+            className="text-[#FFFFFF] text-3xl font-bold py-2 px-4 rounded focus:outline-none"
             style={{ visibility: currentSlide === 0 ? "hidden" : "visible" }}
           >
             {"〈"}
           </button>
           <button
             onClick={nextSlide}
-            className="text-white text-3xl font-bold py-2 px-4 rounded focus:outline-none"
+            className="text-[#FFFFFF] text-3xl font-bold py-2 px-4 rounded focus:outline-none"
             style={{ visibility: currentSlide === images.length - 1 ? "hidden" : "visible" }}
           >
             {"〉"}

frontend/src/components/Home.jsx

@@ -3,23 +3,39 @@ import Event from "./Event";
 import EventHeader from "./EventHeader";
 import Hero from "./Hero";
 
+const AboutUsButton = ({ name, link }) => {
+  return (
+    <div className="flex justify-center items-center mt-6">
+    <button className="text-lg text-[#FFFFFF] bg-[#9D0600] px-4 py-2 rounded-md" onClick={() => window.location.href = link}>
+      {name}
+    </button>
+    </div>
+  );
+};
+
+
 const Home = () => {
   const currentDate = new Date();
   const events = useCollection("events");
-  const filteredEvents = (filterFunc) => events
-  .filter(filterFunc)
-  .map((event, i) => (
-      <Event
-        key={i}
-        {...event}
-      />
-    )
-  )
+  const filteredEvents = (filterFunc) =>
+    events.filter(filterFunc).map((event, i) => (
+      <Event key={i} {...event} />
+    ));
+
   return (
     <>
       <Hero />
-      <div className="mt-32 pb-16 mx-auto max-w-screen-md px-8">
-        <EventHeader text="Upcoming Events" />
+      <div className="bg-[#FFFFFF] mt-32 pb-6 mx-auto max px-10 width: 1512px height: 481px">
+        <h1 className="text-center mt-32 pb-6 mx-auto text-xl">OUR VISION</h1>
+        <h3 className="text-3xl mb-4 text-center">We aim to promote facts. </h3>
+        <p className="text-center mb-4 align-middle mt-10 mx-auto max-w-screen-md">
+          We believe in advancing student understanding of foreign and domestic policy by promoting facts, seeking nuance, and challenging preconceptions. Above all, the BPU works to bridge partisan divides and foster respect for the freedom of speech among the Brown student community.
+        </p>
+        <AboutUsButton name="About Us" link="/about"/>
+
+      </div>
+      <div className="mt-32 pb-16 mx-width-full width:1512px height:973px px-8 bg-[#F0E0A0]">
+        <EventHeader text="Upcoming Events"/>
         {filteredEvents((event) => event.when.toDate() >= currentDate)}
         <EventHeader text="Past Events" />
         {filteredEvents((event) => event.when.toDate() < currentDate)}

frontend/src/components/Navbar.jsx

@@ -11,7 +11,7 @@ const buttons = [
 
 const NavbarButton = ({ name, link }) => {
   return (
-    <a className="text-lg text-[#650202] font-bold" href={link}>
+    <a className="text-lg text-[#ffffff] font-bold" href={link}>
       {name}
     </a>
   );
@@ -20,7 +20,7 @@ const NavbarButton = ({ name, link }) => {
 const Navbar = () => {
   const { isLoggedIn } = useAuth()
   return (
-    <section className="md:fixed flex w-full bg-gray-200 justify-between items-center flex-wrap top-0 px-5 md:px-20 py-3 z-50 drop-shadow-lg">
+    <section className="md:fixed flex w-full bg-header-color justify-between items-center flex-wrap top-0 px-5 md:px-20 py-3 z-50 drop-shadow-lg">
       <a className="w-10 text-3xl md:text-5xl text-white font-bold" href="/">
           <img src={require("../data/BPU Logo Official Brown.png")} alt={"BPU"} />
       </a>

frontend/src/components/Section.jsx

@@ -1,6 +1,6 @@
 const Section = ({ section, data }) => {
     return (
-        <div className="text-l text-black">
+        <div className="text-l text-white">
             <h5 className="font-bold">
                 {section}
             </h5>

frontend/tailwind.config.js

@@ -2,6 +2,9 @@
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
+    colors: {
+      'header-color':'#9D0600'
+    },
     extend: {},
   },
   plugins: [],

my-react-app/src/App.css

@@ -117,14 +117,14 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #9D0600;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: #9D0600;
 }
 
 .App-link {