add landing pages for meetups

This commit is contained in:
Benjamin Takats
2023-01-14 20:35:54 +01:00
parent 8120b13bff
commit 2f00e34e10
55 changed files with 3161 additions and 17 deletions

View File

@@ -11,11 +11,11 @@
class="w-full text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-amber-500 to-amber-200 lg:inline">{{ __('Bookcases') }}</span>
</h1>
</div>
<p class="px-0 mb-6 text-lg text-gray-600 md:text-xl">
{{ __('Search out a public bookcase') }}
</p>
<div class="w-1/2">
<p class="px-0 mb-6 text-lg text-gray-600 md:text-xl">
{{ __('Search out a public bookcase') }}
</p>
<div class="rounded" wire:ignore>
@if($markers[0] ?? false)
<style>

View File

@@ -0,0 +1,109 @@
<div class="bg-21gray flex flex-col h-screen justify-between">
{{-- MAIN --}}
<section class="w-full mb-12 mt-8">
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4 flex flex-col sm:flex-row">
<div class="flex flex-col sm:flex-row">
<div class="flex flex-col">
<h1 class="mb-6 text-5xl font-extrabold leading-none tracking-normal text-gray-200 sm:text-6xl md:text-6xl lg:text-7xl md:tracking-tight">
<span
class="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-amber-500 to-amber-200">{{ $meetup->name }}</span><br
class="lg:block hidden">
{{ __('Plebs together strong 💪') }}
</h1>
<div class="px-0 mb-6 text-lg text-gray-600 md:text-xl">
{{ __('Bitcoiner Meetups are a great way to meet other Bitcoiners in your area. You can learn from each other, share ideas, and have fun!') }}
<x-button primary lg class="whitespace-nowrap">
<i class="fa fa-thin fa-external-link mr-2"></i>
{{ __('Link') }}
</x-button>
</div>
</div>
<div class="p-4">
<img class="max-h-64" src="{{ $meetup->getFirstMediaUrl('logo') }}" alt="Logo">
</div>
</div>
</div>
<div class="w-full">
@php
$locale = \Illuminate\Support\Facades\Cookie::get('lang', 'de');
@endphp
<link rel="stylesheet" type="text/css"
href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css"/>
<script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script>
<script src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.{{ $locale }}.js"></script>
<style>
.calendar .calendar-header {
background-color: #F7931A;
color: white;
border: 0;
}
.calendar table.month th.month-title {
color: #F7931A;
}
.calendar table.month th.day-header {
color: #fff;
}
.calendar table.month td.day .day-content {
color: #fff;
}
.calendar .calendar-header table th:hover {
background: #222;
}
</style>
<div
wire:ignore
x-data="{
calendar: null,
init() {
let events = {{ Js::from($events) }};
events = events.map(function(e){
return {id: e.id, startDate: new Date(e.startDate), endDate: new Date(e.endDate), location: e.location, description: e.description}
})
new Calendar(this.$refs.calendar, {
style: 'background',
language: '{{ $locale }}',
startYear: {{ date('Y') }},
dataSource: events,
yearChanged: function(e) {
@this.set('year', e.currentYear);
},
clickDay: function(e) {
if(e.events.length > 0) {
var content = '';
var ids = [];
for(var i in e.events) {
ids.push(e.events[i].id);
content += '<div class=\'event-tooltip-content\'>'
+ '<div class=\'event-name\'>' + e.events[i].location + '</div>'
+ '<div class=\'event-location\'>' + e.events[i].description + '</div>'
+ '</div>';
}
console.log(content);
$wire.call('popover', content, ids.join(','));
}
},
});
},
}"
>
<div x-ref="calendar"></div>
</div>
</div>
</section>
{{-- FOOTER --}}
<livewire:frontend.footer/>
</div>