WIP

benjamincrozat · Oct 10, 2023 · 57c46dc · 57c46dc
1 parent 8ea9635
commit 57c46dc
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 19 deletions.
diff --git a/resources/svg/people.svg b/resources/svg/people.svg
diff --git a/resources/views/components/app.blade.php b/resources/views/components/app.blade.php
@@ -83,15 +83,15 @@
         x-init="$nextTick(() => Prism.highlightAll())"
     >
         <div class="flex flex-col min-h-screen">
-            <div class="bg-indigo-400 text-indigo-50">
-                <aside class="container py-3 text-sm text-center">
-                    <p>
-                        <a href="mailto:[email protected]?body={{ rawurlencode("Please introduce yourself, include a sentence or two pitch for your job offer, and don\'t forget the link. I will reply ASAP with the payment instructions.") }}">
-                            <strong class="font-medium text-white">Your job offer here</strong>, exposed to 40,000 developers for&nbsp;a&nbsp;month&nbsp;($149).
+            @if (! request()->routeIs('jobs.create'))
+                <div class="bg-indigo-400 text-indigo-50">
+                    <aside class="container py-3 text-sm text-center">
+                        <a wire:navigate.hover href="{{ route('jobs.create') }}">
+                            <strong class="font-medium text-white">Your job offer here</strong>, exposed to 40,000 developers for&nbsp;a&nbsp;month.
                         </a>
-                    </p>
-                </aside>
-            </div>
+                    </aside>
+                </div>
+            @endif
 
             @empty($hideNavigation)
                 <x-navigation class="mt-4" />

diff --git a/resources/views/jobs.blade.php b/resources/views/jobs.blade.php
diff --git a/resources/views/jobs/create.blade.php b/resources/views/jobs/create.blade.php
@@ -0,0 +1,105 @@
+<x-app
+    title="Expose your job offers to 40,000 developers each month"
+    description="If you are hiring web developers, my blog can redirect a relevant audience to your job offers, today."
+>
+    <div class="container mt-16">
+        <x-icon-people class="h-24 mx-auto" />
+
+        <h1 class="!text-4xl/none mt-8 lg:!text-5xl/none font-bold text-center">
+            Your job offers
+            <span class="text-transparent bg-gradient-to-r from-green-500 to-green-400 bg-clip-text">exposed to 40,000 developers!</span>
+        </h1>
+
+        <h2 class="mt-2 text-center text-xl/tight md:text-2xl/tight lg:text-3xl/tight">
+            Find the ideal candidate faster.
+        </h2>
+
+        <a href="https://benjamincrozat.lemonsqueezy.com/checkout/buy/ffe977d4-b50b-416e-b213-0b94449ae916?discount=0" class="table px-6 py-3 mx-auto font-bold text-white bg-orange-400 rounded mt-14">
+            Get started for $149 per offer
+        </a>
+    </div>
+
+    <x-section id="numbers" class="container mt-24 md:mt-32 scroll-mt-4">
+        <x-slot:title class="text-2xl sm:!text-3xl font-bold text-center">
+            Get an ever growing amount of eyes on your job offers
+        </x-slot:title>
+
+        <div class="grid grid-cols-2 gap-16 mt-8 md:grid-cols-3">
+            <div class="col-span-1" x-data="{ count: 0, target: 40000 }" x-intersect.half="animateNumber">
+                <div class="flex items-center text-3xl sm:gap-1 md:gap-2 font-extralight sm:text-5xl lg:text-6xl xl:text-7xl">
+                    <x-heroicon-s-arrow-trending-up class="flex-shrink-0 inline h-5 mr-2 text-green-500 sm:h-7" />
+                    <span x-text="Math.round(count).toLocaleString()">40,000</span>
+                </div>
+
+                <div>monthly visitors</div>
+            </div>
+
+            <div class="col-span-1" x-data="{ count: 0, target: 63000 }" x-intersect.half="animateNumber">
+                <div class="flex items-center text-3xl sm:gap-1 md:gap-2 font-extralight sm:text-5xl lg:text-6xl xl:text-7xl">
+                    <x-heroicon-s-arrow-trending-up class="flex-shrink-0 inline h-5 mr-2 text-green-500 sm:h-7" />
+                    <span x-text="Math.round(count).toLocaleString()">63,000</span>
+                </div>
+
+                <div>monthly page views</div>
+            </div>
+
+            <div class="col-span-1" x-data="{ count: 0, target: 43000 }" x-intersect.half="animateNumber">
+                <div class="flex items-center text-3xl sm:gap-1 md:gap-2 font-extralight sm:text-5xl lg:text-6xl xl:text-7xl">
+                    <x-heroicon-s-arrow-trending-up class="flex-shrink-0 inline h-5 mr-2 text-green-500 sm:h-7" />
+                    <span x-text="Math.round(count).toLocaleString()">43,000</span>
+                </div>
+
+                <div>monthly sessions</div>
+            </div>
+
+            <div class="col-span-1" x-data="{ count: 0, target: 19000 }" x-intersect.half="animateNumber">
+                <div class="flex items-center text-3xl sm:gap-1 md:gap-2 font-extralight sm:text-5xl lg:text-6xl xl:text-7xl">
+                    <x-heroicon-s-arrow-trending-up class="flex-shrink-0 inline h-5 mr-2 text-green-500 sm:h-7" />
+                    <span x-text="Math.round(count).toLocaleString()">19,000</span>
+                </div>
+
+                <div>clicks each month on Google</div>
+            </div>
+
+            <div class="col-span-1">
+                <div class="text-xl sm:text-2xl xl:text-3xl">
+                    India, Indonesia, United States, Germany, United Kingdom
+                </div>
+
+                <div>
+                    in the top 5 countries
+                </div>
+            </div>
+        </div>
+
+        <div class="mt-16 text-center">
+            <a href="https://benjamincrozat.pirsch.io/?domain=benjamincrozat.com&interval=30d&scale=day" target="_blank" rel="nofollow noopener" class="inline-block px-6 py-3 font-bold transition-opacity rounded bg-gradient-to-r from-gray-200/50 to-gray-200 hover:opacity-75">
+                Access my analytics dashboard
+            </a>
+        </div>
+    </x-section>
+
+    <script>
+        function animateNumber() {
+            const duration = 1000
+
+            const stepTime = 20
+
+            const steps = duration / stepTime
+
+            const increment = this.target / steps
+
+            const interval = setInterval(() => {
+                if (this.count < this.target) {
+                    this.count += increment
+
+                    if (this.count > this.target) {
+                        this.count = this.target
+                    }
+                } else {
+                    clearInterval(interval)
+                }
+            }, stepTime)
+        }
+    </script>
+</x-app>
diff --git a/resources/views/media-kit.blade.php b/resources/views/media-kit.blade.php
@@ -1,13 +1,8 @@
 <x-app
     title="Sponsor me and get your company in the spotlight."
     description="More than 40,000 eager developers visit my blog each month. Why don't you introduce your brand?"
