[Not Found] add component inside toolkit

[guillaumechervetaxa]

import React from 'react';
import { Title } from '@axa-fr/react-toolkit-all';

import './notfound.scss';

const NotFound = () => (
  <div>
    <Title name="Not found" />
    <div className="container container--notfound">
      <h1 className="af-notfound__title">
        <div className="af-notfound__title-covernumber">
          <span className="af-notfound__title-number">404</span>
        </div>
        <div className="af-notfound__title-covernot">
          <span className="af-notfound__title-not">
            not
            <br />
            found
          </span>
        </div>
      </h1>
      <p className="af-notfound__message">The page your are looking for is not here!</p>
    </div>
  </div>
);

export default NotFound;

.container--notfound {
  min-height: 500px;
  height: 50vh;
  position: relative;
  overflow: hidden; }

.af-notfound__title {
  font-size: 5em;
  color: #00008f;
  font-family: "Source Sans Pro", Arial, sans-serif;
  position: relative;
  height: 100%; }
  .af-notfound__title:after {
    content: '';
    width: 63px;
    height: 700px;
    position: absolute;
    background-color: #ff1721;
    left: 50%;
    top: -70px;
    box-shadow: 0px -3px 26px rgba(0, 0, 0, 0.6);
    transform: rotateZ(29deg) translate(-50%, 0);
    z-index: 2; }
  .af-notfound__title-covernumber {
    position: absolute;
    transform: translate(-50%, 0);
    left: 40%;
    font-size: 3em;
    letter-spacing: -20px;
    top: 3%;
    overflow: hidden;
    height: 250px;
    width: 350px; }
  .af-notfound__title-number {
    animation: slideToLeft 0.7s cubic-bezier(0.86, 0, 0.07, 1);
    position: absolute;
    right: 0; }
  .af-notfound__title-covernot {
    position: absolute;
    top: 79%;
    left: 60%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    font-weight: 800;
    line-height: 0.8em;
    letter-spacing: -10px;
    font-family: Georgia, "Times New Roman", Times, serif, arial;
    color: black;
    font-size: 1.1em;
    overflow: hidden;
    height: 140px;
    width: 350px; }
  .af-notfound__title-not {
    animation: slideToRight 0.7s cubic-bezier(0.86, 0, 0.07, 1);
    position: absolute;
    left: 0; }

.af-notfound__message {
  position: absolute;
  color: #00008f;
  top: 27%;
  right: 24%;
  font-size: 2.1em;
  font-family: Georgia, "Times New Roman", Times, serif, arial;
  font-weight: 600;
  width: 20%;
  animation: appearmessage 1s cubic-bezier(0.86, 0, 0.07, 1); }

@keyframes slideToLeft {
  from {
    right: -100%; }
  to {
    right: 0; } }

@keyframes slideToRight {
  from {
    left: -100%; }
  to {
    left: 0; } }

@keyframes appearmessage {
  0% {
    opacity: 0;
    right: 54%; }
  50% {
    opacity: 0;
    right: 30%; }
  100% {
    opacity: 1;
    right: 24%; } }

[arnaudforaison]

Still current ?

[djaumes]

Proposition simple pour les 403 et 404:

• Message clair et concis, proposition de solution: retour accueil applicatif;
• Contexte applicatif (header / footer);
• visuel simple.

404 403

Pas de solution miracle pour la 500.