src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/contact.html.twig line 1

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  3. <style>
  4. :root {
  5.     --n-cream: #F7F5F0;
  6.     --n-dark:  #1A1D2E;
  7.     --n-amber: #C07D2A;
  8.     --n-sage:  #3D6B52;
  9.     --n-slate: #3D4F72;
  10.     --n-muted: #6B7280;
  11.     --n-border: rgba(26,29,46,.08);
  12. }
  13. .n-page-hero {
  14.     background: var(--n-cream);
  15.     padding: 80px 0 56px;
  16.     text-align: center;
  17. }
  18. .n-page-hero .n-eyebrow {
  19.     display: inline-block;
  20.     font-size: .75rem;
  21.     font-weight: 700;
  22.     letter-spacing: .12em;
  23.     text-transform: uppercase;
  24.     color: var(--n-amber);
  25.     margin-bottom: 14px;
  26. }
  27. .n-page-hero h1 {
  28.     font-family: 'Montserrat', sans-serif;
  29.     font-size: clamp(2rem, 4vw, 2.8rem);
  30.     font-weight: 700;
  31.     color: var(--n-dark);
  32.     margin: 0 0 14px;
  33.     line-height: 1.2;
  34. }
  35. .n-page-hero p {
  36.     font-size: 1.05rem;
  37.     color: var(--n-muted);
  38.     max-width: 520px;
  39.     margin: 0 auto;
  40.     line-height: 1.7;
  41. }
  43. /* ── Contact Section ── */
  44. .n-contact-section {
  45.     background: #fff;
  46.     padding: 72px 0 96px;
  47. }
  48. .n-contact-inner {
  49.     display: grid;
  50.     grid-template-columns: 1fr 1fr;
  51.     gap: 64px;
  52.     align-items: center;
  53.     max-width: 960px;
  54.     margin: 0 auto;
  55.     padding: 0 24px;
  56. }
  57. @media(max-width:768px) {
  58.     .n-contact-inner { grid-template-columns: 1fr; gap: 32px; }
  59.     .n-contact-img { display: none; }
  60. }
  61. .n-contact-img img {
  62.     width: 100%;
  63.     max-width: 380px;
  64.     display: block;
  65.     margin: 0 auto;
  66.     opacity: .92;
  67. }
  69. /* form */
  70. .n-contact-form h2 {
  71.     font-family: 'Montserrat', sans-serif;
  72.     font-size: 1.6rem;
  73.     font-weight: 700;
  74.     color: var(--n-dark);
  75.     margin: 0 0 6px;
  76. }
  77. .n-contact-form .n-form-sub {
  78.     font-size: .9rem;
  79.     color: var(--n-muted);
  80.     margin: 0 0 28px;
  81. }
  82. .n-field {
  83.     margin-bottom: 18px;
  84. }
  85. .n-field label {
  86.     display: block;
  87.     font-size: .82rem;
  88.     font-weight: 600;
  89.     color: var(--n-dark);
  90.     margin-bottom: 6px;
  91.     letter-spacing: .02em;
  92. }
  93. .n-field input,
  94. .n-field textarea {
  95.     width: 100%;
  96.     padding: 11px 14px;
  97.     border: 1.5px solid var(--n-border);
  98.     border-radius: 8px;
  99.     font-size: .95rem;
  100.     color: var(--n-dark);
  101.     background: var(--n-cream);
  102.     transition: border-color .2s;
  103.     font-family: 'DM Sans', sans-serif;
  104.     outline: none;
  105.     box-sizing: border-box;
  106. }
  107. .n-field input:focus,
  108. .n-field textarea:focus {
  109.     border-color: var(--n-amber);
  110.     background: #fff;
  111. }
  112. .n-field textarea {
  113.     resize: vertical;
  114.     min-height: 110px;
  115. }
  116. .n-submit-btn {
  117.     display: inline-flex;
  118.     align-items: center;
  119.     gap: 8px;
  120.     padding: 12px 32px;
  121.     background: var(--n-amber);
  122.     color: #fff;
  123.     border: none;
  124.     border-radius: 8px;
  125.     font-family: 'DM Sans', sans-serif;
  126.     font-size: .95rem;
  127.     font-weight: 600;
  128.     cursor: pointer;
  129.     transition: background .2s, transform .15s;
  130. }
  131. .n-submit-btn:hover { background: #a86d24; transform: translateY(-1px); }
  132. </style>
  134. <!-- Page Hero -->
  135. <section class="n-page-hero">
  136.     <div class="n-wrap">
  137.         <span class="n-eyebrow">Get in Touch</span>
  138.         <h1>Ask us anything about HoneyBee.</h1>
  139.         <p>Whether you want to explore the software, discuss Edge+, understand pricing, ask about partnerships, or see how HoneyBee fits your company — send us a message.</p>
  140.         <p style="max-width:520px;margin:10px auto 0;font-size:1.05rem;color:var(--n-muted);line-height:1.7;">We will review your query and get back to you by email.</p>
  141.         <p style="max-width:520px;margin:10px auto 0;font-size:.9rem;color:var(--n-muted);line-height:1.7;">For more specific technical or project discussions, you can also book an online meeting with our team.</p>
  142.     </div>
  143. </section>
  145. <!-- Contact Form Section -->
  146. <section class="n-contact-section">
  147.     <div class="n-contact-inner">
  149.         <div class="n-contact-img">
  150.             <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/images/about/contact-robot.svg?version={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}" alt="Contact HoneyBee">
  151.         </div>
  153.         <div class="n-contact-form">
  154.             <h2>Send us your question</h2>
  155.             <p class="n-form-sub">We typically respond within one business day. For complex or project-related queries, we may follow up with a call or meeting.</p>
  157.             <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;">
  158.                 <span style="font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--n-muted);align-self:center;margin-right:4px;">Enquiry type:</span>
  159.                 <button type="button" onclick="document.getElementById('subject').value='Product Demo'" style="padding:5px 14px;border-radius:6px;border:1.5px solid var(--n-border);background:var(--n-cream);font-size:.82rem;font-weight:600;cursor:pointer;color:var(--n-dark);">Product Demo</button>
  160.                 <button type="button" onclick="document.getElementById('subject').value='Enterprise Quote'" style="padding:5px 14px;border-radius:6px;border:1.5px solid var(--n-border);background:var(--n-cream);font-size:.82rem;font-weight:600;cursor:pointer;color:var(--n-dark);">Enterprise Quote</button>
  161.                 <button type="button" onclick="document.getElementById('subject').value='Partner Application'" style="padding:5px 14px;border-radius:6px;border:1.5px solid var(--n-border);background:var(--n-cream);font-size:.82rem;font-weight:600;cursor:pointer;color:var(--n-dark);">Partner Application</button>
  162.                 <button type="button" onclick="document.getElementById('subject').value='Hardware Quote'" style="padding:5px 14px;border-radius:6px;border:1.5px solid var(--n-border);background:var(--n-cream);font-size:.82rem;font-weight:600;cursor:pointer;color:var(--n-dark);">Hardware Quote</button>
  163.             </div>
  165.             <form id="newsletter-form" method="post">
  166.                 <div class="n-field">
  167.                     <label for="name">Full Name</label>
  168.                     <input type="text" id="name" name="name" placeholder="Your full name" required>
  169.                 </div>
  170.                 <div class="n-field">
  171.                     <label for="email">Email Address</label>
  172.                     <input type="email" id="email" name="email" placeholder="your@company.com" required>
  173.                 </div>
  174.                 <div class="n-field">
  175.                     <label for="subject">Subject</label>
  176.                     <input type="text" id="subject" name="subject" placeholder="What is this about?" required>
  177.                 </div>
  178.                 <div class="n-field">
  179.                     <label for="meeting_time">Preferred meeting time <span style="font-weight:400;color:var(--n-muted)">(optional)</span></label>
  180.                     <input type="text" id="meeting_time" name="meeting_time" placeholder="Optional — if you'd like to schedule a call">
  181.                 </div>
  182.                 <div class="n-field">
  183.                     <label for="message">Message</label>
  184.                     <textarea id="message" name="message" placeholder="Tell us how we can help…" required></textarea>
  185.                 </div>
  186.                 <button type="submit" class="n-submit-btn">
  187.                     <i class="fa fa-paper-plane"></i> Send Message
  188.                 </button>
  189.             </form>
  191.             <div style="margin-top:32px;padding-top:24px;border-top:1.5px solid var(--n-border)">
  192.                 <p style="font-size:.9rem;font-weight:700;color:var(--n-dark);margin-bottom:6px;">Need to speak directly?</p>
  193.                 <p style="font-size:.85rem;color:var(--n-muted);line-height:1.65;margin-bottom:14px;">You can also book an online meeting for detailed discussions on your project, Edge+ deployment, IoT integration, or enterprise rollout.</p>
  194.                 <a href="{{ url('book_demo_page') }}" style="display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:8px;border:1.5px solid var(--n-border);background:var(--n-cream);font-size:.85rem;font-weight:600;color:var(--n-dark);text-decoration:none;transition:border-color .2s;" onmouseover="this.style.borderColor='var(--n-amber)'" onmouseout="this.style.borderColor='var(--n-border)'">
  195.                     <i class="fa fa-calendar"></i> Book Online Meeting
  196.                 </a>
  197.             </div>
  199.             <div style="margin-top:28px;padding:20px 22px;background:var(--n-cream);border-radius:10px;border:1px solid var(--n-border)">
  200.                 <p style="font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--n-muted);margin-bottom:10px;">What happens after you submit?</p>
  201.                 <p style="font-size:.85rem;color:var(--n-muted);line-height:1.6;margin-bottom:8px;">We review your message and respond by email. Depending on your request, we may:</p>
  202.                 <ul style="font-size:.85rem;color:var(--n-muted);line-height:1.8;padding-left:18px;margin:0;">
  203.                     <li>Answer directly</li>
  204.                     <li>Suggest a product demo</li>
  205.                     <li>Propose a technical discussion</li>
  206.                     <li>Recommend an Edge+ or deployment approach</li>
  207.                     <li>Share a quotation or next steps</li>
  208.                 </ul>
  209.             </div>
  210.         </div>
  212.     </div>
  213. </section>
  215. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  216. <script>
  217.     $(document).ready(function () {
  218.         $('#newsletter-form').on('submit', function (e) {
  219.             e.preventDefault();
  220.             $.ajax({
  221.                 url: "{{ path('honeybee_contact') }}",
  222.                 type: "POST",
  223.                 data: $(this).serialize(),
  224.                 success: function (response) {
  225.                     if (response.success) {
  226.                         Swal.fire({
  227.                             icon: 'success',
  228.                             title: 'Thanks for Reaching Out!',
  229.                             text: response.message,
  230.                             timer: 2000,
  231.                             showConfirmButton: false
  232.                         });
  233.                         $('#newsletter-form')[0].reset();
  234.                     } else {
  235.                         Swal.fire('Error', response.message, 'error');
  236.                     }
  237.                 },
  238.                 error: function () {
  239.                     Swal.fire('Oops!', 'Something went wrong. Please try again.', 'error');
  240.                 }
  241.             });
  242.         });
  243.     });
  244. </script>
  246. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}