Update copy etc

simonhamp · simonhamp · commit 734573308cd0 · 2025-01-22T23:22:00.000Z
diff --git a/resources/views/components/alert.blade.php b/resources/views/components/alert.blade.php
@@ -1,5 +1,6 @@
-<div class="flex items-center justify-center bg-teal-500 p-2 text-center text-sm text-white text-balance">
+<div class="flex items-center justify-center bg-teal-500 p-2 text-center text-md text-white text-balance transition-all ease-out duration-500 -translate-y-[100%]"
+     x-init="$el.classList.add('-translate-y-0')">
     <a href="/newsletter" onclick="fathom.trackEvent('alert_click');">
-        📲&nbsp;&nbsp;Excited for NativePHP for iOS and Android? Sign up for the newsletter &rightarrow;
+        📲&nbsp;&nbsp;Excited for NativePHP for iOS and Android? <u>Sign up for the newsletter &rightarrow;</u>
     </a>
 </div>
diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
@@ -11,8 +11,8 @@
             Logo by <a href="https://twitter.com/caneco" target="_blank">Caneco</a>.
         </p>
     </div>
-    
+
     <div class="flex items-center justify-center space-x-6">
-      <x-social-networks-all/>
+        <x-social-networks-all/>
     </div>
 </footer>
diff --git a/resources/views/components/header-banner.blade.php b/resources/views/components/header-banner.blade.php
@@ -7,25 +7,28 @@
     <div class="hidden lg:block">
         <x-alert/>
     </div>
-    <div class="
-    relative flex top-0 left-0 z-50
-    md:flex
-    items-center justify-between gap-6 px-6 py-3
-    mx-auto max-w-8xl
-    sm:py-4">
+
+    <div class="relative flex top-0 left-0 z-50
+        md:grid md:grid-cols-4
+        items-center justify-between gap-6 px-6 py-3
+        mx-auto max-w-8xl
+        sm:py-4">
         <a
             href="/"
-            class="inline-flex items-center gap-3 transition rounded hover:text-white/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 focus-visible:ring-offset-2 focus-visible:ring-offset-red-600"
+            class="inline-flex items-center transition rounded hover:text-white/80 focus:outline-none
+                max-md:w-32
+                focus-visible:ring-2 focus-visible:ring-white/80 focus-visible:ring-offset-2 focus-visible:ring-offset-red-600"
         >
             <img src="{{ asset('logo.svg') }}" class="h-8 dark:hidden">
             <img src="{{ asset('logo-dark.svg') }}" class="hidden h-8 dark:block">
             <span class="sr-only">NativePHP</span>
         </a>
-        <div id="docsearch"></div>
 
-        <x-early-access-button class="hidden lg:block"/>
+        <div class="flex-1 md:col-span-2 lg:mx-16 xl:mx-32">
+            <div id="docsearch"></div>
+        </div>
 
-        <div class="hidden lg:flex items-center space-x-5">
+        <div class="hidden lg:flex items-center justify-end space-x-5">
 
             <a href="https://bsky.app/profile/nativephp.bsky.social" title="Bluesky">
                 <x-icons.bluesky class="size-5 text-black dark:invert hover:text-[#00aaa6] hover:invert-0"/>
diff --git a/resources/views/components/layout-three-columns.blade.php b/resources/views/components/layout-three-columns.blade.php
@@ -3,6 +3,7 @@
 
         <div class="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
             <main class="overflow-hidden lg:flex lg:flex-1 lg:flex-col">
+
                 @if(!empty($sidebarLeft))
                     <x-sidebar-left-navigation>
                         {{ $sidebarLeft }}
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
@@ -29,7 +29,7 @@
       x-data="{ showDocsNavigation: false }"
 >
 
-<x-hearder-banner :hasMenu="$hasMenu ?? false" />
+<x-header-banner :hasMenu="$hasMenu ?? false" />
 {{ $slot }}
 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
 <script type="text/javascript">
diff --git a/resources/views/components/sidebar-left-navigation.blade.php b/resources/views/components/sidebar-left-navigation.blade.php
@@ -26,9 +26,6 @@
      x-transition:leave-end="translate-y-1 opacity-0"
      class="fixed top-12 left-0 z-40 w-full h-screen pt-10 pb-16 overflow-y-auto bg-white dark:bg-gray-700 mt-2 px-4 border-b border-[#00aaa6] border-opacity-50 dark:border-opacity-90">
 
-    <div class="mb-8 mx-auto text-center">
-        <x-early-access-button/>
-    </div>
 
     {!! $slot !!}
 
