fix: info and achievement section

Author: itsemon245

app/Http/Requests/UpdateAchievementRequest.php

@@ -6,13 +6,6 @@
 
 class UpdateAchievementRequest extends FormRequest
 {
-    /**
-     * Determine if the user is authorized to make this request.
-     */
-    public function authorize(): bool
-    {
-        return auth()->user() !== null;
-    }
 
     /**
      * Get the validation rules that apply to the request.
@@ -24,7 +17,7 @@ public function rules(): array
         return [
             'user' => 'required',
             'total_user' => 'required',
-            'image' => '|nullable|required',
+            'image' => 'nullable',
         ];
     }
 }

resources/views/backend/info/editInfo.blade.php

@@ -17,8 +17,8 @@
                             <x-backend.form.select-input id="section" label="Section" name="section"
                                 placeholder="Choose Section..." onchange="getSectionTitle(this)">
                                 {{-- <option selected disabled>Choose Section...</option> --}}
-                                <option value="1" {{ $info->section_id === 1 ? 'selected' : '' }}>Section 1</option>
-                                <option value="2" {{ $info->section_id === 2 ? 'selected' : '' }}>Section 2</option>
+                                <option value="1" @selected($info->section_id == 1)>Section 1</option>
+                                <option value="2" @selected($info->section_id == 2)>Section 2</option>
                             </x-backend.form.select-input>
                         </div>
                         <div class="col-md-6">

resources/views/components/frontend/achievements.blade.php

@@ -5,20 +5,16 @@
             <div class="col-sm-6 col-md-4 col-xl-3 mb-1 px-2 align-items-center justify-content-center">
                 <div class="px-1 bg-primary rounded">
                     <div class="card rounded">
-                        <div class="row" style="height: 8rem;">
-                            <div class="col-6 ps-2 pe-0" style="height: 100%">
-                                <img loading="lazy" class="rounded-start ps-1" style="width:100%;height:100%;"
-                                    src="{{ useImage($item->image) }}" alt="">
-                            </div>
-                            <div class="col-6 ps-0 pe-2 flex items-center justify-center">
-                                <div>
-                                    <p
-                                        class="m-0 fw-medium mt-2 text-center text-primary whitespace-nowrap text-ellipsis">
-                                        {{ $item->title }}</p>
-                                    <h2 class="counter-up m-0 text-primary text-center"
-                                        style="font-size: 32px; font-weight: 700;">
-                                        {{ $item->count }}</h2>
-                                </div>
+                        <div class="grid grid-cols-5 gap-3" style="height: 8rem;">
+                            <img loading="lazy" class="rounded-l-sm  col-span-2 object-cover" style="width:100%; height:100%;"
+                                src="{{ useImage($item->image) }}" alt="">
+                            <div class="col-span-3 flex flex-col w-full items-center justify-center pr-3">
+                                <div
+                                    class="fw-medium text-center text-primary whitespace-nowrap text-ellipsis overflow-hidden w-full">
+                                    {{ $item->title }}</div>
+                                <h2 class="counter-up m-0 text-primary text-center"
+                                    style="font-size: 32px; font-weight: 700;">
+                                    {{ $item->count }}</h2>
                             </div>
                         </div>
                     </div>

resources/views/components/frontend/info-card.blade.php

@@ -1,6 +1,6 @@
-<div class="d-flex flex-column align-items-center mx-4 my-2">
-    <img loading="lazy" class="rounded" style="max-width: 100px;" src="{{ useImage($info->image_url) }}" alt="info-image{{ $info->id }}" loading="lazy">
-    <p class="mt-3 mb-2" style="text-align: justify;max-width:260px;">
+<div class="d-flex flex-column align-items-center w-full">
+    <img loading="lazy" class="rounded object-cover w-[120px] h-[90px]" src="{{ useImage($info->image_url) }}" alt="info-image{{ $info->id }}" loading="lazy">
+    <div class="mt-3 mb-2">
         {!! $info->description !!}
-    </p>
+    </div>
 </div>

resources/views/components/frontend/info-section.blade.php

@@ -2,14 +2,9 @@
     $title = $attributes->get('title');
 @endphp
 <section class="mt-5 mb-2 px-5 py-2">
-    <div>
-        <h2 {{ $attributes->merge(['class' => 'text-uppercase text-center mb-5']) }}
-            style="font-size: 28px; font-weight: 800;">{!! $title !!}</h2>
-        <div class="d-flex align-items-center justify-content-center" style="flex-wrap: wrap;">
-            {!! $slot !!}
-        </div>
-    </div>
-    <div>
-
+    <h2 {{ $attributes->merge(['class' => 'text-uppercase text-center mb-5']) }}
+        style="font-size: 28px; font-weight: 800;">{!! $title !!}</h2>
+    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 items-center justify-center">
+        {!! $slot !!}
     </div>
 </section>