src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/career.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,.09);
  12. }
  14. /* ── Hero ── */
  15. .n-page-hero {
  16.     background: var(--n-cream);
  17.     padding: 80px 0 56px;
  18.     text-align: center;
  19. }
  20. .n-page-hero .n-eyebrow {
  21.     display: inline-block;
  22.     font-size: .75rem;
  23.     font-weight: 700;
  24.     letter-spacing: .12em;
  25.     text-transform: uppercase;
  26.     color: var(--n-amber);
  27.     margin-bottom: 14px;
  28. }
  29. .n-page-hero h1 {
  30.     font-family: 'Montserrat', sans-serif;
  31.     font-size: clamp(2rem, 4vw, 2.8rem);
  32.     font-weight: 700;
  33.     color: var(--n-dark);
  34.     margin: 0 0 14px;
  35. }
  36. .n-page-hero p {
  37.     font-size: 1rem;
  38.     color: var(--n-muted);
  39.     max-width: 560px;
  40.     margin: 0 auto;
  41.     line-height: 1.75;
  42. }
  44. /* ── Career Section ── */
  45. .n-career-section {
  46.     background: #fff;
  47.     padding: 72px 0 96px;
  48. }
  49. .n-career-inner {
  50.     max-width: 1100px;
  51.     margin: 0 auto;
  52.     padding: 0 24px;
  53. }
  55. /* Role filter tabs */
  56. .n-role-tabs {
  57.     display: flex;
  58.     flex-wrap: wrap;
  59.     gap: 8px;
  60.     margin-bottom: 36px;
  61. }
  62. .n-role-tab {
  63.     padding: 9px 20px;
  64.     border: 1.5px solid var(--n-border);
  65.     border-radius: 50px;
  66.     background: var(--n-cream);
  67.     font-family: 'DM Sans', sans-serif;
  68.     font-size: .88rem;
  69.     font-weight: 500;
  70.     color: var(--n-muted);
  71.     cursor: pointer;
  72.     transition: all .2s;
  73. }
  74. .n-role-tab.active,
  75. .n-role-tab:hover {
  76.     background: var(--n-dark);
  77.     color: #fff;
  78.     border-color: var(--n-dark);
  79. }
  81. /* Job detail panel */
  82. .n-job-panel {
  83.     display: none;
  84.     background: var(--n-cream);
  85.     border: 1.5px solid var(--n-border);
  86.     border-radius: 16px;
  87.     overflow: hidden;
  88.     position: relative;
  89. }
  90. .n-job-panel.visible { display: flex; }
  91. .n-job-close {
  92.     position: absolute;
  93.     top: 16px;
  94.     right: 16px;
  95.     width: 32px;
  96.     height: 32px;
  97.     border: none;
  98.     background: rgba(26,29,46,.06);
  99.     border-radius: 50%;
  100.     font-size: 1.1rem;
  101.     color: var(--n-dark);
  102.     cursor: pointer;
  103.     display: flex;
  104.     align-items: center;
  105.     justify-content: center;
  106.     transition: background .2s;
  107. }
  108. .n-job-close:hover { background: rgba(26,29,46,.14); }
  110. .n-job-left {
  111.     width: 260px;
  112.     flex-shrink: 0;
  113.     background: var(--n-dark);
  114.     color: #fff;
  115.     padding: 36px 28px;
  116.     display: flex;
  117.     flex-direction: column;
  118.     gap: 20px;
  119. }
  120. .n-job-left h4 {
  121.     font-family: 'Montserrat', sans-serif;
  122.     font-size: 1.1rem;
  123.     font-weight: 700;
  124.     margin: 0;
  125. }
  126. .n-job-perks {
  127.     list-style: none;
  128.     margin: 0;
  129.     padding: 0;
  130.     display: flex;
  131.     flex-direction: column;
  132.     gap: 8px;
  133. }
  134. .n-job-perks li {
  135.     font-size: .85rem;
  136.     opacity: .85;
  137.     display: flex;
  138.     align-items: center;
  139.     gap: 8px;
  140. }
  141. .n-job-perks li::before {
  142.     content: '';
  143.     width: 5px;
  144.     height: 5px;
  145.     border-radius: 50%;
  146.     background: var(--n-amber);
  147.     flex-shrink: 0;
  148. }
  149. .n-apply-btn {
  150.     margin-top: auto;
  151.     padding: 11px 22px;
  152.     background: var(--n-amber);
  153.     color: #fff;
  154.     border: none;
  155.     border-radius: 8px;
  156.     font-family: 'DM Sans', sans-serif;
  157.     font-weight: 700;
  158.     font-size: .9rem;
  159.     cursor: pointer;
  160.     transition: background .2s;
  161.     align-self: flex-start;
  162. }
  163. .n-apply-btn:hover { background: #a86d24; }
  165. .n-job-right {
  166.     flex: 1;
  167.     padding: 36px 36px 36px 32px;
  168.     overflow-y: auto;
  169. }
  170. .n-job-right h4 {
  171.     font-family: 'Montserrat', sans-serif;
  172.     font-size: 1.05rem;
  173.     font-weight: 700;
  174.     color: var(--n-dark);
  175.     margin: 0 0 14px;
  176. }
  177. .n-job-right p {
  178.     font-size: .93rem;
  179.     color: var(--n-muted);
  180.     line-height: 1.75;
  181.     margin: 0;
  182. }
  183. .n-job-right strong { color: var(--n-dark); }
  185. @media(max-width: 640px) {
  186.     .n-job-panel.visible { flex-direction: column; }
  187.     .n-job-left { width: 100%; }
  188. }
  189. </style>
  191. <!-- Hero -->
  192. <section class="n-page-hero">
  193.     <div class="n-wrap">
  194.         <span class="n-eyebrow">Careers at HoneyBee</span>
  195.         <h1>Join Us</h1>
  196.         <p>"Power Your Growth with Next-Gen Innovation!" Our HoneyBee ecosystem envisions a future where technology works smarter, not harder. Join us today and let's redefine what's possible together!</p>
  197.     </div>
  198. </section>
  200. <!-- Career Listings -->
  201. <section class="n-career-section">
  202.     <div class="n-career-inner">
  204.         <div class="n-role-tabs">
  205.             <button class="n-role-tab active tab-btn" onclick="showTab('android')">Android Developer</button>
  206.             <button class="n-role-tab tab-btn" onclick="showTab('ios')">iOS Developer</button>
  207.             <button class="n-role-tab tab-btn" onclick="showTab('uiux')">UI/UX Designer</button>
  208.             <button class="n-role-tab tab-btn" onclick="showTab('qa')">Software QA</button>
  209.             <button class="n-role-tab tab-btn" onclick="showTab('bd')">Business Development</button>
  210.         </div>
  212.         <!-- Android -->
  213.         <div id="android" class="n-job-panel">
  214.             <button class="n-job-close" onclick="closeTab()">×</button>
  215.             <div class="n-job-left">
  216.                 <h4>Android Developer</h4>
  217.                 <ul class="n-job-perks">
  218.                     <li>Office Job</li>
  219.                     <li>Sunday to Thursday</li>
  220.                     <li>10 AM to 7 PM</li>
  221.                     <li>Sports Allowance</li>
  222.                     <li>Fully Subsidised Lunch</li>
  223.                 </ul>
  224.                 <button class="n-apply-btn apply-btn">Apply Now</button>
  225.             </div>
  226.             <div class="n-job-right">
  227.                 <h4>Responsibilities</h4>
  228.                 <p>
  229.                     Join our dynamic team of tech enthusiasts and take your career to new heights. HoneyBee is looking for talented Sr. Android App Developers to join our family.<br><br>
  230.                     Are you a seasoned pro in Android app development with 3–5 years of experience? Look no further — this is the opportunity you've been waiting for.<br><br>
  231.                     <strong>Deadline: 11th August 2023</strong><br><br>
  232.                     To apply, press <strong>"Apply Now"</strong> or email directly at <strong>career@ourhoneybee.eu</strong>. Mention subject line "Application for Android Developer" and attach your latest CV in <strong>PDF format</strong>.<br><br>
  233.                     Don't miss this chance to showcase your skills and work on exciting mobile projects. Join our incredible team and let's shape the future together!
  234.                 </p>
  235.             </div>
  236.         </div>
  238.         <!-- iOS -->
  239.         <div id="ios" class="n-job-panel">
  240.             <button class="n-job-close" onclick="closeTab()">×</button>
  241.             <div class="n-job-left">
  242.                 <h4>iOS Developer</h4>
  243.                 <ul class="n-job-perks">
  244.                     <li>Office Job</li>
  245.                     <li>Sunday to Thursday</li>
  246.                     <li>10 AM to 7 PM</li>
  247.                     <li>Sports Allowance</li>
  248.                     <li>Fully Subsidised Lunch</li>
  249.                 </ul>
  250.                 <button class="n-apply-btn apply-btn">Apply Now</button>
  251.             </div>
  252.             <div class="n-job-right">
  253.                 <h4>Responsibilities</h4>
  254.                 <p>
  255.                     We are looking for a skilled iOS Developer to join our growing product team. You will be responsible for building and maintaining high-quality iOS apps within the HoneyBee ecosystem.<br><br>
  256.                     <strong>Deadline: 11th August 2023</strong><br><br>
  257.                     To apply, press <strong>"Apply Now"</strong> or email <strong>career@ourhoneybee.eu</strong> with subject "Application for iOS Developer" and attach your CV in <strong>PDF format</strong>.
  258.                 </p>
  259.             </div>
  260.         </div>
  262.         <!-- UI/UX -->
  263.         <div id="uiux" class="n-job-panel">
  264.             <button class="n-job-close" onclick="closeTab()">×</button>
  265.             <div class="n-job-left">
  266.                 <h4>UI/UX Designer</h4>
  267.                 <ul class="n-job-perks">
  268.                     <li>Office Job</li>
  269.                     <li>Sunday to Thursday</li>
  270.                     <li>10 AM to 7 PM</li>
  271.                     <li>Sports Allowance</li>
  272.                     <li>Fully Subsidised Lunch</li>
  273.                 </ul>
  274.                 <button class="n-apply-btn apply-btn">Apply Now</button>
  275.             </div>
  276.             <div class="n-job-right">
  277.                 <h4>Responsibilities</h4>
  278.                 <p>
  279.                     We need a creative UI/UX Designer to craft beautiful, intuitive interfaces for our ERP, web, and mobile products. You'll own the design system and collaborate closely with engineers.<br><br>
  280.                     <strong>Deadline: 11th August 2023</strong><br><br>
  281.                     Apply via <strong>"Apply Now"</strong> or email <strong>career@ourhoneybee.eu</strong> with "Application for UI/UX Designer" in the subject.
  282.                 </p>
  283.             </div>
  284.         </div>
  286.         <!-- QA -->
  287.         <div id="qa" class="n-job-panel">
  288.             <button class="n-job-close" onclick="closeTab()">×</button>
  289.             <div class="n-job-left">
  290.                 <h4>Software QA Engineer</h4>
  291.                 <ul class="n-job-perks">
  292.                     <li>Office Job</li>
  293.                     <li>Sunday to Thursday</li>
  294.                     <li>10 AM to 7 PM</li>
  295.                     <li>Sports Allowance</li>
  296.                     <li>Fully Subsidised Lunch</li>
  297.                 </ul>
  298.                 <button class="n-apply-btn apply-btn">Apply Now</button>
  299.             </div>
  300.             <div class="n-job-right">
  301.                 <h4>Responsibilities</h4>
  302.                 <p>
  303.                     As a QA Engineer at HoneyBee, you will ensure the reliability and quality of our ERP platform through manual and automated testing strategies.<br><br>
  304.                     <strong>Deadline: 11th August 2023</strong><br><br>
  305.                     Apply via <strong>"Apply Now"</strong> or email <strong>career@ourhoneybee.eu</strong> with "Application for Software QA" in the subject.
  306.                 </p>
  307.             </div>
  308.         </div>
  310.         <!-- BD -->
  311.         <div id="bd" class="n-job-panel">
  312.             <button class="n-job-close" onclick="closeTab()">×</button>
  313.             <div class="n-job-left">
  314.                 <h4>Business Developer</h4>
  315.                 <ul class="n-job-perks">
  316.                     <li>Office Job</li>
  317.                     <li>Sunday to Thursday</li>
  318.                     <li>10 AM to 7 PM</li>
  319.                     <li>Sports Allowance</li>
  320.                     <li>Fully Subsidised Lunch</li>
  321.                 </ul>
  322.                 <button class="n-apply-btn apply-btn">Apply Now</button>
  323.             </div>
  324.             <div class="n-job-right">
  325.                 <h4>Responsibilities</h4>
  326.                 <p>
  327.                     Drive new business opportunities and partnerships for the HoneyBee Ecosystem. You'll identify market opportunities, build client relationships, and grow our SME customer base.<br><br>
  328.                     <strong>Deadline: 11th August 2023</strong><br><br>
  329.                     Apply via <strong>"Apply Now"</strong> or email <strong>career@ourhoneybee.eu</strong> with "Application for Business Developer" in the subject.
  330.                 </p>
  331.             </div>
  332.         </div>
  334.     </div>
  335. </section>
  337. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  339. <script>
  340.     function showTab(tabName) {
  341.         document.querySelectorAll('.n-job-panel').forEach(function(p) { p.classList.remove('visible'); });
  342.         var panel = document.getElementById(tabName);
  343.         if (panel) panel.classList.add('visible');
  345.         document.querySelectorAll('.n-role-tab').forEach(function(btn) { btn.classList.remove('active'); });
  346.         var clickedBtn = document.querySelector('[onclick="showTab(\'' + tabName + '\')"]');
  347.         if (clickedBtn) clickedBtn.classList.add('active');
  348.     }
  350.     function closeTab() {
  351.         document.querySelectorAll('.n-job-panel').forEach(function(p) { p.classList.remove('visible'); });
  352.         document.querySelectorAll('.n-role-tab').forEach(function(btn) { btn.classList.remove('active'); });
  353.     }
  355.     showTab('android');
  356. </script>