add problem section

src/components/HeartIcon.tsx

@@ -0,0 +1,13 @@
+export function HeartIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg
+      viewBox="0 0 64 64"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M61.088 19.088c-4.482 -12.049 -16.152 -11.637 -23.15 -7.349l-5.376 11.288 9.953 -0.927 -10.249 13.159 8.429 -2.15 -5.285 20.89 -1.643 -14.132 -11.861 2.543 9.072 -14.445 -7.822 -1.139 5.381 -12.364c-6.404 -6.39 -22.973 -7.569 -26.209 7.755 -3.854 18.253 27.348 29.586 32.927 32.712l-0.011 0.071 0.066 -0.043c0.023 0.014 0.055 0.03 0.078 0.043l0.002 -0.095c8.434 -5.432 31.45 -20.359 25.698 -35.817Z" />
+    </svg>
+  )
+}

src/components/Problem.tsx

@@ -0,0 +1,51 @@
+import { HeartIcon } from './HeartIcon'
+import Image1 from '@/images/problem/1.png'
+import Image2 from '@/images/problem/2.png'
+import Image3 from '@/images/problem/3.png'
+
+import Image from 'next/image'
+
+
+
+
+
+const stats = [
+  { id: 1, name: 'Tools and low engagement.', value: 'Fragmented', image: Image1 },
+  { id: 2, name: 'Of digital tools.', value: 'Rising Cost', image: Image2 },
+  { id: 3, name: 'Of supporters and donors.', value: 'Untapped Potentials', image: Image3 },
+]
+
+
+
+export default function Problem() {
+  return (
+    <div className="bg-white py-24 mt-12">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:max-w-6xl">
+          <div className="text-center">
+            <div className=' max-w-4xl mx-auto'>
+            <h2 className="font-display text-4xl font-medium tracking-tight text-balance text-neutral-950 sm:text-5xl">
+              Civil Society is Under-Equipped
+            </h2>
+            <p className="mt-6 text-lg/8 text-gray-600">Nonprofits and grassroots movements hold the trust, the purpose, and the people. But they’re held back by outdated tools and digital fragmentation. Engagement is down, reach is limited, and impact is hard to scale. <span className='font-semibold'>EngageOS</span> is here to change that.</p>
+          </div>
+          </div>
+          <dl className="mt-16 grid grid-cols-1 gap-1 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-3">
+            {stats.map((stat) => (
+              <div key={stat.id} className="flex flex-col bg-gray-400/5 p-8">
+                <dt className="text-base font-light text-gray-600">{stat.name}</dt>
+                <dd className="order-first font-display text-2xl font-semibold tracking-tight text-gray-900 flex items-center justify-center gap-2">                
+                <Image src={stat.image} alt="Example" width={150} height={150} />
+                                </dd>
+
+                  <dd className="order-first mt-6 font-display text-2xl font-semibold tracking-tight text-gray-900 flex items-center justify-center gap-2">                
+                <HeartIcon className="h-6 w-6 text-black" /> {stat.value}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}