Home ayah banner & cleanup
Task #13: Bring the EHSAN home page closer to the real ehsan.sa. Changes (artifacts/ehsan-poc/src/pages/home.tsx): - Ayah banner: added a full-width white section directly below the hero slider showing the provided ayah artwork «وأحسنوا إن الله يحب المحسنين» (imported via the @assets Vite alias as an <img>), centered and flanked by two decorative ornaments. Ornaments are a small inline SVG flourish (Ornament component) in a light primary-green tint, mirrored on each side, hidden on the smallest screens. Responsive heights, RTL-correct. - Removed the "إجمالي الطلبات" (Total Requests) stat card; the stats row now shows two cards (الحالات المغلقة, إجمالي التبرعات) and the grid was changed from md:grid-cols-3 to md:grid-cols-2 (loading skeleton updated to match). - Removed the "الفرص المميزة" (featuredTitle) heading text; the heading row now just right-aligns the existing "عرض جميع الفرص" button. Search box and opportunity cards are unchanged and still visible. Scope decision: user confirmed (interactive query) to remove ONLY the "الفرص المميزة" heading word and keep the search + cards. Out of scope (unchanged): nav, services mega-menu, hero slider, workflow steps, other pages. featuredTitle translation key left in place (unused now). Verified: tsc --noEmit clean; screenshots confirm the ayah band under the hero, two stat cards, and no featured heading; console clean after workflow restart. No emojis.
This commit is contained in:
@@ -13,9 +13,33 @@ import zakatBanner from "@assets/zakatbanarWEB_1780682994527.png";
|
|||||||
import dawriBanner from "@assets/dawribanarWEB_1780682998494.png";
|
import dawriBanner from "@assets/dawribanarWEB_1780682998494.png";
|
||||||
import waqfBanner from "@assets/waqfbanerWEB_1780683002610.png";
|
import waqfBanner from "@assets/waqfbanerWEB_1780683002610.png";
|
||||||
import giftBanner from "@assets/giftbanarWEB_1780683006569.png";
|
import giftBanner from "@assets/giftbanarWEB_1780683006569.png";
|
||||||
|
import ayahArt from "@assets/ahseno-ayah_(1)_1780685571353.svg";
|
||||||
|
|
||||||
const HERO_BANNERS = [zakatBanner, dawriBanner, waqfBanner, giftBanner];
|
const HERO_BANNERS = [zakatBanner, dawriBanner, waqfBanner, giftBanner];
|
||||||
|
|
||||||
|
function Ornament({ className = "" }: { className?: string }) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
width="56"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 56 20"
|
||||||
|
fill="none"
|
||||||
|
aria-hidden="true"
|
||||||
|
className={`text-primary/30 ${className}`}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M2 10c6-7 12-7 18 0 6 7 12 7 18 0 4-4.6 8-5.6 12-3"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeLinecap="round"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
<circle cx="20" cy="10" r="2.2" fill="currentColor" />
|
||||||
|
<circle cx="50" cy="6.5" r="1.6" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const { t } = useLanguage();
|
const { t } = useLanguage();
|
||||||
const { data: stats, isLoading: statsLoading } = useGetStats();
|
const { data: stats, isLoading: statsLoading } = useGetStats();
|
||||||
@@ -110,28 +134,29 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* Ayah banner */}
|
||||||
|
<section className="bg-white py-10">
|
||||||
|
<div className="container mx-auto px-4 flex items-center justify-center gap-5 sm:gap-8">
|
||||||
|
<Ornament className="hidden sm:block shrink-0" />
|
||||||
|
<img
|
||||||
|
src={ayahArt}
|
||||||
|
alt="وأحسنوا إن الله يحب المحسنين"
|
||||||
|
className="h-7 sm:h-9 md:h-10 w-auto"
|
||||||
|
data-testid="img-ayah"
|
||||||
|
/>
|
||||||
|
<Ornament className="hidden sm:block shrink-0 -scale-x-100" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div className="container mx-auto px-4 py-12">
|
<div className="container mx-auto px-4 py-12">
|
||||||
{/* Stats */}
|
{/* Stats */}
|
||||||
{statsLoading ? (
|
{statsLoading ? (
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-16">
|
||||||
<Skeleton className="h-32 w-full" />
|
|
||||||
<Skeleton className="h-32 w-full" />
|
<Skeleton className="h-32 w-full" />
|
||||||
<Skeleton className="h-32 w-full" />
|
<Skeleton className="h-32 w-full" />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-16">
|
||||||
<Card>
|
|
||||||
<CardHeader className="pb-2">
|
|
||||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
||||||
{t.home.totalRequests}
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="text-4xl font-bold text-foreground">
|
|
||||||
{stats?.totalRequests || 0}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader className="pb-2">
|
<CardHeader className="pb-2">
|
||||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
@@ -161,8 +186,7 @@ export default function Home() {
|
|||||||
|
|
||||||
{/* Featured Opportunities */}
|
{/* Featured Opportunities */}
|
||||||
<section className="mb-16">
|
<section className="mb-16">
|
||||||
<div className="flex items-center justify-between mb-6 flex-wrap gap-3">
|
<div className="flex items-center justify-end mb-6 flex-wrap gap-3">
|
||||||
<h2 className="text-2xl font-bold">{t.home.featuredTitle}</h2>
|
|
||||||
<Link href="/opportunities">
|
<Link href="/opportunities">
|
||||||
<Button variant="outline" size="sm">{t.home.viewOpportunities}</Button>
|
<Button variant="outline" size="sm">{t.home.viewOpportunities}</Button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
Reference in New Issue
Block a user