Replit Agent
c7573c35bf
Two refinements to match ehsan.sa on artifacts/ehsan-poc:
1. Black ayah: the ayah artwork below the hero
(«وأحسنوا إنّ الله يحبّ المحسنين») now renders solid black
instead of green via Tailwind `brightness-0` on the <img>.
Ornaments and centered layout unchanged.
2. Scroll-reveal motion: added a reusable Reveal component
(src/components/Reveal.tsx) built on the existing framer-motion
dependency. It fades + translates children up (y:28 -> 0) when
they scroll into view, animates once (viewport once:true,
amount 0.2), supports an optional stagger `delay`, and falls
back to a plain div when prefers-reduced-motion is set.
Applied on:
- home.tsx: stats row (2 cards, staggered), featured
opportunity cards grid (staggered by column), workflow-steps
grid (staggered by column).
- opportunities.tsx: opportunity cards grid (staggered).
Added `h-full` to the OpportunityCard root and to the Reveal
wrappers / wrapped Cards so the motion wrapper becoming the grid
item does not break equal-height cards.
Out of scope (unchanged): two-card stats layout, nav, services
mega-menu, hero slider/carousel, copy. No scroll animation on
header/nav or hero.
Verified: tsc --noEmit passes; restarted ehsan-poc web workflow
to clear HMR; screenshot confirms the ayah is black.
84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
import { useState } from "react";
|
|
import { useLanguage } from "../contexts/LanguageContext";
|
|
import { useListPublishedRequests } from "@workspace/api-client-react";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { OpportunityCard } from "../components/OpportunityCard";
|
|
import { Reveal } from "../components/Reveal";
|
|
|
|
type NeedTypeKey =
|
|
| "electricity" | "water" | "food" | "health"
|
|
| "housing" | "refrigerator" | "air_conditioner" | "court_order";
|
|
|
|
const NEED_TYPES: NeedTypeKey[] = [
|
|
"electricity", "water", "food", "health",
|
|
"housing", "refrigerator", "air_conditioner", "court_order",
|
|
];
|
|
|
|
export default function Opportunities() {
|
|
const { t } = useLanguage();
|
|
const { data: requests, isLoading } = useListPublishedRequests();
|
|
const [activeFilter, setActiveFilter] = useState<NeedTypeKey | "all">("all");
|
|
|
|
const filtered = (requests || []).filter((r) =>
|
|
activeFilter === "all" ? true : r.needType === activeFilter
|
|
);
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-12">
|
|
<h1 className="text-3xl font-bold text-foreground mb-6">{t.opportunities.title}</h1>
|
|
|
|
{/* Filter Bar */}
|
|
<div className="mb-8">
|
|
<p className="text-sm text-muted-foreground mb-3">{t.opportunities.filterByType}</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
<button
|
|
onClick={() => setActiveFilter("all")}
|
|
className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors border ${
|
|
activeFilter === "all"
|
|
? "bg-primary text-primary-foreground border-primary"
|
|
: "bg-background border-border text-muted-foreground hover:border-primary hover:text-primary"
|
|
}`}
|
|
data-testid="filter-all"
|
|
>
|
|
{t.opportunities.all}
|
|
</button>
|
|
{NEED_TYPES.map((type) => (
|
|
<button
|
|
key={type}
|
|
onClick={() => setActiveFilter(type)}
|
|
className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors border ${
|
|
activeFilter === type
|
|
? "bg-primary text-primary-foreground border-primary"
|
|
: "bg-background border-border text-muted-foreground hover:border-primary hover:text-primary"
|
|
}`}
|
|
data-testid={`filter-${type}`}
|
|
>
|
|
{t.needTypes[type]}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{[1, 2, 3].map((i) => (
|
|
<Skeleton key={i} className="h-96 w-full" />
|
|
))}
|
|
</div>
|
|
) : filtered.length === 0 ? (
|
|
<div className="text-center py-16 text-muted-foreground bg-muted/20 rounded-xl border border-dashed">
|
|
{t.opportunities.noOpportunities}
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{filtered.map((request, i) => (
|
|
<Reveal key={request.id} delay={(i % 3) * 0.08} className="h-full">
|
|
<OpportunityCard request={request} />
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|