finance form template displayed

This commit is contained in:
2024-04-09 12:35:05 -04:00
parent 67e0407058
commit 57facdd65c
9 changed files with 903 additions and 870 deletions

View File

@@ -2017,10 +2017,6 @@ select {
bottom: 100%;
}
.left-0 {
left: 0px;
}
.left-2 {
left: 0.5rem;
}
@@ -2777,6 +2773,11 @@ html {
background-color: rgb(89 10 12/var(--tw-bg-opacity));
}
.hover\:bg-stone-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(214 211 209/var(--tw-bg-opacity));
}
.hover\:bg-stone-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(120 113 108/var(--tw-bg-opacity));
@@ -2787,21 +2788,6 @@ html {
background-color: rgb(87 83 78/var(--tw-bg-opacity));
}
.hover\:bg-stone-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(245 245 244/var(--tw-bg-opacity));
}
.hover\:bg-stone-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(231 229 228/var(--tw-bg-opacity));
}
.hover\:bg-stone-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(214 211 209/var(--tw-bg-opacity));
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255/var(--tw-text-opacity));

View File

@@ -209,7 +209,7 @@ li.mdc-list-item:hover {
#slide-out-filters{
transition: 300ms ease-in-out;
translate: -100%;
/* translate: -100%; */
}
@@ -238,4 +238,12 @@ li.mdc-list-item:hover {
.sticky-container{
position: static;
}
/*
#applied-filters-container{
position: fixed;
bottom: 0px;
z-index: 50;
width: 100%;
right: 0;
} */
}

View File

