add first two boxes of content

Author: mvserna

src/assets/images/decorative-circle.png

@@ -0,0 +1,30 @@
+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 className="index-exasperation__decorative-circle" 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/IndexExasperation.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/IndexHero.tsx

@@ -0,0 +1,35 @@
+.index-exasperation {
+  @apply flex justify-center w-full xl:py-16 py-4;
+  @apply xl:bg-launch-black bg-[#F5F5F5] relative z-20;
+}
+
+.index-exasperation__contents {
+  @apply flex flex-col justify-between items-center w-full max-w-7xl xl:flex-row xl:px-10;
+  @apply relative z-40 xl:flex-row flex-col-reverse flex-wrap;
+}
+
+.index-exasperation__decorative-circle {
+  @apply -z-10 absolute -left-[18rem] bottom-40 hidden xl:block;
+}
+
+.index-exasperation__text-container {
+  @apply flex flex-col xl:items-start px-4 pt-8 xl:p-0;
+  @apply max-w-md xl: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 py-8 xl:p-0;
+}
+
+.index-exasperation__image {
+  @apply rounded-3xl;
+}

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

@@ -0,0 +1,34 @@
+
+.index-hero {
+  @apply flex justify-center w-full xl:py-16 py-4;
+  @apply bg-white relative z-30;
+}
+
+.index-hero__contents {
+  @apply flex flex-col justify-between items-center w-full max-w-7xl xl:flex-row xl:px-10;
+}
+
+.index-hero__text-container {
+  @apply flex flex-col xl:items-start px-4 pt-8 xl:p-0;
+  @apply xl:text-left text-center;
+}
+
+.index-hero__heading {
+  @apply text-3xl mb-6 px-6 xl:px-0;
+}
+
+.index-hero__text {
+  @apply text-lg px-6 xl:px-0;
+}
+
+.index-hero__image-container {
+  @apply px-4 py-8 xl:p-0;
+}
+
+.index-hero__image {
+  @apply rounded-3xl;
+}
+
+.index-hero__button {
+  @apply xl:mt-12 mt-4;
+}

src/components/index-page/css/index-hero.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/buttons.css

@@ -1,20 +1,24 @@
 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>
+        <IndexHero />
+        <IndexExasperation />
+        <div className="coming-soon-notice">
+          <div className="content-container">
+            <LaunchWareLogo />
+            <h1>Coming Soon</h1>
+            <a href="/blog">Archive Blog Content</a>
+          </div>
         </div>
-      </div>
     </Layout>
   );
 };