✨ Add CTA to SSW Dory Website (#100)

* Add section for call-to-action * Add class for background sswRed * Change CTA to link to contact us page on ssw website
SSWConsulting · Nov 22, 2023 · 55c20a5 · 55c20a5
1 parent cfa4104
commit 55c20a5
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/content/src/app/globals.css b/content/src/app/globals.css
@@ -8,12 +8,14 @@
   --background-end-rgb: 255, 255, 255;
 }
 
-*, ::before, ::after {
+*,
+::before,
+::after {
   border-style: none;
 }
- 
+
 html {
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 body {
@@ -39,21 +41,29 @@ body {
   background-color: hsla(0, 0%, 40%, 0.1);
 }
 
+.bg-ssw-red,
+.bg-sswRed {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 65 65 / var(--tw-bg-opacity));
+}
+
 .text-ssw-red {
   --tw-text-opacity: 1;
   color: rgb(204 65 65 / var(--tw-text-opacity));
 }
 
-a.footer-link,a.footer-link:visited  {
+a.footer-link,
+a.footer-link:visited {
   @apply text-white;
-  line-height: .75rem;
+  line-height: 0.75rem;
   transition: all 0.3s ease-in-out;
   &:hover {
     @apply text-ssw-red;
   }
 }
 
-a.footer-greybar-link, a.footer-greybar-link:hover {
+a.footer-greybar-link,
+a.footer-greybar-link:hover {
   text-decoration: underline;
 }
 

diff --git a/content/src/app/page.tsx b/content/src/app/page.tsx
@@ -72,6 +72,20 @@ export default function Home() {
           description="A low-code solution for easy set-up and configuration."
           imgURL="/dory-architecture-diagram.webp"
         />
+
+        <section className="text-gray-700 body-font">
+          <div className="container mx-auto mb-32 md:mb-0 flex px-5 py-10 items-center justify-center flex-col">
+            <h2 className="title-font leading-tight sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
+              Sold?
+            </h2>
+            <a href="https://www.ssw.com.au/company/contact-us" target="_blank">
+              <button className="overflow-hidden border-none py-3 px-10 text-[1.6rem] bg-sswRed text-white rounded">
+                Contact Us
+              </button>
+            </a>
+            <h3 className="leading-relaxed max-w-xs mt-4 text-center">Contact an Account Manager to discuss how we can set this up for you.</h3>
+          </div>
+        </section>
       </div>
       <Footer />
     </main>