✨ Landing page

.circleci/config.yml

@@ -82,6 +82,52 @@ jobs:
           paths:
             - client/build/
 
+  landing/install:
+    working_directory: *workspace_root
+    docker:
+      - image: circleci/node:10
+    steps:
+      - checkout
+
+      - run: |
+          cd landing/
+          npm ci
+
+      - persist_to_workspace:
+          root: *workspace_root
+          paths:
+            - landing/node_modules/
+
+  landing/lint:
+    working_directory: *workspace_root
+    docker:
+      - image: circleci/node:10
+    steps:
+      - checkout
+      - *attach_workspace
+
+      - run: |
+          cd landing/
+          npm run lint
+          npm run prettier:check
+
+  landing/build:
+    working_directory: *workspace_root
+    docker:
+      - image: circleci/node:10
+    steps:
+      - checkout
+      - *attach_workspace
+
+      - run: |
+          cd landing/
+          npm run build
+
+      - persist_to_workspace:
+          root: *workspace_root
+          paths:
+            - landing/build/
+
   prisma_deploy:
     environment:
       DEPLOY_DIR: ~/prisma_deploy
@@ -96,7 +142,7 @@ jobs:
 
       - add_ssh_keys:
           fingerprints:
-            - "6f:f2:b4:c2:e5:13:28:f8:02:2d:da:48:34:0c:14:7f"
+            - '6f:f2:b4:c2:e5:13:28:f8:02:2d:da:48:34:0c:14:7f'
 
       - run: |
           mkdir -p ~/.ssh
@@ -126,7 +172,7 @@ jobs:
 
       - add_ssh_keys:
           fingerprints:
-            - "6f:f2:b4:c2:e5:13:28:f8:02:2d:da:48:34:0c:14:7f"
+            - '6f:f2:b4:c2:e5:13:28:f8:02:2d:da:48:34:0c:14:7f'
 
       - run: |
           mkdir -p ~/.ssh
@@ -163,6 +209,13 @@ workflows:
       - client/build:
           requires:
             - client/install
+      - landing/install
+      - landing/lint:
+          requires:
+            - landing/install
+      - landing/build:
+          requires:
+            - landing/install
       - deploy:
           requires:
             - server/lint

client/public/index.html

@@ -11,8 +11,8 @@
     <meta property="og:site_name" content="FAQ Zenika" />
     <meta property="og:title" content="FAQ Zenika" />
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://faq.zenika.com" />
-    <meta property="og:image" content="https://faq.zenika.com/img/thinking_face-200.png" />
+    <meta property="og:url" content="https://faq.team" />
+    <meta property="og:image" content="https://zenika.faq.team/img/thinking_face-200.png" />
     <meta property="og:image:alt" content="Thinking emoji" />
     <meta property="og:description" content="Internal Knowledge Database for your organization" />
 

landing/.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+seogo
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

landing/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "landing",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "bootstrap": "^4.4.1",
+    "classnames": "^2.2.6",
+    "node-sass": "^4.13.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-scripts": "^3.3.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint src --ext js,jsx",
+    "lint:fix": "npm run lint -- --fix",
+    "prettier": "prettier \"src/**/*.{jsx,css,js}\"",
+    "prettier:write": "npm run prettier -- --write",
+    "prettier:check": "npm run prettier -- --check"
+  },
+  "devDependencies": {
+    "prettier": "^1.19.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "prettier": {
+    "semi": false,
+    "printWidth": 100,
+    "singleQuote": true
+  }
+}

landing/public/.well-known/security.txt

@@ -0,0 +1,2 @@
+Contact: thibaud.courtoison@zenika.com
+Preferred-Languages: en, fr

