Home page completed

app/(website)/_components/WhyChooseUsSection.tsx

@@ -0,0 +1,97 @@
+// components/WhyChooseUsSection.tsx
+import React from "react";
+import { IconType } from "react-icons"; // Import IconType for typing
+import { FiZap, FiUsers, FiTarget, FiBarChart2 } from "react-icons/fi"; // Example icons
+
+type FeatureItem = {
+  icon: IconType;
+  title: string;
+  description: string;
+};
+
+type WhyChooseUsProps = {
+  title: string;
+  subtitle?: string;
+  features: FeatureItem[];
+};
+
+const WhyChooseUsSection: React.FC<WhyChooseUsProps> = ({
+  title,
+  subtitle,
+  features,
+}) => {
+  return (
+    // Use standard background for seamless flow or secondary for slight distinction
+    <section className="py-20 md:py-28 bg-background">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="max-w-3xl mx-auto text-center mb-12 md:mb-16">
+          {/* Use semantic foreground */}
+          <h2 className="text-3xl md:text-4xl font-bold mb-4 text-foreground">
+            {title}
+          </h2>
+          {subtitle && (
+            // Use semantic muted foreground
+            <p className="text-lg text-muted-foreground">{subtitle}</p>
+          )}
+        </div>
+
+        {/* Features Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-10">
+          {features.map((feature, index) => (
+            <div
+              key={index}
+              className="text-center md:text-left flex flex-col items-center md:items-start p-6 rounded-lg transition-colors duration-300 hover:bg-secondary"
+            >
+              {" "}
+              {/* Added padding and hover */}
+              <div className="flex-shrink-0 mb-4">
+                {/* Icon using primary color */}
+                <feature.icon className="w-10 h-10 text-primary" />
+              </div>
+              <div>
+                {/* Title using foreground */}
+                <h3 className="text-xl font-semibold mb-2 text-foreground">
+                  {feature.title}
+                </h3>
+                {/* Description using muted foreground */}
+                <p className="text-base text-muted-foreground">
+                  {feature.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+// Example default data (adapt based on OMS's key selling points/values)
+export const defaultWhyChooseUsFeatures: FeatureItem[] = [
+  {
+    icon: FiZap,
+    title: "Innovation Driven",
+    description:
+      "We leverage cutting-edge technology to create transformative solutions that push boundaries.",
+  },
+  {
+    icon: FiUsers,
+    title: "Expert Teams",
+    description:
+      "Access highly skilled IT professionals tailored to your project needs, ensuring expertise and quality.",
+  },
+  {
+    icon: FiTarget,
+    title: "Client-Centric Approach",
+    description:
+      "Your success is our priority. We partner closely with you to deliver solutions aligned with your goals.",
+  },
+  {
+    icon: FiBarChart2,
+    title: "Measurable Results",
+    description:
+      "Our focus is on delivering tangible business impact, enhancing efficiency and driving growth.",
+  },
+];
+
+export default WhyChooseUsSection;