Skip to content

Commit ff8eeee

Browse files
HassanZahirniasimonhamp
HassanZahirnia
and
simonhamp
authored
🌈 Add a dedicated Bifrost section and button to home page (#213)
* Add Bifrost section and button to explainer and navigation components * Refactor Bifrost button text and update styles in docsearch and navigation components * Add Bifrost diagram illustration and associated icons to explainer component * Fix Bifrost button visibility and adjust navigation bar item spacing * Refactor Bifrost diagram layout and adjust component styles for improved responsiveness * Update Bifrost button and diagram styles for improved visual consistency * Refactor Bifrost diagram structure and enhance accessibility with ARIA attributes * Adjust button margin and update background colors for improved design consistency * Tweak copy * Lint --------- Co-authored-by: Simon Hamp <[email protected]>
1 parent e48f0b3 commit ff8eeee

File tree

11 files changed

+414
-24
lines changed

11 files changed

+414
-24
lines changed

‎app/Http/Controllers/ShowBlogController.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ public function show(Article $article)
2323
abort_unless($article->isPublished() || auth()->user()?->isAdmin(), 404);
2424

2525
// Set SEO metadata for the article
26-
SEOTools::setTitle($article->title . ' - Blog');
26+
SEOTools::setTitle($article->title.' - Blog');
2727
SEOTools::setDescription($article->excerpt ?: 'Read this article on the NativePHP blog.');
2828

2929
// Set OpenGraph metadata

‎app/Http/Controllers/ShowDocumentationController.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,15 @@ public function __invoke(Request $request, string $platform, string $version, ?s
4848
}
4949
$title = $pageProperties['title'].' - NativePHP '.$platform.' v'.$version;
5050
$description = Arr::exists($pageProperties, 'description') ? $pageProperties['description'] : 'NativePHP documentation for '.$platform.' v'.$version;
51-
51+
5252
SEOTools::setTitle($title);
5353
SEOTools::setDescription($description);
54-
54+
5555
// Set OpenGraph metadata
5656
SEOTools::opengraph()->setTitle($pageProperties['title']);
5757
SEOTools::opengraph()->setDescription($description);
5858
SEOTools::opengraph()->setType('article');
59-
59+
6060
// Set Twitter Card metadata
6161
SEOTools::twitter()->setTitle($pageProperties['title']);
6262
SEOTools::twitter()->setDescription($description);

‎resources/css/docsearch.css‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
}
1212

1313
.DocSearch-Button {
14-
@apply m-0 flex items-center rounded-full bg-gray-50/50 font-normal ring-1 ring-slate-600/30 transition duration-300 ease-out dark:bg-black/30;
14+
@apply m-0 flex items-center rounded-full bg-gray-50/50 font-normal ring-1 ring-slate-600/30 transition duration-300 ease-out ring-inset dark:bg-black/30;
1515
}
1616

1717
.DocSearch-Button:hover {
@@ -28,15 +28,8 @@
2828
@apply text-gray-500 dark:text-white/60;
2929
}
3030

31-
@media (max-width: 768px) {
32-
.DocSearch-Button-Keys,
33-
.DocSearch-Button-Placeholder {
34-
display: block;
35-
}
36-
}
37-
3831
.DocSearch-Button-Placeholder {
39-
@apply px-1 text-sm text-black/60 transition duration-300 min-[520px]:pr-10 dark:text-white/60;
32+
@apply px-1 text-sm text-black/60 transition duration-300 xl:pr-5 dark:text-white/60;
4033
}
4134

