{"id":6459,"date":"2026-09-16T06:46:21","date_gmt":"2026-09-16T06:46:21","guid":{"rendered":"https:\/\/brightcodess.com\/bengaluru\/?page_id=6459"},"modified":"2026-09-16T07:44:27","modified_gmt":"2026-09-16T07:44:27","slug":"grocery-delivery-app","status":"publish","type":"page","link":"https:\/\/brightcodess.com\/bengaluru\/grocery-delivery-app\/","title":{"rendered":"Grocery Delivery App"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6459\" class=\"elementor elementor-6459\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1943003 e-con-full e-flex e-con e-parent\" data-id=\"1943003\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-e60303d e-con-full e-flex e-con e-child\" data-id=\"e60303d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5d678ea elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"5d678ea\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<style>\r\n  :root {\r\n    --brand-green: #0b8e45;\r\n    --text-primary: #121c27;\r\n    --text-secondary: #5e6875;\r\n    --bg-main: #f9fcf9;\r\n  }\r\n  \r\n  .hero-section-wrapper {\r\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n    background-color: var(--bg-main);\r\n    background-image: \r\n      radial-gradient(circle at 90% 10%, #edf7f0 0%, transparent 30%), \r\n      radial-gradient(circle at 10% 90%, #edf7f0 0%, transparent 30%);\r\n    padding: 80px 20px;\r\n    box-sizing: border-box;\r\n    overflow: hidden;\r\n    position: relative;\r\n    min-height: 10vh;\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .hero-container {\r\n    max-width: 1400px; \r\n    margin: 0 auto;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    align-items: center;\r\n    justify-content: space-between; \r\n    gap: 40px;\r\n    width: 100%;\r\n  }\r\n  \r\n  .hero-content {\r\n    flex: 1 1 500px;\r\n    max-width: 600px; \r\n  }\r\n  \r\n  .hero-visual {\r\n    flex: 1 1 600px; \r\n    position: relative;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n  }\r\n  \r\n  .badge {\r\n    display: inline-block;\r\n    background-color: #ffffff;\r\n    color: var(--brand-green);\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.5px;\r\n    padding: 6px 14px;\r\n    border-radius: 20px;\r\n    border: 1px solid #e1ead6;\r\n    margin-bottom: 24px;\r\n    text-transform: uppercase;\r\n  }\r\n  \r\n  .main-heading {\r\n    font-size: 54px;\r\n    line-height: 1.15;\r\n    color: var(--text-primary);\r\n    margin: 0 0 20px 0;\r\n    font-weight: 800;\r\n    letter-spacing: -1px;\r\n  }\r\n  \r\n  .main-heading span {\r\n    color: var(--brand-green);\r\n  }\r\n  \r\n  .description-text {\r\n    font-size: 17px;\r\n    line-height: 1.6;\r\n    color: var(--text-secondary);\r\n    margin: 0 0 40px 0;\r\n    max-width: 580px;\r\n  }\r\n  \r\n  .cta-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 30px;\r\n    margin-bottom: 55px;\r\n    flex-wrap: wrap;\r\n  }\r\n  \r\n  .btn-primary {\r\n    background-color: var(--brand-green);\r\n    color: #ffffff;\r\n    text-decoration: none;\r\n    padding: 16px 28px;\r\n    border-radius: 30px;\r\n    font-weight: 600;\r\n    font-size: 15px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 4px 14px rgba(11, 142, 69, 0.2);\r\n  }\r\n  \r\n  .btn-primary:hover {\r\n    background-color: #097538;\r\n    transform: translateY(-2px);\r\n  }\r\n  \r\n  .btn-play {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 14px;\r\n    text-decoration: none;\r\n    color: var(--text-primary);\r\n    cursor: pointer;\r\n    transition: opacity 0.3s;\r\n  }\r\n  \r\n  .btn-play:hover {\r\n    opacity: 0.8;\r\n  }\r\n  \r\n  .play-icon-circle {\r\n    width: 44px;\r\n    height: 44px;\r\n    background-color: #ffffff;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.06);\r\n    border: 1px solid #f0f0f0;\r\n  }\r\n  \r\n  .play-icon-circle svg {\r\n    width: 14px;\r\n    height: 14px;\r\n    fill: var(--text-primary);\r\n    margin-left: 2px;\r\n  }\r\n  \r\n  .play-text-group strong {\r\n    display: block;\r\n    font-size: 15px;\r\n    font-weight: 700;\r\n  }\r\n  \r\n  .play-text-group span {\r\n    display: block;\r\n    font-size: 13px;\r\n    color: var(--text-secondary);\r\n    margin-top: 3px;\r\n  }\r\n  \r\n  .features-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 15px;\r\n  }\r\n  \r\n  .feature-card {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 10px;\r\n  }\r\n  \r\n  .feature-icon {\r\n    width: 40px;\r\n    height: 40px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n  }\r\n  \r\n  .feature-icon svg {\r\n    width: 28px;\r\n    height: 28px;\r\n    stroke: var(--brand-green);\r\n    stroke-width: 1.5;\r\n    fill: none;\r\n  }\r\n  \r\n  .feature-card h4 {\r\n    margin: 0;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    color: var(--text-primary);\r\n  }\r\n  \r\n  .feature-card p {\r\n    margin: 0;\r\n    font-size: 11px;\r\n    color: var(--text-secondary);\r\n    line-height: 1.4;\r\n  }\r\n  \r\n  .hero-image-wrapper {\r\n    width: 100%;\r\n    max-width: 800px; \r\n  }\r\n  \r\n  .hero-image-wrapper img {\r\n    width: 100%;\r\n    height: auto;\r\n    display: block;\r\n    object-fit: contain;\r\n  }\r\n  \r\n  \/* Responsive Breakpoints *\/\r\n  @media (max-width: 1200px) {\r\n    .main-heading {\r\n      font-size: 46px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 1024px) {\r\n    .features-grid {\r\n      grid-template-columns: repeat(2, 1fr);\r\n      gap: 25px 15px;\r\n    }\r\n    .hero-visual {\r\n        flex: 1 1 500px;\r\n    }\r\n  }\r\n  \r\n  @media (max-width: 850px) {\r\n    .hero-section-wrapper {\r\n      padding: 50px 15px;\r\n      height: auto;\r\n      min-height: auto; \/* Fixes 100vh height issue on mobile *\/\r\n    }\r\n    .hero-container {\r\n      flex-direction: column;\r\n    }\r\n    .hero-content, .hero-visual {\r\n      width: 100%;\r\n      max-width: 100%;\r\n      flex: 1 1 auto; \/* Fixes the massive top\/bottom gaps on mobile *\/\r\n    }\r\n    .main-heading {\r\n      font-size: 38px;\r\n    }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"hero-section-wrapper\">\r\n  <div class=\"hero-container\">\r\n    \r\n    <!-- Left Content Column -->\r\n    <div class=\"hero-content\">\r\n      <span class=\"badge\">GROCERY APP DEVELOPMENT COMPANY IN BANGALORE<\/span>\r\n      \r\n      <h1 class=\"main-heading\">\r\n        Grocery App <br>\r\n        Development <br>\r\n        <span>in Bangalore<\/span>\r\n      <\/h1>\r\n      \r\n      <p class=\"description-text\">\r\n        Build a powerful and user-friendly grocery delivery app with Brightcode. We develop custom grocery apps for startups, supermarkets and retail businesses to help you go digital, reach more customers and grow faster.\r\n      <\/p>\r\n      \r\n      <div class=\"cta-group\">\r\n        <a href=\"#\" class=\"btn-primary\">\r\n          Get a Free Quote &rarr;\r\n        <\/a>\r\n        \r\n        <a href=\"#\" class=\"btn-play\">\r\n          <div class=\"play-icon-circle\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\r\n          <\/div>\r\n          <div class=\"play-text-group\">\r\n            <strong>Watch Our Process<\/strong>\r\n            <span>See how we build digital solutions<\/span>\r\n          <\/div>\r\n        <\/a>\r\n      <\/div>\r\n      \r\n      <div class=\"features-grid\">\r\n        <!-- Feature 1 -->\r\n        <div class=\"feature-card\">\r\n          <div class=\"feature-icon\">\r\n            <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2l.5-.5a2.5 2.5 0 0 0-3-3l-.5.5z\"><\/path>\r\n              <path d=\"M12 15l-3-3a9 9 0 0 1 12-12c0 0-12 12-12 12z\"><\/path>\r\n            <\/svg>\r\n          <\/div>\r\n          <div>\r\n             <h4>Custom Solutions<\/h4>\r\n             <p>Tailored to your business<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <!-- Feature 2 -->\r\n        <div class=\"feature-card\">\r\n          <div class=\"feature-icon\">\r\n             <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n               <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path>\r\n               <circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle>\r\n               <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"><\/path>\r\n               <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path>\r\n             <\/svg>\r\n          <\/div>\r\n          <div>\r\n            <h4>Experienced Team<\/h4>\r\n            <p>Skilled & dedicated developers<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <!-- Feature 3 -->\r\n        <div class=\"feature-card\">\r\n          <div class=\"feature-icon\">\r\n             <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n               <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"><\/path>\r\n               <path d=\"M9 12l2 2 4-4\"><\/path>\r\n             <\/svg>\r\n          <\/div>\r\n          <div>\r\n            <h4>Scalable & Secure<\/h4>\r\n            <p>Built for future growth<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <!-- Feature 4 -->\r\n        <div class=\"feature-card\">\r\n          <div class=\"feature-icon\">\r\n             <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n               <path d=\"M3 18v-6a9 9 0 0 1 18 0v6\"><\/path>\r\n               <path d=\"M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z\"><\/path>\r\n             <\/svg>\r\n          <\/div>\r\n          <div>\r\n            <h4>Ongoing Support<\/h4>\r\n            <p>We are with you always<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n    <\/div>\r\n    \r\n    <!-- Right Image Column -->\r\n    <div class=\"hero-visual\">\r\n      <div class=\"hero-image-wrapper\">\r\n        <img decoding=\"async\" src=\"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/grocery-app-delivery.webp\" alt=\"Grocery App Mockups and Delivery Vector\" \/>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n  <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2369d43 e-flex e-con-boxed e-con e-parent\" data-id=\"2369d43\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e29b74c elementor-widget elementor-widget-html\" data-id=\"e29b74c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<!-- Load Fonts: Inter for standard text, Caveat for the handwritten note -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@600&family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  :root {\r\n    --bg-color: #ecffed;\r\n    --text-dark: #121c27;\r\n    --text-light: #5e6875;\r\n    --green-icon: #0ea740;\r\n    --orange-icon: #f57c00;\r\n    --purple-icon: #7b1fa2;\r\n    --blue-icon: #1976d2;\r\n    --card-bg: #ffffff;\r\n  }\r\n\r\n  .grocery-solutions-section {\r\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n    background-color: var(--bg-color);\r\n    padding: 70px 20px;\r\n    box-sizing: border-box;\r\n    color: var(--text-dark);\r\n  }\r\n\r\n  .gs-container {\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n    display: grid;\r\n    grid-template-columns: 1.8fr 1fr;\r\n    gap: 50px;\r\n    align-items: start;\r\n  }\r\n\r\n  \/* Left Column Styles *\/\r\n  .gs-header h2 {\r\n    font-size: 32px;\r\n    font-weight: 700;\r\n    margin: 0 0 10px 0;\r\n    letter-spacing: -0.5px;\r\n  }\r\n\r\n  .gs-header p {\r\n    font-size: 16px;\r\n    color: var(--text-light);\r\n    margin: 0 0 35px 0;\r\n  }\r\n\r\n  .gs-cards-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 15px;\r\n  }\r\n\r\n  .gs-card {\r\n    background-color: var(--card-bg);\r\n    border-radius: 12px;\r\n    padding: 25px 15px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);\r\n    transition: transform 0.3s ease;\r\n  }\r\n\r\n  .gs-card:hover {\r\n    transform: translateY(-3px);\r\n  }\r\n\r\n  .gs-icon-wrapper {\r\n    width: 54px;\r\n    height: 54px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin: 0 auto 15px auto;\r\n  }\r\n\r\n  .gs-icon-wrapper svg {\r\n    width: 26px;\r\n    height: 26px;\r\n    fill: #ffffff;\r\n  }\r\n\r\n  .bg-green { background-color: var(--green-icon); }\r\n  .bg-orange { background-color: var(--orange-icon); }\r\n  .bg-purple { background-color: var(--purple-icon); }\r\n  .bg-blue { background-color: var(--blue-icon); }\r\n\r\n  .gs-card h4 {\r\n    font-size: 15px;\r\n    font-weight: 700;\r\n    margin: 0 0 10px 0;\r\n  }\r\n\r\n  .gs-card p {\r\n    font-size: 12.5px;\r\n    line-height: 1.5;\r\n    color: var(--text-light);\r\n    margin: 0;\r\n  }\r\n\r\n  \/* Right Column Styles *\/\r\n  .gs-right-col h3 {\r\n    font-size: 24px;\r\n    font-weight: 700;\r\n    margin: 0 0 25px 0;\r\n  }\r\n\r\n  .gs-list {\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n\r\n  .gs-list li {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    font-size: 14.5px;\r\n    margin-bottom: 16px;\r\n    color: var(--text-dark);\r\n    font-weight: 500;\r\n  }\r\n\r\n  .gs-list-icon {\r\n    flex-shrink: 0;\r\n    width: 22px;\r\n    height: 22px;\r\n  }\r\n\r\n  \/* Decorative Element *\/\r\n  .gs-decorative-wrap {\r\n    position: relative;\r\n    margin-top: 20px;\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    padding-right: 40px;\r\n  }\r\n\r\n  .gs-handwritten {\r\n    font-family: 'Caveat', cursive;\r\n    font-size: 28px;\r\n    line-height: 1.1;\r\n    color: var(--green-icon);\r\n    transform: rotate(-8deg);\r\n    text-align: center;\r\n    position: relative;\r\n  }\r\n\r\n  .gs-arrow {\r\n    position: absolute;\r\n    bottom: -20px;\r\n    left: 40%;\r\n    width: 40px;\r\n    height: 40px;\r\n    stroke: var(--green-icon);\r\n    fill: none;\r\n    stroke-width: 2;\r\n    stroke-linecap: round;\r\n  }\r\n\r\n  \/* Reference for asset system requirement *\/\r\n  \/* <img decoding=\"async\" src=\"image_ac40a7.jpg\" style=\"display:none;\" alt=\"Reference Image\"> *\/\r\n\r\n  \/* Responsive Adjustments *\/\r\n  @media (max-width: 1100px) {\r\n    .gs-container {\r\n      grid-template-columns: 1fr;\r\n      gap: 50px;\r\n    }\r\n    .gs-decorative-wrap {\r\n      justify-content: flex-start;\r\n      padding-left: 40px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .gs-cards-grid {\r\n      grid-template-columns: repeat(2, 1fr);\r\n      gap: 20px;\r\n    }\r\n    .gs-header h2 {\r\n      font-size: 28px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .gs-cards-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n    .grocery-solutions-section {\r\n      padding: 50px 15px;\r\n    }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"grocery-solutions-section\" data-reference=\"image_ac40a7.jpg\">\r\n  <div class=\"gs-container\">\r\n    \r\n    <!-- Left Column: Solutions Grid -->\r\n    <div class=\"gs-left-col\">\r\n      <div class=\"gs-header\">\r\n        <h2>Complete Grocery App Solutions<\/h2>\r\n        <p>We develop end-to-end grocery delivery solutions to match your business model.<\/p>\r\n      <\/div>\r\n      \r\n      <div class=\"gs-cards-grid\">\r\n        <!-- Card 1 -->\r\n        <div class=\"gs-card\">\r\n          <div class=\"gs-icon-wrapper bg-green\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"\/><\/svg>\r\n          <\/div>\r\n          <h4>Customer App<\/h4>\r\n          <p>Easy shopping experience with secure payment and real-time tracking.<\/p>\r\n        <\/div>\r\n\r\n        <!-- Card 2 -->\r\n        <div class=\"gs-card\">\r\n          <div class=\"gs-icon-wrapper bg-orange\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 5.5h-5.5V4c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v12h1.5c.28 1.14 1.28 2 2.5 2s2.22-.86 2.5-2h6.24c.25 1.13 1.25 2 2.38 2 1.14 0 2.14-.87 2.38-2H21v-7.39l-2-3.11zM6 18c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm11.12-1.5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zM14.5 14H4v-9h8.5v9zm6 0h-1.88c-.24-1.13-1.24-2-2.38-2s-2.14.87-2.38 2H13v-5.5h3.61l1.89 3h2v2.5z\"\/><\/svg>\r\n          <\/div>\r\n          <h4>Delivery Partner App<\/h4>\r\n          <p>Smart delivery management for faster and smoother deliveries.<\/p>\r\n        <\/div>\r\n\r\n        <!-- Card 3 -->\r\n        <div class=\"gs-card\">\r\n          <div class=\"gs-icon-wrapper bg-purple\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.05-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.56-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22l-1.92 3.32c-.12.22-.07.49.12.61l2.03 1.58c-.04.3-.06.61-.06.94s.02.64.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .43-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.49-.12-.61l-2.03-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z\"\/><\/svg>\r\n          <\/div>\r\n          <h4>Admin Panel<\/h4>\r\n          <p>Complete control over products, orders, users and more.<\/p>\r\n        <\/div>\r\n\r\n        <!-- Card 4 -->\r\n        <div class=\"gs-card\">\r\n          <div class=\"gs-icon-wrapper bg-blue\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z\"\/><\/svg>\r\n          <\/div>\r\n          <h4>Vendor Panel<\/h4>\r\n          <p>For multi-vendor grocery marketplaces with seamless store management.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Right Column: List -->\r\n    <div class=\"gs-right-col\">\r\n      <h3>Take Your Grocery Business Online<\/h3>\r\n      <ul class=\"gs-list\">\r\n        <li>\r\n          <svg class=\"gs-list-icon\" viewBox=\"0 0 24 24\"><path fill=\"#0ea740\" d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n          Custom Grocery App Development\r\n        <\/li>\r\n        <li>\r\n          <svg class=\"gs-list-icon\" viewBox=\"0 0 24 24\"><path fill=\"#0ea740\" d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n          Single Store & Multi-Vendor Solutions\r\n        <\/li>\r\n        <li>\r\n          <svg class=\"gs-list-icon\" viewBox=\"0 0 24 24\"><path fill=\"#0ea740\" d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n          Real-Time Order Tracking\r\n        <\/li>\r\n        <li>\r\n          <svg class=\"gs-list-icon\" viewBox=\"0 0 24 24\"><path fill=\"#0ea740\" d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n          Secure Payment Integration\r\n        <\/li>\r\n        <li>\r\n          <svg class=\"gs-list-icon\" viewBox=\"0 0 24 24\"><path fill=\"#0ea740\" d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n          Inventory & Order Management\r\n        <\/li>\r\n        <li>\r\n          <svg class=\"gs-list-icon\" viewBox=\"0 0 24 24\"><path fill=\"#0ea740\" d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n          Scalable & Future-Ready Platform\r\n        <\/li>\r\n      <\/ul>\r\n      \r\n      <!-- Custom handwritten graphic element built with CSS\/SVG -->\r\n      <div class=\"gs-decorative-wrap\">\r\n        <div class=\"gs-handwritten\">\r\n          Grow<br>Your Business<br>Digitally\r\n          <svg class=\"gs-arrow\" viewBox=\"0 0 60 40\">\r\n            <path d=\"M50 5 Q 30 10, 10 30\" \/>\r\n            <path d=\"M10 30 L 20 28 M10 30 L 15 20\" \/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-563d25d e-flex e-con-boxed e-con e-parent\" data-id=\"563d25d\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-059457a elementor-widget elementor-widget-html\" data-id=\"059457a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<!-- Load Inter Font -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  \/* Scoped Variables specific to this section *\/\r\n  .how-it-works-section {\r\n    --hiw-text-main: #0f172a;\r\n    --hiw-text-muted: #64748b;\r\n    --hiw-line-color: #cbd5e1;\r\n    --hiw-bg-color: transparent; \/* Or #ffffff if your page background isn't already white *\/\r\n    \r\n    --hiw-color-green: #16a34a;\r\n    --hiw-color-orange: #f97316;\r\n    --hiw-color-blue: #2563eb;\r\n    --hiw-color-purple: #7c3aed;\r\n\r\n    font-family: 'Inter', sans-serif;\r\n    background-color: var(--hiw-bg-color);\r\n    padding: 80px 20px;\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .hiw-header {\r\n    margin-bottom: 60px;\r\n  }\r\n\r\n  .hiw-header h2 {\r\n    font-size: 28px;\r\n    font-weight: 700;\r\n    color: var(--hiw-text-main);\r\n    margin: 0 0 10px 0;\r\n  }\r\n\r\n  .hiw-header p {\r\n    font-size: 16px;\r\n    color: var(--hiw-text-muted);\r\n    margin: 0;\r\n  }\r\n\r\n  .hiw-steps-wrapper {\r\n    position: relative;\r\n  }\r\n\r\n  \/* The dotted connecting line (Desktop) *\/\r\n  .hiw-line {\r\n    position: absolute;\r\n    top: 45px; \/* Center of the 90px circles *\/\r\n    left: 10%;\r\n    right: 10%;\r\n    height: 2px;\r\n    border-top: 2px dashed var(--hiw-line-color);\r\n    z-index: 1;\r\n  }\r\n\r\n  .hiw-steps-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(5, 1fr);\r\n    gap: 20px;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n\r\n  .hiw-step {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    text-align: center;\r\n  }\r\n\r\n  .hiw-icon-ring {\r\n    width: 90px;\r\n    height: 90px;\r\n    border-radius: 50%;\r\n    background-color: #ffffff; \/* Explicitly white so the line doesn't show through *\/\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-bottom: 20px;\r\n    border: 2px solid;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .hiw-icon-ring svg {\r\n    width: 40px;\r\n    height: 40px;\r\n  }\r\n\r\n  \/* Specific Icon Colors *\/\r\n  .ring-green { border-color: var(--hiw-color-green); color: var(--hiw-color-green); }\r\n  .ring-green svg { fill: var(--hiw-color-green); }\r\n  \r\n  .ring-orange { border-color: var(--hiw-color-orange); color: var(--hiw-color-orange); }\r\n  .ring-orange svg { fill: var(--hiw-color-orange); }\r\n  \r\n  .ring-blue { border-color: var(--hiw-color-blue); color: var(--hiw-color-blue); }\r\n  .ring-blue svg { fill: var(--hiw-color-blue); }\r\n  \r\n  .ring-purple { border-color: var(--hiw-color-purple); color: var(--hiw-color-purple); }\r\n  .ring-purple svg { fill: var(--hiw-color-purple); }\r\n\r\n  \/* Exception for the solid green checkmark *\/\r\n  .ring-green-solid { border-color: var(--hiw-color-green); }\r\n  .ring-green-solid svg { fill: var(--hiw-color-green); }\r\n\r\n  .hiw-step h4 {\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    color: var(--hiw-text-main);\r\n    margin: 0 0 10px 0;\r\n  }\r\n\r\n  .hiw-step p {\r\n    font-size: 14px;\r\n    color: var(--hiw-text-muted);\r\n    line-height: 1.5;\r\n    margin: 0;\r\n    max-width: 200px;\r\n  }\r\n\r\n  \/* Responsive Design for Tablet & Mobile *\/\r\n  @media (max-width: 900px) {\r\n    .hiw-line {\r\n      \/* Switch to vertical line on mobile *\/\r\n      top: 0;\r\n      bottom: 0;\r\n      left: 50%;\r\n      right: auto;\r\n      width: 2px;\r\n      height: 100%;\r\n      border-top: none;\r\n      border-left: 2px dashed var(--hiw-line-color);\r\n      transform: translateX(-50%);\r\n    }\r\n\r\n    .hiw-steps-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 40px;\r\n    }\r\n\r\n    .hiw-step p {\r\n      max-width: 280px;\r\n    }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"how-it-works-section\" data-reference=\"image_aca1c8.png\">\r\n  <div class=\"hiw-header\">\r\n    <h2>How It Works<\/h2>\r\n    <p>A simple and seamless process from order to delivery.<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"hiw-steps-wrapper\">\r\n    <!-- Connecting Dotted Line -->\r\n    <div class=\"hiw-line\"><\/div>\r\n\r\n    <div class=\"hiw-steps-grid\">\r\n      <!-- Step 1 -->\r\n      <div class=\"hiw-step\">\r\n        <div class=\"hiw-icon-ring ring-green\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h4>1. Place an Order<\/h4>\r\n        <p>Customers browse products and place an order.<\/p>\r\n      <\/div>\r\n\r\n      <!-- Step 2 -->\r\n      <div class=\"hiw-step\">\r\n        <div class=\"hiw-icon-ring ring-orange\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h4>2. Prepare Order<\/h4>\r\n        <p>Store receives and prepares the order.<\/p>\r\n      <\/div>\r\n\r\n      <!-- Step 3 -->\r\n      <div class=\"hiw-step\">\r\n        <div class=\"hiw-icon-ring ring-blue\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M15.5 12c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5 3.5-1.57 3.5-3.5-1.57-3.5-3.5-3.5zm0 5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm-8.5-5c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5 3.5-1.57 3.5-3.5-1.57-3.5-3.5-3.5zm0 5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm8.93-9.15l-1.63-2.3c-.27-.38-.72-.61-1.19-.61H4c-.55 0-1 .45-1 1s.45 1 1 1h4V11c0 .55.45 1 1 1h5.81l1.52 2.14c.26.37.69.59 1.15.59h3.02c.28 0 .5-.22.5-.5V12h-2c-1.07 0-1.97.74-2.22 1.74l-.27-.38c-.37-.53-.94-.85-1.58-.85H10v-2h2c.55 0 1-.45 1-1V7.07l1.7 2.38c.27.38.72.61 1.19.61h3.61c.28 0 .5-.22.5-.5V8.5h-2.52l-1.55-2.15z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h4>3. Assign Delivery<\/h4>\r\n        <p>A delivery partner is assigned.<\/p>\r\n      <\/div>\r\n\r\n      <!-- Step 4 -->\r\n      <div class=\"hiw-step\">\r\n        <div class=\"hiw-icon-ring ring-purple\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h4>4. Track in Real-Time<\/h4>\r\n        <p>Customers get live updates.<\/p>\r\n      <\/div>\r\n\r\n      <!-- Step 5 -->\r\n      <div class=\"hiw-step\">\r\n        <div class=\"hiw-icon-ring ring-green-solid\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h4>5. Order Delivered<\/h4>\r\n        <p>Fast and safe delivery to the doorstep.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-03cffdb e-flex e-con-boxed e-con e-parent\" data-id=\"03cffdb\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f993af5 elementor-widget elementor-widget-html\" data-id=\"f993af5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"groc-tech-section\">\r\n  <div class=\"groc-container\">\r\n    \r\n    <!-- LEFT COLUMN: Heading & Highlights -->\r\n    <div class=\"groc-left\">\r\n      <div class=\"groc-tag\">\r\n        GROCERY APP DEVELOPMENT <span class=\"tag-line\"><\/span><span class=\"tag-dot\"><\/span>\r\n      <\/div>\r\n      \r\n      <h2 class=\"groc-title\">\r\n        Build the Best<br>Grocery App<br><span>in Bangalore<\/span>\r\n      <\/h2>\r\n      \r\n      <p class=\"groc-description\">\r\n        We leverage scalable and robust technologies to build ultra-fast grocery delivery applications that enable seamless ordering, real-time tracking, and efficient store management.\r\n      <\/p>\r\n\r\n      <!-- 4 Value Props -->\r\n      <div class=\"groc-props-grid\">\r\n        <div class=\"groc-prop-item\">\r\n          <div class=\"groc-icon groc-icon-green\">\r\n            <!-- Rocket\/Fast Icon -->\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2l.5-.5a2.5 2.5 0 0 0-3-3l-.5.5z\"\/><path d=\"M12 15l-3-3a9 9 0 0 1 12-12c0 0-12 12-12 12z\"\/><\/svg>\r\n          <\/div>\r\n          <h4>Blink-Fast<\/h4>\r\n          <p>Quick commerce<br>ready<\/p>\r\n        <\/div>\r\n        <div class=\"groc-prop-item\">\r\n          <div class=\"groc-icon groc-icon-orange\">\r\n            <!-- Location Pin Icon -->\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\r\n          <\/div>\r\n          <h4>Live Tracking<\/h4>\r\n          <p>Real-time GPS<br>updates<\/p>\r\n        <\/div>\r\n        <div class=\"groc-prop-item\">\r\n          <div class=\"groc-icon groc-icon-blue\">\r\n            <!-- Inventory\/Box Icon -->\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"\/><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"\/><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"\/><\/svg>\r\n          <\/div>\r\n          <h4>Smart Stock<\/h4>\r\n          <p>Auto-sync<br>inventory<\/p>\r\n        <\/div>\r\n        <div class=\"groc-prop-item\">\r\n          <div class=\"groc-icon groc-icon-purple\">\r\n            <!-- Payment Lock Icon -->\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>\r\n          <\/div>\r\n          <h4>Secure Pay<\/h4>\r\n          <p>UPI & Wallet<br>integration<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Feature Pill -->\r\n      <div class=\"groc-architecture-pill\">\r\n        <div class=\"app-icon\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"pill-text-content\">\r\n          <strong>Custom Apps. Localized for Bangalore.<\/strong>\r\n          <p>From fresh produce to daily essentials, deliver with ease.<\/p>\r\n        <\/div>\r\n        <div class=\"pill-arrow\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- RIGHT COLUMN: Grid Cards + Center Cart Badge -->\r\n    <div class=\"groc-right\">\r\n      <div class=\"groc-cards-grid\">\r\n        \r\n        <!-- Customer App Card -->\r\n        <div class=\"groc-card\">\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon icon-green\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z\"\/><line x1=\"7\" y1=\"7\" x2=\"7.01\" y2=\"7\"\/><\/svg>\r\n            <\/div>\r\n            <div>\r\n              <h3>CUSTOMER APP<\/h3>\r\n              <p>Intuitive shopping, smart search, and easy checkout for higher retention.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"groc-tags\">\r\n            <div class=\"groc-tag-item\"><span class=\"tag-ico\">\ud83d\udcf1<\/span> Flutter \/ React Native<\/div>\r\n            <div class=\"groc-tag-item\"><span class=\"tag-ico\">\ud83d\udcb3<\/span> Razorpay \/ PayU<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Delivery Partner Card -->\r\n        <div class=\"groc-card\">\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon icon-orange\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\r\n            <\/div>\r\n            <div>\r\n              <h3>DELIVERY PARTNER<\/h3>\r\n              <p>Route optimization, live navigation, and earnings dashboard for drivers.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"groc-tags\">\r\n            <div class=\"groc-tag-item\"><span class=\"tag-ico\">\ud83d\uddfa\ufe0f<\/span> Google Maps API<\/div>\r\n            <div class=\"groc-tag-item\"><span class=\"tag-ico\">\u26a1<\/span> Firebase Realtime<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Vendor Panel Card -->\r\n        <div class=\"groc-card\">\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon icon-purple\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\r\n            <\/div>\r\n            <div>\r\n              <h3>VENDOR \/ STORE PANEL<\/h3>\r\n              <p>Manage multi-store catalogs, accept orders, and track daily settlements.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"groc-tags\">\r\n            <div class=\"groc-tag-item\"><span class=\"tag-ico\">\ud83c\udfea<\/span> Single \/ Multi-Vendor<\/div>\r\n            <div class=\"groc-tag-item\"><span class=\"tag-ico\">\ud83d\udce6<\/span> Inventory Sync<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Admin Card -->\r\n        <div class=\"groc-card\">\r\n          <div class=\"card-header\">\r\n            <div class=\"card-icon icon-blue\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"\/><line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"\/><\/svg>\r\n            <\/div>\r\n            <div>\r\n              <h3>SUPER ADMIN<\/h3>\r\n              <p>Complete control over users, promotions, zones, and advanced analytics.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"groc-tags\">\r\n            <div class=\"groc-tag-item\"><span class=\"tag-ico\">\u2699\ufe0f<\/span> Node.js \/ Laravel<\/div>\r\n            <div class=\"groc-tag-item\"><span class=\"tag-ico\">\u2601\ufe0f<\/span> AWS Hosting<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <!-- CENTER CART BADGE -->\r\n      <div class=\"groc-badge-wrapper\">\r\n        <div class=\"orbit-circle orbit-1\">\r\n          <div class=\"orbit-dot dot-a\"><\/div>\r\n        <\/div>\r\n        <div class=\"orbit-circle orbit-2\">\r\n          <div class=\"orbit-dot dot-b\"><\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"badge-content\">\r\n          <!-- Shopping Cart SVG -->\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#10b981\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle><circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle><path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- BOTTOM STATS BANNER -->\r\n  <div class=\"groc-stats-banner\">\r\n    <div class=\"banner-left\">\r\n      <div class=\"chart-icon\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M23 6l-9.5 9.5-5-5L1 18\"\/><polyline points=\"16 6 23 6 23 13\"\/><\/svg>\r\n      <\/div>\r\n      <div class=\"banner-text\">\r\n        <strong>Empowering Bangalore's top local supermarkets & startups.<\/strong>\r\n        <span>Scalable. Fast. Built for High Order Volumes.<\/span>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"banner-stats\">\r\n      <div class=\"stat-item\">\r\n        <h4>10M+<\/h4>\r\n        <p>ORDERS<br>PROCESSED<\/p>\r\n      <\/div>\r\n      <div class=\"stat-divider\"><\/div>\r\n      <div class=\"stat-item\">\r\n        <h4>99.9%<\/h4>\r\n        <p>UPTIME<br>ASSURANCE<\/p>\r\n      <\/div>\r\n      <div class=\"stat-divider\"><\/div>\r\n      <div class=\"stat-item\">\r\n        <h4>3X<\/h4>\r\n        <p>FASTER<br>GROWTH<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\r\n\r\n  .groc-tech-section {\r\n    font-family: 'Plus Jakarta Sans', sans-serif;\r\n    padding: 80px 20px;\r\n    background-color: #f4fbf7; \/* Fresh, very light green tint *\/\r\n    color: #1e293b;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .groc-container {\r\n    max-width: 1280px;\r\n    margin: 0 auto;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1.3fr;\r\n    gap: 60px;\r\n    align-items: center;\r\n  }\r\n\r\n  \/* LEFT COLUMN *\/\r\n  .groc-tag {\r\n    color: #10b981; \/* Emerald Green *\/\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    letter-spacing: 1.5px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .groc-tag .tag-line {\r\n    width: 30px;\r\n    height: 2px;\r\n    background: #10b981;\r\n    display: inline-block;\r\n  }\r\n\r\n  .groc-tag .tag-dot {\r\n    width: 4px;\r\n    height: 4px;\r\n    background-color: #10b981;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  .groc-title {\r\n    font-size: 46px;\r\n    font-weight: 800;\r\n    line-height: 1.15;\r\n    color: #0f172a;\r\n    margin: 0 0 20px 0;\r\n    letter-spacing: -1px;\r\n  }\r\n\r\n  .groc-title span { \r\n    color: #10b981;\r\n  }\r\n\r\n  .groc-description {\r\n    font-size: 16px;\r\n    color: #475569;\r\n    line-height: 1.6;\r\n    margin-bottom: 35px;\r\n    max-width: 90%;\r\n  }\r\n\r\n  .groc-props-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 12px;\r\n    margin-bottom: 30px;\r\n  }\r\n\r\n  .groc-prop-item {\r\n    background: #ffffff;\r\n    padding: 24px 12px;\r\n    border-radius: 12px;\r\n    text-align: center;\r\n    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.04);\r\n    border: 1px solid #e2e8f0;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  \r\n  .groc-prop-item:hover {\r\n    transform: translateY(-5px);\r\n  }\r\n\r\n  .groc-icon {\r\n    width: 48px;\r\n    height: 48px;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin: 0 auto 16px auto;\r\n  }\r\n\r\n  .groc-icon svg { width: 24px; height: 24px; }\r\n  .groc-icon-green { background: #d1fae5; color: #059669; }\r\n  .groc-icon-orange { background: #ffedd5; color: #ea580c; }\r\n  .groc-icon-blue { background: #e0f2fe; color: #0284c7; }\r\n  .groc-icon-purple { background: #f3e8ff; color: #9333ea; }\r\n\r\n  .groc-prop-item h4 { \r\n    font-size: 13px; \r\n    font-weight: 700; \r\n    margin: 0 0 6px 0; \r\n    color: #0f172a;\r\n  }\r\n\r\n  .groc-prop-item p { \r\n    font-size: 11px; \r\n    color: #64748b; \r\n    margin: 0; \r\n    line-height: 1.4; \r\n  }\r\n\r\n  .groc-architecture-pill {\r\n    background: #ffffff;\r\n    border: 1px solid #d1fae5;\r\n    border-radius: 12px;\r\n    padding: 16px 20px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n    position: relative;\r\n    cursor: pointer;\r\n    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.05);\r\n    transition: border-color 0.3s;\r\n  }\r\n  \r\n  .groc-architecture-pill:hover {\r\n      border-color: #10b981;\r\n  }\r\n\r\n  .groc-architecture-pill .app-icon {\r\n    background: #10b981;\r\n    color: #fff;\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 8px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n  }\r\n  \r\n  .groc-architecture-pill .app-icon svg {\r\n      width: 22px; height: 22px;\r\n  }\r\n\r\n  .groc-architecture-pill .pill-text-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 4px;\r\n  }\r\n\r\n  .groc-architecture-pill strong { \r\n    display: block; \r\n    font-size: 14px; \r\n    color: #047857; \r\n  }\r\n\r\n  .groc-architecture-pill p { \r\n    margin: 0; \r\n    font-size: 12px; \r\n    color: #64748b; \r\n  }\r\n\r\n  .groc-architecture-pill .pill-arrow {\r\n    margin-left: auto;\r\n    color: #047857;\r\n  }\r\n  \r\n  .groc-architecture-pill .pill-arrow svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n\r\n  \/* RIGHT COLUMN & CARDS *\/\r\n  .groc-right {\r\n    position: relative;\r\n    background: #ffffff;\r\n    padding: 40px;\r\n    border-radius: 24px;\r\n    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.06);\r\n    border: 1px solid #eef2ff;\r\n  }\r\n\r\n  .groc-cards-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 30px;\r\n  }\r\n\r\n  .groc-card {\r\n    background: #ffffff;\r\n    border: 1px solid #f1f5f9;\r\n    border-radius: 16px;\r\n    padding: 24px;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.02);\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n  }\r\n  \r\n  .groc-card:hover {\r\n      transform: translateY(-4px);\r\n      box-shadow: 0 10px 20px rgba(16, 185, 129, 0.08);\r\n      border-color: #d1fae5;\r\n  }\r\n\r\n  .groc-card .card-header {\r\n    display: flex;\r\n    gap: 16px;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .groc-card .card-icon {\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 8px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n  }\r\n  \r\n  .groc-card .card-icon svg { width: 20px; height: 20px; }\r\n  .icon-blue { background: #e0f2fe; color: #0284c7; }\r\n  .icon-green { background: #dcfce7; color: #059669; }\r\n  .icon-purple { background: #f3e8ff; color: #9333ea; }\r\n  .icon-orange { background: #ffedd5; color: #ea580c; }\r\n\r\n  .groc-card .card-header h3 {\r\n    font-size: 13px;\r\n    font-weight: 800;\r\n    color: #1e293b;\r\n    margin: 0 0 6px 0;\r\n    letter-spacing: 0.5px;\r\n  }\r\n\r\n  .groc-card .card-header p {\r\n    font-size: 12px;\r\n    color: #64748b;\r\n    margin: 0;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .groc-tags {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n  }\r\n\r\n  .groc-tag-item {\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    color: #334155;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding-top: 8px;\r\n    border-top: 1px dashed #e2e8f0;\r\n  }\r\n\r\n  \/* CENTER CART BADGE *\/\r\n  .groc-badge-wrapper {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 140px;\r\n    height: 140px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    z-index: 10;\r\n  }\r\n\r\n  .groc-badge-wrapper .orbit-circle {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    border: 1px dashed #a7f3d0;\r\n  }\r\n\r\n  .orbit-1 { width: 100%; height: 100%; animation: rotateOrbit 20s linear infinite; }\r\n  .orbit-2 { width: 130%; height: 130%; border-color: #6ee7b7; animation: rotateOrbitReverse 25s linear infinite; }\r\n\r\n  .groc-badge-wrapper .orbit-dot {\r\n    position: absolute;\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 50%;\r\n  }\r\n\r\n  .dot-a { background-color: #10b981; top: -4px; left: 50%; transform: translateX(-50%); }\r\n  .dot-b { background-color: #f59e0b; bottom: -4px; left: 50%; transform: translateX(-50%); }\r\n\r\n  .groc-badge-wrapper .badge-content {\r\n    width: 74px;\r\n    height: 74px;\r\n    background: #ffffff;\r\n    border-radius: 50%;\r\n    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.25);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border: 4px solid #ecfdf5;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n\r\n  .groc-badge-wrapper .badge-content svg {\r\n    width: 32px;\r\n    height: 32px;\r\n  }\r\n\r\n  \/* STATS BANNER *\/\r\n  .groc-stats-banner {\r\n    max-width: 1100px;\r\n    margin: 50px auto 0 auto;\r\n    background: #ffffff;\r\n    border-radius: 100px;\r\n    padding: 16px 40px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    box-shadow: 0 15px 35px rgba(16, 185, 129, 0.06);\r\n    border: 1px solid #f1f5f9;\r\n  }\r\n\r\n  .groc-stats-banner .banner-left {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n  }\r\n\r\n  .groc-stats-banner .chart-icon {\r\n    background: #f97316; \/* Vibrant Orange *\/\r\n    color: white;\r\n    width: 44px;\r\n    height: 44px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n  \r\n  .groc-stats-banner .chart-icon svg {\r\n    width: 22px;\r\n    height: 22px;\r\n  }\r\n\r\n  .groc-stats-banner .banner-text {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .groc-stats-banner .banner-text strong {\r\n    font-size: 13px;\r\n    color: #0f172a;\r\n  }\r\n  \r\n  .groc-stats-banner .banner-text span {\r\n    font-size: 12px;\r\n    color: #64748b;\r\n  }\r\n\r\n  .groc-stats-banner .banner-stats { \r\n    display: flex; \r\n    align-items: center; \r\n    gap: 30px; \r\n  }\r\n\r\n  .groc-stats-banner .stat-item { \r\n    text-align: center; \r\n  }\r\n\r\n  .groc-stats-banner .stat-item h4 { \r\n    font-size: 20px; \r\n    font-weight: 800; \r\n    color: #10b981; \r\n    margin: 0 0 2px 0; \r\n  }\r\n\r\n  .groc-stats-banner .stat-item p { \r\n    font-size: 10px; \r\n    color: #64748b; \r\n    font-weight: 700;\r\n    margin: 0; \r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n  }\r\n\r\n  .groc-stats-banner .stat-divider { \r\n    width: 1px; \r\n    height: 35px; \r\n    background-color: #e2e8f0; \r\n  }\r\n\r\n  \/* KEYFRAMES *\/\r\n  @keyframes rotateOrbit {\r\n    0% { transform: rotate(0deg); }\r\n    100% { transform: rotate(360deg); }\r\n  }\r\n\r\n  @keyframes rotateOrbitReverse {\r\n    0% { transform: rotate(360deg); }\r\n    100% { transform: rotate(0deg); }\r\n  }\r\n\r\n  \/* RESPONSIVE *\/\r\n  @media (max-width: 1150px) {\r\n    .groc-container { grid-template-columns: 1fr; gap: 40px; }\r\n    .groc-badge-wrapper { display: none; }\r\n    .groc-stats-banner { flex-direction: column; gap: 24px; border-radius: 24px; text-align: center; padding: 24px; }\r\n    .groc-stats-banner .banner-left { flex-direction: column; text-align: center; }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .groc-props-grid { grid-template-columns: repeat(2, 1fr); }\r\n    .groc-title { font-size: 34px; }\r\n    .groc-right { padding: 20px; }\r\n    .groc-cards-grid { grid-template-columns: 1fr; }\r\n  }\r\n  \r\n  @media (max-width: 480px) {\r\n    .groc-props-grid { grid-template-columns: 1fr; }\r\n    .groc-stats-banner .banner-stats { flex-direction: column; gap: 15px; }\r\n    .groc-stats-banner .stat-divider { width: 50px; height: 1px; }\r\n  }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-17997eb e-flex e-con-boxed e-con e-parent\" data-id=\"17997eb\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-13ba5fc elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-heading\" data-id=\"13ba5fc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">DEVELOPMENT ROADMAP<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a4814bf elementor-widget elementor-widget-heading\" data-id=\"a4814bf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">From concept to a scalable, high-performing grocery delivery app in five steps.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aab6417 elementor-widget-tablet__width-initial elementor-widget elementor-widget-html\" data-id=\"aab6417\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"groc-process-section\">\r\n  <div class=\"groc-process-container\">\r\n    \r\n    <!-- Process Steps Grid -->\r\n    <div class=\"groc-process-steps\">\r\n      <div class=\"groc-connecting-line\"><\/div>\r\n      \r\n      <!-- Step 1 -->\r\n      <div class=\"groc-step-item\" style=\"--delay: 0.1s;\">\r\n        <div class=\"groc-number-circle\">\r\n          <span class=\"step-num\">01<\/span>\r\n          <div class=\"step-pulse-ring\"><\/div>\r\n        <\/div>\r\n        <div class=\"groc-step-content\">\r\n          <div class=\"groc-step-badge\">Strategy<\/div>\r\n          <h3 class=\"groc-step-title\">Scope & Mapping<\/h3>\r\n          <p class=\"groc-step-desc\">We map out your delivery zones, inventory systems, multi-vendor requirements, and core business logistics.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Step 2 -->\r\n      <div class=\"groc-step-item\" style=\"--delay: 0.2s;\">\r\n        <div class=\"groc-number-circle\">\r\n          <span class=\"step-num\">02<\/span>\r\n          <div class=\"step-pulse-ring\"><\/div>\r\n        <\/div>\r\n        <div class=\"groc-step-content\">\r\n          <div class=\"groc-step-badge\">Experience<\/div>\r\n          <h3 class=\"groc-step-title\">Frictionless UI\/UX<\/h3>\r\n          <p class=\"groc-step-desc\">Intuitive screens engineered for seamless product browsing, quick cart additions, and real-time order tracking.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Step 3 -->\r\n      <div class=\"groc-step-item\" style=\"--delay: 0.3s;\">\r\n        <div class=\"groc-number-circle\">\r\n          <span class=\"step-num\">03<\/span>\r\n          <div class=\"step-pulse-ring\"><\/div>\r\n        <\/div>\r\n        <div class=\"groc-step-content\">\r\n          <div class=\"groc-step-badge\">Engineering<\/div>\r\n          <h3 class=\"groc-step-title\">App Development<\/h3>\r\n          <p class=\"groc-step-desc\">Building customer, delivery, and store apps with secure payments, live GPS tracking, and robust backend APIs.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Step 4 -->\r\n      <div class=\"groc-step-item\" style=\"--delay: 0.4s;\">\r\n        <div class=\"groc-number-circle\">\r\n          <span class=\"step-num\">04<\/span>\r\n          <div class=\"step-pulse-ring\"><\/div>\r\n        <\/div>\r\n        <div class=\"groc-step-content\">\r\n          <div class=\"groc-step-badge\">Quality<\/div>\r\n          <h3 class=\"groc-step-title\">Testing & QA<\/h3>\r\n          <p class=\"groc-step-desc\">Rigorous testing for fast load times, accurate location routing, secure checkouts, and high-concurrency stability.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Step 5 -->\r\n      <div class=\"groc-step-item\" style=\"--delay: 0.5s;\">\r\n        <div class=\"groc-number-circle\">\r\n          <span class=\"step-num\">05<\/span>\r\n          <div class=\"step-pulse-ring\"><\/div>\r\n        <\/div>\r\n        <div class=\"groc-step-content\">\r\n          <div class=\"groc-step-badge\">Deployment<\/div>\r\n          <h3 class=\"groc-step-title\">Launch & Scaling<\/h3>\r\n          <p class=\"groc-step-desc\">App Store rollout, secure cloud infrastructure scaling for peak hours, and ongoing maintenance.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); \r\n \r\n  .groc-process-section { \r\n    font-family: 'Plus Jakarta Sans', sans-serif; \r\n    padding: 80px 0px; \r\n    background: radial-gradient(circle at 50% 0%, #ecfdf5 0%, #ffffff 70%); \/* Fresh Mint to White *\/\r\n    color: #0f172a; \r\n    overflow: hidden; \r\n  } \r\n \r\n  .groc-process-container { \r\n    max-width: 1340px; \r\n    margin: 0 auto; \r\n    padding: 0 20px;\r\n  } \r\n \r\n  \/* Process Steps Layout *\/ \r\n  .groc-process-steps { \r\n    position: relative; \r\n    display: grid; \r\n    grid-template-columns: repeat(5, 1fr); \r\n    gap: 24px; \r\n  } \r\n \r\n  \/* Glowing Connecting Line *\/ \r\n  .groc-connecting-line { \r\n    position: absolute; \r\n    top: 36px; \r\n    left: 8%; \r\n    right: 8%; \r\n    height: 3px; \r\n    background: linear-gradient(90deg, #a7f3d0, #10b981, #059669, #a7f3d0);\r\n    background-size: 200% 100%;\r\n    animation: lineShimmer 6s linear infinite;\r\n    z-index: 1; \r\n  }\r\n\r\n  @keyframes lineShimmer {\r\n    0% { background-position: 200% 0; }\r\n    100% { background-position: -200% 0; }\r\n  }\r\n \r\n  \/* Step Item Styling *\/ \r\n  .groc-step-item { \r\n    position: relative; \r\n    z-index: 2; \r\n    text-align: center; \r\n    display: flex; \r\n    flex-direction: column; \r\n    align-items: center; \r\n    opacity: 0; \r\n    transform: translateY(30px); \r\n    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; \r\n    animation-delay: var(--delay); \r\n  } \r\n \r\n  \/* Innovative Circle with Radar Pulse *\/ \r\n  .groc-number-circle { \r\n    position: relative;\r\n    width: 72px; \r\n    height: 72px; \r\n    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);\r\n    border: 2px solid #10b981; \/* Emerald Green *\/ \r\n    border-radius: 50%; \r\n    display: flex; \r\n    align-items: center; \r\n    justify-content: center; \r\n    font-size: 20px; \r\n    font-weight: 800; \r\n    color: #10b981; \r\n    margin-bottom: 24px; \r\n    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); \r\n    box-shadow: 0 0 0 10px #ffffff, 0 10px 25px rgba(16, 185, 129, 0.1); \r\n  } \r\n\r\n  \/* Subtle background pulse animation *\/\r\n  .step-pulse-ring {\r\n    position: absolute;\r\n    inset: -6px;\r\n    border-radius: 50%;\r\n    border: 1px dashed rgba(16, 185, 129, 0.4);\r\n    animation: rotateRing 15s linear infinite;\r\n    pointer-events: none;\r\n  }\r\n\r\n  @keyframes rotateRing {\r\n    0% { transform: rotate(0deg); }\r\n    100% { transform: rotate(360deg); }\r\n  }\r\n\r\n  .groc-step-content {\r\n    background: #ffffff;\r\n    border: 1px solid #f1f5f9;\r\n    padding: 20px 16px;\r\n    border-radius: 18px;\r\n    width: 100%;\r\n    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .groc-step-item:hover .groc-step-content {\r\n    border-color: #6ee7b7;\r\n    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.08);\r\n    transform: translateY(-5px);\r\n  }\r\n\r\n  .groc-step-badge {\r\n    display: inline-block;\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    color: #047857; \/* Dark Green *\/\r\n    background: #d1fae5; \/* Light Green Bg *\/\r\n    padding: 4px 10px;\r\n    border-radius: 20px;\r\n    margin-bottom: 10px;\r\n  }\r\n \r\n  .groc-step-title { \r\n    font-size: 15px; \r\n    font-weight: 700; \r\n    color: #0f172a; \r\n    margin: 0 0 8px 0; \r\n  } \r\n \r\n  .groc-step-desc { \r\n    font-size: 13px; \r\n    color: #64748b; \r\n    line-height: 1.5; \r\n    margin: 0; \r\n  } \r\n \r\n  \/* Hover Effects for Circle *\/ \r\n  .groc-step-item:hover .groc-number-circle { \r\n    background: linear-gradient(135deg, #10b981, #059669); \r\n    color: #ffffff; \r\n    border-color: #059669;\r\n    transform: scale(1.1); \r\n    box-shadow: 0 0 0 10px #ffffff, 0 15px 35px rgba(16, 185, 129, 0.35); \r\n  } \r\n \r\n  \/* Entrance Animation Keyframes *\/ \r\n  @keyframes fadeInUp { \r\n    to { \r\n      opacity: 1; \r\n      transform: translateY(0); \r\n    } \r\n  } \r\n \r\n  \/* Responsive Design *\/ \r\n  @media (max-width: 1024px) { \r\n    .groc-process-steps { \r\n      grid-template-columns: repeat(2, 1fr); \r\n      gap: 30px; \r\n    } \r\n    .groc-connecting-line { \r\n      display: none; \/* Hide horizontal line on tablet\/mobile vertical stack *\/ \r\n    } \r\n  } \r\n \r\n  @media (max-width: 576px) { \r\n    .groc-process-steps { \r\n      grid-template-columns: 1fr; \r\n      gap: 24px; \r\n    } \r\n  } \r\n<\/style> \r\n \r\n<script> \r\n  \/\/ Re-trigger animation when scrolled into view\r\n  document.addEventListener('DOMContentLoaded', () => { \r\n    const observer = new IntersectionObserver((entries) => { \r\n      entries.forEach(entry => { \r\n        if (entry.isIntersecting) { \r\n          entry.target.style.animationPlayState = 'running'; \r\n        } \r\n      }); \r\n    }, { threshold: 0.15 }); \r\n \r\n    document.querySelectorAll('.groc-step-item').forEach(el => { \r\n      el.style.animationPlayState = 'paused';\r\n      observer.observe(el); \r\n    }); \r\n  }); \r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-badc201 e-flex e-con-boxed e-con e-parent\" data-id=\"badc201\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bd0573a elementor-widget elementor-widget-html\" data-id=\"bd0573a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"groc-faq-section\">\r\n  <div class=\"groc-faq-container\">\r\n    \r\n    <div class=\"groc-faq-header\">\r\n      <span class=\"groc-faq-subtitle\">FAQS<\/span>\r\n      <h2 class=\"groc-faq-title\">Common questions about grocery app development in Bangalore<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"groc-faq-list\">\r\n      \r\n      <!-- FAQ Item 1 -->\r\n      <div class=\"groc-faq-item active\">\r\n        <button class=\"groc-faq-question\">\r\n          How long does it take to build a grocery delivery app?\r\n          <span class=\"groc-faq-icon\"><\/span>\r\n        <\/button>\r\n        <div class=\"groc-faq-answer\" style=\"max-height: 200px;\">\r\n          <p>The development timeline typically ranges from 8 to 16 weeks, depending on the complexity of features like real-time GPS tracking, multi-vendor integrations, custom inventory management, and payment gateway setups.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- FAQ Item 2 -->\r\n      <div class=\"groc-faq-item\">\r\n        <button class=\"groc-faq-question\">\r\n          Can the app support multiple payment methods and secure transactions?\r\n          <span class=\"groc-faq-icon\"><\/span>\r\n        <\/button>\r\n        <div class=\"groc-faq-answer\">\r\n          <p>Yes, we integrate highly secure payment gateways that support UPI, credit\/debit cards, net banking, and digital wallets, ensuring a seamless and safe checkout experience for your customers.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- FAQ Item 3 -->\r\n      <div class=\"groc-faq-item\">\r\n        <button class=\"groc-faq-question\">\r\n          Can administrators manage inventory and monitor delivery partners directly?\r\n          <span class=\"groc-faq-icon\"><\/span>\r\n        <\/button>\r\n        <div class=\"groc-faq-answer\">\r\n          <p>Absolutely. We build a comprehensive Super Admin dashboard that allows you to manage product catalogs, track delivery partners in real-time, monitor individual store performance, and analyze daily sales reports.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- FAQ Item 4 -->\r\n      <div class=\"groc-faq-item\">\r\n        <button class=\"groc-faq-question\">\r\n          Will you support us after the app is live?\r\n          <span class=\"groc-faq-icon\"><\/span>\r\n        <\/button>\r\n        <div class=\"groc-faq-answer\">\r\n          <p>Yes, we offer ongoing maintenance and support packages. This includes server monitoring, performance optimization, OS updates for iOS and Android, and feature enhancements to ensure your app scales smoothly as your order volume grows.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');\r\n\r\n  .groc-faq-section {\r\n    font-family: 'Plus Jakarta Sans', sans-serif;\r\n    background-color: #f8fafc; \/* Light gray background *\/\r\n    padding: 0px 20px;\r\n  }\r\n\r\n  .groc-faq-container {\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .groc-faq-header {\r\n    text-align: center;\r\n    margin-bottom: 50px;\r\n  }\r\n\r\n  .groc-faq-subtitle {\r\n    color: #10b981; \/* Grocery Green *\/\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    display: block;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .groc-faq-title {\r\n    color: #0f172a;\r\n    font-size: 38px;\r\n    font-weight: 700;\r\n    line-height: 1.3;\r\n    margin: 0;\r\n  }\r\n\r\n  .groc-faq-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .groc-faq-item {\r\n    border-bottom: 1px solid #e2e8f0;\r\n  }\r\n\r\n  .groc-faq-question {\r\n    width: 100%;\r\n    background: none;\r\n    border: none;\r\n    padding: 24px 0;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    font-family: inherit;\r\n    font-size: 18px;\r\n    font-weight: 600;\r\n    color: #0f172a;\r\n    text-align: left;\r\n    cursor: pointer;\r\n    transition: color 0.3s;\r\n  }\r\n\r\n  .groc-faq-question:hover {\r\n    color: #10b981;\r\n  }\r\n\r\n  \/* Plus\/Minus Icon using CSS *\/\r\n  .groc-faq-icon {\r\n    position: relative;\r\n    width: 20px;\r\n    height: 20px;\r\n    flex-shrink: 0;\r\n    margin-left: 20px;\r\n  }\r\n\r\n  .groc-faq-icon::before,\r\n  .groc-faq-icon::after {\r\n    content: '';\r\n    position: absolute;\r\n    background-color: #0f172a;\r\n    transition: transform 0.3s ease, background-color 0.3s ease;\r\n  }\r\n\r\n  \/* Horizontal line *\/\r\n  .groc-faq-icon::before {\r\n    top: 9px;\r\n    left: 0;\r\n    width: 20px;\r\n    height: 2px;\r\n  }\r\n\r\n  \/* Vertical line *\/\r\n  .groc-faq-icon::after {\r\n    top: 0;\r\n    left: 9px;\r\n    width: 2px;\r\n    height: 20px;\r\n  }\r\n\r\n  .groc-faq-answer {\r\n    max-height: 0;\r\n    overflow: hidden;\r\n    transition: max-height 0.4s ease;\r\n  }\r\n\r\n  .groc-faq-answer p {\r\n    margin: 0;\r\n    padding-bottom: 24px;\r\n    color: #64748b;\r\n    font-size: 16px;\r\n    line-height: 1.6;\r\n    padding-right: 40px; \/* Leave space so text doesn't hit icon *\/\r\n  }\r\n\r\n  \/* Active State Styles *\/\r\n  .groc-faq-item.active .groc-faq-question {\r\n    color: #10b981;\r\n  }\r\n\r\n  .groc-faq-item.active .groc-faq-icon::before,\r\n  .groc-faq-item.active .groc-faq-icon::after {\r\n    background-color: #10b981;\r\n  }\r\n\r\n  \/* Rotate vertical line to make it a minus *\/\r\n  .groc-faq-item.active .groc-faq-icon::after {\r\n    transform: rotate(90deg);\r\n  }\r\n\r\n  \/* Responsive styling *\/\r\n  @media (max-width: 768px) {\r\n    .groc-faq-title {\r\n      font-size: 28px;\r\n    }\r\n    .groc-faq-question {\r\n      font-size: 16px;\r\n    }\r\n    .groc-faq-answer p {\r\n      font-size: 15px;\r\n      padding-right: 10px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', () => {\r\n    const faqItems = document.querySelectorAll('.groc-faq-item');\r\n\r\n    faqItems.forEach(item => {\r\n      const question = item.querySelector('.groc-faq-question');\r\n      const answer = item.querySelector('.groc-faq-answer');\r\n\r\n      question.addEventListener('click', () => {\r\n        const isActive = item.classList.contains('active');\r\n\r\n        \/\/ Close all items\r\n        faqItems.forEach(otherItem => {\r\n          otherItem.classList.remove('active');\r\n          otherItem.querySelector('.groc-faq-answer').style.maxHeight = null;\r\n        });\r\n\r\n        \/\/ If it wasn't active, open it\r\n        if (!isActive) {\r\n          item.classList.add('active');\r\n          answer.style.maxHeight = answer.scrollHeight + \"px\";\r\n        }\r\n      });\r\n    });\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ab22d60 e-flex e-con-boxed e-con e-parent\" data-id=\"ab22d60\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-638d271 e-con-full animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"638d271\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-b5b2b63 e-con-full e-flex e-con e-child\" data-id=\"b5b2b63\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4793f43 elementor-widget elementor-widget-heading\" data-id=\"4793f43\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Ready to build your grocery app in Bangalore?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7ee727 elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"e7ee727\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-path-to-node=\"2\"><span style=\"color: #ebebeb;\">Talk to our team about your delivery logistics, inventory management, multi-vendor setup, and launch timeline.<\/span><\/p><p data-path-to-node=\"3\">\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b31a1b5 e-con-full e-flex e-con e-child\" data-id=\"b31a1b5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0b0ded8 elementor-widget elementor-widget-button\" data-id=\"0b0ded8\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-sink\" href=\"https:\/\/brightcodess.com\/bengaluru\/contact\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Get a Free Quote \u2192<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>GROCERY APP DEVELOPMENT COMPANY IN BANGALORE Grocery App Development in Bangalore Build a powerful and user-friendly grocery delivery app with Brightcode. We develop custom grocery apps for startups, supermarkets and retail businesses to help you go digital, reach more customers and grow faster. Get a Free Quote &rarr; Watch Our Process See how we build [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-6459","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v28.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Grocery Delivery App - Brightcode Software Services<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/brightcodess.com\/bengaluru\/grocery-delivery-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Grocery Delivery App\" \/>\n<meta property=\"og:description\" content=\"GROCERY APP DEVELOPMENT COMPANY IN BANGALORE Grocery App Development in Bangalore Build a powerful and user-friendly grocery delivery app with Brightcode. We develop custom grocery apps for startups, supermarkets and retail businesses to help you go digital, reach more customers and grow faster. Get a Free Quote &rarr; Watch Our Process See how we build [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/brightcodess.com\/bengaluru\/grocery-delivery-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightcode Software Services\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightcodess\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-16T07:44:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/grocery-app-delivery.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Brightcodebss\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/grocery-delivery-app\\\/\",\"url\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/grocery-delivery-app\\\/\",\"name\":\"Grocery Delivery App - Brightcode Software Services\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/grocery-delivery-app\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/grocery-delivery-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/grocery-app-delivery.webp\",\"datePublished\":\"2026-09-16T06:46:21+00:00\",\"dateModified\":\"2026-09-16T07:44:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/grocery-delivery-app\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/grocery-delivery-app\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/grocery-delivery-app\\\/#primaryimage\",\"url\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/grocery-app-delivery.webp\",\"contentUrl\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/grocery-app-delivery.webp\",\"width\":1536,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/grocery-delivery-app\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Grocery Delivery App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/#website\",\"url\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/\",\"name\":\"Brightcode Software Services\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/#organization\",\"name\":\"Brightcode Software Services\",\"alternateName\":\"Brightcode\",\"url\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/Brightcode-Logo.webp\",\"contentUrl\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/Brightcode-Logo.webp\",\"width\":500,\"height\":500,\"caption\":\"Brightcode Software Services\"},\"image\":{\"@id\":\"https:\\\/\\\/brightcodess.com\\\/bengaluru\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/brightcodess\\\/\",\"https:\\\/\\\/x.com\\\/Brightcodebss\",\"https:\\\/\\\/www.instagram.com\\\/brightcodess\\\/\",\"https:\\\/\\\/linkedin.com\\\/company\\\/brightcodess\"],\"description\":\"Brightcode is a leading software company in Bangalore offers wide range of IT solutions that include software development, website development, mobile app development and digital marketing services.\",\"telephone\":\"93868 06214\",\"legalName\":\"Brightcode Software Services Pvt. Ltd.\",\"foundingDate\":\"2019-02-07\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"51\",\"maxValue\":\"200\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Grocery Delivery App - Brightcode Software Services","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/brightcodess.com\/bengaluru\/grocery-delivery-app\/","og_locale":"en_US","og_type":"article","og_title":"Grocery Delivery App","og_description":"GROCERY APP DEVELOPMENT COMPANY IN BANGALORE Grocery App Development in Bangalore Build a powerful and user-friendly grocery delivery app with Brightcode. We develop custom grocery apps for startups, supermarkets and retail businesses to help you go digital, reach more customers and grow faster. Get a Free Quote &rarr; Watch Our Process See how we build [&hellip;]","og_url":"https:\/\/brightcodess.com\/bengaluru\/grocery-delivery-app\/","og_site_name":"Brightcode Software Services","article_publisher":"https:\/\/www.facebook.com\/brightcodess\/","article_modified_time":"2026-09-16T07:44:27+00:00","og_image":[{"url":"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/grocery-app-delivery.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Brightcodebss","twitter_misc":{"Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/brightcodess.com\/bengaluru\/grocery-delivery-app\/","url":"https:\/\/brightcodess.com\/bengaluru\/grocery-delivery-app\/","name":"Grocery Delivery App - Brightcode Software Services","isPartOf":{"@id":"https:\/\/brightcodess.com\/bengaluru\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brightcodess.com\/bengaluru\/grocery-delivery-app\/#primaryimage"},"image":{"@id":"https:\/\/brightcodess.com\/bengaluru\/grocery-delivery-app\/#primaryimage"},"thumbnailUrl":"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/grocery-app-delivery.webp","datePublished":"2026-09-16T06:46:21+00:00","dateModified":"2026-09-16T07:44:27+00:00","breadcrumb":{"@id":"https:\/\/brightcodess.com\/bengaluru\/grocery-delivery-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brightcodess.com\/bengaluru\/grocery-delivery-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brightcodess.com\/bengaluru\/grocery-delivery-app\/#primaryimage","url":"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/grocery-app-delivery.webp","contentUrl":"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2026\/09\/grocery-app-delivery.webp","width":1536,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/brightcodess.com\/bengaluru\/grocery-delivery-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/brightcodess.com\/bengaluru\/"},{"@type":"ListItem","position":2,"name":"Grocery Delivery App"}]},{"@type":"WebSite","@id":"https:\/\/brightcodess.com\/bengaluru\/#website","url":"https:\/\/brightcodess.com\/bengaluru\/","name":"Brightcode Software Services","description":"","publisher":{"@id":"https:\/\/brightcodess.com\/bengaluru\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brightcodess.com\/bengaluru\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/brightcodess.com\/bengaluru\/#organization","name":"Brightcode Software Services","alternateName":"Brightcode","url":"https:\/\/brightcodess.com\/bengaluru\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brightcodess.com\/bengaluru\/#\/schema\/logo\/image\/","url":"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2025\/11\/Brightcode-Logo.webp","contentUrl":"https:\/\/brightcodess.com\/bengaluru\/wp-content\/uploads\/2025\/11\/Brightcode-Logo.webp","width":500,"height":500,"caption":"Brightcode Software Services"},"image":{"@id":"https:\/\/brightcodess.com\/bengaluru\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightcodess\/","https:\/\/x.com\/Brightcodebss","https:\/\/www.instagram.com\/brightcodess\/","https:\/\/linkedin.com\/company\/brightcodess"],"description":"Brightcode is a leading software company in Bangalore offers wide range of IT solutions that include software development, website development, mobile app development and digital marketing services.","telephone":"93868 06214","legalName":"Brightcode Software Services Pvt. Ltd.","foundingDate":"2019-02-07","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"51","maxValue":"200"}}]}},"_links":{"self":[{"href":"https:\/\/brightcodess.com\/bengaluru\/wp-json\/wp\/v2\/pages\/6459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brightcodess.com\/bengaluru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/brightcodess.com\/bengaluru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/brightcodess.com\/bengaluru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brightcodess.com\/bengaluru\/wp-json\/wp\/v2\/comments?post=6459"}],"version-history":[{"count":0,"href":"https:\/\/brightcodess.com\/bengaluru\/wp-json\/wp\/v2\/pages\/6459\/revisions"}],"wp:attachment":[{"href":"https:\/\/brightcodess.com\/bengaluru\/wp-json\/wp\/v2\/media?parent=6459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}