Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update home.html #1758

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update home.html #1758

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 100 additions & 88 deletions layouts/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,31 @@
{{ define "header" }}
{{ partial "topnav" }}
{{ partial "topnav" }}
{{ end }}

{{ define "main" }}
<div class="prose dark:prose-invert min-w-full">
<div class="container">
<div class="flex flex-col md:flex-row mt-20">
<div
class="min-w-[50%] flex flex-col justify-center items-center text-center p-6"
>

<!-- Left section: Title, description, and call-to-action button -->
<div class="min-w-[50%] flex flex-col justify-center items-center text-center p-6">
<h1 class="text-6xl mb-0">
Learn to Code <span class="gradient-text">faster.</span>
</h1>
<p class="text-2xl text-gray3">
Fireship is a
<img-reveal src="/img/speed.gif"><span class="text-yellow-500 font-bold">blazingly fast</span></img-reveal>
&&
<img-reveal src="/img/cat.gif"><span class="text-pink-500 font-bold">highly-amusing</span></img-reveal>
<img-reveal src="/img/speed.gif">
<span class="text-yellow-500 font-bold">blazingly fast</span>
</img-reveal> &&
<img-reveal src="/img/cat.gif">
<span class="text-pink-500 font-bold">highly-amusing</span>
</img-reveal>
way to level up your programming skills.
</p>
<a href="#truth" class="btn btn-green btn-glow">Start Here</a>
</div>

<!-- Right section: Embedded video -->
<div class="flex w-full relative items-center justify-center">
<div class="w-full mx-auto md:bg-[url('/img/tv.png')] bg-no-repeat bg-cover md:w-[500px] md:max-w-[700px] md:min-h-[300px] mt-20 md:mt-0">
<iframe
Expand All @@ -33,97 +37,105 @@ <h1 class="text-6xl mb-0">
allowfullscreen
></iframe>
</div>

</div>
</div>

<!-- Section: Hard Truth -->
<div class="text-center mt-32 snap-proximity">
<scroll-show repeat="">
<a href="#truth" class="no-underline">
<h2 class="bg-red-500 inline-block text-gray7 px-6 py-4 text-6xl shadow-xl">Hard Truth</h2>
<span class="animate-bounce text-5xl block">
👇
</span>
</a>
</scroll-show>
</div>

<div class="text-center mt-32 snap-proximity">
<scroll-show repeat="">
<a href="#truth" class="no-underline">
<h2 class="bg-red-500 inline-block text-gray7 px-6 py-4 text-6xl shadow-xl">Hard Truth</h2>
<span class="animate-bounce text-5xl block">
👇
</span>
</a>
</scroll-show>
</div>

<div class="md:h-screen grid place-content-center text-center relative" id="truth">

<div>
<scroll-show repeat="">
<p class="text-5xl text-gray3 px-4">
You <img-reveal src="/img/sad.gif"><span class="text-red-500 animate-pulse font-display">can't</span></img-reveal> learn to code by watching videos
</p>
</scroll-show>
<scroll-show>
<a class="animate-bounce mb-[200px] text-2xl no-underline block" href="#solution">
i'm sad 😢
</a>
</scroll-show>

</div>
</div>

<div class="text-center md:h-screen grid place-content-center relative" id="solution">
<div>
<scroll-show>
<h2 class="bg-green-500 inline-block text-gray7 px-6 py-4 text-6xl shadow-xl">Solution</h2>
</scroll-show>
<scroll-show>
<p class="text-3xl text-gray4 max-w-3xl">Fireship is all about <img-reveal src="/img/build.gif"><span class="text-green-500 font-display animate-pulse">project-based</span></img-reveal> learning. I create short highly-focused videos that make learning to code addicting.</p>
<a class="animate-bounce mb-[200px] text-2xl no-underline block" href="#fun">
but like how? 🤔
</a>
</scroll-show>
</div>
</div>

