feat: add divlo.fr

components/design/Button.tsx

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react'
+
+type ButtonProps = React.ComponentPropsWithRef<'button'>
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const { children, ...rest } = props
+
+    return (
+      <>
+        <button ref={ref} {...rest} className='btn btn-dark'>
+          {children}
+        </button>
+
+        <style jsx>
+          {`
+            .btn {
+              cursor: pointer;
+              border: 1px solid transparent;
+              padding: 0.375rem 0.75rem;
+              font-size: 1rem;
+              line-height: 1.5;
+              border-radius: 0.25rem;
+              transition: color 0.15s ease-in-out,
+                background-color 0.15s ease-in-out,
+                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+            }
+            .btn-dark {
+              color: #fff;
+              background-color: #343a40;
+              border-color: #343a40;
+            }
+            .btn-dark:hover {
+              color: #fff;
+              background-color: #23272b;
+              border-color: #1d2124;
+            }
+          `}
+        </style>
+      </>
+    )
+  }
+)

components/design/Input.tsx

@@ -0,0 +1,75 @@
+import { forwardRef } from 'react'
+
+interface InputProps extends React.HTMLProps<HTMLInputElement> {
+  label: string
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const { label, name, ...rest } = props
+
+  return (
+    <>
+      <div className='form-group-animation'>
+        <input ref={ref} {...rest} id={name} name={name} />
+        <label htmlFor={name} className='label'>
+          <span className='label-content'>{label}</span>
+        </label>
+      </div>
+
+      <style jsx>{`
+        .form-group-animation {
+          position: relative;
+          margin-top: 10px;
+          margin-bottom: 30px;
+          overflow: hidden;
+        }
+        .form-group-animation input {
+          width: 100%;
+          height: 100%;
+          padding-top: 35px;
+          color: var(--color-text-1);
+          border: none;
+          background: transparent;
+          outline: none;
+        }
+        .form-group-animation label {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          border-bottom: 1px solid #fff;
+        }
+        .form-group-animation label::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          bottom: -1px;
+          height: 100%;
+          width: 100%;
+          border-bottom: 3px solid var(--color-primary);
+          transform: translateX(-100%);
+          transition: transform 0.2s ease;
+        }
+        .label-content {
+          position: absolute;
+          bottom: 5px;
+          left: 0px;
+          transition: all 0.3s ease;
+        }
+        .form-group-animation input:focus + .label .label-content,
+        .form-group-animation input:valid + .label .label-content {
+          transform: translateY(-150%);
+          font-size: 14px;
+          color: var(--color-primary);
+        }
+        .form-group-animation input:focus + .label::after,
+        .form-group-animation input:valid + .label::after {
+          transform: translateX(0%);
+        }
+      `}
+      </style>
+    </>
+  )
+})

components/design/RevealFade.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from 'react'
+
+export const RevealFade: React.FC = props => {
+  const { children } = props
+
+  const htmlElement = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const observer = new window.IntersectionObserver(
+      (entries, observer) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('reveal-visible')
+            observer.unobserve(entry.target)
+          }
+        })
+      },
+      {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.28
+      }
+    )
+    observer.observe(htmlElement.current as HTMLDivElement)
+  }, [])
+
+  return (
+    <>
+      <div ref={htmlElement} className='reveal'>
+        {children}
+      </div>
+
+      <style jsx>{`
+        .reveal {
+          opacity: 0;
+          visibility: hidden;
+          transform: translateY(-30px);
+        }
+        .reveal-visible {
+          opacity: 1;
+          visibility: visible;
+          transform: translateY(0);
+          transition: all 500ms ease-out 100ms;
+        }
+      `}
+      </style>
+    </>
+  )
+}

components/design/Section/SectionHeading.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react'
+
+type SectionHeadingProps = React.ComponentPropsWithRef<'h2'>
+
+export const SectionHeading = forwardRef<
+HTMLHeadingElement,
+SectionHeadingProps
+>((props, ref) => {
+  const { children, ...rest } = props
+
+  return (
+    <>
+      <h2 ref={ref} {...rest} className='Section__title'>
+        {children}
+      </h2>
+
+      <style jsx>
+        {`
+          .Section__title {
+            font-size: 34px;
+            margin-top: 10px;
+            text-align: center;
+          }
+        `}
+      </style>
+    </>
+  )
+})

components/design/Section/index.tsx

