Skip to content

Commit

Permalink
parallax
Browse files Browse the repository at this point in the history
  • Loading branch information
@parteekcoder
parteekcoder committed Jan 30, 2024
1 parent 6513275 commit c435e46
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 79 deletions.
152 changes: 74 additions & 78 deletions src/components/Hero/HeroSection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function HeroSection() {
};
};

loadScript();
return loadScript();
}, []);

const scrollToAbout = () => {
Expand All @@ -36,93 +36,89 @@ function HeroSection() {
};

return (
<div className="relative w-full bg-[#070201] overflow-hidden">
<Parallax speed={0}>
<div className="w-full h-screen md:h-full overflow-hidden">
<div className="relative h-full">
<div className="relative w-full h-[500px] sm:h-[800px] md:h-[1000px] lg:h-[1200px] xl:h-[2000px] bg-[#070201] overflow-hidden">
<div className='absolute w-full top-12 left-0 z-40'>
<div className="w-full relative lg:relative text-center">
<div className="flex align-center justify-center py-8">
<img
className="h-full w-full object-cover"
src={HeroSky.src}
alt="Hero Sky"
src={HeroText.src}
className="w-[17rem] sm:w-[20rem] lg:w-[60rem]"
alt="Hero Text"
/>
<div className="absolute top-[50%] md:top-[40%] left-[50%] transform -translate-x-1/2 -translate-y-1/2 text-center z-10">
<div className="hero-logo flex align-center justify-center relative py-8">
<img
src={HeroText.src}
className="w-[22rem] sm:w-[40rem] lg:w-[60rem] "
alt="Hero Text"
/>
</div>
<div className="hero-text font-Minecraft text-2xl sm:text-2xl lg:text-4xl font-normal flex relative py-6 flex-col justify-center items-center">
<div className="flex relative">THINK OUTSIDE THE BOX</div>
<div className="flex relative">HACK INSIDE IT</div>
</div>
<div className="text-center font-bold font-Minecraft font-thin text-xl md:text-5xl p-4">
<b>24-25 February, 2024</b>
</div>
<div className="flex relative flex-col justify-center items-center">
<div className="flex relative text-2xl font-bold font-Space-Grotesk py-3">
Dig deeper
</div>
<div
className="flex relative p-6 animate-bounce cursor-pointer"
onClick={scrollToAbout}
>
<img src={LinkArrow.src} width={45} height={30} alt="Link Arrow" />
</div>
<div className="flex flex-col items-center gap-4 sm:flex-wrap">
<div
className="apply-button w-[480px] h-[80px] p-2"
data-hackathon-slug="hackmol-5"
data-button-theme="light"
></div>
<button
onClick={() =>
window.open(
"https://discord.gg/nPF8XgfZ",
"_blank"
)
}
>
<div className="relative sm:w-60 sm:h-50 h-20 w-80">
<Image
className="w-full h-full"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN8AAABICAYAAAB2miDXAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANZSURBVHgB7d0/aBNRHMDxX4w418EpEC1kCHaRToIgQiEgiJQijg4ugiIdHDsLLg4Org6OolJFEAqCCIKLVQRFpFgNFAcHFwWR1jQJl+T+vHv3LvfnlzbfDxzJ5V5KyeXH773fe3epSHodAWBSSdP4gABQkSpSPWQ+IFlibJH5ACUHU7SNZLz7P2+Iq/WdTevx9tZHmSb12lzktbjPwNR2ryv6fBf5mc1XZ2OPXTpyW1yR+QAlaTJf39Lb6wIgu9TBB8CJf5hmLL7Q7QSU2DIfUwpAgWxzEcPgi6tqrrb/xbx1TQBNWtVOP1/l0xhn4cxHtsO+UORURlsGf7s1fG2xfsj2lnBc9YORggtQkHCPMTwHaAw+phOA4lHtBJT0Ml+GcR6FFUwz//f/nKQV6XaaKpvmqiaBB4ypn/AouAA5WG0/856NKqDbb/5Y38OYD1DimPnoYgJ5I/MBSgg+QEmk23nrypNIo+ZKVQC48A/RTllbkvkAJQQfoITgA5QQfIASgg9QQvABSiJTDY2F04ZmrwVAvsh8gBKuagAKsvHilfU4mQ9QQvABSgg+QAnBBygh+AAlBB+ghOADlBB8gBKCD1BC8AFKIsvLTEtimie5hwuQNzIfoITgA5Q4XdWwWI/+Asvo3vQAxkHmA5T0gq8iAEo39sW0pq6oze/OX/ny/0fs8fnqrLhY39l0en9cO1drVz8E9rlr917TCuzVa1uBfdfvm4uHD34ZX28sBPc/Pd4I7HMle0nqtTnBSJYv/375SQOnGyiZIvvCxcMCYCz9oR6Zb2ythOP8piHsBsWWzuCF83cvC6LCK3+aK2et7cNjjK+PZgTFSTo/k3A+nl67N3jajzumGgAlBB+gJDLm86VGuqBARv54CqPg4ihcBf5887m1/bbxtvsoStL5Ket8GK4KutPdlk1tB8HnX+XSEQB5WY47QOYDyhNYyknBBVBiWlQ97HYeX2oEDjQYxwBD4fFdeO2mAZkPmAQEH6AkVcHFdHMluqJALOu1smQ+QEnmqYakX98EYJZ0C4nECfdwRRSYVoZqJ91OYBIldTttkcsyNEyVtPN4Sch8gJIstw0k8wEZYqjshdW9f/RMdzvR3Y55jzPedlSAcnz3Ht93t2/e9rK7vZMS7QI6Vp/BeES8YQAAAABJRU5ErkJggg=="
</div>
<div className="font-Minecraft text-xl sm:text-2xl lg:text-4xl font-normal flex py-6 flex-col justify-center items-center">
<div className="flex">THINK OUTSIDE THE BOX</div>
<div className="flex">HACK INSIDE IT</div>
</div>
<div className="text-center font-bold text-white sm:text-black font-Minecraft text-xl lg:text-5xl p-4">
<b>24-25 February, 2024</b>
</div>
<div className="flex flex-col justify-center items-center text-white sm:text-black">
<div className="flex relative text-2xl font-bold font-Space-Grotesk py-3">
Dig deeper
</div>
<div
className="flex p-6 animate-bounce cursor-pointer"
onClick={scrollToAbout}
>
<img src={LinkArrow.src} width={45} height={30} alt="Link Arrow" />
</div>
<div className="flex flex-col items-center gap-1 sm:gap-2 lg:gap-4 sm:flex-wrap">
<div
className="apply-button w-[480px] h-[80px] p-2"
data-hackathon-slug="hackmol-5"
data-button-theme="light"
></div>
<button
onClick={() =>
window.open(
"https://discord.gg/nPF8XgfZ",
"_blank"
)
}
>
<div className="relative sm:w-60 sm:h-50 h-20 w-70">
<Image
className="w-full"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN8AAABICAYAAAB2miDXAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANZSURBVHgB7d0/aBNRHMDxX4w418EpEC1kCHaRToIgQiEgiJQijg4ugiIdHDsLLg4Org6OolJFEAqCCIKLVQRFpFgNFAcHFwWR1jQJl+T+vHv3LvfnlzbfDxzJ5V5KyeXH773fe3epSHodAWBSSdP4gABQkSpSPWQ+IFlibJH5ACUHU7SNZLz7P2+Iq/WdTevx9tZHmSb12lzktbjPwNR2ryv6fBf5mc1XZ2OPXTpyW1yR+QAlaTJf39Lb6wIgu9TBB8CJf5hmLL7Q7QSU2DIfUwpAgWxzEcPgi6tqrrb/xbx1TQBNWtVOP1/l0xhn4cxHtsO+UORURlsGf7s1fG2xfsj2lnBc9YORggtQkHCPMTwHaAw+phOA4lHtBJT0Ml+GcR6FFUwz//f/nKQV6XaaKpvmqiaBB4ypn/AouAA5WG0/856NKqDbb/5Y38OYD1DimPnoYgJ5I/MBSgg+QEmk23nrypNIo+ZKVQC48A/RTllbkvkAJQQfoITgA5QQfIASgg9QQvABSiJTDY2F04ZmrwVAvsh8gBKuagAKsvHilfU4mQ9QQvABSgg+QAnBBygh+AAlBB+ghOADlBB8gBKCD1BC8AFKIsvLTEtimie5hwuQNzIfoITgA5Q4XdWwWI/+Asvo3vQAxkHmA5T0gq8iAEo39sW0pq6oze/OX/ny/0fs8fnqrLhY39l0en9cO1drVz8E9rlr917TCuzVa1uBfdfvm4uHD34ZX28sBPc/Pd4I7HMle0nqtTnBSJYv/375SQOnGyiZIvvCxcMCYCz9oR6Zb2ythOP8piHsBsWWzuCF83cvC6LCK3+aK2et7cNjjK+PZgTFSTo/k3A+nl67N3jajzumGgAlBB+gJDLm86VGuqBARv54CqPg4ihcBf5887m1/bbxtvsoStL5Ket8GK4KutPdlk1tB8HnX+XSEQB5WY47QOYDyhNYyknBBVBiWlQ97HYeX2oEDjQYxwBD4fFdeO2mAZkPmAQEH6AkVcHFdHMluqJALOu1smQ+QEnmqYakX98EYJZ0C4nECfdwRRSYVoZqJ91OYBIldTttkcsyNEyVtPN4Sch8gJIstw0k8wEZYqjshdW9f/RMdzvR3Y55jzPedlSAcnz3Ht93t2/e9rK7vZMS7QI6Vp/BeES8YQAAAABJRU5ErkJggg=="

width={0}
height={0}
/>
<h1 className="font-Minecrafter text-white text-xl font-bold absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-3/4">
Join Discord
</h1>
</div>
</button>
width={0}
height={0}
/>
<h1 className="font-Minecrafter text-white text-xl font-bold absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-3/4">
Join Discord
</h1>
</div>
</div>
</button>
</div>
</div>
</div>
</div>
<Parallax className='relative top-0 left-0 w-full' speed={0} >
<div className="w-full">
<img
className="w-full object-contain"
src={HeroSky.src}
alt="Hero Sky"
/>
</div>
</Parallax>
<Parallax speed={20} style={{ marginTop: "-70vh" }}>
<div className="w-full h-screen overflow-hidden">
<div className="relative h-full">
<img
className="w-full h-full object-cover"
src={HeroMid.src}
alt="Hero Mid"
/>
</div>
<Parallax speed={13} className='absolute top-40 md:top-60 lg:top-80 left-0 w-full' >
<div className="w-full">
<img
className="w-full object-contain"
src={HeroMid.src}
alt="Hero Mid"
/>
</div>
</Parallax>
<Parallax speed={-5} style={{ marginTop: "-55vh" }}>
<div className="w-full md:h-full h-screen overflow-hidden">
<div className="relative h-full">
<img
className="w-full h-full object-cover"
src={HeroBottom.src}
alt="Hero Bottom"
/>
</div>
<Parallax speed={7} className='absolute bottom-0 left-0 w-full'>
<div className="w-full">
<img
className="w-full object-contain"
src={HeroBottom.src}
alt="Hero Bottom"
/>
</div>
</Parallax>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Hero/marquee.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Marquee from 'react-fast-marquee'

function MarqueeComponent() {
return (
<div className='bg-black text-white py-2 relative z-10 '>
<div className='text-white bg-black'>
<div className=''>
<Marquee
play={true}
Expand Down

0 comments on commit c435e46

Please sign in to comment.