train card added

src/components/FlightCards/FlightCards.css

@@ -0,0 +1,60 @@
+ .service-card {
+    width: 15rem;
+    height: 20rem;
+    /* padding: 2em 1.5em; */
+    border-radius: 5px;
+    box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
+    cursor: pointer;
+    transition: 0.5s;
+    position: relative;
+    z-index: 2;
+    overflow: hidden;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    padding-top: 1rem;
+    padding-left: 0.5rem;
+  }
+
+  .service-card::after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(#0dcaf0, rgb(255, 23, 131));
+    position: absolute;
+    left: 0%;
+    top: -98%;
+    z-index: -2;
+    transition: all 0.4s cubic-bezier(0.77, -0.04, 0, 0.99);
+  }
+
+   .service-card:hover:after {
+    top: 0%;
+  }
+  .service-card  {
+    background-color: #ffffff;
+    color: black
+  }
+
+   .service-card:hover  {
+    color: #0dcaf0;
+  }
+
+ .service-card:hover h3 {
+    color: #ffffff;
+  }
+
+ .service-card:hover p {
+    color: #f0f0f0;
+  }
+  .trainp{
+    font-size: 26px;
+
+  }
+  .trainh{
+    font-size: 2rem;
+    font-family: serif;
+  }
+  .trainp_div{
+   margin-top: 3rem;
+  }

src/components/FlightCards/FlightCards.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import './FlightCards.css'
+function FlightCards({flight}) {
+  return (
+
+    <div class="service-card">
+
+    <h1 className='trainh'>{train.train_name}</h1>
+    <div className='trainp_div'>
+    <p className='trainp'>
+      Date: {train.next_date} 
+      </p>
+      <p className='trainp'>
+      Time: {train.train_time}
+      </p>
+      <p className='trainp'>
+      Cost: {train.cost}
+    </p>
+    </div>
+  </div>
+  )
+}
+
+export default FlightCards

src/components/FlightCards/TrainCards.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import '../FlightCards/FlightCards.css'
+function TrainCards({train}) {
+  return (
+
+    <div class="service-card">
+
+    <h1 className='trainh'>{train.train_name}</h1>
+    <div className='trainp_div'>
+    <p className='trainp'>
+      Date: {train.next_date} 
+      </p>
+      <p className='trainp'>
+      Time: {train.train_time}
+      </p>
+      <p className='trainp'>
+      Cost: {train.cost}
+    </p>
+    </div>
+  </div>
+
+  )
+}
+
+export default TrainCards

src/pages/PlaceDetailPage/PlaceDetailPage.css

@@ -130,6 +130,13 @@
     gap: 2rem;
     flex-direction: row;
 }
+.train__container
+{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    flex-direction: row;
+}
 
 @media only screen and (max-width: 1300px) {
 

src/pages/PlaceDetailPage/PlaceDetailPage.js

@@ -7,6 +7,7 @@ import BookingComponent from './BookingComponent'
 import axios from 'axios'
 import baseUrl from '../../utils/Urls'
 import HotelCards from '../../components/HotelCards/HotelCards'
+import TrainCards from '../../components/FlightCards/TrainCards'
 const PlaceDetailPage = () => {
   const[placeName,setPlaceName]=useState('')
   const[placeImage,setPlaceImage]=useState()
@@ -105,18 +106,16 @@ const PlaceDetailPage = () => {
                       </ul>
                     </div>
                     <div className="place__header_name">Trains to {placeName}
-                    <ul>
+                    <div className='train__container'>
                     {trains.map((train)=>
           train.to_place_foreign===parseInt(id)?
-            (<li className='flight_details'>
-            <p>Train Name: {train.train_name}</p>
-            <p>Train Time: {train.train_time}</p>
-            <p>Cost: {train.cost}</p>
-            <p>Next Date: {train.next_date}</p>
-          </li>):null
+            (
+              <TrainCards key={train.id} train={train}/>
+            ):null
           )
          }
-                      </ul>
+         </div>
+
                     </div>
 
                     <div className="place__header_name">Hotels in {placeName}