Skip to content

Adds Jump/Mimi to homepage #260

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

Open
shanerbaner82 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Adds Jump/Mimi to homepage #260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e77b5d4
Adds Jump/Mimi to homepage
shanerbaner82 Jan 20, 2026
aa9ea47
Tweak
simonhamp Jan 20, 2026
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
81 changes: 35 additions & 46 deletions resources/views/components/bifrost-button.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,39 @@

<a
href="https://bifrost.nativephp.com/"
x-data="{ tl: null, items: [] }"
x-init="
$nextTick(() => {
this.items = Array.from($refs.textContainer.children);
if (this.items.length > 1) {
gsap.set(this.items, { autoAlpha: 0, y: 10 });
gsap.set(this.items[0], { autoAlpha: 1, y: 0 });

const hold = 0.7;
this.tl = gsap.timeline({ repeat: -1 });

for (let i = 0; i < this.items.length; i++) {
const curr = this.items[i];
const next = this.items[(i + 1) % this.items.length];

this.tl.to(curr, { duration: 0.5, autoAlpha: 0, y: -10, ease: 'circ.inOut' }, `+=${hold}`)
.to(next, { duration: 0.5, autoAlpha: 1, y: 0, ease: 'circ.inOut' }, '<');
}
}
})
"
@mouseenter="
if (tl) {
tl.pause();
gsap.to(items, { autoAlpha: 0, y: -10, duration: 0.2 });
gsap.to(items[0], { autoAlpha: 1, y: 0, duration: 0.2 });
}
"
@mouseleave="
if (tl) {
tl.restart();
}
"
@class([
'group relative z-0 inline-flex items-center overflow-hidden rounded-full bg-gray-200 transition duration-200 will-change-transform hover:scale-x-105 dark:bg-slate-800',

Expand All @@ -17,7 +50,7 @@ class="@container absolute inset-0 flex items-center"
aria-hidden="true"
>
<div
class="absolute h-[100cqw] w-[100cqw] scale-110 animate-[spin_3s_linear_infinite] bg-[conic-gradient(from_0_at_50%_50%,--alpha(var(--color-blue-400)/70%)_0deg,--alpha(var(--color-indigo-400)/70%)_40deg,--alpha(var(--color-orange-300)/70%)_80deg,transparent_110deg,transparent_250deg,--alpha(var(--color-rose-400)/50%)_280deg,--alpha(var(--color-fuchsia-400)/50%)_320deg,--alpha(var(--color-blue-400)/70%)_360deg)] transition duration-300 will-change-transform dark:bg-[conic-gradient(from_0_at_50%_50%,--alpha(var(--color-blue-400)/70%)_0deg,--alpha(var(--color-indigo-400)/70%)_40deg,--alpha(var(--color-teal-400)/70%)_80deg,transparent_110deg,transparent_250deg,--alpha(var(--color-rose-400)/50%)_280deg,--alpha(var(--color-fuchsia-400)/50%)_320deg,--alpha(var(--color-blue-400)/70%)_360deg)]"
class="absolute h-[100cqw] w-[100cqw] scale-110 animate-[spin_3s_linear_infinite] bg-[conic-gradient(from_0_at_50%_50%,--alpha(var(--color-blue-400)/70%)_0deg,--alpha(var(--color-indigo-400)/70%)_40deg,--alpha(var(--color-orange-300)/70%)_80deg,transparent_110deg,transparent_250deg,--alpha(var(--color-rose-400)/50%)_280deg,--alpha(var(--color-fuchsia-400)/50%)_320deg,--alpha(var(--color-blue-400)/70%)_360deg)] transition duration-300 will-change-transform group-hover:animate-[spin_1s_linear_infinite] dark:bg-[conic-gradient(from_0_at_50%_50%,--alpha(var(--color-blue-400)/70%)_0deg,--alpha(var(--color-indigo-400)/70%)_40deg,--alpha(var(--color-teal-400)/70%)_80deg,transparent_110deg,transparent_250deg,--alpha(var(--color-rose-400)/50%)_280deg,--alpha(var(--color-fuchsia-400)/50%)_320deg,--alpha(var(--color-blue-400)/70%)_360deg)]"
></div>
</div>
<div
Expand All @@ -29,51 +62,7 @@ class="absolute bottom-0 left-1/2 h-1/3 w-4/5 -translate-x-1/2 rounded-full bg-i
aria-hidden="true"
></div>
<span
x-data
x-init="
(() => {
const items = Array.from($el.children)
if (items.length === 0) {
return
}

// Initial state: show first, hide others (coming from below)
gsap.set(items, { autoAlpha: 0, y: 10 })
gsap.set(items[0], { autoAlpha: 1, y: 0 })

if (items.length === 1) {
return
}

const hold = 0.7 // seconds each word stays visible
const tl = gsap.timeline({ repeat: -1 })

for (let i = 0; i < items.length; i++) {
const curr = items[i]
const next = items[(i + 1) % items.length]

tl.to(
curr,
{
duration: 0.5,
autoAlpha: 0,
y: -10,
ease: 'circ.inOut',
},
`+=${hold}`,
).to(
next,
{
duration: 0.5,
autoAlpha: 1,
y: 0,
ease: 'circ.inOut',
},
'<',
)
}
})()
"
x-ref="textContainer"
class="inline-grid font-medium"
>
<span
Expand Down
22 changes: 22 additions & 0 deletions resources/views/components/home/announcements.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{{-- Announcements Section: Plugins (full width) + Bifrost (50%) & Mimi/Jump (50% stacked) --}}
<section class="mt-4" aria-label="New announcements">
<div class="flex flex-col gap-4">
{{-- Plugins Announcement (Full Width) --}}
<x-home.plugins-announcement />

{{-- Mimi & Jump + Bifrost Row --}}
<div class="grid gap-4 xl:grid-cols-2">
{{-- Left Column - Mimi & Jump --}}
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-1">
{{-- Mimi Card --}}
<x-home.mimi-card />

{{-- Jump Card --}}
<x-home.jump-card />
</div>

{{-- Bifrost Banner (Right - 50%) --}}
<x-home.bifrost-card />
</div>
</div>
</section>
103 changes: 103 additions & 0 deletions resources/views/components/home/bifrost-card.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
{{-- Bifrost Card - Cloud development platform --}}
<a
href="https://bifrost.nativephp.com/"
target="_blank"
rel="noopener noreferrer"
onclick="fathom.trackEvent('bifrost_card_click');"
class="group relative block h-full overflow-hidden rounded-2xl bg-gradient-to-br from-sky-500/20 via-indigo-500/10 to-purple-500/20 p-0.5 ring-1 ring-zinc-200/50 transition duration-300 hover:ring-sky-400/50 dark:ring-sky-500/30"
x-init="
() => {
motion.inView($el, (element) => {
gsap.fromTo(
$el,
{ y: 20, autoAlpha: 0 },
{
y: 0,
autoAlpha: 1,
duration: 0.6,
delay: 0.1,
ease: 'power2.out',
},
)
})
}
"
>
<div class="relative flex h-full flex-col overflow-hidden rounded-xl bg-gradient-to-br from-[#F9F9F9] via-white to-[#F9F9F9] p-6 md:p-8 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
{{-- Animated glow --}}
<div
x-init="
() => {
gsap.to($el, {
x: 30,
y: -20,
duration: 6,
repeat: -1,
yoyo: true,
ease: 'sine.inOut',
})
}
"
class="pointer-events-none absolute -right-10 -top-10 size-40 rounded-full bg-sky-500/20 blur-[50px] transition duration-500 group-hover:bg-sky-500/30"
aria-hidden="true"
></div>
<div
x-init="
() => {
gsap.to($el, {
x: -20,
y: 15,
duration: 5,
repeat: -1,
yoyo: true,
ease: 'sine.inOut',
})
}
"
class="pointer-events-none absolute -bottom-10 -left-10 size-32 rounded-full bg-purple-500/15 blur-[40px] transition duration-500 group-hover:bg-purple-500/25"
aria-hidden="true"
></div>

{{-- Badge --}}
<div class="mb-4 inline-flex w-fit items-center gap-1.5 rounded-full bg-sky-500/20 px-2.5 py-1 text-xs font-medium text-sky-600 dark:text-sky-300">
<svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z" />
</svg>
Cloud Platform
</div>

{{-- Logo --}}
<div class="mb-2">
<x-logos.bifrost class="h-6" />
</div>

{{-- Tagline --}}
<p class="text-sm text-sky-600/80 dark:text-sky-200/80">
Build in the cloud. Deploy anywhere.
</p>

{{-- Description --}}
<p class="mt-3 text-sm leading-relaxed text-gray-600 dark:text-slate-400">
And when you've built your app, get it to the stores and into the hands of users as fast as humanly possible.
</p>

{{-- Bifrost Diagram --}}
<div class="my-2 flex flex-1 items-center justify-center overflow-hidden">
<x-illustrations.bifrost-diagram />
</div>

{{-- CTA --}}
<div class="mt-4 flex items-center gap-2 text-sm font-medium text-sky-600 transition duration-300 group-hover:text-sky-500 dark:text-sky-400 dark:group-hover:text-sky-300">
<span>Ship it!</span>
<svg
class="size-4 transition duration-300 group-hover:translate-x-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</div>
</div>
</a>
72 changes: 0 additions & 72 deletions resources/views/components/home/explainer.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -571,76 +571,4 @@ class="absolute -top-20 -right-20 -z-10 size-60 rounded-full bg-gradient-to-r fr
</div>
</div>

{{-- Bifrost --}}
<div class="mt-5">
<div
x-init="
() => {
motion.inView($el, (element) => {
gsap.fromTo(
$el,
{ y: 10, autoAlpha: 0 },
{
y: 0,
autoAlpha: 1,
duration: 0.7,
ease: 'power2.out',
},
)
})
}
"
class="relative overflow-hidden rounded-2xl bg-gray-200/60 p-8 md:p-10 dark:bg-mirage"
>
{{-- Illustration --}}
<x-illustrations.bifrost-diagram />

{{-- Header --}}
<div
class="mt-7 flex flex-col items-center gap-1.5 text-center text-pretty"
>
<h2
id="sponsors-title"
class="text-xl font-bold text-slate-800 lg:text-2xl dark:text-white"
>
And when you've built your app... Ship it!
</h2>
<p class="text-lg text-slate-600 dark:text-zinc-400">
Get it to the stores and into the hands of users as fast as
humanly possible with Bifrost
</p>
</div>

{{-- Button --}}
<div class="mt-5 mb-15 grid place-items-center">
<x-bifrost-button />
</div>

{{-- Top gradient line --}}
<div
class="absolute top-0 left-0 -z-10 h-1.5 w-full bg-gradient-to-r from-[#FF8F5E] via-[#1D51F2] to-[#5CDFFC]"
aria-hidden="true"
></div>

{{-- Left blur --}}
<div
class="absolute right-1/2 -bottom-11 -z-10 translate-x-1/2"
aria-hidden="true"
>
<div
class="h-10 w-36 -translate-x-14 -rotate-15 rounded-full bg-[#FB6C41]/70 blur-xl dark:bg-slate-400/60"
></div>
</div>

{{-- Right blur --}}
<div
class="absolute right-1/2 -bottom-11 -z-10 translate-x-1/2"
aria-hidden="true"
>
<div
class="0 h-10 w-36 translate-x-14 -rotate-15 rounded-full bg-indigo-300 blur-xl dark:bg-indigo-500/60"
></div>
</div>
</div>
</div>
</section>
Loading
Loading