feat/Implemented why choose us section

package.json

@@ -8,37 +8,44 @@
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "test": "echo \"No tests specified\" && exit 0"
+    "test": "vitest --run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
     "@reduxjs/toolkit": "^2.11.2",
     "axios": "^1.13.6",
+    "lucide-react": "^0.577.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.71.2",
     "react-hot-toast": "^2.6.0",
     "react-icons": "^5.6.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.13.1",
-    "yup": "^1.7.1",
-    "redux-persist": "^6.0.0"
+    "redux-persist": "^6.0.0",
+    "yup": "^1.7.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/postcss": "^4.2.1",
     "@tailwindcss/typography": "^0.5.19",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "autoprefixer": "^10.4.27",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
+    "fast-check": "^4.5.3",
     "globals": "^16.5.0",
+    "jsdom": "^28.1.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.2.1",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   }
 }

src/components/FeatureCard.jsx

@@ -0,0 +1,35 @@
+import { Shield, TrendingUp, Heart, Zap } from 'lucide-react';
+
+const FeatureCard = ({ icon, title, description }) => {
+  // Icon mapping
+  const iconMap = {
+    'shield': Shield,
+    'trending-up': TrendingUp,
+    'heart': Heart,
+    'lightning': Zap
+  };
+
+  // Get the icon component with fallback to Shield
+  const IconComponent = iconMap[icon] || Shield;
+
+  // Log warning if invalid icon type
+  if (!iconMap[icon]) {
+    console.warn(`FeatureCard: Invalid icon type "${icon}". Using fallback Shield icon.`);
+  }
+
+  return (
+    <div 
+      className="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all duration-300 ease-in-out cursor-pointer h-full"
+      data-testid="feature-card"
+    >
+      <div className="mb-8">
+        <IconComponent className="w-10 h-10 text-[#0F172A]" strokeWidth={1.5} />
+      </div>
+      <h3 className="text-xl font-bold text-navy mb-4 leading-tight">{title}</h3>
+      <p className="text-base text-gray-500 leading-relaxed font-medium">{description}</p>
+    </div>
+  );
+};
+
+export default FeatureCard;
+

src/components/WhyChooseUs.jsx

@@ -0,0 +1,44 @@
+import FeatureCard from './FeatureCard';
+
+const WhyChooseUs = () => {
+  const features = [
+    {
+      icon: 'shield',
+      title: 'Blockchain Verified',
+      description: 'Every transaction is verified on the Stellar network'
+    },
+    {
+      icon: 'trending-up',
+      title: 'Real-Time Impact',
+      description: 'Track your donation impact with live updates'
+    },
+    {
+      icon: 'heart',
+      title: 'Complete Transparency',
+      description: 'See exactly where your money goes'
+    },
+    {
+      icon: 'lightning',
+      title: 'Low Fees',
+      description: 'More of your money reaches the cause'
+    }
+  ];
+
+  return (
+    <section className="bg-light-bg py-24 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-7xl mx-auto">
+        <h2 className="text-3xl sm:text-4xl font-bold text-[#0F172A] text-center mb-16">
+          Why choose StellarAid?
+        </h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {features.map((feature, index) => (
+            <FeatureCard key={index} {...feature} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WhyChooseUs;
+

src/components/WhyChooseUs.test.jsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import WhyChooseUs from './WhyChooseUs';
+
+describe('WhyChooseUs Component', () => {
+  it('renders the main heading', () => {
+    render(<WhyChooseUs />);
+    expect(screen.getByText(/Why choose StellarAid\?/i)).toBeInTheDocument();
+  });
+
+  it('renders the correct number of feature cards', () => {
+    render(<WhyChooseUs />);
+    // Verify all 4 feature cards are present by checking their titles
+    expect(screen.getByText(/Blockchain Verified/i)).toBeInTheDocument();
+    expect(screen.getByText(/Real-Time Impact/i)).toBeInTheDocument();
+    expect(screen.getByText(/Complete Transparency/i)).toBeInTheDocument();
+    expect(screen.getByText(/Low Fees/i)).toBeInTheDocument();
+  });
+});

src/index.css

@@ -1,5 +1,11 @@
 @import "tailwindcss";
 
+@theme {
+  --color-navy: #0F172A;
+  --color-light-bg: #F8FAFC;
+}
+
+
 /* Custom animations for Modal component */
 @keyframes fade-in {
   0% { opacity: 0; }

src/pages/Home.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import HeroSection from '../components/HeroSection';
+import WhyChooseUs from '../components/WhyChooseUs';
 
 const Home = () => {
   return (
     <div>
       <HeroSection />
+      <WhyChooseUs />
     </div>
   );
 };

src/test/setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

vite.config.js

@@ -4,4 +4,10 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.js',
+    css: true,
+  },
 })