4235
.DocSearch-Button-Keys {

‎resources/views/components/bifrost-button.blade.php‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@props([
2+
'small' => false,
3+
])
4+
5+
<a
6+
href="https://bifrost.nativephp.com/"
7+
@class([
8+
'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',
9+
10+
'px-4 py-2 text-sm' => $small,
11+
12+
'px-6 py-3' => ! $small,
13+
])
14+
>
15+
<div
16+
class="@container absolute inset-0 flex items-center"
17+
aria-hidden="true"
18+
>
19+
<div
20+
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)]"
21+
></div>
22+
</div>
23+
<div
24+
class="absolute inset-0.5 rounded-full bg-white dark:bg-slate-950"
25+
aria-hidden="true"
26+
></div>
27+
<div
28+
class="absolute bottom-0 left-1/2 h-1/3 w-4/5 -translate-x-1/2 rounded-full bg-indigo-400/15 opacity-50 blur-md transition-all duration-500 group-hover:h-2/3 group-hover:opacity-100"
29+
aria-hidden="true"
30+
></div>
31+
<span
32+
x-data
33+
x-init="
34+
(() => {
35+
const items = Array.from($el.children)
36+
if (items.length === 0) {
37+
return
38+
}
39+
40+
// Initial state: show first, hide others (coming from below)
41+
gsap.set(items, { autoAlpha: 0, y: 10 })
42+
gsap.set(items[0], { autoAlpha: 1, y: 0 })
43+
44+
if (items.length === 1) {
45+
return
46+
}
47+
48+
const hold = 0.7 // seconds each word stays visible
49+
const tl = gsap.timeline({ repeat: -1 })
50+
51+
for (let i = 0; i < items.length; i++) {
52+
const curr = items[i]
53+
const next = items[(i + 1) % items.length]
54+
55+
tl.to(
56+
curr,
57+
{
58+
duration: 0.5,
59+
autoAlpha: 0,
60+
y: -10,
61+
ease: 'circ.inOut',
62+
},
63+
`+=${hold}`,
64+
).to(
65+
next,
66+
{
67+
duration: 0.5,
68+
autoAlpha: 1,
69+
y: 0,
70+
ease: 'circ.inOut',
71+
},
72+
'<',
73+
)
74+
}
75+
})()
76+
"
77+
class="inline-grid font-medium"
78+
>
79+
<span
80+
class="self-center justify-self-center whitespace-nowrap [grid-area:1/-1]"
81+
>
82+
Try Bifrost!
83+
</span>
84+
<span
85+
class="self-center justify-self-center whitespace-nowrap [grid-area:1/-1]"
86+
>
87+
Build
88+
</span>
89+
<span
90+
class="self-center justify-self-center whitespace-nowrap [grid-area:1/-1]"
91+
>
92+
Distribute
93+
</span>
94+
<span
95+
class="self-center justify-self-center whitespace-nowrap [grid-area:1/-1]"
96+
>
97+
{{ $small ? 'Ship' : 'Ship it!' }}
98+
</span>
99+
</span>
100+
</a>

