77 lines
4.8 KiB
TypeScript
77 lines
4.8 KiB
TypeScript
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;
|