From c8522f48fbebdfdaa7bbec4c26c309fd5289047c Mon Sep 17 00:00:00 2001
From: Thakur Karthik <iamkarthik08@gmail.com>
Date: Tue, 15 Oct 2019 00:03:43 +0530
Subject: [PATCH 1/8] install docusaurus v2 and edited docusaurus.config.js

---
 website/.gitignore                     |  16 +++
 website/core/Footer.js                 | 112 -----------------
 website/docusaurus.config.js           | 105 ++++++++++++++++
 website/package.json                   |  20 ++--
 website/pages/en/index.js              | 131 --------------------
 website/siteConfig.js                  |  89 --------------
 website/{static => src}/css/custom.css |  60 +++-------
 website/{pages/en => src/pages}/faq.js |   2 +-
 website/src/pages/file1.js             | 108 +++++++++++++++++
 website/src/pages/file2.js             | 130 ++++++++++++++++++++
 website/src/pages/index.js             | 159 +++++++++++++++++++++++++
 website/src/pages/index.module.css     |  44 +++++++
 website/static/CNAME                   |   1 +
 13 files changed, 592 insertions(+), 385 deletions(-)
 create mode 100644 website/.gitignore
 delete mode 100644 website/core/Footer.js
 create mode 100644 website/docusaurus.config.js
 delete mode 100755 website/pages/en/index.js
 delete mode 100644 website/siteConfig.js
 rename website/{static => src}/css/custom.css (62%)
 rename website/{pages/en => src/pages}/faq.js (96%)
 mode change 100755 => 100644
 create mode 100644 website/src/pages/file1.js
 create mode 100644 website/src/pages/file2.js
 create mode 100644 website/src/pages/index.js
 create mode 100644 website/src/pages/index.module.css
 create mode 100644 website/static/CNAME

diff --git a/website/.gitignore b/website/.gitignore
new file mode 100644
index 0000000000..df5cb509b3
--- /dev/null
+++ b/website/.gitignore
@@ -0,0 +1,16 @@
+# dependencies
+/node_modules
+# production
+/build
+# generated files
+.docusaurus
+.cache-loader
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
\ No newline at end of file
diff --git a/website/core/Footer.js b/website/core/Footer.js
deleted file mode 100644
index bb01710728..0000000000
--- a/website/core/Footer.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const PropTypes = require('prop-types');
-const React = require('react');
-
-function SocialFooter(props) {
-  const repoUrl = `https://github.com/${props.config.organizationName}/${
-    props.config.projectName
-  }`;
-  return (
-    <div className="footerSection">
-      <h5>Social</h5>
-      <div className="social">
-        <a
-          className="github-button" // part of the https://buttons.github.io/buttons.js script in siteConfig.js
-          href={repoUrl}
-          data-count-href={`${repoUrl}/stargazers`}
-          data-show-count="true"
-          data-count-aria-label="# stargazers on GitHub"
-          aria-label="Star this project on GitHub">
-          {props.config.projectName}
-        </a>
-      </div>
-    </div>
-  );
-}
-
-SocialFooter.propTypes = {
-  config: PropTypes.object,
-};
-
-class Footer extends React.Component {
-  render() {
-    const docsPart = `${
-      this.props.config.docsUrl ? `${this.props.config.docsUrl}/` : ''
-    }`;
-    return (
-      <footer className="nav-footer" id="footer">
-        <section className="sitemap">
-          {this.props.config.footerIcon && (
-            <a href={this.props.config.baseUrl} className="nav-home">
-              <img
-                src={`${this.props.config.baseUrl}${
-                  this.props.config.footerIcon
-                }`}
-                alt={this.props.config.title}
-                width="66"
-                height="58"
-              />
-            </a>
-          )}
-          <div className="footerSection">
-            <h5>Docs</h5>
-            <a
-              href={`
-                ${this.props.config.baseUrl}${docsPart}${
-                this.props.language
-              }/installation`}>
-              Getting Started
-            </a>
-            <a
-              href={`
-                ${this.props.config.baseUrl}${docsPart}${
-                this.props.language
-              }/configuring`}>
-              Configuring
-            </a>
-            <a
-              href={`
-                ${this.props.config.baseUrl}${docsPart}${
-                this.props.language
-              }/usage`}>
-              Using
-            </a>
-            <a
-              href={`
-                ${this.props.config.baseUrl}${docsPart}${
-                this.props.language
-              }/faq`}>
-              FAQ
-            </a>
-          </div>
-          <SocialFooter config={this.props.config} />
-        </section>
-        <a
-          href="https://opensource.facebook.com/"
-          target="_blank"
-          rel="noreferrer noopener"
-          className="fbOpenSource">
-          <img
-            src={`${this.props.config.baseUrl}img/oss_logo.png`}
-            alt="Facebook Open Source"
-            width="170"
-            height="45"
-          />
-        </a>
-        <section className="copyright">
-          {this.props.config.copyright && (
-            <span>{this.props.config.copyright}</span>
-          )}
-        </section>
-      </footer>
-    );
-  }
-}
-
-module.exports = Footer;
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
new file mode 100644
index 0000000000..948d7bd44b
--- /dev/null
+++ b/website/docusaurus.config.js
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// See https://docusaurus.io/docs/site-config for all the possible
+// site configuration options.
+
+const siteConfig = {
+	title: "Redex", // Title for your website.
+	tagline: "An Android Bytecode Optimizer",
+	url: "https://fbredex.com",
+	baseUrl: "/",
+
+	// Used for publishing and more
+	organizationName: "facebook",
+	projectName: "redex",
+
+	favicon: "img/favicon.png",
+
+	/* Colors for website */
+	// colors: {
+	//   primaryColor: '#75c7a4',
+	//   secondaryColor: '#f9f9f9',
+	// },
+
+	/* Custom fonts for website */
+	/*
+  fonts: {
+    myFont: [
+      "Times New Roman",
+      "Serif"
+    ],
+    myOtherFont: [
+      "-apple-system",
+      "system-ui"
+    ]
+  },
+  */
+
+	// highlight: {
+	// 	// Highlight.js theme to use for syntax highlighting in code blocks.
+	// 	theme: "default"
+	// },
+
+	// Add custom scripts here that would be placed in <script> tags.
+	scripts: ["https://buttons.github.io/buttons.js"],
+
+	// You may provide arbitrary config keys to be used as needed by your
+	// template. For example, if you need your repo's URL...
+	// repoUrl: "https://github.com/facebook/redex",
+	presets: [
+		[
+			"@docusaurus/preset-classic",
+			{
+				docs: {
+					// docs folder path relative to website dir.
+					path: "../docs",
+					// sidebars file relative to website dir.
+					sidebarPath: require.resolve("./sidebars.json"),
+					// Equivalent to `enableUpdateBy`.
+					showLastUpdateAuthor: true,
+					// Equivalent to `enableUpdateTime`.
+					showLastUpdateTime: true
+				},
+				theme: {
+					customCss: require.resolve("./src/css/custom.css")
+				}
+			}
+		]
+	],
+	themeConfig: {
+		navbar: {
+			title: "Redex",
+			logo: {
+				alt: "Redex Logo",
+				src: "img/redex.png"
+			},
+			links: [
+				{ to: "docs/installation", label: "Docs", position: "right" },
+				{ to: "docs/faq", label: "FAQ", position: "right" },
+				// {to: 'blog', label: 'Blog'}, // put back when we create a blog folder and add our first blog
+				{
+					href:
+						"https://code.facebook.com/posts/1480969635539475/optimizing-android-bytecode-with-redex",
+					label: "Birth",
+					position: "right"
+				}
+			]
+		},
+		footer: {
+			logo: {
+				alt: "Redex Logo",
+				src: "img/redex.png"
+			},
+			// This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
+			copyright: `Copyright © ${new Date().getFullYear()} Facebook Inc.`
+		},
+		image: "img/og_image.png"
+	}
+};
+
+module.exports = siteConfig;
diff --git a/website/package.json b/website/package.json
index 7d66debef6..e326876f12 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,14 +1,18 @@
 {
   "scripts": {
-    "examples": "docusaurus-examples",
-    "start": "docusaurus-start",
-    "build": "docusaurus-build",
-    "publish-gh-pages": "docusaurus-publish",
-    "write-translations": "docusaurus-write-translations",
-    "version": "docusaurus-version",
-    "rename-version": "docusaurus-rename-version"
+    "examples": "docusaurus examples",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "publish-gh-pages": "docusaurus publish",
+    "write-translations": "docusaurus write-translations",
+    "version": "docusaurus version",
+    "rename-version": "docusaurus rename-version"
   },
   "devDependencies": {
-    "docusaurus": "^1.7.2"
+    "@docusaurus/core": "^2.0.0-alpha.27",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.27",
+    "classnames": "^2.2.6",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
   }
 }
