git commit "style: improve tour flight details and auth pages"

resources/views/components/flight.blade.php

@@ -1,3 +1,235 @@
+<style>
+    .flight-image {
+        height: 260px;
+        position: relative;
+        overflow: hidden;
+    }
+
+
+    .flight-image img {
+        transition: .6s ease;
+    }
+
+
+    .card:hover .flight-image img {
+        transform: scale(1.08);
+    }
+
+
+     .card.border-0.shadow-sm.rounded-4.overflow-hidden {
+
+        border-radius: 24px !important;
+        overflow: hidden;
+        position: relative;
+        background: #fff;
+        transition: .4s ease;
+        border: 1px solid #f1f1f1 !important;
+
+    }
+
+
+    .card.border-0.shadow-sm.rounded-4.overflow-hidden:hover {
+
+        transform: translateY(-8px);
+
+        box-shadow:
+            0 20px 45px rgba(0,0,0,.12)!important;
+
+    }
+
+    .card form {
+
+        position:absolute;
+        top:18px;
+        left:18px;
+        z-index:5;
+
+    }
+
+
+    .card form button {
+
+        border-radius:50px;
+
+        background:rgba(255,255,255,.9);
+
+        backdrop-filter:blur(8px);
+
+        border:none;
+
+        padding:10px 18px;
+
+        color:#e63946;
+
+        font-weight:600;
+
+        box-shadow:
+            0 8px 20px rgba(0,0,0,.15);
+
+        transition:.3s;
+
+    }
+
+
+    .card form button:hover {
+
+        background:#e63946;
+
+        color:white;
+
+    }
+
+
+    .flight-badge {
+
+        position:absolute;
+
+        right:20px;
+
+        bottom:20px;
+
+        background:white;
+
+        color:#0d6efd;
+
+        padding:8px 20px;
+
+        border-radius:50px;
+
+        font-size:14px;
+
+        font-weight:700;
+
+        box-shadow:
+            0 8px 20px rgba(0,0,0,.15);
+
+    }
+
+    .flight-image:after {
+
+        content:"";
+
+        position:absolute;
+
+        inset:0;
+
+        background:
+            linear-gradient(
+                transparent,
+                rgba(0,0,0,.45)
+            );
+
+    }
+
+    .card-body {
+
+        padding:28px !important;
+
+    }
+
+
+    .card-body h5 {
+
+        font-size:22px;
+
+        font-weight:800 !important;
+
+        color:#222;
+
+    }
+
+    .route {
+
+        display:flex;
+
+        justify-content:center;
+
+        align-items:center;
+
+        gap:15px;
+
+        margin:25px 0;
+
+        font-weight:700;
+
+        font-size:16px;
+
+    }
+
+
+    .route .line {
+
+        width:55px;
+
+        height:2px;
+
+        background:#dbe7ff;
+
+        position:relative;
+
+    }
+
+
+    .route .line:after {
+
+        content:"✈";
+
+        position:absolute;
+
+        top:50%;
+        left:50%;
+
+        transform:translate(-50%,-50%);
+
+        background:white;
+
+        padding:5px;
+
+        color:#0d6efd;
+
+    }
+
+
+    .card-body strong {
+
+        font-size:20px;
+
+        color:#0d6efd;
+
+    }
+
+    .card-body .btn-primary {
+
+        background:linear-gradient(
+            135deg,
+            #0062ff,
+            #00b7ff
+        );
+
+        border:none;
+
+        padding:11px 30px;
+
+        font-weight:700;
+
+        box-shadow:
+            0 10px 25px rgba(0,98,255,.3);
+
+        transition:.3s;
+
+    }
+
+
+    .card-body .btn-primary:hover {
+
+        transform:translateY(-3px);
+
+        box-shadow:
+            0 15px 30px rgba(0,98,255,.4);
+
+    }
+</style>
+
 <div class="col-md-4">
     <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
         <form action="{{ route('users.favorite.store') }}" method="POST">
@@ -18,11 +250,10 @@
         </form>
 
         <div class="flight-image">
-
-            <img src="{{ asset($flight->image) }}"
+            <img src="{{ $flight->image ? asset('storage/'.$flight->image) : asset('assets/img/placeholder.jpg') }}"
+                 class="w-100 h-100 object-fit-cover"
                  alt="{{ $flight->airline }}">
-
-            <span class="flight-badge">
+             <span class="flight-badge">
             پرواز
         </span>