apply feedback

Author: nasdan

docs/getting-started.mdx

@@ -3,6 +3,10 @@ title: Getting Started
 description: How to install and use React Image Focal Point
 ---
 
+## Live demo
+
+You can try this live demo in [Codesandbox](https://codesandbox.io/s/github/Lemoncode/react-image-focal-point/tree/main/examples/basic) or [StackBlitz](https://stackblitz.com/github/Lemoncode/react-image-focal-point/tree/main/examples/basic).
+
 ## Installation
 
 Install _React Image Focal Point_ using your favorite package manager:

website/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,22 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import classes from './header.module.css';
+
+export const Header: React.FC = () => {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <header className={clsx('hero hero--primary', classes.heroBanner)}>
+      <div className="container">
+        <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={classes.buttons}>
+          <Link className="button button--secondary button--lg" to="/docs/getting-started">
+            Get started
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+};

website/src/components/header/header.component.tsx

@@ -0,0 +1,18 @@
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

website/src/components/header/header.module.css

@@ -0,0 +1 @@
+export * from './header.component';

website/src/components/header/index.ts

@@ -0,0 +1 @@
+export * from './header';

website/src/components/index.ts

@@ -5,13 +5,13 @@
   Learn more about overriding Docusaurus/Infima CSS variables here: https://docusaurus.io/docs/styling-layout#styling-your-site-with-infima
 */
 :root {
-  --ifm-color-primary: #2e5385;
-  --ifm-color-primary-dark: #294b78;
-  --ifm-color-primary-darker: #274771;
-  --ifm-color-primary-darkest: #203a5d;
-  --ifm-color-primary-light: #335b92;
-  --ifm-color-primary-lighter: #355f99;
-  --ifm-color-primary-lightest: #3c6cad;
+  --ifm-color-primary: #005aad;
+  --ifm-color-primary-dark: #00519c;
+  --ifm-color-primary-darker: #004c93;
+  --ifm-color-primary-darkest: #003f79;
+  --ifm-color-primary-light: #0063be;
+  --ifm-color-primary-lighter: #0067c7;
+  --ifm-color-primary-lightest: #0075e1;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }

website/src/css/custom.css

@@ -0,0 +1,16 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import { Header } from '@site/src/components';
+
+const Home: React.FC = () => {
+  return (
+    <Layout description="React Image Focal Point provides a simple way to center a cropped image on a specific point.">
+      <Header />
+      <main>
+        <p>TODO: Add youtube video</p>
+      </main>
+    </Layout>
+  );
+};
+
+export default Home;