feat/update content (#142)

* Initial commit from Create Next App * ✨ setup * 🚑 fix download page (#36) * Fix/typo header (#39) * ✨ add maj to header links * adjust header width * trigger deploy * trigger deploy * 🚀 deploy * 🔥 remove hello.ts init file * 📝 update readme * fix/download-page (#37) (#48) * 🚑 fix download links * Fix/change download links (#53) * 🚑 fix download links * Fix/fix download links (#55) * 🚑 fix download links * Fix/links from download page (#57) * 🚑 fix dl links * feat/update-content
SocialGouv · Mar 7, 2023 · 092646b · 092646b
1 parent 6aa80f6
commit 092646b
Show file tree

Hide file tree

Showing 15 changed files with 363 additions and 393 deletions.
diff --git a/components/about/About.tsx b/components/about/About.tsx
@@ -62,31 +62,33 @@ export const About = ({ content }: AboutProps) => {
                         {slice.primary.title}
                     </h3>
                     <div className="about__section__people">
-                        {slice.items.map((item, index) => (
-                            <div
-                                className="about__section__people__item"
-                                key={index}
-                            >
-                                <div className="about__section__people__item__avatar">
-                                    <NextPrismicImage field={item.image} />
-                                </div>
-                                <div className="about__section__people__item__name">
-                                    {item.name}
-                                </div>
-                                <div className="about__section__people__item__surname">
-                                    {item.surname}
-                                </div>
-                                <div className="about__section__people__item__job">
-                                    {item.job}
-                                </div>
-                                <PrismicLink
-                                    className="about__section__people__item__linkedin underline"
-                                    field={item.linkedin}
+                        {slice.items
+                            .filter(item => item.linkedin.link_type === 'Web')
+                            .map((item, index) => (
+                                <div
+                                    className="about__section__people__item"
+                                    key={index}
                                 >
-                                    Linkedin
-                                </PrismicLink>
-                            </div>
-                        ))}
+                                    <div className="about__section__people__item__avatar">
+                                        <NextPrismicImage field={item.image} />
+                                    </div>
+                                    <div className="about__section__people__item__name">
+                                        {item.name}
+                                    </div>
+                                    <div className="about__section__people__item__surname">
+                                        {item.surname}
+                                    </div>
+                                    <div className="about__section__people__item__job">
+                                        {item.job}
+                                    </div>
+                                    <PrismicLink
+                                        className="about__section__people__item__linkedin underline"
+                                        field={item.linkedin}
+                                    >
+                                        Linkedin
+                                    </PrismicLink>
+                                </div>
+                            ))}
                     </div>
                 </div>
             ))}

diff --git a/components/co-creation/CoCreation.tsx b/components/co-creation/CoCreation.tsx
@@ -0,0 +1,54 @@
+import Link from 'next/link';
+import { Page } from '../common/Page';
+
+export const CoCreation = () => (
+    <Page className="co-creation">
+        <h1>Co-création</h1>
+
+        <iframe
+            width="560"
+            height="315"
+            src="https://www.youtube.com/embed/dhGG_-JPo2E"
+            title="YouTube video player"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen
+        ></iframe>
+        <div className="items">
+            <div className="item">
+                <span>
+                    Vous souhaitez connaître la suite ? <br /> Consulter la
+                    roadmap !
+                </span>
+                <Link href="https://github.com/SocialGouv/archifiltre-docs/projects/1">
+                    docs
+                </Link>
+                <Link href="https://github.com/SocialGouv/archifiltre-mails/projects/1">
+                    mails
+                </Link>
+            </div>
+            <div className="item">
+                <span>
+                    Vous voulez contribuez au code ? <br /> Créez une pull
+                    request !
+                </span>
+                <Link href="https://github.com/SocialGouv/archifiltre-docs/pulls">
+                    docs
+                </Link>
+                <Link href="https://github.com/SocialGouv/archifiltre-mails/pulls">
+                    mails
+                </Link>
+            </div>
+            <div className="item">
+                <span>
+                    Vous rencontrez un problème ? <br /> Laissez une issue !
+                </span>
+                <Link href="https://github.com/SocialGouv/archifiltre-docs/issues">
+                    docs
+                </Link>
+                <Link href="https://github.com/SocialGouv/archifiltre-mails/issues">
+                    mails
+                </Link>
+            </div>
+        </div>
+    </Page>
+);
diff --git a/components/common/Button.tsx b/components/common/Button.tsx
@@ -20,6 +20,20 @@ export const ButtonLink = ({ label, url, className }: ButtonLinkProps) => {
         </Link>
     );
 };
