update

hugo.toml

@@ -86,3 +86,29 @@ theme = "agnes-hugo-theme"
         Description = "Etiam faucibus finibus"
     [[params.pricing.Features]]
         Description = "Etiam sit amet mi sapien"
+
+
+[[params.buttons]]
+label = "Button 1"
+url = "#"
+icon = "fa-brands fa-square-whatsapp"
+
+[[params.buttons]]
+label = "Button 2"
+url = "#"
+icon = "fa-brands fa-skype"
+
+[[params.buttons]]
+label = "Button 3"
+url = "#"
+icon = "fa-solid fa-envelope-open-text"
+
+
+[[params.contact_forms]]
+name = "contact_form"
+fields = [
+	{ name = "Name", type = "text", required = true },
+	{ name = "Email", type = "email", required = true },
+	{ name = "Phone #", type = "tel", required = false, class = "full-width" },
+	{ name = "Message", type = "textarea", required = true, class = "full-width" }
+]

themes/agnes-hugo-theme/layouts/index.html

@@ -48,19 +48,20 @@
       </div>
     </div>
   </section>
-  <section class="features section">
+  <section class="section">
-    <div class="container has-top-divider">
+    <div class="contact container has-top-divider">
-      <div class="features-inner section-inner">
+      <h2 class="section-title mt-0 text-center">Contact</h2>
-        <div class="features-wrap">
+      <div class="contact-flex">
-          {{ range site.Params.feature }}
+        <div class="contact-inner">
-            <div class="feature is-revealing feature-inner">
+          {{ range .Site.Params.buttons }}
-              <div class="feature-description">
+            <a href="{{ .url }}" class="button"
-                <h4 class="feature-title h3-mobile">{{ .FeatureTitle }}</h4>
+              ><i class="{{ .icon }}"></i>{{ .label }}</a
-                <p class="text-sm">{{ .FeatureDescription }}</p>
+            >
-              </div>
-            </div>
           {{ end }}
         </div>
+        <div class="contact-table">
+          {{ partial "contact_form.html" . }}
+        </div>
       </div>
     </div>
   </section>
@@ -83,7 +84,7 @@
                 <a
                   href="{{ .ButtonURL }}"
                   style="margin-top:15px;"
-                  class="button button-primary-dark"
+                  class="button button-primary-dark button-pricing"
                   >{{ .ButtonText }}</a
                 >
               </div>

themes/agnes-hugo-theme/layouts/partials/contact_form.html

@@ -0,0 +1,18 @@
+{{ $form := index .Site.Params.contact_forms 0 }}
+<form class="contact-form" action="{{ $form.submit_url }}" method="post">
+  <div class="form-grid">
+    {{ range $field := $form.fields }}
+      <div class="form-group {{ if $field.class }}{{ $field.class }}{{ end }}">
+        <label for="{{ $field.name }}">{{ $field.name }}</label>
+        {{ if eq $field.type "textarea" }}
+          <textarea id="{{ $field.name }}" name="{{ $field.name }}" rows="5"{{ if $field.required }} required{{ end }}></textarea>
+        {{ else }}
+          <input type="{{ $field.type }}" id="{{ $field.name }}" name="{{ $field.name }}"{{ if $field.required }} required{{ end }}>
+        {{ end }}
+      </div>
+    {{ end }}
+  </div>
+  <div class="form-group full-width">
+    <button class="button" type="submit">Submit</button>
+  </div>
+</form>

themes/agnes-hugo-theme/layouts/partials/head.html

@@ -21,4 +21,5 @@
   {{ end }}
   <link rel="stylesheet" type="text/css" href="/css/style.css" />
   <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>

themes/agnes-hugo-theme/static/css/style.css

@@ -1,7 +1,8 @@
 :root {
     --background-color: #0D161E;
     --accent-1: linear-gradient(45deg, #0559B0, #BE528A);
-    --accent-2: #52B8BD;
+    --accent-2: linear-gradient(25deg, rgb(45, 85, 125), #0B2D4F);
+    --accent-3: linear-gradient(45deg, #BE528A, #762a51);
     --font-color: #d2d2d2;
     --font-color-dark: #1f1f1f
 }
@@ -240,6 +241,56 @@ p {
     padding-right: 16px
 }
 
+.contact {
+    padding-top: 2.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.contact-flex {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 25px;
+    width: 100%;
+}
+
+.contact-form {
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    width: 100%;
+}
+
+.form-group input, textarea {
+    width: 100%;
+    padding: 5px;
+    border-radius: 10px;
+}
+
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+}
+
+.full-width {
+    grid-column: span 2;
+  }
+
+.form-group label {
+    font-size: 16px;
+    font-weight: 700;
+    color:#1f2b35
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+}
+
 @media (min-width:481px) {
     .container {
         padding-left: 24px;
@@ -341,8 +392,8 @@ p {
     font-weight: 700;
     line-height: 16px;
     text-decoration: none !important;
-    background-color: #fff;
+    background: var(--accent-2);
-    color: #0081f6 !important;
+    color: #efefef !important;
     border: none;
     border-radius: 4px;
     cursor: pointer;
@@ -353,6 +404,11 @@ p {
     white-space: nowrap
 }
 
+.button i {
+    transform: scale(1.5);
+    padding-right: 15px;
+}
+
 .button:active {
     outline: 0
 }
@@ -367,6 +423,10 @@ p {
     transition: .3s ease
 }
 
+.button-pricing {
+    background: var(--accent-3) !important
+}
+
 .button-primary:hover {
     box-shadow: 2px 4px 10px rgba(255, 255, 255, .25);
     transition: .3s ease
@@ -465,6 +525,18 @@ p {
     }
 }
 
+.contact-inner {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 1.5rem;
+    justify-content: space-between;
+}
+
+.contact-inner a {
+    width: 100%;
+}
+
 .feature-icon {
     width: 3rem;
     height: 3rem;
@@ -550,6 +622,16 @@ p {
     border-radius: 10px;
 }
 
+.contact-table {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    background: #fff;
+    padding: 25px;
+    height: 100%;
+    border-radius: 10px; 
+}
+
 @media (max-width: 768px) {
     .pricing-table-inner {
         flex-direction: column;