diff --git a/website/pages/en/index.js b/website/pages/en/index.js
deleted file mode 100755
index 2effe8c9eb..0000000000
--- a/website/pages/en/index.js
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const React = require('react');
-
-const CompLibrary = require('../../core/CompLibrary.js');
-const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
-const Container = CompLibrary.Container;
-const GridBlock = CompLibrary.GridBlock;
-
-const siteConfig = require(process.cwd() + '/siteConfig.js');
-
-function imgUrl(img) {
-  return siteConfig.baseUrl + 'img/' + img;
-}
-
-function docUrl(doc, language) {
-  return siteConfig.baseUrl + 'docs/' + (language ? language + '/' : '') + doc;
-}
-
-function pageUrl(page, language) {
-  return siteConfig.baseUrl + (language ? language + '/' : '') + page;
-}
-
-class Button extends React.Component {
-  render() {
-    return (
-      <div className="pluginWrapper buttonWrapper">
-        <a className="button" href={this.props.href} target={this.props.target}>
-          {this.props.children}
-        </a>
-      </div>
-    );
-  }
-}
-
-Button.defaultProps = {
-  target: '_self',
-};
-
-const SplashContainer = props => (
-  <div className="homeContainer">
-    <div className="homeSplashFade">
-      <div className="wrapper homeWrapper">{props.children}</div>
-    </div>
-  </div>
-);
-
-const Logo = props => (
-  <div className="projectLogo">
-    <img src={props.img_src} />
-  </div>
-);
-
-const ProjectTitle = props => (
-  <h2 className="projectTitle">
-    {siteConfig.title}
-    <small>{siteConfig.tagline}</small>
-  </h2>
-);
-
-const PromoSection = props => (
-  <div className="section promoSection">
-    <div className="promoRow">
-      <div className="pluginRowBlock">{props.children}</div>
-    </div>
-  </div>
-);
-
-class HomeSplash extends React.Component {
-  render() {
-    let language = this.props.language || '';
-    return (
-      <SplashContainer>
-        <Logo img_src={imgUrl('redex-hero.png')} />
-        <div className="inner">
-          <ProjectTitle />
-          <PromoSection>
-            <Button href={docUrl('installation', language)}>Getting Started</Button>
-            <Button href='https://github.com/facebook/redex'>GitHub</Button>
-          </PromoSection>
-        </div>
-      </SplashContainer>
-    );
-  }
-}
-
-const Block = props => (
-  <Container
-    padding={['bottom', 'top']}
-    id={props.id}
-    background={props.background}>
-    <GridBlock align="left" contents={props.children} layout={props.layout} />
-  </Container>
-);
-
-class Index extends React.Component {
-  render() {
-    let language = this.props.language || '';
-
-    return (
-      <div>
-        <HomeSplash language={language} />
-        <div className="mainContainer">
-          <Container padding={['bottom', 'top']}>
-            <GridBlock align="center" layout="fourColumn" contents={[
-                {
-                  title: 'Optimizing',
-                  content: 'Redex provides a framework for reading, writing, and analyzing .dex files, and a set of optimization passes that use this framework to improve the bytecode. An APK optimized by Redex should be smaller and faster.',
-                },
-                {
-                  title: 'Fast',
-                  content: 'Fewer bytes also means faster download times, faster install times, and lower data usage for cell users. Lastly, less bytecode also typically translates into faster runtime performance.',
-                },
-                {
-                  title: 'Buck Integration',
-                  content: 'Redex has deep integration with Buck where your Redex config is passed as a parameter to the Buck android_binary rule when generating the APK.',
-                }
-              ]} />
-          </Container>
-        </div>
-      </div>
-    );
-  }
-}
-
-module.exports = Index;
diff --git a/website/siteConfig.js b/website/siteConfig.js
deleted file mode 100644
index 211222c566..0000000000
--- a/website/siteConfig.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// See https://docusaurus.io/docs/site-config for all the possible
-// site configuration options.
-
-const siteConfig = {
-  title: 'Redex', // Title for your website.
-  tagline: 'An Android Bytecode Optimizer',
-  url: 'https://fbredex.com',
-  baseUrl: '/',
-  cname: 'fbredex.com',
-
-  // Used for publishing and more
-  organizationName: 'facebook',
-  projectName: 'redex',
-
-
-  // For no header links in the top nav bar -> headerLinks: [],
-  headerLinks: [
-    {doc: 'installation', label: 'Docs'},
-    {doc: 'faq', label: 'FAQ'},
-    // {blog: true, label: 'Blog'}, // put back when we create a blog folder and add our first blog
-    {
-      href: 'https://code.facebook.com/posts/1480969635539475/optimizing-android-bytecode-with-redex',
-      label: 'Birth',
-    }
-  ],
-
-  /* path to images for header/footer */
-  headerIcon: 'img/redex.png',
-  footerIcon: 'img/redex.png',
-  favicon: 'img/favicon.png',
-
-  /* Colors for website */
-  colors: {
-    primaryColor: '#75c7a4',
-    secondaryColor: '#f9f9f9',
-  },
-
-  /* Custom fonts for website */
-  /*
-  fonts: {
-    myFont: [
-      "Times New Roman",
-      "Serif"
-    ],
-    myOtherFont: [
-      "-apple-system",
-      "system-ui"
-    ]
-  },
-  */
-
-  // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
-  copyright: `Copyright © ${new Date().getFullYear()} Facebook Inc.`,
-
-  highlight: {
-    // Highlight.js theme to use for syntax highlighting in code blocks.
-    theme: 'default',
-  },
-
-  // Add custom scripts here that would be placed in <script> tags.
-  scripts: ['https://buttons.github.io/buttons.js'],
-
-  // On page navigation for the current documentation page.
-  onPageNav: 'separate',
-  // No .html extensions for paths.
-  cleanUrl: true,
-
-  // Open Graph and Twitter card images.
-  ogImage: 'img/og_image.png',
-
-  // Show documentation's last contributor's name.
-  enableUpdateBy: true,
-
-  // Show documentation's last update time.
-  enableUpdateTime: true,
-
-  // You may provide arbitrary config keys to be used as needed by your
-  // template. For example, if you need your repo's URL...
-  repoUrl: 'https://github.com/facebook/redex',
-};
-
-module.exports = siteConfig;
diff --git a/website/static/css/custom.css b/website/src/css/custom.css
similarity index 62%
rename from website/static/css/custom.css
rename to website/src/css/custom.css
index fa985ed109..2c2b01494e 100644
--- a/website/static/css/custom.css
+++ b/website/src/css/custom.css
@@ -1,4 +1,19 @@
-/* your custom css */
+/**
+ * /src/css/custom.css
+ * You can override the default Infima variables here.
+ * Note: this is not a complete list of --ifm- variables.
+ */
+ :root {
+    --ifm-color-primary: #75c7a4;
+    --ifm-color-primary-dark: rgb(105, 173, 147);
+    --ifm-color-primary-darker: rgb(99, 163, 139);
+    --ifm-color-primary-darkest: rgb(82, 134, 115);
+    --ifm-color-primary-light: rgb(138, 201, 178);
+    --ifm-color-primary-lighter: rgb(158, 211, 191);
+    --ifm-color-primary-lightest: rgb(186, 224, 210);
+  }
+
+  /* your custom css */
 
 @font-face {
   font-family: 'Lato';
@@ -40,46 +55,3 @@
   font-style: normal;
 }
 
-.homeContainer {
-  background: $primaryColor;
-}
-
-.navPusher {
-  background: $secondaryColor;
-}
-
-.projectTitle {
-  color: #fff;
-}
-
-.homeContainer .homeWrapper {
-  padding: 6em 10px;
-}
-
-.button {
-  border: 1px solid #fff;
-  color: #fff;
-}
-
-.button:hover {
-  background: #fff;
-  color: $primaryColor;
-}
-
-body {
-  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
-}
-
-.navigationSlider .slidingNav ul {
-  color: $primaryColor;
-}
-
-.navigationSlider .slidingNav ul li:hover {
-  color: #fff;
-}
-
-.navigationSlider .slidingNav ul li a {
-  font-size: 1em;
-  font-weight: bold;
-  padding: 15px;
-}
diff --git a/website/pages/en/faq.js b/website/src/pages/faq.js
old mode 100755
new mode 100644
similarity index 96%
rename from website/pages/en/faq.js
rename to website/src/pages/faq.js
index 2b790e4603..f1c58fb411
--- a/website/pages/en/faq.js
+++ b/website/src/pages/faq.js
@@ -7,7 +7,7 @@
 
 const React = require('react');
 
-const CompLibrary = require('../../core/CompLibrary.js');
+// const CompLibrary = require('../../core/CompLibrary.js');
 
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
diff --git a/website/src/pages/file1.js b/website/src/pages/file1.js
new file mode 100644
index 0000000000..09c405fa15
--- /dev/null
+++ b/website/src/pages/file1.js
@@ -0,0 +1,108 @@
+// /**	
+//  * Copyright (c) 2017-present, Facebook, Inc.	
+//  *	
+//  * This source code is licensed under the MIT license found in the	
+//  * LICENSE file in the root directory of this source tree.	
+//  */	
+
+// const React = require('react');	
+
+// const CompLibrary = require('../../core/CompLibrary.js');	
+
+// const Container = CompLibrary.Container;	
+// const GridBlock = CompLibrary.GridBlock;	
+
+// class HomeSplash extends React.Component {	
+//   render() {	
+//     const {siteConfig, language = ''} = this.props;	
+//     const {baseUrl, docsUrl} = siteConfig;	
+//     const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;	
+//     const langPart = `${language ? `${language}/` : ''}`;	
+//     const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;	
+
+//     const SplashContainer = props => (	
+//       <div className="homeContainer">	
+//         <div className="homeSplashFade">	
+//           <div className="wrapper homeWrapper">{props.children}</div>	
+//         </div>	
+//       </div>	
+//     );	
+
+//     const ProjectTitle = () => (	
+//       <h2 className="projectTitle">	
+//         {siteConfig.title}	
+//         <small>{siteConfig.tagline}</small>	
+//       </h2>	
+//     );	
+
+//     const PromoSection = props => (	
+//       <div className="section promoSection">	
+//         <div className="promoRow">	
+//           <div className="pluginRowBlock">{props.children}</div>	
+//         </div>	
+//       </div>	
+//     );	
+
+//     const Button = props => (	
+//       <div className="pluginWrapper buttonWrapper">	
+//         <a className="button homeButton" href={props.href} target={props.target}>	
+//           {props.children}	
+//         </a>	
+//       </div>	
+//     );	
+
+//     const Description = () => (	
+//       <div className="homeDescription">	
+//         Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.	
+//       </div>	
+//     )	
+
+//     const Video = () => (	
+//       <iframe 	
+//         className="homeVideo"	
+//         height="315" 	
+//         src="https://www.youtube.com/embed/nYkdrAPrdcw" 	
+//         frameborder="0" 	
+//         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 	
+//         allowfullscreen>	
+//       </iframe>	
+//     )	
+
+//     return (	
+//       <SplashContainer>	
+//         <div className="inner">	
+//           <ProjectTitle siteConfig={siteConfig} />	
+//           <Description />	
+//           <Video />	
+//           <PromoSection>	
+//             <Button href="#try">Learn more about Flux</Button>	
+//           </PromoSection>	
+//         </div>	
+//       </SplashContainer>	
+//     );	
+//   }	
+// }	
+
+// class Index extends React.Component {	
+//   render() {	
+//     const {config: siteConfig, language = ''} = this.props;	
+//     const {baseUrl} = siteConfig;	
+
+//     const Block = props => (	
+//       <Container	
+//         padding={['bottom', 'top']}	
+//         id={props.id}	
+//         background={props.background}>	
+//         <GridBlock	
+//           align="center"	
+//           contents={props.children}	
+//           layout={props.layout}	
+//         />	
+//       </Container>	
+//     );	
+
+//     return <HomeSplash siteConfig={siteConfig} language={language} />;	
+//   }	
+// }	
+
+// module.exports = Index;
\ No newline at end of file
diff --git a/website/src/pages/file2.js b/website/src/pages/file2.js
new file mode 100644
index 0000000000..a174a87a48
--- /dev/null
+++ b/website/src/pages/file2.js
@@ -0,0 +1,130 @@
+// /**
+//  * Copyright (c) 2017-present, Facebook, Inc.
+//  *
+//  * This source code is licensed under the MIT license found in the
+//  * LICENSE file in the root directory of this source tree.
+//  */
+
+// import React from 'react';
+// import classnames from 'classnames';
+// import Layout from '@theme/Layout';
+// import Link from '@docusaurus/Link';
+// import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+// import withBaseUrl from '@docusaurus/withBaseUrl';
+// import styles from './styles.module.css';
+
+// const features = [
+//   {
+//     title: <>What is Flux?</>,
+//     imageUrl: 'img/undraw_building_blocks.svg',
+//     description: (
+//       <>
+//         Flux is the application architecture that Facebook uses for building
+//         client-side web applications.
+//       </>
+//     ),
+//   },
+//   {
+//     title: <>What does it do?</>,
+//     imageUrl: 'img/undraw_react.svg',
+//     description: (
+//       <>
+//         It complements React's composable view components by utilizing a
+//         unidirectional data flow.
+//       </>
+//     ),
+//   },
+//   {
+//     title: <>How do I use it?</>,
+//     imageUrl: 'img/undraw_programming.svg',
+//     description: (
+//       <>
+//         It's more of a pattern rather than a formal framework, and you can start
+//         using Flux immediately without a lot of new code.
+//       </>
+//     ),
+//   },
+// ];
+
+// function Home() {
+//   const context = useDocusaurusContext();
+//   const { siteConfig = {} } = context;
+
+//   return (
+//     <Layout
+//       title={siteConfig.title}
+//       description={siteConfig.tagline}
+//     >
+//       <header className={classnames('hero hero--primary', styles.heroBanner)}>
+//         <div className="container">
+//           <h1 className="hero__title">{siteConfig.title}</h1>
+//           <p className="hero__subtitle">{siteConfig.tagline}</p>
+//           <div className={styles.buttons}>
+//             <Link
+//               className={classnames(
+//                 'button button--secondary button--lg',
+//                 styles.getStarted,
+//               )}
+//               to={withBaseUrl('docs/overview')}
+//             >
+//               Get Started
+//             </Link>
+//           </div>
+//         </div>
+//       </header>
+//       <main>
+//         {features && features.length && (
+//           <section className={styles.features}>
+//             <div className="container">
+//               <div className="row">
+//                 {features.map(({ imageUrl, title, description }, idx) => (
+//                   <div
+//                     key={idx}
+//                     className={classnames('col col--4', styles.feature)}
+//                   >
+//                     {imageUrl && (
+//                       <div className="text--center">
+//                         <img
+//                           className={styles.featureImage}
+//                           src={withBaseUrl(imageUrl)}
+//                           alt={title}
+//                         />
+//                       </div>
+//                     )}
+//                     <h3>{title}</h3>
+//                     <p>{description}</p>
+//                   </div>
+//                 ))}
+//               </div>
+//             </div>
+//           </section>
+//         )}
+//         <div className="container">
+//           <div className="row">
+//             <div className="col col--6 col--offset-3 padding-vert--lg">
+//               <h2>Introduction Video</h2>
+//               <iframe
+//                 width="100%"
+//                 height="315"
+//                 src="https://www.youtube.com/embed/nYkdrAPrdcw"
+//                 frameborder="0"
+//                 allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+//                 allowfullscreen
+//               />
+//               <div className="text--center padding-vert--lg">
+//                 <Link
+//                   className="button button--primary button--lg"
+//                   to={withBaseUrl('docs/overview')}
+//                 >
+//                   Learn more about Flux!
+//                 </Link>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//       </main>
+//     </Layout>
+//   );
+// }
+
+// export default Home;
\ No newline at end of file
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
new file mode 100644
index 0000000000..d16c6da3bc
--- /dev/null
+++ b/website/src/pages/index.js
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import classnames from 'classnames';
+import Layout from '@theme/Layout';
+// const CompLibrary = require('../../core/CompLibrary.js');
+// const GridBlock = CompLibrary.GridBlock;
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import styles from './index.module.css';
+
+function imgUrl(img,siteConfig) {
+  return siteConfig.baseUrl + 'img/' + img;
+}
+
+function docUrl(doc, language,siteConfig) {
+  return siteConfig.baseUrl + 'docs/' + (language ? language + '/' : '') + doc;
+}
+
+function pageUrl(page, language,siteConfig) {
+  return siteConfig.baseUrl + (language ? language + '/' : '') + page;
+}
+
+class Button extends React.Component {
+  render() {
+    return (
+      <div className="pluginWrapper buttonWrapper">
+        <a className="button" href={this.props.href} target={this.props.target}>
+          {this.props.children}
+        </a>
+      </div>
+    );
+  }
+}
+
+Button.defaultProps = {
+  target: '_self',
+};
+
+const SplashContainer = props => (
+  <div className="homeContainer">
+    <div className="homeSplashFade">
+      <div className="wrapper homeWrapper">{props.children}</div>
+    </div>
+  </div>
+);
+
+const Logo = props => (
+  <div className={classnames("projectLogo")}>
+    <img src={props.img_src} />
+  </div>
+);
+
+const ProjectTitle = props => (
+  <h2 className={classnames("projectTitle")}>
+    {props.siteConfig.title}
+    <small>{props.siteConfig.tagline}</small>
+  </h2>
+);
+
+const PromoSection = props => (
+  <div className="section promoSection">
+    <div className="promoRow">
+      <div className="pluginRowBlock">{props.children}</div>
+    </div>
+  </div>
+);
+
+function HomeSplash(props){
+  
+    let language = props.language || '';
+    const context = useDocusaurusContext();
+    const { siteConfig = {} } = context;
+    console.log('Homesplash',context,siteConfig,language)
+    return (
+      <SplashContainer>
+        <Logo img_src={imgUrl('redex-hero.png',siteConfig)} />
+        <div className={classnames("inner")}>
+          <ProjectTitle siteConfig={siteConfig}/>
+          <PromoSection>
+            <Button href={docUrl('installation', language,siteConfig)}>Getting Started</Button>
+            <Button href='https://github.com/facebook/redex'>GitHub</Button>
+          </PromoSection>
+        </div>
+      </SplashContainer>
+    );
+
+}
+
+const Block = props => (
+  <Container
+    padding={['bottom', 'top']}
+    id={props.id}
+    background={props.background}>
+    <GridBlock align="left" contents={props.children} layout={props.layout} />
+  </Container>
+);
+
+const Container=(props)=>(
+  <div style={{backgroundColor:"pink"}}>
+    {props.children}
+  </div>
+)
+
+const GridBlock=props=>(
+  <div>
+    {
+      props.contents.map(contentItem=>{
+        <div>
+          <h3>
+            {contentItem.title}
+          </h3>
+          {contentItem.content}
+          </div>
+      })
+    }
+  </div>
+)
+
+function Index(props) {
+    let language = props.language || '';
+    console.log('Index',props)
+    const context = useDocusaurusContext();
+    const { siteConfig = {} } = context;
+    return (
+      <Layout
+        title={siteConfig.title}
+        description={siteConfig.description}  
+      >
+        <div>
+          <HomeSplash language={language} />
+          <div className={classnames("mainContainer")}>
+            <Container padding={['bottom', 'top']}>
+              <GridBlock align="center" layout="fourColumn" contents={[
+                  {
+                    title: 'Optimizing',
+                    content: 'Redex provides a framework for reading, writing, and analyzing .dex files, and a set of optimization passes that use this framework to improve the bytecode. An APK optimized by Redex should be smaller and faster.',
+                  },
+                  {
+                    title: 'Fast',
+                    content: 'Fewer bytes also means faster download times, faster install times, and lower data usage for cell users. Lastly, less bytecode also typically translates into faster runtime performance.',
+                  },
+                  {
+                    title: 'Buck Integration',
+                    content: 'Redex has deep integration with Buck where your Redex config is passed as a parameter to the Buck android_binary rule when generating the APK.',
+                  }
+                ]} />
+            </Container>
+          </div>
+        </div>
+      </Layout>
+    );
+}
+
+export default Index;
\ No newline at end of file
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
new file mode 100644
index 0000000000..ff303d4eb0
--- /dev/null
+++ b/website/src/pages/index.module.css
@@ -0,0 +1,44 @@
+.homeContainer {
+    background: $primaryColor;
+  }
+  
+  .navPusher {
+    background: $secondaryColor;
+  }
+  
+  .projectTitle {
+    color: #fff;
+  }
+  
+  .homeContainer .homeWrapper {
+    padding: 6em 10px;
+  }
+  
+  .button {
+    border: 1px solid #fff;
+    color: #fff;
+  }
+  
+  .button:hover {
+    background: #fff;
+    color: $primaryColor;
+  }
+  
+  body {
+    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
+  }
+  
+  .navigationSlider .slidingNav ul {
+    color: $primaryColor;
+  }
+  
+  .navigationSlider .slidingNav ul li:hover {
+    color: #fff;
+  }
+  
+  .navigationSlider .slidingNav ul li a {
+    font-size: 1em;
+    font-weight: bold;
+    padding: 15px;
+  }
+  
\ No newline at end of file
diff --git a/website/static/CNAME b/website/static/CNAME
new file mode 100644
index 0000000000..781accc283
--- /dev/null
+++ b/website/static/CNAME
@@ -0,0 +1 @@
+fbredex.com
\ No newline at end of file

From 43d799161a11c99718ae36604552c0f908f7b034 Mon Sep 17 00:00:00 2001
From: Thakur Karthik <iamkarthik08@gmail.com>
Date: Wed, 16 Oct 2019 01:18:39 +0530
Subject: [PATCH 2/8] fix index page and faq page

---
 website/docusaurus.config.js       |  30 +++-
 website/package.json               |   5 +-
 website/src/css/custom.css         |  89 +++++++++++
 website/src/pages/faq.js           |  89 +++++------
 website/src/pages/file1.js         | 108 --------------
 website/src/pages/file2.js         | 130 ----------------
 website/src/pages/index.js         | 229 ++++++++++++-----------------
 website/src/pages/index.module.css |  44 ------
 website/src/theme/Footer/index.js  | 110 ++++++++++++++
 9 files changed, 368 insertions(+), 466 deletions(-)
 delete mode 100644 website/src/pages/file1.js
 delete mode 100644 website/src/pages/file2.js
 delete mode 100644 website/src/pages/index.module.css
 create mode 100644 website/src/theme/Footer/index.js

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 948d7bd44b..ff12846932 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -76,7 +76,7 @@ const siteConfig = {
 			title: "Redex",
 			logo: {
 				alt: "Redex Logo",
-				src: "img/redex.png"
+				src: "img/favicon.png"
 			},
 			links: [
 				{ to: "docs/installation", label: "Docs", position: "right" },
@@ -91,10 +91,34 @@ const siteConfig = {
 			]
 		},
 		footer: {
+			style:'dark',
 			logo: {
-				alt: "Redex Logo",
-				src: "img/redex.png"
+				alt: "Facebook Open Source Logo",
+				src: "img/oss_logo.png"
 			},
+			links:[
+				{
+					title:'Docs',
+					items:[
+						{
+							label:'Getting Started',
+							to:"docs/installation"
+						},
+						{
+							label:'Configuring',
+							to:"docs/configuring"
+						},
+						{
+							label:'Using',
+							to:"docs/usage"
+						},
+						{
+							label:'FAQ',
+							to:"docs/faq"
+						}
+					]
+				}
+			],
 			// This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
 			copyright: `Copyright © ${new Date().getFullYear()} Facebook Inc.`
 		},
diff --git a/website/package.json b/website/package.json
index e326876f12..75f754a772 100644
--- a/website/package.json
+++ b/website/package.json
@@ -6,7 +6,10 @@
     "publish-gh-pages": "docusaurus publish",
     "write-translations": "docusaurus write-translations",
     "version": "docusaurus version",
-    "rename-version": "docusaurus rename-version"
+    "rename-version": "docusaurus rename-version",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy"
+
   },
   "devDependencies": {
     "@docusaurus/core": "^2.0.0-alpha.27",
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 2c2b01494e..bea5a60514 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -55,3 +55,92 @@
   font-style: normal;
 }
 
+.projectTitle {
+  color: #fff;
+}
+
+.homeContainer .homeWrapper {
+  padding: 6em 10px;
+}
+
+.button {
+  border: 1px solid #fff;
+  color: #fff;
+  border-radius: 3px;
+}
+
+.button:hover {
+  background: #fff;
+  color: var(--ifm-color-primary);
+}
+
+.button:focus{
+  outline: rgba(0, 150, 255, 1) solid 2px;
+}
+body {
+  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
+}
+
+.navigationSlider .slidingNav ul {
+  color: $primaryColor;
+}
+
+.navigationSlider .slidingNav ul li:hover {
+  color: #fff;
+}
+
+.navigationSlider .slidingNav ul li a {
+  font-size: 1em;
+  font-weight: bold;
+  padding: 15px;
+}
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureImage {
+  height: 180px;
+  width: 180px;
+}
+
+.buttons{
+  display:flex;
+  justify-content: center;
+}
+
+.projectLogo {
+  display: none;
+  pointer-events: none;
+}
+
+.projectLogo img {
+  height: 100px;
+  margin-bottom: 0px;
+}
+
+@media only screen and (min-width: 1200px) {
+  .homeContainer .homeWrapper #inner {
+    max-width: 750px;
+  }
+
+  .projectLogo {
+    align-items: center;
+    bottom: 0;
+    display: flex;
+    justify-content: flex-end;
+    left: 0;
+    padding: 2em 100px 4em;
+    position: absolute;
+    right: 0;
+    top: 0;
+    border:'1px solid blue'
+  }
+  .projectLogo img {
+    height: 100%;
+    max-height: 250px;
+  }
+}
\ No newline at end of file
diff --git a/website/src/pages/faq.js b/website/src/pages/faq.js
index f1c58fb411..85eb3aaa0f 100644
--- a/website/src/pages/faq.js
+++ b/website/src/pages/faq.js
@@ -5,50 +5,57 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const React = require('react');
-
-// const CompLibrary = require('../../core/CompLibrary.js');
-
-const Container = CompLibrary.Container;
-const GridBlock = CompLibrary.GridBlock;
+import React from "react";
+import Layout from "@theme/Layout";
+import withBaseUrl from "@docusaurus/withBaseUrl";
 
 function Help(props) {
-  const {config: siteConfig, language = ''} = props;
-  const {baseUrl, docsUrl} = siteConfig;
-  const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
-  const langPart = `${language ? `${language}/` : ''}`;
-  const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
 
-  const supportLinks = [
-    {
-      content: `Learn more using the [documentation on this site.](${docUrl(
-        'doc1.html',
-      )})`,
-      title: 'Browse Docs',
-    },
-    {
-      content: 'Ask questions about the documentation and project',
-      title: 'Join the community',
-    },
-    {
-      content: "Find out what's new with this project",
-      title: 'Stay up to date',
-    },
-  ];
+	const supportLinks = [
+		{
+			content: `Learn more using the [documentation on this site.](${withBaseUrl(
+				"docs/doc1"
+			)})`,
+			title: "Browse Docs"
+		},
+		{
+			content: "Ask questions about the documentation and project",
+			title: "Join the community"
+		},
+		{
+			content: "Find out what's new with this project",
+			title: "Stay up to date"
+		}
+	];
 
-  return (
-    <div className="docMainWrapper wrapper">
-      <Container className="mainContainer documentContainer postContainer">
-        <div className="post">
-          <header className="postHeader">
-            <h1>Need help?</h1>
-          </header>
-          <p>This project is maintained by a dedicated group of people.</p>
-          <GridBlock contents={supportLinks} layout="threeColumn" />
-        </div>
-      </Container>
-    </div>
-  );
+	return (
+		<Layout>
+			<div className="docMainWrapper wrapper">
+				<div className="container padding-vert--lg padding-top--xl">
+					<div className="post">
+						<header className="postHeader">
+							<h1>Need help?</h1>
+						</header>
+						<p>This project is maintained by a dedicated group of people.</p>
+					</div>
+					<main>
+						{supportLinks && supportLinks.length && (
+							<section>
+                  <div className="row padding-top--lg">
+                    {supportLinks.map((link, index) => (
+                      <div key={index} className="col col--4 text--break">
+                        <h3>{link.title}</h3>
+                        <p>{link.content}</p>
+                      </div>
+                    ))}
+                  </div>
+							</section>
+						)}
+					</main>
+				</div>
+			</div>
+		</Layout>
+	);
 }
 
