Created
February 8, 2020 09:59
-
-
Save imSrbh/27cddf484aff5a35eed25cc74d0383c9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Copyright (c) 2017-present, Facebook, Inc. | |
* | |
* This source code is licensed under the MIT license found in the | |
* LICENSE file in the root directory of this source tree. | |
*/ | |
const React = require('react'); | |
const CompLibrary = require('../../core/CompLibrary.js'); | |
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */ | |
const Container = CompLibrary.Container; | |
const GridBlock = CompLibrary.GridBlock; | |
/* FIRST MAIN BLOCK */ | |
class HomeSplash extends React.Component { | |
render() { | |
const { siteConfig, language = '' } = this.props; | |
const { baseUrl, docsUrl } = siteConfig; | |
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`; | |
const langPart = `${language ? `${language}/` : ''}`; | |
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`; | |
const SplashContainer = props => ( | |
<div className="homeContainer"> | |
<div className="homeSplashFade"> | |
<div className="wrapper homeWrapper">{props.children}</div> | |
</div> | |
</div> | |
); | |
const FlexContainer = props => ( <div className="section container"> {props.children} </div> ); | |
const FlexItem = props => ( <div className={`item ${props.className}`}>{props.children}</div> ); | |
const Logo = props => ( | |
<div className="projectLogo"> | |
<img src={props.src} alt="Project Logo" /> | |
</div> | |
); | |
const ProjectTitle = () => ( | |
<h2 className="projectTitle"> | |
{siteConfig.tagline} | |
<small>{siteConfig.frontPagePresentation}</small> | |
</h2> | |
); | |
const PromoSection = props => ( | |
<div id="promo" className="section promoSection"> | |
<div className="promoRow"> | |
<div className="pluginRowBlock">{props.children}</div> | |
</div> | |
</div> | |
); | |
const Button = props => ( | |
<div className="pluginWrapper buttonWrapper"> | |
<a className={props.className} href={props.href} target={props.target}> | |
{props.children} | |
</a> | |
</div> | |
); | |
const ImgSoftware = props => ( | |
<div className="pluginWrapper"> | |
{/* <a href={`${baseUrl}${siteConfig.frontPageImgLink}`} > | |
<img id="imgSoft" src={`${baseUrl}${siteConfig.frontPageImg}`} alt="GAMA-Platform Software" /> | |
</a> */} | |
</div> | |
); | |
return ( | |
<SplashContainer> | |
<div className="inner"> | |
<FlexContainer> | |
<FlexItem className="logoItem"> | |
<Logo src={`${baseUrl}${siteConfig.footerIcon}`} /> | |
</FlexItem> | |
<FlexItem className=""> | |
<ProjectTitle siteConfig={siteConfig} /> | |
</FlexItem> | |
</FlexContainer> | |
<FlexContainer> | |
<FlexItem className="fRight"> | |
| |
</FlexItem> | |
<FlexItem className="pull-right"> | |
<PromoSection> | |
<Button href={docUrl('devices')} className="button buttonOrange">About</Button> | |
{/* <Button href={docUrl('Tutorials')} className="button buttonRed">Learn</Button> */} | |
<Button href={docUrl('Blog')} className="button buttonBlue">Blog</Button> | |
</PromoSection> | |
</FlexItem> | |
<FlexItem className="fRight"> | |
| |
</FlexItem> | |
</FlexContainer> | |
<ImgSoftware /> | |
</div> | |
</SplashContainer> | |
); | |
} | |
} | |
class Index extends React.Component { | |
render() { | |
const {config: siteConfig, language = ''} = this.props; | |
const {baseUrl} = siteConfig; | |
const Design = props => ( | |
<style dangerouslySetInnerHTML={{__html: ` | |
.container { | |
display: inline-flex; | |
align-items: center; | |
width: 100%; | |
} | |
.item{ | |
width: 50%; | |
margin: 0 3em; | |
} | |
/* One Screen */ | |
.fixedHeaderContainer, footer{ display: none; } | |
.navPusher{ padding: 0; } | |
.homeSplashFade { | |
height: 100vh; | |
position: relative; | |
} | |
body { background-color: black; } | |
.projectTitle { | |
text-align: left; | |
color: Gold; | |
} | |
.projectTitle > small { | |
margin: 1.5em 0; | |
text-align: justify; | |
} | |
.promoSection { margin: 3em 0; } | |
.projectLogo { | |
position: inherit !important; | |
padding: 0 !important; | |
} | |
.projectLogo img{ | |
width: auto; | |
} | |
/* BUTTONS */ | |
.button { border-width: 2px;font-weight: bold; } | |
.fLeft, .fRight > div { | |
float: right; | |
} | |
.fRight { | |
padding-right: 80px; | |
} | |
.logoItem { | |
text-align: right; | |
} | |
#back-to-top { | |
display: none; | |
} | |
@media only screen and (max-width: 1200px) { | |
.homeContainer .homeWrapper .projectLogo { | |
display: block; | |
} | |
.homeContainer .homeWrapper .projectLogo img { | |
height: 100%; | |
max-height: 250px; | |
} | |
.fLeft, .fRight { | |
padding: 0; | |
} | |
} | |
@media only screen and (max-device-width: 736px) { | |
.logoItem { | |
display: none; | |
} | |
.item { | |
width: 100% | |
} | |
h2, h2 small { | |
text-align: center !important; | |
text-justify: inherit; | |
} | |
.container{ | |
flex-wrap: wrap; | |
} | |
.fLeft, .fRight { | |
width: auto; | |
margin: 0 auto; | |
} | |
} | |
`}} /> | |
); | |
const Script = props => ( | |
<script type="text/javascript" src="./js/index.js"></script> | |
); | |
return ( | |
<div> | |
<Design/> | |
<Script/> | |
<HomeSplash siteConfig={siteConfig} language={language} /> | |
</div> | |
); | |
} | |
} | |
module.exports = Index; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment