Skip to content

Commit

Permalink
Revert "Revert "Add Black Friday design""
Browse files Browse the repository at this point in the history
This reverts commit a5375b7.
  • Loading branch information
sebastiandedeyne committed Nov 13, 2023
1 parent 5485847 commit 75e727b
Show file tree
Hide file tree
Showing 10 changed files with 327 additions and 146 deletions.
6 changes: 6 additions & 0 deletions resources/css/front/front.css
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,9 @@ a.anchor-link {
.show-input-number-buttons::-webkit-outer-spin-button {
opacity: 1;
}

svg,
.wallpaper img,
.is-postcard-without-caption img {
filter: grayscale(1);
}
24 changes: 16 additions & 8 deletions resources/css/front/utilities/gradient.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,32 +10,40 @@

.gradient-green {
--gradient-angle: 120deg;
--gradient-from: #21b989;
--gradient-to: #82d8af;
--gradient-from: #242424;
--gradient-to: #171e1a;

@apply bg-green;
}

.gradient-pink {
--gradient-angle: 120deg;
--gradient-from: #ddaeb4;
--gradient-to: #dd9099;
--gradient-from: #242424;
--gradient-to: #171e1a;

@apply bg-pink;
}

.gradient-blue {
--gradient-angle: 120deg;
--gradient-from: #cae1e8;
--gradient-to: #e2f1f3;
--gradient-from: #f3efea;
--gradient-to: #e1ded9;

@apply bg-blue-lightest;
}

.gradient-gray {
--gradient-angle: 120deg;
--gradient-from: #f3efea;
--gradient-to: #e1ded9;

@apply bg-gray-lighter;
}

.gradient-dark {
--gradient-angle: 120deg;
--gradient-from: #31302f;
--gradient-to: #172a3d;
--gradient-from: #242424;
--gradient-to: #171e1a;

@apply bg-gray-dark;
}
2 changes: 1 addition & 1 deletion resources/svg/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 8 additions & 8 deletions resources/views/components/button.blade.php
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<button class="cursor-pointer
bg-green-dark bg-opacity-75 hover:bg-opacity-100 rounded-sm
border-2 border-transparent
justify-center flex items-center
{{ $attributes['large'] ? 'px-4 min-h-12 text-xl shadow-lg' : 'px-6 min-h-10' }}
font-sans-bold text-white
transition-bg duration-300
focus:outline-none focus:border-blue-light whitespace-no-wrap">
{{ $slot }}
bg-yellow hover:bg-opacity-75 rounded-sm
border-2 border-transparent
justify-center flex items-center
{{ $attributes['large'] ? 'px-4 min-h-12 text-xl shadow-lg' : 'px-6 min-h-10' }}
font-sans-bold text-black
transition-bg duration-300
focus:outline-none focus:border-blue-light whitespace-no-wrap">
{{ $slot }}
</button>
2 changes: 1 addition & 1 deletion resources/views/front/pages/home/index.blade.php
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<x-page
title="Websites & webapplications in Laravel"
background="/backgrounds/home-2020.jpg">
background="">
<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
Expand Down
52 changes: 44 additions & 8 deletions resources/views/front/pages/home/partials/banner.blade.php
Original file line number Diff line number Diff line change
@@ -1,10 +1,46 @@
<section id="banner" class="banner" role="banner">
<div class="wrap">
<h1 class="banner-slogan">
Solid expertise <br>in Laravel
</h1>
<p class="banner-intro">
We craft web applications, software, courses <br>&amp; open source packages in the Laravel ecosystem
</p>
<section id="banner" class="banner bg-trueblack mb-32" role="banner">
<div class="wrap">
<a href="{{ route('products.index') }}" class="block w-3/5">
@include('front.pages.home.partials.black-friday-banner')
</a>

<div class="my-8">
@php
$expirationDate = \Carbon\Carbon::createFromFormat('Y-m-d H:i', '2022-11-28 23:59' );
@endphp

<a href="{{ route('products.index') }}"
class="flex bg-trueblack text-white banner-intro">
<div class="py-2 ">
<div>
⚡️ <strong>Get 30% off</strong> on all our products
<br>in the next
<x-countdown class="inline-block" :expires="$expirationDate">
<span>
<span class="font-semibold font-mono" x-text="timer.days">{{ $component->days()
}}</span><span class="text-white">d</span>
</span>
<span class="ml-1">
<span class="font-semibold font-mono" x-text="timer.hours">{{ $component->hours()
}}</span><span class="text-white">h</span>
</span>
<span class="ml-1">
<span class="font-semibold font-mono" x-text="timer.minutes">{{ $component->minutes()
}}</span><span class="text-white">m</span>
</span>
<span class="ml-1">
<span class="font-semibold font-mono" x-text="timer.seconds">{{ $component->seconds()
}}</span><span class="text-white">s</span>
</span>
</x-countdown>
</div>
</div>
</a>
</div>

<a href="{{ route('products.index') }}"
class=" text-xl text-black font-bold hover:bg-gray-lighter transition transition-color font-sans px-4 py-2 bg-white rounded-full">
Grab your promotion
</a>
</div>
</section>
Loading

0 comments on commit 75e727b

Please sign in to comment.