feat: Add home section components

apps/website/components/card-blog/card-blog.module.scss

@@ -5,3 +5,6 @@
  * .container {
  * }
 */
+.card-blog-container {
+  margin-bottom: 10px;
+}

apps/website/components/card-blog/card-blog.tsx

@@ -11,7 +11,7 @@ export interface CardBlogProps {
 
 export function CardBlog({item}: CardBlogProps) {
   return (
-    <div className={styles['container'] + " bg-white rounded-l overflow-hidden shadow-sm"}>
+    <div className={styles['card-blog-container'] + " bg-white rounded-l overflow-hidden shadow-sm"}>
       <div className="md:flex">
         <div className="md:shrink-0">
           <img className="h-48 w-full object-cover md:h-full md:w-48"

apps/website/components/header/header.tsx

@@ -172,7 +172,7 @@ export function Header({items = []}) {
 
   return (
     <nav
-      className="bg-white fixed border-gray-200 rounded dark:bg-gray-800 w-full z-10 border-b-2 border-b-gray-50 dark:border-b-gray-700">
+      className="bg-white fixed border-gray-200 dark:bg-gray-800 w-full z-10 border-b-gray-50 dark:border-b-gray-700">
       <div className="flex mx-auto">
         <main className="w-full">
           <section

apps/website/components/home-section-blog/home-section-blog.module.scss

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

apps/website/components/home-section-blog/home-section-blog.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import HomeSectionBlog from './home-section-blog';
+
+describe('HomeSectionBlog', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<HomeSectionBlog />);
+    expect(baseElement).toBeTruthy();
+  });
+});

apps/website/components/home-section-blog/home-section-blog.tsx

@@ -0,0 +1,17 @@
+import styles from './home-section-blog.module.scss';
+
+/* eslint-disable-next-line */
+export interface HomeSectionBlogProps {}
+
+export function HomeSectionBlog(props: HomeSectionBlogProps) {
+  return (
+    <>
+      <section className="container max-w-6xl relative mx-auto relative flex row mb-10 h-auto">
+        <div className="md:w-6/12">a</div>
+        <div className="md:w-6/12">b</div>
+      </section>
+    </>
+  );
+}
+
+export default HomeSectionBlog;

apps/website/components/home-section-cards-header/home-section-cards-header.module.scss

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

apps/website/components/home-section-cards-header/home-section-cards-header.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import HomeSectionCardsHeader from './home-section-cards-header';
+
+describe('HomeSectionCardsHeader', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<HomeSectionCardsHeader />);
+    expect(baseElement).toBeTruthy();
+  });
+});

apps/website/components/home-section-cards-header/home-section-cards-header.tsx

