Skip to content

Commit

Permalink
added image split to contact page
Browse files Browse the repository at this point in the history
  • Loading branch information
@james0r
james0r committed Jun 22, 2024
1 parent 1181df0 commit 7cda462
Show file tree
Hide file tree
Showing 8 changed files with 266 additions and 257 deletions.
Binary file added public/using-mobile-phone.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion sections/featured-product-grid.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<div class="px-6 md:px-8 py-12">
{% if section.settings.featured_collection != blank %}
<div class="featured-product-grid-inner container">
<h2 class="mb-12 text-blue-500">Featured Product Grid 15</h2>
<h2 class="mb-12">Featured Product Grid</h2>
<div class="grid-wrapper">
{% assign featured_collection = section.settings.featured_collection %}
<div class="product-grid">
Expand Down
233 changes: 124 additions & 109 deletions sections/main-page-contact.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,121 +14,136 @@
}
{%- endschema -%}

<div class="bg-white">
<div class="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900">
{{ section.settings.heading | escape }}
</h2>
<p class="mb-8 lg:mb-16 font-light text-center text-gray-500 sm:text-xl">
Got a technical issue? Want to send feedback about a beta feature? Need details about our Business plan? Let us know.
</p>
{%- form 'contact', id: 'contact-form', class: 'space-y-4' -%}
{%- if form.posted_successfully? -%}
<div
class="text-center"
tabindex="-1"
autofocus>
{{ 'templates.contact.form.post_success' | t }}
<div class="bg-white px-6 md:px-8 py-12">
<div class="container">
<header>
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900">
{{ section.settings.heading | escape }}
</h2>
<p class="mb-16 font-light text-center text-gray-500 sm:text-xl max-w-[700px] mx-auto">
Got a technical issue? Want to send feedback about a beta feature? Need details about our Business plan? Let us know.
</p>
</header>
<div class="sm:flex">
<div class="flex-1 height-full mb-12 sm:mb-0">
<div class="h-full relative aspect-square sm:aspect-none">
<img
src="{{ 'using-mobile-phone.jpg' | asset_url }}"
alt="contact us"
class="w-full h-full sm:absolute object-cover object-center rounded-lg shadow-lg"
>
</div>
{%- elsif form.errors -%}
<div class="flex items-center">
<div class="mr-2">
{%- render 'icon-error' -%}
</div>
<h2
class=""
role="alert"
tabindex="-1"
autofocus>
{{ 'templates.contact.form.error_heading' | t }}
</h2>
</div>
<ul class="form-status-list caption-large" role="list">
<li>
<a href="#ContactForm-email" class="">
{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
</a>
</li>
</ul>
{%- endif -%}

<div>
<label for="ContactForm-name" class="block mb-2 text-sm font-medium text-gray-900">
{{ 'templates.contact.form.name' | t }}
</label>
<input
type="name"
name="contact[name]"
id="ContactForm-name"
value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
placeholder="{{ 'templates.contact.form.name' | t }}"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
required>
</div>
<div>
<label for="ContactForm-email" class="block mb-2 text-sm font-medium text-gray-900">
{{ 'templates.contact.form.email' | t }}
<span aria-hidden="true" class="text-red-500">*
</span>
</label>
<input
autocomplete="email"
type="email"
id="ContactForm-email"
name="contact[email]"
spellcheck="false"
autocapitalize="off"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
aria-required="true"
{%- if form.errors contains 'email' -%}
aria-invalid="true"
aria-describedby="ContactForm-email-error"
{%- endif -%}
placeholder="{{ 'templates.contact.form.email' | t }}">
{%- if form.errors contains 'email' -%}
<small class="block mt-2" id="ContactForm-email-error">
<span class="visually-hidden sr-only">
{{ 'accessibility.error' | t }}
</span>
<span class="flex items-center">
<div class="flex-1 sm:ml-12">
{%- form 'contact', id: 'contact-form', class: 'space-y-4' -%}
{%- if form.posted_successfully? -%}
<div
class="text-center"
tabindex="-1"
autofocus>
{{ 'templates.contact.form.post_success' | t }}
</div>
{%- elsif form.errors -%}
<div class="flex items-center">
<div class="mr-2">
{%- render 'icon-error' -%}
</div>
<span>
{{ form.errors.translated_fields['email'] | capitalize }}
{{ form.errors.messages['email'] }}
<h2
class=""
role="alert"
tabindex="-1"
autofocus>
{{ 'templates.contact.form.error_heading' | t }}
</h2>
</div>
<ul class="form-status-list caption-large" role="list">
<li>
<a href="#ContactForm-email" class="">
{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
</a>
</li>
</ul>
{%- endif -%}

<div>
<label for="ContactForm-name" class="block mb-2 text-sm font-medium text-gray-900">
{{ 'templates.contact.form.name' | t }}
</label>
<input
type="name"
name="contact[name]"
id="ContactForm-name"
value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
placeholder="{{ 'templates.contact.form.name' | t }}"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
required>
</div>
<div>
<label for="ContactForm-email" class="block mb-2 text-sm font-medium text-gray-900">
{{ 'templates.contact.form.email' | t }}
<span aria-hidden="true" class="text-red-500">*
</span>
</span>
</small>
{%- endif -%}
</div>
<div>
<label for="contact-form-subject" class="block mb-2 text-sm font-medium text-gray-900">Subject
</label>
<input
autocomplete="subject"
type="text"
id="contact-form-subject"
name="contact[subject]"
class="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500"
placeholder="Let us know how we can help you">
</div>
<div class="sm:col-span-2">
<label for="contact-form-comment" class="block mb-2 text-sm font-medium text-gray-900">
{{ 'templates.contact.form.comment' | t }}
</label>
<textarea
id="contact-form-comment"
name="contact[body]"
rows="6"
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500"
placeholder="Leave a comment..."></textarea>
</label>
<input
autocomplete="email"
type="email"
id="ContactForm-email"
name="contact[email]"
spellcheck="false"
autocapitalize="off"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
aria-required="true"
{%- if form.errors contains 'email' -%}
aria-invalid="true"
aria-describedby="ContactForm-email-error"
{%- endif -%}
placeholder="{{ 'templates.contact.form.email' | t }}">
{%- if form.errors contains 'email' -%}
<small class="block mt-2" id="ContactForm-email-error">
<span class="visually-hidden sr-only">
{{ 'accessibility.error' | t }}
</span>
<span class="flex items-center">
<div class="mr-2">
{%- render 'icon-error' -%}
</div>
<span>
{{ form.errors.translated_fields['email'] | capitalize }}
{{ form.errors.messages['email'] }}
</span>
</span>
</small>
{%- endif -%}
</div>
<div>
<label for="contact-form-subject" class="block mb-2 text-sm font-medium text-gray-900">Subject
</label>
<input
autocomplete="subject"
type="text"
id="contact-form-subject"
name="contact[subject]"
class="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500"
placeholder="Let us know how we can help you">
</div>
<div class="sm:col-span-2">
<label for="contact-form-comment" class="block mb-2 text-sm font-medium text-gray-900">
{{ 'templates.contact.form.comment' | t }}
</label>
<textarea
id="contact-form-comment"
name="contact[body]"
rows="6"
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500"
placeholder="Leave a comment..."></textarea>
</div>

<button type="submit" class="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-blue-700 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300">
{{ 'templates.contact.form.send' | t }}
</button>
{%- endform -%}
</div>

<button type="submit" class="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-blue-700 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300">
{{ 'templates.contact.form.send' | t }}
</button>
{%- endform -%}
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion sections/main-page.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

<div class="px-6 md:px-8">
<div class="container py-6 md:py-8">
<div class="rte">
<div class="prose">
<h1>{{ page.title }}</h1>
<div>{{ page.content }}</div>
</div>
Expand Down
Loading

0 comments on commit 7cda462

Please sign in to comment.