update

hugo.toml

@@ -13,7 +13,7 @@ Favicon = "https://example.com/favicon.png"
 
 [menu]
 [[menu.external]]
-name = "Contact"
+name = "App"
 url = "#"
 weight = 1
 
@@ -22,10 +22,21 @@ name = "About us"
 url = "#"
 weight = 2
 
-[params.social]
+[[params.social]]
-TwitterURL = "http://google.com"
+name = "Facebook"
-GoogleURL = "http://google.com"
+icon = "fab fa-facebook-f"
-FacebookURL = "http://google.com"
+url = "http://facebook.com"
+
+[[params.social]]
+name = "Twitter"
+icon = "fab fa-twitter"
+url = "http://twitter.com"
+
+[[params.social]]
+name = "Google"
+icon = "fab fa-google"
+url = "http://google.com"
+
 
 [params.content]
 LeadTitle = "Bellas Keys"
@@ -109,8 +120,8 @@ icon = "fa-solid fa-envelope"
 [[params.contact_forms]]
 name = "contact_form"
 fields = [
-	{ name = "Name", type = "text", required = true },
+	{ name = "Name", type = "text", placeholder = "test", required = true },
-	{ name = "Email", type = "email", required = true },
+	{ name = "Email", type = "email", placeholder = "test", required = true },
-	{ name = "Phone #", type = "tel", required = false, class = "full-width" },
+	{ name = "Phone #", type = "tel", placeholder = "test", required = false, class = "full-width" },
 	{ name = "Message", type = "textarea", required = true, class = "full-width" },
 ]

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

@@ -7,7 +7,7 @@
         {{ 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 }}>
+          <input type="{{ $field.type }}" placeholder="{{ $field.placeholder }}" id="{{ $field.name }}" name="{{ $field.name }}"{{ if $field.required }} required{{ end }}>
         {{ end }}
       </div>
     {{ end }}

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

@@ -1,40 +1,9 @@
 <ul class="footer-social-links list-reset">
-  {{ with .Site.Params.Social.FacebookURL }}
+  {{ range .Site.Params.Social }}
     <li>
-      <a href="{{ . }}">
+      <a href="{{ .url }}">
-        <span class="screen-reader-text">Facebook</span>
+        <span class="screen-reader-text">{{ .name }}</span>
-        <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+        <i class="{{ .icon }}"></i>
-          <path
-            d="M6.023 16L6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023z"
-            fill="#FFFFFF"
-          />
-        </svg>
-      </a>
-    </li>
-  {{ end }}
-  {{ with .Site.Params.Social.TwitterURL }}
-    <li>
-      <a href="{{ . }}">
-        <span class="screen-reader-text">Twitter</span>
-        <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4C.7 7.7 1.8 9 3.3 9.3c-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z"
-            fill="#FFFFFF"
-          />
-        </svg>
-      </a>
-    </li>
-  {{ end }}
-  {{ with .Site.Params.Social.GoogleURL }}
-    <li>
-      <a href="{{ . }}">
-        <span class="screen-reader-text">Google</span>
-        <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z"
-            fill="#FFFFFF"
-          />
-        </svg>
       </a>
     </li>
   {{ end }}

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

@@ -255,20 +255,6 @@ p {
   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);
@@ -404,7 +390,7 @@ textarea {
 }
 
 .button i {
-  transform: scale(1.5);
+  transform: scale(1.8);
   padding-right: 15px;
 }
 
@@ -614,19 +600,28 @@ textarea {
   position: relative;
   display: flex;
   flex-direction: row;
-  background: #fff;
+  background: #ffffff;
-  padding: 25px;
+  padding: 15px;
   height: 100%;
-  border-radius: 10px;
+  border-radius: 5px;
 }
 
 .contact-table {
   position: relative;
   display: flex;
-  flex-direction: row;
+  background: #ffffff;
-  background: #fff;
+  padding: 15px;
-  padding: 25px;
   height: 100%;
+  border-radius: 5px;
+  flex-direction: column;
+  gap: 25px;
+  width: 100%;
+}
+
+.contact-table input,
+.contact-table textarea {
+  width: 100%;
+  padding: 5px;
   border-radius: 10px;
 }
 
@@ -692,11 +687,13 @@ textarea {
 }
 
 .pricing-table-features {
-  width: 40%;
+  width: 35%;
   min-width: 13.5rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 @media (max-width: 768px) {
@@ -797,6 +794,10 @@ textarea {
   padding: 8px;
 }
 
+.footer-social-links {
+  font-size: 18px;
+}
+
 @media (min-width: 641px) {
   .site-footer-inner {
     justify-content: space-between;