Phase 2: Component Clean Up

.nvmrc

@@ -0,0 +1 @@
+20

resources/views/components/breadcrumbs/breadcrumb-ellipsis.blade.php

@@ -2,6 +2,8 @@
     role="presentation"
     aria-hidden="true"
     {{ $attributes->merge(['class' => 'flex h-9 w-9 items-center justify-center']) }}>
-    <x-icons.ellipsis class="size-4"/>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+    </svg>
     <span class="sr-only">More</span>
 </span>

resources/views/components/cards/feature.blade.php

@@ -0,0 +1,41 @@
+@props(['image', 'content', 'title' => null, 'imagePosition' => 'right'])
+
+<div class="space-y-4 lg:relative lg:flex items-center justify-center">
+    @if ($imagePosition === 'right')
+        <x-section.content class="backdrop-blur-sm bg-white/90 lg:absolute right-1/3 z-10 rounded-xl border border-secondary-200">
+            @if ($title)
+                <x-slot name="title">
+                    {{ $title }}
+                </x-slot>
+            @endif
+
+            <x-slot name="content">
+                <div class="w-full border-l-4 border-primary-500 py-4 pl-5">
+                    {{ $content }}
+                </div>
+            </x-slot>
+        </x-section.content>
+
+        <div class="lg:w-1/3 lg:ml-auto lg:relative">
+            {{ $image }}
+        </div>
+    @else
+        <div class="lg:w-1/3 lg:relative mr-auto">
+            {{ $image }}
+        </div>
+
+        <x-section.content class="backdrop-blur-sm bg-white/90 lg:absolute left-1/3 z-10 rounded-xl border border-secondary-200">
+            @if ($title)
+                <x-slot name="title">
+                    {{ $title }}
+                </x-slot>
+            @endif
+
+            <x-slot name="content">
+                <div class="w-full border-l-4 border-primary-500 py-4 pl-5">
+                    {{ $content }}
+                </div>
+            </x-slot>
+        </x-section.content>
+    @endif
+</div>

resources/views/components/cards/image-link.blade.php

@@ -0,0 +1,28 @@
+@props(['href', 'src', 'title', 'alt', 'loading' => 'lazy', 'size' => 'md'])
+
+@php
+$sizes = [
+    'sm' => 'h-44',
+    'md' => 'h-64',
+];
+$height = $sizes[$size] ?? $sizes['md'];
+@endphp
+
+<a href="{{ $href }}" class="group block w-full">
+    <div class="relative {{ $height }} rounded-2xl overflow-hidden border border-secondary-300 shadow-md hover:shadow-xl transition-shadow duration-300">
+        <x-image
+            src="{{ $src }}"
+            alt="{{ $alt }}"
+            loading="{{ $loading }}"
+            class="object-cover object-center {{ $height }} w-full rounded-none transition-transform duration-500 group-hover:scale-110"
+        />
+
+        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
+
+        <div class="absolute inset-0 flex flex-col justify-end">
+            <div class="text-white text-md text-center p-3 font-medium">
+                {{ $title }}
+            </div>
+        </div>
+    </div>
+</a>

resources/views/components/heading.blade.php

@@ -0,0 +1,42 @@
+@props(['variant' => 'default', 'tag' => 'h2'])
+
+@php
+$variants = [
+    'default' => [
+        'text' => 'text-black text-lg md:text-2xl tracking-tight',
+        'bar' => 'bg-black',
+    ],
+    'secondary' => [
+        'text' => 'text-secondary-700 text-md md:text-xl tracking-tight',
+        'bar' => 'bg-secondary-700',
+    ],
+    'overline' => [
+        'text' => 'text-primary-500 text-lg md:text-2xl tracking-tight',
+        'bar' => 'bg-primary-500',
+    ],
+    'strikethrough' => [
+        'text' => 'text-primary-500 text-lg md:text-2xl tracking-tight',
+        'bar' => 'bg-primary-500',
+    ],
+];
+
+$v = $variants[$variant] ?? $variants['default'];
+@endphp
+
+@if ($variant === 'strikethrough')
+    <div class="flex items-center gap-2">
+        <div class="flex-1 h-0.5 {{ $v['bar'] }}"></div>
+        <{{ $tag }} class="{{ $v['text'] }}">{{ $slot }}</{{ $tag }}>
+        <div class="flex-1 h-0.5 {{ $v['bar'] }}"></div>
+    </div>
+@elseif ($variant === 'overline')
+    <div>
+        <div class="w-16 h-0.5 mb-2 {{ $v['bar'] }}"></div>
+        <{{ $tag }} class="{{ $v['text'] }}">{{ $slot }}</{{ $tag }}>
+    </div>
+@else
+    <div>
+        <{{ $tag }} class="{{ $v['text'] }}">{{ $slot }}</{{ $tag }}>
+        <div class="w-16 h-0.5 mt-1 mb-2 {{ $v['bar'] }}"></div>
+    </div>
+@endif

resources/views/components/section/content.blade.php

@@ -2,7 +2,7 @@
 
 <div {{ $attributes->merge(['class' => 'p-1 sm:p-4 rounded-md']) }} id="{{$id}}">
     @if ($title)
-        <x-headings.title-strikethrough title="{{$title}}"/>
+        <x-heading variant="strikethrough">{{ $title }}</x-heading>
     @endif
 
     <div class="space-y-4 sm:px-4 text-secondary-500 leading-loose {{ $title ? 'mt-6 sm:mt-14 xl:mt-4' : '' }}">

resources/views/components/table/standard.blade.php

@@ -1,5 +1,5 @@
 <div class="mt-6 overflow-x-auto">
-    <x-headings.secondary>{{ $data['title'] }}</x-headings.secondary>
+    <x-heading variant="secondary">{{ $data['title'] }}</x-heading>
 
     <div class="inline-block min-w-full py-2 align-middle">
         <table class="min-w-full divide-y divide-secondary-300">

resources/views/pages/contact.blade.php

@@ -7,7 +7,7 @@
             <div class="md:flex gap-4 space-y-2 sm:space-y-0 sm:p-8">
                 <div class="md:w-1/2">
                     <div class="h-full">
-                        <x-headings.title> Get in touch</x-headings.title>
+                        <x-heading> Get in touch</x-heading>
 
                         <ul class="mt-6 text-sm sm:text-base text-secondary-600 space-y-6">
                             <li class="flex gap-1 sm:gap-2">
@@ -63,7 +63,7 @@ class="text-white cursor-pointer"
                 </div>
 
                 <div class="md:w-1/2">
-                    <x-headings.title> Opening Hours</x-headings.title>
+                    <x-heading> Opening Hours</x-heading>
 
                     <div class="mt-5 space-y-3 text-sm sm:text-base">
                         @foreach(config('framed.times') as $time)