+export const ButtonDownloadLink = ({
+    label,
+    className,
+    onClick,
+}: ButtonLinkProps & { onClick?: () => void }) => {
+    return (
+        <button
+            onClick={onClick}
+            className={className ? `btn-link ${className}` : 'btn-link'}
+        >
+            {label}
+        </button>
+    );
+};
 
 export const ButtonCircle = ({ onClick, children }: ButtonCircleProps) => (
     <button className="btn-circle" onClick={onClick}>

diff --git a/components/common/Header.tsx b/components/common/Header.tsx
@@ -27,7 +27,11 @@ export const Header = () => (
         </nav>
 
         <div className="header__button">
-            <ButtonLink label="co-creation" url="/co-creation" />
+            <ButtonLink
+                className="co-creation-btn"
+                label="co-creation"
+                url="/co-creation"
+            />
         </div>
     </header>
 );
diff --git a/components/home/Home.tsx b/components/home/Home.tsx
@@ -5,7 +5,6 @@ import {
     SharedSliceVariation,
 } from '@prismicio/types';
 import gsap from 'gsap';
-import { useRouter } from 'next/router';
 import { useRef, useState } from 'react';
 import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayout';
 import { DOCS_SLUG, MAILS_SLUG } from '../../utils/constant';
@@ -39,21 +38,19 @@ export const Home = ({ content }: HomeProps) => {
     const slices = content.data.slices;
     const timeline = useRef(gsap.timeline());
     const productContent = useRef<Element[]>([]);
-    const [index, setIndex] = useState(0);
-    const { pathname } = useRouter();
-    const isDocs = pathname === DOCS_SLUG;
+    const [idx, setIndex] = useState(0);
 
     useIsomorphicLayoutEffect(() => {
         productContent.current = gsap.utils.toArray(
             '.home__product',
         ) as Element[];
-    }, []);
+    }, [idx]);
 
     const switchProduct = () => {
-        const inactive = index === 0 ? 1 : 0;
+        const inactive = idx === 0 ? 1 : 0;
 
         timeline.current
-            .to(productContent.current[index], {
+            .to(productContent.current[idx], {
                 opacity: 0,
             })
             .to(productContent.current[inactive], {
@@ -67,9 +64,11 @@ export const Home = ({ content }: HomeProps) => {
             {slices.map((slice, index) => (
                 <HomeProduct
                     index={index}
+                    isActive={idx === index}
                     title={slice.primary.title ?? ''}
                     subtitle={slice.primary.subtitle ?? ''}
-                    linkToProduct={isDocs ? MAILS_SLUG : DOCS_SLUG}
+                    linkToProduct={index === 0 ? DOCS_SLUG : MAILS_SLUG}
+                    isDocs={index === 0}
                     key={index}
                 >
                     <ul>
@@ -86,7 +85,7 @@ export const Home = ({ content }: HomeProps) => {
             <div className="home__scroll-to-discover" onClick={switchProduct}>
                 <ArrowButtonPicto />
                 Cliquez pour découvrir notre second produit :{' '}
-                <strong>{index === 0 ? 'Mails' : 'Docs'}</strong>
+                <strong>{idx === 0 ? 'Mails' : 'Docs'}</strong>
             </div>
         </Page>
     );

diff --git a/components/home/HomeProduct.tsx b/components/home/HomeProduct.tsx
@@ -1,8 +1,11 @@
+import { getDownloadLink } from '../../utils';
 import { WithChildrenProps } from '../../utils/types';
-import { ButtonLink } from '../common/Button';
+import { ButtonDownloadLink, ButtonLink } from '../common/Button';
 
 interface HomeProductProps extends WithChildrenProps {
     index: number;
+    isActive: boolean;
+    isDocs: boolean;
     linkToProduct: string;
     subtitle: string;
     title: string;
@@ -14,13 +17,42 @@ export const HomeProduct = ({
     linkToProduct,
     children,
     index,
-}: HomeProductProps) => (
-    <div className="home__product" data-index={index}>
-        <h1>{title}</h1>
-        <h2>{subtitle}</h2>
-        {children}
-        <div className="home__product__discover">
-            <ButtonLink url={linkToProduct} label="découvrir" />
+    isDocs,
+    isActive,
+}: HomeProductProps) => {
+    const download = getDownloadLink(undefined, isDocs ? 'docs' : 'mails');
+
+    return (
+        <div
+            className={isActive ? 'home__product active' : 'home__product'}
+            data-index={index}
+            key={title}
+        >
+            <h1>{title}</h1>
+
+            <h2>{subtitle}</h2>
+            {children}
+            <div className="home__product__discover">
+                <ButtonLink url={linkToProduct} label="découvrir" />
+                <ButtonDownloadLink
+                    onClick={() => window.open(download)}
+                    url={linkToProduct}
+                    label="télécharger"
+                />
+            </div>
+            <div className="home__product__social">
+                <button onClick={() => window.open('https://www.twitter.com/')}>
+                    Twitter
+                </button>
+                <button
+                    onClick={() => window.open('https://www.linkedin.com/')}
+                >
+                    Linkedin
+                </button>
+                <button onClick={() => window.open('https://www.youtube.com/')}>
+                    Youtube
+                </button>
+            </div>
         </div>
-    </div>
-);
+    );
+};
diff --git a/components/product/ProductSidebar.tsx b/components/product/ProductSidebar.tsx
@@ -53,6 +53,19 @@ export const ProductSidebar = ({ title }: ProductSidebarProps) => {
                         </div>
                     ),
                 )}
+                {isDocs && (
+                    <div
+                        className="product__sidebar__nav__item"
+                        onClick={() =>
+                            window.open(
+                                'https://github.com/SocialGouv/archifiltre-docs',
+                            )
+                        }
+                    >
+                        Documentation
+                        <small>↗</small>
+                    </div>
+                )}
             </div>
 
             <div className="product__sidebar__change">

diff --git a/pages/co-creation.tsx b/pages/co-creation.tsx
@@ -1,8 +1,8 @@
 import type { NextPage } from 'next';
-import { UnderConstruction } from '../components/common/UnderConstruction';
+import { CoCreation } from '../components/co-creation/CoCreation';
 
 const CoCreationPage: NextPage = () => {
-    return <UnderConstruction />;
+    return <CoCreation />;
 };
 
 export default CoCreationPage;
diff --git a/styles/index.scss b/styles/index.scss
@@ -12,6 +12,7 @@
 @import './base/base';
 @import './pages/home';
 @import './pages/faq';
+@import './pages/co-creation';
 @import './pages/about';
 @import './pages/product';
 @import './pages/download';

diff --git a/styles/pages/about.scss b/styles/pages/about.scss
@@ -1,7 +1,7 @@
 .about {
   &#page {
     margin: 0 auto;
-    width: 90rem;
+    width: 120rem;
   }
 
   h1,
@@ -45,7 +45,8 @@
       // }
 
       &__item {
-        width: 20%;
+        margin: 0 20px;
+        width: 15%;
 
         &__avatar {
           margin: 0 0 2.5rem;

diff --git a/styles/pages/co-creation.scss b/styles/pages/co-creation.scss
@@ -0,0 +1,48 @@
+.co-creation {
+  iframe {
+    display: block;
+    height: 28vh;
+    margin: 0 auto 10rem;
+    min-height: 560px;
+    min-width: 1055px;
+    width: 44vw;
+  }
+
+  h1,
+  h2 {
+    text-align: center;
+  }
+
+  h1 {
+    @extend %description-75-m;
+
+    font-family: $font-inter;
+    margin: 0 0 10rem;
+  }
+
+  .items {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 auto;
+    width: 70%;
+  }
+
+  .item {
+    font-size: 1.5rem;
+    line-height: 1.2;
+
+    a {
+      display: inline-block;
+      // margin: 5px;
+      text-align: center;
+      width: 50%;
+    }
+
+    span {
+      display: table;
+      font-weight: 600;
+      margin: 0 0 10px;
+      text-align: center;
+    }
+  }
+}