@@ -0,0 +1,82 @@
+import styles from './home-section-cards-header.module.scss';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {
+  faChalkboardUser,
+  faGraduationCap, faGuitar,
+  faLinesLeaning, faScrewdriverWrench,
+  faTabletScreenButton
+} from "@fortawesome/free-solid-svg-icons";
+
+/* eslint-disable-next-line */
+export interface HomeSectionCardsHeaderProps {}
+
+export function HomeSectionCardsHeader(props: HomeSectionCardsHeaderProps) {
+  return (
+    <>
+      <main className="container relative max-w-screen-xl mx-auto relative flex flex-col mb-10">
+        <section className="relative max-w-6xl w-full mx-auto lg:h-[200px] sm:grid sm:grid-cols-3 sm:gap-4 sm:-top-10">
+          <div className="block p-6 border rounded-lg shadow h-full my-2 mx-2 sm:my-0 sm:mx-0
+          bg-white border-gray-200
+          hover:bg-gray-100
+          dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">a
+          </div>
+          <div className="block p-6 border rounded-lg shadow h-full my-2 mx-2 sm:my-0 sm:mx-0
+          bg-white border-gray-200
+          hover:bg-gray-100
+          dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">b
+          </div>
+          <div className="blocks p-6 border rounded-lg shadow h-full my-2 mx-2 sm:my-0 sm:mx-0
+          bg-white border-gray-200
+          hover:bg-gray-100
+          dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">c
+          </div>
+        </section>
+
+        <section className="relative w-full">
+          <h2 className="font-bold w-full text-center my-5 text-2xl mx-auto text-teal-800">MeCP fournit tout les outils nécessaire pour un apprentissage de qualité</h2>
+
+          <div className="grid grid-cols-3 gap-2 md:gap-4 max-w-4xl mx-auto px-2 md:px-0">
+            <div className="text-center flex flex-col transition scale-75
+            text-gray-400
+            hover:scale-100 hover:text-lime-600">
+              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faTabletScreenButton} /></span>
+              <span className="text-lg">Des formats adaptés</span>
+            </div>
+            <div className="text-center flex flex-col transition scale-75
+            text-gray-400
+            hover:scale-100 hover:text-violet-600">
+              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faGraduationCap} /></span>
+              <span className="text-lg">Une organisation pédagogique</span>
+            </div>
+            <div className="text-center flex flex-col transition scale-75
+            text-gray-400
+            hover:scale-100 hover:text-yellow-600">
+              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faChalkboardUser} /></span>
+              <span className="text-lg ">Un espace dédié à l'apprentissage</span>
+            </div>
+            <div className="text-center flex flex-col transition scale-75
+            text-gray-400
+            hover:scale-100 hover:text-orange-600">
+              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faLinesLeaning} /></span>
+              <span className="text-lg">Des contenus adaptés et motivants</span>
+            </div>
+            <div className="text-center flex flex-col transition scale-75
+            text-gray-400
+            hover:scale-100 hover:text-teal-600">
+              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faGuitar} /></span>
+              <span className="text-lg">Une méthode révolutionnaire</span>
+            </div>
+            <div className="text-center flex flex-col transition scale-75
+            text-gray-400
+            hover:scale-100 hover:text-pink-600">
+              <span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faScrewdriverWrench} /></span>
+              <span className="text-lg">Des outils interactifs</span>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
+
+export default HomeSectionCardsHeader;

apps/website/components/home-section-comments/home-section-comments.module.scss

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

apps/website/components/home-section-comments/home-section-comments.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import HomeSectionComments from './home-section-comments';
+
+describe('HomeSectionComments', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<HomeSectionComments />);
+    expect(baseElement).toBeTruthy();
+  });
+});

apps/website/components/home-section-comments/home-section-comments.tsx

