|
| 1 | +<x-layout title="Build My App"> |
| 2 | + @push('head') |
| 3 | + <style>html { scroll-behavior: smooth; }</style> |
| 4 | + @if (config('services.turnstile.site_key')) |
| 5 | + <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> |
| 6 | + @endif |
| 7 | + @endpush |
| 8 | + |
| 9 | + <div class="mx-auto max-w-5xl"> |
| 10 | + {{-- Hero --}} |
| 11 | + <section class="mt-12"> |
| 12 | + <div class="text-center"> |
| 13 | + <h1 |
| 14 | + x-init=" |
| 15 | + () => { |
| 16 | + motion.inView($el, (element) => { |
| 17 | + motion.animate( |
| 18 | + $el, |
| 19 | + { |
| 20 | + opacity: [0, 1], |
| 21 | + x: [-10, 0], |
| 22 | + }, |
| 23 | + { |
| 24 | + duration: 0.7, |
| 25 | + ease: motion.easeOut, |
| 26 | + }, |
| 27 | + ) |
| 28 | + }) |
| 29 | + } |
| 30 | + " |
| 31 | + class="text-4xl md:text-5xl" |
| 32 | + > |
| 33 | + <span class="text-[#99ceb2] dark:text-indigo-500">{</span> |
| 34 | + <span class="font-bold">Build My App</span> |
| 35 | + <span class="text-[#99ceb2] dark:text-indigo-500">}</span> |
| 36 | + </h1> |
| 37 | + |
| 38 | + <p |
| 39 | + x-init=" |
| 40 | + () => { |
| 41 | + motion.inView($el, (element) => { |
| 42 | + motion.animate( |
| 43 | + $el, |
| 44 | + { |
| 45 | + opacity: [0, 1], |
| 46 | + x: [10, 0], |
| 47 | + }, |
| 48 | + { |
| 49 | + duration: 0.7, |
| 50 | + ease: motion.easeOut, |
| 51 | + }, |
| 52 | + ) |
| 53 | + }) |
| 54 | + } |
| 55 | + " |
| 56 | + class="mx-auto mt-6 max-w-2xl text-lg text-gray-600 dark:text-zinc-400" |
| 57 | + > |
| 58 | + Got an app idea? Let's build it together. The NativePHP core team partners with founders and businesses |
| 59 | + to design, build, and ship cross-platform apps with PHP and Laravel. |
| 60 | + </p> |
| 61 | + </div> |
| 62 | + </section> |
| 63 | + |
| 64 | + {{-- What We Build --}} |
| 65 | + <section class="mt-20"> |
| 66 | + <div |
| 67 | + x-init=" |
| 68 | + () => { |
| 69 | + motion.inView($el, (element) => { |
| 70 | + motion.animate( |
| 71 | + Array.from($el.children), |
| 72 | + { |
| 73 | + y: [10, 0], |
| 74 | + opacity: [0, 1], |
| 75 | + scale: [0.9, 1], |
| 76 | + }, |
| 77 | + { |
| 78 | + duration: 0.7, |
| 79 | + ease: motion.backOut, |
| 80 | + delay: motion.stagger(0.1), |
| 81 | + }, |
| 82 | + ) |
| 83 | + }) |
| 84 | + } |
| 85 | + " |
| 86 | + class="grid gap-6 md:grid-cols-3" |
| 87 | + > |
| 88 | + <div class="rounded-2xl bg-gray-100 p-6 text-center dark:bg-[#1a1a2e]"> |
| 89 | + <div class="mx-auto grid size-12 place-items-center rounded-full bg-white text-black ring-1 ring-black/5 dark:bg-gray-900 dark:text-white dark:ring-white/10"> |
| 90 | + <x-icons.device-mobile-phone class="size-6" /> |
| 91 | + </div> |
| 92 | + <h3 class="mt-4 text-lg font-semibold">Mobile Apps</h3> |
| 93 | + <p class="mt-2 text-sm text-gray-600 dark:text-zinc-400"> |
| 94 | + iOS and Android apps built with NativePHP for Mobile, ready for the App Store and Play Store. |
| 95 | + </p> |
| 96 | + </div> |
| 97 | + |
| 98 | + <div class="rounded-2xl bg-gray-100 p-6 text-center dark:bg-[#1a1a2e]"> |
| 99 | + <div class="mx-auto grid size-12 place-items-center rounded-full bg-white text-black ring-1 ring-black/5 dark:bg-gray-900 dark:text-white dark:ring-white/10"> |
| 100 | + <x-icons.pc class="size-6" /> |
| 101 | + </div> |
| 102 | + <h3 class="mt-4 text-lg font-semibold">Desktop Apps</h3> |
| 103 | + <p class="mt-2 text-sm text-gray-600 dark:text-zinc-400"> |
| 104 | + Native desktop apps for macOS, Windows, and Linux using NativePHP for Desktop. |
| 105 | + </p> |
| 106 | + </div> |
| 107 | + |
| 108 | + <div class="rounded-2xl bg-gray-100 p-6 text-center dark:bg-[#1a1a2e]"> |
| 109 | + <div class="mx-auto grid size-12 place-items-center rounded-full bg-white text-black ring-1 ring-black/5 dark:bg-gray-900 dark:text-white dark:ring-white/10"> |
| 110 | + <x-heroicon-o-rocket-launch class="size-6" /> |
| 111 | + </div> |
| 112 | + <h3 class="mt-4 text-lg font-semibold">End-to-End Delivery</h3> |
| 113 | + <p class="mt-2 text-sm text-gray-600 dark:text-zinc-400"> |
| 114 | + From idea and design through to launch, marketing, and ongoing iteration. We sweat the details. |
| 115 | + </p> |
| 116 | + </div> |
| 117 | + </div> |
| 118 | + </section> |
| 119 | + |
| 120 | + {{-- Form --}} |
| 121 | + <section id="enquiry-form" class="mt-24 scroll-mt-24 pb-24"> |
| 122 | + <h2 |
| 123 | + x-init=" |
| 124 | + () => { |
| 125 | + motion.inView($el, (element) => { |
| 126 | + motion.animate( |
| 127 | + $el, |
| 128 | + { |
| 129 | + opacity: [0, 1], |
| 130 | + x: [-10, 0], |
| 131 | + }, |
| 132 | + { |
| 133 | + duration: 0.7, |
| 134 | + ease: motion.easeOut, |
| 135 | + }, |
| 136 | + ) |
| 137 | + }) |
| 138 | + } |
| 139 | + " |
| 140 | + class="text-center text-3xl font-semibold" |
| 141 | + > |
| 142 | + Tell Us About Your App |
| 143 | + </h2> |
| 144 | + <p class="mx-auto mt-4 max-w-2xl text-center text-gray-600 dark:text-zinc-400"> |
| 145 | + Share your idea and rough budget. We'll be in touch to plan the next steps. |
| 146 | + </p> |
| 147 | + |
| 148 | + <div class="mx-auto mt-8 max-w-2xl rounded-2xl bg-gray-100 p-8 dark:bg-[#1a1a2e] md:p-12"> |
| 149 | + <livewire:lead-submission-form /> |
| 150 | + </div> |
| 151 | + |
| 152 | + <p class="mx-auto mt-6 max-w-2xl text-center text-sm text-gray-500 dark:text-gray-400"> |
| 153 | + Just need a quick technical session? |
| 154 | + <a href="{{ route('consulting') }}" class="font-medium text-blue-600 hover:underline dark:text-blue-400"> |
| 155 | + Book a consulting slot |
| 156 | + </a> |
| 157 | + instead. |
| 158 | + </p> |
| 159 | + </section> |
| 160 | + </div> |
| 161 | +</x-layout> |
0 commit comments