Feature/header footer

README.md

@@ -1,6 +1,6 @@
 # Rapidez Checkout Theme
 
-An **opinionated** checkout with customer center for [Rapidez](https://github.com/rapidez/rapidez). Easily configurable with your own logo, colors, fonts and style. A fully mobile optimized theme which takes about 1 hour to fully implement.
+An **opinionated** checkout with customer center for [Rapidez](https://github.com/rapidez/rapidez). Easily configurable with your own logo, checkout header/footer, colors, fonts and style. A fully mobile optimized theme which takes about 1 hour to fully implement.
 
 ![](images/checkout-theme.gif)
 
@@ -26,6 +26,7 @@ Customer center
 Easily configurable in less than 5 minutes
 - Colors - Change a total of 8 variables for personal customization
 - Logo - Simply add your own logo by extending 1 template
+- Checkout Header/Footer - Populate these files with relevant usps and links; currently, they use placeholder content and should be replaced with actual brand information
 - Visuals - Change the look of various types of cards, customer center tiles, etc, by extending well-defined templates
 
 Fast checkout experience

resources/core-overwrites/layouts/checkout/footer.blade.php

@@ -0,0 +1,9 @@
+<footer class="mt-auto">
+    <div class="mt-10 flex items-center justify-center gap-6 border-b-4 border-b-ct-enhanced bg-ct-inactive-100 py-4 text-sm text-ct-inactive">
+        @foreach (['Privacy Policy', 'Terms & Conditions', 'About us'] as $link)
+            <a class="hover:underline" href="#">
+                {{ $link }}
+            </a>
+        @endforeach
+    </div>
+</footer>

resources/core-overwrites/layouts/checkout/header.blade.php

@@ -0,0 +1,16 @@
+<div class="bg-inactive-100 text-ct-inactive relative py-3 text-xs font-semibold">
+    <slider reference="header-usp-slider" autoplay>
+        <div
+            ref="header-usp-slider"
+            class="scrollbar-hide flex snap-x snap-mandatory items-center gap-7 overflow-x-auto lg:justify-center"
+            slot-scope="{ navigate, currentSlide, slidesTotal }"
+        >
+            @foreach (['Wide range of products', 'Free returns', 'All items shown are in stock', 'Free shipping'] as $usp)
+                <div class="flex shrink-0 snap-center items-center justify-center gap-2 max-lg:w-screen">
+                    <x-heroicon-o-check class="size-4 text-ct-enhanced stroke-2" />
+                    <span>{{ $usp }}</span>
+                </div>
+            @endforeach
+        </div>
+    </slider>
+</div>