-module.exports = Help;
+export default Help;
diff --git a/website/src/pages/file1.js b/website/src/pages/file1.js
deleted file mode 100644
index 09c405fa15..0000000000
--- a/website/src/pages/file1.js
+++ /dev/null
@@ -1,108 +0,0 @@
-// /**	
-//  * Copyright (c) 2017-present, Facebook, Inc.	
-//  *	
-//  * This source code is licensed under the MIT license found in the	
-//  * LICENSE file in the root directory of this source tree.	
-//  */	
-
-// const React = require('react');	
-
-// const CompLibrary = require('../../core/CompLibrary.js');	
-
-// const Container = CompLibrary.Container;	
-// const GridBlock = CompLibrary.GridBlock;	
-
-// class HomeSplash extends React.Component {	
-//   render() {	
-//     const {siteConfig, language = ''} = this.props;	
-//     const {baseUrl, docsUrl} = siteConfig;	
-//     const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;	
-//     const langPart = `${language ? `${language}/` : ''}`;	
-//     const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;	
-
-//     const SplashContainer = props => (	
-//       <div className="homeContainer">	
-//         <div className="homeSplashFade">	
-//           <div className="wrapper homeWrapper">{props.children}</div>	
-//         </div>	
-//       </div>	
-//     );	
-
-//     const ProjectTitle = () => (	
-//       <h2 className="projectTitle">	
-//         {siteConfig.title}	
-//         <small>{siteConfig.tagline}</small>	
-//       </h2>	
-//     );	
-
-//     const PromoSection = props => (	
-//       <div className="section promoSection">	
-//         <div className="promoRow">	
-//           <div className="pluginRowBlock">{props.children}</div>	
-//         </div>	
-//       </div>	
-//     );	
-
-//     const Button = props => (	
-//       <div className="pluginWrapper buttonWrapper">	
-//         <a className="button homeButton" href={props.href} target={props.target}>	
-//           {props.children}	
-//         </a>	
-//       </div>	
-//     );	
-
-//     const Description = () => (	
-//       <div className="homeDescription">	
-//         Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.	
-//       </div>	
-//     )	
-
-//     const Video = () => (	
-//       <iframe 	
-//         className="homeVideo"	
-//         height="315" 	
-//         src="https://www.youtube.com/embed/nYkdrAPrdcw" 	
-//         frameborder="0" 	
-//         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 	
-//         allowfullscreen>	
-//       </iframe>	
-//     )	
-
-//     return (	
-//       <SplashContainer>	
-//         <div className="inner">	
-//           <ProjectTitle siteConfig={siteConfig} />	
-//           <Description />	
-//           <Video />	
-//           <PromoSection>	
-//             <Button href="#try">Learn more about Flux</Button>	
-//           </PromoSection>	
-//         </div>	
-//       </SplashContainer>	
-//     );	
-//   }	
-// }	
-
-// class Index extends React.Component {	
-//   render() {	
-//     const {config: siteConfig, language = ''} = this.props;	
-//     const {baseUrl} = siteConfig;	
-
-//     const Block = props => (	
-//       <Container	
-//         padding={['bottom', 'top']}	
-//         id={props.id}	
-//         background={props.background}>	
-//         <GridBlock	
-//           align="center"	
-//           contents={props.children}	
-//           layout={props.layout}	
-//         />	
-//       </Container>	
-//     );	
-
-//     return <HomeSplash siteConfig={siteConfig} language={language} />;	
-//   }	
-// }	
-
-// module.exports = Index;
\ No newline at end of file
diff --git a/website/src/pages/file2.js b/website/src/pages/file2.js
deleted file mode 100644
index a174a87a48..0000000000
--- a/website/src/pages/file2.js
+++ /dev/null
@@ -1,130 +0,0 @@
-// /**
-//  * Copyright (c) 2017-present, Facebook, Inc.
-//  *
-//  * This source code is licensed under the MIT license found in the
-//  * LICENSE file in the root directory of this source tree.
-//  */
-
-// import React from 'react';
-// import classnames from 'classnames';
-// import Layout from '@theme/Layout';
-// import Link from '@docusaurus/Link';
-// import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-// import withBaseUrl from '@docusaurus/withBaseUrl';
-// import styles from './styles.module.css';
-
-// const features = [
-//   {
-//     title: <>What is Flux?</>,
-//     imageUrl: 'img/undraw_building_blocks.svg',
-//     description: (
-//       <>
-//         Flux is the application architecture that Facebook uses for building
-//         client-side web applications.
-//       </>
-//     ),
-//   },
-//   {
-//     title: <>What does it do?</>,
-//     imageUrl: 'img/undraw_react.svg',
-//     description: (
-//       <>
-//         It complements React's composable view components by utilizing a
-//         unidirectional data flow.
-//       </>
-//     ),
-//   },
-//   {
-//     title: <>How do I use it?</>,
-//     imageUrl: 'img/undraw_programming.svg',
-//     description: (
-//       <>
-//         It's more of a pattern rather than a formal framework, and you can start
-//         using Flux immediately without a lot of new code.
-//       </>
-//     ),
-//   },
-// ];
-
-// function Home() {
-//   const context = useDocusaurusContext();
-//   const { siteConfig = {} } = context;
-
-//   return (
-//     <Layout
-//       title={siteConfig.title}
-//       description={siteConfig.tagline}
-//     >
-//       <header className={classnames('hero hero--primary', styles.heroBanner)}>
-//         <div className="container">
-//           <h1 className="hero__title">{siteConfig.title}</h1>
-//           <p className="hero__subtitle">{siteConfig.tagline}</p>
-//           <div className={styles.buttons}>
-//             <Link
-//               className={classnames(
-//                 'button button--secondary button--lg',
-//                 styles.getStarted,
-//               )}
-//               to={withBaseUrl('docs/overview')}
-//             >
-//               Get Started
-//             </Link>
-//           </div>
-//         </div>
-//       </header>
-//       <main>
-//         {features && features.length && (
-//           <section className={styles.features}>
-//             <div className="container">
-//               <div className="row">
-//                 {features.map(({ imageUrl, title, description }, idx) => (
-//                   <div
-//                     key={idx}
-//                     className={classnames('col col--4', styles.feature)}
-//                   >
-//                     {imageUrl && (
-//                       <div className="text--center">
-//                         <img
-//                           className={styles.featureImage}
-//                           src={withBaseUrl(imageUrl)}
-//                           alt={title}
-//                         />
-//                       </div>
-//                     )}
-//                     <h3>{title}</h3>
-//                     <p>{description}</p>
-//                   </div>
-//                 ))}
-//               </div>
-//             </div>
-//           </section>
-//         )}
-//         <div className="container">
-//           <div className="row">
-//             <div className="col col--6 col--offset-3 padding-vert--lg">
-//               <h2>Introduction Video</h2>
-//               <iframe
-//                 width="100%"
-//                 height="315"
-//                 src="https://www.youtube.com/embed/nYkdrAPrdcw"
-//                 frameborder="0"
-//                 allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-//                 allowfullscreen
-//               />
-//               <div className="text--center padding-vert--lg">
-//                 <Link
-//                   className="button button--primary button--lg"
-//                   to={withBaseUrl('docs/overview')}
-//                 >
-//                   Learn more about Flux!
-//                 </Link>
-//               </div>
-//             </div>
-//           </div>
-//         </div>
-//       </main>
-//     </Layout>
-//   );
-// }
-
-// export default Home;
\ No newline at end of file
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index d16c6da3bc..dc9a93a11f 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -5,155 +5,106 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import classnames from 'classnames';
-import Layout from '@theme/Layout';
-// const CompLibrary = require('../../core/CompLibrary.js');
-// const GridBlock = CompLibrary.GridBlock;
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import styles from './index.module.css';
-
-function imgUrl(img,siteConfig) {
-  return siteConfig.baseUrl + 'img/' + img;
-}
-
-function docUrl(doc, language,siteConfig) {
-  return siteConfig.baseUrl + 'docs/' + (language ? language + '/' : '') + doc;
-}
-
-function pageUrl(page, language,siteConfig) {
-  return siteConfig.baseUrl + (language ? language + '/' : '') + page;
-}
+import React from "react";
+import Layout from "@theme/Layout";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import classnames from "classnames";
+import withBaseUrl from "@docusaurus/withBaseUrl";
+
+const features = [
+	{
+		title: "Optimizing",
+		content:
+			"Redex provides a framework for reading, writing, and analyzing .dex files, and a set of optimization passes that use this framework to improve the bytecode. An APK optimized by Redex should be smaller and faster."
+	},
+	{
+		title: "Fast",
+		content:
+			"Fewer bytes also means faster download times, faster install times, and lower data usage for cell users. Lastly, less bytecode also typically translates into faster runtime performance."
+	},
+	{
+		title: "Buck Integration",
+		content:
+			"Redex has deep integration with Buck where your Redex config is passed as a parameter to the Buck android_binary rule when generating the APK."
+	}
+];
 
 class Button extends React.Component {
-  render() {
-    return (
-      <div className="pluginWrapper buttonWrapper">
-        <a className="button" href={this.props.href} target={this.props.target}>
-          {this.props.children}
-        </a>
-      </div>
-    );
-  }
+	render() {
+		return (
+			<div className="pluginWrapper buttonWrapper" style={{ padding: "0 2px" }}>
+				<a className="button" href={this.props.href} target={this.props.target}>
+					{this.props.children}
+				</a>
+			</div>
+		);
+	}
 }
 
 Button.defaultProps = {
-  target: '_self',
+	target: "_self"
 };
 
-const SplashContainer = props => (
-  <div className="homeContainer">
-    <div className="homeSplashFade">
-      <div className="wrapper homeWrapper">{props.children}</div>
-    </div>
-  </div>
-);
-
 const Logo = props => (
-  <div className={classnames("projectLogo")}>
-    <img src={props.img_src} />
-  </div>
-);
-
-const ProjectTitle = props => (
-  <h2 className={classnames("projectTitle")}>
-    {props.siteConfig.title}
-    <small>{props.siteConfig.tagline}</small>
-  </h2>
+	<div className="projectLogo" style={{ padding: "0px 150px 70px 0px" }}>
+		<img src={props.img_src} />
+	</div>
 );
 
