PREM
This commit is contained in:
Flatlogic Bot
parent
3bcd738cf8
commit
c7d62cba01
@ -1,4 +1,4 @@
|
||||
|
||||
require('dotenv').config();
|
||||
|
||||
module.exports = {
|
||||
production: {
|
||||
@ -12,11 +12,12 @@ module.exports = {
|
||||
seederStorage: 'sequelize',
|
||||
},
|
||||
development: {
|
||||
username: 'postgres',
|
||||
dialect: 'postgres',
|
||||
password: '',
|
||||
database: 'db_malaysian_mini_market_site',
|
||||
host: process.env.DB_HOST || 'localhost',
|
||||
username: process.env.DB_USER,
|
||||
password: process.env.DB_PASS,
|
||||
database: process.env.DB_NAME,
|
||||
host: process.env.DB_HOST,
|
||||
port: process.env.DB_PORT,
|
||||
logging: console.log,
|
||||
seederStorage: 'sequelize',
|
||||
},
|
||||
@ -30,4 +31,4 @@ module.exports = {
|
||||
logging: console.log,
|
||||
seederStorage: 'sequelize',
|
||||
}
|
||||
};
|
||||
};
|
||||
@ -22,7 +22,8 @@ module.exports = {
|
||||
"hero_translations",
|
||||
"languages",
|
||||
"site_assets",
|
||||
"file"
|
||||
"file",
|
||||
"shops"
|
||||
];
|
||||
|
||||
const [permissions] = await queryInterface.sequelize.query(
|
||||
@ -42,6 +43,10 @@ module.exports = {
|
||||
}));
|
||||
|
||||
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);
|
||||
}
|
||||
},
|
||||
@ -49,4 +54,4 @@ module.exports = {
|
||||
async down() {
|
||||
// Optional: remove the permissions
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@ -14,34 +14,71 @@ module.exports = {
|
||||
const langZhId = uuid();
|
||||
const langTaId = uuid();
|
||||
|
||||
// Ensure languages exist or fetch them
|
||||
// For simplicity, I'll just insert everything needed
|
||||
|
||||
await queryInterface.bulkInsert("languages", [
|
||||
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", createdAt, updatedAt },
|
||||
{ id: catSnackId, code: "Snacks", createdAt, updatedAt },
|
||||
{ id: catGroceryId, code: "Groceries", createdAt, updatedAt },
|
||||
{ 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: 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: "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: 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: "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: langMsId, categoryId: catGroceryId, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "杂货", languageId: langZhId, categoryId: catGroceryId, createdAt, updatedAt },
|
||||
{ id: uuid(), name: "மளிகை", languageId: langTaId, categoryId: catGroceryId, 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();
|
||||
@ -57,6 +94,7 @@ module.exports = {
|
||||
stock_quantity: 100,
|
||||
status: "active",
|
||||
categoryId: catDrinkId,
|
||||
shopId,
|
||||
createdAt, updatedAt
|
||||
},
|
||||
{
|
||||
@ -66,6 +104,7 @@ module.exports = {
|
||||
stock_quantity: 50,
|
||||
status: "active",
|
||||
categoryId: catSnackId,
|
||||
shopId,
|
||||
createdAt, updatedAt
|
||||
},
|
||||
{
|
||||
@ -75,36 +114,38 @@ module.exports = {
|
||||
stock_quantity: 200,
|
||||
status: "active",
|
||||
categoryId: catGroceryId,
|
||||
shopId,
|
||||
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: "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: 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: "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: 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 },
|
||||
{ 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, title: "Ramadan Special Sale", status: "active", createdAt, updatedAt }
|
||||
{ id: promoId, promotion_type: "general", is_active: true, shopId, 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 },
|
||||
{ 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 },
|
||||
]);
|
||||
},
|
||||
|
||||
|
||||
@ -1,99 +1,112 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { mdiPhone, mdiWhatsapp, mdiMapMarker, mdiClock } from '@mdi/js';
|
||||
import { mdiPhone, mdiWhatsapp, mdiMapMarker, mdiClock, mdiEarth } from '@mdi/js';
|
||||
import BaseIcon from '../BaseIcon';
|
||||
import BaseButton from '../BaseButton';
|
||||
|
||||
const ContactSection: React.FC = () => {
|
||||
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-20 md:py-32 bg-white dark:bg-slate-900 overflow-hidden">
|
||||
<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-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' })}
|
||||
<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-lg text-slate-600 dark:text-slate-400 max-w-lg">
|
||||
<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-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 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-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
|
||||
<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-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 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-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 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-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 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-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 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-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 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-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 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">
|
||||
<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">
|
||||
<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="https://maps.google.com/maps?q=1-25, Laluan Menglembu Impiana 8, Taman Menglembu Impiana Adril, 31450 Ipoh, Perak&output=embed"
|
||||
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="Super Star Store Location"
|
||||
className="grayscale hover:grayscale-0 transition-all duration-700"
|
||||
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>
|
||||
@ -102,4 +115,4 @@ const ContactSection: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactSection;
|
||||
export default ContactSection;
|
||||
|
||||
@ -1,71 +1,108 @@
|
||||
import React from 'react';
|
||||
import BaseButton from '../BaseButton';
|
||||
import { mdiWhatsapp, mdiStar } from '@mdi/js';
|
||||
import { mdiWhatsapp, mdiStar, mdiCircleSlice8 } from '@mdi/js';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import BaseIcon from '../BaseIcon';
|
||||
|
||||
const Hero: React.FC = () => {
|
||||
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="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' })}
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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 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 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>
|
||||
@ -73,4 +110,4 @@ const Hero: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
export default Hero;
|
||||
@ -2,13 +2,18 @@ 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';
|
||||
import { mdiWhatsapp, mdiShoppingOutline, mdiFilterOutline } from '@mdi/js';
|
||||
import BaseIcon from '../BaseIcon';
|
||||
|
||||
const ProductCatalogue: React.FC = () => {
|
||||
interface ProductCatalogueProps {
|
||||
shop?: any;
|
||||
}
|
||||
|
||||
const ProductCatalogue: React.FC<ProductCatalogueProps> = ({ shop }) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [categories, setCategories] = useState([]);
|
||||
const [products, setProducts] = useState([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState(null);
|
||||
const [categories, setCategories] = useState<any[]>([]);
|
||||
const [products, setProducts] = useState<any[]>([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
@ -33,118 +38,129 @@ const ProductCatalogue: React.FC = () => {
|
||||
? products.filter(p => p.categoryId === selectedCategory)
|
||||
: products;
|
||||
|
||||
const getTranslation = (item, entity) => {
|
||||
const getTranslation = (item: any, entity: string) => {
|
||||
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')
|
||||
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-20 text-center text-slate-500">{t('miniMarket.loadingProducts', { defaultValue: 'Loading products...' })}</div>;
|
||||
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-16 md:py-24 bg-gray-50 dark:bg-slate-800/50">
|
||||
<section id="products" className="py-32 bg-black overflow-hidden">
|
||||
<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' })}
|
||||
<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>
|
||||
<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 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>
|
||||
|
||||
{/* 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">
|
||||
<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 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">
|
||||
<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-110 transition-transform duration-500"
|
||||
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 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 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-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 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-lg font-bold text-slate-900 dark:text-white line-clamp-2 min-h-[3.5rem]">
|
||||
<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-4">
|
||||
|
||||
<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-xs text-slate-400 line-through">
|
||||
<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-xl font-extrabold text-green-600 dark:text-green-400">
|
||||
RM {Number(product.price_rm).toFixed(2)}
|
||||
<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/60123456789?text=Hello! I would like to order: ${getTranslation(product, 'product')} (RM ${Number(product.price_rm).toFixed(2)})`}
|
||||
color="success"
|
||||
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}
|
||||
small
|
||||
target="_blank"
|
||||
className="px-4 py-2 rounded-lg"
|
||||
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-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 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>
|
||||
@ -153,4 +169,4 @@ const ProductCatalogue: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductCatalogue;
|
||||
export default ProductCatalogue;
|
||||
|
||||
@ -2,18 +2,23 @@ import React, { useEffect, useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import BaseButton from '../BaseButton';
|
||||
import { mdiArrowRight } from '@mdi/js';
|
||||
import { mdiArrowRight, mdiFire, mdiShoppingOutline } from '@mdi/js';
|
||||
import BaseIcon from '../BaseIcon';
|
||||
|
||||
const PromotionsBanner: React.FC = () => {
|
||||
interface PromotionsBannerProps {
|
||||
shop?: any;
|
||||
}
|
||||
|
||||
const PromotionsBanner: React.FC<PromotionsBannerProps> = ({ shop }) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [promotions, setPromotions] = useState([]);
|
||||
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 => p.status === 'active'));
|
||||
setPromotions(res.data.rows.filter((p: any) => p.is_active));
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch promotions", err);
|
||||
} finally {
|
||||
@ -23,47 +28,83 @@ const PromotionsBanner: React.FC = () => {
|
||||
fetchPromotions();
|
||||
}, []);
|
||||
|
||||
const getTranslation = (item, entity) => {
|
||||
const getTranslation = (item: any, entity: string) => {
|
||||
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];
|
||||
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="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>
|
||||
|
||||
<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 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 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>
|
||||
<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">
|
||||
|
||||
<div className="shrink-0 animate-fade-in-right">
|
||||
<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"
|
||||
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;
|
||||
export default PromotionsBanner;
|
||||
@ -12,17 +12,27 @@ 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);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
|
||||
// Fetch shop data
|
||||
axios.get('/shops').then(res => {
|
||||
if (res.data && res.data.rows && res.data.rows.length > 0) {
|
||||
setShop(res.data.rows[0]);
|
||||
}
|
||||
}).catch(err => console.error('Error fetching shop:', err));
|
||||
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
@ -32,27 +42,32 @@ export default function Home() {
|
||||
{ label: t('nav.contact', { defaultValue: 'Contact Us' }), href: '#contact' },
|
||||
];
|
||||
|
||||
const shopName = shop?.name || 'Super Star Store';
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen bg-white dark:bg-slate-900 scroll-smooth">
|
||||
<div className="flex flex-col min-h-screen bg-black text-white scroll-smooth selection:bg-yellow-400 selection:text-black">
|
||||
<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." />
|
||||
<title>{getPageTitle(`${shopName} - Ipoh`)}</title>
|
||||
<meta name="description" content={`${shopName} - 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'
|
||||
<header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
|
||||
isScrolled ? 'bg-black/90 backdrop-blur-xl border-b border-white/10 py-4' : 'bg-transparent py-6'
|
||||
}`}>
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex items-center justify-between h-20 md:h-24">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* 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} />
|
||||
<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>
|
||||
<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 */}
|
||||
@ -61,24 +76,24 @@ export default function Home() {
|
||||
<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"
|
||||
className="text-sm font-black uppercase tracking-widest text-white/70 hover:text-yellow-400 transition-all duration-300 hover:scale-110"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
<div className="h-6 w-px bg-gray-200 dark:bg-slate-800"></div>
|
||||
<div className="h-4 w-px bg-white/10"></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"
|
||||
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"
|
||||
>
|
||||
{t('auth.login', { defaultValue: 'Admin Login' })}
|
||||
{t('auth.login', { defaultValue: 'Admin' })}
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Toggle */}
|
||||
<button
|
||||
className="lg:hidden p-2 text-slate-600 dark:text-slate-300"
|
||||
className="lg:hidden p-3 rounded-2xl bg-white/5 text-white hover:bg-white/10 transition-colors"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
<BaseIcon path={isMenuOpen ? mdiClose : mdiMenu} size={28} />
|
||||
@ -88,56 +103,68 @@ export default function Home() {
|
||||
|
||||
{/* 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"
|
||||
<div className="lg:hidden fixed inset-0 z-50 bg-black flex flex-col items-center justify-center p-8 animate-fade-in">
|
||||
<button
|
||||
className="absolute top-8 right-8 p-3 text-white"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
{t('auth.login', { defaultValue: 'Admin Login' })}
|
||||
</Link>
|
||||
<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 />
|
||||
<PromotionsBanner />
|
||||
<ProductCatalogue />
|
||||
<ContactSection />
|
||||
<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-slate-900 dark:bg-black text-white pt-20 pb-10">
|
||||
<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-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 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-xl font-black tracking-tight uppercase">
|
||||
Super Star <span className="text-green-600 italic">Store</span>
|
||||
<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-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 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-6">
|
||||
<h4 className="font-bold text-lg">{t('footer.links', { defaultValue: 'Quick Links' })}</h4>
|
||||
<ul className="space-y-4 text-slate-400">
|
||||
<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">
|
||||
@ -147,29 +174,31 @@ export default function Home() {
|
||||
))}
|
||||
</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>
|
||||
<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-6">
|
||||
<h4 className="font-bold text-lg">{t('footer.follow', { defaultValue: 'Follow Us' })}</h4>
|
||||
<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">
|
||||
<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>
|
||||
{['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-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 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>
|
||||
@ -180,4 +209,4 @@ export default function Home() {
|
||||
|
||||
Home.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
};
|
||||
};
|
||||
@ -32,30 +32,30 @@ interface StyleState {
|
||||
|
||||
|
||||
const initialState: StyleState = {
|
||||
asideStyle: styles.neonGreenTheme.aside,
|
||||
asideScrollbarsStyle: styles.white.asideScrollbars,
|
||||
asideBrandStyle: styles.white.asideBrand,
|
||||
asideMenuItemStyle: styles.neonGreenTheme.asideMenuItem,
|
||||
asideMenuItemActiveStyle: styles.neonGreenTheme.asideMenuItemActive,
|
||||
activeLinkColor: styles.neonGreenTheme.activeLinkColor,
|
||||
asideMenuDropdownStyle: styles.white.asideMenuDropdown,
|
||||
navBarItemLabelStyle: styles.neonGreenTheme.navBarItemLabel,
|
||||
navBarItemLabelHoverStyle: styles.neonGreenTheme.navBarItemLabelHover,
|
||||
navBarItemLabelActiveColorStyle: styles.neonGreenTheme.navBarItemLabelActiveColor,
|
||||
overlayStyle: styles.neonGreenTheme.overlay,
|
||||
darkMode: false,
|
||||
bgLayoutColor: styles.neonGreenTheme.bgLayoutColor,
|
||||
iconsColor: styles.neonGreenTheme.iconsColor,
|
||||
cardsColor: styles.neonGreenTheme.cardsColor,
|
||||
focusRingColor: styles.neonGreenTheme.focusRingColor,
|
||||
corners: styles.neonGreenTheme.corners,
|
||||
cardsStyle: styles.neonGreenTheme.cardsStyle,
|
||||
linkColor: styles.neonGreenTheme.linkColor,
|
||||
websiteHeder: styles.neonGreenTheme.websiteHeder,
|
||||
borders: styles.neonGreenTheme.borders,
|
||||
shadow: styles.neonGreenTheme.shadow,
|
||||
websiteSectionStyle: styles.neonGreenTheme.websiteSectionStyle,
|
||||
textSecondary: styles.neonGreenTheme.textSecondary,
|
||||
asideStyle: styles.superStarTheme.aside,
|
||||
asideScrollbarsStyle: styles.superStarTheme.asideScrollbars,
|
||||
asideBrandStyle: styles.superStarTheme.asideBrand,
|
||||
asideMenuItemStyle: styles.superStarTheme.asideMenuItem,
|
||||
asideMenuItemActiveStyle: styles.superStarTheme.asideMenuItemActive,
|
||||
activeLinkColor: styles.superStarTheme.activeLinkColor,
|
||||
asideMenuDropdownStyle: styles.superStarTheme.asideMenuDropdown,
|
||||
navBarItemLabelStyle: styles.superStarTheme.navBarItemLabel,
|
||||
navBarItemLabelHoverStyle: styles.superStarTheme.navBarItemLabelHover,
|
||||
navBarItemLabelActiveColorStyle: styles.superStarTheme.navBarItemLabelActiveColor,
|
||||
overlayStyle: styles.superStarTheme.overlay,
|
||||
darkMode: true,
|
||||
bgLayoutColor: styles.superStarTheme.bgLayoutColor,
|
||||
iconsColor: styles.superStarTheme.iconsColor,
|
||||
cardsColor: styles.superStarTheme.cardsColor,
|
||||
focusRingColor: styles.superStarTheme.focusRingColor,
|
||||
corners: styles.superStarTheme.corners,
|
||||
cardsStyle: styles.superStarTheme.cardsStyle,
|
||||
linkColor: styles.superStarTheme.linkColor,
|
||||
websiteHeder: styles.superStarTheme.websiteHeder,
|
||||
borders: styles.superStarTheme.borders,
|
||||
shadow: styles.superStarTheme.shadow,
|
||||
websiteSectionStyle: styles.superStarTheme.websiteSectionStyle,
|
||||
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) {
|
||||
@ -100,4 +104,4 @@ export const styleSlice = createSlice({
|
||||
// Action creators are generated for each case reducer function
|
||||
export const { setDarkMode, setStyle } = styleSlice.actions
|
||||
|
||||
export default styleSlice.reducer
|
||||
export default styleSlice.reducer
|
||||
@ -49,9 +49,32 @@ export const white: StyleObject = {
|
||||
websiteSectionStyle: '',
|
||||
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',
|
||||
@ -132,4 +155,4 @@ export const basic: StyleObject = {
|
||||
shadow: '',
|
||||
websiteSectionStyle: '',
|
||||
textSecondary: '',
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user