Merge pull request #15 from uffsnlp/11

Implementa o Header

gatsby-browser.js

@@ -1 +1 @@
-import "./src/styles/global.scss";
+import "./src/assets/scss/global.scss";

package.json

@@ -14,6 +14,7 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
+    "aos": "^3.0.0-beta.6",
     "bootstrap": "^5.0.0-beta2",
     "gatsby": "^2.26.1",
     "gatsby-plugin-postcss": "^3.7.0",

src/assets/scss/_variables.scss

@@ -0,0 +1,3 @@
+$orange: #f23827;
+$orange-grey: #a64f47;
+$red: #a60303;

src/assets/scss/global.scss

@@ -0,0 +1,10 @@
+@import "bootstrap/scss/bootstrap-grid.scss";
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
+
+* {
+    font-family: Roboto, sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}

src/components/Header/header.scss

@@ -0,0 +1,40 @@
+@import "../../assets/scss/variables";
+
+.header {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    z-index: -2;
+
+    &__image {
+        position: relative;
+        width: 100%;
+        height: auto;
+    }
+
+    &__title {
+        font-weight: bolder;
+        font-size: 2.5rem;
+        background: linear-gradient(135deg, $red, $orange);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    &__subtitle {
+        font-weight: 300;
+        color: darken($color: $orange-grey, $amount: 30%);
+    }
+
+    svg {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 30vw;
+        z-index: -1;
+    }
+}

src/components/Header/index.jsx

@@ -0,0 +1,106 @@
+import React, { Component } from 'react';
+import "./header.scss";
+import HeaderImg from "../../assets/images/undraw_teacher_35j2.svg";
+
+class Header extends Component {
+    render() { 
+        return (
+            <header className="header">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-md-6">
+                            <h1 
+                                className="header__title"
+                                data-aos="fade-down"
+                            >
+                                { this.props.title }
+                            </h1>
+
+                            <h3
+                                className="header__subtitle"
+                                data-aos="fade-down"
+                                data-aos-delay="200"
+                            >
+                                { this.props.subtitle }
+                            </h3>
+                        </div>
+
+                        <div className="col-md-6">
+                            <img 
+                                src={HeaderImg}
+                                alt="Grupo de Estudos em NLP - UFFS"
+                                className="header__image"
+                                data-aos="zoom-out"
+                                data-aos-delay="500"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                {/* <svg 
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 100 100"
+                    preserveAspectRatio="none"
+                >
+                    <defs>
+                        <linearGradient id="shadow1" x1="0%" y1="0%" x2="100%" y2="0%">
+                            <stop
+                                offset="0%"
+                                style={{
+                                    stopColor: "rgba(255,255,255,0.50)",
+                                    stopOpacity: 1,
+                                }}
+                            />
+                            <stop 
+                                offset="100%"
+                                style={{
+                                    stopColor: "rgba(255, 174, 166, 0.45)",
+                                    stopOpacity: 1,
+                                }}
+                            />
+                        </linearGradient>
+                    </defs>
+
+                    <polygon fill="url(#shadow1)" points="0,60 100,0 100,100 0,100"/>
+                </svg>
+
+                <svg 
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 100 100"
+                    preserveAspectRatio="none"
+                >
+                    <defs>
+                        <linearGradient id="shadow2" x1="0%" y1="0%" x2="100%" y2="0%">
+                            <stop 
+                                offset="0%"
+                                style={{
+                                    stopColor: "rgba(255, 174, 166, 0.45)",
+                                    stopOpacity: 1,
+                                }}
+                            />
+                            <stop
+                                offset="100%"
+                                style={{
+                                    stopColor: "rgba(255, 255, 255, 0.50)",
+                                    stopOpacity: 1,
+                                }}
+                            />
+                        </linearGradient>
+                    </defs>
+
+                    <polygon fill="url(#shadow2)" points="0,80 100,20 100,100 0,100"/>
+                </svg>
+
+                <svg 
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 100 100"
+                    preserveAspectRatio="none"
+                >
+                    <polygon fill="white" points="0,100 100,40 100,100 0,100"/>
+                </svg> */}
+            </header>
+        );
+    }
+}
+
+export default Header;

src/pages/index.js

@@ -1,16 +1,31 @@
 import React, { Component } from "react"
+import Header from "../components/Header"
+
+import AOS from "aos";
+import "aos/dist/aos.css";
+
+AOS.init();
 
 export default class IndexPage extends Component {
     render() {
         return (
-            <div className="container">
-                <div className="row">
-                    <div className="col-sm-8" style={{backgroundColor: "red"}}>a</div>
-                    <div className="col-sm-4" style={{backgroundColor: "blue"}}>a</div>
-                </div>
-
-                <button>Click Me</button>
-                <button>Click Me</button>
+            <div>
+                <Header 
+                    title="Grupo de Estudos em NLP - UFFS"
+                    subtitle="Ea pariatur ea cupidatat irure in enim incididunt elit consectetur cupidatat."
+                />
+
+                <p>Consequat minim ipsum exercitation minim. Ad dolor consectetur incididunt exercitation in adipisicing nisi nisi anim reprehenderit. Cillum laboris ut excepteur non minim.
+
+Ipsum non fugiat culpa cupidatat. Occaecat nisi cillum dolore ipsum. Fugiat est id adipisicing ut aliquip amet cillum incididunt proident ea pariatur minim. Laborum eiusmod enim aliqua amet culpa qui anim irure aliquip ut minim culpa cupidatat. Cupidatat consequat proident nostrud elit dolore laborum. Cillum cupidatat nisi commodo velit sint duis enim eiusmod amet nostrud aute. Sit minim veniam elit proident nisi velit.
+
+Dolore ipsum nisi labore non fugiat minim irure dolor voluptate consequat ad aute. Minim aute fugiat dolor elit incididunt excepteur fugiat ullamco aute occaecat. Eu qui aute nisi dolore officia ad Lorem. Esse non do deserunt ullamco excepteur amet. Do elit aute officia labore esse id aute nisi qui. Non minim aliqua eu proident minim dolore labore in.
+
+Esse proident enim consectetur do do. Velit nulla Lorem quis consectetur nisi officia voluptate commodo elit. Excepteur consequat anim officia anim culpa id eiusmod sunt sit consequat officia pariatur excepteur. Veniam occaecat aliquip consectetur consectetur sint aute deserunt ea aliqua officia.
+
+Adipisicing excepteur non enim ea. Sunt aliqua laboris non nulla minim exercitation deserunt eu sint officia id fugiat cillum duis. Nisi non veniam cillum esse excepteur. Non ipsum qui quis adipisicing cillum officia Lorem enim amet commodo.
+
+Cupidatat commodo veniam ex ad. Eu ut est ut excepteur officia ea minim excepteur amet pariatur cupidatat. Nostrud do enim est quis quis est cupidatat culpa dolor deserunt sint. Occaecat quis velit id id consequat nisi magna consectetur magna et qui mollit sunt laborum. Ad fugiat est aliqua do elit minim. Irure fugiat veniam irure exercitation nostrud exercitation veniam est eiusmod non occaecat amet.</p>
             </div>
         )
     }