@kobalte/solidbase/src/default-theme/components/Hero.module.css

Fully featured, fully customisable static site generation for SolidStart

.hero {
	display: flex;
	align-items: stretch;

	&:has(.image) {
		& > div:first-child {
			align-items: stretch;
		}
	}

	& > div:first-child {
		flex-grow: 1;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		margin: 2rem 0;

		h1 {
			font-size: 4rem;
			background: var(--sb-hero-name-background);
			background-clip: text;
			color: transparent;
			width: max-content;
			line-height: 1;
		}

		& > p {
			font-size: 3rem;
			font-weight: 700;
			color: var(--sb-text-color);
			line-height: 1;

			&.tagline {
				font-size: 2rem;
				font-weight: 500;
			}
		}

		& .actions {
			display: flex;
			gap: 1.25rem;
			margin: 1rem 0;

			.action {
				padding: 0.5rem 0.75rem;
				background: var(--sb-active-link-color);
				color: var(--sb-text-color);
				border-radius: var(--sb-border-radius);
				text-decoration: none;
				transition-property: background-color, opacity, color;
				transition-timing-function: var(--sb-transition-timing);
				transition-duration: 0.15s;

				&:hover,
				&:focus {
					background: color-mix(
						in hsl,
						var(--sb-active-link-color) 90%,
						var(--sb-tint-color)
					);
				}

				&:global(.alt) {
					background: color-mix(in hsl, var(--sb-text-color) 10%, transparent);

					&:hover,
					&:focus {
						background: color-mix(in hsl, var(--sb-text-color) 20%, transparent);
					}
				}

				&:global(.brand) {
					color: white;
				}
			}
		}
	}

	.image {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-top: -1rem;

		img {
			height: 25rem;
			position: relative;
			z-index: 2;
			object-fit: contain;
		}

		.image-bg {
			position: absolute;
			inset: 0;
			border-radius: 50%;
			margin: 20%;
			background-image: var(--sb-hero-background);
			filter: var(--sb-hero-filter);
		}
	}
}

article:has(.hero) > div {
	max-width: min(calc(100dvw - 2.5rem), 72rem) !important;
}

@media screen and (max-width: 1000px) {
	.hero {
		flex-direction: column-reverse;
	}
}