@@ -0,0 +1,178 @@
+/* eslint-disable-next-line */
+export interface HomeSectionCommentsProps {
+}
+
+export function HomeSectionComments(props: HomeSectionCommentsProps) {
+  return (
+    <>
+      <section className="w-full bg-white py-10 my-10">
+        <div className="container max-w-6xl relative mx-auto relative flex-col mb-10 h-auto">
+          <h3 className="w-full mb-10 text-xl text-center font-extrabold tracking-tight leading-none md:text-2xl xl:text-3xl dark:text-white">
+            Ce que nos étudiants en pense
+          </h3>
+
+          <div className="w-full grid md:grid-cols-3 gap-5">
+            <div className="bg-gray-100 rounded-lg p-7 mx-5 md:mx-0">
+              <header>
+                <div className="flex items-center">
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>First star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Second star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Third star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Fourth star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-gray-300 dark:text-gray-500"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Fifth star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                </div>
+              </header>
+              <section className="pt-3">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec sodales nisi. Donec pretium varius purus quis porttitor. In et tempus massa, accumsan egestas orci. Aenean eros purus, consequat eget.</p>
+              </section>
+              <hr className="my-5" />
+              <footer className="flex items-center">
+                <img
+                  src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
+                  alt="avatar"
+                  className="mr-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
+                <h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3>
+              </footer>
+            </div>
+            <div className="bg-gray-100 rounded-lg p-7 mx-5 md:mx-0">
+              <header>
+                <div className="flex items-center">
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>First star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Second star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Third star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Fourth star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-gray-300 dark:text-gray-500"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Fifth star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                </div>
+              </header>
+              <section className="pt-3">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec sodales nisi. Donec pretium varius purus quis porttitor. In et tempus massa, accumsan egestas orci. Aenean eros purus, consequat eget.</p>
+              </section>
+              <hr className="my-5" />
+              <footer className="flex items-center">
+                <img
+                  src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
+                  alt="avatar"
+                  className="mr-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
+                <h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3>
+              </footer>
+            </div>
+            <div className="bg-gray-100 rounded-lg p-7 mx-5 md:mx-0">
+              <header>
+                <div className="flex items-center">
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>First star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Second star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Third star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-yellow-400"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Fourth star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg aria-hidden="true"
+                       className="w-5 h-5 text-gray-300 dark:text-gray-500"
+                       fill="currentColor"
+                       viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg"><title>Fifth star</title>
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                </div>
+              </header>
+              <section className="pt-3">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec sodales nisi. Donec pretium varius purus quis porttitor. In et tempus massa, accumsan egestas orci. Aenean eros purus, consequat eget.</p>
+              </section>
+              <hr className="my-5" />
+              <footer className="flex items-center">
+                <img
+                  src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
+                  alt="avatar"
+                  className="mr-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
+                <h3 className="text-gray-700 text-normal font-bold hover:underline text-slate-400">Par Alex John</h3>
+              </footer>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default HomeSectionComments;

apps/website/components/home-section-grid/home-section-grid.module.scss

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

apps/website/components/home-section-grid/home-section-grid.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import HomeSectionGrid from './home-section-grid';
+
+describe('HomeSectionGrid', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<HomeSectionGrid />);
+    expect(baseElement).toBeTruthy();
+  });
+});

apps/website/components/home-section-grid/home-section-grid.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable-next-line */
+export interface HomeSectionGridProps {
+}
+
+export function HomeSectionGrid(props: HomeSectionGridProps) {
+  return (
+    <>
+      <section className="w-full bg-white p-5 sm:p-10 lg:pt-0 lg:py-10 lg:my-10">
+        <div className="container max-w-6xl relative mx-auto relative flex row lg:mb-10 h-auto">
+          <div className="place-self-center lg:col-span-7 md:px-5 md:px-0 md:pr-10">
+            <h3 className="lg:max-w-2xl mb-4 text-xl font-extrabold tracking-tight leading-none md:text-2xl xl:text-3xl dark:text-white">
+              Méthode révolutionnaire pour apprendre à jouer
+            </h3>
+            <p className="lg:max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg dark:text-gray-400">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat nulla lorem, at consectetur ligula pulvinar nec. Fusce dictum aliquet tellus id aliquam. Praesent feugiat tincidunt ante. Aliquam non lectus est. Suspendisse porta, dolor vel aliquet pharetra, ipsum diam laoreet ante, a feugiat nisi justo eu est. </p>
+            <p className="lg:max-w-2xl font-light text-gray-500 lg:mb-8 md:text-lg dark:text-gray-400">Suspendisse in eros nisl. Vivamus eu convallis massa. Phasellus sit amet felis ut velit semper sagittis eget vitae arcu. Nunc leo est, vulputate sed libero non, efficitur lobortis odio. Proin fermentum massa non metus bibendum imperdiet.</p>
+          </div>
+          <div className="hidden relative md:mt-10 lg:col-span-5 lg:flex grow justify-around">
+            <div className="md:w-2/5 relative bg-gray-200 rounded-lg h-[350px]"></div>
+            <div className="md:w-2/5 relative bg-gray-200 rounded-lg h-[350px] top-10"></div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default HomeSectionGrid;

apps/website/components/home-section-video/home-section-video.module.scss

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

apps/website/components/home-section-video/home-section-video.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import HomeSectionVideo from './home-section-video';
+
+describe('HomeSectionVideo', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<HomeSectionVideo />);
+    expect(baseElement).toBeTruthy();
+  });
+});

