add first two boxes of content

.estlintrc.ts

@@ -5,7 +5,11 @@ export default {
       files: ["*.ts", "*.tsx"],
       processor: "@graphql-eslint/graphql",
       parser: "@typescript-eslint/parser",
-      extends: ["@launchware/eslint-config-react", "eslint:recommended", "plugin:@typescript-eslint/recommended"],
+      extends: [
+        "@launchware/eslint-config-react",
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+      ],
       env: {
         es6: true,
       },

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 public
 src/gatsby-types.d.ts
 yarn-error.log
+.DS_Store

.vscode/settings.json

@@ -1,9 +1,5 @@
 {
-	"cSpell.words": [
-    "frontmatter",
-    "Roboto",
-    "tailwindcss"
-  ],
+  "cSpell.words": ["frontmatter", "Roboto", "tailwindcss"],
   "workbench.colorCustomizations": {
     "activityBar.activeBackground": "#4b2c8d",
     "activityBar.background": "#4b2c8d",

package.json

@@ -71,4 +71,4 @@
     "tailwindcss": "^3.3.0",
     "typescript": "^4.9.5"
   }
-}
+}

src/components/index-page/IndexExasperation.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import decorativeCircle from "../../assets/images/decorative-circle.png";
+import "./css/index-exasperation.css";
+
+export const IndexExasperation = () => {
+  return (
+    <div className="index-exasperation">
+      <div className="index-exasperation__contents">
+        <img
+          alt=""
+          className="index-exasperation__decorative-circle"
+          role="presentation"
+          src={decorativeCircle}
+        />
+        <div className="index-exasperation__image-container">
+          <img className="index-exasperation__image" src="https://placehold.co/680x520" />
+        </div>
+        <div className="index-exasperation__text-container">
+          <h2 className="index-exasperation__heading">
+            Creating custom software should be exhilarating, not exasperating
+          </h2>
+          <p className="index-exasperation__text">
+            Turning your vision into reality can be overwhelming, and partnering with the wrong
+            software development team can leave you feeling stressed out and frustrated. What’s
+            worse, you could invest a massive amount of time and money without a working product to
+            show for it at the end of it all.
+          </p>
+          <p className="index-exasperation__text">
+            When it comes to your software, the stakes are too high. Your project should have its
+            chance to make lives better. That's why our custom development team collaborates with
+            our clients to make sure their software solves the right problems and that they build
+            the right products.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/index-page/IndexHero.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import "./css/index-hero.css";
+
+export const IndexHero = () => {
+  return (
+    <div className="index-hero">
+      <div className="index-hero__contents">
+        <div className="index-hero__text-container">
+          <h2 className="index-hero__heading">Make your software a success</h2>
+          <p className="index-hero__text">
+            Software development that helps your organization reach its goals
+          </p>
+          <button className="index-hero__button button">Book my launch call</button>
+        </div>
+        <div className="index-hero__image-container">
+          <img className="index-hero__image" src="https://placehold.co/585x438" />
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/index-page/css/index-exasperation.css

@@ -0,0 +1,35 @@
+.index-exasperation {
+  @apply parent-section;
+  @apply md:bg-launch-black bg-launch-neutral-20 relative z-20;
+}
+
+.index-exasperation__contents {
+  @apply contents-container;
+  @apply relative z-40 lg:flex-row md:flex-col flex-col-reverse;
+}
+
+.index-exasperation__decorative-circle {
+  @apply -z-10 absolute -left-32 -top-80 hidden md:block;
+}
+
+.index-exasperation__text-container {
+  @apply flex flex-col md:items-start px-4 md:px-8 pt-8 lg:p-0;
+  @apply lg:max-w-md md:text-white;
+}
+
+.index-exasperation__heading {
+  @apply text-3xl text-left;
+}
+
+.index-exasperation__text {
+  @apply pt-4;
+  @apply text-lg;
+}
+
+.index-exasperation__image-container {
+  @apply px-4 md:px-8 py-8 lg:p-0;
+}
+
+.index-exasperation__image {
+  @apply rounded-image;
+}

src/components/index-page/css/index-hero.css

@@ -0,0 +1,33 @@
+.index-hero {
+  @apply parent-section;
+  @apply bg-white relative z-30;
+}
+
+.index-hero__contents {
+  @apply contents-container;
+}
+
+.index-hero__text-container {
+  @apply flex flex-col md:items-start px-4 pt-8 md:p-0;
+  @apply md:text-left text-center;
+}
+
+.index-hero__heading {
+  @apply text-3xl mb-6 px-6 md:px-0;
+}
+
+.index-hero__text {
+  @apply text-lg px-6 md:px-0;
+}
+
+.index-hero__image-container {
+  @apply px-4 py-8 md:p-0;
+}
+
+.index-hero__image {
+  @apply rounded-image;
+}
+
+.index-hero__button {
+  @apply xl:mt-12 mt-4;
+}

src/css/buttons.css

@@ -1,3 +1,3 @@
 .button {
-  @apply bg-launch-orange text-white font-bold py-1 px-3 rounded-md hover:text-launch-orange hover:bg-white border-launch-orange border-x-2 border-y-2;
+  @apply bg-launch-orange text-white font-bold py-2 px-3 rounded-md hover:text-launch-orange hover:bg-white border-launch-orange border-x-2 border-y-2;
 }

src/css/index.css

@@ -8,6 +8,18 @@
   .pad-container {
     @apply px-2 sm:px-10 max-w-7xl;
   }
+
+  .parent-section {
+    @apply flex justify-center w-full xl:py-16 py-4;
+  }
+
+  .contents-container {
+    @apply flex flex-col justify-between items-center w-full max-w-7xl md:flex-row md:px-10;
+  }
+
+  .rounded-image {
+    @apply rounded-3xl;
+  }
 }
 
 @font-face {

src/pages/index.tsx

@@ -1,20 +1,17 @@
 import React from "react";
-import { LaunchWareLogo } from "../components/layout/LaunchWareLogo";
 import { PageProps } from "gatsby";
 
-import "../css/index.css";
+import { IndexExasperation } from "../components/index-page/IndexExasperation";
+import { IndexHero } from "../components/index-page/IndexHero";
+import { LaunchWareLogo } from "../components/layout/LaunchWareLogo";
 import { Layout } from "../components/layout/Layout";
+import "../css/index.css";
 
 const IndexPage = (pageProps: PageProps) => {
   return (
     <Layout location={pageProps.location} title="Home">
-      <div className="coming-soon-notice">
-        <div className="content-container">
-          <LaunchWareLogo />
-          <h1>Coming Soon</h1>
-          <a href="/blog">Archive Blog Content</a>
-        </div>
-      </div>
+      <IndexHero />
+      <IndexExasperation />
     </Layout>
   );
 };

tailwind.config.ts

@@ -1,16 +1,13 @@
-const { fontFamily } = require('tailwindcss/defaultTheme')
+const { fontFamily } = require("tailwindcss/defaultTheme");
 
 export default {
   purge: [],
   darkMode: false,
-  content: [
-    "./src/pages/**/*.{js,jsx,ts,tsx}",
-    "./src/components/**/*.{js,jsx,ts,tsx}",
-  ],
+  content: ["./src/pages/**/*.{js,jsx,ts,tsx}", "./src/components/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {
       fontFamily: {
-        "inter": ["Inter", "Roboto", "sans-serif", ...fontFamily.sans]
+        inter: ["Inter", "Roboto", "sans-serif", ...fontFamily.sans],
       },
       colors: {
         white: "#ffffff",
@@ -23,8 +20,9 @@ export default {
         "launch-black-50": "#918B8E",
         "launch-black-30": "#B9B5B7",
         "launch-black-10": "#E2E0E1",
+        "launch-neutral-20": "#F9FAFB",
       },
-    }
+    },
   },
   variants: {
     extend: {},