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

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  3. <style>
  4.     /* ── Design Tokens ─────────────────────────────────────────────────────────── */
  5.     :root {
  6.         --n-cream:     #F7F5F0;
  7.         --n-cream-2:   #F0EDE5;
  8.         --n-white:     #FFFFFF;
  9.         --n-dark:      #1A1D2E;
  10.         --n-dark-2:    #252840;
  11.         --n-amber:     #C07D2A;
  12.         --n-amber-lt:  #D4954A;
  13.         --n-amber-dim: rgba(192,125,42,.10);
  14.         --n-sage:      #3D6B52;
  15.         --n-muted:     #6B6E7F;
  16.         --n-muted-2:   #9395A5;
  17.         --n-border:    rgba(26,29,46,.07);
  18.         --n-border-md: rgba(26,29,46,.12);
  19.         --n-shadow-sm: 0 2px 12px rgba(26,29,46,.07);
  20.         --n-shadow-md: 0 8px 32px rgba(26,29,46,.09);
  21.         --n-shadow-lg: 0 20px 64px rgba(26,29,46,.10);
  22.         --n-radius:    12px;
  23.         --n-radius-sm: 8px;
  24.         --n-font:      'DM Sans', 'Poppins', system-ui, sans-serif;
  25.     }
  26.     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  27.     body { background: var(--n-cream); font-family: var(--n-font); color: var(--n-dark); text-align: left; }
  28.     a { text-decoration: none; }
  30.     /* ── Navbar ──────────────────────────────────────────────────────────────────── */
  31.     .navbar {
  32.         background: rgba(247,245,240,.96) !important;
  33.         backdrop-filter: blur(16px) saturate(180%);
  34.         border-bottom: 1px solid var(--n-border) !important;
  35.         box-shadow: none !important;
  36.     }
  37.     .navbar .nav-link        { color: var(--n-dark) !important; font-size: 13.5px; font-weight: 500; opacity: .8; }
  38.     .navbar .nav-link:hover  { opacity: 1; color: var(--n-dark) !important; }
  39.     .navbar .login-btn       { background: var(--n-dark) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 8px 20px !important; font-size: 13px !important; font-weight: 600 !important; }
  41.     /* ── Utilities ─────────────────────────────────────────────────────────────── */
  42.     .n-wrap    { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
  43.     .n-wrap-sm { max-width: 820px;  margin: 0 auto; padding: 0 28px; }
  44.     .n-label   {
  45.         display: inline-flex; align-items: center; gap: 8px;
  46.         font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  47.         color: var(--n-amber); margin-bottom: 16px;
  48.     }
  49.     .n-label::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
  50.     .n-h1 { font-family:'Montserrat',sans-serif; font-size: clamp(34px,4.5vw,58px); font-weight: 900; line-height: 1.06; letter-spacing: -.025em; color: var(--n-dark); }
  51.     .n-h1 em { font-style: normal; color: var(--n-amber); }
  52.     .n-h2 { font-family:'Montserrat',sans-serif; font-size: clamp(26px,3vw,40px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
  53.     .n-h2 em { font-style: normal; color: var(--n-amber); }
  54.     .n-body { font-size: 16px; line-height: 1.75; color: var(--n-muted); }
  55.     .n-center { text-align: center; }
  56.     .n-center .n-label { justify-content: center; }
  57.     .n-btn {
  58.         display: inline-flex; align-items: center; gap: 8px;
  59.         padding: 12px 24px; border-radius: var(--n-radius-sm);
  60.         font-size: 14px; font-weight: 600; border: 1.5px solid transparent;
  61.         cursor: pointer; text-decoration: none; transition: all .18s; font-family: var(--n-font);
  62.     }
  63.     .n-btn-primary { background: var(--n-dark); color: #fff; border-color: var(--n-dark); }
  64.     .n-btn-primary:hover { background: var(--n-dark-2); color: #fff; transform: translateY(-1px); }
  65.     .n-btn-outline { background: transparent; border-color: var(--n-border-md); color: var(--n-dark); }
  66.     .n-btn-outline:hover { border-color: var(--n-dark); transform: translateY(-1px); }
  67.     .n-btn-amber { background: var(--n-amber); color: #fff; border-color: var(--n-amber); }
  68.     .n-btn-amber:hover { background: var(--n-amber-lt); color: #fff; transform: translateY(-1px); }
  70.     /* ────────────────────────────────────────────────────────────────────────────
  71.        PAGE HERO
  72.        ──────────────────────────────────────────────────────────────────────────── */
  73.     .n-prod-hero {
  74.         background: var(--n-cream);
  75.         padding: 120px 0 72px;
  76.         position: relative;
  77.         overflow: hidden;
  78.         border-bottom: 1px solid var(--n-border);
  79.     }
  80.     .n-prod-hero::before {
  81.         content: '';
  82.         position: absolute; top: 0; right: 0; width: 55%; height: 100%;
  83.         background: radial-gradient(ellipse 80% 70% at 80% 50%, rgba(192,125,42,.06) 0%, transparent 65%);
  84.         pointer-events: none;
  85.     }
  87.     /* ── Module nav pills ────────────────────────────────────────────────────────── */
  88.     .n-mod-nav {
  89.         display: flex; gap: 8px; flex-wrap: wrap; margin-top: 40px;
  90.     }
  91.     .n-mod-nav a {
  92.         display: inline-flex; align-items: center; gap: 6px;
  93.         padding: 6px 14px; border-radius: 100px;
  94.         font-size: 12px; font-weight: 600; font-family: monospace; letter-spacing: .04em;
  95.         background: var(--n-white); border: 1px solid var(--n-border-md); color: var(--n-muted);
  96.         text-decoration: none; transition: all .15s;
  97.     }
  98.     .n-mod-nav a:hover { border-color: var(--n-amber); color: var(--n-amber); }
  99.     .n-mod-nav a span { font-size: 10px; color: var(--n-amber); }
  101.     /* ────────────────────────────────────────────────────────────────────────────
  102.        SYSTEM DEEP SECTIONS — alternating layout
  103.        ──────────────────────────────────────────────────────────────────────────── */
  104.     .n-sys-deep {
  105.         padding: 88px 0;
  106.         border-top: 1px solid var(--n-border);
  107.     }
  108.     .n-sys-row {
  109.         display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
  110.     }
  111.     .n-sys-row.n-reverse { direction: rtl; }
  112.     .n-sys-row.n-reverse > * { direction: ltr; }
  113.     .n-sys-num {
  114.         font-family: monospace; font-size: 11px; font-weight: 700;
  115.         color: var(--n-amber); letter-spacing: .12em; text-transform: uppercase;
  116.         margin-bottom: 14px; display: block;
  117.     }
  118.     .n-sys-deep h2 { color: var(--n-dark); margin-bottom: 20px; }
  119.     .n-sys-deep p  { font-size: 15px; color: var(--n-muted); line-height: 1.7; margin-bottom: 16px; }
  120.     .n-feat-list {
  121.         list-style: none; margin-top: 24px;
  122.         display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  123.     }
  124.     .n-feat-list li {
  125.         font-size: 13.5px; color: var(--n-dark);
  126.         display: flex; align-items: flex-start; gap: 8px;
  127.     }
  128.     .n-feat-list li::before {
  129.         content: '→'; color: var(--n-amber); font-family: monospace;
  130.         font-size: 12px; flex-shrink: 0; margin-top: 2px;
  131.     }
  133.     /* ── Product mocks ─────────────────────────────────────────────────────────── */
  134.     .n-mock {
  135.         background: var(--n-white);
  136.         border: 1px solid var(--n-border-md);
  137.         border-radius: var(--n-radius);
  138.         padding: 18px;
  139.         box-shadow: var(--n-shadow-lg);
  140.     }
  141.     .n-mock-label {
  142.         font-family: monospace; font-size: 10px; color: var(--n-muted-2);
  143.         letter-spacing: .08em; text-transform: uppercase;
  144.         padding-bottom: 10px; border-bottom: 1px solid var(--n-border);
  145.         margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center;
  146.     }
  147.     .n-mock-dots { display: flex; gap: 4px; }
  148.     .n-mock-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--n-border-md); }
  150.     /* Kanban mock — Sales */
  151.     .n-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  152.     .n-kan-col { background: var(--n-cream); border-radius: 6px; padding: 8px; }
  153.     .n-kan-head { font-family: monospace; font-size: 10px; color: var(--n-muted-2); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
  154.     .n-kan-count { background: var(--n-amber); color: #fff; padding: 1px 5px; border-radius: 100px; font-size: 9px; }
  155.     .n-kan-card { background: var(--n-white); border: 0.5px solid var(--n-border-md); border-radius: 6px; padding: 8px; margin-bottom: 5px; }
  156.     .n-kan-id    { font-family: monospace; color: var(--n-muted-2); font-size: 10px; }
  157.     .n-kan-title { margin-top: 3px; color: var(--n-dark); font-size: 12px; font-weight: 600; }
  158.     .n-kan-tag   { display: inline-block; margin-top: 5px; font-family: monospace; font-size: 9px; padding: 2px 6px; border-radius: 3px; letter-spacing: .04em; }
  159.     .n-kan-tag.new  { background: var(--n-amber-dim); color: var(--n-amber); }
  160.     .n-kan-tag.qual { background: var(--n-sage-dim, rgba(61,107,82,.09)); color: var(--n-sage); }
  161.     .n-kan-tag.conv { background: rgba(61,79,114,.08); color: #3D4F72; }
  163.     /* Project WBS mock */
  164.     .n-proj-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
  165.     .n-proj-stat  { padding: 9px; background: var(--n-cream); border: 0.5px solid var(--n-border); border-radius: 6px; }
  166.     .n-proj-stat-lbl { font-family: monospace; font-size: 9px; color: var(--n-muted-2); text-transform: uppercase; letter-spacing: .08em; }
  167.     .n-proj-stat-val { font-family:'Montserrat',sans-serif; font-size: 15px; font-weight: 800; margin-top: 4px; color: var(--n-dark); }
  168.     .n-proj-stat-val.pos { color: var(--n-sage); }
  169.     .n-proj-wbs   { background: var(--n-cream); border: 0.5px solid var(--n-border); border-radius: 6px; padding: 10px; }
  170.     .n-wbs-head   { font-family: monospace; font-size: 9px; color: var(--n-muted-2); text-transform: uppercase; letter-spacing: .08em; padding-bottom: 7px; border-bottom: 0.5px solid var(--n-border); margin-bottom: 7px; }
  171.     .n-wbs-row    { display: grid; grid-template-columns: 44px 1fr 56px 44px; gap: 6px; font-size: 11px; padding: 4px 0; align-items: center; }
  172.     .n-wbs-row .code { font-family: monospace; color: var(--n-amber); font-weight: 600; }
  173.     .n-wbs-row .name { color: var(--n-dark); }
  174.     .n-wbs-row .amt  { font-family: monospace; text-align: right; color: var(--n-muted); font-size: 10px; }
  175.     .n-wbs-row .pct  { font-family: monospace; text-align: right; font-size: 10px; color: var(--n-sage); font-weight: 700; }
  177.     /* DATEV mock */
  178.     .n-datev-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  179.     .n-datev-field { padding: 9px 12px; background: var(--n-cream); border: 0.5px solid var(--n-border); border-radius: 6px; }
  180.     .n-datev-field label { font-family: monospace; font-size: 9px; color: var(--n-muted-2); text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: 4px; }
  181.     .n-datev-field .val  { font-size: 13px; color: var(--n-dark); font-weight: 600; }
  182.     .n-datev-field.filled .val { font-family: monospace; color: var(--n-amber); }
  183.     .n-datev-ok { margin-top: 12px; padding: 10px 12px; background: rgba(61,107,82,.08); border: 0.5px solid rgba(61,107,82,.25); border-radius: 6px; font-size: 12px; color: var(--n-sage); font-weight: 600; }
  185.     /* IoT mock */
  186.     .n-iot-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
  187.     .n-iot-metric  { background: var(--n-cream); border: 0.5px solid var(--n-border); border-radius: 6px; padding: 10px; }
  188.     .n-iot-metric-lbl { font-family: monospace; font-size: 9px; color: var(--n-muted-2); text-transform: uppercase; letter-spacing: .08em; }
  189.     .n-iot-metric-val { font-family:'Montserrat',sans-serif; font-size: 18px; font-weight: 800; margin-top: 4px; color: var(--n-dark); }
  190.     .n-iot-chart   { background: var(--n-cream); border: 0.5px solid var(--n-border); border-radius: 6px; padding: 10px; margin-bottom: 8px; }
  191.     .n-iot-link    { display: flex; gap: 6px; align-items: center; padding: 8px 10px; background: var(--n-cream); border: 0.5px solid var(--n-border); border-radius: 6px; font-size: 11px; color: var(--n-muted); }
  193.     /* Command Center mock */
  194.     .n-cc-stat     { margin-bottom: 10px; padding: 10px 12px; background: var(--n-cream); border: 0.5px solid var(--n-border); border-radius: 6px; }
  195.     .n-cc-stat-lbl { font-family: monospace; font-size: 9px; color: var(--n-muted-2); text-transform: uppercase; letter-spacing: .08em; }
  196.     .n-cc-stat-val { font-family:'Montserrat',sans-serif; font-size: 22px; font-weight: 900; margin-top: 3px; color: var(--n-dark); }
  197.     .n-cc-bar-section { }
  198.     .n-cc-bar-lbl  { font-family: monospace; font-size: 9px; color: var(--n-muted-2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
  199.     .n-cc-bar-row  { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  200.     .n-cc-bar-name { width: 90px; font-family: monospace; font-size: 10px; color: var(--n-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
  201.     .n-cc-bar-track { flex: 1; height: 7px; background: var(--n-cream); border-radius: 3px; overflow: hidden; border: 0.5px solid var(--n-border); }
  202.     .n-cc-bar-fill  { height: 100%; background: var(--n-amber); border-radius: 3px; }
  203.     .n-cc-bar-num  { width: 28px; text-align: right; font-family: monospace; font-size: 10px; color: var(--n-muted-2); }
  205.     /* AI Email mock */
  206.     .n-ai-email    { padding: 10px 12px; background: var(--n-cream); border: 0.5px solid var(--n-border); border-radius: 6px; margin-bottom: 6px; }
  207.     .n-ai-email-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
  208.     .n-ai-email-from { font-size: 12px; color: var(--n-dark); font-weight: 600; }
  209.     .n-ai-email-tag  { font-family: monospace; font-size: 10px; padding: 2px 7px; border-radius: 3px; letter-spacing: .04em; font-weight: 600; }
  210.     .n-ai-email-tag.proposal { background: var(--n-amber-dim); color: var(--n-amber); }
  211.     .n-ai-email-tag.general  { background: rgba(61,107,82,.1); color: var(--n-sage); }
  212.     .n-ai-email-tag.support  { background: rgba(26,29,46,.07); color: var(--n-muted); }
  213.     .n-ai-email-subj { font-size: 11px; color: var(--n-muted); margin-bottom: 4px; }
  214.     .n-ai-email-conf { font-family: monospace; font-size: 10px; color: var(--n-muted-2); line-height: 1.5; }
  216.     /* ────────────────────────────────────────────────────────────────────────────
  217.        MOBILE APP
  218.        ──────────────────────────────────────────────────────────────────────────── */
  219.     .n-app-section { padding: 88px 0; background: var(--n-white); border-top: 1px solid var(--n-border); }
  220.     .n-app-pill {
  221.         display: inline-flex; align-items: center; gap: 6px;
  222.         padding: 4px 12px; background: var(--n-cream); border: 1px solid var(--n-border-md);
  223.         border-radius: 100px; font-size: 11px; font-family: monospace; color: var(--n-muted);
  224.         font-weight: 600; letter-spacing: .04em; margin-bottom: 20px;
  225.     }
  226.     .n-app-pill::before { content: ''; width: 5px; height: 5px; background: var(--n-sage); border-radius: 50%; }
  227.     .n-app-feat-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 24px 0 28px; }
  228.     .n-app-feat-list li { font-size: 13.5px; color: var(--n-dark); display: flex; align-items: flex-start; gap: 8px; }
  229.     .n-app-feat-list li::before { content: '→'; color: var(--n-amber); font-family: monospace; font-size: 12px; flex-shrink: 0; margin-top: 2px; }
  231.     /* Phone frame */
  232.     .n-phone-wrap  { background: var(--n-cream-2); border-radius: 20px; padding: 40px 20px; display: flex; justify-content: center; align-items: center; }
  233.     .n-phone       { aspect-ratio: 9/18; max-width: 260px; background: var(--n-dark); border-radius: 32px; padding: 12px; position: relative; box-shadow: var(--n-shadow-lg); }
  234.     .n-phone::before { content:''; position:absolute; top:12px; left:50%; transform:translateX(-50%); width:64px; height:14px; background:var(--n-dark); border-radius:0 0 12px 12px; z-index:2; }
  235.     .n-phone-screen { background: var(--n-cream); border-radius: 22px; width: 100%; height: 100%; padding: 26px 12px 12px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
  236.     .n-phone-greet   { font-family: monospace; font-size: 9px; color: var(--n-muted-2); text-transform: uppercase; letter-spacing: .08em; }
  237.     .n-phone-greet-h { font-family:'Montserrat',sans-serif; font-size: 14px; font-weight: 800; color: var(--n-dark); margin-top: 2px; }
  238.     .n-phone-clock   { background: var(--n-dark); padding: 10px; border-radius: 8px; text-align: center; }
  239.     .n-phone-clock .time  { font-family: monospace; font-size: 17px; font-weight: 600; color: #fff; letter-spacing: .06em; }
  240.     .n-phone-clock .label { font-family: monospace; font-size: 8px; color: var(--n-amber); margin-top: 3px; text-transform: uppercase; letter-spacing: .08em; }
  241.     .n-phone-row   { display: flex; align-items: center; gap: 6px; padding: 6px 9px; background: var(--n-white); border: 0.5px solid var(--n-border-md); border-radius: 5px; font-size: 10px; color: var(--n-muted); }
  242.     .n-phone-pip   { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
  243.     .n-phone-pip.amber { background: var(--n-amber); }
  244.     .n-phone-pip.sage  { background: var(--n-sage); }
  245.     .n-phone-pip.muted { background: var(--n-muted-2); }
  246.     .n-phone-amt   { margin-left: auto; font-family: monospace; font-size: 9px; color: var(--n-dark); font-weight: 700; }
  248.     /* ────────────────────────────────────────────────────────────────────────────
  249.        INTEGRATIONS
  250.        ──────────────────────────────────────────────────────────────────────────── */
  251.     .n-integ-grid {
  252.         display: grid; grid-template-columns: repeat(4, 1fr);
  253.         gap: 1px; background: var(--n-border-md); border: 1px solid var(--n-border-md);
  254.         border-radius: var(--n-radius); overflow: hidden; margin-top: 40px;
  255.     }
  256.     @media (max-width: 640px) { .n-integ-grid { grid-template-columns: repeat(2, 1fr); } }
  257.     .n-integ-item {
  258.         background: var(--n-white); padding: 22px; text-align: center;
  259.         font-size: 13px; font-weight: 600; color: var(--n-muted);
  260.         transition: background .2s, color .2s;
  261.     }
  262.     .n-integ-item:hover { background: var(--n-cream); color: var(--n-dark); }
  264.     /* ────────────────────────────────────────────────────────────────────────────
  265.        FINAL CTA
  266.        ──────────────────────────────────────────────────────────────────────────── */
  267.     .n-prod-cta {
  268.         padding: 100px 0;
  269.         text-align: center;
  270.         background: var(--n-dark);
  271.         position: relative;
  272.         overflow: hidden;
  273.     }
  274.     .n-prod-cta::before {
  275.         content: '';
  276.         position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
  277.         width: 80%; height: 200%;
  278.         background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(192,125,42,.09) 0%, transparent 65%);
  279.         pointer-events: none;
  280.     }
  281.     .n-prod-cta h2 { font-family:'Montserrat',sans-serif; font-size: clamp(26px,3vw,42px); font-weight: 900; color: #fff; margin-bottom: 16px; }
  282.     .n-prod-cta h2 em { font-style: normal; color: var(--n-amber); }
  283.     .n-prod-cta p  { color: rgba(255,255,255,.55); font-size: 16px; max-width: 52ch; margin: 0 auto 32px; line-height: 1.7; }
  284.     .n-prod-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  285.     .n-btn-light { background: #fff; color: var(--n-dark); border-color: #fff; }
  286.     .n-btn-light:hover { background: var(--n-cream-2); }
  287.     .n-btn-ghost-light { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2); color: #fff; }
  288.     .n-btn-ghost-light:hover { background: rgba(255,255,255,.16); color: #fff; }
  290.     /* ── Responsive ─────────────────────────────────────────────────────────────── */
  291.     @media (max-width: 980px) {
  292.         .n-sys-row { grid-template-columns: 1fr; gap: 40px; }
  293.         .n-sys-row.n-reverse { direction: ltr; }
  294.         .n-feat-list { grid-template-columns: 1fr; }
  295.         .n-app-feat-list { grid-template-columns: 1fr; }
  296.         .n-proj-stats { grid-template-columns: repeat(2, 1fr); }
  297.         .n-phone-wrap { display: none; }
  298.     }
  299. </style>
  301. {# ══ HERO ══════════════════════════════════════════════════════════════════════ #}
  302. <section class="n-prod-hero">
  303.     <div class="n-wrap" style="position:relative;z-index:2">
  304.         <div class="n-label trn" data-trn-key="_PRD_LABEL_">The platform</div>
  305.         <h1 class="n-h1" style="max-width:780px;margin-bottom:24px">
  306.             <span class="trn" data-trn-key="_PRD_H1_">Six systems,</span> <em class="trn" data-trn-key="_PRD_H1_EM_">one source of truth.</em>
  307.         </h1>
  308.         <p class="n-body trn" style="max-width:600px;margin-bottom:12px" data-trn-key="_PRD_DESC_">
  309.             A connected operational layer where every stage of project delivery, site data, finance, and reporting flows together — from first lead to commissioning, billing, and O&M.
  310.         </p>
  311.         <p class="n-body" style="max-width:600px;margin-bottom:24px">
  312.             Built for EPC companies, system integrators, energy operators, and multi-site industrial businesses.
  313.         </p>
  314.         <div style="max-width:720px;margin-bottom:28px;padding:16px 20px;background:var(--n-white);border:1px solid var(--n-border-md);border-radius:10px;">
  315.             <div style="font-size:12px;font-family:monospace;letter-spacing:.03em;color:var(--n-amber);font-weight:700;line-height:2">
  316.                 Lead → Proposal → Project → Procurement → Execution → Site Data → Billing → O&amp;M → Reporting
  317.             </div>
  318.             <p style="font-size:12px;color:var(--n-muted-2);margin-top:4px;font-family:monospace;font-weight:400">
  319.                 Data entered once flows across every stage — from quotation to revenue and audit.
  320.             </p>
  321.         </div>
  322.         <nav class="n-mod-nav">
  323.             <a href="#crm"><span>01</span> Sales &amp; CRM</a>
  324.             <a href="#projects"><span>02</span> Projects</a>
  325.             <a href="#finance"><span>03</span> Finance</a>
  326.             <a href="#iot"><span>04</span> Edge+ / IoT</a>
  327.             <a href="#command"><span>05</span> Command Center</a>
  328.             <a href="#ai"><span>06</span> Native AI &amp; Reporting</a>
  329.             <a href="#app">📱 Beezeness</a>
  330.         </nav>
  331.     </div>
  332. </section>
  334. {# ══ 01 SALES & CRM ════════════════════════════════════════════════════════════ #}
  335. <section class="n-sys-deep" id="crm" style="background:var(--n-white)">
  336.     <div class="n-wrap">
  337.         <div class="n-sys-row">
  338.             <div>
  339.                 <span class="n-sys-num trn" data-trn-key="_PRD_SYS1_NUM_">01 / Sales &amp; CRM</span>
  340.                 <h2 class="n-h2"><span class="trn" data-trn-key="_PRD_SYS1_H2_">Sales &amp; CRM</span> <em class="trn" data-trn-key="_PRD_SYS1_H2_EM_">in Kanban.</em></h2>
  341.                 <p>From lead to project handover — manage proposals, quotations, customer records, and controlled handover to project execution.</p>
  342.                 <ul class="n-feat-list">
  343.                     <li>Lead and Opportunity Kanbans</li>
  344.                     <li>Unified quote → invoice flow</li>
  345.                     <li>Margin rules and approval control</li>
  346.                     <li>Incoterm cost breakdown</li>
  347.                     <li>Proposal JSON import/export</li>
  348.                     <li>Client and contact 360° view</li>
  349.                 </ul>
  350.                 <p style="font-size:13.5px;color:var(--n-muted);margin-top:16px;line-height:1.6;">Converts sales workflows directly into controlled project execution.</p>
  351.             </div>
  352.             <div class="n-mock">
  353.                 <div class="n-mock-label">
  354.                     <span>Sales Pipeline · Kanban</span>
  355.                     <div class="n-mock-dots"><span></span><span></span><span></span></div>
  356.                 </div>
  357.                 <div class="n-kanban">
  358.                     <div class="n-kan-col">
  359.                         <div class="n-kan-head">New <span class="n-kan-count">4</span></div>
  360.                         <div class="n-kan-card">
  361.                             <div class="n-kan-id">#00000014</div>
  362.                             <div class="n-kan-title">Mozibul Yasser</div>
  363.                             <span class="n-kan-tag new">NEW</span>
  364.                         </div>
  365.                         <div class="n-kan-card">
  366.                             <div class="n-kan-id">#00000013</div>
  367.                             <div class="n-kan-title">HoneyBee Demo</div>
  368.                         </div>
  369.                     </div>
  370.                     <div class="n-kan-col">
  371.                         <div class="n-kan-head">Qualified <span class="n-kan-count">2</span></div>
  372.                         <div class="n-kan-card">
  373.                             <div class="n-kan-id">#00000004</div>
  374.                             <div class="n-kan-title">Rawfir — €72k</div>
  375.                             <span class="n-kan-tag qual">QUALIFIED</span>
  376.                         </div>
  377.                         <div class="n-kan-card">
  378.                             <div class="n-kan-id">#00000006</div>
  379.                             <div class="n-kan-title">Aman Ullah</div>
  380.                         </div>
  381.                     </div>
  382.                     <div class="n-kan-col">
  383.                         <div class="n-kan-head">Converted <span class="n-kan-count">1</span></div>
  384.                         <div class="n-kan-card">
  385.                             <div class="n-kan-id">#00000008</div>
  386.                             <div class="n-kan-title">Son Traders — €90k</div>
  387.                             <span class="n-kan-tag conv">CONVERTED</span>
  388.                         </div>
  389.                     </div>
  390.                 </div>
  391.                 <div style="margin-top:10px;padding:8px 12px;background:var(--n-amber-dim);border:0.5px solid rgba(192,125,42,.2);border-radius:6px;display:flex;justify-content:space-between;align-items:center">
  392.                     <span style="font-size:11px;color:var(--n-amber);font-weight:600">Open pipeline</span>
  393.                     <span style="font-family:'Montserrat',sans-serif;font-size:15px;font-weight:800;color:var(--n-amber)">€1.4M</span>
  394.                 </div>
  395.             </div>
  396.         </div>
  397.     </div>
  398. </section>
  400. {# ══ 02 PROJECTS ══════════════════════════════════════════════════════════════ #}
  401. <section class="n-sys-deep" id="projects" style="background:var(--n-cream)">
  402.     <div class="n-wrap">
  403.         <div class="n-sys-row n-reverse">
  404.             <div>
  405.                 <span class="n-sys-num trn" data-trn-key="_PRD_SYS2_NUM_">02 / Projects</span>
  406.                 <h2 class="n-h2"><span class="trn" data-trn-key="_PRD_SYS2_H2_">Project Management</span> <em class="trn" data-trn-key="_PRD_SYS2_H2_EM_">live costing.</em></h2>
  407.                 <p>Manage WBS, milestones, responsibilities, site updates, procurement dependencies, commissioning tasks, and project cost visibility.</p>
  408.                 <ul class="n-feat-list">
  409.                     <li>WBS with drill-down</li>
  410.                     <li>RACI at task level</li>
  411.                     <li>EVM (CPI, SPI, variance)</li>
  412.                     <li>BOQ baseline tracking</li>
  413.                     <li>Milestone &amp; dependency graph</li>
  414.                     <li>Baseline capture + schedule drift</li>
  415.                 </ul>
  416.             </div>
  417.             <div class="n-mock">
  418.                 <div class="n-mock-label">
  419.                     <span>Project Costing · 10000kw rooftop</span>
  420.                     <div class="n-mock-dots"><span></span><span></span><span></span></div>
  421.                 </div>
  422.                 <div class="n-proj-stats">
  423.                     <div class="n-proj-stat">
  424.                         <div class="n-proj-stat-lbl">Budget</div>
  425.                         <div class="n-proj-stat-val">€31,397</div>
  426.                     </div>
  427.                     <div class="n-proj-stat">
  428.                         <div class="n-proj-stat-lbl">Actual</div>
  429.                         <div class="n-proj-stat-val">€8,240</div>
  430.                     </div>
  431.                     <div class="n-proj-stat">
  432.                         <div class="n-proj-stat-lbl">Variance</div>
  433.                         <div class="n-proj-stat-val pos">+€2,180</div>
  434.                     </div>
  435.                     <div class="n-proj-stat">
  436.                         <div class="n-proj-stat-lbl">CPI</div>
  437.                         <div class="n-proj-stat-val pos">1.12</div>
  438.                     </div>
  439.                 </div>
  440.                 <div class="n-proj-wbs">
  441.                     <div class="n-wbs-head">WBS · BOQ baseline</div>
  442.                     <div class="n-wbs-row">
  443.                         <span class="code">P-001</span><span class="name">Middle Clamp — Mounting</span><span class="amt">€1,806</span><span class="pct">✓</span>
  444.                     </div>
  445.                     <div class="n-wbs-row">
  446.                         <span class="code">P-003</span><span class="name">L Foot — Mounting</span><span class="amt">€7,539</span><span class="pct">72%</span>
  447.                     </div>
  448.                     <div class="n-wbs-row">
  449.                         <span class="code">P-005</span><span class="name">3550 mm Rail</span><span class="amt">€6,437</span><span class="pct" style="color:var(--n-muted-2)">0%</span>
  450.                     </div>
  451.                     <div class="n-wbs-row">
  452.                         <span class="code">P-007</span><span class="name">5900 mm Rail</span><span class="amt">€4,072</span><span class="pct" style="color:var(--n-muted-2)">0%</span>
  453.                     </div>
  454.                 </div>
  455.             </div>
  456.         </div>
  457.     </div>
  458. </section>
  460. {# ══ 03 FINANCE ═══════════════════════════════════════════════════════════════ #}
  461. <section class="n-sys-deep" id="finance" style="background:var(--n-white)">
  462.     <div class="n-wrap">
  463.         <div class="n-sys-row">
  464.             <div>
  465.                 <span class="n-sys-num trn" data-trn-key="_PRD_SYS3_NUM_">03 / Finance</span>
  466.                 <h2 class="n-h2"><span class="trn" data-trn-key="_PRD_SYS3_H2_">Bank rec that</span> <em class="trn" data-trn-key="_PRD_SYS3_H2_EM_">reconciles itself.</em></h2>
  467.                 <p>Connect project cost, billing, expenses, receivables, payables, bank reconciliation, and management reporting.</p>
  468.                 <ul class="n-feat-list">
  469.                     <li>Auto bank reconciliation</li>
  470.                     <li>Loan / EMI schedules</li>
  471.                     <li>DATEV-ready export (SKR03/04)</li>
  472.                     <li>Multi-currency ledger</li>
  473.                     <li>Expense allowance approvals</li>
  474.                     <li>Provisional transaction support</li>
  475.                     <li>Ledger + Trial Balance + P&amp;L</li>
  476.                     <li>Balance sheet with dimensions</li>
  477.                 </ul>
  478.             </div>
  479.             <div class="n-mock">
  480.                 <div class="n-mock-label">
  481.                     <span>DATEV Client Mapping · Mustermann GmbH</span>
  482.                     <div class="n-mock-dots"><span></span><span></span><span></span></div>
  483.                 </div>
  484.                 <div class="n-datev-form">
  485.                     <div class="n-datev-field filled">
  486.                         <label>DATEV Client ID</label>
  487.                         <div class="val">12345</div>
  488.                     </div>
  489.                     <div class="n-datev-field filled">
  490.                         <label>Client Name</label>
  491.                         <div class="val">Mustermann GmbH</div>
  492.                     </div>
  493.                     <div class="n-datev-field filled">
  494.                         <label>Berater Number</label>
  495.                         <div class="val">1001</div>
  496.                     </div>
  497.                     <div class="n-datev-field filled">
  498.                         <label>Mandant Number</label>
  499.                         <div class="val">10001</div>
  500.                     </div>
  501.                     <div class="n-datev-field filled">
  502.                         <label>SKR Type</label>
  503.                         <div class="val">SKR03</div>
  504.                     </div>
  505.                     <div class="n-datev-field filled">
  506.                         <label>Service Type</label>
  507.                         <div class="val">All Services</div>
  508.                     </div>
  509.                 </div>
  510.                 <div class="n-datev-ok">
  511.                     ✓ Connected — EXTF export ready · Last sync: 2 min ago
  512.                 </div>
  513.             </div>
  514.         </div>
  515.     </div>
  516. </section>
  518. {# ══ 04 CLOUD + IOT ═══════════════════════════════════════════════════════════ #}
  519. <section class="n-sys-deep" id="iot" style="background:var(--n-cream)">
  520.     <div class="n-wrap">
  521.         <div class="n-sys-row n-reverse">
  522.             <div>
  523.                 <span class="n-sys-num trn" data-trn-key="_PRD_SYS4_NUM_">04 / Edge+ / IoT</span>
  524.                 <h2 class="n-h2"><span class="trn" data-trn-key="_PRD_SYS4_H2_">Time-series data,</span> <em class="trn" data-trn-key="_PRD_SYS4_H2_EM_">native.</em></h2>
  525.                 <p>HoneyBee Edge+ connects selected plant and site data with business workflows — energy generation and consumption, utility and runtime data, site-level operational signals, and fault and event tracking.</p>
  526.                 <ul class="n-feat-list">
  527.                     <li>InfluxDB time-series engine</li>
  528.                     <li>PLC + Raspberry Pi ready</li>
  529.                     <li>Custom dashboard builder</li>
  530.                     <li>Real-time socket updates</li>
  531.                     <li>Sensor → finance linkage</li>
  532.                     <li>Alert + threshold rules</li>
  533.                 </ul>
  534.                 <p style="font-size:13.5px;color:var(--n-muted);margin-top:16px;line-height:1.6;">This data supports IPP / OPEX / PPA billing, O&M reporting, operational monitoring, financial tracking, and audit workflows.</p>
  535.                 <p style="font-size:12.5px;color:var(--n-amber);margin-top:10px;line-height:1.6;font-weight:600;">Edge+, IoT hardware, sensors, gateways, local servers, and deployments are scoped and quoted project by project.</p>
  536.             </div>
  537.             <div class="n-mock">
  538.                 <div class="n-mock-label">
  539.                     <span>IoT Cloud · Solar Site 142kW</span>
  540.                     <div class="n-mock-dots"><span></span><span></span><span></span></div>
  541.                 </div>
  542.                 <div class="n-iot-metrics">
  543.                     <div class="n-iot-metric">
  544.                         <div class="n-iot-metric-lbl">Solar</div>
  545.                         <div class="n-iot-metric-val">142 kW</div>
  546.                     </div>
  547.                     <div class="n-iot-metric">
  548.                         <div class="n-iot-metric-lbl">Grid</div>
  549.                         <div class="n-iot-metric-val">18 kW</div>
  550.                     </div>
  551.                     <div class="n-iot-metric">
  552.                         <div class="n-iot-metric-lbl">Battery</div>
  553.                         <div class="n-iot-metric-val">87%</div>
  554.                     </div>
  555.                 </div>
  556.                 <div class="n-iot-chart">
  557.                     <svg viewBox="0 0 300 40" preserveAspectRatio="none" style="width:100%;height:40px;display:block">
  558.                         <defs>
  559.                             <linearGradient id="iotGrad" x1="0" x2="0" y1="0" y2="1">
  560.                                 <stop offset="0%" stop-color="#C07D2A" stop-opacity="0.28"/>
  561.                                 <stop offset="100%" stop-color="#C07D2A" stop-opacity="0"/>
  562.                             </linearGradient>
  563.                         </defs>
  564.                         <path d="M0,32 Q30,26 50,20 T110,12 T165,16 T220,7 T300,4 L300,40 L0,40 Z" fill="url(#iotGrad)"/>
  565.                         <path d="M0,32 Q30,26 50,20 T110,12 T165,16 T220,7 T300,4" stroke="#C07D2A" stroke-width="1.5" fill="none" stroke-linecap="round"/>
  566.                     </svg>
  567.                 </div>
  568.                 <div class="n-iot-link">
  569.                     <span style="color:var(--n-sage);font-size:8px">●</span>
  570.                     142 kW feeding Project #10000kw · linked to Finance
  571.                 </div>
  572.             </div>
  573.         </div>
  574.     </div>
  575. </section>
  577. {# ══ 05 COMMAND CENTER ════════════════════════════════════════════════════════ #}
  578. <section class="n-sys-deep" id="command" style="background:var(--n-white)">
  579.     <div class="n-wrap">
  580.         <div class="n-sys-row">
  581.             <div>
  582.                 <span class="n-sys-num trn" data-trn-key="_PRD_SYS5_NUM_">05 / Admin Command Center</span>
  583.                 <h2 class="n-h2"><span class="trn" data-trn-key="_PRD_SYS5_H2_">See every company.</span> <em class="trn" data-trn-key="_PRD_SYS5_H2_EM_">All at once.</em></h2>
  584.                 <p>Manage multiple companies, sites, projects, and teams from one operational view.</p>
  585.                 <ul class="n-feat-list">
  586.                     <li>Multi-company consolidation</li>
  587.                     <li>Live user activity tracking</li>
  588.                     <li>Auto-ticket on system error</li>
  589.                     <li>Cross-entity audit log</li>
  590.                     <li>Page velocity monitoring</li>
  591.                     <li>Operational snapshot feed</li>
  592.                 </ul>
  593.             </div>
  594.             <div class="n-mock">
  595.                 <div class="n-mock-label">
  596.                     <span>Admin Command Center · Live</span>
  597.                     <span style="font-family:monospace;font-size:10px;color:var(--n-sage);font-weight:700">● 02:04 local</span>
  598.                 </div>
  599.                 <div class="n-cc-stat">
  600.                     <div class="n-cc-stat-lbl">Live users</div>
  601.                     <div class="n-cc-stat-val">1 <span style="font-size:12px;color:var(--n-muted-2);font-weight:400;font-family:var(--n-font)">last 5 min</span></div>
  602.                 </div>
  603.                 <div class="n-cc-bar-section">
  604.                     <div class="n-cc-bar-lbl">Top pages</div>
  605.                     <div class="n-cc-bar-row">
  606.                         <span class="n-cc-bar-name">sales_dashboard</span>
  607.                         <div class="n-cc-bar-track"><div class="n-cc-bar-fill" style="width:95%"></div></div>
  608.                         <span class="n-cc-bar-num">105</span>
  609.                     </div>
  610.                     <div class="n-cc-bar-row">
  611.                         <span class="n-cc-bar-name">lead/pipeline</span>
  612.                         <div class="n-cc-bar-track"><div class="n-cc-bar-fill" style="width:56%"></div></div>
  613.                         <span class="n-cc-bar-num">62</span>
  614.                     </div>
  615.                     <div class="n-cc-bar-row">
  616.                         <span class="n-cc-bar-name">create_project</span>
  617.                         <div class="n-cc-bar-track"><div class="n-cc-bar-fill" style="width:51%"></div></div>
  618.                         <span class="n-cc-bar-num">57</span>
  619.                     </div>
  620.                     <div class="n-cc-bar-row">
  621.                         <span class="n-cc-bar-name">project_costing</span>
  622.                         <div class="n-cc-bar-track"><div class="n-cc-bar-fill" style="width:36%"></div></div>
  623.                         <span class="n-cc-bar-num">40</span>
  624.                     </div>
  625.                 </div>
  626.             </div>
  627.         </div>
  628.     </div>
  629. </section>
  631. {# ══ 06 AI & REPORTING ════════════════════════════════════════════════════════ #}
  632. <section class="n-sys-deep" id="ai" style="background:var(--n-cream)">
  633.     <div class="n-wrap">
  634.         <div class="n-sys-row n-reverse">
  635.             <div>
  636.                 <span class="n-sys-num trn" data-trn-key="_PRD_SYS6_NUM_">06 / Native AI &amp; Reporting</span>
  637.                 <h2 class="n-h2"><span class="trn" data-trn-key="_PRD_SYS6_H2_">Native AI</span> <em class="trn" data-trn-key="_PRD_SYS6_H2_EM_">&amp; Reporting</em></h2>
  638.                 <p>Generate reports, summaries, action lists, and operational insights using business and site data. Helps reduce reporting effort, improve decision-making, and detect operational issues early.</p>
  639.                 <ul class="n-feat-list">
  640.                     <li>Persistent AI report outputs</li>
  641.                     <li>Email auto-classification</li>
  642.                     <li>Confidence-scored tagging</li>
  643.                     <li>Transaction tagging engine</li>
  644.                     <li>Cross-cut custom reports</li>
  645.                     <li>Spotlight search (Cmd-K)</li>
  646.                     <li>Cloud LLM or Native on-premise</li>
  647.                     <li>Proposal + project AI generation</li>
  648.                 </ul>
  649.                 <p style="font-size:12.5px;color:var(--n-muted-2);margin-top:16px;line-height:1.6;font-style:italic;">AI outputs should be reviewed by authorised users before commercial or technical use.</p>
  650.             </div>
  651.             <div class="n-mock">
  652.                 <div class="n-mock-label">
  653.                     <span>AI Email Classifier · Inbox</span>
  654.                     <div class="n-mock-dots"><span></span><span></span><span></span></div>
  655.                 </div>
  656.                 <div class="n-ai-email">
  657.                     <div class="n-ai-email-head">
  658.                         <span class="n-ai-email-from">Aman Ullah Aman</span>
  659.                         <span class="n-ai-email-tag proposal">Proposal · 94%</span>
  660.                     </div>
  661.                     <div class="n-ai-email-subj">Streamline Your Business with a Smart ERP Solution</div>
  662.                     <div class="n-ai-email-conf">AI: Inbound proposal for ERP engagement, requires reply.</div>
  663.                 </div>
  664.                 <div class="n-ai-email">
  665.                     <div class="n-ai-email-head">
  666.                         <span class="n-ai-email-from">OCBC Business Banking</span>
  667.                         <span class="n-ai-email-tag support">Support · 82%</span>
  668.                     </div>
  669.                     <div class="n-ai-email-subj">Unlock exclusive cash rebates for Q2</div>
  670.                     <div class="n-ai-email-conf">AI: Commercial advisory from banking partner.</div>
  671.                 </div>
  672.                 <div class="n-ai-email">
  673.                     <div class="n-ai-email-head">
  674.                         <span class="n-ai-email-from">DataBreachToday Enews</span>
  675.                         <span class="n-ai-email-tag general">General · 50%</span>
  676.                     </div>
  677.                     <div class="n-ai-email-subj">Sanctioned Bulletproof Host Tied to DNS Hijacking</div>
  678.                     <div class="n-ai-email-conf">AI: Notification, low business relevance.</div>
  679.                 </div>
  680.                 <div style="margin-top:10px;padding:9px 12px;background:var(--n-dark);border-radius:6px;display:flex;align-items:center;gap:8px">
  681.                     <i class="fa-solid fa-brain" style="color:var(--n-amber);font-size:13px"></i>
  682.                     <span style="font-size:11px;color:rgba(255,255,255,.6);font-family:monospace">Native LLM · Air-gapped · RTX 3090</span>
  683.                     <span style="margin-left:auto;font-size:9px;color:var(--n-sage);font-weight:700;font-family:monospace">● ONLINE</span>
  684.                 </div>
  685.             </div>
  686.         </div>
  687.     </div>
  688. </section>
  690. {# ══ BEEZENESS MOBILE APP ══════════════════════════════════════════════════════ #}
  691. <section class="n-app-section" id="app">
  692.     <div class="n-wrap">
  693.         <div style="display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:center">
  694.             <div>
  695.                 <span class="n-app-pill trn" data-trn-key="_H_MOBILE_PILL_">Beezeness · iOS + Android · included</span>
  696.                 <h2 class="n-h2" style="margin-bottom:16px"><span class="trn" data-trn-key="_H_MOBILE_H2_">The same ERP,</span> <em class="trn" data-trn-key="_H_MOBILE_H2_EM_">in your team's pocket.</em></h2>
  697.                 <div style="width:40px;height:2px;background:var(--n-amber);border-radius:2px;margin:20px 0"></div>
  698.                 <p class="n-body">Support approvals, field updates, attendance, issue reporting, and operational workflows from mobile.</p>
  699.                 <ul class="n-app-feat-list">
  700.                     <li>Face ID / fingerprint login</li>
  701.                     <li>On-site expense with photo</li>
  702.                     <li>QR-based employee onboarding</li>
  703.                     <li>Offline clock-in and attendance</li>
  704.                     <li>Plan-visit route optimization</li>
  705.                     <li>Bulk approvals with notes</li>
  706.                     <li>Stripe + bKash + bank payments</li>
  707.                     <li>Leave requests with attachments</li>
  708.                     <li>Real-time dashboard via socket</li>
  709.                     <li>Timesheet and task tracking</li>
  710.                 </ul>
  711.                 <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:20px">
  712.                     <a href="{{ url('user_login') }}" class="n-btn n-btn-outline"><i class="fa-brands fa-apple"></i> iOS App Store</a>
  713.                     <a href="{{ url('user_login') }}" class="n-btn n-btn-outline"><i class="fa-brands fa-google-play"></i> Google Play</a>
  714.                 </div>
  715.             </div>
  716.             <div class="n-phone-wrap">
  717.                 <div class="n-phone">
  718.                     <div class="n-phone-screen" style="background:#f5f6f8;gap:0;padding:16px 11px 11px">
  719.                         <div style="display:flex;justify-content:space-between;gap:6px;margin-bottom:8px">
  720.                             <div style="background:var(--n-dark);color:#fff;border-radius:20px;padding:5px 11px;font-size:8px;font-weight:700;display:flex;align-items:center;gap:3px">⏱ Day Log</div>
  721.                             <div style="background:#fff;color:var(--n-dark);border-radius:20px;padding:5px 11px;font-size:8px;font-weight:600;border:0.5px solid var(--n-border-md)">+ New Task</div>
  722.                         </div>
  723.                         <div style="background:linear-gradient(135deg,#e4edda 0%,#cddec2 100%);border-radius:8px;height:64px;position:relative;margin-bottom:8px;overflow:hidden">
  724.                             <div style="position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 9px,rgba(255,255,255,.25) 9px,rgba(255,255,255,.25) 10px),repeating-linear-gradient(90deg,transparent,transparent 9px,rgba(255,255,255,.25) 9px,rgba(255,255,255,.25) 10px)"></div>
  725.                             <div style="position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)">
  726.                                 <div style="width:12px;height:12px;background:#e53935;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.3)"></div>
  727.                                 <div style="width:18px;height:18px;background:rgba(229,57,53,.18);border-radius:50%;position:absolute;top:-3px;left:-3px"></div>
  728.                             </div>
  729.                             <div style="position:absolute;bottom:5px;left:5px;background:rgba(255,255,255,.9);border-radius:3px;padding:2px 5px;font-size:6.5px;font-weight:600;color:var(--n-dark)">Rooftop Site · Block 4</div>
  730.                         </div>
  731.                         <div style="background:#fff;border-radius:9px;padding:9px 11px;border:0.5px solid var(--n-border-md)">
  732.                             <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:5px">
  733.                                 <div style="display:flex;align-items:center;gap:3px">
  734.                                     <span style="width:6px;height:6px;background:#e53935;border-radius:50%;display:inline-block"></span>
  735.                                     <span style="font-size:8px;font-weight:700;color:#e53935">Working</span>
  736.                                 </div>
  737.                                 <span style="font-size:7px;color:var(--n-muted)">Today Mon, Apr 27</span>
  738.                             </div>
  739.                             <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-top:0.5px solid var(--n-border);border-bottom:0.5px solid var(--n-border);margin-bottom:7px">
  740.                                 <div style="border-left:2.5px solid var(--n-amber);padding-left:6px">
  741.                                     <div style="font-size:6.5px;color:var(--n-muted)">Working on</div>
  742.                                     <div style="font-size:9.5px;font-weight:700;color:var(--n-dark)">Site Supervision</div>
  743.                                 </div>
  744.                                 <div style="background:#eef2ff;color:#3d5afe;border-radius:5px;padding:3px 8px;font-size:7.5px;font-weight:600">Change</div>
  745.                             </div>
  746.                             <div style="text-align:center;margin:4px 0 7px">
  747.                                 <div style="font-family:monospace;font-size:21px;font-weight:800;color:var(--n-dark);letter-spacing:.08em">06 : 42 : 18</div>
  748.                                 <div style="font-size:7.5px;color:var(--n-muted);margin-top:2px">Time Tracked Today</div>
  749.                             </div>
  750.                             <div style="background:#22a76d;border-radius:7px;padding:7px;text-align:center">
  751.                                 <span style="font-size:9px;color:#fff;font-weight:700">⏱ Clock Out</span>
  752.                             </div>
  753.                         </div>
  754.                         <div style="display:flex;gap:6px;margin-top:7px">
  755.                             <div style="flex:1;background:#fff;border-radius:7px;padding:6px 9px;border:0.5px solid var(--n-border-md);display:flex;align-items:center;gap:4px">
  756.                                 <span style="font-size:9px">📎</span>
  757.                                 <span style="font-size:8px;color:var(--n-dark);font-weight:600">Attachments</span>
  758.                                 <span style="margin-left:auto;background:var(--n-amber);color:#fff;border-radius:9px;padding:1px 5px;font-size:7px;font-weight:700">3</span>
  759.                             </div>
  760.                             <div style="flex:1;background:#fff;border-radius:7px;padding:6px 9px;border:0.5px solid var(--n-border-md);display:flex;align-items:center;gap:4px">
  761.                                 <span style="font-size:9px">📝</span>
  762.                                 <span style="font-size:8px;color:var(--n-dark);font-weight:600">Notes</span>
  763.                                 <span style="margin-left:auto;background:var(--n-muted-2);color:#fff;border-radius:9px;padding:1px 5px;font-size:7px;font-weight:700">1</span>
  764.                             </div>
  765.                         </div>
  766.                     </div>
  767.                 </div>
  768.             </div>
  769.         </div>
  770.     </div>
  771. </section>
  773. {# ══ WHAT HONEYBEE SUPPORTS TODAY ════════════════════════════════════════════ #}
  774. <section style="background:var(--n-cream);padding:72px 0;border-top:1px solid var(--n-border)">
  775.     <div class="n-wrap">
  776.         <div class="n-center">
  777.             <div class="n-label">Capabilities</div>
  778.             <h2 class="n-h2">What HoneyBee <em>supports today</em></h2>
  779.             <p class="n-body" style="max-width:560px;margin:16px auto 0">HoneyBee already provides the core operating layer for EPC, system integration, and industrial operations.</p>
  780.         </div>
  781.         <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:40px;max-width:960px;margin-left:auto;margin-right:auto;">
  782.             <div style="background:var(--n-white);border:1px solid var(--n-border-md);border-radius:10px;padding:16px 20px;display:flex;align-items:flex-start;gap:10px;"><span style="color:var(--n-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:14px;color:var(--n-dark)">Sales and CRM workflows</span></div>
  783.             <div style="background:var(--n-white);border:1px solid var(--n-border-md);border-radius:10px;padding:16px 20px;display:flex;align-items:flex-start;gap:10px;"><span style="color:var(--n-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:14px;color:var(--n-dark)">Proposal and quotation management</span></div>
  784.             <div style="background:var(--n-white);border:1px solid var(--n-border-md);border-radius:10px;padding:16px 20px;display:flex;align-items:flex-start;gap:10px;"><span style="color:var(--n-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:14px;color:var(--n-dark)">Project and task management</span></div>
  785.             <div style="background:var(--n-white);border:1px solid var(--n-border-md);border-radius:10px;padding:16px 20px;display:flex;align-items:flex-start;gap:10px;"><span style="color:var(--n-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:14px;color:var(--n-dark)">Finance and accounting workflows</span></div>
  786.             <div style="background:var(--n-white);border:1px solid var(--n-border-md);border-radius:10px;padding:16px 20px;display:flex;align-items:flex-start;gap:10px;"><span style="color:var(--n-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:14px;color:var(--n-dark)">Procurement and approval workflows</span></div>
  787.             <div style="background:var(--n-white);border:1px solid var(--n-border-md);border-radius:10px;padding:16px 20px;display:flex;align-items:flex-start;gap:10px;"><span style="color:var(--n-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:14px;color:var(--n-dark)">Mobile field operations</span></div>
  788.             <div style="background:var(--n-white);border:1px solid var(--n-border-md);border-radius:10px;padding:16px 20px;display:flex;align-items:flex-start;gap:10px;"><span style="color:var(--n-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:14px;color:var(--n-dark)">Native AI reporting and assistance</span></div>
  789.             <div style="background:var(--n-white);border:1px solid var(--n-border-md);border-radius:10px;padding:16px 20px;display:flex;align-items:flex-start;gap:10px;"><span style="color:var(--n-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:14px;color:var(--n-dark)">Multi-company command center</span></div>
  790.             <div style="background:var(--n-white);border:1px solid var(--n-border-md);border-radius:10px;padding:16px 20px;display:flex;align-items:flex-start;gap:10px;"><span style="color:var(--n-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:14px;color:var(--n-dark)">Role-based access and audit logs</span></div>
  791.             <div style="background:var(--n-white);border:1px solid var(--n-border-md);border-radius:10px;padding:16px 20px;display:flex;align-items:flex-start;gap:10px;"><span style="color:var(--n-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:14px;color:var(--n-dark)">IoT and Edge+ integration by project scope</span></div>
  792.             <div style="background:var(--n-white);border:1px solid var(--n-border-md);border-radius:10px;padding:16px 20px;display:flex;align-items:flex-start;gap:10px;"><span style="color:var(--n-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:14px;color:var(--n-dark)">DATEV-ready accounting export</span></div>
  793.         </div>
  794.         <p class="n-body n-center" style="margin-top:32px;max-width:560px;margin-left:auto;margin-right:auto;">Start with software. Extend into site-level intelligence, billing, and operational data when required.</p>
  795.     </div>
  796. </section>
  798. {# ══ INTEGRATIONS ══════════════════════════════════════════════════════════════ #}
  799. <section style="background:var(--n-cream-2);padding:88px 0;border-top:1px solid var(--n-border)">
  800.     <div class="n-wrap">
  801.         <div class="n-center">
  802.             <div class="n-label">Integrations</div>
  803.             <h2 class="n-h2">Connects to what you <em>already use.</em></h2>
  804.             <p class="n-body" style="max-width:540px;margin:16px auto 0">HoneyBee integrates with the systems you already rely on — including banks, payroll providers, tax authorities, and advisor tools.</p>
  805.         </div>
  806.         <div class="n-integ-grid">
  807.             <div class="n-integ-item">DATEV</div>
  808.             <div class="n-integ-item">Stripe</div>
  809.             <div class="n-integ-item">bKash</div>
  810.             <div class="n-integ-item">SSL Commerz</div>
  811.             <div class="n-integ-item">Gmail</div>
  812.             <div class="n-integ-item">Outlook</div>
  813.             <div class="n-integ-item">Google Calendar</div>
  814.             <div class="n-integ-item">Microsoft 365</div>
  815.             <div class="n-integ-item">Slack</div>
  816.             <div class="n-integ-item">Zapier</div>
  817.             <div class="n-integ-item">QuickBooks</div>
  818.             <div class="n-integ-item">Tally</div>
  819.         </div>
  820.     </div>
  821. </section>
  823. {# ══ FINAL CTA ═════════════════════════════════════════════════════════════════ #}
  824. <section class="n-prod-cta">
  825.     <div class="n-wrap" style="position:relative;z-index:2">
  826.         <h2><span class="trn" data-trn-key="_PRD_CTA_H2_">Not sure how HoneyBee fits</span> <em class="trn" data-trn-key="_PRD_CTA_H2_EM_">your project?</em></h2>
  827.         <p>Tell us about your company, sites, and workflows. We will recommend the right setup — software, Edge+, IoT, AI, and deployment approach.</p>
  828.         <div class="n-prod-cta-btns">
  829.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-light">
  830.                 <i class="fa-solid fa-arrow-right"></i> <span class="trn" data-trn-key="_PRD_CTA_BTN1_">Request Project Solution</span>
  831.             </a>
  832.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-ghost-light">
  833.                 <i class="fa-solid fa-calendar-check"></i> <span class="trn" data-trn-key="_PRD_CTA_BTN2_">Book Technical Call</span>
  834.             </a>
  835.         </div>
  836.     </div>
  837. </section>
  839. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  841. <script>
  842.     (function () {
  843.         // Scroll reveal for mocks and text blocks
  844.         var els = document.querySelectorAll('.n-mock,.n-sys-deep > .n-wrap > .n-sys-row > div:first-child');
  845.         els.forEach(function (el) {
  846.             el.style.opacity = '0';
  847.             el.style.transform = 'translateY(20px)';
  848.             el.style.transition = 'opacity .5s ease, transform .5s ease';
  849.         });
  850.         var io = new IntersectionObserver(function (entries) {
  851.             entries.forEach(function (en) {
  852.                 if (en.isIntersecting) { en.target.style.opacity = '1'; en.target.style.transform = 'translateY(0)'; io.unobserve(en.target); }
  853.             });
  854.         }, { threshold: 0.08 });
  855.         els.forEach(function (el) { io.observe(el); });
  857.         // Integrations stagger
  858.         document.querySelectorAll('.n-integ-item').forEach(function (el, i) {
  859.             el.style.opacity = '0';
  860.             el.style.transition = 'opacity .3s ease ' + (i * 0.03) + 's';
  861.         });
  862.         var ioInteg = new IntersectionObserver(function (entries) {
  863.             entries.forEach(function (en) {
  864.                 if (en.isIntersecting) {
  865.                     document.querySelectorAll('.n-integ-item').forEach(function (el) { el.style.opacity = '1'; });
  866.                     ioInteg.disconnect();
  867.                 }
  868.             });
  869.         }, { threshold: 0.2 });
  870.         var strip = document.querySelector('.n-integ-grid');
  871.         if (strip) ioInteg.observe(strip);
  872.     })();
  873. </script>