Merged Article Grid, fixed font

src/App.css

@@ -14,7 +14,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #265CA9;;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

src/App.js

@@ -2,7 +2,9 @@ import React, { useState, useEffect } from "react";
 import './App.css';
 import Header from './components/Header';
 import Footer from './components/Footer';
-import ArticleGrid from "./components/articlegrid/articlegrid";
+import ArticleGrid from "./components/ArticleGrid";
+import Landing from './components/Landing';
+import Cursor from './images/PencilCursor.svg';
 
 function App() {
   const [data, setData] = useState(null);
@@ -16,12 +18,13 @@ function App() {
   }, []);
 
   return data && (
-    <div className="App">
+    /*<div className="App" style={{cursor: `url(${Cursor}), auto`}}>*/
+    <div className="App" style={{background: `#ADD8E6`}}>
       <Header/>
-      Hello Daily Bruin!
-      <ArticleGrid articles={data.national} title="National" />
-      <ArticleGrid articles={data.state} title="State" />
-      <ArticleGrid articles={data.local} title="Local" />
+      <Landing landing={data.landing_image}/>
+      <ArticleGrid articles={data.national} title="NATIONAL" />
+      <ArticleGrid articles={data.state} title="STATE" />
+      <ArticleGrid articles={data.local} title="LOCAL" />
       <Footer/>
     </div>
   );

src/components/ArticleCard.js

@@ -13,6 +13,7 @@ const ArticleContainer = styled("div")`
 `;
 
 const TitleContainer = styled("div")`
+  margin-top: 1em;
   font-size: 33px;
   font-weight: 500;
   line-height: 43px; /* 130.303% */
@@ -35,17 +36,15 @@ const ArticleCard = ({ props }) => {
     <ArticleContainer>
       <ImgContainer>
         <img
-          src={props.article_img}
+          src={props.article_image}
           alt="Article"
           style={{ width: "100%", height: "100%" }}
         ></img>
       </ImgContainer>
       <div>
-        <TitleContainer>{props.article_title}</TitleContainer>
+      <TitleContainer>{props.article_title}</TitleContainer>
         <div style={{ fontSize: "28px", fontWeight: 300, lineHeight: "34px" }}>
-          {props.article_byline}
-          <br></br>
-          {props.article_url}
+        {props.article_byline}
         </div>
       </div>
     </ArticleContainer>

src/components/ArticleGrid.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+import ArticleCard from "../components/ArticleCard.js";
+
+const Container = styled.div`
+    width: 60%;
+    margin: 0 auto;
+    justify-content: center;
+    padding: 1em;
+    background: white;
+`;
+
+const TitleContainer = styled.div`
+    gap: 0px;
+    width: 62.5%;
+    margin: 0 auto;
+    justify-content: center;
+    opacity: 0px;
+    background: #265CA9;
+`
+const Title = styled.div`
+    font-family: BruinBlock;
+    font-size: 75px;
+    font-weight: 900;
+    line-height: 90px;
+    text-align: center;
+    color: #FBFBFB;
+    
+`
+
+const WhiteStripe = styled.div`
+    width: 62.5%;
+    height: 1em;
+    margin: 0 auto;
+    background: #FFFFFF;
+`;
+
+const RedStripe= styled.div`
+    width: 62.5%;
+    height: 1em;
+    margin: 0 auto;
+    background: #CD2027;
+`;
+
+const ArticleGrid = ({ articles, title }) => {
+    return (
+        <>
+        <TitleContainer>
+            <Title>★{title}★</Title>
+        </TitleContainer>
+        <WhiteStripe />
+        <RedStripe />
+        <Container>
+            {articles.map((article) => {
+                return <ArticleCard props={article} />;
+            })}
+        </Container>
+        </>
+    );
+};
+
+export default ArticleGrid;

src/components/Header.js

@@ -8,7 +8,7 @@ const DBHeader = styled("div")`
   position: -webkit-sticky;
   position: sticky;
   top: 0;
-  background: black;
+  background: #265CA9;
   width: 100%;
   padding: 0.2em 0;
   color: white;

src/components/Landing.js

@@ -0,0 +1,33 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+    width: 100%;
+    height: fit-content;
+    position: relative;
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #D5E7F2;
+    overflow: hidden;
+`;
+
+const Image = styled.img`
+  width: 100vw;
+  height: auto;
+  object-fit: cover;
+`;
+
+const Landing = ({landing}) => {
+
+    return (
+        <>
+            <Container>
+                <Image src={landing}/>
+            </Container>
+        </>
+    );
+}
+export default Landing;
+

src/index.css

@@ -11,3 +11,10 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+@font-face {
+  font-family: "BruinBlock";
+  src: local("BruinBlock"),
+    url("./fonts/BruinBlock.otf") format("opentype");
+  font-weight: 400;
+}