From 771f499f3695def8cb67efaae4a1f91ea27db13b Mon Sep 17 00:00:00 2001 From: Ovidiu U Date: Fri, 10 Apr 2026 11:41:13 +0100 Subject: [PATCH] feat: add pricing section and hero redesign to homepage --- package-lock.json | 6 +- resources/css/app.css | 4 + .../views/components/auth-header.blade.php | 4 +- .../views/components/pricing-card.blade.php | 55 ++ resources/views/homepage.blade.php | 521 ++++++++++++------ resources/views/layouts/auth/simple.blade.php | 24 +- resources/views/layouts/public.blade.php | 5 +- resources/views/livewire/auth/login.blade.php | 2 +- .../views/livewire/auth/register.blade.php | 2 +- resources/views/partials/head.blade.php | 2 +- 10 files changed, 438 insertions(+), 187 deletions(-) create mode 100644 resources/views/components/pricing-card.blade.php diff --git a/package-lock.json b/package-lock.json index a45d6ae..8705de1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -751,9 +751,9 @@ } }, "node_modules/baseline-browser-mapping": { - "version": "2.10.16", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.16.tgz", - "integrity": "sha512-Lyf3aK28zpsD1yQMiiHD4RvVb6UdMoo8xzG2XzFIfR9luPzOpcBlAsT/qfB1XWS1bxWT+UtE4WmQgsp297FYOA==", + "version": "2.10.17", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.17.tgz", + "integrity": "sha512-HdrkN8eVG2CXxeifv/VdJ4A4RSra1DTW8dc/hdxzhGHN8QePs6gKaWM9pHPcpCoxYZJuOZ8drHmbdpLHjCYjLA==", "license": "Apache-2.0", "bin": { "baseline-browser-mapping": "dist/cli.cjs" diff --git a/resources/css/app.css b/resources/css/app.css index 144e60f..75c48d9 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -77,6 +77,10 @@ @layer base { + body { + color: var(--color-zinc-800); + } + :root { --primary: #bb5b3e; --bg-main: #f5ede5; diff --git a/resources/views/components/auth-header.blade.php b/resources/views/components/auth-header.blade.php index e596a3f..c621ec7 100644 --- a/resources/views/components/auth-header.blade.php +++ b/resources/views/components/auth-header.blade.php @@ -4,6 +4,6 @@ ])
- {{ $title }} - {{ $description }} + {{ $title }} + {{ $description }}
diff --git a/resources/views/components/pricing-card.blade.php b/resources/views/components/pricing-card.blade.php new file mode 100644 index 0000000..0d11f0b --- /dev/null +++ b/resources/views/components/pricing-card.blade.php @@ -0,0 +1,55 @@ +@props([ + 'name', + 'price', + 'buttonText', + 'perks' => [], + 'featured' => false, + 'dark' => false, +]) + +@php + $cardClass = match(true) { + $dark => 'bg-zinc-800 border border-zinc-800 text-white', + $featured => 'bg-white border-2 border-primary', + default => 'bg-white border border-zinc-300', + }; + + $buttonClass = $dark + ? 'bg-white text-primary hover:bg-zinc-100' + : 'bg-primary text-white hover:bg-primary-dark'; +@endphp + +
merge(['class' => "p-8 rounded-3xl flex flex-col relative $cardClass"]) }}> + + @if ($featured) +
+ Most Popular +
+ @endif + +
+

{{ $name }}

+
+ $featured])>{{ $price }} + !$dark, 'text-zinc-400' => $dark])>/mo +
+
+ + + + + {{ $buttonText }} + + +
diff --git a/resources/views/homepage.blade.php b/resources/views/homepage.blade.php index 4f4c19b..f29b1de 100644 --- a/resources/views/homepage.blade.php +++ b/resources/views/homepage.blade.php @@ -1,182 +1,369 @@ -
- @if (Route::has('login')) - - @endif -
-
-
-
-

Let's get started

-

Laravel has an incredibly rich ecosystem.
We suggest starting with the following.

