ultimate-jekyll-manager 1.7.2 → 1.8.0

package/dist/defaults/dist/_layouts/themes/newsflash/frontend/pages/contact.html

@@ -0,0 +1,340 @@
+---
+### ALL PAGES ###
+layout: themes/[ site.theme.id ]/frontend/core/base
+
+### PAGE CONFIG ###
+# News voice throughout: a theme's frontmatter defaults are part of its
+# identity (see docs/themes.md "Frontmatter defaults").
+# Hero Section
+hero:
+  headline: "Contact the"
+  headline_accent: "desk"
+  subheadline: "Questions, tips, corrections — the {{ site.brand.name }} newsroom reads everything"
+
+# Contact Methods Section
+contact_methods:
+  - title: "Email the newsroom"
+    description: "Get a reply within 24 hours"
+    icon: "envelope"
+    value: "Email us"
+    link: "#form"
+  - title: "Send a tip"
+    description: "Confidential — straight to our reporters"
+    icon: "user-secret"
+    value: "Share a tip"
+    link: "#form"
+
+# Contact Form Section
+contact_form:
+  superheadline:
+    icon: "envelope"
+    text: "The mailbag"
+  headline: "Send us a"
+  headline_accent: "message"
+  subheadline: "Fill out the form below and we'll get back to you within 24 hours."
+
+# Stats Section
+stats:
+  items:
+    - number: "<15m"
+      label: "Response time"
+      icon: "clock"
+      color: "primary"
+    - number: "24/7"
+      label: "Tips line"
+      icon: "user-secret"
+      color: "success"
+    - number: "4.9"
+      label: "Reader rating"
+      icon: "star"
+      color: "warning"
+    - number: "50+"
+      label: "Languages"
+      icon: "globe"
+      color: "info"
+
+# Testimonials Section
+testimonials:
+  superheadline:
+    icon: "megaphone"
+    text: "From our readers"
+  headline: "What our readers"
+  headline_accent: "say"
+  subheadline: "Hear from people who've written to the desk"
+  items:
+  - quote: "I flagged a typo at 7am and had a reply from an actual editor by 7:15."
+    author: "Jessica Martinez"
+    role: "Marketing Manager"
+    company: "TechCorp"
+    initial: "J"
+  - quote: "Sent a tip on a Friday night. They ran the story — and protected the source."
+    author: "David Thompson"
+    role: "Product Designer"
+    company: "StartupCo"
+    initial: "D"
+  - quote: "The rare publication that answers reader mail like it matters. Because to them it does."
+    author: "Lisa Chen"
+    role: "Developer"
+    company: "InnovateLab"
+    initial: "L"
+
+# FAQs Section
+faqs:
+  superheadline:
+    icon: "messages-question"
+    text: "FAQs"
+  headline: "Frequently asked"
+  headline_accent: "questions"
+  subheadline: "Everything you need to know about reaching the newsroom."
+  items:
+  - question: "How do I submit a news tip?"
+    answer: "Use the form above and choose \"News tip\" as the subject — it routes straight to our reporters. We protect our sources and never publish identifying details without consent."
+  - question: "How do I request a correction?"
+    answer: "Choose \"Request a correction\" in the form and include a link to the story. We review every report, fix verified errors fast, and log them on our public corrections page."
+  - question: "Can I republish your stories?"
+    answer: "Often, yes! Choose \"Press & partnerships\" and tell us what you'd like to republish — we offer syndication arrangements for most of our reporting."
+---
+
+{% comment %}
+  NEWSFLASH CONTACT
+  Same data contract as the classy contact page, presented as "contact the
+  desk": serif masthead opening, framed contact-method cards, the contact form
+  (markup kept verbatim — FormManager wiring) inside a framed paper card,
+  stroked-numeral support stats, and the FAQ accordion.
+{% endcomment %}
+
+<!-- Hero -->
+<section class="pb-4">
+  <div class="container text-center" data-lazy="@class animation-slide-up">
+    <span class="kicker mb-3">Contact</span>
+    <h1 class="display-4 my-3">
+      {{ page.resolved.hero.headline }} <span class="text-accent">{{ page.resolved.hero.headline_accent }}</span>
+    </h1>
+    {% iftruthy page.resolved.hero.subheadline %}
+      <p class="lead mb-0">{{ page.resolved.hero.subheadline }}</p>
+    {% endiftruthy %}
+  </div>
+</section>
+
+<!-- Contact Methods -->
+<section class="pt-0">
+  <div class="container">
+    <div class="row g-4 justify-content-center">
+      {% assign method_count = page.resolved.contact_methods | size %}
+
+      <!-- Determine column classes based on number of contact methods -->
+      {% if method_count == 1 %}
+        {% assign col_classes = "col-12 col-md-8 col-lg-6 col-xl-5" %}
+      {% elsif method_count == 2 %}
+        {% assign col_classes = "col-12 col-md-6 col-lg-6 col-xl-5" %}
+      {% elsif method_count == 3 %}
+        {% assign col_classes = "col-12 col-md-6 col-lg-4" %}
+      {% elsif method_count == 4 %}
+        {% assign col_classes = "col-12 col-md-6 col-lg-6 col-xl-3" %}
+      {% elsif method_count == 5 %}
+        {% assign col_classes = "col-12 col-md-6 col-lg-4" %}
+      {% else %}
+        <!-- Fallback for 6+ methods -->
+        {% assign col_classes = "col-12 col-md-6 col-lg-4 col-xl-3" %}
+      {% endif %}
+
+      {% for method in page.resolved.contact_methods %}
+        <div class="{{ col_classes }}">
+          <div class="card h-100 text-center p-4" data-lazy="@class animation-slide-up">
+            <span class="feature-icon d-inline-flex align-items-center justify-content-center rounded-circle text-bg-primary mb-3 mx-auto">
+              {% uj_icon method.icon %}
+            </span>
+            <h3 class="h5 mb-1">{{ method.title }}</h3>
+            <p class="text-body-secondary mb-3">{{ method.description }}</p>
+            <div>
+              <a href="{{ method.link }}" class="btn btn-outline-dark btn-sm">{{ method.value }}</a>
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
+<!-- Contact Form -->
+<section id="form" class="pt-0">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-8">
+        <div class="card shadow" data-lazy="@class animation-slide-up">
+          <div class="card-body p-4 p-md-5">
+            <div class="text-center mb-4">
+              {% iftruthy page.resolved.contact_form.superheadline.text %}
+                <span class="kicker mb-2">
+                  {% iftruthy page.resolved.contact_form.superheadline.icon %}
+                    {% uj_icon page.resolved.contact_form.superheadline.icon, "me-1" %}
+                  {% endiftruthy %}
+                  {{ page.resolved.contact_form.superheadline.text }}
+                </span>
+              {% endiftruthy %}
+              <h2 class="h3 mb-2">
+                {{ page.resolved.contact_form.headline }}
+                {% iftruthy page.resolved.contact_form.headline_accent %}
+                  <span class="text-accent">{{ page.resolved.contact_form.headline_accent }}</span>
+                {% endiftruthy %}
+              </h2>
+              {% iftruthy page.resolved.contact_form.subheadline %}
+                <p class="text-body-secondary">{{ page.resolved.contact_form.subheadline }}</p>
+              {% endiftruthy %}
+            </div>
+
+            <form id="contact-form" autocomplete="on" onsubmit="return false">
+              <div class="row g-3 mb-4">
+                <div class="col-md-6">
+                  <label for="first_name" class="form-label fw-semibold">First name <span class="text-danger">*</span></label>
+                  <input type="text" class="form-control form-control-lg" id="first_name" name="first_name"
+                    placeholder="Enter your first name"
+                    autocomplete="given-name"
+                    minlength="2"
+                    maxlength="50"
+                    required>
+                  <div class="invalid-feedback"></div>
+                </div>
+                <div class="col-md-6">
+                  <label for="last_name" class="form-label fw-semibold">Last name <span class="text-danger">*</span></label>
+                  <input type="text" class="form-control form-control-lg" id="last_name" name="last_name"
+                    placeholder="Enter your last name"
+                    autocomplete="family-name"
+                    minlength="2"
+                    maxlength="50"
+                    required>
+                  <div class="invalid-feedback"></div>
+                </div>
+              </div>
+
+              <!-- Honeypot field (bot detection) -->
+              <div class="form-group mb-3" style="display: none;" aria-hidden="true">
+                <input type="text" class="form-control" name="honey" tabindex="-1" autocomplete="off">
+              </div>
+
+              <!-- Hidden auth field (auto-populated via bindings) -->
+              <input type="hidden" aria-hidden="true" name="uid" data-wm-bind="@value auth.user.uid">
+
+              <div class="mb-4">
+                <label for="email" class="form-label fw-semibold">Email address <span class="text-danger">*</span></label>
+                <input type="email" class="form-control form-control-lg" id="email" name="email"
+                  placeholder="Enter your email address"
+                  autocomplete="email"
+                  data-wm-bind="@value auth.user.email"
+                  required>
+                <div class="invalid-feedback"></div>
+              </div>
+
+              <div class="mb-4">
+                <label for="company" class="form-label fw-semibold">Company</label>
+                <input type="text" class="form-control form-control-lg" id="company" name="company"
+                  placeholder="Enter your company name (optional)"
+                  autocomplete="organization"
+                  maxlength="100">
+              </div>
+
+              <div class="mb-4">
+                <label for="subject" class="form-label fw-semibold">Subject <span class="text-danger">*</span></label>
+                <select class="form-select form-select-lg" id="subject" name="subject" required>
+                  <option value="">Choose a topic...</option>
+                  <option value="general">General inquiry</option>
+                  <option value="tip">News tip</option>
+                  <option value="correction">Request a correction</option>
+                  <option value="partnership">Press & partnerships</option>
+                  <option value="billing">Membership & billing</option>
+                  <option value="other">Other</option>
+                </select>
+                <div class="invalid-feedback"></div>
+              </div>
+
+              <div class="mb-4">
+                <label for="message" class="form-label fw-semibold">Message <span class="text-danger">*</span></label>
+                <textarea class="form-control form-control-lg" id="message" name="message" rows="3"
+                  placeholder="Tell us how we can help you..."
+                  minlength="10"
+                  maxlength="5000"
+                  required></textarea>
+                <div class="invalid-feedback"></div>
+              </div>
+
+              <div class="d-grid gap-2 d-md-flex justify-content-md-between align-items-center">
+                <button type="submit" class="btn btn-primary btn-lg px-5">
+                  {% uj_icon "paper-plane", "me-2" %}
+                  Send message
+                </button>
+                <a href="{{ site.url }}" class="btn btn-link">
+                  {% uj_icon "arrow-left", "me-1" %}
+                  Back to home
+                </a>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Stats -->
+<section class="pt-0">
+  <div class="container">
+    <div class="section-head" data-lazy="@class animation-slide-up">
+      <h2>The support desk</h2>
+      <span class="rule"></span>
+    </div>
+    <div class="row text-center g-4">
+      {% for stat in page.resolved.stats.items %}
+        <div class="col-lg-3 col-md-6" data-lazy="@class animation-slide-up">
+          <div class="stat-num">{{ stat.number }}</div>
+          <div class="fw-bold">{% uj_icon stat.icon, "me-2 text-primary" %}{{ stat.label }}</div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
+<!-- FAQ -->
+<section class="pt-0">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-8">
+        <div class="section-head" data-lazy="@class animation-slide-up">
+          {% iftruthy page.resolved.faqs.superheadline.text %}
+            <h2>{{ page.resolved.faqs.superheadline.text }}</h2>
+          {% endiftruthy %}
+          <span class="rule"></span>
+        </div>
+        <header class="mb-4" data-lazy="@class animation-slide-up">
+          <h2 class="h1 mb-2">
+            {{ page.resolved.faqs.headline }}
+            {% iftruthy page.resolved.faqs.headline_accent %}
+              <span class="text-accent">{{ page.resolved.faqs.headline_accent }}</span>
+            {% endiftruthy %}
+          </h2>
+          {% iftruthy page.resolved.faqs.subheadline %}
+            <p class="lead mb-0">{{ page.resolved.faqs.subheadline }}</p>
+          {% endiftruthy %}
+        </header>
+
+        {% if page.resolved.faqs.items %}
+          <div class="accordion" id="contactFaqAccordion">
+            {% for faq in page.resolved.faqs.items %}
+              <div class="accordion-item mb-3" data-lazy="@class animation-slide-up">
+                <h2 class="accordion-header">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#contactFaq{{ forloop.index }}" aria-expanded="false" aria-controls="contactFaq{{ forloop.index }}">
+                    <span class="fw-bold">{{ faq.question }}</span>
+                  </button>
+                </h2>
+                <div id="contactFaq{{ forloop.index }}" class="accordion-collapse collapse" data-bs-parent="#contactFaqAccordion">
+                  <div class="accordion-body">{{ faq.answer }}</div>
+                </div>
+              </div>
+            {% endfor %}
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ content | uj_content_format }}