feat(ui): polish project preview showcases

src/App.css

@@ -510,46 +510,48 @@ h3 {
 .project-preview {
   align-items: center;
   background:
-    radial-gradient(circle at 22% 18%, rgba(18, 184, 134, 0.22), transparent 30%),
-    radial-gradient(circle at 82% 20%, rgba(246, 95, 66, 0.18), transparent 30%),
-    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(224, 244, 250, 0.72)),
+    radial-gradient(circle at 20% 18%, rgba(18, 184, 134, 0.24), transparent 32%),
+    radial-gradient(circle at 86% 18%, rgba(246, 95, 66, 0.18), transparent 34%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(224, 244, 250, 0.76)),
     #eaf7fb;
-  border: 1px solid rgba(8, 126, 164, 0.18);
-  border-radius: 8px;
+  border: 1px solid rgba(8, 126, 164, 0.20);
+  border-radius: 14px;
   box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
-    0 18px 48px rgba(37, 76, 105, 0.12);
+    inset 0 1px 0 rgba(255, 255, 255, 0.86),
+    inset 0 -22px 44px rgba(8, 126, 164, 0.05),
+    0 22px 54px rgba(37, 76, 105, 0.12);
   display: flex;
-  height: clamp(350px, 34vw, 460px);
+  height: clamp(360px, 34vw, 470px);
   justify-content: center;
   margin-bottom: 24px;
   overflow: hidden;
-  padding: 22px;
+  padding: clamp(18px, 3vw, 30px);
   position: relative;
   isolation: isolate;
+  perspective: 1200px;
 }
 
 .project-preview::before {
   background-position: center;
   background-size: cover;
   content: "";
-  filter: blur(18px) saturate(1.12);
-  inset: -24px;
-  opacity: 0.34;
+  filter: blur(24px) saturate(1.16);
+  inset: -34px;
+  opacity: 0.26;
   position: absolute;
-  transform: scale(1.08);
+  transform: scale(1.1);
   z-index: -2;
 }
 
 .project-preview::after {
   background:
-    linear-gradient(90deg, rgba(255, 255, 255, 0.52), transparent 16% 84%, rgba(255, 255, 255, 0.34)),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 42%);
+    linear-gradient(90deg, rgba(255, 255, 255, 0.56), transparent 18% 82%, rgba(255, 255, 255, 0.30)),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.64), transparent 42%);
   border: 1px solid rgba(8, 126, 164, 0.16);
-  border-radius: 8px;
+  border-radius: 14px;
   content: "";
-  inset: 30px;
-  opacity: 0.54;
+  inset: 24px;
+  opacity: 0.62;
   position: absolute;
   transform: rotate(-2deg);
   z-index: -1;
