nativephp.com/resources/views/components/bifrost-banner.blade.php at 55c857429864f5ad8bc9df4155854faab8c8b03e · NativePHP/nativephp.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<a
    href="https://bifrost.nativephp.com/"
    onclick="fathom.trackEvent('alert_click');"
    class="group relative z-30 flex flex-col items-center justify-center gap-x-3 gap-y-2.5 overflow-hidden bg-slate-200/60 px-5 py-3 select-none sm:flex-row dark:bg-gray-950/50"
>
    {{-- Left side decorations --}}
    <div class="absolute top-1/2 left-2 -z-5 hidden -translate-y-1/2 md:block">
        <div class="flex items-center gap-2">
            {{-- Lines --}}
            <div
                class="flex items-center *:-mr-1 *:h-0.5 *:w-4 *:-rotate-50 *:rounded-full *:bg-slate-300 *:dark:bg-gray-600"
            >
                <div class="opacity-10"></div>
                <div class="opacity-20"></div>
                <div class="opacity-30"></div>
                <div class="opacity-40"></div>
                <div class="opacity-50"></div>
                <div class="opacity-60"></div>
                <div class="opacity-70"></div>
                <div class="opacity-80"></div>
            </div>

            {{-- Arrow --}}
            <x-icons.modern-arrow
                class="h-3.5 text-slate-300 dark:text-gray-600"
            />
        </div>
    </div>

    {{-- Right side decorations --}}
    <div class="absolute top-1/2 right-2 -z-5 hidden -translate-y-1/2 md:block">
        <div class="flex items-center gap-2">
            {{-- Arrow --}}
            <x-icons.modern-arrow
                class="h-3.5 -scale-x-100 -scale-y-100 text-slate-300 dark:text-gray-600"
            />

            {{-- Lines --}}
            <div
                class="flex items-center *:-mr-1 *:h-0.5 *:w-4 *:rotate-50 *:rounded-full *:bg-slate-300 *:dark:bg-gray-600"
            >
                <div class="opacity-80"></div>
                <div class="opacity-70"></div>
                <div class="opacity-60"></div>
                <div class="opacity-50"></div>
                <div class="opacity-40"></div>
                <div class="opacity-30"></div>
                <div class="opacity-20"></div>
                <div class="opacity-10"></div>
            </div>
        </div>
    </div>

    {{-- Bifrost --}}
    <div
        class="flex items-center gap-2.5 translate-y-[2.8px] transition duration-200 ease-in-out will-change-transform group-hover:-translate-x-0.5"
    >
        <x-logos.bifrost class="h-4" />
    </div>

    {{-- Label --}}
    <div
        class="flex items-center justify-center gap-3 transition duration-200 ease-in-out will-change-transform group-hover:translate-x-0.5"
    >
        {{-- Text --}}
        <div>
            <style>
                .gradient-text {
                    background-image: linear-gradient(
                        90deg,
                        #000 0%,
                        #5e657b 35%,
                        #000 70%
                    );
                    background-size: 200% 100%;
                    animation: shine 2s linear infinite;
                }
                .dark .gradient-text {
                    background-image: linear-gradient(
                        90deg,
                        #fff 0%,
                        #c4e4ff 35%,
                        #fff 70%
                    );
                }
                @keyframes shine {
                    from {
                        background-position: 200% center;
                    }
                    to {
                        background-position: 0% center;
                    }
                }
            </style>
            <div
                class="gradient-text bg-clip-text text-center tracking-tight text-pretty text-transparent"
            >
                The fastest way to compile, sign and distribute your apps for every platform
            </div>
        </div>

        {{-- Arrow --}}
        <x-icons.right-arrow class="size-3 shrink-0" />
    </div>

    {{-- Left blur --}}
    <div class="absolute right-1/2 -bottom-11 -z-10 translate-x-1/2">
        <div
            class="h-10 w-36 -translate-x-10 -rotate-15 rounded-full bg-sky-300 blur-xl dark:bg-sky-500/60"
        ></div>
    </div>

    {{-- Right blur --}}
    <div class="absolute right-1/2 -bottom-11 -z-10 translate-x-1/2">
        <div
            class="h-10 w-36 translate-x-10 -rotate-15 rounded-full bg-pink-300 blur-xl dark:bg-slate-400/60"
        ></div>
    </div>
</a>