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. }
  190. /* ── Our Offices ── */
  191. .n-offices-section {
  192.     background: var(--n-cream);
  193.     padding: 64px 0 92px;
  194.     border-top: 1px solid var(--n-border);
  195. }
  196. .n-offices-head {
  197.     text-align: center;
  198.     max-width: 580px;
  199.     margin: 0 auto 44px;
  200.     padding: 0 24px;
  201. }
  202. .n-offices-head .n-eyebrow {
  203.     display: inline-block;
  204.     font-size: .75rem;
  205.     font-weight: 700;
  206.     letter-spacing: .12em;
  207.     text-transform: uppercase;
  208.     color: var(--n-amber);
  209.     margin-bottom: 12px;
  210. }
  211. .n-offices-head h2 {
  212.     font-family: 'Montserrat', sans-serif;
  213.     font-size: clamp(1.5rem, 3vw, 2rem);
  214.     font-weight: 700;
  215.     color: var(--n-dark);
  216.     margin: 0 0 10px;
  217. }
  218. .n-offices-head p {
  219.     font-size: .95rem;
  220.     color: var(--n-muted);
  221.     line-height: 1.7;
  222.     margin: 0;
  223. }
  224. .n-offices-grid {
  225.     display: grid;
  226.     grid-template-columns: repeat(3, 1fr);
  227.     gap: 24px;
  228.     max-width: 980px;
  229.     margin: 0 auto;
  230.     padding: 0 24px;
  231. }
  232. @media(max-width:820px) { .n-offices-grid { grid-template-columns: 1fr; max-width: 460px; } }
  233. .n-office-card {
  234.     background: #fff;
  235.     border: 1px solid var(--n-border);
  236.     border-radius: 14px;
  237.     padding: 28px 26px;
  238.     transition: box-shadow .2s, transform .2s;
  239. }
  240. .n-office-card:hover {
  241.     box-shadow: 0 12px 30px rgba(26,29,46,.08);
  242.     transform: translateY(-2px);
  243. }
  244. .n-office-badge {
  245.     display: inline-block;
  246.     font-size: .7rem;
  247.     font-weight: 700;
  248.     letter-spacing: .08em;
  249.     text-transform: uppercase;
  250.     padding: 4px 12px;
  251.     border-radius: 999px;
  252.     margin-bottom: 16px;
  253. }
  254. .n-office-card h3 {
  255.     font-family: 'Montserrat', sans-serif;
  256.     font-size: 1.25rem;
  257.     font-weight: 700;
  258.     color: var(--n-dark);
  259.     margin: 0 0 14px;
  260. }
  261. .n-office-card address { font-style: normal; }
  262. .n-office-card address p {
  263.     font-size: .92rem;
  264.     color: var(--n-muted);
  265.     line-height: 1.75;
  266.     margin: 0;
  267. }
  268. .n-office-meta {
  269.     margin-top: 18px;
  270.     padding-top: 16px;
  271.     border-top: 1px solid var(--n-border);
  272. }
  273. .n-office-meta a,
  274. .n-office-meta span {
  275.     display: block;
  276.     font-size: .85rem;
  277.     color: var(--n-dark);
  278.     text-decoration: none;
  279.     line-height: 1.9;
  280. }
  281. .n-office-meta a:hover { color: var(--n-amber); }
  282. .n-office-icn { color: var(--n-amber); width: 16px; display: inline-block; text-align: center; margin-right: 4px; }
  283. </style>
  285. <!-- Page Hero -->
  286. <section class="n-page-hero">
  287.     <div class="n-wrap">
  288.         <span class="n-eyebrow">Get in Touch</span>
  289.         <h1>Find the right HoneyBee setup for your company.</h1>
  290.         <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>
  291.         <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>
  292.     </div>
  293. </section>
  295. <!-- Contact Form Section -->
  296. <section class="n-contact-section">
  297.     <div class="n-contact-inner">
  299.         <div class="n-contact-img">
  300.             <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">
  301.         </div>
  303.         <div class="n-contact-form">
  304.             <h2>Get your HoneyBee recommendation</h2>
  305.             <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>
  307.             <form id="newsletter-form" method="post" enctype="multipart/form-data">
  309.                 <!-- Step 1 -->
  310.                 <div class="n-step">
  311.                     <div class="n-step-head">
  312.                         <span class="n-step-num">1</span>
  313.                         <p class="n-step-title">What do you need?</p>
  314.                     </div>
  315.                     <div class="n-field">
  316.                         <label for="enquiry_need">Select what you are looking for</label>
  317.                         <select id="enquiry_need" name="enquiry_need" onchange="document.getElementById('subject').value=this.value">
  318.                             <option value="" disabled selected>Choose an option…</option>
  319.                             <option value="Project-Based ERP">Project-Based ERP</option>
  320.                             <option value="General Business ERP">General Business ERP</option>
  321.                             <option value="HoneyCore Edge+ Design and Quotation">HoneyCore Edge+ Design and Quotation</option>
  322.                             <option value="HoneyCore Edge EMS Site Intelligence">HoneyCore Edge EMS Site Intelligence</option>
  323.                             <option value="Customization">Customization</option>
  324.                             <option value="Partner Application">Partner Application</option>
  325.                             <option value="Enterprise / Private Cloud">Enterprise / Private Cloud</option>
  326.                             <option value="Research / innovation partnership">Research / innovation partnership</option>
  327.                             <option value="Not sure yet">Not sure yet</option>
  328.                         </select>
  329.                     </div>
  330.                 </div>
  332.                 <!-- Step 2 -->
  333.                 <div class="n-step">
  334.                     <div class="n-step-head">
  335.                         <span class="n-step-num">2</span>
  336.                         <p class="n-step-title">What type of company are you?</p>
  337.                     </div>
  338.                     <div class="n-field">
  339.                         <label for="company_type">Select your company type</label>
  340.                         <select id="company_type" name="company_type">
  341.                             <option value="" disabled selected>Choose an option…</option>
  342.                             <option value="EPC">EPC</option>
  343.                             <option value="Engineering / construction">Engineering / construction</option>
  344.                             <option value="Solar / renewable energy">Solar / renewable energy</option>
  345.                             <option value="IoT / industrial automation / HoneyCore Edge+ system integrator">IoT / industrial automation / HoneyCore Edge+ system integrator</option>
  346.                             <option value="System integrator">System integrator</option>
  347.                             <option value="Trading / distribution">Trading / distribution</option>
  348.                             <option value="Service company">Service company</option>
  349.                             <option value="Factory / industrial operator">Factory / industrial operator</option>
  350.                             <option value="IPP / OPEX / PPA">IPP / OPEX / PPA</option>
  351.                             <option value="General SME">General SME</option>
  352.                             <option value="University / research organization">University / research organization</option>
  353.                             <option value="Investor / bank / grant stakeholder">Investor / bank / grant stakeholder</option>
  354.                             <option value="Other">Other</option>
  355.                         </select>
  356.                     </div>
  357.                 </div>
  359.                 <!-- Step 3 -->
  360.                 <div class="n-step">
  361.                     <div class="n-step-head">
  362.                         <span class="n-step-num">3</span>
  363.                         <p class="n-step-title">Describe or upload your current workflow or site requirement</p>
  364.                     </div>
  366.                     <div class="n-field">
  367.                         <label for="message">Describe your workflow or requirement</label>
  368.                         <textarea id="message" name="message" placeholder="Tell us about your current workflow, project, or site requirement…" required></textarea>
  369.                     </div>
  371.                     <div class="n-field">
  372.                         <label for="workflow_file">Upload a document <span style="font-weight:400;color:var(--n-muted)">(optional)</span></label>
  373.                         <input type="file" id="workflow_file" name="workflow_file">
  374.                         <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>
  375.                     </div>
  377.                     <!-- Contact details -->
  378.                     <div class="n-field">
  379.                         <label for="name">Full Name</label>
  380.                         <input type="text" id="name" name="name" placeholder="Your full name" required>
  381.                     </div>
  382.                     <div class="n-field">
  383.                         <label for="email">Email Address</label>
  384.                         <input type="email" id="email" name="email" placeholder="your@company.com" required>
  385.                     </div>
  386.                     <div class="n-field">
  387.                         <label for="phone">Phone <span style="font-weight:400;color:var(--n-muted)">(optional)</span></label>
  388.                         <input type="text" id="phone" name="phone" placeholder="Optional — include country code">
  389.                     </div>
  391.                     <!-- Preserved subject field (mirrors Step 1 selection for the existing submission contract) -->
  392.                     <input type="hidden" id="subject" name="subject" value="HoneyBee Recommendation Request">
  393.                 </div>
  395.                 <button type="submit" class="n-submit-btn">
  396.                     <i class="fa fa-paper-plane"></i> Get My HoneyBee Recommendation
  397.                 </button>
  398.             </form>
  400.             <div style="margin-top:32px;padding-top:24px;border-top:1.5px solid var(--n-border)">
  401.                 <p style="font-size:.9rem;font-weight:700;color:var(--n-dark);margin-bottom:6px;">Need to speak directly?</p>
  402.                 <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>
  403.                 <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)'">
  404.                     <i class="fa fa-calendar"></i> Book Online Meeting
  405.                 </a>
  406.             </div>
  408.             <div style="margin-top:28px;padding:20px 22px;background:var(--n-cream);border-radius:10px;border:1px solid var(--n-border)">
  409.                 <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>
  410.                 <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>
  411.                 <ul style="font-size:.85rem;color:var(--n-muted);line-height:1.8;padding-left:18px;margin:0;">
  412.                     <li>Answer directly</li>
  413.                     <li>Suggest a product demo</li>
  414.                     <li>Propose a technical discussion</li>
  415.                     <li>Recommend a HoneyCore Edge+ or deployment approach</li>
  416.                     <li>Share a quotation or next steps</li>
  417.                 </ul>
  418.             </div>
  419.         </div>
  421.     </div>
  422. </section>
  424. <!-- Our Offices -->
  425. <section class="n-offices-section">
  426.     <div class="n-offices-head">
  427.         <span class="n-eyebrow">Our Offices</span>
  428.         <h2>Where to find us</h2>
  429.         <p>Reach us at any of our offices, or use the form above — we will route your request to the right team.</p>
  430.     </div>
  431.     <div class="n-offices-grid">
  433.         <div class="n-office-card">
  434.             <span class="n-office-badge" style="background:rgba(192,125,42,.12);color:var(--n-amber)">Head Office</span>
  435.             <h3>Singapore</h3>
  436.             <address>
  437.                 <p>HoneyBee IoT (Pte.) Ltd.<br>
  438.                 2 Venture Drive, #19-21<br>
  439.                 Vision Exchange<br>
  440.                 Singapore 608526</p>
  441.             </address>
  442.             <div class="n-office-meta">
  443.                 <span><i class="fa fa-building-o n-office-icn"></i> UEN 202507612D</span>
  444.                 <a href="mailto:info@ourhoneybee.eu"><i class="fa fa-envelope-o n-office-icn"></i> info@ourhoneybee.eu</a>
  445.             </div>
  446.         </div>
  448.         <div class="n-office-card">
  449.             <span class="n-office-badge" style="background:rgba(61,107,82,.12);color:var(--n-sage)">Germany Office</span>
  450.             <h3>Germany &middot; Europe</h3>
  451.             <address>
  452.                 <p>Brühlweg 1<br>
  453.                 88451 Dettingen an der Iller<br>
  454.                 Germany</p>
  455.             </address>
  456.             <div class="n-office-meta">
  457.                 <a href="tel:+4917634616155"><i class="fa fa-phone n-office-icn"></i> +49 176 34616155</a>
  458.                 <a href="mailto:info@ourhoneybee.eu"><i class="fa fa-envelope-o n-office-icn"></i> info@ourhoneybee.eu</a>
  459.             </div>
  460.         </div>
  462.         <div class="n-office-card">
  463.             <span class="n-office-badge" style="background:rgba(61,79,114,.12);color:var(--n-slate)">R&amp;D Office</span>
  464.             <h3>Bangladesh</h3>
  465.             <address>
  466.                 <p>HoneyBee IoT Ltd.<br>
  467.                 Flat #4B, House 09, Road 4<br>
  468.                 Dhaka 1230, Bangladesh</p>
  469.             </address>
  470.             <div class="n-office-meta">
  471.                 <a href="tel:+8801325081052"><i class="fa fa-phone n-office-icn"></i> +880 1325-081052</a>
  472.                 <span style="color:var(--n-muted)"><i class="fa fa-flask n-office-icn"></i> Engineering &amp; Research</span>
  473.             </div>
  474.         </div>
  476.     </div>
  477. </section>
  479. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  480. <script>
  481.     $(document).ready(function () {
  482.         $('#newsletter-form').on('submit', function (e) {
  483.             e.preventDefault();
  484.             $.ajax({
  485.                 url: "{{ path('honeybee_contact') }}",
  486.                 type: "POST",
  487.                 data: new FormData(this),
  488.                 processData: false,
  489.                 contentType: false,
  490.                 success: function (response) {
  491.                     if (response.success) {
  492.                         Swal.fire({
  493.                             icon: 'success',
  494.                             title: 'Thanks for Reaching Out!',
  495.                             text: response.message,
  496.                             timer: 2000,
  497.                             showConfirmButton: false
  498.                         });
  499.                         $('#newsletter-form')[0].reset();
  500.                     } else {
  501.                         Swal.fire('Error', response.message, 'error');
  502.                     }
  503.                 },
  504.                 error: function () {
  505.                     Swal.fire('Oops!', 'Something went wrong. Please try again.', 'error');
  506.                 }
  507.             });
  508.         });
  509.     });
  510. </script>
  512. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}