landing/public/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>FAQ</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Internal Knowledge Database for your organization" />
+
+    <meta property="og:site_name" content="FAQ" />
+    <meta property="og:title" content="FAQ" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://faq.team" />
+    <meta property="og:image" content="https://zenika.faq.team/img/thinking_face-200.png" />
+    <meta property="og:image:alt" content="Thinking emoji" />
+    <meta property="og:description" content="Internal Knowledge Database for your organization" />
+
+    <link rel="shortcut icon" href="%PUBLIC_URL%/img/favicon/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="%PUBLIC_URL%/img/favicon/favicon.png" type="image/png" />
+    <link
+      rel="icon"
+      sizes="32x32"
+      href="%PUBLIC_URL%/img/favicon/favicon-32.png"
+      type="image/png"
+    />
+    <link
+      rel="icon"
+      sizes="64x64"
+      href="%PUBLIC_URL%/img/favicon/favicon-64.png"
+      type="image/png"
+    />
+    <link
+      rel="icon"
+      sizes="96x96"
+      href="%PUBLIC_URL%/img/favicon/favicon-96.png"
+      type="image/png"
+    />
+
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <link rel="stylesheet" href="css/style.css" />
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"
+    />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

landing/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "FAQ",
+  "name": "FAQ",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#af1e3a",
+  "background_color": "#ffffff"
+}

landing/public/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *

landing/src/App.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import {
+  Header,
+  Slider,
+  Features,
+  Users,
+  Pricing,
+  Company,
+  Testimonials,
+  Footer
+} from './components'
+
+import './custom-bootstrap.scss'
+
+function App() {
+  return (
+    <>
+      <Header />
+      <Slider />
+      <Features />
+      <Users />
+      <Pricing />
+      <Company />
+      <Testimonials />
+      <Footer />
+    </>
+  )
+}
+
+export default App

