diff --git a/src/components/home/CTA.tsx b/src/components/home/CTA.tsx
index 84956d7..510af54 100644
--- a/src/components/home/CTA.tsx
+++ b/src/components/home/CTA.tsx
@@ -1,6 +1,5 @@
'use client';
-import Link from 'next/link';
import Button from '@/components/ui/Button';
import { ArrowRight, MessageCircle } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';
@@ -13,31 +12,29 @@ export default function CTA() {
-
-
+
+
-
+
{t('cta.title')}
{t('cta.subtitle')}
diff --git a/src/components/home/ContactPreview.tsx b/src/components/home/ContactPreview.tsx
index 0051928..3a39a9a 100644
--- a/src/components/home/ContactPreview.tsx
+++ b/src/components/home/ContactPreview.tsx
@@ -1,6 +1,5 @@
'use client';
-import Link from 'next/link';
import { Phone, MapPin, Clock, MessageCircle, ExternalLink } from 'lucide-react';
import Button from '@/components/ui/Button';
import Logo from '@/components/ui/Logo';
@@ -64,31 +63,27 @@ export default function ContactPreview() {
diff --git a/src/components/home/FeaturedProducts.tsx b/src/components/home/FeaturedProducts.tsx
index 0ee42a9..427cee3 100644
--- a/src/components/home/FeaturedProducts.tsx
+++ b/src/components/home/FeaturedProducts.tsx
@@ -1,6 +1,5 @@
'use client';
-import Link from 'next/link';
import ProductCard from '@/components/product/ProductCard';
import { getFeaturedProducts } from '@/lib/products';
import Button from '@/components/ui/Button';
@@ -25,12 +24,10 @@ export default function FeaturedProducts() {
{t('featured.title')}
{t('featured.subtitle')}
-
-
-
+
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
index 203ad77..129aeca 100644
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -1,6 +1,5 @@
'use client';
-import Link from 'next/link';
import AppImage from '@/components/ui/AppImage';
import Button from '@/components/ui/Button';
import Logo from '@/components/ui/Logo';
@@ -14,7 +13,7 @@ export default function Hero() {
return (
-
+
-
-
+
+
-
+
@@ -70,26 +69,24 @@ export default function Hero() {
-
+
);
}
\ No newline at end of file
diff --git a/src/components/home/HomeView.tsx b/src/components/home/HomeView.tsx
new file mode 100644
index 0000000..85bba46
--- /dev/null
+++ b/src/components/home/HomeView.tsx
@@ -0,0 +1,27 @@
+import Hero from '@/components/home/Hero';
+import TrustBadges from '@/components/home/TrustBadges';
+import AboutPreview from '@/components/home/AboutPreview';
+import CategoryGrid from '@/components/home/CategoryGrid';
+import FeaturedProducts from '@/components/home/FeaturedProducts';
+import HowItWorks from '@/components/home/HowItWorks';
+import WeeklyOffers from '@/components/home/WeeklyOffers';
+import SocialFollow from '@/components/home/SocialFollow';
+import ContactPreview from '@/components/home/ContactPreview';
+import CTA from '@/components/home/CTA';
+
+export default function HomeView() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/home/HowItWorks.tsx b/src/components/home/HowItWorks.tsx
index d600454..191c611 100644
--- a/src/components/home/HowItWorks.tsx
+++ b/src/components/home/HowItWorks.tsx
@@ -57,12 +57,10 @@ export default function HowItWorks() {
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 3fdacaf..07206f1 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -25,6 +25,7 @@ export default function Footer() {
{ label: t('nav.fish'), href: '/shop?category=fish' },
],
company: [
+ { label: t('nav.home'), href: '/' },
{ label: t('nav.about'), href: '/about' },
{ label: t('nav.halalCert'), href: '/about#halal' },
{ label: t('nav.delivery'), href: '/about#delivery' },
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index ee3692e..48197be 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,8 +1,10 @@
'use client';
import Link from 'next/link';
+import { usePathname } from 'next/navigation';
import { useState } from 'react';
import { ShoppingCart, Heart, User, Menu, X, Search } from 'lucide-react';
+import { cn } from '@/lib/utils';
import { useCart } from '@/presentation/hooks/useCart';
import { useWishlist } from '@/presentation/hooks/useWishlist';
import { useAuth } from '@/presentation/hooks/useAuth';
@@ -11,6 +13,7 @@ import Logo from '@/components/ui/Logo';
import { SITE_LOCATION } from '@/lib/constants';
export default function Header() {
+ const pathname = usePathname();
const [mobileOpen, setMobileOpen] = useState(false);
const { summary } = useCart();
const { items: wishlistItems } = useWishlist();
@@ -19,7 +22,10 @@ export default function Header() {
const wishlistCount = wishlistItems.length;
const { t } = useTranslation();
+ const isHome = pathname === '/' || pathname === '/home';
+
const navLinks = [
+ { href: '/', label: t('nav.home'), matchHome: true },
{ href: '/shop', label: t('nav.shop') },
{ href: '/shop?category=chicken', label: t('nav.chicken') },
{ href: '/shop?category=beef', label: t('nav.beef') },
@@ -46,15 +52,25 @@ export default function Header() {
@@ -114,16 +130,26 @@ export default function Header() {
{mobileOpen && (
)}
diff --git a/src/components/product/ProductCard.tsx b/src/components/product/ProductCard.tsx
index a12913b..478c0f5 100644
--- a/src/components/product/ProductCard.tsx
+++ b/src/components/product/ProductCard.tsx
@@ -9,7 +9,6 @@ import { useWishlist } from '@/presentation/hooks/useWishlist';
import { useTranslation } from '@/hooks/useTranslation';
import { cn } from '@/lib/utils';
import { products } from '@/lib/products';
-
interface ProductCardProps {
product: LocalizedProduct;
}
@@ -22,13 +21,13 @@ export default function ProductCard({ product }: ProductCardProps) {
return (
-
+
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index e78a859..f9821b4 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -1,31 +1,109 @@
+import Link from 'next/link';
import { cn } from '@/lib/utils';
import { ButtonHTMLAttributes, forwardRef } from 'react';
interface ButtonProps extends ButtonHTMLAttributes
{
variant?: 'primary' | 'secondary' | 'gold' | 'ghost';
size?: 'sm' | 'md' | 'lg';
+ href?: string;
+ external?: boolean;
}
-const Button = forwardRef(
- ({ className, variant = 'primary', size = 'md', children, ...props }, ref) => {
- const variants = {
- primary: 'btn-primary',
- secondary: 'btn-secondary',
- gold: 'btn-gold',
- ghost:
- 'inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-brand-700',
- };
+function getButtonClasses(
+ variant: ButtonProps['variant'],
+ size: ButtonProps['size'],
+ className?: string
+) {
+ const variants = {
+ primary: 'btn-primary',
+ secondary: 'btn-secondary',
+ gold: 'btn-gold',
+ ghost:
+ 'inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-brand-700',
+ };
- const sizes = {
- sm: 'px-4 py-2 text-xs',
- md: '',
- lg: 'px-8 py-4 text-base',
- };
+ const sizes = {
+ sm: 'px-4 py-2 text-xs',
+ md: '',
+ lg: 'px-8 py-4 text-base',
+ };
+
+ return cn(variants[variant ?? 'primary'], sizes[size ?? 'md'], className);
+}
+
+function isHttpHref(href: string) {
+ return /^https?:\/\//i.test(href);
+}
+
+const Button = forwardRef(
+ (
+ {
+ className,
+ variant = 'primary',
+ size = 'md',
+ children,
+ href,
+ external,
+ type = 'button',
+ disabled,
+ form,
+ formAction,
+ formEncType,
+ formMethod,
+ formNoValidate,
+ formTarget,
+ name,
+ value,
+ ...props
+ },
+ ref
+ ) => {
+ const classes = getButtonClasses(variant, size, className);
+
+ if (href) {
+ const openInNewTab = external || isHttpHref(href);
+ const linkClassName = cn(classes, disabled && 'pointer-events-none opacity-50');
+
+ if (href.startsWith('/') && !openInNewTab) {
+ return (
+ }
+ className={linkClassName}
+ aria-disabled={disabled || undefined}
+ >
+ {children}
+
+ );
+ }
+
+ return (
+ }
+ className={linkClassName}
+ aria-disabled={disabled || undefined}
+ {...(openInNewTab ? { target: '_blank' as const, rel: 'noopener noreferrer' } : {})}
+ >
+ {children}
+
+ );
+ }
return (