From 437e8c561f4eb5465f2a50ac18b024bbb6e493f1 Mon Sep 17 00:00:00 2001 From: Evan / Fero Date: Sun, 13 Aug 2023 21:57:07 -0700 Subject: [PATCH] feat(web): beginning of landing page v2 --- .../components/landing/FeatureSection.svelte | 2 +- .../landing/LandingBentoSection.svelte | 31 +++--- .../landing/LandingCLISection.svelte | 102 ++++++++++-------- .../landing/LandingClientSection.svelte | 13 ++- .../components/landing/LandingHeading.svelte | 2 +- apps/web/src/routes/+page.svelte | 2 + apps/web/src/routes/styles.css | 82 +++++++++++++- 7 files changed, 160 insertions(+), 74 deletions(-) diff --git a/apps/web/src/lib/components/landing/FeatureSection.svelte b/apps/web/src/lib/components/landing/FeatureSection.svelte index 43bae4e..b86a802 100644 --- a/apps/web/src/lib/components/landing/FeatureSection.svelte +++ b/apps/web/src/lib/components/landing/FeatureSection.svelte @@ -1,3 +1,3 @@ -
+
\ No newline at end of file diff --git a/apps/web/src/lib/components/landing/LandingBentoSection.svelte b/apps/web/src/lib/components/landing/LandingBentoSection.svelte index 20d6d85..a61c3fc 100644 --- a/apps/web/src/lib/components/landing/LandingBentoSection.svelte +++ b/apps/web/src/lib/components/landing/LandingBentoSection.svelte @@ -27,17 +27,17 @@

Why BeatForge

@@ -49,8 +49,7 @@

- 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.

@@ -63,19 +62,19 @@ >

Open-source transparency.

-

+

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.

Crafted to perfection.

-

+

Built with the bleeding edge of technology, BeatForge is a polished product built with unforgiving precision.

@@ -84,12 +83,12 @@
application

Minimally designed with tasteful touches.

-

+

We stay out of your way. Mod in less time, and play in no time.

@@ -105,20 +104,20 @@

Safe and secure.

-

+

Manual human review and additional protections and verifications at the code level ensures that every mod featured is safe for your use.

Made for the future.

-

- Stagnation kills modding communities. We’re is in it for the long run. We’re building +

+ 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.

diff --git a/apps/web/src/lib/components/landing/LandingCLISection.svelte b/apps/web/src/lib/components/landing/LandingCLISection.svelte index 5e9231a..e9b1342 100644 --- a/apps/web/src/lib/components/landing/LandingCLISection.svelte +++ b/apps/web/src/lib/components/landing/LandingCLISection.svelte @@ -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]';
-

CLI

+

CLI

- Tools that empower developers to build better, faster. + Empowering developers to build, test, and publish, faster.

- 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.

+ + +

Get the CLI

+ + -
-
- -
+
-
-
-
$
-

- beatforge init // Create a new mod project with BSIPA -

+
+ -
-
$
-

- beatforge publish // Publish your mod to BeatForge (you're done! 🎉) +

+
+
+ It's as simple as... +
+
+
+ +
+
~/
+

+ beatforge init +

+
+
+
+
+ +
+
~/
+

-

+ beatforge publish +

+
+
- - -

Get the CLI

-
diff --git a/apps/web/src/lib/components/landing/LandingClientSection.svelte b/apps/web/src/lib/components/landing/LandingClientSection.svelte index 3f513ef..dfc0334 100644 --- a/apps/web/src/lib/components/landing/LandingClientSection.svelte +++ b/apps/web/src/lib/components/landing/LandingClientSection.svelte @@ -18,21 +18,20 @@

Client

- BeatForge Client is your ultimate modding companion. + Your ultimate modding companion for Beat Saber.

-

- BeatForge Client is the best way to discover, install, and manage your mods. Free, - open-source, and incredibly fast. +

+ 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.

@@ -41,9 +40,9 @@

Download Now

-
+
- app screenshot + app screenshot
diff --git a/apps/web/src/lib/components/landing/LandingHeading.svelte b/apps/web/src/lib/components/landing/LandingHeading.svelte index c0ae65a..4b7f57f 100644 --- a/apps/web/src/lib/components/landing/LandingHeading.svelte +++ b/apps/web/src/lib/components/landing/LandingHeading.svelte @@ -2,6 +2,6 @@ import { Text } from "ui/text"; - + \ No newline at end of file diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte index 48aca53..a6a26eb 100644 --- a/apps/web/src/routes/+page.svelte +++ b/apps/web/src/routes/+page.svelte @@ -21,3 +21,5 @@ + + diff --git a/apps/web/src/routes/styles.css b/apps/web/src/routes/styles.css index be6c9e1..c18d233 100644 --- a/apps/web/src/routes/styles.css +++ b/apps/web/src/routes/styles.css @@ -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 @@ -43,7 +43,7 @@ } .beatforge-landing-terminal-window-wrapper:hover { - transform: scale(1.02); + } .beatforge-landing-terminal-window-wrapper { @@ -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 } \ No newline at end of file