SUPER STAR STORE
This commit is contained in:
Flatlogic Bot
parent
7402bf3efc
commit
3bcd738cf8
@ -321,6 +321,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' }]
|
||||
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
@ -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]: [
|
||||
@ -408,6 +409,12 @@ module.exports = class ProductsDBApi {
|
||||
{
|
||||
model: db.file,
|
||||
as: 'images',
|
||||
},
|
||||
{
|
||||
model: db.product_translations,
|
||||
as: 'product_translations_product',
|
||||
include: [{ model: db.languages, as: 'language' }]
|
||||
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
@ -360,6 +360,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' }]
|
||||
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
@ -0,0 +1,52 @@
|
||||
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"
|
||||
];
|
||||
|
||||
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) {
|
||||
await queryInterface.bulkInsert("rolesPermissionsPermissions", rolesPermissions);
|
||||
}
|
||||
},
|
||||
|
||||
async down() {
|
||||
// Optional: remove the permissions
|
||||
},
|
||||
};
|
||||
114
backend/src/db/seeders/20260221000000-minimarket-sample.js
Normal file
114
backend/src/db/seeders/20260221000000-minimarket-sample.js
Normal file
@ -0,0 +1,114 @@
|
||||
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();
|
||||
|
||||
// Ensure languages exist or fetch them
|
||||
// For simplicity, I'll just insert everything needed
|
||||
|
||||
await queryInterface.bulkInsert("languages", [
|
||||
{ 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 },
|
||||
]);
|
||||
|
||||
await queryInterface.bulkInsert("product_categories", [
|
||||
{ id: catDrinkId, code: "Drinks", createdAt, updatedAt },
|
||||
{ id: catSnackId, code: "Snacks", createdAt, updatedAt },
|
||||
{ id: catGroceryId, code: "Groceries", createdAt, updatedAt },
|
||||
]);
|
||||
|
||||
await queryInterface.bulkInsert("category_translations", [
|
||||
{ id: uuid(), name: "Minuman", languageId: langMsId, categoryId: catDrinkId, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "饮料", languageId: langZhId, categoryId: catDrinkId, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "பானங்கள்", languageId: langTaId, categoryId: catDrinkId, createdAt, updatedAt },
|
||||
|
||||
{ id: uuid(), name: "Snek", languageId: langMsId, categoryId: catSnackId, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "零食", languageId: langZhId, categoryId: catSnackId, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "சிற்றுண்டி", languageId: langTaId, categoryId: catSnackId, createdAt, updatedAt },
|
||||
|
||||
{ id: uuid(), name: "Runcit", languageId: langMsId, categoryId: catGroceryId, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "杂货", languageId: langZhId, categoryId: catGroceryId, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "மளிகை", languageId: langTaId, 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,
|
||||
createdAt, updatedAt
|
||||
},
|
||||
{
|
||||
id: prod2Id,
|
||||
sku: "SNK-001",
|
||||
price_rm: 1.80,
|
||||
stock_quantity: 50,
|
||||
status: "active",
|
||||
categoryId: catSnackId,
|
||||
createdAt, updatedAt
|
||||
},
|
||||
{
|
||||
id: prod3Id,
|
||||
sku: "GRC-001",
|
||||
price_rm: 4.50,
|
||||
stock_quantity: 200,
|
||||
status: "active",
|
||||
categoryId: catGroceryId,
|
||||
createdAt, updatedAt
|
||||
},
|
||||
]);
|
||||
|
||||
await queryInterface.bulkInsert("product_translations", [
|
||||
{ id: uuid(), name: "Milo Can 240ml", languageId: langEnId, productId: prod1Id, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "Tin Milo 240ml", languageId: langMsId, productId: prod1Id, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "美禄罐装 240ml", languageId: langZhId, productId: prod1Id, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "மைலோ டின் 240மி", languageId: langTaId, productId: prod1Id, createdAt, updatedAt },
|
||||
|
||||
{ id: uuid(), name: "Mamee Monster Snack", languageId: langEnId, productId: prod2Id, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "Snek Mamee Monster", languageId: langMsId, productId: prod2Id, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "妈咪怪兽零食", languageId: langZhId, productId: prod2Id, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "மாமி மான்ஸ்டர் சிற்றுண்டி", languageId: langTaId, productId: prod2Id, createdAt, updatedAt },
|
||||
|
||||
{ id: uuid(), name: "Maggi Curry Noodles 5-Pack", languageId: langEnId, productId: prod3Id, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "Maggi Kari 5-Pek", languageId: langMsId, productId: prod3Id, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "美极咖喱面 5包入", languageId: langZhId, productId: prod3Id, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "மேகி கறி நூடுல்ஸ் 5-பேக்", languageId: langTaId, productId: prod3Id, createdAt, updatedAt },
|
||||
]);
|
||||
|
||||
const promoId = uuid();
|
||||
await queryInterface.bulkInsert("promotions", [
|
||||
{ id: promoId, title: "Ramadan Special Sale", status: "active", createdAt, updatedAt }
|
||||
]);
|
||||
|
||||
await queryInterface.bulkInsert("promotion_translations", [
|
||||
{ id: uuid(), title: "Jualan Khas Ramadan", languageId: langMsId, promotionId: promoId, createdAt, updatedAt },
|
||||
{ id: uuid(), title: "斋戒月特别大减价", languageId: langZhId, promotionId: promoId, createdAt, updatedAt },
|
||||
{ id: uuid(), title: "ரம்ஜான் சிறப்பு விற்பனை", languageId: langTaId, promotionId: promoId, createdAt, updatedAt },
|
||||
]);
|
||||
},
|
||||
|
||||
async down() {
|
||||
// Optional
|
||||
},
|
||||
};
|
||||
@ -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',
|
||||
|
||||
52
frontend/public/locales/ms/common.json
Normal file
52
frontend/public/locales/ms/common.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
52
frontend/public/locales/ta/common.json
Normal file
52
frontend/public/locales/ta/common.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
52
frontend/public/locales/zh/common.json
Normal file
52
frontend/public/locales/zh/common.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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: 'fr', label: '🇫🇷 FR' },
|
||||
{ value: 'es', label: '🇪🇸 ES' },
|
||||
{ value: 'de', label: '🇩🇪 DE' },
|
||||
{ value: 'en', label: '🇬🇧 English' },
|
||||
{ value: 'ms', label: '🇲🇾 Bahasa Melayu' },
|
||||
{ value: 'zh', label: '🇨🇳 中文 (Mandarin)' },
|
||||
{ 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,
|
||||
height: 28,
|
||||
minHeight: 32,
|
||||
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,
|
||||
paddingBottom: 4,
|
||||
height: 26,
|
||||
paddingTop: 6,
|
||||
paddingBottom: 6,
|
||||
fontSize: '0.875rem',
|
||||
backgroundColor: state.isFocused ? '#f3f4f6' : 'white',
|
||||
color: '#111827',
|
||||
@ -93,4 +97,4 @@ const LanguageSwitcher: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default LanguageSwitcher;
|
||||
export default LanguageSwitcher;
|
||||
105
frontend/src/components/MiniMarket/ContactSection.tsx
Normal file
105
frontend/src/components/MiniMarket/ContactSection.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { mdiPhone, mdiWhatsapp, mdiMapMarker, mdiClock } from '@mdi/js';
|
||||
import BaseIcon from '../BaseIcon';
|
||||
import BaseButton from '../BaseButton';
|
||||
|
||||
const ContactSection: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<section id="contact" className="py-20 md:py-32 bg-white dark:bg-slate-900 overflow-hidden">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
|
||||
<div className="space-y-10">
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-3xl md:text-5xl font-extrabold text-slate-900 dark:text-white leading-tight">
|
||||
{t('miniMarket.contactTitle', { defaultValue: 'Visit Super Star Store' })}
|
||||
</h2>
|
||||
<p className="text-lg text-slate-600 dark:text-slate-400 max-w-lg">
|
||||
{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-10">
|
||||
<div className="flex gap-5">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-2xl bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
|
||||
<BaseIcon path={mdiMapMarker} className="text-green-600 dark:text-green-400" size={24} />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h4 className="font-bold text-slate-900 dark:text-white">{t('miniMarket.ourLocation', { defaultValue: 'Our Location' })}</h4>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">
|
||||
1-25, Laluan Menglembu Impiana 8,<br />
|
||||
Taman Menglembu Impiana Adril,<br />
|
||||
31450 Ipoh, Perak
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-5">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-2xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
|
||||
<BaseIcon path={mdiPhone} className="text-blue-600 dark:text-blue-400" size={24} />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h4 className="font-bold text-slate-900 dark:text-white">{t('miniMarket.callUs', { defaultValue: 'Call Us' })}</h4>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-sm">+60 12-574 9390</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-5">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-2xl bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
|
||||
<BaseIcon path={mdiWhatsapp} className="text-green-600 dark:text-green-400" size={24} />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h4 className="font-bold text-slate-900 dark:text-white">{t('miniMarket.whatsappChat', { defaultValue: 'WhatsApp Chat' })}</h4>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">
|
||||
{t('miniMarket.orderNowViaWA', { defaultValue: 'Chat with us for orders & inquiries.' })}
|
||||
</p>
|
||||
<div className="pt-2">
|
||||
<BaseButton
|
||||
href="https://wa.me/60125749390"
|
||||
label={t('miniMarket.chatNow', { defaultValue: 'Chat Now' })}
|
||||
color="success"
|
||||
small
|
||||
target="_blank"
|
||||
className="rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-5">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-2xl bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center">
|
||||
<BaseIcon path={mdiClock} className="text-orange-600 dark:text-orange-400" size={24} />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h4 className="font-bold text-slate-900 dark:text-white">{t('miniMarket.openingHours', { defaultValue: 'Opening Hours' })}</h4>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-sm">{t('miniMarket.monSat', { defaultValue: 'Daily: 8:30 AM - 10:00 PM' })}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative group">
|
||||
<div className="absolute inset-0 bg-green-600 rounded-3xl translate-x-4 translate-y-4 -z-10 opacity-10 group-hover:translate-x-6 group-hover:translate-y-6 transition-transform"></div>
|
||||
<div className="bg-gray-200 dark:bg-slate-800 rounded-3xl overflow-hidden shadow-2xl h-[500px] border-8 border-white dark:border-slate-900">
|
||||
<iframe
|
||||
src="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="Super Star Store Location"
|
||||
className="grayscale hover:grayscale-0 transition-all duration-700"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactSection;
|
||||
76
frontend/src/components/MiniMarket/Hero.tsx
Normal file
76
frontend/src/components/MiniMarket/Hero.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
import React from 'react';
|
||||
import BaseButton from '../BaseButton';
|
||||
import { mdiWhatsapp, mdiStar } from '@mdi/js';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import BaseIcon from '../BaseIcon';
|
||||
|
||||
const Hero: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<section className="bg-white dark:bg-slate-900 py-12 md:py-20 lg:py-24 border-b border-gray-100 dark:border-slate-800">
|
||||
<div className="container mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="inline-block px-3 py-1 rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-sm font-semibold tracking-wider uppercase">
|
||||
{t('miniMarket.freshLocalFriendly', { defaultValue: 'Super Star Store - Ipoh' })}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 bg-yellow-50 dark:bg-yellow-900/20 px-2 py-1 rounded-lg border border-yellow-200 dark:border-yellow-800/50">
|
||||
<BaseIcon path={mdiStar} size={14} className="text-yellow-500" />
|
||||
<span className="text-xs font-bold text-yellow-700 dark:text-yellow-500">4.37</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-slate-900 dark:text-white leading-tight">
|
||||
{t('miniMarket.heroTitle', { defaultValue: 'Your Neighbourhood Choice in Ipoh' })}
|
||||
</h1>
|
||||
<p className="text-lg text-slate-600 dark:text-slate-400 max-w-lg">
|
||||
{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-4 pt-2">
|
||||
<BaseButton
|
||||
href="https://wa.me/60125749390?text=Hello Super Star Store! I would like to order some items."
|
||||
label={t('miniMarket.orderNow', { defaultValue: 'Order via WhatsApp' })}
|
||||
color="success"
|
||||
icon={mdiWhatsapp}
|
||||
target="_blank"
|
||||
className="px-8 py-4 rounded-xl text-lg shadow-lg shadow-green-200 dark:shadow-none"
|
||||
/>
|
||||
<BaseButton
|
||||
href="#products"
|
||||
label={t('miniMarket.browseProducts', { defaultValue: 'Browse Catalogue' })}
|
||||
color="white"
|
||||
className="px-8 py-4 rounded-xl text-lg border border-gray-200"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-6 pt-4 text-sm text-slate-500 font-medium">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-green-500"></span>
|
||||
{t('miniMarket.openDaily', { defaultValue: 'Open Daily' })}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-green-500"></span>
|
||||
{t('miniMarket.bestPrices', { defaultValue: 'Friendly Service' })}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-green-500"></span>
|
||||
{t('miniMarket.fastOrder', { defaultValue: 'Fast Order via WhatsApp' })}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="absolute -top-4 -left-4 w-72 h-72 bg-green-100 dark:bg-green-900/20 rounded-full mix-blend-multiply filter blur-2xl opacity-70 animate-blob"></div>
|
||||
<div className="absolute -bottom-4 -right-4 w-72 h-72 bg-yellow-100 dark:bg-yellow-900/20 rounded-full mix-blend-multiply filter blur-2xl opacity-70 animate-blob animation-delay-2000"></div>
|
||||
<div className="relative rounded-3xl overflow-hidden shadow-2xl">
|
||||
<img
|
||||
src="https://images.pexels.com/photos/264636/pexels-photo-264636.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
|
||||
alt="Super Star Store"
|
||||
className="w-full h-auto object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
156
frontend/src/components/MiniMarket/ProductCatalogue.tsx
Normal file
156
frontend/src/components/MiniMarket/ProductCatalogue.tsx
Normal file
@ -0,0 +1,156 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import BaseButton from '../BaseButton';
|
||||
import { mdiWhatsapp, mdiCartOutline } from '@mdi/js';
|
||||
|
||||
const ProductCatalogue: React.FC = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [categories, setCategories] = useState([]);
|
||||
const [products, setProducts] = useState([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState(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, entity) => {
|
||||
if (!item) return '';
|
||||
const translationArr = item[`${entity}_translations_${entity}`] || [];
|
||||
const translation = translationArr.find(tr => tr.language?.code === i18n.language)
|
||||
|| translationArr.find(tr => 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-20 text-center text-slate-500">{t('miniMarket.loadingProducts', { defaultValue: 'Loading products...' })}</div>;
|
||||
|
||||
return (
|
||||
<section id="products" className="py-16 md:py-24 bg-gray-50 dark:bg-slate-800/50">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white">
|
||||
{t('miniMarket.ourCatalogue', { defaultValue: 'Explore Our Catalogue' })}
|
||||
</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400 max-w-2xl">
|
||||
{t('miniMarket.catalogueSubtitle', { defaultValue: 'Fresh items and daily essentials available for pick-up or WhatsApp order.' })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Categories Filter */}
|
||||
<div className="flex flex-wrap gap-3 mb-10 overflow-x-auto pb-4 scrollbar-hide">
|
||||
<button
|
||||
onClick={() => setSelectedCategory(null)}
|
||||
className={`px-6 py-2.5 rounded-full text-sm font-semibold transition-all duration-200 border ${
|
||||
selectedCategory === null
|
||||
? 'bg-green-600 border-green-600 text-white shadow-lg shadow-green-200 dark:shadow-none'
|
||||
: 'bg-white dark:bg-slate-900 border-gray-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:border-green-500'
|
||||
}`}
|
||||
>
|
||||
{t('miniMarket.allCategories', { defaultValue: 'All Categories' })}
|
||||
</button>
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setSelectedCategory(cat.id)}
|
||||
className={`px-6 py-2.5 rounded-full text-sm font-semibold transition-all duration-200 border ${
|
||||
selectedCategory === cat.id
|
||||
? 'bg-green-600 border-green-600 text-white shadow-lg shadow-green-200 dark:shadow-none'
|
||||
: 'bg-white dark:bg-slate-900 border-gray-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:border-green-500'
|
||||
}`}
|
||||
>
|
||||
{getTranslation(cat, 'product_category')}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Product Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
|
||||
{filteredProducts.length > 0 ? (
|
||||
filteredProducts.map((product) => (
|
||||
<div key={product.id} className="group bg-white dark:bg-slate-900 rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-slate-800 flex flex-col h-full">
|
||||
<div className="relative aspect-square overflow-hidden bg-gray-100 dark:bg-slate-800">
|
||||
<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-110 transition-transform duration-500"
|
||||
/>
|
||||
{product.compare_at_price_rm > product.price_rm && (
|
||||
<div className="absolute top-4 left-4 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">
|
||||
{t('miniMarket.onSale', { defaultValue: 'SALE' })}
|
||||
</div>
|
||||
)}
|
||||
{product.stock_quantity <= 0 && (
|
||||
<div className="absolute inset-0 bg-slate-900/60 backdrop-blur-[2px] flex items-center justify-center">
|
||||
<span className="bg-white text-slate-900 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">
|
||||
{t('miniMarket.outOfStock', { defaultValue: 'Out of Stock' })}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-6 space-y-4 flex-grow flex flex-col">
|
||||
<div className="space-y-2 flex-grow">
|
||||
<div className="text-xs text-green-600 dark:text-green-400 font-bold uppercase tracking-wider">
|
||||
{getTranslation(product.category, 'product_category')}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-slate-900 dark:text-white line-clamp-2 min-h-[3.5rem]">
|
||||
{getTranslation(product, 'product')}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex flex-col">
|
||||
{product.compare_at_price_rm > product.price_rm && (
|
||||
<span className="text-xs text-slate-400 line-through">
|
||||
RM {Number(product.compare_at_price_rm).toFixed(2)}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-xl font-extrabold text-green-600 dark:text-green-400">
|
||||
RM {Number(product.price_rm).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<BaseButton
|
||||
href={`https://wa.me/60123456789?text=Hello! I would like to order: ${getTranslation(product, 'product')} (RM ${Number(product.price_rm).toFixed(2)})`}
|
||||
color="success"
|
||||
icon={mdiWhatsapp}
|
||||
small
|
||||
target="_blank"
|
||||
className="px-4 py-2 rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="col-span-full py-12 text-center text-slate-500 bg-white dark:bg-slate-900 rounded-2xl border border-dashed border-gray-300 dark:border-slate-700">
|
||||
{t('miniMarket.noProducts', { defaultValue: 'No products found in this category.' })}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductCatalogue;
|
||||
69
frontend/src/components/MiniMarket/PromotionsBanner.tsx
Normal file
69
frontend/src/components/MiniMarket/PromotionsBanner.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import BaseButton from '../BaseButton';
|
||||
import { mdiArrowRight } from '@mdi/js';
|
||||
|
||||
const PromotionsBanner: React.FC = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [promotions, setPromotions] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPromotions = async () => {
|
||||
try {
|
||||
const res = await axios.get('/promotions');
|
||||
setPromotions(res.data.rows.filter(p => p.status === 'active'));
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch promotions", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchPromotions();
|
||||
}, []);
|
||||
|
||||
const getTranslation = (item, entity) => {
|
||||
if (!item) return '';
|
||||
const translation = item[`${entity}_translations_${entity}`]?.find(tr => tr.language?.code === i18n.language)
|
||||
|| item[`${entity}_translations_${entity}`]?.find(tr => tr.language?.code === 'en')
|
||||
|| item[`${entity}_translations_${entity}`]?.[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;
|
||||
|
||||
return (
|
||||
<section className="py-12 bg-green-600 dark:bg-green-700 overflow-hidden relative">
|
||||
<div className="absolute top-0 left-0 w-32 h-32 bg-green-500/30 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
|
||||
<div className="absolute bottom-0 right-0 w-64 h-64 bg-green-400/20 rounded-full blur-3xl translate-x-1/4 translate-y-1/4"></div>
|
||||
|
||||
<div className="container mx-auto px-6 relative z-10">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-8">
|
||||
<div className="space-y-4 text-center md:text-left">
|
||||
<div className="inline-block px-3 py-1 rounded-full bg-white/20 text-white text-xs font-bold uppercase tracking-wider">
|
||||
{t('miniMarket.hotDeals', { defaultValue: 'Limited Time Offer' })}
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-extrabold text-white leading-tight">
|
||||
{getTranslation(promotions[0], 'promotion')}
|
||||
</h2>
|
||||
<p className="text-green-100 text-lg max-w-xl">
|
||||
{t('miniMarket.promoText', { defaultValue: 'Check out our latest deals and save more on your daily essentials today!' })}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex shrink-0">
|
||||
<BaseButton
|
||||
href="#products"
|
||||
label={t('miniMarket.viewDeals', { defaultValue: 'View Deals Now' })}
|
||||
color="white"
|
||||
icon={mdiArrowRight}
|
||||
className="px-10 py-4 rounded-xl text-lg font-bold shadow-2xl shadow-green-900/40 text-green-700"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromotionsBanner;
|
||||
@ -8,8 +8,8 @@ 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}`
|
||||
|
||||
export const tinyKey = process.env.NEXT_PUBLIC_TINY_KEY || ''
|
||||
export const tinyKey = process.env.NEXT_PUBLIC_TINY_KEY || ''
|
||||
@ -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
|
||||
export default menuNavBar
|
||||
@ -1,166 +1,183 @@
|
||||
|
||||
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 CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
||||
import Hero from '../components/MiniMarket/Hero';
|
||||
import ProductCatalogue from '../components/MiniMarket/ProductCatalogue';
|
||||
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';
|
||||
|
||||
export default function Home() {
|
||||
const { t } = useTranslation();
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
|
||||
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 image = await getPexelsImage();
|
||||
const video = await getPexelsVideo();
|
||||
setIllustrationImage(image);
|
||||
setIllustrationVideo(video);
|
||||
}
|
||||
fetchData();
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const imageBlock = (image) => (
|
||||
<div
|
||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
||||
style={{
|
||||
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>
|
||||
const navLinks = [
|
||||
{ label: t('nav.home', { defaultValue: 'Home' }), href: '#' },
|
||||
{ label: t('nav.products', { defaultValue: 'Products' }), href: '#products' },
|
||||
{ label: t('nav.contact', { defaultValue: 'Contact Us' }), href: '#contact' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen bg-white dark:bg-slate-900 scroll-smooth">
|
||||
<Head>
|
||||
<title>{getPageTitle('Super Star Store - Ipoh')}</title>
|
||||
<meta name="description" content="Super Star Store - Your neighbourhood convenience store in Ipoh, Perak. Order via WhatsApp." />
|
||||
</Head>
|
||||
|
||||
{/* Header */}
|
||||
<header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||
isScrolled ? 'bg-white/80 dark:bg-slate-900/80 backdrop-blur-md shadow-sm' : 'bg-transparent'
|
||||
}`}>
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex items-center justify-between h-20 md:h-24">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center gap-2 group">
|
||||
<div className="w-10 h-10 rounded-xl bg-green-600 flex items-center justify-center text-white font-bold text-xl group-hover:scale-110 transition-transform">
|
||||
<BaseIcon path={mdiStoreOutline} size={24} />
|
||||
</div>
|
||||
<span className="text-xl font-black text-slate-900 dark:text-white tracking-tight uppercase">
|
||||
Super Star <span className="text-green-600 italic">Store</span>
|
||||
</span>
|
||||
</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-bold text-slate-600 dark:text-slate-300 hover:text-green-600 dark:hover:text-green-400 transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
<div className="h-6 w-px bg-gray-200 dark:bg-slate-800"></div>
|
||||
<LanguageSwitcher />
|
||||
<Link
|
||||
href="/login"
|
||||
className="px-6 py-2.5 rounded-xl bg-slate-900 dark:bg-white text-white dark:text-slate-900 text-sm font-bold hover:bg-slate-800 dark:hover:bg-slate-100 transition-all"
|
||||
>
|
||||
{t('auth.login', { defaultValue: 'Admin Login' })}
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Toggle */}
|
||||
<button
|
||||
className="lg:hidden p-2 text-slate-600 dark:text-slate-300"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
<BaseIcon path={isMenuOpen ? mdiClose : mdiMenu} size={28} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMenuOpen && (
|
||||
<div className="lg:hidden absolute top-full left-0 right-0 bg-white dark:bg-slate-900 border-b border-gray-100 dark:border-slate-800 shadow-xl p-6 space-y-6 flex flex-col items-center">
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="text-lg font-bold text-slate-900 dark:text-white"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
<div className="w-full h-px bg-gray-100 dark:bg-slate-800"></div>
|
||||
<LanguageSwitcher />
|
||||
<Link
|
||||
href="/login"
|
||||
className="w-full text-center py-4 rounded-xl bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold"
|
||||
>
|
||||
{t('auth.login', { defaultValue: 'Admin Login' })}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<main className="flex-grow">
|
||||
<Hero />
|
||||
<PromotionsBanner />
|
||||
<ProductCatalogue />
|
||||
<ContactSection />
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-slate-900 dark:bg-black text-white pt-20 pb-10">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-20">
|
||||
<div className="space-y-6">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-10 h-10 rounded-xl bg-green-600 flex items-center justify-center text-white font-bold text-xl">
|
||||
<BaseIcon path={mdiStoreOutline} size={24} />
|
||||
</div>
|
||||
<span className="text-xl font-black tracking-tight uppercase">
|
||||
Super Star <span className="text-green-600 italic">Store</span>
|
||||
</span>
|
||||
</Link>
|
||||
<p className="text-slate-400 leading-relaxed">
|
||||
{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-6">
|
||||
<h4 className="font-bold text-lg">{t('footer.links', { defaultValue: 'Quick Links' })}</h4>
|
||||
<ul className="space-y-4 text-slate-400">
|
||||
{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-6">
|
||||
<h4 className="font-bold text-lg">{t('footer.categories', { defaultValue: 'Top Categories' })}</h4>
|
||||
<ul className="space-y-4 text-slate-400">
|
||||
<li>{t('miniMarket.catDrinks', { defaultValue: 'Drinks' })}</li>
|
||||
<li>{t('miniMarket.catSnacks', { defaultValue: 'Snacks' })}</li>
|
||||
<li>{t('miniMarket.catGroceries', { defaultValue: 'Groceries' })}</li>
|
||||
<li>{t('miniMarket.catHousehold', { defaultValue: 'Household' })}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<h4 className="font-bold text-lg">{t('footer.follow', { defaultValue: 'Follow Us' })}</h4>
|
||||
<div className="flex gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-green-600 cursor-pointer transition-colors">f</div>
|
||||
<div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-green-600 cursor-pointer transition-colors">i</div>
|
||||
<div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-green-600 cursor-pointer transition-colors">w</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-10 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-500 text-sm font-medium">
|
||||
<p>© 2026 Super Star Store Convenience Store. All rights reserved.</p>
|
||||
<div className="flex gap-10">
|
||||
<Link href="/privacy-policy" className="hover:text-white">{t('footer.privacy', { defaultValue: 'Privacy Policy' })}</Link>
|
||||
<Link href="/terms-of-use" className="hover:text-white">{t('footer.terms', { defaultValue: 'Terms & Conditions' })}</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
|
||||
const videoBlock = (video) => {
|
||||
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
|
||||
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>
|
||||
</Head>
|
||||
|
||||
<SectionFullScreen bg='violet'>
|
||||
<div
|
||||
className={`flex ${
|
||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
||||
} min-h-screen w-full`}
|
||||
>
|
||||
{contentType === 'image' && contentPosition !== 'background'
|
||||
? imageBlock(illustrationImage)
|
||||
: null}
|
||||
{contentType === 'video' && contentPosition !== 'background'
|
||||
? videoBlock(illustrationVideo)
|
||||
: null}
|
||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
||||
<CardBoxComponentTitle title="Welcome to your Malaysian Mini Market Site app!"/>
|
||||
|
||||
<div className="space-y-3">
|
||||
<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>
|
||||
<p className='text-center '>For guides and documentation please check
|
||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
||||
</div>
|
||||
|
||||
<BaseButtons>
|
||||
<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'>
|
||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
Home.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user