-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #34 from Bug-Bust3rs/dev
feat : hero section
- Loading branch information
Showing
11 changed files
with
388 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.