feat: improve copy

index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet" />
     <link rel="shortcut icon" type="image/png" href="favicon-32x32.png" />
     <link rel="stylesheet" href="./styles.css" />
     <title>Embed a JS PDF editor, filler & annotator in your website</title>
@@ -71,48 +71,35 @@
       <h1>SimplePDF Embed</h1>
     </div>
     <div class="subtitle-container">
-      <h2>Embed a PDF editor & annotator in your website</h2>
+      <h2>Embed a PDF editor with a <u>single</u> line of code</h2>
     </div>
-    <div class="content">
-      <div class="offerings">
-        <p class="cta">
-          <a href="https://simplepdf.eu/embed#ghio" class="create-account"><b>Get started</b></a>
-        </p>
-        <h4>How it works</h4>
-        <div class="bullet-points">
-          <ul>
-            <li><a href="https://simplePDF.eu/embed#ghio" target="_blank">Add SimplePDF to your website</a></li>
-            <li><a href="https://simplepdf.eu/portal#ghio" target="_blank">Turn PDFs to web forms in minutes</a></li>
-            <li>
-              <a href="https://simplepdf.eu/help/how-to/configure-webhooks-pdf-form-submissions#ghio" target="_blank"
-                >Configure your own S3 bucket</a
-              >
-            </li>
-            <li>
-              <a href="https://simplepdf.eu/help/how-to/configure-webhooks-pdf-form-submissions#ghio"
-                >Get notified via webhooks</a
-              >
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="links-group">
-        <a href="mailto:[email protected]" target="_blank">[email protected]</a>
-      </div>
+    <div class="offerings">
+      <p class="cta">
+        <a href="https://simplepdf.eu/embed#ghio" class="create-account"><b>Add to your website</b></a>
+      </p>
+      <ul class="bullet-points">
+        <li><a href="https://simplepdf.eu/portal#ghio" target="_blank">PDFs to web forms in minutes</a></li>
+        <li>
+          <a href="https://simplepdf.eu/help/how-to/use-your-own-s3-bucket-storage-for-pdf-form-submissions#ghio" target="_blank"
+            >Use your own storage</a
+          >
+        </li>
+        <li>
+          <a href="https://simplepdf.eu/help/how-to/configure-webhooks-pdf-form-submissions#ghio"
+            >Get notified via webhooks</a
+          >
+        </li>
+      </ul>
     </div>
-
-    <h2 class="interactive-demo-title">Interactive demo<button id="button" onclick="sendMessage()">Try with a fillable form</button></h2>
+    <h3 class="interactive-demo-title">Interactive demo<button id="button" onclick="sendMessage()">Try with a fillable form</button></h3>
     <p class="google-sheet-disclaimer">The submitted document can be seen in this <a href="https://docs.google.com/spreadsheets/d/1l0SDhY5MaQvA8WbrehCSqsRWL1PPbiYFwSF7zTUiDxM/edit#gid=0">Google sheet</a></p>
-    <div class="embed-wrapper">
+
+    <div class="iframe-wrapper">
       <iframe
+      class="iframe"
       id="simplepdf"
       src="https://yourcompany.simplePDF.eu/editor?open=https://cdn.simplepdf.eu/simple-pdf/assets/sample.pdf"
-      frameborder="0"
-      width="100%"
-      height="900px"
-      style="border: 1px solid #aeaeae; border-radius: 6px"
     ></iframe>
-    </div>
-
+  </div>
   </body>
 </html>

styles.css

@@ -23,7 +23,7 @@ b {
 }
 
 h1 {
-  font-size: 32px;
+  font-size: 38px;
 }
 
 i {
@@ -42,6 +42,12 @@ h4 {
 
 h2 {
   margin-bottom: 0;
+  font-weight: 300;
+}
+
+h3 {
+  font-weight: 500;
+  font-size: 28px;
 }
 
 h4 {
@@ -85,11 +91,10 @@ a:hover {
   display: flex;
   align-items: center;
   flex-direction: column;
-  padding-bottom: 60px;
 }
 
 .cta {
-  padding: 40px 0;
+  padding: 20px 0 20px 0;
   font-size: 32px;
 }
 
@@ -102,26 +107,22 @@ a:hover {
   margin: 0;
 }
 
-.or {
-  padding: 20px 0;
-}
-
-.content > a {
-  padding: 12px 0;
-}
-
-.links-group {
-  font-size: 14px;
-}
-
 .bullet-points {
-  text-align: left;
+  margin: 0;
   display: flex;
   justify-content: center;
-
   font-size: 14px;
 }
 
+.bullet-points li {
+  padding: 4px 8px;
+  list-style: none;
+}
+
+.bullet-points li a {
+  color: #7e7e7e;
+}
+
 .create-account {
 }
 
@@ -132,10 +133,19 @@ a:hover {
   font-size: 14px;
 }
 
-.embed-wrapper {
-  transform: scale(0.7);
+.iframe-wrapper {
+  display: flex;
+  justify-content: center;
+  transform: scale(0.8);
   transform-origin: 50% 0;
-  box-shadow: 1px 1px solid red;
+}
+
+.iframe {
+  width: 100%;
+  border: none;
+  height: 900px;
+  border: 1px solid #aeaeae;
+  border-radius: 6px;
 }
 
 .interactive-demo-title {
@@ -147,3 +157,11 @@ a:hover {
 .interactive-demo-title button {
   margin-left: 12px;
 }
+
+@media screen and (max-width: 1024px) {
+  .iframe-wrapper {
+    display: flex;
+    justify-content: center;
+    transform: scale(1);
+  }
+}