update CMS info view

Author: cklei-carly

resources/css/widgets.css

@@ -17,37 +17,3 @@
         @apply focus:outline-none focus-visible:ring-primary-500 dark:focus-visible:ring-primary-500;
     }
 }
-
-
-.fi-wi-cms-info {
-    
-    @apply grid gap-6 lg:grid-rows-3 lg:grid-flow-col lg:gap-8;
-
-    .card {
-        @apply shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05];
-        @apply hover:text-black/70 hover:ring-black/20 dark:hover:text-white/70 dark:hover:ring-white/20;
-        &#docs-card {
-            @apply gap-6 overflow-hidden lg:row-span-3 lg:col-span-2;
-        }
-        &:not(#docs-card) {
-            @apply gap-4 lg:col-span-2 lg:row-span-1;
-        }
-    }
-    #docs-card #screenshot-container {
-        @apply relative flex w-full flex-1 items-stretch;
-
-        .screenshot {
-            @apply aspect-video h-full w-full flex-1 rounded-[10px] object-top object-cover;
-
-            &.light-screenshot {
-                @apply drop-shadow-[0px_4px_34px_rgba(0,0,0,0.06)] dark:hidden;
-            }
-            &.dark-screenshot {
-                @apply hidden drop-shadow-[0px_4px_34px_rgba(0,0,0,0.25)] dark:block;
-            }
-        }
-    }
-    > .fi-wi-widget {
-        @apply lg:col-span-2 lg:row-span-2;
-    }
-}

resources/dist/inspirecms.css

@@ -1,66 +1,32 @@
-
-<x-filament-widgets::widget class="fi-wi-cms-info">
-    <a
-        href="{{ $this->getDocumentUrl() }}"
-        id="docs-card"
-        class="card flex-col"
-    >
-        <div id="screenshot-container" class="relative flex w-full flex-1 items-stretch">
-            <img
-                src="{{ $this->getLightScreenshotUrl() }}"
-                alt="Laravel documentation screenshot"
-                class="screenshot light-screenshot"
-                onerror="
-                    document.getElementById('screenshot-container').classList.add('!hidden');
-                    document.getElementById('docs-card').classList.add('!row-span-1');
-                    document.getElementById('docs-card-content').classList.add('!flex-row');
-                    document.getElementById('background').classList.add('!hidden');
-                "
-            />
-            <img
-                src="{{ $this->getDarkScreenShotUrl() }}"
-                alt="Laravel documentation screenshot"
-                class="screenshot dark-screenshot"
-            />
-        </div>
-
-        <div class="relative flex items-center gap-6 lg:items-end">
-            <div id="docs-card-content" class="flex items-start gap-6 lg:flex-col">
-                <div class="icon-container">
-                    <x-filament::icon icon="heroicon-o-book-open" class="icon" />
-                </div>
-
-                <div class="pt-3 sm:pt-5 lg:pt-0">
-                    <h2>Documentation</h2>
-
-                    <p class="mt-4 text-sm/relaxed">
-                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui voluptatum, voluptatibus sequi excepturi expedita distinctio vel recusandae, eligendi illo cum iusto incidunt libero, minus tempora alias quae at sed eaque!
-                    </p>
-                </div>
+<x-filament-widgets::widget>
+    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 pb-4">
+        <a href="{{ $this->getDocumentUrl() }}" class="flex items-center p-6 bg-white rounded-lg shadow-sm dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
+            <div class="mr-4">
+                <x-filament::icon icon="heroicon-o-book-open" class="w-8 h-8 text-primary-500" />
             </div>
+            <div class="flex-1">
+                <h3 class="text-lg font-medium">Documentation</h3>
+                <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                    Access our comprehensive guides and documentation
+                </p>
+            </div>
+            <x-filament::icon icon="heroicon-o-chevron-right" class="w-5 h-5 text-gray-400" />
+        </a>
 
-            <x-filament::icon icon="heroicon-o-chevron-right" class="icon" />
-        </div>
-    </a>
-
-    <a
-        href="{{ $this->getNewsUrl() }}"
-        class="card"
-    >
-        <div class="icon-container">
-            <x-filament::icon icon="heroicon-o-newspaper" class="icon" />
-        </div>
-
-        <div class="pt-3 sm:pt-5">
-            <h2>News</h2>
-
-            <p class="mt-4 text-sm/relaxed">
-                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo, maiores recusandae. Ex incidunt laboriosam suscipit asperiores deleniti accusantium magni eaque corporis enim, labore aspernatur nihil, culpa maxime rerum nisi? Error.
-            </p>
-        </div>
+        <a href="{{ $this->getNewsUrl() }}" class="flex items-center p-6 bg-white rounded-lg shadow-sm dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
+            <div class="mr-4">
+                <x-filament::icon icon="heroicon-o-newspaper" class="w-8 h-8 text-primary-500" />
+            </div>
+            <div class="flex-1">
+                <h3 class="text-lg font-medium">News</h3>
+                <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                    Stay updated with latest features and announcements
+                </p>
+            </div>
+            <x-filament::icon icon="heroicon-o-chevron-right" class="w-5 h-5 text-gray-400" />
+        </a>
 
-        <x-filament::icon icon="heroicon-o-chevron-right" class="icon" />
-    </a>
+    </div>
 
     @livewire(\SolutionForest\InspireCms\Filament\Widgets\PageActivity::class)