diff --git a/public/index.html b/public/index.html index 0a912e5..1fff249 100644 --- a/public/index.html +++ b/public/index.html @@ -23,6 +23,12 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + + + + + + React App diff --git a/src/App.css b/src/App.css index 17450fe..4b2e357 100644 --- a/src/App.css +++ b/src/App.css @@ -64,3 +64,14 @@ .flex-2 { flex: 2; } + +.blue-button { + text-transform: uppercase; + padding: 13px 23px; + border-width: 2px; + border-radius: 0.25rem; + border-style: solid; + border-color: #38A3BD; + color: #38A3BD; + display: inline-block; +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 8ea401a..af82a88 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import './App.css'; import index from './pages/index'; import initiatives from './pages/initiatives'; +import mission from './pages/mission'; import news from './pages/news'; import newsArticle from './pages/newsArticle'; import notFound from './pages/404'; @@ -20,6 +21,7 @@ export default function App() { + diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 77e5a3d..508d725 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -7,6 +7,15 @@ let pages = [ url: '/', title: 'Home', }, + { + url: '#', + title: 'About Us', + items: [ + { url: '/officers', title: 'Officers' }, + { url: '/committee', title: 'Executive Committee' }, + { url: '/class-council', title: 'Class Council' }, + ], + }, { url: '/news', title: 'News', diff --git a/src/css/mission.css b/src/css/mission.css index 9f365f9..cf6e481 100644 --- a/src/css/mission.css +++ b/src/css/mission.css @@ -1,3 +1,37 @@ .mission-box { padding: 0px 20px; -} \ No newline at end of file +} + +.mission-header { + font-size: 1.25rem; + font-weight: bold; +} + +.mission-para { + font-size: 22px; + line-height: 33px; + font-weight: 300; +} + +.mission-quote { + display: flex; + flex-direction: column; + margin: 20px 0px; +} + +.mission-quote-text { + font-size: 2rem; + font-weight: 600; + font-style: italic; + font-family: 'Arapey'; + width: 100%; + text-align: center; +} + +.mission-quote-author { + width: 100%; + text-align: right; + font-size: 20px; + display: inline-block; + padding-right: 200px; +} diff --git a/src/css/segment.css b/src/css/segment.css index 43bad00..786d201 100644 --- a/src/css/segment.css +++ b/src/css/segment.css @@ -8,14 +8,3 @@ line-height: 33px; font-weight: 300; } - -.segment-button { - text-transform: uppercase; - padding: 13px 23px; - border-width: 2px; - border-radius: 0.25rem; - border-style: solid; - border-color: #38A3BD; - color: #38A3BD; - display: inline-block; -} diff --git a/src/images/gatsby-astronaut.png b/src/images/gatsby-astronaut.png deleted file mode 100644 index da58ece..0000000 Binary files a/src/images/gatsby-astronaut.png and /dev/null differ diff --git a/src/images/gatsby-icon.png b/src/images/gatsby-icon.png deleted file mode 100644 index 908bc78..0000000 Binary files a/src/images/gatsby-icon.png and /dev/null differ diff --git a/src/pages/mission.tsx b/src/pages/mission.tsx new file mode 100644 index 0000000..2d82a79 --- /dev/null +++ b/src/pages/mission.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import Hero from '../components/Hero'; +import useMission from '../hooks/useMission'; +import '../css/mission.css'; + +export default function Mission() { + let mission = useMission(); + + if (!mission) { + return null; + } + + return ( + <> + +
+
+ “{mission.quote_text}” +
+
+ — {mission.quote_author} +
+
+
+ Vision +
+
+

{mission.vision}

+
+
+
+
+
+ Mission +
+
+

{mission.mission}

+
+
+ +
+ + ); +}