-    :hide-navigation="true"
     :hide-footer="true"
 >
-    @empty($hideNavigation)
-        <x-navigation class="mt-4" />
-    @endempty
-
     <div
         class="!h-[175px] md:!h-[200px] container flex items-end justify-center gap-2 md:gap-4 mt-16 md:mt-24 md:max-w-screen-sm"
         x-data="{ animate: false }"

diff --git a/resources/views/sponsors.blade.php b/resources/views/sponsors.blade.php
@@ -1,13 +1,8 @@
 <x-app
     title="Support this blog, and get your rewards!"
     description="My goal is to be in every Laravel developer's Google search. See how you can contribute."
-    :hide-navigation="true"
     :hide-footer="true"
 >
-    @empty($hideNavigation)
-        <x-navigation class="mt-4" />
-    @endempty
-
     <div class="container mt-16 xl:max-w-screen-lg">
         <x-icon-gift class="h-24 mx-auto" />
 

diff --git a/routes/web.php b/routes/web.php
@@ -22,6 +22,8 @@
 
 Route::view('/media-kit', 'media-kit')->name('media-kit');
 
+Route::view('/jobs/create', 'jobs.create')->name('jobs.create');
+
 Route::view('/sponsors', 'sponsors')->name('sponsors');
 
 Route::view('/privacy', 'privacy')->name('privacy');

diff --git a/tests/Feature/Routes/WebTest.php b/tests/Feature/Routes/WebTest.php
@@ -10,8 +10,12 @@
     get(route('media-kit'))->assertOk();
 });
 
+test('the job offers creation page is working', function () {
+    get(route('jobs.create'))->assertOk();
+});
+
 test('the sponsors page is working', function () {
-    get(route('media-kit'))->assertOk();
+    get(route('sponsors'))->assertOk();
 });
 
 test('the terms of service page is working', function () {