Hi, I've been attempting to add a variation of a contact form. The first variation is for contacting the company to inquire about a service or ask questions related to the company. The second variation is the support form, intended for when a client or user requires assistance with an issue. However, it appears that whenever I use my support slice, a bug occurs, resulting in the duplication of this slice on the page. I've tried removing and re-adding it, as well as unpublishing and republishing, and explored various options, but I continue to encounter the issue of double slices.
import { enhance } from '$app/forms';
import ParralaxFx from '$lib/components/layout/ParralaxFx.svelte';
import RegularText from '$lib/components/typo/RegularText.svelte';
import SectionTitle from '$lib/components/typo/SectionTitle.svelte';
import { PrismicRichText } from '@prismicio/svelte';
/** @type {import("@prismicio/client").Content.ContactSlice} */
export let slice;
</script>
<section
data-slice-variation={slice.variation}
id="contact"
class="grid grid-rows-3 md:grid-rows-none h-[650px] md:grid-cols-2 md:h-[450px] xl:h-[500px] text-center md:text-left"
>
<div
class="w-full overflow-hidden row-span-1 md:row-span-1 bg-brand-third order-last md:order-first shadow-inner"
>
{#if slice.primary?.image?.url}
<ParralaxFx imageUrl={slice.primary.image.url} className="h-[650px]" />
{/if}
</div>
<div
class="bg-white row-span-2 md:row-span-1 order-first md:order-last w-full px-4 flex justify-around items-center"
>
<div class="flex flex-col gap-4 w-full px-4 md:px-0 md:w-[425px]">
{#if slice.primary?.title}
<SectionTitle>
{slice.primary.title}
</SectionTitle>
{/if}
{#if slice.primary?.description}
<RegularText>
<PrismicRichText field={slice.primary.description} />
</RegularText>
{/if}
<form method="post" action="#contact" use:enhance class="flex flex-col gap-2">
{#if slice.variation === 'supportForm' && slice.primary}
<select>
<option value="support">Support</option>
<option value="sales">Sales</option>
<option value="other">Other</option>
</select>
{/if}
<input
type="text"
placeholder={slice.primary?.name_input_label}
class="w-full h-[40px] p-2 border border-gray-300 rounded-md focus:outline-2 focus:outline-brand-fourth"
/>
<input
type="email"
placeholder={slice.primary?.mail_input_label}
class="w-full h-[40px] p-2 border border-gray-300 rounded-md focus:outline-2 focus:outline-brand-fourth"
/>
<textarea
placeholder={slice.primary?.message_input_label}
class="w-full h-[110px] p-2 border border-gray-300 rounded-md resize-none focus:outline-3 focus:outline-brand-fourth"
></textarea>
<input
type="submit"
value={slice.primary?.submit_label}
class="w-fit tracking-wider cursor-pointer bg-brand-fourth text-brand-first rounded-md hover:bg-brand-first hover:text-white transition-colors duration-500 px-4 py-3 shadow-md font-bold z-40 mx-auto md:mx-0"
/>
</form>
</div>
</div>
</section>
