a lot more modularity, only logo clouds left
This commit is contained in:
Aleksa Siriški
parent
00cd5d5574
commit
5ad6969c6a
21
hugo.yaml
21
hugo.yaml
|
|
@ -22,14 +22,35 @@ params:
|
|||
|
||||
p1:
|
||||
heading: "Our mission"
|
||||
image: "images/pages/our-mission.png"
|
||||
content:
|
||||
- text: "Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi. Cursus faucibus nunc nisl netus morbi vel porttitor vitae ut. Amet vitae fames senectus vitae."
|
||||
- text: "Sollicitudin tristique eros erat odio sed vitae, consequat turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna. Sollicitudin tristique eroserat odio sed vitae, consequat turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna."
|
||||
- text: "Rhoncus nisl, libero egestas diam fermentum dui. At quis tincidunt vel ultricies. Vulputate aliquet velit faucibus semper. Pellentesque in venenatis vestibulum consectetur nibh id. In id ut tempus egestas. Enim sit aliquam nec, a. Morbi enim fermentum lacus in. Viverra."
|
||||
p2:
|
||||
heading: "Just in time for Hacktoberfest with JIT Tailwind."
|
||||
image: "images/pages/hacktoberfest.jpg"
|
||||
content:
|
||||
- text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at purus non enim commodo tincidunt vel in nulla. Aenean pretium dolor non ultricies bibendum. Etiam quis blandit enim. Nunc condimentum ut lorem in faucibus. Phasellus varius ligula et commodo tristique. Nunc sodales nisl nec laoreet vehicula. Donec velit nibh, sollicitudin at nulla a, egestas dignissim eros. Sed lacinia hendrerit interdum. Vestibulum pellentesque sem venenatis nisl tempor accumsan sit amet tempus felis. Mauris leo diam, porttitor nec bibendum id, tempus ac nulla. Etiam congue ornare erat at convallis. Donec in nisi dapibus, mattis risus vel, imperdiet enim. Donec fermentum sit amet tortor nec tincidunt. Nam nec lectus tortor. Nunc sit amet laoreet orci, porta ornare massa. Phasellus eget lorem mi. Nam eleifend ultricies sapien, quis mollis leo bibendum at. Quisque viverra lorem sit amet magna aliquet, et dignissim arcu eleifend."
|
||||
p3:
|
||||
heading: "Backed by world-renowned investors"
|
||||
content:
|
||||
- text: "cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi. Cursus faucibus nunc nisl netus morbi vel porttitor vitae ut. Amet vitae fames senectus vitae."
|
||||
links:
|
||||
- text: Meet our investors and advisors
|
||||
url: "#"
|
||||
p4:
|
||||
heading: "From the blog"
|
||||
content:
|
||||
- text: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa libero labore natus atque, ducimus sed."
|
||||
p5:
|
||||
heading: "Stay Up to Date"
|
||||
content:
|
||||
- text: "Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque."
|
||||
action: "#"
|
||||
label: "Email address"
|
||||
placeholder: "Enter your email"
|
||||
button: "Notify me"
|
||||
|
||||
social_media:
|
||||
github:
|
||||
|
|
|
|||
|
|
@ -31,14 +31,11 @@
|
|||
|
||||
<!-- More main page content here... -->
|
||||
|
||||
<!-- Testimonial/stats section -->
|
||||
<!-- Our mission section -->
|
||||
<div class="relative my-4">
|
||||
<div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:items-start lg:gap-24 lg:px-8">
|
||||
<div class="relative sm:py-8 lg:py-0">
|
||||
<div aria-hidden="true" class="hidden sm:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-screen">
|
||||
<div
|
||||
class="absolute inset-y-0 w-full bg-gray-50 dark:bg-gray-900/10 right-1/2 rounded-r-3xl lg:right-72">
|
||||
</div>
|
||||
<svg class="absolute -ml-3 top-8 left-1/2 lg:-right-8 lg:left-auto lg:top-12" width="404"
|
||||
height="392" fill="none" viewBox="0 0 404 392" loading="lazy">
|
||||
<defs>
|
||||
|
|
@ -52,44 +49,15 @@
|
|||
</svg>
|
||||
</div>
|
||||
<div class="relative max-w-md px-4 py-6 mx-auto sm:max-w-3xl sm:px-6 lg:max-w-none lg:px-0 lg:py-20">
|
||||
<!-- Testimonial card-->
|
||||
<div class="relative pt-64 pb-10 overflow-hidden shadow-xl rounded-2xl">
|
||||
{{ $missionimage := resources.Get "images/pages/our-mission.png" }}
|
||||
{{ with $missionimage }}
|
||||
{{ with .Resize (printf "%dx%d webp q50" .Width .Height) }}
|
||||
{{ $p1image := resources.Get .Site.Params.P1.Image }}
|
||||
{{ with $p1image }}
|
||||
{{ with .Resize (printf "%dx%d webp q80" .Width .Height) }}
|
||||
<img imgh src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}"
|
||||
class="absolute inset-0 object-cover w-full h-full" alt="TailBliss - Our Mission"
|
||||
class="absolute inset-0 object-cover w-full h-full" alt="P1"
|
||||
loading="lazy" />
|
||||
{{ end }}>
|
||||
{{ end }}
|
||||
<div class="absolute inset-0 bg-primary-300 mix-blend-multiply"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-primary-600 opacity-80">
|
||||
</div>
|
||||
<div class="relative px-8">
|
||||
<div>
|
||||
<img class="h-12" src="images/tailbliss-white.svg" alt="Workcation">
|
||||
</div>
|
||||
<blockquote class="mt-8">
|
||||
<div class="relative text-lg font-medium text-white md:flex-grow">
|
||||
<svg class="absolute top-0 left-0 w-8 h-8 transform -translate-x-3 -translate-y-2 text-primary-400/30"
|
||||
fill="currentColor" viewBox="0 0 32 32" aria-hidden="true">
|
||||
<path
|
||||
d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
|
||||
</svg>
|
||||
<p class="relative">Tincidunt integer commodo, cursus etiam
|
||||
aliquam neque, et. Consectetur pretium in volutpat, diam.
|
||||
Montes, magna cursus nulla feugiat dignissim id lobortis
|
||||
amet.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<footer class="mt-4">
|
||||
<p class="text-base font-semibold text-gray-200">
|
||||
John Doe, CEO at TailBliss
|
||||
</p>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,7 +65,7 @@
|
|||
<div class="relative max-w-md px-4 mx-auto sm:max-w-3xl sm:px-6 lg:px-0">
|
||||
<!-- Content area -->
|
||||
<div class="md:pt-12 sm:pt-6 lg:pt-20">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 capitalize dark:text-gray-50 sm:text-4xl">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
|
||||
{{ .Site.Params.P1.Heading }}
|
||||
</h2>
|
||||
<div class="mt-6 space-y-6 text-gray-900 dark:text-white">
|
||||
|
|
@ -113,14 +81,15 @@
|
|||
</div>
|
||||
|
||||
<!-- Hero section -->
|
||||
<div class="overflow-hidden sm:pt-6 lg:relative">
|
||||
<div class="max-w-md px-4 mx-auto sm:max-w-3xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-2 lg:gap-12 lg:px-8">
|
||||
<div>
|
||||
<div class="md:mt-8">
|
||||
<div class="mt-6 sm:max-w-xl">
|
||||
<h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">
|
||||
<div class="relative my-4">
|
||||
<div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-cols-2 lg:items-start lg:gap-24 lg:px-8">
|
||||
<div class="relative max-w-md px-4 mx-auto sm:max-w-3xl sm:px-6 lg:px-0">
|
||||
<!-- Content area -->
|
||||
<div class="md:pt-12 sm:pt-6 lg:pt-20">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
|
||||
{{ .Site.Params.P2.Heading }}
|
||||
</h1>
|
||||
</h2>
|
||||
<div class="mt-6 space-y-6 text-gray-900 dark:text-white">
|
||||
{{ range .Site.Params.P2.Content }}
|
||||
<p class="pb-6 mt-6 text-lg text-gray-900 dark:text-white">
|
||||
{{ .text }}
|
||||
|
|
@ -129,41 +98,32 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:mx-auto sm:max-w-3xl sm:px-6">
|
||||
<div class="md:py-12 sm:relative sm:mt-12 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
|
||||
<div class="hidden sm:block">
|
||||
<div
|
||||
class="absolute inset-y-0 w-screen left-1/2 rounded-l-3xl bg-gray-50 dark:bg-gray-900/10 lg:left-80 lg:right-0 lg:w-full">
|
||||
</div>
|
||||
<svg class="absolute -mr-3 top-8 right-1/2 lg:left-0 lg:m-0" width="404" height="392" fill="none"
|
||||
viewBox="0 0 404 392" loading="lazy">
|
||||
<div class="relative sm:py-8 lg:py-0">
|
||||
<div aria-hidden="true" class="hidden sm:block lg:absolute lg:inset-y-0 lg:left-0 lg:w-screen">
|
||||
<svg class="absolute -mr-3 top-8 right-1/2 lg:left-0 lg:right-auto lg:top-12" width="404"
|
||||
height="392" fill="none" viewBox="0 0 404 392" loading="lazy">
|
||||
<defs>
|
||||
<pattern id="837c3e70-6c3a-44e6-8854-cc48c737b659" x="0" y="0" width="20" height="20"
|
||||
<pattern id="02f20b47-fd69-4224-a62a-4c9de5c763f7" x="0" y="0" width="20" height="20"
|
||||
patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200 dark:text-gray-900/60"
|
||||
fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="392" fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)" />
|
||||
<rect width="404" height="392" fill="url(#02f20b47-fd69-4224-a62a-4c9de5c763f7)" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="relative pl-4 -mr-40 sm:mx-auto sm:max-w-3xl sm:px-0 lg:h-full lg:max-w-none lg:pl-12">
|
||||
{{ $heroOne := resources.GetMatch "images/pages/hacktoberfest.jpg" }}
|
||||
|
||||
{{ $tiny := ($heroOne.Fit "480x280 q80") }}
|
||||
{{ $small := ($heroOne.Fit "768x280 q80") }}
|
||||
{{ $medium := ($heroOne.Fit "1024x280 q80") }}
|
||||
{{ $large := ($heroOne.Fit "1374x1000 q80") }}
|
||||
|
||||
<img srcset="
|
||||
{{- with $tiny.RelPermalink -}}{{.}} 480w{{- end -}}
|
||||
{{- with $small.RelPermalink -}}, {{.}} 768w{{- end -}}
|
||||
{{- with $medium.RelPermalink -}}, {{.}} 1024w{{- end -}}
|
||||
{{- with $large.RelPermalink -}}, {{.}} 1374w{{- end -}}" src="{{ $heroOne.RelPermalink }}"
|
||||
alt="TailBliss Hacktoberfest Image"
|
||||
class="w-full rounded-lg shadow-xl lg:h-full lg:w-auto lg:max-w-none" loading="lazy" />
|
||||
<div class="relative max-w-md px-4 py-6 mx-auto sm:max-w-3xl sm:px-6 lg:max-w-none lg:px-20 lg:py-20">
|
||||
<div class="relative pt-64 pb-10 overflow-hidden shadow-xl rounded-2xl">
|
||||
{{ $p2image := resources.Get .Site.Params.P2.Image }}
|
||||
{{ with $p2image }}
|
||||
{{ with .Resize (printf "%dx%d webp q80" .Width .Height) }}
|
||||
<img imgh src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}"
|
||||
class="absolute inset-0 object-cover w-full h-full" alt="P2"
|
||||
loading="lazy" />
|
||||
{{ end }}>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -414,19 +374,20 @@
|
|||
</div>
|
||||
<div>
|
||||
<h2 class="pt-6 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
|
||||
Backed by world-renowned investors
|
||||
{{ .Site.Params.P3.Heading }}
|
||||
</h2>
|
||||
{{ range .Site.Params.P3.Content }}
|
||||
<p class="max-w-3xl mt-6 text-lg leading-7 text-gray-900 dark:text-white">Sagittis scelerisque nulla
|
||||
cursus in enim
|
||||
consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed
|
||||
aenean erat arcu morbi. Cursus faucibus nunc nisl netus morbi vel porttitor vitae ut. Amet vitae
|
||||
fames senectus vitae.
|
||||
{{ .text }}
|
||||
</p>
|
||||
{{ end }}
|
||||
{{ range .Site.Params.P3.Links }}
|
||||
<div class="my-6">
|
||||
<a href="#" class="text-base font-medium text-primary-400 dark:text-primary-100">
|
||||
Meet our investors and advisors →
|
||||
<a href="{{ .url }}" class="text-base font-medium text-primary-400 dark:text-primary-100">
|
||||
{{ .text }} →
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -438,12 +399,14 @@
|
|||
<div class="relative px-2 mx-auto max-w-7xl">
|
||||
<div class="text-center">
|
||||
<h2
|
||||
class="text-3xl font-black tracking-tight text-primary-500 capitalize dark:text-primary-300 sm:text-4xl">
|
||||
From the blog
|
||||
class="text-3xl font-black tracking-tight text-primary-500 dark:text-primary-300 sm:text-4xl">
|
||||
{{ .Site.Params.P4.Heading }}
|
||||
</h2>
|
||||
<p class="max-w-2xl mx-auto mt-3 text-xl text-gray-500 dark:text-gray-300 sm:mt-4">Lorem ipsum dolor
|
||||
sit amet consectetur,
|
||||
adipisicing elit. Ipsa libero labore natus atque, ducimus sed.</p>
|
||||
{{ range .Site.Params.P4.Content }}
|
||||
<p class="max-w-2xl mx-auto mt-3 text-xl text-gray-500 dark:text-gray-300 sm:mt-4">
|
||||
{{ .text }}
|
||||
</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="mx-auto text-gray-900 max-w-7xl dark:text-gray-50 md:px-1.5">
|
||||
|
|
@ -476,7 +439,7 @@
|
|||
{{ range $elem_index, $elem_val := (.GetTerms "tags") }}
|
||||
{{- if gt $elem_index 0 }}, {{ end -}}
|
||||
<a href="{{ .Permalink }}"
|
||||
class="inline-flex items-center rounded-md bg-gray-300 hover:bg-primary-200 hover:text-black px-2.5 py-0.5 text-sm font-medium text-gray-900 capitalize">{{ .LinkTitle }}</a>
|
||||
class="inline-flex items-center rounded-md bg-gray-300 hover:bg-primary-200 hover:text-black px-2.5 py-0.5 text-sm font-medium text-gray-900 ">{{ .LinkTitle }}</a>
|
||||
{{- end -}}
|
||||
</div>
|
||||
<div class="flex items-center mt-6">
|
||||
|
|
@ -513,20 +476,6 @@
|
|||
{{ if not .Site.Params.Disable_stay_uptodate}}
|
||||
<!-- CTA section -->
|
||||
<div class="relative pb-16 mt-6">
|
||||
<div aria-hidden="true" class="hidden sm:block">
|
||||
<div class="absolute inset-y-0 left-0 w-1/2 rounded-r-3xl bg-gray-50 dark:bg-gray-900/10">
|
||||
</div>
|
||||
<svg class="absolute -ml-3 top-8 left-1/2" width="404" height="392" fill="none" viewBox="0 0 404 392">
|
||||
<defs>
|
||||
<pattern id="8228f071-bcee-4ec8-905a-2a059a2cc4fb" x="0" y="0" width="20" height="20"
|
||||
patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="4" height="4" class="text-gray-200 dark:text-gray-900/60"
|
||||
fill="currentColor" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="392" fill="url(#8228f071-bcee-4ec8-905a-2a059a2cc4fb)" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="max-w-md mx-auto px-7 sm:max-w-3xl lg:max-w-7xl">
|
||||
<div class="relative px-6 py-10 overflow-hidden bg-primary-500 shadow-xl rounded-2xl sm:px-12 sm:py-20">
|
||||
<div aria-hidden="true" class="absolute inset-0 -mt-72 sm:-mt-32 md:mt-0">
|
||||
|
|
@ -541,23 +490,25 @@
|
|||
<div class="relative">
|
||||
<div class="sm:text-center">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
|
||||
Stay Up to Date
|
||||
{{ .Site.Params.P5.Heading }}
|
||||
</h2>
|
||||
<p class="max-w-2xl mx-auto mt-6 text-lg text-primary-100">Sagittis
|
||||
scelerisque nulla cursus in enim consectetur quam. Dictum urna sed
|
||||
consectetur neque tristique pellentesque.</p>
|
||||
{{ range .Site.Params.P5.Content }}
|
||||
<p class="max-w-2xl mx-auto mt-6 text-lg text-primary-100">
|
||||
{{ .text }}
|
||||
</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
<form action="#" class="mt-12 sm:mx-auto sm:flex sm:max-w-lg">
|
||||
<form action="{{ .Site.Params.P5.Action }}" class="mt-12 sm:mx-auto sm:flex sm:max-w-lg">
|
||||
<div class="flex-1 min-w-0">
|
||||
<label for="cta-email" class="sr-only">Email address</label>
|
||||
<label for="cta-email" class="sr-only">{{ .Site.Params.P5.Label }}</label>
|
||||
<input id="cta-email" type="email"
|
||||
class="block w-full px-5 py-3 text-base text-gray-900 placeholder-gray-500 border border-transparent rounded-md shadow-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-500"
|
||||
placeholder="Enter your email">
|
||||
placeholder="{{ .Site.Params.P5.Placeholder }}">
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-0 sm:ml-3">
|
||||
<button type="submit"
|
||||
class="block w-full px-5 py-3 text-base font-medium text-white bg-gray-900 border border-transparent rounded-md shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-500 sm:px-10">Notify
|
||||
me</button>
|
||||
<button type="submit" class="block w-full px-5 py-3 text-base font-medium text-white bg-gray-900 border border-transparent rounded-md shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-500 sm:px-10">
|
||||
{{ .Site.Params.P5.Button }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Loading…
Reference in New Issue