NEW UI

2021-05-07 07:22:11 +05:00
parent e2bfb8de57
commit 925bd60c9e
24 changed files with 25620 additions and 5748 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ Homestead.json
 Homestead.yaml
 npm-debug.log
 yarn-error.log
+.DS_Store
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -0,0 +1,71 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Article;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Carbon;
+
+class HomeController extends Controller
+{
+    /**
+     * Handle the incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function __invoke(Request $request)
+    {
+        $todays_pick = Cache::remember('home.todayspick', 600, function () {
+            return Article::with('topics', 'source')
+                ->whereDate('published_date', Carbon::today())
+                ->inRandomOrder()
+                ->take(8)
+                ->get()
+                ->transform(function ($article) {
+                    return [
+                        "id" => $article->id,
+                        "title" => $article->title,
+                        "url" => $article->url,
+                        "author" => $article->author,
+                        "featured_image" => $article->featured_image,
+                        "published_date" => $article->published_date,
+                        "meta" => $article->meta,
+                        "guid" => $article->guid,
+                        "source" => $article->source,
+                        "topics" => $article->topics,
+                    ];
+                });
+                //->unique('source.name')->values();
+        });
+
+        $covid19 = config("karudhaas.topic_filters.covid19");
+        $covid19_articles =  Cache::remember("home.articles.covid19", 600, function () use ($covid19) {
+            return Article::with('source')->whereHas('topics', function ($q) use ($covid19) {
+                $q->whereIn('slug', ['mndf']);
+            })->latest('published_date')->limit(5)->get();
+        });
+
+        $business = config("karudhaas.topic_filters.business");
+        $business_articles =  Cache::remember("home.articles.business", 600, function () use ($business) {
+            return Article::with('source')->whereHas('topics', function ($q) use ($business) {
+                $q->whereIn('slug', ['mndf']);
+            })->latest('published_date')->limit(4)->get();
+        });
+
+        $sports = config("karudhaas.topic_filters.sports");
+        $sports_articles =  Cache::remember("home.articles.sports", 600, function () use ($sports) {
+            return Article::with('source')->whereHas('topics', function ($q) use ($sports) {
+                $q->whereIn('slug', ['mndf']);
+            })->latest('published_date')->limit(4)->get();
+        });
+
+        return view('home', [
+            "todays_pick" => $todays_pick,
+            "covid19_articles" => $covid19_articles,
+            "business_articles" => $business_articles,
+            "sports_articles" => $sports_articles
+        ]);
+    }
+}
--- a/composer.lock
+++ b/composer.lock
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -2,32 +2,33 @@
    "private": true,
    "scripts": {
        "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "npm run development -- --watch",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "development": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "hot": "mix watch --hot",
        "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "production": "mix --production"
    },
    "devDependencies": {
-        "@tailwindcss/ui": "^0.5.0",
+        "@tailwindcss/aspect-ratio": "^0.2.0",
+        "@tailwindcss/forms": "^0.3.2",
+        "@tailwindcss/jit": "^0.1.18",
+        "@tailwindcss/typography": "^0.4.0",
        "axios": "^0.19",
        "cross-env": "^7.0",
-        "laravel-mix": "^5.0.1",
-        "laravel-mix-postcss-config": "^1.0.4",
-        "laravel-mix-purgecss": "^5.0.0",
-        "laravel-mix-tailwind": "^0.1.0",
+        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
+        "postcss": "^8.2.9",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
-        "tailwindcss": "^1.3.0",
+        "tailwindcss": "^2.1.1",
+        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.11"
    },
    "dependencies": {
        "moment": "^2.28.0",
-        "tailwindcss": "^1.6.2",
        "turbolinks": "^5.2.0",
        "vue": "^2.6.11",
        "vue-turbolinks": "^2.1.0"
--- a/public/css/app.css
+++ b/public/css/app.css
--- a/public/js/app.js
+++ b/public/js/app.js
--- a/public/js/app.js.LICENSE.txt
+++ b/public/js/app.js.LICENSE.txt
@@ -1,6 +1,6 @@
 /*!
- * Vue.js v2.6.11
- * (c) 2014-2019 Evan You
+ * Vue.js v2.6.12
+ * (c) 2014-2020 Evan You
 * Released under the MIT License.
 */

@@ -14,3 +14,5 @@
 */

 //! moment.js
+
+//! moment.js locale configuration
--- a/public/js/app.js.map
+++ b/public/js/app.js.map
--- a/public/js/manifest.js
+++ b/public/js/manifest.js
@@ -1 +0,0 @@
-!function(e){function r(r){for(var n,l,f=r[0],i=r[1],a=r[2],c=0,s=[];c<f.length;c++)l=f[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,f=1;f<t.length;f++){var i=t[f];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var f=window.webpackJsonp=window.webpackJsonp||[],i=f.push.bind(f);f.push=r,f=f.slice();for(var a=0;a<f.length;a++)r(f[a]);var p=i;t()}([]);
--- a/public/js/manifest.js.map
+++ b/public/js/manifest.js.map
--- a/public/js/vendor.js
+++ b/public/js/vendor.js
--- a/public/js/vendor.js.LICENSE.txt
+++ b/public/js/vendor.js.LICENSE.txt
@@ -1,18 +0,0 @@
-/*!
- * Vue.js v2.6.11
- * (c) 2014-2019 Evan You
- * Released under the MIT License.
- */
-
-/**
- * @license
- * Lodash <https://lodash.com/>
- * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-
-//! moment.js
-
-//! moment.js locale configuration
--- a/public/js/vendor.js.map
+++ b/public/js/vendor.js.map
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,6 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=d61370a75934e7e0d683",
-    "/css/app.css": "/css/app.css?id=088da45e87315994e80f",
-    "/js/manifest.js": "/js/manifest.js?id=3c768977c2574a34506e",
-    "/js/vendor.js": "/js/vendor.js?id=aa27c0f3cc35e93603fe"
+    "/js/app.js": "/js/app.js?id=abf0a000d5784d7aa33c",
+    "/css/app.css": "/css/app.css?id=414685d6b836d6325b7b"
 }
--- a/resources/js/components/AvailableSources.vue
+++ b/resources/js/components/AvailableSources.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="border-b mt-5">
+    <div class=" mt-5">
        <div class="mb-5">
            <div>
                <h2
--- a/resources/js/components/RecentStories.vue
+++ b/resources/js/components/RecentStories.vue
@@ -2,7 +2,7 @@
    <div class="mb-10">
        <div>
            <h3
-                class="text-gray-800 text-3xl text-center mt-5 mb-2 mr-3 MvAamu"
+                class="text-gray-800 text-3xl text-right mt-5 mb-2 mr-3 MvAamu"
                style="font-weight: 100;"
            >
                ފަހުގެ ޚަބަރުތައް
--- a/resources/views/components/footer.blade.php
+++ b/resources/views/components/footer.blade.php
@@ -20,11 +20,7 @@

        <div class="py-8 flex">

-            <p class="text-gray-600">Made with ❤️ in Maldives. By <span><a href="https://github.com/boring-dragon"
-                        class="text-blue-600 hover:underline">@boring_dragon</a>, <a href="https://github.com/Dharisd"
-                        class="text-blue-600 hover:underline">@dharisd</a>, <a href="https://github.com/shihaamabr"
-                        class="text-blue-600 hover:underline">@shihaamabr</a>
-                </span></p>
+            <p class="text-gray-600">Made with ❤️ in Maldives.</p>

        </div>
    </div>
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -9,8 +9,6 @@
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="/css/styles.css">

-    <script src="{{ mix('/js/manifest.js') }}"></script>
-    <script src="{{ mix('/js/vendor.js') }}" defer></script>
    <script src="{{ mix('/js/app.js') }}" defer></script>
    @yield('js')

@@ -27,19 +25,12 @@
                {{ $slot }}
            </main>

-            <x-footer>
-                <x-slot name="credits">
-                    <a href="https://github.com/jinas123" class="text-blue-600 hover:underline">@jinas123</a>,
-                    <a href="https://github.com/Dharisd" class="text-blue-600 hover:underline">@dharisd</a>,
-                    <a href="https://github.com/shihaamabr" class="text-blue-600 hover:underline">@shihaamabr</a>
-                </x-slot>
-            </x-footer>
+            <x-footer />
        </div>


    </div>

-    @include('sweetalert::alert')
 </body>

 </html>
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -17,12 +17,278 @@
        <meta property="og:image" content="/images/ogi.jpg">
    </x-slot>

-    <todays-pick></todays-pick>
+    <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">
+                <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>
+                <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>
+            </div>
+        </div>

-    <discover-topics></discover-topics>
+        <!-- todays pick -->

-    <available-sources></available-sources>
+        <!-- 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(1, 4) 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>

-    <recent-stories></recent-stories>
+                            <div class="pt-3 pb-3 ml-2 pr-5">

-</x-layout>
+                                <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>
+                <div class="md:w-2/3 w-full pb-6 md:pb-0">
+                    <a href="./blog.html">
+                        <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>
+            </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>
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -1,32 +1,45 @@
-<div class="text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
-  <div class="flex items-center justify-between flex-row px-6">
-
-    <div class="p-4 flex flex-row items-center justify-between">
-      <a href="/"
-        class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">
-        <img class="w-24" src="/images/logo.png" />
-      </a>
-    </div>
-
-    <nav class="flex-grow pb-4 flex justify-end flex-row py-4 mr-3">
-      <a class="border px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline MvAamu"
-        href="/mylist">
-        <div class="flex justify-center">
-
-          <p class="mr-2"> ރައްކާކުރެވިފައިވާ</p>
-          <svg class="h-5 w-5 text-gray-800" fill="currentcolor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-            <g data-name="Froppy disk">
-              <path
-                d="M61.707 10.293l-8-8A1 1 0 0053 2H7a5.006 5.006 0 00-5 5v50a5.006 5.006 0 005 5h50a5.006 5.006 0 005-5V11a1 1 0 00-.293-.707zM48 4v16a1 1 0 01-1 1H17a1 1 0 01-1-1V4zM10 60V35a3 3 0 013-3h38a3 3 0 013 3v25zm50-3a3 3 0 01-3 3h-1V35a5.006 5.006 0 00-5-5H13a5.006 5.006 0 00-5 5v25H7a3 3 0 01-3-3V7a3 3 0 013-3h7v16a3 3 0 003 3h30a3 3 0 003-3V4h2.586L60 11.414z" />
-              <path
-                d="M39 19h6a1 1 0 001-1V7a1 1 0 00-1-1h-6a1 1 0 00-1 1v11a1 1 0 001 1zm1-11h4v9h-4zM47 45H17a1 1 0 000 2h30a1 1 0 000-2zM47 39H17a1 1 0 000 2h30a1 1 0 000-2zM47 51H17a1 1 0 000 2h30a1 1 0 000-2z" />
-            </g>
-          </svg>
+  <!-- Nav starts here -->
+  <div class="py-4 md:py-10">
+    <header class="mx-auto container px-4 xl:px-0">
+        <div class="flex items-center justify-end">
+            <a href="/">
+               <img class="w-40" src="/images/karudhaas.png" alt="logo"/>
+            </a>
+            <div>
+                
+                <div id="menu" class="md:block lg:block hidden">
+                    <div onclick="toggleMenu(false)" class="block md:hidden lg:hidden text-gray-500 hover:text-gray-700 focus:text-gray-700 fixed focus:outline-none z-30 top-0 pt-4">
+                        <svg aria-haspopup="true" aria-label="Main Menu" xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" />
+                            <line x1="18" y1="6" x2="6" y2="18" />
+                            <line x1="6" y1="6" x2="18" y2="18" />
+                        </svg>
+                    </div>
+                    <ul class="flex md:flex text-3xl md:text-base bg-white lg:text-base lg:flex flex-col md:flex-row lg:flex-row justify-center items-center fixed md:relative lg:relative top-0 bottom-0 left-0 right-0 z-20">
+                        <li class="md:hidden md:mr-8 lg:mr-10 flex items-center">
+                            <a class="hover:text-gray-800 text-gray-600 font-semibold pt-10 md:pt-0" href="./about.html">About</a>
+                        </li>
+                        <li class="md:hidden md:mr-8 lg:mr-10 flex items-center">
+                            <a class="hover:text-gray-800 text-gray-600 font-semibold pt-10 md:pt-0" href="./blog.html">Blog</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
        </div>
+    </header>
+</div>
+  <!--
+<div class="mt-12 container mx-auto xl:px-0">

-      </a>
+    <ul class="hidden text-lg sm:flex items-center flex-row-reverse">
+        <li onclick="toggleContent(this,1)" class="-mb-px border-b-2 border-gray-800 pb-5 text-gray-800 mr-20 MvTyper font-bold">ބަނޑޭރި</li>
+        <li onclick="toggleContent(this,2)" class="-mb-px cursor-pointer pb-5 text-gray-600 mr-20 MvTyper font-bold">ވިޔަފާރި</li>
+        <li onclick="toggleContent(this,3)" class="-mb-px cursor-pointer pb-5 text-gray-600 mr-20 MvTyper font-bold">ކުޅިވަރު</li>
+        <li onclick="toggleContent(this,4)" class="-mb-px cursor-pointer pb-5 text-gray-600 mr-20 MvTyper font-bold">ދުނިޔެ</li>
+    </ul>
+    <hr class="hidden sm:block border-t-2 border-gray-300" />

-    </nav>
+</div>

-  </div>
-</div>
+  -->
+<!-- Nav ends here -->
--- a/routes/web.php
+++ b/routes/web.php
@@ -20,7 +20,7 @@ use Spatie\Browsershot\Browsershot;
 |
 */

-Route::get('/', fn () => view('home'));
+Route::get('/', \HomeController::class)->name('home');
 Route::get('/preview', fn () => view('pages.preview'));
 Route::get('/download/android', fn () =>  redirect("https://play.google.com/store/apps/details?id=dev.baraveli.karudhaas"));

--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,14 @@
 const defaultTheme = require('tailwindcss/defaultTheme');

 module.exports = {
+    mode: 'jit',
+
    purge: [
-        './storage/framework/views/*.php', 
+        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
+        './vendor/laravel/jetstream/**/*.blade.php',
+        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
-        './resources/css/**/*.css',
        './resources/js/**/*.vue',
-        './resources/js/**/*.js',
    ],

    theme: {
@@ -21,5 +23,9 @@ module.exports = {
        opacity: ['responsive', 'hover', 'focus', 'disabled'],
    },

-    plugins: [require('@tailwindcss/ui')],
+    plugins: [
+        require('@tailwindcss/aspect-ratio'),
+        require('@tailwindcss/forms'), 
+        require('@tailwindcss/typography')
+    ],
 };
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -1,26 +1,23 @@
 const mix = require('laravel-mix');

-require('laravel-mix-postcss-config');
-require('laravel-mix-tailwind');
-require('laravel-mix-purgecss');
+/*
+ |--------------------------------------------------------------------------
+ | Mix Asset Management
+ |--------------------------------------------------------------------------
+ |
+ | Mix provides a clean, fluent API for defining some Webpack build steps
+ | for your Laravel applications. By default, we are compiling the CSS
+ | file for the application as well as bundling up all the JS files.
+ |
+ */

+mix.js('resources/js/app.js', 'public/js').vue()
+    .postCss('resources/css/app.css', 'public/css', [
+        require("@tailwindcss/jit"),
+        require('postcss-import'),
+        require('tailwindcss'),
+    ]);

-mix.js('resources/js/app.js', 'public/js')
-    .extract();
-
-    mix.postCss('resources/css/app.css', 'public/css')
-    .tailwind('./tailwind.config.js')
-    .purgeCss({
-        enabled: mix.inProduction(),
-        folders: ['./resources'],
-        extensions: ['php', 'js', 'vue']
-    });
-
+if (mix.inProduction()) {
    mix.version();
-    mix.options({
-        processCssUrls: false,
-    });
-    
-    if (! mix.inProduction()) {
-        mix.sourceMaps();
-    }
+}
				`@@ -1 +0,0 @@`
				!function(e){function r(r){for(var n,l,f=r[0],i=r[1],a=r[2],c=0,s=[];c<f.length;c++)l=f[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a\|\|[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,f=1;f<t.length;f++){var i=t[f];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)\|\|Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var f=window.webpackJsonp=window.webpackJsonp\|\|[],i=f.push.bind(f);f.push=r,f=f.slice();for(var a=0;a<f.length;a++)r(f[a]);var p=i;t()}([]);