frontend: Landing page
This commit is contained in:
Divlo
parent
02b3ef84f0
commit
9d9aed8bcf
107
website/package-lock.json
generated
107
website/package-lock.json
generated
@ -4181,6 +4181,11 @@
|
||||
"safe-buffer": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"keycode": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
|
||||
"integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
|
||||
},
|
||||
"kind-of": {
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
|
||||
@ -5948,11 +5953,100 @@
|
||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.6.tgz",
|
||||
"integrity": "sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q=="
|
||||
},
|
||||
"react-event-listener": {
|
||||
"version": "0.6.6",
|
||||
"resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
|
||||
"integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.2.0",
|
||||
"prop-types": "^15.6.0",
|
||||
"warning": "^4.0.1"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.8.6",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
|
||||
"integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
|
||||
},
|
||||
"react-swipeable-views": {
|
||||
"version": "0.13.9",
|
||||
"resolved": "https://registry.npmjs.org/react-swipeable-views/-/react-swipeable-views-0.13.9.tgz",
|
||||
"integrity": "sha512-WXC2FKYvZ9QdJ31v9LjEJEl1bA7E4AcaloTkbW0uU0dYf5uvv4aOpiyxubvOkVl1a5L2UAHmKSif4TmJ9usrSg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "7.0.0",
|
||||
"prop-types": "^15.5.4",
|
||||
"react-swipeable-views-core": "^0.13.7",
|
||||
"react-swipeable-views-utils": "^0.13.9",
|
||||
"warning": "^4.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
|
||||
"integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.12.0"
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
|
||||
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-swipeable-views-core": {
|
||||
"version": "0.13.7",
|
||||
"resolved": "https://registry.npmjs.org/react-swipeable-views-core/-/react-swipeable-views-core-0.13.7.tgz",
|
||||
"integrity": "sha512-ekn9oDYfBt0oqJSGGwLEhKvn+QaqMGTy//9dURTLf+vp7W5j6GvmKryYdnwJCDITaPFI2hujXV4CH9krhvaE5w==",
|
||||
"requires": {
|
||||
"@babel/runtime": "7.0.0",
|
||||
"warning": "^4.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
|
||||
"integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.12.0"
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
|
||||
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-swipeable-views-utils": {
|
||||
"version": "0.13.9",
|
||||
"resolved": "https://registry.npmjs.org/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.9.tgz",
|
||||
"integrity": "sha512-QLGxRKrbJCbWz94vkWLzb1Daaa2Y/TZKmsNKQ6WSNrS+chrlfZ3z9tqZ7YUJlW6pRWp3QZdLSY3UE3cN0TXXmw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "7.0.0",
|
||||
"keycode": "^2.1.7",
|
||||
"prop-types": "^15.6.0",
|
||||
"react-event-listener": "^0.6.0",
|
||||
"react-swipeable-views-core": "^0.13.7",
|
||||
"shallow-equal": "^1.2.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
|
||||
"integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.12.0"
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
|
||||
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
|
||||
@ -6380,6 +6474,11 @@
|
||||
"kind-of": "^6.0.2"
|
||||
}
|
||||
},
|
||||
"shallow-equal": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
|
||||
"integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
|
||||
},
|
||||
"shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
@ -7221,6 +7320,14 @@
|
||||
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
|
||||
"integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
|
||||
},
|
||||
"warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "2.0.0-beta.13",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.0.0-beta.13.tgz",
|
||||
|
||||
@ -14,7 +14,9 @@
|
||||
"next-fonts": "^1.0.3",
|
||||
"nprogress": "^0.2.0",
|
||||
"react": "16.13.0",
|
||||
"react-dom": "16.13.0"
|
||||
"react-dom": "16.13.0",
|
||||
"react-swipeable-views": "^0.13.9",
|
||||
"react-swipeable-views-utils": "^0.13.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cross-env": "^7.0.2"
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
import { Fragment, useEffect } from 'react';
|
||||
import SwipeableViews from 'react-swipeable-views';
|
||||
import { autoPlay } from 'react-swipeable-views-utils';
|
||||
import Link from 'next/link';
|
||||
import HeadTag from '../components/HeadTag';
|
||||
import Loader from '../components/Loader';
|
||||
import '../public/css/pages/index.css';
|
||||
|
||||
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
|
||||
|
||||
const Home = () => {
|
||||
|
||||
@ -17,7 +24,43 @@ const Home = () => {
|
||||
description="FunctionProject est un projet créé par Divlo qui a pour but de rassembler plein de mini-programme permettant de faire plusieurs choses comme savoir la météo, générer un nombre aléatoire, etc."
|
||||
image="/images/FunctionProject_icon_small.png"
|
||||
/>
|
||||
<div>Home</div>
|
||||
<div className="Home__container container-fluid text-center">
|
||||
|
||||
<AutoPlaySwipeableViews enableMouseEvents interval={30000}>
|
||||
|
||||
{/* Slide 1 */}
|
||||
<div className="row align-items-center justify-content-center">
|
||||
<div className="col-24">
|
||||
<h1 className="Home__title-important important">FunctionProject</h1>
|
||||
<p className="Home__description">
|
||||
Apprenez la programmation grâce à l'apprentissage par projet.<br/>
|
||||
Découvrez la liste des fonctions disponibles :
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-24 Home__logo-spin">
|
||||
<Link href={"/functions"}>
|
||||
<a><Loader width="100%" height="13em" speed="5s" /></a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Slide 2 */}
|
||||
<div className="row align-items-center justify-content-center">
|
||||
<div className="col-24">
|
||||
<h1 className="Home__title-important important">Code Source</h1>
|
||||
<p className="Home__description">
|
||||
Le partage est essentiel afin de progresser tous ensemble. <br/>
|
||||
Par conséquent le code source du projet est disponible sur mon profil GitHub :
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-24">
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://github.com/Divlo/FunctionProject"> <img className="Home__image-width" src="/images/GitHub.png" alt="GitHub"/> </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</AutoPlaySwipeableViews>
|
||||
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
18
website/public/css/pages/index.css
Normal file
18
website/public/css/pages/index.css
Normal file
@ -0,0 +1,18 @@
|
||||
.Home__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.Home__title-important {
|
||||
font-weight: 500;
|
||||
}
|
||||
.Home__logo-spin {
|
||||
cursor: pointer;
|
||||
}
|
||||
.Home__image-width {
|
||||
width: 13em;
|
||||
}
|
||||
div[aria-hidden="false"] {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
BIN
website/public/images/GitHub.png
Normal file
BIN
website/public/images/GitHub.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Reference in New Issue
Block a user