This commit is contained in:
Younes ENNAJI
2025-03-18 22:08:01 +00:00
parent 5f4a8beaa3
commit 24d3c90752
4 changed files with 127 additions and 3 deletions
+1 -1
View File
@@ -1,5 +1,5 @@
{
"dist/main.css": "/dist/main.714d0d61.css",
"dist/main.css": "/dist/main.9d03d300.css",
"dist/main.js": "/dist/main.3be5bc06.js",
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
"dist/455.095e6545.js": "/dist/455.095e6545.js",
+124
View File
@@ -54,6 +54,130 @@ layout: default
</p>
<!-- Version requirements - improved design -->
<div class="mb-8">
<!-- Section Title -->
<h3 class="text-sm uppercase tracking-wide text-indigo-500 font-semibold mb-4">System Requirements</h3>
<!-- Requirements Cards Container -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 perspective-1000">
<!-- PHP Card -->
<div class="group relative transform transition-all duration-500 hover:-translate-y-2 hover:rotate-1">
<!-- Glossy background with animated gradient -->
<div class="absolute inset-0 bg-gradient-to-br from-indigo-400/20 via-purple-400/20 to-pink-400/20 rounded-2xl blur opacity-60 group-hover:opacity-80 transition-opacity"></div>
<!-- Card content -->
<div class="relative overflow-hidden rounded-2xl border border-indigo-200 bg-gradient-to-br from-white to-indigo-50 p-1">
<div class="absolute -right-12 -top-12 h-40 w-40 bg-indigo-100 rounded-full opacity-30"></div>
<div class="absolute -left-4 -bottom-4 h-24 w-24 bg-purple-100 rounded-full opacity-30"></div>
<div class="relative backdrop-blur-sm bg-white/80 rounded-xl p-6 h-full shadow-sm">
<!-- Top bar indicator -->
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-t-xl"></div>
<div class="flex items-center">
<!-- Icon with animated ring -->
<div class="relative">
<div class="absolute inset-0 bg-indigo-200 rounded-full animate-ping opacity-30 group-hover:opacity-60 duration-1000"></div>
<div class="relative bg-gradient-to-br from-indigo-500 to-indigo-700 rounded-full h-16 w-16 flex items-center justify-center shadow-lg">
<i class="fa-brands fa-php text-white text-2xl"></i>
</div>
</div>
<div class="ml-6 flex flex-col">
<div class="uppercase tracking-wider text-xs font-bold text-indigo-400">Required</div>
<h4 class="text-xl font-bold text-slate-800">PHP Version</h4>
<div class="flex items-center mt-1.5">
<span class="inline-block px-3 py-1 rounded-full bg-gradient-to-r from-indigo-100 to-indigo-200 text-indigo-800 font-semibold text-sm">
v8.2 or higher
</span>
<div class="ml-2 h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
</div>
</div>
</div>
<!-- Bottom compatibility note -->
<div class="mt-4 pt-4 border-t border-indigo-100 text-sm text-slate-500 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-400 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Recommended: PHP 8.2+</span>
</div>
</div>
</div>
</div>
<!-- Symfony Card -->
<div class="group relative transform transition-all duration-500 hover:-translate-y-2 hover:-rotate-1">
<!-- Glossy background with animated gradient -->
<div class="absolute inset-0 bg-gradient-to-br from-slate-400/20 via-black/10 to-black/20 rounded-2xl blur opacity-60 group-hover:opacity-80 transition-opacity"></div>
<!-- Card content -->
<div class="relative overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-br from-white to-slate-50 p-1">
<div class="absolute -right-12 -top-12 h-40 w-40 bg-slate-100 rounded-full opacity-30"></div>
<div class="absolute -left-4 -bottom-4 h-24 w-24 bg-slate-100 rounded-full opacity-30"></div>
<div class="relative backdrop-blur-sm bg-white/80 rounded-xl p-6 h-full shadow-sm">
<!-- Top bar indicator -->
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-slate-600 to-black rounded-t-xl"></div>
<div class="flex items-center">
<!-- Icon with animated ring -->
<div class="relative">
<div class="absolute inset-0 bg-slate-200 rounded-full animate-ping opacity-30 group-hover:opacity-60 duration-1000"></div>
<div class="relative bg-gradient-to-br from-slate-700 to-black rounded-full h-16 w-16 flex items-center justify-center shadow-lg">
<i class="fa-brands fa-symfony text-white text-2xl"></i>
</div>
</div>
<div class="ml-6 flex flex-col">
<div class="uppercase tracking-wider text-xs font-bold text-slate-400">Required</div>
<h4 class="text-xl font-bold text-slate-800">Symfony Version</h4>
<div class="flex items-center mt-1.5">
<span class="inline-block px-3 py-1 rounded-full bg-gradient-to-r from-slate-100 to-slate-200 text-slate-800 font-semibold text-sm">
v7.0 or higher
</span>
<div class="ml-2 h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
</div>
</div>
</div>
<!-- Bottom compatibility note -->
<div class="mt-4 pt-4 border-t border-slate-100 text-sm text-slate-500 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-400 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Recommended: Symfony 7.0+</span>
</div>
</div>
</div>
</div>
</div>
<!-- Legacy version note -->
<div class="mt-6 bg-gradient-to-r from-amber-50 to-orange-50 rounded-xl p-5 border border-amber-200/50 shadow-sm transform transition-all hover:shadow-md">
<div class="flex items-start">
<div class="shrink-0 bg-amber-100 rounded-full p-2.5 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="ml-4">
<h3 class="text-base font-medium text-amber-800">Using older versions?</h3>
<p class="mt-1 text-amber-700">
For PHP &lt; 8.2 or Symfony &lt; 7.0, use
<a href="https://php-flasher.github.io/" class="font-medium text-amber-900 underline hover:text-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 rounded">
<span class="font-semibold">PHPFlasher v1</span>
</a>.
It supports PHP ≥ 5.3 and Symfony ≥ 2.0.
</p>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div class="bg-gradient-to-br from-indigo-50 to-slate-50 rounded-lg border border-indigo-100 p-4 shadow-sm">
<div class="flex items-center">
+1 -1
View File
@@ -2,7 +2,7 @@
"entrypoints": {
"main": {
"css": [
"/dist/main.714d0d61.css"
"/dist/main.9d03d300.css"
],
"js": [
"/dist/main.3be5bc06.js"
File diff suppressed because one or more lines are too long