diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js')
| -rw-r--r-- | opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js | 17 |
1 files changed, 11 insertions, 6 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js index 6a9ea00c..98aa0af2 100644 --- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js +++ b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js @@ -1,16 +1,21 @@ import React from 'react' +import Image from 'next/image' import { Container, Jumbotron, Button } from 'reactstrap' -import './JumbotronHeader.sass' +import { jumbotronHeader, jumbotron, dc } from './JumbotronHeader.module.scss' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons' const JumbotronHeader = () => ( - <section className="jumbotron-header"> + <section className={jumbotronHeader}> <Container> - <Jumbotron className="text-center"> + <Jumbotron className={jumbotron}> <h1> - Open<span className="dc">DC</span> + Open<span className={dc}>DC</span> </h1> <p className="lead">Collaborative Datacenter Simulation and Exploration for Everybody</p> - <img src="img/logo.png" className="img-responsive mt-3" alt="OpenDC" /> + <div className="mt-5"> + <Image src="/img/logo.png" layout="intrinsic" height={110} width={110} alt="OpenDC" /> + </div> <p className="lead mt-5"> <Button tag="a" @@ -18,7 +23,7 @@ const JumbotronHeader = () => ( href="https://atlarge-research.com/pdfs/ccgrid21-opendc-paper.pdf" color="warning" > - Read about <strong>OpenDC 2.0</strong> <i className="fa fa-external-link" /> + Read about <strong>OpenDC 2.0</strong> <FontAwesomeIcon icon={faExternalLinkAlt} /> </Button> </p> </Jumbotron> |