Feature/tools (#157)

* Responsive images tools * Fixed layout * Added responsive images component * Created a `ToolsController` * Added text * Improved the generator template * Added tools index * Added image dimensions * Update resources/views/themes/bimbala/tools/responsive-images.blade.php Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Bimbalacom · Apr 11, 2024 · 9a029e4 · 9a029e4
1 parent 9d579c4
commit 9a029e4
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 3 deletions.
diff --git a/app/Http/Controllers/ToolsController.php b/app/Http/Controllers/ToolsController.php
@@ -0,0 +1,30 @@
+<?php
+declare(strict_types=1);
+
+namespace App\Http\Controllers;
+
+use Illuminate\Contracts\Foundation\Application;
+use Illuminate\Contracts\View\Factory;
+use Illuminate\Contracts\View\View;
+use Illuminate\Http\Request;
+
+class ToolsController extends Controller
+{
+    public function index(): Factory|View|Application
+    {
+        return view('theme::tools', ['seo' => [
+            'seo_title' => 'Free tools',
+            'seo_description' => 'Our free for use online tools.',
+            'seo_keywords' => 'responsive images, tools, online, web, changelog, generator, free'
+        ]]);
+    }
+
+    public function responsiveImages(): Factory|View|Application
+    {
+        return view('theme::tools.responsive-images', ['seo' => [
+            'seo_title' => 'Resonsive images generator',
+            'seo_description' => 'Responsive images generation made easily.',
+            'seo_keywords' => 'responsive images, image generator, image resonsive, image breakpoints, free, online generator, image tools, srcset, sm, xs, md, lg, 2xl, google lighthouse report'
+        ]]);
+    }
+}
diff --git a/public/themes/bimbala/css/app.css b/public/themes/bimbala/css/app.css
diff --git a/public/themes/bimbala/images/tools/responsive-images.webp b/public/themes/bimbala/images/tools/responsive-images.webp
diff --git a/public/themes/bimbala/mix-manifest.json b/public/themes/bimbala/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/js/app.js": "/js/app.js?id=31044e78bdf2a1f38951",
-    "/css/app.css": "/css/app.css?id=ce9d45e573615a52be20"
+    "/css/app.css": "/css/app.css?id=5ab7d5beab2038765891"
 }
diff --git a/resources/views/themes/bimbala/layouts/app.blade.php b/resources/views/themes/bimbala/layouts/app.blade.php
@@ -82,7 +82,7 @@
 @include('theme::partials.header')
 
 <main class="flex-grow overflow-x-hidden">
-    @unless (Request::is(['/', 'login', 'announcement*', 'pricing', 'register', 'dashboard', 'account/*', 'password/*', '@*', 'blog/*']))
+    @unless (Request::is(['/', 'login', 'announcement*', 'pricing', 'register', 'dashboard', 'account/*', 'password/*', '@*', 'blog/*', '/tools/*']))
         <div class="bg-gray-900">
             <div class="max-w-7xl mx-auto py-16 px-4 sm:py-20 sm:px-6 lg:px-8 lg:flex lg:justify-between">
                 <div class="max-w-xl">

diff --git a/resources/views/themes/bimbala/tools.blade.php b/resources/views/themes/bimbala/tools.blade.php
@@ -0,0 +1,52 @@
+@extends('theme::layouts.app')
+
+@section('content')
+    <div>
+        <!-- Page Container -->
+        <div
+            id="page-container"
+            class="mx-auto flex w-full min-w-[320px] flex-col"
+        >
+            <!-- Page Content -->
+            <main id="page-content" class="flex max-w-full flex-auto flex-col">
+                <div
+                    class="container mx-auto space-y-10 px-4 py-8 lg:space-y-16 lg:px-8 lg:py-24 xl:max-w-7xl"
+                >
+                    <!-- Popular Tools -->
+                    <section class="space-y-6">
+                        <nav class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-8">
+                            <!-- Tool -->
+                            <a
+                                href="{{route('tools.responsive-images')}}"
+                                class="group aspect-h-10 aspect-w-16 relative overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-indigo-500/50 active:opacity-75 active:ring-indigo-500/25"
+                            >
+                                <img
+                                    class="object-cover rounded-b-3xl"
+                                    src="{{ asset('themes/bimbala/images/tools/responsive-images.webp') }}"
+                                    alt="Same image in different sizes"
+                                    width="100%"
+                                    height="100%"
+                                />
+                                <div
+                                    class="absolute inset-0 flex flex-col justify-between bg-gradient-to-b from-transparent via-black/10 to-black"
+                                >
+                                    <div class="flex flex-1 items-end justify-between gap-2 px-4 py-5">
+                                        <div class="space-y-1">
+                                            <h2 class="text-xl font-semibold text-white">
+                                                Responsive images generator
+                                            </h2>
+                                        </div>
+                                    </div>
+                                </div>
+                            </a>
+                            <!-- END Tool -->
+                        </nav>
+                    </section>
+                    <!-- END Popular Tools -->
+                </div>
+            </main>
+            <!-- END Page Content -->
+        </div>
+        <!-- END Page Container -->
+    </div>
+@endsection
diff --git a/resources/views/themes/bimbala/tools/responsive-images.blade.php b/resources/views/themes/bimbala/tools/responsive-images.blade.php
@@ -0,0 +1,10 @@
+@extends('theme::layouts.app')
+
+@section('content')
+    <div class="bg-gray-100 h-screen overflow-hidden">
+        <div class="pt-12">
+            <p class="text-center text-xl prose-sm">Upload your picture (preferably large) and we will generate you images for different breakpoints with optimal dimensions.</p>
+        </div>
+        <iframe src="https://bimbala-responsive-images.netlify.app" width="100%" height="100%" frameborder="0" loading="eager" class="overflow-hidden focus:outline-none" scrolling="no" fetchpriority="high">Your browser doesn't support iframes.</iframe>
+    </div>
+@endsection
diff --git a/routes/web.php b/routes/web.php
@@ -11,6 +11,7 @@
 |
 */
 use App\Http\Controllers\ContactController;
+use App\Http\Controllers\ToolsController;
 
 // Authentication routes
 Auth::routes();
@@ -46,6 +47,10 @@
         'seo_title' => 'Apps', 'seo_description' => 'Our applications are fast and simple. Doing what you love, where you want it.',
     ]]);
 })->name('apps');
+Route::prefix('tools')->name('tools.')->group(function () {
+    Route::get('/', [ToolsController::class, 'index'])->name('index');
+    Route::get('responsive-images', [ToolsController::class, 'responsiveImages'])->name('responsive-images');
+});
 Route::redirect('/discord','https://discord.gg/tADx7aJusB');
 
 Route::get('/contact', [ContactController::class, 'serveThePage'])->name('contact');