Usable version
First pass of what I'd call "usable" versions of the pages: - Index - About - Tickets There's some more work to be done in the year_con partial to represent each of the conference years. The biggest change of this commit by far is the introduction/commonization of the partial 'features.html'. This is the behemoth of a partial that effectively gives us the options to show slide style content. At some point it might be advantageous to break it apart more, but it's relatively straightforward to include in a layout and start putting together pages.
This commit is contained in:
177
layouts/partials/components/features.html
Normal file
177
layouts/partials/components/features.html
Normal file
@@ -0,0 +1,177 @@
|
||||
{{ if .Params.features }}
|
||||
{{ $tick := 0 }}
|
||||
{{ range $i, $e:= .Params.features }}
|
||||
|
||||
<section class="nim-h-screen relative feature {{ .section_class }}" style="background-color: {{ .bg_color }}">
|
||||
{{ with .transition }}
|
||||
{{ if .start }}
|
||||
<div class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block {{ .start_class }}"
|
||||
style="height: 100px;z-index:12;mask-image: url('{{ .start }}');background-color: {{ .start_color }};{{ .start_style | safeCSS }}">
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if .start_dark }}
|
||||
<div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden {{ .start_class }}"
|
||||
style="height: 100px;z-index:12;mask-image: url('{{ .start_dark }}');background-color: {{ .start_dark_color }};{{ .start_style | safeCSS }}">
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ with .bg_img }}
|
||||
{{ $res := resources.Get .img }}
|
||||
<div class="absolute inset-0 bg-cover bg-center bg-no-repeat {{ if .parallax }} bg-fixed parallax-bg {{ end }}"
|
||||
style="background-image: url('{{ $res.RelPermalink }}')"></div>
|
||||
{{ if .img2 }}
|
||||
{{ $res2 := resources.Get .img2 }}
|
||||
<div class="absolute inset-0 bg-cover bg-bottom bg-no-repeat z-10"
|
||||
style="background-image: url('{{ $res2.RelPermalink }}')"></div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<div class="container relative mx-auto" style="z-index: 12;">
|
||||
<div class="row items-center justify-between">
|
||||
{{ if eq .side "center" }}
|
||||
<div class="mx-auto md:col-10 lg:col-10 {{ .content_class }}">
|
||||
<div class="row">
|
||||
{{ if .subtitle }}
|
||||
<h4 class="mb-4 {{ .subtitle_class }}">{{ .subtitle }}</h4>
|
||||
{{ end }}
|
||||
<h2 class="{{ .title_class }}">
|
||||
{{ .title | markdownify }}
|
||||
</h2>
|
||||
<!-- grid -->
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
{{ range $i, $e := .grid }}
|
||||
<div class="p-4 row">
|
||||
<div class="col-1">
|
||||
<h3 style="color: {{ .color }}">{{ add $i 1 }}</h3>
|
||||
</div>
|
||||
<div class="col-11">
|
||||
<h4 class="font-bold mb-2" style="color: {{ .color }}">{{ .title }}</h4>
|
||||
<p class="{{ .content_class }}">{{ .content | markdownify }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<!-- end: grid -->
|
||||
</div>
|
||||
<!-- tickets -->
|
||||
{{ if .tickets }}
|
||||
{{ partial "components/ticket_list.html" . }}
|
||||
{{ end }}
|
||||
<!-- tickets -->
|
||||
<!-- q&a -->
|
||||
{{ if .qa }}
|
||||
{{ partial "components/questions.html" . }}
|
||||
{{ end }}
|
||||
<!-- q&a -->
|
||||
<!-- testimonials -->
|
||||
{{ if .testimonials }}
|
||||
{{ partial "components/testimonials.html" . }}
|
||||
{{ end }}
|
||||
<!-- testimonials -->
|
||||
<!-- img_grid -->
|
||||
{{ if .img_grid }}
|
||||
{{ partial "components/img_grid.html" . }}
|
||||
{{ end }}
|
||||
<!-- img_grid -->
|
||||
|
||||
<p class="mb-8 text-lg about-content">
|
||||
{{ .content | markdownify }}
|
||||
</p>
|
||||
<ul>
|
||||
{{ range .bulletpoints }}
|
||||
<li class="relative mb-4 pl-6">
|
||||
<i class="fa fa-check absolute left-0 top-1.5"></i>
|
||||
{{ . | markdownify }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ with .button }}
|
||||
{{ if .enable }}
|
||||
<a class="btn mt-6 {{ .class }}" href="{{ .link | absURL }}">
|
||||
{{ .label }}
|
||||
<i class="fa fa-arrow-right pl-2"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ else }}
|
||||
|
||||
{{ if eq .side "left" }}
|
||||
{{ $tick = 0 }}
|
||||
{{ else if eq .side "right" }}
|
||||
{{ $tick = 1 }}
|
||||
{{ end }}
|
||||
|
||||
<div class="mb:md-0 md:col-5 mb-6
|
||||
{{ if eq $tick 1 }}
|
||||
md:order-2
|
||||
{{ end }}">
|
||||
|
||||
{{ if .image }}
|
||||
{{ $res := resources.Get .image }}
|
||||
<img loading="lazy" decoding="async" src="{{ $res.RelPermalink }}"
|
||||
class="img w-[384px] h-[384px] object-cover w-full h-auto {{ .image_class }} ">
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="{{ if eq $tick 0 }}
|
||||
md:order-1
|
||||
{{ end }} md:col-7 lg:col-6 {{ .content_class }}">
|
||||
{{ if .subtitle }}
|
||||
<h4 class="mb-4 {{ .subtitle_class }}">{{ .subtitle }}</h4>
|
||||
{{ end }}
|
||||
<h2 class="mb-4 about-content {{ if .title_class }} {{ .title_class }} {{ end }}">
|
||||
{{ .title | markdownify }}
|
||||
</h2>
|
||||
<p class="mb-8 text-lg about-content">
|
||||
{{ .content | markdownify }}
|
||||
</p>
|
||||
<ul>
|
||||
{{ range .bulletpoints }}
|
||||
<li class="relative mb-4 pl-6">
|
||||
<i class="fa fa-check absolute left-0 top-1.5"></i>
|
||||
{{ . | markdownify }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ with .button }}
|
||||
{{ if .enable }}
|
||||
<a class="btn btn-primary mt-6 {{ .button_class }}" href="{{ .link | absURL }}">
|
||||
{{ .label }}
|
||||
<i class="fa fa-arrow-right pl-2"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ if eq $tick 0 }}
|
||||
{{ $tick = 1}}
|
||||
{{ else }}
|
||||
{{ $tick = 0 }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ with .bg_img }}
|
||||
{{ if .end_img }}
|
||||
{{ $res3 := resources.Get .end_img }}
|
||||
<div class="{{ .end_img_class }} z-10" style="background-image: url('{{ $res3.RelPermalink }}')"></div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ with .transition }}
|
||||
{{ if .end }}
|
||||
<div class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block {{ .end_class }}"
|
||||
style="height: 100px;z-index:12;mask-image: url('{{ .end }}');background-color: {{ .end_color }};{{ .end_style | safeCSS }}">
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if .end_dark }}
|
||||
<div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden {{ .end_class }}"
|
||||
style="height: 100px;z-index:12;mask-image: url('{{ .end_dark }}');background-color: {{ .end_dark_color }};{{ .end_style | safeCSS }}">
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
17
layouts/partials/components/img_grid.html
Normal file
17
layouts/partials/components/img_grid.html
Normal file
@@ -0,0 +1,17 @@
|
||||
{{ if .img_grid }}
|
||||
<div class="container relative mx-auto px-4">
|
||||
<div class="flex flex-wrap justify-center mx-auto lg:w-full md:w-5/6">
|
||||
{{ range $i, $option := .img_grid }}
|
||||
<div class="w-1/2 md:w-1/3 p-2">
|
||||
<div class="flex justify-center items-center w-full">
|
||||
<a href="{{ $option.link }}" class="relative align-center" target="_blank" rel="noopener noreferrer"
|
||||
title="{{ $option.name }}">
|
||||
{{ $imgres := .resources.Get $option.icon }}
|
||||
<img class="max-w-24 align-center" src="{{ $option.icon }}" alt="{{ .Item.Name }}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
8
layouts/partials/components/questions.html
Normal file
8
layouts/partials/components/questions.html
Normal file
@@ -0,0 +1,8 @@
|
||||
{{ if .qa }}
|
||||
<div class="qa">
|
||||
{{ range $i, $q := .qa }}
|
||||
<h4 class="{{ $q.question_class }}">{{ $q.question | markdownify }}</h4>
|
||||
<p class="{{ $q.answer_class }}">{{ $q.answer | markdownify }}</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
22
layouts/partials/components/testimonials.html
Normal file
22
layouts/partials/components/testimonials.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{{ if .testimonials }}
|
||||
<div class="container mx-auto px-4 py-12">
|
||||
<div class="w-full">
|
||||
{{ range $index, $testimonial := .testimonials }}
|
||||
<div class="mt-8 testimonial dark:text-white">
|
||||
<div class="flex items-start">
|
||||
<a href="{{ $testimonial.link }}"
|
||||
class="mr-6 h-32 object-cover rounded-lg">
|
||||
{{ $img := resources.Get $testimonial.avatar }}
|
||||
<img src="{{ $img.RelPermalink }}" class="rounded-full w-32 object-cover shadow-md" />
|
||||
</a>
|
||||
<div class="flex flex-col justify-between h-full bg-gray-100 dark:bg-darkmode-theme-light p-4 rounded-lg shadow-md">
|
||||
<h3 class="text-xl font-bold mb-4">"{{ $testimonial.title }}"</h3>
|
||||
<p class="mb-4">{{ $testimonial.content | markdownify }}</p>
|
||||
<span class="text-sm">- {{ $testimonial.name | markdownify }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
114
layouts/partials/components/ticket_list.html
Normal file
114
layouts/partials/components/ticket_list.html
Normal file
@@ -0,0 +1,114 @@
|
||||
{{ if .tickets }}
|
||||
<div class="container mx-auto px-4 py-12">
|
||||
<div class="w-full">
|
||||
{{ $tickets := .tickets }}
|
||||
{{ range $index, $ticket := $tickets }}
|
||||
<h2 class="text-3xl font-bold mb-8 {{ $ticket.title_class }}">{{ $ticket.title }}</h2>
|
||||
<h4 class="text-xl {{ $ticket.subtitle_class }}">{{ $ticket.subtitle }}</h2>
|
||||
{{/* <div class="columns-3s"> */}}
|
||||
<div id="pricing"
|
||||
class="grid grid-cols-1 gap-4 mt-4 leading-7 text-gray-900 border-0 border-gray-200 sm:mt-6 sm:gap-6 md:mt-8 md:gap-4 lg:grid-cols-3 {{ $ticket.section_class }}">
|
||||
{{ range $option_index, $option := $ticket.options }}
|
||||
|
||||
<!-- Ticket options -->
|
||||
{{/* <div class="rounded-lg shadow-md p-6">
|
||||
<h2 class="text-xl font-semibold mb-2">{{ $option.name }}</h2>
|
||||
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<span class="text-lg">{{ $option.title }}</span>
|
||||
<span class="font-bold text-2xl">${{ $option.price }}</span>
|
||||
</div>
|
||||
|
||||
{{ with $option.button }}
|
||||
<a href=""
|
||||
class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded mt-4 transition duration-300">
|
||||
Register Now
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
<h3 class="text-xl font-semibold mt-6">Features</h3>
|
||||
<ul>
|
||||
{{ range $feature := $option.features }}
|
||||
<li class="{{ $feature.text_class }}">{{ $feature.text }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div> */}}
|
||||
|
||||
<div class="relative z-10 flex flex-col items-center max-w-md p-4 mx-auto my-0 border border-solid rounded-lg sm:my-0 sm:p-6 md:my-4 md:p-6">
|
||||
<p class="m-0 text-lg leading-tight tracking-tight border-0 border-gray-200 {{ $option.name_class }}">
|
||||
{{ $option.name | markdownify }}
|
||||
</p>
|
||||
<h3 class="m-0 text-2xl font-semibold leading-tight tracking-tight border-0 border-gray-200 sm:text-3xl md:text-4xl {{ $option.title_class }}">
|
||||
{{ $option.title | markdownify }}
|
||||
</h3>
|
||||
<div class="flex items-center mt-4 leading-7 border-0 border-gray-200">
|
||||
{{ if $option.original_price }}
|
||||
<p class="box-border m-0 -ml-8 mr-2 text-light line-through text-2xl font-semibold leading-none border-solid">
|
||||
{{ $option.original_price | markdownify }}
|
||||
</p>
|
||||
{{ end }}
|
||||
|
||||
<p class="text-3xl">$</p>
|
||||
<p class="box-border m-0 text-6xl font-semibold leading-none border-solid {{ $option.price_class }}">
|
||||
{{ $option.price | markdownify }}
|
||||
</p>
|
||||
</div>
|
||||
<ul class="flex-1 p-0 mt-4 leading-7 text-gray-900 border-0 border-gray-200 {{ $option.features_class }}">
|
||||
{{ range $feature_index, $feature := $option.features }}
|
||||
<li class="inline-flex items-center block w-full mb-2 font-semibold text-left border-solid">
|
||||
<span class="{{ $feature.text_class }}">{{ $feature.text }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<a href="{{ $option.button.url }}"
|
||||
class="inline-flex justify-center w-full px-4 py-3 mt-8 font-sans text-sm leading-none text-center no-underline sm:text-base md:text-lg {{ $option.button.class }}">
|
||||
{{ $option.button.title }}
|
||||
</a>
|
||||
{{ if $option.button.alt_url }}
|
||||
<a href="{{ $option.button.alt_url }}" class="{{ $option.button.alt_class }}">
|
||||
{{ $option.button.alt_title }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- / Ticket options -->
|
||||
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{/* {{ if .options }}
|
||||
{{ range $index, $ticket := .options }}
|
||||
<li class="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 class="text-xl font-semibold mb-2">{{ $ticket.title }}</h3>
|
||||
<p class="mb-4">{{ $ticket.subtitle }}</p>
|
||||
|
||||
<div class="flex justify-between items-center mb-4 border-b pb-2">
|
||||
<span class="text-gray-600">Price:</span>
|
||||
<span class="font-bold text-green-500">${{ $ticket.price }}</span>
|
||||
</div>
|
||||
|
||||
{{ if hasPrefix $ticket.button.title "Register" }}
|
||||
<a href="{{ $ticket.button.url }}"
|
||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full w-full">
|
||||
Register Now
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
<ul class="mt-4 space-y-2">
|
||||
{{ range $featureIndex, $feature := $ticket.features }}
|
||||
<li class="flex items-center justify-between">
|
||||
<span class="text-gray-600">{{ $feature.text }}</span>
|
||||
{{ if hasPrefix $feature.text_class "font-" }}
|
||||
<span class="{{ $feature.text_class }}">{{ $feature.text }}</span>
|
||||
{{ else }}
|
||||
<span>{{ $feature.text }}</span>
|
||||
{{ end }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }} */}}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user