Files
karudhaas/resources/views/home.blade.php
2021-05-07 07:50:19 +05:00

301 lines
16 KiB
PHP

<x-layout>
<x-slot name="meta">
<title>Karudhaas</title>
<meta name="description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name=" twitter:title" content="Karudhaas" />
<meta name="twitter:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name="twitter:site" content="https://karudhaas.net" />
<meta name="twitter:image" content="/images/ogi.jpg">
<meta property="og:locale" content="mv" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Karudhaas">
<meta property="og:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta property="og:url" content="https://karudhaas.net" />
<meta property="og:site_name" content="karudhaas.net" />
<meta property="og:image" content="/images/ogi.jpg">
</x-slot>
<div id="explore">
<!-- todays pick -->
<div class="mx-auto container py-6 sm:py-12 px-4 xl:px-0">
<h2 class="text-gray-800 text-3xl text-right md:pr-12 MvAamu" style="font-weight: 100;">
މިއަދުގެ ޚުލާޞާ
</h2>
<div class="flex flex-wrap mt-8 sm:mt-16 flex-row-reverse">
@isset($todays_pick[0])
<div class="md:w-2/3 w-full pb-6 md:pb-0 md:pr-12">
<a
href="{{ route('articles.show', [$todays_pick[0]['source']->slug, $todays_pick[0]['guid']]) }}">
<div class="h-96 w-full">
<img src="{{ $todays_pick[0]['featured_image'] }}" alt=""
class="h-full w-full object-cover overflow-hidden rounded shadow" />
</div>
<h2
class="text-2xl md:text-1xl lg:text-1xl leading-11 text-gray-800 pb-4 pt-4 MvTyper font-semibold text-right">
{{ $todays_pick[0]['title'] }}</h2>
<div class="flex justify-end items-center mt-3">
<div>
<a href="{{ route('sources.show', $todays_pick[0]['source']->slug) }}"
class="hover:underline">
<p class="font-semibold text-gray-700 text-sm capitalize MvTyper">
{{ $todays_pick[0]['source']->name }}</p>
</a>
</div>
<img src="{{ $todays_pick[0]['source']->logo }}"
class="h-10 w-10 rounded-full ml-1 object-cover">
</div>
<p class="text-gray-600 text-sm mt-4 text-right">
{{ $todays_pick[0]['published_date']->diffForHumans() }}</p>
</a>
</div>
@endisset
@isset($todays_pick[1])
<div class="md:w-1/3 w-full md:pr-12">
<a
href="{{ route('articles.show', [$todays_pick[1]['source']->slug, $todays_pick[1]['guid']]) }}">
<div class="h-96 w-full">
<img src="{{ $todays_pick[1]['featured_image'] }}" alt=""
class="h-full w-full object-cover overflow-hidden rounded shadow" />
</div>
<h2
class="text-2xl md:text-1xl lg:text-1xl leading-11 text-gray-800 pb-4 pt-4 MvTyper font-semibold text-right">
{{ $todays_pick[1]['title'] }}</h2>
<div class="flex justify-end items-center mt-3">
<div>
<a href="{{ route('sources.show', $todays_pick[1]['source']->slug) }}"
class="hover:underline">
<p class="font-semibold text-gray-700 text-sm capitalize MvTyper">
{{ $todays_pick[1]['source']->name }}</p>
</a>
</div>
<img src="{{ $todays_pick[1]['source']->logo }}"
class="h-10 w-10 rounded-full ml-1 object-cover">
</div>
<p class="text-gray-600 text-sm mt-4 text-right">
{{ $todays_pick[1]['published_date']->diffForHumans() }}</p>
</a>
</div>
@endisset
</div>
</div>
<!-- todays pick -->
<!-- Posts start -->
<div class="mx-auto container py-6 sm:py-12 px-4 xl:px-0">
<div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
@foreach ($todays_pick->splice(2, 5) as $article)
<a href="{{ route('articles.show', [$article['source']->slug, $article['guid']]) }}">
<div class="flex flex-col items-end">
<div class="w-64 h-64 pr-5">
<img src="{{ $article['featured_image'] }}" alt=""
class="h-full w-full object-cover overflow-hidden rounded shadow" />
</div>
<div class="pt-3 pb-3 ml-2 pr-5">
<p class="text-xl text-gray-800 leading-8 MvTyper text-right">{{ $article['title'] }}
</p>
<p class="text-sm text-gray-500 text-right mt-3 MvTyper">
{{ $article['source']->name }}
</p>
<p class="text-gray-600 text-sm mt-4 text-right">
{{ $todays_pick[1]['published_date']->diffForHumans() }}</p>
</div>
</div>
</a>
@endforeach
</div>
</div>
<!-- Posts end -->
<div class="container px-4 xl:px-0 mx-auto">
<hr class="border-t border-gry-300" />
</div>
<recent-stories></recent-stories>
<div class="container px-4 xl:px-0 mx-auto">
<hr class="border-t border-gry-300" />
</div>
<!-- covid -->
<div class="mx-auto container py-6 sm:py-12 px-4 xl:px-0">
<div class="flex flex-col items-end">
<h2 class="text-gray-800 text-3xl text-right MvAamu" style="font-weight: 100;">ކޮވިޑް 19 އާއި ގުޅޭ</h2>
<div class="border-b-2 border-red-500 w-48"></div>
</div>
<div class="flex flex-wrap mt-8 sm:mt-16">
<div class="md:w-1/3 w-full md:pr-12">
<div class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-8">
@foreach ($covid19_articles->splice(1) as $article)
<a href="{{ route('articles.show', [$article->source->slug, $article->guid]) }}">
<div>
<div class="h-44 w-full">
<img src="{{ $article->featured_image }}" alt=""
class="h-full w-full object-cover overflow-hidden rounded shadow" />
</div>
<h2 class="mt-3 text-gray-900 MvTyper text-right" dir="rtl">{{ $article->title }}
</h2>
<p class="text-gray-600 text-sm mt-3 text-right">
{{ $article->published_date->diffForHumans() }}</p>
</div>
</a>
@endforeach
</div>
</div>
@isset($covid19_articles[0])
<div class="md:w-2/3 w-full pb-6 md:pb-0">
<a href="{{ route('articles.show', [$covid19_articles[0]['source']->slug, $covid19_articles[0]->guid]) }}">
<div class="h-96 w-full">
<img src="{{ $covid19_articles[0]['featured_image'] }}" alt=""
class="h-full w-full object-cover overflow-hidden rounded shadow" />
</div>
<p class="mt-6 mb-2 text-sm text-red-500 text-right">ކޮވިޑް 19</p>
<h2
class="text-2xl md:text-1xl lg:text-1xl leading-11 text-gray-800 pb-4 pt-4 MvTyper font-semibold text-right">
{{ $covid19_articles[0]['title'] }}</h2>
<div class="flex justify-end items-center mt-3">
<div>
<a href="{{ route('sources.show', $covid19_articles[0]['source']->slug) }}"
class="hover:underline">
<p class="font-semibold text-gray-700 text-sm capitalize MvTyper">
{{ $covid19_articles[0]['source']->name }}</p>
</a>
</div>
<img src="{{ $covid19_articles[0]['source']->logo }}"
class="h-10 w-10 rounded-full ml-1 object-cover">
</div>
<p class="text-gray-600 text-sm mt-4 text-right">
{{ $covid19_articles[0]['published_date']->diffForHumans() }}</p>
</a>
</div>
@endisset
</div>
</div>
<!-- covid -->
<div class="container px-4 xl:px-0 mx-auto">
<hr class="border-t border-gry-300" />
</div>
<!-- viyafari -->
<div class="mx-auto container py-6 sm:py-12 px-4 xl:px-0">
<div class="flex flex-col items-end mb-10">
<h2 class="text-gray-800 text-3xl text-right MvAamu" style="font-weight: 100;">
ވިޔަފާރި
</h2>
<div class="border-b-2 border-green-500 w-16"></div>
</div>
<div class="container mx-auto">
<div class="flex md:-mx-4 flex-row-reverse flex-wrap mb-7 md:px-0">
@foreach ($business_articles as $article)
<div class="w-1/2 md:w-1/4 px-4 py-4 flex-grow">
<a href="/article/{{ $article->source->slug }}/{{ $article->guid }}">
<div class="w-full h-auto overflow-hidden relative rounded">
<img src="{{ $article->featured_image }}" />
</div>
</a>
<div class="w-full h-auto text-right overflow-hidden mt-3">
<a href="/article/{{ $article->source->slug }}/{{ $article->guid }}"
class="text-md leading-9 font-semibold text-right text-gray-700 py-3 MvTyper hover:underline"
style="direction:rtl;">{{ $article->title }}</a>
<div class="flex items-center justify-end mt-3 mb-3">
<a href="/source/{{ $article->source->slug }}">
<div class="flex justify-end items-center">
<div>
<p class="font-semibold text-gray-600 text-sm capitalize MvTyper">
{{ $article->source->name }}</p>
</div>
<img src="{{ $article->source->logo }}"
class="h-10 w-10 rounded-full ml-1 object-cover" />
</div>
</a>
</div>
<p class="ml-1 text-gray-600 text-right MvTyper" style="direction:rtl; font-size:13px;">
{{ $article->published_date->locale('dv')->isoFormat('Do MMMM YYYY') }}
</p>
</div>
</div>
@endforeach
</div>
</div>
</div>
<!-- viyafaari -->
<div class="container px-4 xl:px-0 mx-auto">
<hr class="border-t border-gry-300" />
</div>
<!-- kulhivaru -->
<div class="mx-auto container py-6 sm:py-12 px-4 xl:px-0">
<div class="flex flex-col items-end mb-10">
<h2 class="text-gray-800 text-3xl text-right MvAamu" style="font-weight: 100;">
ކުޅިވަރު
</h2>
<div class="border-b-2 border-blue-500 w-16"></div>
</div>
<div class="container mx-auto">
<div class="flex md:-mx-4 flex-row-reverse flex-wrap mb-7 md:px-0">
@foreach ($sports_articles as $article)
<div class="w-1/2 md:w-1/4 px-4 py-4 flex-grow">
<a href="/article/{{ $article->source->slug }}/{{ $article->guid }}">
<div class="w-full h-auto overflow-hidden relative rounded">
<img src="{{ $article->featured_image }}" />
</div>
</a>
<div class="w-full h-auto text-right overflow-hidden mt-3">
<a href="/article/{{ $article->source->slug }}/{{ $article->guid }}"
class="text-md leading-9 font-semibold text-right text-gray-700 py-3 MvTyper hover:underline"
style="direction:rtl;">{{ $article->title }}</a>
<div class="flex items-center justify-end mt-3 mb-3">
<a href="/source/{{ $article->source->slug }}">
<div class="flex justify-end items-center">
<div>
<p class="font-semibold text-gray-600 text-sm capitalize MvTyper">
{{ $article->source->name }}</p>
</div>
<img src="{{ $article->source->logo }}"
class="h-10 w-10 rounded-full ml-1 object-cover" />
</div>
</a>
</div>
<p class="ml-1 text-gray-600 text-right MvTyper" style="direction:rtl; font-size:13px;">
{{ $article->published_date->locale('dv')->isoFormat('Do MMMM YYYY') }}
</p>
</div>
</div>
@endforeach
</div>
</div>
</div>
<!-- kulhivaru -->
<div class="container px-4 xl:px-0 mx-auto">
<hr class="border-t border-gry-300" />
</div>
<available-sources class="mt-5"></available-sources>
</div>
</x-layout>