Skip to content

Commit

Permalink
feat(web): beginning of landing page v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@ferothefox
ferothefox committed Aug 14, 2023
1 parent 8fe88f4 commit 437e8c5
Show file tree
Hide file tree
Showing 7 changed files with 160 additions and 74 deletions.
2 changes: 1 addition & 1 deletion apps/web/src/lib/components/landing/FeatureSection.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div class="beatforge-landing-std-landing-section px-4 sm:px-8 relative flex flex-col items-center justify-center w-full gap-16 mx-auto text-center py-36 max-w-7xl">
<div class="beatforge-landing-std-landing-section px-4 sm:px-8 relative flex flex-col justify-center w-full gap-16 mx-auto py-36 max-w-7xl">
<slot />
</div>
31 changes: 15 additions & 16 deletions apps/web/src/lib/components/landing/LandingBentoSection.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,17 @@
</script>

<div
style="background: radial-gradient(ellipse 100% 40% at 50% 60%,rgb(164 99 246 / 7%),var(--transparent)); margin-top: 128px;"
style="background: radial-gradient(ellipse 100% 50% at 80% 50%,rgb(164 99 246 / 12%),var(--transparent)), radial-gradient(ellipse 100% 40% at 20% 50%,rgb(210 99 246 / 8%),var(--transparent)); margin-top: 128px;"
>
<FeatureSection>
<h2
class="-mb-12 text-sm font-bold tracking-wider uppercase beatforge-landing-std-eyebrow landing-gradient-eyebrow"
class="-mb-8 text-sm font-bold tracking-wider uppercase beatforge-landing-std-eyebrow landing-gradient-eyebrow"
>
Why BeatForge
</h2>
<IntersectionObserver
once={true}
class="flex flex-col items-center justify-center gap-8 text-center"
class="flex flex-col justify-center gap-12"
let:intersecting
top={-250}
>
Expand All @@ -49,8 +49,7 @@

<LandingDescription>
<p class="transition duration-[500ms] delay-300 {intersecting ? '' : textTransition}">
From beginning to end, discovery to installation, BeatForge streamlines your modding
experience with impeccable seamlessness.
Welcome to the first mod manager you'll actually want to use. BeatForge's powerful yet simple interface makes discovering and installing mods a breeze. Every click, every interaction, and every click is designed with unforgiving precision.
</p>
</LandingDescription>
</IntersectionObserver>
Expand All @@ -63,19 +62,19 @@
>
<div class="flex flex-row gap-2 beatforge-landing-bentobox-row-first">
<div
class="beatforge-landing-bentobox-item text-left bg-[#19181B] w-full basis-1/2 p-4 sm:p-16 rounded-md"
class="beatforge-landing-bentobox-item text-left bg-[#ffffff11] w-full basis-1/2 p-4 sm:p-16 rounded-md"
>
<h3 class="mb-1 font-bold text-white">Open-source transparency.</h3>
<p class="text-[#8B888C]">
<p class="text-[#8B888C] font-medium">
BeatForge won’t lock you in to our platform. Distribute where you want, when you want,
and leave any time. Development is public, and always will be.
</p>
</div>
<div
class="beatforge-landing-bentobox-item text-left bg-[#19181B] w-full basis-1/2 p-4 sm:p-16 rounded-md"
class="beatforge-landing-bentobox-item text-left bg-[#ffffff11] w-full basis-1/2 p-4 sm:p-16 rounded-md"
>
<h3 class="mb-1 font-bold text-white">Crafted to perfection.</h3>
<p class="text-[#8B888C]">
<p class="text-[#8B888C] font-medium">
Built with the bleeding edge of technology, BeatForge is a polished product built with
unforgiving precision.
</p>
Expand All @@ -84,12 +83,12 @@

