index.html

---
layout: page
hero_path: /uploads/00005fwerbw.jpg
logo_path: /assets/images/boty.png
enquire_buttons: true
enquire_copy: Enquiref
contact_email: bodyoftheyearbakery@gmail.com
contact_options:
  - option: I want bread
  - option: I want to chat
---

<section class="lead-panel" id="lead" style="background-image: url('{{ page.hero_path }}');">
    <div class="inner">
        <div class="row">
            <h1><img class="logo" src="{{ page.logo_path }}" /></h1>
        </div>
        <div class="row">
            <p><a class="cta editable" href="#products">Show me YA</a></p>
        </div>
    </div>
    {% if site.data.social.instagram_url %}
        <a target="_blank" href="{{site.data.social.instagram_url}}"><img src="/assets/icons/instagram.svg" class="instagram" /></a>
    {% endif %}
</section>

<svg class="editable"></svg>

<section class="product-panel" id="products">
    <h2 class="editable">
        The Goods <a class="editor-link" href="cloudcannon:collections/_products">Edit products</a>
    </h2>
    {% for product in site.products %}
        <div class="product row">
            <div class="product-image">
                <div class="inner">
                    <img src="{{ product.image_path }}" />
                </div>
            </div>
            <div class="product-body">
                <h3>{{ product.title }}</h3>
                {{ product.content }}
                {% if page.enquire_buttons %}
                    <p class="cta"><a href="#contact">{{ page.enquire_copy }}</a></p>
                {% endif %}
                <a href="cloudcannon:collections/{{ product.relative_path }}" class="editor-link">Edit {{ product.title }}</a>
            </div>
        </div>
    {% endfor %}
</section>

<section class="customer-panel">
    <div class="inner">
        <h2 class="editable">
            Our Customers <a class="editor-link" href="cloudcannon:collections/_customers">Edit customers</a>
        </h2>
        <p class="editable">
            Want the bread ready to eat prepared delicious ingredients and love? Visit one of these fine establishments below:
        </p>
        <div class="row">
            {% for customer in site.customers %}
                <a class="customer" href="{{ customer.href }}" target="_blank" style="background-color: {{ customer.background_color }};">
                    <span style="background-image: url({{ customer.image_path }})">{{customer.title}}</span>
                </a>
            {% endfor %}
            {% for num in (1...4) %}
                <div class="customer silent">
                </div>
            {% endfor %}
        </div>
        <p class="editable">
            If you would like to become a customer, use the contact form below.
        </p>
    </div>
</section>

<section class="contact-panel" id="contact">
    <div class="inner">
        <h2 class="editable">
            Contact Us
        </h2>
        <p class="editable">
            Whether you want bread or a chat, use the form below to send us a message. Be sure to follow us on Instagram to receive mouth watering updates.
        </p>
        <form method="post" action="/success/">
            <div class="row">
                <label for="contact-panel-name">Name</label>
                <input type="text" name="name" id="contact-panel-name" required />
            </div>
            <div class="row">
                <label for="contact-panel-email">Email</label>
                <input type="email" name="email" id="contact-panel-email" required />
            </div>
            <div class="row">
                <label for="contact-panel-reason">Reason</label>
                <select name="reason" id="contact-panel-reason" required>
                    {% for option in page.contact_options %}
                        <option value="{{option.option}}">{{option.option}}</option>
                    {% endfor %}
                </select>
                <a href="cloudcannon:#contact_options" class="editor-link">Edit options</a>
                <label aria-hidden="true" class="dd" for="contact-panel-reason"></label>
            </div>
            <div class="row">
                <label for="contact-panel-message">Message</label>
                <textarea name="message" id="contact-panel-message" required></textarea>
            </div>
            <div class="row row-r">
                <input type="hidden" name="_to" value="liam@bigelow.io" />
                <input class="cta" type="submit" value="Submit" />
            </div>
        </form>
    </div>
</section>

<section class="backlink">
    <a href="#lead"><p>Back to top</p></a>
</section>