Skip to content

Commit

Permalink
update to typewriter. Incomplete, but animation seems to be mostly fi…
Browse files Browse the repository at this point in the history 
…ne. Need more specifications before continuing
  • Loading branch information
@apg868
apg868 committed Mar 22, 2024
1 parent 6568101 commit 92ec913
Showing 1 changed file with 48 additions and 26 deletions.
74 changes: 48 additions & 26 deletions src/components/Hero.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,63 @@
export default function Hero() {
return (

<div className="flex flex-col overflow-hidden">
<style>{`
@keyframes typewriter {
from { width: 0; }
to { width: 100%; }
}
@keyframes blinkCursor {
0% { border-color: transparent; }
50% { border-color: rgba(0, 0, 0, 0.75); }
100% { border-color: transparent; }
}
.typewriter-program, .typewriter-management {
display: inline-block;
overflow: hidden;
white-space: nowrap;
letter-spacing: normal; /* Reset to default */
animation: typewriter 2.5s steps(40) 1s 1 normal both,
blinkCursor 500ms steps(40) infinite;
}
.typewriter-program {
display: inline-block;
overflow: hidden;
line-height: normal;
white-space: nowrap;
letter-spacing: normal;
animation: typewriter 2.5s steps(40) 1s 1 normal both,
blinkCursor 500ms steps(40) infinite;
}
.typewriter-management {
display: inline-block;
overflow: hidden;
white-space: nowrap;
letter-spacing: normal;
margin-top: -0.5em;
line-height: normal;
animation: typewriter 2.5s steps(40) 3.5s 1 normal both,
blinkCursor 500ms steps(40) infinite;
}
`}</style>
<div className="flex flex-col lg:flex-row justify-between">
<div className="flex items-start flex-col lg:flex-row lg:gap-10 mb-14">
<div className="ml-3 min-[400px]:ml-10 lg:ml-32 mt-10 lg:mt-20 font-lexend">
<h3 className="text-lg lg:text-2xl font-bold text-[#9C9AB7]">We are a one-stop shop for</h3>

<h1 className="text-5xl lg:text-7xl font-bold text-[#24223C] pb-3">
Program <br />
<div className="absolute ml-[137px] lg:ml-[210px] mt-[12px] lg:mt-5 -z-40">
<span className="typewriter-program">Program</span> <br />

<svg xmlns="http://www.w3.org/2000/svg" width="21" height="13" viewBox="0 0 21 13" fill="none">
<path d="M0.132512 0.0223248C-0.33267 3.37063 0.418768 6.60782 2.51567 8.9709C4.61256 11.334 7.6613 12.3859 10.9247 12.1933C11.3899 8.84497 10.6385 5.60778 8.54157 3.2447C6.44468 0.881625 3.39594 -0.170277 0.132512 0.0223248Z" fill="#3BCABE" />
<path d="M20.5435 0.0223248C21.0087 3.37063 20.2572 6.60782 18.1603 8.9709C16.0635 11.334 13.0147 12.3859 9.75129 12.1933C9.2861 8.84497 10.0375 5.60778 12.1344 3.2447C14.2313 0.881625 17.2801 -0.170277 20.5435 0.0223248Z" fill="#9ADB67" />
</svg>
</div>
<span className="block text-[#FA9D74] pt-2">Management</span>
<span className="typewriter-management block text-[#FA9D74] pt-2">Management</span>
</h1>

<div className="CTA flex gap-3 mt-10 lg:text-2xl font-semibold">
<button className="px-10 py-3 bg-[#023849] border-4 text-[#FEFDFF] border-[#023849] rounded-[100px]"><a href = "https://discord.gg/PnyMh9325g">Join us on Discord</a></button>
<button className="px-10 py-3 bg-[#023849] border-4 text-[#FEFDFF] border-[#023849] rounded-[100px]">Join us on Discord</button>
</div>
</div>
</div>

</div>
<div className="mt-14 mr-3 hidden lg:block">

<svg className="-z-50" width="630" height="235" viewBox="0 0 630 235" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#D7F5F2" />
<circle cx="42.5" cy="7.5" r="7.5" fill="#D7F5F2" />
Expand Down Expand Up @@ -119,9 +150,7 @@ export default function Hero() {
<circle cx="567.5" cy="227.5" r="7.5" fill="#D7F5F2" />
<circle cx="602.5" cy="227.5" r="7.5" fill="#D7F5F2" />
</svg>

<div className="flex flex-row ml-10">

<div>
<div className="relative -z-40 rect-grad1 w-[6px] h-[229px] -mt-[84px] ml-10 ">

Expand All @@ -131,9 +160,7 @@ export default function Hero() {
<path d="M73.9357 0.0804127C75.61 12.1409 72.9054 23.8011 65.3581 32.3127C57.8108 40.8244 46.8376 44.6133 35.0916 43.9196C33.4173 31.8591 36.1219 20.1989 43.6692 11.6873C51.2165 3.17557 62.1897 -0.61333 73.9357 0.0804127Z" fill="#9ADB67" />
</svg>
<div className="relative -ml-[50px] -mt-72 bg-[#3BCABE] w-[194px] h-[194px] rounded-full flex">

<img className="rounded-full justify-center items-center m-2" src="./images/h-1.png" alt=""></img>

</div>

</div>
Expand All @@ -147,9 +174,7 @@ export default function Hero() {
<path d="M73.9357 0.0804127C75.61 12.1409 72.9054 23.8011 65.3581 32.3127C57.8108 40.8244 46.8376 44.6133 35.0916 43.9196C33.4173 31.8591 36.1219 20.1989 43.6692 11.6873C51.2165 3.17557 62.1897 -0.61333 73.9357 0.0804127Z" fill="#9ADB67" />
</svg>
<div className="relative -ml-[50px] -mt-80 bg-[#FA9D74] w-[194px] h-[194px] rounded-full flex">

<img className="rounded-full justify-center items-center m-4" src="./images/h-2.png" alt=""></img>

</div>
</div>

Expand All @@ -162,7 +187,6 @@ export default function Hero() {
<path d="M73.9357 0.0804127C75.61 12.1409 72.9054 23.8011 65.3581 32.3127C57.8108 40.8244 46.8376 44.6133 35.0916 43.9196C33.4173 31.8591 36.1219 20.1989 43.6692 11.6873C51.2165 3.17557 62.1897 -0.61333 73.9357 0.0804127Z" fill="#9ADB67" />
</svg>
<div className="relative -ml-[20px] -mt-60 bg-[#F5D190] w-[125px] h-[125px] rounded-full flex">

<img className="rounded-full justify-center items-center m-4" src="./images/h-3.png" alt=""></img>
</div>
</div>
Expand Down Expand Up @@ -281,14 +305,12 @@ export default function Hero() {
</div>

</div>



</div>
</div>
<div className="rect-grad w-full h-[12px] mb-4">

</div>
</div>
);
}

}

0 comments on commit 92ec913

Please sign in to comment.