Initial commit for iiEasy: all files included

2026-02-03 23:16:16 +05:00
commit 3b3d29e21c
158 changed files with 32962 additions and 0 deletions
--- a/components/ServiceOfferCard.tsx
+++ b/components/ServiceOfferCard.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import Button from './Button'; // Import the Button component
+
+// Define a basic interface for a service offer, exported for potential use elsewhere
+export interface ServiceOffer {
+  id: string;
+  title: string;
+  description: string;
+  price?: string;
+  imageUrl?: string; 
+  imageAlt?: string;
+  actionText?: string; 
+  onAction?: (id: string) => void;
+  themeColor?: 'purple' | 'blue' | 'teal' | 'amber'; // Optional theme color
+}
+
+interface ServiceOfferCardProps {
+  offer: ServiceOffer;
+}
+
+const ServiceOfferCard: React.FC<ServiceOfferCardProps> = ({ offer }) => {
+  const handleActionClick = () => {
+    if (offer.onAction) {
+      offer.onAction(offer.id);
+    }
+  };
+
+  return (
+    <div 
+      className="bg-white rounded-xl transition-all duration-300 ease-in-out overflow-hidden flex flex-col h-full group"
+      role="article"
+      aria-labelledby={`offer-title-${offer.id}`}
+    >
+      {offer.imageUrl && (
+        <div className="w-full h-48 sm:h-56 bg-slate-200 overflow-hidden">
+          <img 
+            src={offer.imageUrl} 
+            alt={offer.imageAlt || `Visual for ${offer.title}`} 
+            className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-300" 
+            loading="lazy" 
+          />
+        </div>
+      )}
+      <div className="p-5 md:p-6 flex flex-col flex-grow">
+        <h3 
+          id={`offer-title-${offer.id}`} 
+          className={`font-quicksand text-xl sm:text-2xl font-bold text-slate-900 mb-2 group-hover:text-black transition-colors`}
+        >
+          {offer.title}
+        </h3>
+        <p className="font-inter text-slate-600 text-sm leading-relaxed mb-4 flex-grow">
+          {offer.description}
+        </p>
+        
+        <div className="flex flex-wrap items-center justify-between mt-auto">
+          {offer.price && (
+            <p className={`font-quicksand text-xl font-bold text-slate-700 mb-3 sm:mb-0`}>
+              {offer.price}
+            </p>
+          )}
+          {offer.actionText && offer.onAction && (
+            <Button
+              variant="outline"
+              size="md"
+              onClick={handleActionClick}
+              className={`${!offer.price ? 'ml-auto' : ''}`}
+              aria-label={`${offer.actionText} for ${offer.title}`}
+            >
+              {offer.actionText}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ServiceOfferCard;