mirror of
https://github.com/tjsga/tj-sga-website-react.git
synced 2025-04-21 12:00:17 -04:00
Added navbar dropdown, mission
This commit is contained in:
Michael Fatemi
parent
2fdfaa954a
commit
077b0f9a89
|
|
@ -23,6 +23,12 @@
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
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`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
|
|
||||||
|
<!-- Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Arapey:ital@0;1&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
<title>React App</title>
|
<title>React App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
11
src/App.css
11
src/App.css
|
|
@ -64,3 +64,14 @@
|
||||||
.flex-2 {
|
.flex-2 {
|
||||||
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;
|
||||||
|
}
|
||||||
|
|
@ -6,6 +6,7 @@ import './App.css';
|
||||||
|
|
||||||
import index from './pages/index';
|
import index from './pages/index';
|
||||||
import initiatives from './pages/initiatives';
|
import initiatives from './pages/initiatives';
|
||||||
|
import mission from './pages/mission';
|
||||||
import news from './pages/news';
|
import news from './pages/news';
|
||||||
import newsArticle from './pages/newsArticle';
|
import newsArticle from './pages/newsArticle';
|
||||||
import notFound from './pages/404';
|
import notFound from './pages/404';
|
||||||
|
|
@ -20,6 +21,7 @@ export default function App() {
|
||||||
<Route path='/initiatives' exact component={initiatives} />
|
<Route path='/initiatives' exact component={initiatives} />
|
||||||
<Route path='/news/:articleId' component={newsArticle} />
|
<Route path='/news/:articleId' component={newsArticle} />
|
||||||
<Route path='/news' exact component={news} />
|
<Route path='/news' exact component={news} />
|
||||||
|
<Route path='/mission' exact component={mission} />
|
||||||
<Route path='/officers' exact component={officers} />
|
<Route path='/officers' exact component={officers} />
|
||||||
<Route path='/committee' exact component={committee} />
|
<Route path='/committee' exact component={committee} />
|
||||||
<Route path='/:path' component={notFound} />
|
<Route path='/:path' component={notFound} />
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,15 @@ let pages = [
|
||||||
url: '/',
|
url: '/',
|
||||||
title: 'Home',
|
title: 'Home',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
url: '#',
|
||||||
|
title: 'About Us',
|
||||||
|
items: [
|
||||||
|
{ url: '/officers', title: 'Officers' },
|
||||||
|
{ url: '/committee', title: 'Executive Committee' },
|
||||||
|
{ url: '/class-council', title: 'Class Council' },
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
url: '/news',
|
url: '/news',
|
||||||
title: 'News',
|
title: 'News',
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,37 @@
|
||||||
.mission-box {
|
.mission-box {
|
||||||
padding: 0px 20px;
|
padding: 0px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,14 +8,3 @@
|
||||||
line-height: 33px;
|
line-height: 33px;
|
||||||
font-weight: 300;
|
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;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 163 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
51
src/pages/mission.tsx
Normal file
51
src/pages/mission.tsx
Normal file
|
|
@ -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 (
|
||||||
|
<>
|
||||||
|
<Hero heading='Mission and History' />
|
||||||
|
<div>
|
||||||
|
<div className='mission-quote'>
|
||||||
|
<span className='mission-quote-text'>“{mission.quote_text}”</span>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<span className='mission-quote-author'>— {mission.quote_author}</span>
|
||||||
|
</div>
|
||||||
|
<div className='row'>
|
||||||
|
<div className='flex-1'>
|
||||||
|
<span className='mission-header'>Vision</span>
|
||||||
|
</div>
|
||||||
|
<div className='flex-2'>
|
||||||
|
<p className='mission-para'>{mission.vision}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div className='row'>
|
||||||
|
<div className='flex-1'>
|
||||||
|
<span className='mission-header'>Mission</span>
|
||||||
|
</div>
|
||||||
|
<div className='flex-2'>
|
||||||
|
<p className='mission-para'>{mission.mission}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='text-center'>
|
||||||
|
<a
|
||||||
|
href='https://docs.google.com/spreadsheets/d/1a3RYdqrDi1IPG9BKWQ2xhoX3YCPQKUl_FsRLvIVEMPg/edit?usp=drive_open&ouid=0'
|
||||||
|
className='blue-button'
|
||||||
|
>
|
||||||
|
Previous Leadership
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user