404.js (2477B)
1 import React from 'react'; 2 import { graphql, useStaticQuery, Link } from 'gatsby'; 3 import Footer from '../components/footer'; 4 import SEO from '../components/seo'; 5 const cover = `https://solarsystem.nasa.gov/system/downloadable_items/862_PIA21590.jpg`; 6 7 const NotFoundPage = () => { 8 const data = useStaticQuery(graphql` 9 query getHomeName404 { 10 site { 11 siteMetadata { 12 homeName 13 } 14 } 15 } 16 `); 17 const { homeName } = data.site.siteMetadata; 18 return ( 19 <div className={'error-template'}> 20 <SEO title="404: Not found" /> 21 <div 22 className={'site-wrapper'} 23 style={{ 24 backgroundColor: `#000`, 25 backgroundImage: `url(${cover})`, 26 backgroundRepeat: `no-repeat`, 27 backgroundSize: `contain`, 28 }} 29 > 30 <header 31 className={'site-header outer no-cover'} 32 style={{ background: `transparent` }} 33 > 34 <div className={'inner'}> 35 <nav className={'site-nav-center'}> 36 <Link to={'/'} className={'site-nav-logo'}> 37 {homeName} 38 </Link> 39 </nav> 40 </div> 41 </header> 42 <main id={'site-main'} className={'site-main outer'}> 43 <div className={'inner'}> 44 <section className={'error-message'}> 45 <h1 46 className={'error-code'} 47 style={{ 48 color: `rgb(240, 237, 200)`, 49 opacity: 0.9, 50 }} 51 > 52 404 53 </h1> 54 <br /> 55 <p 56 className={'error-description'} 57 style={{ color: `rgb(240, 237, 200)`, opacity: 0.9 }} 58 > 59 It was quite lonely and cold here, far away from the Sun. 60 <br /> 61 Thanks for stopping by! 62 </p> 63 <br /> 64 <Link 65 to={'/'} 66 className={'error-link'} 67 style={{ 68 border: `1px solid rgb(240, 237, 200)`, 69 borderRadius: `20px`, 70 color: `rgb(240, 237, 200)`, 71 padding: `9px 16px`, 72 }} 73 > 74 Land on the home page. 75 </Link> 76 </section> 77 </div> 78 </main> 79 <Footer style={{ background: `transparent` }} /> 80 </div> 81 </div> 82 ); 83 }; 84 85 export default NotFoundPage;