Merge remote-tracking branch 'upstream/main'

assets/contact_form.css

@@ -0,0 +1,91 @@
+/* Contact Section */
+.contact-section {
+    background-color: #f7f7f7;
+    padding: 40px 0;
+    text-align: center;
+  }
+
+  /* Contact Wrapper */
+  .contact-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  /* Contact Content */
+  .contact-content__title {
+    font-size: 2em;
+    color: #333;
+  }
+
+  /* Contact Form */
+  .contact-form__form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .contact-form__label {
+    font-size: 1.2em;
+    color: #555;
+    text-align: left;
+    margin-top: 10px;
+  }
+
+  .contact-form__input,
+  .contact-form__textarea {
+    width: 250%;
+    padding: 10px;
+    margin: 8px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+
+  .contact-form__submit {
+    background-color: #4C148A;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1.2em;
+    margin-top: 10px;
+  }
+
+  /* Responsive Styles */
+  @media (max-width: 768px) {
+    .contact-form__input,
+    .contact-form__textarea {
+      width: 100%;
+    }
+  }
+
+  /* Add this CSS to your stylesheet */
+
+.contact__fields {
+  display: flex;
+  justify-content: space-between;
+}
+
+.field,
+.field--with-error {
+  width: 48%; /* Adjust as needed */
+}
+
+
+/* Adjustments to the existing CSS */
+.contact-form__label {
+  font-size: 1.2em;
+  color: #555;
+  margin-top: 10px;
+  text-align: left; /* Align labels to the left */
+}
+
+.contact-form__input,
+.contact-form__textarea {
+  width: 100%; /* Adjusted width for full width */
+  padding: 10px;
+  margin: 8px 0;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}

assets/footer.css

@@ -0,0 +1,116 @@
+/* footer.css */
+.footer {
+    background-color: #4C148A;
+    /* Footer background color */
+    color: #ffffff;
+    /* Footer text color */
+    padding: 40px;
+    /* Footer padding */
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.footer__section {
+    flex-basis: calc(25% - 20px);
+    /* Four columns with margins */
+    margin-bottom: 15px;
+}
+
+.footer__title {
+    font-size: 20px;
+    /* Adjust the font size as needed */
+    color: #ffffff;
+    /* White color for the titles */
+    font-weight: 600;
+    /* Semi-bold for a bit of emphasis */
+    margin-bottom: 20px;
+    /* Space below the title */
+    text-transform: uppercase;
+    /* Uppercase for the title for stylistic choice */
+    letter-spacing: 1px;
+    /* Add some spacing between letters */
+}
+
+.footer__toggle {
+    font-size: 20px; /* Example size, adjust as needed */
+    color: #ffffff; /* White color for the titles */
+    font-weight: 600; /* Semi-bold for emphasis */
+    margin-bottom: 20px; /* Space below the title */
+   letter-spacing: 1px; /* Spacing between letters */
+}
+
+.footer__link {
+    display: block;
+    color: #ffffff;
+    margin-bottom: 10px;
+    text-decoration: none;
+}
+
+.footer__form {
+    display: flex;
+    gap: 10px;
+}
+
+.footer__input {
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    flex-grow: 1;
+}
+
+.footer__button {
+    background-color: #8C65F7;
+    /* Button background color */
+    color: #ffffff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.footer__button:hover {
+    background-color: #7A4FC6;
+    /* Button hover state */
+}
+
+/* footer.css */
+.footer__toggle-checkbox {
+    display: none;
+    /* Hide the default checkbox */
+}
+
+
+.footer__links-list {
+    margin-top: 20px;
+}
+
+@media (max-width: 768px) {
+    .footer {
+        flex-direction: column;
+    }
+
+    .footer__section {
+        flex-basis: 100%;
+        padding: 0;
+    }
+
+    .footer__toggle-checkbox {
+        display: inline-block;
+        /* Show checkbox in mobile view */
+    }
+
+    .footer__links-list {
+        display: none;
+    }
+
+    .footer__toggle-checkbox:checked+.footer__toggle+.footer__links-list {
+        display: block;
+    }
+
+    .footer__title {
+        font-size: 18px;
+        /* Slightly smaller font size for mobile */
+        text-align: center;
+    }
+}

assets/newsletter.css

@@ -0,0 +1,64 @@
+/* Newsletter Section */
+.newsletter-section {
+    background-color: #f7f7f7;
+    padding: 40px 0;
+    text-align: center;
+  }
+
+  /* Newsletter Wrapper */
+  .newsletter-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  /* Newsletter Content */
+  .newsletter-content {
+    margin-bottom: 20px;
+  }
+
+  .newsletter-content__title {
+    font-size: 2em;
+    color: #333;
+  }
+
+  .newsletter-content__subtitle {
+    font-size: 1.2em;
+    color: #666;
+  }
+
+  /* Newsletter Form */
+  .newsletter-form__form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .newsletter-form__input {
+    width: 150%;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+
+  .newsletter-form__submit {
+    background-color: #4C148A;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1.2em;
+  }
+
+  /* Newsletter Condition */
+  .newsletter-condition {
+    margin-top: 20px;
+  }
+
+  .newsletter-content__condition {
+    font-size: 0.75em;
+    color: #999;
+  }
+

sections/contact_form.liquid

@@ -0,0 +1,98 @@
+{{ 'contact_form.css' | asset_url | stylesheet_tag }}
+
+<div class="contact-section">
+    <div class="container">
+      <div class="contact-wrapper">
+        <div class="contact-content">
+          <h1 class="contact-content__title">{{ section.settings.contact_title }}</h1>
+        </div>
+
+        <div class="contact-form">
+          {%- form 'contact', id: 'ContactForm', class: 'contact-form__form' -%}
+            <div>
+              <div class="contact__fields">
+                <div class="field">
+                <input
+                  class="field__input contact-form__input"
+                  autocomplete="name"
+                  type="text"
+                  id="ContactForm-name"
+                  value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
+                  placeholder="Name"
+                >
+              </div>
+              <div class="field field--with-error">
+                <input
+                  autocomplete="email"
+                  type="email"
+                  id="ContactForm-email"
+                  class="field__input contact-form__input"
+                  name="contact[email]"
+                  spellcheck="false"
+                  autocapitalize="off"
+                  value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
+                  aria-required="true"
+                  placeholder="Email"
+                >
+              </div>
+            </div>
+
+            <div class="field">
+              <input
+                type="tel"
+                id="ContactForm-phone"
+                class="field__input contact-form__input"
+                autocomplete="tel"
+                pattern="[0-9\-]*"
+                value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}"
+                placeholder="Phone Number"
+              >
+            </div>
+            <div class="field">
+              <textarea
+                rows="5"
+                id="ContactForm-body"
+                class="text-area field__input contact-form__textarea"
+                placeholder="Comment"
+              >
+                {{- form.body -}}
+              </textarea>
+            </div>
+            <div class="contact-form__submit">
+              {{ section.settings.send_button_text }}
+            </div>
+          </div>
+        {%- endform -%}
+
+      </div>
+      </div>
+    </div>
+  </div>
+
+
+{% schema %}
+  {
+    "name": "Contact Page",
+    "settings": [
+      {
+        "type": "text",
+        "label": "Contact Title",
+        "id": "contact_title",
+        "default": "Contact Us"
+      },
+      {
+        "type": "text",
+        "label": "Send Button Text",
+        "id": "send_button_text",
+        "default": "Send Message"
+      }
+    ],
+    "presets": [
+      {
+        "category": "custom",
+        "name": "Contact Page"
+      }
+    ]
+  }
+{% endschema %}
+