Phase 1: Refactoring & Design Improvement Plan (#28)

SethSharp · web-flow · commit 04124675fe70 · 2026-03-24T21:20:49.000+10:30
* 1.1

* 1.2

* wip

* 1.4

* wip
diff --git a/resources/views/components/alerts/warning.blade.php b/resources/views/components/alerts/warning.blade.php
@@ -1,4 +1,4 @@
-<div class="bg-yellow-50 border border-yellow-500 text-md text-yellow-600 p-4 rounded-lg flex gap-4">
+<div class="bg-accent-50 border border-accent-500 text-md text-accent-600 p-4 rounded-lg flex gap-4">
     <x-icons.warning/>
     {{ $slot }}
 </div>
diff --git a/resources/views/components/banners/christmas.blade.php b/resources/views/components/banners/christmas.blade.php
@@ -1,3 +1,3 @@
-<div class="bg-green-700 text-sm text-white text-center font-bold justify-center py-1">
+<div class="bg-seasonal-christmas text-sm text-white text-center font-bold justify-center py-1">
     Merry Christmas {{ now()->year }}!
 </div>
diff --git a/resources/views/components/banners/relay.blade.php b/resources/views/components/banners/relay.blade.php
@@ -1,4 +1,4 @@
-<div class="bg-yellow-500 text-sm text-[#0f1e64] font-semibold hover:text-white hover:bg-purple-600 text-center justify-center py-1 transition">
+<div class="bg-relay text-sm text-relay-text font-semibold hover:text-white hover:bg-relay-hover text-center justify-center py-1 transition">
     <a
         class="w-full"
         aria-label="Announcement bar"
diff --git a/resources/views/components/cards/google-review.blade.php b/resources/views/components/cards/google-review.blade.php
@@ -1,6 +1,6 @@
 <div class="h-full my-auto p-8 rounded-lg bg-secondary-50 text-center hover:-translate-y-2 transition">
     <div class="">
-        <h1 class="text-lg"> {{ $review['author_name'] }} </h1>
+        <p class="text-lg font-medium">{{ $review['author_name'] }}</p>
 
         <div class="text-secondary-400 inline-block">
             <div class="rotate-180 flex justify-start transform origin-left">
diff --git a/resources/views/components/cards/member/card.blade.php b/resources/views/components/cards/member/card.blade.php
@@ -4,14 +4,14 @@
             <x-image
                 src="{{$member['src']}}"
                 alt="{{$member['alt']}}"
-                class="shadow mx-auto rounded-2xl overflow-hidden max-h-64"
+                class="shadow rounded-lg mx-auto overflow-hidden max-h-64"
             />
         @endif
     </div>
 
     <div class="flex max-w-2xl mx-auto">
-        <div class="rounded-r-xl transition duration-700 p-2">
-            <h1 class="text-xl text-secondary-800 font-semibold">{{ $member['name'] }}</h1>
+        <div class="p-2">
+            <h3 class="text-xl text-secondary-800 font-semibold">{{ $member['name'] }}</h3>
 
             <span class="text-base text-secondary-400"> {{ $member['position'] }} </span>
 
diff --git a/resources/views/components/cards/quote.blade.php b/resources/views/components/cards/quote.blade.php
@@ -7,7 +7,7 @@
         </span>
     </div>
 
-    <div class="flex-grow text-gray-400">
+    <div class="flex-grow text-secondary-400">
         <div class="h-full flex">
             <span class="my-auto mx-auto">
                 - {{ $user }}
diff --git a/resources/views/components/contact/open-times.blade.php b/resources/views/components/contact/open-times.blade.php
@@ -1,7 +1,7 @@
-<div class="max-w-4xl w-full p-8 mx-auto bg-gray-100">
+<div class="max-w-4xl w-full p-8 mx-auto bg-secondary-100">
     <!-- Header -->
     <div class="text-center mb-8">
-        <h1 class="text-3xl font-semibold mb-4">
+        <h2 class="text-3xl font-semibold mb-4">
              Merry Christmas
         </h1>
         <p class="text-lg leading-relaxed mb-4">
diff --git a/resources/views/components/headings/secondary.blade.php b/resources/views/components/headings/secondary.blade.php
@@ -1,4 +1,10 @@
+@props(['level' => 3])
+
+@php
+    $tag = 'h' . min(max((int) $level, 1), 6);
+@endphp
+
 <div>
-    <div class="text-secondary-700 text-md md:text-xl"> {{ $slot }} </div>
+    <{{ $tag }} class="text-secondary-700 text-md md:text-xl">{{ $slot }}</{{ $tag }}>
     <div class="w-24 h-[1px] mb-2 bg-secondary-700"></div>
 </div>
diff --git a/resources/views/components/headings/title-overline.blade.php b/resources/views/components/headings/title-overline.blade.php
@@ -1,4 +1,10 @@
+@props(['level' => null])
+
+@php
+    $tag = $level ? 'h' . min(max((int) $level, 1), 6) : 'p';
+@endphp
+
 <div>
     <div class="w-24 h-0.5 mb-2 bg-primary-500"></div>
-    <div class="text-primary-500 text-lg md:text-2xl"> {{ $slot }} </div>
+    <{{ $tag }} class="text-primary-500 text-lg md:text-2xl">{{ $slot }}</{{ $tag }}>
 </div>
diff --git a/resources/views/components/headings/title-strikethrough.blade.php b/resources/views/components/headings/title-strikethrough.blade.php
@@ -1,5 +1,11 @@
+@props(['title', 'level' => 2])
+
+@php
+    $tag = 'h' . min(max((int) $level, 1), 6);
+@endphp
+
 <div class="flex">
     <div class="w-12 h-0.5 mr-2 bg-primary-500 my-auto"></div>
-    <h1 class="text-primary-500 text-lg md:text-2xl"> {{ $title }} </h1>
+    <{{ $tag }} class="text-primary-500 text-lg md:text-2xl">{{ $title }}</{{ $tag }}>
     <div class="w-12 h-0.5 ml-2 bg-primary-500 my-auto"></div>
 </div>
diff --git a/resources/views/components/headings/title.blade.php b/resources/views/components/headings/title.blade.php
@@ -1,4 +1,10 @@
+@props(['level' => 2])
+
+@php
+    $tag = 'h' . min(max((int) $level, 1), 6);
+@endphp
+
 <div>
-    <div class="text-black text-lg md:text-2xl"> {{ $slot }} </div>
+    <{{ $tag }} class="text-black text-lg md:text-2xl">{{ $slot }}</{{ $tag }}>
     <div class="w-24 h-0.5 mb-2 bg-black"></div>
 </div>
diff --git a/resources/views/components/layouts/footer.blade.php b/resources/views/components/layouts/footer.blade.php
@@ -21,17 +21,17 @@
 
                         </a>
                     </div>
-                    <div class="max-w-md pr-16 text-md text-gray-200">
+                    <div class="max-w-md pr-16 text-md text-secondary-200">
                         Your go to for Custom Framing on the Gold Coast.
                     </div>
                     <div class="flex space-x-2">
                         <a href="https://www.instagram.com/framedjust4u/" target="_blank"
-                           class="text-gray-200 hover:text-gray-200">
+                           class="text-secondary-200 hover:text-secondary-200">
                             <span class="sr-only">Instagram</span>
                             <x-icons.socials.instagram/>
                         </a>
                         <a href="https://www.facebook.com/framedjustforyou/" target="_blank"
-                           class="text-gray-200 hover:text-gray-200">
+                           class="text-secondary-200 hover:text-secondary-200">
                             <span class="sr-only">Facebook</span>
                             <x-icons.socials.facebook/>
                         </a>
@@ -44,13 +44,13 @@ class="text-gray-200 hover:text-gray-200">
                             <ul role="list" class="mt-6 space-y-4">
                                 <li>
                                     <a href="{{route('custom-framing')}}"
-                                       class="text-md leading-6 text-gray-300 hover:text-gray-50">
+                                       class="text-md leading-6 text-secondary-300 hover:text-secondary-50">
                                         Custom Framing
                                     </a>
                                 </li>
                                 <li>
                                     <a href="{{route('printing')}}"
-                                       class="text-md leading-6 text-gray-300 hover:text-gray-50">
+                                       class="text-md leading-6 text-secondary-300 hover:text-secondary-50">
                                         Printing
                                     </a>
                                 </li>
@@ -61,31 +61,31 @@ class="text-md leading-6 text-gray-300 hover:text-gray-50">
                             <ul role="list" class="mt-6 space-y-4">
                                 <li>
                                     <a href="{{route('services.framing.acrylic')}}"
-                                       class="text-md leading-6 text-gray-300 hover:text-gray-50">
+                                       class="text-md leading-6 text-secondary-300 hover:text-secondary-50">
                                         Acrylic
                                     </a>
                                 </li>
                                 <li>
                                     <a href="{{route('services.framing.canvas')}}"
-                                       class="text-md leading-6 text-gray-300 hover:text-gray-50">
+                                       class="text-md leading-6 text-secondary-300 hover:text-secondary-50">
                                         Canvas
                                     </a>
                                 </li>
                                 <li>
                                     <a href="{{route('services.framing.indigenous')}}"
-                                       class="text-md leading-6 text-gray-300 hover:text-gray-50">
+                                       class="text-md leading-6 text-secondary-300 hover:text-secondary-50">
                                         Indigenous Art
                                     </a>
                                 </li>
                                 <li>
                                     <a href="{{route('services.framing.jigsaw')}}"
-                                       class="text-md leading-6 text-gray-300 hover:text-gray-50">
+                                       class="text-md leading-6 text-secondary-300 hover:text-secondary-50">
                                         Jigsaws
                                     </a>
                                 </li>
                                 <li>
                                     <a href="{{route('services.framing.medals-memorabilia')}}"
-                                       class="text-md leading-6 text-gray-300 hover:text-gray-50">
+                                       class="text-md leading-6 text-secondary-300 hover:text-secondary-50">
                                         Medals & Memorabilia
                                     </a>
                                 </li>
@@ -97,25 +97,25 @@ class="text-md leading-6 text-gray-300 hover:text-gray-50">
                             <ul role="list" class="mt-12 space-y-4">
                                 <li>
                                     <a href="{{route('services.framing.mirror')}}"
-                                       class="text-md leading-6 text-gray-300 hover:text-gray-50">
+                                       class="text-md leading-6 text-secondary-300 hover:text-secondary-50">
                                         Mirror
                                     </a>
                                 </li>
                                 <li>
                                     <a href="{{route('services.framing.prints-posters')}}"
-                                       class="text-md leading-6 text-gray-300 hover:text-gray-50">
+                                       class="text-md leading-6 text-secondary-300 hover:text-secondary-50">
                                         Prints Posters & Photos
                                     </a>
                                 </li>
                                 <li>
                                     <a href="{{route('services.framing.handcrafted')}}"
-                                       class="text-md leading-6 text-gray-300 hover:text-gray-50">
+                                       class="text-md leading-6 text-secondary-300 hover:text-secondary-50">
                                         Handcrafted Artwork
                                     </a>
                                 </li>
                                 <li>
                                     <a href="{{route('services.framing.restorations')}}"
-                                       class="text-md leading-6 text-gray-300 hover:text-gray-50">
+                                       class="text-md leading-6 text-secondary-300 hover:text-secondary-50">
                                         Restorations
                                     </a>
                                 </li>
@@ -126,19 +126,19 @@ class="text-md leading-6 text-gray-300 hover:text-gray-50">
                             <ul role="list" class="mt-6 space-y-4">
                                 <li>
                                     <a href="{{route('about')}}"
-                                       class="text-md leading-6 text-gray-300 hover:text-gray-50">
+                                       class="text-md leading-6 text-secondary-300 hover:text-secondary-50">
                                         About us
                                     </a>
                                 </li>
                                 <li>
                                     <a href="{{route('contact')}}"
-                                       class="text-md leading-6 text-gray-300 hover:text-gray-50">
+                                       class="text-md leading-6 text-secondary-300 hover:text-secondary-50">
                                         Contact us
                                     </a>
                                 </li>
                                 <li>
                                     <a href="{{route('privacy-policy')}}"
-                                       class="text-md leading-6 text-gray-300 hover:text-gray-50">
+                                       class="text-md leading-6 text-secondary-300 hover:text-secondary-50">
                                         Privacy Policy
                                     </a>
                                 </li>
@@ -147,10 +147,10 @@ class="text-md leading-6 text-gray-300 hover:text-gray-50">
                     </div>
                 </div>
             </div>
-            <div class="mt-16 border-t border-gray-400/30 pt-8 sm:mt-20 lg:mt-24">
+            <div class="mt-16 border-t border-secondary-400/30 pt-8 sm:mt-20 lg:mt-24">
                 <div class="text-md text-center text-white">
                     {!! config('framed.copyright')  !!}
-                    <span class="text-gray-50">♥</span> by Framing enthusiasts at
+                    <span class="text-secondary-50">♥</span> by Framing enthusiasts at
                     <a rel="noopener" href="/">
                         Framed Just For You.
                     </a>
diff --git a/resources/views/components/links/services-mega-menu.blade.php b/resources/views/components/links/services-mega-menu.blade.php
@@ -69,7 +69,7 @@ class="text-white mt-1.5 flex text-lg cursor-pointer decoration-2 items-center h
     {{--  Mobile  --}}
     <div x-show="open" x-on:click="open = false" x-cloak class="flex lg:hidden">
         <div class="flex w-full pl-2">
-            <div class="grid sm:grid-cols-2 w-full border-gray-200">
+            <div class="grid sm:grid-cols-2 w-full border-secondary-200">
                 <div>
                     @foreach ($customLinks_1 as $link)
                         <x-links.mega-menu-link
@@ -115,7 +115,7 @@ class="absolute right-24 z-50 hidden lg:flex"
                 class="bg-secondary-50 rounded-lg shadow-xl px-4 mx-auto md:flex hidden max-w-7xl w-full"
             >
                 <div class="flex w-full">
-                    <div class="grid grid-cols-2 gap-y-4 w-full border-gray-200">
+                    <div class="grid grid-cols-2 gap-y-4 w-full border-secondary-200">
                         <div>
                             @foreach ($customLinks_1 as $link)
                                 <x-links.mega-menu-link
diff --git a/resources/views/components/section/page.blade.php b/resources/views/components/section/page.blade.php
@@ -1,7 +1,7 @@
 @props(['breadcrumbs' => []])
 <div
 >
-    <div class="ml-2 md:ml-10 lg:ml-16 text-gray-500 mt-8">
+    <div class="ml-2 md:ml-10 lg:ml-16 text-secondary-500 mt-8">
         <x-breadcrumbs.breadcrumb>
             <x-breadcrumbs.breadcrumb-list>
                 @foreach($breadcrumbs as $index => $breadcrumb)
diff --git a/resources/views/components/section/wrapper.blade.php b/resources/views/components/section/wrapper.blade.php
@@ -2,7 +2,7 @@
     class="transition-all duration-500 px-2 ease-in mx-2 md:mx-10 py-6"
     x-data="{ inView: false }"
     x-intersect.threshold.05="inView = true"
-    :class="{'translate-y-0 opacity-1 md:delay-75' : inView, 'translate-y-[2rem] opacity-0' : ! inView }"
+    :class="{'translate-y-0 opacity-1 md:delay-75' : inView, 'translate-y-8 opacity-0' : ! inView }"
 >
     {{ $slot }}
 </div>
diff --git a/resources/views/components/table/standard.blade.php b/resources/views/components/table/standard.blade.php
@@ -2,24 +2,24 @@
     <x-headings.secondary>{{ $data['title'] }}</x-headings.secondary>
 
     <div class="inline-block min-w-full py-2 align-middle">
-        <table class="min-w-full divide-y divide-gray-300">
+        <table class="min-w-full divide-y divide-secondary-300">
             <thead>
             <tr>
                 @foreach($data['headings'] as $heading)
                     <th
                         scope="col"
-                        class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        class="px-3 py-3.5 text-left text-sm font-semibold text-secondary-900"
                     >
                         {{ $heading }}
                     </th>
                 @endforeach
             </tr>
             </thead>
-            <tbody class="divide-y divide-gray-200">
+            <tbody class="divide-y divide-secondary-200">
                 @foreach($data['data'] as $index => $row)
                     <tr class="hover:shadow hover:bg-white hover:cursor-default transition">
                         @foreach($row as $rowIndex => $cell)
-                            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                            <td class="whitespace-nowrap px-3 py-4 text-sm text-secondary-500">
                                 {{ $cell }}
                             </td>
                         @endforeach
diff --git a/resources/views/pages/contact.blade.php b/resources/views/pages/contact.blade.php
@@ -3,7 +3,7 @@
 
 <x-layouts.app>
     <x-section.wrapper>
-        <div class="bg-gradient-to-br from-white to-gray-200 rounded p-1 sm:p-2">
+        <div class="bg-gradient-to-br from-white to-secondary-200 rounded p-1 sm:p-2">
             <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">
diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php
@@ -26,21 +26,14 @@ class="pl-2 text-primary-400">
                         <h1 class="text-3xl sm:text-5xl md:text-6xl text-white mt-2"> Framed Just <br> For You</h1>
                     </div>
 
-{{--                    <div class="w-full md:w-1/2 hidden md:block">--}}
-{{--                        <x-image--}}
-{{--                            src="/store/store-front-right.webp"--}}
-{{--                            class="object-cover mt-[25px] md:mt-[100px] h-[200px] md:h-[350px] w-full border-4 border-secondary-100 rounded"--}}
-{{--                            alt="Framed Just For You Team Photo"--}}
-{{--                        />--}}
-{{--                    </div>--}}
                 </div>
             </div>
         </div>
     @endsection
 
 {{--    <x-contact.open-times />--}}
 
-    <x-section.section class="mt-[50px] !bg-secondary-50">
+    <x-section.section class="mt-12 !bg-secondary-50">
         <x-section.wrapper>
             <x-cards.image-content-right>
                 <x-slot name="title">
@@ -119,7 +112,7 @@ class="object-cover w-full border-4 border-secondary-100 rounded"
         </x-section.wrapper>
     </x-section.section>
 
-    <x-section.section class="mt-[50px] !bg-secondary-50">
+    <x-section.section class="mt-12 !bg-secondary-50">
         <x-section.wrapper>
             <div class="lg:relative">
                 <x-cards.image-content-left>
@@ -169,7 +162,7 @@ class="mx-auto mb-6 size-44"
                             />
 
                             <a href="https://www.relayforlife.org.au/fundraisers/framedjustforyou"
-                               class="bg-yellow-500 rounded px-2 py-4 text-[#0f1e64] font-semibold hover:text-white hover:bg-purple-600 transition">
+                               class="bg-relay rounded px-2 py-4 text-relay-text font-semibold hover:text-white hover:bg-relay-hover transition">
                                 or click here
                             </a>
                         </div>
diff --git a/tailwind.config.js b/tailwind.config.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="bg-yellow-500 text-sm text-[#0f1e64] font-semibold hover:text-white hover:bg-purple-600 text-center justify-center py-1 transition">`
	`1`	`+<div class="bg-relay text-sm text-relay-text font-semibold hover:text-white hover:bg-relay-hover text-center justify-center py-1 transition">`
`2`	`2`	`<a`
`3`	`3`	`class="w-full"`
`4`	`4`	`aria-label="Announcement bar"`