<div class="flex flex-row gap-2 beatforge-landing-bentobox-row-second">
<div
class="beatforge-landing-bentobox-item text-left bg-[#19181B] w-full p-4 sm:p-16 rounded-md relative"
class="beatforge-landing-bentobox-item text-left bg-[#ffffff11] w-full p-4 sm:p-16 rounded-md relative"
>
<img src="/images/app.png" class="absolute top-0 right-0" alt="application" />
<div class="max-w-[330px] mt-[196px]">
<h3 class="mb-1 font-bold text-white">Minimally designed with tasteful touches.</h3>
<p class="text-[#8B888C]">
<p class="text-[#8B888C] font-medium">
We stay out of your way. Mod in less time, and play in no time.
</p>
</div>
Expand All @@ -105,20 +104,20 @@

<div class="flex flex-row gap-2 beatforge-landing-bentobox-row-third">
<div
class="beatforge-landing-bentobox-item text-left bg-[#19181B] w-full basis-1/2 p-4 sm:p-16 rounded-md"
class="beatforge-landing-bentobox-item text-left bg-[#ffffff11] w-full basis-1/2 p-4 sm:p-16 rounded-md"
>
<h3 class="mb-1 font-bold text-white">Safe and secure.</h3>
<p class="text-[#8B888C]">
<p class="text-[#8B888C] font-medium">
Manual human review and additional protections and verifications at the code level
ensures that every mod featured is safe for your use.
</p>
</div>
<div
class="beatforge-landing-bentobox-item text-left bg-[#19181B] w-full basis-1/2 p-4 sm:p-16 rounded-md"
class="beatforge-landing-bentobox-item text-left bg-[#ffffff11] w-full basis-1/2 p-4 sm:p-16 rounded-md"
>
<h3 class="mb-1 font-bold text-white">Made for the future.</h3>
<p class="text-[#8B888C]">
Stagnation kills modding communities. We’re is in it for the long run. We’re building
<p class="text-[#8B888C] font-medium">
Stagnation kills modding communities. We’re in it for the long run. We’re building
a solid foundation and a team that believes in open platforms.
</p>
</div>
Expand Down
102 changes: 55 additions & 47 deletions apps/web/src/lib/components/landing/LandingCLISection.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,84 +5,92 @@
import IntersectionObserver from '$lib/components/IntersectionObserver.svelte';
import { DownloadIcon } from 'ui/icons';
import { Link } from 'ui/link'
import { DownloadIcon, LogoIcon } from 'ui/icons';
import { Link } from 'ui/link';
let textTransition = 'translate-y-[32px] opacity-30 duration-[400ms]';
let headerTransition = 'translate-y-[32px] opacity-30 duration-[400ms]';
</script>

<div
style="background: radial-gradient(ellipse 100% 60% at 50% 60%,rgb(164 99 246 / 7%),var(--transparent)); margin-top: 128px;"
style="background: radial-gradient(ellipse 100% 60% at 50% 60%,rgb(246 99 115 / 9%),var(--transparent)); margin-top: 128px;"
>
<FeatureSection>
<h2 class="-mb-12 text-sm font-bold tracking-wider uppercase landing-gradient-eyebrow">CLI</h2>
<h2 class="-mb-8 text-sm font-bold tracking-wider uppercase landing-gradient-eyebrow">CLI</h2>
<IntersectionObserver
once={true}
class="flex flex-col items-center justify-center gap-8 text-center"
class="flex flex-col justify-center gap-12"
let:intersecting
top={-250}
>
<LandingHeading>
<h1 class="transition duration-[500ms] delay-300 {intersecting ? '' : headerTransition}">
Tools that empower developers to build better, faster.
Empowering developers to build, test, and publish, faster.
</h1>
</LandingHeading>

<LandingDescription>
<p class="transition duration-[500ms] delay-300 {intersecting ? '' : textTransition}">
BeatForge is built with developers in mind. A powerful CLI for publishing and managing
your mods, friendly for automated scripts and CI/CD pipelines.
Designed with developers in mind, the BeatForge CLI is a powerful tool that allows you to
create, test, and publish mods, friendly for CI pipelines.
</p>
</LandingDescription>
</IntersectionObserver>

<Link variant="secondary">
<DownloadIcon customClasses="w-4 h-4 " />
<p class="p-1 text-sm font-bold">Get the CLI</p>
</Link>

