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); }
  133. /* ── 3-step wizard ── */
  134. .n-step {
  135.     margin-bottom: 30px;
  136. }
  137. .n-step-head {
  138.     display: flex;
  139.     align-items: center;
  140.     gap: 12px;
  141.     margin-bottom: 16px;
  142. }
  143. .n-step-num {
  144.     flex: 0 0 auto;
  145.     width: 30px;
  146.     height: 30px;
  147.     border-radius: 50%;
  148.     background: var(--n-amber);
  149.     color: #fff;
  150.     font-family: 'Montserrat', sans-serif;
  151.     font-weight: 700;
  152.     font-size: .9rem;
  153.     display: inline-flex;
  154.     align-items: center;
  155.     justify-content: center;
  156. }
  157. .n-step-title {
  158.     font-family: 'Montserrat', sans-serif;
  159.     font-size: 1.05rem;
  160.     font-weight: 700;
  161.     color: var(--n-dark);
  162.     margin: 0;
  163.     line-height: 1.3;
  164. }
  165. .n-field select {
  166.     width: 100%;
  167.     padding: 11px 14px;
  168.     border: 1.5px solid var(--n-border);
  169.     border-radius: 8px;
  170.     font-size: .95rem;
  171.     color: var(--n-dark);
  172.     background: var(--n-cream);
  173.     transition: border-color .2s;
  174.     font-family: 'DM Sans', sans-serif;
  175.     outline: none;
  176.     box-sizing: border-box;
  177. }
  178. .n-field select:focus { border-color: var(--n-amber); background: #fff; }
  179. .n-field input[type=file] {
  180.     padding: 9px 14px;
  181.     background: var(--n-cream);
  182. }
  183. .n-help {
  184.     font-size: .78rem;
  185.     color: var(--n-muted);
  186.     line-height: 1.5;
  187.     margin: 6px 0 0;
  188. }
  189. </style>
  191. <!-- Page Hero -->
  192. <section class="n-page-hero">
  193.     <div class="n-wrap">
  194.         <span class="n-eyebrow">Get in Touch</span>
  195.         <h1>Find the right HoneyBee setup for your company.</h1>
  196.         <p>Tell us what you need, what kind of company you are, and a little about your current workflow or site requirement — we will respond with a recommended HoneyBee setup.</p>
  197.         <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>
  198.     </div>
  199. </section>
  201. <!-- Contact Form Section -->
  202. <section class="n-contact-section">
  203.     <div class="n-contact-inner">
  205.         <div class="n-contact-img">
  206.             <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">
  207.         </div>
  209.         <div class="n-contact-form">
  210.             <h2>Get your HoneyBee recommendation</h2>
  211.             <p class="n-form-sub">Three quick steps. We typically respond within one business day, and for complex or project-related queries we may follow up with a call or meeting.</p>
  213.             <form id="newsletter-form" method="post" enctype="multipart/form-data">
  215.                 <!-- Step 1 -->
  216.                 <div class="n-step">
  217.                     <div class="n-step-head">
  218.                         <span class="n-step-num">1</span>
  219.                         <p class="n-step-title">What do you need?</p>
  220.                     </div>
  221.                     <div class="n-field">
  222.                         <label for="enquiry_need">Select what you are looking for</label>
  223.                         <select id="enquiry_need" name="enquiry_need" onchange="document.getElementById('subject').value=this.value">
  224.                             <option value="" disabled selected>Choose an option…</option>
  225.                             <option value="Project-Based ERP">Project-Based ERP</option>
  226.                             <option value="General Business ERP">General Business ERP</option>
  227.                             <option value="HoneyCore Edge+ Design and Quotation">HoneyCore Edge+ Design and Quotation</option>
  228.                             <option value="HoneyCore Edge EMS Site Intelligence">HoneyCore Edge EMS Site Intelligence</option>
  229.                             <option value="Customization">Customization</option>
  230.                             <option value="Partner Application">Partner Application</option>
  231.                             <option value="Enterprise / Private Cloud">Enterprise / Private Cloud</option>
  232.                             <option value="Research / innovation partnership">Research / innovation partnership</option>
  233.                             <option value="Not sure yet">Not sure yet</option>
  234.                         </select>
  235.                     </div>
  236.                 </div>
  238.                 <!-- Step 2 -->
  239.                 <div class="n-step">
  240.                     <div class="n-step-head">
  241.                         <span class="n-step-num">2</span>
  242.                         <p class="n-step-title">What type of company are you?</p>
  243.                     </div>
  244.                     <div class="n-field">
  245.                         <label for="company_type">Select your company type</label>
  246.                         <select id="company_type" name="company_type">
  247.                             <option value="" disabled selected>Choose an option…</option>
  248.                             <option value="EPC">EPC</option>
  249.                             <option value="Engineering / construction">Engineering / construction</option>
  250.                             <option value="Solar / renewable energy">Solar / renewable energy</option>
  251.                             <option value="IoT / industrial automation / HoneyCore Edge+ system integrator">IoT / industrial automation / HoneyCore Edge+ system integrator</option>
  252.                             <option value="System integrator">System integrator</option>
  253.                             <option value="Trading / distribution">Trading / distribution</option>
  254.                             <option value="Service company">Service company</option>
  255.                             <option value="Factory / industrial operator">Factory / industrial operator</option>
  256.                             <option value="IPP / OPEX / PPA">IPP / OPEX / PPA</option>
  257.                             <option value="General SME">General SME</option>
  258.                             <option value="University / research organization">University / research organization</option>
  259.                             <option value="Investor / bank / grant stakeholder">Investor / bank / grant stakeholder</option>
  260.                             <option value="Other">Other</option>
  261.                         </select>
  262.                     </div>
  263.                 </div>
  265.                 <!-- Step 3 -->
  266.                 <div class="n-step">
  267.                     <div class="n-step-head">
  268.                         <span class="n-step-num">3</span>
  269.                         <p class="n-step-title">Describe or upload your current workflow or site requirement</p>
  270.                     </div>
  272.                     <div class="n-field">
  273.                         <label for="message">Describe your workflow or requirement</label>
  274.                         <textarea id="message" name="message" placeholder="Tell us about your current workflow, project, or site requirement…" required></textarea>
  275.                     </div>
  277.                     <div class="n-field">
  278.                         <label for="workflow_file">Upload a document <span style="font-weight:400;color:var(--n-muted)">(optional)</span></label>
  279.                         <input type="file" id="workflow_file" name="workflow_file">
  280.                         <p class="n-help">You can upload a quotation, cost sheet, workflow doc, project sheet, SLD, technical doc, ERP export, HoneyCore Edge+ requirement list, meter / sensor list, data point list, site layout, or research brief.</p>
  281.                     </div>
  283.                     <!-- Contact details -->
  284.                     <div class="n-field">
  285.                         <label for="name">Full Name</label>
  286.                         <input type="text" id="name" name="name" placeholder="Your full name" required>
  287.                     </div>
  288.                     <div class="n-field">
  289.                         <label for="email">Email Address</label>
  290.                         <input type="email" id="email" name="email" placeholder="your@company.com" required>
  291.                     </div>
  292.                     <div class="n-field">
  293.                         <label for="phone">Phone <span style="font-weight:400;color:var(--n-muted)">(optional)</span></label>
  294.                         <input type="text" id="phone" name="phone" placeholder="Optional — include country code">
  295.                     </div>
  297.                     <!-- Preserved subject field (mirrors Step 1 selection for the existing submission contract) -->
  298.                     <input type="hidden" id="subject" name="subject" value="HoneyBee Recommendation Request">
  299.                 </div>
  301.                 <button type="submit" class="n-submit-btn">
  302.                     <i class="fa fa-paper-plane"></i> Get My HoneyBee Recommendation
  303.                 </button>
  304.             </form>
  306.             <div style="margin-top:32px;padding-top:24px;border-top:1.5px solid var(--n-border)">
  307.                 <p style="font-size:.9rem;font-weight:700;color:var(--n-dark);margin-bottom:6px;">Need to speak directly?</p>
  308.                 <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, HoneyCore Edge+ deployment, IoT integration, or enterprise rollout.</p>
  309.                 <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)'">
  310.                     <i class="fa fa-calendar"></i> Book Online Meeting
  311.                 </a>
  312.             </div>
  314.             <div style="margin-top:28px;padding:20px 22px;background:var(--n-cream);border-radius:10px;border:1px solid var(--n-border)">
  315.                 <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>
  316.                 <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>
  317.                 <ul style="font-size:.85rem;color:var(--n-muted);line-height:1.8;padding-left:18px;margin:0;">
  318.                     <li>Answer directly</li>
  319.                     <li>Suggest a product demo</li>
  320.                     <li>Propose a technical discussion</li>
  321.                     <li>Recommend a HoneyCore Edge+ or deployment approach</li>
  322.                     <li>Share a quotation or next steps</li>
  323.                 </ul>
  324.             </div>
  325.         </div>
  327.     </div>
  328. </section>
  330. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  331. <script>
  332.     $(document).ready(function () {
  333.         $('#newsletter-form').on('submit', function (e) {
  334.             e.preventDefault();
  335.             $.ajax({
  336.                 url: "{{ path('honeybee_contact') }}",
  337.                 type: "POST",
  338.                 data: new FormData(this),
  339.                 processData: false,
  340.                 contentType: false,
  341.                 success: function (response) {
  342.                     if (response.success) {
  343.                         Swal.fire({
  344.                             icon: 'success',
  345.                             title: 'Thanks for Reaching Out!',
  346.                             text: response.message,
  347.                             timer: 2000,
  348.                             showConfirmButton: false
  349.                         });
  350.                         $('#newsletter-form')[0].reset();
  351.                     } else {
  352.                         Swal.fire('Error', response.message, 'error');
  353.                     }
  354.                 },
  355.                 error: function () {
  356.                     Swal.fire('Oops!', 'Something went wrong. Please try again.', 'error');
  357.                 }
  358.             });
  359.         });
  360.     });
  361. </script>
  363. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}