Merge pull request #34 from Bug-Bust3rs/dev

feat : hero section

apps/frontend/package.json

@@ -10,9 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.3.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.24.0"
+    "react-router-dom": "^6.24.0",
+    "tailwind-merge": "^2.4.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

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

@@ -0,0 +1,53 @@
+import { HeroCard} from "./HeroCard"
+import { HeroCard2 } from "./HeroCard2"
+import { HeroCard3 } from "./HeroCard3"
+const Hero = () => {
+  return (
+    <section className="pt-8 mt-[100px] lg:mt-0 lg:pt-32 bg-[url('https://pagedone.io/asset/uploads/1691055810.png')] bg-center bg-cover">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative text-center">
+        <div className="border border-blue-600 p-1 w-60 mx-auto rounded-full flex items-center justify-between mb-4">
+          <span className="font-inter text-xs font-medium text-gray-900 ml-3"
+          > Request Help</span>
+          <a href="javascript:;" className="w-8 h-8 rounded-full flex justify-center items-center bg-blue-600">
+            <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M2.83398 8.00019L12.9081 8.00019M9.75991 11.778L13.0925 8.44541C13.3023 8.23553 13.4073 8.13059 13.4073 8.00019C13.4073 7.86979 13.3023 7.76485 13.0925 7.55497L9.75991 4.22241"
+                stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </a>
+        </div>
+        <h1
+          className="max-w-3xl mx-auto text-center font-manrope font-bold text-4xl text-gray-900 mb-5 md:text-5xl leading-[50px]">
+          {/* Control your Finances with our
+            <span className="text-blue-600">Smart Tool </span> */}
+
+
+Join events, offer services, or get help securely with <span  className="text-blue-600">Unite.</span>
+        </h1>
+        <p className="max-w-sm mx-auto text-center text-base font-normal leading-7 text-gray-500 mb-9">
+        Join our platform effortlessly and start making a difference in your community today. 
+        </p>
+        <a href="javascript:;"
+          className="w-full md:w-auto mb-14 inline-flex items-center justify-center py-3 px-7 text-base font-semibold text-center text-white rounded-full bg-blue-600 shadow-xs hover:bg-blue-700 transition-all duration-500">
+          Join as a Volunteer
+          <svg className="ml-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M7.5 15L11.0858 11.4142C11.7525 10.7475 12.0858 10.4142 12.0858 10C12.0858 9.58579 11.7525 9.25245 11.0858 8.58579L7.5 5"
+              stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </a>
+        <div className="flex justify-center items-center gap-[-10] lg:gap-5 flex-col lg:flex-row ">
+
+
+         <HeroCard/>
+         <HeroCard2/>
+         <HeroCard3/>
+
+
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Hero

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 (
+    <CardContainer className="inter-var">
+      <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border  ">
+        <CardItem
+          translateZ="50"
+          className="text-3xl font-bold text-neutral-600 dark:text-white"
+        >
+          Easy Volunteer <span className="text-blue-600">Signup</span>
+        </CardItem>
+        <CardItem
+          as="p"
+          translateZ="60"
+          className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
+        >
+          Hover over this card to unleash the power of CSS perspective
+        </CardItem>
+        <CardItem
+          translateZ="100"
+          rotateX={20}
+          rotateZ={-10}
+          className="w-full mt-4"
+        >
+          <img
+            src={img}
+            className="h-auto  w-full object-cover rounded-xl group-hover/card:shadow-xl"
+            alt="thumbnail"
+          />
+        </CardItem>
+        {/* <div className="flex justify-between items-center mt-20">
+          <CardItem
+            translateZ={20}
+            translateX={-40}
+            as="button"
+            className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
+          >
+            Try now →
+          </CardItem>
+          <CardItem
+            translateZ={20}
+            translateX={40}
+            as="button"
+            className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold"
+          >
+            Sign up
+          </CardItem>
+        </div> */}
+      </CardBody>
+    </CardContainer>
+  );
+}

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 (
+        <CardContainer className="inter-var">
+            <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border  ">
+                <CardItem
+                    translateZ="50"
+                    className="text-3xl font-bold text-neutral-600 dark:text-white"
+                >
+                    Request <span className="text-blue-600">Support</span>
+                </CardItem>
+                <CardItem
+                    as="p"
+                    translateZ="60"
+                    className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
+                >
+                    Hover over this card to unleash the power of CSS perspective
+                </CardItem>
+                <CardItem
+                    translateZ="100"
+                    rotateX={20}
+                    rotateZ={20}
+                    className="w-full mt-4"
+                >
+                    <img
+                        src={img}
+
+                        className="h-auto w-full object-cover rounded-xl group-hover/card:shadow-xl"
+                        alt="thumbnail"
+                    />
+                </CardItem>
+                {/* <div className="flex justify-between items-center mt-20">
+          <CardItem
+            translateZ={20}
+            translateX={-40}
+            as="button"
+            className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
+          >
+            Try now →
+          </CardItem>
+          <CardItem
+            translateZ={20}
+            translateX={40}
+            as="button"
+            className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold"
+          >
+            Sign up
+          </CardItem>
+        </div> */}
+            </CardBody>
+        </CardContainer>
+    );
+}

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 (
+        <CardContainer className="inter-var">
+            <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border  ">
+                <CardItem
+                    translateZ="50"
+                    className="text-3xl font-bold text-neutral-600 dark:text-white"
+                >
+                    Connect & <span className="text-blue-600">Collaborate</span>
+                </CardItem>
+                <CardItem
+                    as="p"
+                    translateZ="60"
+                    className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
+                >
+                    Hover over this card to unleash the power of CSS perspective
+                </CardItem>
+                <CardItem
+                    translateZ="100"
+                    rotateX={-10}
+                    rotateZ={20}
+                    className="w-full mt-4"
+                >
+                    <img
+                        src={img}
+
+                        className="h-auto w-full object-cover rounded-xl group-hover/card:shadow-xl"
+                        alt="thumbnail"
+                    />
+                </CardItem>
+                {/* <div className="flex justify-between items-center mt-20">
+          <CardItem
+            translateZ={20}
+            translateX={-40}
+            as="button"
+            className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
+          >
+            Try now →
+          </CardItem>
+          <CardItem
+            translateZ={20}
+            translateX={40}
+            as="button"
+            className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold"
+          >
+            Sign up
+          </CardItem>
+        </div> */}
+            </CardBody>
+        </CardContainer>
+    );
+}

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

@@ -1,8 +1,10 @@
+import Hero from "./Hero"
 
 const Home = () => {
   return (
-    <div className='mt-5'>
-      Home
+    <div className='mt-15'>
+      <Hero />
+
     </div>
   )
 }