Parcourir la source

add the homepage

AlexiCauvin il y a 6 ans
Parent
révision
98bf526026

+ 31 - 0
src/component/HomepageCard/HomepageCard.jsx Voir le fichier

@@ -0,0 +1,31 @@
1
+import React, { Component } from 'react'
2
+import LogoHomepage from '../../img/logoHeader.svg'
3
+
4
+class HomepageCard extends Component {
5
+  render () {
6
+    return (
7
+      <div className='card homepagecard'>
8
+        <div className='card-body homepagecard__body'>
9
+          <div className='homepagecard__title text-center my-4'>
10
+            Bienvenue sur Tracim
11
+          </div>
12
+          <div className='homepagecard__thanks text-center'>
13
+            Merci de nous faire confiance et d'utiliser notre outil collaboratif
14
+          </div>
15
+          <div className='homepagecard__delimiter delimiter' />
16
+          <div className='homepagecard__text text-center mb-5'>
17
+            Vous allez créez votre premier espace de travail
18
+          </div>
19
+          <div className='homepagecard__btn btn btn-outline-primary'>
20
+            Créer votre espace de travail
21
+          </div>
22
+          <div className='homepagecard__logo mt-5 mb-3'>
23
+            <img src={LogoHomepage} alt='logo homepage' />
24
+          </div>
25
+        </div>
26
+      </div>
27
+    )
28
+  }
29
+}
30
+
31
+export default HomepageCard

+ 16 - 0
src/container/Homepage.jsx Voir le fichier

@@ -0,0 +1,16 @@
1
+import React, { Component } from 'react'
2
+import HomepageCard from '../Component/HomepageCard/HomepageCard.jsx'
3
+
4
+class Homepage extends Component {
5
+  render () {
6
+    return (
7
+      <section className='homepage'>
8
+        <div className='container-fluid'>
9
+          <HomepageCard />
10
+        </div>
11
+      </section>
12
+    )
13
+  }
14
+}
15
+
16
+export default Homepage

+ 5 - 0
src/css/Homepage.styl Voir le fichier

@@ -0,0 +1,5 @@
1
+.homepage
2
+  display flex
3
+  width 100%
4
+  background-color darkBlue
5
+

+ 22 - 0
src/css/HomepageCard.styl Voir le fichier

@@ -0,0 +1,22 @@
1
+.homepagecard
2
+  margin 100px auto
3
+  width 600px
4
+  &__title
5
+    font-size 35px
6
+    font-weight 600
7
+    text-transform uppercase
8
+    color blue
9
+  &__thanks
10
+    font-size 20px
11
+  &__delimiter
12
+    margin 50px auto
13
+  &__text
14
+    font-size 20px
15
+  &__btn
16
+    margin-left calc(50% - 150px) /* 150px => width: 300px / 2 */
17
+    padding 15px 10px
18
+    width 300px
19
+    cursor pointer
20
+  &__logo
21
+    margin-left calc(50% - 90px) /* 90px => width: 180px / 2 */
22
+    width 180px

+ 3 - 0
src/css/index.styl Voir le fichier

@@ -31,3 +31,6 @@ html, body, #content
31 31
 @import 'PopupCreateContainer'
32 32
 @import 'FileContent'
33 33
 @import 'WksContent'
34
+
35
+@import 'Homepage'
36
+@import 'HomepageCard'