<IntersectionObserver once={true} let:intersecting top={0}>
<div
class="beatforge-landing-terminal-window-wrapper flex flex-col overflow-hidden rounded-xl w-full border-[2px] border-[#40434e]"
style="filter: drop-shadow(0 0 100px #000000);"
>
<div class="relative h-[54px] bg-[#19181b]">
<div
class="flex items-center h-full ml-5 beatforge-landing-terminal-window-bullets"
aria-hidden="true"
>
<span />
<span />
<span />
</div>
</div>
<div style="background: linear-gradient(rgb(189 144 144 / 28%) 0%, rgba(0, 0, 0, 0) 100%);" class="relative w-full min-h-[350px] rounded-xl">
<div
class="flex flex-col gap-2 font-mono bg-[#19181b] p-8 w-full max-w-3xl text-left relative select-none"
class="beatforge-landing-terminal-window-wrapper flex flex-col overflow-hidden rounded-xl absolute inset-[1px]"
style="box-shadow: 0px 22px 41px 11px rgba(0, 0, 0, 0.59); background: radial-gradient(98.00% 98.00% at 50.00% 2.00%, #030202 0%, #000 100%);"
>
<div class="contents">
<div class="flex flex-row items-center gap-4">
<div class="text-sm select-none opacity-30" aria-hidden>$</div>
<p
class:beatforge-terminal-line-animated={intersecting}
class="beatforge-terminal-line"
>
beatforge init <span class="select-none opacity-30"
>// Create a new mod project with BSIPA</span
>
</p>
<div class="relative h-[54px]">
<div
class="flex items-center h-full ml-5 beatforge-landing-terminal-window-bullets"
aria-hidden="true"
>
<span />
<span />
<span />
</div>
<div class="flex flex-row items-center gap-4">
<div class="text-sm select-none opacity-30" aria-hidden>$</div>
<p
class:beatforge-terminal-line-animated-second={intersecting}
class="beatforge-terminal-line"
>
beatforge publish <span class="select-none opacity-30"
>// Publish your mod to BeatForge (you're done! 🎉)</span
</div>
<div class="flex flex-col gap-2 font-mono p-8 w-full h-full justify-center text-left relative select-none">
<div class="contents">
<div class="opacity-40 text-white">
It's as simple as...
</div>
<div class="terminal-row terminal-row-first flex flex-row items-center gap-4 w-fit">
<div class:beatforge-terminal-line-animated={intersecting}>
<LogoIcon customClasses="w-4 h-4" />
</div>
<div class="">~/</div>
<p
class:beatforge-terminal-line-animated={intersecting}
class="beatforge-terminal-line-first"
>
beatforge init
</p>
<div class:blinking-cursor-animated={intersecting} class="blinking-cursor-first" />
</div>
<div class="terminal-row terminal-row-second flex flex-row items-center gap-4 w-fit">
<div class="beatforge-terminal-line-second" class:beatforge-terminal-line-animated={intersecting}>
<LogoIcon customClasses="w-4 h-4" />
</div>
<div class="beatforge-terminal-line-second" class:beatforge-terminal-line-animated={intersecting}>~/</div>
<p
class:beatforge-terminal-line-animated={intersecting}
class="beatforge-terminal-line-second"
>
</p>
beatforge publish
</p>
<div class:blinking-cursor-animated={intersecting} class="blinking-cursor-second" />
</div>
</div>
</div>
<Link variant="secondary">
<DownloadIcon customClasses="w-4 h-4 " />
<p class="p-1 text-sm font-bold">Get the CLI</p>
</Link>
</div>
</div>
</IntersectionObserver>
Expand Down
13 changes: 6 additions & 7 deletions apps/web/src/lib/components/landing/LandingClientSection.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,21 +18,20 @@
<FeatureSection>
<IntersectionObserver
once={true}
class="flex flex-col items-center justify-center gap-8 text-center"
class="flex flex-col justify-center gap-12"
let:intersecting
top={0}
>
<h2 class="text-sm font-bold tracking-wider uppercase landing-gradient-eyebrow">Client</h2>
<LandingHeading>
<h1 class="transition duration-[500ms] delay-300 {intersecting ? '' : headerTransition}">
BeatForge Client is your ultimate modding companion.
Your ultimate modding companion for Beat Saber.
</h1>
</LandingHeading>

