feat: add the problem to the homepage

etchteam · Oct 11, 2024 · 6e6f8ab · 6e6f8ab
1 parent 232c113
commit 6e6f8ab
Showing 1 changed file with 58 additions and 0 deletions.
diff --git a/src/index.webc b/src/index.webc
@@ -14,6 +14,64 @@ description: Diamond UI is a methodology for teams who build software products a
   <d-separator @load="true"></d-separator>
 
   <div class="fade-in fade-in-delay">
+    <section>
+      <diamond-section padding="fluid">
+        <diamond-wrap size="md" gutter="none">
+          <d-title-group class="diamond-text-align-center diamond-spacing-bottom-xl">
+            <p>The problem</p>
+            <h2>Bloated components</h2>
+            <p>
+              Are your components too complicated?
+            </p>
+          </d-title-group>
+        </diamond-wrap>
+
+        <diamond-grid wrap="wrap" align-items="center" gap="lg">
+          <diamond-grid-item small-mobile="12" tablet="6">
+            <h3 class="diamond-text-size-lg">Does this look familiar?</h3>
+            <ul>
+              <li>Too many props.</li>
+              <li>Needs updating every time a new design is handed over.</li>
+              <li>Hard to test.</li>
+              <li>Awkward to maintain.</li>
+              <li>Conflicting or impossible prop combinations.</li>
+              <li>Doesn't fit emerging needs.</li>
+              <li>Difficult to understand.</li>
+              <li>Not composable.</li>
+            </ul>
+          </diamond-grid-item>
+          <diamond-grid-item small-mobile="12" tablet="6">
+<syntax-highlight
+  language="html"
+  webc:import="npm:@11ty/eleventy-plugin-syntaxhighlight"
+>
+<page-hero
+  title="Page title"
+  intro="Lorem ipsum dolor [...etc]"
+  button-text="Main action"
+  button-url="https://another.site/page-slug"
+  button-target="_blank"
+  button-rel="noopener noreferrer"
+  button-style="secondary"
+  theme="grey"
+  eyebrow="Eyebrow text"
+  eyebrow-tag="h1"
+  title-tag="p"
+  secondary-button="Secondary action"
+  secondary-button-type="button"
+  secondary-button-style="secondary"
+  on-secondary-button-click="handleButtonClick()"
+/>
+</syntax-highlight>
+          </diamond-grid-item>
+      </diamond-grid>
+
+      </diamond-section>
+    </section>
+
+    <d-separator></d-separator>
+
+
     <section>
       <diamond-section padding="fluid">
         <d-title-group class="diamond-text-align-center diamond-spacing-bottom-xl">