@@ -566,8 +568,8 @@ h3 {
 .project-preview img {
   border-radius: 18px;
   box-shadow:
-    0 28px 70px rgba(37, 76, 105, 0.30),
-    0 0 0 1px rgba(255, 255, 255, 0.74);
+    0 26px 70px rgba(37, 76, 105, 0.30),
+    0 0 0 1px rgba(255, 255, 255, 0.76);
   display: block;
   max-height: calc(100% - 4px);
   max-width: 100%;
@@ -576,64 +578,103 @@ h3 {
   transition: filter 320ms ease, transform 320ms ease, box-shadow 320ms ease;
 }
 
+.project-preview-1 {
+  background:
+    radial-gradient(circle at 18% 22%, rgba(84, 119, 255, 0.22), transparent 32%),
+    radial-gradient(circle at 78% 22%, rgba(255, 83, 182, 0.18), transparent 34%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(238, 247, 255, 0.82));
+}
+
+.project-preview-1::after {
+  inset: 34px 28px;
+  opacity: 0.56;
+  transform: rotate(1.2deg);
+}
+
+.project-preview-1 img {
+  aspect-ratio: 16 / 9;
+  border-radius: 14px;
+  max-height: none;
+  object-fit: cover;
+  transform: rotate(-1.2deg) rotateX(2deg) scale(0.98);
+  width: min(100%, 760px);
+}
+
 .project-preview-count-3 {
-  height: clamp(370px, 35vw, 480px);
-  padding: 20px;
+  background:
+    radial-gradient(circle at 26% 28%, rgba(18, 184, 134, 0.22), transparent 31%),
+    radial-gradient(circle at 78% 24%, rgba(138, 92, 246, 0.13), transparent 30%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(232, 251, 248, 0.74));
+  height: clamp(390px, 36vw, 500px);
+  padding: 24px;
 }
 
 .project-preview-count-3::after {
-  inset: 42px 74px;
-  transform: rotate(2deg);
+  background:
+    radial-gradient(ellipse at center, rgba(18, 184, 134, 0.15), transparent 58%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.12));
+  inset: 44px 70px;
+  opacity: 0.72;
+  transform: rotate(1.6deg);
 }
 
 .project-preview-count-3 img {
-  border-radius: 24px;
-  max-height: 88%;
-  max-width: 38%;
+  background: #ffffff;
+  border: 5px solid rgba(19, 37, 56, 0.84);
+  border-radius: 30px;
+  box-shadow:
+    0 26px 54px rgba(37, 76, 105, 0.26),
+    0 0 0 1px rgba(255, 255, 255, 0.78);
+  filter: saturate(1.04) contrast(1.01);
+  max-height: 82%;
+  max-width: 33%;
   position: absolute;
   top: 50%;
 }
 
 .project-preview-count-3 img:nth-child(1) {
-  opacity: 0.86;
-  transform: translate(-78%, -48%) rotate(-8deg) scale(0.9);
+  opacity: 0.96;
+  transform: translate(-86%, -46%) rotate(-9deg) scale(0.92);
   z-index: 1;
 }
 
 .project-preview-count-3 img:nth-child(2) {
-  transform: translate(-2%, -52%) rotate(0deg) scale(1.06);
+  transform: translate(-2%, -49%) rotate(0deg) scale(1.08);
   z-index: 3;
 }
 
 .project-preview-count-3 img:nth-child(3) {
-  opacity: 0.92;
-  transform: translate(70%, -48%) rotate(8deg) scale(0.9);
+  opacity: 0.96;
+  transform: translate(82%, -46%) rotate(9deg) scale(0.92);
   z-index: 2;
 }
 
 .project-preview-2 img {
-  border-radius: 26px;
-  transform: rotate(2deg) scale(1.03);
+  border-radius: 30px;
 }
 
 .project-card:hover .project-preview img {
   filter: saturate(1.08) contrast(1.04);
   box-shadow:
-    0 34px 84px rgba(37, 76, 105, 0.34),
+    0 34px 84px rgba(37, 76, 105, 0.32),
     0 0 0 1px rgba(255, 255, 255, 0.82);
   transform: translateY(-6px) rotate(0deg) scale(1.08);
 }
 
+.project-card:hover .project-preview-1 img {
+  transform: translateY(-6px) rotate(0deg) rotateX(0deg) scale(1.02);
+}
+
 .project-card:hover .project-preview-count-3 img:nth-child(1) {
-  transform: translate(-84%, -50%) rotate(-10deg) scale(0.94);
+  transform: translate(-92%, -48%) rotate(-11deg) scale(0.95);
 }
 
 .project-card:hover .project-preview-count-3 img:nth-child(2) {
-  transform: translate(-2%, -56%) rotate(0deg) scale(1.1);
+  transform: translate(-2%, -52%) rotate(0deg) scale(1.12);
 }
 
 .project-card:hover .project-preview-count-3 img:nth-child(3) {
-  transform: translate(76%, -50%) rotate(10deg) scale(0.94);
+  transform: translate(88%, -48%) rotate(11deg) scale(0.95);
 }
 
 .project-index {