<div class="text-center md:h-screen grid place-content-center relative" id="fun">
<div>
<scroll-show>
<h2 class="bg-purple-500 inline-block text-gray7 px-6 py-4 text-6xl shadow-xl">Have Fun</h2>
</scroll-show>
<scroll-show>
<p class="text-3xl text-gray4 max-w-3xl">I built this one-of-a-kind learning platform to give you <img-reveal src="/img/dance.gif"><span class="text-pink-500 font-display animate-pulse">dopamine</span></img-reveal> hits like XP and meme prizes for every little accomplishment</p>
<if-user>
<a class="animate-bounce mb-[200px] text-2xl no-underline block" href="#end">
you're signed in, sweet 🤟
</a>
<div class="md:h-screen grid place-content-center text-center relative" id="truth">
<div>
<scroll-show repeat="">
<p class="text-5xl text-gray3 px-4">
You <img-reveal src="/img/sad.gif">
<span class="text-red-500 animate-pulse font-display">can't</span>
</img-reveal> learn to code by watching videos
</p>
</scroll-show>
<scroll-show>
<a class="animate-bounce mb-[200px] text-2xl no-underline block" href="#solution">
i'm sad 😢
</a>
</scroll-show>
</div>
</div>

<modal-action slot="signed-out" name="signin" type="open">
<span class="animate-bounce mb-[200px] text-2xl no-underline block cursor-pointer">
login now to start earning useless XP points 💎
</span>
</modal-action>
<!-- Section: Solution -->
<div class="text-center md:h-screen grid place-content-center relative" id="solution">
<div>
<scroll-show>
<h2 class="bg-green-500 inline-block text-gray7 px-6 py-4 text-6xl shadow-xl">Solution</h2>
</scroll-show>
<scroll-show>
<p class="text-3xl text-gray4 max-w-3xl">
Fireship is all about <img-reveal src="/img/build.gif">
<span class="text-green-500 font-display animate-pulse">project-based</span>
</img-reveal> learning. I create short highly-focused videos that make learning to code addicting.
</p>
<a class="animate-bounce mb-[200px] text-2xl no-underline block" href="#fun">
but like how? 🤔
</a>
</scroll-show>
</div>
</div>

</if-user>
</scroll-show>
</div>
</div>
<!-- Section: Have Fun -->
<div class="text-center md:h-screen grid place-content-center relative" id="fun">
<div>
<scroll-show>
<h2 class="bg-purple-500 inline-block text-gray7 px-6 py-4 text-6xl shadow-xl">Have Fun</h2>
</scroll-show>
<scroll-show>
<p class="text-3xl text-gray4 max-w-3xl">
I built this one-of-a-kind learning platform to give you <img-reveal src="/img/dance.gif">
<span class="text-pink-500 font-display animate-pulse">dopamine</span>
</img-reveal> hits like XP and meme prizes for every little accomplishment
</p>
<if-user>
<a class="animate-bounce mb-[200px] text-2xl no-underline block" href="#end">
you're signed in, sweet 🤟
</a>
<modal-action slot="signed-out" name="signin" type="open">
<span class="animate-bounce mb-[200px] text-2xl no-underline block cursor-pointer">
login now to start earning useless XP points 💎
</span>
</modal-action>
</if-user>
</scroll-show>
</div>
</div>

<div class="text-center md:h-screen grid place-content-center relative" id="end">
<div>
<scroll-show>
<h2 class="bg-yellow-500 inline-block text-gray7 px-6 py-4 text-6xl shadow-xl">Let's Go</h2>
</scroll-show>
<scroll-show>
<p class="text-3xl text-gray4 max-w-3xl">There's tons of free content here, so <img-reveal src="/img/look.gif"><span class="text-yellow-500 font-display animate-pulse">play</span></img-reveal> around before you upgrade</p>
<a class="animate-bounce mb-[200px] text-2xl no-underline block" href="courses">
every course starts free, try it out 🚀
</a>
</scroll-show>
</div>
</div>

<!-- Section: Let's Go -->
<div class="text-center md:h-screen grid place-content-center relative" id="end">
<div>
<scroll-show>
<h2 class="bg-yellow-500 inline-block text-gray7 px-6 py-4 text-6xl shadow-xl">Let's Go</h2>
</scroll-show>
<scroll-show>
<p class="text-3xl text-gray4 max-w-3xl">
There's tons of free content here, so <img-reveal src="/img/look.gif">
<span class="text-yellow-500 font-display animate-pulse">play</span>
</img-reveal> around before you upgrade
</p>
<a class="animate-bounce mb-[200px] text-2xl no-underline block" href="courses">
every course starts free, try it out 🚀
</a>
</scroll-show>
</div>
</div>
</div>


</div>

{{ end }}

{{ define "footer" }}
{{ partial "footer" }}
{{ partial "footer" }}
{{ end }}