Add course landing page

mockoon · Nov 15, 2023 · 1288d4c · 1288d4c
1 parent 06814b6
commit 1288d4c
Show file tree

Hide file tree

Showing 21 changed files with 16,422 additions and 18,085 deletions.
diff --git a/components/accordion.tsx b/components/accordion.tsx
@@ -1,12 +1,22 @@
 import { Fragment, FunctionComponent, useState } from 'react';
 import { AccordionData } from '../models/common.model';
 
-const Accordion: FunctionComponent<{ data: AccordionData }> = function (props) {
-  const [accordionState, setAccordionState] = useState({});
+const Accordion: FunctionComponent<{
+  data: AccordionData;
+  openFirst?: boolean;
+  counterSuffix?: { singular: string; plural: string };
+}> = function ({ data, openFirst, counterSuffix }) {
+  const [accordionState, setAccordionState] = useState(
+    openFirst
+      ? {
+          '0-0': true
+        }
+      : {}
+  );
 
   return (
     <Fragment>
-      {props.data.map((dataGroup, dataGroupIndex) => {
+      {data.map((dataGroup, dataGroupIndex) => {
         const header = (
           <div
             className='accordion-item'
@@ -49,10 +59,19 @@ const Accordion: FunctionComponent<{ data: AccordionData }> = function (props) {
                   className='me-4'
                   id={`accordionContent${dataGroupIndex}${dataItemIndex}`}
                 >
-                  {dataItem.question}
+                  {dataItem.title}
                 </span>
 
-                <div className='ms-auto'></div>
+                <div className='ms-auto'>
+                  {Array.isArray(dataItem.text) && (
+                    <span className='badge text-bg-gray-200 rounded-pill'>
+                      {dataItem.text.length}{' '}
+                      {dataItem.text.length > 1
+                        ? counterSuffix.plural
+                        : counterSuffix.singular}
+                    </span>
+                  )}
+                </div>
               </div>
 
               <div
@@ -63,10 +82,25 @@ const Accordion: FunctionComponent<{ data: AccordionData }> = function (props) {
                 aria-labelledby={`accordionContent${dataGroupIndex}${dataItemIndex}`}
                 data-bs-parent={`#accordion${dataGroupIndex}${dataItemIndex}`}
               >
-                <div
-                  className='accordion-body text-gray-700'
-                  dangerouslySetInnerHTML={{ __html: dataItem.answer }}
-                ></div>
+                {Array.isArray(dataItem.text) && (
+                  <ol className='accordion-body text-gray-700 list-group-numbered'>
+                    {dataItem.text.map((textItem, textItemIndex) => {
+                      return (
+                        <li
+                          key={`dataGroup${dataGroupIndex}dataItem${dataItemIndex}textItem${textItemIndex}`}
+                          className='list-group-item ps-4 py-4'
+                          dangerouslySetInnerHTML={{ __html: textItem }}
+                        ></li>
+                      );
+                    })}
+                  </ol>
+                )}
+                {!Array.isArray(dataItem.text) && (
+                  <div
+                    className='accordion-body text-gray-700'
+                    dangerouslySetInnerHTML={{ __html: dataItem.text }}
+                  ></div>
+                )}
               </div>
             </div>
           );
@@ -77,7 +111,7 @@ const Accordion: FunctionComponent<{ data: AccordionData }> = function (props) {
             className='accordion shadow-light-lg mb-5 mb-md-6'
             key={`dataGroup${dataGroupIndex}`}
           >
-            {header}
+            {dataGroup.title ? header : undefined}
             {items}
           </div>
         ];

diff --git a/components/company-logos.tsx b/components/company-logos.tsx
@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+
+const CompanyLogos = function () {
+  const companyLogos = [
+    { src: '/images/logos/impala.svg', alt: 'Impala logo' },
+    { src: '/images/logos/picpay.svg', alt: 'PicPay logo' },
+    { src: '/images/logos/daimler.svg', alt: 'Daimler logo' },
+    { src: '/images/logos/amadeus.svg', alt: 'Amadeus logo' },
+    { src: '/images/logos/localazy.svg', alt: 'Localazy logo' },
+    { src: '/images/logos/koreanair.svg', alt: 'Korean Air logo' },
+    { src: '/images/logos/wargaming.svg', alt: 'War Gaming logo' },
+    { src: '/images/logos/rbc.svg', alt: 'RBC logo' },
+    { src: '/images/logos/cloudflight.svg', alt: 'CloudFlight logo' },
+    { src: '/images/logos/shopee.svg', alt: 'Shopee logo' },
+    { src: '/images/logos/ford.svg', alt: 'Ford logo' },
+    { src: '/images/logos/walmart.svg', alt: 'Walmart logo' },
+    { src: '/images/logos/ntt-docomo.svg', alt: 'NTT Docomo logo' },
+    { src: '/images/logos/jpmchase.svg', alt: 'JP Morgan Chase logo' },
+    { src: '/images/logos/cryptocom.svg', alt: 'Crypto.com logo' },
+    { src: '/images/logos/audi.svg', alt: 'Audi logo' }
+  ];
+  const [logos, setLogos] = useState([]);
+
+  useEffect(() => {
+    setLogos(companyLogos.sort(() => 0.5 - Math.random()));
+  }, []);
+
+  return (
+    <section className='py-6 py-md-8 border-top bg-gradient-light-white'>
+      <div className='container'>
+        <h4 className='text-muted text-center pb-6 fw-bold'>
+          Trusted by awesome teams
+        </h4>
+        <div className='row align-items-center justify-content-center'>
+          {logos.slice(0, 6).map((logo, logoIndex) => (
+            <div
+              key={`logo${logoIndex}`}
+              className='col-6 col-sm-3 col-lg-2 mb-4 mb-md-0 px-xl-8 text-center'
+            >
+              <div className='img-fluid mb-2 mb-md-0'>
+                <img src={logo.src} alt={logo.alt} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CompanyLogos;
diff --git a/components/email-form.tsx b/components/email-form.tsx
@@ -3,7 +3,8 @@ import { FunctionComponent } from 'react';
 // mailchimp groups fields names
 const groups = {
   newsletter: 'group[302881][1]',
-  productpreview: 'group[302881][2]'
+  productpreview: 'group[302881][2]',
+  coursepreview: 'group[302881][4]'
 };
 
 const EmailForm: FunctionComponent<{ formType: keyof typeof groups }> =

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -150,6 +150,11 @@ const Footer: FunctionComponent<{
                   Video tutorials
                 </Link>
               </li>
+              <li className='mb-2'>
+                <Link href='/course/' className='text-reset'>
+                  Course
+                </Link>
+              </li>
               <li className='mb-2'>
                 <Link href='/articles/' className='text-reset'>
                   Articles

diff --git a/components/nav.tsx b/components/nav.tsx
@@ -157,6 +157,19 @@ const Nav: FunctionComponent = function () {
               </Link>
             </li>
 
+            <li className='nav-item'>
+              <Link
+                href='/course/'
+                className={`nav-link ${
+                  router.pathname === '/course'
+                    ? 'active'
+                    : ''
+                }`}
+              >
+                Course
+              </Link>
+            </li>
+
             <li
               className='nav-item dropdown text-center'
               onMouseEnter={() => {

diff --git a/components/plans.tsx b/components/plans.tsx
@@ -375,16 +375,20 @@ const Plans: FunctionComponent<{ showFree: boolean; showTagline: boolean }> =
                       </div>
                       <div className='py-4 mt-auto'>
                         <span className='badge rounded-pill bg-gray-300 text-gray-800'>
-                          <span className='h6 text-uppercase'>Coming soon</span>
+                          <span className='h6 text-uppercase'>
+                            <i className='icon-hourglass_empty'></i> Coming soon
+                          </span>
                         </span>
                       </div>
                       <div className='d-flex'>
-                        <div className='badge badge-rounded-circle bg-gray-300 text-gray-800 mt-1 me-4'>
-                          <i className='icon-hourglass_empty'></i>
-                        </div>
-
                         <p className='mb-0'>
-                          Sync your API mocks accross your devices
+                          ☁️ Sync your API mocks accross your devices
+                        </p>
+                      </div>
+                      <div className='d-flex'>
+                        <p className='mb-0'>
+                          🎓 Access to the{' '}
+                          <Link href={'/course/'}>online course</Link>
                         </p>
                       </div>
                     </div>
@@ -487,16 +491,20 @@ const Plans: FunctionComponent<{ showFree: boolean; showTagline: boolean }> =
                       </div>
                       <div className='py-4 mt-auto'>
                         <span className='badge rounded-pill bg-gray-300 text-gray-800'>
-                          <span className='h6 text-uppercase'>Coming soon</span>
+                          <span className='h6 text-uppercase'>
+                            <i className='icon-hourglass_empty'></i> Coming soon
+                          </span>
                         </span>
                       </div>
                       <div className='d-flex'>
-                        <div className='badge badge-rounded-circle bg-gray-300 text-gray-800 mt-1 me-4'>
-                          <i className='icon-hourglass_empty'></i>
-                        </div>
-
                         <p className='mb-0'>
-                          Sync your API mocks accross your team
+                          ☁️ Sync your API mocks accross your team
+                        </p>
+                      </div>
+                      <div className='d-flex'>
+                        <p className='mb-0'>
+                          🎓 Access to the{' '}
+                          <Link href={'/course/'}>online course</Link>
                         </p>
                       </div>
                     </div>
@@ -620,16 +628,20 @@ const Plans: FunctionComponent<{ showFree: boolean; showTagline: boolean }> =
 
                       <div className='py-4 mt-auto'>
                         <span className='badge rounded-pill bg-gray-300 text-gray-800'>
-                          <span className='h6 text-uppercase'>Coming soon</span>
+                          <span className='h6 text-uppercase'>
+                            <i className='icon-hourglass_empty'></i> Coming soon
+                          </span>
                         </span>
                       </div>
                       <div className='d-flex'>
-                        <div className='badge badge-rounded-circle bg-gray-300 text-gray-800 mt-1 me-4'>
-                          <i className='icon-hourglass_empty'></i>
-                        </div>
-
                         <p className='mb-0'>
-                          Sync your API mocks accross your team
+                          ☁️ Sync your API mocks accross your team
+                        </p>
+                      </div>
+                      <div className='d-flex'>
+                        <p className='mb-0'>
+                          🎓 Access to the{' '}
+                          <Link href={'/course/'}>online course</Link>
                         </p>
                       </div>
                     </div>

diff --git a/components/sidebar-banner.tsx b/components/sidebar-banner.tsx
@@ -0,0 +1,32 @@
+import { FunctionComponent } from 'react';
+
+const SidebarBanner: FunctionComponent<{
+  title: string;
+  link: string;
+  text: string;
+  ctaText: string;
+  pro?: boolean;
+}> = function ({ title, link, text, ctaText, pro }) {
+  return (
+    <div className='card shadow-light-lg mb-6 mb-md-0 lift lift-lg'>
+      <div className='card-body'>
+        {pro && (
+          <span className='badge text-bg-warning badge-float badge-float-outside'>
+            PRO
+          </span>
+        )}
+
+        <h4 className='fw-bold'>{title}</h4>
+
+        <p className='text-gray-800'>{text}</p>
+
+        <a href={link} className='fs-sm fw-bold text-decoration-none'>
+          {ctaText}
+          <i className='fe fe-arrow-right ms-3'></i>
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default SidebarBanner;
diff --git a/content/docs/latest/about.md b/content/docs/latest/about.md
@@ -22,3 +22,5 @@ You will find the [CLI documentation](https://github.com/mockoon/mockoon/blob/ma
 ## Serverless documentation
 
 You will find the [serverless package documentation](https://github.com/mockoon/mockoon/blob/main/packages/serverless/README.md) in its dedicated readme file on the repository. It covers the package usage instructions and specific features.
+
+> 🎓 Discover our official online course designed to help you get started with API mocking and API design. Coming soon! [Learn more](/course/)
diff --git a/models/common.model.ts b/models/common.model.ts
@@ -1,6 +1,6 @@
 export type AccordionData = {
-  title: string;
-  items: { question: string; answer: string }[];
+  title?: string;
+  items: { title: string; text: string | string[] }[];
 }[];
 
 export type MockAPI = {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -22,3 +22,5 @@ You will find the [CLI documentation](https://github.com/mockoon/mockoon/blob/ma
		## Serverless documentation

		You will find the [serverless package documentation](https://github.com/mockoon/mockoon/blob/main/packages/serverless/README.md) in its dedicated readme file on the repository. It covers the package usage instructions and specific features.

		> 🎓 Discover our official online course designed to help you get started with API mocking and API design. Coming soon! [Learn more](/course/)