Fancy Hero Horizontal Accordion, no JS and no anchor tags

demo.svelte

<script lang="ts">
	let sections = [
		{
			title: 'WEBSITES',
			content: 'Content for section 1',
			color: 'bg-[#85aa74]'
		},
		{
			title: 'WEB HOSTING',
			color: 'bg-[#fee6a6]',
			content: 'Content for section 2'
		},
		{
			title: 'TELEPHONE',
			color: 'bg-[#81bac5]',
			content: 'Content for section 3'
		},
		{
			title: 'SOFTWARE',
			color: 'bg-[#eb6c29]',
			content: 'Content for section 4'
		}
	];
</script>

<div class="relative flex h-[80vh] items-center px-10 mt-4">
	<div class="absolute left-10 w-1/2 text-black dark:text-white">
		<div class="w-[650px]">
			<div class="space-y-6">
				<h1 class="font-mono text-4xl">Premium Web & Internet Solutions</h1>
				<p class="font-mono text-xl opacity-80">
					We've got the basics stuff for any small business or indie developer.
				</p>
			</div>
			<div class="mt-10 flex w-3/4 items-center justify-start space-x-10 font-light">
				<button class="rounded-xl bg-[#fee6a6] px-10 py-4 text-2xl text-[#092f42] hover:opacity-90"
					>Get Stared</button
				>
				<a class="cursor-pointer text-2xl hover:underline" href="/"> Find out more </a>
			</div>
		</div>
	</div>
	<div
		class="group/accord absolute left-[98%] flex h-[80vh] w-1/2 -translate-x-full gap-2 overflow-hidden hover:w-[96.5vw]"
	>
		{#each sections as section, index}
			<!-- Section 1 -->
			<div
				class="group/section relative flex h-full w-1/4 items-end rounded-lg border border-white {section.color} bg-cover bg-center text-[#092f42] transition-[width] duration-300 ease-in-out hover:!w-[100%] group-hover/accord:w-[13.33%]"
			>
				<button
					class="absolute inset-0 flex h-full w-full cursor-pointer flex-col items-start justify-start gap-4 bg-cover bg-center text-[#092f42] group-hover/section:hidden"
				>
					<span
						class="absolute bottom-[5rem] left-1/2 block origin-left -rotate-90 whitespace-nowrap text-3xl uppercase transition-all duration-300"
						>{section.title}</span
					>
					<div class="absolute bottom-8 left-1/2 -translate-x-1/2">
						<span class="text-3xl font-black text-[#092f42]">X</span>
					</div>
				</button>
				<div
					class="absolute inset-0 z-10 box-border hidden items-center justify-center bg-cover bg-center group-hover/section:flex"
				>
					{section.content}
				</div>
			</div>
		{/each}
	</div>
</div>

here is a full responsive version:

<script lang="ts">
	let sections = [
		{
			title: 'WEBSITES',
			content: 'Content for section 1',
			color: 'bg-[#85aa74]'
		},
		{
			title: 'WEB HOSTING',
			color: 'bg-[#fee6a6]',
			content: 'Content for section 2'
		},
		{
			title: 'TELEPHONE',
			color: 'bg-[#81bac5]',
			content: 'Content for section 3'
		},
		{
			title: 'SOFTWARE',
			color: 'bg-[#eb6c29]',
			content: 'Content for section 4'
		}
	];
</script>

<div
	class="relative mt-4 flex h-[90vh] flex-col flex-wrap items-center justify-center overflow-hidden px-4 md:px-10 lg:h-[80vh] lg:flex-row"
>
	<div
		class="relative mb-12 w-full text-black dark:text-white lg:absolute lg:left-10 lg:mb-0 lg:w-1/2"
	>
		<div
			class="mx-auto flex w-full flex-col justify-center px-2 md:px-4 lg:mx-0 lg:w-[550px] lg:px-0 xl:w-[650px]"
		>
			<div class="mx-auto w-full space-y-6 lg:w-fit">
				<h1 class="text-center font-mono text-3xl md:text-4xl lg:text-left">
					Premium Web & Internet Solutions
				</h1>
				<p class="text-center font-mono text-xl opacity-80 lg:text-left">
					We've got the basics stuff for any small business or indie developer.
				</p>
			</div>
			<div
				class="mt-10 flex w-full items-center justify-center space-x-10 font-light lg:w-3/4 lg:justify-start"
			>
				<button class="rounded-xl bg-[#fee6a6] px-10 py-4 text-2xl text-[#092f42] hover:opacity-90">
					Get Started
				</button>
				<a class="cursor-pointer text-2xl hover:underline" href="/"> Find out more </a>
			</div>
		</div>
	</div>
	<div
		class="group/accord relative flex w-full flex-grow flex-col gap-2 overflow-hidden lg:absolute lg:left-[98%] lg:h-[80vh] lg:w-1/2 lg:-translate-x-full lg:flex-row lg:hover:w-[96.5vw]"
	>
		{#each sections as section, index}
			<!-- Section 1 -->
			<div
				class="group/section relative flex h-1/4 w-full items-end rounded-lg border border-white hover:!h-[100%] lg:h-full lg:w-1/4 {section.color} bg-cover bg-center text-[#092f42] transition-[height] duration-300 ease-in-out lg:transition-[width] lg:hover:!w-[100%] lg:group-hover/accord:w-[13.33%]"
			>
				<button
					class="absolute inset-0 flex h-full w-full cursor-pointer items-center lg:flex-col lg:items-start lg:justify-start {index %
						2 ===
					0
						? 'justify-end px-12'
						: 'justify-start px-12'} gap-4 bg-cover bg-center text-[#092f42] group-hover/section:hidden"
				>
					<span
						class="block whitespace-nowrap text-3xl {index % 2 === 0
							? 'order-1'
							: 'order-2'} uppercase transition-all duration-300 lg:absolute lg:bottom-[5rem] lg:left-1/2 lg:origin-left lg:-rotate-90"
						>{section.title}</span
					>
					<div
						class="lg:absolute lg:bottom-8 lg:left-1/2 lg:-translate-x-1/2 {index % 2 === 0
							? 'order-2'
							: 'order-1'}"
					>
						<span class="text-3xl font-black text-[#092f42]">X</span>
					</div>
				</button>
				<div
					class="absolute inset-0 z-10 box-border hidden items-center justify-center bg-cover bg-center group-hover/section:flex"
				>
					{section.content}
				</div>
			</div>
		{/each}
	</div>
</div>