landing/src/components/Company/Company.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+const Company = () => (
+  <div id="about_us" className="compapy_info">
+    <div className="container">
+      <div className="row">
+        <div className="col-xl-5 col-md-5">
+          <div className="man_thumb">
+            <img src="img/ilstrator/man.png" alt="" />
+          </div>
+        </div>
+        <div className="col-xl-7 col-md-7">
+          <div className="company_info">
+            <h3>
+              FAQ is built by Zenika,
+              <br />a company led by passion.
+            </h3>
+            <p>
+              Zenika is led by passion, committed to creating an environment where competence
+              mirrors creativity with outstanding employees. We are specialized in software
+              architecture and Agile methods with a threefold-expertise in consulting, realization
+              and training.
+            </p>
+
+            <a
+              href="https://zenika.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="boxed-btn3"
+            >
+              About Us
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+export default Company

landing/src/components/Company/index.js

@@ -0,0 +1 @@
+export { default } from './Company'

landing/src/components/Features/Features.jsx

@@ -0,0 +1,84 @@
+import React from 'react'
+
+const Features = () => (
+  <div id="features" className="features_area">
+    <div className="container">
+      <div className="row">
+        <div className="col-xl-12">
+          <div className="section_title text-center">
+            <h3>
+              Use FAQ to build an{' '}
+              <span style={{ textDecoration: 'underline', textDecorationThickness: '0.5px' }}>
+                Internal Knowledge Base
+              </span>{' '}
+              <br />
+              for your organization
+            </h3>
+            <p>
+              FAQ has a demand-driven approach to how knownledge is shared in your company, <br />
+              centralizing questions and answer in a single source of truth.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col-xl-4 col-md-6 col-lg-4">
+          <div className="single_feature">
+            <div className="icon">
+              <img src="img/svg_icon/feature_1.svg" alt="" />
+            </div>
+            <h4>Questions / Answers</h4>
+            <p>FAQ uses a mixed approach between a Wiki and Stack Overflow.</p>
+          </div>
+        </div>
+        <div className="col-xl-4 col-md-6 col-lg-4">
+          <div className="single_feature">
+            <div className="icon">
+              <img src="img/svg_icon/feature_2.svg" alt="" />
+            </div>
+            <h4>High-Quality Search Results</h4>
+            <p>FAQ uses Algolia to allow you the fastest access to what you are looking for.</p>
+          </div>
+        </div>
+        <div className="col-xl-4 col-md-6 col-lg-4">
+          <div className="single_feature">
+            <div className="icon">
+              <img src="img/svg_icon/feature_3.svg" alt="" />
+            </div>
+            <h4>Internationalization</h4>
+            <p>All your questions and answers are translated in multiple languages.</p>
+          </div>
+        </div>
+        <div className="col-xl-4 col-md-6 col-lg-4">
+          <div className="single_feature">
+            <div className="icon">
+              <img src="img/svg_icon/feature_6.svg" alt="" />
+            </div>
+            <h4>Intuitive Editor</h4>
+            <p>Use an intuitive Markdown Editor to write rich answers.</p>
+          </div>
+        </div>
+        <div className="col-xl-4 col-md-6 col-lg-4">
+          <div className="single_feature">
+            <div className="icon">
+              <img src="img/svg_icon/feature_4.svg" alt="" />
+            </div>
+            <h4>Integrations</h4>
+            <p>Connect your FAQ to multiple services: Slack, Workplace, ...</p>
+          </div>
+        </div>
+        <div className="col-xl-4 col-md-6 col-lg-4">
+          <div className="single_feature">
+            <div className="icon">
+              <img src="img/svg_icon/feature_5.svg" alt="" />
+            </div>
+            <h4>Custom Configuration</h4>
+            <p>Configure your FAQ to adapt it to your needs.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+export default Features

landing/src/components/Features/index.js

@@ -0,0 +1 @@
+export { default } from './Features'

landing/src/components/Footer/Footer.jsx

@@ -0,0 +1,137 @@
+import React from 'react'
+
+import RandomQuote from './RandomQuote'
+
+const Footer = () => (
+  <footer className="footer">
+    <div className=" container">
+      <div className="pro_border">
+        <div className="row">
+          <div className="col-xl-6 col-md-6">
+            <div className="lets_projects">
+              <h3>
+                Start using FAQ, <a href="/">now</a>
+              </h3>
+            </div>
+          </div>
+          <div className="col-xl-6 col-md-6">
+            <div className="phone_number">
+              <h3>
+                <span role="img" aria-label="thinking emoji">
+                  🤔
+                </span>{' '}
+                <span role="img" aria-label="magnifying glass emoji">
+                  🔍
+                </span>{' '}
+                <span role="img" aria-label="speech ballon emoji">
+                  💬
+                </span>{' '}
+                <span role="img" aria-label="grinning emoji">
+                  😀
+                </span>
+              </h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div className="footer_top">
+      <div className="container">
+        <div className="row">
+          <div className="col-xl-3 col-md-6 col-lg-3">
+            <div className="footer_widget">
+              <br />
+              <RandomQuote />
+              <div className="socail_links">
+                <ul>
+                  <li>
+                    <a href="https://www.facebook.com/ZenikaIT/">
+                      <i className="fab fa-facebook-f"></i>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="https://twitter.com/ZenikaIT">
+                      <i className="fab fa-twitter"></i>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="https://www.linkedin.com/company/zenika/">
+                      <i className="fab fa-linkedin-in"></i>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div className="col-xl-2 col-md-6 col-lg-3">
+            <div className="footer_widget">
+              <h3 className="footer_title">Useful Links</h3>
+              <ul>
+                <li>
+                  <a
+                    href="https://github.com/zenika-open-source/FAQ"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Github
+                  </a>
+                </li>
+                <li>
+                  <a href="https://jobs.zenika.com/" target="_blank" rel="noopener noreferrer">
+                    Jobs at Zenika
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="col-xl-2 col-md-6 col-lg-2">
+            <div className="footer_widget">
+              <h3 className="footer_title">Legal Stuff</h3>
+              <ul>
+                <li>
+                  <a href="/">Terms and Conditions</a>
+                </li>
+                <li>
+                  <a href="/">Privacy Policy</a>
+                </li>
+                <li>
+                  <a href="mail:contact@faq.team">Contact</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="col-xl-4 offset-xl-1 col-md-6 col-lg-4">
+            <div className="footer_widget">
+              <h3 className="footer_title">Subscribe</h3>
+              <form action="#" className="newsletter_form">
+                <input type="text" placeholder="Enter your mail" />
+                <button type="submit">Subscribe</button>
+              </form>
+              <p className="newsletter_text">
+                We may send you news about FAQ, not more than once or twice a year.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div className="copy-right_text">
+      <div className="container">
+        <div className="footer_border"></div>
+        <div className="row">
+          <div className="col-xl-12">
+            <p className="copy_right text-center">
+              Copyright &copy;{new Date().getFullYear()} All rights reserved | The template was made
+              with <i className="far fa-heart" aria-hidden="true"></i> by{' '}
+              <a href="https://colorlib.com" target="_blank" rel="noopener noreferrer">
+                Colorlib
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+)
+
+export default Footer

landing/src/components/Footer/RandomQuote.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+const quotes = [
+  {
+    text: 'I did then what I knew how to do. \nNow that I know better, I do better.',
+    author: 'Maya Angelou'
+  },
+  {
+    text: 'The greatest enemy of knowledge is not ignorance, \nit is the illusion of knowledge.',
+    author: 'Daniel J. Boorstin'
+  },
+  {
+    text: 'Write what you know. \nThat should leave you with a lot of free time.',
+    author: 'Howard Nemerov'
+  },
+  {
+    text: 'An investment in knowledge always pays the best interest.',
+    author: 'Benjamin Franklin'
+  },
+  {
+    text: 'The knowledge of all things is possible',
+    author: 'Leonardo da Vinci'
+  },
+  {
+    text: 'All men by nature desire knowledge.',
+    author: 'Aristotle'
+  }
+]
+
+const RandomQuote = () => {
+  const rnd = Math.floor(Math.random() * quotes.length)
+
+  const quote = quotes[rnd]
+
+  return (
+    <p>
+      <i>“{quote.text}”</i> <br />- {quote.author}
+    </p>
+  )
+}
+
+export default RandomQuote

landing/src/components/Footer/index.js

@@ -0,0 +1 @@
+export { default } from './Footer'

landing/src/components/Header/Header.jsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useRef, useState } from 'react'
+import cn from 'classnames'
+
+import './Header.scss'
+
+const Header = () => {
+  const stickyHeader = useRef()
+  const [sticky, setSticky] = useState(false)
+  useEffect(() => {
+    const onScroll = () => {
+      if (window.scrollY < 400) {
+        setSticky(false)
+      } else {
+        setSticky(true)
+      }
+    }
+    window.addEventListener('scroll', onScroll)
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [stickyHeader])
+
+  return (
+    <header>
+      <div className="header-area ">
+        <div id="sticky-header" className={cn('main-header-area', { sticky })} ref={stickyHeader}>
+          <div className="container-fluid">
+            <div className="row align-items-center">
+              <div className="col-xl-3 col-lg-2">
+                <div className="logo">
+                  <a href="#home" className="title">
+                    {/*<img src="img/logo.png" alt="" />*/}
+                    <img src="img/thinking_face.png" alt="" />
+                    <div>
+                      <h1>FAQ</h1>
+                      <h2>by Zenika</h2>
+                    </div>
+                  </a>
+                </div>
+              </div>
+              <div className="col-xl-6 col-lg-7">
+                <div className="main-menu  d-none d-lg-block">
+                  <nav>
+                    <ul id="navigation">
+                      <li>
+                        <a href="#home">Home</a>
+                      </li>
+                      <li>
+                        <a href="#features">Features</a>
+                      </li>
+                      <li>
+                        <a href="#they_use_faq">They use FAQ</a>
+                      </li>
+                      <li>
+                        <a href="#pricing">Pricing</a>
+                      </li>
+                      <li>
+                        <a href="#about_us">About Us</a>
+                      </li>
+                      <li>
+                        <a
+                          href="https://github.com/zenika-open-source/FAQ"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          Github{' '}
+                          <i
+                            className="fas fa-external-link-alt"
+                            style={{ position: 'relative', top: '-1px' }}
+                          ></i>
+                        </a>
+                      </li>
+                      {/*<li>
+                        <a href="/">
+                          pages <i className="fas fa-angle-down"></i>
+                        </a>
+                        <ul className="submenu">
+                          <li>
+                            <a href="/">Case details</a>
+                          </li>
+                          <li>
+                            <a href="/">about</a>
+                          </li>
+                          <li>
+                            <a href="/">elements</a>
+                          </li>
+                        </ul>
+                      </li>*/}
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+              <div className="col-xl-3 col-lg-3 d-none d-lg-block">
+                <div className="Appointment">
+                  <div className="book_btn d-none d-lg-block">
+                    <a href="https://demo.faq.team" target="_blank" rel="noopener noreferrer">
+                      <i className="far fa-hand-point-right"></i> Demo
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <div className="col-12">
+                <div className="mobile_menu d-block d-lg-none"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default Header

landing/src/components/Header/Header.scss

@@ -0,0 +1,31 @@
+#sticky-header {
+  .title {
+    display: flex;
+
+    & > div {
+      display: flex;
+      align-items: baseline;
+    }
+
+    img {
+      height: 40px;
+      margin-right: 10px;
+    }
+
+    h1,
+    h2 {
+      color: var(--red-faq);
+      font-family: Lato, Calibri, Arial, sans-serif;
+      white-space: nowrap;
+    }
+
+    h1 {
+      font-size: 30px;
+    }
+
+    h2 {
+      font-size: 14px;
+      margin-left: 5px;
+    }
+  }
+}

landing/src/components/Header/index.js

@@ -0,0 +1 @@
+export { default } from './Header'

landing/src/components/Pricing/Pricing.jsx

@@ -0,0 +1,155 @@
+import React from 'react'
+
+import './Pricing.scss'
+
+const Pricing = () => (
+  <div id="pricing" className="service_area">
+    <div id="generic_price_table">
+      <div className="container">
+        <div className="row">
+          <div className="col-md-4">
+            <div className="generic_content clearfix">
+              <div className="generic_head_price clearfix">
+                <div className="generic_head_content clearfix">
+                  <div className="head_bg"></div>
+                  <div className="head">
+                    <span>Community</span>
+                  </div>
+                </div>
+
+                <div className="generic_price_tag clearfix">
+                  <span className="price">
+                    <span className="currency" style={{ fontSize: '40px' }}>
+                      FREE
+                    </span>
+                  </span>
+                </div>
+              </div>
+
+              <div className="generic_feature_list">
+                <ul>
+                  <li>
+                    <span>Unlimited</span> Questions
+                  </li>
+                  <li>
+                    <span>5</span> Users
+                  </li>
+                  <li>
+                    <span>Basic</span> Integrations
+                  </li>
+                  <li>
+                    <span>Google</span> Authentication
+                  </li>
+                  <li>
+                    <span>Github</span> Support
+                  </li>
+                </ul>
+              </div>
+
+              <div className="generic_price_btn clearfix">
+                <a className="" href="mailto:contact@faq.team">
+                  Get Started
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div className="col-md-4">
+            <div className="generic_content active clearfix">
+              <div className="generic_head_price clearfix">
+                <div className="generic_head_content clearfix">
+                  <div className="head_bg"></div>
+                  <div className="head">
+                    <span>Enterprise</span>
+                  </div>
+                </div>
+                <div className="generic_price_tag clearfix">
+                  <span className="price">
+                    <span className="sign">€</span>
+                    <span className="currency">2</span>
+                    <span className="cent">.99</span>
+                    <span className="month">/USER</span>
+                    <span className="month">/MON</span>
+                  </span>
+                </div>
+              </div>
+
+              <div className="generic_feature_list">
+                <ul>
+                  <li>
+                    <span>Unlimited</span> Questions
+                  </li>
+                  <li>
+                    <span>Up to 500</span> Users
+                  </li>
+                  <li>
+                    <span>Premium</span> Integrations
+                  </li>
+                  <li>
+                    <span>Google</span> Authentication
+                  </li>
+                  <li>
+                    <span>Email</span> Support
+                  </li>
+                </ul>
+              </div>
+
+              <div className="generic_price_btn clearfix">
+                <a className="" href="mailto:contact@faq.team">
+                  Sign up
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="col-md-4">
+            <div className="generic_content clearfix">
+              <div className="generic_head_price clearfix">
+                <div className="generic_head_content clearfix">
+                  <div className="head_bg"></div>
+                  <div className="head">
+                    <span>Unlimited</span>
+                  </div>
+                </div>
+                <div className="generic_price_tag clearfix">
+                  <span className="price">
+                    <span className="currency" style={{ fontSize: '35px' }}>
+                      Contact Us
+                    </span>
+                  </span>
+                </div>
+              </div>
+
+              <div className="generic_feature_list">
+                <ul>
+                  <li>
+                    <span>Unlimited</span> Questions
+                  </li>
+                  <li>
+                    <span>Unlimited</span> Users
+                  </li>
+                  <li>
+                    <span>Premium and Beta</span> Integrations
+                  </li>
+                  <li>
+                    <span>Custom</span> Authentication
+                  </li>
+                  <li>
+                    <span>Phone</span> Support
+                  </li>
+                </ul>
+              </div>
+
+              <div className="generic_price_btn clearfix">
+                <a className="" href="mailto:contact@faq.team">
+                  Contact Us
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+export default Pricing

landing/src/components/Pricing/index.js

@@ -0,0 +1 @@
+export { default } from './Pricing'

landing/src/components/Slider/Slider.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+const Slider = () => (
+  <>
+    <div className="shap_big_2 d-none d-lg-block">
+      <img src="img/ilstrator/body_shap_2.png" alt="" />
+    </div>
+    <div className="slider_area">
+      <div className="shap_img_1 d-none d-lg-block">
+        <img src="img/ilstrator/body_shap_1.png" alt="" />
+      </div>
+      <div className="poly_img">
+        <img src="img/ilstrator/poly.png" alt="" />
+      </div>
+      <div id="home" className="single_slider  d-flex align-items-center slider_bg_1">
+        <div className="container">
+          <div className="row align-items-center">
+            <div className="col-xl-10 offset-xl-1">
+              <div className="slider_text text-center">
+                <div className="text">
+                  <h3>
+                    Don't waste your collaborators <br />
+                    internal knowledge. Build upon it!
+                  </h3>
+                  <div>
+                    <a className="boxed-btn3" href="mailto:contact@faq.team">
+                      {/*Get Started*/}
+                      Request Beta Access
+                    </a>
+                  </div>
+                </div>
+                <div className="ilstrator_thumb">
+                  <img src="img/ilstrator/illustration.png" alt="" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </>
+)
+
+export default Slider

landing/src/components/Slider/index.js

@@ -0,0 +1 @@
+export { default } from './Slider'

landing/src/components/Testimonials/Carousel/Carousel.jsx

@@ -0,0 +1,47 @@
+import React, { useRef, useState, useEffect } from 'react'
+
+import './Carousel.scss'
+
+const Carousel = ({ count, children }) => {
+  const ref = useRef()
+  const [width, setWidth] = useState(0)
+  const [current, setCurrent] = useState(0)
+
+  useEffect(() => {
+    const onResize = () => {
+      if (ref.current) {
+        setWidth(ref.current.clientWidth)
+      }
+    }
+
+    onResize()
+
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [ref, count])
+
+  return (
+    <div className="own-carousel" ref={ref} style={{ '--carousel-width': width + 'px' }}>
+      <div className="own-prev" onClick={() => setCurrent(cur => (cur || count) - 1)}>
+        <i className="fas fa-angle-left" />
+      </div>
+      <div
+        className="own-carousel-stage"
+        style={{ transform: `translate3d(-${current * width}px, 0px, 0px)` }}
+      >
+        {children}
+      </div>
+      <div className="own-next" onClick={() => setCurrent(cur => (cur + 1) % count)}>
+        <i className="fas fa-angle-right" />
+      </div>
+    </div>
+  )
+}
+
+const CarouselItem = ({ children }) => {
+  return <div className="single_carousel">{children}</div>
+}
+
+Carousel.Item = CarouselItem
+
+export default Carousel

landing/src/components/Testimonials/Carousel/Carousel.scss

@@ -0,0 +1,48 @@
+.own-carousel {
+  position: relative;
+  overflow: hidden;
+
+  .own-prev,
+  .own-next {
+    border: 1px solid #918dfe;
+    background-color: #605cfd;
+    color: white;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    font-size: 20px;
+    line-height: 50px;
+    cursor: pointer;
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+
+    &:hover {
+      background-color: #918dfe;
+    }
+
+    @media screen and (max-width: 992px) {
+      top: 80%;
+    }
+  }
+
+  .own-prev {
+    left: 0;
+  }
+
+  .own-next {
+    right: 0;
+  }
+
+  .own-carousel-stage {
+    transition: all 0.5s ease 0s;
+    display: flex;
+    width: 10000px;
+
+    .single_carousel {
+      width: var(--carousel-width);
+    }
+  }
+}

landing/src/components/Testimonials/Carousel/index.js

@@ -0,0 +1 @@
+export { default } from './Carousel'

landing/src/components/Testimonials/Testimonials.jsx

@@ -0,0 +1,81 @@
+import React from 'react'
+
+import Carousel from './Carousel'
+
+const Testimonials = () => {
+  const items = [
+    {
+      text: (
+        <>
+          Donec imperdiet congue orci consequat mattis. Donec rutrum porttitor <br />
+          sollicitudin. Pellentesque id dolor tempor sapien feugiat ultrices nec sed neque.
+          <br />
+          Fusce ac mattis nulla. Morbi eget ornare dui.
+        </>
+      ),
+      image: 'img/testmonial/thumb.png',
+      name: 'Jane Doe',
+      title: 'Business Owner'
+    },
+    {
+      text: (
+        <>
+          Donec imperdiet congue orci consequat mattis. Donec rutrum porttitor <br />
+          sollicitudin. Pellentesque id dolor tempor sapien feugiat ultrices nec sed neque.
+          <br />
+          Fusce ac mattis nulla. Morbi eget ornare dui.
+        </>
+      ),
+      image: 'img/testmonial/thumb.png',
+      name: 'Jane Doe the 2nd',
+      title: 'Business Owner'
+    },
+    {
+      text: (
+        <>
+          Donec imperdiet congue orci consequat mattis. Donec rutrum porttitor <br />
+          sollicitudin. Pellentesque id dolor tempor sapien feugiat ultrices nec sed neque.
+          <br />
+          Fusce ac mattis nulla. Morbi eget ornare dui.
+        </>
+      ),
+      image: 'img/testmonial/thumb.png',
+      name: 'Jane Doe the 3rd',
+      title: 'Business Owner'
+    }
+  ]
+
+  return (
+    <div className="testimonial_area ">
+      <div className="container">
+        <div className="row">
+          <div className="col-xl-12">
+            <div className="testmonial_active">
+              <Carousel count={items.length}>
+                {items.map((item, i) => (
+                  <Carousel.Item key={i}>
+                    <div className="single_testmonial text-center">
+                      <div className="quote">
+                        <img src="img/testmonial/quote.svg" alt="" />
+                      </div>
+                      <p>{item.text}</p>
+                      <div className="testmonial_author">
+                        <div className="thumb">
+                          <img src={item.image} alt="" />
+                        </div>
+                        <h3>{item.name}</h3>
+                        <span>{item.title}</span>
+                      </div>
+                    </div>
+                  </Carousel.Item>
+                ))}
+              </Carousel>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Testimonials

landing/src/components/Testimonials/index.js

@@ -0,0 +1 @@
+export { default } from './Testimonials'

landing/src/components/Users/Users.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+const users = [{ name: 'Zenika', image: 'img/users/zenika.png' }]
+
+const Users = () => (
+  <div id="they_use_faq" className="case_study_area case_bg_1">
+    <div className="patrn_1 d-none d-lg-block">
+      <img src="img/pattern/patrn_1.png" alt="" />
+    </div>
+    <div className="patrn_2 d-none d-lg-block">
+      <img src="img/pattern/patrn.png" alt="" />
+    </div>
+    <div className="container">
+      <div className="row">
+        <div className="col-xl-12">
+          <div className="section_title text-center mb-50 white_text">
+            <h3>They use FAQ</h3>
+            <p>
+              They care about building an Internal Knowledge Base. <br />
+              And they use FAQ to do it!
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="row" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center' }}>
+        {users.map((user, index) => (
+          <div
+            key={index}
+            style={{
+              width: '200px',
+              height: '200px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
+          >
+            <img src={user.image} style={{ maxWidth: '100%', maxHeight: '100%' }} alt={user.name} />
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+)
+
+export default Users

landing/src/components/Users/index.js

@@ -0,0 +1 @@
+export { default } from './Users'

landing/src/components/index.js

@@ -0,0 +1,8 @@
+export { default as Header } from './Header'
+export { default as Slider } from './Slider'
+export { default as Features } from './Features'
+export { default as Users } from './Users'
+export { default as Pricing } from './Pricing'
+export { default as Company } from './Company'
+export { default as Testimonials } from './Testimonials'
+export { default as Footer } from './Footer'

landing/src/custom-bootstrap.scss

@@ -0,0 +1,47 @@
+//@import 'node_modules/bootstrap/scss/bootstrap.scss';
+
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+//@import 'node_modules/bootstrap/scss/root';
+@import 'node_modules/bootstrap/scss/reboot';
+//@import 'node_modules/bootstrap/scss/type';
+//@import 'node_modules/bootstrap/scss/images';
+//@import 'node_modules/bootstrap/scss/code';
+@import 'node_modules/bootstrap/scss/grid';
+//@import 'node_modules/bootstrap/scss/tables';
+//@import 'node_modules/bootstrap/scss/forms';
+//@import 'node_modules/bootstrap/scss/buttons';
+//@import 'node_modules/bootstrap/scss/transitions';
+//@import 'node_modules/bootstrap/scss/dropdown';
+//@import 'node_modules/bootstrap/scss/button-group';
+//@import 'node_modules/bootstrap/scss/input-group';
+//@import 'node_modules/bootstrap/scss/custom-forms';
+//@import 'node_modules/bootstrap/scss/nav';
+//@import 'node_modules/bootstrap/scss/navbar';
+//@import 'node_modules/bootstrap/scss/card'; Maybe for users
+//@import 'node_modules/bootstrap/scss/breadcrumb';
+//@import 'node_modules/bootstrap/scss/pagination';
+//@import 'node_modules/bootstrap/scss/badge';
+//@import 'node_modules/bootstrap/scss/jumbotron';
+//@import 'node_modules/bootstrap/scss/alert';
+//@import 'node_modules/bootstrap/scss/progress';
+//@import 'node_modules/bootstrap/scss/media';
+//@import 'node_modules/bootstrap/scss/list-group';
+//@import 'node_modules/bootstrap/scss/close';
+//@import 'node_modules/bootstrap/scss/toasts';
+//@import 'node_modules/bootstrap/scss/modal';
+//@import 'node_modules/bootstrap/scss/tooltip';
+//@import 'node_modules/bootstrap/scss/popover';
+//@import 'node_modules/bootstrap/scss/carousel';
+//@import 'node_modules/bootstrap/scss/spinners';
+@import 'node_modules/bootstrap/scss/utilities';
+//@import 'node_modules/bootstrap/scss/print';
+
+a:hover {
+  text-decoration: none;
+}
+
+:root {
+  --red-faq: #af1e3a;
+}

landing/src/index.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import App from './App'
+
+ReactDOM.render(<App />, document.getElementById('root'))