home.templ

package website

import "strings"

templ home(featuredPosts []*Post, tags map[string][]*Post) {
	<section class="container mx-auto">
		<h1 class="v-h1 mt-12">
			Your trusted crew for all things Platform Engineering.
		</h1>
		<h3 class="v-h3 mt-8 max-w-3xl">
			Helping you improve value stream efficiency through user-centric internal developer platforms.
		</h3>
		<div class="mt-8">
			@linkButton("Chat with an expert", "/contact/")
		</div>
	</section>
	<div class="bg-v-gray/20">
		<section class="container mx-auto">
			@headerLine()
			<p class="v-h4">What we do.</p>
			<p class="pt-6 v-h2 text-v-black">
				We help research, design, build and evolve internal developer platforms to improve value stream efficiency.
				User-centricity is at the core of our work, ensuring we build based on research and not assumptions.
			</p>
		</section>
		<section class="container mx-auto">
			@headerLine()
			<p class="v-h4">Trusted by.</p>
			<div class="mt-8">
				@clientLogos()
			</div>
		</section>
		<section class="container mx-auto">
			@headerLine()
			<p class="v-h4">Who we are.</p>
			<p class="pt-6 v-h2 text-v-black">
				We are an experienced crew of technical consultants who dare to challenge the status quo.
				When you work with one of us you get the support, knowledge and insights of the entire crew.
			</p>
		</section>
		<section class="container mx-auto">
			@headerLine()
			<p class="v-h4">Our Crew.</p>
			@crewCarousel(randomCrewOrder())
			<div class="mt-8 lg:mt-12">
				@linkButtonSmall("Entire crew", "/crew/")
			</div>
		</section>
	</div>
	<section class="">
		<div class="container mx-auto">
			@columns(true) {
				@column("") {
					<p class="v-h4 text-v-pink">Technologies.</p>
					<p class="v-h2 text-v-black">
						We work with technology that helps us deliver for our clients.
					</p>
				}
				@column("") {
					@technologyLogos()
				}
			}
		</div>
	</section>
	<section>
		<div class="container mx-auto">
			<p class="v-h4">Learn more on our blog.</p>
			<p class="v-h2">Search by popular keyword</p>
			<div class="mb-5 md:mb-8 lg:mb-12"></div>
			<div class="flex flex-col gap-y-4 mb-8">
				<div class="flex flex-wrap gap-x-4">
					for _, tag := range sortTags(tags) {
						<a href={ templ.URL("/blog/?tags=" + tag) } class="inline-block">
							<div class="inline-flex items-center my-2 px-3 py-0.5 bg-v-gray hover:bg-v-pink">
								<p class="text-v-white"><span>#</span>{ tag }</p>
							</div>
						</a>
					}
				</div>
				<div class="my-5">
					@linkButton("See all posts", "/blog/")
				</div>
				@PostsGrid(featuredPosts, PostsGridOptions{})
			</div>
		</div>
	</section>
}

templ crewCarousel(members []string) {
	<style>
	/*
		The below CSS is pretty much a copy paste from the htmx documentation.
		Source: https://htmx.org/essays/view-transitions/
	*/
	@keyframes fade-in {
		from {
			opacity: 0;
		}
	}

	@keyframes fade-out {
		to {
			opacity: 0;
		}
	}

	@keyframes slide-from-right {
		from {
			transform: translateX(90px);
		}
	}

	@keyframes slide-to-left {
		to {
			transform: translateX(-90px);
		}
	}

	/* define animations for the old and new content */
	::view-transition-old(slide-it) {
		animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
			600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
	}

	::view-transition-new(slide-it) {
		animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
			600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
	}

	/* tie the view transition to a given CSS class */
	.crew-carousel-transition {
		view-transition-name: slide-it;
	}
	</style>
	@crewCarouselMembers(members)
}

templ crewCarouselMembers(members []string) {
	<div
		class="mt-8 crew-carousel-transition"
		hx-get={ "/crew/?members=" + strings.Join(members, ",") }
		hx-trigger="every 8s"
		hx-swap="outerHTML transition:true"
	>
		if len(members) == 0 {
			@crewCarouselMember(randomMember())
		} else {
			@crewCarouselMember(Crew[members[0]])
		}
	</div>
}

templ crewCarouselMember(member Member) {
	<style>
		/* Progress bar animation */
		@keyframes scaleProgress {
			from {
				transform: scaleX(0);
			}
			to {
				transform: scaleX(1);
			}
		}
		.progress {
			transform-origin: 0 0;
			animation: scaleProgress 8s linear;
		}
	</style>
	<h2 class="v-h2 mb-6 md:hidden">Meet { member.Nickname }!</h2>
	<div class="grid gap-y-4 gap-x-4 lg:gap-x-12 grid-cols-[40%_60%] sm:grid-cols-[30%_70%] md:grid-cols-[25%_75%] lg:grid-cols-[20%_60%] items-center">
		<a
			href={ templ.URL("/crew/" + member.ID + "/") }
			class=""
		>
			<img
				src={ member.SillyProfileOrProfileOrAvatar() }
				alt={ member.Name }
				class="w-full h-full aspect-square object-contain grayscale hover:grayscale-0"
			/>
			<div class="progress mt-2 w-full h-1 bg-v-pink"></div>
		</a>
		<div>
			<h2 class="v-h2 hidden mb-4 lg:mb-8 md:block">Meet { member.Nickname }!</h2>
			<p class="line-clamp-4 md:line-clamp-3">
				{ member.Bio }
			</p>
			<div class="mt-2">
				<a href={ templ.URL(member.RelativeURL()) } class="v-p font-semibold hover:text-v-lilac">Continue reading »</a>
			</div>
		</div>
	</div>
}