‎resources/views/components/home/explainer.blade.php‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -570,4 +570,77 @@ class="absolute -top-20 -right-20 -z-10 size-60 rounded-full bg-gradient-to-r fr
570570
></div>
571571
</div>
572572
</div>
573+
574+
{{-- Bifrost --}}
575+
<div class="mt-5">
576+
<div
577+
x-init="
578+
() => {
579+
motion.inView($el, (element) => {
580+
gsap.fromTo(
581+
$el,
582+
{ y: 10, autoAlpha: 0 },
583+
{
584+
y: 0,
585+
autoAlpha: 1,
586+
duration: 0.7,
587+
ease: 'power2.out',
588+
},
589+
)
590+
})
591+
}
592+
"
593+
class="relative overflow-hidden rounded-2xl bg-gray-200/60 p-8 md:p-10 dark:bg-mirage"
594+
>
595+
{{-- Illustration --}}
596+
<x-illustrations.bifrost-diagram />
597+
598+
{{-- Header --}}
599+
<div
600+
class="mt-7 flex flex-col items-center gap-1.5 text-center text-pretty"
601+
>
602+
<h2
603+
id="sponsors-title"
604+
class="text-xl font-bold text-slate-800 lg:text-2xl dark:text-white"
605+
>
606+
And when you've built your app... Ship it!
607+
</h2>
608+
<p class="text-lg text-slate-600 dark:text-zinc-400">
609+
Get it to the stores and into the hands of users as fast as
610+
humanly possible with Bifrost
611+
</p>
612+
</div>
613+
614+
{{-- Button --}}
615+
<div class="mt-5 mb-15 grid place-items-center">
616+
<x-bifrost-button />
617+
</div>
618+
619+
{{-- Top gradient line --}}
620+
<div
621+
class="absolute top-0 left-0 -z-10 h-1.5 w-full bg-gradient-to-r from-[#FF8F5E] via-[#1D51F2] to-[#5CDFFC]"
622+
aria-hidden="true"
623+
></div>
624+
625+
{{-- Left blur --}}
626+
<div
627+
class="absolute right-1/2 -bottom-11 -z-10 translate-x-1/2"
628+
aria-hidden="true"
629+
>
630+
<div
631+
class="h-10 w-36 -translate-x-14 -rotate-15 rounded-full bg-[#FB6C41]/70 blur-xl dark:bg-slate-400/60"
632+
></div>
633+
</div>
634+
635+
{{-- Right blur --}}
636+
<div
637+
class="absolute right-1/2 -bottom-11 -z-10 translate-x-1/2"
638+
aria-hidden="true"
639+
>
640+
<div
641+
class="0 h-10 w-36 translate-x-14 -rotate-15 rounded-full bg-indigo-300 blur-xl dark:bg-indigo-500/60"
642+
></div>
643+
</div>
644+
</div>
645+
</div>
573646
</section>

