feat: update styling

bendersej · bendersej · commit 7e4eac8bd210 · 2023-08-18T09:14:16.000+03:00
diff --git a/index.html b/index.html
@@ -13,11 +13,11 @@
   <body>
     <div class="github-star-container">
       <iframe
-        src="https://ghbtns.com/github-btn.html?user=SimplePDF&repo=simplepdf-embed&type=star&count=true"
+        src="https://ghbtns.com/github-btn.html?user=SimplePDF&repo=simplepdf-embed&type=star&count=true&size=large"
         frameborder="0"
         scrolling="0"
-        width="100"
-        height="20"
+        width="170"
+        height="30"
         title="GitHub"
       ></iframe>
     </div>
@@ -28,47 +28,31 @@ <h1>SimplePDF Embed</h1>
       <h2>Embed a PDF editor & annotator in your website</h2>
     </div>
     <div class="content">
-      <div class="links-group">
-        <a href="https://github.com/SimplePDF/simplepdf-embed/blob/main/react/README.md" target="_blank">React</a>
-        |
-        <a href="https://github.com/SimplePDF/simplepdf-embed/tree/main/web" target="_blank">Script</a>
-        |
-        <a href="https://github.com/SimplePDF/simplepdf-embed/blob/main/documentation/IFRAME.md" target="_blank"
-          >Iframe</a
-        >
-      </div>
-      <a href="https://simplePDF.eu/embed#ghio" target="_blank">Learn more about SimplePDF Embed<i>🔗</i></a>
       <div class="offerings">
-        <p>
-          <a href="https://github.com/SimplePDF/simplepdf-embed/"><b>Free</b></a> without any limits and
-          <b>no account needed</b>
-        </p>
-        <div class="rto-link">
-          That's what they did: click on any PDF link on
-          <a href="http://rto.nstu.ca/FillableForm.html" target="_blank">their website</a>
-        </div>
-
-        <p class="or" o>or</p>
-        <p>
-          <a href="https://simplepdf.eu/pricing#ghio"><b>Get an account</b></a>
+        <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/portal#ghio" target="_blank">any PDF becomes a web form</a></li>
-            <li><a href="https://simplepdf.eu/embed#ghio" target="_blank">...with your own branding</a></li>
+            <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"
-                >...stored in your own storage</a
+                >Configure your own S3 bucket</a
               >
             </li>
             <li>
               <a href="https://simplepdf.eu/help/how-to/configure-webhooks-pdf-form-submissions#ghio"
-                >...with webhooks notifications</a
+                >Get notified via webhooks</a
               >
             </li>
           </ul>
         </div>
       </div>
+      <div class="links-group">
+        <a href="mailto:hello@simplepdf.eu" target="_blank">hello@simplepdf.eu</a>
+      </div>
     </div>
 
     <iframe
diff --git a/styles.css b/styles.css
@@ -27,6 +27,16 @@ h4 {
   text-align: center;
 }
 
+h2 {
+  margin-bottom: 0;
+}
+
+h4 {
+  text-transform: uppercase;
+  margin-top: 0;
+  font-size: 18px;
+}
+
 a {
   color: #3e8eff;
   text-decoration: none;
@@ -65,20 +75,20 @@ a:hover {
   padding-bottom: 60px;
 }
 
+.cta {
+  padding: 40px 0;
+  font-size: 32px;
+}
+
 .offerings {
   text-align: center;
-  padding-top: 40px;
+  padding-bottom: 40px;
 }
 
 .offerings p {
   margin: 0;
 }
 
-.rto-link {
-  font-size: 12px;
-  color: #737373;
-}
-
 .or {
   padding: 20px 0;
 }
@@ -98,3 +108,6 @@ a:hover {
 
   font-size: 14px;
 }
+
+.create-account {
+}