<LandingDescription>
<p class="transition duration-[500ms] delay-300 {intersecting ? '' : textTransition}">
BeatForge Client is the best way to discover, install, and manage your mods. Free,
open-source, and incredibly fast.
<p class="-mt-8 transition duration-[500ms] delay-300 {intersecting ? '' : textTransition}">
Built with a steadfast focus on performance and usability, BeatForge Client is the best way to install and manage your mods. Made with Rust, not Electron.
</p>
</LandingDescription>

Expand All @@ -41,9 +40,9 @@
<p class="p-1 text-sm font-bold">Download Now</p>
</Link>

<div class="relative transform-gpu">
<div class="relative transform-gpu h-96">
<div class="absolute inset-0 app_ss_shadow" />
<img src="/images/app_screenshot.png" class="w-full object-fit" alt="app screenshot" />
<img style="-webkit-mask-image: linear-gradient(black, transparent 70%);" src="/images/app_screenshot.png" class="w-full object-fit" alt="app screenshot" />
</div>
</IntersectionObserver>
</FeatureSection>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/lib/components/landing/LandingHeading.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@
import { Text } from "ui/text";
</script>

<Text variant="headline" customClasses="beatforge-landing-std-header beatforge-landing-header-responsive relative max-w-[800px] text-5xl font-extrabold leading-[1.1] tracking-wide">
<Text variant="h1" customClasses="beatforge-landing-std-header beatforge-landing-header-responsive relative max-w-[800px] text-4xl font-extrabold leading-[1.1] tracking-wide">
<slot />
</Text>
2 changes: 2 additions & 0 deletions apps/web/src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,5 @@

<LandingCLISection />
</main>

<div class="hidden xl:block fixed max-w-[calc(80rem)] w-full h-full mx-auto left-0 right-0 top-0 bottom-0 border-x-2 border-dashed border-[#ffffff11] pointer-events-none select-none" aria-hidden="true"></div>
82 changes: 80 additions & 2 deletions apps/web/src/routes/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
}

.beatforge-landing-header-responsive {
font-size: max(32px, min(5vw, 56px));
font-size: max(30px, min(5vw, 48px));
}

.beatforge-landing-terminal-window-wrapper:hover
Expand Down Expand Up @@ -43,7 +43,7 @@
}

.beatforge-landing-terminal-window-wrapper:hover {
transform: scale(1.02);

}

.beatforge-landing-terminal-window-wrapper {
Expand Down Expand Up @@ -271,4 +271,82 @@
width: 100%;
z-index: 3;
animation: hue-rotate 9s linear infinite forwards;
}

.beatforge-landing-std-landing-section {
background-image: radial-gradient(circle, #ffffff14 1px, transparent 1px);
background-size: 20px 20px;
}

/* @keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.blinking-cursor {
animation: blink 1s step-end infinite;
} */

.terminal-row {
position: relative
}

.blinking-cursor-animated:before {
position: absolute;
top: 0;
content: "";
height: 100%;
left: 0;
transition: transform 1s;
transform-origin: 0% 50%;
background: white;
}

.blinking-cursor-first.blinking-cursor-animated:before {
animation: effect-block 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.blinking-cursor-second.blinking-cursor-animated:before {
animation: effect-block 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
animation-delay: 1s;
}

@keyframes effect-block {
0% {
left: 0;
width: 0%;
}
50% {
left: 0;
width: 100%;
}
100% {
left: 100%;
width: 12px;
}
}

@keyframes term-reveal {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

.beatforge-terminal-line-animated {
opacity: 0;
animation: term-reveal 0s linear both;
animation-delay: 0.5s;
}

.beatforge-terminal-line-animated.beatforge-terminal-line-second {
animation-delay: 1.5s
}

0 comments on commit 437e8c5

Please sign in to comment.