‎resources/views/components/icons/home/android.blade.php‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<svg
2+
{{ $attributes }}
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 35 35"
5+
fill="none"
6+
class="[--android-outline-color:var(--color-white)] dark:[--android-outline-color:var(--color-transparent)]"
7+
>
8+
<path
9+
d="M5.74504 11.7593C4.6368 11.7587 3.73855 12.6592 3.73828 13.7666L3.73965 22.171C3.73954 22.4346 3.79139 22.6958 3.89224 22.9394C3.99309 23.183 4.14096 23.4044 4.3274 23.5909C4.51384 23.7773 4.73519 23.9252 4.97881 24.0261C5.22243 24.127 5.48354 24.1789 5.74723 24.1788C6.01089 24.1791 6.27203 24.1274 6.51567 24.0266C6.75931 23.9258 6.98066 23.7779 7.16706 23.5914C7.35345 23.4049 7.50121 23.1835 7.60188 22.9398C7.70255 22.6961 7.75414 22.4349 7.75371 22.1712V13.7655C7.75313 13.2332 7.54124 12.7228 7.16459 12.3467C6.78795 11.9705 6.27737 11.7592 5.74504 11.7593ZM21.9304 4.21186L23.3312 1.65385C23.3669 1.58896 23.3754 1.51257 23.3548 1.44142C23.3342 1.37027 23.2863 1.31018 23.2215 1.27432C23.1566 1.23906 23.0804 1.23098 23.0096 1.25184C22.9387 1.2727 22.8791 1.32081 22.8436 1.38561L21.4286 3.97041C20.238 3.44049 18.9056 3.14354 17.4957 3.14491C16.0897 3.14354 14.7578 3.43967 13.5722 3.96659L12.1555 1.38834C12.1382 1.35616 12.1147 1.32773 12.0863 1.3047C12.058 1.28166 12.0253 1.26449 11.9903 1.25416C11.9552 1.24384 11.9185 1.24057 11.8822 1.24454C11.8459 1.24852 11.8107 1.25966 11.7787 1.27733C11.7464 1.29459 11.7179 1.31811 11.6948 1.34652C11.6717 1.37494 11.6545 1.40767 11.6442 1.44281C11.634 1.47794 11.6308 1.51478 11.6349 1.55116C11.639 1.58753 11.6504 1.62273 11.6682 1.65467L13.0696 4.21104C10.3161 5.631 8.45563 8.3353 8.45727 11.4402L26.5364 11.438C26.5372 8.3342 24.68 5.63537 21.9304 4.21186ZM13.3838 8.16494C13.1827 8.16484 12.9899 8.08486 12.8478 7.94261C12.7058 7.80036 12.626 7.60749 12.6261 7.40643C12.6262 7.20537 12.7062 7.01258 12.8484 6.87049C12.9907 6.72839 13.1835 6.64862 13.3846 6.64873C13.5857 6.6491 13.7784 6.72912 13.9207 6.87128C14.0629 7.01344 14.143 7.20616 14.1434 7.40725C14.1431 7.60845 14.0629 7.80129 13.9205 7.94338C13.778 8.08546 13.585 8.16516 13.3838 8.16494ZM21.6162 8.1633C21.5166 8.16338 21.4181 8.14383 21.3261 8.10578C21.2341 8.06773 21.1505 8.01193 21.0801 7.94156C21.0097 7.87119 20.9539 7.78763 20.9158 7.69567C20.8777 7.60371 20.8582 7.50514 20.8582 7.40561C20.8593 7.20472 20.9395 7.01234 21.0814 6.87015C21.2233 6.72797 21.4156 6.64744 21.6164 6.646C21.8172 6.64765 22.0091 6.72835 22.1508 6.87059C22.2924 7.01283 22.3723 7.20516 22.373 7.40588C22.3732 7.50533 22.3537 7.60383 22.3157 7.69574C22.2777 7.78764 22.2219 7.87116 22.1516 7.94151C22.0813 8.01185 21.9979 8.06765 21.906 8.10571C21.8141 8.14377 21.7156 8.16334 21.6162 8.1633ZM8.53109 12.1385L8.5341 25.1637C8.53371 25.4451 8.58883 25.7237 8.69632 25.9837C8.8038 26.2437 8.96154 26.4799 9.16048 26.6788C9.35943 26.8778 9.59567 27.0355 9.85568 27.1429C10.1157 27.2504 10.3943 27.3055 10.6757 27.305L12.1339 27.3056L12.1355 31.7528C12.1353 32.8602 13.0354 33.7603 14.1412 33.7603C15.2503 33.7603 16.1488 32.8594 16.1491 31.7514L16.148 27.3053L18.8575 27.3045L18.8586 31.7514C18.8586 32.858 19.759 33.7601 20.865 33.7579C21.9741 33.7587 22.8732 32.8577 22.8729 31.7497L22.8715 27.3039L24.335 27.3028C24.6163 27.3029 24.8949 27.2475 25.1548 27.1399C25.4148 27.0322 25.651 26.8744 25.8499 26.6755C26.0489 26.4766 26.2067 26.2405 26.3144 25.9806C26.4221 25.7206 26.4776 25.4421 26.4776 25.1607L26.4752 12.1355L8.53109 12.1385ZM31.263 13.7636C31.263 13.5 31.2111 13.239 31.1102 12.9955C31.0093 12.752 30.8614 12.5308 30.675 12.3445C30.4886 12.1581 30.2673 12.0103 30.0238 11.9095C29.7803 11.8087 29.5193 11.7568 29.2557 11.7568C28.1475 11.7557 27.2495 12.6556 27.2495 13.7644L27.2512 22.1693C27.251 22.4329 27.3028 22.6939 27.4036 22.9375C27.5043 23.181 27.6522 23.4023 27.8385 23.5887C28.0249 23.7751 28.2462 23.9229 28.4898 24.0237C28.7333 24.1245 28.9943 24.1763 29.2579 24.1761C29.5216 24.1761 29.7826 24.1242 30.0261 24.0233C30.2697 23.9224 30.4909 23.7745 30.6773 23.588C30.8636 23.4015 31.0114 23.1801 31.1121 22.9365C31.2129 22.6929 31.2646 22.4318 31.2644 22.1682L31.263 13.7636Z"
10+
fill="#A4C439"
11+
/>
12+
</svg>