@@ -19,6 +19,11 @@ class FinanceForm {
52: 'Weekly',
};
if (!vehicle.advertise_price) {
vehicle['advertise_price'] = 0;
this.inputs.push('advertise_price')
}
this.vehicle = vehicle;
// Default values
@@ -93,14 +98,26 @@ class FinanceForm {
}
}
generateAdvertisePriceInput(){
return (this.vehicle.advertise_price == 0) ? `<div>
<label for="advertise_price" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Vehicle price</label>
<div class="flex">
<span class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border rounded-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600 rounded-l-lg">
<i class="fas fa-dollar-sign"></i>
</span>
<input type="number" value="25000" id="advertise_price" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-r-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
</div>
</div>` : '';
}
initForm() {
// console.log('initForm')
this.modalDiv = document.createElement('div');
const currentYear = new Date().getFullYear();
const vehicleYear = this.vehicle.year;
const vehicleYear = this.vehicle.year || 2024;
const vehicleAge = currentYear - vehicleYear;
const loanTermOptions = this.generateLoanTermOptions(vehicleAge);
const advertise_price = this.generateAdvertisePriceInput()
// const modalDiv = document.createElement('div');
this.modalDiv.innerHTML = `
@@ -150,6 +167,8 @@ class FinanceForm {
</div>
</div>
${advertise_price}
<div>
<label for="tradeValue" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Vehicle Trade-in</label>
<div class="flex">
@@ -215,7 +234,7 @@ class FinanceForm {
<ul class="transmission-container list-none text-gray-900 w-48 text-sm font-medium rounded-lg w-full">
<li class="w-full flex items-center flex-wrap justify-between items-start flex-row w-full rounded-t-lg flex items-center justify-between transition duration-400 autocart-filters">
<span class="text-sm font-medium text-gray-900 dark:text-gray-300 transition duration-400 font-normal text-base">Vehicle Price</span>
<span class="autocart_count text-gray-500 ml-2 transition duration-400 font-normal text-base">
<span class="autocart_count advertisePriceSpan text-gray-500 ml-2 transition duration-400 font-normal text-base">
${this.vehicle.advertise_price.toLocaleString('en-CA', { style: 'currency', currency: 'CAD', minimumFractionDigits: 0, maximumFractionDigits: 0 })}
</span>
</li>
@@ -227,7 +246,7 @@ class FinanceForm {
<ul class="transmission-container list-none text-gray-900 w-48 text-sm font-medium rounded-lg w-full">
<li class="w-full flex items-center flex-wrap justify-between items-start flex-row w-full rounded-t-lg flex items-center justify-between transition duration-400 autocart-filters">
<span class="text-sm font-medium text-gray-900 dark:text-gray-300 transition duration-400 font-normal text-base">Finance Total</span>
<span class="autocart_count text-gray-500 ml-2 transition duration-400 font-normal text-base">
<span class="autocart_count advertisePriceSpan text-gray-500 ml-2 transition duration-400 font-normal text-base">
${this.vehicle.advertise_price.toLocaleString('en-CA', { style: 'currency', currency: 'CAD', minimumFractionDigits: 0, maximumFractionDigits: 0 })}
</span>
</li>
@@ -342,7 +361,11 @@ class FinanceForm {
}
calculatePayments() {
var vehiclePrice = this.vehicle.advertise_price;
if(this.inputs.includes('advertise_price')){
vehiclePrice = document.getElementById('advertise_price').value;
}
this.loanTerm = document.getElementById('loanTerm').value;
this.paymentFrequency = document.getElementById('paymentFrequency').value;
this.intRate = document.getElementById('rate').value == 'default-rate'
@@ -388,8 +411,7 @@ class FinanceForm {
document.getElementById(el)?.classList?.add('hidden');
});
if(document.getElementById('rate')){
document
.getElementById(document.getElementById('rate').value)
document.getElementById(document.getElementById('rate').value)
.classList.remove('hidden');
}
@@ -430,6 +452,17 @@ class FinanceForm {
});
}
if (document.querySelectorAll('.advertisePriceSpan').length) {
document.querySelectorAll('.advertisePriceSpan').forEach((el) => {
el.innerHTML = (Number(document.getElementById('advertise_price').value) || 0).toLocaleString(
'en-CA',
{ style: 'currency', currency: 'CAD' }
);
});
}
if (document.querySelectorAll('.totalObligationSpan').length) {
document.querySelectorAll('.totalObligationSpan').forEach((el) => {
el.innerHTML = (Number(this.totalObligation) || 0).toLocaleString(
@@ -520,4 +553,3 @@ class FinanceForm {
localStorage.setItem(`autocart_${this.name}`, JSON.stringify(formValues));
}
}

View File

@@ -11,14 +11,14 @@ let modelFilter = [];
let makeFilters;
function sendReq() {
var formData = {
action: 'handle_autocart_form',
minPrice: price.getValueStart(),
maxPrice: price.getValue(),
minKilometres: kilometres.getValueStart(),
maxKilometres: kilometres.getValue(),
minYear: year.getValueStart(),
maxYear: year.getValue(),
autocart_nonce: jQuery('#autocart_nonce').val(),
'action': 'handle_autocart_form',
'minPrice': price.getValueStart(),
'maxPrice': price.getValue(),
'minKilometres': kilometres.getValueStart(),
'maxKilometres': kilometres.getValue(),
'minYear': year.getValueStart(),
'maxYear': year.getValue(),
'autocart_nonce': jQuery('#autocart_nonce').val(),
};
const vehiclesContainer = document.querySelector('.vehicles-container');
// vehiclesContainer.textContent = 'Loading...';
@@ -47,6 +47,7 @@ function sendReq() {
dataStore.unsubscribeAll();
}
// Initialize new data store
dataStore.vehicles = vehicles;
filterManager = new FilterManager(dataStore);
@@ -56,8 +57,8 @@ function sendReq() {
// appliedFilters = new AppliedFilters(dataStore, filterManager);
shouldUpdateFilters = true;
dataStore.subscribe((filteredVehicles) => {
console.log('dataStore has been changed');
dataStore.subscribe(filteredVehicles => {
console.log('dataStore has been changed')
handleSuccess(filteredVehicles);
});
@@ -67,8 +68,8 @@ function sendReq() {
console.log(xhr.responseText);
console.log('Status: ' + status);
console.log('Error: ' + error);
jQuery('#inventory-search__search-button').text('Error');
},
jQuery("#inventory-search__search-button").text("Error");
}
});
}
@@ -82,14 +83,18 @@ function handleSuccess(vehicles, updateFilters = shouldUpdateFilters) {
const vehiclesContainer = document.querySelector('.vehicles-container');
vehiclesContainer.innerHTML = '';
vehicles.forEach((vehicleData) => {
vehicles.forEach(vehicleData => {
const vehicle = new VehicleThumbnail(vehicleData);
// vehiclesContainer.appendChild(vehicle.generateCardHTML());
vehiclesContainer.appendChild(vehicle.generateCardElement());
});
}
function createMakeList(vehicles){
const makeContainer = document.querySelector('.make-container');
makeContainer.innerHTML = '';
@@ -104,20 +109,19 @@ function createMakeList(vehicles) {
// // dataStore.addFilter('make', makeValue);
// }
makeFilters = Object.entries(makeCounts).map(([make, count]) => {
return filterManager.createMakeFilter(
{
return filterManager.createMakeFilter({
text: make,
checked: makeValue.toLowerCase() === make.toLowerCase(),
count,
models: fetchAvailableModels(vehicles, make),
},
dataStore
);
models: fetchAvailableModels(vehicles, make)
}, dataStore);
});
makeFilters.sort((a, b) => a.value.localeCompare(b.value));
makeFilters.forEach((make) => {
makeFilters.forEach(make => {
makeContainer.appendChild(make.generateCardHTML());
make.subscribe((m) => initModelContainer(m));
make.subscribe(m=> initModelContainer(m))
});
}
@@ -133,20 +137,17 @@ function createBodyTypeList(vehicles) {
filterManager.resetList('body_type');
bodyTypeFilters = Object.entries(bodyType).map(([body_type, count]) =>
filterManager.createBodyTypeFilter({ text: body_type, count }, dataStore)
);
bodyTypeFilters = Object.entries(bodyType).map(([body_type, count]) => filterManager.createBodyTypeFilter({ text: body_type, count}, dataStore));
bodyTypeFilters.sort((a, b) => a.value.localeCompare(b.value));
bodyTypeFilters.forEach((body_type) => {
bodyTypeFilters.forEach(body_type => {
bodyTypeContainer.appendChild(body_type.initCheckbox());
// body_type.subscribe(m=> iniBodyTypeContainer(m))
});
}
function createTransmissionList(vehicles){
const transmissionContainer = document.querySelector(
'.transmission-container'
);
const transmissionContainer = document.querySelector('.transmission-container');
transmissionContainer.innerHTML = '';
@@ -157,15 +158,9 @@ function createTransmissionList(vehicles) {
}, {});
filterManager.resetList('transmission_type');
transmissionFilters = Object.entries(transmission).map(
([transmission_type, count]) =>
filterManager.createTransmissionFilter(
{ text: transmission_type, count },
dataStore
)
);
transmissionFilters = Object.entries(transmission).map(([transmission_type, count]) => filterManager.createTransmissionFilter({ text: transmission_type, count}, dataStore));
transmissionFilters.sort((a, b) => a.value.localeCompare(b.value));
transmissionFilters.forEach((transmission) => {
transmissionFilters.forEach(transmission => {
transmissionContainer.appendChild(transmission.initCheckbox());
});
}
@@ -181,28 +176,17 @@ function createExteriorList(vehicles) {
}, {});
filterManager.resetList('exterior_color');
exteriorFilters = Object.entries(exterior).map(([exterior_color, count]) =>
filterManager.createExteriorFilter(
{ text: exterior_color, count },
dataStore
)
);
exteriorFilters = Object.entries(exterior).map(([exterior_color, count]) => filterManager.createExteriorFilter({ text: exterior_color, count}, dataStore));
exteriorFilters.sort((a, b) => a.value.localeCompare(b.value));
exteriorFilters.forEach((exterior) => {
exteriorFilters.forEach(exterior => {
exteriorContainer.appendChild(exterior.initCheckbox());
});
}
function initModelContainer(make){
let list = [
...new Set(
filterManager.makeFilters
.filter((m) => m.checked == true)
.map((m) => m.models)
.flat()
),
];
let list = [...new Set(filterManager.makeFilters.filter(m=>m.checked == true).map(m=>m.models).flat())];
const modelContainer = document.querySelector('.model-container');
if (list.length === 0) {
@@ -210,7 +194,7 @@ function initModelContainer(make) {
} else if (list && list.length > 0) {
modelContainer.innerHTML = '';
list.sort((a, b) => a.value.localeCompare(b.value));
list.forEach((model) => {
list.forEach(model => {
modelContainer.appendChild(model.initCheckbox());
});
} else {
@@ -219,14 +203,7 @@ function initModelContainer(make) {
}
function initTrimContainer(model){
let list = [
...new Set(
filterManager.modelFilters
.filter((m) => m.checked == true)
.map((m) => m.trims)
.flat()
),
];
let list = [...new Set(filterManager.modelFilters.filter(m=>m.checked == true).map(m=>m.trims).flat())];
// const uniqueArray = [...new Set(array)];
const trimContainer = document.querySelector('.trim-container');
@@ -236,7 +213,7 @@ function initTrimContainer(model) {
} else if (list && list.length > 0) {
trimContainer.innerHTML = '';
list.sort((a, b) => a.value.localeCompare(b.value));
list.forEach((trim) => {
list.forEach(trim => {
trimContainer.appendChild(trim.initCheckbox());
});
} else {
@@ -246,8 +223,8 @@ function initTrimContainer(model) {
function fetchAvailableModels(vehicles, make) {
const filteredModels = vehicles
.filter((vehicle) => vehicle.make === make)
.map((vehicle) => vehicle.model);
.filter(vehicle => vehicle.make === make)
.map(vehicle => vehicle.model);
// Count occurrences of each model
const modelCounts = filteredModels.reduce((acc, model) => {
acc[model] = (acc[model] || 0) + 1;
@@ -255,21 +232,16 @@ function fetchAvailableModels(vehicles, make) {
}, {});
// Convert to an array of objects
const modelsArray = Object.entries(modelCounts).map(([model, count]) => ({
model,
count,
}));
modelsArray.map((m) => (m['trims'] = fetchAvailableTrim(vehicles, m.model)));
const modelsArray = Object.entries(modelCounts).map(([model, count]) => ({ model, count }));
modelsArray.map(m=>m['trims'] = fetchAvailableTrim(vehicles, m.model))
return modelsArray;
}
function fetchAvailableTrim(vehicles, modelName){
const filteredVehicles = vehicles.filter(
(vehicle) => vehicle.model === modelName
);
const filteredVehicles = vehicles.filter(vehicle => vehicle.model === modelName);
const trimCount = filteredVehicles.reduce((result, vehicle) => {
vehicle.trim.forEach((trim) => {
const existingTrim = result.find((item) => item.text === trim);
vehicle.trim.forEach(trim => {
const existingTrim = result.find(item => item.text === trim);
if (existingTrim) {
existingTrim.count += 1;
} else {
@@ -282,9 +254,11 @@ function fetchAvailableTrim(vehicles, modelName) {
}
function updateModel(models){
console.log('updateModel', models);
console.log('updateModel', models)
}
function debounce(func, delay) {
let timeout;
return function () {
@@ -300,9 +274,7 @@ function updatePrice() {
const max = price.getValue();
const formattedMin = '$' + min.toLocaleString();
const formattedMax = '$' + max.toLocaleString();
document.getElementById(
'priceRange'
).textContent = `${formattedMin} to ${formattedMax}`;
document.getElementById('priceRange').textContent = `${formattedMin} to ${formattedMax}`;
debouncedSendReq();
}
@@ -325,12 +297,7 @@ const debouncedSendReq = debounce(sendReq, 300);
function createSkeletonCard() {
const skeletonCard = document.createElement('div');
skeletonCard.classList.add(
'bg-red-200',
'rounded-lg',
'shadow-md',
'animate-pulse'
);
skeletonCard.classList.add('bg-red-200', 'rounded-lg', 'shadow-md', 'animate-pulse');
const innerHTML = `
<div class="h-40 bg-red-300 rounded-t-lg"></div>
@@ -348,15 +315,10 @@ function createSkeletonCard() {
return skeletonCard;
}
function createSkeletonListItem() {
const listItem = document.createElement('li');
listItem.classList.add(
'w-full',
'bg-custom-red',
'rounded-lg',
'shadow-md',
'animate-pulse'
);
listItem.classList.add('w-full', 'bg-custom-red', 'rounded-lg', 'shadow-md', 'animate-pulse');
const innerHTML = `
<div class="flex items-center justify-between p-1">

View File

@@ -34,6 +34,8 @@ $response = get_transient("autocart_response");
<!-- Main Content -->
<div class="flex-grow flex max-w-7xl mx-auto">
<!-- Left Drawer for Filters -->
<div id="overlay" class="fixed inset-0 bg-black opacity-50 z-50 hidden"></div>
<aside id="slide-out-filters" class="lg:w-1/4 md:w-1/4 w-10/12 lg:static md:static fixed p-4 shadow-lg bg-white lg:block md:block rounded overflow-y-auto transition duration-300 ease-in-out transform sm:transform-none sm:right-0 top-0 left-0 z-50 h-screen md:h-auto lg:h-auto">
<div class="mdc-select mdc-select--outlined col-xl-3 rounded pb-2 w-full" id="order-by">
<div class="mdc-select__anchor">
@@ -237,7 +239,7 @@ $response = get_transient("autocart_response");
<div class="flex items-center space-x-4">
<i id="grid-view" class="fas fa-th text-gray-500 cursor-pointer transition duration-300 transform hover:scale-110 hover:shadow-md ripple selected"></i>
<i id="list-view" class="fas fa-list text-gray-500 cursor-pointer transition duration-300 transform hover:scale-110 hover:shadow-md ripple"></i>
<label for="open-menu" tabindex="0" aria-haspopup="true" role="button" aria-controls="menu" class="fixed bottom-4 right-4 cursor-pointer m-0 md:hidden lg:hidden" id="openmenu">
<label for="open-menu" tabindex="0" aria-haspopup="true" role="button" aria-controls="menu" class="cursor-pointer m-0 md:hidden lg:hidden" id="openmenu">
<i id="filter-toggle" class="fas fa-sliders-h text-gray-500 cursor-pointer transition duration-300 transform hover:scale-110"></i>
</label>
<input type="checkbox" data-menu id="open-menu" class="peer hidden">
@@ -263,6 +265,8 @@ if ($make) {
const filtersDrawerCheckbox = document.getElementById('open-menu');
const filtersDrawer = document.querySelector('#slide-out-filters');
const filterToggle = document.querySelector('#filter-toggle');
const overlay = document.getElementById('overlay');
document.addEventListener('DOMContentLoaded', function () {
price = new mdc.slider.MDCSlider(document.querySelector('#autocart-price-range-field'));
@@ -294,23 +298,46 @@ document.addEventListener('DOMContentLoaded', function () {
// content.style.display = content.style.display === "none" ? "block" : "none";
});
});
// filtersDrawer.style.translate = "-100%";
const mobileMediaQuery = window.matchMedia('(max-width: 767px)');
const applyTranslation = () => {
if (mobileMediaQuery.matches) {
filtersDrawer.style.translate = '-100%';
} else {
filtersDrawerCheckbox.checked = false;
filtersDrawerCheckbox.dispatchEvent(new Event('change'));
filtersDrawer.style.translate = '0';
}
};
applyTranslation();
mobileMediaQuery.addListener(applyTranslation);
// window.addEventListener('resize', applyTranslation);
});
filtersDrawerCheckbox.addEventListener('change', function() {
if (this.checked) {
overlay.classList.remove('hidden');
filtersDrawer.style.translate = 0;
filterToggle.classList.add('selected')
filterToggle.classList.add('selected');
} else {
// filtersDrawer.classList.add('hidden'); // Close the drawer
overlay.classList.add('hidden');
filterToggle.classList.remove('selected')
filtersDrawer.style.translate = "-100%";
}
});
overlay.addEventListener('click', function() {
filtersDrawerCheckbox.checked = false;
filtersDrawerCheckbox.dispatchEvent(new Event('change'));
});
</script>

View File

@@ -193,7 +193,7 @@ $carMakes = [
<?php wp_nonce_field('autocart_nonce', 'autocart_nonce'); ?>
<div class="col-span-2">
<div class="lg:col-span-2">
<button type="submit" aria-label="Find Your Vehicle Search" class="w-full bg-red-500 hover:bg-red-800 transition-colors duration-300 text-white font-medium py-2 px-4 flex flex-row flex-wrap content-around justify-center items-center rounded" id="inventory-search-button">
<i class="bi-search mr-2"></i>
<span id="button-content" >Search </span>

View File

@@ -174,7 +174,7 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
?>
<div class="max-w-7xl mx-auto grid">
<div class="grid grid-cols-2 hidden lg:grid">
<div class="grid grid-cols-2 hidden md:grid">
<div class="relative group cursor-pointer">
<img src="<?php echo $vehicle_images[0]['url']; ?>" alt="<?php echo $image_title; ?>" class="w-full h-full object-cover">

View File

@@ -16,16 +16,48 @@
<!-- Car Loan Calculator Form -->
<section class="max-w-7xl mx-auto">
<div class="py-8 flex items-center justify-center">
<div class="px-4 py-8">
<div>
<p style="width: 260px"><a href="http://www.carpaymentcalcualtor.net"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/rogers-motors-logo.png" alt="Rogers Motors Full Logo" /></a></p>
<p style="width: 260px"><iframe src="https://www.carpaymentcalculator.net/free-tools/calc.php" frameborder="0" height="350px" scrolling="no"></iframe></p>
<p>
<font size="1">Powered by <a href="https://www.carpaymentcalculator.net/free-tools/">Free Auto Calculator</a></font>
</p>
<p style="width: 300px"><a href="http://www.carpaymentcalcualtor.net"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/rogers-motors-logo.png" alt="Rogers Motors Full Logo" /></a></p>
<div id="appointment-body"></div>
</div>
</div>
<style>
button#next-step,
[data-tab] {
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const appointmentForm = new AppointmentForm();
if (appointmentForm) {
const financeForm = new FinanceForm({}, appointmentForm, () => {});
const appointmentBody = document.querySelector('#appointment-body');
let userForm = financeForm.initForm();
const elementsToRemove = userForm.querySelectorAll('.finance-view-only');
elementsToRemove.forEach(element => {
element.remove();
});
appointmentBody.appendChild(userForm);
financeForm.updateView();
const advertisePriceInput = document.getElementById('advertise_price');
advertisePriceInput.value = 2500;
advertisePriceInput.dispatchEvent(new Event('input', {
bubbles: true
}));
}
});
</script>
</section>

View File

@@ -1273,10 +1273,6 @@ select {
bottom: 100%;
}
.left-0 {
left: 0px;
}
.left-2 {
left: 0.5rem;
}
@@ -2050,6 +2046,11 @@ html {
background-color: rgb(89 10 12 / var(--tw-bg-opacity));
}
.hover\:bg-stone-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(214 211 209 / var(--tw-bg-opacity));
}
.hover\:bg-stone-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(120 113 108 / var(--tw-bg-opacity));
@@ -2060,21 +2061,6 @@ html {
background-color: rgb(87 83 78 / var(--tw-bg-opacity));
}
.hover\:bg-stone-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(245 245 244 / var(--tw-bg-opacity));
}
.hover\:bg-stone-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(231 229 228 / var(--tw-bg-opacity));
}
.hover\:bg-stone-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(214 211 209 / var(--tw-bg-opacity));
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));