|
| 1 | +<a |
| 2 | + href="https://bifrost.nativephp.com/" |
| 3 | + onclick="fathom.trackEvent('alert_click');" |
| 4 | + 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" |
| 5 | +> |
| 6 | + {{-- Left side decorations --}} |
| 7 | + <div class="absolute top-1/2 left-2 -z-5 hidden -translate-y-1/2 md:block"> |
| 8 | + <div class="flex items-center gap-2"> |
| 9 | + {{-- Lines --}} |
| 10 | + <div |
| 11 | + class="flex items-center *:-mr-1 *:h-0.5 *:w-4 *:-rotate-50 *:rounded-full *:bg-slate-300 *:dark:bg-gray-600" |
| 12 | + > |
| 13 | + <div class="opacity-10"></div> |
| 14 | + <div class="opacity-20"></div> |
| 15 | + <div class="opacity-30"></div> |
| 16 | + <div class="opacity-40"></div> |
| 17 | + <div class="opacity-50"></div> |
| 18 | + <div class="opacity-60"></div> |
| 19 | + <div class="opacity-70"></div> |
| 20 | + <div class="opacity-80"></div> |
| 21 | + </div> |
| 22 | + |
| 23 | + {{-- Arrow --}} |
| 24 | + <x-icons.modern-arrow |
| 25 | + class="h-3.5 text-slate-300 dark:text-gray-600" |
| 26 | + /> |
| 27 | + </div> |
| 28 | + </div> |
| 29 | + |
| 30 | + {{-- Right side decorations --}} |
| 31 | + <div class="absolute top-1/2 right-2 -z-5 hidden -translate-y-1/2 md:block"> |
| 32 | + <div class="flex items-center gap-2"> |
| 33 | + {{-- Arrow --}} |
| 34 | + <x-icons.modern-arrow |
| 35 | + class="h-3.5 -scale-x-100 -scale-y-100 text-slate-300 dark:text-gray-600" |
| 36 | + /> |
| 37 | + |
| 38 | + {{-- Lines --}} |
| 39 | + <div |
| 40 | + class="flex items-center *:-mr-1 *:h-0.5 *:w-4 *:rotate-50 *:rounded-full *:bg-slate-300 *:dark:bg-gray-600" |
| 41 | + > |
| 42 | + <div class="opacity-80"></div> |
| 43 | + <div class="opacity-70"></div> |
| 44 | + <div class="opacity-60"></div> |
| 45 | + <div class="opacity-50"></div> |
| 46 | + <div class="opacity-40"></div> |
| 47 | + <div class="opacity-30"></div> |
| 48 | + <div class="opacity-20"></div> |
| 49 | + <div class="opacity-10"></div> |
| 50 | + </div> |
| 51 | + </div> |
| 52 | + </div> |
| 53 | + |
| 54 | + {{-- Bifrost --}} |
| 55 | + <div |
| 56 | + 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" |
| 57 | + > |
| 58 | + <x-logos.bifrost class="h-4" /> |
| 59 | + </div> |
| 60 | + |
| 61 | + {{-- Label --}} |
| 62 | + <div |
| 63 | + class="flex items-center justify-center gap-3 transition duration-200 ease-in-out will-change-transform group-hover:translate-x-0.5" |
| 64 | + > |
| 65 | + {{-- Text --}} |
| 66 | + <div> |
| 67 | + <style> |
| 68 | + .gradient-text { |
| 69 | + background-image: linear-gradient( |
| 70 | + 90deg, |
| 71 | + #000 0%, |
| 72 | + #5e657b 35%, |
| 73 | + #000 70% |
| 74 | + ); |
| 75 | + background-size: 200% 100%; |
| 76 | + animation: shine 2s linear infinite; |
| 77 | + } |
| 78 | + .dark .gradient-text { |
| 79 | + background-image: linear-gradient( |
| 80 | + 90deg, |
| 81 | + #fff 0%, |
| 82 | + #c4e4ff 35%, |
| 83 | + #fff 70% |
| 84 | + ); |
| 85 | + } |
| 86 | + @keyframes shine { |
| 87 | + from { |
| 88 | + background-position: 200% center; |
| 89 | + } |
| 90 | + to { |
| 91 | + background-position: 0% center; |
| 92 | + } |
| 93 | + } |
| 94 | + </style> |
| 95 | + <div |
| 96 | + class="gradient-text bg-clip-text text-center tracking-tight text-pretty text-transparent" |
| 97 | + > |
| 98 | + The fastest way to compile, sign and distribute your apps for every platform |
| 99 | + </div> |
| 100 | + </div> |
| 101 | + |
| 102 | + {{-- Arrow --}} |
| 103 | + <x-icons.right-arrow class="size-3 shrink-0" /> |
| 104 | + </div> |
| 105 | + |
| 106 | + {{-- Left blur --}} |
| 107 | + <div class="absolute right-1/2 -bottom-11 -z-10 translate-x-1/2"> |
| 108 | + <div |
| 109 | + class="h-10 w-36 -translate-x-10 -rotate-15 rounded-full bg-sky-300 blur-xl dark:bg-sky-500/60" |
| 110 | + ></div> |
| 111 | + </div> |
| 112 | + |
| 113 | + {{-- Right blur --}} |
| 114 | + <div class="absolute right-1/2 -bottom-11 -z-10 translate-x-1/2"> |
| 115 | + <div |
| 116 | + class="h-10 w-36 translate-x-10 -rotate-15 rounded-full bg-pink-300 blur-xl dark:bg-slate-400/60" |
| 117 | + ></div> |
| 118 | + </div> |
| 119 | +</a> |
0 commit comments