- intial gatsbyJS setup

- setting up tailwindcss and other plugins
- designing the landing page
- creating a reusable button component

src/components/shared/Button.js

@@ -0,0 +1,22 @@
+import React from "react";
+import classNames from "classnames";
+import Loader from "react-loader-spinner";
+import styles from "./Button.module.css";
+
+const Button = ({ text, isLoading, outline, className }) => {
+  const getClasses = classNames(styles.container, className, {
+    [styles.outline]: outline,
+  });
+
+  return (
+    <div className={getClasses}>
+      {isLoading ? (
+        <Loader type="ThreeDots" color="#FFF" height={18} width={28} />
+      ) : (
+        text
+      )}
+    </div>
+  );
+};
+
+export default Button;

src/components/shared/Button.module.css

@@ -0,0 +1,16 @@
+.container {
+  padding: 6px 24px;
+  @apply flex items-center cursor-pointer inline-flex rounded font-semibold bg-primary text-inverse;
+}
+
+.container:hover {
+  @apply bg-primary-dark;
+}
+
+.container.outline {
+  @apply border border-primary bg-inverse text-primary;
+}
+
+.container.outline:hover {
+  @apply bg-inverse-dark;
+}

src/pages/index.js

@@ -0,0 +1,87 @@
+import React from "react";
+import { graphql } from "gatsby";
+import GatsbyImage from "gatsby-image";
+import Button from "../components/shared/Button";
+
+const Home = ({ data }) => {
+  return (
+    <div className="container mt-24">
+      <div className="flex items-center">
+        <GatsbyImage
+          className="shadow-md rounded"
+          fixed={data.file.childImageSharp.fixed}
+        />
+
+        <div className="ml-12">
+          <h1 className="text-5xl font-bold">Reactive Resume</h1>
+          <h2 className="mt-1 text-3xl text-gray-500">
+            A free and open-source resume builder.
+          </h2>
+
+          <div className="mt-12 flex">
+            <Button text="Go to App" />
+            <Button className="ml-8" outline text="Source Code" />
+          </div>
+        </div>
+      </div>
+
+      <div className="pt-8">
+        <Feature title="Create a resume that’s worthy of who you are.">
+          Keep up with the latest trends in resume design without having to
+          start from scratch. With new templates being designed every week and
+          having made it that easy to design your own templates and submit them
+          to the community, you’ll never have to copy and edit your friend’s
+          resume again.
+        </Feature>
+
+        <Feature title="Updating your resume shouldn’t be a chore.">
+          The biggest problem I’ve faced was when I had to update my resume when
+          I learned a new skill or found a new job. The ever-shifting layouts
+          and inconsistency with design over a number of years made it difficult
+          to update your own resume, but Reactive Resume makes it as easy as few
+          clicks.
+        </Feature>
+
+        <Feature title="Kickstarting your career shouldn’t come at a cost.">
+          There are brilliant alternatives to this app like{" "}
+          <a href="/">Novoresume</a> and <a href="/">Zety</a>, but they come at
+          a cost, mainly because of the time the developers and the marketing
+          they had to incur to make the product. This app might not be better
+          than them, but it does cater to people who are just not in a position
+          to pay hundreds of dollars to create a resume to bootstrap their
+          career.
+        </Feature>
+      </div>
+
+      <footer className="my-24">
+        <p className="font-medium text-gray-500">
+          Licensed under <a href="/">MIT</a> | Made with love by{" "}
+          <a href="https://www.amruthpillai.com/">Amruth Pillai</a>
+        </p>
+      </footer>
+    </div>
+  );
+};
+
+const Feature = ({ title, children }) => {
+  return (
+    <div className="mt-16">
+      <h3 className="text-3xl">{title}</h3>
+      <p className="mt-8 text-xl leading-loose">{children}</p>
+    </div>
+  );
+};
+
+export const query = graphql`
+  query {
+    file(relativePath: { eq: "logo.png" }) {
+      childImageSharp {
+        fixed(width: 256, height: 256) {
+          ...GatsbyImageSharpFixed
+        }
+      }
+    }
+  }
+`;
+
+export default Home;

src/styles/global.css

@@ -0,0 +1,27 @@
+:root {
+  --color-primary: #444;
+  --color-primary-dark: #333;
+  --color-inverse: #fff;
+  --color-inverse-dark: #f5f5f5;
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import "~react-loader-spinner/dist/loader/css/react-spinner-loader.css";
+
+html,
+body {
+  font-size: 12px;
+  @apply text-primary;
+  font-family: "Montserrat", sans-serif;
+}
+
+a {
+  @apply text-blue-600 font-medium;
+}
+
+a:hover {
+  @apply underline;
+}