PREM

backend/src/db/api/product_categories.js

@@ -322,6 +322,12 @@ module.exports = class Product_categoriesDBApi {
         model: db.file,
         as: 'images',
      },
+     {
+       model: db.category_translations,
+       as: 'category_translations_category',
+       include: [{ model: db.languages, as: 'language' }]
+
+      },
 
     ];
 

backend/src/db/api/products.js

@@ -389,6 +389,7 @@ module.exports = class ProductsDBApi {
       {
         model: db.product_categories,
         as: 'category',
+      include: [{ model: db.category_translations, as: 'category_translations_category', include: [{ model: db.languages, as: 'language' }] }],
         
         where: filter.category ? {
           [Op.or]: [
@@ -409,6 +410,12 @@ module.exports = class ProductsDBApi {
         model: db.file,
         as: 'images',
      },
+     {
+       model: db.product_translations,
+       as: 'product_translations_product',
+       include: [{ model: db.languages, as: 'language' }]
+
+      },
 
     ];
 

backend/src/db/api/promotions.js

@@ -361,6 +361,12 @@ module.exports = class PromotionsDBApi {
         model: db.file,
         as: 'banner_images',
      },
+     {
+       model: db.promotion_translations,
+       as: 'promotion_translations_promotion',
+       include: [{ model: db.languages, as: 'language' }]
+
+      },
 
     ];
 

backend/src/db/db.config.js

@@ -1,4 +1,4 @@
-
+require('dotenv').config();
 
 module.exports = {
   production: {
@@ -12,11 +12,12 @@ module.exports = {
     seederStorage: 'sequelize',
   },
   development: {
-    username: 'postgres',
     dialect: 'postgres',
-    password: '',
+    username: process.env.DB_USER,
-    database: 'db_malaysian_mini_market_site',
+    password: process.env.DB_PASS,
-    host: process.env.DB_HOST || 'localhost',
+    database: process.env.DB_NAME,
+    host: process.env.DB_HOST,
+    port: process.env.DB_PORT,
     logging: console.log,
     seederStorage: 'sequelize',
   },

backend/src/db/migrations/1771699492941-public-permissions.js

@@ -0,0 +1,57 @@
+module.exports = {
+  async up(queryInterface) {
+    const [roles] = await queryInterface.sequelize.query(
+      `SELECT id FROM "roles" WHERE name = 'Public' LIMIT 1;`
+    );
+
+    if (roles.length === 0) {
+      console.warn("Public role not found. Skipping permissions grant.");
+      return;
+    }
+
+    const publicRoleId = roles[0].id;
+
+    const entities = [
+      "products",
+      "product_categories",
+      "promotions",
+      "hero_sections",
+      "product_translations",
+      "category_translations",
+      "promotion_translations",
+      "hero_translations",
+      "languages",
+      "site_assets",
+      "file",
+      "shops"
+    ];
+
+    const [permissions] = await queryInterface.sequelize.query(
+      `SELECT id, name FROM "permissions" WHERE name IN (${entities
+        .map((e) => `'READ_${e.toUpperCase()}'`)
+        .join(",")});`
+    );
+
+    const createdAt = new Date();
+    const updatedAt = new Date();
+
+    const rolesPermissions = permissions.map((p) => ({
+      roles_permissionsId: publicRoleId,
+      permissionId: p.id,
+      createdAt,
+      updatedAt,
+    }));
+
+    if (rolesPermissions.length > 0) {
+      // First, delete existing to avoid duplicates if re-run
+      await queryInterface.bulkDelete("rolesPermissionsPermissions", {
+        roles_permissionsId: publicRoleId
+      });
+      await queryInterface.bulkInsert("rolesPermissionsPermissions", rolesPermissions);
+    }
+  },
+
+  async down() {
+    // Optional: remove the permissions
+  },
+};

backend/src/db/seeders/20260221000000-minimarket-sample.js

@@ -0,0 +1,155 @@
+const { v4: uuid } = require("uuid");
+
+module.exports = {
+  async up(queryInterface) {
+    const createdAt = new Date();
+    const updatedAt = new Date();
+
+    const catDrinkId = uuid();
+    const catSnackId = uuid();
+    const catGroceryId = uuid();
+
+    const langEnId = uuid();
+    const langMsId = uuid();
+    const langZhId = uuid();
+    const langTaId = uuid();
+
+    const shopId = uuid();
+
+    // Check if languages exist before inserting
+    const [existingLangs] = await queryInterface.sequelize.query('SELECT id, code FROM "languages"');
+    const existingCodes = existingLangs.map(l => l.code);
+
+    const languagesToInsert = [
+      { id: langEnId, name: "English", code: "en", createdAt, updatedAt },
+      { id: langMsId, name: "Bahasa Melayu", code: "ms", createdAt, updatedAt },
+      { id: langZhId, name: "Mandarin", code: "zh", createdAt, updatedAt },
+      { id: langTaId, name: "Tamil", code: "ta", createdAt, updatedAt },
+    ].filter(l => !existingCodes.includes(l.code));
+
+    if (languagesToInsert.length > 0) {
+      await queryInterface.bulkInsert("languages", languagesToInsert);
+    }
+
+    // Get the actual IDs for translations
+    const [allLangs] = await queryInterface.sequelize.query('SELECT id, code FROM "languages"');
+    const langMap = allLangs.reduce((acc, l) => ({ ...acc, [l.code]: l.id }), {});
+
+    await queryInterface.bulkInsert("shops", [
+      {
+        id: shopId,
+        name: "Super Star Store",
+        tagline: "Your Neighbourhood Choice in Ipoh",
+        primary_color_hex: "#22c55e",
+        secondary_color_hex: "#fbbf24",
+        whatsapp_number: "60125749390",
+        phone_number: "012-574 9390",
+        email: "superstarstore@gmail.com",
+        address_line_1: "1-25, Laluan Menglembu Impiana 8",
+        address_line_2: "Taman Menglembu Impiana Adril",
+        postcode: "31450",
+        city: "Ipoh",
+        state: "Perak",
+        country: "Malaysia",
+        latitude: 4.5670,
+        longitude: 101.0450,
+        google_maps_embed_url: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3976.99!2d101.04!3d4.56!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNMKwMzMnMzguMiJOIDEwMcKwMDInNDIuMCJF!5e0!3m2!1sen!2smy!4v1700000000000!5m2!1sen!2smy",
+        opening_hours_text: "Closed · Opens 8:30 am",
+        is_published: true,
+        createdAt,
+        updatedAt
+      }
+    ]);
+
+    await queryInterface.bulkInsert("product_categories", [
+      { id: catDrinkId, code: "Drinks", shopId, createdAt, updatedAt },
+      { id: catSnackId, code: "Snacks", shopId, createdAt, updatedAt },
+      { id: catGroceryId, code: "Groceries", shopId, createdAt, updatedAt },
+    ]);
+
+    await queryInterface.bulkInsert("category_translations", [
+      { id: uuid(), name: "Minuman", languageId: langMap["ms"], categoryId: catDrinkId, createdAt, updatedAt },
+      { id: uuid(), name: "饮料", languageId: langMap["zh"], categoryId: catDrinkId, createdAt, updatedAt },
+      { id: uuid(), name: "பானங்கள்", languageId: langMap["ta"], categoryId: catDrinkId, createdAt, updatedAt },
+      
+      { id: uuid(), name: "Snek", languageId: langMap["ms"], categoryId: catSnackId, createdAt, updatedAt },
+      { id: uuid(), name: "零食", languageId: langMap["zh"], categoryId: catSnackId, createdAt, updatedAt },
+      { id: uuid(), name: "சிற்றுண்டி", languageId: langMap["ta"], categoryId: catSnackId, createdAt, updatedAt },
+
+      { id: uuid(), name: "Runcit", languageId: langMap["ms"], categoryId: catGroceryId, createdAt, updatedAt },
+      { id: uuid(), name: "杂货", languageId: langMap["zh"], categoryId: catGroceryId, createdAt, updatedAt },
+      { id: uuid(), name: "மளிகை", languageId: langMap["ta"], categoryId: catGroceryId, createdAt, updatedAt },
+    ]);
+
+    const prod1Id = uuid();
+    const prod2Id = uuid();
+    const prod3Id = uuid();
+
+    await queryInterface.bulkInsert("products", [
+      { 
+        id: prod1Id, 
+        sku: "DRK-001", 
+        price_rm: 2.50, 
+        compare_at_price_rm: 3.00, 
+        stock_quantity: 100, 
+        status: "active", 
+        categoryId: catDrinkId,
+        shopId,
+        createdAt, updatedAt 
+      },
+      { 
+        id: prod2Id, 
+        sku: "SNK-001", 
+        price_rm: 1.80, 
+        stock_quantity: 50, 
+        status: "active", 
+        categoryId: catSnackId,
+        shopId,
+        createdAt, updatedAt 
+      },
+      { 
+        id: prod3Id, 
+        sku: "GRC-001", 
+        price_rm: 4.50, 
+        stock_quantity: 200, 
+        status: "active", 
+        categoryId: catGroceryId,
+        shopId,
+        createdAt, updatedAt 
+      },
+    ]);
+
+    await queryInterface.bulkInsert("product_translations", [
+        { id: uuid(), name: "Milo Can 240ml", languageId: langMap["en"], productId: prod1Id, createdAt, updatedAt },
+        { id: uuid(), name: "Tin Milo 240ml", languageId: langMap["ms"], productId: prod1Id, createdAt, updatedAt },
+        { id: uuid(), name: "美禄罐装 240ml", languageId: langMap["zh"], productId: prod1Id, createdAt, updatedAt },
+        { id: uuid(), name: "மைலோ டின் 240மி", languageId: langMap["ta"], productId: prod1Id, createdAt, updatedAt },
+
+        { id: uuid(), name: "Mamee Monster Snack", languageId: langMap["en"], productId: prod2Id, createdAt, updatedAt },
+        { id: uuid(), name: "Snek Mamee Monster", languageId: langMap["ms"], productId: prod2Id, createdAt, updatedAt },
+        { id: uuid(), name: "妈咪怪兽零食", languageId: langMap["zh"], productId: prod2Id, createdAt, updatedAt },
+        { id: uuid(), name: "மாமி மான்ஸ்டர் சிற்றுண்டி", languageId: langMap["ta"], productId: prod2Id, createdAt, updatedAt },
+
+        { id: uuid(), name: "Maggi Curry Noodles 5-Pack", languageId: langMap["en"], productId: prod3Id, createdAt, updatedAt },
+        { id: uuid(), name: "Maggi Kari 5-Pek", languageId: langMap["ms"], productId: prod3Id, createdAt, updatedAt },
+        { id: uuid(), name: "美极咖喱面 5包入", languageId: langMap["zh"], productId: prod3Id, createdAt, updatedAt },
+        { id: uuid(), name: "மேகி கறி நூடுல்ஸ் 5-பேக்", languageId: langMap["ta"], productId: prod3Id, createdAt, updatedAt },
+    ]);
+
+    const promoId = uuid();
+    await queryInterface.bulkInsert("promotions", [
+        { id: promoId, promotion_type: "general", is_active: true, shopId, createdAt, updatedAt }
+    ]);
+
+    await queryInterface.bulkInsert("promotion_translations", [
+        { id: uuid(), title: "Ramadan Special Sale", languageId: langMap["en"], promotionId: promoId, createdAt, updatedAt },
+        { id: uuid(), title: "Jualan Khas Ramadan", languageId: langMap["ms"], promotionId: promoId, createdAt, updatedAt },
+        { id: uuid(), title: "斋戒月特别大减价", languageId: langMap["zh"], promotionId: promoId, createdAt, updatedAt },
+        { id: uuid(), title: "ரம்ஜான் சிறப்பு விற்பனை", languageId: langMap["ta"], promotionId: promoId, createdAt, updatedAt },
+    ]);
+  },
+
+  async down() {
+    // Optional
+  },
+};

backend/src/index.js

@@ -121,35 +121,35 @@ app.use('/api/roles', passport.authenticate('jwt', {session: false}), rolesRoute
 
 app.use('/api/permissions', passport.authenticate('jwt', {session: false}), permissionsRoutes);
 
-app.use('/api/shops', passport.authenticate('jwt', {session: false}), shopsRoutes);
+app.use('/api/shops', shopsRoutes);
 
-app.use('/api/languages', passport.authenticate('jwt', {session: false}), languagesRoutes);
+app.use('/api/languages', languagesRoutes);
 
 app.use('/api/content_pages', passport.authenticate('jwt', {session: false}), content_pagesRoutes);
 
 app.use('/api/page_translations', passport.authenticate('jwt', {session: false}), page_translationsRoutes);
 
-app.use('/api/hero_sections', passport.authenticate('jwt', {session: false}), hero_sectionsRoutes);
+app.use('/api/hero_sections', hero_sectionsRoutes);
 
-app.use('/api/hero_translations', passport.authenticate('jwt', {session: false}), hero_translationsRoutes);
+app.use('/api/hero_translations', hero_translationsRoutes);
 
-app.use('/api/product_categories', passport.authenticate('jwt', {session: false}), product_categoriesRoutes);
+app.use('/api/product_categories', product_categoriesRoutes);
 
-app.use('/api/category_translations', passport.authenticate('jwt', {session: false}), category_translationsRoutes);
+app.use('/api/category_translations', category_translationsRoutes);
 
-app.use('/api/products', passport.authenticate('jwt', {session: false}), productsRoutes);
+app.use('/api/products', productsRoutes);
 
-app.use('/api/product_translations', passport.authenticate('jwt', {session: false}), product_translationsRoutes);
+app.use('/api/product_translations', product_translationsRoutes);
 
-app.use('/api/promotions', passport.authenticate('jwt', {session: false}), promotionsRoutes);
+app.use('/api/promotions', promotionsRoutes);
 
-app.use('/api/promotion_translations', passport.authenticate('jwt', {session: false}), promotion_translationsRoutes);
+app.use('/api/promotion_translations', promotion_translationsRoutes);
 
-app.use('/api/promotion_items', passport.authenticate('jwt', {session: false}), promotion_itemsRoutes);
+app.use('/api/promotion_items', promotion_itemsRoutes);
 
 app.use('/api/inquiry_messages', passport.authenticate('jwt', {session: false}), inquiry_messagesRoutes);
 
-app.use('/api/site_assets', passport.authenticate('jwt', {session: false}), site_assetsRoutes);
+app.use('/api/site_assets', site_assetsRoutes);
 
 app.use(
     '/api/openai',

frontend/public/locales/ms/common.json

@@ -0,0 +1,52 @@
+{
+  "pages": {
+    "dashboard": {
+      "pageTitle": "Dashboard",
+      "overview": "Overview",
+      "loadingWidgets": "Loading widgets...",
+      "loading": "Loading..."
+    },
+    "login": {
+      "pageTitle": "Login",
+
+      "form": {
+        "loginLabel":        "Login",
+        "loginHelp":         "Please enter your login",
+        "passwordLabel":     "Password",
+        "passwordHelp":      "Please enter your password",
+        "remember":          "Remember",
+        "forgotPassword":    "Forgot password?",
+        "loginButton":       "Login",
+        "loading":           "Loading...",
+        "noAccountYet":      "Don’t have an account yet?",
+        "newAccount":        "New Account"
+      },
+
+      "pexels": {
+        "photoCredit": "Photo by {{photographer}} on Pexels",
+        "videoCredit": "Video by {{name}} on Pexels",
+        "videoUnsupported": "Your browser does not support the video tag."
+      },
+
+      "footer": {
+        "copyright": "© {{year}} {{title}}. All rights reserved",
+        "privacy":   "Privacy Policy"
+      }
+    }
+  },
+  "components": {
+    "widgetCreator": {
+      "title": "Create Chart or Widget",
+      "helpText": "Describe your new widget or chart in natural language. For example: \"Number of admin users\" OR \"red chart with number of closed contracts grouped by month\"",
+      "settingsTitle": "Widget Creator Settings",
+      "settingsDescription": "What role are we showing and creating widgets for?",
+      "doneButton": "Done",
+      "loading": "Loading..."
+    },
+    "search": {
+      "placeholder": "Search",
+      "required": "Required",
+      "minLength": "Minimum length: {{count}} characters"
+    }
+  }
+}

frontend/public/locales/ta/common.json

@@ -0,0 +1,52 @@
+{
+  "pages": {
+    "dashboard": {
+      "pageTitle": "Dashboard",
+      "overview": "Overview",
+      "loadingWidgets": "Loading widgets...",
+      "loading": "Loading..."
+    },
+    "login": {
+      "pageTitle": "Login",
+
+      "form": {
+        "loginLabel":        "Login",
+        "loginHelp":         "Please enter your login",
+        "passwordLabel":     "Password",
+        "passwordHelp":      "Please enter your password",
+        "remember":          "Remember",
+        "forgotPassword":    "Forgot password?",
+        "loginButton":       "Login",
+        "loading":           "Loading...",
+        "noAccountYet":      "Don’t have an account yet?",
+        "newAccount":        "New Account"
+      },
+
+      "pexels": {
+        "photoCredit": "Photo by {{photographer}} on Pexels",
+        "videoCredit": "Video by {{name}} on Pexels",
+        "videoUnsupported": "Your browser does not support the video tag."
+      },
+
+      "footer": {
+        "copyright": "© {{year}} {{title}}. All rights reserved",
+        "privacy":   "Privacy Policy"
+      }
+    }
+  },
+  "components": {
+    "widgetCreator": {
+      "title": "Create Chart or Widget",
+      "helpText": "Describe your new widget or chart in natural language. For example: \"Number of admin users\" OR \"red chart with number of closed contracts grouped by month\"",
+      "settingsTitle": "Widget Creator Settings",
+      "settingsDescription": "What role are we showing and creating widgets for?",
+      "doneButton": "Done",
+      "loading": "Loading..."
+    },
+    "search": {
+      "placeholder": "Search",
+      "required": "Required",
+      "minLength": "Minimum length: {{count}} characters"
+    }
+  }
+}

frontend/public/locales/zh/common.json

@@ -0,0 +1,52 @@
+{
+  "pages": {
+    "dashboard": {
+      "pageTitle": "Dashboard",
+      "overview": "Overview",
+      "loadingWidgets": "Loading widgets...",
+      "loading": "Loading..."
+    },
+    "login": {
+      "pageTitle": "Login",
+
+      "form": {
+        "loginLabel":        "Login",
+        "loginHelp":         "Please enter your login",
+        "passwordLabel":     "Password",
+        "passwordHelp":      "Please enter your password",
+        "remember":          "Remember",
+        "forgotPassword":    "Forgot password?",
+        "loginButton":       "Login",
+        "loading":           "Loading...",
+        "noAccountYet":      "Don’t have an account yet?",
+        "newAccount":        "New Account"
+      },
+
+      "pexels": {
+        "photoCredit": "Photo by {{photographer}} on Pexels",
+        "videoCredit": "Video by {{name}} on Pexels",
+        "videoUnsupported": "Your browser does not support the video tag."
+      },
+
+      "footer": {
+        "copyright": "© {{year}} {{title}}. All rights reserved",
+        "privacy":   "Privacy Policy"
+      }
+    }
+  },
+  "components": {
+    "widgetCreator": {
+      "title": "Create Chart or Widget",
+      "helpText": "Describe your new widget or chart in natural language. For example: \"Number of admin users\" OR \"red chart with number of closed contracts grouped by month\"",
+      "settingsTitle": "Widget Creator Settings",
+      "settingsDescription": "What role are we showing and creating widgets for?",
+      "doneButton": "Done",
+      "loading": "Loading..."
+    },
+    "search": {
+      "placeholder": "Search",
+      "required": "Required",
+      "minLength": "Minimum length: {{count}} characters"
+    }
+  }
+}

frontend/src/components/LanguageSwitcher.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import Select, { components, SingleValueProps, OptionProps } from 'react-select';
+import { useTranslation } from 'react-i18next';
 
 type LanguageOption = { label: string; value: string };
 
 const LANGS: LanguageOption[] = [
-    { value: 'en', label: '🇬🇧 EN' },
+    { value: 'en', label: '🇬🇧 English' },
-    { value: 'fr', label: '🇫🇷 FR' },
+    { value: 'ms', label: '🇲🇾 Bahasa Melayu' },
-    { value: 'es', label: '🇪🇸 ES' },
+    { value: 'zh', label: '🇨🇳 中文 (Mandarin)' },
-    { value: 'de', label: '🇩🇪 DE' },
+    { value: 'ta', label: '🇮🇳 தமிழ் (Tamil)' },
 ];
 
 const Option = (props: OptionProps<LanguageOption, false>) => (
@@ -24,7 +25,8 @@ const SingleVal = (props: SingleValueProps<LanguageOption, false>) => (
 
 const LanguageSwitcher: React.FC = () => {
     const [mounted, setMounted]   = useState(false);
-    const [selected, setSelected] = useState<LanguageOption>(LANGS[0]);
+    const { i18n } = useTranslation();
+    const [selected, setSelected] = useState<LanguageOption>(LANGS.find(l => l.value === i18n.language) || LANGS[0]);
 
     useEffect(() => {
         setMounted(true);
@@ -33,18 +35,19 @@ const LanguageSwitcher: React.FC = () => {
     const handleChange = (opt: LanguageOption | null) => {
         if (!opt) return;
         setSelected(opt);
+        i18n.changeLanguage(opt.value);
     };
 
     if (!mounted) return null;
 
     return (
-        <div style={{ width: 88 }}>
+        <div style={{ width: 160 }}>
             <Select
                 value={selected}
                 options={LANGS}
                 onChange={handleChange}
                 isSearchable={false}
-                menuPlacement='top'
+                menuPlacement='bottom'
                 components={{
                     Option,
                     SingleValue: SingleVal,
@@ -53,32 +56,33 @@ const LanguageSwitcher: React.FC = () => {
                 styles={{
                     control: (base) => ({
                         ...base,
-                        minHeight: 28,
+                        minHeight: 32,
-                        height: 28,
+                        height: 32,
                         paddingTop: 0,
                         paddingBottom: 0,
                         borderColor: '#d1d5db',
                         cursor: 'pointer',
+                        borderRadius: '0.5rem',
+                        fontSize: '0.875rem'
                     }),
                     valueContainer: (base) => ({
                         ...base,
                         paddingTop: 0,
                         paddingBottom: 0,
-                        paddingLeft: 6,
+                        paddingLeft: 8,
                     }),
                     indicatorsContainer: (base) => ({
                         ...base,
-                        height: 24,
+                        height: 28,
                     }),
                     dropdownIndicator: (base) => ({
                         ...base,
-                        padding: 2,
+                        padding: 4,
                     }),
                     option: (base, state) => ({
                         ...base,
-                        paddingTop: 4,
+                        paddingTop: 6,
-                        paddingBottom: 4,
+                        paddingBottom: 6,
-                        height: 26,
                         fontSize: '0.875rem',
                         backgroundColor: state.isFocused ? '#f3f4f6' : 'white',
                         color: '#111827',

frontend/src/components/MiniMarket/ContactSection.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { mdiPhone, mdiWhatsapp, mdiMapMarker, mdiClock, mdiEarth } from '@mdi/js';
+import BaseIcon from '../BaseIcon';
+import BaseButton from '../BaseButton';
+
+interface ContactSectionProps {
+    shop?: any;
+}
+
+const ContactSection: React.FC<ContactSectionProps> = ({ shop }) => {
+    const { t } = useTranslation();
+    const shopName = shop?.name || 'Super Star Store';
+
+    return (
+        <section id="contact" className="py-32 bg-black overflow-hidden">
+            <div className="container mx-auto px-6">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-start">
+                    <div className="space-y-16">
+                        <div className="space-y-6">
+                            <div className="flex items-center gap-3">
+                                <div className="w-8 h-8 rounded-lg bg-yellow-400 flex items-center justify-center text-black">
+                                    <BaseIcon path={mdiEarth} size={20} />
+                                </div>
+                                <span className="text-[10px] font-black uppercase tracking-[0.4em] text-yellow-400">Location</span>
+                            </div>
+                            <h2 className="text-5xl md:text-7xl font-black text-white leading-none tracking-tighter uppercase">
+                                Visit Our <span className="text-green-500">Retail</span> Spot
+                            </h2>
+                            <p className="text-xl text-white/50 max-w-lg leading-relaxed font-medium">
+                                {t('miniMarket.contactSubtitle', { defaultValue: 'We are conveniently located in Taman Menglembu Impiana Adril. Stop by today or reach out via WhatsApp.' })}
+                            </p>
+                        </div>
+
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-12">
+                            <div className="flex gap-6 group">
+                                <div className="flex-shrink-0 w-14 h-14 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-yellow-400 group-hover:text-black transition-all duration-300">
+                                    <BaseIcon path={mdiMapMarker} size={28} />
+                                </div>
+                                <div className="space-y-2">
+                                    <h4 className="font-black text-xs uppercase tracking-widest text-white/30">{t('miniMarket.ourLocation', { defaultValue: 'Physical Hub' })}</h4>
+                                    <p className="text-white text-lg font-bold leading-tight uppercase tracking-tight">
+                                        {shop?.address_line_1 || '1-25, Laluan Menglembu Impiana 8'},<br />
+                                        {shop?.address_line_2 || 'Taman Menglembu Impiana Adril'},<br />
+                                        {shop?.postcode || '31450'} {shop?.city || 'Ipoh'}, {shop?.state || 'Perak'}
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex gap-6 group">
+                                <div className="flex-shrink-0 w-14 h-14 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-green-500 group-hover:text-black transition-all duration-300">
+                                    <BaseIcon path={mdiPhone} size={28} />
+                                </div>
+                                <div className="space-y-2">
+                                    <h4 className="font-black text-xs uppercase tracking-widest text-white/30">{t('miniMarket.callUs', { defaultValue: 'Direct Line' })}</h4>
+                                    <p className="text-white text-2xl font-black uppercase tracking-tighter">{shop?.phone_number || '+60 12-574 9390'}</p>
+                                </div>
+                            </div>
+
+                            <div className="flex gap-6 group col-span-1 sm:col-span-2">
+                                <div className="flex-shrink-0 w-14 h-14 rounded-2xl bg-green-500 text-black flex items-center justify-center shadow-lg shadow-green-500/20">
+                                    <BaseIcon path={mdiWhatsapp} size={28} />
+                                </div>
+                                <div className="space-y-4">
+                                    <div>
+                                        <h4 className="font-black text-xs uppercase tracking-widest text-green-500">{t('miniMarket.whatsappChat', { defaultValue: 'WhatsApp Orders' })}</h4>
+                                        <p className="text-white/50 text-sm font-medium leading-relaxed max-w-sm">
+                                            {t('miniMarket.orderNowViaWA', { defaultValue: 'Quickest way to check stock or place an order for pick-up.' })}
+                                        </p>
+                                    </div>
+                                    <BaseButton
+                                        href={`https://wa.me/${shop?.whatsapp_number || '60125749390'}`}
+                                        label={t('miniMarket.chatNow', { defaultValue: 'Start Chat' })}
+                                        className="px-8 py-3 rounded-full bg-white text-black text-[10px] font-black uppercase tracking-[0.2em] hover:bg-green-500 transition-colors"
+                                        target="_blank"
+                                    />
+                                </div>
+                            </div>
+
+                            <div className="flex gap-6 group">
+                                <div className="flex-shrink-0 w-14 h-14 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-yellow-400 group-hover:text-black transition-all duration-300">
+                                    <BaseIcon path={mdiClock} size={28} />
+                                </div>
+                                <div className="space-y-2">
+                                    <h4 className="font-black text-xs uppercase tracking-widest text-white/30">{t('miniMarket.openingHours', { defaultValue: 'Business Hours' })}</h4>
+                                    <p className="text-white text-lg font-bold uppercase tracking-tight">{shop?.opening_hours_text || 'Daily: 8:30 AM - 10:00 PM'}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="relative group lg:mt-12">
+                        {/* Unique Graphic: Border Animation */}
+                        <div className="absolute -inset-1 bg-gradient-to-r from-green-500 via-yellow-400 to-green-500 rounded-[40px] opacity-20 blur-xl group-hover:opacity-40 transition-opacity duration-700 animate-spin-slow"></div>
+                        <div className="relative bg-neutral-900 rounded-[36px] overflow-hidden shadow-2xl h-[600px] border border-white/10">
+                            <iframe
+                                src={shop?.google_maps_embed_url || "https://maps.google.com/maps?q=1-25, Laluan Menglembu Impiana 8, Taman Menglembu Impiana Adril, 31450 Ipoh, Perak&output=embed"}
+                                width="100%"
+                                height="100%"
+                                style={{ border: 0 }}
+                                allowFullScreen
+                                loading="lazy"
+                                referrerPolicy="no-referrer-when-downgrade"
+                                title={`${shopName} Location Map`}
+                                className="invert grayscale contrast-125 opacity-70 hover:opacity-100 hover:grayscale-0 hover:invert-0 transition-all duration-1000"
+                            ></iframe>
+                            
+                            {/* Dark Mode Map Overlay */}
+                            <div className="absolute inset-0 pointer-events-none border-[20px] border-neutral-950/20 rounded-[36px]"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ContactSection;

frontend/src/components/MiniMarket/Hero.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import BaseButton from '../BaseButton';
+import { mdiWhatsapp, mdiStar, mdiCircleSlice8 } from '@mdi/js';
+import { useTranslation } from 'react-i18next';
+import BaseIcon from '../BaseIcon';
+
+interface HeroProps {
+    shop?: any;
+}
+
+const Hero: React.FC<HeroProps> = ({ shop }) => {
+    const { t } = useTranslation();
+    const shopName = shop?.name || 'Super Star Store';
+    const tagline = shop?.tagline || 'Your Neighbourhood Choice in Ipoh';
+
+    return (
+        <section className="relative bg-black pt-32 pb-20 md:pt-48 md:pb-32 lg:pt-56 lg:pb-48 overflow-hidden">
+            {/* Unique Background Graphics */}
+            <div className="absolute top-0 right-0 w-1/2 h-full opacity-20 pointer-events-none">
+                <svg viewBox="0 0 500 500" className="w-full h-full text-green-500 fill-current animate-pulse-slow">
+                    <path d="M150,0 L500,0 L500,500 L0,500 Z" />
+                </svg>
+            </div>
+            <div className="absolute -top-24 -left-24 w-96 h-96 bg-yellow-400/10 rounded-full blur-[120px] animate-pulse-slow"></div>
+            <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-green-500/10 rounded-full blur-[150px] animate-pulse-slow delay-1000"></div>
+            
+            {/* Animated SVG Graphic Elements */}
+            <div className="absolute top-1/4 left-10 opacity-30 animate-bounce-slow">
+                <BaseIcon path={mdiCircleSlice8} size={48} className="text-yellow-400" />
+            </div>
+            <div className="absolute bottom-1/4 right-1/2 opacity-20 animate-spin-slow">
+                <BaseIcon path={mdiCircleSlice8} size={120} className="text-green-500" />
+            </div>
+
+            <div className="container mx-auto px-6 relative z-10">
+                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
+                    <div className="lg:col-span-7 space-y-10">
+                        <div className="flex items-center gap-4 animate-fade-in-up">
+                            <div className="inline-block px-4 py-1.5 rounded-full bg-green-500 text-black text-[10px] font-black tracking-[0.3em] uppercase">
+                                {shopName} • IPOH
+                            </div>
+                            <div className="flex items-center gap-1.5 bg-white/5 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10 shadow-2xl">
+                                <BaseIcon path={mdiStar} size={14} className="text-yellow-400" />
+                                <span className="text-xs font-black text-white">4.37</span>
+                                <span className="text-[10px] font-bold text-white/40 uppercase tracking-widest ml-1">Rating</span>
+                            </div>
+                        </div>
+                        
+                        <h1 className="text-5xl md:text-7xl lg:text-8xl font-black text-white leading-[0.9] tracking-tighter uppercase animate-fade-in-up delay-100">
+                            {tagline.split(' ').map((word, i) => (
+                                <span key={i} className={i % 2 === 1 ? 'text-yellow-400 block' : 'block'}>
+                                    {word}
+                                </span>
+                            ))}
+                        </h1>
+                        
+                        <p className="text-xl text-white/50 max-w-xl leading-relaxed font-medium animate-fade-in-up delay-200">
+                            {t('miniMarket.heroSubtitle', { defaultValue: 'Bringing you the freshest groceries, household essentials, and local delights right at your doorstep in Taman Menglembu Impiana Adril.' })}
+                        </p>
+                        
+                        <div className="flex flex-wrap gap-6 pt-4 animate-fade-in-up delay-300">
+                            <BaseButton
+                                href={`https://wa.me/${shop?.whatsapp_number || '60125749390'}?text=Hello ${shopName}! I would like to order some items.`}
+                                label={t('miniMarket.orderNow', { defaultValue: 'Order Now' })}
+                                icon={mdiWhatsapp}
+                                target="_blank"
+                                className="px-10 py-5 rounded-full bg-green-500 hover:bg-green-400 text-black text-sm font-black uppercase tracking-widest transition-all duration-300 transform hover:scale-110 shadow-[0_0_40px_rgba(34,197,94,0.3)]"
+                            />
+                            <BaseButton
+                                href="#products"
+                                label={t('miniMarket.viewCatalogue', { defaultValue: 'View Catalogue' })}
+                                className="px-10 py-5 rounded-full bg-white/10 hover:bg-white/20 text-white text-sm font-black uppercase tracking-widest transition-all duration-300 backdrop-blur-md"
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-3 gap-8 pt-12 border-t border-white/10 animate-fade-in-up delay-400">
+                            {[
+                                { label: 'Open Daily', value: '8:30 AM+' },
+                                { label: 'Delivery', value: 'WhatsApp' },
+                                { label: 'Service', value: 'Local' }
+                            ].map((stat, i) => (
+                                <div key={i} className="space-y-1">
+                                    <div className="text-[10px] font-black uppercase tracking-[0.2em] text-white/30">{stat.label}</div>
+                                    <div className="text-lg font-black text-white uppercase">{stat.value}</div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                    
+                    <div className="lg:col-span-5 relative group animate-fade-in-right">
+                        <div className="absolute -inset-4 bg-gradient-to-tr from-green-500 to-yellow-400 rounded-[40px] opacity-20 blur-2xl group-hover:opacity-40 transition-opacity duration-700"></div>
+                        <div className="relative rounded-[32px] overflow-hidden aspect-[4/5] shadow-2xl border border-white/10 rotate-2 group-hover:rotate-0 transition-transform duration-700">
+                            <img 
+                                src="https://images.pexels.com/photos/264636/pexels-photo-264636.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" 
+                                alt={shopName} 
+                                className="w-full h-full object-cover scale-110 group-hover:scale-100 transition-transform duration-700"
+                            />
+                            <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
+                            <div className="absolute bottom-8 left-8 right-8">
+                                <div className="p-6 bg-black/40 backdrop-blur-xl rounded-2xl border border-white/10 space-y-2 translate-y-4 group-hover:translate-y-0 transition-transform duration-700">
+                                    <div className="text-[10px] font-black uppercase tracking-widest text-green-400">Featured Store</div>
+                                    <div className="text-2xl font-black text-white uppercase leading-none">{shopName}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Hero;

frontend/src/components/MiniMarket/ProductCatalogue.tsx

@@ -0,0 +1,172 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useTranslation } from 'react-i18next';
+import BaseButton from '../BaseButton';
+import { mdiWhatsapp, mdiShoppingOutline, mdiFilterOutline } from '@mdi/js';
+import BaseIcon from '../BaseIcon';
+
+interface ProductCatalogueProps {
+    shop?: any;
+}
+
+const ProductCatalogue: React.FC<ProductCatalogueProps> = ({ shop }) => {
+    const { t, i18n } = useTranslation();
+    const [categories, setCategories] = useState<any[]>([]);
+    const [products, setProducts] = useState<any[]>([]);
+    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const [catRes, prodRes] = await Promise.all([
+                    axios.get('/product_categories'),
+                    axios.get('/products')
+                ]);
+                setCategories(catRes.data.rows);
+                setProducts(prodRes.data.rows);
+            } catch (err) {
+                console.error("Failed to fetch products/categories", err);
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchData();
+    }, []);
+
+    const filteredProducts = selectedCategory 
+        ? products.filter(p => p.categoryId === selectedCategory) 
+        : products;
+
+    const getTranslation = (item: any, entity: string) => {
+        if (!item) return '';
+        const translationArr = item[`${entity}_translations_${entity}`] || [];
+        const translation = translationArr.find((tr: any) => tr.language?.code === i18n.language) 
+            || translationArr.find((tr: any) => tr.language?.code === 'en')
+            || translationArr[0];
+        
+        return translation?.name || item.name || item.code || item.title || t(`miniMarket.unnamed${entity.charAt(0).toUpperCase() + entity.slice(1)}`);
+    };
+
+    if (loading) return <div className="py-40 text-center text-white/30 font-black uppercase tracking-[0.5em] animate-pulse">{t('miniMarket.loadingCatalogue', { defaultValue: 'Syncing Catalogue...' })}</div>;
+
+    const shopName = shop?.name || 'Super Star Store';
+
+    return (
+        <section id="products" className="py-32 bg-black overflow-hidden">
+            <div className="container mx-auto px-6">
+                <div className="flex flex-col lg:flex-row lg:items-end justify-between mb-20 gap-12">
+                    <div className="space-y-6">
+                        <div className="flex items-center gap-3">
+                            <div className="w-8 h-8 rounded-lg bg-green-500 flex items-center justify-center text-black">
+                                <BaseIcon path={mdiShoppingOutline} size={20} />
+                            </div>
+                            <span className="text-[10px] font-black uppercase tracking-[0.4em] text-green-500">Inventory</span>
+                        </div>
+                        <h2 className="text-5xl md:text-7xl font-black text-white leading-none tracking-tighter uppercase">
+                            Shop <span className="text-yellow-400">Essential</span> Items
+                        </h2>
+                    </div>
+                    
+                    <div className="flex flex-wrap gap-4 items-center">
+                        <div className="flex items-center gap-3 mr-4 text-white/30 font-black uppercase text-[10px] tracking-widest">
+                            <BaseIcon path={mdiFilterOutline} size={16} />
+                            <span>Filter By</span>
+                        </div>
+                        <button
+                            onClick={() => setSelectedCategory(null)}
+                            className={`px-8 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all duration-300 border-2 ${
+                                selectedCategory === null 
+                                    ? 'bg-yellow-400 border-yellow-400 text-black shadow-[0_0_30px_rgba(251,191,36,0.2)]' 
+                                    : 'bg-transparent border-white/10 text-white/50 hover:border-white/30'
+                            }`}
+                        >
+                            All
+                        </button>
+                        {categories.map((cat) => (
+                            <button
+                                key={cat.id}
+                                onClick={() => setSelectedCategory(cat.id)}
+                                className={`px-8 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all duration-300 border-2 ${
+                                    selectedCategory === cat.id 
+                                        ? 'bg-yellow-400 border-yellow-400 text-black shadow-[0_0_30px_rgba(251,191,36,0.2)]' 
+                                        : 'bg-transparent border-white/10 text-white/50 hover:border-white/30'
+                                }`}
+                            >
+                                {getTranslation(cat, 'product_category')}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Product Grid */}
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-12">
+                    {filteredProducts.length > 0 ? (
+                        filteredProducts.map((product) => (
+                            <div key={product.id} className="group relative bg-white/5 backdrop-blur-md rounded-[32px] overflow-hidden border border-white/10 transition-all duration-500 hover:-translate-y-4 hover:shadow-[0_40px_80px_rgba(0,0,0,0.5)] flex flex-col h-full">
+                                <div className="relative aspect-[5/4] overflow-hidden m-4 rounded-2xl bg-neutral-900 group-hover:rotate-1 transition-transform duration-500">
+                                    <img 
+                                        src={product.images?.[0]?.url || 'https://images.pexels.com/photos/113338/pexels-photo-113338.jpeg?auto=compress&cs=tinysrgb&w=600'} 
+                                        alt={getTranslation(product, 'product')} 
+                                        className="w-full h-full object-cover group-hover:scale-125 transition-transform duration-700 opacity-80 group-hover:opacity-100"
+                                    />
+                                    {product.compare_at_price_rm > product.price_rm && (
+                                        <div className="absolute top-4 right-4 bg-green-500 text-black text-[10px] font-black px-3 py-1.5 rounded-full uppercase tracking-widest shadow-xl">
+                                            Offer
+                                        </div>
+                                    )}
+                                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                                </div>
+                                
+                                <div className="p-8 space-y-6 flex-grow flex flex-col pt-2">
+                                    <div className="space-y-3 flex-grow">
+                                        <div className="text-[10px] text-green-400 font-black uppercase tracking-[0.2em] opacity-60">
+                                            {getTranslation(product.product_categories_product, 'product_category')}
+                                        </div>
+                                        <h3 className="text-2xl font-black text-white uppercase tracking-tighter leading-none group-hover:text-yellow-400 transition-colors">
+                                            {getTranslation(product, 'product')}
+                                        </h3>
+                                    </div>
+                                    
+                                    <div className="flex items-center justify-between gap-6 pt-6 border-t border-white/5">
+                                        <div className="flex flex-col">
+                                            {product.compare_at_price_rm > product.price_rm && (
+                                                <span className="text-[10px] text-white/20 font-black line-through mb-1">
+                                                    RM {Number(product.compare_at_price_rm).toFixed(2)}
+                                                </span>
+                                            )}
+                                            <span className="text-3xl font-black text-white group-hover:scale-110 transition-transform origin-left">
+                                                RM <span className="text-yellow-400">{Number(product.price_rm).toFixed(2)}</span>
+                                            </span>
+                                        </div>
+                                        
+                                        <BaseButton
+                                            href={`https://wa.me/${shop?.whatsapp_number || '60125749390'}?text=Hello ${shopName}! I would like to order: ${getTranslation(product, 'product')} (RM ${Number(product.price_rm).toFixed(2)})`}
+                                            icon={mdiWhatsapp}
+                                            target="_blank"
+                                            className="w-14 h-14 rounded-2xl bg-green-500 hover:bg-green-400 text-black transition-all duration-300 flex items-center justify-center p-0 shadow-lg shadow-green-500/20 transform hover:rotate-12"
+                                        />
+                                    </div>
+                                </div>
+                                
+                                {/* Hover Graphic Element */}
+                                <div className="absolute top-0 left-0 w-1 h-full bg-yellow-400 scale-y-0 group-hover:scale-y-100 transition-transform origin-top duration-500"></div>
+                            </div>
+                        ))
+                    ) : (
+                        <div className="col-span-full py-24 text-center rounded-[32px] border-2 border-dashed border-white/5 flex flex-col items-center justify-center gap-6">
+                            <div className="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center text-white/20">
+                                <BaseIcon path={mdiShoppingOutline} size={32} />
+                            </div>
+                            <span className="text-sm font-black uppercase tracking-[0.3em] text-white/20">
+                                {t('miniMarket.noProducts', { defaultValue: 'Empty inventory for this category.' })}
+                            </span>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ProductCatalogue;

frontend/src/components/MiniMarket/PromotionsBanner.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useTranslation } from 'react-i18next';
+import BaseButton from '../BaseButton';
+import { mdiArrowRight, mdiFire, mdiShoppingOutline } from '@mdi/js';
+import BaseIcon from '../BaseIcon';
+
+interface PromotionsBannerProps {
+    shop?: any;
+}
+
+const PromotionsBanner: React.FC<PromotionsBannerProps> = ({ shop }) => {
+    const { t, i18n } = useTranslation();
+    const [promotions, setPromotions] = useState<any[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchPromotions = async () => {
+            try {
+                const res = await axios.get('/promotions');
+                setPromotions(res.data.rows.filter((p: any) => p.is_active));
+            } catch (err) {
+                console.error("Failed to fetch promotions", err);
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchPromotions();
+    }, []);
+
+    const getTranslation = (item: any, entity: string) => {
+        if (!item) return '';
+        const translationArr = item[`${entity}_translations_${entity}`];
+        if (!translationArr) return item.name || item.title || '';
+        
+        const translation = translationArr.find((tr: any) => tr.language?.code === i18n.language) 
+            || translationArr.find((tr: any) => tr.language?.code === 'en')
+            || translationArr[0];
+            
+        return translation?.name || translation?.title || item.name || item.title || t(`miniMarket.unnamed${entity.charAt(0).toUpperCase() + entity.slice(1)}`);
+    };
+
+    if (loading || promotions.length === 0) return null;
+
+    const promo = promotions[0];
+
+    return (
+        <section className="relative py-24 bg-yellow-400 overflow-hidden group">
+            {/* Unique Graphic: Rotating Text / Stripes */}
+            <div className="absolute inset-0 opacity-10 pointer-events-none select-none overflow-hidden flex items-center justify-center">
+                <div className="text-[200px] font-black uppercase tracking-tighter text-black rotate-[-12deg] whitespace-nowrap animate-marquee">
+                    PROMO • DEALS • OFFERS • {shop?.name?.toUpperCase() || 'SUPER STAR STORE'} • PROMO • DEALS • OFFERS
+                </div>
+            </div>
+
+            <div className="container mx-auto px-6 relative z-10">
+                <div className="flex flex-col lg:flex-row items-center justify-between gap-16">
+                    <div className="flex-1 space-y-8 text-center lg:text-left">
+                        <div className="flex items-center justify-center lg:justify-start gap-4">
+                            <div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center text-yellow-400 shadow-xl group-hover:scale-110 transition-transform duration-500">
+                                <BaseIcon path={mdiFire} size={28} />
+                            </div>
+                            <span className="text-xs font-black uppercase tracking-[0.4em] text-black/50">
+                                {t('miniMarket.exclusiveOffer', { defaultValue: 'Exclusive Member Offer' })}
+                            </span>
+                        </div>
+                        
+                        <div className="space-y-4">
+                            <h2 className="text-5xl md:text-7xl font-black text-black leading-[0.9] tracking-tighter uppercase">
+                                {getTranslation(promo, 'promotion')}
+                            </h2>
+                            <p className="text-xl text-black/60 font-black uppercase tracking-widest max-w-2xl">
+                                {t('miniMarket.promoSubtitle', { defaultValue: 'Grab these deals before they are gone forever!' })}
+                            </p>
+                        </div>
+
+                        <div className="flex flex-wrap justify-center lg:justify-start gap-8 pt-4 text-black font-black uppercase text-xs tracking-widest">
+                            <div className="flex items-center gap-2">
+                                <div className="w-2 h-2 rounded-full bg-black"></div>
+                                <span>Free Delivery</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <div className="w-2 h-2 rounded-full bg-black"></div>
+                                <span>Low Prices</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <div className="w-2 h-2 rounded-full bg-black"></div>
+                                <span>Fresh Stock</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="shrink-0 animate-fade-in-right">
+                        <BaseButton
+                            href="#products"
+                            label={t('miniMarket.shopDeals', { defaultValue: 'Shop Now' })}
+                            icon={mdiShoppingOutline}
+                            className="px-16 py-8 rounded-full bg-black text-yellow-400 text-lg font-black uppercase tracking-[0.2em] shadow-2xl hover:scale-105 transition-all duration-300 transform group-hover:-translate-y-2 group-hover:rotate-1"
+                        />
+                    </div>
+                </div>
+            </div>
+            
+            {/* Unique Decorative Bar */}
+            <div className="absolute bottom-0 left-0 w-full h-2 bg-black"></div>
+        </section>
+    );
+};
+
+export default PromotionsBanner;

frontend/src/config.ts

@@ -8,7 +8,7 @@ export const localStorageStyleKey = 'style'
 
 export const containerMaxW = 'xl:max-w-full xl:mx-auto 2xl:mx-20'
 
-export const appTitle = 'created by Flatlogic generator!'
+export const appTitle = 'Super Star Store'
 
 export const getPageTitle = (currentPageTitle: string) => `${currentPageTitle} — ${appTitle}`
 

frontend/src/menuNavBar.ts

@@ -47,7 +47,10 @@ const menuNavBar: MenuNavBarItem[] = [
 ]
 
 export const webPagesNavBar = [
-    
+    { label: 'Home', href: '/' },
+    { label: 'Products', href: '/#products' },
+    { label: 'Contact', href: '/#contact' },
+    { label: 'Admin Login', href: '/login' },
 ];
 
 export default menuNavBar

frontend/src/pages/index.tsx

@@ -1,166 +1,212 @@
-
 import React, { useEffect, useState } from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
-import BaseButton from '../components/BaseButton';
-import CardBox from '../components/CardBox';
-import SectionFullScreen from '../components/SectionFullScreen';
 import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
 import { getPageTitle } from '../config';
-import { useAppSelector } from '../stores/hooks';
+import Hero from '../components/MiniMarket/Hero';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
+import ProductCatalogue from '../components/MiniMarket/ProductCatalogue';
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
+import PromotionsBanner from '../components/MiniMarket/PromotionsBanner';
+import ContactSection from '../components/MiniMarket/ContactSection';
+import LanguageSwitcher from '../components/LanguageSwitcher';
+import { useTranslation } from 'react-i18next';
+import { mdiStoreOutline, mdiMenu, mdiClose } from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
+import axios from 'axios';
 
+export default function Home() {
+    const { t } = useTranslation();
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [isScrolled, setIsScrolled] = useState(false);
+    const [shop, setShop] = useState<any>(null);
 
-export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('image');
-    const [contentPosition, setContentPosition] = useState('background');
-    const textColor = useAppSelector((state) => state.style.linkColor);
-
-    const title = 'Malaysian Mini Market Site'
-
-    // Fetch Pexels image/video
     useEffect(() => {
-        async function fetchData() {
+        const handleScroll = () => {
-            const image = await getPexelsImage();
+            setIsScrolled(window.scrollY > 20);
-            const video = await getPexelsVideo();
+        };
-            setIllustrationImage(image);
+        window.addEventListener('scroll', handleScroll);
-            setIllustrationVideo(video);
+        
+        // Fetch shop data
+        axios.get('/shops').then(res => {
+            if (res.data && res.data.rows && res.data.rows.length > 0) {
+                setShop(res.data.rows[0]);
             }
-        fetchData();
+        }).catch(err => console.error('Error fetching shop:', err));
+
+        return () => window.removeEventListener('scroll', handleScroll);
     }, []);
 
-    const imageBlock = (image) => (
+    const navLinks = [
-        <div
+        { label: t('nav.home', { defaultValue: 'Home' }), href: '#' },
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
+        { label: t('nav.products', { defaultValue: 'Products' }), href: '#products' },
-            style={{
+        { label: t('nav.contact', { defaultValue: 'Contact Us' }), href: '#contact' },
-                backgroundImage: `${
+    ];
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
-        </div>
-    );
 
-    const videoBlock = (video) => {
+    const shopName = shop?.name || 'Super Star Store';
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
-        }
-    };
 
     return (
-      <div
+        <div className="flex flex-col min-h-screen bg-black text-white scroll-smooth selection:bg-yellow-400 selection:text-black">
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
             <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+                <title>{getPageTitle(`${shopName} - Ipoh`)}</title>
+                <meta name="description" content={`${shopName} - Your neighbourhood convenience store in Ipoh, Perak. Order via WhatsApp.`} />
             </Head>
 
-      <SectionFullScreen bg='violet'>
+            {/* Header */}
-      <div
+            <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
-          className={`flex ${
+                isScrolled ? 'bg-black/90 backdrop-blur-xl border-b border-white/10 py-4' : 'bg-transparent py-6'
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
+            }`}>
-          } min-h-screen w-full`}
+                <div className="container mx-auto px-6">
+                    <div className="flex items-center justify-between">
+                        {/* Logo */}
+                        <Link href="/" className="flex items-center gap-3 group">
+                            <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center text-white font-bold text-xl group-hover:rotate-12 transition-all duration-300 shadow-lg shadow-green-500/20">
+                                <BaseIcon path={mdiStoreOutline} size={28} />
+                            </div>
+                            <div className="flex flex-col">
+                                <span className="text-2xl font-black tracking-tighter uppercase leading-none">
+                                    Super Star <span className="text-yellow-400">Store</span>
+                                </span>
+                                <span className="text-[10px] font-bold text-green-500 uppercase tracking-[0.2em] mt-1">Convenience • Quality</span>
+                            </div>
+                        </Link>
+
+                        {/* Desktop Nav */}
+                        <nav className="hidden lg:flex items-center gap-10">
+                            {navLinks.map((link) => (
+                                <Link 
+                                    key={link.label} 
+                                    href={link.href}
+                                    className="text-sm font-black uppercase tracking-widest text-white/70 hover:text-yellow-400 transition-all duration-300 hover:scale-110"
                                 >
-          {contentType === 'image' && contentPosition !== 'background'
+                                    {link.label}
-              ? imageBlock(illustrationImage)
+                                </Link>
-              : null}
+                            ))}
-          {contentType === 'video' && contentPosition !== 'background'
+                            <div className="h-4 w-px bg-white/10"></div>
-              ? videoBlock(illustrationVideo)
+                            <LanguageSwitcher />
-              : null}
+                            <Link 
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
+                                href="/login"
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
+                                className="px-8 py-3 rounded-full bg-white text-black text-xs font-black uppercase tracking-widest hover:bg-yellow-400 transition-all duration-300 transform hover:-translate-y-1 shadow-xl"
-            <CardBoxComponentTitle title="Welcome to your Malaysian Mini Market Site app!"/>
+                            >
+                                {t('auth.login', { defaultValue: 'Admin' })}
+                            </Link>
+                        </nav>
 
-            <div className="space-y-3">
+                        {/* Mobile Toggle */}
-                <p className='text-center '>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
+                        <button 
-                <p className='text-center '>For guides and documentation please check
+                            className="lg:hidden p-3 rounded-2xl bg-white/5 text-white hover:bg-white/10 transition-colors"
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
+                            onClick={() => setIsMenuOpen(!isMenuOpen)}
-            </div>
+                        >
-        
+                            <BaseIcon path={isMenuOpen ? mdiClose : mdiMenu} size={28} />
-            <BaseButtons>
+                        </button>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
-
-            </BaseButtons>
-        </CardBox>
                     </div>
                 </div>
-      </SectionFullScreen>
+
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
+                {/* Mobile Menu */}
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
+                {isMenuOpen && (
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
+                    <div className="lg:hidden fixed inset-0 z-50 bg-black flex flex-col items-center justify-center p-8 animate-fade-in">
-            Privacy Policy
+                        <button 
+                            className="absolute top-8 right-8 p-3 text-white"
+                            onClick={() => setIsMenuOpen(false)}
+                        >
+                            <BaseIcon path={mdiClose} size={32} />
+                        </button>
+                        <div className="flex flex-col gap-8 text-center">
+                            {navLinks.map((link) => (
+                                <Link 
+                                    key={link.label} 
+                                    href={link.href}
+                                    onClick={() => setIsMenuOpen(false)}
+                                    className="text-4xl font-black uppercase tracking-tighter hover:text-yellow-400 transition-colors"
+                                >
+                                    {link.label}
+                                </Link>
+                            ))}
+                            <div className="flex flex-col gap-6 mt-8">
+                                <LanguageSwitcher />
+                                <Link 
+                                    href="/login"
+                                    className="px-12 py-5 rounded-full bg-yellow-400 text-black font-black uppercase tracking-widest"
+                                >
+                                    {t('auth.login', { defaultValue: 'Admin Login' })}
                                 </Link>
                             </div>
+                        </div>
+                    </div>
+                )}
+            </header>
 
+            <main className="flex-grow">
+                <Hero shop={shop} />
+                <PromotionsBanner shop={shop} />
+                <div className="relative">
+                    <div className="absolute top-0 left-0 w-full h-24 bg-gradient-to-b from-black to-transparent z-10"></div>
+                    <ProductCatalogue shop={shop} />
+                </div>
+                <ContactSection shop={shop} />
+            </main>
+
+            {/* Footer */}
+            <footer className="bg-neutral-950 border-t border-white/5 pt-24 pb-12">
+                <div className="container mx-auto px-6">
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-16 mb-24">
+                        <div className="space-y-8">
+                            <Link href="/" className="flex items-center gap-3">
+                                <div className="w-12 h-12 rounded-2xl bg-green-600 flex items-center justify-center text-white font-bold text-xl">
+                                    <BaseIcon path={mdiStoreOutline} size={28} />
+                                </div>
+                                <span className="text-2xl font-black tracking-tighter uppercase leading-none">
+                                    Super Star <span className="text-yellow-400">Store</span>
+                                </span>
+                            </Link>
+                            <p className="text-white/50 leading-relaxed font-medium">
+                                {shop?.tagline || t('miniMarket.footerAbout', { defaultValue: 'Your trusted neighborhood convenience store in Ipoh, Perak. Providing quality products and friendly service since 2026.' })}
+                            </p>
+                        </div>
+                        <div className="space-y-8">
+                            <h4 className="font-black text-xs uppercase tracking-[0.3em] text-white/30">{t('footer.links', { defaultValue: 'Sitemap' })}</h4>
+                            <ul className="space-y-6 text-lg font-bold">
+                                {navLinks.map((link) => (
+                                    <li key={link.label}>
+                                        <Link href={link.href} className="hover:text-green-500 transition-colors">
+                                            {link.label}
+                                        </Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                        <div className="space-y-8">
+                            <h4 className="font-black text-xs uppercase tracking-[0.3em] text-white/30">{t('footer.categories', { defaultValue: 'Catalogue' })}</h4>
+                            <ul className="space-y-6 text-lg font-bold text-white/50">
+                                <li className="hover:text-white cursor-pointer transition-colors">{t('miniMarket.catDrinks', { defaultValue: 'Drinks' })}</li>
+                                <li className="hover:text-white cursor-pointer transition-colors">{t('miniMarket.catSnacks', { defaultValue: 'Snacks' })}</li>
+                                <li className="hover:text-white cursor-pointer transition-colors">{t('miniMarket.catGroceries', { defaultValue: 'Groceries' })}</li>
+                                <li className="hover:text-white cursor-pointer transition-colors">{t('miniMarket.catHousehold', { defaultValue: 'Household' })}</li>
+                            </ul>
+                        </div>
+                        <div className="space-y-8">
+                            <h4 className="font-black text-xs uppercase tracking-[0.3em] text-white/30">{t('footer.follow', { defaultValue: 'Connect' })}</h4>
+                            <div className="flex gap-4">
+                                {['fb', 'ig', 'wa'].map((social) => (
+                                    <div key={social} className="w-14 h-14 rounded-2xl bg-white/5 flex items-center justify-center hover:bg-yellow-400 hover:text-black cursor-pointer transition-all duration-300 group">
+                                        <span className="font-black uppercase text-xs group-hover:scale-125 transition-transform">{social}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                    <div className="pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-8 text-white/30 text-xs font-black uppercase tracking-widest">
+                        <p>© 2026 {shopName}. Crafted with Excellence.</p>
+                        <div className="flex gap-12">
+                            <Link href="/privacy-policy" className="hover:text-white transition-colors">{t('footer.privacy', { defaultValue: 'Privacy' })}</Link>
+                            <Link href="/terms-of-use" className="hover:text-white transition-colors">{t('footer.terms', { defaultValue: 'Terms' })}</Link>
+                        </div>
+                    </div>
+                </div>
+            </footer>
         </div>
     );
 }
 
-Starter.getLayout = function getLayout(page: ReactElement) {
+Home.getLayout = function getLayout(page: ReactElement) {
     return <LayoutGuest>{page}</LayoutGuest>;
 };
-

frontend/src/stores/styleSlice.ts

@@ -32,30 +32,30 @@ interface StyleState {
 
 
 const initialState: StyleState = {
-  asideStyle: styles.neonGreenTheme.aside,
+  asideStyle: styles.superStarTheme.aside,
-  asideScrollbarsStyle: styles.white.asideScrollbars,
+  asideScrollbarsStyle: styles.superStarTheme.asideScrollbars,
-  asideBrandStyle: styles.white.asideBrand,
+  asideBrandStyle: styles.superStarTheme.asideBrand,
-  asideMenuItemStyle: styles.neonGreenTheme.asideMenuItem,
+  asideMenuItemStyle: styles.superStarTheme.asideMenuItem,
-  asideMenuItemActiveStyle: styles.neonGreenTheme.asideMenuItemActive,
+  asideMenuItemActiveStyle: styles.superStarTheme.asideMenuItemActive,
-  activeLinkColor: styles.neonGreenTheme.activeLinkColor,
+  activeLinkColor: styles.superStarTheme.activeLinkColor,
-  asideMenuDropdownStyle: styles.white.asideMenuDropdown,
+  asideMenuDropdownStyle: styles.superStarTheme.asideMenuDropdown,
-  navBarItemLabelStyle: styles.neonGreenTheme.navBarItemLabel,
+  navBarItemLabelStyle: styles.superStarTheme.navBarItemLabel,
-  navBarItemLabelHoverStyle: styles.neonGreenTheme.navBarItemLabelHover,
+  navBarItemLabelHoverStyle: styles.superStarTheme.navBarItemLabelHover,
-  navBarItemLabelActiveColorStyle: styles.neonGreenTheme.navBarItemLabelActiveColor,
+  navBarItemLabelActiveColorStyle: styles.superStarTheme.navBarItemLabelActiveColor,
-  overlayStyle: styles.neonGreenTheme.overlay,
+  overlayStyle: styles.superStarTheme.overlay,
-  darkMode: false,
+  darkMode: true,
-  bgLayoutColor: styles.neonGreenTheme.bgLayoutColor,
+  bgLayoutColor: styles.superStarTheme.bgLayoutColor,
-  iconsColor: styles.neonGreenTheme.iconsColor,
+  iconsColor: styles.superStarTheme.iconsColor,
-  cardsColor: styles.neonGreenTheme.cardsColor,
+  cardsColor: styles.superStarTheme.cardsColor,
-  focusRingColor: styles.neonGreenTheme.focusRingColor,
+  focusRingColor: styles.superStarTheme.focusRingColor,
-  corners: styles.neonGreenTheme.corners,
+  corners: styles.superStarTheme.corners,
-  cardsStyle: styles.neonGreenTheme.cardsStyle,
+  cardsStyle: styles.superStarTheme.cardsStyle,
-  linkColor: styles.neonGreenTheme.linkColor,
+  linkColor: styles.superStarTheme.linkColor,
-  websiteHeder: styles.neonGreenTheme.websiteHeder,
+  websiteHeder: styles.superStarTheme.websiteHeder,
-  borders: styles.neonGreenTheme.borders,
+  borders: styles.superStarTheme.borders,
-  shadow: styles.neonGreenTheme.shadow,
+  shadow: styles.superStarTheme.shadow,
-  websiteSectionStyle: styles.neonGreenTheme.websiteSectionStyle,
+  websiteSectionStyle: styles.superStarTheme.websiteSectionStyle,
-  textSecondary: styles.neonGreenTheme.textSecondary,
+  textSecondary: styles.superStarTheme.textSecondary,
 };
 
 
@@ -80,6 +80,8 @@ export const styleSlice = createSlice({
     },
 
     setStyle: (state, action: PayloadAction<StyleKey>) => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       if (!styles[action.payload]) {
         return
       }
@@ -88,6 +90,8 @@ export const styleSlice = createSlice({
         localStorage.setItem(localStorageStyleKey, action.payload)
       }
 
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       const style = styles[action.payload]
 
       for (const key in style) {

frontend/src/styles.ts

@@ -50,8 +50,31 @@ export const white: StyleObject = {
   textSecondary: 'text-gray-500',
 }
 
-
+export const superStarTheme: StyleObject = {
-
+  aside: 'bg-black text-white border-r border-white/10',
+  asideScrollbars: 'aside-scrollbars-light',
+  asideBrand: 'bg-black text-yellow-400',
+  asideMenuItem: 'text-white/70 hover:text-yellow-400 hover:bg-white/5',
+  asideMenuItemActive: 'font-black text-yellow-400 bg-white/10',
+  asideMenuDropdown: 'bg-neutral-900',
+  navBarItemLabel: 'text-white/70',
+  navBarItemLabelHover: 'hover:text-yellow-400',
+  navBarItemLabelActiveColor: 'text-yellow-400',
+  overlay: 'bg-black/80 backdrop-blur-md',
+  activeLinkColor: 'bg-yellow-400 text-black rounded-xl',
+  bgLayoutColor: 'bg-black',
+  iconsColor: 'text-green-500',
+  cardsColor: 'bg-neutral-900',
+  focusRingColor: 'focus:ring-2 focus:ring-yellow-400 focus:outline-none border-white/10',
+  corners: 'rounded-[32px]',
+  cardsStyle: 'bg-neutral-900 border border-white/10 rounded-[32px] shadow-2xl',
+  linkColor: 'text-green-500',
+  websiteHeder: 'bg-black/90 backdrop-blur-xl border-b border-white/10',
+  borders: 'border-white/10',
+  shadow: 'shadow-[0_20px_50px_rgba(0,0,0,0.5)]',
+  websiteSectionStyle: 'bg-black text-white',
+  textSecondary: 'text-white/50',
+};
 
 export const neonGreenTheme: StyleObject = {
   aside: 'bg-neonGreenTheme-800 text-neonGreenTheme-text dark:text-white  border-r border-neonGreenTheme-outsideCardColor',