-const PromoSection = props => (
-  <div className="section promoSection">
-    <div className="promoRow">
-      <div className="pluginRowBlock">{props.children}</div>
-    </div>
-  </div>
-);
-
-function HomeSplash(props){
-  
-    let language = props.language || '';
-    const context = useDocusaurusContext();
-    const { siteConfig = {} } = context;
-    console.log('Homesplash',context,siteConfig,language)
-    return (
-      <SplashContainer>
-        <Logo img_src={imgUrl('redex-hero.png',siteConfig)} />
-        <div className={classnames("inner")}>
-          <ProjectTitle siteConfig={siteConfig}/>
-          <PromoSection>
-            <Button href={docUrl('installation', language,siteConfig)}>Getting Started</Button>
-            <Button href='https://github.com/facebook/redex'>GitHub</Button>
-          </PromoSection>
-        </div>
-      </SplashContainer>
-    );
-
-}
-
-const Block = props => (
-  <Container
-    padding={['bottom', 'top']}
-    id={props.id}
-    background={props.background}>
-    <GridBlock align="left" contents={props.children} layout={props.layout} />
-  </Container>
-);
-
-const Container=(props)=>(
-  <div style={{backgroundColor:"pink"}}>
-    {props.children}
-  </div>
-)
-
-const GridBlock=props=>(
-  <div>
-    {
-      props.contents.map(contentItem=>{
-        <div>
-          <h3>
-            {contentItem.title}
-          </h3>
-          {contentItem.content}
-          </div>
-      })
-    }
-  </div>
-)
-
 function Index(props) {
-    let language = props.language || '';
-    console.log('Index',props)
-    const context = useDocusaurusContext();
-    const { siteConfig = {} } = context;
-    return (
-      <Layout
-        title={siteConfig.title}
-        description={siteConfig.description}  
-      >
-        <div>
-          <HomeSplash language={language} />
-          <div className={classnames("mainContainer")}>
-            <Container padding={['bottom', 'top']}>
-              <GridBlock align="center" layout="fourColumn" contents={[
-                  {
-                    title: 'Optimizing',
-                    content: 'Redex provides a framework for reading, writing, and analyzing .dex files, and a set of optimization passes that use this framework to improve the bytecode. An APK optimized by Redex should be smaller and faster.',
-                  },
-                  {
-                    title: 'Fast',
-                    content: 'Fewer bytes also means faster download times, faster install times, and lower data usage for cell users. Lastly, less bytecode also typically translates into faster runtime performance.',
-                  },
-                  {
-                    title: 'Buck Integration',
-                    content: 'Redex has deep integration with Buck where your Redex config is passed as a parameter to the Buck android_binary rule when generating the APK.',
-                  }
-                ]} />
-            </Container>
-          </div>
-        </div>
-      </Layout>
-    );
+	let language = props.language || "";
+	const context = useDocusaurusContext();
+	const { siteConfig = {} } = context;
+	return (
+		<Layout title={siteConfig.title} description={siteConfig.description}>
+			<div>
+				<header className={classnames("hero hero--primary")}>
+					<div className="container padding-vert--lg">
+						<div className="row">
+							<div className="col text--center">
+								<h1 className="hero__title">{siteConfig.title}</h1>
+								<p className="hero__subtitle">{siteConfig.tagline}</p>
+								<div className="buttons">
+									<Button href={withBaseUrl("docs/installation")}>
+										GETTING STARTED
+									</Button>
+									<Button href="https://github.com/facebook/redex">
+										GITHUB
+									</Button>
+								</div>
+							</div>
+							<Logo img_src={withBaseUrl("img/redex-hero.png")} />
+						</div>
+					</div>
+				</header>
+				<div className="mainContainer">
+					{features && features.length && (
+						<section className="features">
+							<div className="container">
+								<div className="row padding-vert--xl">
+									{features.map(({ imageUrl, title, content }, idx) => (
+										<div key={idx} className="col col--4 text--center">
+											{imageUrl && (
+												<div className="text--center margin-bottom--lg">
+													<img
+														className="featureImage"
+														src={withBaseUrl(imageUrl)}
+														alt={title}
+													/>
+												</div>
+											)}
+											<h3>{title}</h3>
+											<p>{content}</p>
+										</div>
+									))}
+								</div>
+							</div>
+						</section>
+					)}
+				</div>
+			</div>
+		</Layout>
+	);
 }
 
