Our Workers
- -
- {workersData
- .filter((worker) => worker.pricePerDay > 0)
- .filter((worker) => worker.id !== null)
- .sort((a, b) => a.name.localeCompare(b.name))
- .map((worker: WorkerType) => (
-
+
)
-}
+}
\ No newline at end of file
diff --git a/src/components/AnimatedWorkerCard.tsx b/src/components/AnimatedWorkerCard.tsx
new file mode 100644
index 0000000..147e329
--- /dev/null
+++ b/src/components/AnimatedWorkerCard.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import WorkerCard from './WorkerCard';
+import { WorkerType } from '@/types/workers';
+
+interface AnimatedWorkerCardProps {
+ worker: WorkerType;
+ delay?: number;
+}
+
+export default function AnimatedWorkerCard({ worker, delay = 0 }: AnimatedWorkerCardProps) {
+ const [isVisible, setIsVisible] = useState(false);
+ const cardRef = useRef(null);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+
+ setTimeout(() => {
+ setIsVisible(true);
+ }, delay);
+ observer.unobserve(entry.target);
+ }
+ });
+ },
+ {
+ rootMargin: '0px',
+ threshold: 0.05,
+ }
+ );
+
+ if (cardRef.current) {
+ observer.observe(cardRef.current);
+ }
+
+ return () => {
+ if (cardRef.current) {
+ observer.unobserve(cardRef.current);
+ }
+ };
+ }, [delay]);
+
+ return (
+
-
+
-
-
-
- {worker.name}
-{worker.service}
-- ₹{Math.round(worker.pricePerDay * 1.18)} / day -
-
+
+
+
+ + Meet Our Workers +
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+
+ {filteredWorkers.map((worker, index) => (
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/WorkerCard.tsx b/src/components/WorkerCard.tsx
new file mode 100644
index 0000000..6cf62e4
--- /dev/null
+++ b/src/components/WorkerCard.tsx
@@ -0,0 +1,37 @@
+import { WorkerType } from '@/types/workers'
+import Image from 'next/image'
+import Link from 'next/link'
+
+interface WorkerCardProps {
+ worker: WorkerType
+}
+
+export default function WorkerCard({ worker }: WorkerCardProps) {
+ const roundedPrice = Math.round(worker.pricePerDay * 1.18);
+
+ return (
+
+
+
+ 
+
+
+
+ {worker.name}
+{worker.service}
+
+
+ ₹{roundedPrice} / day
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/workers.json b/src/data/workers.json
similarity index 100%
rename from workers.json
rename to src/data/workers.json