133 lines
7.2 KiB
TypeScript
133 lines
7.2 KiB
TypeScript
/**
|
|
* ANNOTATED COPY — every line explained
|
|
* Source: src/components/home/AboutPreview.tsx
|
|
* NOT used by the app — read this to learn how the real file works
|
|
*/
|
|
// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
|
|
'use client';
|
|
// (blank line — separates logical blocks for readability)
|
|
// Import project module (@/ alias = src/ folder in tsconfig)
|
|
import AppImage from '@/components/ui/AppImage';
|
|
// Next.js Link — fast client-side navigation without full page reload
|
|
import Link from 'next/link';
|
|
// Lucide icons — lightweight SVG icon components
|
|
import { ArrowRight } from 'lucide-react';
|
|
// Import project module (@/ alias = src/ folder in tsconfig)
|
|
import Button from '@/components/ui/Button';
|
|
// Import project module (@/ alias = src/ folder in tsconfig)
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
// Import project module (@/ alias = src/ folder in tsconfig)
|
|
import { IMAGES } from '@/lib/images';
|
|
// (blank line — separates logical blocks for readability)
|
|
// Default export — main component/page Next.js or other files import
|
|
export default function AboutPreview() {
|
|
// Custom hook — returns t() translator and current locale
|
|
const { t } = useTranslation();
|
|
// (blank line — separates logical blocks for readability)
|
|
// Line 13: const stats = [
|
|
const stats = [
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
{ value: t('aboutPreview.statHalal'), label: t('aboutPreview.statHalalLabel') },
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
{ value: t('aboutPreview.statDays'), label: t('aboutPreview.statDaysLabel') },
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
{ value: t('aboutPreview.statDelivery'), label: t('aboutPreview.statDeliveryLabel') },
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
{ value: t('aboutPreview.statFresh'), label: t('aboutPreview.statFreshLabel') },
|
|
// End of array literal
|
|
];
|
|
// (blank line — separates logical blocks for readability)
|
|
// Return JSX — describes UI tree React renders to the DOM
|
|
return (
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<section className="bg-white py-20">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
|
|
// Line 26: {t('aboutPreview.label')}
|
|
{t('aboutPreview.label')}
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</span>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<h2 className="section-heading mb-6">{t('aboutPreview.title')}</h2>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<p className="mb-4 leading-relaxed text-gray-600">{t('aboutPreview.p1')}</p>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<p className="mb-4 leading-relaxed text-gray-600">{t('aboutPreview.p2')}</p>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<p className="mb-8 leading-relaxed text-gray-600">{t('aboutPreview.p3')}</p>
|
|
// (blank line — separates logical blocks for readability)
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="mb-8 grid grid-cols-2 gap-4 sm:grid-cols-4">
|
|
// Array.map — transform each item (often render a list of components)
|
|
{stats.map((stat) => (
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div
|
|
// Line 36: key={stat.label}
|
|
key={stat.label}
|
|
// Tailwind CSS utility classes — styling (colors, spacing, layout)
|
|
className="rounded-xl border border-cream-300/80 bg-cream-50 p-4 text-center"
|
|
// Line 38: >
|
|
>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<p className="font-display text-2xl font-bold text-brand-800">{stat.value}</p>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<p className="mt-1 text-xs font-medium text-gray-500">{stat.label}</p>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// Line 42: ))}
|
|
))}
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// (blank line — separates logical blocks for readability)
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<Link href="/about">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<Button variant="secondary">
|
|
// Line 47: {t('aboutPreview.readMore')}
|
|
{t('aboutPreview.readMore')}
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<ArrowRight className="h-4 w-4 rtl:rotate-180" />
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</Button>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</Link>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// (blank line — separates logical blocks for readability)
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="relative aspect-[4/5] overflow-hidden rounded-2xl shadow-premium-lg">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<AppImage
|
|
// Line 55: src={IMAGES.aboutMeat}
|
|
src={IMAGES.aboutMeat}
|
|
// Line 56: alt={t('aboutPreview.imageAlt')}
|
|
alt={t('aboutPreview.imageAlt')}
|
|
// Line 57: fill
|
|
fill
|
|
// Tailwind CSS utility classes — styling (colors, spacing, layout)
|
|
className="object-cover"
|
|
// Line 59: sizes="(max-width: 1024px) 100vw, 640px"
|
|
sizes="(max-width: 1024px) 100vw, 640px"
|
|
// Line 60: />
|
|
/>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="absolute inset-0 bg-gradient-to-t from-brand-950/30 via-transparent to-transparent" />
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</section>
|
|
// Line 66: );
|
|
);
|
|
// Closing brace — end of block (function, if, object, JSX)
|
|
}
|