diff --git a/resources/views/early-adopter.blade.php b/resources/views/early-adopter.blade.php
@@ -5,111 +5,149 @@
         <div class="mx-auto max-w-3xl text-center">
 
             <h2 class="text-balance text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
-                NativePHP on
+                NativePHP for
                 <span class="underline decoration-purple-500 underline-offset-4">iOS</span>
                 and
                 <span class="underline decoration-purple-500 underline-offset-4">Android</span>
                 is coming!
             </h2>
             <p class="mx-auto mt-6 max-w-xl text-pretty text-lg/8 text-gray-600 dark:text-gray-400">
-                Development of NativePHP for iOS has already started and you can have an early access now! Become an Early Adopter by sponsoring Simon for $250 or more and get access to the iOS repo.
+                Development of NativePHP for iOS has already started<br>and you can get access right now!<br><br>
+                Join the <b>Early Access Program</b> by<br>becoming a sponsor at $250 (one-off) or above.
             </p>
             <div class="mt-10 flex flex-col sm:flex-row  items-center justify-center gap-6">
-                <a href="https://github.com/sponsors/simonhamp" class="rounded-md bg-purple-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600">
-                    Early access for $250
-                </a>
-                <a href="/newsletter" class="text-sm/6 font-semibold text-gray-900 dark:text-gray-100">
-                    and Sign up for the newsletter
+                <a href="https://github.com/sponsors/simonhamp?frequency=one-time"
+                   target="_blank"
+                   class="rounded-md bg-teal-500 px-8 py-4 text-2xl font-semibold text-white shadow-sm
+                   hover:bg-teal-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+                   focus-visible:outline-teal-600">
+                    Get early access now!
                 </a>
             </div>
         </div>
     </div>
 
+    <!-- Why Join Section -->
+    <section class="text-gray-800 py-16 sm:py-28">
+        <div class="max-w-3xl mx-auto px-8 space-y-6">
+            <div class="prose dark:prose-invert mx-auto">
+                <h2 class="text-center">Why Join the Early Access Program?</h2>
+                <p>
+                    Up to now, NativePHP has focused on Windows, Mac, and Linux. But we believe that breaking the mobile
+                    frontier is what makes the project truly compelling... and cross-platform.
+                </p>
+                <p>
+                    With <strong>significant progress</strong> already made towards enabling
+                    <strong>NativePHP on iOS</strong>, we are excited about the possibilities that lie ahead.
+                </p>
+                <p>
+                    However, to make this vision a reality for both iOS and Android, we need your support.
+                </p>
+                <p>
+                    As an EAP member, you will be supporting the continued development of all of NativePHP, but
+                    especially of NativePHP for mobile.
+                </p>
+                <p>
+                    You'll have the opportunity to influence the direction of the project and provide critical
+                    feedback right from an early stage.
+                </p>
+                <p>
+                    You'll get exclusive access to all the latest features first and special treatment for the life of
+                    the NativePHP project, a project we plan to be working on for a long time to come!
+                </p>
+                <p>
+                    Please join us on this exciting journey to expand NativePHP onto mobile platforms.
+                </p>
+                <p class="italic">
+                    We can't wait to see what you build!
+                </p>
+                <p>
+                    <span class="font-bold italic">Simon &amp; Marcel</span><br>
+                    Creators of NativePHP
+                </p>
+            </div>
+        </div>
+    </section>
+
     <!-- Rewards Section -->
     <div class="py-16 sm:py-24">
         <div class="mx-auto max-w-7xl px-6 lg:px-8">
-            <div class="mx-auto max-w-2xl lg:text-center">
-                <h2 class="text-base/7 font-semibold text-teal-600 dark:text-gray-400">Being an Early Adopter</h2>
+            <div class="mx-auto max-w-2xl text-center">
+                <h2 class="text-base/7 font-semibold text-teal-600 dark:text-gray-400">Early Access Program</h2>
                 <p class="mt-2 text-pretty text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl lg:text-balance">
-                    What do you get ?
+                    Program Benefits
                 </p>
                 {{--                <p class="mt-6 text-lg/8 text-gray-600">Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.</p>--}}
             </div>