‎resources/views/components/icons/home/apple.blade.php‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<svg
2+
{{ $attributes }}
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 37 37"
5+
fill="none"
6+
>
7+
<path
8+
d="M26.2868 31.265C24.776 32.7296 23.1264 32.4983 21.5385 31.8046C19.8581 31.0954 18.3164 31.0646 16.5435 31.8046C14.3235 32.7604 13.1518 32.4829 11.826 31.265C4.30268 23.5104 5.41268 11.7012 13.9535 11.2696C16.0348 11.3775 17.4839 12.4104 18.7018 12.5029C20.521 12.1329 22.2631 11.0692 24.2056 11.2079C26.5335 11.3929 28.291 12.3179 29.4473 13.9829C24.6373 16.8658 25.7781 23.2021 30.1873 24.975C29.3085 27.2875 28.1677 29.5846 26.2714 31.2804L26.2868 31.265ZM18.5477 11.1771C18.3164 7.73917 21.1068 4.9025 24.3135 4.625C24.7606 8.6025 20.706 11.5625 18.5477 11.1771Z"
9+
fill="currentColor"
10+
/>
11+
</svg>

‎resources/views/components/icons/home/arc-connector.blade.php‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<svg
2+
xmlns="http://www.w3.org/2000/svg"
3+
width="67"
4+
height="68"
5+
viewBox="0 0 67 68"
6+
fill="none"
7+
class="[--grad-stop-1:--alpha(var(--color-gray-300)/100%)] [--grad-stop-2:--alpha(var(--color-blue-300)/100%)] dark:[--grad-stop-1:--alpha(var(--color-blue-300)/20%)] dark:[--grad-stop-2:--alpha(var(--color-blue-500)/80%)]"
8+
>
9+
<path
10+
d="M1 66.25C33.5 66.25 33.5 66.25 33.5 36.25C33.5 16.25 33.5 1.24999 66 1.25"
11+
stroke="url(#paint0_linear_1050_1384)"
12+
stroke-width="2"
13+
stroke-linecap="round"
14+
/>
15+
<defs>
16+
<linearGradient
17+
id="paint0_linear_1050_1384"
18+
x1="0.261364"
19+
y1="69.25"
20+
x2="66.7386"
21+
y2="69.25"
22+
gradientUnits="userSpaceOnUse"
23+
>
24+
<stop stop-color="var(--grad-stop-1)" />
25+
<stop
26+
offset="1"
27+
stop-color="var(--grad-stop-2)"
28+
/>
29+
</linearGradient>
30+
</defs>
31+
</svg>

‎resources/views/components/icons/home/windows.blade.php‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<svg
2+
{{ $attributes }}
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 27 27"
5+
fill="none"
6+
>
7+
<g clip-path="url(#clip0_1050_1380)">
8+
<path
9+
d="M26.5784 0.345215L12.4455 2.41957V12.9308L26.5784 12.8182V0.345215ZM0.347648 14.0713L0.348281 23.0159L11.062 24.4889L11.0536 14.1409L0.347648 14.0713ZM12.3331 14.2148L12.3529 24.6488L26.5651 26.6546L26.5684 14.2382L12.3331 14.2148ZM0.339844 4.07037L0.349758 13.0105L11.0635 12.9496L11.0586 2.61026L0.339844 4.07037Z"
10+
fill="#00ADEF"
11+
/>
12+
</g>
13+
<defs>
14+
<clipPath id="clip0_1050_1380">
15+
<rect
16+
width="27"
17+
height="27"
18+
fill="white"
19+
/>
20+
</clipPath>
21+
</defs>
22+
</svg>

0 commit comments

Comments
 (0)