diff --git a/src/components/HeartIcon.tsx b/src/components/HeartIcon.tsx
new file mode 100644
index 0000000..6d24db9
--- /dev/null
+++ b/src/components/HeartIcon.tsx
@@ -0,0 +1,13 @@
+export function HeartIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+ return (
+
+ )
+}
diff --git a/src/components/Problem.tsx b/src/components/Problem.tsx
new file mode 100644
index 0000000..d970c10
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ Civil Society is Under-Equipped
+
+
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. EngageOS is here to change that.
+
+
+
+ {stats.map((stat) => (
+
+
{stat.name}
+
+
+
+
+
+ {stat.value}
+
+
+ ))}
+
+
+
+
+ )
+}
diff --git a/src/images/problem/1.png b/src/images/problem/1.png
new file mode 100644
index 0000000..1dc331b
Binary files /dev/null and b/src/images/problem/1.png differ
diff --git a/src/images/problem/2.png b/src/images/problem/2.png
new file mode 100644
index 0000000..2b37ada
Binary files /dev/null and b/src/images/problem/2.png differ
diff --git a/src/images/problem/3.png b/src/images/problem/3.png
new file mode 100644
index 0000000..ba1f6ae
Binary files /dev/null and b/src/images/problem/3.png differ