2020-03-21 16:43:37 +01:00
import { Fragment , useEffect } from 'react' ;
2020-03-22 16:21:19 +01:00
import SwipeableViews from 'react-swipeable-views' ;
import { autoPlay } from 'react-swipeable-views-utils' ;
import Link from 'next/link' ;
2020-03-18 16:26:18 +01:00
import HeadTag from '../components/HeadTag' ;
2020-03-22 16:21:19 +01:00
import Loader from '../components/Loader' ;
import '../public/css/pages/index.css' ;
const AutoPlaySwipeableViews = autoPlay ( SwipeableViews ) ;
2020-03-18 16:26:18 +01:00
2020-03-21 16:43:37 +01:00
const Home = ( ) => {
useEffect ( ( ) => {
console . log (
'%c ⚙️ FunctionProject' ,
'color: #ffd800; font-weight: bold; background-color: #181818;padding: 10px;border-radius: 10px;font-size: 20px'
) ;
} , [ ] ) ;
return (
< Fragment >
< HeadTag
title = "FunctionProject"
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"
/ >
2020-03-22 16:21:19 +01:00
< 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 < / h 1 >
< p className = "Home__description" >
Apprenez la programmation grâce à l ' apprentissage par projet . < br / >
Découvrez la liste des fonctions disponibles :
< / p >
< / d i v >
< div className = "col-24 Home__logo-spin" >
< Link href = { "/functions" } >
< a > < Loader width = "100%" height = "13em" speed = "5s" / > < / a >
< / L i n k >
< / d i v >
< / d i v >
{ /* Slide 2 */ }
< div className = "row align-items-center justify-content-center" >
< div className = "col-24" >
< h1 className = "Home__title-important important" > Code Source < / h 1 >
< 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 >
< / d i v >
< 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 >
< / d i v >
< / d i v >
< / A u t o P l a y S w i p e a b l e V i e w s >
< / d i v >
2020-03-21 16:43:37 +01:00
< / F r a g m e n t >
) ;
}
2020-03-18 16:26:18 +01:00
export default Home ;