feat : new hero

apps/frontend/src/components/homepage/CardSection.tsx

@@ -0,0 +1,39 @@
+import { ThreeDCardDemo } from "./ThreeDCard";
+
+import AOS from 'aos';
+import 'aos/dist/aos.css';
+import { useEffect } from 'react';
+
+
+const CardsSection = () => {
+
+
+  useEffect(() => {
+    AOS.init();
+  }, [])
+  return (
+    <div className="flex justify-center items-center flex-col sm:flex-row gap-2 sm:gap-[10rem] w-[80%] sm:w-full">
+      <div data-aos={'fade-right'}>
+        <h1 className="font-manrope dark:text-white text-4xl text-gray-900 mb-5 md:text-5xl leading-[50px]text-center sm:text-left sm:text-6xl font-bold text-grey-900">
+        If you need assistance <br /> 
+          <span className={` font-extrabold text-blue-600`}>
+            Unite
+          </span> <br/>
+          makes it   simple  to <br/>request help.
+        </h1>
+        {/* <p className="sm:max-w-lg md:text-base mt-8  text-center sm:text-left text-base font-normal leading-7 text-gray-500">
+         
+          <span className={` font-extrabold text-blue-600`}>
+            Unite
+          </span>{" "}
+          CLI simplifies API project setup. It lets you create RESTful APIs
+          swiftly, supporting various backend tech and DBs. Ideal for devs at
+          any level
+        </p> */}
+      </div>
+      <ThreeDCardDemo data-aos={'fade-left'} />
+    </div>
+  );
+}
+
+export default CardsSection

apps/frontend/src/components/homepage/FeatureCard.tsx

@@ -0,0 +1,17 @@
+import img from '../../assets/explore.gif'
+
+const FeatureCard = () => {
+  return (
+    <div className="z-10">
+      <img
+        src={img}
+
+        className="h-19 w-19 rounded-xl "
+        alt="thumbnail"
+      />
+
+    </div>
+  );
+}
+
+export default FeatureCard;

apps/frontend/src/components/homepage/Hero.tsx

@@ -2,9 +2,10 @@
 import AOS from 'aos';
 import 'aos/dist/aos.css';
 import { useEffect } from 'react';
-import { HeroCard } from './HeroCard';
-import { HeroCard2 } from './HeroCard2';
-import { HeroCard3 } from './HeroCard3';
+// import { HeroCard } from './cards/HeroCard';
+// import { HeroCard2 } from './cards/HeroCard2';
+// import { HeroCard3 } from './cards/HeroCard3';
+import CardsSection from './CardSection';
 
 const Hero = () => {
 
@@ -26,8 +27,8 @@ const Hero = () => {
           </a>
         </div>
         <h1
-        data-aos={'fade-right'}
-          className="max-w-3xl mx-auto text-center font-manrope dark:text-white font-bold text-4xl text-gray-900 mb-5 md:text-5xl leading-[50px]">
+          data-aos={'fade-right'}
+          className="max-w-7xl mx-auto text-center font-manrope dark:text-white font-bold text-4xl text-gray-900 mb-5 md:text-6xl leading-[50px]">
           {/* Control your Finances with our
             <span className="text-blue-600">Smart Tool </span> */}
 
@@ -46,15 +47,12 @@ const Hero = () => {
               stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
           </svg>
         </a>
-        <div data-aos={'fade-down'} className="flex justify-center items-center gap-[-10] lg:gap-5 flex-col lg:flex-row ">
+        <div  className="flex justify-center items-center gap-[-10] lg:gap-5 flex-col lg:flex-row ">
 
 
-
-<HeroCard/>
-<HeroCard2/>
 
-<HeroCard3/>
 
+          <CardsSection />
 
 
         </div>

apps/frontend/src/components/homepage/ThreeDCard.tsx

@@ -0,0 +1,18 @@
+
+import { CardBody, CardContainer, CardItem } from "../ui/3d-card";
+import FeatureCard from "./FeatureCard";
+
+export function ThreeDCardDemo() {
+  return (
+    <CardContainer className="inter-var">
+      <CardBody className=" relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1]  border-black/[0.1] w-auto sm:w-[22rem] h-auto rounded-xl p-6  ">
+        <CardItem
+          translateZ="50"
+          className="text-xl font-bold text-white"
+        >
+          <FeatureCard/>
+        </CardItem>
+      </CardBody>
+    </CardContainer>
+  );
+}

apps/frontend/src/components/homepage/HeroCard.tsx → apps/frontend/src/components/homepage/cards/HeroCard.tsx

@@ -1,5 +1,5 @@
 
-import { CardBody, CardContainer, CardItem } from "../ui/3d-card";
+import { CardBody, CardContainer, CardItem } from "../../ui/3d-card";
 import img from '../../assets/sign_up.gif'
 
 export function HeroCard() {

apps/frontend/src/components/homepage/HeroCard2.tsx → apps/frontend/src/components/homepage/cards/HeroCard2.tsx

@@ -1,5 +1,5 @@
 
-import { CardBody, CardContainer, CardItem } from "../ui/3d-card";
+import { CardBody, CardContainer, CardItem } from "../../ui/3d-card";
 import img from '../../assets/support.gif'
 
 export function HeroCard2() {

apps/frontend/src/components/homepage/HeroCard3.tsx → apps/frontend/src/components/homepage/cards/HeroCard3.tsx

@@ -1,5 +1,5 @@
 
-import { CardBody, CardContainer, CardItem } from "../ui/3d-card";
+import { CardBody, CardContainer, CardItem } from "../../ui/3d-card";
 import img from '../../assets/explore.gif'
 
 export function HeroCard3() {