apps/website/components/home-section-video/home-section-video.tsx

@@ -0,0 +1,27 @@
+import styles from './home-section-video.module.scss';
+
+/* eslint-disable-next-line */
+export interface HomeSectionVideoProps {}
+
+export function HomeSectionVideo(props: HomeSectionVideoProps) {
+  return (
+    <>
+      <section className="container relative max-w-screen-xl mx-auto relative flex flex-col justify-center mb-10">
+        <h2 className="font-bold w-full text-center mt-5 text-2xl mx-auto text-blue-800">
+          Démonstration en vidéo
+        </h2>
+        <p className="text-lg text-gray-500 mb-10 text-center">Rien ne vaut une démonstration pour convaincre !</p>
+
+        <iframe src="https://embed.api.video/vod/vi2JpEFEClejM7A4hhn6i7fU"
+                width="90%"
+                frameBorder="0"
+                scrolling="no"
+                className="mx-auto"
+                allowFullScreen={true}></iframe>
+
+      </section>
+    </>
+  );
+}
+
+export default HomeSectionVideo;

apps/website/components/home/home.module.scss

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

apps/website/components/home/home.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Home from './home';
+
+describe('Home', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Home />);
+    expect(baseElement).toBeTruthy();
+  });
+});

apps/website/components/home/home.tsx

@@ -0,0 +1,25 @@
+import styles from './home.module.scss';
+import HomeSectionGrid from "../home-section-grid/home-section-grid";
+import HomeSectionCardsHeader from "../home-section-cards-header/home-section-cards-header";
+import HomeSectionVideo from "../home-section-video/home-section-video";
+import HomeSectionComments from "../home-section-comments/home-section-comments";
+import HomeSectionBlog from "../home-section-blog/home-section-blog";
+
+/* eslint-disable-next-line */
+export interface HomeProps {
+}
+
+export function HomeContent(props: HomeProps) {
+  return (
+    <div className={styles['container']}>
+      <header className="w-full min-h-[75vh] bg-gray-500"></header>
+      <HomeSectionCardsHeader />
+      <HomeSectionGrid />
+      <HomeSectionVideo />
+      <HomeSectionComments />
+      <HomeSectionBlog />
+    </div>
+  );
+}
+
+export default HomeContent;

apps/website/components/layout/layout.module.scss