templ fancyLinkPink(text string, href string) {
	<a href={ templ.URL(href) } class="text-v-pink hover:bg-gradient-to-t from-v-pink to-v-pink hover:bg-bottom hover:bg-[length:100%_10%] hover:bg-no-repeat">{ text }</a>
}

templ fancyLinkLilac(text string, href string) {
	<a href={ templ.URL(href) } class="text-v-lilac hover:bg-gradient-to-t from-v-lilac to-v-lilac hover:bg-bottom hover:bg-[length:100%_10%] hover:bg-no-repeat">{ text }</a>
}

templ homeService(id string, title string) {
	<div class="pt-6">
		<dt>
			<button
				type="button"
				class="flex w-full items-center justify-between text-left"
				aria-controls={ "service-" + id }
				aria-expanded="false"
				_={ "on click toggle .hidden on .service-" + id }
			>
				<p class="v-h2">{ title }</p>
				<div class="ml-6 flex h-7 items-center">
					@iconPlus("h-10 w-10 service-" + id)
					@iconMinus("hidden h-10 w-10 service-" + id)
				</div>
			</button>
		</dt>
		<dd class={ "hidden mt-4 pr-12 service-" + id } id={ "service-" + id }>
			{ children... }
		</dd>
	</div>
}

templ iconPlus(className string) {
	<svg class={ className } fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
		<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6"></path>
	</svg>
}

templ iconMinus(className string) {
	<svg class={ className } fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
		<path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"></path>
	</svg>
}

type client struct {
	name  string
	image string
	white string
}

var clients = []client{
	{
		name:  "abb",
		image: "/static/clients/abb.svg",
		white: "/static/clients/abb-white.svg",
	},
	{
		name:  "siemens",
		image: "/static/clients/siemens.svg",
		white: "/static/clients/siemens-white.svg",
	},
	{
		name:  "jabra",
		image: "/static/clients/jabra.svg",
		white: "/static/clients/jabra-white.svg",
	},
	{
		name:  "visma",
		image: "/static/clients/visma.svg",
		white: "/static/clients/visma-white.svg",
	},
	{
		name:  "wirepas",
		image: "/static/clients/wirepas.svg",
		white: "/static/clients/wirepas-white.svg",
	},
	{
		name:  "digious",
		image: "/static/clients/digious.svg",
		white: "/static/clients/digious-white.svg",
	},
	{
		name:  "vyaire",
		image: "/static/clients/vyaire.png",
		white: "/static/clients/vyaire-white.png",
	},
	{
		name:  "xmldation",
		image: "/static/clients/xmldation.svg",
		white: "/static/clients/xmldation-white.svg",
	},
	{
		name:  "qa-systems",
		image: "/static/clients/qa-systems.png",
		white: "/static/clients/qa-systems-white.png",
	},
	{
		name:  "kommuninvest",
		image: "/static/clients/kommuninvest.png",
		white: "/static/clients/kommuninvest-white.png",
	},
}

templ clientLogos() {
	<div class="grid grid-cols-2 gap-0.5 md:grid-cols-6 lg:grid-cols-5">
		for _, client := range clients {
			<div class="col-span-1 flex justify-center md:col-span-2 lg:col-span-1 py-8 px-8  bg-v-lilac">
				<img src={ client.white } alt={ client.name } class="h-8 w-full object-contain"/>
			</div>
		}
	</div>
}

type technology struct {
	name  string
	image string
	white string
}

var technologies = []technology{
	{
		name:  "aws",
		image: "/static/clouds/aws.svg",
		white: "/static/clouds/aws-white.svg",
	},
	{
		name:  "google-cloud",
		image: "/static/clouds/google-cloud.svg",
		white: "/static/clouds/google-cloud-white.svg",
	},
	{
		name:  "azure",
		image: "/static/clouds/azure.svg",
		white: "/static/clouds/azure-white.svg",
	},
	{
		name:  "kubernetes",
		image: "/static/clouds/kubernetes-horizontal.svg",
		white: "/static/clouds/kubernetes-horizontal-white.svg",
	},
	{
		name:  "hashicorp",
		image: "/static/partners/hashicorp-horizontal.svg",
		white: "/static/partners/hashicorp-horizontal-white.svg",
	},
	{
		name:  "upcloud",
		image: "/static/clouds/upcloud.svg",
		white: "/static/clouds/upcloud-white.svg",
	},
}

templ technologyLogos() {
	<div class="grid grid-cols-6 gap-0.5 md:grid-cols-6 lg:grid-cols-6">
		for _, tech := range technologies {
			<div class="col-span-3 flex justify-center md:col-span-3 lg:col-span-3 py-8 px-8 bg-v-lilac">
				<img src={ tech.white } alt={ tech.name } class="h-12 w-full object-contain"/>
			</div>
		}
	</div>
}