small fixes

app/page.tsx

@@ -41,8 +41,8 @@ export default function Home() {
           <div className="absolute inset-0 bg-blue-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
           <Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl">
             <Image
-              src="/images/airport.jpg"
+              src="/images/IMG_3602.jpeg"
-              alt="Airport Transfer"
+              alt="Reptéri transzfer"
               fill
               sizes="(min-width: 768px) 450px, 90vw"
               className="object-cover group-hover:scale-105 transition-transform duration-700"
@@ -128,17 +128,28 @@ export default function Home() {
         <div className="relative group p-4">
           <div className="absolute inset-0 bg-orange-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
           <Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl bg-white flex items-center justify-center p-8">
-            <div className="text-center space-y-6">
+            <Image
-              <div className="w-20 h-20 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto">
+              src="/images/booking-bg.svg"
+              alt=""
+              fill
+              sizes="(min-width: 768px) 450px, 90vw"
+              className="object-cover opacity-35"
+              aria-hidden
+            />
+            <div className="absolute inset-0 bg-gradient-to-b from-white/95 via-white/80 to-white/95" />
+            <div className="absolute inset-0 backdrop-blur-[1px]" />
+            <div className="relative text-center space-y-6">
+              <div className="w-20 h-20 bg-white rounded-2xl flex items-center justify-center mx-auto shadow-[0_20px_40px_rgba(15,23,42,0.15)] ring-1 ring-orange-200/70">
                 <Star className="w-10 h-10 text-orange-500" />
               </div>
-              <h4 className="text-2xl font-black uppercase tracking-tighter">{t.features.booking.cardCaption}</h4>
+              <h4 className="text-2xl font-black uppercase tracking-tighter text-slate-900">{t.features.booking.cardCaption}</h4>
-              <p className="text-slate-500 text-sm font-medium leading-relaxed max-w-xs mx-auto">
+              <p className="text-slate-700 text-sm font-medium leading-relaxed max-w-xs mx-auto">
                 {t.features.booking.cardDescription}
               </p>
               <div className="space-y-2 pt-4">
-                <div className="h-2 w-48 bg-slate-100 rounded-full mx-auto" />
+                <div className="h-2 w-48 bg-slate-200/70 rounded-full mx-auto" >
-                <div className="h-2 w-32 bg-slate-50 rounded-full mx-auto" />
+                </div>
+                <div className="h-2 w-32 bg-slate-200/40 rounded-full mx-auto" />
               </div>
             </div>
           </Card>
@@ -198,7 +209,7 @@ export default function Home() {
           <div className="absolute inset-0 bg-cyan-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
           <Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl">
             <Image
-              src="/images/mercedes.jpg"
+              src="/images/IMG_4376.jpeg"
               alt="Non-stop help"
               fill
               sizes="(min-width: 768px) 450px, 90vw"

images/carousel_i.css

@@ -1,138 +0,0 @@
-}/* GLOBAL STYLES
--------------------------------------------------- */
-/* Padding below the footer and lighter body text */
-
-body {
-  padding-bottom: 40px;
-}
-
-
-/* CUSTOMIZE THE NAVBAR
--------------------------------------------------- */
-
-/* Special class on .container surrounding .navbar, used for positioning it into place. */
-.navbar-wrapper {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 20;
-}
-
-/* Flip around the padding for proper display in narrow viewports */
-.navbar-wrapper > .container {
-  padding-right: 0;
-  padding-left: 0;
-}
-.navbar-wrapper .navbar {
-  padding-right: 15px;
-  padding-left: 15px;
-}
-.navbar-wrapper .navbar .container {
-  width: auto;
-}
-
-
-/* CUSTOMIZE THE CAROUSEL
--------------------------------------------------- */
-
-/* Carousel base class */
-/* Since positioning the image, we need to help out the caption */
-
-/* Declare heights because of positioning of img element */
-
-.row {
-  margin-top: 20px;
-
-}
-
-.carousel {
-   box-shadow: 0px 0px 20px 10px #111113;
-
-}
-
-.carousel .item {
-  margin-top: 123px;
-  background-color: #777;
-}
-.carousel-inner > .item > img {
-  top: 0;
-  left: 0;
-  min-width: 100%;
-   box-shadow: 0px 0px 20px 10px #111113;
-
-}
-
-
-/* MARKETING CONTENT
--------------------------------------------------- */
-
-/* Center align the text within the three columns below the carousel */
-.marketing .col-lg-4 {
-  margin-bottom: 20px;
-  text-align: center;
-}
-
-.marketing h2 {
-  font-weight: normal;
-}
-.marketing .col-lg-4 p {
-  margin-right: 10px;
-  margin-left: 10px;
-}
-
-
-/* Featurettes
-------------------------- */
-
-.featurette-divider {
-  margin: 80px 0; /* Space out the Bootstrap <hr> more */
-}
-
-/* Thin out the marketing headings */
-.featurette-heading {
-  font-weight: 300;
-  line-height: 1;
-  letter-spacing: -1px;
-}
-
-
-/* RESPONSIVE CSS
--------------------------------------------------- */
-
-@media (min-width: 768px) {
-  /* Navbar positioning foo */
-  .navbar-wrapper {
-    margin-top: 20px;
-  }
-  .navbar-wrapper .container {
-    padding-right: 15px;
-    padding-left: 15px;
-  }
-  .navbar-wrapper .navbar {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  /* The navbar becomes detached from the top, so we round the corners */
-  .navbar-wrapper .navbar {
-    border-radius: 4px;
-  }
-
-  /* Bump up size of carousel content */
-  .carousel-caption p {
-    margin-bottom: 20px;
-    font-size: 21px;
-    line-height: 1.4;
-  }
-
-  .featurette-heading {
-    font-size: 30px;
-  }
-}
-
-@media (min-width: 992px) {
-  .featurette-heading {
-    margin-top: 120px;
-  }
-}