+
+ )
+}
+
+export default Hero
\ No newline at end of file
diff --git a/apps/frontend/src/components/homepage/HeroCard.tsx b/apps/frontend/src/components/homepage/HeroCard.tsx
new file mode 100644
index 0000000..a06c216
--- /dev/null
+++ b/apps/frontend/src/components/homepage/HeroCard.tsx
@@ -0,0 +1,55 @@
+
+import { CardBody, CardContainer, CardItem } from "../ui/3d-card";
+import img from '../../assets/sign_up.gif'
+
+export function HeroCard() {
+ return (
+
+
+
+ Easy Volunteer Signup
+
+
+ Hover over this card to unleash the power of CSS perspective
+
+
+
+
+ {/*
+
+ Try now →
+
+
+ Sign up
+
+
*/}
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/frontend/src/components/homepage/HeroCard2.tsx b/apps/frontend/src/components/homepage/HeroCard2.tsx
new file mode 100644
index 0000000..a95c7f8
--- /dev/null
+++ b/apps/frontend/src/components/homepage/HeroCard2.tsx
@@ -0,0 +1,56 @@
+
+import { CardBody, CardContainer, CardItem } from "../ui/3d-card";
+import img from '../../assets/support.gif'
+
+export function HeroCard2() {
+ return (
+
+
+
+ Request Support
+
+
+ Hover over this card to unleash the power of CSS perspective
+
+
+
+
+ {/*
+
+ Try now →
+
+
+ Sign up
+
+
*/}
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/frontend/src/components/homepage/HeroCard3.tsx b/apps/frontend/src/components/homepage/HeroCard3.tsx
new file mode 100644
index 0000000..501cece
--- /dev/null
+++ b/apps/frontend/src/components/homepage/HeroCard3.tsx
@@ -0,0 +1,56 @@
+
+import { CardBody, CardContainer, CardItem } from "../ui/3d-card";
+import img from '../../assets/explore.gif'
+
+export function HeroCard3() {
+ return (
+
+
+
+ Connect & Collaborate
+
+
+ Hover over this card to unleash the power of CSS perspective
+
+
+
+
+ {/*
+
+ Try now →
+
+
+ Sign up
+
+
*/}
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/frontend/src/components/homepage/Home.tsx b/apps/frontend/src/components/homepage/Home.tsx
index 2403e4c..2e0e2f7 100644
--- a/apps/frontend/src/components/homepage/Home.tsx
+++ b/apps/frontend/src/components/homepage/Home.tsx
@@ -1,8 +1,10 @@
+import Hero from "./Hero"
const Home = () => {
return (
-