Add BF banners to Home & Product

spatie · Nov 15, 2024 · dbd0a0c · dbd0a0c
1 parent 1d00b75
commit dbd0a0c
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 155 deletions.
diff --git a/app/Livewire/TopSecretComponent.php b/app/Livewire/TopSecretComponent.php
@@ -112,7 +112,7 @@ public function render(): View
         return view('front.pages.top-secret.index')
             ->layout('layout.blank', [
                 'title' => 'Top Secret',
-                'bodyClass' => 'bg-bf-dark-gray min-h-screen overflow-hidden antialiased',
+                'bodyClass' => 'bg-bf-gray min-h-screen overflow-hidden antialiased',
                 'image' => '/backgrounds/bf-24-desk.jpg',
             ]);
     }

diff --git a/public/images/black-friday/bf-24-logo.svg b/public/images/black-friday/bf-24-logo.svg
diff --git a/resources/css/front/utilities/section.css b/resources/css/front/utilities/section.css
@@ -41,7 +41,7 @@
 }
 
 .section-fade:before {
-    @apply z-back;
+    /* @apply z-back; */
     @apply absolute;
     @apply w-full;
     @apply left-0;
@@ -53,7 +53,7 @@
 
 /* fake inset shadow at the bottom */
 .section-fade:after {
-    @apply z-back;
+    /* @apply z-back; */
     @apply absolute;
     @apply w-full;
     @apply left-0;

diff --git a/resources/images/backgrounds/bf-24-hero-alt.jpg b/resources/images/backgrounds/bf-24-hero-alt.jpg
diff --git a/resources/images/backgrounds/bf-24-hero.jpg b/resources/images/backgrounds/bf-24-hero.jpg
diff --git a/resources/views/front/pages/home/index.blade.php b/resources/views/front/pages/home/index.blade.php
@@ -1,22 +1,34 @@
+@php
+    $image = image("/backgrounds/bf-24-hero.jpg");
+@endphp
+
+@push('startBody')
+    <div class="wallpaper">
+        <img srcset="{{ $image->getSrcset() }}" src="{{ $image->getUrl() }}" width="2400" sizes="100vw" alt="" class="h-svh object-cover">
+    </div>
+@endpush
+
 <x-page
         title="Websites & webapplications in Laravel"
-        background="/backgrounds/home-2020.jpg">
+        background=""
+        bodyClass="bg-bf-dark-gray">
     <x-slot name="description">
         Spatie is a digital allrounder: we design solid websites & web applications using Laravel & Vue. No frills, just
         proven expertise. From Antwerp, Belgium
     </x-slot>
 
-    @include('front.pages.home.partials.banner')
+    {{-- @include('front.pages.home.partials.banner') --}}
+    @include('front.pages.home.partials.bf-banner')
 
     <div class="mb-8">
         <a href="{{ route('products.index') }}">
         {{-- @include('front.pages.products.partials.ctaLaraconEU') --}}
         </a>
     </div>
 
-    @include('front.pages.home.partials.news')
+    {{-- @include('front.pages.home.partials.news') --}}
 
-    <div class="section section-group section-fade">
+    <div class="section section-group section-fade bg-white">
         @include('front.pages.home.partials.portfolio')
         @include('front.pages.home.partials.newsletter')
         @include('front.pages.home.partials.clients')

diff --git a/resources/views/front/pages/home/partials/bf-banner.blade.php b/resources/views/front/pages/home/partials/bf-banner.blade.php
@@ -0,0 +1,42 @@
+@php
+    $expirationDate = \Carbon\Carbon::createFromFormat('Y-m-d H:i', '2024-12-02 23:59');
+@endphp
+
+<section id="banner" class="banner" role="banner">
+
+    <div class="flex flex-col items-center pb-12 p-4">
+        <img class="max-w-[560px] mb-16" src="../images/black-friday/bf-24-logo.svg" alt="">
+        <div class="text-xl lg:text-3xl text-bf-beige font-sans uppercase text-center">
+            <p class="font-bold">Get 30% off on all Spatie products</p>
+            <p>
+                <x-countdown class="inline-block" :expires="$expirationDate">
+                    <span>
+                        <span class="font-semibold font-mono"
+                            x-text="timer.days">{{ $component->days() }}</span><span>d</span>
+                    </span>
+                    <span class="ml-1">
+                        <span class="font-semibold font-mono"
+                            x-text="timer.hours">{{ $component->hours() }}</span><span>h</span>
+                    </span>
+                    <span class="ml-1">
+                        <span class="font-semibold font-mono"
+                            x-text="timer.minutes">{{ $component->minutes() }}</span><span>m</span>
+                    </span>
+                    <span class="ml-1">
+                        <span class="font-semibold font-mono"
+                            x-text="timer.seconds">{{ $component->seconds() }}</span><span>s</span>
+                    </span>
+                </x-countdown>
+
+            </p>
+        </div>
+    </div>
+
+    <div class="flex flex-col items-center">
+        <a href="{{ route('products.index') }}"
+            class="text-lg text-black font-bold hover:bg-gray-lighter transition transition-color font-sans px-6 py-2 bg-white rounded-full">
+            Grab your promotion
+        </a>
+    </div>
+
+</section>
diff --git a/resources/views/front/pages/home/partials/black-friday-banner.blade.php b/resources/views/front/pages/home/partials/black-friday-banner.blade.php
diff --git a/resources/views/front/pages/home/partials/open-source.blade.php b/resources/views/front/pages/home/partials/open-source.blade.php
@@ -1,4 +1,4 @@
-<section id="open-source" class="section">
+<section id="open-source" class="section bg-white">
     <div class="wrap wrap-8">
         <div class="sm:col-span-3 sm:col-start-2">
             <div class="markup links-underline links-blue">

diff --git a/resources/views/front/pages/products/index.blade.php b/resources/views/front/pages/products/index.blade.php
@@ -1,10 +1,20 @@
+@php
+    $image = image("/backgrounds/bf-24-hero-alt.jpg");
+@endphp
+
+@push('startBody')
+    <div class="wallpaper">
+        <img srcset="{{ $image->getSrcset() }}" src="{{ $image->getUrl() }}" width="2400" sizes="100vw" alt="" class="h-screen object-cover">
+    </div>
+@endpush
+
 <x-page
     ogImage="https://spatie.be/images/og-store.png"
     title="Applications and digital courses built for modern developers"
-    background="/backgrounds/product.jpg"
     description="Welcome in our store, by artisans for artisans. Get access to our paid products, courses and ebooks"
+    bodyClass="bg-bf-dark-gray"
 >
-    <section id="banner" class="banner" role="banner">
+    {{-- <section id="banner" class="banner" role="banner">
          <div class="wrap">
              <h1 class="banner-slogan">
                  Welcome in <br>our store
@@ -16,14 +26,15 @@
             </p>
             -->
         </div>
-    </section>
+    </section> --}}
+
+    @include('front.pages.products.partials.bf-banner')
 
    {{-- @include('front.pages.products.partials.ctaLaraconEU') --}}
 
     <div class="section section-group">
 
-
-    <section class="section overflow-visible">
+    <section class="section overflow-visible text-white">
             @if (count($bundles))
             <div class="wrap">
                 <h2 class="title line-after mb-12">All of our products</h2>
@@ -42,7 +53,7 @@
                                     <div class="shadow-md group-hover:shadow-lg">{{ $product->getFirstMedia('product-image') }}</div>
                                 </div>
 
-                                <h2 class="title-sm link-black link-underline-hover">{{ $product->title }}</h2>
+                                <h2 class="title-sm link-white link-underline-hover">{{ $product->title }}</h2>
                                 @if(! $product->visible && current_user()?->hasAccessToUnReleasedProducts())<p class="mt-2 text-orange text-sm">This product is currently set to non-visible, it is visible to users that have access to unreleased products.</p>@endif
                             </a>
 
@@ -64,9 +75,7 @@
                                 </p>
                             @endif
 
-
-
-                            <p class="mt-4">{{ $product->formattedDescription }}</p>
+                            <div class="mt-4 text-gray-light">{{ $product->formattedDescription }}</div>
 
                         </div>
                     @endforeach
@@ -75,7 +84,7 @@
         </section>
 
         @if (count($bundles))
-        <section class="section overflow-visible">
+        <section class="section overflow-visible text-white">
             <div class="wrap">
                 <h2 class="title line-after mb-12">Check our bundle promotions!</h2>
             </div>
@@ -87,7 +96,7 @@
                                 <div class="-mt-8 pb-6 transition-transform transform ease-in-out group-hover:-translate-y-2 duration-200">
                                     <div class="shadow-md group-hover:shadow-lg">{{ $bundle->getFirstMedia('image') }}</div>
                                 </div>
-                                <h2 class="title-sm link-black link-underline-hover">{{ $bundle->title }}</h2>
+                                <h2 class="title-sm link-white link-underline-hover">{{ $bundle->title }}</h2>
                             </a>
 
                             <p class="my-4 flex items-center space-x-4">
@@ -96,7 +105,7 @@
                                 </a>
                             </p>
 
-                             <p class="mt-4">{{ $bundle->formattedDescription }}</p>
+                             <div class="mt-4 text-gray-light">{{ $bundle->formattedDescription }}</div>
 
                         </div>
                     @endforeach

diff --git a/resources/views/front/pages/products/partials/bf-banner.blade.php b/resources/views/front/pages/products/partials/bf-banner.blade.php
@@ -0,0 +1,35 @@
+@php
+    $expirationDate = \Carbon\Carbon::createFromFormat('Y-m-d H:i', '2024-12-02 23:59');
+@endphp
+
+<section id="banner" class="banner mb-16" role="banner">
+
+    <div class="flex flex-col items-center pb-12 p-4">
+        <img class="max-w-[480px] mb-16" src="../images/black-friday/bf-24-logo.svg" alt="">
+        <div class="text-xl lg:text-2xl text-bf-beige font-sans uppercase text-center">
+            <p class="font-bold">Get 30% off on all Spatie products</p>
+            <p>
+                <x-countdown class="inline-block" :expires="$expirationDate">
+                    <span>
+                        <span class="font-semibold font-mono"
+                            x-text="timer.days">{{ $component->days() }}</span><span>d</span>
+                    </span>
+                    <span class="ml-1">
+                        <span class="font-semibold font-mono"
+                            x-text="timer.hours">{{ $component->hours() }}</span><span>h</span>
+                    </span>
+                    <span class="ml-1">
+                        <span class="font-semibold font-mono"
+                            x-text="timer.minutes">{{ $component->minutes() }}</span><span>m</span>
+                    </span>
+                    <span class="ml-1">
+                        <span class="font-semibold font-mono"
+                            x-text="timer.seconds">{{ $component->seconds() }}</span><span>s</span>
+                    </span>
+                </x-countdown>
+
+            </p>
+        </div>
+    </div>
+
+</section>
diff --git a/resources/views/front/pages/top-secret/index.blade.php b/resources/views/front/pages/top-secret/index.blade.php
@@ -66,7 +66,7 @@ class="pt-4 text-bf-beige text-base font-obviously-narrow uppercase font-semibol
                                     </div>
 
                                     <textarea x-show="showInput" x-on:click="$el.focus();$el.select();"
-                                        class="form-input border border-bf-dark-gray resize-none h-24 font-sans" name="answer" id="answer" wire:model="answer"></textarea>
+                                        class="form-input border border-bf-gray resize-none h-24 font-sans" name="answer" id="answer" wire:model="answer"></textarea>
 
                                     <div x-show="showInput">
                                         <button class="paper-action-btn" wire:click="submitAnswer">

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -25,7 +25,8 @@ export default {
             'oss-yellow': '#E7C23D',
 
             'bf-beige': '#EAE9D8',
-            'bf-dark-gray': '#3C3636',
+            'bf-gray': '#3C3636',
+            'bf-dark-gray': '#242120',
             'bf-brown': '#3E2F18',
             'bf-red': '#F37D71',
             'bf-red-dark': '#E03D3D',