chore: remove StationSearch, dead Volt SFCs, mobile prototype, and fix homepage CTAs
This commit is contained in:
@@ -1,29 +1,23 @@
|
||||
<div class="relative overflow-hidden rounded-2xl border border-[#e5ded7] bg-[#faf6f3] p-5 shadow-sm">
|
||||
{{-- Pro badge --}}
|
||||
<div class="relative overflow-hidden rounded-2xl border border-border bg-surface p-5 shadow-sm">
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-[10px] font-bold uppercase tracking-widest text-[#89726c]">14-Day Forecast</p>
|
||||
<h3 class="text-lg font-black text-[#4a3f3b]">Price Trend</h3>
|
||||
<p class="text-[10px] font-bold uppercase tracking-widest text-text-muted">14-Day Forecast</p>
|
||||
<h3 class="text-lg font-black text-text-base">Price Trend</h3>
|
||||
</div>
|
||||
<span class="rounded-full bg-[#bb5b3e] px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-wide text-white">
|
||||
Pro
|
||||
</span>
|
||||
<flux:badge color="orange">Pro</flux:badge>
|
||||
</div>
|
||||
|
||||
{{-- Decorative squiggle chart --}}
|
||||
<svg viewBox="0 0 200 60" class="mb-4 h-16 w-full opacity-40" fill="none" stroke="#bb5b3e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg viewBox="0 0 200 60" class="mb-4 h-16 w-full opacity-40"
|
||||
fill="none" stroke="var(--color-primary)" stroke-width="2.5"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="0,45 20,38 40,42 60,30 80,35 100,20 120,25 140,15 160,22 180,12 200,18" />
|
||||
</svg>
|
||||
|
||||
{{-- Blurred overlay --}}
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-center rounded-2xl bg-[#faf6f3]/80 backdrop-blur-sm">
|
||||
<iconify-icon icon="lucide:lock" class="mb-2 text-3xl text-[#bb5b3e]"></iconify-icon>
|
||||
<p class="mb-3 text-sm font-bold text-[#4a3f3b]">14-day forecast is a Pro feature</p>
|
||||
<a
|
||||
href="{{ route('register') }}"
|
||||
class="rounded-xl bg-[#bb5b3e] px-5 py-2.5 text-sm font-bold text-white shadow-md"
|
||||
>
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-center rounded-2xl bg-surface/80 backdrop-blur-sm">
|
||||
<iconify-icon icon="lucide:lock" class="mb-2 text-3xl text-primary"></iconify-icon>
|
||||
<p class="mb-3 text-sm font-bold text-text-base">14-day forecast is a Pro feature</p>
|
||||
<flux:button href="{{ route('register') }}" as="a" variant="primary" size="sm">
|
||||
Unlock Forecast
|
||||
</a>
|
||||
</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<select
|
||||
{{ $attributes->whereStartsWith('wire:') }}
|
||||
class="h-11 w-full rounded-xl border border-[#e5ded7] bg-[#faf6f3] px-3 text-sm font-semibold text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e]"
|
||||
>
|
||||
<option value="1">1 mile</option>
|
||||
<option value="2">2 miles</option>
|
||||
<option value="5">5 miles</option>
|
||||
<option value="10">10 miles</option>
|
||||
<option value="20">20 miles</option>
|
||||
</select>
|
||||
<flux:select {{ $attributes }} size="sm">
|
||||
<flux:select.option value="1">1 mile</flux:select.option>
|
||||
<flux:select.option value="2">2 miles</flux:select.option>
|
||||
<flux:select.option value="5">5 miles</flux:select.option>
|
||||
<flux:select.option value="10">10 miles</flux:select.option>
|
||||
<flux:select.option value="20">20 miles</flux:select.option>
|
||||
</flux:select>
|
||||
|
||||
@@ -19,13 +19,13 @@
|
||||
};
|
||||
@endphp
|
||||
|
||||
<div class="rounded-2xl border border-[#e5ded7] bg-[#faf6f3] p-5 shadow-sm">
|
||||
<div class="rounded-2xl border border-border bg-surface p-5 shadow-sm">
|
||||
<div class="mb-3 flex items-start justify-between">
|
||||
<div>
|
||||
<p class="mb-1 text-[10px] font-bold uppercase tracking-widest text-[#89726c]">
|
||||
<p class="mb-1 text-[10px] font-bold uppercase tracking-widest text-text-muted">
|
||||
Recommendation
|
||||
</p>
|
||||
<h2 class="text-3xl font-black leading-tight text-[#8B4860]">
|
||||
<h2 class="text-3xl font-black leading-tight text-mauve">
|
||||
{{ $headline }}
|
||||
</h2>
|
||||
</div>
|
||||
@@ -33,31 +33,30 @@
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div class="relative h-12 w-12">
|
||||
<svg class="h-full w-full -rotate-90" viewBox="0 0 48 48">
|
||||
<circle cx="24" cy="24" r="20" stroke="#eeeae5" stroke-width="4" fill="transparent" />
|
||||
<circle
|
||||
cx="24" cy="24" r="20"
|
||||
stroke="#8B4860" stroke-width="4" fill="transparent"
|
||||
<circle cx="24" cy="24" r="20"
|
||||
stroke="var(--color-surface-subtle)"
|
||||
stroke-width="4" fill="transparent" />
|
||||
<circle cx="24" cy="24" r="20"
|
||||
stroke="var(--color-mauve)"
|
||||
stroke-width="4" fill="transparent"
|
||||
stroke-dasharray="{{ $circumference }}"
|
||||
stroke-dashoffset="{{ $offset }}"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
stroke-linecap="round" />
|
||||
</svg>
|
||||
<span class="absolute inset-0 flex items-center justify-center text-[11px] font-black text-[#4a3f3b]">
|
||||
<span class="absolute inset-0 flex items-center justify-center text-[11px] font-black text-text-base">
|
||||
{{ (int) $score }}%
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-[9px] font-bold uppercase tracking-wider text-[#89726c]">Confidence</span>
|
||||
<span class="text-[9px] font-bold uppercase tracking-wider text-text-muted">Confidence</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-sm font-medium leading-relaxed text-[#6b5a55]">
|
||||
<p class="text-sm font-medium leading-relaxed text-text-dim">
|
||||
{{ $prediction['reasoning'] ?? '' }}
|
||||
</p>
|
||||
|
||||
<div class="mt-3">
|
||||
<span class="rounded-full px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-wide {{ $labelColour }}">
|
||||
{{ ucfirst($label) }} confidence
|
||||
</span>
|
||||
<flux:badge size="sm" :class="$labelColour">{{ ucfirst($label) }} confidence</flux:badge>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<select
|
||||
{{ $attributes->whereStartsWith('wire:') }}
|
||||
class="h-11 w-full rounded-xl border border-[#e5ded7] bg-[#faf6f3] px-3 text-sm font-semibold text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e]"
|
||||
>
|
||||
<option value="reliable">Best price (reliable)</option>
|
||||
<option value="price">Cheapest first</option>
|
||||
<option value="distance">Nearest first</option>
|
||||
<option value="updated">Recently updated</option>
|
||||
<option value="brand">Brand A–Z</option>
|
||||
</select>
|
||||
<flux:select {{ $attributes }} size="sm">
|
||||
<flux:select.option value="reliable">Best price (reliable)</flux:select.option>
|
||||
<flux:select.option value="price">Cheapest first</flux:select.option>
|
||||
<flux:select.option value="distance">Nearest first</flux:select.option>
|
||||
<flux:select.option value="updated">Recently updated</flux:select.option>
|
||||
<flux:select.option value="brand">Brand A–Z</flux:select.option>
|
||||
</flux:select>
|
||||
|
||||
@@ -2,36 +2,34 @@
|
||||
|
||||
@php
|
||||
$colourClass = match($station['price_classification'] ?? '') {
|
||||
'current' => 'text-green-500',
|
||||
'current' => 'text-status-good',
|
||||
'recent' => 'text-slate-500',
|
||||
'stale' => 'text-amber-500',
|
||||
'outdated' => 'text-red-500',
|
||||
'stale' => 'text-status-warn',
|
||||
'outdated' => 'text-status-bad',
|
||||
default => 'text-zinc-400',
|
||||
};
|
||||
$miles = number_format(($station['distance_km'] ?? 0) * 0.621371, 1);
|
||||
$price = number_format($station['price'] ?? 0, 1);
|
||||
@endphp
|
||||
|
||||
<div class="flex items-center justify-between rounded-xl border border-[#e5ded7] bg-[#faf6f3] px-4 py-3.5">
|
||||
<div class="flex items-center justify-between rounded-xl border border-border bg-surface px-4 py-3.5">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="truncate text-sm font-bold text-[#4a3f3b]">
|
||||
<p class="truncate text-sm font-bold text-text-base">
|
||||
{{ $station['name'] ?? '' }}
|
||||
</p>
|
||||
@if (! empty($station['is_supermarket']))
|
||||
<span class="shrink-0 rounded bg-lime-100 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-lime-700">
|
||||
Supermarket
|
||||
</span>
|
||||
<flux:badge size="sm" color="lime">Supermarket</flux:badge>
|
||||
@endif
|
||||
</div>
|
||||
<p class="truncate text-xs text-[#89726c]">
|
||||
<p class="truncate text-xs text-text-muted">
|
||||
{{ $station['address'] ?? '' }}, {{ $station['postcode'] ?? '' }}
|
||||
</p>
|
||||
<p class="text-xs text-[#b0a09a]">{{ $miles }} miles away</p>
|
||||
<p class="text-xs text-text-dim">{{ $miles }} miles away</p>
|
||||
</div>
|
||||
|
||||
<div class="ml-4 shrink-0 text-right">
|
||||
<p class="text-xl font-black text-[#4a3f3b]">{{ $price }}p</p>
|
||||
<p class="text-xl font-black text-text-base">{{ $price }}p</p>
|
||||
<p class="text-[11px] {{ $colourClass }}">
|
||||
{{ $station['price_classification_label'] ?? '' }}
|
||||
@if (! empty($station['price_updated_at']))
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
<select
|
||||
{{ $attributes->whereStartsWith('wire:') }}
|
||||
class="h-11 w-full rounded-xl border border-[#e5ded7] bg-[#faf6f3] px-3 text-sm font-semibold text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e]"
|
||||
>
|
||||
<option value="petrol">Petrol (E10)</option>
|
||||
<option value="e5">Super Unleaded (E5)</option>
|
||||
<option value="diesel">Diesel</option>
|
||||
<option value="b7_premium">Premium Diesel</option>
|
||||
<option value="b10">B10 Biodiesel</option>
|
||||
<option value="hvo">HVO</option>
|
||||
</select>
|
||||
<flux:select {{ $attributes }} size="sm">
|
||||
<flux:select.option value="petrol">Petrol (E10)</flux:select.option>
|
||||
<flux:select.option value="e5">Super Unleaded (E5)</flux:select.option>
|
||||
<flux:select.option value="diesel">Diesel</flux:select.option>
|
||||
<flux:select.option value="b7_premium">Premium Diesel</flux:select.option>
|
||||
<flux:select.option value="b10">B10 Biodiesel</flux:select.option>
|
||||
<flux:select.option value="hvo">HVO</flux:select.option>
|
||||
</flux:select>
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
@php
|
||||
$tabs = [
|
||||
['label' => 'Prices', 'icon' => 'lucide:fuel', 'route' => 'home'],
|
||||
['label' => 'Alerts', 'icon' => 'lucide:bell', 'route' => null],
|
||||
['label' => 'Forecourts', 'icon' => 'lucide:map-pin', 'route' => null],
|
||||
['label' => 'Trends', 'icon' => 'lucide:trending-up','route' => null],
|
||||
];
|
||||
$currentRoute = request()->routeIs('home') ? 'home' : null;
|
||||
@endphp
|
||||
|
||||
<nav class="fixed inset-x-0 bottom-0 z-50 border-t border-[#e5ded7] bg-[#faf6f3] pb-8">
|
||||
<div class="flex">
|
||||
@foreach ($tabs as $tab)
|
||||
@php
|
||||
$isActive = $tab['route'] && $currentRoute === $tab['route'];
|
||||
$colour = $isActive ? 'text-[#bb5b3e]' : 'text-[#89726c]';
|
||||
@endphp
|
||||
<div class="flex flex-1 flex-col items-center gap-1 pt-3">
|
||||
<iconify-icon icon="{{ $tab['icon'] }}" class="text-xl {{ $colour }}"></iconify-icon>
|
||||
<span class="text-[10px] font-bold uppercase tracking-wide {{ $colour }}">
|
||||
{{ $tab['label'] }}
|
||||
</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</nav>
|
||||
@@ -1,17 +0,0 @@
|
||||
<header class="fixed inset-x-0 top-0 z-50 shrink-0 border-b border-[#e5ded7] bg-[#faf6f3] px-5 pb-4 pt-14 shadow-sm flex items-center justify-between">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[#bb5b3e] shadow-md">
|
||||
<iconify-icon icon="lucide:fuel" class="text-xl text-white"></iconify-icon>
|
||||
</div>
|
||||
<span class="text-2xl font-black tracking-tighter text-[#bb5b3e]">FuelAlert</span>
|
||||
</div>
|
||||
@auth
|
||||
<a href="{{ route('dashboard') }}" class="flex h-10 w-10 items-center justify-center rounded-full border border-[#e5ded7] bg-[#f5ede5]">
|
||||
<iconify-icon icon="lucide:user" class="text-lg text-[#89726c]"></iconify-icon>
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ route('login') }}" class="flex h-10 w-10 items-center justify-center rounded-full border border-[#e5ded7] bg-[#f5ede5]">
|
||||
<iconify-icon icon="lucide:user" class="text-lg text-[#89726c]"></iconify-icon>
|
||||
</a>
|
||||
@endauth
|
||||
</header>
|
||||
@@ -1,13 +0,0 @@
|
||||
<?php
|
||||
|
||||
use Livewire\Component;
|
||||
|
||||
new class extends Component
|
||||
{
|
||||
//
|
||||
};
|
||||
?>
|
||||
|
||||
<div>
|
||||
{{-- Nothing in life is to be feared, it is only to be understood. Now is the time to understand more, so that we may fear less. - Maria Skłodowska-Curie --}}
|
||||
</div>
|
||||
Reference in New Issue
Block a user