-export default Index;
\ No newline at end of file
+export default Index;
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
deleted file mode 100644
index ff303d4eb0..0000000000
--- a/website/src/pages/index.module.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.homeContainer {
-    background: $primaryColor;
-  }
-  
-  .navPusher {
-    background: $secondaryColor;
-  }
-  
-  .projectTitle {
-    color: #fff;
-  }
-  
-  .homeContainer .homeWrapper {
-    padding: 6em 10px;
-  }
-  
-  .button {
-    border: 1px solid #fff;
-    color: #fff;
-  }
-  
-  .button:hover {
-    background: #fff;
-    color: $primaryColor;
-  }
-  
-  body {
-    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
-  }
-  
-  .navigationSlider .slidingNav ul {
-    color: $primaryColor;
-  }
-  
-  .navigationSlider .slidingNav ul li:hover {
-    color: #fff;
-  }
-  
-  .navigationSlider .slidingNav ul li a {
-    font-size: 1em;
-    font-weight: bold;
-    padding: 15px;
-  }
-  
\ No newline at end of file
diff --git a/website/src/theme/Footer/index.js b/website/src/theme/Footer/index.js
new file mode 100644
index 0000000000..d88d685da8
--- /dev/null
+++ b/website/src/theme/Footer/index.js
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import classnames from 'classnames';
+
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import withBaseUrl from '@docusaurus/withBaseUrl';
+
+function SocialFooter(props) {
+  const repoUrl = `https://github.com/${props.config.organizationName}/${
+    props.config.projectName
+  }`;
+  return (
+    <div className="footerSection" style={{flex:1}}>
+      <h4 className="footer__title">Social</h4>
+      <div className="social">
+        <a
+          className="github-button" // part of the https://buttons.github.io/buttons.js script in siteConfig.js
+          href={repoUrl}
+          data-count-href={`${repoUrl}/stargazers`}
+          data-show-count="true"
+          data-count-aria-label="# stargazers on GitHub"
+          aria-label="Star this project on GitHub">
+          {props.config.projectName}
+        </a>
+      </div>
+    </div>
+  );
+}
+
+
+function Footer() {
+  const context = useDocusaurusContext();
+  const {siteConfig = {}} = context;
+  const {themeConfig = {}} = siteConfig;
+  const {footer} = themeConfig;
+
+  if (!footer) {
+    return null;
+  }
+
+  const {copyright, links = [], logo} = footer;
+
+  return (
+    <footer
+      className={classnames('footer', {
+        'footer--dark': footer.style === 'dark',
+      })}>
+      <div className="container">
+        {links && links.length > 0 && (
+          <div className="row footer__links">
+            <a href='#'>
+              <img src={withBaseUrl('img/redex.png')} width="66" height="58"/>
+            </a>
+            {links.map((linkItem, i) => (
+              <div key={i} className="col footer__col" style={{flex:1}}>
+                {linkItem.title != null ? (
+                  <h4 className="footer__title">{linkItem.title}</h4>
+                ) : null}
+                {linkItem.items != null &&
+                Array.isArray(linkItem.items) &&
+                linkItem.items.length > 0 ? (
+                  <ul className="footer__items">
+                    {linkItem.items.map(item => (
+                      <li key={item.href || item.to} className="footer__item">
+                        <Link
+                          className="footer__link-item"
+                          {...item}
+                          {...(item.href
+                            ? {
+                                target: '_blank',
+                                rel: 'noopener noreferrer',
+                                href: item.href,
+                              }
+                            : {
+                                to: withBaseUrl(item.to),
+                              })}>
+                          {item.label}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                ) : null}
+              </div>
+            ))}
+            <SocialFooter config={siteConfig}/>
+          </div>
+        )}
+        {(logo || copyright) && (
+          <div className="text--center">
+            {logo && logo.src && (
+              <div className="margin-bottom--sm">
+                <img className="footer__logo" alt={logo.alt} src={logo.src} />
+              </div>
+            )}
+            {copyright}
+          </div>
+        )}
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

From 0566d2b0b232933caab386ccb33156a5fc54a963 Mon Sep 17 00:00:00 2001
From: Thakur Karthik <iamkarthik08@gmail.com>
Date: Wed, 16 Oct 2019 10:20:44 +0530
Subject: [PATCH 3/8] corrected markdown parsing with <Link>

---
 website/src/pages/faq.js   | 33 ++++++++++++++++++++++-----------
 website/src/pages/index.js |  2 +-
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/website/src/pages/faq.js b/website/src/pages/faq.js
index 85eb3aaa0f..00ad19aa3f 100644
--- a/website/src/pages/faq.js
+++ b/website/src/pages/faq.js
@@ -8,9 +8,12 @@
 import React from "react";
 import Layout from "@theme/Layout";
 import withBaseUrl from "@docusaurus/withBaseUrl";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Link from "@docusaurus/Link";
 
 function Help(props) {
-
+	const context = useDocusaurusContext();
+	const { siteConfig = {} } = context;
 	const supportLinks = [
 		{
 			content: `Learn more using the [documentation on this site.](${withBaseUrl(
@@ -27,9 +30,8 @@ function Help(props) {
 			title: "Stay up to date"
 		}
 	];
-
 	return (
-		<Layout>
+		<Layout title={siteConfig.title} description={siteConfig.description}>
 			<div className="docMainWrapper wrapper">
 				<div className="container padding-vert--lg padding-top--xl">
 					<div className="post">
@@ -41,14 +43,23 @@ function Help(props) {
 					<main>
 						{supportLinks && supportLinks.length && (
 							<section>
-                  <div className="row padding-top--lg">
-                    {supportLinks.map((link, index) => (
-                      <div key={index} className="col col--4 text--break">
-                        <h3>{link.title}</h3>
-                        <p>{link.content}</p>
-                      </div>
-                    ))}
-                  </div>
+								<div className="row padding-top--lg">
+									<div className="col col--4 text--break">
+										<h3>{supportLinks[0].title}</h3>
+										<p>
+											Learn more using the{' '}
+											<Link to={withBaseUrl("docs/installation")}>
+												documentation on this site.
+											</Link>
+										</p>
+									</div>
+									{supportLinks.slice(1).map((link, index) => (
+										<div key={index} className="col col--4 text--break">
+											<h3>{link.title}</h3>
+											<p>{link.content}</p>
+										</div>
+									))}
+								</div>
 							</section>
 						)}
 					</main>
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index dc9a93a11f..383af6a5c3 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -46,7 +46,7 @@ Button.defaultProps = {
 };
 
 const Logo = props => (
-	<div className="projectLogo" style={{ padding: "0px 150px 70px 0px" }}>
+	<div className="projectLogo" style={{ padding: "0px 250px 130px 0px" }}>
 		<img src={props.img_src} />
 	</div>
 );

From ee056387ed38ea23cede0df1157356d20552b648 Mon Sep 17 00:00:00 2001
From: Thakur Karthik <iamkarthik08@gmail.com>
Date: Thu, 17 Oct 2019 13:58:44 +0530
Subject: [PATCH 4/8] review changes

---
 .vscode/settings.json               |   4 +
 website/docusaurus.config.js        |  79 ++++++++------------
 website/package.json                |   5 --
 website/src/css/custom.css          |  92 ++---------------------
 website/src/pages/faq.js            |  12 +--
 website/src/pages/index.js          |  44 +++++------
 website/src/pages/styles.module.css |  45 ++++++++++++
 website/src/theme/Footer/index.js   | 110 ----------------------------
 8 files changed, 106 insertions(+), 285 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 website/src/pages/styles.module.css
 delete mode 100644 website/src/theme/Footer/index.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000..5592767af6
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+    "editor.tabSize": 2,
+    "editor.detectIndentation": false
+}
\ No newline at end of file
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index ff12846932..0ae0039c7b 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -1,53 +1,23 @@
 /**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
+* Copyright (c) 2017-present, Facebook, Inc.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
 
-// See https://docusaurus.io/docs/site-config for all the possible
 // site configuration options.
 
 const siteConfig = {
 	title: "Redex", // Title for your website.
 	tagline: "An Android Bytecode Optimizer",
 	url: "https://fbredex.com",
-	baseUrl: "/",
+  baseUrl: "/",
 
 	// Used for publishing and more
 	organizationName: "facebook",
 	projectName: "redex",
-
+	
 	favicon: "img/favicon.png",
-
-	/* Colors for website */
-	// colors: {
-	//   primaryColor: '#75c7a4',
-	//   secondaryColor: '#f9f9f9',
-	// },
-
-	/* Custom fonts for website */
-	/*
-  fonts: {
-    myFont: [
-      "Times New Roman",
-      "Serif"
-    ],
-    myOtherFont: [
-      "-apple-system",
-      "system-ui"
-    ]
-  },
-  */
-
-	// highlight: {
-	// 	// Highlight.js theme to use for syntax highlighting in code blocks.
-	// 	theme: "default"
-	// },
-
-	// Add custom scripts here that would be placed in <script> tags.
-	scripts: ["https://buttons.github.io/buttons.js"],
-
 	// You may provide arbitrary config keys to be used as needed by your
 	// template. For example, if you need your repo's URL...
 	// repoUrl: "https://github.com/facebook/redex",
@@ -84,37 +54,46 @@ const siteConfig = {
 				// {to: 'blog', label: 'Blog'}, // put back when we create a blog folder and add our first blog
 				{
 					href:
-						"https://code.facebook.com/posts/1480969635539475/optimizing-android-bytecode-with-redex",
+					"https://code.facebook.com/posts/1480969635539475/optimizing-android-bytecode-with-redex",
 					label: "Birth",
 					position: "right"
 				}
 			]
 		},
 		footer: {
-			style:'dark',
+			style: "dark",
 			logo: {
 				alt: "Facebook Open Source Logo",
 				src: "img/oss_logo.png"
 			},
-			links:[
+			links: [
 				{
-					title:'Docs',
-					items:[
+					title: "Docs",
+					items: [
 						{
-							label:'Getting Started',
-							to:"docs/installation"
+							label: "Getting Started",
+							to: "docs/installation"
 						},
 						{
-							label:'Configuring',
-							to:"docs/configuring"
+							label: "Configuring",
+							to: "docs/configuring"
 						},
 						{
-							label:'Using',
-							to:"docs/usage"
+							label: "Using",
+							to: "docs/usage"
 						},
 						{
-							label:'FAQ',
-							to:"docs/faq"
+							label: "FAQ",
+							to: "docs/faq"
+						}
+					]
+				},
+				{
+					title: "Social",
+					items: [
+						{
+							label: "Github",
+							href: "https://github.com/facebook/redex"
 						}
 					]
 				}
diff --git a/website/package.json b/website/package.json
index 75f754a772..d4304147bd 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,12 +1,7 @@
 {
   "scripts": {
-    "examples": "docusaurus examples",
     "start": "docusaurus start",
     "build": "docusaurus build",
-    "publish-gh-pages": "docusaurus publish",
-    "write-translations": "docusaurus write-translations",
-    "version": "docusaurus version",
-    "rename-version": "docusaurus rename-version",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy"
 
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index bea5a60514..88d5a87a96 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -11,9 +11,16 @@
     --ifm-color-primary-light: rgb(138, 201, 178);
     --ifm-color-primary-lighter: rgb(158, 211, 191);
     --ifm-color-primary-lightest: rgb(186, 224, 210);
+    --ifm-color-secondary:#f9f9f9;
+    --ifm-color-primary-dark: rgb(216, 216, 216);
+    --ifm-color-primary-darker: rgb(204, 204, 204);
+    --ifm-color-primary-darkest: rgb(168, 168, 168);
+    --ifm-color-primary-light: rgb(242, 242, 242);
+    --ifm-color-primary-lighter: rgb(245, 245, 245);
+    --ifm-color-primary-lightest: rgb(248, 248, 248);
   }
 
-  /* your custom css */
+/* your custom css */
 
 @font-face {
   font-family: 'Lato';
@@ -55,92 +62,9 @@
   font-style: normal;
 }
 
-.projectTitle {
-  color: #fff;
-}
-
-.homeContainer .homeWrapper {
-  padding: 6em 10px;
-}
-
-.button {
-  border: 1px solid #fff;
-  color: #fff;
-  border-radius: 3px;
-}
-
-.button:hover {
-  background: #fff;
-  color: var(--ifm-color-primary);
-}
-
-.button:focus{
-  outline: rgba(0, 150, 255, 1) solid 2px;
-}
 body {
   font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
 }
 
-.navigationSlider .slidingNav ul {
-  color: $primaryColor;
-}
 
-.navigationSlider .slidingNav ul li:hover {
-  color: #fff;
-}
 
-.navigationSlider .slidingNav ul li a {
-  font-size: 1em;
-  font-weight: bold;
-  padding: 15px;
-}
-
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureImage {
-  height: 180px;
-  width: 180px;
-}
-
-.buttons{
-  display:flex;
-  justify-content: center;
-}
-
-.projectLogo {
-  display: none;
-  pointer-events: none;
-}
-
-.projectLogo img {
-  height: 100px;
-  margin-bottom: 0px;
-}
-
-@media only screen and (min-width: 1200px) {
-  .homeContainer .homeWrapper #inner {
-    max-width: 750px;
-  }
-
-  .projectLogo {
-    align-items: center;
-    bottom: 0;
-    display: flex;
-    justify-content: flex-end;
-    left: 0;
-    padding: 2em 100px 4em;
-    position: absolute;
-    right: 0;
-    top: 0;
-    border:'1px solid blue'
-  }
-  .projectLogo img {
-    height: 100%;
-    max-height: 250px;
-  }
-}
\ No newline at end of file
diff --git a/website/src/pages/faq.js b/website/src/pages/faq.js
index 00ad19aa3f..c75e865c86 100644
--- a/website/src/pages/faq.js
+++ b/website/src/pages/faq.js
@@ -15,15 +15,9 @@ function Help(props) {
 	const context = useDocusaurusContext();
 	const { siteConfig = {} } = context;
 	const supportLinks = [
-		{
-			content: `Learn more using the [documentation on this site.](${withBaseUrl(
-				"docs/doc1"
-			)})`,
-			title: "Browse Docs"
-		},
 		{
 			content: "Ask questions about the documentation and project",
-			title: "Join the community"
+      title: "Join the community"
 		},
 		{
 			content: "Find out what's new with this project",
@@ -45,7 +39,7 @@ function Help(props) {
 							<section>
 								<div className="row padding-top--lg">
 									<div className="col col--4 text--break">
-										<h3>{supportLinks[0].title}</h3>
+										<h3>Browse Docs</h3>
 										<p>
 											Learn more using the{' '}
 											<Link to={withBaseUrl("docs/installation")}>
@@ -53,7 +47,7 @@ function Help(props) {
 											</Link>
 										</p>
 									</div>
-									{supportLinks.slice(1).map((link, index) => (
+									{supportLinks.map((link, index) => (
 										<div key={index} className="col col--4 text--break">
 											<h3>{link.title}</h3>
 											<p>{link.content}</p>
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 383af6a5c3..cedb4b87c8 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -8,8 +8,9 @@
 import React from "react";
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import classnames from "classnames";
 import withBaseUrl from "@docusaurus/withBaseUrl";
+import Link from '@docusaurus/Link'
+import styles from './styles.module.css'
 
 const features = [
 	{
@@ -29,48 +30,37 @@ const features = [
 	}
 ];
 
-class Button extends React.Component {
-	render() {
-		return (
-			<div className="pluginWrapper buttonWrapper" style={{ padding: "0 2px" }}>
-				<a className="button" href={this.props.href} target={this.props.target}>
-					{this.props.children}
-				</a>
-			</div>
-		);
-	}
-}
-
-Button.defaultProps = {
-	target: "_self"
-};
-
 const Logo = props => (
-	<div className="projectLogo" style={{ padding: "0px 250px 130px 0px" }}>
+	<div className={styles.projectLogo} style={{ padding: "0px 250px 130px 0px" }}>
 		<img src={props.img_src} />
 	</div>
 );
 
 function Index(props) {
-	let language = props.language || "";
 	const context = useDocusaurusContext();
 	const { siteConfig = {} } = context;
 	return (
 		<Layout title={siteConfig.title} description={siteConfig.description}>
 			<div>
-				<header className={classnames("hero hero--primary")}>
+				<header className="hero hero--primary">
 					<div className="container padding-vert--lg">
 						<div className="row">
 							<div className="col text--center">
 								<h1 className="hero__title">{siteConfig.title}</h1>
 								<p className="hero__subtitle">{siteConfig.tagline}</p>
-								<div className="buttons">
-									<Button href={withBaseUrl("docs/installation")}>
+								<div className={styles.buttons}>
+									<Link
+										className="button button--lg button--secondary margin-right--xs"
+										to={withBaseUrl("docs/installation")}
+									>
 										GETTING STARTED
-									</Button>
-									<Button href="https://github.com/facebook/redex">
+									</Link>
+									<Link
+										className="button button--lg button--secondary"
+										to={"https://github.com/facebook/redex"}
+									>
 										GITHUB
-									</Button>
+									</Link>
 								</div>
 							</div>
 							<Logo img_src={withBaseUrl("img/redex-hero.png")} />
@@ -79,7 +69,7 @@ function Index(props) {
 				</header>
 				<div className="mainContainer">
 					{features && features.length && (
-						<section className="features">
+						<section className={styles.features}>
 							<div className="container">
 								<div className="row padding-vert--xl">
 									{features.map(({ imageUrl, title, content }, idx) => (
@@ -87,7 +77,7 @@ function Index(props) {
 											{imageUrl && (
 												<div className="text--center margin-bottom--lg">
 													<img
-														className="featureImage"
+														className={styles.featureImage}
 														src={withBaseUrl(imageUrl)}
 														alt={title}
 													/>
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
new file mode 100644
index 0000000000..f6cacab8da
--- /dev/null
+++ b/website/src/pages/styles.module.css
@@ -0,0 +1,45 @@
+.features {
+	display: flex;
+	align-items: center;
+	padding: 2rem 0;
+	width: 100%;
+}
+
+.featureImage {
+	height: 180px;
+	width: 180px;
+}
+
+.buttons {
+	display: flex;
+	justify-content: center;
+}
+
+.projectLogo {
+	display: none;
+    pointer-events: none;
+}
+
+.projectLogo img {
+	height: 100px;
+	margin-bottom: 0px;
+}
+
+@media only screen and (min-width: 1200px) {
+	.projectLogo {
+		align-items: center;
+		bottom: 0;
+		display: flex;
+		justify-content: flex-end;
+		left: 0;
+		padding: 2em 100px 4em;
+		position: absolute;
+		right: 0;
+		top: 0;
+		border: "1px solid blue";
+	}
+	.projectLogo img {
+		height: 100%;
+		max-height: 250px;
+	}
+}
diff --git a/website/src/theme/Footer/index.js b/website/src/theme/Footer/index.js
deleted file mode 100644
index d88d685da8..0000000000
--- a/website/src/theme/Footer/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-import classnames from 'classnames';
-
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import withBaseUrl from '@docusaurus/withBaseUrl';
-
-function SocialFooter(props) {
-  const repoUrl = `https://github.com/${props.config.organizationName}/${
-    props.config.projectName
-  }`;
-  return (
-    <div className="footerSection" style={{flex:1}}>
-      <h4 className="footer__title">Social</h4>
-      <div className="social">
-        <a
-          className="github-button" // part of the https://buttons.github.io/buttons.js script in siteConfig.js
-          href={repoUrl}
-          data-count-href={`${repoUrl}/stargazers`}
-          data-show-count="true"
-          data-count-aria-label="# stargazers on GitHub"
-          aria-label="Star this project on GitHub">
-          {props.config.projectName}
-        </a>
-      </div>
-    </div>
-  );
-}
-
-
-function Footer() {
-  const context = useDocusaurusContext();
-  const {siteConfig = {}} = context;
-  const {themeConfig = {}} = siteConfig;
-  const {footer} = themeConfig;
-
-  if (!footer) {
-    return null;
-  }
-
-  const {copyright, links = [], logo} = footer;
-
-  return (
-    <footer
-      className={classnames('footer', {
-        'footer--dark': footer.style === 'dark',
-      })}>
-      <div className="container">
-        {links && links.length > 0 && (
-          <div className="row footer__links">
-            <a href='#'>
-              <img src={withBaseUrl('img/redex.png')} width="66" height="58"/>
-            </a>
-            {links.map((linkItem, i) => (
-              <div key={i} className="col footer__col" style={{flex:1}}>
-                {linkItem.title != null ? (
-                  <h4 className="footer__title">{linkItem.title}</h4>
-                ) : null}
-                {linkItem.items != null &&
-                Array.isArray(linkItem.items) &&
-                linkItem.items.length > 0 ? (
-                  <ul className="footer__items">
-                    {linkItem.items.map(item => (
-                      <li key={item.href || item.to} className="footer__item">
-                        <Link
-                          className="footer__link-item"
-                          {...item}
-                          {...(item.href
-                            ? {
-                                target: '_blank',
-                                rel: 'noopener noreferrer',
-                                href: item.href,
-                              }
-                            : {
-                                to: withBaseUrl(item.to),
-                              })}>
-                          {item.label}
-                        </Link>
-                      </li>
-                    ))}
-                  </ul>
-                ) : null}
-              </div>
-            ))}
-            <SocialFooter config={siteConfig}/>
-          </div>
-        )}
-        {(logo || copyright) && (
-          <div className="text--center">
-            {logo && logo.src && (
-              <div className="margin-bottom--sm">
-                <img className="footer__logo" alt={logo.alt} src={logo.src} />
-              </div>
-            )}
-            {copyright}
-          </div>
-        )}
-      </div>
-    </footer>
-  );
-}
-
-export default Footer;

From 3cf0dad612fcf956a7ba621be021ba3e6a4e07ee Mon Sep 17 00:00:00 2001
From: ThakurKarthik <iamkarthik08@gmail.com>
Date: Fri, 18 Oct 2019 22:09:13 +0530
Subject: [PATCH 5/8] removed fonts

---
 website/docusaurus.config.js        | 196 ++++++++++++++--------------
 website/src/css/custom.css          |  77 +++--------
 website/src/pages/faq.js            |  96 +++++++-------
 website/src/pages/index.js          | 156 +++++++++++-----------
 website/src/pages/styles.module.css |  56 ++++----
 5 files changed, 268 insertions(+), 313 deletions(-)

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 0ae0039c7b..fe635c8ef9 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -1,108 +1,108 @@
 /**
-* Copyright (c) 2017-present, Facebook, Inc.
-*
-* This source code is licensed under the MIT license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
 // site configuration options.
 
 const siteConfig = {
-	title: "Redex", // Title for your website.
-	tagline: "An Android Bytecode Optimizer",
-	url: "https://fbredex.com",
+  title: "Redex", // Title for your website.
+  tagline: "An Android Bytecode Optimizer",
+  url: "https://fbredex.com",
   baseUrl: "/",
 
-	// Used for publishing and more
-	organizationName: "facebook",
-	projectName: "redex",
-	
-	favicon: "img/favicon.png",
-	// You may provide arbitrary config keys to be used as needed by your
-	// template. For example, if you need your repo's URL...
-	// repoUrl: "https://github.com/facebook/redex",
-	presets: [
-		[
-			"@docusaurus/preset-classic",
-			{
-				docs: {
-					// docs folder path relative to website dir.
-					path: "../docs",
-					// sidebars file relative to website dir.
-					sidebarPath: require.resolve("./sidebars.json"),
-					// Equivalent to `enableUpdateBy`.
-					showLastUpdateAuthor: true,
-					// Equivalent to `enableUpdateTime`.
-					showLastUpdateTime: true
-				},
-				theme: {
-					customCss: require.resolve("./src/css/custom.css")
-				}
-			}
-		]
-	],
-	themeConfig: {
-		navbar: {
-			title: "Redex",
-			logo: {
-				alt: "Redex Logo",
-				src: "img/favicon.png"
-			},
-			links: [
-				{ to: "docs/installation", label: "Docs", position: "right" },
-				{ to: "docs/faq", label: "FAQ", position: "right" },
-				// {to: 'blog', label: 'Blog'}, // put back when we create a blog folder and add our first blog
-				{
-					href:
-					"https://code.facebook.com/posts/1480969635539475/optimizing-android-bytecode-with-redex",
-					label: "Birth",
-					position: "right"
-				}
-			]
-		},
-		footer: {
-			style: "dark",
-			logo: {
-				alt: "Facebook Open Source Logo",
-				src: "img/oss_logo.png"
-			},
-			links: [
-				{
-					title: "Docs",
-					items: [
-						{
-							label: "Getting Started",
-							to: "docs/installation"
-						},
-						{
-							label: "Configuring",
-							to: "docs/configuring"
-						},
-						{
-							label: "Using",
-							to: "docs/usage"
-						},
-						{
-							label: "FAQ",
-							to: "docs/faq"
-						}
-					]
-				},
-				{
-					title: "Social",
-					items: [
-						{
-							label: "Github",
-							href: "https://github.com/facebook/redex"
-						}
-					]
-				}
-			],
-			// This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
-			copyright: `Copyright © ${new Date().getFullYear()} Facebook Inc.`
-		},
-		image: "img/og_image.png"
-	}
+  // Used for publishing and more
+  organizationName: "facebook",
+  projectName: "redex",
+
+  favicon: "img/favicon.png",
+  // You may provide arbitrary config keys to be used as needed by your
+  // template. For example, if you need your repo's URL...
+  // repoUrl: "https://github.com/facebook/redex",
+  presets: [
+    [
+      "@docusaurus/preset-classic",
+      {
+        docs: {
+          // docs folder path relative to website dir.
+          path: "../docs",
+          // sidebars file relative to website dir.
+          sidebarPath: require.resolve("./sidebars.json"),
+          // Equivalent to `enableUpdateBy`.
+          showLastUpdateAuthor: true,
+          // Equivalent to `enableUpdateTime`.
+          showLastUpdateTime: true
+        },
+        theme: {
+          customCss: require.resolve("./src/css/custom.css")
+        }
+      }
+    ]
+  ],
+  themeConfig: {
+    navbar: {
+      title: "Redex",
+      logo: {
+        alt: "Redex Logo",
+        src: "img/favicon.png"
+      },
+      links: [
+        { to: "docs/installation", label: "Docs", position: "right" },
+        { to: "docs/faq", label: "FAQ", position: "right" },
+        // {to: 'blog', label: 'Blog'}, // put back when we create a blog folder and add our first blog
+        {
+          href:
+            "https://code.facebook.com/posts/1480969635539475/optimizing-android-bytecode-with-redex",
+          label: "Birth",
+          position: "right"
+        }
+      ]
+    },
+    footer: {
+      style: "dark",
+      logo: {
+        alt: "Facebook Open Source Logo",
+        src: "img/oss_logo.png"
+      },
+      links: [
+        {
+          title: "Docs",
+          items: [
+            {
+              label: "Getting Started",
+              to: "docs/installation"
+            },
+            {
+              label: "Configuring",
+              to: "docs/configuring"
+            },
+            {
+              label: "Using",
+              to: "docs/usage"
+            },
+            {
+              label: "FAQ",
+              to: "docs/faq"
+            }
+          ]
+        },
+        {
+          title: "Social",
+          items: [
+            {
+              label: "Github",
+              href: "https://github.com/facebook/redex"
+            }
+          ]
+        }
+      ],
+      // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
+      copyright: `Copyright © ${new Date().getFullYear()} Facebook Inc.`
+    },
+    image: "img/og_image.png"
+  }
 };
 
 module.exports = siteConfig;
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 88d5a87a96..d9edf5b386 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -3,68 +3,23 @@
  * You can override the default Infima variables here.
  * Note: this is not a complete list of --ifm- variables.
  */
- :root {
-    --ifm-color-primary: #75c7a4;
-    --ifm-color-primary-dark: rgb(105, 173, 147);
-    --ifm-color-primary-darker: rgb(99, 163, 139);
-    --ifm-color-primary-darkest: rgb(82, 134, 115);
-    --ifm-color-primary-light: rgb(138, 201, 178);
-    --ifm-color-primary-lighter: rgb(158, 211, 191);
-    --ifm-color-primary-lightest: rgb(186, 224, 210);
-    --ifm-color-secondary:#f9f9f9;
-    --ifm-color-primary-dark: rgb(216, 216, 216);
-    --ifm-color-primary-darker: rgb(204, 204, 204);
-    --ifm-color-primary-darkest: rgb(168, 168, 168);
-    --ifm-color-primary-light: rgb(242, 242, 242);
-    --ifm-color-primary-lighter: rgb(245, 245, 245);
-    --ifm-color-primary-lightest: rgb(248, 248, 248);
-  }
-
-/* your custom css */
-
-@font-face {
-  font-family: 'Lato';
-  src: url('/fonts/LatoLatin-Italic.woff2') format('woff2'),
-    url('/fonts/LatoLatin-Italic.woff') format('woff');
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Lato';
-  src: url('/fonts/LatoLatin-Black.woff2') format('woff2'),
-    url('/fonts/LatoLatin-Black.woff') format('woff');
-  font-weight: 900;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Lato';
-  src: url('/fonts/LatoLatin-BlackItalic.woff2') format('woff2'),
-    url('/fonts/LatoLatin-BlackItalic.woff') format('woff');
-  font-weight: 900;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Lato';
-  src: url('/fonts/LatoLatin-Light.woff2') format('woff2'),
-    url('/fonts/LatoLatin-Light.woff') format('woff');
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Lato';
-  src: url('/fonts/LatoLatin-Regular.woff2') format('woff2'),
-    url('/fonts/LatoLatin-Regular.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
+:root {
+  --ifm-color-primary: #75c7a4;
+  --ifm-color-primary-dark: rgb(105, 173, 147);
+  --ifm-color-primary-darker: rgb(99, 163, 139);
+  --ifm-color-primary-darkest: rgb(82, 134, 115);
+  --ifm-color-primary-light: rgb(138, 201, 178);
+  --ifm-color-primary-lighter: rgb(158, 211, 191);
+  --ifm-color-primary-lightest: rgb(186, 224, 210);
+  --ifm-color-secondary: #f9f9f9;
+  --ifm-color-primary-dark: rgb(216, 216, 216);
+  --ifm-color-primary-darker: rgb(204, 204, 204);
+  --ifm-color-primary-darkest: rgb(168, 168, 168);
+  --ifm-color-primary-light: rgb(242, 242, 242);
+  --ifm-color-primary-lighter: rgb(245, 245, 245);
+  --ifm-color-primary-lightest: rgb(248, 248, 248);
 }
 
 body {
-  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
+  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
 }
-
-
-
diff --git a/website/src/pages/faq.js b/website/src/pages/faq.js
index c75e865c86..8bd9cf9acd 100644
--- a/website/src/pages/faq.js
+++ b/website/src/pages/faq.js
@@ -12,55 +12,55 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Link from "@docusaurus/Link";
 
 function Help(props) {
-	const context = useDocusaurusContext();
-	const { siteConfig = {} } = context;
-	const supportLinks = [
-		{
-			content: "Ask questions about the documentation and project",
+  const context = useDocusaurusContext();
+  const { siteConfig = {} } = context;
+  const supportLinks = [
+    {
+      content: "Ask questions about the documentation and project",
       title: "Join the community"
-		},
-		{
-			content: "Find out what's new with this project",
-			title: "Stay up to date"
-		}
-	];
-	return (
-		<Layout title={siteConfig.title} description={siteConfig.description}>
-			<div className="docMainWrapper wrapper">
-				<div className="container padding-vert--lg padding-top--xl">
-					<div className="post">
-						<header className="postHeader">
-							<h1>Need help?</h1>
-						</header>
-						<p>This project is maintained by a dedicated group of people.</p>
-					</div>
-					<main>
-						{supportLinks && supportLinks.length && (
-							<section>
-								<div className="row padding-top--lg">
-									<div className="col col--4 text--break">
-										<h3>Browse Docs</h3>
-										<p>
-											Learn more using the{' '}
-											<Link to={withBaseUrl("docs/installation")}>
-												documentation on this site.
-											</Link>
-										</p>
-									</div>
-									{supportLinks.map((link, index) => (
-										<div key={index} className="col col--4 text--break">
-											<h3>{link.title}</h3>
-											<p>{link.content}</p>
-										</div>
-									))}
-								</div>
-							</section>
-						)}
-					</main>
-				</div>
-			</div>
-		</Layout>
-	);
+    },
+    {
+      content: "Find out what's new with this project",
+      title: "Stay up to date"
+    }
+  ];
+  return (
+    <Layout title={siteConfig.title} description={siteConfig.description}>
+      <div className="docMainWrapper wrapper">
+        <div className="container padding-vert--lg padding-top--xl">
+          <div className="post">
+            <header className="postHeader">
+              <h1>Need help?</h1>
+            </header>
+            <p>This project is maintained by a dedicated group of people.</p>
+          </div>
+          <main>
+            {supportLinks && supportLinks.length && (
+              <section>
+                <div className="row padding-top--lg">
+                  <div className="col col--4 text--break">
+                    <h3>Browse Docs</h3>
+                    <p>
+                      Learn more using the{" "}
+                      <Link to={withBaseUrl("docs/installation")}>
+                        documentation on this site.
+                      </Link>
+                    </p>
+                  </div>
+                  {supportLinks.map((link, index) => (
+                    <div key={index} className="col col--4 text--break">
+                      <h3>{link.title}</h3>
+                      <p>{link.content}</p>
+                    </div>
+                  ))}
+                </div>
+              </section>
+            )}
+          </main>
+        </div>
+      </div>
+    </Layout>
+  );
 }
 
 export default Help;
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index cedb4b87c8..efaa8bc3a1 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -9,92 +9,92 @@ import React from "react";
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import withBaseUrl from "@docusaurus/withBaseUrl";
-import Link from '@docusaurus/Link'
-import styles from './styles.module.css'
+import Link from "@docusaurus/Link";
+import styles from "./styles.module.css";
 
 const features = [
-	{
-		title: "Optimizing",
-		content:
-			"Redex provides a framework for reading, writing, and analyzing .dex files, and a set of optimization passes that use this framework to improve the bytecode. An APK optimized by Redex should be smaller and faster."
-	},
-	{
-		title: "Fast",
-		content:
-			"Fewer bytes also means faster download times, faster install times, and lower data usage for cell users. Lastly, less bytecode also typically translates into faster runtime performance."
-	},
-	{
-		title: "Buck Integration",
-		content:
-			"Redex has deep integration with Buck where your Redex config is passed as a parameter to the Buck android_binary rule when generating the APK."
-	}
+  {
+    title: "Optimizing",
+    content:
+      "Redex provides a framework for reading, writing, and analyzing .dex files, and a set of optimization passes that use this framework to improve the bytecode. An APK optimized by Redex should be smaller and faster."
+  },
+  {
+    title: "Fast",
+    content:
+      "Fewer bytes also means faster download times, faster install times, and lower data usage for cell users. Lastly, less bytecode also typically translates into faster runtime performance."
+  },
+  {
+    title: "Buck Integration",
+    content:
+      "Redex has deep integration with Buck where your Redex config is passed as a parameter to the Buck android_binary rule when generating the APK."
+  }
 ];
 
 const Logo = props => (
-	<div className={styles.projectLogo} style={{ padding: "0px 250px 130px 0px" }}>
-		<img src={props.img_src} />
-	</div>
+  <div className={styles.projectLogo}>
+    <img src={props.img_src} />
+  </div>
 );
 
 function Index(props) {
-	const context = useDocusaurusContext();
-	const { siteConfig = {} } = context;
-	return (
-		<Layout title={siteConfig.title} description={siteConfig.description}>
-			<div>
-				<header className="hero hero--primary">
-					<div className="container padding-vert--lg">
-						<div className="row">
-							<div className="col text--center">
-								<h1 className="hero__title">{siteConfig.title}</h1>
-								<p className="hero__subtitle">{siteConfig.tagline}</p>
-								<div className={styles.buttons}>
-									<Link
-										className="button button--lg button--secondary margin-right--xs"
-										to={withBaseUrl("docs/installation")}
-									>
-										GETTING STARTED
-									</Link>
-									<Link
-										className="button button--lg button--secondary"
-										to={"https://github.com/facebook/redex"}
-									>
-										GITHUB
-									</Link>
-								</div>
-							</div>
-							<Logo img_src={withBaseUrl("img/redex-hero.png")} />
-						</div>
-					</div>
-				</header>
-				<div className="mainContainer">
-					{features && features.length && (
-						<section className={styles.features}>
-							<div className="container">
-								<div className="row padding-vert--xl">
-									{features.map(({ imageUrl, title, content }, idx) => (
-										<div key={idx} className="col col--4 text--center">
-											{imageUrl && (
-												<div className="text--center margin-bottom--lg">
-													<img
-														className={styles.featureImage}
-														src={withBaseUrl(imageUrl)}
-														alt={title}
-													/>
-												</div>
-											)}
-											<h3>{title}</h3>
-											<p>{content}</p>
-										</div>
-									))}
-								</div>
-							</div>
-						</section>
-					)}
-				</div>
-			</div>
-		</Layout>
-	);
+  const context = useDocusaurusContext();
+  const { siteConfig = {} } = context;
+  return (
+    <Layout title={siteConfig.title} description={siteConfig.description}>
+      <div>
+        <header className="hero hero--primary">
+          <div className="container padding-vert--lg">
+            <div className="row">
+              <div className="col text--center">
+                <h1 className="hero__title">{siteConfig.title}</h1>
+                <p className="hero__subtitle">{siteConfig.tagline}</p>
+                <div className={styles.buttons}>
+                  <Link
+                    className="button button--lg button--secondary margin-right--xs"
+                    to={withBaseUrl("docs/installation")}
+                  >
+                    GETTING STARTED
+                  </Link>
+                  <Link
+                    className="button button--lg button--secondary"
+                    to={"https://github.com/facebook/redex"}
+                  >
+                    GITHUB
+                  </Link>
+                </div>
+              </div>
+              <Logo img_src={withBaseUrl("img/redex-hero.png")} />
+            </div>
+          </div>
+        </header>
+        <div className="mainContainer">
+          {features && features.length && (
+            <section className={styles.features}>
+              <div className="container">
+                <div className="row padding-vert--xl">
+                  {features.map(({ imageUrl, title, content }, idx) => (
+                    <div key={idx} className="col col--4 text--center">
+                      {imageUrl && (
+                        <div className="text--center margin-bottom--lg">
+                          <img
+                            className={styles.featureImage}
+                            src={withBaseUrl(imageUrl)}
+                            alt={title}
+                          />
+                        </div>
+                      )}
+                      <h3>{title}</h3>
+                      <p>{content}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </section>
+          )}
+        </div>
+      </div>
+    </Layout>
+  );
 }
 
 export default Index;
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index f6cacab8da..5477b47580 100644
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -1,45 +1,45 @@
 .features {
-	display: flex;
-	align-items: center;
-	padding: 2rem 0;
-	width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
 }
 
 .featureImage {
-	height: 180px;
-	width: 180px;
+  height: 180px;
+  width: 180px;
 }
 
 .buttons {
-	display: flex;
-	justify-content: center;
+  display: flex;
+  justify-content: center;
 }
 
 .projectLogo {
-	display: none;
-    pointer-events: none;
+  display: none;
+  pointer-events: none;
 }
 
 .projectLogo img {
-	height: 100px;
-	margin-bottom: 0px;
+  height: 100px;
+  margin-bottom: 0px;
 }
 
 @media only screen and (min-width: 1200px) {
-	.projectLogo {
-		align-items: center;
-		bottom: 0;
-		display: flex;
-		justify-content: flex-end;
-		left: 0;
-		padding: 2em 100px 4em;
-		position: absolute;
-		right: 0;
-		top: 0;
-		border: "1px solid blue";
-	}
-	.projectLogo img {
-		height: 100%;
-		max-height: 250px;
-	}
+  .projectLogo {
+    align-items: center;
+    bottom: 0;
+    display: flex;
+    justify-content: flex-end;
+    left: 0;
+    padding: 2em 200px 12em;
+    position: absolute;
+    right: 0;
+    top: 0;
+    border: "1px solid blue";
+  }
+  .projectLogo img {
+    height: 100%;
+    max-height: 250px;
+  }
 }

From 2953d1e34452a0f68cae3c0455ac5666c6e49f78 Mon Sep 17 00:00:00 2001
From: ThakurKarthik <iamkarthik08@gmail.com>
Date: Mon, 4 Nov 2019 00:18:19 +0530
Subject: [PATCH 6/8] removed font from website/src/css/custom.css

---
 website/src/css/custom.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index d9edf5b386..a2b42f5769 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -19,7 +19,3 @@
   --ifm-color-primary-lighter: rgb(245, 245, 245);
   --ifm-color-primary-lightest: rgb(248, 248, 248);
 }
-
-body {
-  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
-}

From 22154697058221bffb14b0ff8c7708695c3205f5 Mon Sep 17 00:00:00 2001
From: ThakurKarthik <iamkarthik08@gmail.com>
Date: Tue, 5 Nov 2019 21:17:19 +0530
Subject: [PATCH 7/8] removed fonts from static/css/custom.css file

---
 website/static/css/custom.css | 44 -----------------------------------
 1 file changed, 44 deletions(-)

diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index b9363b474a..e0f5692bea 100644
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@@ -7,46 +7,6 @@
 
 /* your custom css */
 
-@font-face {
-  font-family: 'Lato';
-  src: url('/fonts/LatoLatin-Italic.woff2') format('woff2'),
-    url('/fonts/LatoLatin-Italic.woff') format('woff');
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Lato';
-  src: url('/fonts/LatoLatin-Black.woff2') format('woff2'),
-    url('/fonts/LatoLatin-Black.woff') format('woff');
-  font-weight: 900;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Lato';
-  src: url('/fonts/LatoLatin-BlackItalic.woff2') format('woff2'),
-    url('/fonts/LatoLatin-BlackItalic.woff') format('woff');
-  font-weight: 900;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Lato';
-  src: url('/fonts/LatoLatin-Light.woff2') format('woff2'),
-    url('/fonts/LatoLatin-Light.woff') format('woff');
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Lato';
-  src: url('/fonts/LatoLatin-Regular.woff2') format('woff2'),
-    url('/fonts/LatoLatin-Regular.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
 .homeContainer {
   background: $primaryColor;
 }
@@ -73,10 +33,6 @@
   color: $primaryColor;
 }
 
-body {
-  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
-}
-
 .navigationSlider .slidingNav ul {
   color: $primaryColor;
 }

From 42ef9a74ce4194106ea4c71fa4527e941b7b760e Mon Sep 17 00:00:00 2001
From: ThakurKarthik <iamkarthik08@gmail.com>
Date: Mon, 11 Nov 2019 23:58:32 +0530
Subject: [PATCH 8/8] updated docusaurus to 2.0.0-alpha.34

---
 website/package.json | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/website/package.json b/website/package.json
index d4304147bd..eeb28e2682 100644
--- a/website/package.json
+++ b/website/package.json
@@ -4,11 +4,10 @@
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy"
-
   },
   "devDependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.27",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.27",
+    "@docusaurus/core": "^2.0.0-alpha.34",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.34",
     "classnames": "^2.2.6",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"