@@ -64,7 +64,7 @@
 @media (min-width: 1024px) {
   .app-container:not(.without-footer) {
     .app-content {
-      padding-top: 135px;
+      padding-top: 131px;
       min-height: calc(100vh - 181px);
     }
   }

apps/website/components/seo-config/seo-config.tsx

@@ -53,6 +53,7 @@ export const SeoConfig = ({metaDescription = null, lang = null, meta = [], metaT
   return (
     <Head>
       <title>{title}</title>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
       <meta name="description"
             content={description}/>
       <meta property="og:title"

apps/website/pages/_app.tsx

@@ -2,7 +2,13 @@ import App, {AppProps} from 'next/app';
 import {SessionProvider} from "next-auth/react";
 import {config, library} from "@fortawesome/fontawesome-svg-core";
 import '@fortawesome/fontawesome-svg-core/styles.css';
-import {faBagShopping, faRightToBracket, faUserPlus} from "@fortawesome/free-solid-svg-icons";
+import {
+  faBagShopping, faChalkboardUser,
+  faGraduationCap, faGuitar, faLinesLeaning,
+  faRightToBracket, faScrewdriverWrench,
+  faTabletScreenButton,
+  faUserPlus
+} from "@fortawesome/free-solid-svg-icons";
 import axios from "axios";
 import delve from 'dlv';
 import {wrapper} from "../store/store";
@@ -15,6 +21,12 @@ config.autoAddCss = false;
 library.add(faRightToBracket);
 library.add(faUserPlus);
 library.add(faBagShopping);
+library.add(faTabletScreenButton);
+library.add(faGraduationCap);
+library.add(faChalkboardUser);
+library.add(faLinesLeaning);
+library.add(faGuitar);
+library.add(faScrewdriverWrench);
 
 interface CustomAppProps extends AppProps {
   menuHeader: object[],

apps/website/pages/blog/index.tsx

@@ -9,19 +9,28 @@ import styles from "./index.module.scss";
 import BlogSearch from "../../components/blog-search/blog-search";
 import {environment} from "../../environments/environment";
 import CardBlog from "../../components/card-blog/card-blog";
+import BlogPagination from "../../components/blog-pagination/blog-pagination";
 
 export async function getServerSideProps(context) {
-  const categories = await axios.get(`${environment.strapiApiUrl}/categories?populate=deep`)
-  const posts = await axios.get(`${environment.strapiApiUrl}/articles?populate=deep&_sort=date:DESC`)
+  const {query} = context;
+
+  let postsUrl = `${environment.strapiApiUrl}/articles?populate=deep&sort=publishedAt:DESC`;
+  if (query && query.page) {
+    postsUrl += `$pagination[page]=${query.page}`;
+  }
+
+  const categories = await axios.get(`${environment.strapiApiUrl}/categories?populate=deep`);
+  const posts = await axios.get(postsUrl);
   return {
     props: {
       categories: delve(categories, 'data.data', []),
       lastPublished: delve(posts, 'data.data', []),
+      paginator: delve(posts, 'data.meta', []),
     }
   }
 }
 
-export function Blog({menuHeader, menuFooter, seo, categories, lastPublished}) {
+export function Blog({menuHeader, menuFooter, seo, categories, lastPublished, paginator}) {
   return (
     <>
       <SeoConfig {...seo}/>
@@ -32,6 +41,10 @@ export function Blog({menuHeader, menuFooter, seo, categories, lastPublished}) {
               {lastPublished.map((post, index: number) => (
                 <CardBlog key={'card-blog-' + post.id + index} item={post}/>))
               }
+
+              {lastPublished.length > 0 && (<footer className="mt-10">
+                <BlogPagination paginator={paginator}/>
+              </footer>)}
             </section>
             <aside className="grow lg:basis-2/6">
               <BlogSearch/>

apps/website/pages/home/index.tsx

@@ -1,16 +1,17 @@
 import SeoConfig from "../../components/seo-config/seo-config";
 import Layout from "../../components/layout/layout";
+import HomeContent from "../../components/home/home";
+
 import styles from "../blog/index.module.scss";
 
 export function Home({menuHeader, menuFooter, seo}) {
   return (
     <>
       <SeoConfig {...seo} />
-      <Layout menuHeader={menuHeader} menuFooter={menuFooter}>
-        <main className={styles['blog-container'] + " w-full lg:my-10"}>
-          <section className="container max-w-screen-xl mx-auto relative flex">
-            <p>Page d&apos;accueil</p>
-          </section>
+      <Layout menuHeader={menuHeader}
+              menuFooter={menuFooter}>
+        <main className={styles['blog-container'] + " w-full"}>
+          <HomeContent />
         </main>
       </Layout>
     </>

apps/website/pages/index.tsx

@@ -1,13 +1,19 @@
 import SeoConfig from "../components/seo-config/seo-config";
 
 import Layout from "../components/layout/layout";
+import HomeContent from "../components/home/home";
+
+import styles from "./blog/index.module.scss";
 
 export function Index({menuHeader, menuFooter, page, seo}) {
   return (
     <>
       <SeoConfig {...seo} />
-      <Layout menuHeader={menuHeader} menuFooter={menuFooter}>
-        <p>Page d&apos;accueil</p>
+      <Layout menuHeader={menuHeader}
+              menuFooter={menuFooter}>
+        <main className={styles['blog-container'] + " w-full"}>
+          <HomeContent />
+        </main>
       </Layout>
     </>
   );