-            <div class="mx-auto mt-16 max-w-2xl lg:max-w-none">
-                <dl class="flex flex-col max-w-xl gap-8 mx-auto">
-                    <div class="flex flex-col sm:flex-row">
-                        <div class="font-mono p-1 text-2xl sm:text-5xl sm:text-right text-teal-600 dark:text-teal-400 font-semibold mr-10">
-                            1.
-                        </div>
-                        <div class="border rounded p-4 bg-white dark:bg-gray-800 dark:border-gray-700">
-                            <dt class="flex items-center gap-x-3 text-base/7 font-semibold text-gray-900 dark:text-gray-100">
-                                <x-icons.discord class="size-5 flex-none text-teal-600"/>
-                                Access to a private Discord
-                            </dt>
-                            <dd class="mt-4 flex flex-auto flex-col text-base/7 text-gray-600 dark:text-gray-400">
-                                <p class="flex-auto">
-                                    You get to decide the direction of the project and have a direct line of communication with Simon and other Early Adopters.
-                                </p>
-                            </dd>
-                        </div>
+
+            <div class="mx-auto mt-16 max-w-xl gap-8 grid">
+
+                <div class="border rounded p-4 bg-white dark:bg-gray-800 dark:border-gray-700">
+                    <h3 class="flex items-center gap-x-3 text-base/7 font-semibold text-gray-900 dark:text-gray-100">
+                        <x-icons.device-mobile-phone class="size-5 flex-none text-teal-600"/>
+                        Get the code!
+                    </h3>
+                    <div class="mt-4 flex flex-auto flex-col text-base/7 text-gray-600 dark:text-gray-400">
+                        <p class="flex-auto">
+                            You'll get early access to the code, documentation and more, and watch closely as it
+                            evolves and start to build your projects before anyone else.
+                        </p>
                     </div>
-                    <div class="flex flex-col sm:flex-row">
-                        <div class="font-mono p-1 text-2xl sm:text-5xl sm:text-right text-teal-600 dark:text-teal-400 font-semibold mr-10">
-                            2.
-                        </div>
-                        <div class="border rounded p-4 bg-white dark:bg-gray-800 dark:border-gray-700">
-                            <dt class="flex items-center gap-x-3 text-base/7 font-semibold text-gray-900 dark:text-gray-100">
-                                <x-icons.gift class="size-5 flex-none text-teal-600"/>
-                                Lifetime rewards and discounts
-                            </dt>
-                            <dd class="mt-4 flex flex-auto flex-col text-base/7 text-gray-600 dark:text-gray-400">
-                                <p class="flex-auto">
-                                    Pay a one-time fee to receive a lifetime of rewards and discounts as NativePHP grows over the coming years.
-                                </p>
-                            </dd>
-                        </div>
+                </div>
+
+                <div class="border rounded p-4 bg-white dark:bg-gray-800 dark:border-gray-700">
+                    <h3 class="flex items-center gap-x-3 text-base/7 font-semibold text-gray-900 dark:text-gray-100">
+                        <x-icons.discord class="size-5 flex-none text-teal-600"/>
+                        Access to an exclusive Discord channel
+                    </h3>
+                    <div class="mt-4 flex flex-auto flex-col text-base/7 text-gray-600 dark:text-gray-400">
+                        <p class="flex-auto">
+                            Decide the direction of the project and what gets worked on next. Plus have a direct
+                            line of with the creators of NativePHP and other EAP members.
+                        </p>
                     </div>
-                    <div class="flex flex-col sm:flex-row">
-                        <div class="font-mono p-1 text-2xl sm:text-5xl sm:text-right text-teal-600 dark:text-teal-400 font-semibold mr-10">
-                            3.
-                        </div>
-                        <div class="border rounded p-4 bg-white dark:bg-gray-800 dark:border-gray-700">
-                            <dt class="flex items-center gap-x-3 text-base/7 font-semibold text-gray-900 dark:text-gray-100">
-                                <x-icons.book-open-text class="size-5 flex-none text-teal-600"/>
-                                Your name in NativePHP history
-                            </dt>
-                            <dd class="mt-4 flex flex-auto flex-col text-base/7 text-gray-600 dark:text-gray-400">
-                                <p class="flex-auto">
-                                    Your will be part of the a revolution in PHP development and your name will be memorialized in NativePHP history.
-                                </p>
-                            </dd>
-                        </div>
+                </div>
+
+                <div class="border rounded p-4 bg-white dark:bg-gray-800 dark:border-gray-700">
+                    <h3 class="flex items-center gap-x-3 text-base/7 font-semibold text-gray-900 dark:text-gray-100">
+                        <x-icons.gift class="size-5 flex-none text-teal-600"/>
+                        A lifetime of rewards and discounts
+                    </h3>
+                    <div class="mt-4 flex flex-auto flex-col text-base/7 text-gray-600 dark:text-gray-400">
+                        <p class="flex-auto">
+                            The NativePHP ecosystem is about to explode! There will be premium tools and
+                            packages, starter kits and more. As an EAP member, you'll get you exclusive discounts
+                            not available to anyone else.
+                        </p>
                     </div>