@@ -0,0 +1,62 @@
+import { forwardRef } from 'react'
+
+import { ShadowContainer } from '../ShadowContainer'
+import { SectionHeading } from './SectionHeading'
+
+type SectionProps = React.ComponentPropsWithRef<'section'> & {
+  heading?: string
+  description?: string
+  isMain?: boolean
+  withoutShadowContainer?: boolean
+}
+
+export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
+  const {
+    children,
+    heading,
+    description,
+    isMain = false,
+    withoutShadowContainer = false,
+    ...rest
+  } = props
+
+  if (isMain) {
+    return (
+      <ShadowContainer style={{ marginTop: 50 }}>
+        <section ref={ref} {...rest}>
+          {heading != null && <SectionHeading>{heading}</SectionHeading>}
+          <div className='container-fluid'>{children}</div>
+        </section>
+      </ShadowContainer>
+    )
+  }
+
+  if (withoutShadowContainer) {
+    return (
+      <section ref={ref} {...rest}>
+        {heading != null && <SectionHeading>{heading}</SectionHeading>}
+        <div className='container-fluid'>{children}</div>
+      </section>
+    )
+  }
+
+  return (
+    <section ref={ref} {...rest}>
+      {heading != null && (
+        <SectionHeading style={{ ...(description != null && { margin: 0 }) }}>
+          {heading}
+        </SectionHeading>
+      )}
+      {description != null && (
+        <p style={{ marginTop: 7 }} className='text-center'>
+          {description}
+        </p>
+      )}
+      <ShadowContainer>
+        <div className='container-fluid'>
+          <div className='row row-padding'>{children}</div>
+        </div>
+      </ShadowContainer>
+    </section>
+  )
+})

components/design/ShadowContainer.tsx

@@ -0,0 +1,32 @@
+type ShadowContainerProps = React.ComponentPropsWithRef<'div'>
+
+export const ShadowContainer: React.FC<ShadowContainerProps> = props => {
+  const { children, className, ...rest } = props
+
+  return (
+    <>
+      <div
+        className={`shadow-container ${className != null ? className : ''}`}
+        {...rest}
+      >
+        {children}
+      </div>
+
+      <style jsx>
+        {`
+          .shadow-container {
+            display: flex;
+            flex-direction: column;
+            word-wrap: break-word;
+            box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
+            border: 1px solid black;
+            border-radius: 1rem;
+            height: 100%;
+            max-width: 100%;
+            margin-bottom: 50px;
+          }
+        `}
+      </style>
+    </>
+  )
+}

components/design/Textarea.tsx

@@ -0,0 +1,39 @@
+import { forwardRef } from 'react'
+
+interface TextareaProps extends React.HTMLProps<HTMLTextAreaElement> {
+  label: string
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    const { label, name, ...rest } = props
+
+    return (
+      <>
+        <div className='form-group'>
+          <label htmlFor={name}>{label}</label>
+          <br />
+          <textarea id={name} name={name} ref={ref} {...rest} />
+        </div>
+
+        <style jsx>{`
+          .form-group {
+            padding-top: 15px;
+            margin-bottom: 30px;
+          }
+          .form-group textarea {
+            background: transparent;
+            color: var(--color-text);
+            outline: none;
+            width: 100%;
+            height: auto;
+            padding: 10px;
+            resize: vertical;
+            margin-top: 8px;
+          }
+        `}
+        </style>
+      </>
+    )
+  }
+)

components/design/Tooltip.tsx

@@ -0,0 +1,49 @@
+interface TooltipProps extends React.ComponentPropsWithRef<'div'> {
+  title: string
+  children: React.ReactNode
+}
+
+export const Tooltip: React.FC<TooltipProps> = props => {
+  const { title, children, ...rest } = props
+  return (
+    <>
+      <span className='tooltip' {...rest}>
+        {children}
+        <span className='title'>{title}</span>
+      </span>
+
+      <style jsx>{`
+        .title {
+          color: #fff;
+          font-size: 11px;
+          font-weight: 400;
+          line-height: 1;
+          display: inline-block;
+          background-color: #222222;
+          padding: 5px 8px;
+          white-space: nowrap;
+          position: absolute;
+          top: 100%;
+          margin-top: 10px;
+          z-index: 1;
+          opacity: 0;
+          visibility: hidden;
+          border-radius: 3px;
+          transition: all 0.15s ease-in;
+          transform: translate3d(0, -15px, 0);
+          backface-visibility: hidden;
+        }
+        .tooltip ~ .tooltip:hover .title,
+        .tooltip:first-child:hover .title {
+          opacity: 1;
+          visibility: visible;
+          transition: all 0.35s ease-out;
+          transform: translate3d(0, 0, 0);
+          margin: 0;
+          backface-visibility: hidden;
+        }
+      `}
+      </style>
+    </>
+  )
+}