-
    -
  • - - - - - - - Read the - - Documentation - - - - - + {{-- Navigation --}} + + + {{-- Hero Section --}} +
    +
    +
    +
    + + Save up to £250/year on fuel +
    + +

    + Stop Overpaying
    for Fuel. +

    + +

    + Join 50,000+ UK drivers using real-time insights to find the cheapest petrol and time their fill-ups perfectly. +

    + + {{-- Search Section --}} +
    +
    + + +
    + +
    + {{-- Search Section --}} + +
    +
    + + + +
    + "Saved me £12 on my first tank!" +
    +
    + + {{-- Hero card mockup --}} + +
    +
    + + {{-- How It Works --}} +
    +
    +
    +

    Smart Savings in 3 Steps

    +

    Stop guessing when to fill up. Our engine analyses thousands of data points daily to save you money.

    +
    + +
    +
    +
    + +
    +

    1. Search

    +

    Enter your postcode or location to find every forecourt within a 5–20 mile radius instantly.

    +
    +
    +
    + +
    +

    2. Get Advice

    +

    Our AI compares local prices against national wholesale trends to give you a Fill Up/Wait recommendation.

    +
    +
    +
    + +
    +

    3. Fill Up Smart

    +

    Navigate to the cheapest station and fill up with confidence knowing you've secured the best price.

    +
    +
    +
    +
    + + {{-- Features --}} +
    +
    +
    + +
    +
    + +

    Real-Time Prices

    +

    Verified daily prices from thousands of UK forecourts.

    +
    +
    + +

    Timing Predictions

    +

    Proprietary 14-day forecasts for petrol and diesel trends.

    +
    +
    + +

    Supermarket Anchors

    +

    Track local supermarkets to find the absolute lowest base price.

    +
    +
    + +

    Smart Price Alerts

    +

    Get notified when local prices drop below your set target.

    +
    +
    + +
    +

    The ultimate fuel companion.

    +

    Whether you're a daily commuter, a delivery professional, or just planning a weekend road trip, FuelAlert gives you the edge at the pump.

    +
      +
    • + + Coverage for 98% of UK Forecourts
      • -
    • - - - - - - - Watch video tutorials at - - Laracasts - - - - - -
      • -
    -
      -
    • - - Deploy now - +
    • + + Hyper-local Map Visualisation +
      • +
    • + + Historic Price Benchmarking
    + + Explore all features + +
    -
    - {{-- Laravel Logo --}} - - - - - - - - - - {{-- 13 --}} - - - - - - - - - - - - +
    +
    +
    - - - - - - - - - - - + {{-- Pricing --}} +
    +
    +
    +

    Pricing for every driver

    +

    Save hundreds for less than the cost of a coffee.

    +
    - - - - - - - - - - - +
    - - - - - - - - - - - + - - - - - - - - - - - - -
    + + + + + + +
    +
    +
    + + {{-- Social Proof --}} +
    +
    +
    +
    +

    Loved by commuters.

    +
    + + + + + +
    +

    Join thousands of UK drivers saving every single month.

    -
+
+
+ "I used to just go to the station on my way home. Now I check FuelAlert and realise there's a station 2 miles away that's 5p cheaper! Over a month, it adds up to a free tank per year." +
+ James R. +
+

James R.

+

Daily Commuter

+
+
+
+
+ "The predictions are eerily accurate. I was going to fill up Friday, but FuelAlert said 'Hold on' for Monday. Sure enough, prices dropped at my local Tesco by 3p. Brilliant." +
+ Sarah M. +
+

Sarah M.

+

Delivery Driver

+
+
+
+
+
+ + + + {{-- CTA Banner --}} +
+
+

Ready to outsmart the pumps?

+

Sign up for free today and never pay over the odds for fuel again.

+
+ Create Free Account + Watch Demo Video +
+
+
+ + {{-- Footer --}} + + + diff --git a/resources/views/layouts/auth/simple.blade.php b/resources/views/layouts/auth/simple.blade.php index bd8bb9f..e73ebd7 100644 --- a/resources/views/layouts/auth/simple.blade.php +++ b/resources/views/layouts/auth/simple.blade.php @@ -1,28 +1,32 @@ - + + {{-- Force light mode before @fluxAppearance reads localStorage --}} + @include('partials.head') - -
-
- - - - - {{ config('app.name', 'Laravel') }} + +
+
+ +
+ +
+ FuelAlert -
+
{{ $slot }}
+ @persist('toast') @endpersist + @fluxScripts diff --git a/resources/views/layouts/public.blade.php b/resources/views/layouts/public.blade.php index 2608df6..5799fcf 100644 --- a/resources/views/layouts/public.blade.php +++ b/resources/views/layouts/public.blade.php @@ -1,9 +1,9 @@ - + @include('partials.head', ['title' => $title ?? null]) - + {{ $slot }} @persist('toast') @@ -12,6 +12,7 @@ @endpersist + @fluxScripts diff --git a/resources/views/livewire/auth/login.blade.php b/resources/views/livewire/auth/login.blade.php index e9167da..ac66d99 100644 --- a/resources/views/livewire/auth/login.blade.php +++ b/resources/views/livewire/auth/login.blade.php @@ -50,7 +50,7 @@ @if (Route::has('register')) -
+
{{ __('Don\'t have an account?') }} {{ __('Sign up') }}
diff --git a/resources/views/livewire/auth/register.blade.php b/resources/views/livewire/auth/register.blade.php index 6c12579..a9eecd4 100644 --- a/resources/views/livewire/auth/register.blade.php +++ b/resources/views/livewire/auth/register.blade.php @@ -59,7 +59,7 @@
-
+
{{ __('Already have an account?') }} {{ __('Log in') }}
diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php index 52703a4..7a9237f 100644 --- a/resources/views/partials/head.blade.php +++ b/resources/views/partials/head.blade.php @@ -10,7 +10,7 @@ - + @vite(['resources/css/app.css', 'resources/js/app.js']) @fluxAppearance