Style fixes and about page

public/css/styles.css

@@ -14,7 +14,8 @@
 }
 
 .MvAamu {
-    font-family: "Mvaamu";
+    
+    font-family: "Mvaamu",sans-serif;
 }
 
 .MvTyper {

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
-    "/js/app.js": "/js/app.js?id=aec5f58d45a831d17a96",
+    "/js/app.js": "/js/app.js?id=713804f0b0e614772183",
-    "/css/app.css": "/css/app.css?id=68d78a0cdd953755874d",
+    "/css/app.css": "/css/app.css?id=5dced5120f246bf09705",
     "/js/manifest.js": "/js/manifest.js?id=3c768977c2574a34506e",
     "/js/vendor.js": "/js/vendor.js?id=596002803ce0d197ef4c"
 }

resources/js/components/AvailableSources.vue

@@ -3,7 +3,8 @@
         <div class="mb-5">
             <div>
                 <h2
-                    class="text-gray-800 font-bold text-3xl text-center mt-3 mb-2 MvAamu"
+                    class="text-gray-800 text-3xl text-center mt-3 mb-2 MvAamu"
+                    style="font-weight: 100;"
                 >
                     މަސްދަރުތަށް
                 </h2>

resources/js/components/DiscoverTopics.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="border-b">
         <div>
-            <h2 class="text-gray-800 font-bold text-3xl text-center mt-3 mb-2 MvAamu">
+            <h2 class="text-gray-800 text-3xl text-center mt-3 mb-2 MvAamu"
+                style="font-weight: 100;" 
+                    >
                ތަފާތު މައުޟޫޢުތައް
             </h2>
         </div>

resources/js/components/RecentStories.vue

@@ -2,7 +2,8 @@
     <div class="mb-10">
         <div>
             <h3
-                class="text-gray-800 font-bold text-3xl text-center mt-5 mb-2 mr-3 MvAamu"
+                class="text-gray-800 text-3xl text-center mt-5 mb-2 mr-3 MvAamu"
+                style="font-weight: 100;"
             >
                 ފަހުގެ ޙަބަރުތަށް
             </h3>

resources/js/components/TodaysPick.vue

@@ -2,8 +2,8 @@
     <div>
         <div class="py-6 flex justify-center lg:justify-end md:justify-end">
             <h3
-                class="text-gray-800 font-bold text-3xl MvAamu"
+                class="text-gray-800 text-3xl MvAamu"
-                style="direction: rtl;"
+                style="direction: rtl; font-weight: 100;"
             >
                 މިއަދުގެ ޙުލާސާ
             </h3>

resources/views/layouts/app.blade.php

@@ -31,6 +31,8 @@
         <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')
+        
 </body>
 
 </html>

resources/views/pages/about.blade.php