-                </dl>
-            </div>
-        </div>
-    </div>
+                </div>
 
-    <!-- Why Join Section -->
-    <section class="text-gray-800 py-16 sm:py-28">
-        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
-            <div class="prose dark:prose-invert mx-auto">
-                <h2 class="text-center">Why Join the Early Adopter Program?</h2>
-                <p>Currently, NativePHP is available for Windows, Mac, and Linux, but we believe that the future lies in mobile development. That’s why we are reaching out to you!</p>
-                <p>With <strong>significant progress</strong> already made towards enabling
-                    <strong>NativePHP on iOS</strong>, we are excited about the possibilities that lie ahead. </p>
-                <p>However, to make this vision a reality for both iOS and Android, we need your support. </p>
-                <p>As an Early Adopter, you will have a voice in the development process and the opportunity to influence the direction of NativePHP. Your feedback and insights will be invaluable as we work towards making NativePHP a powerful solution for mobile developers.</p>
-                <p>By becoming a sponsor, you are investing in the future of PHP development and ensuring that developers can leverage their PHP skills to create robust mobile applications. Imagine being part of a community that not only values open-source collaboration but also actively shapes the tools that will define the next generation of mobile applications. </p>
-                <p>Moreover, your sponsorship comes with exclusive rewards including access to a private Discord channel where you can connect with Simon and fellow Early Adopters and lifetime discounts on future NativePHP offerings.</p>
-                <p>Join us on this exciting journey to expand NativePHP to mobile platforms.</p>
-                <p>Together, we can unlock new possibilities for PHP developers and create a vibrant community that thrives on collaboration and innovation. Your support is crucial, and we can’t wait to see what we can achieve together!</p>
-                <p class="text-center">Ready to make a difference?</p>
+                <div class="border rounded p-4 bg-white dark:bg-gray-800 dark:border-gray-700">
+                    <h3 class="flex items-center gap-x-3 text-base/7 font-semibold text-gray-900 dark:text-gray-100">
+                        <x-icons.book-open-text class="size-5 flex-none text-teal-600"/>
+                        Your name in NativePHP's history
+                    </h3>
+                    <div class="mt-4 flex flex-auto flex-col text-base/7 text-gray-600 dark:text-gray-400">
+                        <p>
+                            All EAP members will be immortalized across the NativePHP ecosystem, showing the
+                            rest of the community the valuable part you've played in supporting this project's
+                            creation and and ongoing development.
+                        </p>
+                    </div>
+                </div>
             </div>
 
-            <x-link-button class="my-4 mx-auto" href="https://github.com/sponsors/simonhamp">Sponsor Simon Now!</x-link-button>
+            <div class="mt-20 flex flex-col sm:flex-row  items-center justify-center gap-6">
+                <a href="https://github.com/sponsors/simonhamp?frequency=one-time"
+                   target="_blank"
+                   class="rounded-md bg-teal-500 px-8 py-4 text-2xl font-semibold text-white shadow-sm
+                   hover:bg-teal-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+                   focus-visible:outline-teal-600">
+                    Get early access now!
+                </a>
+            </div>
         </div>
-    </section>
+    </div>
 
     <x-footer/>
 </x-layout>
diff --git a/routes/web.php b/routes/web.php
@@ -18,7 +18,7 @@
 Route::redirect('/newsletter', 'https://simonhamp.mailcoach.app/nativephp');
 
 Route::view('/', 'welcome')->name('welcome');
-Route::view('early-adopter', 'early-adopter')->name('early-adopter');
+Route::view('ios', 'early-adopter')->name('early-adopter');
 
 Route::get('/docs/{version}/{page?}', ShowDocumentationController::class)
     ->where('page', '(.*)')

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@`
`29`	`29`	`x-data="{ showDocsNavigation: false }"`
`30`	`30`	`>`
`31`	`31`
`32`		`-<x-hearder-banner :hasMenu="$hasMenu ?? false" />`
	`32`	`+<x-header-banner :hasMenu="$hasMenu ?? false" />`
`33`	`33`	`{{ $slot }}`
`34`	`34`	`<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>`
`35`	`35`	`<script type="text/javascript">`