@@ -0,0 +1,88 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="flex-1 overflow-hidden px-6 md:pl-12 md:pr-0 lg:pl-16 xl:pl-16 xl:pr-20 leading-relaxed text-lg" id="top">
+  <h1 class="mb-10 text-4xl font-bold text-gray-700 leading-none">What is Karudhaas App?</h1>
+  <div class="border-b bor"></div>
+  <p class="my-6 text-gray-800">
+    Karudhaas is a Web and a mobile app that helps you Discover Stories, Daily news, and inspirations. All with one app.
+    The app filters out articles from various news sites and aggregates them according to the respective article topics
+    and its source. We are planning to bring some major feature upgrades later on.
+  </p>
+  <div class="border-b mb-5"></div>
+
+  <h1 class="mb-10 text-2xl font-bold text-gray-700 leading-none">Late to go somewhere? We got you covered!</h1>
+  <p class="my-6 text-gray-800">
+    Karudhaas Also lets you save articles for later reading.
+  </p>
+  <div class="border-b mb-5"></div>
+
+  <h1 class="mb-10 text-2xl font-bold text-gray-700 leading-none">Got a favorite news site you check every morning?
+  </h1>
+  <p class="my-6 text-gray-800">
+    Karudhaas Also lets you filter out articles by your desired news source.
+  </p>
+  <div class="border-b mb-5"></div>
+  <h1 class="mb-10 text-2xl font-bold text-gray-700 leading-none">Contents</h1>
+  <p class="my-6 text-gray-800">
+    All the contents, logos, and images listed on the site are own by the respectful news site.
+    We respect the news outlets and there a way of earning so we will only be showing a summary partial content of the
+    article. users still have to visit the original link to view the full article.
+  </p>
+  <div class="border-b mb-5"></div>
+  <h1 class="mb-10 text-2xl font-bold text-gray-700 leading-none">Collection</h1>
+
+  <div class="mb-5">
+    <div class="flex flex-wrap justify-center">
+
+      <div class="flex flex-col items-center shadow hover:shadow-lg mr-5 rounded px-10 mt-3">
+        <div class="flex flex-col items-center">
+          <lottie-player
+            src="https://assets8.lottiefiles.com/datafiles/98a3d0add75fc3c86f6d6f9b148c111e/Newspaper animation.json"
+            background="transparent" speed="1" style="width: 80px; height: 80px;" loop autoplay></lottie-player>
+          <h1 class="font-bold text-xl text-gray-700">Articles</h1>
+          <h1 class="font-bold text-xl text-gray-700">{{$total_articles}}</h1>
+        </div>
+      </div>
+
+      <div class="flex flex-col items-center shadow hover:shadow-lg mr-5 rounded px-10 mt-3">
+        <div class="flex flex-col items-center">
+          <lottie-player src="https://assets2.lottiefiles.com/packages/lf20_TkGfat.json" background="transparent"
+            speed="1" style="width: 80px; height: 80px;" loop autoplay></lottie-player>
+          <h1 class="font-bold text-xl text-gray-700">Topics</h1>
+          <h1 class="font-bold text-xl text-gray-700">{{$total_topics}}</h1>
+        </div>
+
+      </div>
+
+      <div class="flex flex-col items-center shadow hover:shadow-lg mr-5 rounded px-10 mt-3">
+        <div class="flex flex-col items-center">
+          <lottie-player src="https://assets2.lottiefiles.com/packages/lf20_94KptK.json" background="transparent"
+            speed="1" style="width: 80px; height: 80px;" loop autoplay></lottie-player>
+          <h1 class="font-bold text-xl text-gray-700">Sources</h1>
+          <h1 class="font-bold text-xl text-gray-700">{{$sources->count()}}</h1>
+        </div>
+
+      </div>
+
+
+    </div>
+  </div>
+  <div class="mb-5">
+    <div class="flex flex-wrap justify-center">
+      @foreach ($sources as $source)
+      <a class="flex flex-col items-center shadow hover:shadow-lg mr-5 rounded p-10 mt-3"
+        href="{{route('sources.show', $source->id)}}">
+        <img class="h-16 w-16" src="{{$source->logo}}" alt="{{$source->slug}}" />
+      </a>
+      @endforeach
+
+    </div>
+    <div class="mb-5">
+
+    </div>
+    @endsection
+
+    @section('js')
+    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+    @endsection

routes/web.php

@@ -3,10 +3,12 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 use App\Article;
+use App\Source;
 use App\Http\Controllers\ArticlesController;
 use App\Http\Controllers\TopicsController;
 use App\Http\Controllers\SourcesController;
 use App\Http\Controllers\MylistController;
+use App\Topic;
 
 /*
 |--------------------------------------------------------------------------
@@ -31,6 +33,14 @@ Route::get('/source/{source:slug}', [SourcesController::class,'show'])->name('so
 Route::get('/mylist', [MylistController::class, 'index'])->name('mylist.index');
 Route::post('/mylist/{article:id}', [MylistController::class, 'store'])->name('mylist.store');
 
+Route::get('/about', function(){
+    return view('pages.about', [
+        'sources' => Source::all(),
+        'total_topics' => Topic::count(),
+        'total_articles' => Article::count()
+    ]);
+});
+
 Route::get('/ogimage', function(Request $request) {
 
     $article = Article::findOrFail($request->query('id'));